/* ============================================================
   The Swarm That Wasn't Supposed to Exist
   Chaos Labs research, scoped under .research-article, brand tokens.
   Accent = Chaos Blue (editorial). Ember/teal/gold/red/periwinkle are
   retained ONLY as incident data colors inside the figures.
   Fonts come from the site (next/font vars); no third-party font CDN.
   ============================================================ */

/* ---------- Tokens ---------- */
.research-article {
  box-sizing: border-box;
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6vw, 6.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Brand type: At Aero (display), Inter (body), Aeonik Fono (mono/labels) */
  --font-display: var(--font-secondary-family), 'At Aero', system-ui, sans-serif;
  --font-body: var(--font-primary-family), 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-mono-family), 'Aeonik Fono', ui-monospace, 'SF Mono', monospace;

  --radius: 4px;
  --radius-lg: 8px;
  --measure: 68ch;
  --page: 1200px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark is the default for this piece (follows the reader's system theme) */
.research-article {
  --color-bg: #0c111d;             /* neutral 900 */
  --color-bg-deep: #080b12;
  --color-surface: #182230;        /* neutral 700 */
  --color-surface-2: #1c2836;
  --color-surface-3: #22303f;
  --color-border: rgba(152, 162, 179, 0.2);
  --color-border-soft: rgba(152, 162, 179, 0.12);

  --color-text: #f2f4f7;           /* neutral 100 */
  --color-text-muted: #98a2b3;     /* neutral 300 */
  --color-text-faint: #667085;

  --color-accent: #2d6ae7;         /* Chaos Blue (editorial accent */
  --color-accent-soft: #5b8aee;
  --color-accent-dim: rgba(45, 106, 231, 0.16);
  --color-accent-line: rgba(45, 106, 231, 0.42);

  /* Incident data colors) figures only (semantic color law) */
  --color-attacker: #e8763a;       /* ember (the attacking swarm */
  --color-attacker-soft: #f0a173;
  --color-attacker-dim: rgba(232, 118, 58, 0.16);
  --color-attacker-line: rgba(232, 118, 58, 0.42);
  --color-agent: #4bb3a8;          /* teal) agent coordination */
  --color-agent-dim: rgba(75, 179, 168, 0.14);
  --color-danger: #d8564f;         /* red (compromise events */
  --color-danger-dim: rgba(216, 86, 79, 0.14);
  --color-gold: #cfa74a;           /* gold) defender signals missed */
  --color-gold-dim: rgba(207, 167, 74, 0.14);
  --color-ext: #7f8cd6;            /* periwinkle (third-party infra */
  --color-ext-dim: rgba(127, 140, 214, 0.14);

  /* Hero swarm canvas (hex only) the canvas can't parse rgba()) */
  --swarm-hub: #e8763a;
  --swarm-node: #4bb3a8;
  --swarm-faint: #667085;

  --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -24px rgba(0,0,0,0.8);
  --grid-line: rgba(255, 255, 255, 0.035);
}

/* Light theme follows the reader's system preference (no in-page toggle) */
@media (prefers-color-scheme: light) {
  .research-article {
    --color-bg: #ffffff;           /* neutral 0 */
    --color-bg-deep: #f2f4f7;      /* neutral 100 */
    --color-surface: #ffffff;
    --color-surface-2: #f8fafc;
    --color-surface-3: #f2f4f7;
    --color-border: rgba(152, 162, 179, 0.28);
    --color-border-soft: rgba(152, 162, 179, 0.16);

    --color-text: #182230;         /* neutral 700 */
    --color-text-muted: #475467;   /* neutral 500 */
    --color-text-faint: #98a2b3;   /* neutral 300 */

    --color-accent: #2d6ae7;       /* Chaos Blue holds on white */
    --color-accent-soft: #2159c9;
    --color-accent-dim: rgba(45, 106, 231, 0.1);
    --color-accent-line: rgba(45, 106, 231, 0.34);

    --color-attacker: #b4471a;
    --color-attacker-soft: #c85d2e;
    --color-attacker-dim: rgba(180, 71, 26, 0.1);
    --color-attacker-line: rgba(180, 71, 26, 0.34);
    --color-agent: #10736c;
    --color-agent-dim: rgba(16, 115, 108, 0.1);
    --color-danger: #a8322c;
    --color-danger-dim: rgba(168, 50, 44, 0.09);
    --color-gold: #8a6d18;
    --color-gold-dim: rgba(138, 109, 24, 0.1);
    --color-ext: #464f9e;
    --color-ext-dim: rgba(70, 79, 158, 0.1);

    --swarm-hub: #b4471a;
    --swarm-node: #10736c;
    --swarm-faint: #98a2b3;

    --shadow: 0 1px 2px rgba(20,18,15,0.04), 0 14px 34px -22px rgba(20,18,15,0.24);
    --grid-line: rgba(0, 0, 0, 0.04);
  }
}

/* ---------- Reset ---------- */
.research-article *, .research-article *::before, .research-article *::after { box-sizing: border-box; }
.research-article { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .research-article { scroll-behavior: auto; }
  .research-article *, .research-article *::before, .research-article *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
.research-article {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (not hidden) contains horizontal overflow without becoming a scroll
     container, which would break the sticky TOC sidebar. */
  overflow-x: clip;
}
.research-article img, .research-article svg { max-width: 100%; display: block; }
.research-article a { color: inherit; }
.research-article h1, .research-article h2, .research-article h3, .research-article h4 { margin: 0; line-height: 1.08; text-wrap: balance; }
.research-article p { margin: 0; text-wrap: pretty; }
.research-article ::selection { background: var(--color-accent); color: #fff; }

/* ---------- Layout primitives ---------- */
.research-article .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-16)); }
.research-article .measure { max-width: var(--measure); }
.research-article .prose > * + * { margin-top: var(--space-6); }

