/*
 * Insights: the shared entry component and the templates (DESIGN.md, Insights).
 *
 *   .trail           the path in small capitals on white (Home – Insights – …),
 *                    the current step underlined in gold, as in the page hero
 *   .post-meta       topic · date · reading time, set apart by hairlines
 *   .post-entry      one article in a listing, no box: photograph, meta,
 *                    serif title (one stretched link), excerpt
 *                    --lead  photograph large beside the words
 *                    --entry photograph above the words
 *                    --row   text only, date in the margin, under a rule
 *   .post-grid       entries in rows of three; .post-rows the list
 *   .insights-index  the index (home.php, archive.php, search.php): head,
 *                    then .insights-results (.insights-bar with the
 *                    .topic-filter tabs and the status h2, entries,
 *                    .insights-pages)
 *   .article         the article (single.php) and its prose, including the
 *                    blocks AutoSEO writes (key takeaways, contents, FAQ,
 *                    infographic, video)
 * Component names never match WordPress's body or post classes (the index's
 * body carries "blog", an article "post", "hentry", "category-…").
 * The Posts block composes its own head (blocks/posts.css).
 */
@layer blocks {
	/* ---- Trail ----------------------------------------------------------- */
	.trail__steps {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-1) var(--space-2);
		font-size: var(--type-label-size);
		line-height: var(--type-label-line);
		letter-spacing: var(--type-label-tracking);
		font-weight: 500;
		text-transform: uppercase;
		color: var(--eyebrow);
	}

	.trail__step {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
	}

	/* Comfortable targets without moving the baseline. */
	.trail__link {
		display: inline-block;
		padding-block: var(--space-2);
		margin-block: calc(var(--space-2) * -1);
		color: inherit;
	}

	.trail__current {
		color: var(--heading);
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: var(--rule);
		text-underline-offset: 0.6em;
	}

	.trail__separator {
		color: var(--rule);
	}

	/* ---- Meta line --------------------------------------------------------- */
	.post-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1) var(--space-3);
	}

	.post-meta time {
		color: var(--subtle-foreground);
	}

	.post-meta__divider {
		width: var(--space-4);
		height: var(--border-width);
		background: var(--rule);
	}

	.post-meta__category {
		color: var(--eyebrow);
	}

	.post-meta time {
		white-space: nowrap;
	}

	/* Topic and date stay on one line in the narrower columns. */
	@media (max-width: 79.99rem) {
		.post-entry--entry .post-entry__meta {
			letter-spacing: 0.2em;
		}
	}

	@media (max-width: 39.99rem) {
		.post-entry__meta {
			letter-spacing: 0.2em;
		}
	}

	/* ---- Entry ------------------------------------------------------------- */
	.post-entry {
		position: relative;
		display: grid;
		align-content: start;
	}

	.post-entry__media {
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background: var(--muted);
	}

	.post-entry__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.post-entry__body {
		display: grid;
		align-content: start;
		justify-items: start;
		gap: var(--space-3);
		padding-top: var(--space-5);
	}

	.post-entry__title {
		max-width: 22em;
		font-size: var(--type-editorial-title);
		line-height: var(--type-editorial-line);
		text-wrap: balance;
	}

	.post-entry__link {
		color: inherit;
	}

	/* The whole entry is one target; the title carries the link. */
	.post-entry__link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.post-entry:is(:hover, :focus-within) .post-entry__title {
		color: var(--primary);
	}

	.post-entry__link:focus-visible {
		outline: none;
	}

	.post-entry:has(.post-entry__link:focus-visible) {
		outline: 2px solid var(--ring);
		outline-offset: var(--space-3);
	}

	.post-entry__excerpt {
		max-width: 34rem;
		color: var(--muted-foreground);
	}

	.post-entry__more {
		margin-top: var(--space-2);
	}

	/* Lead: the latest article large, the photograph beside the words. */
	.post-entry--lead .post-entry__media {
		aspect-ratio: 4 / 3;
	}

	.post-entry--lead .post-entry__body {
		gap: var(--space-4);
		padding-top: var(--space-6);
	}

	.post-entry--lead .post-entry__title {
		max-width: 14em;
		font-size: var(--type-h2-size);
		line-height: var(--type-h2-line);
	}

	.post-entry--lead .post-entry__excerpt {
		font-size: var(--type-lead-size);
		line-height: var(--type-lead-line);
	}

	/* Row: text only, under a fine rule. */
	.post-entry--row {
		padding-block: var(--space-8);
		box-shadow: inset 0 1px var(--border);
	}

	.post-entry--row .post-entry__body {
		padding-top: 0;
	}

	.post-entry--row:has(.post-entry__link:focus-visible) {
		outline-offset: 0;
	}

	/* ---- Listings ---------------------------------------------------------- */
	.post-grid {
		display: grid;
		gap: var(--space-12) var(--grid-gap);
	}

	.post-grid__item {
		display: grid;
	}

	.post-rows {
		display: grid;
		box-shadow: inset 0 -1px var(--border);
	}

	/* The lead stands apart from the entries beneath it by a fine rule. */
	.post-lead + .post-grid {
		margin-top: var(--space-16);
		padding-top: var(--space-16);
		box-shadow: inset 0 1px var(--border);
	}

	@media (min-width: 40rem) {
		.post-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.post-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			row-gap: var(--space-16);
		}

		.post-lead + .post-grid {
			margin-top: var(--space-20);
			padding-top: var(--space-20);
		}

		.post-entry--lead {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			align-items: end;
		}

		.post-entry--lead .post-entry__media {
			grid-column: 1 / 8;
		}

		.post-entry--lead .post-entry__body {
			grid-column: 9 / -1;
			padding-top: 0;
			padding-bottom: var(--space-2);
		}

		.post-entry--lead.post-entry--text .post-entry__body {
			grid-column: 1 / 9;
		}

		.post-entry--row {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			padding-block: var(--space-10);
		}

		.post-entry--row .post-entry__body {
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
			align-items: baseline;
		}

		.post-entry--row .post-entry__meta {
			grid-column: 1 / 4;
			grid-row: 1 / 3;
			align-self: start;
			display: grid;
			justify-items: start;
			padding-top: var(--space-2);
		}

		.post-entry--row .post-entry__meta .post-meta__divider {
			display: none;
		}

		.post-entry--row .post-entry__title,
		.post-entry--row .post-entry__excerpt {
			grid-column: 4 / 10;
		}

		.post-entry--row .post-entry__more {
			grid-column: 10 / -1;
			grid-row: 1;
			justify-self: end;
			margin-top: 0;
		}
	}

	/* ---- Insights index -------------------------------------------------------- */
	.insights-index {
		padding-block: var(--space-12) var(--space-section-md);
	}

	.insights-index__head {
		display: grid;
		gap: var(--space-8);
	}

	.insights-index__heading {
		display: grid;
		gap: var(--space-6);
	}

	.insights-index__title {
		max-width: 14em;
		font-size: var(--type-display-size);
		line-height: var(--type-display-line);
	}

	.insights-index__standfirst {
		max-width: 32rem;
	}

	/* The part that changes; filter and pagination links land here (under
	   the fixed header: scroll-padding-top in base.css). */
	.insights-results {
		margin-top: var(--space-12);
	}

	/* ---- Bar: topics and status ---------------------------------------------- */
	/* One row above a hairline: the topics as tabs on the left, set like the
	   main navigation (small capitals); what is shown on the right, quiet.
	   On phones the tabs scroll sideways in one line, edge to edge, and the
	   status follows beneath the hairline. */
	.insights-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		column-gap: var(--space-8);
	}

	.topic-filter {
		flex: 1 1 100%;
		min-width: 0;
		margin-inline: calc(var(--gutter) * -1);
		box-shadow: inset 0 -1px var(--border);
	}

	.topic-filter__list {
		display: flex;
		gap: var(--space-6);
		padding-inline: var(--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.topic-filter__list::-webkit-scrollbar {
		display: none;
	}

	/* More tabs beyond an edge: the row fades out there (insights.js). */
	.topic-filter__list {
		--fade-start: #000;
		--fade-end: #000;

		mask-image: linear-gradient(to right, var(--fade-start), #000 var(--space-12), #000 calc(100% - var(--space-12)), var(--fade-end));
	}

	.topic-filter__list[data-more-start] {
		--fade-start: transparent;
	}

	.topic-filter__list[data-more-end] {
		--fade-end: transparent;
	}

	.topic-filter__item {
		flex: none;
	}

	.topic-filter__link {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: var(--space-12);
		font-size: 0.8125rem;
		line-height: var(--type-button-line);
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		color: var(--muted-foreground);
		transition: color var(--duration-fast) var(--ease-out);
	}

	/* The line sits on the hairline, as a tab's. */
	.topic-filter__link::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: var(--border-width);
		background: var(--primary);
		scale: 0 1;
		transform-origin: 100% 50%;
		transition: scale var(--duration-base) var(--ease-out);
	}

	.topic-filter__link:is(:hover, :focus-visible) {
		color: var(--heading);
	}

	.topic-filter__link:is(:hover, :focus-visible)::after {
		scale: 1 1;
		transform-origin: 0 50%;
	}

	.topic-filter__link[aria-current] {
		color: var(--primary);
	}

	.topic-filter__link[aria-current]::after {
		scale: 1 1;
	}

	.topic-filter__link:focus-visible {
		outline-offset: -2px;
	}

	/* ---- Status ---------------------------------------------------------------- */
	.insights-results__status {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-6);
		margin-top: var(--space-5);
	}

	/* Without topics (search, dates) the status carries the hairline itself. */
	.insights-bar > .insights-results__status:first-child {
		flex: 1 1 100%;
		justify-content: space-between;
		margin-top: 0;
		padding-bottom: var(--space-4);
		box-shadow: inset 0 -1px var(--border);
	}

	.insights-results__title {
		font-family: var(--font-body);
		font-size: var(--type-small-size);
		line-height: var(--type-small-line);
		font-weight: 400;
		color: var(--muted-foreground);
	}

	.insights-results__title:focus {
		outline: none;
	}

	.insights-results__title:focus-visible {
		outline: 2px solid var(--ring);
		outline-offset: var(--space-2);
	}

	.insights-results__reset {
		--arrow-link-pad: var(--space-3);
	}

	.insights-results__description {
		max-width: 40rem;
		margin-top: var(--space-8);
		color: var(--muted-foreground);
	}

	.insights-results__entries {
		margin-top: var(--space-10);
	}

	.insights-results__empty {
		display: grid;
		justify-items: start;
		gap: var(--space-4);
		max-width: 40rem;
		margin-top: var(--space-10);
	}

	.insights-results__empty-text {
		max-width: 36rem;
		color: var(--muted-foreground);
	}

	/* ---- Pagination ------------------------------------------------------------ */
	/* Under a hairline across the content width: Previous on the left, the
	   numbers centred, Next on the right. A missing step leaves its cell
	   empty, so the numbers stay put. */
	.insights-pages {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: var(--space-4);
		margin-top: var(--space-16);
		padding-top: var(--space-4);
		box-shadow: inset 0 1px var(--border);
	}

	.insights-pages__list {
		display: flex;
		align-items: center;
	}

	.insights-pages__number,
	.insights-pages__step {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		font-size: 0.8125rem;
		line-height: var(--type-button-line);
		font-weight: 600;
		letter-spacing: 0.02em;
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);
	}

	.insights-pages__number {
		font-variant-numeric: lining-nums tabular-nums;
		color: var(--muted-foreground);
	}

	.insights-pages__number::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0.625rem;
		width: var(--space-3);
		height: var(--border-width);
		margin-left: calc(var(--space-3) / -2);
		background: var(--primary);
		scale: 0 1;
		transition: scale var(--duration-base) var(--ease-out);
	}

	.insights-pages__number:is(:hover, :focus-visible) {
		color: var(--heading);
	}

	.insights-pages__number:is(:hover, :focus-visible)::after,
	.insights-pages__number[aria-current]::after {
		scale: 1 1;
	}

	.insights-pages__number[aria-current] {
		color: var(--primary);
	}

	.insights-pages__gap {
		min-width: var(--space-6);
		text-align: center;
		color: var(--subtle-foreground);
	}

	.insights-pages__step {
		gap: var(--space-3);
		text-transform: uppercase;
		color: var(--heading);
	}

	.insights-pages__step--prev {
		justify-self: start;
	}

	.insights-pages__step--next {
		justify-self: end;
	}

	.insights-pages__step::before,
	.insights-pages__step::after {
		width: 0.75rem;
		height: 0.625rem;
		background: currentColor;
		mask: var(--icon-arrow) center / contain no-repeat;
		transition: translate var(--duration-base) var(--ease-out);
	}

	a.insights-pages__step--prev::before,
	a.insights-pages__step--next::after {
		content: "";
	}

	.insights-pages__step--prev::before {
		rotate: 180deg;
	}

	a.insights-pages__step:is(:hover, :focus-visible) {
		color: var(--primary);
	}

	.insights-pages__step--prev:is(:hover, :focus-visible)::before {
		translate: calc(var(--space-1) * -1) 0;
	}

	.insights-pages__step--next:is(:hover, :focus-visible)::after {
		translate: var(--space-1) 0;
	}

	/* Narrow phones: the steps keep their arrows, the words go to screen readers. */
	@media (max-width: 29.99rem) {
		.insights-pages__step-text {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
	}

	@media (min-width: 48rem) {
		.topic-filter {
			flex: 0 1 auto;
			margin-inline: 0;
			box-shadow: none;
		}

		.topic-filter__list {
			gap: var(--space-8);
			padding-inline: 0;
			scroll-padding-inline: 0;
		}

		.insights-bar {
			box-shadow: inset 0 -1px var(--border);
		}

		.insights-results__status {
			margin-top: 0;
			margin-left: auto;
		}

		.insights-bar > .insights-results__status:first-child {
			box-shadow: none;
		}
	}

	@media (min-width: 64rem) {
		.insights-index {
			padding-top: var(--space-20);
		}

		.insights-index__head {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			align-items: end;
		}

		.insights-index__heading {
			grid-column: 1 / 8;
			gap: var(--space-8);
		}

		.insights-index__intro {
			grid-column: 9 / -1;
			padding-bottom: var(--space-1);
		}

		.insights-results {
			margin-top: var(--space-16);
		}

		.topic-filter__list {
			gap: var(--space-10);
		}

		.insights-results__entries {
			margin-top: var(--space-14);
		}

		.insights-pages {
			margin-top: var(--space-20);
		}
	}

	/* ---- Article -------------------------------------------------------------- */
	.article {
		padding-block: var(--space-12) var(--space-section-md);
	}

	.article__head {
		display: grid;
		gap: var(--space-6);
	}

	.article__title {
		max-width: 18em;
		font-size: var(--type-display-size);
		line-height: var(--type-display-line);
	}

	.article__standfirst {
		max-width: 40rem;
		font-size: var(--type-lead-size);
		line-height: var(--type-lead-line);
	}

	.article__figure {
		margin-top: var(--space-12);
	}

	.article__media {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--muted);
	}

	.article__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		animation: motion-settle calc(var(--duration-slow) * 1.8) var(--ease-out) both;
	}

	.article__caption {
		margin-top: var(--space-3);
		font-size: var(--type-caption-size);
		line-height: var(--type-caption-line);
		color: var(--muted-foreground);
		text-align: right;
	}

	.article__layout {
		display: grid;
		gap: var(--space-10);
		margin-top: var(--space-12);
	}

	.article__aside {
		display: grid;
		align-content: start;
		justify-items: start;
		gap: var(--space-6);
	}

	/* Facts as in the story block: label over serif value under a fine rule. */
	.article__facts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
		gap: var(--space-6) var(--grid-gap);
		width: 100%;
		margin: 0;
	}

	.article__fact {
		display: grid;
		align-content: start;
		gap: var(--space-2);
		padding-top: var(--space-4);
		box-shadow: inset 0 1px var(--border);
	}

	.article__fact-value {
		margin: 0;
		font-family: var(--font-heading);
		font-size: var(--type-h5-size);
		line-height: var(--type-h5-line);
		color: var(--heading);
	}

	.article__topic {
		color: inherit;
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: var(--rule);
		text-underline-offset: 0.3em;
		transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
	}

	.article__topic:hover {
		color: var(--primary);
		text-decoration-color: currentColor;
	}

	.article__author {
		display: grid;
		gap: var(--space-2);
		padding-top: var(--space-8);
		box-shadow: inset 0 1px var(--hairline);
	}

	.article__author-name {
		font-size: var(--type-editorial-title);
		line-height: var(--type-editorial-line);
	}

	.article__author-bio {
		max-width: 38rem;
		color: var(--muted-foreground);
	}

	@media (min-width: 48rem) {
		.article__media {
			aspect-ratio: 16 / 9;
		}
	}

	@media (min-width: 64rem) {
		.article {
			padding-top: var(--space-20);
		}

		.article__head {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			row-gap: var(--space-8);
		}

		.article__head > * {
			grid-column: 1 / 11;
		}

		.article__standfirst {
			grid-column: 4 / 11;
		}

		.article__figure {
			margin-top: var(--space-16);
		}

		.article__media {
			aspect-ratio: auto;
			height: clamp(28rem, 42vw, 40rem);
		}

		.article__layout {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			row-gap: var(--space-16);
			margin-top: var(--space-20);
		}

		.article__aside {
			grid-column: 1 / 4;
			position: sticky;
			top: calc(var(--header-height) + var(--space-8));
		}

		.article__facts {
			grid-template-columns: none;
		}

		.article__body,
		.article__author {
			grid-column: 4 / 11;
		}
	}
}

