/* ═══════════════════════════════════════════════════════════════════════
   FIDUS FLO — ARTICLE SYSTEM  ·  /assets/article.css
   Sitewide. Load on /blog/ and any long-form page.
   Replaces the per-article <style> blocks. Articles keep only their markup.

   Structure expected:
     article.fx > header.fx-hero
                > div.fx-shell > aside.fx-rail  (auto-filled by article.js)
                                > div.fx-body   (the prose)
   ═══════════════════════════════════════════════════════════════════════ */

.fx{
  --fx-ink:#06140F;
  --fx-deep:#0A241B;
  --fx-line:#16382B;
  --fx-emerald:#047857;
  --fx-mint:#10B981;
  --fx-mint-lt:#34D399;
  --fx-amber:#F59E0B;
  --fx-paper:#FFFFFF;
  --fx-paper-2:#F4F8F6;
  --fx-rule:#E3ECE8;
  --fx-text:#0E2620;
  --fx-soft:#42544E;
  --fx-mute:#71857E;
  --fx-display:'Space Grotesk',system-ui,sans-serif;
  --fx-body:'DM Sans',system-ui,sans-serif;
  --fx-mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,monospace;
  --fx-max:720px;
  /* clearance for the sticky .topbar — raise if the header grows */
  --fx-top:88px;
  display:block;
  font-family:var(--fx-body);
  color:var(--fx-text);
}

/* ── reading progress ───────────────────────────────────────────── */
.fx-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--fx-emerald),var(--fx-mint-lt));
  transition:width .08s linear;
}

/* ══ HERO ══════════════════════════════════════════════════════════ */
.fx-hero{
  background:var(--fx-ink);color:#EAF3EF;position:relative;overflow:hidden;
  padding:clamp(22px,2.6vw,34px) 0 clamp(20px,2.4vw,30px);
  margin-bottom:clamp(30px,4vw,48px);
}
/* hairline ruling — a ledger, not a gradient blob */
.fx-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,rgba(52,211,153,.07) 1px,transparent 1px);
  background-size:44px 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
}
.fx-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--fx-line) 18%,var(--fx-line) 82%,transparent);
}
.fx-hero-in{max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,40px);position:relative}


/* ── hero layout: crumb full width, then text | facts ── */
.fx-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,4vw,56px);
  align-items:end}
@media(max-width:900px){.fx-hero-grid{grid-template-columns:1fr;gap:22px}}

