/*
 * Expedition Journal
 *
 * Ordered: tokens, fonts, reset, page frame, masthead, front page, entry,
 * components, hub, search, 404, footer, responsive, motion and focus.
 *
 * Two rules govern the whole sheet. Rust is an accent, never a large field.
 * Nothing has a border radius or a shadow; structure is drawn with rules.
 */

/* ------------------------------------------------------------------ Fonts */

@font-face {
	font-family: "Gloock";
	src: url("../fonts/Gloock-Regular-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gloock";
	src: url("../fonts/Gloock-Regular-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4-Regular-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4-Regular-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4-Italic-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4-Italic-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- Tokens */

:root {
	--ej-paper: #f6f0e4;
	--ej-paper-deep: #efe6d3;
	--ej-plate: #e6dcc6;
	--ej-ink: #1b2a41;
	--ej-ink-soft: #4a5262;
	--ej-muted: #6b6455;
	--ej-rust: #a63d2f;

	--ej-rule: rgba(27, 42, 65, 0.25);
	--ej-rule-soft: rgba(27, 42, 65, 0.2);
	--ej-rule-mid: rgba(27, 42, 65, 0.35);
	--ej-rule-nav: rgba(27, 42, 65, 0.3);
	--ej-leader: rgba(27, 42, 65, 0.5);

	--ej-hairline: 1px solid var(--ej-rule);
	--ej-strong: 1px solid var(--ej-ink);
	--ej-double: 3px double var(--ej-ink);

	--ej-display: Gloock, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--ej-text: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;

	--ej-container: 1280px;
	--ej-pad: 40px;
	--ej-column: 700px;
	--ej-sticky-top: 24px;
}

/* ------------------------------------------------------------------ Reset */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ej-paper);
	color: var(--ej-ink);
	font-family: var(--ej-text);
	font-size: 18px;
	line-height: 1.65;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--ej-rust);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: from-font;
	transition: color 0.15s ease;
}

a:hover,
a:focus-visible {
	color: var(--ej-ink);
}

button {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--ej-display);
	font-weight: 400;
	margin: 0;
}

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

p:last-child {
	margin-bottom: 0;
}

::selection {
	background: var(--ej-paper-deep);
	color: var(--ej-ink);
}

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

.skip-link:focus-visible {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--ej-ink);
	color: var(--ej-paper);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- Page frame */

.ej-page {
	max-width: var(--ej-container);
	margin: 0 auto;
	background: var(--ej-paper);
}

.ej-main > * {
	max-width: none;
}

/* Every full-bleed band inside the container is padded to the same gutter. */
.ej-topbar,
.ej-masthead__lockup,
.ej-masthead__row,
.ej-nav--full,
.ej-breadcrumb,
.ej-orientation,
.ej-log,
.ej-chapters,
.ej-plates,
.ej-chapter-head,
.ej-feature,
.ej-hub,
.ej-archive-head,
.ej-entry__hero,
.ej-entry__footer,
.ej-pagination,
.ej-footer,
.ej-comments-wrap,
.ej-cards,
.ej-empty,
.ej-page-links {
	padding-inline: var(--ej-pad);
}

/* --------------------------------------------------------------- Masthead */

.ej-topbar {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding-block: 10px;
	border-bottom: var(--ej-hairline);
}

.ej-topbar__item {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ej-muted);
	line-height: 1.4;
}

.ej-masthead--full .ej-masthead__lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-block: 34px 22px;
	border-bottom: var(--ej-double);
	text-align: center;
}

.ej-masthead__title {
	margin: 0;
	font-family: var(--ej-display);
	font-weight: 400;
	font-size: 46px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	/* The tracking is applied to the right of every letter, including the
	   last, which pushes a centred title left by half a space. */
	text-indent: 0.2em;
}

.ej-masthead__title a {
	color: inherit;
	text-decoration: none;
}

.ej-masthead__tagline {
	margin: 0;
	font-style: italic;
	font-size: 15px;
	color: var(--ej-muted);
	line-height: 1.5;
}

.ej-masthead--full .custom-logo {
	width: auto;
	max-height: 54px;
}

.ej-masthead--compact .ej-masthead__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
	border-bottom: var(--ej-double);
}

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

.ej-lockup .ej-masthead__title {
	font-size: 20px;
	letter-spacing: 0.18em;
	text-indent: 0;
}

.ej-lockup .custom-logo {
	width: auto;
	max-height: 30px;
}

.ej-masthead__search {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ej-muted);
	flex: none;
}

.ej-masthead__search:hover,
.ej-masthead__search:focus-visible {
	color: var(--ej-rust);
}

.ej-masthead__search--current {
	color: var(--ej-rust);
	border-bottom: 1px solid var(--ej-rust);
}

/* ------------------------------------------------------------- Navigation */

.ej-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ej-nav a,
.ej-nav__toggle {
	text-decoration: none;
	color: inherit;
	display: inline-block;
	background: none;
	border: 0;
	cursor: pointer;
	letter-spacing: inherit;
	text-transform: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.6;
}

.ej-nav a:hover,
.ej-nav a:focus-visible,
.ej-nav__toggle:hover,
.ej-nav__toggle:focus-visible {
	color: var(--ej-rust);
}

/* The full navigation: a centred row of chapters divided by hairlines. */
.ej-nav--full {
	padding-block: 12px;
	border-bottom: var(--ej-hairline);
}

.ej-nav--full .ej-nav__list {
	justify-content: center;
	flex-wrap: wrap;
	row-gap: 4px;
}

/* The dividers are drawn on the left of every item but the first, not on the
   right of every item but the last. The overflow item can be hidden, and a
   trailing rule with nothing after it is the tell that it was. */