/*
 * Article prose, outside the layers on purpose: the block library that
 * WordPress loads for post content is unlayered (e.g. :where(figure) margins,
 * .wp-block-quote, .wp-block-table), and unlayered rules win over any layer.
 * At the same level these rules win by specificity.
 */
/* ---- Article prose ---------------------------------------------------------- */
.article__body {
	max-width: 42rem;
	color: var(--muted-foreground);
}

.article__body > p:first-child {
	font-size: var(--type-lead-size);
	line-height: var(--type-lead-line);
	color: var(--foreground);
}

.article__body > * + * {
	margin-top: var(--space-6);
}

.article__body > :where(h2, h3, h4) {
	margin-top: var(--space-14);
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--heading);
	text-wrap: balance;
}

.article__body > h2 {
	font-size: var(--type-h4-size);
	line-height: var(--type-h4-line);
}

.article__body > :where(h3, h4) {
	font-size: var(--type-h5-size);
	line-height: var(--type-h5-line);
}

.article__body > :where(h2, h3, h4) + * {
	margin-top: var(--space-4);
}

.article__body a {
	color: var(--primary);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.article__body a:hover {
	text-decoration-color: currentColor;
}

.article__body :where(ul, ol) {
	display: grid;
	gap: var(--space-2);
	padding-left: var(--space-6);
}

.article__body ul {
	list-style: none;
	padding-left: var(--space-6);
}

.article__body ul > li {
	position: relative;
}

/* The small centred dot of the dot list. */
.article__body ul > li::before {
	content: "";
	position: absolute;
	top: calc(var(--type-body-line) / 2 - 2px);
	left: calc(var(--space-6) * -1 + var(--space-1));
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--rule);
}

