/*
 * Blog + long-form article styles. Propshaft bundles every file in this directory, so this needs no
 * manifest entry.
 *
 * Everything here uses the Terminal tokens from application.css — no new colors, no new fonts.
 *
 * Why a `.prose` scope exists at all: application.css is tuned for MARKETING pages, where h1 runs to
 * 66px and h2 to 40px, and where `p { max-width: 640px }` is deliberately global. Those are right
 * for a hero and wrong for a 2,000-word article, and nothing in the base sheet styles ul/ol/
 * blockquote/pre/table/inline code, because marketing pages never needed them. `.prose` is that
 * missing layer, and it only applies inside rendered post bodies.
 */

/* ------------------------------------------------------------ Article ------ */
.post__title { font-size: clamp(32px, 4.5vw, 46px); }

.post__meta {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-soft);
}

.post__related { margin-top: 56px; }

/* ------------------------------------------------------------- Prose ------- */
.prose { font-size: 17px; line-height: 1.75; }

/* Reset the marketing heading ramp to article proportions, and give headings room above so a long
   post reads as sections rather than one wall. */
.prose h2 {
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 2.2em 0 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule-soft);
}

.prose h3 { font-size: 20px; margin: 1.8em 0 0.5em; }
.prose h4 { font-size: 16px; margin: 1.6em 0 0.5em; }

/* The global `p { max-width: 640px }` would leave a ragged right edge in this column. */
.prose p { max-width: none; margin: 0 0 1.15em; }

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--accent-ink); }

.prose a { text-decoration: underline; text-underline-offset: 2px; }

.prose strong { color: var(--fg); font-weight: 600; }

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--rule);
  color: var(--fg-3);
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 2.4em 0; }

.prose img { border-radius: var(--r); margin: 1.6em 0; }

.prose figcaption {
  font-size: 13px;
  color: var(--fg-3);
  text-align: center;
  margin-top: -0.8em;
}

/* Inline code. Distinguished from a code block by weight and tint, not by a border — which is what
   this comment always said and what the rule never did.
   
   IT WAS `background: var(--panel-deep)` WITH NO COLOR. That is Ground B, the dark data panel, set
   behind text that inherits Ground A's dark ink: a near-black chip with near-black glyphs in the
   middle of a light paragraph. `latestRoundData()` on /methodology was a bar you could not read.
   
   A tint on the page's own ground is what an inline mark wants. The dark panel is a COMPONENT you
   enter deliberately (see the note in 00-tokens.css), and a five-character run of monospace inside
   a sentence is not entering it. */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--rule-soft);
  color: var(--fg);
  border-radius: var(--r);
  padding: 1px 5px;
}

/* Code blocks: the same "well" surface the terminal mocks use. Scrolls inside itself so a long
   line can never force the page to scroll sideways on a phone. */
.prose pre {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--panel-deep);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  padding: 16px 18px;
  margin: 1.4em 0;
  overflow-x: auto;
}

/* A block DOES enter Ground B, deliberately — but it has to bring the ink for it. Without a color
   the block inherited the page's dark body ink onto the dark well, the same unreadable pairing the
   inline rule had. Rouge's own token colours sit on top of this and are already panel-safe. */
.prose pre { color: var(--on-panel-2); }

.prose pre code {
  background: none;
  color: inherit;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

.prose th, .prose td {
  border: 1px solid var(--rule-soft);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--panel-deep);
  color: var(--fg);
  font-weight: 600;
}

/* ---------------------------------------------------------- Index/cards ---- */

.post-card__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  margin: 12px 0 0;
}

.post-card .card__title { margin-bottom: 8px; }
.post-card .card__title a { color: var(--fg); }
.post-card .card__title a:hover { color: var(--accent-ink); }