.fx-facts{border-left:1px solid var(--fx-line);padding-left:clamp(20px,2.5vw,28px)}
.fx-facts-h{font-family:var(--fx-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#5F7A70;margin-bottom:14px}
.fx-facts ul{list-style:none;margin:0;padding:0}
.fx-facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-top:1px solid rgba(22,56,43,.6);font-size:.85rem;
  line-height:1.4;color:#A9C2B9}
.fx-facts li:first-child{border-top:0;padding-top:0}
.fx-facts li b{font-family:var(--fx-display);font-weight:600;font-size:1.15rem;
  color:var(--fx-mint-lt);letter-spacing:-.02em;white-space:nowrap;min-width:56px}
@media(max-width:900px){
  .fx-facts{border-left:0;border-top:1px solid var(--fx-line);
    padding-left:0;padding-top:20px}
}

.fx-crumb{
  font-family:var(--fx-mono);font-size:11px;letter-spacing:.06em;
  color:#5F7A70;margin-bottom:clamp(14px,1.8vw,20px);
}
.fx-crumb a{color:#8FB3A6;text-decoration:none}
.fx-crumb a:hover{color:var(--fx-mint-lt)}
.fx-crumb span{opacity:.4;margin:0 7px}

.fx-kicker{
  justify-self:start;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fx-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fx-mint-lt);
  padding:5px 10px;border:1px solid rgba(52,211,153,.28);border-radius:2px;
  background:rgba(52,211,153,.06);
}
.fx-title{
  font-family:var(--fx-display);font-weight:600;
  font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.022em;
  margin:14px 0 0;max-width:22ch;color:#fff;
}
.fx-standfirst{
  margin:12px 0 0;max-width:52ch;font-size:clamp(.94rem,1.05vw,1.02rem);
  line-height:1.55;color:#A9C2B9;
}
.fx-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  margin-top:clamp(14px,1.8vw,18px);padding-top:12px;
  border-top:1px solid var(--fx-line);
  font-family:var(--fx-mono);font-size:11.5px;color:#6F8A80;letter-spacing:.02em;
}
.fx-meta b{color:#C9DCD4;font-weight:500}

/* ══ SHELL: rail + body ════════════════════════════════════════════ */
.fx-shell{
  max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,40px) clamp(60px,8vw,100px);
  display:grid;grid-template-columns:1fr minmax(0,var(--fx-max));gap:clamp(24px,4vw,56px);
}
@media(max-width:1080px){ .fx-shell{grid-template-columns:minmax(0,1fr);max-width:820px} }

/* ── sticky contents rail (desktop only) ───────────────────────── */
.fx-rail{position:sticky;top:var(--fx-top,88px);align-self:start;
  max-height:calc(100vh - var(--fx-top,88px) - 40px);overflow:auto}
.fx-rail::-webkit-scrollbar{width:3px}
.fx-rail::-webkit-scrollbar-thumb{background:var(--fx-rule);border-radius:2px}
.fx-rail-h{
  font-family:var(--fx-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fx-mute);padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--fx-rule);
}
.fx-rail a{
  display:grid;grid-template-columns:26px 1fr;gap:4px;align-items:baseline;
  padding:8px 0;font-size:13px;line-height:1.4;color:var(--fx-mute);
  text-decoration:none;border-left:2px solid transparent;padding-left:10px;
  transition:color .15s,border-color .15s;
}
.fx-rail a i{font-family:var(--fx-mono);font-style:normal;font-size:10.5px;opacity:.6}
.fx-rail a:hover{color:var(--fx-text)}
.fx-rail a.on{color:var(--fx-emerald);border-left-color:var(--fx-emerald);font-weight:500}
.fx-rail a.on i{opacity:1}
@media(max-width:1080px){ .fx-rail{display:none} }

/* ══ BODY PROSE ════════════════════════════════════════════════════ */
.fx-body{font-size:1.075rem;line-height:1.75;color:var(--fx-soft);counter-reset:fxsec}
.fx-body > p{margin:0 0 22px}
.fx-body strong{color:var(--fx-text);font-weight:600}
.fx-body a{color:var(--fx-emerald);text-decoration:none;
  border-bottom:1px solid rgba(4,120,87,.28);transition:border-color .15s}
.fx-body a:hover{border-bottom-color:var(--fx-emerald)}

/* lead paragraph */
.fx-body > p.fx-lead{
  font-size:clamp(1.14rem,1.8vw,1.28rem);line-height:1.62;color:var(--fx-text);
  margin-bottom:30px;
}

