/* Editorial pages use the site's existing type, colour and navigation system. */
.blog-list {
	padding-block: 30px 80px;
}
.blog-entry {
	display: grid;
	grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr);
	gap: 64px;
	padding-block: 48px;
	border-bottom: 1px solid var(--rule);
}
.blog-entry-meta .eyebrow {
	display: block;
	color: var(--teal-dark);
	letter-spacing: .08em;
	margin-bottom: 14px;
}
.blog-entry time {
	font-size: .94rem;
	color: var(--muted);
}
.facade .blog-entry h2 {
	font-size: clamp(1.65rem, 3vw, 2.5rem) !important;
	max-width: 28ch;
	line-height: 1.15;
}
.blog-entry h2 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.blog-entry p {
	max-width: 60ch;
	margin-top: 20px;
	color: var(--muted);
	line-height: 1.7;
}
.blog-read {
	display: inline-block;
	padding-block: 12px;
	margin-top: 16px;
}
.blog-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: .94rem;
	color: var(--dark-muted);
	margin-bottom: 30px;
}
.blog-breadcrumb a {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.blog-hero h1 {
	max-width: 23ch;
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	text-wrap: balance;
}
.blog-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--dark-muted);
	font-size: 1rem;
	margin-top: 28px;
}
.facade .blog-article {
	max-width: 850px;
	padding-block: 64px;
}
.blog-prose {
	font-size: 1.125rem;
	line-height: 1.75;
}
.blog-prose p + p {
	margin-top: 26px;
}
.blog-prose p:first-child {
	font-size: 1.3rem;
	line-height: 1.6;
}
.blog-sources {
	margin-top: 48px;
	padding: 28px;
	background: #eaf0ee;
	border-left: 3px solid var(--teal-dark);
	overflow-wrap: anywhere;
}
.facade .blog-sources h2,
.facade .blog-related h2 {
	font-size: 1.5rem !important;
	line-height: 1.25;
}
.blog-sources ul {
	list-style: disc;
	padding-left: 22px;
	margin-top: 18px;
}
.blog-sources li + li {
	margin-top: 14px;
}
.blog-sources a {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.blog-sources p {
	color: var(--muted);
	font-size: .94rem;
	margin-top: 24px;
}
.blog-discussion {
	margin-top: 32px;
}
.blog-discussion a {
	display: inline-block;
	padding-block: 10px;
}
.blog-related {
	border-top: 1px solid var(--rule);
	padding-block: 40px 64px;
}
.blog-related ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-block: 24px 32px;
}
.blog-related li a {
	display: block;
	padding-block: 12px;
	font-size: 1.1rem;
}
@media (max-width: 767px) {
	.blog-list {
		padding-block: 0 40px;
	}
	.blog-entry {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-block: 36px;
	}
	.blog-entry-meta .eyebrow {
		margin-bottom: 8px;
	}
	.blog-hero h1 {
		font-size: 2.25rem;
	}
	.facade .blog-article {
		padding-block: 40px;
	}
	.blog-prose {
		font-size: 1.0625rem;
	}
	.blog-prose p:first-child {
		font-size: 1.2rem;
	}
	.blog-sources {
		padding: 24px;
	}
	.blog-related ul {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}