.research-article section { position: relative; }
.research-article .section-pad { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }

/* ---------- Skip link ---------- */
.research-article .skip {
  position: absolute; left: -9999px; top: var(--space-2);
  background: var(--color-accent); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius); font-size: var(--text-sm); z-index: 200;
}
.research-article .skip:focus { left: var(--space-4); }
.research-article :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- Header ---------- */
.research-article .masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--color-bg) 97%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--color-border-soft);
}
.research-article .masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); height: 60px;
}
.research-article .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.research-article .brand-name {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text);
  font-weight: 500;
}
.research-article .brand svg { width: 24px; height: 24px; color: var(--color-accent); flex: none; }
.research-article .masthead-tools { display: flex; align-items: center; gap: var(--space-2); }
.research-article .mh-link {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted); text-decoration: none;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.research-article .mh-link:hover { color: var(--color-text); background: var(--color-surface-2); }
@media (max-width: 640px) { .research-article .mh-link.hide-sm { display: none; } }

.research-article .theme-toggle {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius); color: var(--color-text-muted);
  cursor: pointer; transition: all 0.2s var(--ease); flex: none;
}
.research-article .theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent-line); }
.research-article .theme-toggle svg { width: 15px; height: 15px; }
.research-article [data-theme='dark'] .icon-sun, .research-article:not([data-theme='light']) .icon-sun { display: none; }
.research-article [data-theme='light'] .icon-moon { display: none; }

/* Reading progress */
.research-article .progress {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft));
  transition: width 0.1s linear;
}

/* ============================================================
   HERO
   ============================================================ */
.research-article .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border-soft); }
.research-article .hero-bg { position: absolute; inset: 0; z-index: 0; }
.research-article #swarm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.75; }
.research-article .hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 30%, transparent 78%);
}
.research-article .hero-glow {
  position: absolute; left: 50%; top: -10%; width: min(1000px, 120vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--color-attacker-dim) 0%, transparent 62%);
  pointer-events: none;
}
.research-article .hero-inner { position: relative; z-index: 2; padding-block: clamp(var(--space-16), 11vh, var(--space-32)) clamp(var(--space-12), 8vh, var(--space-24)); }

.research-article .eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--space-6);
}
.research-article .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-dim);
  animation: swarm-pulse 2.6s var(--ease) infinite;
}
/* Scoped name: @keyframes are global; the site's keyfeatures.css also defines
   `pulse`, so this must not collide. */
@keyframes swarm-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--color-accent-dim); opacity: 1; }
  50% { box-shadow: 0 0 0 8px transparent; opacity: 0.55; }
}

.research-article .hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-bottom: var(--space-6);
}
.research-article .hero h1 em {
  font-style: normal;
  color: var(--color-accent);
}
.research-article .hero-standfirst {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.5;
}
.research-article .hero-standfirst strong { color: var(--color-text); font-weight: 500; }

.research-article .byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  margin-top: var(--space-10); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; color: var(--color-text-faint);
  text-transform: uppercase;
}
.research-article .byline .author { color: var(--color-text); }
.research-article .byline a { color: var(--color-text-muted); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.research-article .byline a:hover { color: var(--color-accent); border-color: var(--color-accent-line); }

/* ============================================================
   STAT BAND
   ============================================================ */
.research-article .statband { background: var(--color-bg-deep); border-bottom: 1px solid var(--color-border-soft); }
.research-article .stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--color-border-soft);
  border-inline: 1px solid var(--color-border-soft);
}
.research-article .stat {
  background: var(--color-bg-deep); padding: var(--space-8) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.research-article .stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem);
  letter-spacing: -0.03em; line-height: 1; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.research-article .stat-num span { color: var(--color-accent); }
.research-article .stat-label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-faint); letter-spacing: 0.04em; line-height: 1.45;
}

/* ============================================================
   ARTICLE TYPOGRAPHY
   ============================================================ */