/* numbered section headings — the sequence is real, so it's shown */
.fx-body h2{
  counter-increment:fxsec;
  font-family:var(--fx-display);font-weight:600;
  font-size:clamp(1.42rem,2.6vw,1.95rem);line-height:1.18;letter-spacing:-.018em;
  color:var(--fx-text);margin:clamp(46px,6vw,68px) 0 18px;
  padding-top:26px;border-top:1px solid var(--fx-rule);position:relative;
}
.fx-body h2::before{
  content:counter(fxsec,decimal-leading-zero);
  position:absolute;top:24px;left:0;
  font-family:var(--fx-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  color:var(--fx-mint);
}
.fx-body h2{padding-left:0}
@media(min-width:1081px){
  .fx-body h2{padding-left:0}
  .fx-body h2::before{left:-52px;top:30px}
}
.fx-body h3{
  font-family:var(--fx-display);font-weight:600;font-size:1.16rem;letter-spacing:-.01em;
  color:var(--fx-text);margin:34px 0 10px;
}
.fx-body ul,.fx-body ol{margin:0 0 24px;padding-left:0;list-style:none}
.fx-body li{position:relative;padding-left:26px;margin-bottom:11px}
.fx-body ul > li::before{
  content:'';position:absolute;left:4px;top:.72em;width:7px;height:1px;background:var(--fx-mint);
}
.fx-body ol{counter-reset:fxol}
.fx-body ol > li{counter-increment:fxol}
.fx-body ol > li::before{
  content:counter(fxol);position:absolute;left:0;top:.05em;
  font-family:var(--fx-mono);font-size:11px;color:var(--fx-mint);
}

/* ══ ANSWER CARD (AEO) ═════════════════════════════════════════════ */
.fx-answer{
  position:relative;background:var(--fx-paper);border:1px solid var(--fx-rule);
  border-radius:3px;padding:26px 26px 24px;margin:0 0 clamp(30px,4vw,44px);
  box-shadow:0 1px 2px rgba(6,20,15,.04),0 12px 32px -22px rgba(6,20,15,.28);
}
.fx-answer::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--fx-mint-lt),var(--fx-emerald));
  border-radius:3px 0 0 3px;
}
.fx-answer-l{
  display:inline-block;font-family:var(--fx-mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fx-emerald);margin-bottom:12px;
}
.fx-answer p{margin:0;font-size:1.06rem;line-height:1.68;color:var(--fx-text)}

/* ══ STAT ROW — hairlines, not boxes ═══════════════════════════════ */
.fx-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:clamp(30px,4vw,42px) 0;border-top:1px solid var(--fx-rule);
  border-bottom:1px solid var(--fx-rule);
}
.fx-stat{padding:24px 20px 22px;border-left:1px solid var(--fx-rule)}
.fx-stat:first-child{border-left:0;padding-left:0}
.fx-stat b{
  display:block;font-family:var(--fx-display);font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1;letter-spacing:-.03em;
  color:var(--fx-emerald);
}
.fx-stat.warn b{color:var(--fx-amber)}
.fx-stat span{
  display:block;margin-top:10px;font-size:.83rem;line-height:1.45;color:var(--fx-mute);
}
@media(max-width:640px){
  .fx-stats{grid-template-columns:1fr}
  .fx-stat{border-left:0;border-top:1px solid var(--fx-rule);padding-left:0}
  .fx-stat:first-child{border-top:0}
}

/* ══ TABLE ═════════════════════════════════════════════════════════ */
.fx-tw{margin:clamp(26px,3.5vw,38px) 0;overflow-x:auto;
  border:1px solid var(--fx-rule);border-radius:3px;background:var(--fx-paper)}
