/* Insights — long-form article pages. Tokens, nav, the blue contact band and
   the footer come from the shared styles.css unchanged. */

/* ---------- dark opener ---------- */
.art-head{padding:clamp(52px,7vw,92px) 0 clamp(40px,6vw,64px);border-bottom:1px solid var(--line-d)}
.art-head .label{margin-bottom:18px}
.article-crumbs{font-size:14px;color:var(--dim);margin-bottom:26px}
.article-crumbs a:hover{color:var(--mint)}
.art-head h1{font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;max-width:22ch}
.art-head .dek{margin-top:clamp(20px,3vw,30px);color:var(--dim);font-size:clamp(17px,1.7vw,20px);line-height:1.5;max-width:60ch}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(24px,3vw,36px);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer)}
.art-meta span b{font-weight:500;color:var(--dim)}

/* ---------- light reading band ---------- */
.art-body{background:var(--paper);color:var(--ink);padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,100px)}
.art-grid{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);min-width:0}
.toc .label{color:var(--on-light);margin-bottom:14px}
.toc ol{display:grid;gap:8px;counter-reset:toc}
.toc a{display:block;font-size:14px;line-height:1.4;color:#4d5450;border-left:1px solid var(--line-l);padding-left:12px;transition:color .18s,border-color .18s}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.toc .toc-back{margin-top:26px;font-size:13px;color:var(--on-light);display:inline-block;border-bottom:1px solid var(--line-l)}
.toc .toc-back:hover{color:var(--ink);border-color:var(--ink)}

.prose{min-width:0;max-width:68ch;font-size:17.5px;line-height:1.62}
.prose>*+*{margin-top:1.15em}
main .prose p{margin:1.15em 0 0}
main .prose>:first-child{margin-top:0}
main .prose h2+p{margin-top:.75em}
main .prose h3+p{margin-top:.5em}
main .prose .demo p,main .prose .callout p{margin-top:0}
.prose h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;margin-top:2.2em;padding-top:1.1em;border-top:1px solid var(--line-l);text-wrap:balance}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:19px;font-weight:500;letter-spacing:-.01em;margin-top:1.8em}
.prose ul,.prose ol{padding-left:1.35em;display:grid;gap:.45em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--on-light)}
.prose a{color:var(--ink);border-bottom:1px solid rgba(2,8,1,.35);transition:border-color .18s}
.prose a:hover{border-color:var(--ink)}
.prose strong{font-weight:500}
.prose .lede{font-size:19.5px;line-height:1.55;color:#313733}
.prose .callout{border-left:2px solid var(--ink);padding:4px 0 4px 18px;color:#313733;font-size:16.5px}
.prose .callout b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.prose code{white-space:normal;overflow-wrap:anywhere;word-break:break-all}
.prose pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#eef1ec;border:1px solid var(--line-l);padding:18px 20px;font-size:14px;line-height:1.55}
.prose pre code{word-break:normal}
.prose .demo{border:1px solid var(--line-l);padding:20px 22px;display:grid;gap:10px;background:#f6f8f5}
.prose .demo .label{color:var(--on-light)}
.prose .demo p{font-size:16px;color:#313733}
.prose .demo a.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:11px 16px;font-size:14px;font-weight:500;border:0;width:max-content}
.prose .demo a.btn:hover{background:#1a221a}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line-l)}
.prose th{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-light)}
.prose .tablewrap{width:100%;max-width:100%;overflow-x:auto}
.prose .tablewrap table{min-width:560px}
.prose dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px}
.prose dt{font-weight:500}
.prose dd{margin:0;color:#313733}
.prose .refs{font-size:15px;color:#4d5450}
.prose .refs li{margin-bottom:.35em}

/* ---------- dark "where this fits" strip ---------- */
.art-next{padding:clamp(48px,7vw,80px) 0;border-bottom:1px solid var(--line-d)}
.art-next .label{margin-bottom:22px}
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.next-grid a{display:grid;align-content:start;gap:10px;background:var(--ink);padding:22px 22px 24px;transition:background .18s}
.next-grid a:hover{background:#080f07}
.next-grid .label{margin:0;color:var(--dimmer)}
.next-grid h3{font-size:19px;line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
.next-grid p{color:var(--dim);font-size:14.5px;line-height:1.5}
.next-grid .arrow{color:var(--mint);font-size:15px;margin-top:auto}

/* ---------- index page ---------- */
.idx-head{padding:clamp(52px,7vw,92px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--line-d)}
.idx-head h1{font-size:clamp(36px,5.4vw,70px);line-height:1.02;letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
.idx-head p{margin-top:24px;color:var(--dim);font-size:18px;max-width:56ch}
.insights-jump{display:inline-flex;gap:16px;margin-top:24px;font-size:16px;color:var(--mint);border-bottom:1px solid currentColor;padding-bottom:4px}
.prose .editorial-note{font-size:14px;color:#4d5450;border-top:1px solid var(--line-l);padding-top:18px}
.prose table{table-layout:fixed;overflow-wrap:anywhere}
.prose th{font-size:13px;letter-spacing:.03em}
.idx-list{border-top:1px solid var(--line-d)}
.idx-list article{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);align-items:start;padding:30px 0;border-bottom:1px solid var(--line-d)}
.idx-list .label{padding-top:6px}
.idx-list h2{font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.idx-list h2 a:hover{color:var(--mint)}
.idx-list p{margin-top:10px;color:var(--dim);font-size:16px;max-width:60ch}
.idx-list .go{color:var(--mint);white-space:nowrap;padding-top:6px}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .art-grid{grid-template-columns:1fr}
  .toc{position:static;border-bottom:1px solid var(--line-l);padding-bottom:22px}
  .toc ol{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .next-grid{grid-template-columns:1fr}
  .idx-list article{grid-template-columns:1fr;gap:8px}
  .idx-list .go{padding-top:0}
}
@media(max-width:760px){
  .prose{font-size:16.5px}
  .prose dl{grid-template-columns:1fr;gap:4px}
  .prose dd{margin-bottom:10px}
}
@media print{
  .art-head,.art-next{background:#fff!important;color:#000!important}
  .toc,.nav,.contact-section{display:none!important}
}