/**
 * Hilaal — core bundle.
 *
 * Loaded on every page. Contains the reset, the design tokens' fallbacks, the
 * layout primitives, and every component that can appear in the header, the
 * footer or a widget area.
 *
 * The token values themselves are generated from the theme options and printed
 * inline by inc/Framework/Dynamic_CSS.php. The fallbacks below keep the theme
 * looking correct if that stylesheet is ever stripped by an optimiser.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--chr-primary: #c8102e;
	--chr-primary-hover: #a00c24;
	--chr-primary-rgb: 200 16 46;
	--chr-on-primary: #ffffff;
	--chr-secondary: #0b1524;
	--chr-accent: #0f766e;
	--chr-on-accent: #ffffff;

	--chr-bg: #ffffff;
	--chr-bg-alt: #f4f6f8;
	--chr-surface: #ffffff;
	--chr-border: #e3e7ec;
	--chr-heading: #0b1524;
	--chr-text: #2b3646;
	--chr-muted: #596980;
	--chr-link: var(--chr-primary);
	--chr-link-hover: var(--chr-secondary);

	--chr-header-bg: #ffffff;
	--chr-header-text: #0b1524;
	--chr-topbar-bg: #0b1524;
	--chr-topbar-text: #dbe2ec;
	--chr-menu-hover: var(--chr-primary);
	--chr-footer-bg: #0b1524;
	--chr-footer-text: #a6b2c4;
	--chr-footer-heading: #ffffff;
	--chr-footer-border: rgba(255, 255, 255, .12);

	--chr-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--chr-font-body-size: 17px;
	--chr-font-body-weight: 400;
	--chr-font-body-lh: 1.7;
	--chr-font-heading: Georgia, "Times New Roman", serif;
	--chr-font-heading-weight: 700;
	--chr-font-heading-lh: 1.18;
	--chr-font-menu: var(--chr-font-body);
	--chr-font-menu-size: 15px;
	--chr-font-menu-weight: 600;
	--chr-font-meta: var(--chr-font-body);
	--chr-font-meta-size: 13px;
	--chr-font-meta-weight: 500;
	--chr-font-category: var(--chr-font-body);
	--chr-font-category-size: 11px;
	--chr-font-category-weight: 700;
	--chr-font-category-ls: .8px;
	--chr-font-category-transform: uppercase;
	--chr-font-button: var(--chr-font-body);
	--chr-font-button-size: 15px;
	--chr-font-button-weight: 600;
	--chr-font-logo: var(--chr-font-heading);
	--chr-font-logo-size: 28px;
	--chr-font-logo-weight: 800;
	--chr-font-widget: var(--chr-font-heading);
	--chr-font-widget-size: 17px;
	--chr-font-widget-weight: 700;

	--chr-h1: var(--chr-font-heading);
	--chr-h1-size: 46px;
	--chr-h1-lh: 1.12;
	--chr-h2: var(--chr-font-heading);
	--chr-h2-size: 34px;
	--chr-h2-lh: 1.18;
	--chr-h3: var(--chr-font-heading);
	--chr-h3-size: 26px;
	--chr-h3-lh: 1.24;
	--chr-h4: var(--chr-font-heading);
	--chr-h4-size: 21px;
	--chr-h4-lh: 1.3;
	--chr-h5: var(--chr-font-heading);
	--chr-h5-size: 18px;
	--chr-h6: var(--chr-font-heading);
	--chr-h6-size: 16px;

	--chr-container: 1280px;
	--chr-container-narrow: 760px;
	--chr-sidebar-width: 30%;
	--chr-header-height: 92px;
	--chr-radius: 10px;
	--chr-module-gap: 56px;
	--chr-control-height: 44px;

	--chr-gutter: 20px;
	--chr-gap: 28px;
	--chr-gap-sm: 16px;
	--chr-shadow-sm: 0 1px 2px rgba(11, 21, 36, .06), 0 2px 8px rgba(11, 21, 36, .04);
	--chr-shadow-md: 0 4px 12px rgba(11, 21, 36, .08), 0 12px 32px rgba(11, 21, 36, .06);
	--chr-shadow-lg: 0 12px 40px rgba(11, 21, 36, .16);
	--chr-transition: 180ms cubic-bezier(.4, 0, .2, 1);
	--chr-header-offset: 0px;
	--chr-cat: var(--chr-primary);
	--chr-cat-contrast: var(--chr-on-primary);
	--chr-cat-rgb: var(--chr-primary-rgb);

	/* Spacing scale. Every gap in the theme is one of these six steps. */
	--chr-space-2xs: 6px;
	--chr-space-xs: 10px;
	--chr-space-sm: 16px;
	--chr-space-md: 24px;
	--chr-space-lg: 40px;
	--chr-space-xl: 64px;
}

[data-theme="dark"] {
	--chr-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
	--chr-shadow-md: 0 6px 20px rgba(0, 0, 0, .5);
	--chr-shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--chr-header-offset) + 24px);
}

body {
	margin: 0;
	background-color: var(--chr-bg);
	color: var(--chr-text);
	font-family: var(--chr-font-body);
	font-size: var(--chr-font-body-size);
	font-weight: var(--chr-font-body-weight);
	line-height: var(--chr-font-body-lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.chr-scroll-locked {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-weight: var(--chr-font-heading-weight);
	line-height: var(--chr-font-heading-lh);
	letter-spacing: var(--chr-font-heading-ls, normal);
}

h1 { font-family: var(--chr-h1); font-size: var(--chr-h1-size); line-height: var(--chr-h1-lh); }
h2 { font-family: var(--chr-h2); font-size: var(--chr-h2-size); line-height: var(--chr-h2-lh); }
h3 { font-family: var(--chr-h3); font-size: var(--chr-h3-size); line-height: var(--chr-h3-lh); }
h4 { font-family: var(--chr-h4); font-size: var(--chr-h4-size); line-height: var(--chr-h4-lh); }
h5 { font-family: var(--chr-h5); font-size: var(--chr-h5-size); }
h6 { font-family: var(--chr-h6); font-size: var(--chr-h6-size); }

p, ul, ol, dl, figure, blockquote, pre, table {
	margin: 0 0 1.4em;
}

a {
	color: var(--chr-link);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--chr-transition);
}

a:hover,
a:focus {
	color: var(--chr-link-hover);
}

img,
picture,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

svg.chr-icon {
	display: inline-block;
	flex: none;
	vertical-align: -.125em;
}

button {
	font: inherit;
	color: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--chr-primary);
	outline-offset: 3px;
	border-radius: 3px;
}

:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
	outline: none;
}

hr {
	height: 1px;
	margin: 2.5em 0;
	border: 0;
	background-color: var(--chr-border);
}

blockquote {
	margin-inline: 0;
	padding: .2em 0 .2em 1.4em;
	border-left: 3px solid var(--chr-primary);
	color: var(--chr-heading);
	font-family: var(--chr-font-heading);
	font-size: 1.14em;
	line-height: 1.5;
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
}

code {
	padding: .12em .4em;
	border-radius: 4px;
	background-color: var(--chr-bg-alt);
}

pre {
	overflow-x: auto;
	padding: 1.2em;
	border-radius: var(--chr-radius);
	background-color: var(--chr-bg-alt);
	tab-size: 2;
}

pre code {
	padding: 0;
	background: none;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: .7em .9em;
	border-bottom: 1px solid var(--chr-border);
	text-align: left;
}

th {
	color: var(--chr-heading);
	font-weight: 600;
}

::selection {
	background-color: rgb(var(--chr-primary-rgb) / .18);
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.chr-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.chr-main {
	flex: 1 0 auto;
}

.chr-container {
	width: min(100% - (var(--chr-gutter) * 2), var(--chr-container));
	margin-inline: auto;
}

.chr-container--wide {
	--chr-container: 1560px;
}

.chr-container--narrow {
	--chr-container: var(--chr-container-narrow);
}

.chr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--chr-gap);
	padding-block: 40px 64px;
}

.chr-sidebar-right .chr-layout:has(.chr-sidebar),
.chr-sidebar-left .chr-layout:has(.chr-sidebar) {
	grid-template-columns: minmax(0, 1fr) var(--chr-sidebar-width);
	gap: clamp(28px, 4vw, 52px);
}

.chr-sidebar-left .chr-layout:has(.chr-sidebar) .chr-content {
	order: 2;
}

.chr-site-boxed .chr-page,
.chr-site-framed .chr-page {
	width: min(100%, calc(var(--chr-container) + 80px));
	margin-inline: auto;
	background-color: var(--chr-bg);
}

