/* ════════════════════════════════════════════════════════════════
   ARTICLE.CSS — editorial terminal typography for blog posts
   Obey × Fallout × Banksy × Vectrex — green phosphor CRT
   Magazine-grade reading on terminal substrate
   ════════════════════════════════════════════════════════════════ */

/* ── article reading column ── */
.article{max-width:720px;margin:0 auto;padding-top:66px;padding-bottom:40px}
.article-head{margin-bottom:var(--sp-5)}
.article-head h1{font-family:var(--disp);font-size:var(--text-display);color:#eef7ee;line-height:1.05;
  letter-spacing:-1px;margin:var(--sp-2) 0 var(--sp-4);text-shadow:0 0 24px rgba(0,255,65,.15)}
.meta-row{font-family:var(--mono);font-size:var(--text-xs);color:var(--green-d);letter-spacing:1px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.meta-row .led{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:led-pulse 2s ease infinite}
@keyframes led-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* lede — magazine deck */
.lede{font-family:var(--sans);font-size:var(--text-md);color:var(--bone);line-height:1.7;
  margin:var(--sp-4) 0;padding-left:var(--sp-4);border-left:2px solid var(--amber)}

/* progress bar */
.progress{position:fixed;top:46px;left:0;height:2px;width:0;background:var(--amber);
  box-shadow:0 0 8px var(--amber);z-index:49;transition:width .1s linear}

/* ════════════════════════════════════════════════════════════════
   PROSE TYPOGRAPHY — editorial terminal
   ════════════════════════════════════════════════════════════════ */

.prose{font-family:var(--sans);color:var(--bone);font-size:17px;line-height:1.65}

/* ── H2: major section anchor ── */
.prose h2{font-family:var(--disp);font-size:28px;color:#eef7ee;
  margin:var(--sp-6) 0 var(--sp-3);letter-spacing:-.5px;line-height:1.15;
  position:relative;padding-top:var(--sp-4);scroll-margin-top:60px}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:2px;
  background:var(--amber);box-shadow:0 0 8px var(--amber)}

/* ── H3: sub-section label (terminal-style) ── */
.prose h3{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--green-d);
  letter-spacing:2px;text-transform:uppercase;
  margin:var(--sp-5) 0 var(--sp-2);scroll-margin-top:60px}

/* ── paragraphs ── */
.prose p{margin-bottom:28px}
.prose > p:first-of-type::first-letter{font-family:var(--disp);font-size:3.2em;
  float:left;color:var(--amber);line-height:.8;padding-right:10px;padding-top:2px;
  text-shadow:0 0 10px rgba(255,176,0,.3)}


/* ── strong — bright white emphasis ── */
.prose strong{color:#eef7ee;font-weight:800}

/* ── links — green beam underline ── */
.prose a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--green-d);
  transition:border-color .15s}
.prose a:hover{border-color:var(--green)}

/* ── lists — structured, readable ── */
.prose ul,.prose ol{margin:0 0 28px;padding:0}
.prose ul{list-style:none}
.prose ul li{font-family:var(--sans);font-size:16px;color:var(--bone);line-height:1.65;
  margin-bottom:10px;padding-left:var(--sp-3);position:relative}
