/**
 * blog.css — the blog, Category Map and sitewide footer surfaces.
 *
 * The sitewide FOOTER lives in yieldpage.css, not here: it renders on every
 * page and only the new routes load this file.
 *
 * Loaded after yieldpage.css and uses ITS tokens (--blue, --slate-*, --sans,
 * --mono). The design mockup carried its own hex values and Manrope/JetBrains
 * Mono as stand-ins; those are deliberately not reproduced here.
 *
 * Measures, per the spec:
 *   container   1180   .doc-wrap
 *   prose        780   .doc-col
 *   headings /
 *   data blocks 1100   .doc-head, .doc-wide, .doc-col--wide
 *
 * Headings set on ONE LINE and step down rather than wrap: white-space: nowrap
 * with type sizes reduced at 1140 and 980, releasing to normal wrapping below
 * 860 where wrapping is the correct behaviour on a phone.
 */

/* ─── Layout ───────────────────────────────────────────────────────────── */

.doc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.doc-col { max-width: 780px; }
.doc-col--wide,
.doc-head,
.doc-wide { max-width: 1100px; }

.doc-sec { padding: 80px 0; }
.doc-sec--tight { padding: 56px 0; }
/* Full-bleed sections alternate white and the lavender wash. */
.doc-sec--wash { background: linear-gradient(160deg, #f1f3fc 0%, var(--paper) 45%, var(--white) 100%); }

body.yp-doc { background: var(--white); color: var(--slate-900); font-family: var(--sans); }

/* ─── Mono labels ──────────────────────────────────────────────────────────
 * Blue for structural captions, grey for data annotations. */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.mono--blue { color: var(--blue); }
.mono b { color: var(--slate-900); font-weight: 600; }

/* ─── Nav ──────────────────────────────────────────────────────────────── */

.doc-nav {
  max-width: 1180px; margin: 0 auto; padding: 26px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* The real wordmark, at 40px to match the footer. Taller than the 32px the
   static pages' header.site uses, because these routes carry no page furniture
   above the nav for the mark to sit against. */
.doc-nav__brand { display: block; line-height: 0; text-decoration: none; }
.doc-nav__brand img { height: 40px; width: auto; display: block; }
.doc-nav__links { display: flex; align-items: center; gap: 26px; }
.doc-nav__links a { color: var(--slate-500); text-decoration: none; font-size: 15px; font-weight: 500; }
.doc-nav__links a:hover { color: var(--blue); }

/* ─── Headings: step down, never wrap, until the phone ─────────────────── */

.doc-eyebrow { margin-bottom: 24px; }

.doc-h1 {
  font-size: 52px; line-height: 1.08; letter-spacing: -.035em;
  margin: 0 0 26px; font-weight: 800; white-space: nowrap;
}
.doc-h2 {
  font-size: 40px; line-height: 1.12; letter-spacing: -.03em;
  margin: 0 0 26px; font-weight: 800; white-space: nowrap;
}
/* Two-tone: dark statement, muted second line, as on the homepage. */
.doc-h1 .muted,
.doc-h2 .muted { color: var(--slate-400); display: block; }

.doc-dek {
  font-size: 21px; line-height: 1.5; color: var(--slate-700);
  margin: 0 0 34px; max-width: 58ch;
}
/* The collapsed single date: quiet, no rule, no label. */
.doc-date {
  font-size: 13.5px; color: var(--slate-400); margin: 0 0 34px;
}
.doc-byline {
  display: flex; gap: 26px; flex-wrap: wrap; padding: 18px 0;
  border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200);
  color: var(--slate-500); max-width: 780px;
}

/* ─── Prose ────────────────────────────────────────────────────────────── */

.doc-prose > :first-child { margin-top: 0; }
.doc-prose p { font-size: 19px; line-height: 1.62; color: var(--slate-700); margin: 0 0 22px; }
.doc-prose strong, .doc-prose p b { color: var(--slate-900); font-weight: 700; }
.doc-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.doc-prose h2 {
  font-size: 34px; line-height: 1.15; letter-spacing: -.03em; font-weight: 800;
  color: var(--slate-900); margin: 52px 0 20px; scroll-margin-top: 24px;
}
.doc-prose h3 {
  font-size: 22px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700;
  color: var(--slate-900); margin: 36px 0 14px; scroll-margin-top: 24px;
}
.doc-prose ul, .doc-prose ol { margin: 0 0 22px; padding-left: 22px; }
.doc-prose li { font-size: 19px; line-height: 1.62; color: var(--slate-700); margin: 0 0 10px; }

.doc-prose blockquote {
  margin: 40px 0; padding: 26px 30px;
  border: 1px solid var(--slate-200); border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0; background: var(--white);
}
.doc-prose blockquote p {
  margin: 0; font-size: 23px; line-height: 1.4; color: var(--slate-900);
  letter-spacing: -.015em; font-weight: 600;
}

.doc-prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--slate-100); padding: 2px 6px; border-radius: 5px; color: var(--slate-800);
}
.doc-prose pre {
  background: var(--slate-100); padding: 20px 22px; border-radius: var(--radius-lg);
  overflow-x: auto; margin: 0 0 22px;
}
.doc-prose pre code { background: none; padding: 0; }
.doc-prose hr { border: 0; border-top: 1px solid var(--slate-200); margin: 44px 0; }