.article__body ol > li::marker {
	font-family: var(--font-heading);
	color: var(--rule);
}

/* A set-apart statement: the serif between gold rules, no box. */
.article__body blockquote {
	margin-block: var(--space-12);
	padding: var(--space-8) 0 0;
	background: none;
	border: 0;
	box-shadow: inset 0 1px var(--rule);
	color: var(--heading);
}

.article__body blockquote p {
	font-family: var(--font-heading);
	font-size: var(--type-statement, 1.5rem);
	line-height: var(--type-statement-line, 2.25rem);
	text-wrap: balance;
}

.article__body blockquote p + p {
	margin-top: var(--space-4);
}

.article__body blockquote cite {
	display: block;
	margin-top: var(--space-5);
	font-family: var(--font-body);
	font-size: var(--type-label-size);
	line-height: var(--type-label-line);
	letter-spacing: var(--type-label-tracking);
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
	color: var(--eyebrow);
}

.article__body :where(figure, .wp-caption) {
	max-width: 100%;
	margin-block: var(--space-12);
}

.article__body img {
	height: auto;
}

.article__body :where(figcaption, .wp-caption-text, .wp-element-caption) {
	margin-top: var(--space-3);
	font-size: var(--type-caption-size);
	line-height: var(--type-caption-line);
	color: var(--muted-foreground);
}