.chr-site-framed .chr-page {
	margin-block: 24px;
	border-radius: calc(var(--chr-radius) * 1.6);
	box-shadow: var(--chr-shadow-md);
}

.chr-site-boxed body,
.chr-site-framed body {
	background-color: var(--chr-bg-alt);
}

.chr-grid {
	display: grid;
	gap: var(--chr-gap);
	grid-template-columns: repeat(var(--chr-columns, 3), minmax(0, 1fr));
}

.chr-grid--2 { --chr-columns: 2; }
.chr-grid--3 { --chr-columns: 3; }
.chr-grid--4 { --chr-columns: 4; }
.chr-grid--5 { --chr-columns: 5; }

.chr-skip-link:focus {
	z-index: 999999;
}

/* Sidebar. The sticky option pins the column while the article scrolls past;
   it is only applied where there is room for it, and never on a touch layout
   where the sidebar sits under the content anyway. */

.chr-sidebar {
	min-width: 0;
}

/* Widget spacing comes from `.widget-area .widget + .widget`; adding a gap
   here as well would double it. */
.chr-sidebar__inner {
	min-width: 0;
}

@media (min-width: 1024px) {
	.chr-sticky-sidebar .chr-sidebar__inner {
		position: sticky;
		top: calc(var(--chr-header-offset, 0px) + 24px);
		max-height: calc(100vh - var(--chr-header-offset, 0px) - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.chr-sticky-sidebar .chr-sidebar__inner::-webkit-scrollbar {
		width: 6px;
	}

	.chr-sticky-sidebar .chr-sidebar__inner::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background-color: var(--chr-border);
	}
}

/* Page header ------------------------------------------------------------ */

.chr-page-header {
	padding-block: clamp(24px, 3.4vw, 46px) 0;
}

.chr-page-header__title {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 44px);
}

.chr-page-header.has-image .chr-page-header__media {
	margin-top: clamp(18px, 2.4vw, 30px);
}

.chr-page-header__media img {
	width: 100%;
	max-height: min(52vh, 460px);
	object-fit: cover;
	border-radius: var(--chr-radius);
}

/* ==========================================================================
   4. Buttons, chips and fields
   ========================================================================== */

.chr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: var(--chr-control-height);
	padding: .72em 1.35em;
	border: 1px solid transparent;
	border-radius: calc(var(--chr-radius) - 2px);
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
	font-family: var(--chr-font-button);
	font-size: var(--chr-font-button-size);
	font-weight: var(--chr-font-button-weight);
	letter-spacing: var(--chr-font-button-ls, normal);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--chr-transition), border-color var(--chr-transition), color var(--chr-transition), transform var(--chr-transition);
}

.chr-button:hover,
.chr-button:focus-visible {
	background-color: var(--chr-primary-hover);
	color: var(--chr-on-primary);
}

.chr-button:active {
	transform: translateY(1px);
}

.chr-button--outline {
	background-color: transparent;
	border-color: var(--chr-border);
	color: var(--chr-heading);
}

.chr-button--outline:hover,
.chr-button--outline:focus-visible {
	border-color: var(--chr-primary);
	background-color: transparent;
	color: var(--chr-primary);
}

.chr-button--ghost {
	background-color: var(--chr-bg-alt);
	color: var(--chr-heading);
}

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

.chr-button[disabled],
.chr-button.is-busy {
	opacity: .6;
	pointer-events: none;
}

.chr-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	font-size: 20px;
	cursor: pointer;
	transition: background-color var(--chr-transition), color var(--chr-transition);
}

.chr-icon-button:hover,
.chr-icon-button:focus-visible {
	background-color: rgb(var(--chr-text-rgb, 43 54 70) / .08);
	color: var(--chr-primary);
}

/* Theme toggle. Both icons are in the markup so the swap needs no JavaScript
   and no layout shift; exactly one is ever visible. These rules are duplicated
   into critical.css because the toggle sits above the fold and the main bundle
   is deferred. */

.chr-theme-toggle {
	position: relative;
	overflow: hidden;
}

.chr-theme-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--chr-transition), transform var(--chr-transition);
}

.chr-theme-toggle__sun {
	position: absolute;
	opacity: 0;
	transform: rotate(-45deg) scale(.6);
}

[data-theme="dark"] .chr-theme-toggle__moon {
	opacity: 0;
	transform: rotate(45deg) scale(.6);
	position: absolute;
}

[data-theme="dark"] .chr-theme-toggle__sun {
	position: static;
	opacity: 1;
	transform: none;
}

.chr-chip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .38em .85em;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	color: var(--chr-heading);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--chr-transition), background-color var(--chr-transition), color var(--chr-transition);
}

.chr-chip:hover,
.chr-chip:focus-visible {
	border-color: var(--chr-cat);
	background-color: var(--chr-cat);
	color: var(--chr-cat-contrast);
}

.chr-chip__count {
	opacity: .6;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.chr-field {
	display: flex;
	flex-direction: column;
	gap: .4em;
	margin-bottom: 1.1em;
}

.chr-field label {
	color: var(--chr-heading);
	font-size: 14px;
	font-weight: 600;
}

/* Every control is the same height, so an input and the button beside it line
   up whatever row they land in. */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	min-height: var(--chr-control-height);
	padding: .7em .9em;
	border: 1px solid var(--chr-border);
	border-radius: calc(var(--chr-radius) - 3px);
	background-color: var(--chr-surface);
	color: var(--chr-text);
	font: inherit;
	font-size: 15px;
	transition: border-color var(--chr-transition), box-shadow var(--chr-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--chr-primary);
	box-shadow: 0 0 0 3px rgb(var(--chr-primary-rgb) / .14);
	outline: none;
}

textarea {
	resize: vertical;
}

::placeholder {
	color: var(--chr-muted);
	opacity: 1;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.chr-header {
	position: relative;
	z-index: 60;
	background-color: var(--chr-header-bg);
	color: var(--chr-header-text);
}

.chr-header a {
	color: inherit;
}

.chr-header__row {
	border-bottom: 0 solid var(--chr-border);
}

.chr-header--bordered .chr-header__row + .chr-header__row,
.chr-header--bordered .chr-header__row:last-child {
	border-bottom-width: 1px;
}

.chr-header__row--top {
	background-color: var(--chr-topbar-bg);
	color: var(--chr-topbar-text);
	font-size: 13px;
}

.chr-header__row--top .chr-header__inner {
	min-height: 40px;
}

.chr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chr-gap-sm);
	min-height: 56px;
}

.chr-header__row--main .chr-header__inner {
	min-height: var(--chr-header-height);
	transition: min-height var(--chr-transition);
}

