/* The article body — the ONE place on this site where markdown decides the
 * markup, and therefore the only place that needs element selectors.
 *
 * `site.css`'s reset zeroes every margin on `h1,h2,h3,h4,p,figure,ul,ol,dl,dd`,
 * strips `padding` AND `list-style` off `ul`/`ol`, and makes `img` a block.
 * Everything below is that reset being paid back, deliberately, for a BOUNDED
 * element set — the set `tools/check-blog.mjs` proves no post exceeds. Two
 * elements are here for the opposite reason: `pre` and `blockquote` are NOT in
 * the reset's margin list, so they arrive carrying the browser's own `1em 0`
 * and `1em 40px` onto a page that has no margins anywhere else.
 *
 * MEASURE IS ON THE ELEMENT, IN `ch`. There is no `.prose { max-width }` and
 * the article does not sit in a narrower shell: it stands in the same 1280px
 * `.shell` as every section on the site, so the two vertical hairlines run down
 * a post exactly as they run down the home page. That is README.md's standing
 * rule — "prose is measured on the element in `ch`, never by a second, narrower
 * container" — and the file already has three precedents: `.lede` 60ch, `.body`
 * 66ch, `.qa dd` 74ch.
 *
 * NOT ONE COLOUR LITERAL, and `--accent` appears NOWHERE. `check-tokens.mjs`
 * only reads `tokens.css` and `fonts.css` and is blind to this file, so
 * `check-blog.mjs` asserts the absence instead. ADR-0052 D2 spends `--accent`
 * on focus, active nav and selection; a prose link is `--ink-1` over a
 * `--rule-strong` underline, which is exactly what `.link` already is.
 *
 * Loaded only by baked blog pages. The four client-side routes never see it.
 */

:root {
  /* Site-local, like `--t-hero` and `--e3` in site.css, and deliberately NOT
     in tokens.css: check-tokens.mjs fails on any `:root` name that
     design-tokens.json does not define. `--t-body` (max 15px) is the caption
     register — nobody reads a 2000-word article at 15px. */
  --t-prose: clamp(15.5px, 1.15vw, 17px);
  --prose-measure: 68ch;
}

.prose {
  font-size: var(--t-prose);
  line-height: 1.72;
  color: var(--ink-1);
}

/* Rhythm: one owl, then the exceptions. A heading opens a section, so it takes
   air ABOVE and gives it back below — the paragraph after a heading belongs to
   that heading and should sit close to it. */
.prose > * + *                { margin-top: var(--sp-5); }
.prose > h2                   { margin-top: var(--sp-7); }
.prose > h3                   { margin-top: var(--sp-6); }
.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + *               { margin-top: var(--sp-3); }
.prose li > * + *             { margin-top: var(--sp-2); }
.prose blockquote > * + *     { margin-top: var(--sp-3); }

/* The measure, per element. */
.prose p, .prose li, .prose blockquote,
.prose h2, .prose h3, .prose h4,
.prose figcaption             { max-width: var(--prose-measure); }
/* Code and tables are figures, not prose: they get the full band, because
   wrapping a wide table to 68ch makes it unreadable rather than tidy. */
.prose > pre, .prose > table  { max-width: none; }

/* ------------------------------------------------------------- headings */
/* `h1` is not here and is rejected by check-blog.mjs: the page's one `<h1>` is
   the post title, above the body. `h5`/`h6` are rejected for a different
   reason — they are the two levels the reset misses, so they would arrive with
   UA margins on a page that has none. */

.prose h2 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(20px, 1.9vw, 25px);
  letter-spacing: -0.03em; line-height: 1.2;
  text-wrap: balance;
}
.prose h3 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 19px);
  letter-spacing: -0.025em; line-height: 1.3;
}
/* `1em`, NOT `--t-display-m-size`. That token is 14px — the site's small-heading
   register, and correct for a panel title sitting above 15px body copy. In an
   article set at up to 17px it would render a heading SMALLER than the
   paragraph under it, which reads as a caption. A fourth level here separates
   itself by face and weight instead of by size. */
.prose h4 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1em; line-height: 1.35; letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------- inline */
/* There is no bare `a` rule anywhere on this site — `.link` is a class, and
   markdown cannot apply a class. Same treatment, reached by element. */

.prose a        { color: var(--ink-1); text-decoration: none;
                  border-bottom: 1px solid var(--rule-strong);
                  transition: border-color var(--mo-fast); }
.prose a:hover  { border-bottom-color: var(--ink-1); }
.prose strong   { font-weight: 600; color: var(--ink-1); }
.prose em       { font-style: italic; }
.prose s        { color: var(--ink-2); }

/* ----------------------------------------------------------------- lists */
/* The reset took the marker AND the indent. Both come back. */

.prose ul       { padding-inline-start: var(--sp-6); list-style: disc; }
.prose ol       { padding-inline-start: var(--sp-6); list-style: decimal; }
/* A marker is a glyph, not text, so `--ink-3` is a valid use of it here —
   the contrast floor in README.md's accessibility note governs labels,
   captions and axis ticks, which this is not. */
.prose li::marker { color: var(--ink-3); }
.prose li + li  { margin-top: var(--sp-2); }
.prose li > ul,
.prose li > ol  { margin-top: var(--sp-2); }

/* ------------------------------------------------------------ quote, rule */

.prose blockquote {
  margin: 0;
  border-inline-start: 2px solid var(--rule-strong);
  padding-inline-start: var(--sp-5);
  color: var(--ink-2);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--sp-7); }

/* ------------------------------------------------------------------ code */

.prose code {
  font-family: var(--ff-mono); font-size: 0.9em;
  background: var(--raised); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 5px;
}
.prose pre {
  margin: 0; overflow-x: auto;
  background: var(--raised); border: 1px solid var(--rule);
  border-radius: var(--r); padding: var(--sp-4);
  font-size: var(--t-ui-sm-size); line-height: 1.6;
}
/* Undo the inline chip inside a block. */
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ----------------------------------------------------------------- table */
/* No bare `table` rule exists on this site either — `.ptable` is scoped to the
   app frame. Same register, reached by element. */

.prose table    { width: 100%; border-collapse: collapse; font-size: var(--t-ui-sm-size); }
.prose thead th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  font-family: var(--ff-mono); font-size: var(--t-mono-label-size);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
}
.prose tbody td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--rule); vertical-align: top; }

/* ----------------------------------------------------------------- figure */

.prose img        { margin-inline: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.prose figure     { margin: 0; }
.prose figcaption { margin-top: var(--sp-2); font-size: var(--t-ui-sm-size); color: var(--ink-2); }

/* `br` is markdown's hardbreak. It needs no declaration, and it is named here
   because check-blog.mjs reads the styled set OUT OF THIS FILE — so the
   stylesheet and the check describe the same list by construction rather than
   by two people keeping two lists in agreement. */