.article__body :where(.alignwide, .alignfull) {
	width: 100%;
}

.article__body .alignleft,
.article__body .alignright {
	max-width: 50%;
	margin-block: var(--space-2) var(--space-6);
}

.article__body .alignleft {
	float: left;
	margin-right: var(--space-8);
}

.article__body .alignright {
	float: right;
	margin-left: var(--space-8);
}

.article__body .aligncenter {
	margin-inline: auto;
}

.article__body::after {
	content: "";
	display: table;
	clear: both;
}

.article__body :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	font-variant-numeric: lining-nums tabular-nums;
}

.article__body :where(.wp-block-table) {
	overflow-x: auto;
}

.article__body :where(th, td) {
	padding: var(--space-3) var(--space-4) var(--space-3) 0;
	text-align: left;
	vertical-align: top;
	box-shadow: inset 0 -1px var(--border);
}

.article__body th {
	font-size: var(--type-label-size);
	line-height: var(--type-label-line);
	letter-spacing: var(--type-label-tracking);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--eyebrow);
	box-shadow: inset 0 -1px var(--rule);
}

.article__body hr {
	width: var(--space-16);
	height: var(--border-width);
	margin-block: var(--space-12);
	border: 0;
	background: var(--rule);
}

.article__body :where(code, kbd) {
	font-size: 0.9em;
	padding: 0.1em 0.3em;
	background: var(--muted);
}

