/* ============================================================
   LOOP FARMSTEAD — ARTICLES
   A merged design: the Loop Farmstead earth/solarpunk visual
   language meets the editorial long-form identity of projects
   like The Wealth Tax (Fraunces display, data cards, tables).

   Shared by the /articles/ hub and every article page so the
   whole section stays visually consistent. One stylesheet = no drift.
   ============================================================ */
:root {
  /* Loop Farmstead earth palette */
  --soil:      #3B2F1E;
  --terra:     #B85C38;
  --olive:     #6B7F3B;
  --wheat:     #D4A843;
  --amber:     #E8A849;
  --sea:       #4A6B8A;
  --indigo:    #1A1A2E;
  --red:       #c0392b;
  --bg:        #F4EFE6;
  --bg-deep:   #EAE2D2;
  --card:      #FBF7EF;
  --ink:       #2B2418;
  --ink-soft:  #5A4E3A;
  --line:      #C9BCA3;

  /* Editorial accent from long-form articles (crimson) */
  --article-accent: #B3261E;
  --article-green:  #1E6B4F;
  --muted:          #6b6457;

  /* Type: merged — Fraunces for display, EB Garamond for body, mono for labels */
  --display: 'Fraunces', Georgia, serif;
  --serif: 'EB Garamond', Garamond, Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(59,47,30,.06), 0 8px 24px rgba(59,47,30,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1.7;font-size:18px;-webkit-font-smoothing:antialiased;padding-bottom:80px}

/* ============================================================
   SITE NAV (canonical, same as everywhere)
   ============================================================ */
.site-nav{background:var(--indigo);color:var(--wheat);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(26,26,46,0.25)}
.site-nav .nav-container{max-width:1100px;margin:0 auto;padding:0.8rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:nowrap}
.site-nav .nav-brand{font-weight:600;font-size:1.25rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--wheat);font-family:var(--serif)}
.site-nav .nav-links{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0;flex-wrap:wrap}
.site-nav .nav-links a{color:var(--wheat);font-size:1rem;letter-spacing:0.04em;text-transform:uppercase;border-bottom:1px solid transparent;text-decoration:none}
.site-nav .nav-links a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.site-nav .nav-links a.btn-donate{background:var(--terra);color:#fff;padding:0.4rem 0.9rem;border-radius:var(--radius);font-weight:600;border-bottom:none}
.site-nav .nav-links a.btn-donate:hover{background:var(--soil);color:#fff}
.site-nav .nav-toggle{display:none;cursor:pointer}
.site-nav .nav-toggle span{display:block;width:24px;height:2px;background:var(--wheat);margin:5px 0}
@media(max-width:760px){
  .site-nav .nav-links{display:none;flex-direction:column;width:100%;gap:0.8rem;padding:0.5rem 0 1rem}
  .site-nav .nav-links.active{display:flex}
  .site-nav .nav-toggle{display:block}
}

/* ============================================================
   SHARED LAYOUT
   ============================================================ */
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 28px}

/* ============================================================
   HUB PAGE (the articles index)
   ============================================================ */
.art-topbar{background:var(--indigo);color:var(--wheat);padding:12px 0;font-family:var(--mono);font-size:12px;letter-spacing:2px}
.art-topbar .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.art-topbar .node{color:var(--wheat)}
.art-topbar .status span{color:var(--amber)}
.art-hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
.art-hero .kicker{font-family:var(--mono);color:var(--article-accent);font-size:12px;letter-spacing:3px;margin-bottom:18px;text-transform:uppercase}
.art-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(40px,6vw,64px);line-height:1.02;letter-spacing:-.02em;color:var(--soil);margin-bottom:22px}
.art-hero h1 .hl{color:var(--article-accent)}
.art-hero .dek{font-size:clamp(18px,2.3vw,22px);line-height:1.5;color:var(--ink-soft);max-width:46em}

/* Article cards grid */
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;padding:56px 0 40px}