/* ─── Tables ───────────────────────────────────────────────────────────────
 * The wrapper is the ONLY horizontally scrolling box. A 24-row, 12-column table
 * scrolls inside itself; the page never scrolls sideways. */
.tablewrap {
  margin: 0 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--slate-200); border-radius: var(--radius-lg); background: var(--white);
}
.doc-prose table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.doc-prose thead th {
  text-align: left; padding: 13px 18px; color: var(--slate-500); font-weight: 600;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--slate-200); white-space: nowrap;
}
.doc-prose tbody td {
  padding: 12px 18px; border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700); white-space: nowrap;
}
.doc-prose tbody tr:last-child td { border-bottom: 0; }
.doc-prose tbody td:first-child { color: var(--slate-900); font-weight: 600; }
.doc-prose th.r, .doc-prose td.r { text-align: right; font-family: var(--mono); font-size: 13px; }
.doc-prose thead th.r { font-family: var(--sans); }

/* ─── Table of contents ────────────────────────────────────────────────── */

.doc-toc {
  max-width: 920px; border: 1px solid var(--slate-200); border-radius: var(--radius-xl);
  padding: 26px 30px; background: var(--white); margin: 0 0 44px;
}
.doc-toc__cap { margin-bottom: 14px; }
.doc-toc a {
  display: block; padding: 9px 0; color: var(--slate-700); text-decoration: none;
  font-size: 16.5px; border-bottom: 1px solid var(--slate-100);
}
.doc-toc a:last-child { border-bottom: 0; }
.doc-toc a:hover { color: var(--blue); }

/* ─── Post index ───────────────────────────────────────────────────────── */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list__item { border-top: 1px solid var(--slate-200); }
.post-list__item:last-child { border-bottom: 1px solid var(--slate-200); }
/* Two columns: the figure hangs at a fixed 112px so every title lands on one
   left edge, whether or not its row carries a figure. */
.post-list__link {
  display: grid; grid-template-columns: 112px 1fr; gap: 28px;
  align-items: start; padding: 30px 0; text-decoration: none;
}
.post-list__figure { min-width: 0; }
.post-list__fig {
  display: block; font-family: var(--mono); font-size: 30px; font-weight: 500;
  color: var(--blue); font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -.02em;
}
.post-list__fig-label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate-400); line-height: 1.4; margin-top: 7px;
}
.post-list__link:hover .post-list__title { color: var(--blue); }
.post-list__date { display: block; margin-bottom: 12px; }
.post-list__title {
  font-size: 27px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700;
  color: var(--slate-900); margin: 0 0 10px;
}
.post-list__desc { font-size: 17.5px; line-height: 1.55; color: var(--slate-500); margin: 0; max-width: 70ch; }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */

.doc-faq__item { border-bottom: 1px solid var(--slate-200); }
.doc-faq__item summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-size: 18px; font-weight: 600; color: var(--slate-900);
}
.doc-faq__item summary::-webkit-details-marker { display: none; }
.doc-faq__a p { font-size: 17.5px; line-height: 1.6; color: var(--slate-700); margin: 0 0 20px; }

/* ─── Heading step-down, then release to wrapping ──────────────────────── */

@media (max-width: 1140px) {
  .doc-h1 { font-size: 46px; }
  .doc-h2 { font-size: 35px; }
}
@media (max-width: 980px) {
  .doc-h1 { font-size: 39px; }
  .doc-h2 { font-size: 30px; }
}

@media (max-width: 860px) {
  .doc-sec { padding: 52px 0; }
  .doc-sec--tight { padding: 40px 0; }
  .doc-wrap, .doc-nav { padding-left: 20px; padding-right: 20px; }
  /* Wrapping is correct on a phone. */
  .doc-h1, .doc-h2 { white-space: normal; }
  .doc-h1 { font-size: 33px; letter-spacing: -.03em; }
  .doc-h2 { font-size: 26px; }
  .doc-dek { font-size: 18px; }
  .doc-prose p, .doc-prose li { font-size: 17px; }
  .doc-prose h2 { font-size: 25px; margin-top: 40px; }
  .doc-prose h3 { font-size: 19px; }
  .doc-prose blockquote p { font-size: 19px; }
  .doc-toc { padding: 20px 22px; }
  .post-list__title { font-size: 22px; }
  /* Stacks, figure above the title. */
  .post-list__link { grid-template-columns: 1fr; gap: 12px; }
  .post-list__fig-label { max-width: 30ch; }
  .doc-nav__links { gap: 16px; }
  .doc-nav__links a { font-size: 14px; }
}

