/* ==========================================================================
   Nyquist — Research article layer
   Loaded AFTER nyquist.css + tenity.css. Long-form reading template that
   adopts the landing's hairline-editorial system: Inter Tight + JetBrains
   Mono, ★ marks, accent #2D6BFF used sparingly, generous whitespace.
   ========================================================================== */

/* ---------- shared eyebrow ---------- */
.kicker{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:baseline; gap:10px;
}
.kicker .ast{ color:var(--accent) }
.kicker b{ color:var(--ink); font-weight:500 }

/* ---------- breadcrumb ---------- */
.crumbs{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.crumbs a{ color:var(--ink-3) }
.crumbs a:hover{ color:var(--ink) }
.crumbs .sep{ color:var(--line-2) }
.crumbs .here{ color:var(--ink) }

/* ============ ARTICLE MASTHEAD ============ */
.art-head{ padding-top:150px; padding-bottom:0 }
.art-head .kicker{ margin:28px 0 26px }
.art-head h1{
  font-size:clamp(36px, 5.4vw, 72px); font-weight:600;
  letter-spacing:-0.045em; line-height:1.0; max-width:17ch;
}
.art-head h1 em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.art-head .standfirst{
  margin-top:36px; max-width:64ch;
  font-size:clamp(18.5px, 1.7vw, 21px); line-height:1.55; color:var(--ink-2); font-weight:400;
}
.art-head .standfirst em{ font-style:italic; color:var(--ink) }

/* meta strip — mono key/value, hairline separated */
.art-meta{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  margin-top:56px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.art-meta > div{ padding:22px 28px 24px; border-left:1px solid var(--hair) }
.art-meta > div:first-child{ border-left:none; padding-left:0 }
.art-meta .k{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.art-meta .v{
  margin-top:10px; font-size:15px; line-height:1.4; color:var(--ink); font-weight:500;
  letter-spacing:-0.01em;
}
.art-meta .v.mono{
  font-family:var(--font-mono); font-weight:400; font-size:13px;
  letter-spacing:0; text-transform:none; color:var(--ink-2);
}

/* ============ BODY GRID — sticky TOC + reading column ============ */
.art-wrap{ padding-top:var(--rule-half); padding-bottom:var(--rule-half) }
.art-grid{
  display:grid; grid-template-columns: 220px minmax(0, 1fr); gap:80px;
  align-items:start;
}

/* ---- table of contents ---- */
.toc{ position:sticky; top:120px; align-self:start }
.toc .tl{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--hair);
}
.toc .tl .ast{ color:var(--accent) }
.toc a{
  display:grid; grid-template-columns: 24px 1fr; gap:10px; align-items:baseline;
  padding:9px 0; font-size:13px; line-height:1.35; color:var(--ink-3);
  border-top:1px solid transparent; transition:color .2s ease;
}
.toc a .tn{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4) }
.toc a:hover{ color:var(--ink) }
.toc a.active{ color:var(--ink) }
.toc a.active .tn{ color:var(--accent) }
.toc .progress{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--hair);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.toc .progress .bar{ height:2px; background:var(--line); margin-top:10px; position:relative; overflow:hidden }
.toc .progress .bar i{ position:absolute; inset:0 100% 0 0; background:var(--accent) }

/* ============ PROSE ============ */
.prose{ max-width:720px }
.prose > p{
  font-size:17.5px; line-height:1.72; color:var(--ink-2); margin:0 0 26px;
  text-wrap:pretty;
}
.prose > p:first-of-type{ font-size:19px; line-height:1.66; color:var(--ink) }
.prose p strong, .prose li strong{ color:var(--ink); font-weight:600 }
.prose em{ font-style:italic; color:var(--ink) }
.prose a.ref{ color:var(--ink); border-bottom:1px solid var(--line-2) }
.prose a.ref:hover{ color:var(--accent); border-bottom-color:var(--accent) }

/* section headers */
.prose h2{
  font-size:clamp(26px, 2.9vw, 36px); font-weight:600; letter-spacing:-0.035em; line-height:1.05;
  margin:0 0 28px; max-width:22ch; scroll-margin-top:110px;
}
.prose .h2-wrap{ margin-top:84px; padding-top:34px; border-top:1px solid var(--hair) }
.prose .h2-wrap:first-child{ margin-top:0; border-top:none; padding-top:0 }
.prose .h2-eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.prose .h2-eyebrow .n{ color:var(--accent) }
.prose h3{
  font-size:21px; font-weight:600; letter-spacing:-0.02em; line-height:1.18;
  margin:44px 0 16px; color:var(--ink); scroll-margin-top:110px;
}
.prose h3 .hn{ font-family:var(--font-mono); font-size:13px; color:var(--accent); margin-right:12px; font-weight:500 }

/* lists */
.prose ul{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:13px }
.prose ul li{
  position:relative; padding-left:26px; font-size:16.5px; line-height:1.6; color:var(--ink-2);
}
.prose ul li::before{
  content:"★"; position:absolute; left:0; top:0; color:var(--accent); font-size:10px; top:.42em;
}
.prose ol{ list-style:none; counter-reset:s; margin:0 0 26px; padding:0; display:grid; gap:15px }
.prose ol li{
  position:relative; padding-left:42px; font-size:16.5px; line-height:1.6; color:var(--ink-2);
  counter-increment:s;
}
.prose ol li::before{
  content:counter(s, decimal-leading-zero); position:absolute; left:0; top:.1em;
  font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.05em;
}

/* ---- callout (accent-tinted aside) ---- */
.callout{
  margin:40px 0; padding:26px 30px; background:var(--accent-tint);
  border:1px solid color-mix(in oklab, var(--accent) 22%, transparent); border-radius:6px;
}
.callout .cl{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.callout p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ink) }
.callout p strong{ font-weight:600 }

