/* ============================================================
   Article page (single-ldm_article.php, template-parts/article/) -
   one Knowledge Hub article: the hero, the layout with its sticky
   column ("On This Page", "Put it into practice"), the author box and
   "Where to go from here". The prose: article-body.css; the cards of
   "Related Resources": article-card.css. Measured on "Knowledge hub -
   article page v1", desktop 1440 and mobile 402 (vector geometry of
   the PDFs: docs/design-renders/kh-article-*); tablets are not
   designed.
   - Hero: page-hero.php with the article's photo (the About page's
     variant: 466 x 379, radius 20, photo left from 768px) and the class
     page-hero--article: the level badge (25px pill, SemiBold 11) and
     the meta line (Medium 12, 0.025em, Light Orange) 20px apart above
     the H1 (drawn first by `order`: the H1 leads the reading order),
     the by-line "BY SAM MARSLAND" (SemiBold 12, 0.18em, Cream) under
     it; the text centred on the photo from 768px (About: top). Tablets
     (not designed): the photo fills a box as tall as the text block,
     220px at least, instead of standing at its own shape. Phones: the
     meta line under the badge (18px apart), the H1 8px under it, the
     by-line 21px under the H1; from 768px 20 and 15.
   - Body: on White, the main column (865 at 1440) and, from 1024px, a
     column 48px to its right (367 at 1440, 280 at least) that sticks
     under the header, and under the floating header while it shows
     (the listing's rules): 96px above both at 1440 (drawn 96-98), 48 on
     phones; 64 under the author box (drawn 65 desktop, 20 phones).
     Below 1024px "On This Page" comes first, 18px under the hero and
     62 above the article (as drawn), in two columns on tablets
     (proposal); "Put it into practice" is not shown there (as drawn).
   - The sticky column is taller than most laptop windows with a long
     contents list (drawn 1052px). Without JS it scrolls inside itself
     (the listing's way; never overscroll-behavior: contain, so the
     wheel goes on to the page). With JS (assets/js/article.js) a
     column taller than the window scrolls with the page instead, both
     ways, until its far end shows (.is-free): nothing is ever cut off
     and nothing scrolls inside it.
   - "On This Page" and "Put it into practice": Secondary Navy panels,
     radius 20, 41px apart; headings Koulen 32 Cream (caps 48 under the
     top); links SemiBold 16/24 Cream (drawn 20/30; Emma 2026-10-18:
     16px), 12px apart (drawn 10-30: one gap); padding 40 18 52 30 (the
     practice panel 40 at its foot). The
     practice link is drawn Dark Orange (3.31:1 on Secondary Navy, under
     AA; Light Orange text would be 4.42:1): its label Cream here, its
     arrow Light Orange (--article-practice-link, QH5); on hover and focus
     the arrow turns Cream and slides.
   - Author box: Cream, 1px Border Warm, radius 16, 866 x 92 outside at
     1440; a 71px round photo 8px in, the text 20px after it: "WRITTEN
     BY" + the linked name in Koulen 24 (kept on one line), the line
     Regular 16. Phones: 15 in, 13 apart, 28px above and below the text.
   - "Where to go from here": Grey Faint band, the shared section header
     and section padding. A route: from 1024px a White panel (radius 20)
     with a 3px Light Orange left edge (drawn 4), padding 52 35 55; the
     title Koulen --fs-h3, the description 14px under it (10 on phones),
     the columns 30 under that: 333 x 396 drawn, Cream, radius 10, a 25px
     header bar in the level colour (Leadership red for the Leadership
     stages) with the label SemiBold 11 (Navy on the level colours, QH5;
     White on red), cards 22px in, 22 under the bar, 18 apart, 25 above
     the foot; 81px between columns from 1280 with the Light Orange double
     chevron centred (27 x 32), 37px and the phones' 19 x 23 below 1280
     (so three columns fit the panel at 1024). Columns narrow to 256px
     before the row scrolls; below 1024 the row is a swipe carousel (the
     next column peeks) with dots 17.5px under it (the 11px dot 34 under
     the columns, as drawn).
   - The small card (.next-card): 290 x 96 drawn, White, radius 5; the
     photo 97px on the left; "COURSE" (SemiBold 12, 0.18em, Light
     Orange, QH5) and the title (Bold 16/20) centred beside it, 14px in.
     One link (the title, stretched). Hover and focus (not designed; the
     hidden "relevant workshop" layer of the desktop file): a 2px Light
     Orange ring fades in, the title turns deep orange, the photo zooms
     slowly; nothing moves under reduced motion or on touch.
   ============================================================ */

