/*
 * Ordnance — the survey sheet.
 *
 * Colour is organised in three tiers, not two. The comp's palette works as identity
 * but fails WCAG AA in several places when used for words, so each accent has:
 *
 *   identity  the design's colour, for large decorative fills, rules, dots and stamps
 *   text      a variant measured to clear 4.5:1 on BOTH paper and paper-2
 *
 * Measured against the comp: survey red on paper is 4.57:1 but drops to 4.30:1 on the
 * paper-2 row-hover background, so red words needed their own value; ink-60, which the
 * comp uses for every mono label, date and caption, is 4.25:1 and fails outright.
 * Contour is 2.57:1 on paper and is therefore never a text colour on paper at all.
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------------ */

:root {
	/* identity */
	--ord-ink: #101E3C;
	--ord-paper: #F4F0E6;
	--ord-paper-2: #EFE9DA;
	--ord-red: #C7382F;
	--ord-blue: #2B5AA8;
	--ord-contour: #D9822B;

	/* text tier — measured for AA on paper and paper-2 */
	--ord-red-text: #BE342B;          /* 4.97 : 1 paper · 4.67 : 1 paper-2 */
	--ord-meta: rgba(16, 30, 60, .68); /* 5.64 : 1 paper · 5.30 : 1 paper-2 */
	--ord-contour-text: #995A1C;       /* 4.81 : 1 paper · 4.52 : 1 paper-2 */

	/* ink steps */
	--ord-ink-85: rgba(16, 30, 60, .85);
	--ord-ink-78: rgba(16, 30, 60, .78);
	--ord-ink-72: rgba(16, 30, 60, .72);
	--ord-ink-30: rgba(16, 30, 60, .3);
	--ord-ink-25: rgba(16, 30, 60, .25);
	--ord-ink-20: rgba(16, 30, 60, .2);
	--ord-ink-08: rgba(16, 30, 60, .08);
	--ord-ink-07: rgba(16, 30, 60, .07);

	/* paper on ink */
	--ord-paper-70: rgba(244, 240, 230, .7);
	--ord-paper-60: rgba(244, 240, 230, .6);
	--ord-paper-25: rgba(244, 240, 230, .25);

	--ord-highlight: rgba(217, 130, 43, .35);
	--ord-crosshair: rgba(199, 56, 47, .6);

	--ord-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ord-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ord-rule: 1.5px;
	--ord-hair: 1px;
	--ord-radius: 0;
	--ord-t: 120ms ease;

	--ord-pad-x: 40px;
	--ord-content: 1200px;
	--ord-measure: 720px;
	--ord-gap-card: 24px;
	--ord-gap-toc: 80px;

	/* placeholder geometry, overridden per element */
	--ord-ph-x: 38%;
	--ord-ph-y: 62%;
	--ord-ph-ring: 22px;
}

@media (max-width: 767px) {
	:root {
		--ord-pad-x: 20px;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Reset and base
 * ------------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
}

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

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

body.ord {
	margin: 0;
	background: var(--ord-paper);
	color: var(--ord-ink);
	font-family: var(--ord-sans);
	font-size: 17px;
	line-height: 1.55;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--ord-t), background-color var(--ord-t), border-color var(--ord-t);
}

a:hover {
	color: var(--ord-red-text);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	border-radius: var(--ord-radius);
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-weight: 700;
	text-wrap: pretty;
}

