/* ════════════════════════════════════════════════════════════════
   ARTICLE TEMPLATE — Premium long-form layout
   Loaded AFTER site-design-system.css
   Provides: hero, TOC, prose, callouts, pull-quotes, code blocks,
   image captions, formula blocks, related articles, author bio,
   share rail, reading progress
   Used by: 22 blog · 21 guides · 5 case studies · 4 compare · 21 glossary
   ════════════════════════════════════════════════════════════════ */

/* ─── ARTICLE HERO ─── */
.article-hero{position:relative;padding:140px 0 60px;overflow:hidden}
.article-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 1000px 600px at 30% 30%,hsla(38,92%,50%,.05),transparent 70%);z-index:0}
.article-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at right center,black 0%,transparent 70%);opacity:.5;z-index:0}
.article-hero .container{position:relative;z-index:2;max-width:980px}

.article-eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-family:'JetBrains Mono',monospace;font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-5)}
.article-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.article-h1{font-family:'Heebo',sans-serif;font-weight:900;font-size:clamp(var(--t-4xl),5.5vw,var(--t-6xl));letter-spacing:-0.025em;line-height:var(--lh-tight);color:var(--ink);margin-bottom:var(--s-6)}
.article-h1 strong{color:var(--accent)}

.article-lead{font-size:var(--t-lg);color:var(--ink-soft);line-height:var(--lh-loose);max-width:65ch;margin-bottom:var(--s-8)}
.article-lead strong{color:var(--ink);font-weight:700}

.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);padding-top:var(--s-6);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-faint)}
.article-meta-item{display:inline-flex;align-items:center;gap:var(--s-2)}
.article-meta-item svg{color:var(--accent);flex-shrink:0}
.article-meta-item strong{color:var(--ink-soft);font-weight:600}
.article-meta-divider{width:1px;height:14px;background:var(--line)}

.article-cover{margin-top:var(--s-8);border-radius:var(--r-bento);overflow:hidden;aspect-ratio:21/9;background:var(--bg-deep);position:relative;box-shadow:var(--glass-inner),var(--shadow-elev)}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-cover-caption{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);padding:6px 12px;border-radius:var(--r-sm);font-size:var(--t-xs);color:var(--ink-soft);border:1px solid var(--line-bright)}

/* ─── READING PROGRESS BAR ─── */
.reading-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:200;background:transparent;pointer-events:none}
.reading-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--amber-400));transition:width 100ms linear;box-shadow:0 1px 4px rgba(245,158,11,.3)}
body.has-launch-ribbon .reading-progress{top:46px}
@media (max-width:640px){body.has-launch-ribbon .reading-progress{top:40px}}

/* ─── ARTICLE LAYOUT — sticky TOC + content (Option A · RTL-aware, fixed 2026-05-22) ─── */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--s-14);max-width:1180px;margin:0 auto;padding:var(--s-16) var(--pad);align-items:start;transition:grid-template-columns .35s var(--ease-out),gap .35s var(--ease-out)}
.article-layout.toc-hidden{grid-template-columns:1fr;gap:0}
.article-layout.toc-hidden .article-toc-wrap{display:none}
.article-content{grid-column:1;grid-row:1;min-width:0;font-size:var(--t-md);line-height:var(--lh-loose);color:var(--ink-soft)}
.article-toc-wrap{grid-column:2;grid-row:1;position:sticky;top:120px;max-height:calc(100vh - 140px);overflow-y:auto;font-size:var(--t-sm);padding-inline-start:var(--s-4);border-inline-start:1px solid var(--line);opacity:.85;transition:opacity var(--t-fast) var(--ease-out)}
.article-toc-wrap:hover{opacity:1}
body.has-launch-ribbon .article-toc-wrap{top:166px}

.article-toc-title{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.article-toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.article-toc-list a{display:block;padding:6px var(--s-3);color:var(--ink-faint);font-weight:400;border-right:2px solid transparent;text-decoration:none;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:12.5px;line-height:var(--lh-snug);transition:all var(--t-fast) var(--ease-out)}
.article-toc-list a:hover{color:var(--ink);background:rgba(255,255,255,.02)}
.article-toc-list a.active{color:var(--accent);border-right-color:var(--accent);background:hsla(38,92%,50%,.06);font-weight:600}
.article-toc-list .toc-h3{padding-right:var(--s-5);font-size:11.5px;color:var(--ink-faint);opacity:.8}

@media (max-width:980px){
  .article-layout{grid-template-columns:1fr;gap:var(--s-8);padding:var(--s-10) var(--pad)}
  .article-content,.article-toc-wrap{grid-column:auto;grid-row:auto}
  .article-toc-wrap{position:static;max-height:none;padding:var(--s-5);background:rgba(42,44,50,.4);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--glass-inner);opacity:1;border-inline-start:none}
  .article-toc-list a{font-size:14px}
}

