/**
 * Hilaal — single bundle.
 *
 * The reading experience: the hero, the article body, the table of contents,
 * sharing, the author box, related posts and comments.
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.chr-article-hero__text {
	max-width: 100%;
	padding-top: clamp(24px, 3vw, 42px);
}

.chr-article-hero--centered .chr-article-hero__text,
.chr-article-hero--standard .chr-article-hero__text {
	max-width: var(--chr-container-narrow);
}

.chr-sidebar-none .chr-article-hero--centered .chr-article-hero__text {
	margin-inline: auto;
	text-align: center;
}

.chr-sidebar-none .chr-article-hero--centered .chr-breadcrumbs__list,
.chr-sidebar-none .chr-article-hero--centered .chr-meta {
	justify-content: center;
}

.chr-article__title {
	margin: .1em 0 .35em;
	font-size: clamp(29px, 4vw, 50px);
	letter-spacing: -.015em;
}

.chr-article__standfirst {
	max-width: 60ch;
	margin: 0 0 18px;
	color: var(--chr-muted);
	font-family: var(--chr-font-heading);
	font-size: clamp(17px, 1.6vw, 21px);
	font-weight: 400;
	line-height: 1.5;
}

.chr-sidebar-none .chr-article-hero--centered .chr-article__standfirst {
	margin-inline: auto;
}

.chr-article__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.chr-sidebar-none .chr-article-hero--centered .chr-article__labels {
	justify-content: center;
}

.chr-article__labels:empty {
	display: none;
}

.chr-article__updated {
	margin: 8px 0 0;
	color: var(--chr-muted);
	font-size: 13px;
}

.chr-article__media {
	margin: 0;
}

/* The lead image is a companion to the headline, not the whole screen: cap it
   so the opening paragraph is reachable without scrolling on a laptop. */

.chr-article__media img {
	width: 100%;
	max-height: min(62vh, 560px);
	object-fit: cover;
	border-radius: var(--chr-radius);
}

.chr-article-hero__wide .chr-article__media img {
	max-height: min(70vh, 640px);
}

.chr-article-hero--magazine .chr-article__media img {
	max-height: none;
	aspect-ratio: 4 / 3;
}

.chr-article__caption,
.chr-article__media figcaption {
	margin: 10px 0 0;
	color: var(--chr-muted);
	font-size: 13px;
	line-height: 1.5;
}

.chr-article-hero__standard,
.chr-article-hero__wide {
	margin-top: 22px;
}

.chr-article-hero__wide .chr-article__media img {
	border-radius: 0;
	max-height: min(74vh, 720px);
	object-fit: cover;
}

.chr-article-hero__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
	padding-block: clamp(24px, 3vw, 42px);
}

/* Cover layout */

.chr-article-hero--cover .chr-article-hero__cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(400px, 62vh, 680px);
	isolation: isolate;
	overflow: hidden;
}

.chr-article-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chr-article-hero--cover .chr-article-hero__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(6, 12, 22, .94) 8%, rgba(6, 12, 22, .5) 55%, rgba(6, 12, 22, .12) 100%);
}

.chr-article-hero__overlay {
	position: relative;
	padding-block: clamp(28px, 4vw, 56px);
	color: #fff;
}

.chr-article-hero__overlay .chr-article__title,
.chr-article-hero__overlay .chr-meta,
.chr-article-hero__overlay .chr-meta a,
.chr-article-hero__overlay .chr-breadcrumbs a,
.chr-article-hero__overlay .chr-breadcrumbs__item {
	color: #fff;
}

.chr-article-hero__overlay .chr-article__standfirst {
	color: rgba(255, 255, 255, .84);
}


/* ==========================================================================
   1b. Article templates
   ========================================================================== */

/* The measure. Three widths cover the twelve templates: the leftover column
   beside a sidebar, a single reading column, and something between the two for
   the templates that set the body against itself. */

.chr-layout--narrow .chr-content > .chr-article,
.chr-sidebar-none .chr-layout--narrow .chr-content > .chr-article {
	max-width: var(--chr-container-narrow);
	margin-inline: auto;
}

.chr-layout--wide .chr-content > .chr-article,
.chr-sidebar-none .chr-layout--wide .chr-content > .chr-article {
	max-width: 1000px;
	margin-inline: auto;
}

/* A rail runs beside the article at reading width and folds above it when there
   is no room, rather than disappearing — on Longform it is the only navigation
   there is. */

.chr-layout--rail {
	grid-template-columns: minmax(0, 1fr);
}

.chr-rail__inner {
	position: sticky;
	top: calc(var(--chr-header-offset, 0px) + 24px);
}