p {
	margin: 0;
	text-wrap: pretty;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* Focus: an ink ring on paper, a paper ring on ink. */
:focus-visible {
	outline: 2px solid var(--ord-ink);
	outline-offset: 2px;
}

.ord-strip :focus-visible,
.ord-footer :focus-visible,
.ord-btn--ink:focus-visible {
	outline-color: var(--ord-paper);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.ord-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--ord-ink);
	color: var(--ord-paper);
	font: 700 14px/1 var(--ord-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.ord-skip:focus {
	left: 8px;
	top: 8px;
	color: var(--ord-paper);
}

.ord-page {
	max-width: 100%;
	overflow-x: clip;
}

/* Shared mono treatment. Uppercasing is done here, not typed into the markup, so
   screen readers still receive ordinary words. */
.ord-mono {
	font-family: var(--ord-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.ord-kicker {
	color: var(--ord-red-text);
	font-family: var(--ord-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ord-grid-bg {
	background-image:
		repeating-linear-gradient(0deg, var(--ord-ink-08) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(90deg, var(--ord-ink-08) 0 1px, transparent 1px 48px);
}

body:not(.ord-has-grid) .ord-grid-bg {
	background-image: none;
}

@media (max-width: 767px) {
	.ord-grid-bg {
		background-image:
			repeating-linear-gradient(0deg, var(--ord-ink-08) 0 1px, transparent 1px 40px),
			repeating-linear-gradient(90deg, var(--ord-ink-08) 0 1px, transparent 1px 40px);
	}
}

/* ---------------------------------------------------------------------------
 * 3. Sheet strip
 * ------------------------------------------------------------------------ */

.ord-strip {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	min-height: 30px;
	padding: 7px var(--ord-pad-x);
	background: var(--ord-ink);
	color: var(--ord-paper);
	font-size: 10.5px;
	letter-spacing: .1em;
}

.ord-strip p {
	margin: 0;
}

.ord-strip__centre {
	text-align: center;
	color: var(--ord-paper-70);
}

.ord-strip__right {
	text-align: right;
}

@media (max-width: 900px) {
	.ord-strip {
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 26px;
		padding-block: 5px;
		font-size: 10px;
		line-height: 1.3;
	}

	.ord-strip__centre {
		display: none;
	}
}

/*
 * The design's mobile nav: 60px tall, mark 28px, wordmark 14px. Selectors carry the
 * extra `.ord-nav` because this block sits above the base nav rules in the file and
 * would otherwise lose on source order at equal specificity.
 */
@media (max-width: 1099px) {
	.ord-nav .ord-nav__inner {
		min-height: 60px;
		gap: 12px;
		padding-block: 8px;
	}

	.ord-nav .ord-nav__lockup .ord-mark {
		width: 28px;
		height: 28px;
	}

	.ord-nav .ord-nav__lockup .ord-lockup__word {
		font-size: 14px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Navigation
 * ------------------------------------------------------------------------ */

.ord-nav {
	border-bottom: var(--ord-rule) solid var(--ord-ink);
	background: var(--ord-paper);
	position: relative;
	z-index: 20;
}

.ord-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--ord-content);
	margin: 0 auto;
	min-height: 76px;
	padding: 0 var(--ord-pad-x);
}

.ord-lockup {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	flex-wrap: wrap;
}

/*
 * On desktop the lockup holds its width — it is the one element that must not be
 * squeezed into wrapping by a long menu, so the menu shrinks instead. Below the
 * menu breakpoint the opposite is true: the icon buttons are fixed-size and the
 * lockup must give way, or a long site name pushes them outside the viewport
 * (where `overflow-x: clip` on the page hides them rather than scrolling to them).
 */
@media (min-width: 1100px) {
	.ord-nav__lockup {
		flex: 0 0 auto;
	}
}

.ord-nav__links {
	min-width: 0;
}

@media (max-width: 1099px) {
	.ord-nav__lockup {
		flex: 0 1 auto;
		min-width: 0;
	}

	.ord-nav__lockup .ord-lockup__word {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.ord-nav__mobile {
		flex: none;
	}
}

.ord-lockup .ord-mark {
	flex: none;
}

.ord-lockup__word {
	font-weight: 800;
	font-stretch: 88%;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}

.ord-lockup__logo {
	max-height: 44px;
	width: auto;
}

.ord-lockup--paper {
	color: var(--ord-paper);
}

.ord-lockup__sub {
	flex-basis: 100%;
	font-size: 10px;
	letter-spacing: .22em;
	color: var(--ord-paper-70);
	margin-top: 4px;
}

.ord-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
}

.ord-menu a {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.ord-menu a:hover {
	color: var(--ord-red-text);
}

.ord-menu .current-menu-item > a,
.ord-menu .current-menu-ancestor > a,
.ord-menu .current-menu-parent > a,
.ord-menu .current_page_item > a {
	border-bottom-color: var(--ord-red);
}

@media (max-width: 1099px) {
	.ord-nav__links,
	.ord-nav__search {
		display: none;
	}
}

@media (min-width: 1100px) {
	.ord-nav__mobile,
	.ord-mobile-search,
	.ord-mobile-menu {
		display: none !important;
	}
}

/* Search box */

.ord-searchform {
	display: flex;
	align-items: center;
	width: 210px;
	height: 38px;
	border: var(--ord-rule) solid var(--ord-ink);
	background: transparent;
	padding: 0 4px 0 12px;
}

.ord-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--ord-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ord-ink);
	padding: 0;
}

.ord-searchform__input::placeholder {
	color: var(--ord-meta);
	opacity: 1;
}

.ord-searchform__input:focus {
	outline: none;
}

.ord-searchform:focus-within {
	outline: 2px solid var(--ord-ink);
	outline-offset: 2px;
}

.ord-searchform__submit {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: var(--ord-red-text);
	cursor: pointer;
}

.ord-searchform__submit:hover {
	color: var(--ord-ink);
}

/* Search page inverts the nav box. */
.search .ord-nav__search .ord-searchform {
	background: var(--ord-ink);
}

.search .ord-nav__search .ord-searchform__input {
	color: var(--ord-paper);
}

.search .ord-nav__search .ord-searchform__input::placeholder {
	color: var(--ord-paper-70);
}

.search .ord-nav__search .ord-searchform__submit {
	color: var(--ord-contour);
}

/* Mobile chrome */

.ord-nav__mobile {
	display: flex;
	gap: 10px;
}

.ord-iconbtn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: var(--ord-rule) solid var(--ord-ink);
	background: transparent;
	color: var(--ord-red-text);
	cursor: pointer;
	padding: 0;
}

.ord-iconbtn:hover {
	background: var(--ord-ink);
	color: var(--ord-paper);
}

.ord-bars {
	display: block;
	width: 18px;
	color: var(--ord-ink);
}

.ord-bars i {
	display: block;
	height: 2px;
	background: currentColor;
}

.ord-bars i + i {
	margin-top: 4px;
}

.ord-iconbtn:hover .ord-bars {
	color: var(--ord-paper);
}

.ord-mobile-search {
	padding: 0 var(--ord-pad-x) 16px;
	border-top: var(--ord-hair) solid var(--ord-ink-30);
	padding-top: 16px;
}

.ord-mobile-search .ord-searchform {
	width: 100%;
	height: 44px;
}

.ord-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--ord-paper);
	padding: 16px var(--ord-pad-x) 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ord-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	margin-bottom: 24px;
}

.ord-mobile-menu__list {
	list-style: none;
	border-top: var(--ord-rule) solid var(--ord-ink);
}

.ord-mobile-menu__list li {
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
}

.ord-mobile-menu__list a {
	display: block;
	padding: 16px 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
	text-decoration: none;
	min-height: 44px;
}

.ord-mobile-menu__search {
	margin-top: 28px;
}

.ord-mobile-menu__search .ord-searchform {
	width: 100%;
	height: 44px;
}

body.ord-menu-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 5. Layout scaffolding
 * ------------------------------------------------------------------------ */

.ord-main {
	display: block;
}

.ord-main > * {
	max-width: var(--ord-content);
	margin-inline: auto;
	padding-inline: var(--ord-pad-x);
}

/* Full-bleed sections still align their contents to the measure. */
.ord-hero,
.ord-legend,
.ord-practical,
.ord-termhead,
.ord-searchhead,
.ord-pagehead {
	max-width: none;
	padding-inline: 0;
}

.ord-hero__inner,
.ord-termhead__inner,
.ord-practical > *,
.ord-searchhead > *,
.ord-pagehead > * {
	max-width: var(--ord-content);
	margin-inline: auto;
	padding-inline: var(--ord-pad-x);
}

/* ---------------------------------------------------------------------------
 * 6. Buttons, chips, mono links
 * ------------------------------------------------------------------------ */

.ord-btn {
	display: inline-block;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	border: var(--ord-rule) solid transparent;
	cursor: pointer;
	text-align: center;
}

.ord-btn--primary {
	background: var(--ord-red-text);
	border-color: var(--ord-red-text);
	color: var(--ord-paper);
	font-weight: 700;
	padding: 15px 22px;
}

.ord-btn--primary:hover {
	background: var(--ord-ink);
	border-color: var(--ord-ink);
	color: var(--ord-paper);
}

.ord-btn--secondary {
	border-color: var(--ord-ink);
	color: var(--ord-ink);
	font-weight: 600;
	padding: 15px 22px;
}

.ord-btn--secondary:hover {
	background: var(--ord-ink);
	color: var(--ord-paper);
}

.ord-btn--ink {
	background: var(--ord-ink);
	border-color: var(--ord-ink);
	color: var(--ord-paper);
	font-weight: 700;
	padding: 15px 22px;
}

.ord-btn--ink:hover {
	background: var(--ord-red-text);
	border-color: var(--ord-red-text);
	color: var(--ord-paper);
}

.ord-monolink {
	display: inline-block;
	color: var(--ord-red-text);
	font-family: var(--ord-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

.ord-monolink:hover {
	color: var(--ord-ink);
}

.ord-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ord-chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 8px 12px;
	border: var(--ord-hair) solid var(--ord-meta);
	font-family: var(--ord-mono);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ord-ink);
}

.ord-chip:hover {
	border-color: var(--ord-ink);
	color: var(--ord-ink);
}

.ord-chip.is-active {
	background: var(--ord-ink);
	border-color: var(--ord-ink);
	color: var(--ord-paper);
}

.ord-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding-block: 14px;
	border-top: var(--ord-rule) solid var(--ord-ink);
	border-bottom: var(--ord-rule) solid var(--ord-ink);
	margin-top: 8px;
}

.ord-sort {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ord-meta);
}

.ord-sort__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
}

