/* Editorial explainer page — builds on styles.css tokens, nav, footer, buttons. */

.article-hero{
  position:relative;isolation:isolate;color:var(--cream);
  padding:96px 0 64px;overflow:hidden;background:var(--green-ink);
}
.article-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 80% -10%, rgba(110,157,82,.55), transparent 60%),
             linear-gradient(180deg, #2F3D24 0%, #38492A 100%);
}
.article-hero .wrap{max-width:820px}
.kicker{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#CFE0BC;margin-bottom:18px}
.article-hero h1{font-size:clamp(2.1rem,5vw,3.2rem);color:#FCFBF4;max-width:16ch;text-wrap:balance;line-height:1.1}
.article-hero .lede{font-size:clamp(1.08rem,1.7vw,1.28rem);color:#E8EFDD;max-width:600px;margin:20px 0 0}
.source-line{margin-top:26px;font-size:.82rem;color:#A9C291;display:flex;align-items:center;gap:8px}
.source-line svg{width:15px;height:15px;flex:0 0 auto}

/* key-stat strip under the hero */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat-strip .cell{background:#fff;padding:28px 20px;text-align:center}
.stat-strip .big{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(2.1rem,4.4vw,2.9rem);color:var(--green-dark);line-height:1;letter-spacing:-.01em}
.stat-strip .lbl{display:block;font-size:.86rem;color:var(--muted);margin-top:8px;line-height:1.4}

/* article body */
.article{padding:clamp(48px,7vw,76px) 0}
.prose{max-width:680px;margin:0 auto}
.prose + .prose{margin-top:8px}
.prose h2{font-size:clamp(1.5rem,2.8vw,1.95rem);color:var(--green-ink);margin:48px 0 14px;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose p{color:#43463D;font-size:1.075rem;line-height:1.8;margin:0 0 18px}
.prose strong{color:var(--ink);font-weight:600}
.prose .lead-p{font-size:1.18rem;color:var(--ink)}

/* full-bleed data callout between prose blocks */
.callout{margin:40px auto;max-width:820px;background:var(--tint);border:1px solid var(--tint-border);border-radius:var(--radius);padding:34px 32px}
.callout-figure{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.callout-figure .num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(2.6rem,6vw,3.6rem);color:var(--green-dark);line-height:1}
.callout-figure .num-sub{font-size:1.05rem;color:var(--green-ink);font-weight:500;max-width:34ch}
.callout-note{margin-top:12px;font-size:.92rem;color:#5C6051}
.cite{font-size:.78rem;color:#8A8F7E;margin-top:14px}

/* inline pull-stats row */
.pull-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:820px;margin:38px auto}
.pull{padding:22px 4px;border-top:2px solid var(--green-mid)}
.pull .num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(1.9rem,4vw,2.5rem);color:var(--green-dark);line-height:1}
.pull .lbl{display:block;font-size:.9rem;color:var(--muted);margin-top:8px;line-height:1.45}

/* compare: leaky model vs Ecuagarden model */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;margin:36px auto}
.compare .col{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:#fff}
.compare .col.good{background:var(--green);color:var(--cream);border-color:var(--green)}
.compare .col h3{font-size:1.05rem;margin-bottom:14px;color:var(--green-ink)}
.compare .col.good h3{color:#fff}
.compare ul{list-style:none}
.compare li{padding:8px 0 8px 24px;position:relative;font-size:.96rem;color:var(--muted);line-height:1.5}
.compare .col.good li{color:#EAF2DD}
.compare li::before{position:absolute;left:0;top:8px;font-size:.95rem}
.compare .col.bad li::before{content:"\2715";color:#C26B5A}
.compare .col.good li::before{content:"\2713";color:#CFE6B6}

/* mini bar chart (growth) */
.chart{max-width:680px;margin:34px auto}
.chart-row{display:flex;align-items:center;gap:14px;margin:10px 0}
.chart-yr{width:48px;font-size:.86rem;color:var(--muted);flex:0 0 auto;text-align:right}
.chart-track{flex:1;background:var(--tint);border-radius:6px;overflow:hidden;height:30px}
.chart-fill{height:100%;background:linear-gradient(90deg,var(--green-mid),var(--green));border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;color:#fff;font-size:.82rem;font-weight:500;white-space:nowrap;transform-origin:left}
.js .reveal .chart-fill{transform:scaleX(0)}
.js .reveal.is-in .chart-fill{transform:scaleX(1);transition:transform .9s var(--ease)}

/* closing CTA band */
.cta-band{background:var(--green-ink);color:var(--cream);text-align:center;padding:clamp(54px,8vw,82px) 0}
.cta-band h2{color:#FCFBF4;font-size:clamp(1.7rem,3.4vw,2.3rem);max-width:20ch;margin:0 auto 14px;text-wrap:balance}
.cta-band p{color:#C8D7B6;max-width:48ch;margin:0 auto 28px;font-size:1.05rem}

@media (prefers-reduced-motion:reduce){
  .js .reveal .chart-fill{transform:none}
  .js .reveal.is-in .chart-fill{transition:none}
}
@media(max-width:760px){
  .stat-strip{grid-template-columns:1fr;}
  .stat-strip .cell{border-bottom:1px solid var(--line)}
  .pull-row{grid-template-columns:1fr;gap:0}
  .pull{border-top:none;border-bottom:1px solid var(--line);padding:18px 0}
  .compare{grid-template-columns:1fr}
}