.chr-rail__title {
	margin: 0 0 12px;
	color: var(--chr-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

@media (min-width: 1100px) {
	.chr-layout--rail {
		grid-template-columns: 232px minmax(0, 1fr);
		gap: clamp(28px, 4vw, 56px);
	}

	.chr-layout--rail.chr-layout--narrow .chr-content > .chr-article {
		margin-inline: 0;
	}
}

/* Immersive ---------------------------------------------------------------- */

.chr-article-hero--immersive {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 100svh;
	isolation: isolate;
	color: #fff;
}

/* The image is pinned for the height of the hero and the article sheet travels
   over it. A sticky child and a positive z-index do the whole effect, so there
   is no scroll listener and nothing to judder. */

.chr-article-hero--immersive .chr-article-hero__stage {
	position: sticky;
	top: 0;
	z-index: -1;
	grid-area: 1 / 1;
	height: 100svh;
	overflow: hidden;
}

.chr-article-hero--immersive .chr-article-hero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 12, 22, .92) 4%, rgba(6, 12, 22, .42) 52%, rgba(6, 12, 22, .18) 100%);
}

.chr-article-hero--immersive .chr-article-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chr-article-hero--immersive .chr-article-hero__overlay {
	grid-area: 1 / 1;
	align-self: end;
	padding-bottom: clamp(48px, 8vh, 96px);
	color: #fff;
}

.chr-article-hero--immersive .chr-article__title,
.chr-article-hero--immersive .chr-meta,
.chr-article-hero--immersive .chr-meta a,
.chr-article-hero--immersive .chr-breadcrumbs a,
.chr-article-hero--immersive .chr-breadcrumbs__item {
	color: #fff;
}

.chr-article-hero--immersive .chr-article__title {
	font-size: clamp(34px, 5.4vw, 68px);
	text-wrap: balance;
}

.chr-article-hero--immersive .chr-article__standfirst {
	color: rgba(255, 255, 255, .86);
}

.chr-article-hero__scroll {
	margin: 28px 0 0;
	opacity: .75;
	animation: chr-nudge 2.4s ease-in-out infinite;
}

@keyframes chr-nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
	.chr-article-hero__scroll {
		animation: none;
	}
}

/* The sheet that rises over the image. */

.chr-layout--sheet {
	position: relative;
	z-index: 1;
	margin-top: -40px;
	padding-top: clamp(32px, 5vw, 64px);
	border-radius: 22px 22px 0 0;
	background-color: var(--chr-bg);
	box-shadow: var(--chr-shadow-lg);
}

/* Longform ----------------------------------------------------------------- */

.chr-article-hero--longform {
	background-color: color-mix(in srgb, var(--chr-cat, var(--chr-primary)) 8%, var(--chr-bg));
	border-bottom: 1px solid var(--chr-border);
}

.chr-article-hero__field {
	padding-block: clamp(48px, 8vw, 110px);
}

/* The measure is in ch on the title itself: on the head it would resolve
   against the body size and squeeze an 82px headline into a column. */

.chr-article-hero--longform .chr-article__title {
	max-width: 22ch;
	font-size: clamp(38px, 6.5vw, 82px);
	line-height: 1.02;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.chr-article-hero--longform .chr-article__standfirst {
	max-width: 46ch;
	font-size: clamp(18px, 1.9vw, 24px);
}

.chr-toc--rail {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.chr-toc--rail .chr-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: 2px solid var(--chr-border);
}

.chr-toc--rail .chr-toc__link {
	display: block;
	padding: 7px 0 7px 14px;
	margin-inline-start: -2px;
	border-inline-start: 2px solid transparent;
	color: var(--chr-muted);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}

.chr-toc--rail .chr-toc__item--h3 .chr-toc__link {
	padding-inline-start: 26px;
	font-size: 13px;
}

.chr-toc--rail .chr-toc__link:hover,
.chr-toc--rail .chr-toc__link:focus-visible {
	color: var(--chr-heading);
}

.chr-toc--rail .chr-toc__link.is-current {
	border-inline-start-color: var(--chr-cat, var(--chr-primary));
	color: var(--chr-heading);
	font-weight: 600;
}

/* Gallery ------------------------------------------------------------------ */

.chr-article-gallery {
	position: relative;
	margin-top: 22px;
}

/* A scroll snapping track, not a scripted carousel: a finger, a trackpad and
   the arrow keys all work before any script has run. */

.chr-article-gallery__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-inline: max(var(--chr-gutter), calc((100vw - var(--chr-container)) / 2));
}

.chr-article-gallery__track::-webkit-scrollbar {
	display: none;
}

.chr-article-gallery__slide {
	flex: 0 0 min(100%, var(--chr-container));
	margin: 0;
	scroll-snap-align: center;
}

.chr-article-gallery__image {
	width: 100%;
	height: min(66vh, 620px);
	object-fit: cover;
	border-radius: var(--chr-radius);
}

.chr-article-gallery__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-top: 10px;
	color: var(--chr-muted);
	font-size: 13px;
	line-height: 1.5;
}

.chr-article-gallery__count {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: var(--chr-heading);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.chr-article-gallery__controls {
	position: absolute;
	inset-inline: 0;
	top: min(33vh, 310px);
	display: flex;
	justify-content: space-between;
	padding-inline: max(24px, calc((100vw - var(--chr-container)) / 2 + 16px));
	pointer-events: none;
}

.chr-article-gallery__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--chr-control-height);
	height: var(--chr-control-height);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .92);
	color: var(--chr-heading);
	box-shadow: var(--chr-shadow-md);
	cursor: pointer;
	pointer-events: auto;
}

