/* ==========================================================
   Swarup Kumar — Article / long-read layer
   Loaded AFTER style.css on article-*.html pages only.
   ========================================================== */

/* ---------- READING PROGRESS ---------- */
.read-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--accent); z-index:200;
  transition:width .08s linear;
}

/* ---------- ARTICLE HERO ---------- */
.article-hero{padding:72px 0 0}
.article-hero .meta-row{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:22px;
}
.article-hero .meta-row .dot{width:3px; height:3px; border-radius:50%; background:var(--accent)}
.article-hero h1{font-size:clamp(34px,5vw,60px); line-height:1.08; letter-spacing:-0.02em; max-width:22ch; text-wrap:normal; margin-bottom:8px}
.article-hero .lede{
  font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--ink-2);
  max-width:60ch; margin-top:32px;
}
.byline{
  display:flex; align-items:center; gap:14px; margin-top:34px;
  padding-top:24px; border-top:1px solid var(--rule);
}
.byline .avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--f-display); font-size:20px;
}
.byline .who{font-size:14px; color:var(--ink); font-weight:500}
.byline .who span{display:block; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); font-weight:400; margin-top:3px}
.byline .share{margin-left:auto; display:flex; gap:8px}
.byline .share a{
  width:34px; height:34px; border:1px solid var(--rule); border-radius:50%;
  display:grid; place-items:center; color:var(--ink-2); transition:.15s;
}
.byline .share a:hover{border-color:var(--ink); color:var(--ink)}

/* ---------- HERO COVER FIGURE ---------- */
.hero-cover{
  position:relative; overflow:hidden; background:var(--ink);
  border-radius:var(--radius); aspect-ratio:21/9; margin-top:48px;
}
.hero-cover::after{content:""; position:absolute; inset:14px;
  border:1px solid rgba(247,245,241,0.16); pointer-events:none}
.hero-cover svg{width:100%; height:100%}
.hero-cover .tag{
  position:absolute; left:22px; bottom:18px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(247,245,241,0.6);
}

/* ---------- IN-PROSE DIAGRAM FIGURES ---------- */
.diagram{
  margin:40px 0; padding:0; border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; background:var(--paper);
}
.diagram .frame{
  background:#FBFAF7; padding:28px; display:flex; justify-content:center;
  border-bottom:1px solid var(--rule);
}
.diagram img{display:block; width:100%; height:auto; max-width:680px}
.diagram figcaption{
  padding:14px 22px; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:0.03em; line-height:1.55; color:var(--ink-2);
}
.diagram figcaption strong{color:var(--ink); font-weight:500}
.diagram.tight .frame{padding:24px}
.diagram.tight img{max-width:460px}

/* ---------- ARTICLE BODY GRID (sticky TOC + prose) ---------- */
.article-body{display:grid; grid-template-columns:220px 1fr; gap:72px; align-items:start}
.toc{position:sticky; top:96px}
.toc .label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:16px}
.toc a{
  display:block; padding:7px 0 7px 16px; font-size:13.5px; line-height:1.4;
  color:var(--ink-2); border-left:2px solid var(--rule); transition:.15s;
}
.toc a:hover{color:var(--ink); border-color:var(--ink-3)}
.toc a.active{color:var(--accent); border-color:var(--accent); font-weight:500}

.article-body .prose{margin:0; max-width:68ch}
.prose .lead-para{font-size:20px; line-height:1.6; color:var(--ink)}
.prose .lead-para::first-letter{
  font-family:var(--f-display); font-size:64px; line-height:0.8;
  float:left; padding:6px 12px 0 0; color:var(--accent);
}
.prose h2{font-size:clamp(26px,2.6vw,34px); scroll-margin-top:96px}
.prose h2 .num{font-family:var(--f-mono); font-size:13px; color:var(--accent);
  letter-spacing:0.06em; vertical-align:middle; margin-right:12px}
.prose h3{font-size:20px; color:var(--ink)}
.prose strong{font-weight:600}
.prose a.link{color:var(--signal); border-bottom:1px solid currentColor}

/* ---------- KEY TAKEAWAYS CALLOUT ---------- */
.takeaways{
  background:var(--paper-2); border-radius:var(--radius);
  padding:32px 34px; margin:8px 0 44px;
}
.takeaways .label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px}
.takeaways ul{display:grid; gap:14px}
.takeaways li{position:relative; padding-left:30px; font-size:15.5px; line-height:1.55; color:var(--ink)}
.takeaways li::before{
  content:counter(tk,decimal-leading-zero); counter-increment:tk;
  position:absolute; left:0; top:1px;
  font-family:var(--f-mono); font-size:11px; color:var(--accent); font-weight:500;
}
.takeaways ul{counter-reset:tk}