/* ---------- Hero (page-hero.php: .page-hero--article) ---------- */

/* The text column (and the whole hero without a photo) as a column, so
   the badge row, after the H1 in the source, is drawn above it. */
.page-hero.page-hero--article .page-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.page-hero.page-hero--article:not(.page-hero--media) .page-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.page-hero.page-hero--article:not(.page-hero--media) .page-hero__breadcrumb {
	order: -2;
	align-self: stretch;
}

/* Above the H1 (z-index: in Windows High Contrast the H1's text backplate
   would cover a row drawn under it). */
.article-hero__meta {
	position: relative;
	z-index: 1;
	order: -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 20px;
	margin-top: 40px;
}

.page-hero--article:not(.page-hero--media) .article-hero__meta {
	margin-top: 32px;
}

.article-hero__badge {
	display: flex;
	align-items: center;
	height: 25px;
	padding-inline: 10px;
	border-radius: var(--radius-pill);
	color: var(--color-badge-text);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tag);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.article-hero__badge--foundation {
	background-color: var(--color-level-foundation);
}

.article-hero__badge--progression {
	background-color: var(--color-level-progression);
}

.article-hero__badge--development {
	background-color: var(--color-level-development);
}

.article-hero__badge--leadership {
	background-color: var(--color-leadership);
	color: var(--color-badge-text-leadership);
}

.article-hero__badge--all {
	background-color: var(--color-badge-all-levels);
	color: var(--color-badge-all-levels-text);
}

/* Pathway, date, read time; each item kept whole, a long line wraps at the
   bullets. On phones always a line of its own under the badge, as drawn;
   from 768px beside it where it fits. */
.article-hero__meta-line {
	flex-basis: 100%;
	color: var(--color-eyebrow-on-hero);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tag);
	line-height: var(--lh-body);
	text-transform: uppercase;
}

.article-hero__meta-item {
	white-space: nowrap;
}

.page-hero.page-hero--article .page-hero__title {
	max-width: 100%;
	margin-top: 8px;
}

.article-hero__byline {
	margin-top: 21px;
	color: var(--color-text-on-dark);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-eyebrow);
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.page-hero--media .article-hero__meta {
		margin-top: 0;
	}

	.article-hero__meta-line {
		flex-basis: auto;
	}

	.page-hero.page-hero--article .page-hero__title {
		margin-top: 20px;
	}

	.article-hero__byline {
		margin-top: 15px;
	}

	/* The text centred on the photo (drawn within 1px at 1440). */
	.page-hero.page-hero--article .page-hero__split {
		align-items: center;
	}
}

/* Tablets (not designed): the photo never sets the hero's height by its
   own shape (page-hero.css lets it there, for the About page's long
   intro; a portrait cover stood far taller than the few lines beside
   it). Laid over its box, it fills a box as tall as the text block and
   never under 220px, framed by its focus point (page-hero.css). */
@media (min-width: 768px) and (max-width: 1023px) {
	.page-hero.page-hero--article .page-hero__media {
		position: relative;
		align-self: stretch;
		min-height: 220px;
	}

	.page-hero.page-hero--article .page-hero__img {
		position: absolute;
		inset: 0;
	}
}

@media (forced-colors: active) {
	.article-hero__badge {
		outline: var(--border-hairline) solid transparent;
	}
}

/* ---------- Layout: the article and its column ---------- */

.article-content {
	background-color: var(--color-surface);
	color: var(--color-text);
}