@media (max-width: 460px) {
  .doc-nav { flex-wrap: wrap; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA EXHIBITS — Tufte
   ═══════════════════════════════════════════════════════════════════════════

   Text is HTML at a FIXED pixel size; only the marks are SVG. A single scaled
   <svg> carrying its own <text> was the obvious build and it fails the skill's
   readability floor: a viewBox wide enough for a 22-row dot plot scales to about
   0.5 inside a 350px column, which turns 14px labels into 7px. Words as words,
   data as SVG, keeps every label at size from 390px to full width and is the
   preset's own sparkline-in-table pattern.

   Marks are vertical TICKS rather than dots. The tracks use
   preserveAspectRatio="none" so a position maps to an exact x at any width; a
   circle would stretch into an ellipse under that transform, a tick would not.

   Palette is the four colours specified for these exhibits and nothing else:
   ink #0B1220, accent #1E5BFF, muted #667085, white ground.
*/

.fig {
  margin: 40px 0 44px;
  --fig-ink: #0B1220;
  --fig-accent: #1E5BFF;
  --fig-muted: #667085;
}
.fig__cap {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--fig-muted); margin: 0 0 4px;
}
.fig__sub { font-size: 13px; color: var(--fig-muted); margin: 0 0 18px; }
.fig__note {
  font-size: 13px; line-height: 1.5; color: var(--fig-muted);
  margin: 14px 0 0; max-width: 60ch;
}
.fig__note b { color: var(--fig-ink); font-weight: 600; }
.fig__note .accent { color: var(--fig-accent); font-weight: 600; }

/* Ends of a scale, sitting on the track's own columns. */
.fig-ends {
  display: grid; grid-template-columns: var(--fig-label, 116px) 1fr var(--fig-val, 46px);
  gap: 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--fig-muted); margin-bottom: 8px;
}
.fig-ends__scale { display: flex; justify-content: space-between; }

/* ─── Row plots (exhibits 01 and 04) ─────────────────────────────────────── */

.fig-rows { list-style: none; margin: 0; padding: 0; }
.fig-row {
  display: grid; grid-template-columns: var(--fig-label, 116px) 1fr var(--fig-val, 46px);
  gap: 0 10px; align-items: center; margin: 0; padding: 1px 0;
}
.fig-row__name {
  font-size: 14px; line-height: 1.35; color: var(--fig-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fig-row__track { width: 100%; height: 16px; display: block; overflow: visible; }
.fig-row__val {
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  text-align: right; color: var(--fig-ink);
}
/* The one accent, on the focal row only. */
.fig-row.is-focal .fig-row__name { color: var(--fig-accent); font-weight: 600; }
.fig-row.is-focal .fig-row__val { color: var(--fig-accent); font-size: 16px; font-weight: 600; }

/* The empty span, drawn once behind the rows it spans. */
.fig-band {
  display: grid; grid-template-columns: var(--fig-label, 116px) 1fr var(--fig-val, 46px);
  gap: 0 10px; align-items: center;
}
.fig-band__body {
  grid-column: 2; border-top: 1px solid #E4E8F0; border-bottom: 1px solid #E4E8F0;
}

/* ─── Distribution (exhibit 02) ──────────────────────────────────────────── */

.fig-dist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; }
.fig-dist__col { text-align: center; }
.fig-dist__bar { width: 100%; height: 132px; display: block; }
.fig-dist__n {
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--fig-ink); margin-top: 8px;
}
.fig-dist__col.is-mode .fig-dist__n { font-size: 16px; font-weight: 600; }
.fig-dist__col.is-empty .fig-dist__n { color: var(--fig-accent); font-size: 16px; font-weight: 600; }
.fig-dist__k { font-size: 13px; color: var(--fig-muted); margin-top: 2px; }

/* ─── Slopegraph (exhibit 03) ────────────────────────────────────────────── */

.fig-slope { display: grid; grid-template-columns: 1fr 104px 1fr; gap: 0 8px; align-items: start; }
.fig-slope__side { list-style: none; margin: 0; padding: 0; }
.fig-slope__row {
  height: 30px; display: flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--fig-ink); white-space: nowrap;
}
.fig-slope__side--right .fig-slope__row { justify-content: flex-start; }
.fig-slope__side--left .fig-slope__row { justify-content: flex-end; }
.fig-slope__v {
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--fig-muted);
}
.fig-slope__row.is-focal { color: var(--fig-accent); font-weight: 600; }
.fig-slope__row.is-focal .fig-slope__v { color: var(--fig-accent); font-size: 16px; }
.fig-slope__lines { width: 100%; height: 210px; display: block; }
.fig-slope__heads {
  display: grid; grid-template-columns: 1fr 104px 1fr; gap: 0 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--fig-muted); margin-bottom: 10px;
}
.fig-slope__heads span:first-child { text-align: right; }
.fig-slope__heads span:last-child { text-align: left; }

@media (max-width: 860px) {
  .fig { --fig-label: 108px; --fig-val: 42px; }
  .fig-row__name { font-size: 13.5px; }
  .fig-slope { grid-template-columns: 1fr 56px 1fr; }
  .fig-slope__heads { grid-template-columns: 1fr 56px 1fr; }
  .fig-dist { gap: 6px; }
  .fig-dist__bar { height: 112px; }
}