/* ---------- CALLOUT / ASIDE ---------- */
.aside{
  border-left:2px solid var(--accent); padding:4px 0 4px 24px;
  margin:36px 0; font-family:var(--f-display); font-style:italic;
  font-size:22px; line-height:1.4; color:var(--ink);
}
.note{
  background:var(--paper-2); border-radius:var(--radius);
  padding:20px 24px; margin:32px 0; font-size:14.5px; line-height:1.6; color:var(--ink-2);
}
.note strong{color:var(--ink)}

/* ---------- CODE / PRE (overflow-safe) ---------- */
.prose pre, .codeblock{
  background:var(--ink); color:#E8E6E1; border-radius:var(--radius);
  padding:22px 24px; margin:28px 0; overflow-x:auto; max-width:100%;
  font-family:var(--f-mono); font-size:13px; line-height:1.7;
  -webkit-overflow-scrolling:touch;
}
.codeblock .label{
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(232,230,225,0.5); margin-bottom:12px; display:block;
}
.prose pre code{white-space:pre; word-break:normal}
.prose code, code.inline{
  font-family:var(--f-mono); font-size:0.86em;
  background:var(--paper-2); padding:2px 6px; border-radius:3px; color:var(--ink);
  word-break:break-word;
}
.codeblock .k{color:#E89878} .codeblock .c{color:rgba(232,230,225,0.45)} .codeblock .s{color:#9FC08A}

/* ---------- STEP CARDS (ML playbook) ---------- */
.steps{counter-reset:step; display:grid; gap:2px; margin:40px 0}
.step{
  display:grid; grid-template-columns:60px 1fr; gap:24px; align-items:start;
  padding:26px 0; border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .n{
  font-family:var(--f-display); font-size:34px; color:var(--accent); line-height:1;
}
.step h3{margin:0 0 8px; font-size:19px}
.step p{margin:0 0 10px; font-size:15px; line-height:1.6; color:var(--ink-2)}
.step .chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.step .chip{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.02em;
  padding:4px 10px; border:1px solid var(--rule); border-radius:100px; color:var(--ink-2);
}

/* ---------- DEFINITION / SPEC TABLE ---------- */
.spec{width:100%; border-collapse:collapse; margin:28px 0; font-size:14.5px}
.spec th,.spec td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule); vertical-align:top}
.spec th{font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-2); font-weight:400; width:34%}
.spec td{color:var(--ink); line-height:1.55}

/* ---------- PROS/CONS, YES-NO COLUMNS ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:32px 0}
.split .col{border:1px solid var(--rule); border-radius:var(--radius); padding:24px 26px}
.split .col h4{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; margin-bottom:16px; color:var(--ink)}
.split .col.yes h4{color:#3E7D55} .split .col.no h4{color:var(--accent)}
.split .col li{padding:7px 0 7px 22px; position:relative; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.split .col.yes li::before{content:"+"; position:absolute; left:0; color:#3E7D55; font-weight:600}
.split .col.no li::before{content:"\2013"; position:absolute; left:0; color:var(--accent); font-weight:600}

/* ---------- REFERENCES ---------- */
.refs{margin-top:56px; padding-top:28px; border-top:1px solid var(--rule)}
.refs .label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:16px}
.refs ol{counter-reset:ref; display:grid; gap:10px}
.refs li{counter-increment:ref; position:relative; padding-left:34px;
  font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.refs li::before{content:counter(ref,decimal-leading-zero); position:absolute; left:0;
  font-family:var(--f-mono); font-size:11px; color:var(--accent)}
.refs a{color:var(--signal); border-bottom:1px solid var(--rule)}

/* ---------- TAGS ---------- */
.tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:40px}
.tags a{font-family:var(--f-mono); font-size:11px; letter-spacing:0.02em;
  padding:6px 13px; border:1px solid var(--rule); border-radius:100px; color:var(--ink-2); transition:.15s}
.tags a:hover{border-color:var(--ink); color:var(--ink)}

/* ---------- NEXT / PREV ---------- */
.next-read{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-top:8px}
.next-read a{background:var(--paper); padding:36px 0; transition:background .15s}
.next-read a:hover{background:var(--paper-2)}
.next-read .inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x)}
.next-read .dir{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.next-read h3{font-size:22px; line-height:1.15}
.next-read .prev{text-align:left} .next-read .nxt{text-align:right}

@media (max-width:980px){
  .article-body{grid-template-columns:1fr; gap:0}
  .toc{display:none}
  .split{grid-template-columns:1fr}
  .hero-cover{aspect-ratio:16/9}
  .step{grid-template-columns:44px 1fr; gap:16px}
  .step .n{font-size:26px}
  .next-read{grid-template-columns:1fr}
  .spec th{width:42%}
}