.research-article .article { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
/* Per-section blocks are single-column now; the TOC gutter is provided once at
   the whole-article level (.rk-toc-layout). The legacy in-block spacer
   (<div></div>) collapses to a 0-height row. */
.research-article .article-layout {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* Whole-article TOC gutter: one grid spanning every section so the ArticleToc
   sidebar is sticky through the entire read (the blog pattern). Shown from
   1080px up, comfortably covers laptop widths (a MacBook 14" is 1512px, so the
   old 1536px gate hid it on most screens). */
.research-article .rk-toc-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.research-article .rk-content { min-width: 0; }
@media (min-width: 1080px) {
  .research-article .rk-toc-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(1.5rem, 3.5vw, 4rem);
    /* Center the whole two-column block within page gutters so the TOC isn't
       flush against the viewport edge. */
    max-width: 1640px; margin-inline: auto;
    padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
    transition: grid-template-columns 0.22s ease, column-gap 0.22s ease, max-width 0.28s ease;
  }
  .research-article .rk-toc-layout.is-toc-collapsed {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: clamp(0.75rem, 2vw, 1.25rem);
    max-width: 1760px;
  }
}
@media (min-width: 1440px) {
  .research-article .rk-toc-layout { grid-template-columns: 268px minmax(0, 1fr); }
  .research-article .rk-toc-layout.is-toc-collapsed {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

/* Focus mode (TOC collapsed): wider reading column + slightly larger type.
   Mirrors kit rk-toc.css so the live article cascade keeps the effect. */
@media (min-width: 1080px) {
  .research-article.is-toc-collapsed {
    --measure: 80ch;
    --page: 1360px;
    --text-xs: clamp(0.78rem, 0.72rem + 0.28vw, 0.9rem);
    --text-sm: clamp(0.93rem, 0.86rem + 0.38vw, 1.06rem);
    --text-base: clamp(1.0625rem, 1rem + 0.32vw, 1.2rem);
    --text-lg: clamp(1.2rem, 1.06rem + 0.85vw, 1.62rem);
    --text-xl: clamp(1.62rem, 1.28rem + 1.35vw, 2.45rem);
    --text-2xl: clamp(2.15rem, 1.3rem + 2.65vw, 3.7rem);
  }
  .research-article.is-toc-collapsed .measure {
    max-width: var(--measure);
    transition: max-width 0.28s var(--ease);
  }
  .research-article.is-toc-collapsed .wrap {
    max-width: var(--page);
    transition: max-width 0.28s var(--ease);
  }
  .research-article.is-toc-collapsed .prose > * + * {
    margin-top: calc(var(--space-6) * 1.1);
  }
  .research-article.is-toc-collapsed .prose p,
  .research-article.is-toc-collapsed .prose li {
    line-height: 1.72;
  }
  .research-article.is-toc-collapsed .breakout {
    width: calc(100% + clamp(0px, 8vw, 180px));
  }
  .research-article.is-toc-collapsed .section-pad > .wrap {
    max-width: min(var(--page), 100%);
  }
}

/* TOC: ArticleToc renders in the .rk-toc aside. Sticky sidebar from 1080px, hidden
   below (where it would crowd the reading column). It scrolls internally when
   the entry list is taller than the viewport, so every section stays reachable
   on short screens.

   Scrollbar: stable thin gutter always (no layout shift). Thumb/track transparent
   at rest; visible on :hover and :focus-within (keyboard tab into links).
   Canonical kit copy: public/research/kit/rk-toc.css (Lane D). Mirrored here
   because Wave 1 left article styles.css as the live cascade after kit CSS. */
.research-article .rk-toc { display: none; }
@media (min-width: 1080px) {
  .research-article .rk-toc {
    display: block; position: sticky; top: 92px;
    max-height: calc(100vh - 92px - var(--space-6));
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    /* Firefox: keep thin gutter; invisible thumb+track at rest */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .research-article .rk-toc:hover,
  .research-article .rk-toc:focus-within {
    scrollbar-color: var(--color-text-faint) transparent;
  }
  /* WebKit: fixed-width gutter always so paint alone does not shift content */
  .research-article .rk-toc::-webkit-scrollbar { width: 7px; }
  .research-article .rk-toc::-webkit-scrollbar-track { background: transparent; }
  .research-article .rk-toc::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }
  .research-article .rk-toc:hover::-webkit-scrollbar-thumb,
  .research-article .rk-toc:focus-within::-webkit-scrollbar-thumb {
    background: var(--color-text-faint);
  }

  /* Single-row header: title left · compact icon+label pill right */
  .research-article .rk-toc-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 8px;
    width: 100%;
    min-height: 22px;
  }
  .research-article .rk-toc-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .research-article .rk-toc-toggle {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    height: 22px;
    padding: 0 6px 0 5px;
    margin: 0;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-faint);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .research-article .rk-toc-toggle:hover {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  }
  .research-article .rk-toc-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  .research-article .rk-toc-toggle-icon {
    display: inline-flex;
    flex: none;
    width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  .research-article .rk-toc-toggle-icon svg {
    display: block;
    width: 12px;
    height: 12px;
  }
  .research-article .rk-toc-toggle-label {
    display: inline;
    line-height: 1;
    font-size: 9px;
  }
  .research-article .rk-toc-toggle-label--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .research-article .rk-toc.is-collapsed,
  .research-article .rk-toc-nav.is-collapsed {
    overflow: visible;
  }
  .research-article .rk-toc-nav.is-collapsed {
    border: none;
    padding: 0;
    gap: 0;
    align-items: center;
  }
  .research-article .rk-toc-nav.is-collapsed .rk-toc-header {
    justify-content: center;
    width: auto;
  }
  .research-article .rk-toc-nav.is-collapsed .rk-toc-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    gap: 0;
  }
  .research-article .rk-toc-list[hidden] {
    display: none !important;
  }
}

.research-article h2.h {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); letter-spacing: -0.025em;
  margin-top: clamp(var(--space-16), 7vw, var(--space-24));
  margin-bottom: var(--space-6); scroll-margin-top: 90px;
  display: flex; align-items: baseline; gap: var(--space-4);
}
.research-article h2.h .num {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  color: var(--color-accent); letter-spacing: 0.1em; flex: none;
  padding-top: 0.3em;
}
.research-article h3.h3 {
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg);
  letter-spacing: -0.01em; margin-top: var(--space-12); margin-bottom: var(--space-4);
  scroll-margin-top: 90px;
}
.research-article h4.h4 {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent);
  margin-top: var(--space-10); margin-bottom: var(--space-3);
}
.research-article .prose p { color: var(--color-text-muted); }
.research-article .prose p.lead {
  font-size: var(--text-lg); color: var(--color-text); line-height: 1.5;
}
.research-article .prose strong { color: var(--color-text); font-weight: 700; }
.research-article .prose a {
  color: var(--color-text); text-decoration: none;
  border-bottom: 1px solid var(--color-accent-line);
  transition: all 0.15s var(--ease);
}
.research-article .prose a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.research-article .prose code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--color-surface-2); border: 1px solid var(--color-border-soft);
  padding: 0.12em 0.42em; border-radius: 3px; color: var(--color-text);
  word-break: break-word;
}
.research-article .prose ul, .research-article .prose ol { margin: 0; padding-left: var(--space-5); color: var(--color-text-muted); }
.research-article .prose li + li { margin-top: var(--space-3); }
.research-article .prose li::marker { color: var(--color-accent); }

