/* ==========================================================================
   MPM blog
   ==========================================================================
   Long-form reading, in the same visual system as the rest of the public site:
   dark by default, champagne accent, Geist for text and Manrope for display.

   The tokens are redeclared here rather than imported because the landing page
   keeps its own inside a single-file page. Same values, one place for the blog.
   If the brand palette moves, these move with it.
   ========================================================================== */

:root {
  /* Only what is specific to reading long-form. The colour tokens come from
     design/public-header.css (dark, generated from the marketing page) and
     design/theme-runtime.js (light). This file declares no palette. */
  --measure: 68ch;
  --radius: 12px;

  /* ---------------------------------------------------------------------
     Diagram tokens.
     ---------------------------------------------------------------------
     The editorial SVGs used to paint their text with --ink, --ink-soft and
     --ink-muted. Those three were never defined — not here, not in
     public-header.css, not in theme-runtime.js, not anywhere. An SVG given
     fill="var(--ink)" with no such variable does not fall back to the
     inherited colour: the declaration is invalid, so fill takes its INITIAL
     value, which is black. On cream that read as a deliberate choice, so
     light mode looked correct by accident. On #0b0d12 the same black text
     was invisible, and only the dark screenshot showed the defect.

     These are aliases, not a palette. Every one resolves to a token the rest
     of the site already defines, so a figure follows the active theme with no
     second set of values to keep in step, and the theme toggle re-resolves
     them live rather than freezing whatever was current at first paint.

     Named for the ROLE in the drawing rather than the colour, because the
     drawing is what the figure code talks about. */
  --diagram-text: var(--text-strong);      /* labels that carry the meaning */
  --diagram-secondary: var(--text);        /* supporting labels, full weight */
  --diagram-muted: var(--text-dim);        /* subdued, still readable */
  --diagram-line: var(--border-bright);    /* axes, rules, connectors */
  --diagram-accent: var(--accent);         /* strokes, markers, emphasis fills */
  --diagram-accent-soft: var(--accent-soft);
  /* An accent drawing a line owes nothing to text contrast; an accent spelling
     a character does. --accent on the light surface measures 3.09:1, which is
     fine for a rule and thin for a numeral, so accent TEXT resolves to the
     darker pair the site already keeps for exactly this purpose: 4.57:1 at
     worst, against 7.22:1 in dark. Same token, two duties, split. */
  --diagram-accent-text: var(--accent-text);
  --diagram-surface: var(--bg-2);          /* the fill behind box labels */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); }

/* Links inside article prose keep their underline. The shared shell resets
   every anchor to none - that is the site-wide default and what the marketing
   page has always done - so this restores it for the one context that needs
   it. Scoped to .blog-body deliberately: the previous arrangement had no reset
   at all, so the browser default reached the navigation drawer and underlined
   every item in it. Colour alone is not an accessible way to mark a link in a
   paragraph, which is why prose is the exception rather than the rule. */
.blog-body p a,
.blog-body li a,
.blog-body blockquote a,
.blog-body td a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.blog-body p a:hover,
.blog-body li a:hover,
.blog-body blockquote a:hover,
.blog-body td a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- shared layout ------------------------------------------------------- */
main { display: block; }
.blog-article, .blog-index {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 28px 22px 72px;
}

.blog-crumbs { font-size: 13px; color: var(--text-faint); margin-bottom: 26px; }
.blog-crumbs a { color: var(--text-faint); text-decoration: none; }
.blog-crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.blog-crumbs span[aria-hidden] { margin: 0 6px; opacity: .5; }

.blog-tag {
  display: inline-block;
  font-family: Manrope, Geist, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px;
  text-decoration: none;
}

/* --- index --------------------------------------------------------------- */
.blog-index-head { margin-bottom: 40px; }
.blog-index-head h1 {
  font-family: Manrope, Geist, sans-serif;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 14px;
  text-wrap: balance;
}
.blog-index-head p { color: var(--text-dim); margin: 0; font-size: 17px; }

.blog-featured {
  display: block;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 30px;
}
.blog-featured:hover { border-color: var(--accent); }
.blog-featured h2 {
  font-family: Manrope, Geist, sans-serif;
  font-size: 25px;
  line-height: 1.25;
  margin: 14px 0 10px;
  text-wrap: balance;
}
.blog-featured p { color: var(--text-dim); margin: 0 0 14px; }