.ord-sort__link {
	text-decoration: none;
	color: var(--ord-meta);
}

.ord-sort__link:hover {
	color: var(--ord-ink);
}

.ord-sort__link.is-active {
	color: var(--ord-red-text);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 7. Frames, placeholders, stamps
 * ------------------------------------------------------------------------ */

.ord-frame {
	position: relative;
	display: block;
	border: var(--ord-rule) solid var(--ord-ink);
	background: var(--ord-paper-2);
	overflow: hidden;
}

.ord-frame__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ord-frame--placeholder {
	background-color: var(--ord-paper-2);
	background-image:
		repeating-radial-gradient(circle at var(--ord-ph-x) var(--ord-ph-y),
			transparent 0 calc(var(--ord-ph-ring) - 1.5px),
			rgba(217, 130, 43, .4) calc(var(--ord-ph-ring) - 1.5px) var(--ord-ph-ring)),
		repeating-linear-gradient(0deg, rgba(43, 90, 168, .16) 0 1px, transparent 1px 60px),
		repeating-linear-gradient(90deg, rgba(43, 90, 168, .16) 0 1px, transparent 1px 60px);
}

.ord-crosshair {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ord-crosshair::before,
.ord-crosshair::after {
	content: "";
	position: absolute;
	background: var(--ord-crosshair);
}

.ord-crosshair::before {
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
}

.ord-crosshair::after {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
}

.ord-stamp {
	display: inline-block;
	background: var(--ord-red-text);
	color: var(--ord-paper);
	font-family: var(--ord-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 8px;
	line-height: 1;
}

.ord-stamp--corner {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
}

.ord-frame__label {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	background: var(--ord-paper);
	color: var(--ord-meta);
	padding: 4px 7px;
	font-size: 10.5px;
}

.ord-caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 12px;
	color: var(--ord-meta);
	font-size: 10.5px;
}

/* ---------------------------------------------------------------------------
 * 8. Home
 * ------------------------------------------------------------------------ */

.ord-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding-block: 56px 64px;
}

.ord-hero__h1 {
	font-size: clamp(48px, 7.6vw, 108px);
	line-height: .9;
	letter-spacing: -.035em;
	font-weight: 800;
	font-stretch: 92%;
	margin-top: 22px;
}

.ord-hero__standfirst {
	margin-top: 30px;
	max-width: 470px;
	font-size: 20px;
	line-height: 1.45;
	color: var(--ord-ink-85);
}

.ord-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 38px;
}

.ord-hero__figure {
	margin: 0;
}

.ord-hero__figure .ord-frame {
	aspect-ratio: 5 / 4;
	min-height: 340px;
}

.ord-legend {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: var(--ord-rule) solid var(--ord-ink);
	border-bottom: var(--ord-rule) solid var(--ord-ink);
}

.ord-legend__cell {
	padding: 18px var(--ord-pad-x);
	border-left: var(--ord-hair) solid var(--ord-ink-30);
	min-width: 0;
}

.ord-legend__cell:first-child {
	border-left: 0;
}

.ord-legend__label {
	color: var(--ord-meta);
	font-size: 10px;
}

.ord-legend__value {
	margin-top: 8px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.ord-sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 30px;
}

.ord-sectionhead__kicker {
	color: var(--ord-meta);
}

.ord-h2--section {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1;
	letter-spacing: -.025em;
	font-weight: 700;
}

.ord-h2--sub {
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: 700;
}

.ord-featured {
	padding-block: 64px 56px;
}

.ord-featured__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--ord-gap-card);
	align-items: start;
}

.ord-featured__stack {
	display: grid;
	gap: 28px;
	min-width: 0;
}

.ord-card {
	min-width: 0;
}

.ord-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ord-card__link:hover .ord-card__title {
	color: var(--ord-red-text);
}

.ord-cardmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 16px;
	color: var(--ord-meta);
	font-size: 10.5px;
}

.ord-card__title {
	margin-top: 10px;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 700;
	transition: color var(--ord-t);
}

.ord-card__title--lead {
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.05;
	letter-spacing: -.025em;
}

.ord-card__dek {
	margin-top: 12px;
	max-width: 640px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ord-ink-78);
}

.ord-textrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-top: 40px;
	border-top: var(--ord-rule) solid var(--ord-ink);
}

.ord-textrow__cell {
	padding: 20px;
	border-left: var(--ord-hair) solid var(--ord-ink-30);
	min-width: 0;
}