.chr-header__row.has-center .chr-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.chr-header__area {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.chr-header__area--center {
	justify-content: center;
}

.chr-header__area--end {
	justify-content: flex-end;
}

.chr-header__date {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	white-space: nowrap;
}

.chr-header__cta {
	padding: .55em 1.1em;
	font-size: 14px;
}

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

/* Shown only where the desktop menu is hidden. */

.chr-header__mobile-only {
	display: none;
}

@media (max-width: 1023px) {
	.chr-header__mobile-only {
		display: inline-flex;
		align-items: center;
	}
}

/* Sticky behaviour -------------------------------------------------------

   The header sticks as one element, pulled up by the combined height of the
   rows above the chosen start. Making each row sticky instead cannot work: a
   row's containing block is the header, so it stops sticking as soon as the
   header itself has scrolled past — which is exactly what it did before.

   Sticky rather than fixed, so the space stays reserved and nothing shifts. */

.chr-header {
	--chr-sticky-top: 0px;
	--chr-sticky-skip: 0px;
	--chr-sticky-duration: 260ms;
	--chr-sticky-shadow: none;
}

.chr-header[data-sticky]:not([data-sticky="off"]) {
	position: sticky;
	top: calc(var(--chr-sticky-top) - var(--chr-sticky-skip));
	z-index: 60;
	transition:
		transform var(--chr-sticky-duration) cubic-bezier(.4, 0, .2, 1),
		opacity var(--chr-sticky-duration) cubic-bezier(.4, 0, .2, 1),
		box-shadow var(--chr-transition),
		background-color var(--chr-transition);
}

/* The rows above the start scroll away with the page. They are still in the
   header, so they hold their space; only the visible band is pinned. */

.chr-header[data-chr-header] [data-chr-header-scrolls] {
	position: relative;
	z-index: 1;
}

/* The stuck state -------------------------------------------------------- */

.chr-header.is-stuck {
	background-color: var(--chr-sticky-bg, var(--chr-header-bg));
	box-shadow: var(--chr-sticky-shadow);
	border-bottom: var(--chr-sticky-border-width, 0px) solid var(--chr-sticky-border, transparent);
}

.chr-header.is-stuck[data-shadow="soft"] { --chr-sticky-shadow: var(--chr-shadow-sm); }
.chr-header.is-stuck[data-shadow="medium"] { --chr-sticky-shadow: var(--chr-shadow-md); }
.chr-header.is-stuck[data-shadow="strong"] { --chr-sticky-shadow: var(--chr-shadow-lg); }

/* Only composited while it is moving, so the header is not held on its own
   layer for the whole session. */

.chr-header.is-animating {
	will-change: transform, opacity;
}

/* Hidden: pushed clear of the viewport and of the admin bar above it. */

.chr-header.is-hidden[data-sticky-animation="slide"] {
	transform: translate3d(0, calc(-100% - var(--chr-sticky-top)), 0);
}

.chr-header.is-hidden[data-sticky-animation="fade"] {
	opacity: 0;
	pointer-events: none;
}

.chr-header.is-hidden[data-sticky-animation="none"] {
	visibility: hidden;
}

/* A reader who tabs into the header gets it back, whatever the scroll did. */

.chr-header:focus-within {
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Backdrop --------------------------------------------------------------- */

.chr-header.is-stuck.has-translucent {
	background-color: color-mix(in srgb, var(--chr-sticky-bg, var(--chr-header-bg)) var(--chr-sticky-opacity, 100%), transparent);
}

@supports (backdrop-filter: blur(1px)) {
	.chr-header.is-stuck.has-blur {
		backdrop-filter: blur(var(--chr-sticky-blur, 0px)) saturate(1.4);
	}
}

/* Shrink ----------------------------------------------------------------- */

/* The header keeps its full height in the flow while the row inside it
   shrinks. Without that the page would move up by the difference the moment
   the bar sticks, which is a layout shift the reader feels as a jump. */

.chr-header[data-shrink="1"] {
	min-height: var(--chr-header-natural, 0px);
}

.chr-header[data-shrink="1"].is-stuck .chr-header__row--main .chr-header__inner {
	min-height: var(--chr-sticky-height, 66px);
}

.chr-header[data-shrink="1"].is-stuck .chr-logo__image img {
	max-height: calc(var(--chr-sticky-height, 66px) - 22px);
}

/* Sticky colours --------------------------------------------------------- */

.chr-header.is-stuck {
	color: var(--chr-sticky-text, inherit);
}

.chr-header.is-stuck .chr-menu > li > a {
	color: var(--chr-sticky-menu, inherit);
}

.chr-header.is-stuck .chr-menu > li > a:hover,
.chr-header.is-stuck .chr-menu > li > a:focus-visible {
	color: var(--chr-sticky-menu-hover, var(--chr-primary));
}

.chr-header.is-stuck .chr-icon-button {
	color: var(--chr-sticky-icon, inherit);
}

.chr-header.is-stuck .chr-header__cta {
	background-color: var(--chr-sticky-cta-bg, var(--chr-primary));
	color: var(--chr-sticky-cta-text, var(--chr-on-primary));
}

/* Logo swap -------------------------------------------------------------- */

.chr-logo__sticky {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--chr-transition);
}

.chr-header.is-stuck .chr-logo.has-sticky-logo > .chr-logo__image > a:not(.chr-logo__sticky),
.chr-header.is-stuck .chr-logo.has-sticky-logo > .chr-logo__image > .chr-logo__dark {
	opacity: 0;
}

.chr-header.is-stuck .chr-logo.has-sticky-logo .chr-logo__sticky {
	opacity: 1;
	pointer-events: auto;
}

/* Sticky-only elements --------------------------------------------------- */

.chr-header__sticky-only {
	display: none;
}

.chr-header.is-stuck .chr-header__sticky-only {
	display: inline-flex;
}

/* Transparent header ----------------------------------------------------- */

/* Transparent means transparent at the top of the page only: once the bar is
   stuck it has content scrolling under it and needs a surface. */

.chr-header--transparent:not(.is-stuck) {
	position: absolute;
	inset-inline: 0;
	background-color: transparent;
	box-shadow: none;
	border-bottom-color: transparent;
	color: var(--chr-header-transparent-text, #fff);
}

/* Absolute rather than sticky at the top, so the hero starts at the top of the
   page and the header sits over it. The moment it sticks it rejoins the flow
   at its own reserved height, which is why the spacer below exists. */

.chr-header--transparent:not(.is-stuck) .chr-menu > li > a,
.chr-header--transparent:not(.is-stuck) .chr-icon-button,
.chr-header--transparent:not(.is-stuck) .chr-logo__text a {
	color: var(--chr-header-transparent-text, #fff);
}

.chr-header--transparent + .chr-main .chr-hero,
.chr-header--transparent + .chr-main > .chr-module:first-child {
	padding-top: var(--chr-header-offset, 0px);
}

/* The admin bar ---------------------------------------------------------- */

/* WordPress fixes its bar at 32px above 782px and 46px below it, and lets it
   scroll away under 601px — the offsets follow that exactly. */

body.admin-bar {
	--chr-sticky-top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--chr-sticky-top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar {
		--chr-sticky-top: 0px;
	}
}

/* Where sticking is switched off ----------------------------------------- */

.chr-header.is-sticky-disabled {
	position: static;
	transform: none;
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.chr-header[data-sticky]:not([data-sticky="off"]) {
		transition: box-shadow var(--chr-transition), background-color var(--chr-transition);
	}

	.chr-header.is-hidden[data-sticky-animation="slide"],
	.chr-header.is-hidden[data-sticky-animation="fade"] {
		transform: none;
		opacity: 1;
		visibility: hidden;
	}
}

/* A framed page clips its corners, and `hidden` would take the header's
   sticky positioning with it. `clip` clips without creating a scrollport. */

.chr-site-framed .chr-page {
	overflow: clip;
}

/* Logo ------------------------------------------------------------------- */

.chr-logo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* The masthead heading exists for structure, not for style: the logo already
   carries the look, so the h1 adds nothing of its own. */

.chr-logo__heading {
	margin: 0;
	font: inherit;
	line-height: 0;
}

/* Logos are sized by height, the way a masthead is set: a wide wordmark and a
   square mark then sit level with each other, and the width follows the
   artwork rather than squashing it. The width limit is only a guard against a
   logo so wide it would push the rest of the row off the screen. */

.chr-logo__image {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.chr-logo__image > a,
.chr-logo .custom-logo-link {
	display: flex;
	align-items: center;
	line-height: 0;
}

.chr-logo img,
.chr-logo .custom-logo {
	width: auto;
	height: var(--chr-logo-height, 46px);
	max-width: min(var(--chr-logo-width, 420px), 100%);
	object-fit: contain;
	object-position: left center;
}

/* The dark variant is stacked over the light one and swapped by the theme
   attribute. It must out-specify the generic link rule above, or it paints on
   top of the light logo in light mode. */

.chr-logo__image > .chr-logo__dark {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
}

[data-theme="dark"] .chr-logo.has-dark-logo .chr-logo__image > .chr-logo__dark {
	display: flex;
}

/* An SVG with no intrinsic size would otherwise collapse to nothing. */

.chr-logo img[src$=".svg"],
.chr-logo .custom-logo[src$=".svg"] {
	width: auto;
	min-width: var(--chr-logo-height, 46px);
}

[data-theme="dark"] .chr-logo.has-dark-logo .custom-logo-link {
	visibility: hidden;
}



.chr-logo__text {
	margin: 0;
	font-family: var(--chr-font-logo);
	font-size: var(--chr-font-logo-size);
	font-weight: var(--chr-font-logo-weight);
	letter-spacing: var(--chr-font-logo-ls, normal);
	line-height: 1.1;
}

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

.chr-logo__tagline {
	margin: 0;
	color: var(--chr-muted);
	font-size: 12px;
	line-height: 1.3;
}

/* ==========================================================================
   6. Navigation
   ========================================================================== */

.chr-nav {
	min-width: 0;
}

.chr-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-menu-item {
	position: relative;
}

.chr-menu-item__link {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .6em .7em;
	color: inherit;
	font-family: var(--chr-font-menu);
	font-size: var(--chr-font-menu-size);
	font-weight: var(--chr-font-menu-weight);
	letter-spacing: var(--chr-font-menu-ls, normal);
	text-transform: var(--chr-font-menu-transform, none);
	text-decoration: none;
	white-space: nowrap;
}

.chr-menu-item--coloured > .chr-menu-item__link:hover,
.chr-menu-item--coloured > .chr-menu-item__link:focus-visible {
	color: var(--chr-cat);
}

.chr-menu-item > .chr-menu-item__link:hover,
.chr-menu-item > .chr-menu-item__link:focus-visible {
	color: var(--chr-menu-hover);
}

.chr-menu-item__badge {
	padding: .1em .45em;
	border-radius: 999px;
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.chr-menu-item__description {
	display: none;
}

.chr-menu-item__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: -6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 15px;
	cursor: pointer;
}

.chr-menu-item--parent > .chr-menu-item__link::after {
	content: "";
}

.chr-menu-item__toggle .chr-icon {
	transition: transform var(--chr-transition);
}

.chr-menu-item[aria-expanded="true"] > .chr-menu-item__toggle .chr-icon,
.chr-menu-item.is-open > .chr-menu-item__toggle .chr-icon {
	transform: rotate(180deg);
}

/* Indicators */

.chr-menu-underline .chr-nav--primary .chr-menu > .chr-menu-item > .chr-menu-item__link::before {
	content: "";
	position: absolute;
	left: .7em;
	right: .7em;
	bottom: .25em;
	height: 2px;
	background-color: var(--chr-cat, var(--chr-primary));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--chr-transition);
}

.chr-menu-underline .chr-nav--primary .chr-menu > .chr-menu-item:hover > .chr-menu-item__link::before,
.chr-menu-underline .chr-nav--primary .chr-menu > .chr-menu-item.current-menu-item > .chr-menu-item__link::before,
.chr-menu-underline .chr-nav--primary .chr-menu > .chr-menu-item.current-menu-ancestor > .chr-menu-item__link::before {
	transform: scaleX(1);
}

.chr-menu-pill .chr-nav--primary .chr-menu > .chr-menu-item.current-menu-item > .chr-menu-item__link {
	border-radius: 999px;
	background-color: var(--chr-bg-alt);
}

.chr-menu-dot .chr-nav--primary .chr-menu > .chr-menu-item.current-menu-item > .chr-menu-item__link::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--chr-cat, var(--chr-primary));
}

/* Submenus */

.chr-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 70;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	background-color: var(--chr-surface);
	box-shadow: var(--chr-shadow-md);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--chr-transition), transform var(--chr-transition), visibility var(--chr-transition);
}