/* Drop cap on first graf */
.research-article .dropcap::first-letter {
  font-family: var(--font-display); font-weight: 800; float: left;
  font-size: 3.3em; line-height: 0.82; padding-right: 0.09em;
  margin-top: 0.06em; color: var(--color-accent);
}

/* Pull quote */
.research-article .pullquote {
  margin-block: clamp(var(--space-10), 5vw, var(--space-16));
  padding-left: clamp(var(--space-5), 3vw, var(--space-8));
  border-left: 2px solid var(--color-accent);
}
.research-article .pullquote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.28; letter-spacing: -0.02em; color: var(--color-text);
  text-wrap: balance;
}
.research-article .pullquote cite {
  display: block; margin-top: var(--space-4); font-style: normal;
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-faint);
}

/* Chain-of-thought / terminal: owned by public/research/kit/rk-terminal.css (Lane A).
 * Removed from article CSS so kit cascade wins when kit loads before this file. */

/* Callout */
.research-article .callout {
  background: var(--color-accent-dim); border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-lg); padding: var(--space-6);
  margin-block: var(--space-10);
}
.research-article .callout-title {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: var(--space-3);
}
.research-article .callout p { color: var(--color-text); font-size: var(--text-sm); }
.research-article .callout p + p { margin-top: var(--space-3); }

/* Figure */
.research-article figure { margin: 0; }
.research-article .fig { margin-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.research-article .fig-frame {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.research-article .fig-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-2);
}
.research-article .fig-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
.research-article .fig-head span {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted);
}
.research-article .fig-body { padding: clamp(var(--space-5), 3vw, var(--space-8)); }
.research-article figcaption {
  margin-top: var(--space-5);
  padding: 0 0.15em;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.65;
  font-family: var(--font-mono);
  max-width: 72ch;
}
/* Captions nested inside the frame (not in .fig-body) need their own inset —
   otherwise they sit flush against the rounded border. Prefer sibling under
   .fig-frame when possible (board reconstruction, Figures 4–5). */
.research-article .fig-frame > figcaption {
  margin-top: 0;
  max-width: none;
  padding: var(--space-5) clamp(var(--space-5), 3vw, var(--space-8))
    clamp(var(--space-5), 3vw, var(--space-6));
  border-top: 1px solid var(--color-border-soft);
}
.research-article figcaption b { color: var(--color-text-muted); font-weight: 500; }

/* Breakout width for figures */
@media (min-width: 900px) {
  .research-article .breakout { width: calc(100% + clamp(0px, 6vw, 140px)); }
}

