/*
 * Article body typography.
 *
 * Scoped to .article-prose so it doesn't bleed into the rest of the site.
 * Uses the brand CSS variables defined in input.css.
 * Standalone stylesheet so we don't depend on @tailwindcss/typography.
 */

.article-prose {
  font-family: var(--font-sans);
  color: var(--color-slate-700);
  line-height: 1.75;
  font-size: 1.0625rem;
}

@media (min-width: 640px) {
  .article-prose { font-size: 1.125rem; line-height: 1.75; }
}

.article-prose > * + * { margin-top: 1.25em; }

.article-prose h2 {
  color: var(--color-slate-900);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  margin-top: 2.5em;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}
.article-prose h3 {
  color: var(--color-slate-900);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.4em;
  letter-spacing: -0.005em;
}
.article-prose h4 {
  color: var(--color-slate-900);
  font-weight: 600;
  font-size: 1.125rem;
  margin-top: 1.75em;
  margin-bottom: 0.4em;
}

.article-prose p { margin-top: 1.25em; margin-bottom: 1.25em; }

.article-prose strong { color: var(--color-slate-900); font-weight: 600; }
.article-prose em { color: inherit; }

.article-prose a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  transition: border-color 0.15s ease;
}
.article-prose a:hover {
  border-bottom-color: var(--color-primary);
}

.article-prose ul, .article-prose ol {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1.5em;
}
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose ul ul, .article-prose ol ol, .article-prose ul ol, .article-prose ol ul {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.article-prose li { margin-top: 0.35em; margin-bottom: 0.35em; padding-left: 0.25em; }
.article-prose li::marker { color: var(--color-slate-400); }
.article-prose li p { margin: 0.35em 0; }

.article-prose blockquote {
  margin: 1.5em 0;
  padding: 0.25em 1.25em;
  border-left: 3px solid var(--color-primary);
  color: var(--color-slate-600);
  font-style: italic;
  background: var(--color-slate-50);
  border-radius: 0 4px 4px 0;
}

.article-prose code {
  background: var(--color-slate-100);
  color: var(--color-slate-800);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas, monospace;
}
.article-prose pre {
  background: var(--color-slate-900);
  color: var(--color-slate-100);
  padding: 1em 1.25em;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
  margin: 1.5em 0;
}
.article-prose pre code { background: transparent; color: inherit; padding: 0; }

.article-prose hr {
  border: 0;
  border-top: 1px solid var(--color-slate-200);
  margin: 2.5em 0;
}

.article-prose table {
  width: 100%;
  margin: 1.75em 0;
  border-collapse: collapse;
  font-size: 0.95em;
}
.article-prose thead { background: var(--color-slate-50); }
.article-prose th, .article-prose td {
  text-align: left;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-slate-200);
  vertical-align: top;
}
.article-prose th {
  color: var(--color-slate-900);
  font-weight: 600;
  border-bottom: 2px solid var(--color-slate-300);
}
.article-prose tbody tr:hover { background: var(--color-slate-50); }

.article-prose img, .article-prose figure {
  margin: 1.75em 0;
  border-radius: 8px;
}

/* Headline above the article body — handled at the template level, not by
   the body styles. We do NOT define .article-prose h1 because the template
   renders the title outside the prose container. */