.chr-submenu .chr-submenu {
	top: -9px;
	left: 100%;
}

.chr-menu-item:hover > .chr-submenu,
.chr-menu-item:focus-within > .chr-submenu,
.chr-menu-item.is-open > .chr-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.chr-submenu .chr-menu-item__link {
	display: flex;
	width: 100%;
	padding: .5em .7em;
	border-radius: 6px;
	white-space: normal;
}

.chr-submenu .chr-menu-item__link:hover,
.chr-submenu .chr-menu-item__link:focus-visible {
	background-color: var(--chr-bg-alt);
}

.chr-submenu .chr-menu-item--parent > .chr-menu-item__toggle {
	position: absolute;
	top: .55em;
	right: .4em;
	transform: rotate(-90deg);
}

/* Mega menu */

.chr-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 70;
	width: 100vw;
	max-width: 100vw;
	padding: 26px 0 30px;
	border-top: 2px solid var(--chr-cat, var(--chr-primary));
	background-color: var(--chr-surface);
	box-shadow: var(--chr-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity var(--chr-transition), transform var(--chr-transition), visibility var(--chr-transition);
}

.chr-menu-item--mega:hover > .chr-mega,
.chr-menu-item--mega:focus-within > .chr-mega,
.chr-menu-item--mega.is-open > .chr-mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.chr-mega__inner {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.chr-mega__inner:only-child,
.chr-mega__inner:not(:has(.chr-mega__sections)) {
	grid-template-columns: minmax(0, 1fr);
}

.chr-mega__heading {
	margin-bottom: .8em;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.chr-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.chr-mega__list a {
	display: block;
	padding: .4em .6em;
	border-radius: 6px;
	color: var(--chr-text);
	font-size: 15px;
	text-decoration: none;
}

.chr-mega__list a:hover,
.chr-mega__list a:focus-visible {
	background-color: var(--chr-bg-alt);
	color: var(--chr-cat, var(--chr-primary));
}

.chr-mega__posts {
	display: grid;
	grid-template-columns: repeat(var(--chr-mega-columns, 4), minmax(0, 1fr));
	gap: 22px;
}

/* ==========================================================================
   7. Ticker
   ========================================================================== */

.chr-ticker {
	background-color: var(--chr-bg-alt);
	border-bottom: 1px solid var(--chr-border);
	font-size: 14px;
}

.chr-ticker__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 46px;
}

.chr-ticker__label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	flex: none;
	padding: .35em .85em;
	border-radius: 4px;
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
	font-family: var(--chr-font-category);
	font-size: var(--chr-font-category-size);
	font-weight: var(--chr-font-category-weight);
	letter-spacing: var(--chr-font-category-ls);
	text-transform: var(--chr-font-category-transform);
}

.chr-ticker__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
	animation: chr-pulse 1.8s ease-in-out infinite;
}

@keyframes chr-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

.chr-ticker__viewport {
	position: relative;
	flex: 1 1 auto;
	height: 24px;
	overflow: hidden;
}

.chr-ticker__list {
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
}

.chr-ticker__item {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 24px;
	white-space: nowrap;
	overflow: hidden;
}

.chr-ticker__item a {
	/* min-width:0 is what lets a flex child shrink far enough to ellipsis. */
	min-width: 0;
	overflow: hidden;
	color: var(--chr-heading);
	font-weight: 600;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.chr-ticker__time {
	flex: none;
	color: var(--chr-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.chr-ticker__controls {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
}

.chr-ticker__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--chr-muted);
	font-size: 16px;
	cursor: pointer;
}

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

.chr-ticker__pause-icon {
	width: 8px;
	height: 10px;
	border-left: 2.5px solid currentColor;
	border-right: 2.5px solid currentColor;
}

[data-chr-ticker-pause][aria-pressed="true"] .chr-ticker__pause-icon {
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-left: 9px solid currentColor;
}

/* ==========================================================================
   8. Cards
   ========================================================================== */

/* Cards make their whole surface clickable by stretching the headline's own
   link across them. One link per card keeps the markup valid and stops screen
   readers announcing the same story twice; the badge and the meta links sit
   above it so they stay independently clickable. */

/* One card, nine variants, one set of rules. Every variant is the same three
   parts — media, body, footer — differing only in the tokens below, so a row of
   cards agrees on its line counts and on where the byline sits however long the
   headlines are. */

.chr-card {
	--chr-card-title-size: clamp(18px, 1.35vw, 21px);
	--chr-card-title-leading: 1.3;
	--chr-card-title-lines: 2;
	--chr-card-excerpt-lines: 3;
	--chr-card-title-reserve: calc(var(--chr-card-title-lines) * var(--chr-card-title-leading) * 1em);
	--chr-card-excerpt-leading: 1.6;
	--chr-card-excerpt-reserve: 0px;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	/* Fills its grid row, which is what keeps a row of cards the same height. */
	height: 100%;
}

.chr-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.chr-card__badge,
.chr-card__tags,
.chr-card .chr-meta,
.chr-card__more {
	position: relative;
	z-index: 1;
}

/* Section and flags on one line, wherever the pair ends up. */

.chr-card__badge,
.chr-card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.chr-card__media {
	display: block;
	position: relative;
	/* Never squeezed by a long headline: the ratio is the ratio. */
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--chr-radius);
	background-color: var(--chr-bg-alt);
}

.chr-thumbnail {
	--chr-thumb-ratio: 16 / 9;
}

.chr-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.2, .6, .2, 1);
}

.chr-thumbnail.is-ratio-16-9 { --chr-thumb-ratio: 16 / 9; }
.chr-thumbnail.is-ratio-3-2 { --chr-thumb-ratio: 3 / 2; }
.chr-thumbnail.is-ratio-4-3 { --chr-thumb-ratio: 4 / 3; }
.chr-thumbnail.is-ratio-1-1 { --chr-thumb-ratio: 1 / 1; }

.chr-thumbnail.is-ratio-16-9 img { aspect-ratio: 16 / 9; }
.chr-thumbnail.is-ratio-3-2 img { aspect-ratio: 3 / 2; }
.chr-thumbnail.is-ratio-4-3 img { aspect-ratio: 4 / 3; }
.chr-thumbnail.is-ratio-1-1 img { aspect-ratio: 1 / 1; }