.article-layout {
	--article-pad-top: clamp(48px, 29.41px + 4.6243vw, 96px);
	--article-pad-bottom: 64px;
	--article-aside-gap: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-top: var(--article-pad-top);
	padding-bottom: var(--article-pad-bottom);
}

.article-aside {
	min-width: 0;
}

.article-aside__inner {
	display: grid;
	gap: 41px;
}

/* Below 1024px: "On This Page" first, 18px under the hero, the article 62
   under it; no "Put it into practice". */
@media (max-width: 1023px) {
	.article-layout--toc {
		padding-top: 18px;
	}

	.article-layout--toc .article-layout__main {
		margin-top: 62px;
	}

	.article-practice {
		display: none;
	}
}

@media (min-width: 1024px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr) clamp(280px, 25.5vw, var(--article-sidebar-w));
		column-gap: 48px;
	}

	.article-layout__main {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}

	/* The column runs the full height of the article (the grid row), so
	   the panels can stick within it. */
	.article-aside {
		grid-column: 2;
		grid-row: 1;
	}

	.article-aside__inner {
		position: sticky;
		top: calc(var(--toolbar-fixed-h) + var(--article-aside-gap));
		max-height: calc(100vh - var(--toolbar-fixed-h) - 2 * var(--article-aside-gap));
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--color-scrollbar) transparent;
		transition:
			top var(--header-slide-duration) var(--ease-out-cubic),
			max-height var(--header-slide-duration) var(--ease-out-cubic);
	}

	.site-header.is-floating ~ main .article-aside__inner {
		top: calc(var(--toolbar-fixed-h) + var(--header-bar-h) + var(--article-aside-gap));
		max-height: calc(100vh - var(--toolbar-fixed-h) - var(--header-bar-h) - 2 * var(--article-aside-gap));
	}

	/* assets/js/article.js: a column taller than the window travels with
	   the page (its top set as it scrolls), so it needs no scroll of its
	   own - also while the header floats (hence the longer selector). */
	.article-layout .article-aside .article-aside__inner.is-free {
		max-height: none;
		overflow: visible;
		transition: none;
	}
}

/* Reduced motion: the header only fades (header.css), so the column moves
   up only once a leaving header has faded out, and down at once when it
   comes back (as the listing's sidebar). */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	.article-aside__inner {
		transition-property: top, max-height;
		transition-duration: 0s;
		transition-delay: var(--header-slide-duration);
	}

	.site-header.is-floating ~ main .article-aside__inner {
		transition-delay: 0s;
	}
}

/* ---------- On This Page and Put it into practice ---------- */

.article-toc,
.article-practice {
	padding: 40px 18px 52px 30px;
	border-radius: var(--radius-lg);
	background-color: var(--article-sidebar-bg);
	color: var(--article-sidebar-text);
}

.article-practice {
	padding-bottom: 40px;
}

.article-toc__title,
.article-practice__title {
	color: var(--article-sidebar-text);
	font-size: var(--fs-panel-title-sm);
	line-height: 1.25;
}

.article-toc__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.article-toc__item + .article-toc__item {
	margin-top: 12px;
}

/* Plain text links (no arrow): Light Orange and underlined on hover,
   underlined at rest where the pointer cannot hover (CLAUDE.md); Light
   Orange on keyboard focus with the Light Orange ring. */
.article-toc__link {
	color: inherit;
	font-size: var(--fs-toc-link);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	text-decoration: none;
	transition: color var(--transition);
}

.article-toc__link:focus-visible {
	color: var(--color-link-hover-on-dark);
	outline-color: var(--color-focus);
}