/* ---- pull statement (big editorial) ---- */
.pullquote{
  margin:56px 0; padding:0; max-width:24ch;
}
.pullquote blockquote{
  margin:0; font-size:clamp(24px, 2.6vw, 34px); font-weight:500; letter-spacing:-0.03em;
  line-height:1.12; color:var(--ink); text-wrap:balance;
}
.pullquote blockquote em{ font-style:italic; color:var(--accent); font-weight:400 }
.pullquote .by{
  margin-top:22px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px;
}
.pullquote .by .ast{ color:var(--accent) }

/* ---- data table ---- */
.t-scroll{ margin:36px 0; overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:var(--panel) }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px }
table.data th, table.data td{
  text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45;
}
table.data thead th{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; background:color-mix(in oklab, var(--bg) 50%, var(--panel));
}
table.data tbody tr:last-child td{ border-bottom:none }
table.data td:first-child{ color:var(--ink); font-weight:500 }
table.data td .sub{ display:block; color:var(--ink-3); font-size:12.5px; margin-top:3px }

/* ---- component stack (five components) ---- */
.components{ margin:36px 0; display:grid; gap:1px; background:var(--hair); border:1px solid var(--line); border-radius:6px; overflow:hidden }
.components .comp{
  background:var(--panel); padding:22px 26px;
  display:grid; grid-template-columns: 150px 1fr 150px; gap:28px; align-items:center;
}
.components .comp .ck{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.components .comp .ck b{ display:block; color:var(--ink); font-size:14.5px; font-weight:600; letter-spacing:-0.01em; text-transform:none; font-family:var(--font-sans); margin-top:5px }
.components .comp .cd{ font-size:14px; line-height:1.5; color:var(--ink-2) }
.components .comp .cd strong{ color:var(--ink); font-weight:600 }
.components .comp .ct{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:right; white-space:nowrap }

/* ---- phase steps ---- */
.phases{ margin:36px 0; display:grid; gap:0 }
.phases .ph{
  display:grid; grid-template-columns: 56px 1fr; gap:32px; align-items:start;
  padding:30px 0; border-top:1px solid var(--hair);
}
.phases .ph:last-child{ border-bottom:1px solid var(--hair) }
.phases .ph .pn{ font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.1em; padding-top:3px }
.phases .ph .pk{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px }
.phases .ph h4{ font-size:19px; font-weight:600; letter-spacing:-0.02em; line-height:1.15; margin:0 0 12px }
.phases .ph h4 em{ font-style:italic; color:var(--ink-3); font-weight:400 }
.phases .ph p{ font-size:15.5px; line-height:1.6; color:var(--ink-2); margin:0; max-width:58ch }
.phases .ph p strong{ color:var(--ink); font-weight:600 }

/* ---- figure placeholder ---- */
.figure{ margin:44px 0 }
.figure .frame{
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel);
  box-shadow:0 1px 0 rgba(11,14,20,.02), 0 30px 80px -55px rgba(11,14,20,.18);
}
.figure .frame .top{
  height:34px; display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  border-bottom:1px solid var(--line); background:color-mix(in oklab, var(--bg) 50%, var(--panel));
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.figure .stage{
  aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; position:relative;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--bg) 55%, transparent) 0 14px, transparent 14px 28px),
    var(--panel);
}
.figure figcaption{
  margin-top:16px; font-family:var(--font-mono); font-size:11.5px; line-height:1.55; color:var(--ink-3);
  letter-spacing:.02em; display:flex; gap:10px; max-width:62ch;
}
.figure figcaption b{ color:var(--ink); font-weight:500; white-space:nowrap }
.figure figcaption .ast{ color:var(--accent) }