/* ─── TOC TOGGLE BUTTONS (desktop only, hidden on mobile + print) ─── */
.article-toc-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.toc-hide-btn{appearance:none;background:transparent;border:1px solid var(--line);color:var(--ink-faint);width:24px;height:24px;border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;font-size:12px;line-height:1;padding:0;transition:all var(--t-fast) var(--ease-out)}
.toc-hide-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.toc-show-btn{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:90;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--line);border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);color:var(--ink-soft);padding:var(--s-4) var(--s-2);cursor:pointer;display:none;align-items:center;gap:6px;font-family:'Heebo',sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;writing-mode:vertical-rl;text-orientation:mixed;transition:all var(--t-fast) var(--ease-out);box-shadow:var(--glass-inner)}
.toc-show-btn:hover{color:var(--accent);background:var(--accent-soft);padding-right:var(--s-3)}
body:has(.article-layout.toc-hidden) .toc-show-btn{display:inline-flex}
@media (max-width:980px){.toc-hide-btn,.toc-show-btn{display:none!important}}
@media print{.toc-hide-btn,.toc-show-btn,.reading-progress{display:none!important}}

/* ─── ARTICLE PROSE — long-form typography ─── */
.article-content h2{
  font-family:'Heebo',sans-serif;font-weight:900;font-size:clamp(var(--t-2xl),3vw,var(--t-3xl));
  letter-spacing:-0.02em;line-height:var(--lh-snug);color:var(--ink);
  margin:var(--s-16) 0 var(--s-5);padding-top:var(--s-6);scroll-margin-top:100px;
  position:relative;
}
.article-content h2::before{content:'';position:absolute;top:0;right:0;width:40px;height:2px;background:var(--accent);border-radius:1px}
.article-content h3{
  font-family:'Heebo',sans-serif;font-weight:700;font-size:var(--t-xl);
  letter-spacing:-0.01em;line-height:var(--lh-snug);color:var(--ink);
  margin:var(--s-10) 0 var(--s-4);scroll-margin-top:100px;
}
.article-content h4{
  font-family:'Heebo',sans-serif;font-weight:700;font-size:var(--t-lg);
  color:var(--ink-soft);margin:var(--s-6) 0 var(--s-3);
}
.article-content p{
  font-size:var(--t-md);line-height:var(--lh-loose);color:var(--ink-soft);
  margin-bottom:var(--s-5);max-width:62ch;
}
.article-content p strong{color:var(--ink);font-weight:700}
.article-content a:not(.btn-primary):not(.btn-outline):not(.btn-ghost){
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--t-fast) var(--ease-out);
}
.article-content a:not(.btn-primary):hover{color:var(--amber-300)}

.article-content ul,.article-content ol{
  margin:var(--s-5) 0;padding-right:var(--s-6);
  font-size:var(--t-md);line-height:var(--lh-loose);color:var(--ink-soft);max-width:62ch;
}
.article-content ul{list-style:none}
.article-content ul li{position:relative;padding-right:var(--s-5);margin-bottom:var(--s-3)}
.article-content ul li::before{
  content:'';position:absolute;right:0;top:13px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);
}
.article-content ol{counter-reset:item;list-style:none}
.article-content ol li{position:relative;padding-right:var(--s-8);margin-bottom:var(--s-3);counter-increment:item}
.article-content ol li::before{
  content:counter(item);position:absolute;right:0;top:0;
  font-family:'JetBrains Mono',monospace;font-size:var(--t-xs);font-weight:700;color:var(--accent);
  background:hsla(38,92%,50%,.08);border:1px solid var(--line-bright);
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
}
.article-content li strong{color:var(--ink);font-weight:700}

/* ─── TABLES ─── */
.article-content table{
  width:100%;border-collapse:collapse;margin:var(--s-8) 0;font-size:var(--t-sm);
  background:rgba(42,44,50,.4);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--glass-inner);
}
.article-content thead th{
  background:var(--bg-deep);color:var(--accent);
  padding:var(--s-3) var(--s-4);text-align:right;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--line-bright);
}
.article-content tbody td{
  padding:var(--s-3) var(--s-4);
  color:var(--ink-soft);border-bottom:1px solid var(--line);
  vertical-align:top;
}
.article-content tbody td strong{color:var(--ink);font-weight:700}
.article-content tbody tr:hover td{background:rgba(245,158,11,.04)}
.article-content tbody tr:last-child td{border-bottom:none}

