/* ==========================================================================
   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;
}

*, *::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;
}
.blog-figure-frame svg { display: block; width: 100%; height: 100%; min-width: 460px; }
.blog-figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-faint);
}