.display {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-tight);
	letter-spacing: -0.015em;
	color: var(--color-heading);
}

h1, .h1 {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	line-height: var(--leading-tight);
	letter-spacing: -0.015em;
	color: var(--color-heading);
	margin: 0 0 1rem;
}

h2, .h2 {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	line-height: var(--leading-snug);
	color: var(--color-heading);
	margin: 0 0 0.75rem;
}

h3, .h3 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: var(--leading-snug);
	color: var(--color-heading);
	margin: 0 0 0.5rem;
}

h4, .h4 {
	font-family: var(--font-sans);
	font-size: var(--text-h4);
	font-weight: 600;
	color: var(--color-heading);
	margin: 0 0 0.5rem;
}

.lead {
	font-size: var(--text-body-lg);
	font-weight: 400;
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	max-width: var(--content-width);
}

.text-muted {
	color: var(--color-muted);
}

.text-small {
	font-size: var(--text-small);
}

.text-caption {
	font-size: var(--text-caption);
	letter-spacing: 0.04em;
	font-weight: 600;
	color: var(--color-muted);
}

.prose {
	max-width: var(--content-width);
	color: var(--color-text);
	line-height: var(--leading-relaxed);
	font-size: var(--text-body-lg);
}

.prose h2 {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.prose h3 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.prose p {
	margin: 0 0 1.25rem;
}

.prose ul,
.prose ol {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

.prose li {
	margin-bottom: 0.5rem;
}

.prose blockquote {
	border-left: 2px solid var(--color-primary);
	padding-left: 1.25rem;
	margin: 1.75rem 0;
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	font-weight: 600;
	font-style: italic;
	color: var(--color-heading);
}

.prose img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	margin: 1.5rem 0;
	background: var(--color-surface-muted);
}

.prose a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose a:hover {
	color: var(--color-primary-hover);
}