/*
 * Blog article typography and Rouge syntax highlighting (GitHub light).
 * Scoped to .highlight for code blocks; .prose styles are handled by
 * Tailwind typography plugin on article pages.
 */

.highlight {
  background: #f6f8fa;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Rouge: GitHub light, scoped to .highlight */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #24292f;
  background-color: #f6f8fa;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #cf222e;
}
.highlight .gr { color: #f6f8fa; }
.highlight .gd {
  color: #82071e;
  background-color: #ffebe9;
}
.highlight .nb, .highlight .nc, .highlight .no, .highlight .nn {
  color: #953800;
}
.highlight .sr, .highlight .na, .highlight .nt {
  color: #116329;
}
.highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.highlight .ges { font-weight: bold; font-style: italic; }
.highlight .kc,
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf,
.highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx,
.highlight .sb, .highlight .bp, .highlight .ne, .highlight .nl, .highlight .py,
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm,
.highlight .o, .highlight .ow {
  color: #0550ae;
}
.highlight .gh, .highlight .gu { color: #0550ae; font-weight: bold; }
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd,
.highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #0a3069;
}
.highlight .nd, .highlight .nf, .highlight .fm { color: #8250df; }
.highlight .err { color: #f6f8fa; background-color: #82071e; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp,
.highlight .cpf, .highlight .c1, .highlight .cs,
.highlight .gl, .highlight .gt {
  color: #6e7781;
}
.highlight .ni, .highlight .si { color: #24292f; }
.highlight .ge { color: #24292f; font-style: italic; }
.highlight .gs { color: #24292f; font-weight: bold; }

/* Article typography on blog pages (.prose container) */
.prose h1,
.prose h2,
.prose h3 {
  font-family: "Crimson Pro", Georgia, serif;
}

.prose pre {
  padding: 0;
  background: transparent;
}

/*
 * The article's text (.blog-prose, on top of Tailwind's prose-lg). Crimson Pro
 * reads small, so the text is the size of the rest of the site's (20px), with
 * a calmer rhythm than prose-lg's: tighter lines and gaps, headings in the
 * light weight of the page titles, and the site's rose for links and bullets.
 */
.blog-prose {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #3f3f46;
}
.blog-prose p { margin-top: 0; margin-bottom: 1.1em; }
.blog-prose h2 {
  margin-top: 2.2em;
  margin-bottom: 0.55em;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #18181b;
}
.blog-prose h3 {
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #18181b;
}
.blog-prose h2 + *, .blog-prose h3 + * { margin-top: 0; }
.blog-prose strong { font-weight: 600; color: #18181b; }
.blog-prose a {
  color: #e11d48;
  font-weight: inherit;
  text-decoration-color: rgb(225 29 72 / 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.blog-prose a:hover { text-decoration-color: currentColor; }
.blog-prose ul, .blog-prose ol { margin-top: 0; margin-bottom: 1.2em; padding-left: 1.4em; }
.blog-prose li { margin-top: 0.4em; margin-bottom: 0.4em; padding-left: 0.3em; }
.blog-prose li p { margin: 0; }
.blog-prose ul > li::marker { color: #fb7185; }
.blog-prose ol > li::marker {
  color: #a1a1aa;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8em;
  font-weight: 500;
}
.blog-prose blockquote {
  margin: 1.6em 0;
  padding-left: 1.2em;
  border-left: 2px solid #fda4af;
  font-style: normal;
  color: #52525b;
}
.blog-prose blockquote p::before, .blog-prose blockquote p::after { content: none; }
.blog-prose :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 0.375rem;
  background: #f4f4f5;
  color: #18181b;
  font-size: 0.8em;
  font-weight: 500;
}
.blog-prose :not(pre) > code::before, .blog-prose :not(pre) > code::after { content: none; }
.blog-prose img { border-radius: 0.75rem; }
.blog-prose hr { margin: 2.5em 0; border-color: #e4e4e7; }
/* A closing line in italics ("Last updated …") reads as a note. */
.blog-prose > p:last-child > em:only-child { font-size: 1rem; color: #a1a1aa; }