article {
	background-color: var(--background);
	padding: var(--space-2xl-3xl) var(--space-s);
}

.article {
	max-width: 720px;
	margin-inline: auto;
}

.article .post-meta {
	margin-bottom: var(--space-s-m);
}

.article h1 {
	font-size: var(--step-4);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-s);
}

.article-lead {
	font-size: var(--step-1);
	color: var(--light-grey);
	margin-bottom: var(--space-l);
}

.article-content h2 {
	font-size: var(--step-2);
	font-weight: 600;
	margin: var(--space-l-xl) 0 var(--space-xs);
}

.article-content h3 {
	font-size: var(--step-1);
	font-weight: 600;
	margin: var(--space-m-l) 0 var(--space-2xs);
}

.article-content p {
	margin-bottom: var(--space-s);
	color: var(--secondary);
}

.article-content ul,
.article-content ol {
	margin: 0 0 var(--space-s);
	padding-left: var(--space-s-m);
	list-style: disc;
	display: grid;
	gap: var(--space-3xs);
}

.article-content ol {
	list-style: decimal;
}

.article-content li {
	color: var(--secondary);
}

.article-content li::marker {
	color: var(--light-green);
}

.article-content blockquote {
	margin: var(--space-m-l) 0;
	padding: var(--space-s) var(--space-s-m);
	border-left: 4px solid var(--light-green);
	background-color: var(--tint-green);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: var(--step-0);
	color: var(--secondary);
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-xs);
	font-size: var(--step--1);
	color: var(--light-grey);
	margin-bottom: var(--space-2xs);
}