.ord-textrow__cell:first-child {
	border-left: 0;
	padding-left: 0;
}

.ord-textrow__title {
	margin-top: 10px;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 600;
	transition: color var(--ord-t);
}

.ord-sections {
	padding-block: 24px 72px;
}

/* The 1px gap on an ink-tinted background is what draws the internal rules. */
.ord-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--ord-ink-30);
	border: var(--ord-rule) solid var(--ord-ink);
}

.ord-tile {
	display: block;
	background: var(--ord-paper);
	padding: 22px 22px 26px;
	min-height: 150px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.ord-tile:hover {
	background: var(--ord-paper-2);
	color: inherit;
}

.ord-tile:hover .ord-tile__name {
	color: var(--ord-red-text);
}

.ord-tile__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--ord-mono);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ord-tile__ordinal {
	color: var(--ord-red-text);
	font-weight: 700;
}

.ord-tile__count {
	color: var(--ord-meta);
}

.ord-tile__name {
	display: block;
	margin-top: 22px;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 700;
	transition: color var(--ord-t);
}

.ord-tile__intro {
	display: block;
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--ord-ink-72);
}

.ord-essentials {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 60px;
	padding-block: 56px 72px;
	border-top: var(--ord-rule) solid var(--ord-ink);
}

.ord-essentials__blurb {
	margin-top: 18px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ord-ink-78);
}

.ord-essentials .ord-h2--section {
	margin-top: 12px;
}

.ord-rows {
	list-style: none;
	border-top: var(--ord-rule) solid var(--ord-ink);
}

.ord-rows__row {
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
}

.ord-rows__link {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	min-height: 44px;
	text-decoration: none;
	color: inherit;
}

.ord-rows__link:hover {
	color: var(--ord-red-text);
}

.ord-rows__code {
	color: var(--ord-red-text);
	font-weight: 700;
}

.ord-rows__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.ord-rows__meta {
	color: var(--ord-meta);
	text-align: right;
}

.ord-rows__link:hover .ord-rows__meta {
	color: var(--ord-red-text);
}

/* ---------------------------------------------------------------------------
 * 9. Article
 * ------------------------------------------------------------------------ */

.ord-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	color: var(--ord-meta);
	font-size: 10.5px;
}

.ord-crumbs a {
	color: inherit;
	text-decoration: none;
}

.ord-crumbs a:hover {
	color: var(--ord-ink);
}

.ord-crumbs__current {
	color: var(--ord-red-text);
}

.ord-crumbs__sep {
	/* Visible text, so it takes the measured text tier, not the hairline tint. */
	color: var(--ord-meta);
}

.ord-crumbs .rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.ord-articlehead {
	display: grid;
	gap: 56px;
	padding-block: 30px 44px;
}

.ord-articlehead--glance {
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.ord-articlehead__h1 {
	margin-top: 18px;
	font-size: clamp(34px, 5vw, 70px);
	line-height: .98;
	letter-spacing: -.03em;
	font-weight: 800;
	font-stretch: 94%;
}

.ord-articlehead__standfirst {
	margin-top: 26px;
	max-width: 660px;
	font-size: 21px;
	line-height: 1.4;
	color: var(--ord-ink-85);
}

.ord-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
	margin-top: 30px;
	padding-top: 16px;
	border-top: var(--ord-hair) solid var(--ord-ink-30);
}