@media (max-width: 39.99rem) {
	.article__body .alignleft,
	.article__body .alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}
}

/* ---- AutoSEO articles -------------------------------------------------------- */
/* Key takeaways: a set-apart summary between fine gold rules, its heading
   as a label. */
.article__body > .key-takeaways {
	margin-block: 0 var(--space-12);
	padding-block: var(--space-6) var(--space-8);
	box-shadow: inset 0 1px var(--rule), inset 0 -1px var(--rule);
}

.article__body > * + .key-takeaways {
	margin-top: var(--space-12);
}

.article__body :is(.key-takeaways, .table-of-contents) > :is(h2, h3, h4) {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--type-label-size);
	line-height: var(--type-label-line);
	letter-spacing: var(--type-label-tracking);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--eyebrow);
}

.article__body .key-takeaways li {
	color: var(--foreground);
}

/* Contents: a quiet numbered list of links. */
.article__body > .table-of-contents {
	margin-block: var(--space-10) var(--space-14);
}

.article__body .table-of-contents ul,
.article__body .table-of-contents ol {
	gap: 0;
	padding-left: 0;
	list-style: none;
	counter-reset: contents;
	box-shadow: inset 0 -1px var(--border);
}

.article__body .table-of-contents li {
	display: grid;
	grid-template-columns: var(--space-10) minmax(0, 1fr);
	align-items: baseline;
	counter-increment: contents;
	box-shadow: inset 0 1px var(--border);
}

