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

.post-tag {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.post-tag + *::before {
	content: "|";
	margin-right: var(--space-xs);
	opacity: 0.3;
}

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-5);
	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);
}

.featured-image {
	margin-bottom: var(--space-l);
	border-radius: var(--radius-sm);
	overflow: clip;
	box-shadow: var(--card-shadow);
}

.featured-image img {
	display: block;
	width: 100%;
	/* Scale from 260px at 320px viewport to 320px at 768px viewport */
	height: clamp(16.25rem, 13.39rem + 13.39vw, 20rem);
	object-fit: cover;
}

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

.article-content h3 {
	font-size: var(--step-1);
	font-weight: 600;
	margin: var(--space-s-m) 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-m);
	list-style: disc;
	display: grid;
	gap: var(--space-2xs);
}

.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-s-m) 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);
}