/* A post with no usable image still gets a card of the same weight as its
   neighbours, branded with its section colour. */

.chr-thumbnail__fallback {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	aspect-ratio: var(--chr-thumb-ratio, 16 / 9);
	overflow: hidden;
	background-color: var(--chr-cat, var(--chr-primary));
	background-image:
		radial-gradient(120% 140% at 82% 12%, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / 0) 58%),
		linear-gradient(150deg, rgb(var(--chr-cat-rgb) / .92) 0%, rgb(11 21 36 / .94) 92%);
}

.chr-thumbnail__fallback::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		var(--chr-fallback-angle, 125deg),
		rgb(255 255 255 / .07) 0 2px,
		transparent 2px 22px
	);
}

/* Four stable variations, chosen from the post id, so a column of posts with
   no images does not turn into repeating wallpaper. */

.chr-thumbnail--fallback[data-variant="1"] .chr-thumbnail__fallback {
	--chr-fallback-angle: 55deg;
	background-image:
		radial-gradient(110% 130% at 18% 84%, rgb(255 255 255 / .2) 0%, rgb(255 255 255 / 0) 60%),
		linear-gradient(28deg, rgb(var(--chr-cat-rgb) / .9) 0%, rgb(11 21 36 / .95) 88%);
}

.chr-thumbnail--fallback[data-variant="2"] .chr-thumbnail__fallback {
	--chr-fallback-angle: 100deg;
	background-image:
		radial-gradient(90% 120% at 50% 6%, rgb(255 255 255 / .24) 0%, rgb(255 255 255 / 0) 62%),
		linear-gradient(196deg, rgb(var(--chr-cat-rgb) / .86) 0%, rgb(11 21 36 / .96) 90%);
}

.chr-thumbnail--fallback[data-variant="3"] .chr-thumbnail__fallback {
	--chr-fallback-angle: 160deg;
	background-image:
		radial-gradient(120% 150% at 88% 90%, rgb(255 255 255 / .2) 0%, rgb(255 255 255 / 0) 55%),
		linear-gradient(315deg, rgb(var(--chr-cat-rgb) / .88) 0%, rgb(11 21 36 / .95) 86%);
}

.chr-thumbnail__monogram {
	position: relative;
	z-index: 1;
	color: rgb(255 255 255 / .18);
	font-family: var(--chr-font-heading);
	font-size: clamp(30px, 20cqi, 78px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	user-select: none;
}

.chr-card__media,
.chr-mini-card__media {
	container-type: inline-size;
}

.chr-card:hover .chr-card__media img {
	transform: scale(1.04);
}

.chr-card__badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	inset-inline-end: 12px;
	/* Anchored to one edge; the other only exists so a long section name wraps
	   instead of running off the image. */
	justify-content: flex-start;
}

.chr-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	/* Takes the height the media leaves, so the footer below can sink. */
	flex: 1 1 auto;
}

/* The byline is pinned to the bottom of the body: cards in a row then agree on
   where it sits regardless of how many lines the title and excerpt took. */

.chr-card__body > .chr-meta,
.chr-card__body > .chr-card__more {
	margin-top: auto;
}

/* When both are present they travel as a pair rather than splitting the gap. */
.chr-card__body > .chr-meta ~ .chr-card__more {
	margin-top: 0;
}

/* Titles are clamped to a fixed number of lines and reserve that space whether
   they use it or not, so a two-word headline and a twelve-word one push the
   text beneath them to exactly the same place. */

.chr-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--chr-card-title-lines);
	line-clamp: var(--chr-card-title-lines);
	overflow: hidden;
	margin: 0;
	min-height: var(--chr-card-title-reserve);
	font-size: var(--chr-card-title-size);
	line-height: var(--chr-card-title-leading);
	overflow-wrap: break-word;
}

.chr-card__title a {
	color: var(--chr-heading);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 0 100%;
	transition: background-size 260ms cubic-bezier(.4, 0, .2, 1), color var(--chr-transition);
}

.chr-card__title a:hover,
.chr-card__title a:focus-visible {
	background-size: 100% 1px;
	color: var(--chr-cat, var(--chr-primary));
}

.chr-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--chr-card-excerpt-lines);
	line-clamp: var(--chr-card-excerpt-lines);
	overflow: hidden;
	margin: 0;
	min-height: var(--chr-card-excerpt-reserve);
	color: var(--chr-muted);
	font-size: 15px;
	line-height: var(--chr-card-excerpt-leading);
	overflow-wrap: break-word;
}

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

/* The size scale. Each step sets the headline size and how many lines the
   headline and the excerpt are allowed — nothing else changes. */

.chr-card--size-large {
	--chr-card-title-size: clamp(24px, 2.6vw, 36px);
	--chr-card-title-leading: 1.16;
	--chr-card-title-lines: 3;
	--chr-card-excerpt-lines: 3;
}

.chr-card--size-small {
	--chr-card-title-size: 16px;
	--chr-card-title-lines: 2;
	--chr-card-excerpt-lines: 2;
}

/* List variant */

/* Row variants: media beside the text. They sit in stacks rather than rows, so
   they take their natural height instead of filling a grid cell. */

.chr-card--list,
.chr-card--compact {
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
	height: auto;
}

.chr-card--list .chr-card__media {
	flex: 0 0 clamp(140px, 32%, 280px);
	align-self: flex-start;
}

.chr-card--compact .chr-card__media {
	flex: 0 0 92px;
	align-self: flex-start;
}

.chr-card--compact {
	--chr-card-title-size: 16px;
	--chr-card-title-lines: 2;
	--chr-card-excerpt-lines: 2;
}

.chr-card--list {
	--chr-card-excerpt-lines: 2;
}

/* Reserved headline space only earns its keep where cards sit side by side. In
   a stack, and on an overlay card whose text hugs the lower edge, it would just
   be a hole under the headline. */

.chr-card--list,
.chr-card--compact {
	--chr-card-title-reserve: 0;
}

/* An overlay card holds its text against the lower edge, so the block above the
   byline has to be a fixed height for a row of them to start their headlines on
   the same line. Both parts reserve their space here. */

.chr-card--overlay {
	--chr-card-excerpt-reserve: calc(var(--chr-card-excerpt-lines) * var(--chr-card-excerpt-leading) * 1em);
}

.chr-card--list .chr-card__body,
.chr-card--compact .chr-card__body {
	flex: 1 1 auto;
}

/* Overlay variant */

.chr-card--overlay {
	position: relative;
	justify-content: flex-end;
	min-height: 260px;
	padding: 22px;
	border-radius: var(--chr-radius);
	overflow: hidden;
	isolation: isolate;
}

.chr-card--overlay .chr-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: 0;
	container-type: normal;
}

.chr-card--overlay .chr-card__media img,
.chr-card--overlay .chr-thumbnail__fallback {
	aspect-ratio: auto;
	height: 100%;
}

.chr-card--overlay .chr-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 12, 22, .92) 0%, rgba(6, 12, 22, .55) 42%, rgba(6, 12, 22, .05) 100%);
}

/* The card is bottom aligned, so the body takes its own height rather than
   filling the card and dragging the headline to the top. */

.chr-card--overlay .chr-card__body {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

.chr-card--overlay .chr-card__title a,
.chr-card--overlay .chr-card__excerpt,
.chr-card--overlay .chr-meta,
.chr-card--overlay .chr-meta a {
	color: #fff;
}

.chr-card--overlay .chr-card__excerpt {
	color: rgba(255, 255, 255, .84);
}

.chr-card--overlay.chr-card--size-large {
	min-height: clamp(380px, 46vw, 560px);
	padding: clamp(22px, 3vw, 40px);
}

.chr-card--overlay.chr-card--size-small {
	min-height: 190px;
	padding: 16px;
}

/* An overlay card always carries a visual, so the monogram sits behind the
   headline rather than competing with it. */

.chr-card--overlay .chr-thumbnail__monogram {
	font-size: clamp(90px, 34cqi, 260px);
	color: rgb(255 255 255 / .16);
}

/* Mini card */

.chr-mini-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.chr-mini-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.chr-mini-card .chr-meta {
	position: relative;
	z-index: 1;
}

.chr-mini-card__media {
	display: block;
	overflow: hidden;
	border-radius: calc(var(--chr-radius) - 3px);
	background-color: var(--chr-bg-alt);
}

/* The sidebar card follows the same clamping rule as the rest of the system. */

.chr-mini-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	overflow-wrap: break-word;
}

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