/* ============================================================
   TIMELINE
   ============================================================ */
.research-article .timeline-section { background: var(--color-bg-deep); border-block: 1px solid var(--color-border-soft); }
.research-article .section-head { margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); max-width: 62ch; }
.research-article .section-kicker {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: var(--space-4);
}
.research-article .section-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -0.035em; margin-bottom: var(--space-5);
  scroll-margin-top: 90px;
}
.research-article .section-head p { color: var(--color-text-muted); font-size: var(--text-base); }

.research-article .tl { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.research-article .tl::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-border) 6%, var(--color-border) 94%, transparent);
}
@media (min-width: 860px) {
  .research-article .tl::before { left: 152px; }
}
.research-article .rk-tl-phase {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--color-text-faint);
  padding-left: 34px; position: relative; margin-top: var(--space-6);
}
.research-article .rk-tl-phase::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 1px;
  background: var(--color-border);
}
@media (min-width: 860px) { .research-article .rk-tl-phase { padding-left: 186px; } .research-article .rk-tl-phase::before { left: 152px; } }
.research-article .rk-tl-phase b { color: var(--color-attacker); font-weight: 500; }

.research-article .rk-tl-item {
  position: relative; padding-left: 34px;
  display: grid; gap: var(--space-2);
}
@media (min-width: 860px) {
  .research-article .rk-tl-item {
    grid-template-columns: 152px minmax(0, 1fr);
    padding-left: 0; gap: var(--space-8); align-items: start;
  }
  .research-article .rk-tl-item > .rk-tl-date { text-align: right; padding-right: var(--space-8); }
}
.research-article .rk-tl-item::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--color-bg-deep); border: 1px solid var(--color-border);
  z-index: 1;
}
.research-article .rk-tl-item::after {
  content: ''; position: absolute; left: 5px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-text-faint); z-index: 2;
}
@media (min-width: 860px) {
  .research-article .rk-tl-item::before { left: 145px; }
  .research-article .rk-tl-item::after { left: 150px; }
}
.research-article .rk-tl-item[data-sev='high']::after { background: var(--color-attacker); box-shadow: 0 0 0 3px var(--color-attacker-dim); }
.research-article .rk-tl-item[data-sev='crit']::after { background: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-dim); }
.research-article .rk-tl-item[data-sev='agent']::after { background: var(--color-agent); box-shadow: 0 0 0 3px var(--color-agent-dim); }
.research-article .rk-tl-item[data-sev='fix']::after { background: var(--color-agent); }