.ej-nav--full .ej-nav__item > a,
.ej-nav--full .ej-nav__toggle,
.ej-nav--full .menu-item > a {
	padding: 0 16px;
}

.ej-nav--full .ej-nav__item + .ej-nav__item > a,
.ej-nav--full .ej-nav__item + .ej-nav__item > .ej-nav__toggle,
.ej-nav--full .menu-item + .menu-item > a {
	border-left: 1px solid var(--ej-rule-nav);
}

/* The compact navigation: a plain row beside the lockup. */
.ej-nav--compact {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.ej-nav--compact .ej-nav__list {
	gap: 22px;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 6px;
}

.ej-nav__item--current > a,
.ej-nav__item--current > .ej-nav__toggle,
.ej-nav .current-menu-item > a,
.ej-nav .current-cat > a {
	color: var(--ej-rust);
	border-bottom: 1px solid var(--ej-rust);
	padding-bottom: 1px;
}

.ej-nav__item--more {
	position: relative;
}

.ej-nav__chevron {
	margin-left: 6px;
	font-size: 9px;
	vertical-align: 1px;
}

.ej-nav__more {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% + 10px);
	right: 0;
	min-width: 220px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--ej-paper);
	border: var(--ej-strong);
	text-align: left;
}

.ej-nav--full .ej-nav__more {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.ej-nav__more a {
	display: block;
	padding: 7px 18px;
	border: 0;
}

/* Without JavaScript the overflow chapters open on hover and on focus, so
   they are never unreachable. Once the script has run, the button owns it. */
.ej-nav__item--more:hover .ej-nav__more,
.ej-nav__item--more:focus-within .ej-nav__more {
	display: block;
}

.ej-js .ej-nav__item--more:hover .ej-nav__more,
.ej-js .ej-nav__item--more:focus-within .ej-nav__more {
	display: none;
}

.ej-js .ej-nav__toggle[aria-expanded="true"] + .ej-nav__more {
	display: block;
}

/* -------------------------------------------------------------- Breadcrumb */

.ej-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding-top: 18px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-muted);
	line-height: 1.5;
}

.ej-breadcrumb a,
.ej-breadcrumb .rank-math-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.ej-breadcrumb a:hover,
.ej-breadcrumb a:focus-visible {
	color: var(--ej-rust);
}

.ej-breadcrumb > span[aria-current],
.ej-breadcrumb .last {
	color: var(--ej-rust);
}

.ej-breadcrumb .rank-math-breadcrumb p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
}

/* ----------------------------------------------------------------- Labels */

.ej-label {
	display: block;
	font-family: var(--ej-text);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 0;
}

.ej-label--rust {
	color: var(--ej-rust);
}

.ej-label--meta {
	color: var(--ej-muted);
}

.ej-label--section {
	letter-spacing: 0.2em;
	color: var(--ej-ink);
}

.ej-section-head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
}

.ej-section-head__rule {
	flex: 1;
	border-top: 1px solid var(--ej-rule-mid);
}

.ej-section-head__label {
	font-family: var(--ej-text);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.4;
	text-align: center;
}

/* A text-link action: small capitals with a rust rule beneath. */
.ej-action {
	align-self: flex-start;
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-rust);
	text-decoration: none;
	border-bottom: 1px solid var(--ej-rust);
	padding-bottom: 3px;
	line-height: 1.4;
}

.ej-action:hover,
.ej-action:focus-visible {
	color: var(--ej-ink);
	border-bottom-color: var(--ej-ink);
}

.ej-action--ink {
	color: var(--ej-ink);
	border-bottom-color: var(--ej-ink);
}

.ej-action--ink:hover,
.ej-action--ink:focus-visible {
	color: var(--ej-rust);
	border-bottom-color: var(--ej-rust);
}

/* ------------------------------------------------------------- Front page */

.ej-orientation {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	padding-block: 56px 48px;
	border-bottom: var(--ej-hairline);
	align-items: start;
}

.ej-orientation > * {
	min-width: 0;
}