.blog-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.blog-card a {
  display: block;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.blog-card a:hover { border-color: var(--accent); }
.blog-card h3 {
  font-family: Manrope, Geist, sans-serif;
  font-size: 19px;
  line-height: 1.3;
  margin: 12px 0 8px;
  text-wrap: balance;
}
.blog-card p { color: var(--text-dim); margin: 0 0 12px; font-size: 15px; }
.blog-card-meta { font-size: 13px; color: var(--text-faint); display: block; }

@media (min-width: 700px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-index, .blog-article { padding-left: 32px; padding-right: 32px; }
}

/* --- article ------------------------------------------------------------- */
.blog-article-head { margin-bottom: 34px; }
.blog-article-head h1 {
  font-family: Manrope, Geist, sans-serif;
  font-size: clamp(29px, 5vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  margin: 14px 0 16px;
  text-wrap: balance;
}
.blog-deck { font-size: 19px; color: var(--text-dim); margin: 0 0 18px; line-height: 1.6; }
.blog-meta { font-size: 13px; color: var(--text-faint); margin: 0; }

.blog-toc {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 36px;
}
.blog-toc h2 {
  font-family: Manrope, Geist, sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
}
.blog-toc ol { margin: 0; padding-left: 20px; font-size: 15px; }
.blog-toc li { margin: 5px 0; }
.blog-toc a { color: var(--text-dim); text-decoration: none; }
.blog-toc a:hover { color: var(--accent-text); text-decoration: underline; }

.blog-body h2 {
  font-family: Manrope, Geist, sans-serif;
  font-size: 25px;
  line-height: 1.25;
  margin: 46px 0 14px;
  scroll-margin-top: 20px;
  text-wrap: balance;
}
.blog-body h3 {
  font-family: Manrope, Geist, sans-serif;
  font-size: 19px;
  margin: 32px 0 10px;
  scroll-margin-top: 20px;
}
.blog-body p { margin: 0 0 18px; }
.blog-body ul, .blog-body ol { margin: 0 0 20px; padding-left: 24px; }
.blog-body li { margin: 7px 0; }
.blog-body strong { color: var(--text); font-weight: 600; }
.blog-body hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }

.blog-body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--text-dim);
  font-style: italic;
}

.blog-body code {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .89em;
  background: var(--bg-2);
  border-radius: 4px;
  padding: 2px 6px;
}
.blog-body pre {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 22px;
}
.blog-body pre code { background: none; padding: 0; font-size: 14px; line-height: 1.6; }

/* A wide table scrolls inside its own box. The page body must never scroll
   sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.blog-body table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 460px; }
.blog-body th, .blog-body td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.blog-body th {
  font-family: Manrope, Geist, sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom-color: var(--border-bright);
  white-space: nowrap;
}

/* --- CTA ----------------------------------------------------------------- */
.blog-cta {
  background: var(--bg-1);
  border: 1px solid var(--border-bright);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 40px 0;
}
.blog-cta p { margin: 0 0 14px; color: var(--text-dim); }
.blog-cta-button {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-0) !important;
  font-family: Manrope, Geist, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 8px;
}
.blog-cta-button:hover { filter: brightness(1.08); }

/* --- related ------------------------------------------------------------- */
.blog-related { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 26px; }
.blog-related h2 {
  font-family: Manrope, Geist, sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 16px;
}
.blog-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.blog-related a {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}
.blog-related a:hover { border-color: var(--accent); }
.blog-related-title {
  display: block;
  font-family: Manrope, Geist, sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
.blog-related-desc { display: block; color: var(--text-faint); font-size: 14px; line-height: 1.5; }

/* --- footer -------------------------------------------------------------- */
.blog-footer { border-top: 1px solid var(--border); background: var(--bg-1); padding: 34px 22px; }
.blog-footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 14px;
}
.blog-footer strong { font-family: Manrope, Geist, sans-serif; }
.blog-footer p { margin: 6px 0 0; color: var(--text-faint); max-width: 34ch; }
.blog-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.blog-footer nav a { color: var(--text-dim); text-decoration: none; }
.blog-footer nav a:hover { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- editorial figures ---------------------------------------------------
   Inline SVG, so a diagram inherits the page's theme tokens and costs no extra
   request. The frame carries an explicit aspect-ratio: the space is reserved
   before paint, so a figure can never push the paragraph below it down. */
.blog-figure { margin: 34px 0; }
.blog-figure-frame {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* The diagrams are drawn on a 760-unit canvas. Scaling one down to fit a phone
   scales its type down with it: at the old 460px floor a 13px label rendered at
   about 8px, which is not a label any more. The floor is now high enough that
   the smallest type stays near 12px, and the frame scrolls instead — wide
   content scrolling inside its own container, never the page.

   Nothing is lost by scrolling: every figure only restates what the prose
   already says, which is the rule these diagrams are built under. */
.blog-figure-frame svg { display: block; width: 100%; height: 100%; min-width: 700px; }
.blog-figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-faint);
}