.research-article .rk-tl-date {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  color: var(--color-text); letter-spacing: 0.02em; white-space: nowrap;
}
.research-article .rk-tl-date small { display: block; color: var(--color-text-faint); font-weight: 400; margin-top: 2px; letter-spacing: 0.06em; }
.research-article .rk-tl-body h4 {
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  color: var(--color-text); margin-bottom: var(--space-2); line-height: 1.3;
}
.research-article .rk-tl-body p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
/* === AUDIT-LANE-B-TIMELINE === bullets + infra logo row (Wave 2B) */
.research-article .rk-tl-bullets {
  margin: 0 0 var(--space-2); padding-left: 1.15em; list-style: disc;
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55;
}
.research-article .rk-tl-bullets li { margin: 0.2em 0; padding-left: 0.15em; }
.research-article .rk-tl-bullets li::marker { color: var(--color-text-faint); }
.research-article .rk-tl-bullets code {
  font-family: var(--font-mono); font-size: 0.92em; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  border-radius: 3px; padding: 0 0.3em;
}
.research-article .rk-tl-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-3);
}
.research-article .rk-tl-logo {
  width: 18px; height: 18px; object-fit: contain; border-radius: 3px;
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  padding: 2px; box-sizing: content-box; opacity: 0.92;
}
.research-article .rk-tl-logo:hover,
.research-article .rk-tl-logo:focus-visible { opacity: 1; }
html[data-theme="dark"] .research-article .rk-tl-logo,
body.theme-dark .research-article .rk-tl-logo {
  background: color-mix(in srgb, var(--color-surface) 88%, #fff 12%);
  border-color: var(--color-border);
}
/* === /AUDIT-LANE-B-TIMELINE === */
.research-article .rk-tl-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.research-article .tag {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 3px;
  border: 1px solid var(--color-border); color: var(--color-text-faint);
  background: var(--color-surface); white-space: nowrap;
}
.research-article .tag.t-agent { color: var(--color-agent); border-color: var(--color-agent-dim); background: var(--color-agent-dim); }
.research-article .tag.t-exp { color: var(--color-attacker); border-color: var(--color-attacker-line); background: var(--color-attacker-dim); }
.research-article .tag.t-crit { color: var(--color-danger); border-color: var(--color-danger-dim); background: var(--color-danger-dim); }
.research-article .tag.t-ext { color: var(--color-ext); border-color: var(--color-ext-dim); background: var(--color-ext-dim); }
.research-article .tag.t-fix { color: var(--color-gold); border-color: var(--color-gold-dim); background: var(--color-gold-dim); }

/* Message board + protocol legend: owned by public/research/kit/rk-terminal.css (Lane A). */

/* ============================================================
   EXPLOIT CHAIN
   ============================================================ */
.research-article .chain-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.research-article .chain-tab {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; padding: var(--space-3) var(--space-5);
  background: transparent; border: 1px solid var(--color-border);
  color: var(--color-text-muted); border-radius: var(--radius);
  cursor: pointer; transition: all 0.2s var(--ease);
}
.research-article .chain-tab:hover { color: var(--color-text); border-color: var(--color-text-faint); }
.research-article .chain-tab[aria-selected='true'] {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.research-article .chain-panel[hidden] { display: none; }

.research-article .chain {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  counter-reset: step;
}
.research-article .step {
  position: relative; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  min-height: 100%;
}
.research-article .step:hover { border-color: var(--color-attacker-line); transform: translateY(-2px); }
.research-article .step-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap;
}
.research-article .step-meta {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
}
.research-article .step-idx {
  counter-increment: step;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  color: var(--color-attacker); letter-spacing: 0.06em;
}
.research-article .step-idx::before { content: 'STEP ' counter(step, decimal-leading-zero); }
.research-article .step-date {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-faint);
  white-space: nowrap;
}
.research-article .step-badge {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 6px; border-radius: 3px;
  border: 1px solid var(--color-border); color: var(--color-text-faint);
  white-space: nowrap;
}
.research-article .step h4 {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 700;
  color: var(--color-text); line-height: 1.3; margin: 0;
}
.research-article .step p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.65; margin: 0; }
/* Glanceable bullets — replace wall-of-text bodies */
.research-article .step-bullets {
  margin: 0;
  padding-left: 1.05em;
  list-style: disc;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.research-article .step-bullets li { margin: 0.15em 0; padding-left: 0.1em; }
.research-article .step-bullets li::marker { color: var(--color-text-faint); }
.research-article .step-bullets code {
  font-family: var(--font-mono); font-size: 0.92em; color: var(--color-text);
  background: var(--color-surface-2); border: 1px solid var(--color-border-soft);
  border-radius: 3px; padding: 0 0.28em;
}
.research-article .step-bullets em { font-style: italic; color: var(--color-text); }
.research-article .step-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 2px;
}
.research-article .step-logo {
  width: 18px; height: 18px; object-fit: contain; border-radius: 4px;
  background: color-mix(in srgb, var(--color-surface-2, var(--color-surface)) 88%, #fff 12%);
  border: 1px solid var(--color-border-soft); padding: 2px; box-sizing: content-box;
  opacity: 0.95;
}
.research-article .step-logo:hover { opacity: 1; }
.research-article .step .prim {
  margin-top: auto; padding-top: var(--space-3); border-top: 1px dashed var(--color-border-soft);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-attacker);
  letter-spacing: 0.04em;
}
.research-article .chain-panel > figcaption {
  margin-top: var(--space-6);
  max-width: 72ch;
}

/* ============================================================
   ASYMMETRY / DEFENSE
   ============================================================ */
.research-article .asym { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.research-article .asym-col {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); background: var(--color-surface);
}
.research-article .asym-col[data-side='off'] { border-color: var(--color-attacker-line); background: linear-gradient(180deg, var(--color-attacker-dim), transparent 40%), var(--color-surface); }
.research-article .asym-col h4 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  margin-bottom: var(--space-2); letter-spacing: -0.02em;
}
.research-article .asym-col .sub { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-5); }
.research-article .loop { display: flex; flex-direction: column; gap: var(--space-2); }
.research-article .loop-step {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-muted);
  padding: var(--space-3); border-radius: var(--radius);
  background: var(--color-surface-2); border: 1px solid var(--color-border-soft);
}
.research-article .loop-step .mark {
  font-family: var(--font-mono); font-size: var(--text-xs); flex: none;
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px;
}
.research-article .loop-step[data-auto='yes'] .mark { background: var(--color-attacker); color: #fff; }
.research-article .loop-step[data-auto='no'] .mark { background: var(--color-surface-3); color: var(--color-text-faint); border: 1px solid var(--color-border); }
.research-article .loop-step[data-auto='partial'] .mark { background: var(--color-gold-dim); color: var(--color-gold); border: 1px solid var(--color-gold-dim); }

/* ============================================================
   TAKEAWAYS
   ============================================================ */
.research-article .cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.research-article .card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color 0.25s var(--ease);
}
.research-article .card:hover { border-color: var(--color-accent-line); }
.research-article .card-idx {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent);
  letter-spacing: 0.1em;
}
.research-article .card h4 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.research-article .card p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================
   SOURCES + FOOTER
   ============================================================ */