.ej-orientation__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ej-orientation__heading {
	font-size: 62px;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ej-orientation__heading a {
	color: inherit;
	text-decoration: none;
}

.ej-orientation__heading a:hover,
.ej-orientation__heading a:focus-visible {
	color: var(--ej-rust);
}

.ej-orientation__lead {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
}

.ej-orientation__lead::first-letter {
	float: left;
	font-family: var(--ej-display);
	font-size: 78px;
	line-height: 0.78;
	padding: 8px 10px 0 0;
	color: var(--ej-rust);
}

.ej-orientation__body {
	margin: 0;
	font-size: 16px;
	color: var(--ej-ink-soft);
	line-height: 1.6;
}

.ej-log {
	padding-block: 48px;
	border-bottom: var(--ej-hairline);
}

.ej-log__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

/* One or two entries should not sit as orphans in a three-column row, and a
   single one should not run to a 1200px measure. */
.ej-log__grid[data-count="1"] {
	grid-template-columns: minmax(0, 620px);
}

.ej-log__grid[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ej-log__entry {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ej-log__entry .ej-label {
	font-size: 11px;
}

.ej-log__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.ej-log__body a {
	color: inherit;
	text-decoration: none;
}

.ej-log__body a:hover,
.ej-log__body a:focus-visible {
	color: var(--ej-rust);
}

.ej-chapters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	padding-block: 48px;
	border-bottom: var(--ej-hairline);
}

.ej-chapters--full {
	grid-template-columns: 1fr;
}

/* With no plate to sit beside, the orientation text takes the reading measure
   rather than half of an empty row. */
.ej-orientation--textonly {
	grid-template-columns: minmax(0, 760px);
}

.ej-chapters--full .ej-pullquote {
	border-left: 0;
	padding-left: 0;
	max-width: 760px;
}

.ej-chapters > * {
	min-width: 0;
}

.ej-chapters__list .ej-label--section {
	margin-bottom: 22px;
}

.ej-contents__row {
	display: flex;
	align-items: baseline;
	padding: 11px 0;
	border-top: 1px solid var(--ej-rule-soft);
	text-decoration: none;
	color: inherit;
	gap: 0;
}

.ej-contents__row:last-child {
	border-bottom: 1px solid var(--ej-rule-soft);
}

.ej-contents__numeral {
	width: 40px;
	flex: none;
	color: var(--ej-rust);
	font-size: 13px;
}

.ej-contents__title {
	font-family: var(--ej-display);
	font-size: 19px;
	line-height: 1.3;
}

.ej-contents__row:hover .ej-contents__title,
.ej-contents__row:focus-visible .ej-contents__title {
	color: var(--ej-rust);
}

.ej-contents__leader {
	flex: 1;
	min-width: 18px;
	border-bottom: 1px dotted var(--ej-leader);
	margin: 0 10px 5px;
}

.ej-contents__gloss {
	font-style: italic;
	font-size: 14px;
	color: var(--ej-muted);
	flex: none;
	max-width: 45%;
	text-align: right;
}

.ej-pullquote {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	padding: 12px 0 12px 48px;
	border-left: var(--ej-hairline);
}

.ej-pullquote__text {
	margin: 0;
	border: 0;
	padding: 0;
	font-style: italic;
	font-weight: 300;
	font-size: 30px;
	line-height: 1.35;
	text-wrap: balance;
	quotes: "“" "”";
}

.ej-pullquote__text::before {
	content: open-quote;
}

.ej-pullquote__text::after {
	content: close-quote;
}

.ej-plates {
	padding-block: 48px;
	border-bottom: var(--ej-double);
}

.ej-plates__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ej-plates__item {
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.ej-plates__item:hover .ej-plate__caption,
.ej-plates__item:focus-visible .ej-plate__caption {
	color: var(--ej-rust);
}

/* ------------------------------------------------------------------ Plate */

.ej-plate {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ej-plate__frame {
	display: block;
	border: var(--ej-strong);
	padding: 5px;
	background: var(--ej-paper);
}

.ej-plate--double .ej-plate__frame {
	padding: 6px;
	outline: 1px solid var(--ej-ink);
	outline-offset: -12px;
}

.ej-plate__frame img,
.ej-plate__blank {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--ej-plate);
	aspect-ratio: 3 / 2;
}

.ej-plate__caption {
	font-style: italic;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ej-muted);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	transition: color 0.15s ease;
}

.ej-plate__number {
	font-style: italic;
}

.ej-plate__credit {
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	flex: none;
}

.ej-plate--centred .ej-plate__caption {
	justify-content: center;
	text-align: center;
}

/* Fixed plate heights, as in the comp. Below the wide breakpoint the frames
   fall back to an aspect ratio so the crop stays sane on a narrow screen. */
.ej-plate--tall .ej-plate__frame img,
.ej-plate--tall .ej-plate__blank {
	height: 472px;
	aspect-ratio: auto;
}

.ej-plate--hero .ej-plate__frame img,
.ej-plate--hero .ej-plate__blank {
	height: 520px;
	aspect-ratio: auto;
}

.ej-plate--feature .ej-plate__frame img,
.ej-plate--feature .ej-plate__blank {
	height: 380px;
	aspect-ratio: auto;
}

.ej-plate--card .ej-plate__frame img,
.ej-plate--card .ej-plate__blank {
	height: 230px;
	aspect-ratio: auto;
}

.ej-plates__grid .ej-plate__frame img,
.ej-plates__grid .ej-plate__blank {
	height: 250px;
	aspect-ratio: auto;
}

.ej-related__grid .ej-plate__frame img,
.ej-related__grid .ej-plate__blank {
	height: 220px;
	aspect-ratio: auto;
}

.ej-plate--hero .ej-plate__frame {
	padding: 6px;
}

.ej-entry__hero {
	padding-bottom: 8px;
}

.ej-entry__hero .ej-plate__caption {
	padding: 10px 4px 0;
}

/* ------------------------------------------------------------ Entry header */

.ej-entry__header {
	max-width: 800px;
	margin: 0 auto;
	padding: 48px var(--ej-pad) 36px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.ej-entry__title {
	font-size: 54px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ej-entry__standfirst {
	margin: 0;
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: var(--ej-ink-soft);
	max-width: 680px;
}

.ej-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: baseline;
	justify-content: center;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ej-muted);
	padding-top: 8px;
	border-top: var(--ej-hairline);
	width: 100%;
	line-height: 1.6;
}

.ej-byline__author,
.ej-chapter-head__editor {
	color: var(--ej-ink);
}

.ej-byline__sep {
	color: var(--ej-rule-mid);
}

.ej-byline time {
	color: inherit;
}

/* ----------------------------------------------------------- Reading grid */

.ej-reading {
	display: grid;
	grid-template-columns: 180px var(--ej-column) 200px;
	column-gap: 48px;
	row-gap: 0;
	padding: 40px var(--ej-pad) 0;
	align-items: start;
	justify-content: center;
}

/* Everything the editor wrote lands in the middle column; the contents rail
   and the margin notes are the two exceptions, placed explicitly. */
.ej-reading > * {
	grid-column: 2;
	min-width: 0;
}

.ej-reading > .ej-toc {
	grid-column: 1;
}

.ej-reading > .ej-margin-note {
	grid-column: 3;
}

.ej-reading--single {
	grid-template-columns: minmax(0, var(--ej-column));
}

.ej-reading--single > * {
	grid-column: 1;
}

/* ------------------------------------------------------- Contents rail */

.ej-toc {
	position: sticky;
	top: var(--ej-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 13px;
	line-height: 1.4;
	align-self: start;
}

.ej-toc__toggle {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: var(--ej-strong);
	padding: 0 0 10px;
	font-family: var(--ej-text);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-muted);
	cursor: default;
}

.ej-toc__chevron {
	display: none;
}

.ej-toc__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ej-toc__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ej-toc__link {
	display: flex;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	align-items: baseline;
}

.ej-toc__numeral {
	width: 22px;
	flex: none;
	font-size: 12px;
	color: var(--ej-rust);
}

.ej-toc__link:hover,
.ej-toc__link:focus-visible,
.ej-toc__link--current {
	color: var(--ej-rust);
}

.ej-toc__link--current .ej-toc__text {
	color: var(--ej-rust);
}

.ej-toc__siblings {
	margin-top: 18px;
	padding-top: 14px;
	border-top: var(--ej-hairline);
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 12px;
	color: var(--ej-muted);
}

.ej-toc__siblings .ej-label {
	font-size: 11px;
}

.ej-toc__sibling {
	text-decoration: none;
	color: var(--ej-ink);
	line-height: 1.4;
}

.ej-toc__sibling:hover,
.ej-toc__sibling:focus-visible {
	color: var(--ej-rust);
}

/* ----------------------------------------------------------- Entry body */

.ej-reading p {
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 1.65;
}

.ej-reading > p:first-of-type::first-letter {
	float: left;
	font-family: var(--ej-display);
	font-size: 74px;
	line-height: 0.78;
	padding: 8px 10px 0 0;
	color: var(--ej-rust);
}

.ej-entry--page .ej-reading > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	font-family: inherit;
	padding: 0;
	color: inherit;
	line-height: inherit;
}

.ej-reading h2 {
	font-size: 32px;
	line-height: 1.15;
	margin: 18px 0 14px;
	display: flex;
	gap: 16px;
	align-items: baseline;
	scroll-margin-top: 24px;
}

.ej-reading h3 {
	font-size: 23px;
	line-height: 1.22;
	margin: 24px 0 10px;
	scroll-margin-top: 24px;
}

.ej-reading h4 {
	font-size: 19px;
	line-height: 1.25;
	margin: 20px 0 8px;
}

.ej-heading__numeral {
	font-family: var(--ej-text);
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--ej-rust);
	flex: none;
	line-height: 1.4;
}