.ord-byline__who {
	color: var(--ord-meta);
	font-family: var(--ord-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ord-byline__name {
	color: var(--ord-ink);
	font-weight: 700;
}

/* At-a-glance */

.ord-glance {
	align-self: start;
	border: var(--ord-rule) solid var(--ord-ink);
	padding: 18px 20px 16px;
	background-color: var(--ord-paper);
	background-image:
		repeating-linear-gradient(0deg, var(--ord-ink-07) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(90deg, var(--ord-ink-07) 0 1px, transparent 1px 24px);
	min-width: 0;
}

body:not(.ord-has-grid) .ord-glance {
	background-image: none;
}

.ord-glance__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 14px;
	padding-bottom: 12px;
	border-bottom: var(--ord-rule) solid var(--ord-ink);
}

.ord-glance__title {
	color: var(--ord-red-text);
	font-weight: 700;
}

.ord-glance__section {
	color: var(--ord-meta);
}

.ord-glance__rows {
	margin: 0;
}

.ord-glance__row {
	display: grid;
	grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
}

.ord-glance__row:last-child {
	border-bottom: 0;
}

.ord-glance__row dt {
	padding: 11px 0;
	color: var(--ord-meta);
	font-size: 10px;
}

.ord-glance__row dd {
	margin: 0;
	padding: 9px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.ord-herofigure {
	margin: 0 0 8px;
}

.ord-herofigure .ord-frame {
	aspect-ratio: 15 / 7;
}

.ord-body {
	display: block;
	padding-block: 40px 24px;
}

.ord-body--toc {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, var(--ord-measure));
	gap: var(--ord-gap-toc);
	align-items: start;
}

/* Contents rail */

.ord-toc-wrap {
	min-width: 0;
}

.ord-toc {
	min-width: 0;
}

.ord-toc__summary {
	display: none;
}

.ord-toc__nav {
	display: block;
}

.ord-toc__list {
	list-style: none;
	counter-reset: none;
}

.ord-toc__link {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
	padding: 9px 0 9px 12px;
	border-left: var(--ord-hair) solid var(--ord-ink-30);
	color: var(--ord-ink-72);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	transition: color var(--ord-t), border-color var(--ord-t);
}

.ord-toc__link:hover {
	color: var(--ord-red-text);
}

.ord-toc__num {
	color: var(--ord-meta);
	font-size: 10.5px;
	letter-spacing: .06em;
}

.ord-toc__item.is-current .ord-toc__link {
	border-left: 2px solid var(--ord-red);
	padding-left: 11px;
	color: var(--ord-ink);
}

.ord-toc__item.is-current .ord-toc__num {
	color: var(--ord-red-text);
}

.ord-toc__utils {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: var(--ord-hair) solid var(--ord-ink-30);
}

.ord-toc__util {
	border: 0;
	background: none;
	padding: 4px 0;
	color: var(--ord-meta);
	font-family: var(--ord-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	text-align: left;
}

.ord-toc__util:hover {
	color: var(--ord-ink);
}

.ord-toc__util--red {
	color: var(--ord-red-text);
}

.ord-rail {
	margin-top: 28px;
}

.ord-rail-widget__title {
	font-size: 10.5px;
	color: var(--ord-meta);
	margin-bottom: 10px;
}

@media (min-width: 1024px) {
	.ord-toc-wrap {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}

	.ord-toc[open] .ord-toc__nav,
	.ord-toc .ord-toc__nav {
		display: block;
	}
}

/* Prose */

.ord-prose {
	min-width: 0;
	max-width: var(--ord-measure);
	font-size: 18px;
	line-height: 1.65;
}

.ord-prose > * {
	margin-block: 0 18px;
}

.ord-prose > p:first-of-type {
	font-size: 20px;
	line-height: 1.6;
	color: var(--ord-ink-85);
}

.ord-prose > h2,
.ord-prose .ord-h2 {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-block: 48px 18px;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: 700;
	scroll-margin-top: 24px;
}

.ord-prose > h2[data-ord-number]::before {
	content: attr(data-ord-number);
	flex: none;
	color: var(--ord-red-text);
	font-family: var(--ord-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1.6;
}

.ord-prose > h3 {
	margin-block: 32px 12px;
	font-size: 21px;
	line-height: 1.25;
	letter-spacing: -.01em;
	font-weight: 700;
}

.ord-prose > h4 {
	margin-block: 26px 10px;
	font-size: 18px;
	font-weight: 700;
}

.ord-prose a {
	color: var(--ord-ink);
	text-decoration-color: var(--ord-red);
	text-decoration-thickness: 1.5px;
}

.ord-prose a:hover {
	color: var(--ord-red-text);
}

.ord-prose ul,
.ord-prose ol {
	padding-left: 22px;
}

.ord-prose li {
	margin-bottom: 8px;
}

.ord-prose li::marker {
	color: var(--ord-red);
}

.ord-prose blockquote,
.ord-prose .wp-block-quote,
.ord-prose .wp-block-pullquote {
	margin-block: 32px;
	padding: 6px 0 6px 26px;
	border-left: 3px solid var(--ord-red);
	font-size: 24px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -.015em;
}

.ord-prose blockquote p,
.ord-prose .wp-block-pullquote p {
	font-size: inherit;
	line-height: inherit;
	margin-bottom: 12px;
}

.ord-prose cite,
.ord-prose .wp-block-pullquote cite {
	display: block;
	font-family: var(--ord-mono);
	font-size: 10.5px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ord-meta);
}

.ord-prose figure,
.ord-prose .wp-block-image {
	margin-block: 32px;
}

.ord-prose figure img,
.ord-prose .wp-block-image img {
	border: var(--ord-rule) solid var(--ord-ink);
	background: var(--ord-paper-2);
	width: 100%;
}

.ord-prose .is-style-plain img {
	border: 0;
}

.ord-prose figcaption {
	margin-top: 12px;
	color: var(--ord-meta);
	font-family: var(--ord-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* Tables scroll inside their own box so the page never scrolls sideways. */
.ord-scroll {
	overflow-x: auto;
	margin-block: 32px;
	border-top: var(--ord-rule) solid var(--ord-ink);
	border-bottom: var(--ord-rule) solid var(--ord-ink);
}

.ord-scroll:focus-visible {
	outline: 2px solid var(--ord-ink);
	outline-offset: 2px;
}

.ord-prose table,
.ord-table table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 15.5px;
}

.ord-prose .wp-block-table,
.ord-prose figure.wp-block-table {
	margin: 0;
	border: 0;
}

.ord-prose th {
	padding: 12px 12px 12px 0;
	text-align: left;
	border-bottom: var(--ord-hair) solid var(--ord-ink-30);
	color: var(--ord-meta);
	font-family: var(--ord-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	vertical-align: bottom;
}

.ord-prose td {
	padding: 13px 12px 13px 0;
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
	vertical-align: top;
	line-height: 1.45;
}

.ord-prose tr:last-child td {
	border-bottom: 0;
}

.ord-prose th:last-child,
.ord-prose td:last-child {
	padding-right: 0;
}

/* Survey note */
.ord-prose .is-style-survey-note {
	border: var(--ord-rule) solid var(--ord-ink);
	padding: 20px 24px 22px;
	margin-block: 32px;
	background-color: var(--ord-paper);
	background-image:
		repeating-linear-gradient(0deg, var(--ord-ink-07) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(90deg, var(--ord-ink-07) 0 1px, transparent 1px 24px);
	font-size: 16px;
	line-height: 1.55;
}

.ord-prose .is-style-survey-note::before {
	content: "Survey note";
	display: block;
	margin-bottom: 10px;
	color: var(--ord-red-text);
	font-family: var(--ord-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ord-prose .is-style-framed {
	border: var(--ord-rule) solid var(--ord-ink);
	padding: 20px 24px;
	margin-block: 32px;
}

.ord-prose .wp-block-separator,
.ord-prose hr {
	border: 0;
	border-top: var(--ord-rule) solid var(--ord-ink);
	margin-block: 40px;
	height: 0;
}

.ord-prose .wp-block-embed,
.ord-prose .wp-block-video {
	margin-block: 32px;
}

.ord-prose code,
.ord-prose kbd {
	font-family: var(--ord-mono);
	font-size: .88em;
	background: var(--ord-paper-2);
	padding: 2px 5px;
}

.ord-prose pre {
	font-family: var(--ord-mono);
	font-size: 14px;
	line-height: 1.55;
	background: var(--ord-paper-2);
	border: var(--ord-rule) solid var(--ord-ink);
	padding: 18px 20px;
	overflow-x: auto;
	margin-block: 28px;
}

.ord-prose .alignwide {
	width: min(100%, 900px);
}

.ord-prose .alignfull {
	width: 100%;
}

.ord-prose .aligncenter {
	margin-inline: auto;
}

.ord-mark-hit,
.ord-prose mark {
	background: var(--ord-highlight);
	color: var(--ord-ink);
	padding: 0 2px;
}

.ord-linkpages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
	padding-top: 16px;
	border-top: var(--ord-rule) solid var(--ord-ink);
	color: var(--ord-meta);
}

.ord-linkpages a {
	text-decoration: none;
	color: var(--ord-red-text);
}

/* FAQ */

.ord-faq {
	margin-top: 48px;
	padding-top: 8px;
}

.ord-faq__title {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 18px;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.05;
	letter-spacing: -.02em;
}

.ord-h2__num {
	flex: none;
	color: var(--ord-red-text);
	font-family: var(--ord-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .1em;
}

.ord-faq__list {
	border-top: var(--ord-rule) solid var(--ord-ink);
}

.ord-faq__item {
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
}

.ord-faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	transition: color var(--ord-t);
}

.ord-faq__q::-webkit-details-marker {
	display: none;
}

.ord-faq__q:hover {
	color: var(--ord-red-text);
}

.ord-faq__sign {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	align-self: center;
}

.ord-faq__sign::before,
.ord-faq__sign::after {
	content: "";
	position: absolute;
	background: var(--ord-red);
}

.ord-faq__sign::before {
	left: 0;
	right: 0;
	top: 6px;
	height: 2px;
}

.ord-faq__sign::after {
	top: 0;
	bottom: 0;
	left: 6px;
	width: 2px;
}

.ord-faq__item[open] .ord-faq__sign::after {
	display: none;
}

.ord-faq__a {
	padding-bottom: 20px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ord-ink-85);
}

.ord-faq__a > *:last-child {
	margin-bottom: 0;
}

.ord-faq__a p {
	margin-bottom: 14px;
}

.ord-faq__a a {
	color: var(--ord-ink);
	text-decoration-color: var(--ord-red);
}

/* Practical information */

.ord-practical {
	margin-top: 48px;
	padding-block: 48px 56px;
	border-top: var(--ord-rule) solid var(--ord-ink);
	background-color: var(--ord-paper);
}

.ord-practical__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.ord-practical__cols[data-cols="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.ord-practical__cols[data-cols="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ord-practical__cols[data-cols="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ord-practical__col {
	border-top: var(--ord-rule) solid var(--ord-ink);
	padding-top: 14px;
	min-width: 0;
}

.ord-practical__label {
	color: var(--ord-red-text);
	font-weight: 700;
	margin-bottom: 12px;
}

.ord-practical__text {
	font-size: 15px;
	line-height: 1.55;
}

.ord-practical__text p {
	margin-bottom: 12px;
}

.ord-practical__text p:last-child {
	margin-bottom: 0;
}

.ord-related {
	padding-block: 56px 64px;
}

.ord-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px var(--ord-gap-card);
}

.ord-cards--archive {
	padding-top: 48px;
}

/* ---------------------------------------------------------------------------
 * 10. Archives
 * ------------------------------------------------------------------------ */

.ord-archivehead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	padding-block: 44px 30px;
}

.ord-archivehead__h1 {
	margin-top: 12px;
	font-size: clamp(36px, 6vw, 84px);
	line-height: .92;
	letter-spacing: -.035em;
	font-weight: 800;
	font-stretch: 92%;
}

.ord-archivehead__count {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	color: var(--ord-meta);
	text-align: right;
}

.ord-index {
	padding-top: 8px;
}

.ord-index__head,
.ord-index__link {
	display: grid;
	grid-template-columns: 110px 160px minmax(0, 1fr) 190px 120px;
	gap: 24px;
	align-items: start;
}

.ord-index__head {
	padding: 14px 0;
	color: var(--ord-meta);
	font-size: 10px;
	border-bottom: var(--ord-hair) solid var(--ord-ink-30);
}

.ord-index__list {
	list-style: none;
}

.ord-index__row {
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
}

.ord-index__link {
	padding: 18px 0;
	text-decoration: none;
	color: inherit;
	transition: background-color var(--ord-t);
}

.ord-index__row:hover {
	background: var(--ord-paper-2);
	box-shadow: -12px 0 0 var(--ord-paper-2), 12px 0 0 var(--ord-paper-2);
}

.ord-index__row:hover .ord-index__title {
	color: var(--ord-red-text);
}

.ord-index__ref {
	color: var(--ord-red-text);
	font-weight: 700;
	font-size: 11px;
	padding-top: 3px;
}

.ord-index__thumb .ord-frame {
	aspect-ratio: 8 / 5;
}

.ord-index__main {
	min-width: 0;
}

.ord-index__title {
	display: block;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 700;
	transition: color var(--ord-t);
}

.ord-index__dek {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ord-ink-72);
}

.ord-index__tax {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--ord-meta);
	font-size: 10.5px;
	padding-top: 3px;
}

.ord-index__checked {
	color: var(--ord-meta);
	text-align: right;
	font-size: 10.5px;
	padding-top: 3px;
}

@media (max-width: 1099px) {
	.ord-index__head,
	.ord-index__link {
		grid-template-columns: 100px minmax(0, 1fr) 110px;
	}

	.ord-index__thumb,
	.ord-index__head span:nth-child(2),
	.ord-index__head span:nth-child(4) {
		display: none;
	}

	.ord-index__tax {
		display: none;
	}
}

.ord-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 40px;
	padding-block: 16px;
	border-top: var(--ord-rule) solid var(--ord-ink);
	border-bottom: var(--ord-rule) solid var(--ord-ink);
	margin-bottom: 56px;
}

.ord-pagination__count {
	color: var(--ord-meta);
	font-family: var(--ord-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ord-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
}

.ord-pagination__list .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	padding: 8px 11px;
	border: var(--ord-hair) solid var(--ord-meta);
	text-decoration: none;
	font-size: 10.5px;
}

.ord-pagination__list .page-numbers:hover {
	border-color: var(--ord-ink);
}

.ord-pagination__list .page-numbers.current {
	background: var(--ord-ink);
	border-color: var(--ord-ink);
	color: var(--ord-paper);
}

.ord-pagination__list .page-numbers.dots {
	border-color: transparent;
	color: var(--ord-meta);
}

.ord-pagination__next {
	color: var(--ord-red-text);
	text-decoration: none;
}

/* Section (category) header */

.ord-termhead {
	padding-block: 28px 48px;
}

/*
 * The two columns belong to one inner wrapper. Declaring this grid on
 * `.ord-termhead > *` instead made every child its own two-column grid, which
 * scattered the kicker, headline, description and legend across two columns.
 */
.ord-termhead__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 64px;
	align-items: center;
}

.ord-termhead__text {
	min-width: 0;
}

.ord-termhead__h1 {
	margin-top: 10px;
	font-size: clamp(38px, 7vw, 96px);
	line-height: .92;
	letter-spacing: -.035em;
	font-weight: 800;
	font-stretch: 92%;
}

.ord-termhead__intro {
	margin-top: 20px;
	max-width: 560px;
	font-size: 19px;
	line-height: 1.45;
	color: var(--ord-ink-85);
}

.ord-termhead__intro p {
	margin-bottom: 12px;
}

.ord-termhead__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-top: 34px;
	padding-top: 16px;
	border-top: var(--ord-rule) solid var(--ord-ink);
	color: var(--ord-meta);
}