.research-article .sources { background: var(--color-bg-deep); border-top: 1px solid var(--color-border-soft); }
.research-article .rk-src-list { display: grid; gap: 1px; background: var(--color-border-soft); border: 1px solid var(--color-border-soft); border-radius: var(--radius); overflow: hidden; }
/* Numbered reference row: [num + favicon] | link(title/meta + ext icon) | back-ref */
.research-article .rk-src {
  position: relative; background: var(--color-bg-deep);
  padding: var(--space-4) var(--space-5);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  align-items: start; scroll-margin-top: 96px;
  transition: background 0.2s var(--ease);
}
.research-article .rk-src:hover { background: var(--color-surface); }
.research-article .rk-src:target { background: var(--color-accent-dim); box-shadow: inset 3px 0 0 var(--color-accent); }
.research-article .rk-src-lead {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: 1px;
}
.research-article .rk-src-num {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  color: var(--color-text-faint); min-width: 1.4em; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Theme-aware chip (Lane C): no hard #fff plate on dark. */
.research-article .rk-src-favicon {
  width: 20px; height: 20px; border-radius: 3px; flex: none;
  object-fit: contain; box-sizing: border-box; padding: 2px;
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
}
.research-article .rk-src-favicon[data-plate="light"] {
  background: #fff;
}
@media (prefers-color-scheme: light) {
  .research-article .rk-src-favicon[data-plate="light"] {
    background: var(--color-surface);
  }
}
/* Source row chrome lives in public/research/kit/rk-resources.css
   (title hierarchy, Open pill, meta line, Back to text). Do not reintroduce
   absolute-positioned ext-icon / bare ↩ here; they collided with hierarchy. */

/* Inline citation superscript + external-link glyph on prose links */
.research-article sup.rk-cite { line-height: 0; white-space: nowrap; }
.research-article sup.rk-cite a {
  font-family: var(--font-mono); font-size: 0.62em; font-weight: 700;
  color: var(--color-accent); text-decoration: none;
  padding: 0 0.15em 0 0.25em; vertical-align: super;
}
.research-article sup.rk-cite a:hover { text-decoration: underline; }
/* External-link glyph on ANY inline link (source rows override above with an
   absolute 12px icon; higher specificity wins). Without this global rule the
   SVG has no intrinsic size and renders huge outside .prose/.takeaway. */
.research-article a .rk-ext-icon {
  width: 0.72em; height: 0.72em; margin-left: 0.16em; vertical-align: baseline;
  color: var(--color-text-faint); display: inline-block; flex: none;
}
.research-article a:hover .rk-ext-icon { color: var(--color-accent); }
/* The hero byline CTA already carries a textual ↗, don't double it. */
.research-article .byline a .rk-ext-icon { display: none; }

.research-article footer.site {
  border-top: 1px solid var(--color-border-soft); background: var(--color-bg);
  padding-block: var(--space-16);
}
.research-article .foot-inner { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: flex-end; }
.research-article .foot-note { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 52ch; line-height: 1.7; font-family: var(--font-mono); }
.research-article .foot-links { display: flex; gap: var(--space-5); }
.research-article .foot-links a {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-text-muted); text-decoration: none;
}
.research-article .foot-links a:hover { color: var(--color-accent); }

/* ---------- Scroll reveal ---------- */
.research-article .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.research-article .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .research-article .reveal { opacity: 1; transform: none; } }

/* ============================================================
   MISSED SIGNALS TABLE (Figure 5) — detection playbook
   ============================================================ */
.research-article .missed {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
}
.research-article .missed-legend {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-bg-deep);
}
.research-article .missed-row {
  display: grid;
  gap: var(--space-3) var(--space-6);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--color-border-soft);
  border-left: 2px solid var(--color-gold);
}
.research-article .missed-row:last-child { border-bottom: 0; }
.research-article .missed-row:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
}
.research-article .missed-row[data-sev="burst"] { border-left-color: var(--color-attacker); }
.research-article .missed-row[data-sev="blast"] { border-left-color: var(--color-danger); }
.research-article .missed-row[data-sev="chronic"] { border-left-color: var(--color-gold); }

.research-article .missed-sig {
  font-family: var(--font-body);
  font-size: inherit;
  line-height: 1.4;
  color: var(--color-text);
  position: relative;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.research-article .missed-sig::before { display: none; }
.research-article .missed-domain {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.28em 0.5em;
  border-radius: 2px;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-surface-3) 70%, transparent);
  border: 1px solid var(--color-border-soft);
}
.research-article .missed-sig h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}
.research-article .missed-fix {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.research-article .missed-fix li {
  position: relative;
  padding-left: 0.85rem;
}
.research-article .missed-fix li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
  font-weight: 700;
}
.research-article .missed-fix strong {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-right: 0.25em;
}
.research-article .missed-fix em { color: var(--color-text); font-style: italic; }

@media (max-width: 720px) {
  .research-article .missed-row { grid-template-columns: 1fr; padding: var(--space-4); }
  .research-article .missed-fix {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: var(--space-3);
  }
}