.chr-mini-card__title a:hover,
.chr-mini-card__title a:focus-visible {
	color: var(--chr-cat, var(--chr-primary));
}

/* ==========================================================================
   9. Meta, categories and badges
   ========================================================================== */

.chr-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	color: var(--chr-muted);
	font-family: var(--chr-font-meta);
	font-size: var(--chr-font-meta-size);
	font-weight: var(--chr-font-meta-weight);
	line-height: var(--chr-font-meta-lh, 1.4);
}

.chr-meta__item {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: inherit;
	text-decoration: none;
}

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

.chr-meta__avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.chr-meta__category {
	color: var(--chr-cat, var(--chr-primary));
	font-weight: 600;
}

.chr-category {
	display: inline-flex;
	align-self: flex-start;
	padding: .34em .7em;
	border-radius: 4px;
	background-color: var(--chr-cat, var(--chr-primary));
	color: var(--chr-cat-contrast, var(--chr-on-primary));
	font-family: var(--chr-font-category);
	font-size: var(--chr-font-category-size);
	font-weight: var(--chr-font-category-weight);
	letter-spacing: var(--chr-font-category-ls);
	line-height: 1.2;
	text-transform: var(--chr-font-category-transform);
	text-decoration: none;
}

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

.chr-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: .35em;
	padding: .3em .65em;
	border-radius: 4px;
	font-family: var(--chr-font-category);
	font-size: var(--chr-font-category-size);
	font-weight: 700;
	letter-spacing: var(--chr-font-category-ls);
	text-transform: var(--chr-font-category-transform);
}

.chr-badge--live {
	background-color: #d81f2a;
	color: #fff;
}

.chr-badge--live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	animation: chr-pulse 1.6s ease-in-out infinite;
}

.chr-badge--sponsored {
	background-color: var(--chr-bg-alt);
	color: var(--chr-muted);
}

.chr-badge--featured {
	background-color: var(--chr-accent);
	color: var(--chr-on-accent);
}

/* ==========================================================================
   10. Search
   ========================================================================== */

.chr-search-form__field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	background-color: var(--chr-surface);
	color: var(--chr-muted);
	transition: border-color var(--chr-transition), box-shadow var(--chr-transition);
}

.chr-search-form__field:focus-within {
	border-color: var(--chr-primary);
	box-shadow: 0 0 0 3px rgb(var(--chr-primary-rgb) / .14);
}

.chr-search-form__input {
	flex: 1 1 auto;
	padding: .7em 0;
	border: 0;
	background: none;
	color: var(--chr-text);
}

.chr-search-form__input:focus {
	box-shadow: none;
	outline: none;
}

.chr-search-form__submit {
	flex: none;
	padding: .35em .9em;
	border: 0;
	border-radius: 999px;
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.chr-search-panel {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

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

.chr-search-panel__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(6, 12, 22, .72);
	backdrop-filter: blur(3px);
	animation: chr-fade-in 180ms ease-out;
}

.chr-search-panel__inner {
	position: relative;
	width: min(100% - 32px, 720px);
	margin-top: min(18vh, 140px);
	padding: 26px;
	border-radius: calc(var(--chr-radius) * 1.4);
	background-color: var(--chr-surface);
	box-shadow: var(--chr-shadow-lg);
	animation: chr-rise 220ms cubic-bezier(.2, .8, .2, 1);
}

.chr-search-panel--dropdown .chr-search-panel__inner {
	margin-top: 90px;
	width: min(100% - 32px, 560px);
}

.chr-search-panel__close {
	position: absolute;
	top: 12px;
	right: 12px;
}

.chr-search-panel__suggestions {
	margin-top: 18px;
}

.chr-search-panel__label {
	display: block;
	margin-bottom: 8px;
	color: var(--chr-muted);
	font-size: 13px;
}

.chr-search-panel__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-search-panel__terms a {
	display: inline-block;
	padding: .35em .8em;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	color: var(--chr-text);
	font-size: 14px;
	text-decoration: none;
}

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

.chr-live-results {
	margin-top: 16px;
	max-height: min(52vh, 420px);
	overflow-y: auto;
}

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

.chr-live-results__list {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-live-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: calc(var(--chr-radius) - 3px);
	color: inherit;
	text-decoration: none;
}

.chr-live-result:hover,
.chr-live-result:focus-visible,
.chr-live-result.is-active {
	background-color: var(--chr-bg-alt);
}

.chr-live-result img {
	width: 56px;
	height: 44px;
	flex: none;
	border-radius: 6px;
	object-fit: cover;
}

.chr-live-result__title {
	display: block;
	color: var(--chr-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

.chr-live-result__meta {
	display: block;
	color: var(--chr-muted);
	font-size: 12px;
}

.chr-live-results__more {
	display: block;
	margin-top: 8px;
	padding: 10px;
	border-radius: calc(var(--chr-radius) - 3px);
	background-color: var(--chr-bg-alt);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.chr-live-results__empty,
.chr-live-results__status {
	padding: 14px 10px;
	color: var(--chr-muted);
	font-size: 14px;
}

.chr-header__search--inline {
	position: relative;
	min-width: min(300px, 34vw);
}

.chr-header__search--inline .chr-live-results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 80;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	background-color: var(--chr-surface);
	box-shadow: var(--chr-shadow-md);
}

/* ==========================================================================
   11. Offcanvas
   ========================================================================== */

.chr-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 210;
}

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

.chr-offcanvas__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(6, 12, 22, .6);
	animation: chr-fade-in 180ms ease-out;
}

.chr-offcanvas__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(92vw, 380px);
	background-color: var(--chr-bg);
	box-shadow: var(--chr-shadow-lg);
	animation: chr-slide-in 240ms cubic-bezier(.2, .8, .2, 1);
}

.chr-offcanvas--right .chr-offcanvas__panel {
	right: 0;
	--chr-slide-from: 100%;
}

.chr-offcanvas--left .chr-offcanvas__panel {
	left: 0;
	--chr-slide-from: -100%;
}

.chr-offcanvas--fullscreen .chr-offcanvas__panel {
	width: 100%;
}

.chr-offcanvas__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--chr-border);
}

.chr-offcanvas__body {
	flex: 1 1 auto;
	padding: 18px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.chr-offcanvas__foot {
	padding: 16px 20px;
	border-top: 1px solid var(--chr-border);
}

.chr-menu--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.chr-menu--mobile .chr-menu-item {
	border-bottom: 1px solid var(--chr-border);
}

.chr-menu--mobile .chr-menu-item__link {
	flex: 1 1 auto;
	padding: .85em 0;
	font-size: 17px;
	white-space: normal;
}

.chr-menu--mobile .chr-menu-item--parent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.chr-menu--mobile .chr-menu-item__toggle {
	width: 40px;
	height: 40px;
	margin: 0;
	font-size: 18px;
}

.chr-menu--mobile .chr-submenu {
	position: static;
	display: none;
	width: 100%;
	padding: 0 0 .6em 1em;
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.chr-menu--mobile .chr-menu-item.is-open > .chr-submenu {
	display: block;
}

.chr-menu--mobile .chr-submenu .chr-menu-item {
	border-bottom: 0;
}

.chr-menu--mobile .chr-submenu .chr-menu-item__link {
	padding: .5em 0;
	font-size: 15px;
}

.chr-offcanvas__widgets {
	margin-top: 24px;
}

/* ==========================================================================
   12. Social
   ========================================================================== */

.chr-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: inherit;
	font-size: 17px;
	text-decoration: none;
	transition: background-color var(--chr-transition), color var(--chr-transition);
}

.chr-social__link:hover,
.chr-social__link:focus-visible {
	background-color: rgb(var(--chr-text-rgb, 43 54 70) / .1);
	color: var(--chr-primary);
}

.chr-social--footer .chr-social__link:hover,
.chr-social--footer .chr-social__link:focus-visible,
.chr-social--header .chr-social__link:hover,
.chr-social--header .chr-social__link:focus-visible {
	background-color: rgba(255, 255, 255, .12);
}

.chr-social--author .chr-social__link {
	width: 30px;
	height: 30px;
	font-size: 15px;
}

/* ==========================================================================
   13. Widgets
   ========================================================================== */

.widget-title {
	position: relative;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--chr-border);
	font-family: var(--chr-font-widget);
	font-size: var(--chr-font-widget-size);
	font-weight: var(--chr-font-widget-weight);
	letter-spacing: var(--chr-font-widget-ls, normal);
}

.widget-title span {
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: -11px;
	border-bottom: 2px solid var(--chr-primary);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	padding: .38em 0;
}

.widget li + li {
	border-top: 1px solid var(--chr-border);
}

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

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

