/*
 * 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__tags { margin-top: 40px; }
.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 ---- */
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.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; }

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