.fx-tw table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.fx-tw thead th{
  background:var(--fx-ink);color:#CFE3DA;text-align:left;padding:13px 18px;
  font-family:var(--fx-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.fx-tw td{padding:15px 18px;border-top:1px solid var(--fx-rule);
  color:var(--fx-soft);line-height:1.6;vertical-align:top}
.fx-tw tbody tr:nth-child(even){background:var(--fx-paper-2)}
.fx-tw td:first-child{color:var(--fx-text);font-weight:500}
.fx-tw tbody tr:hover{background:rgba(16,185,129,.05)}

/* ══ CALLOUTS ══════════════════════════════════════════════════════ */
.fx-note{
  position:relative;padding:20px 22px 20px 24px;margin:clamp(26px,3.5vw,36px) 0;
  border-radius:3px;font-size:1rem;line-height:1.65;
  background:var(--fx-paper-2);border:1px solid var(--fx-rule);
}
.fx-note::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--fx-emerald);border-radius:3px 0 0 3px}
.fx-note.warn{background:#FFFBEB;border-color:#FBE3B4}
.fx-note.warn::before{background:var(--fx-amber)}
.fx-note b{display:block;font-family:var(--fx-display);font-size:.96rem;
  color:var(--fx-text);margin-bottom:6px}
.fx-note p{margin:0;color:var(--fx-soft)}

/* ══ PULL QUOTE ════════════════════════════════════════════════════ */
.fx-pull{
  margin:clamp(34px,4.5vw,48px) 0;padding:0 0 0 26px;
  border-left:2px solid var(--fx-mint);
  font-family:var(--fx-display);font-weight:500;
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.38;letter-spacing:-.015em;
  color:var(--fx-text);
}

/* ══ FAQ ═══════════════════════════════════════════════════════════ */
.fx-faq{margin:clamp(50px,6vw,72px) 0 0;padding-top:30px;border-top:1px solid var(--fx-rule)}
.fx-faq > h2{border-top:0;padding-top:0;margin-top:0}
.fx-faq > h2::before{display:none}
.fx-faq details{border-bottom:1px solid var(--fx-rule)}
.fx-faq summary{
  list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-family:var(--fx-display);font-weight:600;font-size:1.02rem;
  color:var(--fx-text);transition:color .15s;
}
.fx-faq summary::-webkit-details-marker{display:none}
.fx-faq summary:hover{color:var(--fx-emerald)}
.fx-faq summary::after{
  content:'';position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--fx-mint);border-bottom:1.5px solid var(--fx-mint);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.fx-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fx-faq details p{margin:0 0 20px;color:var(--fx-soft);font-size:1rem;max-width:62ch}

/* ══ CTA ═══════════════════════════════════════════════════════════ */
.fx-cta{
  margin:clamp(52px,6vw,76px) 0 0;background:var(--fx-ink);color:#EAF3EF;
  border-radius:4px;padding:clamp(30px,4.5vw,46px);position:relative;overflow:hidden;
}
.fx-cta::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(52,211,153,.07) 1px,transparent 1px);
  background-size:38px 100%;
}
.fx-cta-in{position:relative;max-width:44ch}
.fx-cta .fx-answer-l{color:var(--fx-mint-lt)}
.fx-cta h3{font-family:var(--fx-display);font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:-.02em;
  margin:0 0 12px;color:#fff}
.fx-cta p{margin:0 0 26px;color:#A9C2B9;font-size:1rem;line-height:1.6}
.fx-btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--fx-mint-lt);color:#04241A;
  padding:14px 26px;border-radius:2px;font-family:var(--fx-display);font-weight:600;
  font-size:.98rem;text-decoration:none;border-bottom:0!important;
  transition:transform .16s,box-shadow .16s;
}
.fx-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(52,211,153,.8)}

/* ══ RELATED ═══════════════════════════════════════════════════════ */
.fx-rel{margin-top:clamp(44px,5vw,64px);padding-top:28px;border-top:1px solid var(--fx-rule)}
.fx-rel-h{font-family:var(--fx-mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fx-mute);margin-bottom:16px}
.fx-rel-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.fx-rel-g a{
  display:block;padding:17px 18px;border:1px solid var(--fx-rule);border-radius:3px;
  color:var(--fx-text);text-decoration:none;font-family:var(--fx-display);
  font-weight:600;font-size:.94rem;line-height:1.35;background:var(--fx-paper);
  transition:border-color .15s,transform .15s;border-bottom:1px solid var(--fx-rule)!important;
}
.fx-rel-g a:hover{border-color:var(--fx-mint)!important;transform:translateY(-2px)}

/* ══ A11Y / MOTION ═════════════════════════════════════════════════ */
.fx :focus-visible{outline:2px solid var(--fx-mint);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  .fx *,.fx-progress{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}
.fx-body h2{scroll-margin-top:calc(var(--fx-top,88px) + 8px)}

/* dark theme pass — site uses data-theme="dark" */
[data-theme="dark"] .fx{
  --fx-paper:#0D1F19;--fx-paper-2:#0A1A15;--fx-rule:#1C3A30;
  --fx-text:#E8F2EE;--fx-soft:#A8BDB5;--fx-mute:#7B928A;
}
[data-theme="dark"] .fx-tw thead th{background:#04120D}
[data-theme="dark"] .fx-note.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25)}