.chr-article-gallery__button[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Video -------------------------------------------------------------------- */

.chr-article-video {
	background-color: #060c16;
	padding-block: clamp(16px, 2.5vw, 28px);
}

.chr-article-video__frame {
	position: relative;
}

.chr-article-video__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--chr-radius);
	overflow: hidden;
	background-color: #000;
}

.chr-article-video__embed iframe,
.chr-article-video__embed video,
.chr-article-video__embed > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Docked, the frame leaves the flow — so the placeholder keeps its height and
   the page does not jump the moment it detaches. */

.chr-article-video.is-docked .chr-article-video__frame {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 70;
	width: min(360px, calc(100vw - 40px));
	border-radius: var(--chr-radius);
	box-shadow: var(--chr-shadow-lg);
	overflow: hidden;
}

.chr-article-video.is-docked .chr-article-video__embed {
	border-radius: 0;
}

.chr-article-video__close {
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(6, 12, 22, .72);
	color: #fff;
	cursor: pointer;
}

/* Review ------------------------------------------------------------------- */

.chr-verdict {
	display: grid;
	gap: clamp(18px, 3vw, 32px);
	margin-top: 26px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	background-color: var(--chr-surface);
	box-shadow: var(--chr-shadow-sm);
}

@media (min-width: 720px) {
	.chr-verdict:has(.chr-verdict__score) {
		grid-template-columns: 160px minmax(0, 1fr);
		align-items: center;
	}
}

/* The dial is a conic gradient with a disc punched out of the middle: one
   element, no SVG, and the fill is the only thing that changes per post. */

.chr-verdict__score {
	position: relative;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 2px;
	width: 148px;
	height: 148px;
	margin: 0 auto;
	border-radius: 50%;
	background: conic-gradient(var(--chr-cat, var(--chr-primary)) var(--chr-verdict-fill, 0%), var(--chr-border) 0);
	text-align: center;
}

.chr-verdict__score::before {
	content: "";
	position: absolute;
	inset: 11px;
	border-radius: 50%;
	background-color: var(--chr-surface);
}

.chr-verdict__number,
.chr-verdict__outof {
	position: relative;
}

