website

/* Shared typography for rendered markdown content (blog posts + repo
   READMEs) — anything wrapped in a plain <article class="markdown-body">
   (see repo.njk/post.njk; no wrapping custom element anymore). Extracted
   from the old posts-detail.css so repo pages get the same look instead
   of no styling at all. Deliberately scoped to .markdown-body p/li code
   (inline code), not .markdown-body code generally — a bare `code`
   selector would also catch the <code> inside fenced <pre> blocks and
   stomp the syntax-highlighting styles from shared.css with the small
   inline-code padding/background (that shared styling is cross-cutting
   between markdown content and the file-viewer, so it stays global
   rather than duplicated here). */
.markdown-body {
  font-size: 1.1rem;
  line-height: 1.5;

  h1 {
    font-size: var(--fs-heading-md);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  h2 {
    font-size: var(--fs-heading-md);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  h3 {
    font-size: var(--fs-heading-sm);
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.1rem;
  }

  p {
    font-size: 1.1rem;
    padding-bottom: 1rem;
  }

  li {
    font-size: 1.1rem;
  }

  p code,
  li code {
    color: var(--color-code-fg) !important;
    background: var(--color-code-bg) !important;
    word-wrap: break-word;
    box-decoration-break: clone;
    padding: 2px 4px;
    border-radius: 0.2rem;
    font-weight: 400;
    font-size: 0.8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  /* Fenced code blocks in a README (markdown-it output — no language-
     class on the <pre> itself, unlike Prism's blog-post output, which is
     how this targets only the README case) get a subtle border + corner
     radius, matching the framed-code-block look. */
  pre:not([class*="language-"]) {
    border: 1px solid var(--color-box-bg);
    border-radius: 0.4rem;
  }

  blockquote {
    font-size: 1.2rem;
    font-weight: 600;
    background: var(--color-highlight-bg);
    padding: 0.4rem;
    margin: 16px 0px;

    p {
      padding: 0;
    }
  }
}