.single-article__header {
	margin-bottom: 24px;
}

.single-article__title {
	margin-bottom: 0;
	font-size: var(--type-article-title-size);
}

.single-article__content {
	font-size: var(--type-article-body-size);
	line-height: var(--type-article-body-line-height);
}

.single-article__content :where(h2, h3, p, li, a, strong, em, u, span) {
	font-family: var(--font-family-base);
}

.single-article__content p {
	margin-bottom: 22px;
}

.single-article__content blockquote {
	width: min(100%, 680px);
	margin: 28px 0;
	padding: 16px 20px;
	border: 0;
	background: var(--color-surface-muted);
	color: var(--color-ink);
}

.single-article__content blockquote p {
	margin: 0;
}

.single-article__content blockquote p + p {
	margin-top: 8px;
}

.single-article__content h2 {
	margin: var(--type-article-h2-space-before) 0 20px;
	font-size: var(--type-article-h2-size);
	font-weight: var(--font-weight-bold);
}

.single-article__content h3 {
	margin: var(--type-article-h3-space-before) 0 16px;
	padding-left: 16px;
	border-left: 3px solid var(--color-ink);
	font-size: var(--type-article-h3-size);
	font-weight: var(--font-weight-medium);
}

.single-article__content .type-underline {
	padding-inline: 2px;
	background-image: linear-gradient(
		to bottom,
		transparent 58%,
		var(--color-highlight) 58%,
		var(--color-highlight) 92%,
		transparent 92%
	);
	text-decoration: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.single-article__content figure {
	margin: 32px 0;
}

.single-article__content img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.single-article__content blockquote {
		width: 100%;
		margin: 24px 0;
		padding: 14px 16px;
	}
}