/* ─── CALLOUTS ─── */
.callout{
  margin:var(--s-6) 0;padding:var(--s-5) var(--s-6);
  background:rgba(42,44,50,.4);border:1px solid var(--line);border-right:4px solid;
  border-radius:var(--r-md);box-shadow:var(--glass-inner);
  font-size:var(--t-sm);line-height:var(--lh-relaxed);
}
.callout-title{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);font-family:'Heebo',sans-serif;font-weight:700;font-size:var(--t-md);color:var(--ink)}
.callout p{color:var(--ink-soft);margin-bottom:0;font-size:var(--t-sm);max-width:none}
.callout p + p{margin-top:var(--s-3)}
.callout.info{border-right-color:var(--cyan-400)}
.callout.info .callout-title{color:var(--cyan-300)}
.callout.warn{border-right-color:var(--amber-500)}
.callout.warn .callout-title{color:var(--amber-300)}
.callout.tip{border-right-color:var(--green-400)}
.callout.tip .callout-title{color:var(--green-400)}
.callout.danger{border-right-color:var(--red-400)}
.callout.danger .callout-title{color:var(--red-300)}

/* ─── PULL QUOTE ─── */
.pull-quote{
  margin:var(--s-10) 0;padding:var(--s-8);
  background:hsla(38,92%,50%,.04);border-right:4px solid var(--accent);
  border-radius:var(--r-card);box-shadow:var(--glass-inner);
  position:relative;
}
.pull-quote::before{
  content:'"';position:absolute;top:8px;right:24px;
  font-family:'Bellefair',serif;font-size:120px;color:var(--accent);
  line-height:.6;opacity:.18;font-weight:bold;pointer-events:none;
}
.pull-quote p{
  font-family:'Bellefair',serif;font-style:italic;
  font-size:clamp(var(--t-lg),2.2vw,var(--t-2xl));
  line-height:var(--lh-snug);color:var(--ink);
  letter-spacing:-0.005em;margin-bottom:var(--s-4);max-width:none;position:relative;z-index:1;
}
.pull-quote-cite{display:block;font-family:'JetBrains Mono',monospace;font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.06em;position:relative;z-index:1}

/* ─── FORMULA / EQUATION ─── */
.formula{
  margin:var(--s-6) 0;padding:var(--s-5) var(--s-6);
  background:var(--bg-deep);border:1px solid var(--line-bright);border-radius:var(--r-md);
  font-family:'JetBrains Mono',monospace;direction:ltr;text-align:left;
  font-size:var(--t-md);line-height:1.6;color:var(--amber-300);font-variant-numeric:tabular-nums;
  box-shadow:var(--glass-inner);overflow-x:auto;
}
.formula .var{color:var(--cyan-300)}
.formula .num{color:var(--green-400)}
.formula .label{display:block;font-family:'Heebo',sans-serif;font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s-2);direction:rtl;text-align:right}

/* ─── CODE BLOCK ─── */
pre,.code-block{
  margin:var(--s-6) 0;padding:var(--s-5);
  background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-md);
  font-family:'JetBrains Mono',monospace;font-size:var(--t-sm);line-height:var(--lh-relaxed);
  color:var(--ink-soft);direction:ltr;text-align:left;
  overflow-x:auto;box-shadow:var(--glass-inner);
  position:relative;
}
.code-block-copy{
  position:absolute;top:8px;left:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  background:rgba(245,158,11,.08);color:var(--accent);border:1px solid var(--line-bright);
  padding:3px 8px;border-radius:var(--r-sm);cursor:pointer;letter-spacing:.06em;
  transition:all var(--t-fast) var(--ease-out);
}
.code-block-copy:hover{background:rgba(245,158,11,.16)}
code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--bg-deep);padding:2px 6px;border-radius:4px;color:var(--amber-300);border:1px solid var(--line)}

/* ─── BLOCKQUOTE (regular) ─── */
.article-content blockquote{
  margin:var(--s-6) 0;padding:var(--s-5) var(--s-6);
  border-right:3px solid var(--accent);
  background:hsla(38,92%,50%,.04);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-style:italic;color:var(--ink);
}
.article-content blockquote p{color:var(--ink);font-weight:500;margin-bottom:0}

/* ─── IMAGES + CAPTIONS ─── */
.article-content figure{margin:var(--s-8) 0}
.article-content figure img,.article-content img{width:100%;border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--shadow-rest)}
.article-content figcaption{font-size:var(--t-sm);color:var(--ink-faint);line-height:var(--lh-relaxed);margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--line);font-style:italic}

/* ─── KEY METRICS BLOCK ─── */
.key-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-4);margin:var(--s-8) 0;padding:var(--s-6);background:rgba(42,44,50,.4);border:1px solid var(--line-bright);border-radius:var(--r-card);box-shadow:var(--glass-inner)}
.key-metric{text-align:center;padding:var(--s-2)}
.key-metric-num{font-family:'Bellefair',serif;font-size:var(--t-4xl);color:var(--accent);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;display:block;margin-bottom:var(--s-2)}
.key-metric-lbl{font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* ─── DIVIDER ─── */
.article-divider{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--line-bright),transparent);margin:var(--s-12) auto;max-width:200px}