.ej-reading ol,
.ej-reading ul {
	margin: 0 0 30px;
	font-size: 17px;
	line-height: 1.6;
}

.ej-reading ol {
	padding-left: 24px;
}

.ej-reading li {
	margin-bottom: 8px;
}

/* Plain unordered lists become em-dash rows separated by hairlines.
 *
 * The marker is positioned rather than laid out as a flex item: a list item
 * usually opens with a bold lead-in phrase, and flex would make that phrase a
 * column of its own with the rest of the sentence beside it. */
.ej-reading ul.ej-list {
	list-style: none;
	padding: 0;
}

.ej-reading ul.ej-list > li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 28px;
	border-top: var(--ej-hairline);
}

.ej-reading ul.ej-list > li:last-child {
	border-bottom: var(--ej-hairline);
}

.ej-reading ul.ej-list > li::before {
	content: "—";
	position: absolute;
	left: 0;
	top: 12px;
	color: var(--ej-rust);
}

.ej-reading ul:not(.ej-list) {
	padding-left: 20px;
}

.ej-reading li > ul,
.ej-reading li > ol {
	margin: 8px 0 0;
}

.ej-reading blockquote {
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	font-style: italic;
	font-weight: 300;
	font-size: 22px;
	line-height: 1.35;
}

.ej-reading blockquote cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-muted);
}

.ej-reading strong,
.ej-reading b {
	font-weight: 600;
}

.ej-reading hr {
	border: 0;
	border-top: var(--ej-strong);
	margin: 34px 0;
}

/* The FAQ tail of an entry: questions in the display face, on hairlines. */
.ej-reading h3.ej-faq__question {
	font-size: 19px;
	line-height: 1.3;
	margin: 26px 0 8px;
	padding-top: 18px;
	border-top: var(--ej-hairline);
}

.ej-reading .ej-faq__answer {
	color: var(--ej-ink-soft);
	font-size: 17px;
}

/* The sources list at the end of an entry. */
.ej-reading h2.ej-heading--sources {
	padding-top: 22px;
	border-top: var(--ej-double);
	margin-top: 36px;
	font-family: var(--ej-text);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-muted);
	gap: 6px;
}

.ej-reading h2.ej-heading--sources .ej-heading__numeral {
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--ej-muted);
}

.ej-reading .ej-sources {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ej-ink-soft);
	gap: 4px;
}

.ej-sources-block {
	margin: 0 0 30px;
	padding-top: 22px;
	border-top: var(--ej-double);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* -------------------------------------------------------------- Callouts */

.ej-log-entry {
	margin: 0 0 30px;
	background: var(--ej-paper-deep);
	padding: 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ej-log-entry .ej-label {
	font-size: 11px;
}

.ej-log-entry__body p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
}

.ej-log-entry__body p:last-child {
	margin-bottom: 0;
}

.ej-margin-note {
	font-style: italic;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ej-muted);
	border-left: var(--ej-hairline);
	padding-left: 14px;
	margin: 0 0 22px;
}