/* ------------------------------------------------------------- CTA --------- */
.post-cta {
  margin-top: 56px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

.post-cta__title { font-size: 24px; margin-bottom: 10px; }
.post-cta__body { color: var(--fg-3); max-width: none; margin-bottom: 20px; }

/* ------------------------------------------------- The research landing ---- */
/*
 * A LIST OF NOTES, ONE SCALE.
 *
 * There was a lead card at 31px over a two-up of 16px cards, plus a rule spanning a lone trailing
 * card to close the two-up's ragged last row. Once that rule fired, both cards were full-width rows
 * and only one of them was 31px, which reads as a mistake rather than as hierarchy. Notes are
 * dated and ordered by date; that is the only hierarchy the page has, so there is one scale.
 *
 * The card is TITLE LEFT, DESCRIPTION AND DATE RIGHT, both starting at the top. An earlier version
 * kept grid-row 1 reserved for a kicker that had been deleted, so every title sat a row lower than
 * its own description with dead space above it. Rows are assigned to what is actually rendered.
 */
.research-head { padding-block: var(--s5) 0; }
.research-head__title {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* The heading is a label for the list, not a section of its own, so the two are close together and
   the block below the last note is no deeper than the gap between notes. `.section` gives 56px at
   both ends, which on a page holding two cards is more empty page than page. */
.research-body { padding-block: var(--s4) var(--s5); }

.research-list { display: grid; gap: 16px; }

.post-card { padding: 28px; }
.post-card .card__title { font-size: 22px; line-height: 1.3; margin-bottom: 10px; }
.post-card .card__body { font-size: 15.5px; line-height: 1.6; }

@media (min-width: 860px) {
  .post-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: start;
  }

  /* Named rows rather than nth-child, so adding a field to the card cannot silently reshuffle it,
     which is exactly how the deleted kicker left an empty row behind. */
  /* The gap belongs to the stacked layout. In two columns the title and the description are side
     by side, so a bottom margin on the title just lowers the card. */
  .post-card .card__title { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .post-card .card__body { grid-column: 2; grid-row: 1; }
  .post-card .post-card__meta { grid-column: 2; grid-row: 2; margin-top: 12px; }
}

/*
 * ── THE SNAPSHOT NOTICE ON A POST ─────────────────────────────────────────────────────────────
 *
 * Rule-adjacent rather than decorative. A reader arriving a week after publication has no way to
 * tell a frozen book from a live one, and depth on these pools moves within hours, so the notice
 * is a full-width block above the prose rather than a line of small print inside it.
 *
 * It carries the accent rule and not a signal hue: it qualifies the whole page, it is not a
 * measurement, and a warning colour here would read as a fault.
 */
.post__snapshot {
  margin: 24px 0 32px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
}

.post__snapshot p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-3); }
.post__snapshot strong { color: var(--fg); }
.post__snapshot time { font-family: var(--font-mono); font-size: 13.5px; }

@media (max-width: 640px) {
  .prose { font-size: 16px; }
  .prose h2 { font-size: 23px; }
  .post-cta { padding: 20px; }

  /* One column, and a title sized for a 360px measure rather than a 920px one. */
  .post-card { padding: 20px; }
  .post-card .card__title { font-size: 19px; }
  .post-card .card__body { font-size: 15px; }
  .post-card .post-card__meta { margin-top: 12px; }
  .post__snapshot { padding: 12px 14px; }
}

/*
 * ── THE POST MEASURE ──────────────────────────────────────────────────────────────────────────
 *
 * Posts rendered in `.narrow`, which is 720px. That is a fine measure for prose and a bad one for
 * these posts: they carry five-column tables and a 960-unit chart, both of which were being
 * squeezed into 720px and panned inside their own scrollers while ~700px of empty page sat either
 * side of them on a laptop.
 *
 * So the CONTAINER widens and the PROSE does not. Paragraphs and lists keep a readable line length;
 * tables, code blocks and figures take the full width, which is the one thing they actually needed.
 * This is the standard breakout, done by constraining the text rather than by pulling the wide
 * things out with negative margins, which would break the moment the container changes.
 */
.research-post { max-width: 920px; }

.research-post .prose > p,
.research-post .prose > ul,
.research-post .prose > ol,
.research-post .prose > blockquote { max-width: 68ch; }

.research-post .lede,
.research-post .post__snapshot { max-width: 68ch; }

@media (max-width: 960px) {
  /* Below the container's own width there is nothing to break out of, and a 68ch cap would start
     making the text column narrower than the page it is on. */
  .research-post .prose > p,
  .research-post .prose > ul,
  .research-post .prose > ol,
  .research-post .prose > blockquote,
  .research-post .lede,
  .research-post .post__snapshot { max-width: none; }
}