/*
Theme Name: Anirudh Vidya Blog
Theme URI: https://anirudhvidya.com
Author: Anirudh Vidya
Description: Custom editorial blog theme for anirudhvidya.com — matches the bespoke static article design. Powers the /blog articles listing and single article posts.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: av-blog
*/

/* ===== from article-pipeline-audit.html ===== */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --ink: #0d0d0d;
    --paper: #f5f2ed;
    --cream: #ede9e1;
    --warm-mid: #c8b99a;
    --accent: #b85c38;
    --accent-light: #e8d5c4;
    --text-body: #3a3530;
    --text-muted: #7a7068;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;
    --mono: 'DM Mono', monospace;
    --green-soft: #d4e8d4;
    --red-soft: #f0ddd8;
  }

  html { scroll-behavior: smooth; }
  body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 4rem;
    background: rgba(245,242,237,0.88); backdrop-filter: blur(14px);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  .nav-logo { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
  .nav-links { display: flex; gap: 2.25rem; list-style: none; }
  .nav-links a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color 0.2s; }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 0.6rem 1.4rem; border-radius: 2px; transition: background 0.2s; }
  .nav-cta:hover { background: var(--accent); }

  /* ── HERO ── */
  .article-hero { padding: 9rem 4rem 4rem; max-width: 820px; margin: 0 auto; }
  .article-meta { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; flex-wrap: wrap; }
  .meta-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); background: var(--accent-light); padding: 0.3rem 0.75rem; border-radius: 2px; }
  .meta-tag-secondary { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); background: var(--cream); border: 0.5px solid var(--warm-mid); padding: 0.3rem 0.75rem; border-radius: 2px; }
  .meta-divider { width: 1px; height: 14px; background: var(--warm-mid); }
  .meta-text { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
  .article-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.1; color: var(--ink); margin-bottom: 1.5rem; }
  .article-title em { font-style: italic; color: var(--accent); }
  .article-hook { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--text-body); line-height: 1.75; border-left: 3px solid var(--accent); padding-left: 1.5rem; margin-bottom: 2.5rem; }
  .author-row { display: flex; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 0.5px solid var(--warm-mid); }
  .author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--warm-mid); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1rem; color: var(--accent); font-weight: 700; }
  .author-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
  .author-role { font-size: 0.78rem; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.04em; }

  .hero-rule { max-width: 820px; margin: 0 auto 4rem; padding: 0 4rem; height: 1px; background: var(--warm-mid); }

  /* ── BODY ── */
  .article-body { max-width: 820px; margin: 0 auto; padding: 0 4rem 5rem; }
  .article-body p { font-size: 1.02rem; color: var(--text-body); line-height: 1.9; margin-bottom: 1.6rem; }
  .article-body h2 { font-family: var(--serif); font-size: 1.65rem; font-weight: 700; color: var(--ink); margin: 3.5rem 0 1.1rem; line-height: 1.2; }
  .article-body h2 em { font-style: italic; color: var(--accent); }
  .article-body h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 2.25rem 0 0.65rem; }
  .pull-quote { font-family: var(--serif); font-style: italic; font-size: 1.28rem; color: var(--ink); border-left: 3px solid var(--accent); padding: 0.5rem 0 0.5rem 1.75rem; margin: 2.5rem 0; line-height: 1.55; }

  /* ── SITUATION SNAPSHOT ── */
  .snapshot-block { background: var(--ink); padding: 2.5rem 2.75rem; margin: 2.5rem 0; }
  .block-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
  .block-label::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; }
  .snapshot-block .block-label { color: var(--warm-mid); }
  .snapshot-block .block-label::before { background: var(--warm-mid); }
  .snapshot-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--paper); margin-bottom: 1.5rem; }
  .snapshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.07); }
  .snapshot-cell { background: var(--ink); padding: 1.25rem 1.5rem; }
  .snapshot-cell-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--warm-mid); margin-bottom: 0.4rem; }
  .snapshot-cell-value { font-size: 0.92rem; color: var(--paper); line-height: 1.6; }
  .snapshot-cell-value strong { color: var(--accent); }

  /* ── PROCESS STEPS ── */
  .process-block { margin: 2.75rem 0; }
  .process-step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; margin-bottom: 0; padding: 2.25rem 0; border-top: 0.5px solid var(--warm-mid); align-items: start; }
  .process-step:last-child { border-bottom: 0.5px solid var(--warm-mid); }
  .process-num-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-top: 0.2rem; }
  .process-num { font-family: var(--serif); font-size: 2.5rem; font-weight: 700; color: var(--accent); line-height: 1; }
  .process-phase { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
  .process-content {}
  .process-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 0.75rem; line-height: 1.2; }
  .process-title em { font-style: italic; color: var(--accent); }
  .process-body { font-size: 0.95rem; color: var(--text-body); line-height: 1.85; margin-bottom: 1.25rem; }

  /* ── FINDING CARDS ── */
  .findings-grid { display: flex; flex-direction: column; gap: 1px; background: var(--warm-mid); border: 0.5px solid var(--warm-mid); margin: 1.25rem 0; }
  .finding-row { display: grid; grid-template-columns: 2.5rem 1fr 1fr; background: var(--paper); gap: 0; }
  .finding-row-header { background: var(--cream); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
  .finding-cell { padding: 1rem 1.25rem; border-right: 0.5px solid var(--warm-mid); font-size: 0.88rem; line-height: 1.6; }
  .finding-cell:last-child { border-right: none; }
  .finding-index { color: var(--accent); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; }
  .finding-what { color: var(--text-body); }
  .finding-what strong { color: var(--ink); font-weight: 500; }
  .finding-impact { color: var(--text-muted); font-style: italic; font-size: 0.83rem; }
  .finding-impact.bad { color: #8b3a2a; background: var(--red-soft); padding: 0.2rem 0.5rem; font-style: normal; font-size: 0.8rem; display: inline-block; border-radius: 2px; }
  .finding-impact.fixed { color: #2a5c2a; background: var(--green-soft); padding: 0.2rem 0.5rem; font-style: normal; font-size: 0.8rem; display: inline-block; border-radius: 2px; }

  /* ── TQM EXPLAINER ── */
  .tqm-block { background: var(--cream); border: 0.5px solid var(--warm-mid); padding: 2.5rem 2.75rem; margin: 2.75rem 0; }
  .tqm-block .block-label { color: var(--accent); }
  .tqm-block .block-label::before { background: var(--accent); }
  .tqm-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 1.5rem; }
  .tqm-title em { font-style: italic; color: var(--accent); }
  .tqm-principles { display: flex; flex-direction: column; gap: 0; }
  .tqm-row { display: grid; grid-template-columns: 2rem 1.5fr 2.5fr; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 0.5px solid rgba(0,0,0,0.06); align-items: start; }
  .tqm-row:last-child { border-bottom: none; }
  .tqm-icon { font-size: 1rem; padding-top: 0.1rem; }
  .tqm-principle { font-size: 0.88rem; font-weight: 500; color: var(--ink); }
  .tqm-sub { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.2rem; }
  .tqm-application { font-size: 0.88rem; color: var(--text-body); line-height: 1.65; }

  /* ── FISHBONE / DIAGNOSIS VIZ ── */
  .diagnosis-block { border: 0.5px solid var(--warm-mid); margin: 2.75rem 0; overflow: hidden; }
  .diagnosis-header { background: var(--ink); padding: 1.5rem 2rem; }
  .diagnosis-header-label { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--warm-mid); margin-bottom: 0.4rem; }
  .diagnosis-header-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--paper); }
  .diagnosis-body { padding: 0; }
  .diagnosis-category { border-bottom: 0.5px solid var(--warm-mid); }
  .diagnosis-category:last-child { border-bottom: none; }
  .diagnosis-cat-header { padding: 1rem 2rem; background: var(--cream); display: flex; align-items: center; gap: 1rem; cursor: default; }
  .diagnosis-cat-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
  .diagnosis-cat-count { font-family: var(--mono); font-size: 0.65rem; color: var(--text-muted); margin-left: auto; }
  .diagnosis-causes { padding: 0 2rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .diagnosis-cause { display: grid; grid-template-columns: 0.75rem 1fr auto; gap: 0.85rem; align-items: start; padding-top: 0.6rem; }
  .cause-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; margin-top: 0.55rem; flex-shrink: 0; }
  .cause-text { font-size: 0.88rem; color: var(--text-body); line-height: 1.6; }
  .cause-text strong { color: var(--ink); font-weight: 500; }
  .cause-severity { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 2px; white-space: nowrap; align-self: start; margin-top: 0.3rem; }
  .sev-high { background: var(--red-soft); color: #8b3a2a; }
  .sev-med { background: #f5e8c4; color: #7a5a1a; }
  .sev-low { background: var(--green-soft); color: #2a5c2a; }

  /* ── DATA CALLOUTS ── */
  .data-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--warm-mid); margin: 2rem 0; border: 0.5px solid var(--warm-mid); }
  .data-cell { background: var(--paper); padding: 1.5rem 1.75rem; text-align: center; }
  .data-number { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.4rem; }
  .data-label { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; }
  .data-context { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

  /* ── CHECKLIST PREVIEW ── */
  .checklist-block { background: var(--cream); border: 0.5px solid var(--warm-mid); padding: 2.25rem 2.75rem; margin: 2.75rem 0; }
  .checklist-block .block-label { color: var(--accent); }
  .checklist-block .block-label::before { background: var(--accent); }
  .checklist-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 1.25rem; }
  .checklist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.75rem; }
  .checklist-section-title { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; }
  .checklist-items { display: flex; flex-direction: column; gap: 0.5rem; }
  .checklist-item { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.87rem; color: var(--text-body); line-height: 1.5; }
  .check-box { width: 14px; height: 14px; border: 1.5px solid var(--warm-mid); border-radius: 2px; flex-shrink: 0; margin-top: 0.15rem; display: flex; align-items: center; justify-content: center; }
  .check-box.checked { background: var(--accent); border-color: var(--accent); }
  .check-box.checked::after { content: '✓'; font-size: 0.6rem; color: white; font-weight: 700; }

  /* ── INSET NOTE ── */
  .inset-note { background: var(--accent-light); border-left: 3px solid var(--accent); padding: 1.25rem 1.5rem; margin: 2rem 0; font-size: 0.9rem; color: var(--text-body); line-height: 1.7; }
  .inset-note strong { color: var(--ink); }

  /* ── RELATED ── */
  .related-article { border: 0.5px solid var(--warm-mid); padding: 1.75rem 2rem; margin: 3rem 0; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
  .related-label { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
  .related-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 0.4rem; }
  .related-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
  .btn-ghost-sm { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); border: 0.5px solid var(--warm-mid); padding: 0.65rem 1.25rem; border-radius: 2px; white-space: nowrap; transition: all 0.2s; display: inline-block; }
  .btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }

  /* ── CTAs ── */
  .cta-section { background: var(--ink); padding: 3rem 3.25rem; margin: 3.5rem 0; }
  .cta-section .block-label { color: var(--warm-mid); }
  .cta-section .block-label::before { background: var(--warm-mid); }
  .cta-heading { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--paper); margin-bottom: 0.75rem; line-height: 1.25; }
  .cta-heading em { font-style: italic; color: var(--accent); }
  .cta-sub { font-size: 0.9rem; color: rgba(245,242,237,0.65); line-height: 1.7; margin-bottom: 1.75rem; }
  .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
  .btn-accent { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: var(--accent); padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s, transform 0.15s; display: inline-block; }
  .btn-accent:hover { background: var(--warm-mid); color: var(--ink); transform: translateY(-1px); }
  .btn-paper { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--paper); padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s; display: inline-block; }
  .btn-paper:hover { background: var(--cream); }
  .btn-ghost-light { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,237,0.6); border-bottom: 1px solid rgba(200,185,154,0.3); padding-bottom: 2px; transition: color 0.2s; }
  .btn-ghost-light:hover { color: var(--warm-mid); }

  /* ── END CTA GRID ── */
  .end-ctas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 3.5rem 0; }
  .end-cta-card { border: 0.5px solid var(--warm-mid); padding: 2rem 1.75rem; background: var(--paper); transition: transform 0.2s, box-shadow 0.2s; }
  .end-cta-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
  .end-cta-card.featured { background: var(--accent); border-color: var(--accent); }
  .end-cta-icon { font-size: 1.4rem; margin-bottom: 0.85rem; display: block; }
  .end-cta-title { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; line-height: 1.3; }
  .end-cta-card.featured .end-cta-title { color: var(--paper); }
  .end-cta-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; }
  .end-cta-card.featured .end-cta-desc { color: rgba(245,242,237,0.75); }
  .end-cta-link { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent-light); padding-bottom: 1px; transition: border-color 0.2s; }
  .end-cta-card.featured .end-cta-link { color: var(--paper); border-color: rgba(255,255,255,0.4); }
  .end-cta-link:hover { border-color: var(--accent); }

  /* ── TAGS ── */
  .article-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0; }
  .article-tag { font-size: 0.7rem; font-family: var(--mono); letter-spacing: 0.06em; color: var(--text-muted); background: var(--cream); border: 0.5px solid var(--warm-mid); padding: 0.25rem 0.65rem; border-radius: 2px; }

  /* ── MORE / FOOTER ── */
  .more-section { background: var(--ink); padding: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
  .more-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-mid); margin-bottom: 0.5rem; }
  .more-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--paper); }
  .more-title em { font-style: italic; color: var(--accent); }
  .btn-outline-light { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); border: 1px solid rgba(255,255,255,0.25); padding: 0.85rem 2rem; border-radius: 2px; transition: border-color 0.2s, background 0.2s; }
  .btn-outline-light:hover { background: var(--accent); border-color: var(--accent); }
  footer { background: var(--ink); color: var(--paper); padding: 2.75rem 4rem; display: flex; align-items: center; justify-content: space-between; border-top: 0.5px solid rgba(255,255,255,0.06); }
  .footer-logo { font-family: var(--serif); font-size: 1.1rem; color: var(--paper); }
  .footer-links { display: flex; gap: 2rem; list-style: none; }
  .footer-links a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-mid); transition: color 0.2s; }
  .footer-links a:hover { color: var(--paper); }
  .footer-copy { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    .article-hero, .article-body { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero-rule { padding: 0 1.5rem; }
    .snapshot-grid { grid-template-columns: 1fr; }
    .process-step { grid-template-columns: 3rem 1fr; gap: 1rem; }
    .data-row { grid-template-columns: 1fr; }
    .finding-row { grid-template-columns: 2rem 1fr; }
    .finding-row .finding-impact { display: none; }
    .finding-row-header .finding-cell:last-child { display: none; }
    .tqm-row { grid-template-columns: 1.5rem 1fr; }
    .tqm-application { grid-column: 2; }
    .diagnosis-cause { grid-template-columns: 0.75rem 1fr; }
    .cause-severity { display: none; }
    .checklist-cols { grid-template-columns: 1fr; }
    .end-ctas { grid-template-columns: 1fr; }
    .related-article { grid-template-columns: 1fr; gap: 1rem; }
    .cta-section, .tqm-block, .checklist-block, .snapshot-block { padding: 1.75rem 1.5rem; }
    .more-section { padding: 2.5rem 1.5rem; flex-direction: column; align-items: flex-start; }
    footer { flex-direction: column; gap: 1.5rem; padding: 2rem 1.5rem; }
  }
/* ===== from article-budget-story.html ===== */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --ink: #0d0d0d;
    --paper: #f5f2ed;
    --cream: #ede9e1;
    --warm-mid: #c8b99a;
    --accent: #b85c38;
    --accent-light: #e8d5c4;
    --text-body: #3a3530;
    --text-muted: #7a7068;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;
    --mono: 'DM Mono', monospace;
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 4rem;
    background: rgba(245,242,237,0.88);
    backdrop-filter: blur(14px);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  .nav-logo { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ink); }
  .nav-links { display: flex; gap: 2.25rem; list-style: none; }
  .nav-links a {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted); transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--paper); background: var(--ink);
    padding: 0.6rem 1.4rem; border-radius: 2px; transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--accent); }

  /* ── ARTICLE HERO ── */
  .article-hero {
    padding: 9rem 4rem 4rem;
    max-width: 820px;
    margin: 0 auto;
  }
  .article-meta {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 2rem; flex-wrap: wrap;
  }
  .meta-tag {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--accent);
    background: var(--accent-light); padding: 0.3rem 0.75rem; border-radius: 2px;
  }
  .meta-divider { width: 1px; height: 14px; background: var(--warm-mid); }
  .meta-text {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .article-title {
    font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 700; line-height: 1.1; color: var(--ink); margin-bottom: 1.5rem;
  }
  .article-title em { font-style: italic; color: var(--accent); }
  .article-hook {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--text-body);
    line-height: 1.7; border-left: 3px solid var(--accent);
    padding-left: 1.5rem; margin-bottom: 2.5rem;
  }
  .author-row {
    display: flex; align-items: center; gap: 1rem;
    padding-top: 1.5rem; border-top: 0.5px solid var(--warm-mid);
  }
  .author-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--cream); border: 1.5px solid var(--warm-mid);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 1rem; color: var(--accent); font-weight: 700;
  }
  .author-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
  .author-role { font-size: 0.78rem; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.04em; }

  /* ── HERO DIVIDER ── */
  .hero-rule {
    max-width: 820px; margin: 0 auto 4rem;
    padding: 0 4rem;
    height: 1px; background: var(--warm-mid);
  }

  /* ── ARTICLE BODY ── */
  .article-body {
    max-width: 820px; margin: 0 auto;
    padding: 0 4rem 5rem;
  }

  .article-body p {
    font-size: 1.02rem; color: var(--text-body);
    line-height: 1.9; margin-bottom: 1.6rem;
  }

  .article-body h2 {
    font-family: var(--serif); font-size: 1.65rem;
    font-weight: 700; color: var(--ink);
    margin: 3.5rem 0 1.1rem; line-height: 1.2;
  }
  .article-body h2 em { font-style: italic; color: var(--accent); }

  .article-body h3 {
    font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
    color: var(--ink); margin: 2.25rem 0 0.75rem;
  }

  .pull-quote {
    font-family: var(--serif); font-style: italic;
    font-size: 1.3rem; color: var(--ink);
    border-left: 3px solid var(--accent);
    padding: 0.5rem 0 0.5rem 1.75rem;
    margin: 2.5rem 0; line-height: 1.55;
  }

  /* ── FRAMEWORK BLOCK ── */
  .framework-block {
    background: var(--cream); border: 0.5px solid var(--warm-mid);
    padding: 2.5rem 2.75rem; margin: 2.5rem 0; position: relative;
  }
  .framework-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .framework-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent);
  }
  .framework-title {
    font-family: var(--serif); font-size: 1.35rem; font-weight: 700;
    color: var(--ink); margin-bottom: 1.5rem;
  }
  .framework-steps { display: flex; flex-direction: column; gap: 1.25rem; }
  .step {
    display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start;
  }
  .step-num {
    font-family: var(--serif); font-size: 2rem; font-weight: 700;
    color: var(--accent); line-height: 1; padding-top: 0.1rem;
  }
  .step-content {}
  .step-name {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem;
  }
  .step-title {
    font-family: var(--serif); font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: 0.4rem;
  }
  .step-desc { font-size: 0.9rem; color: var(--text-body); line-height: 1.7; }
  .step-example {
    font-size: 0.83rem; color: var(--text-muted); font-style: italic;
    margin-top: 0.4rem; padding-left: 0.75rem;
    border-left: 2px solid var(--accent-light);
    line-height: 1.6;
  }
  .step-divider {
    height: 0.5px; background: var(--warm-mid); margin: 0.25rem 0 0 3.5rem;
  }

  /* ── COMPLEXITY TABLE ── */
  .complexity-block {
    background: var(--ink); padding: 2.5rem 2.75rem; margin: 2.5rem 0;
  }
  .complexity-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--warm-mid);
    margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .complexity-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--warm-mid);
  }
  .complexity-title {
    font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
    color: var(--paper); margin-bottom: 1.5rem;
  }
  .complexity-grid { display: flex; flex-direction: column; gap: 0.85rem; }
  .complexity-row {
    display: grid; grid-template-columns: 1.5rem 1fr;
    gap: 0.85rem; align-items: start;
    padding-bottom: 0.85rem; border-bottom: 0.5px solid rgba(255,255,255,0.08);
  }
  .complexity-row:last-child { border-bottom: none; padding-bottom: 0; }
  .complexity-dot {
    width: 6px; height: 6px; background: var(--accent);
    border-radius: 50%; margin-top: 0.55rem;
  }
  .complexity-text { font-size: 0.9rem; color: rgba(245,242,237,0.8); line-height: 1.65; }
  .complexity-text strong { color: var(--paper); font-weight: 500; }

  /* ── ALLOCATION BREAKDOWN ── */
  .alloc-block {
    border: 0.5px solid var(--warm-mid); padding: 2.5rem 2.75rem; margin: 2.5rem 0;
  }
  .alloc-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .alloc-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent);
  }
  .alloc-title {
    font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
    color: var(--ink); margin-bottom: 1.5rem;
  }
  .alloc-rows { display: flex; flex-direction: column; gap: 0; }
  .alloc-row {
    display: grid; grid-template-columns: 2rem 1fr 5rem;
    gap: 1rem; align-items: center;
    padding: 0.85rem 0; border-bottom: 0.5px solid rgba(0,0,0,0.06);
  }
  .alloc-row:last-child { border-bottom: none; }
  .alloc-index {
    font-family: var(--mono); font-size: 0.65rem; color: var(--accent); letter-spacing: 0.08em;
  }
  .alloc-channel { font-size: 0.9rem; color: var(--text-body); font-weight: 500; }
  .alloc-sub { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin-top: 0.1rem; }
  .alloc-bar-wrap { width: 100%; background: var(--cream); height: 4px; margin-top: 0.3rem; border-radius: 2px; }
  .alloc-bar { height: 4px; background: var(--accent); border-radius: 2px; }
  .alloc-pct {
    font-family: var(--mono); font-size: 0.8rem; color: var(--accent);
    font-weight: 500; text-align: right;
  }

  /* ── INSET NOTE ── */
  .inset-note {
    background: var(--accent-light); border-left: 3px solid var(--accent);
    padding: 1.25rem 1.5rem; margin: 2rem 0;
    font-size: 0.9rem; color: var(--text-body); line-height: 1.7;
  }
  .inset-note strong { color: var(--ink); }

  /* ── CTA BLOCKS ── */
  .cta-section {
    background: var(--cream); border: 0.5px solid var(--warm-mid);
    padding: 3rem 3.25rem; margin: 3.5rem 0;
  }
  .cta-section-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .cta-section-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent);
  }
  .cta-heading {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
    color: var(--ink); margin-bottom: 0.75rem; line-height: 1.25;
  }
  .cta-heading em { font-style: italic; color: var(--accent); }
  .cta-sub {
    font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.75rem;
  }
  .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
  .btn-primary {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper); background: var(--ink);
    padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s, transform 0.15s;
    display: inline-block;
  }
  .btn-primary:hover { background: var(--accent); transform: translateY(-1px); }
  .btn-accent {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper); background: var(--accent);
    padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s, transform 0.15s;
    display: inline-block;
  }
  .btn-accent:hover { background: var(--ink); transform: translateY(-1px); }
  .btn-ghost {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid var(--warm-mid); padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
  }
  .btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

  /* ── 3-CTA GRID AT END ── */
  .end-ctas {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem; margin: 3.5rem 0;
  }
  .end-cta-card {
    border: 0.5px solid var(--warm-mid); padding: 2rem 1.75rem;
    background: var(--paper); transition: transform 0.2s, box-shadow 0.2s;
  }
  .end-cta-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
  .end-cta-icon {
    font-size: 1.4rem; margin-bottom: 0.85rem; display: block;
  }
  .end-cta-title {
    font-family: var(--serif); font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: 0.5rem; line-height: 1.3;
  }
  .end-cta-desc {
    font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem;
  }
  .end-cta-link {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
    border-bottom: 1px solid var(--accent-light); padding-bottom: 1px;
    transition: border-color 0.2s;
  }
  .end-cta-link:hover { border-color: var(--accent); }

  /* ── TAGS FOOTER ── */
  .article-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0; }
  .article-tag {
    font-size: 0.7rem; font-family: var(--mono); letter-spacing: 0.06em;
    color: var(--text-muted); background: var(--cream);
    border: 0.5px solid var(--warm-mid); padding: 0.25rem 0.65rem; border-radius: 2px;
  }

  /* ── MORE ARTICLES NAV ── */
  .more-section {
    background: var(--ink); padding: 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    flex-wrap: wrap;
  }
  .more-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--warm-mid); margin-bottom: 0.5rem;
  }
  .more-title {
    font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--paper);
  }
  .more-title em { font-style: italic; color: var(--accent); }
  .btn-outline-light {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper);
    border: 1px solid rgba(255,255,255,0.25); padding: 0.85rem 2rem;
    border-radius: 2px; transition: border-color 0.2s, background 0.2s;
  }
  .btn-outline-light:hover { background: var(--accent); border-color: var(--accent); }

  /* ── FOOTER ── */
  footer {
    background: var(--ink); color: var(--paper);
    padding: 2.75rem 4rem;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 0.5px solid rgba(255,255,255,0.06);
  }
  .footer-logo { font-family: var(--serif); font-size: 1.1rem; color: var(--paper); }
  .footer-links { display: flex; gap: 2rem; list-style: none; }
  .footer-links a {
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--warm-mid); transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--paper); }
  .footer-copy { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    .article-hero, .article-body { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero-rule { padding: 0 1.5rem; }
    .framework-block, .complexity-block, .alloc-block, .cta-section { padding: 1.75rem 1.5rem; }
    .end-ctas { grid-template-columns: 1fr; }
    .more-section { padding: 2.5rem 1.5rem; flex-direction: column; align-items: flex-start; }
    footer { flex-direction: column; gap: 1.5rem; padding: 2rem 1.5rem; text-align: center; }
  }
/* ===== from article-scaler-vs-specialist_2.html ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#0d0d0d;--paper:#f5f2ed;--cream:#ede9e1;--warm-mid:#c8b99a;--accent:#b85c38;--accent-light:#e8d5c4;--text-body:#3a3530;--text-muted:#7a7068;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',sans-serif;--mono:'DM Mono',monospace}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 4rem;background:rgba(245,242,237,0.88);backdrop-filter:blur(14px);border-bottom:0.5px solid rgba(0,0,0,0.08)}
.nav-logo{font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.nav-links{display:flex;gap:2.25rem;list-style:none}
.nav-links a{font-size:0.78rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);transition:color 0.2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{font-size:0.78rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:0.6rem 1.4rem;border-radius:2px;transition:background 0.2s}
.nav-cta:hover{background:var(--accent)}

.article-hero{padding:9rem 4rem 4rem;max-width:820px;margin:0 auto}
.article-meta{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem;flex-wrap:wrap}
.meta-tag{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);background:var(--accent-light);padding:0.3rem 0.75rem;border-radius:2px}
.meta-tag-sec{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);background:var(--cream);border:0.5px solid var(--warm-mid);padding:0.3rem 0.75rem;border-radius:2px}
.meta-divider{width:1px;height:14px;background:var(--warm-mid)}
.meta-text{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted)}
.article-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.1rem);font-weight:700;line-height:1.1;color:var(--ink);margin-bottom:1.5rem}
.article-title em{font-style:italic;color:var(--accent)}
.article-hook{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.8vw,1.15rem);color:var(--text-body);line-height:1.75;border-left:3px solid var(--accent);padding-left:1.5rem;margin-bottom:2.5rem}
.author-row{display:flex;align-items:center;gap:1rem;padding-top:1.5rem;border-top:0.5px solid var(--warm-mid)}
.author-avatar{width:42px;height:42px;border-radius:50%;background:var(--cream);border:1.5px solid var(--warm-mid);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;color:var(--accent);font-weight:700}
.author-name{font-size:0.9rem;font-weight:500;color:var(--ink)}
.author-role{font-size:0.78rem;color:var(--text-muted);font-family:var(--mono);letter-spacing:0.04em}
.hero-rule{max-width:820px;margin:0 auto 4rem;padding:0 4rem;height:1px;background:var(--warm-mid)}

.article-body{max-width:820px;margin:0 auto;padding:0 4rem 5rem}
.article-body p{font-size:1.02rem;color:var(--text-body);line-height:1.9;margin-bottom:1.6rem}
.article-body h2{font-family:var(--serif);font-size:1.65rem;font-weight:700;color:var(--ink);margin:3.5rem 0 1.1rem;line-height:1.2}
.article-body h2 em{font-style:italic;color:var(--accent)}
.pull-quote{font-family:var(--serif);font-style:italic;font-size:1.28rem;color:var(--ink);border-left:3px solid var(--accent);padding:0.5rem 0 0.5rem 1.75rem;margin:2.75rem 0;line-height:1.55}

.contrast-block{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--warm-mid);margin:2.75rem 0;border:0.5px solid var(--warm-mid)}
.contrast-side{padding:2rem 2.25rem}
.cs-dark{background:var(--ink)}
.cs-light{background:var(--cream)}
.contrast-label{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:0.85rem}
.cs-dark .contrast-label{color:var(--warm-mid)}
.cs-light .contrast-label{color:var(--accent)}
.contrast-title{font-family:var(--serif);font-size:1.1rem;font-weight:700;margin-bottom:1rem;line-height:1.25}
.cs-dark .contrast-title{color:var(--paper)}
.cs-light .contrast-title{color:var(--ink)}
.contrast-items{display:flex;flex-direction:column;gap:0.65rem}
.contrast-item{display:flex;align-items:flex-start;gap:0.75rem;font-size:0.88rem;line-height:1.6}
.cs-dark .contrast-item{color:rgba(245,242,237,0.75)}
.cs-light .contrast-item{color:var(--text-body)}
.ci-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:0.55rem}
.cs-dark .ci-dot{background:var(--warm-mid)}
.cs-light .ci-dot{background:var(--accent)}

.inflection-block{background:var(--ink);padding:2.5rem 2.75rem;margin:2.75rem 0}
.blabel{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:1.25rem;display:flex;align-items:center;gap:0.75rem}
.blabel::before{content:'';display:inline-block;width:1.25rem;height:1px}
.inflection-block .blabel{color:var(--warm-mid)}
.inflection-block .blabel::before{background:var(--warm-mid)}
.block-title{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--paper);margin-bottom:1.5rem}
.signal-row{display:grid;grid-template-columns:1.75rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:0.5px solid rgba(255,255,255,0.07);align-items:start}
.signal-row:last-child{border-bottom:none}
.signal-num{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--accent);line-height:1.2}
.signal-text{font-size:0.9rem;color:rgba(245,242,237,0.8);line-height:1.65}
.signal-text strong{color:var(--paper);font-weight:500}

.stages-block{border:0.5px solid var(--warm-mid);margin:2.75rem 0;overflow:hidden}
.stages-hdr{background:var(--accent);padding:1.5rem 2.25rem}
.stages-hdr-lbl{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:0.3rem}
.stages-hdr-ttl{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--paper)}
.stages-body{display:grid;grid-template-columns:repeat(3,1fr);background:var(--warm-mid);gap:1px}
.stage-col{background:var(--paper);padding:1.75rem}
.stage-era{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem}
.stage-name{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:0.2rem}
.stage-sub{font-size:0.78rem;color:var(--accent);font-family:var(--mono);margin-bottom:1rem}
.stage-bar{height:4px;background:var(--cream);border-radius:2px;margin-bottom:1rem;overflow:hidden}
.stage-bar-fill{height:100%;background:var(--accent);border-radius:2px}
.stage-body-text{font-size:0.86rem;color:var(--text-body);line-height:1.65}
.stage-body-text strong{color:var(--ink);font-weight:500}

.funnel-block{background:var(--cream);border:0.5px solid var(--warm-mid);padding:2.5rem 2.75rem;margin:2.75rem 0}
.funnel-block .blabel{color:var(--accent)}
.funnel-block .blabel::before{background:var(--accent)}
.funnel-title{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:0.4rem}
.funnel-title em{font-style:italic;color:var(--accent)}
.funnel-sub{font-size:0.88rem;color:var(--text-muted);margin-bottom:1.75rem;line-height:1.6}
.funnel-row{display:grid;grid-template-columns:1.5rem 1.5fr 2fr;gap:1.25rem;padding:1.1rem 0;border-bottom:0.5px solid rgba(0,0,0,0.06);align-items:start}
.funnel-row:last-child{border-bottom:none}
.funnel-arrow{color:var(--accent);font-size:0.9rem;padding-top:0.15rem}
.funnel-layer{font-size:0.88rem;font-weight:500;color:var(--ink)}
.funnel-layer-sub{font-size:0.75rem;color:var(--text-muted);font-family:var(--mono);margin-top:0.15rem}
.funnel-val{font-size:0.88rem;color:var(--text-body);line-height:1.65}
.funnel-val strong{color:var(--accent);font-weight:500}

.howto-step{display:grid;grid-template-columns:4rem 1fr;gap:1.5rem;padding:2.25rem 0;border-top:0.5px solid var(--warm-mid);align-items:start}
.howto-step:last-child{border-bottom:0.5px solid var(--warm-mid)}
.howto-num{font-family:var(--serif);font-size:2.25rem;font-weight:700;color:var(--accent);line-height:1}
.howto-title{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:0.7rem;line-height:1.25}
.howto-title em{font-style:italic;color:var(--accent)}
.howto-body{font-size:0.95rem;color:var(--text-body);line-height:1.85}
.howto-body strong{color:var(--ink);font-weight:500}

.names-block{border:0.5px solid var(--warm-mid);margin:2.75rem 0;overflow:hidden}
.names-hdr{background:var(--cream);padding:1.25rem 2rem;border-bottom:0.5px solid var(--warm-mid);display:flex;align-items:center;justify-content:space-between}
.names-hdr-lbl{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted)}
.names-hdr-ttl{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--ink);font-style:italic}
.name-row{display:grid;grid-template-columns:1.75fr 1fr 2fr;border-bottom:0.5px solid var(--warm-mid)}
.name-row:last-child{border-bottom:none}
.name-row.hrow{background:var(--cream)}
.name-cell{padding:0.9rem 1.5rem;font-size:0.88rem;border-right:0.5px solid var(--warm-mid);line-height:1.5;color:var(--text-body)}
.name-cell:last-child{border-right:none}
.name-row.hrow .name-cell{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);padding:0.75rem 1.5rem}
.name-person{font-weight:500;color:var(--ink)}
.name-known{color:var(--text-muted);font-style:italic;font-size:0.82rem}

.inset-note{background:var(--accent-light);border-left:3px solid var(--accent);padding:1.25rem 1.5rem;margin:2rem 0;font-size:0.9rem;color:var(--text-body);line-height:1.7}
.inset-note strong{color:var(--ink)}

.cta-dark{background:var(--ink);padding:3rem 3.25rem;margin:3.5rem 0}
.cta-dark .blabel{color:var(--warm-mid)}
.cta-dark .blabel::before{background:var(--warm-mid)}
.cta-heading{font-family:var(--serif);font-size:1.5rem;font-weight:700;margin-bottom:0.75rem;line-height:1.25}
.cta-dark .cta-heading{color:var(--paper)}
.cta-heading em{font-style:italic;color:var(--accent)}
.cta-sub{font-size:0.9rem;line-height:1.7;margin-bottom:1.75rem}
.cta-dark .cta-sub{color:rgba(245,242,237,0.65)}
.cta-btns{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-accent{font-size:0.78rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--paper);background:var(--accent);padding:0.85rem 2rem;border-radius:2px;transition:background 0.2s,transform 0.15s;display:inline-block}
.btn-accent:hover{background:var(--warm-mid);color:var(--ink);transform:translateY(-1px)}
.btn-paper{font-size:0.78rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:0.85rem 2rem;border-radius:2px;transition:all 0.2s;display:inline-block}
.btn-paper:hover{background:var(--cream)}

.end-ctas{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:3.5rem 0}
.end-cta-card{border:0.5px solid var(--warm-mid);padding:2rem 1.75rem;background:var(--paper);transition:transform 0.2s,box-shadow 0.2s}
.end-cta-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.06)}
.end-cta-card.featured{background:var(--ink);border-color:var(--ink)}
.end-cta-icon{font-size:1.4rem;margin-bottom:0.85rem;display:block}
.end-cta-title{font-family:var(--serif);font-size:1rem;font-weight:700;margin-bottom:0.5rem;line-height:1.3}
.end-cta-card.featured .end-cta-title{color:var(--paper)}
.end-cta-card:not(.featured) .end-cta-title{color:var(--ink)}
.end-cta-desc{font-size:0.82rem;line-height:1.6;margin-bottom:1.25rem}
.end-cta-card.featured .end-cta-desc{color:rgba(245,242,237,0.6)}
.end-cta-card:not(.featured) .end-cta-desc{color:var(--text-muted)}
.end-cta-link{font-size:0.72rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;border-bottom:1px solid;padding-bottom:1px}
.end-cta-card.featured .end-cta-link{color:var(--warm-mid);border-color:rgba(200,185,154,0.35)}
.end-cta-card:not(.featured) .end-cta-link{color:var(--accent);border-color:var(--accent-light)}

.article-tags{display:flex;gap:0.5rem;flex-wrap:wrap;margin:2rem 0}
.article-tag{font-size:0.7rem;font-family:var(--mono);letter-spacing:0.06em;color:var(--text-muted);background:var(--cream);border:0.5px solid var(--warm-mid);padding:0.25rem 0.65rem;border-radius:2px}

.more-section{background:var(--ink);padding:4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.more-label{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--warm-mid);margin-bottom:0.5rem}
.more-title{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--paper)}
.more-title em{font-style:italic;color:var(--accent)}
.btn-outline-light{font-size:0.78rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--paper);border:1px solid rgba(255,255,255,0.25);padding:0.85rem 2rem;border-radius:2px;transition:border-color 0.2s,background 0.2s;display:inline-block}
.btn-outline-light:hover{background:var(--accent);border-color:var(--accent)}
footer{background:var(--ink);color:var(--paper);padding:2.75rem 4rem;display:flex;align-items:center;justify-content:space-between;border-top:0.5px solid rgba(255,255,255,0.06)}
.footer-logo{font-family:var(--serif);font-size:1.1rem;color:var(--paper)}
.footer-links{display:flex;gap:2rem;list-style:none}
.footer-links a{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--warm-mid);transition:color 0.2s}
.footer-links a:hover{color:var(--paper)}
.footer-copy{font-family:var(--mono);font-size:0.7rem;color:var(--text-muted)}

@media(max-width:900px){
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  .article-hero,.article-body{padding-left:1.5rem;padding-right:1.5rem}
  .hero-rule{padding:0 1.5rem}
  .contrast-block{grid-template-columns:1fr}
  .stages-body{grid-template-columns:1fr}
  .funnel-row{grid-template-columns:1.5rem 1fr}
  .howto-step{grid-template-columns:3rem 1fr}
  .name-row{grid-template-columns:1fr 1fr}
  .name-row .name-cell:last-child{display:none}
  .end-ctas{grid-template-columns:1fr}
  .inflection-block,.funnel-block,.cta-dark{padding:1.75rem 1.5rem}
  .more-section{padding:2.5rem 1.5rem;flex-direction:column;align-items:flex-start}
  footer{flex-direction:column;gap:1.5rem;padding:2rem 1.5rem}
}
/* ===== from article-thought-leadership.html ===== */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --ink: #0d0d0d;
    --paper: #f5f2ed;
    --cream: #ede9e1;
    --warm-mid: #c8b99a;
    --accent: #b85c38;
    --accent-light: #e8d5c4;
    --text-body: #3a3530;
    --text-muted: #7a7068;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;
    --mono: 'DM Mono', monospace;
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 4rem;
    background: rgba(245,242,237,0.88);
    backdrop-filter: blur(14px);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  .nav-logo { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ink); }
  .nav-links { display: flex; gap: 2.25rem; list-style: none; }
  .nav-links a {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted); transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--paper); background: var(--ink);
    padding: 0.6rem 1.4rem; border-radius: 2px; transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--accent); }

  /* ── ARTICLE HERO ── */
  .article-hero {
    padding: 9rem 4rem 4rem;
    max-width: 820px;
    margin: 0 auto;
  }
  .article-meta {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 2rem; flex-wrap: wrap;
  }
  .meta-tag {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--accent);
    background: var(--accent-light); padding: 0.3rem 0.75rem; border-radius: 2px;
  }
  .meta-divider { width: 1px; height: 14px; background: var(--warm-mid); }
  .meta-text {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .article-title {
    font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 700; line-height: 1.1; color: var(--ink); margin-bottom: 1.5rem;
  }
  .article-title em { font-style: italic; color: var(--accent); }
  .article-hook {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--text-body);
    line-height: 1.7; border-left: 3px solid var(--accent);
    padding-left: 1.5rem; margin-bottom: 2.5rem;
  }
  .author-row {
    display: flex; align-items: center; gap: 1rem;
    padding-top: 1.5rem; border-top: 0.5px solid var(--warm-mid);
  }
  .author-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--cream); border: 1.5px solid var(--warm-mid);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 1rem; color: var(--accent); font-weight: 700;
  }
  .author-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
  .author-role { font-size: 0.78rem; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.04em; }

  /* ── HERO DIVIDER ── */
  .hero-rule {
    max-width: 820px; margin: 0 auto 4rem;
    padding: 0 4rem;
    height: 1px; background: var(--warm-mid);
  }

  /* ── ARTICLE BODY ── */
  .article-body {
    max-width: 820px; margin: 0 auto;
    padding: 0 4rem 5rem;
  }

  .article-body p {
    font-size: 1.02rem; color: var(--text-body);
    line-height: 1.9; margin-bottom: 1.6rem;
  }

  .article-body h2 {
    font-family: var(--serif); font-size: 1.65rem;
    font-weight: 700; color: var(--ink);
    margin: 3.5rem 0 1.1rem; line-height: 1.2;
  }
  .article-body h2 em { font-style: italic; color: var(--accent); }

  .article-body h3 {
    font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
    color: var(--ink); margin: 2.25rem 0 0.75rem;
  }

  .pull-quote {
    font-family: var(--serif); font-style: italic;
    font-size: 1.3rem; color: var(--ink);
    border-left: 3px solid var(--accent);
    padding: 0.5rem 0 0.5rem 1.75rem;
    margin: 2.5rem 0; line-height: 1.55;
  }

  /* ── FRAMEWORK BLOCK (used here for the 4 Tests) ── */
  .framework-block {
    background: var(--cream); border: 0.5px solid var(--warm-mid);
    padding: 2.5rem 2.75rem; margin: 2.5rem 0; position: relative;
  }
  .framework-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .framework-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent);
  }
  .framework-title {
    font-family: var(--serif); font-size: 1.35rem; font-weight: 700;
    color: var(--ink); margin-bottom: 1.5rem;
  }
  .framework-steps { display: flex; flex-direction: column; gap: 1.25rem; }
  .step {
    display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start;
  }
  .step-num {
    font-family: var(--serif); font-size: 2rem; font-weight: 700;
    color: var(--accent); line-height: 1; padding-top: 0.1rem;
  }
  .step-content {}
  .step-name {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem;
  }
  .step-title {
    font-family: var(--serif); font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: 0.4rem;
  }
  .step-desc { font-size: 0.9rem; color: var(--text-body); line-height: 1.7; }
  .step-example {
    font-size: 0.83rem; color: var(--text-muted); font-style: italic;
    margin-top: 0.4rem; padding-left: 0.75rem;
    border-left: 2px solid var(--accent-light);
    line-height: 1.6;
  }
  .step-divider {
    height: 0.5px; background: var(--warm-mid); margin: 0.25rem 0 0 3.5rem;
  }

  /* ── DARK COMPLEXITY-STYLE BLOCK (used here for "what it isn't") ── */
  .complexity-block {
    background: var(--ink); padding: 2.5rem 2.75rem; margin: 2.5rem 0;
  }
  .complexity-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--warm-mid);
    margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .complexity-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--warm-mid);
  }
  .complexity-title {
    font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
    color: var(--paper); margin-bottom: 1.5rem;
  }
  .complexity-grid { display: flex; flex-direction: column; gap: 0.85rem; }
  .complexity-row {
    display: grid; grid-template-columns: 1.5rem 1fr;
    gap: 0.85rem; align-items: start;
    padding-bottom: 0.85rem; border-bottom: 0.5px solid rgba(255,255,255,0.08);
  }
  .complexity-row:last-child { border-bottom: none; padding-bottom: 0; }
  .complexity-dot {
    width: 6px; height: 6px; background: var(--accent);
    border-radius: 50%; margin-top: 0.55rem;
  }
  .complexity-text { font-size: 0.9rem; color: rgba(245,242,237,0.8); line-height: 1.65; }
  .complexity-text strong { color: var(--paper); font-weight: 500; }

  /* ── COMPARISON TABLE (weak vs real thought leadership) ── */
  .alloc-block {
    border: 0.5px solid var(--warm-mid); padding: 2.5rem 2.75rem; margin: 2.5rem 0;
  }
  .alloc-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .alloc-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent);
  }
  .alloc-title {
    font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
    color: var(--ink); margin-bottom: 1.5rem;
  }
  .compare-rows { display: flex; flex-direction: column; gap: 0; }
  .compare-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.5rem; padding: 1rem 0; border-bottom: 0.5px solid rgba(0,0,0,0.06);
  }
  .compare-row:last-child { border-bottom: none; }
  .compare-row.head {
    padding-bottom: 0.75rem; border-bottom: 1px solid var(--warm-mid);
  }
  .compare-head-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .compare-head-label.bad { color: var(--accent); }
  .compare-cell { font-size: 0.88rem; color: var(--text-body); line-height: 1.65; }
  .compare-cell.weak { color: var(--text-muted); }
  .compare-cell.strong { color: var(--ink); font-weight: 500; }

  /* ── INSET NOTE ── */
  .inset-note {
    background: var(--accent-light); border-left: 3px solid var(--accent);
    padding: 1.25rem 1.5rem; margin: 2rem 0;
    font-size: 0.9rem; color: var(--text-body); line-height: 1.7;
  }
  .inset-note strong { color: var(--ink); }

  /* ── CTA BLOCKS ── */
  .cta-section {
    background: var(--cream); border: 0.5px solid var(--warm-mid);
    padding: 3rem 3.25rem; margin: 3.5rem 0;
  }
  .cta-section-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .cta-section-label::before {
    content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent);
  }
  .cta-heading {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
    color: var(--ink); margin-bottom: 0.75rem; line-height: 1.25;
  }
  .cta-heading em { font-style: italic; color: var(--accent); }
  .cta-sub {
    font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.75rem;
  }
  .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
  .btn-primary {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper); background: var(--ink);
    padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s, transform 0.15s;
    display: inline-block;
  }
  .btn-primary:hover { background: var(--accent); transform: translateY(-1px); }
  .btn-accent {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper); background: var(--accent);
    padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s, transform 0.15s;
    display: inline-block;
  }
  .btn-accent:hover { background: var(--ink); transform: translateY(-1px); }
  .btn-ghost {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid var(--warm-mid); padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
  }
  .btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

  /* ── END CTA GRID (2 cards for this article: Call + LinkedIn) ── */
  .end-ctas {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem; margin: 3.5rem 0;
  }
  .end-cta-card {
    border: 0.5px solid var(--warm-mid); padding: 2rem 1.75rem;
    background: var(--paper); transition: transform 0.2s, box-shadow 0.2s;
  }
  .end-cta-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
  .end-cta-icon {
    font-size: 1.4rem; margin-bottom: 0.85rem; display: block;
  }
  .end-cta-title {
    font-family: var(--serif); font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: 0.5rem; line-height: 1.3;
  }
  .end-cta-desc {
    font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem;
  }
  .end-cta-link {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
    border-bottom: 1px solid var(--accent-light); padding-bottom: 1px;
    transition: border-color 0.2s;
  }
  .end-cta-link:hover { border-color: var(--accent); }

  /* ── TAGS FOOTER ── */
  .article-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0; }
  .article-tag {
    font-size: 0.7rem; font-family: var(--mono); letter-spacing: 0.06em;
    color: var(--text-muted); background: var(--cream);
    border: 0.5px solid var(--warm-mid); padding: 0.25rem 0.65rem; border-radius: 2px;
  }

  /* ── MORE ARTICLES NAV ── */
  .more-section {
    background: var(--ink); padding: 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    flex-wrap: wrap;
  }
  .more-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--warm-mid); margin-bottom: 0.5rem;
  }
  .more-title {
    font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--paper);
  }
  .more-title em { font-style: italic; color: var(--accent); }
  .btn-outline-light {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper);
    border: 1px solid rgba(255,255,255,0.25); padding: 0.85rem 2rem;
    border-radius: 2px; transition: border-color 0.2s, background 0.2s;
  }
  .btn-outline-light:hover { background: var(--accent); border-color: var(--accent); }

  /* ── FOOTER ── */
  footer {
    background: var(--ink); color: var(--paper);
    padding: 2.75rem 4rem;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 0.5px solid rgba(255,255,255,0.06);
  }
  .footer-logo { font-family: var(--serif); font-size: 1.1rem; color: var(--paper); }
  .footer-links { display: flex; gap: 2rem; list-style: none; }
  .footer-links a {
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--warm-mid); transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--paper); }
  .footer-copy { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    .article-hero, .article-body { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero-rule { padding: 0 1.5rem; }
    .framework-block, .complexity-block, .alloc-block, .cta-section { padding: 1.75rem 1.5rem; }
    .end-ctas { grid-template-columns: 1fr; }
    .compare-row { grid-template-columns: 1fr; gap: 0.5rem; }
    .more-section { padding: 2.5rem 1.5rem; flex-direction: column; align-items: flex-start; }
    footer { flex-direction: column; gap: 1.5rem; padding: 2rem 1.5rem; text-align: center; }
  }
/* ===== from article-stage-metric.html ===== */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --ink: #0d0d0d;
    --paper: #f5f2ed;
    --cream: #ede9e1;
    --warm-mid: #c8b99a;
    --accent: #b85c38;
    --accent-light: #e8d5c4;
    --text-body: #3a3530;
    --text-muted: #7a7068;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;
    --mono: 'DM Mono', monospace;
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 4rem;
    background: rgba(245,242,237,0.88);
    backdrop-filter: blur(14px);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  .nav-logo { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ink); }
  .nav-links { display: flex; gap: 2.25rem; list-style: none; }
  .nav-links a {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted); transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--paper); background: var(--ink);
    padding: 0.6rem 1.4rem; border-radius: 2px; transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--accent); }

  /* ── ARTICLE HERO ── */
  .article-hero { padding: 9rem 4rem 4rem; max-width: 820px; margin: 0 auto; }
  .article-meta {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 2rem; flex-wrap: wrap;
  }
  .meta-tag {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--accent);
    background: var(--accent-light); padding: 0.3rem 0.75rem; border-radius: 2px;
  }
  .meta-divider { width: 1px; height: 14px; background: var(--warm-mid); }
  .meta-text {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .article-title {
    font-family: var(--serif); font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    font-weight: 700; line-height: 1.1; color: var(--ink); margin-bottom: 1.5rem;
  }
  .article-title em { font-style: italic; color: var(--accent); }
  .article-hook {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.18rem); color: var(--text-body);
    line-height: 1.75; border-left: 3px solid var(--accent);
    padding-left: 1.5rem; margin-bottom: 2.5rem;
  }
  .author-row {
    display: flex; align-items: center; gap: 1rem;
    padding-top: 1.5rem; border-top: 0.5px solid var(--warm-mid);
  }
  .author-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--cream); border: 1.5px solid var(--warm-mid);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 1rem; color: var(--accent); font-weight: 700;
  }
  .author-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
  .author-role { font-size: 0.78rem; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.04em; }

  .hero-rule { max-width: 820px; margin: 0 auto 4rem; padding: 0 4rem; height: 1px; background: var(--warm-mid); }

  /* ── ARTICLE BODY ── */
  .article-body { max-width: 820px; margin: 0 auto; padding: 0 4rem 5rem; }
  .article-body p {
    font-size: 1.02rem; color: var(--text-body); line-height: 1.9; margin-bottom: 1.6rem;
  }
  .article-body h2 {
    font-family: var(--serif); font-size: 1.65rem; font-weight: 700;
    color: var(--ink); margin: 3.5rem 0 1.1rem; line-height: 1.2;
  }
  .article-body h2 em { font-style: italic; color: var(--accent); }
  .article-body h3 {
    font-family: var(--serif); font-size: 1.1rem; font-weight: 700;
    color: var(--ink); margin: 2rem 0 0.65rem;
  }
  .pull-quote {
    font-family: var(--serif); font-style: italic;
    font-size: 1.28rem; color: var(--ink);
    border-left: 3px solid var(--accent);
    padding: 0.5rem 0 0.5rem 1.75rem;
    margin: 2.5rem 0; line-height: 1.55;
  }

  /* ── STAGE CARDS ── */
  .stage-block { margin: 2.75rem 0; }
  .stage-card {
    border: 0.5px solid var(--warm-mid);
    margin-bottom: 1.5rem; overflow: hidden;
  }
  .stage-header {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 1.5rem;
    padding: 1.75rem 2.25rem;
    background: var(--ink);
  }
  .stage-badge {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink);
    background: var(--accent); padding: 0.35rem 0.85rem; border-radius: 2px;
    white-space: nowrap;
  }
  .stage-name {
    font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--paper);
  }
  .stage-name em { font-style: italic; color: var(--accent); }
  .stage-metric-pill {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--warm-mid);
    border: 1px solid rgba(200,185,154,0.3); padding: 0.35rem 0.9rem;
    border-radius: 2px; white-space: nowrap;
  }
  .stage-body { padding: 2rem 2.25rem; background: var(--paper); }
  .stage-why {
    font-size: 0.95rem; color: var(--text-body); line-height: 1.8; margin-bottom: 1.5rem;
  }
  .stage-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
  .stage-detail-box { background: var(--cream); padding: 1.25rem 1.5rem; }
  .stage-detail-label {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
  }
  .stage-detail-text { font-size: 0.88rem; color: var(--text-body); line-height: 1.65; }
  .stage-warning {
    background: var(--accent-light); border-left: 3px solid var(--accent);
    padding: 1rem 1.25rem;
    font-size: 0.88rem; color: var(--text-body); line-height: 1.65;
  }
  .stage-warning strong { color: var(--ink); }

  /* ── BRAND EXAMPLE ── */
  .brand-example {
    border: 0.5px solid var(--warm-mid); margin: 2.75rem 0; overflow: hidden;
  }
  .brand-example-header {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1.25rem 2rem; background: var(--cream);
    border-bottom: 0.5px solid var(--warm-mid);
  }
  .brand-logo-placeholder {
    width: 38px; height: 38px; background: var(--ink); border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 0.85rem; color: var(--paper); font-weight: 700;
  }
  .brand-name-wrap {}
  .brand-name { font-weight: 500; font-size: 0.95rem; color: var(--ink); }
  .brand-stage-tag {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-muted); margin-top: 0.1rem;
  }
  .brand-example-body { padding: 1.75rem 2rem; }
  .brand-example-body p { font-size: 0.92rem; color: var(--text-body); line-height: 1.8; margin-bottom: 1rem; }
  .brand-example-body p:last-child { margin-bottom: 0; }
  .brand-metric-highlight {
    display: inline-block; font-family: var(--mono); font-size: 0.78rem;
    letter-spacing: 0.06em; color: var(--accent);
    background: var(--accent-light); padding: 0.2rem 0.6rem; border-radius: 2px;
    margin: 0 0.15rem;
  }

  /* ── LEAKAGE BLOCK ── */
  .leakage-block {
    background: var(--ink); padding: 2.5rem 2.75rem; margin: 2.75rem 0;
  }
  .leakage-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--warm-mid);
    margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .leakage-label::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--warm-mid); }
  .leakage-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--paper); margin-bottom: 0.5rem; }
  .leakage-sub { font-size: 0.88rem; color: rgba(245,242,237,0.6); margin-bottom: 1.75rem; line-height: 1.6; }
  .leakage-rows { display: flex; flex-direction: column; gap: 0; }
  .leakage-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem; padding: 1.25rem 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.07);
    align-items: start;
  }
  .leakage-row:last-child { border-bottom: none; }
  .leakage-col-head {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--warm-mid); margin-bottom: 1rem; display: block;
  }
  .leakage-scenario { font-weight: 500; font-size: 0.9rem; color: var(--paper); line-height: 1.5; }
  .leakage-bad { font-size: 0.85rem; color: rgba(245,242,237,0.55); line-height: 1.6; }
  .leakage-good { font-size: 0.85rem; color: var(--warm-mid); line-height: 1.6; font-style: italic; }

  /* ── FRAMEWORK COMPARISON ── */
  .framework-block {
    background: var(--cream); border: 0.5px solid var(--warm-mid);
    padding: 2.5rem 2.75rem; margin: 2.75rem 0;
  }
  .framework-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .framework-label::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent); }
  .framework-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 1.5rem; }
  .framework-title em { font-style: italic; color: var(--accent); }
  .comparison-table { width: 100%; border-collapse: collapse; }
  .comparison-table th {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent);
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--warm-mid);
    text-align: left; background: var(--paper);
  }
  .comparison-table td {
    font-size: 0.88rem; color: var(--text-body); line-height: 1.6;
    padding: 0.9rem 1rem; border-bottom: 0.5px solid rgba(0,0,0,0.06);
    vertical-align: top;
  }
  .comparison-table tr:last-child td { border-bottom: none; }
  .comparison-table tr:hover td { background: rgba(0,0,0,0.015); }
  .td-stage { font-weight: 500; color: var(--ink); white-space: nowrap; }
  .td-metric { color: var(--accent); font-weight: 500; font-family: var(--mono); font-size: 0.82rem; }
  .td-danger { color: var(--text-muted); font-style: italic; font-size: 0.82rem; }

  /* ── INSET NOTE ── */
  .inset-note {
    background: var(--accent-light); border-left: 3px solid var(--accent);
    padding: 1.25rem 1.5rem; margin: 2rem 0;
    font-size: 0.9rem; color: var(--text-body); line-height: 1.7;
  }
  .inset-note strong { color: var(--ink); }

  /* ── RELATED ARTICLE ── */
  .related-article {
    border: 0.5px solid var(--warm-mid); padding: 1.75rem 2rem;
    margin: 3rem 0; display: grid; grid-template-columns: 1fr auto;
    gap: 2rem; align-items: center;
  }
  .related-label {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;
  }
  .related-title {
    font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--ink);
    line-height: 1.3; margin-bottom: 0.4rem;
  }
  .related-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
  .btn-ghost-sm {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink);
    border: 0.5px solid var(--warm-mid); padding: 0.65rem 1.25rem;
    border-radius: 2px; white-space: nowrap; transition: all 0.2s;
  }
  .btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }

  /* ── CTA BLOCKS ── */
  .cta-section {
    background: var(--cream); border: 0.5px solid var(--warm-mid);
    padding: 3rem 3.25rem; margin: 3.5rem 0;
  }
  .cta-section-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem;
  }
  .cta-section-label::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--accent); }
  .cta-heading { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 0.75rem; line-height: 1.25; }
  .cta-heading em { font-style: italic; color: var(--accent); }
  .cta-sub { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.75rem; }
  .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
  .btn-primary {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper); background: var(--ink);
    padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s, transform 0.15s;
    display: inline-block;
  }
  .btn-primary:hover { background: var(--accent); transform: translateY(-1px); }
  .btn-accent {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper); background: var(--accent);
    padding: 0.85rem 2rem; border-radius: 2px; transition: background 0.2s, transform 0.15s;
    display: inline-block;
  }
  .btn-accent:hover { background: var(--ink); transform: translateY(-1px); }
  .btn-ghost {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid var(--warm-mid); padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
  }
  .btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

  /* ── END CTA GRID ── */
  .end-ctas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 3.5rem 0; }
  .end-cta-card {
    border: 0.5px solid var(--warm-mid); padding: 2rem 1.75rem;
    background: var(--paper); transition: transform 0.2s, box-shadow 0.2s;
  }
  .end-cta-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
  .end-cta-card.featured { background: var(--ink); border-color: var(--ink); }
  .end-cta-icon { font-size: 1.4rem; margin-bottom: 0.85rem; display: block; }
  .end-cta-title { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; line-height: 1.3; }
  .end-cta-card.featured .end-cta-title { color: var(--paper); }
  .end-cta-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; }
  .end-cta-card.featured .end-cta-desc { color: rgba(245,242,237,0.6); }
  .end-cta-link { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent-light); padding-bottom: 1px; transition: border-color 0.2s; }
  .end-cta-link:hover { border-color: var(--accent); }
  .end-cta-card.featured .end-cta-link { color: var(--warm-mid); border-color: rgba(200,185,154,0.3); }

  /* ── TAGS ── */
  .article-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0; }
  .article-tag { font-size: 0.7rem; font-family: var(--mono); letter-spacing: 0.06em; color: var(--text-muted); background: var(--cream); border: 0.5px solid var(--warm-mid); padding: 0.25rem 0.65rem; border-radius: 2px; }

  /* ── BOTTOM NAV ── */
  .more-section {
    background: var(--ink); padding: 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  }
  .more-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-mid); margin-bottom: 0.5rem; }
  .more-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--paper); }
  .more-title em { font-style: italic; color: var(--accent); }
  .btn-outline-light { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); border: 1px solid rgba(255,255,255,0.25); padding: 0.85rem 2rem; border-radius: 2px; transition: border-color 0.2s, background 0.2s; }
  .btn-outline-light:hover { background: var(--accent); border-color: var(--accent); }

  /* ── FOOTER ── */
  footer { background: var(--ink); color: var(--paper); padding: 2.75rem 4rem; display: flex; align-items: center; justify-content: space-between; border-top: 0.5px solid rgba(255,255,255,0.06); }
  .footer-logo { font-family: var(--serif); font-size: 1.1rem; color: var(--paper); }
  .footer-links { display: flex; gap: 2rem; list-style: none; }
  .footer-links a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-mid); transition: color 0.2s; }
  .footer-links a:hover { color: var(--paper); }
  .footer-copy { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    .article-hero, .article-body { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero-rule { padding: 0 1.5rem; }
    .stage-header { grid-template-columns: 1fr; gap: 0.75rem; }
    .stage-details { grid-template-columns: 1fr; }
    .leakage-row { grid-template-columns: 1fr; gap: 0.5rem; }
    .leakage-col-head { display: none; }
    .framework-block, .leakage-block, .cta-section { padding: 1.75rem 1.5rem; }
    .end-ctas { grid-template-columns: 1fr; }
    .related-article { grid-template-columns: 1fr; gap: 1rem; }
    .more-section { padding: 2.5rem 1.5rem; flex-direction: column; align-items: flex-start; }
    footer { flex-direction: column; gap: 1.5rem; padding: 2rem 1.5rem; text-align: center; }
  }
/* ===== from articles.html ===== */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --ink: #0d0d0d;
    --paper: #f5f2ed;
    --cream: #ede9e1;
    --warm-mid: #c8b99a;
    --accent: #b85c38;
    --accent-light: #e8d5c4;
    --text-body: #3a3530;
    --text-muted: #7a7068;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;
    --mono: 'DM Mono', monospace;
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 4rem;
    background: rgba(245,242,237,0.88);
    backdrop-filter: blur(14px);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  .nav-logo { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ink); }
  .nav-links { display: flex; gap: 2.25rem; list-style: none; }
  .nav-links a {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted); transition: color 0.2s;
  }
  .nav-links a.active, .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--paper); background: var(--ink);
    padding: 0.6rem 1.4rem; border-radius: 2px; transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--accent); }

  /* ── PAGE HERO ── */
  .page-hero {
    padding: 9rem 4rem 3rem;
    max-width: 1000px; margin: 0 auto;
  }
  .page-label {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  .page-label::before { content: ''; width: 1.25rem; height: 1px; background: var(--accent); }
  .page-title {
    font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 700; line-height: 1.1; color: var(--ink); margin-bottom: 1rem;
  }
  .page-title em { font-style: italic; color: var(--accent); }
  .page-sub {
    font-size: 1.02rem; color: var(--text-muted); max-width: 620px; line-height: 1.7;
  }

  /* ── FILTER BAR ── */
  .filter-wrap {
    max-width: 1000px; margin: 0 auto;
    padding: 0 4rem 2.5rem;
    position: sticky; top: 4.3rem; z-index: 50;
    background: var(--paper);
  }
  .filter-row {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    padding-top: 1.5rem; border-top: 0.5px solid var(--warm-mid);
  }
  .filter-group-label {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted);
    width: 100%; margin-bottom: 0.6rem;
  }
  .filter-pill {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
    color: var(--text-body); background: var(--cream);
    border: 0.5px solid var(--warm-mid); border-radius: 20px;
    padding: 0.45rem 1.1rem; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 0.4rem;
  }
  .filter-pill:hover { border-color: var(--accent); color: var(--accent); }
  .filter-pill.active {
    background: var(--ink); border-color: var(--ink); color: var(--paper);
  }
  .filter-pill .count {
    font-size: 0.65rem; color: var(--text-muted); opacity: 0.8;
  }
  .filter-pill.active .count { color: var(--warm-mid); }
  .filter-divider { width: 100%; height: 0.5px; background: var(--warm-mid); margin: 1.1rem 0 0; opacity: 0.6; }

  /* ── ARTICLES GRID ── */
  .articles-wrap { max-width: 1000px; margin: 0 auto; padding: 1rem 4rem 6rem; }
  .articles-grid {
    display: flex; flex-direction: column; gap: 0;
  }
  .article-card {
    display: grid; grid-template-columns: 1fr auto;
    gap: 1.5rem; align-items: start;
    padding: 2.25rem 0; border-bottom: 0.5px solid var(--warm-mid);
    transition: opacity 0.25s;
  }
  .article-card.hidden { display: none; }

  .card-badges { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }
  .badge {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 2px;
  }
  .badge-hot { background: var(--accent); color: var(--paper); }
  .badge-new { background: var(--ink); color: var(--paper); }
  .badge-theme { background: var(--accent-light); color: var(--accent); }

  .card-title {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
    color: var(--ink); line-height: 1.25; margin-bottom: 0.6rem;
    transition: color 0.2s;
  }
  .article-card:hover .card-title { color: var(--accent); }
  .card-excerpt {
    font-size: 0.92rem; color: var(--text-muted); line-height: 1.7;
    max-width: 620px; margin-bottom: 1rem;
  }
  .card-meta {
    display: flex; align-items: center; gap: 0.9rem;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
    color: var(--text-muted); text-transform: uppercase;
  }
  .card-meta-dot { width: 3px; height: 3px; background: var(--warm-mid); border-radius: 50%; }
  .card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
  .card-tag {
    font-size: 0.68rem; font-family: var(--mono); color: var(--text-muted);
    background: var(--cream); border: 0.5px solid var(--warm-mid);
    padding: 0.2rem 0.55rem; border-radius: 2px;
  }

  .card-arrow {
    font-family: var(--serif); font-size: 1.6rem; color: var(--warm-mid);
    padding-top: 0.3rem; transition: color 0.2s, transform 0.2s;
  }
  .article-card:hover .card-arrow { color: var(--accent); transform: translateX(4px); }

  .empty-state {
    text-align: center; padding: 4rem 1rem; color: var(--text-muted);
    font-family: var(--serif); font-style: italic; font-size: 1.1rem;
    display: none;
  }
  .empty-state.show { display: block; }

  /* ── NEWSLETTER STRIP ── */
  .subscribe-strip {
    background: var(--ink); padding: 3.5rem 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    flex-wrap: wrap;
  }
  .subscribe-text .sub-label {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--warm-mid); margin-bottom: 0.5rem;
  }
  .subscribe-text .sub-title {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--paper);
  }
  .subscribe-text .sub-title em { font-style: italic; color: var(--accent); }
  .btn-outline-light {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--paper);
    border: 1px solid rgba(255,255,255,0.25); padding: 0.85rem 2rem;
    border-radius: 2px; transition: border-color 0.2s, background 0.2s;
    white-space: nowrap;
  }
  .btn-outline-light:hover { background: var(--accent); border-color: var(--accent); }

  /* ── FOOTER ── */
  footer {
    background: var(--ink); color: var(--paper);
    padding: 2.75rem 4rem;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 0.5px solid rgba(255,255,255,0.06);
  }
  .footer-logo { font-family: var(--serif); font-size: 1.1rem; color: var(--paper); }
  .footer-links { display: flex; gap: 2rem; list-style: none; }
  .footer-links a {
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--warm-mid); transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--paper); }
  .footer-copy { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    .page-hero, .filter-wrap, .articles-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
    .filter-wrap { position: static; }
    .article-card { grid-template-columns: 1fr; }
    .card-arrow { display: none; }
    .subscribe-strip, footer { padding: 2.5rem 1.5rem; flex-direction: column; align-items: flex-start; text-align: left; gap: 1.5rem; }
    footer { text-align: center; align-items: center; }
  }