@media (hover: hover) {
	.article-toc__link:hover {
		color: var(--color-link-hover-on-dark);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

@media (hover: none) {
	.article-toc__link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

/* Tablets: the list in two columns, to keep the panel short. */
@media (min-width: 768px) and (max-width: 1023px) {
	.article-toc__list {
		columns: 2;
		column-gap: 40px;
	}

	.article-toc__item {
		break-inside: avoid;
		padding-bottom: 12px;
	}

	.article-toc__item + .article-toc__item {
		margin-top: 0;
	}

	.article-toc {
		padding-bottom: 40px;
	}
}

/* The label in Cream, the arrow in Light Orange (plan decision 16: the
   drawn Dark Orange label is 3.31:1 here, Light Orange text 4.42:1, both
   under AA for 16px SemiBold; an arrow needs 3:1). On hover and focus the
   arrow turns Cream and slides (an accent arrow turns Cream, CLAUDE.md). */
.article-practice__link {
	display: inline-block;
	margin-top: 15px;
	color: var(--article-sidebar-text);
	font-size: var(--fs-toc-link);
	line-height: var(--lh-body);
}

/* The arrow rides after the last word (template-parts/article/practice.php),
   10px after it, at the drawn proportion (17 x 9 after the drawn 20px
   label): a 16px box for the 16px label. */
.article-practice__end {
	white-space: nowrap;
}

.article-practice__link .icon {
	width: 16px;
	height: 16px;
	margin: -2px 0 0 10px;
	color: var(--article-practice-link);
}

.article-practice__link:hover .icon,
.article-practice__link:focus-visible .icon {
	color: var(--article-sidebar-text);
}

.article-practice__link:focus-visible {
	outline-color: var(--color-focus);
}

/* Windows High Contrast drops the panels' fills: a hairline keeps their
   box (as .cta-panel's), and the links are underlined. */
@media (forced-colors: active) {
	.article-toc,
	.article-practice {
		outline: var(--border-hairline) solid transparent;
	}

	.article-toc__link {
		text-decoration: underline;
	}
}

/* ---------- Author box ---------- */

.article-author {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 48px;
	padding: 28px 16px 28px 15px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--author-box-bg);
	color: var(--color-text);
}

.article-author__photo {
	flex: none;
	width: 71px;
	height: 71px;
	overflow: hidden;
	border-radius: 50%;
}

.article-author__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.article-author__text {
	min-width: 0;
}

.article-author__title {
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: var(--fs-card-title-lg);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: 1.25;
	text-transform: uppercase;
}

/* The name underlined 1px just under its caps (Koulen's line box runs
   well below them), kept whole: on a narrow phone it moves under
   "Written by" rather than splitting. */
.article-author__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.06em;
	white-space: nowrap;
	transition: color var(--transition);
}

.article-author__link:hover,
.article-author__link:focus-visible {
	color: var(--color-link-hover-on-light);
}

.article-author__link:focus-visible {
	outline-color: var(--color-focus-light);
}

.article-author__line {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

@media (min-width: 768px) {
	.article-author {
		gap: 20px;
		margin-top: 46px;
		padding: 9.5px 24px 9.5px 8px;
	}

	.article-author--no-photo {
		padding-block: 18.5px;
		padding-left: 24px;
	}
}

/* ---------- Where to go from here ---------- */

.article-next {
	background-color: var(--article-next-bg);
	color: var(--color-text);
}

/* "See recommended learning" lands here: clear of the floating header
   while it shows (from below, it comes back as the page scrolls up). */
html:has(.site-header.is-floating) .article-next {
	scroll-margin-top: var(--header-bar-h);
}

.article-pathway {
	--pathway-gap: 37px;
	--pathway-pad: 0px;
	--pathway-chevron: 39.4px; /* the icon's chevrons are 14/24 of its box: 23px tall */
}

.article-pathway__title {
	color: var(--color-heading);
	font-size: var(--fs-h3);
	line-height: 1.2;
	text-wrap: balance;
}

.article-pathway__description {
	margin-top: 10px;
	text-wrap: pretty;
}

.article-pathway__description p + p {
	margin-top: 12px;
}

.article-pathway__carousel {
	margin-top: 30px;
}

/* Full bleed below 1024px, so the columns scroll off the screen's edge; a
   size container, so a column's width follows the visible track. The 8px
   above and below (cancelled by the margins) keep the cards' focus rings
   inside the scroller. */
.article-pathway__viewport {
	container-type: inline-size;
	margin: -8px calc(-1 * var(--gutter));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.article-pathway__viewport::-webkit-scrollbar {
	display: none;
}

/* A tab stop while it scrolls (arrow keys move it): the ring inside. */
.article-pathway__viewport:focus-visible {
	outline-color: var(--color-focus-light);
	outline-offset: -3px;
}

.article-pathway__columns {
	display: flex;
	gap: var(--pathway-gap);
	width: max-content;
	margin: 0;
	padding: 8px var(--gutter);
	list-style: none;
}

/* One snap point per column; the next one peeks 16px or more (17 at
   402). Fixed fallback width for browsers without container units. */
.article-pathway__column {
	--pathway-level: var(--color-level-foundation);
	--pathway-level-text: var(--color-badge-text);
	container: pathway-column / inline-size;
	position: relative;
	display: flex;
	flex: none;
	width: 333px;
	width: min(333px, calc(100cqi - var(--gutter) - var(--pathway-gap) - 16px));
	scroll-snap-align: start;
}

.article-pathway__column--progression {
	--pathway-level: var(--color-level-progression);
}

.article-pathway__column--development {
	--pathway-level: var(--color-level-development);
}

.article-pathway__column--leadership {
	--pathway-level: var(--color-leadership);
	--pathway-level-text: var(--color-badge-text-leadership);
}

.article-pathway__box {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--pathway-column-radius);
	background-color: var(--color-surface-warm);
}

.article-pathway__level {
	display: flex;
	align-items: center;
	min-height: 25px;
	padding: 3px 10px;
	border-radius: var(--pathway-column-radius) var(--pathway-column-radius) 0 0;
	background-color: var(--pathway-level);
	color: var(--pathway-level-text);
	font-family: var(--font-body);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tag);
	line-height: 1.2;
	text-transform: uppercase;
}

.article-pathway__cards {
	display: grid;
	align-content: start;
	gap: 18px;
	margin: 0;
	padding: 22px 22px 25px;
	list-style: none;
}

.article-pathway__card {
	display: grid;
	min-width: 0;
}

/* A narrow column (small phones, 1024-1279 desktops): the cards closer to
   its edges. */
@container pathway-column (width < 300px) {
	.article-pathway__cards {
		padding-inline: 14px;
	}
}

/* The double chevron centred in the gap after each column (not the
   last); decorative, clicks pass through. No max-width: the shrink-to-fit
   span would collapse it. */
.article-pathway__connector {
	position: absolute;
	top: 50%;
	left: calc(100% + var(--pathway-gap) / 2);
	z-index: 2;
	color: var(--color-accent);
	line-height: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.article-pathway__connector .icon {
	width: var(--pathway-chevron);
	max-width: none;
	height: var(--pathway-chevron);
}

/* The dot buttons are 44px tall with the 11px dot centred: the dots sit
   34px under the columns, as drawn. */
.article-pathway__dots {
	margin-top: 17.5px;
	margin-bottom: -16.5px;
}

@media (min-width: 1024px) {
	.article-pathway {
		--pathway-pad: 35px;
		padding: 52px var(--pathway-pad) 55px;
		border-left: var(--border-accent) solid var(--color-accent);
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
	}

	.article-pathway__title {
		line-height: 1.25;
	}

	.article-pathway__description {
		margin-top: 14px;
	}

	/* The row scrolls (when it must) across the panel's whole inner width. */
	.article-pathway__viewport {
		margin-inline: calc(-1 * var(--pathway-pad));
		scroll-padding-inline: var(--pathway-pad);
	}

	.article-pathway__columns {
		padding-inline: var(--pathway-pad);
	}

	/* As drawn (333px) where the row fits, narrower (256 at least) where
	   that lets it fit; --pathway-columns comes from the template. */
	.article-pathway__column {
		width: clamp(256px, calc((100cqi - 2 * var(--pathway-pad) - (var(--pathway-columns, 3) - 1) * var(--pathway-gap)) / var(--pathway-columns, 3)), 333px);
	}
}

/* The drawn gap and chevron (27 x 32) where three columns of 333 nearly
   fit; below 1280 the phones' (37, 19 x 23), so three columns still fit
   the panel at 1024. */
@media (min-width: 1280px) {
	.article-pathway {
		--pathway-gap: 81px;
		--pathway-chevron: 54.9px; /* 32px tall chevrons */
	}
}

/* ---------- The chosen courses and workshops ---------- */

.article-next__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-next__card {
	display: grid;
	min-width: 0;
}

@media (min-width: 768px) {
	.article-next__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	.article-next__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- The small course card (.next-card) ---------- */

.next-card {
	container: next-card / inline-size;
	position: relative;
	display: flex;
	min-height: 96px;
	border-radius: var(--pathway-card-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* The hover ring: its own layer over the card's edge, so nothing moves or
   resizes. */
.next-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 2px solid var(--pathway-ring);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}

/* (Named __photo, not __media: main.css's tablet guard would cap it.) The
   photo fills the card's height, which the text sets (96 at least): laid
   over its box, so a portrait photo never makes the card taller. */
.next-card__photo {
	position: relative;
	order: -1;
	flex: none;
	width: 97px;
	overflow: hidden;
	border-radius: var(--pathway-card-radius) 0 0 var(--pathway-card-radius);
	background-color: var(--color-surface-dark-alt);
	isolation: isolate; /* keeps the zoomed photo inside the corners (Safari) */
}

.next-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
	transition: transform var(--transition-zoom);
}

.next-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--color-surface-dark);
}

.next-card__placeholder .icon {
	width: 32px;
	height: 32px;
}

.next-card__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 10px 14px;
}