/* ─── ARTICLE FOOTER ─── */
.article-footer{padding:var(--s-16) 0;border-top:1px solid var(--line);background:var(--bg-deep);margin-top:var(--s-16)}
.article-footer .container{max-width:1200px}

/* ─── AUTHOR BIO ─── */
.author-bio{display:grid;grid-template-columns:140px 1fr;gap:var(--s-6);background:rgba(42,44,50,.4);border:1px solid var(--line-bright);border-radius:var(--r-bento);padding:var(--s-8);box-shadow:var(--glass-inner),var(--shadow-elev);align-items:center}
.author-photo{width:140px;height:140px;border-radius:50%;overflow:hidden;border:3px solid var(--accent);box-shadow:var(--shadow-rest)}
.author-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.05)}
.author-bio-title{font-family:'JetBrains Mono',monospace;font-size:var(--t-xs);color:var(--accent);font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:var(--s-2)}
.author-bio h3{font-family:'Heebo';font-weight:900;font-size:var(--t-xl);color:var(--ink);margin-bottom:var(--s-2);letter-spacing:-0.01em}
.author-bio p{font-size:var(--t-sm);color:var(--ink-soft);line-height:var(--lh-relaxed);margin-bottom:var(--s-4);max-width:none}
.author-bio-creds{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.author-bio-creds span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--green-400);padding:3px 8px;border-radius:var(--r-sm);background:hsla(160,84%,39%,.10);border:1px solid hsla(160,84%,39%,.25);letter-spacing:.04em}
@media (max-width:640px){.author-bio{grid-template-columns:1fr;text-align:center}.author-photo{margin:0 auto}}

/* ─── RELATED ARTICLES ─── */
.related-articles{margin-top:var(--s-16)}
.related-articles-title{font-family:'Heebo';font-weight:900;font-size:var(--t-2xl);color:var(--ink);margin-bottom:var(--s-8);letter-spacing:-0.015em;text-align:center}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.related-card{display:block;background:rgba(42,44,50,.4);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-6);color:inherit;box-shadow:var(--glass-inner);transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.related-card:hover{transform:translateY(-3px);border-color:var(--line-bright)}
.related-card-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);font-weight:600;letter-spacing:.06em;margin-bottom:var(--s-3)}
.related-card h4{font-family:'Heebo';font-weight:700;font-size:var(--t-md);color:var(--ink);line-height:var(--lh-snug);margin-bottom:var(--s-3);letter-spacing:-0.01em}
.related-card p{font-size:var(--t-sm);color:var(--ink-soft);line-height:var(--lh-relaxed);margin-bottom:var(--s-3)}
.related-card-cta{font-size:var(--t-sm);color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:var(--s-2);transition:gap var(--t-fast) var(--ease-out)}
.related-card:hover .related-card-cta{gap:var(--s-3)}
@media (max-width:840px){.related-grid{grid-template-columns:1fr}}

/* ─── SHARE BAR (right rail on desktop, fixed bottom on mobile) ─── */
.share-rail{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:var(--s-2);background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--line);border-radius:999px;padding:var(--s-3);box-shadow:var(--glass-inner)}
.share-btn{width:38px;height:38px;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--ink-faint);border:none;cursor:pointer;transition:all var(--t-fast) var(--ease-out)}
.share-btn:hover{background:var(--accent-soft);color:var(--accent)}
.share-btn:active{transform:scale(0.95)}
@media (max-width:980px){.share-rail{display:none}}

/* ─── BREADCRUMB ─── */
.breadcrumb{font-family:'JetBrains Mono',monospace;font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.06em;display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4);flex-wrap:wrap}
.breadcrumb a{color:var(--ink-soft);transition:color var(--t-fast) var(--ease-out)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-sep{color:var(--ink-faint);opacity:.5}
.breadcrumb-current{color:var(--accent)}

/* ─── ARTICLE NEWSLETTER CTA ─── */
.article-cta{background:linear-gradient(135deg,hsla(38,92%,50%,.06),hsla(38,92%,50%,.02));border:1px solid var(--line-bright);border-radius:var(--r-bento);padding:var(--s-10);text-align:center;margin:var(--s-12) 0;box-shadow:var(--glass-inner)}
.article-cta h3{font-family:'Heebo';font-weight:900;font-size:var(--t-2xl);color:var(--ink);letter-spacing:-0.02em;margin-bottom:var(--s-3)}
.article-cta h3 strong{color:var(--accent)}
.article-cta p{font-size:var(--t-md);color:var(--ink-soft);line-height:var(--lh-loose);margin:0 auto var(--s-6);max-width:560px}
.article-cta-row{display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:center}