.ord-termhead__legend strong {
	color: var(--ord-red-text);
	font-weight: 700;
}

.ord-termhead__plate {
	min-width: 0;
}

.ord-termhead__frame {
	aspect-ratio: 1 / 1;
	position: relative;
}

.ord-plate__sheet {
	position: absolute;
	right: 14px;
	bottom: 14px;
	color: var(--ord-ink);
	background: var(--ord-paper);
	padding: 5px 8px;
	font-weight: 700;
	font-size: 10.5px;
}

/* Both columns must shrink, or the square plate forces a horizontal scrollbar at
   every width between 768 and 1100. */
.ord-termhead__inner > * {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 11. Search, empty, pages
 * ------------------------------------------------------------------------ */

.ord-searchhead {
	padding-block: 48px 34px;
	border-bottom: var(--ord-rule) solid var(--ord-ink);
}

.ord-searchhead__kicker {
	margin: 0;
	font-weight: 500;
}

.ord-searchhead__h1 {
	margin-top: 14px;
	font-size: clamp(32px, 5vw, 64px);
	line-height: .95;
	letter-spacing: -.03em;
	font-weight: 800;
}

.ord-searchhead__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-top: 14px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--ord-ink);
}

.ord-searchhead__input {
	flex: 1 1 320px;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--ord-sans);
	font-size: clamp(30px, 5.4vw, 64px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
	padding: 0;
	color: var(--ord-ink);
	caret-color: var(--ord-red);
}