/* ══ STEPS — numbered procedure ═════════════════════════════════════ */
.fx-steps{counter-reset:fxstep;margin:clamp(28px,4vw,40px) 0;padding:0;list-style:none}
.fx-steps > li{
  counter-increment:fxstep;position:relative;padding:0 0 0 54px;margin:0 0 26px;
}
.fx-steps > li::before{
  content:counter(fxstep,decimal-leading-zero);position:absolute;left:0;top:0;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--fx-rule);border-radius:3px;background:var(--fx-paper);
  font-family:var(--fx-mono);font-size:12px;font-weight:500;color:var(--fx-emerald);
}
.fx-steps > li b{display:block;font-family:var(--fx-display);font-weight:600;
  font-size:1.06rem;color:var(--fx-text);margin-bottom:5px;line-height:1.3}
.fx-steps > li p{margin:0;color:var(--fx-soft)}

/* ══ INLINE CTA — mid-article, low-key ══════════════════════════════ */
.fx-inline{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  margin:clamp(30px,4vw,42px) 0;padding:20px 22px;
  border:1px solid var(--fx-rule);border-left:3px solid var(--fx-mint);
  border-radius:3px;background:var(--fx-paper-2);
}
.fx-inline p{margin:0;font-size:.97rem;color:var(--fx-text);max-width:46ch;line-height:1.55}
.fx-inline a{
  flex:none;background:var(--fx-emerald);color:#fff;padding:11px 20px;border-radius:2px;
  font-family:var(--fx-display);font-weight:600;font-size:.9rem;text-decoration:none;
  border-bottom:0!important;white-space:nowrap;
}
.fx-inline a:hover{filter:brightness(1.12)}

/* ══ TIER LADDER — bar chart of graded values ═══════════════════════ */
.fx-tier{margin:clamp(28px,4vw,38px) 0;border:1px solid var(--fx-rule);
  border-radius:3px;overflow:hidden;background:var(--fx-paper)}
.fx-tier-row{display:grid;grid-template-columns:88px 1fr 92px;gap:14px;align-items:center;
  padding:13px 18px;border-top:1px solid var(--fx-rule)}
.fx-tier-row:first-child{border-top:0}
.fx-tier-row.top{background:rgba(16,185,129,.07)}
.fx-tier-name{font-size:.88rem;color:var(--fx-soft);font-weight:500}
.fx-tier-track{height:7px;border-radius:4px;background:var(--fx-paper-2);overflow:hidden}
.fx-tier-fill{height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--fx-emerald),var(--fx-mint-lt))}
.fx-tier-num{font-family:var(--fx-mono);font-size:12px;color:var(--fx-text);
  text-align:right;white-space:nowrap}
@media(max-width:560px){
  .fx-tier-row{grid-template-columns:76px 1fr 68px;gap:10px;padding:11px 12px}
  .fx-tier-num{font-size:11px}
}

/* ══ AUTHOR ═════════════════════════════════════════════════════════ */
.fx-author{display:flex;gap:16px;align-items:flex-start;margin:clamp(40px,5vw,56px) 0 0;
  padding-top:28px;border-top:1px solid var(--fx-rule)}
.fx-author-av{width:48px;height:48px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--fx-emerald),var(--fx-mint));
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--fx-display);font-weight:600;font-size:1.05rem}
.fx-author-n{font-family:var(--fx-display);font-weight:600;font-size:.98rem;color:var(--fx-text)}
.fx-author-r{font-family:var(--fx-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fx-mute);margin:3px 0 8px}
.fx-author-b{font-size:.93rem;color:var(--fx-soft);margin:0;line-height:1.6;max-width:58ch}

/* ══ FIGURE / IMAGE ═════════════════════════════════════════════════ */
.fx-body img{max-width:100%;height:auto;border-radius:3px;border:1px solid var(--fx-rule)}
.fx-fig{margin:clamp(28px,4vw,38px) 0}
.fx-fig figcaption{margin-top:10px;font-family:var(--fx-mono);font-size:11px;
  color:var(--fx-mute);letter-spacing:.02em}

[data-theme="dark"] .fx-steps > li::before,
[data-theme="dark"] .fx-tier{background:#0A1A15}