/* Blog-specific styles. Reuses the design tokens + .prose / .shell / header /
   footer from styles.css; this file only adds blog-list, article-header,
   post-meta, and the stat-callout. CSP-clean: external stylesheet, no inline. */

.blog-head {
  padding: clamp(2rem, 6vw, 3.6rem) 0 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.8rem;
}
.blog-head .eyebrow { margin-bottom: 0.6rem; }
.blog-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.1;
  color: var(--forest-deep);
  margin: 0;
}
.blog-head p.lede { margin-top: 0.8rem; }

/* Post list (index) */
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.post-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.post-card:hover { border-color: var(--moss); transform: translateY(-1px); }
.post-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.post-card h2 a { color: var(--forest-deep); text-decoration: none; }
.post-card h2 a:hover { color: var(--ember-deep); }
.post-card p { margin: 0.3rem 0 0; color: var(--ink); line-height: 1.6; }

.post-meta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--sage);
  text-transform: uppercase;
}

/* Article body */
.article { padding-bottom: 3rem; max-width: 44rem; }
.article .post-meta { display: block; margin-bottom: 0.6rem; }
.article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.12;
  color: var(--forest-deep);
  margin: 0 0 0.8rem;
}
.article .lede {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--sage);
  margin: 0 0 1.6rem;
}
.article .prose h2 { margin-top: 2rem; }

/* Stat callout */
.stat-callout {
  background: var(--paper-card);
  border-left: 3px solid var(--ember);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem;
  margin: 1.6rem 0;
}
.stat-callout .big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--forest-deep);
  display: block;
  line-height: 1.15;
}
.stat-callout .cap {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--sage);
  margin-top: 0.3rem;
  display: block;
}

/* End-of-post CTA */
.post-cta {
  margin-top: 2.4rem;
  padding: 1.5rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.post-cta p { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.cta-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  background: var(--ember);
  color: var(--paper-card);
  text-decoration: none;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  transition: background 0.15s var(--ease);
}
.cta-btn:hover { background: var(--ember-deep); }

.back-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--forest);
  text-decoration: none;
}
.back-link:hover { color: var(--ember-deep); }

.endnote { margin-top: 1.4rem; }

/* ============================================================================
   Data viz for the warm blog — real-number day bars + hour heat-strip.
   Added after the persona panel: the data is shown at the resolution it can
   honestly support (1-D, large-n), with real numbers, demoted below the
   plain-English takeaway. CSP-clean: width via utility classes, no inline.
   ========================================================================== */
:root { --blog-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; }

/* compact headline ledger row */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 1.4rem 0; background: var(--paper-card);
}
.stat-row div { padding: 0.85rem 1rem; border-right: 1px solid var(--line); }
.stat-row div:last-child { border-right: 0; }
.stat-row .n { font-family: var(--blog-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 1.45rem; color: var(--forest-deep); line-height: 1; }
.stat-row .l { font-size: 0.75rem; color: var(--sage); text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 0.35rem; }

.viz { margin: 1.6rem 0; animation: viz-in 0.6s var(--ease) both; }
.viz-cap { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sage); margin: 0 0 0.7rem; font-family: var(--font-sans); }

/* horizontal day-of-week bars */
.daybars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.daybars li { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 0.6rem; }
.daybars .d { font-size: 0.82rem; color: var(--ink); font-weight: 600; }
.daybars .track { background: var(--paper-soft); border-radius: 5px; height: 16px; overflow: hidden; }
.daybars .fill { display: block; height: 100%; background: var(--moss); border-radius: 5px; }
.daybars .fill.hot { background: var(--ember); }
.daybars .v { font-family: var(--blog-mono); font-variant-numeric: tabular-nums;
  font-size: 0.8rem; color: var(--sage); min-width: 4.4rem; text-align: right; }
.w-100 { width: 100%; } .w-68 { width: 68%; } .w-66 { width: 66%; }
.w-57 { width: 57%; } .w-55 { width: 55%; } .w-53 { width: 53%; } .w-43 { width: 43%; }

/* hour-of-day heat-strip */
.heatstrip { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.hs-col { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.hs-bar { width: 100%; height: 30px; border-radius: 4px; }
.hs-lab { font-size: 0.62rem; color: var(--sage); font-family: var(--font-sans); white-space: nowrap; }
.hs-pct { font-family: var(--blog-mono); font-size: 0.66rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.hs-bar.l1 { background: #ece1c8; }
.hs-bar.l2 { background: #e3bd8a; }
.hs-bar.l3 { background: #db8d49; }
.hs-bar.l4 { background: var(--ember); }

@keyframes viz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .viz { animation: none; } }