/* diagram primitives (simple shapes only) */
.dgm{ display:flex; align-items:center; gap:0; width:100%; max-width:520px; padding:0 32px }
.dgm .node{
  flex:1; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); padding:22px 10px; border:1px solid var(--line-2); border-radius:6px; background:var(--bg);
}
.dgm .node.ac{ border-color:var(--accent); color:var(--accent); background:var(--accent-tint) }
.dgm .arrow{ flex:0 0 56px; text-align:center; font-family:var(--font-mono); color:var(--ink-3); font-size:18px }
.dgm-svg{ width:100%; height:100%; display:block }

/* ---- key takeaways ---- */
.takeaways{
  margin:40px 0; padding:34px 38px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px;
}
.takeaways .tk-head{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:10px; padding-bottom:22px; margin-bottom:6px; border-bottom:1px solid var(--hair);
}
.takeaways .tk-head .ast{ color:var(--accent) }
.takeaways ol{ counter-reset:tk; display:grid; gap:0; margin:0; padding:0; list-style:none }
.takeaways ol li{
  counter-increment:tk; position:relative; padding:18px 0 18px 48px; border-top:1px solid var(--hair);
  font-size:16px; line-height:1.58; color:var(--ink-2);
}
.takeaways ol li:first-child{ border-top:none }
.takeaways ol li::before{
  content:counter(tk, decimal-leading-zero); position:absolute; left:0; top:18px;
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
}
.takeaways ol li strong{ color:var(--ink); font-weight:600 }
.takeaways ol li em{ font-style:italic; color:var(--ink) }

/* ---- sources / spec (inputs, constraints) ---- */
.sources{ margin:30px 0 0; display:grid; gap:0 }
.sources .src{
  display:grid; grid-template-columns: 220px 1fr; gap:40px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--hair);
}
.sources .src:last-child{ border-bottom:1px solid var(--hair) }
.sources .src .sk{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink); font-weight:500 }
.sources .src .sv{ font-size:14.5px; line-height:1.6; color:var(--ink-2) }

/* divider note (small mono epigraph between sections) */
.note{
  margin:30px 0; padding:18px 0 0; border-top:1px dashed var(--line-2);
  font-family:var(--font-mono); font-size:12px; line-height:1.6; color:var(--ink-3); letter-spacing:.02em;
}
.note b{ color:var(--ink); font-weight:500 }

/* ============ ABOUT / CTA ============ */
.art-about .ix{ margin-bottom:8px }

/* ============ ARTICLE FOOTER NAV (prev/next + back) ============ */
.art-nav{
  margin-top:0; display:grid; grid-template-columns: 1fr 1fr; gap:1px; background:var(--hair);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.art-nav a{
  background:var(--bg); padding:34px 4px; display:flex; flex-direction:column; gap:10px;
  transition:padding .35s var(--ease-out), background .25s ease;
}
.art-nav a:hover{ background:var(--panel) }
.art-nav a.next{ text-align:right; align-items:flex-end }
.art-nav a .dir{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3) }
.art-nav a .tt{ font-size:19px; font-weight:560; letter-spacing:-0.02em; color:var(--ink); max-width:24ch; line-height:1.15 }
.art-nav a:hover .tt{ color:var(--accent) }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px){
  .art-grid{ grid-template-columns: 1fr; gap:0 }
  .toc{ position:static; display:none }
  .art-meta{ grid-template-columns: 1fr 1fr }
  .art-meta > div{ border-left:none; padding-left:0; border-top:1px solid var(--hair) }
  .art-meta > div:first-child, .art-meta > div:nth-child(2){ border-top:none }
  .art-meta > div:nth-child(even){ padding-left:28px; border-left:1px solid var(--hair) }
  .components .comp{ grid-template-columns: 1fr; gap:12px }
  .components .comp .ct{ text-align:left }
  .sources .src{ grid-template-columns: 1fr; gap:8px }
  .art-nav{ grid-template-columns: 1fr }
  .art-nav a.next{ text-align:left; align-items:flex-start; border-top:1px solid var(--hair) }
}
@media (max-width: 640px){
  .art-head{ padding-top:120px }
  .prose{ max-width:none }
  .prose > p:first-of-type{ font-size:18px }
  .phases .ph{ grid-template-columns: 1fr; gap:10px }
}