.chr-verdict__number {
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.chr-verdict__outof {
	color: var(--chr-muted);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.chr-verdict__text {
	margin: 0 0 18px;
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 600;
	line-height: 1.4;
}

.chr-verdict__lists {
	display: grid;
	gap: 20px;
}

@media (min-width: 560px) {
	.chr-verdict__lists:has(.chr-verdict__list + .chr-verdict__list) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.chr-verdict__heading {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.chr-verdict__list--pro .chr-verdict__heading {
	color: #15803d;
}

.chr-verdict__list--con .chr-verdict__heading {
	color: #b91c1c;
}

.chr-verdict__list ul {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
}

.chr-verdict__list li {
	position: relative;
	padding-inline-start: 22px;
}

.chr-verdict__list li::before {
	position: absolute;
	inset-inline-start: 0;
	font-weight: 700;
}

.chr-verdict__list--pro li::before {
	content: "+";
	color: #15803d;
}

.chr-verdict__list--con li::before {
	content: "\2212";
	color: #b91c1c;
}

.chr-specs {
	display: grid;
	margin: 0;
	font-size: 14px;
}

.chr-specs__row {
	display: grid;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--chr-border);
}

.chr-specs__row:last-child {
	border-bottom: 0;
}

.chr-specs__label {
	color: var(--chr-muted);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.chr-specs__label:empty {
	display: none;
}

.chr-specs__value {
	margin: 0;
	color: var(--chr-heading);
	font-weight: 600;
	line-height: 1.45;
}

/* Explainer ---------------------------------------------------------------- */

.chr-key-points {
	margin-top: 26px;
	padding: clamp(20px, 3vw, 30px);
	border-inline-start: 4px solid var(--chr-cat, var(--chr-primary));
	border-radius: 0 var(--chr-radius) var(--chr-radius) 0;
	background-color: color-mix(in srgb, var(--chr-cat, var(--chr-primary)) 6%, var(--chr-surface));
}

.chr-key-points__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.chr-key-points__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-key-points__item {
	position: relative;
	padding-inline-start: 26px;
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.55;
}

.chr-key-points__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--chr-cat, var(--chr-primary));
}

/* Numbered sections. The counter sits on the entry, so a heading the editor
   moves renumbers itself and nothing is written into the content. */

.chr-single-explainer .chr-entry {
	counter-reset: chr-section;
}

.chr-single-explainer .chr-entry > h2 {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.chr-single-explainer .chr-entry > h2::before {
	counter-increment: chr-section;
	content: counter(chr-section);
	flex: none;
	display: inline-grid;
	place-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--chr-cat, var(--chr-primary)) 14%, transparent);
	color: var(--chr-cat, var(--chr-primary));
	font-size: .62em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* The contents stay in view on an explainer rather than scrolling off with the
   introduction; that is the whole point of the format. */

@media (min-width: 1000px) {
	.chr-single-explainer .chr-toc {
		position: sticky;
		top: calc(var(--chr-header-offset, 0px) + 24px);
		z-index: 2;
	}
}

/* Newspaper ---------------------------------------------------------------- */

.chr-article-hero--newspaper .chr-article-hero__text {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.chr-article-hero--newspaper .chr-article__labels,
.chr-article-hero--newspaper .chr-meta {
	justify-content: center;
}

.chr-article-hero--newspaper .chr-article__standfirst {
	margin-inline: auto;
}

.chr-article-hero--newspaper .chr-article__title {
	font-family: var(--chr-font-heading);
	font-size: clamp(32px, 5vw, 62px);
	line-height: 1.05;
	text-wrap: balance;
}

.chr-article-hero__rule {
	max-width: 900px;
	margin: 22px auto 14px;
	border-top: 3px double var(--chr-heading);
}

.chr-article__head--dateline .chr-meta {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Columns need width to be worth having, so the count comes from the article's
   own box rather than the window: a sidebar or a narrow container keeps it at
   one. */

.chr-single-newspaper .chr-content {
	container-type: inline-size;
	container-name: chr-measure;
}

@container chr-measure (min-width: 820px) {
	.chr-single-newspaper .chr-entry {
		column-count: 2;
		column-gap: 42px;
		column-rule: 1px solid var(--chr-border);
	}
}

.chr-single-newspaper .chr-entry > figure,
.chr-single-newspaper .chr-entry > blockquote,
.chr-single-newspaper .chr-entry > table,
.chr-single-newspaper .chr-entry > h2,
.chr-single-newspaper .chr-entry > h3 {
	break-inside: avoid;
}

.chr-single-newspaper .chr-entry > h2 {
	break-after: avoid;
}

/* A dropped capital on the opening paragraph, and only where there is enough
   line to set it against. */

@media (min-width: 600px) {
	.chr-single-newspaper .chr-entry > p:first-of-type::first-letter {
		float: inline-start;
		margin: .06em .1em 0 0;
		color: var(--chr-cat, var(--chr-primary));
		font-family: var(--chr-font-heading);
		font-size: 3.6em;
		font-weight: 800;
		line-height: .82;
	}
}

/* Wide --------------------------------------------------------------------- */

.chr-article-hero__dateline {
	margin-top: 16px;
	padding-block: 14px;
	border-block: 1px solid var(--chr-border);
}

.chr-article-hero__dateline .chr-article__head {
	margin: 0;
}

/* ==========================================================================
   2. Article body
   ========================================================================== */

.chr-layout--single {
	padding-top: 30px;
}

.chr-sidebar-none .chr-article,
.chr-sidebar-none .chr-entry--page {
	max-width: var(--chr-container-narrow);
	margin-inline: auto;
}

/* Article rhythm. Sizes come from the typography options rather than being
   hard-coded here, so the panel actually governs the reading experience. */

.chr-entry {
	font-size: var(--chr-font-body-size, 17px);
	line-height: var(--chr-font-body-lh, 1.75);
}

.chr-entry > *:first-child {
	margin-top: 0;
}

.chr-entry > *:last-child {
	margin-bottom: 0;
}

.chr-entry p {
	margin-bottom: 1.5em;
}

.chr-entry h2 {
	margin-top: 1.9em;
	margin-bottom: .55em;
	line-height: 1.22;
}

.chr-entry h3 {
	margin-top: 1.7em;
	margin-bottom: .5em;
	line-height: 1.28;
}

.chr-entry h4 {
	margin-top: 1.5em;
	margin-bottom: .45em;
}

/* A heading immediately after another heading is a subheading, not a new
   section, so it loses the section gap. */
.chr-entry h2 + h3,
.chr-entry h3 + h4 {
	margin-top: .6em;
}

.chr-entry ul,
.chr-entry ol {
	margin-bottom: 1.5em;
	padding-left: 1.35em;
}

.chr-entry li + li {
	margin-top: .4em;
}

.chr-entry li::marker {
	color: var(--chr-muted);
}

.chr-entry figure,
.chr-entry .wp-block-image,
.chr-entry .wp-block-embed,
.chr-entry .wp-block-gallery {
	margin-block: 2em;
}

.chr-entry blockquote,
.chr-entry .wp-block-quote,
.chr-entry .wp-block-pullquote {
	margin-block: 2em;
}

.chr-entry img,
.chr-entry .wp-block-image img {
	border-radius: var(--chr-radius);
}

.chr-entry figure {
	margin-inline: 0;
}

.chr-entry figcaption,
.chr-entry .wp-element-caption {
	margin-top: 10px;
	color: var(--chr-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
}

.chr-entry .alignwide {
	width: min(100vw - (var(--chr-gutter) * 2), calc(var(--chr-container-narrow) + 200px));
	max-width: none;
	margin-inline: auto;
}

.chr-sidebar-none .chr-entry .alignfull {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
}

.chr-entry a:not(.chr-button) {
	text-decoration: underline;
	text-decoration-color: rgb(var(--chr-primary-rgb) / .4);
}

.chr-entry a:not(.chr-button):hover {
	text-decoration-color: currentColor;
}

.chr-entry .wp-block-pullquote,
.chr-entry .wp-block-quote {
	color: var(--chr-heading);
}

.chr-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 32px;
	font-size: 14px;
}

.chr-page-links__label {
	margin-inline-end: 6px;
	color: var(--chr-muted);
}

.chr-page-links a,
.chr-page-links > span:not(.chr-page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	border: 1px solid var(--chr-border);
	border-radius: 6px;
	text-decoration: none;
}

.chr-article__source {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--chr-border);
	color: var(--chr-muted);
	font-size: 14px;
}

/* ==========================================================================
   3. Reading progress
   ========================================================================== */

.chr-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	width: 100%;
	height: 3px;
	background-color: transparent;
	pointer-events: none;
}

.chr-progress__bar {
	height: 100%;
	width: 0;
	background-color: var(--chr-primary);
	transform-origin: left;
	transition: width 80ms linear;
}

/* ==========================================================================
   4. Table of contents
   ========================================================================== */

.chr-toc {
	margin-bottom: 30px;
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	background-color: var(--chr-bg-alt);
}

.chr-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.chr-toc__summary::-webkit-details-marker {
	display: none;
}

.chr-toc__chevron {
	transition: transform var(--chr-transition);
}

.chr-toc__details[open] .chr-toc__chevron {
	transform: rotate(180deg);
}

.chr-toc__list {
	margin: 0;
	padding: 0 18px 16px 34px;
	counter-reset: chr-toc;
}

.chr-toc__item {
	margin: 0;
	padding: 3px 0;
	counter-increment: chr-toc;
	list-style: none;
}

.chr-toc__item::marker {
	content: none;
}

.chr-toc__item--h3 { padding-left: 16px; }
.chr-toc__item--h4 { padding-left: 32px; }

.chr-toc__link {
	position: relative;
	color: var(--chr-text);
	font-size: 15px;
	text-decoration: none;
}

.chr-toc__item--h2 > .chr-toc__link::before {
	content: counter(chr-toc) ".";
	position: absolute;
	left: -22px;
	color: var(--chr-muted);
	font-variant-numeric: tabular-nums;
}

.chr-toc__link:hover,
.chr-toc__link:focus-visible,
.chr-toc__link.is-current {
	color: var(--chr-primary);
}

.chr-toc__link.is-current {
	font-weight: 600;
}

/* ==========================================================================
   5. Sharing
   ========================================================================== */

.chr-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-block: 24px;
}

.chr-share--top {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--chr-border);
}