.ej-margin-note__label {
	display: block;
	margin-bottom: 4px;
	font-style: normal;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-rust);
}

.ej-margin-note p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* ---------------------------------------------------------------- Tables */

.ej-table-scroll {
	margin: 6px 0 30px;
	overflow-x: auto;
	border-top: var(--ej-strong);
	border-bottom: var(--ej-strong);
}

.ej-reading table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

.ej-reading th,
.ej-reading td {
	text-align: left;
	padding: 12px 16px 12px 0;
	border-bottom: var(--ej-hairline);
	vertical-align: top;
}

.ej-reading tr:last-child td {
	border-bottom: 0;
}

.ej-reading thead th {
	padding: 10px 16px 10px 0;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ej-muted);
}

.ej-reading tbody td:first-child {
	font-weight: 600;
}

.ej-reading th:last-child,
.ej-reading td:last-child {
	padding-right: 0;
}

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

.ej-author {
	margin: 6px 0 40px;
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 20px 0;
	border-top: var(--ej-hairline);
	border-bottom: var(--ej-hairline);
}

.ej-author__portrait {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ej-plate);
	display: block;
}

.ej-author__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ej-author__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ej-author__name {
	font-family: var(--ej-display);
	font-size: 18px;
	line-height: 1.3;
}

.ej-author__bio {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ej-ink-soft);
}

/* ---------------------------------------------------- Previous and next */

.ej-entry__footer {
	padding-bottom: 48px;
}

.ej-prevnext {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
	border-top: var(--ej-strong);
	border-bottom: var(--ej-strong);
}

.ej-prevnext__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	max-width: 46%;
}

.ej-prevnext__link--next {
	text-align: right;
	align-items: flex-end;
}

.ej-prevnext__title {
	font-family: var(--ej-display);
	font-size: 19px;
	line-height: 1.25;
}

.ej-prevnext__link:hover .ej-prevnext__title,
.ej-prevnext__link:focus-visible .ej-prevnext__title {
	color: var(--ej-rust);
}

.ej-related {
	margin-top: 44px;
}

.ej-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* ------------------------------------------------------------------ Cards */

.ej-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.ej-card__title {
	font-family: var(--ej-display);
	font-size: 23px;
	line-height: 1.22;
	transition: color 0.15s ease;
}

.ej-related__grid .ej-card__title {
	font-size: 21px;
	line-height: 1.25;
}

.ej-card:hover .ej-card__title,
.ej-card:focus-visible .ej-card__title {
	color: var(--ej-rust);
}

.ej-card__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ej-ink-soft);
}

.ej-cards {
	display: grid;
	gap: 36px 28px;
}

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

.ej-cards--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-block: 40px 8px;
}

/* --------------------------------------------------------- Chapter hub */

.ej-chapter-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	padding-block: 40px 44px;
	border-bottom: var(--ej-hairline);
	align-items: end;
}

.ej-chapter-head > * {
	min-width: 0;
}

.ej-chapter-head__name,
.ej-chapter-head__note {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ej-chapter-head__numeral {
	font-family: var(--ej-display);
	font-size: 16px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ej-rust);
	line-height: 1.4;
}

.ej-chapter-head__title {
	font-size: 72px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ej-chapter-head__intro {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
}

.ej-byline--chapter {
	justify-content: flex-start;
	border-top: 0;
	padding-top: 0;
	width: auto;
}

.ej-feature {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	padding-block: 40px;
	border-bottom: var(--ej-hairline);
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.ej-feature > * {
	min-width: 0;
}

.ej-feature__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ej-feature__title {
	font-family: var(--ej-display);
	font-size: 36px;
	line-height: 1.12;
	text-wrap: balance;
	transition: color 0.15s ease;
}

.ej-feature:hover .ej-feature__title,
.ej-feature:focus-visible .ej-feature__title {
	color: var(--ej-rust);
}

.ej-feature__excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ej-ink-soft);
}

.ej-hub {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	padding-block: 44px 48px;
	align-items: start;
}

.ej-hub__contents {
	position: sticky;
	top: var(--ej-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	align-self: start;
	min-width: 0;
}

.ej-hub__entries {
	min-width: 0;
}

.ej-hub .ej-cards {
	padding-inline: 0;
}

.ej-subtopics {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ej-subtopics__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	line-height: 1.4;
}

.ej-subtopics__row:hover,
.ej-subtopics__row:focus-visible,
.ej-subtopics__row--current {
	color: var(--ej-rust);
}

.ej-subtopics__count {
	font-size: 12px;
	color: var(--ej-muted);
	flex: none;
}

.ej-subtopics__numeral {
	flex: none;
	width: 22px;
	font-size: 12px;
	color: var(--ej-rust);
}

.ej-subtopics__name {
	flex: 1;
}

.ej-reading-order {
	margin-top: 14px;
	padding: 16px 18px;
	background: var(--ej-paper-deep);
	font-size: 13px;
	line-height: 1.55;
	color: var(--ej-ink-soft);
}

.ej-reading-order__label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-rust);
}

.ej-archive-head {
	padding-block: 40px 0;
}