/* ===== Search + tag controls ===== */
.art-controls{margin-top:44px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.art-search input{width:100%;padding:14px 18px;font-family:var(--mono);font-size:15px;color:var(--soil);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.art-search input:focus{outline:none;border-color:var(--article-accent)}
.art-search input::placeholder{color:var(--ink-soft)}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.art-tags .chip{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:999px;cursor:pointer;transition:all .15s}
.art-tags .chip:hover{border-color:var(--olive);color:var(--soil)}
.art-tags .chip.active{background:var(--article-accent);border-color:var(--article-accent);color:#fff}
.art-tags .chip .cn{opacity:.65;font-size:10px}
.art-count{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--ink-soft);margin-top:14px;text-transform:uppercase}
.art-empty{padding:60px 20px;text-align:center;font-family:var(--serif);font-size:18px;color:var(--ink-soft)}
.art-empty p{margin:0}

/* Card tags */
.art-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.art-card .card-tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--olive);border:1px solid var(--line);padding:3px 8px;border-radius:999px;background:var(--bg)}

.art-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-top:5px solid var(--article-accent);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.art-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(59,47,30,.14);border-top-color:var(--terra)}
.art-card .cta-thumb{height:120px;padding:22px 26px;display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--indigo),#2b2b4a);color:var(--wheat);font-family:var(--display);font-weight:900;font-size:30px;line-height:1;letter-spacing:-.02em}
.art-card .cta-thumb .tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--amber);background:rgba(255,255,255,.08);padding:3px 8px;margin-left:auto;align-self:flex-start}
.art-card .body{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.art-card .body h3{font-family:var(--display);font-weight:700;font-size:22px;color:var(--soil);margin-bottom:8px;line-height:1.2}
.art-card .body p{font-size:15.5px;color:var(--ink-soft);margin-bottom:16px;flex:1}
.art-card .meta{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--olive);text-transform:uppercase;border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.art-card .meta .read{color:var(--terra);font-weight:700}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
/* Hero */
.art-topbar{background:var(--indigo);color:var(--wheat);padding:12px 0;font-family:var(--mono);font-size:12px;letter-spacing:2px}
.art-topbar .node{color:var(--wheat)}
.art-topbar .status span{color:var(--amber)}
article header.hero{padding:72px 0 40px;border-bottom:1px solid var(--line)}
.hero .kicker{display:inline-block;font-family:var(--mono);color:var(--article-accent);font-size:12px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(38px,5.6vw,60px);line-height:1.03;letter-spacing:-.02em;color:var(--soil);margin-bottom:24px}
.hero h1 .hl{color:var(--article-accent)}
.hero .dek{font-size:clamp(19px,2.3vw,23px);line-height:1.45;color:var(--ink-soft);max-width:46em;font-family:var(--serif)}
.hero .meta{font-family:var(--mono);font-size:11px;color:var(--olive);letter-spacing:1px;margin-top:28px;border-top:1px solid var(--line);padding-top:14px}

/* Stat strip */
.stat-strip{border-bottom:1px solid var(--line);background:var(--bg-deep)}
.stat-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat-strip .cell{background:var(--bg-deep);padding:26px 20px}
.stat-strip .num{font-family:var(--display);font-weight:900;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1;color:var(--article-accent)}
.stat-strip .num.green{color:var(--article-green)}
.stat-strip .lbl{font-family:var(--serif);font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.35}
@media(max-width:760px){.stat-strip .wrap{grid-template-columns:repeat(2,1fr)}}

/* Sections */
section{padding:64px 0;border-bottom:1px solid var(--line)}
.sec-label{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--olive);margin-bottom:16px}
h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.8vw,42px);line-height:1.1;letter-spacing:-.015em;color:var(--soil);margin-bottom:20px}
h2 .hl{color:var(--article-accent)}
h3{font-family:var(--display);font-weight:700;font-size:23px;margin:32px 0 12px;color:var(--soil);letter-spacing:-.01em}
p.lead{font-size:19px;color:var(--ink-soft);max-width:44em}
p{margin-bottom:16px;color:var(--ink-soft)}
p b,li b{color:var(--ink)}
ul,ol{margin:0 0 16px 22px;color:var(--ink-soft)}

/* Callouts */
.callout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--article-accent);padding:22px 24px;border-radius:var(--radius);margin:26px 0;box-shadow:var(--shadow)}
.callout.green{border-left-color:var(--article-green)}
.callout p:last-child{margin-bottom:0}
.callout .big{font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);line-height:1.3}
.callout .footnote{font-size:14px;color:var(--muted);margin-top:8px}