.chr-share--bottom {
	padding-top: 22px;
	border-top: 1px solid var(--chr-border);
}

.chr-share__title {
	color: var(--chr-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.chr-share__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chr-share__link {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .48em .9em;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	background: none;
	color: var(--chr-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--chr-transition), background-color var(--chr-transition), color var(--chr-transition);
}

.chr-share__link:hover,
.chr-share__link:focus-visible {
	border-color: var(--chr-heading);
	background-color: var(--chr-heading);
	color: var(--chr-bg);
}

.chr-share__link--facebook:hover { border-color: #1877f2; background-color: #1877f2; color: #fff; }
.chr-share__link--x:hover { border-color: #000; background-color: #000; color: #fff; }
.chr-share__link--linkedin:hover { border-color: #0a66c2; background-color: #0a66c2; color: #fff; }
.chr-share__link--whatsapp:hover { border-color: #25d366; background-color: #25d366; color: #fff; }
.chr-share__link--telegram:hover { border-color: #229ed9; background-color: #229ed9; color: #fff; }
.chr-share__link--reddit:hover { border-color: #ff4500; background-color: #ff4500; color: #fff; }
.chr-share__link--pinterest:hover { border-color: #bd081c; background-color: #bd081c; color: #fff; }

.chr-share--floating {
	position: fixed;
	top: 50%;
	left: 16px;
	z-index: 70;
	flex-direction: column;
	margin: 0;
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--chr-transition), visibility var(--chr-transition);
}

.chr-share--floating.is-visible {
	opacity: 1;
	visibility: visible;
}

.chr-share--floating .chr-share__title {
	display: none;
}

.chr-share--floating .chr-share__items {
	flex-direction: column;
	padding: 8px;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	background-color: var(--chr-surface);
	box-shadow: var(--chr-shadow-sm);
}

.chr-share--floating .chr-share__link {
	width: 40px;
	height: 40px;
	padding: 0;
	justify-content: center;
	border-color: transparent;
	font-size: 18px;
}

.chr-share--floating .chr-share__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 1360px) {
	.chr-share--floating {
		display: none;
	}
}

/* ==========================================================================
   6. Tags, author box, navigation
   ========================================================================== */

.chr-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block: 26px;
}

.chr-tags__label {
	color: var(--chr-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.chr-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-tag {
	display: inline-block;
	padding: .32em .8em;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	color: var(--chr-text);
	font-size: 13px;
	text-decoration: none;
}

.chr-tag:hover,
.chr-tag:focus-visible {
	border-color: var(--chr-primary);
	color: var(--chr-primary);
}

.chr-tag::before {
	content: "#";
	opacity: .5;
}

.chr-after-post {
	margin-block: 34px;
}

.chr-author-box {
	display: flex;
	gap: clamp(16px, 2.4vw, 26px);
	margin-block: 40px;
	padding: clamp(20px, 2.6vw, 30px);
	border: 1px solid var(--chr-border);
	border-radius: calc(var(--chr-radius) * 1.3);
	background-color: var(--chr-bg-alt);
}

.chr-author-box__avatar img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
}

.chr-author-box__label {
	margin: 0;
	color: var(--chr-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.chr-author-box__name {
	margin: 2px 0 0;
	font-size: 21px;
}

.chr-author-box__name a {
	color: var(--chr-heading);
	text-decoration: none;
}

.chr-author-box__role {
	margin: 2px 0 0;
	color: var(--chr-primary);
	font-size: 14px;
	font-weight: 600;
}

.chr-author-box__bio {
	margin: 12px 0 0;
	color: var(--chr-muted);
	font-size: 15px;
}

.chr-author-box__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.chr-author-box__more {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.chr-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--chr-gap);
	margin-block: 40px;
	padding-block: 26px;
	border-top: 1px solid var(--chr-border);
	border-bottom: 1px solid var(--chr-border);
}

.chr-post-nav__item--next {
	text-align: right;
}

.chr-post-nav__link {
	display: flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.chr-post-nav__item--next .chr-post-nav__link {
	flex-direction: row-reverse;
}

.chr-post-nav__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.chr-post-nav__image {
	flex: none;
	width: 68px;
	height: 68px;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--chr-bg-alt);
}

.chr-post-nav__image img,
.chr-post-nav__image .chr-thumbnail__fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chr-post-nav__label {
	display: block;
	color: var(--chr-muted);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.chr-post-nav__title {
	display: block;
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.chr-post-nav__link:hover .chr-post-nav__title {
	color: var(--chr-primary);
}

/* ==========================================================================
   7. Related and next prompt
   ========================================================================== */

.chr-related {
	margin-block: 44px;
}

.chr-related__title {
	margin-bottom: 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--chr-border);
	font-size: clamp(20px, 2vw, 26px);
}

.chr-next-prompt {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 96;
	width: min(360px, calc(100vw - 40px));
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	background-color: var(--chr-surface);
	box-shadow: var(--chr-shadow-lg);
	animation: chr-rise 260ms cubic-bezier(.2, .8, .2, 1);
}

.chr-next-prompt[hidden] {
	display: none;
}

.chr-next-prompt__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
}

.chr-next-prompt__media {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--chr-bg-alt);
}

.chr-next-prompt__media img,
.chr-next-prompt__media .chr-thumbnail__fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chr-next-prompt__label {
	margin: 0;
	color: var(--chr-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.chr-next-prompt__title {
	margin: 2px 0 0;
	font-family: var(--chr-font-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.chr-next-prompt__title a {
	color: var(--chr-heading);
	text-decoration: none;
}

.chr-next-prompt__close {
	align-self: flex-start;
	padding: 2px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--chr-muted);
	cursor: pointer;
}

@media (max-width: 780px) {
	.chr-next-prompt {
		right: 12px;
		bottom: 12px;
	}
}

/* ==========================================================================
   8. Lightbox
   ========================================================================== */

.chr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(4, 8, 15, .93);
	animation: chr-fade-in 160ms ease-out;
}

.chr-lightbox[hidden] {
	display: none;
}

.chr-lightbox__image {
	max-width: 100%;
	max-height: 86vh;
	border-radius: 6px;
	object-fit: contain;
}

.chr-lightbox__caption {
	position: absolute;
	right: 24px;
	bottom: 18px;
	left: 24px;
	color: rgba(255, 255, 255, .85);
	font-size: 14px;
	text-align: center;
}

.chr-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}

.chr-entry [data-chr-lightbox-trigger] {
	cursor: zoom-in;
}

/* ==========================================================================
   9. Comments
   ========================================================================== */

.chr-comments {
	margin-top: 48px;
}

.chr-comments__title {
	margin-bottom: 24px;
	font-size: clamp(20px, 2vw, 26px);
}

.chr-comments__list {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.chr-comments__list .children {
	margin: 20px 0 0 clamp(16px, 4vw, 46px);
	padding: 0;
	list-style: none;
}

.chr-comment {
	padding-bottom: 22px;
}

.chr-comment + .chr-comment {
	padding-top: 22px;
	border-top: 1px solid var(--chr-border);
}

.chr-comment__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.chr-comment__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.chr-comment__author {
	display: block;
	color: var(--chr-heading);
	font-weight: 700;
}

.chr-comment__author a {
	color: inherit;
	text-decoration: none;
}

.chr-comment__badge {
	display: inline-block;
	margin-left: 6px;
	padding: .1em .5em;
	border-radius: 4px;
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.chr-comment__date {
	color: var(--chr-muted);
	font-size: 13px;
	text-decoration: none;
}

.chr-comment__content {
	padding-left: 60px;
}

.chr-comment__content > *:last-child {
	margin-bottom: 0;
}

.chr-comment__moderation {
	color: var(--chr-primary);
	font-size: 14px;
	font-style: italic;
}

.chr-comment__footer {
	display: flex;
	gap: 14px;
	margin-top: 10px;
	padding-left: 60px;
	font-size: 14px;
	font-weight: 600;
}

.chr-comment__footer a {
	text-decoration: none;
}

.chr-comments__closed {
	padding: 14px 18px;
	border-radius: var(--chr-radius);
	background-color: var(--chr-bg-alt);
	color: var(--chr-muted);
	font-size: 14px;
}

.chr-comments-placeholder {
	margin-top: 40px;
	text-align: center;
}

.chr-comment-form {
	display: grid;
	gap: 4px;
	margin-top: 30px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--chr-border);
	border-radius: calc(var(--chr-radius) * 1.3);
	background-color: var(--chr-bg-alt);
}

.chr-comment-form__title {
	margin: 0 0 6px;
	font-size: 21px;
}

.chr-comment-form__notes {
	margin: 0 0 14px;
	color: var(--chr-muted);
	font-size: 13px;
}

.chr-comment-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--chr-heading);
	font-size: 14px;
	font-weight: 600;
}

.chr-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.chr-comment-form .comment-form-cookies-consent input {
	width: auto;
}

.chr-comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
	margin-bottom: 14px;
}

@media (min-width: 781px) {
	.chr-comment-form .comment-form-author,
	.chr-comment-form .comment-form-email {
		display: inline-block;
		width: calc(50% - 7px);
	}

	.chr-comment-form .comment-form-author {
		margin-right: 10px;
	}
}

@media (max-width: 560px) {
	.chr-comment__content,
	.chr-comment__footer {
		padding-left: 0;
	}

	.chr-post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.chr-post-nav__item--next {
		text-align: left;
	}

	.chr-post-nav__item--next .chr-post-nav__link {
		flex-direction: row;
	}

	.chr-author-box {
		flex-direction: column;
	}

	.chr-article-hero__split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Out-of-date notice -------------------------------------------------------
   Shown on an article whose expiry has passed and which the desk chose to
   leave published. Amber rather than red: the story is not wrong, it is old. */

.chr-outdated {
	display: flex;
	align-items: flex-start;
	gap: var(--chr-space-xs, 10px);
	margin: 0 0 var(--chr-space-md, 24px);
	padding: var(--chr-space-sm, 14px) var(--chr-space-md, 18px);
	border: 1px solid color-mix(in srgb, #b45309 30%, transparent);
	border-inline-start-width: 3px;
	border-radius: var(--chr-radius, 10px);
	background: color-mix(in srgb, #b45309 7%, var(--chr-surface, #fff));
	color: var(--chr-text, #2b3646);
}

.chr-outdated__icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 2px;
	color: #b45309;
}

.chr-outdated__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.chr-outdated {
		padding: var(--chr-space-xs, 12px);
		font-size: 0.875rem;
	}
}

/* Reading mode -------------------------------------------------------------
   Everything that is not the article goes, the measure narrows to something a
   person can read a line of, and the reader sets the size. Driven entirely by
   one class on the root element, so the state survives a reload without the
   page flashing its full furniture first. */

.chr-reading-start {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 var(--chr-space-sm, 16px);
}

.chr-reading-start__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	background: none;
	color: var(--chr-muted);
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.chr-reading-start__button:hover,
.chr-reading-start__button:focus-visible {
	border-color: var(--chr-primary);
	color: var(--chr-primary);
}

/* The reading view itself */

.chr-reading body {
	background: var(--chr-surface);
}

.chr-reading .chr-header,
.chr-reading .chr-ticker,
.chr-reading .chr-breadcrumbs,
.chr-reading .chr-sidebar,
.chr-reading .chr-footer,
.chr-reading .chr-related,
.chr-reading .chr-comments,
.chr-reading .chr-comments-placeholder,
.chr-reading .chr-post-nav,
.chr-reading .chr-author-box,
.chr-reading .chr-next-prompt,
.chr-reading .chr-ad,
.chr-reading .chr-share,
.chr-reading .chr-toc,
.chr-reading .chr-to-top,
.chr-reading .chr-reading-start {
	display: none !important;
}

.chr-reading .chr-layout--single {
	display: block;
	max-width: min(var(--chr-container-narrow, 760px), 92vw);
	margin-inline: auto;
	padding-top: var(--chr-space-lg, 48px);
	padding-bottom: 96px;
}

.chr-reading .chr-article-hero {
	padding-top: var(--chr-space-md, 32px);
}

.chr-reading .chr-article-hero__text,
.chr-reading .chr-article-hero__standard,
.chr-reading .chr-article-hero .chr-container {
	max-width: min(var(--chr-container-narrow, 760px), 92vw);
}

.chr-reading .chr-entry {
	font-size: calc(1em * var(--chr-reading-scale, 1));
	line-height: 1.75;
}

.chr-reading .chr-entry > * {
	max-width: none;
}

/* The controls */

.chr-reading-hud {
	position: fixed;
	inset: auto 0 20px;
	z-index: 60;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.chr-reading-hud__inner {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	background: var(--chr-surface);
	box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
	pointer-events: auto;
}

.chr-reading-hud__step,
.chr-reading-hud__exit {
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--chr-text);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

.chr-reading-hud__step {
	width: 34px;
	height: 34px;
	line-height: 1;
}

.chr-reading-hud__step:hover,
.chr-reading-hud__exit:hover,
.chr-reading-hud__step:focus-visible,
.chr-reading-hud__exit:focus-visible {
	background: var(--chr-bg-alt);
}

.chr-reading-hud__level {
	min-width: 48px;
	color: var(--chr-muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.chr-reading-hud__exit {
	padding: 0 16px;
	height: 34px;
	color: var(--chr-primary);
	font-weight: 600;
}

@media (max-width: 480px) {
	.chr-reading-hud {
		inset: auto 0 12px;
	}
}

/* Fact check and corrections ------------------------------------------------
   The verdict card is the reader's half of a ClaimReview; the corrections log
   is the public record of what the article got wrong. Both are built from the
   same fields the structured data uses, so they cannot disagree. */

.chr-factcheck {
	--chr-verdict: var(--chr-muted);

	margin: 0 0 var(--chr-space-md, 28px);
	padding: var(--chr-space-sm, 18px) var(--chr-space-md, 22px);
	border: 1px solid var(--chr-border);
	border-inline-start: 4px solid var(--chr-verdict);
	border-radius: var(--chr-radius);
	background: var(--chr-bg-alt);
}

/* The scale is darker than the obvious red-to-green because the badge sets
   white text at 14px bold, which is not "large text" by WCAG and so needs 4.5:1
   rather than 3:1. Every step below clears it: 6.47, 5.18, 4.92, 4.99, 5.02. */

.chr-factcheck--1 { --chr-verdict: #b91c1c; }
.chr-factcheck--2 { --chr-verdict: #c2410c; }
.chr-factcheck--3 { --chr-verdict: #a16207; }
.chr-factcheck--4 { --chr-verdict: #4d7c0f; }
.chr-factcheck--5 { --chr-verdict: #15803d; }

.chr-factcheck__label {
	display: block;
	margin-bottom: 2px;
	color: var(--chr-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.chr-factcheck__claim {
	margin: 0 0 12px;
	font-family: var(--chr-font-heading);
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.45;
}

.chr-factcheck__source {
	margin: -6px 0 12px;
	color: var(--chr-muted);
	font-size: 13px;
}

.chr-factcheck__verdict {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0;
}

.chr-factcheck__verdict .chr-factcheck__label {
	flex: 0 0 100%;
	margin-bottom: 4px;
}

.chr-factcheck__badge {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--chr-verdict);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
}

.chr-factcheck__scale {
	color: var(--chr-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* Corrections */

.chr-corrections {
	margin: var(--chr-space-lg, 44px) 0 0;
	padding: var(--chr-space-sm, 18px) var(--chr-space-md, 22px);
	border: 1px dashed var(--chr-border);
	border-radius: var(--chr-radius);
}

.chr-corrections__title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--chr-muted);
}

.chr-corrections__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-corrections__item {
	padding: 8px 0;
	border-top: 1px solid var(--chr-border);
	font-size: 15px;
	line-height: 1.6;
}

.chr-corrections__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.chr-corrections__date {
	display: block;
	color: var(--chr-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.chr-reading .chr-corrections {
	border-style: solid;
}

/* An automatically inserted internal link ----------------------------------
   Marked so a site can tell it apart from a link a writer put there. */

.chr-entry a.chr-inline-link {
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

/* Collections --------------------------------------------------------------
   The line above an article saying what it is part of, and the previous and
   next parts of a series under it. */

.chr-collection-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 var(--chr-space-sm, 18px);
	padding: 10px 16px;
	border-inline-start: 3px solid var(--chr-primary);
	border-start-end-radius: var(--chr-radius);
	border-end-end-radius: var(--chr-radius);
	background: var(--chr-bg-alt);
	font-size: 0.875rem;
}

.chr-collection-banner__label {
	color: var(--chr-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.chr-collection-banner__name {
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-weight: 700;
	text-decoration: none;
}

.chr-collection-banner__name:hover,
.chr-collection-banner__name:focus-visible {
	color: var(--chr-primary);
}

.chr-collection-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: var(--chr-space-md, 32px) 0 0;
}

.chr-collection-nav__link {
	display: block;
	padding: 14px 18px;
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	text-decoration: none;
	transition: border-color .15s ease;
}

.chr-collection-nav__link:hover,
.chr-collection-nav__link:focus-visible {
	border-color: var(--chr-primary);
}

.chr-collection-nav__link--next {
	text-align: end;
}

.chr-collection-nav__label {
	display: block;
	margin-bottom: 4px;
	color: var(--chr-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.chr-collection-nav__title {
	display: block;
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-weight: 700;
	line-height: 1.35;
}

/* The hub */

.chr-collection-hub {
	margin-top: var(--chr-space-sm, 16px);
}

.chr-collection-hub__state {
	display: inline-block;
	margin: 0 0 10px;
	padding: 2px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--chr-primary) 12%, transparent);
	color: var(--chr-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.chr-collection-hub__state.is-closed {
	background: var(--chr-bg-alt);
	color: var(--chr-muted);
}

.chr-collection-hub__blurb {
	max-width: 60ch;
	margin: 0 0 8px;
	font-family: var(--chr-font-heading);
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.5;
}

.chr-collection-hub__count {
	margin: 0;
	color: var(--chr-muted);
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
	.chr-collection-nav__link {
		transition: none;
	}
}