.ej-archive-head__title {
	font-size: 54px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.ej-archive-head__description {
	margin-top: 14px;
	font-size: 18px;
	line-height: 1.6;
	max-width: 700px;
	color: var(--ej-ink-soft);
}

/* ------------------------------------------------------------ Pagination */

.ej-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
	padding-block: 16px;
	border-top: var(--ej-strong);
	border-bottom: var(--ej-strong);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ej-pagination__pages {
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
}

.ej-pagination a,
.ej-pagination .page-numbers {
	text-decoration: none;
	color: inherit;
}

.ej-pagination .current {
	color: var(--ej-rust);
	border-bottom: 1px solid var(--ej-rust);
}

.ej-pagination a:hover,
.ej-pagination a:focus-visible {
	color: var(--ej-rust);
}

.ej-pagination .dots {
	color: var(--ej-muted);
}

.ej-page-links {
	margin: 0 0 24px;
	display: flex;
	gap: 10px;
}

/* ---------------------------------------------------------------- Search */

.ej-search {
	max-width: 800px;
	margin: 0 auto;
	padding: 56px var(--ej-pad) 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ej-search__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ej-search__row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	border-bottom: var(--ej-strong);
	padding-bottom: 10px;
}

.ej-search__field {
	flex: 1;
	min-width: 0;
	font-family: var(--ej-display);
	font-size: 44px;
	line-height: 1.1;
	background: none;
	border: 0;
	padding: 0;
	color: var(--ej-ink);
	caret-color: var(--ej-rust);
}

.ej-search__field::placeholder {
	color: var(--ej-muted);
	opacity: 1;
}

.ej-search__field:focus {
	outline: none;
}

.ej-search__row:focus-within {
	border-bottom-color: var(--ej-rust);
}

.ej-search__count {
	flex: none;
}

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

.ej-chip {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid var(--ej-rule-nav);
	color: var(--ej-muted);
	text-decoration: none;
	line-height: 1.6;
}

.ej-chip:hover,
.ej-chip:focus-visible {
	border-color: var(--ej-rust);
	color: var(--ej-rust);
}

.ej-chip--on {
	border-color: var(--ej-ink);
	color: var(--ej-ink);
}

.ej-results {
	max-width: 800px;
	margin: 0 auto;
	padding: 12px var(--ej-pad) 32px;
	display: flex;
	flex-direction: column;
}

.ej-result {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 24px;
	padding: 22px 0;
	border-top: var(--ej-hairline);
	text-decoration: none;
	color: inherit;
}

.ej-result:last-child {
	border-bottom: var(--ej-hairline);
}

.ej-result .ej-label {
	font-size: 11px;
	line-height: 1.8;
}

.ej-result__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ej-result__title {
	font-family: var(--ej-display);
	font-size: 22px;
	line-height: 1.25;
	transition: color 0.15s ease;
}

.ej-result:hover .ej-result__title,
.ej-result:focus-visible .ej-result__title {
	color: var(--ej-rust);
}

.ej-result__excerpt {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ej-ink-soft);
}

.ej-result__excerpt mark,
.ej-reading mark {
	background: var(--ej-paper-deep);
	color: inherit;
	font-weight: inherit;
	padding: 0 1px;
}

.ej-empty-state {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px var(--ej-pad) 88px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.ej-empty-state__line {
	margin: 0;
	font-family: var(--ej-display);
	font-size: 32px;
	line-height: 1.2;
}

.ej-empty-state .ej-chips {
	justify-content: center;
}

.ej-empty {
	padding-block: 48px;
	color: var(--ej-muted);
	font-style: italic;
}

.ej-searchform {
	display: flex;
	gap: 12px;
	align-items: baseline;
	border-bottom: var(--ej-strong);
	padding-bottom: 8px;
}

.ej-searchform__field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	padding: 0;
}

.ej-searchform__submit {
	flex: none;
	background: none;
	border: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-rust);
	cursor: pointer;
}

/* ------------------------------------------------------------------- 404 */

.ej-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: 88px var(--ej-pad) 96px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.ej-404__mark {
	transform: rotate(23deg);
}

.ej-404__title {
	font-size: 64px;
	line-height: 1;
}

.ej-404__body {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ej-ink-soft);
	max-width: 520px;
}

.ej-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	padding-top: 8px;
}

/* -------------------------------------------------------------- Comments */

.ej-comments-wrap {
	padding-bottom: 48px;
}

.ej-comments {
	max-width: 700px;
	margin: 0 auto;
	padding-top: 40px;
	border-top: var(--ej-hairline);
}

.ej-comments__list,
.ej-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ej-comments__list .children {
	padding-left: 28px;
	border-left: var(--ej-hairline);
	margin-top: 18px;
}

.ej-comments__list li.comment {
	padding: 20px 0;
	border-bottom: var(--ej-hairline);
}

.ej-comments .comment-meta {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ej-muted);
	margin-bottom: 10px;
}

.ej-comments .comment-author img {
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}

.ej-comments .comment-content {
	font-size: 16px;
	line-height: 1.6;
}

.ej-comments input[type="text"],
.ej-comments input[type="email"],
.ej-comments input[type="url"],
.ej-comments textarea {
	width: 100%;
	font: inherit;
	font-size: 16px;
	color: inherit;
	background: none;
	border: 0;
	border-bottom: var(--ej-strong);
	padding: 8px 0;
}

.ej-comments label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-muted);
	margin-bottom: 4px;
}

.ej-comments .comment-form > p {
	margin-bottom: 20px;
}

.ej-button,
.ej-comments input[type="submit"] {
	background: none;
	border: var(--ej-strong);
	border-radius: 0;
	padding: 11px 18px;
	font-family: var(--ej-text);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ej-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ej-button:hover,
.ej-comments input[type="submit"]:hover {
	background: var(--ej-ink);
	color: var(--ej-paper);
}

/* ---------------------------------------------------------------- Footer */

.ej-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	border-top: var(--ej-double);
	padding-block: 28px 24px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ej-muted);
	line-height: 1.6;
}

.ej-front .ej-footer {
	border-top: 0;
}