.next-card__format {
	order: -1;
	color: var(--color-accent-text-light);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-eyebrow);
	text-transform: uppercase;
}

.next-card__title {
	margin-top: 3.5px;
	color: var(--color-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1.25;
	overflow-wrap: break-word;
}

.next-card__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

/* A narrow card: a narrower photo, so the title keeps room. */
@container next-card (width < 236px) {
	.next-card__photo {
		width: 80px;
	}

	.next-card__text {
		padding-inline: 12px;
	}
}

/* Hover and keyboard focus: the ring, the title in deep orange (4.89:1 on
   White) and, where motion is welcome, the slow zoom. Focus via :has() in
   its own rules (an engine without :has() keeps the hover). */
@media (hover: hover) {
	.next-card:hover::before {
		opacity: 1;
	}

	.next-card:hover .next-card__link {
		color: var(--color-link-hover-on-light);
	}
}

.next-card:has(.next-card__link:focus-visible)::before {
	opacity: 1;
}

.next-card:has(.next-card__link:focus-visible) .next-card__link {
	color: var(--color-link-hover-on-light);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.next-card:hover .next-card__img {
		transform: scale(var(--image-zoom));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.next-card:has(.next-card__link:focus-visible) .next-card__img {
		transform: scale(var(--image-zoom));
	}
}

/* The focus ring goes round the card (the link's stretched ::after). */
.next-card__link:focus-visible {
	outline: none;
}

.next-card__link:focus-visible::after {
	border-radius: var(--pathway-card-radius);
	outline: 2px solid var(--color-focus-light);
	outline-offset: 3px;
}

/* Windows High Contrast: the route's panel, its columns and the small
   cards keep a hairline round them where their fills go (as .cta-panel's),
   the level bar a line under it; the card titles are underlined. */
@media (forced-colors: active) {
	.article-pathway__box,
	.next-card {
		outline: var(--border-hairline) solid transparent;
	}

	.next-card__link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	.article-pathway__level {
		border-bottom: var(--border-hairline) solid var(--color-forced-line);
	}
}

@media (min-width: 1024px) and (forced-colors: active) {
	.article-pathway {
		outline: var(--border-hairline) solid transparent;
	}
}

/* ---------- Related Resources ---------- */

/* Straight after the article (no "Where to go from here" between): the
   White carries on, so the gap above it is one section's padding. */
.article-page__article + .article-related {
	padding-top: max(0px, calc(var(--section-pad-y) - 64px));
}