.prose ul li::before{content:"▸";position:absolute;left:0;color:var(--green-d);font-size:10px;top:1px}
.prose ul li strong{color:#eef7ee;font-weight:800}
.prose ol{counter-reset:ol-counter;padding-left:0}
.prose ol li{counter-increment:ol-counter;font-family:var(--sans);font-size:16px;
  color:var(--bone);line-height:1.65;margin-bottom:10px;padding-left:var(--sp-3);
  position:relative;list-style:none}
.prose ol li::before{content:counter(ol-counter);color:var(--amber);font-family:var(--mono);
  font-size:11px;font-weight:500;position:absolute;left:0;top:1px}

/* ── PULL QUOTES — dramatic editorial anchors ── */
.prose blockquote{border:none;position:relative;
  padding:var(--sp-5) var(--sp-4) var(--sp-4);margin:var(--sp-5) 0;
  font-family:var(--disp);font-size:22px;color:#eef7ee;font-style:normal;
  line-height:1.3;letter-spacing:-.3px;
  text-shadow:0 0 16px rgba(0,255,65,.1)}
.prose blockquote::before{content:""";position:absolute;left:-4px;top:-8px;
  font-family:var(--disp);font-size:64px;color:var(--amber);line-height:1;
  text-shadow:0 0 14px rgba(255,176,0,.3);opacity:.7}
.prose blockquote p{font-family:inherit;font-size:inherit;color:inherit;margin-bottom:0}
.prose blockquote p::first-letter{font-family:inherit;font-size:inherit;float:none;
  color:inherit;padding:0;text-shadow:inherit}

/* ── embeds ── */
.prose iframe,.prose video,.prose embed{max-width:100%;height:auto}

/* ── HR — chapter break ── */
.prose hr{border:none;height:1px;margin:var(--sp-6) 0;
  background:linear-gradient(90deg,transparent,var(--amber) 15%,var(--green-dim) 50%,transparent);
  position:relative}
.prose hr::after{content:"";position:absolute;top:-2px;left:0;width:8px;height:4px;
  background:var(--amber);box-shadow:0 0 6px var(--amber)}

/* ════════════════════════════════════════════════════════════════
   CALLOUT COMPONENTS
   ════════════════════════════════════════════════════════════════ */

/* ── prompt callout (div) ── */
.prompt-block{font-family:var(--mono);font-size:13px;
  background:rgba(0,255,65,.02);border:1px solid var(--green-dim);
  border-left:3px solid var(--amber);padding:var(--sp-4);margin:var(--sp-5) 0;
  color:var(--bone);line-height:1.7;white-space:pre-wrap;
  position:relative;overflow:hidden}
.prompt-block::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 3px)}
.prompt-block .c{color:var(--amber);display:block;margin-bottom:var(--sp-3);
  font-size:11px;letter-spacing:1.5px;font-weight:500;position:relative;z-index:1;
  text-shadow:0 0 6px rgba(255,176,0,.2)}

/* ── prompt callout (pre — code output blocks) ── */
pre.prompt-block{padding:var(--sp-4);border:1px solid var(--green-dim);
  border-left:3px solid var(--amber);background:rgba(0,255,65,.02);
  margin:var(--sp-5) 0;overflow-x:auto;white-space:pre;
  font-family:var(--mono);font-size:12px;color:var(--bone);line-height:1.8}
pre.prompt-block::before{display:none}
pre.prompt-block code{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0}
pre.prompt-block .c{color:var(--amber);display:block;margin-bottom:var(--sp-3);
  font-size:11px;letter-spacing:1.5px;font-weight:500;
  text-shadow:0 0 6px rgba(255,176,0,.2)}
pre.prompt-block strong{color:#eef7ee;font-weight:700}
pre.prompt-block ul{list-style:none;padding:0;margin:0}
pre.prompt-block li{font-family:var(--mono);font-size:12px;color:var(--bone);line-height:1.8;
  padding-left:0;margin-bottom:0;position:static}
pre.prompt-block li::before{display:none}

/* ── takeaways — TL;DR bumper ── */
.takeaways{position:relative;margin:var(--sp-5) 0 var(--sp-5);
  border:1px solid var(--green-dim);background:rgba(0,0,0,.15)}
.takeaways::before{content:"";position:absolute;top:-1px;left:20px;right:20px;height:2px;
  background:var(--amber);box-shadow:0 0 8px var(--amber)}
.takeaways .th{font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--amber);text-transform:uppercase;
  padding:var(--sp-3) var(--sp-4) var(--sp-2);text-shadow:0 0 6px rgba(255,176,0,.15)}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:8px;
  margin:0;padding:0 var(--sp-4) var(--sp-4)}
.takeaways li{font-family:var(--sans);font-size:14px;color:var(--bone);
  line-height:1.5;padding-left:22px;position:relative}
.takeaways li::before{content:"▸";position:absolute;left:0;color:var(--green);font-size:9px;top:2px}
.takeaways li strong{color:#eef7ee;font-weight:700}

/* ════════════════════════════════════════════════════════════════
   ARTICLE FOOTER
   ════════════════════════════════════════════════════════════════ */

/* article footer nav */
.art-nav{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}
.art-nav a{font-family:var(--mono);font-size:11px;color:var(--green-d);text-decoration:none;letter-spacing:.5px;
  transition:color .15s}
.art-nav a:hover{color:var(--green)}

/* byline / author card */
.byline{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px solid var(--green-dim)}
.byline img{width:48px;height:48px;border-radius:50%;border:1px solid var(--green-dim);object-fit:cover}
.byline .bn{font-family:var(--sans);font-size:var(--text-sm);font-weight:800;color:#eef7ee}
.byline .bb{font-family:var(--mono);font-size:var(--text-xs);color:var(--green-d);line-height:1.5}

/* external link icon */
.prose a[target="_blank"]::after,.lede a[target="_blank"]::after{content:" ↗";
  font-size:.75em;opacity:.5;vertical-align:super}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media(max-width:560px){
  .article{padding-top:56px}
  .prose p{margin-bottom:22px}
  .prose h2{font-size:22px}
  .prose blockquote{font-size:18px;padding:var(--sp-4) var(--sp-3) var(--sp-3)}
  .prose blockquote::before{font-size:48px;top:-4px}
  .lede{font-size:16px}
  .article-head h1{font-size:clamp(22px,7vw,32px)}
  .comparison,.stat-grid{grid-template-columns:1fr}
  .metric-label{min-width:70px;font-size:9px}
  .chart-label{min-width:70px;font-size:9px}
  .prompt-block{font-size:11px;padding:var(--sp-3)}
  pre.prompt-block{font-size:10px;padding:var(--sp-3)}
  .takeaways li{font-size:13px}
}