.ej-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.ej-footer a {
	color: inherit;
	text-decoration: none;
}

.ej-footer a:hover,
.ej-footer a:focus-visible {
	color: var(--ej-rust);
}

/* ------------------------------------------------------ Core block guards */

.ej-reading .alignwide,
.ej-reading .alignfull {
	width: auto;
	max-width: 100%;
}

.ej-reading .wp-block-embed,
.ej-reading .wp-block-video,
.ej-reading iframe {
	max-width: 100%;
	margin-bottom: 30px;
}

.ej-reading .wp-caption-text,
.ej-reading figcaption {
	font-style: italic;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ej-muted);
	margin-top: 10px;
}

.ej-reading figure {
	margin: 0 0 34px;
}

.ej-reading .wp-block-button__link {
	border-radius: 0;
	background: none;
	border: var(--ej-strong);
	color: var(--ej-ink);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 11px 18px;
}

/* ----------------------------------------------------------------- Focus */

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

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1279px) {
	:root {
		--ej-pad: 32px;
	}

	.ej-reading {
		grid-template-columns: 160px minmax(0, 1fr) 180px;
		column-gap: 40px;
	}

	.ej-plate--hero .ej-plate__frame img,
	.ej-plate--hero .ej-plate__blank {
		height: 42vw;
		max-height: 520px;
	}

	.ej-plate--tall .ej-plate__frame img,
	.ej-plate--tall .ej-plate__blank {
		height: 38vw;
		max-height: 472px;
	}

	.ej-plate--feature .ej-plate__frame img,
	.ej-plate--feature .ej-plate__blank {
		height: 32vw;
		max-height: 380px;
	}
}

