.prose {
  color: hsl(var(--foreground));
  font-family: var(--font-serif, Georgia, serif);
  line-height: var(--leading-normal);
  max-width: 75ch;
  margin-inline: auto;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-sans);
  line-height: var(--leading-tight);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.prose h1 {
  font-size: var(--text-4xl);
}
.prose h2 {
  font-size: var(--text-3xl);
}
.prose h3 {
  font-size: var(--text-2xl);
}
.prose h4 {
  font-size: var(--text-xl);
}

.prose p {
  margin: var(--space-4) 0;
}
.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: hsl(var(--accent-foreground));
}

/* Don't force link styles inside explicit not-prose blocks (e.g., buttons) */
.prose .not-prose a {
  color: inherit;
  text-decoration: none;
}
.prose .not-prose a:hover {
  color: inherit;
}

.prose ul,
.prose ol {
  margin: var(--space-4) 0 var(--space-6);
  padding-left: var(--space-6);
}
.prose li {
  margin: var(--space-2) 0;
}

.prose blockquote {
  border-left: 4px solid hsl(var(--accent));
  padding-left: var(--space-4);
  color: hsl(var(--muted-foreground));
  margin: var(--space-6) 0;
}

.prose code {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0 0.25em;
  border-radius: var(--radius-sm);
}

.prose pre {
  background: hsl(var(--muted));
  padding: var(--space-4);
  overflow: auto;
  border-radius: var(--radius-md);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
}
.prose th,
.prose td {
  border: 1px solid hsl(var(--border));
  padding: var(--space-3);
  text-align: left;
}
.prose th {
  background: hsl(var(--secondary));
}

.prose figure {
  margin: var(--space-6) 0;
}
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
}
.prose figcaption {
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

@media (max-width: 640px) {
  .prose {
    max-width: 90ch;
  }
  .prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
  }
  .prose th,
  .prose td {
    padding: var(--space-2);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
}