/* ============================================================
   ARTICLE PAGES — loaded after style.css. The home page loads it
   too, for the reader card that opens essays in place.
   One reading column, a book's rhythm. Every component the
   posts use lives here, so a new post needs no <style> block.
   ============================================================ */

:root{ --muted: var(--mute); }  /* older posts reference --muted inline */

body:not(.home) nav{ background: rgba(245,240,232,.94); border-bottom-color: var(--line); height: 58px; }

/* ── header ───────────────────────────────────────────── */
.post-hero{ padding: 128px 0 48px; border-bottom: 1px solid var(--line); }
.post-hero-inner{ max-width: var(--read); margin: 0 auto; padding: 0 var(--gut); }
.post-nav-back{
  display: inline-block;
  font-family: var(--sans); font-size: 14px;
  color: var(--mute); text-decoration: none;
  margin-bottom: 40px;
  transition: color .2s;
}
.post-nav-back:hover{ color: var(--ink); }
.post-type-badge{
  font-family: var(--serif); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-deep);
  margin-bottom: 18px;
}
.post-title{
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.3rem, 5.6vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.024em;
  text-wrap: balance;
}
.post-subtitle{
  margin-top: 22px;
  font-size: 20px; line-height: 1.55;
  color: var(--ink-2);
}
.post-meta{
  margin-top: 26px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute);
}

/* ── body ─────────────────────────────────────────────── */
.post-body{
  max-width: var(--read);
  margin: 0 auto;
  padding: 56px var(--gut) 72px;
  font-size: 18px; line-height: 1.75;
}
.post-body > * + *{ margin-top: 0; }
.post-body p{ margin-bottom: 24px; color: var(--ink); }
.post-body h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  line-height: 1.15; letter-spacing: -.015em;
  margin: 64px 0 20px;
}
.post-body h3{
  font-family: var(--sans); font-weight: 500;
  font-size: 17px; letter-spacing: 0;
  margin: 36px 0 10px;
}
.post-body ul, .post-body ol{ margin: 0 0 24px; padding-left: 0; list-style: none; }
.post-body li{ position: relative; padding-left: 26px; margin-bottom: 12px; }
.post-body li::before{
  content: ''; position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--copper);
}
.post-body strong{ font-weight: 500; }
.post-body a{ color: var(--ink); text-decoration-color: var(--copper); text-underline-offset: 3px; }
.post-body a:hover{ color: var(--copper-deep); }
.post-body hr{ border: 0; border-top: 1px solid var(--line); margin: 56px 0; }

.post-body blockquote{
  margin: 40px 0;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--copper);
}
.post-body blockquote p{ font-size: 22px; line-height: 1.5; font-weight: 400; margin: 0; }

.pull-quote{
  margin: 48px 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.pull-quote::before{
  content: ''; display: block; width: 40px; height: 1px; background: var(--copper); margin-bottom: 20px;
}

/* ── shared component frame ───────────────────────────── */
.framework-box, .metric-card, .stat-chip, .role-card, .churn-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.framework-box{ padding: 24px 26px; margin: 32px 0; font-size: 17px; }
.fb-label, .metric-name, .churn-label, .capability-title, .sc-label{
  display: block;
  font-family: var(--serif); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-deep);
}
.fb-label{ margin-bottom: 10px; }
.fb-title{ font-family: var(--sans); font-weight: 500; font-size: 17px; margin-bottom: 14px !important; }
.framework-box ul{ margin-bottom: 0; }
.framework-box li{ font-size: 17px; margin-bottom: 8px; }

.metrics-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0; }
.metric-card{ padding: 20px 22px; }
.metric-name{ margin-bottom: 8px; }
.metric-desc{ font-size: 17px; line-height: 1.5; margin: 0 !important; }

.stat-row{ display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0; }
.stat-chip{ flex: 1; min-width: 140px; padding: 20px 22px; }
.sc-num{ display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--copper); }
.sc-label{ margin-top: 10px; color: var(--mute); }

.role-cards{ display: flex; flex-direction: column; gap: 10px; margin: 32px 0; }
.role-card{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: baseline; padding: 18px 22px; }
.role-old{ font-family: var(--sans); font-size: 15px; color: var(--mute); text-decoration: line-through; text-decoration-color: var(--copper); }
.role-arrow{ color: var(--copper); }
.role-new{ font-family: var(--sans); font-size: 15px; font-weight: 500; }
.role-desc{ grid-column: 1 / -1; margin: 6px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: 17px; color: var(--ink-2) !important; }

.capability-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.capability-card{ background: var(--night); color: var(--on-night); border-radius: 3px; padding: 20px; }
.capability-icon{ display: block; font-size: 20px; margin-bottom: 10px; }
.capability-title{ color: var(--copper-light); margin-bottom: 8px; }
.capability-text{ font-size: 15px; line-height: 1.55; color: var(--on-night-2) !important; margin: 0 !important; }

.churn-cards{ display: flex; flex-direction: column; gap: 10px; margin: 32px 0; }
.churn-card{ display: flex; gap: 18px; align-items: baseline; padding: 18px 22px; }
.churn-label{ flex-shrink: 0; white-space: nowrap; }
.churn-text{ font-size: 17px; line-height: 1.55; margin: 0 !important; }

.compare-table{ width: 100%; border-collapse: collapse; margin: 36px 0; font-size: 17px; }
.compare-table th{
  text-align: left; padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute);
}
.compare-table th:last-child{ color: var(--copper-deep); }
.compare-table td{ padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); }
.compare-table td:first-child{ color: var(--mute); text-decoration: line-through; text-decoration-color: var(--copper); }

/* ── bottom ───────────────────────────────────────────── */
.post-footer-nav{
  max-width: var(--read);
  margin: 0 auto;
  padding: 28px var(--gut) 88px;
  border-top: 1px solid var(--line);
}
.post-footer-nav .post-nav-back{ margin: 0; }

@media (max-width: 640px){
  .post-body{ font-size: 18px; }
  .metrics-grid, .capability-grid{ grid-template-columns: 1fr; }
  .role-card{ grid-template-columns: 1fr; }
  .role-arrow{ display: none; }
  .churn-card{ flex-direction: column; gap: 8px; }
}