/* In a sidebar the card is a row, whichever widget rendered it: a stack of
   full-width images makes a widget taller than the article beside it. */

.widget .chr-mini-card + .chr-mini-card {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--chr-border);
}

.widget .chr-mini-card {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
}

.widget .chr-mini-card__media {
	flex: 0 0 84px;
	align-self: flex-start;
	border-radius: 6px;
}

.widget .chr-mini-card__media img,
.widget .chr-mini-card__media .chr-thumbnail__fallback {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.widget .chr-mini-card__media .chr-thumbnail__monogram {
	font-size: 26px;
}

.chr-widget-posts--numbered {
	counter-reset: chr-widget-post;
}

.chr-widget-posts--numbered .chr-mini-card {
	counter-increment: chr-widget-post;
}

.chr-widget-posts--numbered .chr-mini-card::before {
	content: counter(chr-widget-post);
	flex: none;
	width: 30px;
	color: var(--chr-primary);
	font-family: var(--chr-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.chr-widget-tabs__list {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	padding: 4px;
	border-radius: 999px;
	background-color: var(--chr-bg-alt);
}

.chr-widget-tabs__tab {
	flex: 1 1 auto;
	padding: .5em .8em;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--chr-muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.chr-widget-tabs__tab[aria-selected="true"] {
	background-color: var(--chr-surface);
	color: var(--chr-heading);
	box-shadow: var(--chr-shadow-sm);
}

.chr-widget-about {
	text-align: center;
}

.chr-widget-about__image {
	width: 96px;
	height: 96px;
	margin: 0 auto 14px;
	border-radius: 50%;
	object-fit: cover;
}

.chr-widget-about__text {
	color: var(--chr-muted);
	font-size: 15px;
}

.chr-widget-categories li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.chr-widget-categories__count {
	flex: none;
	min-width: 28px;
	padding: .1em .5em;
	border-radius: 999px;
	background-color: var(--chr-bg-alt);
	color: var(--chr-muted);
	font-size: 12px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.chr-widget-categories--cards ul {
	display: grid;
	gap: 8px;
}

.chr-widget-categories--cards li {
	padding: 0;
	border: 0;
}

.chr-widget-categories--cards a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .7em .9em;
	border-radius: calc(var(--chr-radius) - 3px);
	background-color: var(--chr-cat, var(--chr-bg-alt));
	color: var(--chr-cat-contrast, var(--chr-heading));
	font-weight: 600;
}

.wp-block-tag-cloud a,
.tagcloud a {
	display: inline-block;
	margin: 0 4px 6px 0;
	padding: .35em .8em;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	font-size: 14px !important;
	text-decoration: none;
}

.wp-block-tag-cloud a:hover,
.tagcloud a:hover {
	border-color: var(--chr-primary);
	color: var(--chr-primary);
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.chr-footer {
	margin-top: auto;
	background-color: var(--chr-footer-bg);
	color: var(--chr-footer-text);
}

.chr-footer--light {
	--chr-footer-bg: var(--chr-bg-alt);
	--chr-footer-text: var(--chr-text);
	--chr-footer-heading: var(--chr-heading);
	--chr-footer-border: var(--chr-border);
}

.chr-footer--muted {
	--chr-footer-bg: #1c2532;
}

.chr-footer--accent {
	--chr-footer-bg: var(--chr-primary);
	--chr-footer-text: rgba(255, 255, 255, .8);
	--chr-footer-heading: #fff;
}

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

.chr-footer a:hover,
.chr-footer a:focus-visible {
	color: var(--chr-footer-heading);
	text-decoration: underline;
}

.chr-footer .widget-title {
	border-bottom-color: var(--chr-footer-border);
	color: var(--chr-footer-heading);
}

.chr-footer .widget li + li {
	border-top-color: var(--chr-footer-border);
}

.chr-footer .widget a {
	color: var(--chr-footer-text);
}

.chr-footer .widget a:hover,
.chr-footer .widget a:focus-visible {
	color: var(--chr-footer-heading);
}

.chr-footer__widgets {
	padding-block: 54px;
}

.chr-footer__grid {
	display: grid;
	gap: var(--chr-gap);
	grid-template-columns: repeat(var(--chr-footer-columns, 4), minmax(0, 1fr));
}

.chr-footer__widgets--1 { --chr-footer-columns: 1; }
.chr-footer__widgets--2 { --chr-footer-columns: 2; }
.chr-footer__widgets--3 { --chr-footer-columns: 3; }
.chr-footer__widgets--4 { --chr-footer-columns: 4; }

.chr-footer__widgets--2-1-1 .chr-footer__grid {
	grid-template-columns: 2fr 1fr 1fr;
}

.chr-footer__row {
	padding-block: 22px;
}

.chr-footer__row--top {
	padding-block: 36px;
	border-bottom: 1px solid var(--chr-footer-border);
}

.chr-footer__row--bottom.is-bordered {
	border-top: 1px solid var(--chr-footer-border);
}

.chr-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.chr-footer__area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.chr-footer__copyright {
	font-size: 14px;
}

.chr-footer__about {
	max-width: 46ch;
	font-size: 15px;
}

.chr-footer__logo img {
	max-height: 44px;
	width: auto;
}

.chr-footer__top {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.chr-nav--footer .chr-menu {
	gap: 2px 18px;
}

.chr-nav--footer .chr-menu-item__link {
	padding: .2em 0;
	font-size: 14px;
}

/* ==========================================================================
   15. Utilities and furniture
   ========================================================================== */

.chr-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background-color: var(--chr-heading);
	color: var(--chr-bg);
	font-size: 20px;
	cursor: pointer;
	box-shadow: var(--chr-shadow-md);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--chr-transition), transform var(--chr-transition);
}

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

.chr-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.chr-ad {
	display: block;
	margin-block: 24px;
	text-align: center;
}

.chr-ad--reserved .chr-ad__body {
	min-height: 90px;
}

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

.chr-ad img {
	margin-inline: auto;
}

.chr-sticky-ad {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background-color: var(--chr-surface);
	box-shadow: 0 -4px 16px rgba(11, 21, 36, .12);
}

.chr-sticky-ad .chr-ad {
	margin: 0;
}

.chr-sticky-ad__close {
	position: absolute;
	top: 6px;
	right: 8px;
	display: inline-flex;
	padding: 4px;
	border: 0;
	border-radius: 50%;
	background-color: var(--chr-bg-alt);
	color: var(--chr-muted);
	cursor: pointer;
}

.chr-breadcrumbs {
	margin-bottom: 14px;
	font-size: 13px;
}

.chr-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--chr-muted);
}

.chr-breadcrumbs a {
	color: var(--chr-muted);
	text-decoration: none;
}

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

.chr-breadcrumbs__sep {
	opacity: .55;
}

.chr-pagination {
	margin-top: 44px;
}

.chr-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chr-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .6em;
	border: 1px solid var(--chr-border);
	border-radius: calc(var(--chr-radius) - 3px);
	color: var(--chr-heading);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--chr-transition), background-color var(--chr-transition), color var(--chr-transition);
}

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

.chr-pagination .page-numbers.current {
	border-color: var(--chr-primary);
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
}

.chr-pagination .page-numbers.dots {
	border-color: transparent;
}

.chr-pagination--prev-next .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.chr-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 44px;
}

.chr-load-more__status {
	color: var(--chr-muted);
	font-size: 14px;
}

.chr-live-region {
	position: absolute;
}

.chr-no-results {
	padding: 60px 0;
	text-align: center;
}

.chr-no-results__icon {
	color: var(--chr-muted);
	margin-bottom: 12px;
}

.chr-no-results__text {
	max-width: 46ch;
	margin: 0 auto 22px;
	color: var(--chr-muted);
}

.chr-no-results .chr-search-form {
	max-width: 420px;
	margin-inline: auto;
}

.chr-notfound {
	padding-block: clamp(48px, 9vw, 110px);
}

.chr-notfound__inner {
	max-width: 560px;
	margin: 0 auto 60px;
	text-align: center;
}

.chr-notfound__code {
	margin: 0;
	font-family: var(--chr-font-heading);
	font-size: clamp(72px, 16vw, 150px);
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--chr-border);
}

.chr-notfound__title {
	margin-top: -.2em;
}

.chr-notfound__text {
	color: var(--chr-muted);
}

.chr-notfound__search {
	margin: 26px auto;
	max-width: 480px;
}

/* Newsletter ------------------------------------------------------------- */

/* Both controls carry the shared height, so they are aligned to the start
   rather than stretched to whichever happens to be taller. */