/* Charts / data */
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);margin:28px 0}
.chart-card h4{font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:4px;color:var(--soil)}
.chart-card .sub{font-family:var(--serif);font-size:14px;color:var(--ink-soft);margin-bottom:20px}
.bar-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.bar-row .bar-label{width:150px;font-size:14px;font-weight:600;color:var(--ink-soft);text-align:right;flex-shrink:0}
.bar-row .bar-track{flex:1;background:var(--bg);border-radius:6px;height:34px;overflow:hidden}
.bar-row .bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-weight:700;font-size:14px;min-width:0}
.bar-fill.red{background:var(--article-accent)}
.bar-fill.green{background:var(--article-green)}
.bar-fill.gold{background:var(--wheat)}
.bar-fill.ink{background:var(--soil)}
.legend{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:6px}
.legend span{display:flex;align-items:center;gap:7px}
.legend .dot{width:12px;height:12px;border-radius:3px;display:inline-block}

/* Tables */
table.model{width:100%;border-collapse:collapse;margin:24px 0;font-size:15.5px}
table.model th,table.model td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.model thead th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
table.model td.num,table.model th.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
table.model tr.total td{border-top:2px solid var(--soil);font-weight:700;background:var(--bg-deep)}
table.model td.good{color:var(--article-green);font-weight:700}
table.model td.warn{color:var(--article-accent);font-weight:700}
@media(max-width:760px){.bar-row .bar-label{width:92px;font-size:12px}}

/* Rebuttal cards (the "lies") */
.lie{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin:20px 0;box-shadow:var(--shadow)}
.lie .q{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.3;color:var(--soil);margin-bottom:6px}
.lie .q::before{content:"“";color:var(--article-accent)}
.lie .q::after{content:"”";color:var(--article-accent)}
.lie .who{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-bottom:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.lie .truth{font-size:16.5px;color:var(--ink-soft)}
.lie .truth b{color:var(--article-green)}

/* CTA */
.cta{background:var(--indigo);color:var(--wheat);border-bottom:none}
.cta h2{color:var(--wheat)}
.cta p{color:#cfc8ba}
.cta .sec-label{color:#9a9284}
.cta .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0}
.cta .step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:22px}
.cta .step .n{font-family:var(--display);font-weight:900;font-size:30px;color:var(--amber)}
.cta .step h4{font-family:var(--display);font-size:19px;margin:8px 0 6px;color:var(--wheat)}
.cta .step p{font-family:var(--serif);font-size:14.5px;color:#b8b0a2;margin:0}
@media(max-width:760px){.cta .steps{grid-template-columns:1fr}}

/* Sources */
.sources{background:var(--bg-deep)}
.sources ol{list-style:none;counter-reset:src;font-family:var(--serif);font-size:14.5px;color:var(--ink-soft)}
.sources li{counter-increment:src;padding:8px 0;border-bottom:1px solid var(--line);line-height:1.5}
.sources li:last-child{border-bottom:none}
.sources li::before{content:counter(src) ".";font-weight:700;color:var(--article-accent);margin-right:8px}
.sources a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--line)}
.sources a:hover{color:var(--article-accent);border-bottom-color:var(--article-accent)}
.footnote{font-size:13.5px;color:var(--ink-soft)}
.disclaimer{font-size:13px;color:var(--ink-soft);font-style:italic;margin-top:20px}

/* Site footer (rich form, matches signals/ledger) */
.site-footer{margin-top:64px;background:var(--indigo);color:var(--wheat);padding:44px 0}
.site-footer .wrap{max-width:1100px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media(max-width:620px){.site-footer .wrap{grid-template-columns:1fr}}
.fblock h4{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--amber);margin-bottom:14px;text-transform:uppercase}
.fblock a{display:block;color:#d8c9a3;text-decoration:none;font-size:16px;margin-bottom:8px}
.fblock a:hover{color:var(--wheat)}
.site-footer .tagline{margin-top:32px;text-align:center;font-family:var(--mono);color:var(--olive);font-size:11px;letter-spacing:3px;text-transform:uppercase}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}