.ord-searchhead__input::placeholder {
	color: var(--ord-ink-30);
	opacity: 1;
}

.ord-searchhead__input:focus {
	outline: none;
}

.ord-searchhead__form:focus-within {
	border-bottom-color: var(--ord-red);
}

.ord-searchhead__result {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 14px;
	color: var(--ord-meta);
}

.ord-chips--tabs {
	padding-block: 16px;
	border-bottom: var(--ord-rule) solid var(--ord-ink);
}

.ord-results {
	padding-top: 12px;
}

.ord-result {
	padding: 24px 0;
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
}

.ord-result__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: var(--ord-meta);
	font-size: 10.5px;
}

.ord-tag {
	display: inline-block;
	border: var(--ord-hair) solid var(--ord-ink);
	padding: 4px 7px;
	color: var(--ord-ink);
}

.ord-tag--fill {
	background: var(--ord-ink);
	color: var(--ord-paper);
}

.ord-result__ref {
	color: var(--ord-red-text);
	font-weight: 700;
}

.ord-result__title {
	margin-top: 12px;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
}

.ord-result__title a {
	text-decoration: none;
}

.ord-result__excerpt {
	margin-top: 10px;
	max-width: 760px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ord-ink-78);
}

.ord-result__meta {
	margin-top: 10px;
	color: var(--ord-meta);
	font-size: 10px;
}

.ord-empty {
	padding-block: 56px 72px;
	max-width: 720px;
}

.ord-empty__title {
	margin-top: 12px;
	font-size: clamp(30px, 4.6vw, 44px);
	line-height: 1.05;
	letter-spacing: -.025em;
	font-weight: 700;
}

.ord-empty__text {
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ord-ink-85);
}

.ord-empty__search {
	margin-top: 24px;
}

.ord-empty__search .ord-searchform {
	width: min(100%, 380px);
	height: 44px;
}

.ord-empty__rows {
	margin-top: 40px;
}

.ord-pagehead {
	padding-block: 48px 44px;
	border-bottom: var(--ord-rule) solid var(--ord-ink);
}

.ord-pagehead__h1 {
	margin-top: 12px;
	max-width: 980px;
	font-size: clamp(34px, 5.4vw, 72px);
	line-height: .96;
	letter-spacing: -.03em;
	font-weight: 800;
	font-stretch: 94%;
}

.ord-pagehead__standfirst {
	margin-top: 22px;
	max-width: 720px;
	font-size: 20px;
	line-height: 1.45;
	color: var(--ord-ink-85);
}

/* ---------------------------------------------------------------------------
 * 12. Footer
 * ------------------------------------------------------------------------ */

.ord-footer {
	margin-top: 0;
	background: var(--ord-ink);
	color: var(--ord-paper);
}

.ord-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	max-width: var(--ord-content);
	margin-inline: auto;
	padding: 48px var(--ord-pad-x) 28px;
}

.ord-footer__blurb {
	margin-top: 20px;
	max-width: 340px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ord-paper-70);
}

.ord-footer__coltitle {
	margin-bottom: 12px;
	color: var(--ord-contour);
	font-size: 10px;
	letter-spacing: .14em;
	font-weight: 500;
}

.ord-footer__list {
	list-style: none;
}

.ord-footer__list a {
	display: inline-block;
	padding: 3px 0;
	font-size: 14.5px;
	line-height: 1.7;
	text-decoration: none;
	color: var(--ord-paper-70);
}

.ord-footer__list a:hover {
	color: var(--ord-paper);
}

.ord-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: var(--ord-content);
	margin-inline: auto;
	margin-top: 44px;
	padding: 16px var(--ord-pad-x) 28px;
	border-top: var(--ord-hair) solid var(--ord-paper-25);
	color: var(--ord-paper-60);
	font-size: 10.5px;
}