.article__body .table-of-contents li::before {
	content: counter(contents, decimal-leading-zero);
	position: static;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	font-size: var(--type-label-size);
	letter-spacing: 0.08em;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--ornament);
}

.article__body .table-of-contents a {
	display: block;
	padding-block: var(--space-3);
	color: var(--foreground);
	text-decoration-color: transparent;
}

.article__body .table-of-contents a:hover {
	color: var(--primary);
	text-decoration-color: currentColor;
}

/* The first paragraph after the summary blocks is the lead. */
.article__body > :is(.key-takeaways, .table-of-contents) ~ p:first-of-type {
	font-size: var(--type-lead-size);
	line-height: var(--type-lead-line);
	color: var(--foreground);
}

/* Old heading anchors keep the heading's look. */
.article__body .autoseo-heading-anchor {
	color: inherit;
	text-decoration: none;
}

/* FAQ: the questions under a fine rule each, the answers beneath. */
.article__body > h2:is([id*="faq"], [id*="frequently-asked"], [id*="haufig"], [id*="haeufig"]) ~ h3 {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	box-shadow: inset 0 1px var(--border);
}

/* Infographic and video across the prose width. */
.article__body .autoseo-infographic-container {
	margin-block: var(--space-12);
	font-family: inherit;
}

.article__body .autoseo-infographic-container img {
	display: block;
	width: 100%;
	height: auto;
}

.article__body .youtube-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	/* AutoSEO sets its spacing inline. */
	margin-block: var(--space-12) !important;
	background: var(--muted);
}

.article__body .youtube-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Wide tables scroll on their own rather than widening the page. */
@media (max-width: 47.99rem) {
	.article__body > table {
		display: block;
		overflow-x: auto;
	}
}