.mn-blog {

  --bl-text:        var(--mn-text-body);
  --bl-lh:          1.7;

  --bl-max:         var(--mn-container-max);

  --bl-measure:     70ch;

  --bl-h2:          clamp(24px, 3vw, 28px);
  --bl-h3:          21px;
  --bl-h4:          var(--mn-text-title);

  --bl-code:        13px;

  --bl-gap:         28px;
  --bl-gap-block:   var(--mn-space-8);

  --bl-heading:     var(--mn-violet-ink);

  --bl-link:         var(--mn-violet);
  --bl-link-hover:   var(--mn-violet-strong);
  --bl-link-active:  var(--mn-violet-ink);
  --bl-link-visited: var(--mn-violet-ink);
}

body.mn-blog-page { background: var(--mn-surface); }

body.mn-blog-page .mn-prose pre,
body.mn-blog-page .mn-prose code { background: var(--mn-bg); }

.mn-blog {
  max-width: var(--bl-max);
  margin: 0 auto;
  padding: var(--mn-space-12) var(--mn-gutter) var(--mn-space-16);
}

.mn-blog-head { margin-bottom: var(--mn-space-12); }

.mn-blog-title { color: var(--bl-heading); margin: 0 0 var(--mn-space-3); }

.mn-blog-lead {
  font-size: var(--mn-text-lead); line-height: 1.6;
  color: var(--mn-muted); margin: 0;
}

.mn-post-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-8) var(--mn-space-12);
}
@media (min-width: 861px) {
  .mn-post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mn-post-item {
  padding-top: var(--mn-space-6);
  border-top: 1px solid var(--mn-hairline);
}

.mn-post-empty {
  grid-column: 1 / -1; border-top: 0; padding-top: 0;
  color: var(--mn-faint); font-size: var(--bl-text);
}

.mn-post-item-title { font-size: var(--bl-h3); margin: 0 0 var(--mn-space-2); }
.mn-post-item-title a { color: var(--bl-link); }
.mn-post-item-title a:visited { color: var(--bl-link-visited); }
.mn-post-item-title a:hover { color: var(--bl-link-hover); text-decoration: underline;
  text-underline-offset: 3px; }
.mn-post-item-title a:active { color: var(--bl-link-active); }
.mn-post-item-summary {
  font-size: var(--bl-text); line-height: var(--bl-lh);

  color: var(--mn-ink); margin: 0 0 var(--mn-space-3);
}

.mn-post-col,
.mn-prose {
  max-width: var(--bl-measure);
  margin-inline: auto;
}

.mn-post-back {
  display: inline-flex; align-items: center; gap: var(--mn-space-2);
  font-size: var(--mn-text-sm); color: var(--bl-link);
  margin-bottom: var(--mn-space-6);
}
.mn-post-back-arrow {
  width: 14px; height: 14px; flex: 0 0 auto;
  transition: transform var(--mn-dur-xs) var(--mn-ease-standard);
}
.mn-post-back:hover  { color: var(--bl-link-hover); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mn-post-back:hover .mn-post-back-arrow { transform: translateX(-2px); }
.mn-post-back:active { color: var(--bl-link-active); }

.mn-post-title {
  color: var(--bl-heading);
  margin: 0 0 var(--mn-space-4);
}

.mn-post-summary {
  font-size: var(--mn-text-lead); line-height: 1.6;
  color: var(--mn-ink); margin: 0 0 var(--mn-space-4);
}

.mn-post-divider {
  border: 0; border-top: 1px solid var(--mn-hairline);
  margin: var(--mn-space-8) 0 var(--mn-space-12);
}

.mn-post-meta {
  display: flex; flex-wrap: wrap; gap: var(--mn-space-3);
  font-size: var(--mn-text-sm); color: var(--bl-heading);
  margin: 0;
}

.mn-post-author { color: var(--bl-heading); font-weight: 600; }

.mn-post-sep { user-select: none; color: var(--mn-violet); }

.mn-post-draft {
  display: inline-block;
  font: 600 var(--mn-text-xs)/1 var(--mn-font-body);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mn-coral-ink); background: var(--mn-coral-tint);
  border-radius: var(--mn-radius-sm);
  padding: var(--mn-space-2) var(--mn-space-3);
  margin: 0 0 var(--mn-space-4);
}

.mn-prose {
  font-size: var(--bl-text);
  line-height: var(--bl-lh);
  color: var(--mn-ink);
}

.mn-prose > * { margin: 0; }
.mn-prose > * + * { margin-top: var(--bl-gap); }

.mn-prose > :where(ul, ol, blockquote, pre, hr, img) { margin-top: var(--bl-gap-block); }
.mn-prose > :where(ul, ol, blockquote, pre, hr, img) + * { margin-top: var(--bl-gap-block); }

.mn-prose h2, .mn-prose h3, .mn-prose h4 {
  margin: calc(var(--mn-space-12)) 0 0;
  line-height: 1.25;
  color: var(--mn-ink);
}
.mn-prose h2 { font-size: var(--bl-h2); }
.mn-prose h3 { font-size: var(--bl-h3); }
.mn-prose h4 { font-size: var(--bl-h4); font-family: var(--mn-font-body); font-weight: 600; }
.mn-prose h2 + *, .mn-prose h3 + *, .mn-prose h4 + * { margin-top: var(--mn-space-4); }

.mn-prose a {
  color: var(--bl-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;

  text-decoration-color: rgba(var(--mn-violet-rgb), .38);
  text-decoration-color: color-mix(in oklab, var(--mn-violet) 38%, transparent);
  transition: color var(--mn-dur-xs) ease, text-decoration-color var(--mn-dur-xs) ease;
}

.mn-prose a:visited { color: var(--bl-link-visited); }
.mn-prose a:hover  { color: var(--bl-link-hover);  text-decoration-color: currentColor; }
.mn-prose a:active { color: var(--bl-link-active); text-decoration-color: currentColor; }

.mn-prose em, .mn-prose i {
  font-family: var(--mn-font-display);
  font-style: italic;
}

.mn-prose ul, .mn-prose ol { padding-left: var(--mn-space-12); }
.mn-prose li + li { margin-top: var(--mn-space-3); }
.mn-prose li > ul, .mn-prose li > ol { margin-top: var(--mn-space-3); }
.mn-prose li::marker { color: var(--mn-faint); }

.mn-prose blockquote {
  padding: var(--mn-space-2) 0 var(--mn-space-2) var(--mn-space-8);
  border-left: 3px solid var(--mn-violet);
  color: var(--mn-violet-ink);
  font-size: calc(var(--bl-text) + 2px);
  line-height: 1.6;
}

.mn-prose blockquote > * + * { margin-top: var(--mn-space-4); }

.mn-prose code {
  font-family: var(--mn-font-mono);
  font-size: var(--bl-code);
  background: var(--mn-surface);
  border-radius: var(--mn-radius-sm);
  padding: 2px 5px;
}

.mn-prose pre {
  overflow-x: auto;
  background: var(--mn-surface);
  border: 1px solid var(--mn-hairline);
  border-radius: var(--mn-radius);
  padding: var(--mn-space-4);
}

.mn-prose pre code { background: none; padding: 0; font-size: var(--bl-code); }
.mn-prose pre { line-height: 1.5; }

.mn-prose hr {
  border: 0; border-top: 1px solid var(--mn-hairline);
}

.mn-prose img { max-width: 100%; height: auto; border-radius: var(--mn-radius); }