.chr-newsletter__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.chr-newsletter__field {
	flex: 1 1 200px;
	min-width: 0;
}

.chr-newsletter__submit {
	flex: none;
}

.chr-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.5;
}

.chr-newsletter__consent input {
	width: auto;
	margin-top: .2em;
}

/* Clipped rather than pushed off-canvas: a negative offset reads as real page
   width in a right-to-left document and gives the whole site a scrollbar. */

.chr-newsletter__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
}

.chr-newsletter__message {
	margin: 10px 0 0;
	font-size: 14px;
}

.chr-newsletter__message.is-error {
	color: #c8102e;
}

.chr-newsletter__message.is-success {
	color: var(--chr-accent);
}

/* Animations ------------------------------------------------------------- */

@keyframes chr-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes chr-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes chr-slide-in {
	from { transform: translateX(var(--chr-slide-from, 100%)); }
	to { transform: translateX(0); }
}

.chr-animate .chr-module,
.chr-animate .chr-card {
	animation: chr-fade-in 400ms ease-out both;
}

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.chr-grid--5 { --chr-columns: 4; }
}

@media (max-width: 1023px) {
	:root {
		--chr-gap: 22px;
	}

	.chr-sidebar-right .chr-layout:has(.chr-sidebar),
	.chr-sidebar-left .chr-layout:has(.chr-sidebar) {
		grid-template-columns: minmax(0, 1fr);
	}

	.chr-sidebar-left .chr-layout:has(.chr-sidebar) .chr-content {
		order: 0;
	}

	.chr-grid--4,
	.chr-grid--5 { --chr-columns: 3; }

	.chr-header__row--bottom {
		display: none;
	}

	.chr-nav--primary,
	.chr-nav--secondary {
		display: none;
	}

	.chr-footer__grid,
	.chr-footer__widgets--2-1-1 .chr-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	:root {
		--chr-gutter: 16px;
		--chr-gap: 20px;
	}

	.chr-grid--3,
	.chr-grid--4,
	.chr-grid--5 { --chr-columns: 2; }

	.chr-header__row--top .chr-header__area--start {
		display: none;
	}

	.chr-logo img,
	.chr-logo .custom-logo {
		height: var(--chr-logo-height-mobile, 34px);
		max-width: min(var(--chr-logo-width-mobile, 240px), 100%);
	}

	.chr-card--list {
		gap: 14px;
	}

	.chr-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 560px) {
	.chr-grid,
	.chr-grid--2,
	.chr-grid--3,
	.chr-grid--4,
	.chr-grid--5 { --chr-columns: 1; }

	.chr-card--list {
		flex-direction: column;
	}

	.chr-card--list .chr-card__media {
		flex-basis: auto;
	}

	.chr-footer__grid,
	.chr-footer__widgets--2-1-1 .chr-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.chr-ticker__controls {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.chr-card--overlay .chr-card__media::after {
		display: none;
	}

	.chr-button,
	.chr-chip,
	.chr-category {
		border: 1px solid currentColor;
	}
}

/* ==========================================================================
   Sidebar styles
   ==========================================================================

   The widget area takes its spacing, separators and title treatment from
   Theme Options → Sidebars. The base rules above are the "divided" look, so
   only the other choices need to say anything here. */

.widget-area .widget + .widget {
	margin-top: var(--chr-widget-gap, 34px);
}

/* Boxed: each widget on its own card, so the separators go and the gap does
   the work instead. */

.chr-sidebar--boxed .widget {
	padding: clamp(16px, 2vw, 22px);
	border: 1px solid var(--chr-border);
	border-radius: var(--chr-radius);
	background-color: var(--chr-surface);
}

.chr-sidebar--boxed .widget + .widget {
	margin-top: calc(var(--chr-widget-gap, 34px) * .6);
}

/* Plain: spacing only. */

.chr-sidebar--plain .widget-title {
	padding-bottom: 0;
	border-bottom: 0;
}

.chr-sidebar--plain .widget-title span {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

/* Title treatments -------------------------------------------------------- */

.chr-sidebar--titles-bar .widget-title {
	padding-bottom: 0;
	padding-inline-start: 12px;
	border-bottom: 0;
	border-inline-start: 3px solid var(--chr-primary);
	line-height: 1.5;
}

.chr-sidebar--titles-bar .widget-title span {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.chr-sidebar--titles-filled .widget-title {
	padding: .5em .8em;
	border-bottom: 0;
	border-radius: calc(var(--chr-radius) - 4px);
	background-color: var(--chr-primary);
	color: var(--chr-on-primary);
}

.chr-sidebar--titles-filled .widget-title span {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.chr-sidebar--titles-plain .widget-title {
	padding-bottom: 0;
	border-bottom: 0;
}

.chr-sidebar--titles-plain .widget-title span {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

/* Modules in a widget area ------------------------------------------------

   A module widget is a module in a column, so it takes the column-width rules
   the homepage sidebar already uses and drops the section header's own rule,
   which would sit directly under the widget title. */

.widget-area .chr-module {
	padding-block: 0;
}

.widget-area .chr-module__subtitle {
	margin: -8px 0 16px;
	color: var(--chr-muted);
	font-size: 13px;
}

/* The rank is taller than a short headline, so the byline would be pushed to
   the bottom of the row by the alignment the homepage grid wants. */

.widget-area .chr-trending__body > .chr-meta {
	margin-top: 0;
}

.widget-area .chr-trending__rank {
	font-size: 30px;
}

.widget-area .chr-trending__title {
	font-size: 15.5px;
}

/* The column decides the count, whatever the module was configured with. */

.widget-area .chr-grid,
.widget-area .chr-contributors,
.widget-area .chr-showcase {
	--chr-columns: 1;
}

.widget-area .chr-masonry {
	columns: 1;
}

.widget-area .chr-trending {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.widget-area .chr-trending__item {
	padding-right: 0;
	padding-left: 0;
	border-right: 0;
	border-left: 0;
}

.widget-area .chr-trending__item + .chr-trending__item {
	padding-top: 16px;
	border-top: 1px solid var(--chr-border);
}

.widget-area .chr-picks,
.widget-area .chr-magazine,
.widget-area .chr-dual-list,
.widget-area .chr-magazine__pair {
	grid-template-columns: minmax(0, 1fr);
}

.widget-area .chr-timeline {
	padding-inline-start: 22px;
}

/* Widget lists style their own items, and a module brings its own separators;
   applying both gives every row two rules. */

.widget-area .chr-module ul,
.widget-area .chr-module ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget-area .chr-module li {
	padding: 0;
}

.widget-area .chr-module li + li {
	border-top: 0;
}

.widget-area .chr-pills {
	gap: 8px;
}

/* The reader's library -----------------------------------------------------
   Saved stories, reading history and followed sections. All three controls are
   printed hidden and revealed by the script, because there is nowhere for the
   list to be kept without it and a control that cannot work should not appear. */

.chr-save,
.chr-follow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border: 1px solid var(--chr-border);
	border-radius: 999px;
	background: none;
	color: var(--chr-muted);
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.2;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.chr-save svg,
.chr-follow svg {
	width: 16px;
	height: 16px;
}

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

.chr-save.is-saved,
.chr-follow.is-following {
	border-color: var(--chr-primary);
	background: color-mix(in srgb, var(--chr-primary) 10%, transparent);
	color: var(--chr-primary);
	font-weight: 600;
}

.chr-save.is-saved svg {
	fill: currentColor;
}

.chr-save--compact {
	padding: 5px 9px;
	margin-top: 8px;
}

.chr-follow {
	margin-top: 14px;
}

/* The lists */

.chr-library {
	margin: var(--chr-space-lg, 44px) 0;
}

.chr-library__title {
	margin: 0 0 var(--chr-space-sm, 16px);
	font-size: clamp(20px, 2vw, 26px);
}

.chr-library__empty {
	margin: 0;
	padding: var(--chr-space-md, 28px);
	border: 1px dashed var(--chr-border);
	border-radius: var(--chr-radius);
	color: var(--chr-muted);
	text-align: center;
}

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

.chr-library__actions {
	margin: var(--chr-space-sm, 16px) 0 0;
}

.chr-library__clear {
	padding: 0;
	border: 0;
	background: none;
	color: var(--chr-muted);
	font: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
}

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

.chr-library__status {
	margin: 8px 0 0;
	color: var(--chr-muted);
	font-size: 0.8125rem;
}

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

@media (prefers-reduced-motion: reduce) {
	.chr-save,
	.chr-follow {
		transition: none;
	}
}