.ord-footer__bar p {
	margin: 0;
}

.ord-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ord-footer__bar a {
	color: var(--ord-paper-60);
	text-decoration: none;
}

.ord-footer__bar a:hover {
	color: var(--ord-paper);
}

.ord-footer__legallist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	list-style: none;
}

/* ---------------------------------------------------------------------------
 * 13. Comments
 * ------------------------------------------------------------------------ */

.ord-comments {
	padding-block: 48px 64px;
	border-top: var(--ord-rule) solid var(--ord-ink);
	max-width: var(--ord-measure);
}

.ord-comments__title {
	font-size: 26px;
	letter-spacing: -.02em;
	margin-bottom: 24px;
}

.ord-comments .comment-list {
	list-style: none;
}

.ord-comments .comment-list li {
	padding: 18px 0;
	border-bottom: var(--ord-hair) solid var(--ord-ink-20);
}

.ord-comments .comment-list .children {
	list-style: none;
	padding-left: 24px;
	border-left: var(--ord-hair) solid var(--ord-ink-30);
	margin-top: 12px;
}

.ord-comments .comment-meta {
	font-family: var(--ord-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ord-meta);
	margin-bottom: 8px;
}

.ord-comments input[type="text"],
.ord-comments input[type="email"],
.ord-comments input[type="url"],
.ord-comments textarea {
	width: 100%;
	border: var(--ord-rule) solid var(--ord-ink);
	background: transparent;
	padding: 10px 12px;
	font-size: 16px;
}

.ord-comments .submit {
	background: var(--ord-red-text);
	border: var(--ord-rule) solid var(--ord-red-text);
	color: var(--ord-paper);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 22px;
	cursor: pointer;
}

.ord-comments .submit:hover {
	background: var(--ord-ink);
	border-color: var(--ord-ink);
}

/* ---------------------------------------------------------------------------
 * 14. Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
	.ord-body--toc {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ord-toc-wrap {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* On tablet and below the rail becomes the disclosure row the design specifies. */
	.ord-toc {
		border: var(--ord-rule) solid var(--ord-ink);
	}

	.ord-toc__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 14px 16px;
		min-height: 44px;
		cursor: pointer;
		list-style: none;
		color: var(--ord-ink);
	}

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

	.ord-toc__summary-count {
		color: var(--ord-meta);
	}

	.ord-toc__chev {
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--ord-red);
		border-bottom: 2px solid var(--ord-red);
		transform: rotate(45deg) translate(-2px, -2px);
		flex: none;
	}

	.ord-toc[open] .ord-toc__chev {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.ord-toc__nav {
		padding: 0 16px 16px;
	}

	.ord-prose {
		max-width: none;
	}

	.ord-articlehead--glance {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ord-featured__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.ord-featured__stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ord-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ord-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ord-termhead__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ord-termhead__frame {
		aspect-ratio: 16 / 9;
	}

	.ord-essentials {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ord-practical__cols,
	.ord-practical__cols[data-cols="3"],
	.ord-practical__cols[data-cols="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.ord-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 32px 40px;
	}

	.ord-hero__figure .ord-frame {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.ord-hero__actions .ord-btn {
		flex: 1 1 100%;
	}

	.ord-legend {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ord-legend__cell:nth-child(odd) {
		border-left: 0;
	}

	.ord-legend__cell:nth-child(n + 3) {
		border-top: var(--ord-hair) solid var(--ord-ink-30);
	}

	.ord-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
		padding-block: 36px 20px;
	}

	.ord-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 639px) {
	body.ord {
		font-size: 16.5px;
	}

	.ord-featured,
	.ord-sections,
	.ord-essentials,
	.ord-related {
		padding-block: 36px 40px;
	}

	.ord-featured__stack,
	.ord-cards,
	.ord-tiles,
	.ord-practical__cols,
	.ord-practical__cols[data-cols="2"],
	.ord-practical__cols[data-cols="3"],
	.ord-practical__cols[data-cols="4"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.ord-textrow {
		grid-template-columns: minmax(0, 1fr);
	}

	.ord-textrow__cell {
		padding: 16px 0;
		border-left: 0;
		border-bottom: var(--ord-hair) solid var(--ord-ink-20);
	}

	.ord-prose {
		font-size: 16.5px;
		line-height: 1.6;
	}

	.ord-prose > p:first-of-type {
		font-size: 18px;
		line-height: 1.55;
	}

	.ord-index__head {
		display: none;
	}

	.ord-index__link {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 16px;
		padding: 16px 0;
	}

	.ord-index__ref {
		order: 1;
	}

	.ord-index__checked {
		order: 2;
	}

	.ord-index__main {
		order: 3;
		grid-column: 1 / -1;
	}

	.ord-rows__link {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 12px;
	}

	.ord-rows__meta {
		grid-column: 2;
		text-align: left;
	}

	.ord-glance__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-block: 4px;
	}

	.ord-glance__row dt {
		padding-bottom: 0;
	}

	.ord-glance__row dd {
		padding-top: 2px;
	}

	.ord-archivehead {
		align-items: flex-start;
	}

	.ord-archivehead__count {
		align-items: flex-start;
		text-align: left;
	}

	.ord-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ord-pagination {
		justify-content: flex-start;
	}
}

/*
 * WCAG 2.5.8: every standalone control needs 24x24. The comp's mono links, sort
 * links and rail utilities are 14-22px tall, so at touch widths they are padded to
 * the minimum without moving the text they sit next to.
 */
@media (max-width: 767px) {
	.ord-monolink,
	.ord-sort__link,
	.ord-toc__util,
	.ord-pagination__next,
	.ord-pagination__list .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 24px;
		min-width: 24px;
	}

	.ord-sort__list {
		gap: 4px 16px;
	}

	.ord-toc__utils {
		gap: 2px;
	}
}

/* The mono scale bottoms out at 10px so information-carrying labels stay legible;
   the comp goes to 9px, which is below what the design system can justify. */
@media (max-width: 480px) {
	.ord-mono,
	.ord-kicker {
		font-size: 10.5px;
	}

	.ord-strip {
		font-size: 10px;
	}
}