@media (max-width: 1023px) {
	:root {
		--ej-pad: 28px;
	}

	/* The article becomes a single column; the contents rail turns into a
	   disclosure above the text and margin notes fall inline. */
	.ej-reading,
	.ej-reading--single {
		grid-template-columns: minmax(0, 680px);
		justify-content: center;
		padding-top: 32px;
	}

	.ej-reading > *,
	.ej-reading > .ej-toc,
	.ej-reading > .ej-margin-note {
		grid-column: 1;
	}

	.ej-toc {
		position: static;
		grid-row: auto !important;
		margin-bottom: 28px;
		border-bottom: var(--ej-hairline);
		padding-bottom: 18px;
	}

	.ej-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		border-bottom: 0;
		padding-bottom: 0;
	}

	.ej-toc__chevron {
		display: inline-block;
		transition: transform 0.15s ease;
	}

	.ej-toc__toggle[aria-expanded="true"] .ej-toc__chevron {
		transform: rotate(180deg);
	}

	.ej-js .ej-toc__toggle[aria-expanded="false"] + .ej-toc__body {
		display: none;
	}

	.ej-toc__body {
		padding-top: 16px;
	}

	.ej-margin-note {
		margin: 0 0 26px;
		font-size: 14px;
	}

	.ej-orientation,
	.ej-chapters,
	.ej-chapter-head,
	.ej-feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.ej-orientation__heading {
		font-size: 46px;
	}

	.ej-chapter-head {
		align-items: start;
	}

	.ej-chapter-head__title {
		font-size: 54px;
	}

	.ej-pullquote {
		border-left: 0;
		border-top: var(--ej-hairline);
		padding: 28px 0 0;
	}

	.ej-pullquote__text {
		font-size: 26px;
	}

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

	.ej-hub__contents {
		position: static;
		border-bottom: var(--ej-hairline);
		padding-bottom: 18px;
	}

	.ej-hub__contents .ej-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		border-bottom: 0;
		padding-bottom: 0;
	}

	.ej-hub__contents .ej-toc__body {
		padding-top: 16px;
	}

	.ej-hub__contents .ej-subtopics {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.ej-hub__contents .ej-subtopics__row {
		border: 1px solid var(--ej-rule-nav);
		padding: 5px 10px;
		font-size: 12px;
		gap: 8px;
	}

	.ej-log__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.ej-entry__header {
		padding-top: 36px;
	}

	.ej-entry__title {
		font-size: 44px;
	}

	.ej-cards--three,
	.ej-related__grid,
	.ej-plates__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	:root {
		--ej-pad: 20px;
		--ej-sticky-top: 16px;
	}

	body {
		font-size: 17px;
	}

	.ej-topbar {
		display: none;
	}

	.ej-masthead__title {
		font-size: 28px;
	}

	.ej-masthead--full .ej-masthead__lockup {
		padding-block: 24px 18px;
		gap: 10px;
	}

	.ej-masthead--compact .ej-masthead__row {
		flex-wrap: wrap;
		row-gap: 10px;
		gap: 12px;
	}

	/* The lockup and the search link have to share the first row, or the
	   masthead grows to three lines before the article has started. */
	.ej-lockup .ej-masthead__title {
		font-size: 15px;
	}

	.ej-lockup {
		gap: 9px;
	}

	/* The last crumb repeats the title directly beneath it; on a narrow
	   screen that costs two lines to say nothing. */
	.ej-breadcrumb--own > *:nth-last-child(-n + 2) {
		display: none;
	}

	/* The chapters become a horizontal rail rather than wrapping into a
	   four-line block that pushes the article off the screen. */
	.ej-nav {
		order: 3;
		width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	/* The compact navigation centres its row at wider widths. Left as it is,
	   a row wider than the screen is centred on the overflow and the first
	   chapters start off the left edge with the rail unscrolled. */
	.ej-nav--compact {
		justify-content: flex-start;
	}

	/* Only the compact navigation sits inside a padded row, so only it needs
	   pulling out to the viewport edge. Doing this to the full navigation,
	   which is already full-bleed, hangs it off the left of the screen. */
	.ej-nav--compact {
		margin-inline: calc(var(--ej-pad) * -1);
		padding-inline: var(--ej-pad);
	}

	.ej-nav::-webkit-scrollbar {
		display: none;
	}

	/* Both navigations become one scrolling row. The compact one needs its
	   own selector: the wrapping rule it carries at wider widths is more
	   specific than a bare .ej-nav__list and would otherwise win here. */
	.ej-nav__list,
	.ej-nav--compact .ej-nav__list,
	.ej-nav--full .ej-nav__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0;
		width: max-content;
	}

	.ej-nav--compact .ej-nav__item > a,
	.ej-nav--compact .ej-nav__toggle,
	.ej-nav--compact .menu-item > a {
		padding: 0 14px;
		white-space: nowrap;
	}

	.ej-nav--compact .ej-nav__item + .ej-nav__item > a,
	.ej-nav--compact .ej-nav__item + .ej-nav__item > .ej-nav__toggle,
	.ej-nav--compact .menu-item + .menu-item > a {
		border-left: 1px solid var(--ej-rule-nav);
	}

	.ej-nav__item:first-child > a {
		padding-left: 0;
	}

	.ej-nav__item--more {
		position: static;
	}

	.ej-nav__more {
		left: var(--ej-pad);
		right: var(--ej-pad);
		transform: none;
		min-width: 0;
	}

	.ej-nav--full .ej-nav__more {
		left: var(--ej-pad);
		transform: none;
	}

	.ej-orientation,
	.ej-log,
	.ej-chapters,
	.ej-plates {
		padding-block: 32px;
	}

	.ej-orientation__heading {
		font-size: 36px;
	}

	.ej-orientation__lead::first-letter,
	.ej-reading > p:first-of-type::first-letter {
		font-size: 58px;
	}

	.ej-log__grid,
	.ej-cards--two,
	.ej-cards--three,
	.ej-related__grid,
	.ej-plates__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ej-contents__row {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.ej-contents__leader {
		display: none;
	}

	.ej-contents__gloss {
		max-width: none;
		text-align: left;
		width: 100%;
		padding-left: 40px;
	}

	.ej-entry__title {
		font-size: 36px;
	}

	.ej-entry__standfirst {
		font-size: 18px;
	}

	.ej-byline {
		gap: 10px;
		font-size: 11px;
	}

	.ej-reading h2 {
		font-size: 26px;
		gap: 12px;
	}

	.ej-reading h3 {
		font-size: 20px;
	}

	.ej-chapter-head__title {
		font-size: 40px;
	}

	.ej-feature__title {
		font-size: 28px;
	}

	.ej-archive-head__title,
	.ej-404__title {
		font-size: 40px;
	}

	.ej-search__field {
		font-size: 30px;
	}

	.ej-search,
	.ej-results {
		padding-top: 32px;
	}

	.ej-result {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.ej-result .ej-label {
		line-height: 1.5;
	}

	.ej-prevnext {
		flex-direction: column;
		gap: 20px;
	}

	.ej-prevnext__link {
		max-width: none;
	}

	.ej-prevnext__link--next {
		text-align: left;
		align-items: flex-start;
	}

	.ej-plate--hero .ej-plate__frame img,
	.ej-plate--hero .ej-plate__blank,
	.ej-plate--tall .ej-plate__frame img,
	.ej-plate--tall .ej-plate__blank,
	.ej-plate--feature .ej-plate__frame img,
	.ej-plate--feature .ej-plate__blank,
	.ej-plate--card .ej-plate__frame img,
	.ej-plate--card .ej-plate__blank,
	.ej-plates__grid .ej-plate__frame img,
	.ej-plates__grid .ej-plate__blank,
	.ej-related__grid .ej-plate__frame img,
	.ej-related__grid .ej-plate__blank {
		height: auto;
		aspect-ratio: 3 / 2;
		max-height: none;
	}

	.ej-plate__caption {
		flex-direction: column;
		gap: 4px;
	}

	.ej-plate--double .ej-plate__frame {
		outline-offset: -10px;
	}

	.ej-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.ej-404 {
		padding-block: 56px 64px;
	}

	.ej-comments__list .children {
		padding-left: 16px;
	}
}

/* --------------------------------------------------------- Tap targets */

/*
 * The journal's controls are set in 11 and 12px small capitals, which is a
 * type decision, not a target-size one. On a touch screen the drawn text
 * stays that size while the box around it grows past the 24px minimum.
 */
@media (hover: none), (max-width: 767px) {
	.ej-nav a,
	.ej-nav__toggle,
	.ej-masthead__search,
	.ej-breadcrumb a,
	.ej-breadcrumb > span,
	.ej-toc__sibling,
	.ej-subtopics__row,
	.ej-footer a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	.ej-nav--compact .ej-nav__item > a,
	.ej-nav--compact .ej-nav__toggle,
	.ej-nav--compact .menu-item > a,
	.ej-nav--full .ej-nav__item > a,
	.ej-nav--full .ej-nav__toggle {
		min-height: 36px;
	}

	.ej-toc__toggle,
	.ej-hub__contents .ej-toc__toggle {
		min-height: 36px;
	}

	.ej-action,
	.ej-chip {
		min-height: 32px;
		display: inline-flex;
		align-items: center;
	}

	.ej-pagination a,
	.ej-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		min-height: 32px;
	}

	.ej-toc__link {
		padding-block: 3px;
	}

	.ej-comments input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}

	.ej-comments .comment-form-cookies-consent label {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}