/* ============================================================
   PROTOCOL INVENTORY LIST (board section)
   ============================================================ */
.research-article .prose ul.proto-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
}
.research-article .prose ul.proto-list li {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-soft);
  font-family: var(--font-body);
}
.research-article .prose ul.proto-list li:last-child { border-bottom: 0; }
.research-article .prose ul.proto-list li strong {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-agent);
  margin-right: 0.2em;
}

/* ============================================================
   RESTRAINT CARDS (§08 capability matrix)
   ============================================================ */
.research-article .cards--restraint {
  gap: var(--space-4);
}
.research-article .card--restraint {
  gap: var(--space-3);
  border-top: 2px solid var(--color-gold);
  background: var(--color-surface);
}
.research-article .card--restraint:hover {
  border-color: var(--color-border);
  border-top-color: var(--color-gold);
}
.research-article .card--restraint .card-idx {
  color: var(--color-gold);
}
.research-article .restraint-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.35em 0.55em;
  border-radius: 2px;
  color: var(--color-gold);
  background: var(--color-gold-dim);
  border: 1px solid color-mix(in srgb, var(--color-gold) 35%, transparent);
}
.research-article .restraint-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.research-article .restraint-list li {
  position: relative;
  padding-left: 0.9rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.research-article .restraint-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
  font-weight: 700;
}
.research-article .restraint-list code {
  font-size: 0.8125em;
}
.research-article .restraint-list em {
  color: var(--color-text);
  font-style: italic;
}

/* ============================================================
   VERDICT / BLUF BLOCK
   ============================================================ */
.research-article .verdict-section {
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-border-soft);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
  position: relative;
}
.research-article .verdict-section::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-line) 20%, var(--color-accent-line) 80%, transparent);
}
.research-article .verdict {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  align-items: start;
}
.research-article .verdict-kicker {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--color-accent); margin-bottom: var(--space-6);
}
.research-article .verdict-list { list-style: none; margin: 0; padding: 0; }
.research-article .verdict-list li { border-top: 1px solid var(--color-border-soft); }
.research-article .verdict-list li:first-child { border-top: 0; }
.research-article .verdict-list a {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-5) 0;
  text-decoration: none; border: 0; color: inherit;
  transition: background 0.22s var(--ease), padding-left 0.22s var(--ease);
}
.research-article .verdict-list a:hover { background: var(--color-surface); padding-left: var(--space-4); }
.research-article .v-idx {
  grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-faint); padding-top: 0.35em;
  transition: color 0.22s var(--ease);
}
.research-article .verdict-list a:hover .v-idx { color: var(--color-accent); }
.research-article .v-claim {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.3; letter-spacing: -0.015em; color: var(--color-text);
  text-wrap: balance;
}
.research-article .v-sub {
  font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted);
  max-width: 56ch;
}
.research-article .verdict-aside {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  border-left: 1px solid var(--color-border);
}
.research-article .va-label {
  font-family: var(--font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--color-text-faint); margin-bottom: var(--space-2);
}
.research-article .va-block p {
  font-size: var(--text-sm); line-height: 1.65;
  color: var(--color-text-muted); margin: 0;
}
.research-article .va-block a { color: var(--color-accent); }

@media (max-width: 900px) {
  .research-article .verdict { grid-template-columns: 1fr; }
  .research-article .verdict-aside {
    border-left: 0; border-top: 1px solid var(--color-border);
    padding: var(--space-8) 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-8);
  }
}
@media (max-width: 560px) {
  .research-article .verdict-list a { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
}

/* ============================================================
   SECTION TAKEAWAY (BLUF per section)
   ============================================================ */
.research-article .prose .takeaway {
  margin: calc(var(--space-2) * -1) 0 var(--space-10);
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.1875rem);
  line-height: 1.45;
  letter-spacing: -0.011em;
  color: var(--color-text);
  text-wrap: pretty;
}

/* ============================================================
   MONDAY CHECKLIST
   ============================================================ */
.research-article .prose ol.monday {
  list-style: none; counter-reset: mon;
  margin: var(--space-8) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.research-article .prose ol.monday li {
  counter-increment: mon;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5) 0;
  margin: 0;
  border-top: 1px solid var(--color-border-soft);
}
.research-article .prose ol.monday li:first-child { border-top: 1px solid var(--color-border); }
.research-article .prose ol.monday li:last-child { border-bottom: 1px solid var(--color-border); }
.research-article .prose ol.monday li::before {
  content: counter(mon, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-accent); padding-top: 0.3em;
}
.research-article .m-do {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-base); line-height: 1.4;
  letter-spacing: -0.012em; color: var(--color-text);
}
.research-article .m-why {
  font-size: var(--text-sm); line-height: 1.6;
  color: var(--color-text-muted); max-width: 60ch;
}
@media (max-width: 560px) {
  .research-article .prose ol.monday li { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
}