@charset "UTF-8";
/* =========================================================================
   Editorial Phase One — design system
   -------------------------------------------------------------------------
   A single hand-written stylesheet. No framework, no reset library, no
   utility-class soup. Organised top-down:

     01  Fonts
     02  Design tokens
     03  Base & reset
     04  Typography primitives
     05  Layout shell & utilities
     06  Controls (buttons, pills, links, forms)
     07  Site header
     08  Off-canvas menu & search panel
     09  Media frames
     10  Article cards
     11  Section furniture
     12  Homepage sections
     13  Listing pages (archive / search / 404)
     14  Single article
     15  Article body (Gutenberg)
     16  Article furniture (TOC, FAQ, share, author, related, prev/next)
     17  Comments
     18  Footer
     19  Motion, focus, print
   ========================================================================= */

/* == 01 Fonts ============================================================ */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-variable.woff2") format("woff2");
	font-weight: 300 900;
	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: "Fraunces";
	src: url("../fonts/fraunces-variable-ext.woff2") format("woff2");
	font-weight: 300 900;
	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: "Archivo";
	src: url("../fonts/archivo-variable.woff2") format("woff2");
	font-weight: 100 900;
	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: "Archivo";
	src: url("../fonts/archivo-variable-ext.woff2") format("woff2");
	font-weight: 100 900;
	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;
}

/* == 02 Design tokens ==================================================== */

:root {
	/* --- Colour: warm paper, deep ink, pine, clay ------------------------ */
	--epo-paper:        #faf6ef;
	--epo-paper-2:      #f3ece0;
	--epo-paper-3:      #ece2d2;
	--epo-surface:      #ffffff;

	--epo-ink:          #17140f;
	--epo-ink-2:        #453e34;
	--epo-ink-3:        #665e50;
	--epo-ink-4:        #736a5a;

	--epo-line:         #e2d8c8;
	--epo-line-strong:  #cdc0aa;

	--epo-pine:         #0f3d35;
	--epo-pine-2:       #17554a;
	--epo-pine-soft:    #dfeae5;

	--epo-clay:         #a33f16;

	/* The footer ground. Its own value so the palette above stays untouched. */
	--epo-footer-bg:    #400c0c;
	--epo-clay-2:       #c2531f;
	--epo-clay-soft:    #f6e5db;

	/* --- Semantic ------------------------------------------------------- */
	--epo-bg:           var(--epo-paper);
	--epo-fg:           var(--epo-ink);
	--epo-muted:        var(--epo-ink-3);
	--epo-accent:       var(--epo-clay);
	--epo-focus:        var(--epo-pine);

	/* --- Type ----------------------------------------------------------- */
	--epo-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--epo-sans:  "Archivo", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--epo-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* Fluid type scale, 360px → 1440px viewports. */
	--epo-t-xs:   0.75rem;
	--epo-t-sm:   0.8125rem;
	--epo-t-base: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
	--epo-t-md:   clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);
	--epo-t-lg:   clamp(1.1875rem, 1.11rem + 0.34vw, 1.375rem);
	--epo-t-xl:   clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
	--epo-t-2xl:  clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
	/*
	 * The three display steps are deliberately gentler at the bottom of the
	 * range: long editorial headlines were setting too large to rag well in a
	 * 284px column on a 320px phone. Each curve still lands on exactly the same
	 * maximum at 1440px, so desktop is unchanged.
	 *   3xl  30 → 27px at 320   |  4xl  36 → 32px  |  5xl  40 → 34px
	 */
	--epo-t-3xl:  clamp(1.6875rem, 1.384rem + 1.518vw, 2.75rem);
	--epo-t-4xl:  clamp(2rem, 1.536rem + 2.321vw, 3.625rem);
	--epo-t-5xl:  clamp(2.125rem, 1.446rem + 3.393vw, 4.5rem);

	--epo-lh-tight: 1.05;
	--epo-lh-snug:  1.16;
	--epo-lh-body:  1.7;

	/* --- Space ----------------------------------------------------------- */
	--epo-s-1:  0.25rem;
	--epo-s-2:  0.5rem;
	--epo-s-3:  0.75rem;
	--epo-s-4:  1rem;
	--epo-s-5:  1.5rem;
	--epo-s-6:  2rem;
	--epo-s-7:  2.5rem;
	--epo-s-8:  3rem;
	--epo-s-9:  4rem;
	--epo-s-10: 5rem;

	/* Vertical rhythm between page bands. */
	--epo-band: clamp(2.75rem, 1.4rem + 5.6vw, 6rem);

	/* --- Layout ---------------------------------------------------------- */
	--epo-shell:      1320px;
	--epo-shell-wide: 1560px;
	--epo-measure:    38rem;
	--epo-gutter:     clamp(1.125rem, 0.55rem + 2.6vw, 3rem);

	--epo-radius-sm: 3px;
	--epo-radius:    6px;
	--epo-radius-lg: 14px;

	--epo-header-h:  4.25rem;
	--epo-adminbar:  0px;

	/* --- Depth ----------------------------------------------------------- */
	--epo-shadow-sm: 0 1px 2px rgba(23, 20, 15, 0.05);
	--epo-shadow:    0 2px 10px -4px rgba(23, 20, 15, 0.14), 0 8px 30px -20px rgba(23, 20, 15, 0.3);
	--epo-shadow-lg: 0 18px 50px -28px rgba(23, 20, 15, 0.45);

	/* --- Motion ---------------------------------------------------------- */
	--epo-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
	--epo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--epo-fast:     140ms;
	--epo-mid:      260ms;
	--epo-slow:     520ms;

	--epo-z-header: 60;
	--epo-z-panel:  70;
	--epo-z-menu:   90;
}

@media (min-width: 1024px) {
	:root { --epo-header-h: 5rem; }
}

/* == 03 Base & reset ===================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor jumps (TOC) must clear the sticky masthead. */
	scroll-padding-top: calc(var(--epo-header-h) + var(--epo-adminbar) + 1.5rem);
}

body {
	margin: 0;
	background-color: var(--epo-bg);
	color: var(--epo-fg);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-base);
	line-height: var(--epo-lh-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	overflow-wrap: break-word;
}

body.epo-is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }

ul[class], ol[class] { padding: 0; list-style: none; }

img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }

img { height: auto; border-style: none; }

svg { fill: currentColor; }

/*
 * ...but never fill a shape that is drawn with a stroke. The rule above beats the
 * fill="none" written on the icon itself, because CSS wins over a presentation
 * attribute — which turned the outline icons (Instagram, link, bold, the user
 * mark) into solid blobs.
 */
svg [stroke]:not([fill]) { fill: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }

button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

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

hr { border: 0; border-top: 1px solid var(--epo-line); margin: var(--epo-s-8) 0; }

::selection { background: var(--epo-pine); color: var(--epo-paper); }

/* == 04 Typography primitives ============================================ */

.epo-display,
.epo-h1, .epo-h2, .epo-h3 {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 120;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: var(--epo-lh-snug);
	color: var(--epo-ink);
	text-wrap: balance;
}

.epo-display {
	font-size: var(--epo-t-5xl);
	line-height: var(--epo-lh-tight);
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.028em;
}

.epo-h1 { font-size: var(--epo-t-4xl); line-height: var(--epo-lh-tight); letter-spacing: -0.024em; }
.epo-h2 { font-size: var(--epo-t-3xl); }
.epo-h3 { font-size: var(--epo-t-xl); }

/* The small uppercase category label above every headline. */
.epo-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--epo-clay);
	text-decoration: none;
}

.epo-kicker::before {
	content: "";
	inline-size: 1.375rem;
	block-size: 2px;
	background: currentColor;
	flex: none;
	transition: inline-size var(--epo-mid) var(--epo-ease);
}

a.epo-kicker:hover,
a.epo-kicker:focus-visible { color: var(--epo-ink); }

.epo-eyebrow {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin: 0 0 var(--epo-s-3);
}

.epo-dek {
	font-family: var(--epo-sans);
	color: var(--epo-ink-3);
	font-size: var(--epo-t-base);
	line-height: 1.6;
}

/* Metadata row: author · date */
.epo-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.4;
	color: var(--epo-ink-3);
}

.epo-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	position: relative;
}

.epo-meta__item + .epo-meta__item::before {
	content: "";
	position: absolute;
	inset-inline-start: -0.52rem;
	inset-block-start: calc(50% - 1.5px);
	inline-size: 3px;
	block-size: 3px;
	border-radius: 50%;
	background: var(--epo-line-strong);
}

.epo-meta__author a {
	color: var(--epo-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--epo-line-strong);
	transition: border-color var(--epo-fast) var(--epo-ease), color var(--epo-fast) var(--epo-ease);
}

.epo-meta__author a:hover { color: var(--epo-clay); border-bottom-color: currentColor; }

.epo-meta__by { color: var(--epo-ink-4); }

.epo-meta__avatar {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	margin-inline-end: 0.15rem;
	background: var(--epo-paper-3);
}

/*
 * The bullet separator is absolutely positioned before each item, so when the
 * row wraps on a narrow screen it lands at the start of the new line as an
 * orphan ("· September 16, 2026"). CSS cannot detect "first on its line", so below
 * 480px the dots are dropped and the row gap carries the separation instead.
 */
@media (max-width: 479px) {
	.epo-meta { gap: 0.25rem 0.85rem; }
	.epo-meta__item + .epo-meta__item::before { display: none; }
}

/* == 05 Layout shell & utilities ========================================= */

.epo-site {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	isolation: isolate;
}

.epo-main { flex: 1 0 auto; display: block; }
.epo-main:focus { outline: none; }

.epo-shell {
	inline-size: 100%;
	max-inline-size: var(--epo-shell);
	margin-inline: auto;
	padding-inline: var(--epo-gutter);
}

.epo-shell--wide   { max-inline-size: var(--epo-shell-wide); }
.epo-shell--narrow { max-inline-size: 60rem; }

.epo-band { padding-block: var(--epo-band); }
.epo-band--tight { padding-block: calc(var(--epo-band) * 0.62); }
.epo-band--flush-top { padding-block-start: 0; }
.epo-band--paper { background: var(--epo-paper-2); }

.epo-rule { border: 0; border-top: 1px solid var(--epo-line); margin: 0; }

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

.epo-skip-link {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 999;
	background: var(--epo-pine);
	color: var(--epo-paper);
	padding: 0.75rem 1.25rem;
	border-radius: var(--epo-radius);
	font-family: var(--epo-sans);
	font-weight: 600;
	font-size: var(--epo-t-sm);
	text-decoration: none;
	transform: translateY(-250%);
	transition: transform var(--epo-fast) var(--epo-ease);
}

.epo-skip-link:focus {
	transform: translateY(0);
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
}

/* Arrow glyph on "view all" links — pure CSS, no icon payload. */
.epo-arrow {
	inline-size: 0.55em;
	block-size: 0.55em;
	border-block-start: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	display: inline-block;
	transition: transform var(--epo-mid) var(--epo-ease);
	margin-inline-start: 0.15em;
}

.epo-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--epo-pine);
}

.epo-link-arrow:hover .epo-arrow,
.epo-link-arrow:focus-visible .epo-arrow { transform: rotate(45deg) translate(2px, -2px); }

.epo-svg { inline-size: 1.25rem; block-size: 1.25rem; display: block; flex: none; }

/* == 06 Controls ========================================================= */

.epo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	padding: 1rem 1.6rem;
	min-block-size: 2.875rem;
	border: 1px solid var(--epo-pine);
	border-radius: 999px;
	background: var(--epo-pine);
	color: var(--epo-paper);
	cursor: pointer;
	transition: background var(--epo-fast) var(--epo-ease),
	            color var(--epo-fast) var(--epo-ease),
	            border-color var(--epo-fast) var(--epo-ease),
	            transform var(--epo-fast) var(--epo-ease);
}

.epo-btn:hover { background: var(--epo-pine-2); border-color: var(--epo-pine-2); }
.epo-btn:active { transform: translateY(1px); }

.epo-btn--sm { padding: 0.7rem 1.15rem; min-block-size: 2.375rem; font-size: var(--epo-t-xs); }

.epo-btn--ghost {
	background: transparent;
	color: var(--epo-pine);
}

.epo-btn--ghost:hover { background: var(--epo-pine); color: var(--epo-paper); }

.epo-btn--clay {
	background: var(--epo-clay);
	border-color: var(--epo-clay);
	color: #fff;
}

.epo-btn--clay:hover { background: var(--epo-clay-2); border-color: var(--epo-clay-2); }

.epo-btn--wide { inline-size: 100%; }

/* Topic pill */
/* The topic strip renders either hand-built pills or a nav menu, so the pill
   treatment is bound to both. */
.epo-pill,
.epo-topics__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 550;
	letter-spacing: 0.03em;
	line-height: 1;
	text-decoration: none;
	padding: 0.6rem 0.95rem;
	min-block-size: 2.25rem;
	border: 1px solid var(--epo-line-strong);
	border-radius: 999px;
	color: var(--epo-ink-2);
	background: transparent;
	white-space: nowrap;
	transition: background var(--epo-fast) var(--epo-ease),
	            color var(--epo-fast) var(--epo-ease),
	            border-color var(--epo-fast) var(--epo-ease);
}

.epo-pill:hover,
.epo-pill:focus-visible,
.epo-topics__list a:hover,
.epo-topics__list a:focus-visible {
	background: var(--epo-pine);
	border-color: var(--epo-pine);
	color: var(--epo-paper);
}

.epo-pill--current,
.epo-topics__list .current-menu-item > a {
	background: var(--epo-ink);
	border-color: var(--epo-ink);
	color: var(--epo-paper);
}

/* Icon button */
.epo-iconbtn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--epo-radius);
	color: var(--epo-ink);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 600;
	line-height: 1;
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	justify-content: center;
	transition: background var(--epo-fast) var(--epo-ease), color var(--epo-fast) var(--epo-ease);
}

.epo-iconbtn:hover { background: var(--epo-paper-3); }

.epo-iconbtn__icon { display: inline-flex; line-height: 0; }

.epo-iconbtn__label { display: none; }

/*
 * Search control: a solid near-black magnifier, optically centred against the
 * cap height of the word beside it. The whole button is the hit area.
 */
.epo-iconbtn--search { color: var(--epo-ink); gap: 0.55rem; }

.epo-iconbtn--search .epo-svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	/* Nudge: the glyph's optical centre sits slightly above its bounding box. */
	margin-block-start: -0.0625rem;
	shape-rendering: geometricPrecision;
}

.epo-iconbtn--search .epo-iconbtn__label { font-weight: 650; letter-spacing: 0.01em; }

.epo-iconbtn--search:hover { color: #000; background: var(--epo-paper-3); }

@media (min-width: 480px) {
	.epo-iconbtn__label { display: inline; }
}

/* Forms */
.epo-searchform__row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	position: relative;
	background: var(--epo-surface);
	border: 1px solid var(--epo-line-strong);
	border-radius: 999px;
	padding: 0.3rem 0.3rem 0.3rem 1rem;
	transition: border-color var(--epo-fast) var(--epo-ease), box-shadow var(--epo-fast) var(--epo-ease);
}

.epo-searchform__row:focus-within {
	border-color: var(--epo-pine);
	box-shadow: 0 0 0 3px var(--epo-pine-soft);
}

.epo-searchform__icon {
	display: flex;
	align-items: center;
	color: var(--epo-ink-4);
	flex: none;
}

.epo-searchform__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	border: 0;
	background: transparent;
	padding: 0.7rem 0.25rem;
	font-size: var(--epo-t-base);
	font-family: var(--epo-sans);
	color: var(--epo-ink);
}

.epo-searchform__input::placeholder { color: var(--epo-ink-4); opacity: 1; }
.epo-searchform__input:focus { outline: none; }
.epo-searchform__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.epo-searchform__submit { flex: none; }

/*
 * Base field styling, wrapped in :where() so it carries zero specificity.
 * Written as bare `input[type=...]` selectors it would outrank every component
 * class (.epo-searchform__input, .epo-newsletter__input) and quietly repaint
 * them as plain boxes.
 */
:where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="password"],
	input[type="number"],
	textarea,
	select
) {
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--epo-line-strong);
	border-radius: var(--epo-radius);
	background: var(--epo-surface);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-base);
	color: var(--epo-ink);
}

textarea { min-block-size: 8rem; resize: vertical; }

/* == 07 Site header ====================================================== */

.epo-header {
	position: sticky;
	inset-block-start: var(--epo-adminbar);
	z-index: var(--epo-z-header);
	background: var(--epo-paper);
	border-block-end: 1px solid var(--epo-line);
	transition: box-shadow var(--epo-mid) var(--epo-ease), transform var(--epo-mid) var(--epo-ease);
}

.epo-header.is-stuck { box-shadow: var(--epo-shadow-sm); }

/* Masthead bar */
.epo-header__inner {
	display: flex;
	align-items: center;
	gap: var(--epo-s-4);
	min-block-size: var(--epo-header-h);
}

.epo-header__left {
	display: flex;
	align-items: center;
	gap: var(--epo-s-3);
	min-inline-size: 0;
	flex: 1 1 auto;
}

.epo-header__right {
	display: flex;
	align-items: center;
	gap: var(--epo-s-2);
	flex: none;
	margin-inline-start: auto;
}

.epo-header__cta { display: none; }

@media (min-width: 640px) {
	.epo-header__cta { display: inline-flex; }
}

/* Branding */
.epo-brand { min-inline-size: 0; }

.epo-brand__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	min-inline-size: 0;
}

.epo-brand__mark {
	display: none;
	place-items: center;
	inline-size: 2.375rem;
	block-size: 2.375rem;
	flex: none;
	border-radius: 50%;
	background: var(--epo-pine);
	color: var(--epo-paper);
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 100;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	padding-block-start: 0.1em;
}

.epo-brand__name {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 700;
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--epo-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: min(46vw, 20rem);
}

.epo-brand__tagline { display: none; }

/*
 * Official brand lockup.
 *
 * Both axes stay `auto` and only the max box is constrained, so the browser
 * scales the artwork by its own intrinsic ratio — the logo can never stretch,
 * squash or crop, whatever file is swapped in behind it. The heights below are
 * chosen so the lockup always sits inside the masthead's own height and never
 * pushes the bar taller.
 */
.epo-brand__logolink {
	display: block;
	line-height: 0;
	text-decoration: none;
	min-inline-size: 0;
}

.epo-brand__logo {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 3.5rem;   /* ~132px wide at the lockup's 800:340 ratio. */
}

/* Legacy core custom-logo markup, kept for child themes. */
.epo-brand .custom-logo-link { display: block; }
.epo-brand .custom-logo { max-block-size: 2.75rem; inline-size: auto; }

@media (min-width: 480px) {
	.epo-brand__mark { display: grid; }
}

@media (min-width: 640px) {
	.epo-brand__logo { max-block-size: 4.125rem; }  /* ~155px wide. */
}

@media (min-width: 1024px) {
	.epo-brand__logo { max-block-size: 4.875rem; }  /* ~184px wide. */
	.epo-brand__name { max-inline-size: 26rem; }
	.epo-brand__tagline {
		display: block;
		font-family: var(--epo-sans);
		font-size: var(--epo-t-xs);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--epo-ink-4);
		margin-block-start: 0.3rem;
		margin-inline-start: 3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-inline-size: 22rem;
	}
}

/* Primary navigation — desktop only. */
.epo-nav--primary { display: none; }

@media (min-width: 1024px) {
	/*
	 * The logo is a wide wordmark, so the flex gap alone left the first nav item
	 * crowding it. This adds a deliberate, viewport-scaled step after the brand —
	 * roughly 72px at desktop, easing back on smaller screens where the row is
	 * tighter. The search button is untouched; it stays pinned to the right.
	 */
	.epo-nav--primary {
		display: block;
		flex: 0 1 auto;
		min-inline-size: 0;
		margin-inline-start: clamp(1rem, 2.5vw, 2.5rem);
	}
	.epo-header__menu-btn { display: none; }
	.epo-header__left { flex: 0 0 auto; }
	.epo-header__inner { gap: var(--epo-s-6); }
}

.epo-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 0.2rem + 1vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epo-nav__item { position: relative; }

.epo-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--epo-ink-2);
	padding-block: 0.5rem;
	white-space: nowrap;
	position: relative;
	transition: color var(--epo-fast) var(--epo-ease);
}

.epo-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 2px;
	background: var(--epo-clay);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--epo-mid) var(--epo-ease-out);
}

.epo-nav__link:hover,
.epo-nav__link:focus-visible { color: var(--epo-ink); }

.epo-nav__link:hover::after,
.epo-nav__link:focus-visible::after,
.epo-nav__item.current-menu-item > .epo-nav__link::after,
.epo-nav__item.current-menu-ancestor > .epo-nav__link::after { transform: scaleX(1); }

.epo-nav__item.current-menu-item > .epo-nav__link { color: var(--epo-ink); }

.epo-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	color: var(--epo-ink-4);
}

.epo-nav__toggle .epo-svg { inline-size: 0.9rem; block-size: 0.9rem; }

.epo-nav__toggle-icon {
	display: inline-flex;
	transform: rotate(90deg);
	transition: transform var(--epo-mid) var(--epo-ease);
}

.epo-nav__toggle[aria-expanded="true"] .epo-nav__toggle-icon { transform: rotate(-90deg); }

/* Desktop dropdown */
@media (min-width: 1024px) {
	.epo-nav--primary .epo-nav__submenu {
		position: absolute;
		inset-block-start: calc(100% + 0.5rem);
		inset-inline-start: -0.9rem;
		min-inline-size: 14rem;
		background: var(--epo-surface);
		border: 1px solid var(--epo-line);
		border-radius: var(--epo-radius);
		box-shadow: var(--epo-shadow);
		padding: 0.5rem;
		margin: 0;
		list-style: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--epo-mid) var(--epo-ease),
		            transform var(--epo-mid) var(--epo-ease),
		            visibility var(--epo-mid) linear;
		z-index: 5;
	}

	.epo-nav--primary .epo-nav__item--has-children:hover > .epo-nav__submenu,
	.epo-nav--primary .epo-nav__item--has-children:focus-within > .epo-nav__submenu,
	.epo-nav--primary .epo-nav__item--has-children.is-open > .epo-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.epo-nav--primary .epo-nav__submenu .epo-nav__link {
		display: flex;
		inline-size: 100%;
		padding: 0.6rem 0.9rem;
		border-radius: var(--epo-radius-sm);
		letter-spacing: 0.06em;
		white-space: normal;
	}

	.epo-nav--primary .epo-nav__submenu .epo-nav__link::after { display: none; }
	.epo-nav--primary .epo-nav__submenu .epo-nav__link:hover { background: var(--epo-paper-2); }
	.epo-nav--primary .epo-nav__submenu .epo-nav__item { position: static; }
}

.epo-nav__hint {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	color: var(--epo-ink-3);
	margin: 0;
}

/* Reading progress bar (single posts) */
.epo-progress {
	position: absolute;
	inset-block-end: -1px;
	inset-inline: 0;
	block-size: 2px;
	background: transparent;
	overflow: hidden;
}

.epo-progress__bar {
	display: block;
	block-size: 100%;
	inline-size: 100%;
	background: linear-gradient(90deg, var(--epo-clay), var(--epo-clay-2));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 80ms linear;
}

/* == 08 Search panel & off-canvas menu =================================== */

.epo-searchpanel {
	position: relative;
	z-index: var(--epo-z-panel);
	background: var(--epo-paper-2);
	border-block-end: 1px solid var(--epo-line);
	overflow: hidden;
}

.epo-searchpanel[hidden] { display: none; }

.epo-searchpanel__inner {
	position: relative;
	padding-block: var(--epo-s-6);
	display: grid;
	gap: var(--epo-s-4);
}

.epo-searchpanel .epo-searchform { max-inline-size: 44rem; }

.epo-searchpanel__suggest {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--epo-s-3);
}

.epo-searchpanel__suggest-label {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--epo-ink-4);
}

.epo-searchpanel__suggest-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.epo-searchpanel__close {
	position: absolute;
	inset-block-start: var(--epo-s-4);
	inset-inline-end: 0;
}

/* Off-canvas menu */
.epo-mobilemenu {
	position: fixed;
	inset: 0;
	z-index: var(--epo-z-menu);
}

.epo-mobilemenu[hidden] { display: none; }

.epo-mobilemenu__scrim {
	position: absolute;
	inset: 0;
	background: rgba(23, 20, 15, 0.5);
	opacity: 0;
	transition: opacity var(--epo-mid) var(--epo-ease);
	cursor: pointer;
}

.epo-mobilemenu__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: min(92vw, 24rem);
	background: var(--epo-paper);
	box-shadow: var(--epo-shadow-lg);
	padding: var(--epo-s-5) var(--epo-s-5) var(--epo-s-9);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	transition: transform var(--epo-slow) var(--epo-ease-out);
	display: grid;
	gap: var(--epo-s-6);
	align-content: start;
}

.epo-mobilemenu.is-open .epo-mobilemenu__scrim { opacity: 1; }
.epo-mobilemenu.is-open .epo-mobilemenu__panel { transform: translateX(0); }

.epo-mobilemenu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epo-s-4);
	padding-block-end: var(--epo-s-4);
	border-block-end: 1px solid var(--epo-line);
}

.epo-mobilemenu__title {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 650;
	color: var(--epo-ink-4);
}

.epo-nav--mobile .epo-nav__list {
	display: block;
	gap: 0;
}

.epo-nav--mobile .epo-nav__item--depth-0 { border-block-end: 1px solid var(--epo-line); }

.epo-nav--mobile .epo-nav__item--depth-0 > .epo-nav__link {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 100;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--epo-ink);
	padding-block: 0.9rem;
	inline-size: 100%;
}

.epo-nav--mobile .epo-nav__link::after { display: none; }

.epo-nav--mobile .epo-nav__item--has-children {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.epo-nav--mobile .epo-nav__toggle {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	color: var(--epo-ink-3);
}

.epo-nav--mobile .epo-nav__submenu {
	grid-column: 1 / -1;
	display: none;
	padding: 0 0 0.75rem 0.9rem;
	margin: 0;
	list-style: none;
	border-inline-start: 2px solid var(--epo-line);
}

.epo-nav--mobile .epo-nav__item--has-children.is-open > .epo-nav__submenu { display: block; }

.epo-nav--mobile .epo-nav__submenu .epo-nav__link {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--epo-t-base);
	font-weight: 500;
	color: var(--epo-ink-2);
	padding-block: 0.6rem;
	inline-size: 100%;
}

.epo-mobilemenu__label {
	display: block;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 650;
	color: var(--epo-ink-4);
	margin-block-end: var(--epo-s-3);
}

.epo-mobilemenu__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.epo-mobilemenu__social .epo-sociallist { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (min-width: 1024px) {
	.epo-mobilemenu { display: none; }
}

/* Social list (footer + menu) */
.epo-sociallist { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

.epo-sociallist a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.5rem;
	padding: 0.55rem 0.95rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.75;
	transition: opacity var(--epo-fast) var(--epo-ease);
}

.epo-sociallist a:hover { opacity: 1; }

/* Icon-only social row (footer). The label stays in the markup as the
   accessible name and is hidden visually, so each control still announces
   itself as "Instagram", "YouTube" and so on. */
.epo-sociallist--icons { gap: 0.5rem; }

.epo-sociallist--icons a {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	min-block-size: 0;
	padding: 0;
	border-color: rgba(250, 246, 239, 0.28);
	opacity: 0.85;
}

.epo-sociallist--icons a {
	color: var(--epo-paper);
}

.epo-sociallist--icons a:hover,
.epo-sociallist--icons a:focus-visible {
	opacity: 1;
	border-color: var(--epo-paper);
	background: rgba(250, 246, 239, 0.08);
}

/*
 * Five tracks, each at most 2.5rem and free to shrink. That keeps the row on one
 * line at every width without the hard minimum a nowrap flex row would impose —
 * that minimum is wider than the footer column at 1024-1100 and pushed the whole
 * page sideways.
 */
.epo-sociallist--icons {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 2.5rem));
	justify-content: start;
	gap: 0.5rem;
}

.epo-sociallist--icons .epo-sociallist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
}

.epo-sociallist--icons .epo-sociallist__icon .epo-svg { inline-size: 1.15rem; block-size: 1.15rem; }

.epo-sociallist--icons .epo-sociallist__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.epo-footer__social { margin-block-start: var(--epo-s-5); }

.epo-footer__coltitle--sub {
	font-size: var(--epo-t-xs);
	color: var(--epo-ink-4);
	margin-block-end: var(--epo-s-3);
}

/* A larger tap target on phones, where the footer column is full width. */
@media (max-width: 767px) {
	.epo-sociallist--icons { grid-template-columns: repeat(5, minmax(0, 2.75rem)); }
}

/* == 09 Media frames ===================================================== */

.epo-figure {
	position: relative;
	overflow: hidden;
	background: var(--epo-paper-3);
	border-radius: var(--epo-radius);
	isolation: isolate;
}

/*
 * Fixed picture sizes. Card and article pictures are sized in pixels rather
 * than flowing with their column, so the same story is the same size wherever
 * it appears. --epo-fig is that box width; where it is not set the picture
 * stays fluid, which is what archives and search still want.
 * The min() keeps it inside its column on a narrow screen. Overlay cards are
 * excluded — their figure is the absolutely positioned backdrop.
 */
.epo-card:not(.epo-card--overlay) .epo-card__media .epo-figure,
.epo-hero__media .epo-figure {
	inline-size: min(var(--epo-fig, 100%), 100%);
}

.epo-hero__feature .epo-card__media,
.epo-block .epo-card__media,
.epo-latest .epo-card__media { --epo-fig: 280px; }

.epo-popular .epo-card__media,
.epo-railpopular .epo-card__media { --epo-fig: 90px; }

.epo-figure--3-2  { aspect-ratio: 3 / 2; }
.epo-figure--16-9 { aspect-ratio: 16 / 9; }
.epo-figure--4-3  { aspect-ratio: 4 / 3; }
.epo-figure--3-4  { aspect-ratio: 3 / 4; }
.epo-figure--1-1  { aspect-ratio: 1 / 1; }
.epo-figure--5-4  { aspect-ratio: 5 / 4; }

.epo-figure__link { display: block; block-size: 100%; }

.epo-figure__img,
.epo-figure img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--epo-slow) var(--epo-ease-out);
}

.epo-figure__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 120% at 20% 10%, var(--epo-paper-2), transparent 60%),
		linear-gradient(140deg, var(--epo-pine-soft), var(--epo-paper-3));
	color: var(--epo-pine);
}

.epo-figure__placeholder span {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 700;
	font-size: clamp(1.75rem, 5vw, 3rem);
	letter-spacing: -0.04em;
	opacity: 0.55;
}

/* == 10 Article cards ==================================================== */

.epo-card {
	display: grid;
	gap: var(--epo-s-4);
	position: relative;
	min-inline-size: 0;
}

.epo-card__body { display: grid; gap: var(--epo-s-3); align-content: start; min-inline-size: 0; }

.epo-card__title {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 90;
	font-weight: 600;
	font-size: var(--epo-t-lg);
	line-height: 1.22;
	letter-spacing: -0.014em;
	color: var(--epo-ink);
	text-wrap: pretty;
	margin: 0;
}

.epo-card__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--epo-clay), var(--epo-clay));
	background-repeat: no-repeat;
	background-size: 0% 1.5px;
	background-position: 0 100%;
	transition: background-size var(--epo-mid) var(--epo-ease-out), color var(--epo-fast) var(--epo-ease);
}

/* Whole-card click target without nesting interactive elements. */
.epo-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.epo-card:hover .epo-card__title a,
.epo-card__title a:focus-visible { background-size: 100% 1.5px; }

.epo-card:hover .epo-figure__img { transform: scale(1.04); }

.epo-card:hover .epo-kicker::before { inline-size: 2.25rem; }

.epo-card__dek {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.62;
	color: var(--epo-ink-3);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-clamp: 3;
	overflow: hidden;
}

.epo-card__meta { margin-block-start: 0.15rem; }

.epo-card .epo-meta a { position: relative; z-index: 2; }

/* — Lead card: the biggest story on the page. */
.epo-card--lead .epo-card__title {
	font-size: var(--epo-t-3xl);
	font-variation-settings: "opsz" 144;
	line-height: 1.08;
	letter-spacing: -0.026em;
}

.epo-card--lead .epo-card__dek {
	font-size: var(--epo-t-md);
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* — Feature card: mid-size, used in mosaic and grids. */
.epo-card--feature .epo-card__title { font-size: var(--epo-t-xl); }

/* — Compact card: image beside text. */
.epo-card--compact {
	grid-template-columns: 5.5rem 1fr;
	gap: var(--epo-s-4);
	align-items: start;
}

.epo-card--compact .epo-card__title { font-size: var(--epo-t-base); line-height: 1.3; }
.epo-card--compact .epo-card__dek { display: none; }

@media (min-width: 480px) {
	.epo-card--compact { grid-template-columns: 7rem 1fr; }
	.epo-card--compact .epo-card__title { font-size: var(--epo-t-md); }
}

/* — Numbered card: the ranked list block. */
.epo-card--numbered {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--epo-s-4);
	padding-block: var(--epo-s-5);
	border-block-start: 1px solid var(--epo-line);
}

.epo-card--numbered:first-child { border-block-start: 0; padding-block-start: 0; }

.epo-card__num {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--epo-line-strong);
	letter-spacing: -0.04em;
	font-feature-settings: "tnum";
	transition: color var(--epo-mid) var(--epo-ease);
	min-inline-size: 1.6rem;
}

.epo-card--numbered:hover .epo-card__num { color: var(--epo-clay); }

.epo-card--numbered .epo-card__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--epo-s-3);
	min-inline-size: 0;
}

@media (min-width: 560px) {
	.epo-card--numbered .epo-card__inner {
		grid-template-columns: 1fr 6.5rem;
		gap: var(--epo-s-4);
		align-items: start;
	}
	.epo-card--numbered .epo-card__media { order: 2; }
	.epo-card--numbered .epo-card__body { order: 1; }
	.epo-card__num { font-size: 2.25rem; }
}

.epo-card--numbered .epo-card__title { font-size: var(--epo-t-md); line-height: 1.28; }
.epo-card--numbered .epo-card__dek { display: none; }

/* — Overlay card: image with text laid over a scrim. */
.epo-card--overlay {
	position: relative;
	border-radius: var(--epo-radius);
	overflow: hidden;
	min-block-size: 22rem;
	display: grid;
	gap: 0;
}

.epo-card--overlay .epo-figure {
	position: absolute;
	inset: 0;
	border-radius: 0;
	aspect-ratio: auto;
}

.epo-card--overlay .epo-card__body {
	position: relative;
	z-index: 2;
	align-self: end;
	padding: var(--epo-s-6) var(--epo-s-5) var(--epo-s-5);
	background: linear-gradient(to top, rgba(15, 25, 22, 0.92) 12%, rgba(15, 25, 22, 0.62) 55%, rgba(15, 25, 22, 0) 100%);
	color: var(--epo-paper);
}

.epo-card--overlay .epo-card__title { color: var(--epo-paper); font-size: var(--epo-t-xl); }
.epo-card--overlay .epo-card__dek { color: rgba(250, 246, 239, 0.82); }
.epo-card--overlay .epo-kicker { color: #f0b391; }
.epo-card--overlay .epo-meta { color: rgba(250, 246, 239, 0.72); }
.epo-card--overlay .epo-meta__author a { color: var(--epo-paper); border-bottom-color: rgba(250, 246, 239, 0.4); }
.epo-card--overlay .epo-meta__by { color: rgba(250, 246, 239, 0.6); }
.epo-card--overlay .epo-meta__item + .epo-meta__item::before { background: rgba(250, 246, 239, 0.45); }
.epo-card--overlay .epo-card__title a { background-image: linear-gradient(var(--epo-paper), var(--epo-paper)); }

/* — Horizontal card: used on search and archive lists. */
/*
 * Bylines inside the narrow presentations. These cards sit next to a small
 * thumbnail, so the metadata is stepped down a size and the author underline is
 * dropped — at this scale the rule reads as clutter rather than as a link.
 */
.epo-card--compact .epo-card__meta,
.epo-card--numbered .epo-card__meta,
.epo-railpopular .epo-card__meta {
	font-size: var(--epo-t-xs);
	gap: 0.2rem 0.7rem;
	margin-block-start: 0.3rem;
}

.epo-card--compact .epo-meta__author a,
.epo-card--numbered .epo-meta__author a,
.epo-railpopular .epo-meta__author a {
	border-bottom: 0;
	font-weight: 500;
}

.epo-card--compact .epo-meta__item + .epo-meta__item::before,
.epo-card--numbered .epo-meta__item + .epo-meta__item::before,
.epo-railpopular .epo-meta__item + .epo-meta__item::before { display: none; }

.epo-card--row {
	grid-template-columns: 1fr;
	gap: var(--epo-s-4);
	padding-block: var(--epo-s-6);
	border-block-start: 1px solid var(--epo-line);
}

.epo-card--row:first-child { border-block-start: 0; padding-block-start: 0; }

@media (min-width: 640px) {
	.epo-card--row {
		grid-template-columns: 12rem 1fr;
		gap: var(--epo-s-6);
		align-items: start;
	}
}

/* Wider screens give the row presentation a roomier picture column. */
@media (min-width: 1024px) {
	.epo-card--row { grid-template-columns: 14rem 1fr; }
	.epo-card--row .epo-card__title { font-size: var(--epo-t-xl); }
}

/* Card grids */
.epo-grid {
	display: grid;
	gap: var(--epo-s-7) var(--epo-s-5);
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.epo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.epo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.epo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.epo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.epo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.epo-grid { gap: var(--epo-s-8) var(--epo-s-6); }
}

/* A divider rule between grid columns — a small editorial signature. */
.epo-grid--ruled > .epo-card { position: relative; }

@media (min-width: 900px) {
	.epo-grid--ruled > .epo-card:not(:first-child)::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(var(--epo-s-6) / -2);
		inline-size: 1px;
		background: var(--epo-line);
	}
	.epo-grid--ruled.epo-grid--3 > .epo-card:nth-child(3n + 1)::before { display: none; }
	.epo-grid--ruled.epo-grid--4 > .epo-card:nth-child(4n + 1)::before { display: none; }
}

.epo-stack { display: grid; gap: 0; }

/* == 11 Section furniture ================================================ */

.epo-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--epo-s-4);
	flex-wrap: wrap;
	padding-block-end: var(--epo-s-4);
	margin-block-end: var(--epo-s-7);
	border-block-end: 2px solid var(--epo-ink);
}

.epo-section-head__text { min-inline-size: 0; }

.epo-section-head__title {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 600;
	font-size: var(--epo-t-2xl);
	line-height: 1.1;
	letter-spacing: -0.024em;
	color: var(--epo-ink);
	margin: 0;
}

.epo-section-head__subtitle {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	color: var(--epo-ink-3);
	margin-block-start: var(--epo-s-2);
	max-inline-size: 46ch;
	line-height: 1.55;
}

.epo-section-head__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--epo-pine);
	white-space: nowrap;
	padding-block: 0.25rem;
	flex: none;
}

.epo-section-head__link:hover { color: var(--epo-clay); }
.epo-section-head__link:hover .epo-arrow { transform: rotate(45deg) translate(2px, -2px); }

.epo-section-head--light { border-block-end-color: var(--epo-line-strong); }

.epo-section-head--center {
	justify-content: center;
	text-align: center;
	border: 0;
	padding-block-end: 0;
}

/* == 12 Homepage sections ================================================ */

/* — Hero: asymmetric split lead + secondary stories. */
.epo-hero {
	padding-block: clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem) var(--epo-band);
	border-block-end: 1px solid var(--epo-line);
}

.epo-hero__grid {
	display: grid;
	gap: var(--epo-s-8);
	grid-template-columns: 1fr;
	align-items: start;
}

.epo-hero__lead { display: grid; gap: var(--epo-s-5); min-inline-size: 0; }

.epo-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--epo-pine);
}

.epo-hero__eyebrow::after {
	content: "";
	block-size: 1px;
	inline-size: clamp(2rem, 8vw, 5rem);
	background: var(--epo-line-strong);
}

.epo-hero__media { position: relative; }

.epo-hero__figure { border-radius: var(--epo-radius-lg); }

.epo-hero__title {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 600;
	font-size: var(--epo-t-4xl);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--epo-ink);
	text-wrap: balance;
	margin: 0;
}

.epo-hero__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--epo-clay), var(--epo-clay));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size var(--epo-slow) var(--epo-ease-out);
}

.epo-hero__lead:hover .epo-hero__title a,
.epo-hero__title a:focus-visible { background-size: 100% 2px; }

.epo-hero__dek {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-md);
	line-height: 1.62;
	color: var(--epo-ink-2);
	max-inline-size: 44ch;
	margin: 0;
}

.epo-hero__meta { margin-block-start: var(--epo-s-3); }

.epo-hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epo-s-4) var(--epo-s-5);
	padding-block-start: var(--epo-s-4);
	border-block-start: 1px solid var(--epo-line);
}

.epo-hero__side { display: grid; gap: 0; align-content: start; min-inline-size: 0; }

.epo-hero__sidehead {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	padding-block-end: var(--epo-s-4);
	margin-block-end: var(--epo-s-5);
	border-block-end: 2px solid var(--epo-ink);
}

/* Most Popular rail: an ordered list of thumbnail + headline rows. */
.epo-hero__sidelist {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: epo-popular;
}

.epo-hero__sideitem {
	padding-block: var(--epo-s-5);
	border-block-start: 1px solid var(--epo-line);
}

.epo-hero__sideitem:first-child { border-block-start: 0; padding-block-start: 0; }
.epo-hero__sideitem:last-child { padding-block-end: 0; }

/* --- Secondary featured stories beside the lead ------------------------- */

.epo-hero__features {
	display: grid;
	gap: var(--epo-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epo-hero__feature { min-inline-size: 0; }

/*
 * The featured row under the lead. auto-fill (not auto-fit) keeps the empty
 * tracks, so three cards line up with the first three columns of the four-up
 * category bands below instead of stretching to fill the row.
 */
.epo-hero__more { margin-block-start: var(--epo-s-9); }

.epo-hero__more .epo-hero__features {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--epo-s-7) var(--epo-s-5);
}

/* == Intro strip ========================================================= */

.epo-intro {
	background: var(--epo-paper-2);
	border-block: 1px solid var(--epo-line);
}

.epo-intro__inner {
	display: grid;
	gap: var(--epo-s-5);
	padding-block: var(--epo-s-7);
	align-items: center;
	justify-items: start;
}

.epo-intro__mark img {
	inline-size: 3rem;
	block-size: auto;
	display: block;
}

.epo-intro__body { max-inline-size: 62ch; }

.epo-intro__eyebrow {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin: 0 0 var(--epo-s-2);
}

.epo-intro__heading {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 120;
	font-weight: 700;
	font-size: var(--epo-t-2xl);
	line-height: var(--epo-lh-snug);
	letter-spacing: -0.02em;
	color: var(--epo-ink);
	margin: 0 0 var(--epo-s-3);
}

.epo-intro__text {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-md);
	line-height: 1.65;
	color: var(--epo-ink-2);
	margin: 0;
}

@media (min-width: 768px) {
	.epo-intro__inner {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--epo-s-6);
		padding-block: var(--epo-s-8);
	}

	.epo-intro__mark img { inline-size: 3.75rem; }
}

/* == Picture row ========================================================= */

.epo-picrow {
	display: grid;
	gap: var(--epo-s-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.epo-picrow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--epo-s-6); }
}

/* == Compact explainer cards ============================================= */

.epo-explain {
	display: grid;
	gap: var(--epo-s-4);
	grid-template-columns: 1fr;
}

/*
 * Columns are sized from the picture they must hold: 280px of image plus the
 * card's own padding. auto-fit then fits as many as actually have room, so the
 * square is never clamped by a column that is fractionally too narrow.
 */
@media (min-width: 640px) {
	.epo-explain {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.75rem), 1fr));
		gap: var(--epo-s-5);
	}
}

/*
 * Inside an explainer card the `row` presentation drops its full-width listing
 * proportions: the picture stacks above the text (see the category-band rules)
 * and only the spacing needs restating here.
 */
.epo-explain .epo-card--row {
	gap: var(--epo-s-4);
	padding-block: 0;
	border-block-start: 0;
	align-items: start;
}

.epo-explain .epo-card--row .epo-card__title { font-size: var(--epo-t-base); }
.epo-explain .epo-card--row .epo-card__dek { font-size: var(--epo-t-sm); }

.epo-card--explain {
	background: var(--epo-surface);
	border: 1px solid var(--epo-line);
	border-radius: var(--epo-radius);
	padding: var(--epo-s-4);
	min-inline-size: 0;
}

.epo-card--explain:hover { border-color: var(--epo-line-strong); }

/* == Most popular, beside the homepage lead ============================== */

/*
 * The same small uppercase label as the article sidebar's Most Popular, so the
 * list reads as the same feature wherever it appears.
 */
.epo-popular__title,
.epo-railpopular__title {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	padding-block-end: var(--epo-s-3);
	margin: 0 0 var(--epo-s-4);
	border-block-end: 2px solid var(--epo-ink);
}

.epo-popular__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: epo-popular;
}

.epo-popular__item {
	padding-block: var(--epo-s-4);
	border-block-start: 1px solid var(--epo-line);
	min-inline-size: 0;
}

.epo-popular__item:first-child { border-block-start: 0; padding-block-start: 0; }

/*
 * Beside the lead, Most Popular is often the second thing read on a phone, so
 * the picture stays beside the headline at every width. Stacked, each entry ran
 * over 200px tall and the five of them pushed the rest of the page a full
 * screen and more further down. Scoped to the homepage: the article sidebar
 * uses its own compact presentation.
 */
.epo-hero .epo-card--numbered .epo-card__inner {
	grid-template-columns: minmax(0, 1fr) 90px;
	gap: var(--epo-s-4);
	align-items: start;
}

.epo-hero .epo-card--numbered .epo-card__media { order: 2; }
.epo-hero .epo-card--numbered .epo-card__body { order: 1; }

@media (min-width: 768px) {
	/*
	 * The lead keeps a fluid full-width picture — it is the one image on the
	 * homepage meant to dominate, so it scales with its column instead of
	 * sitting in a fixed box like the 280px squares beside it. Its 4:3 crop is
	 * deliberately taller than a standard widescreen lead: the extra height is
	 * what makes it read as the highlighted story.
	 */
	.epo-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--epo-s-8); }
}

@media (min-width: 1180px) {
	.epo-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--epo-s-10); }
	.epo-hero__lead { gap: var(--epo-s-6); }
}

/* Hero variant: when there is no image the headline carries the page. */
.epo-hero--textlead .epo-hero__title { font-size: var(--epo-t-5xl); }

@media (max-width: 479px) {
	.epo-hero__title,
	.epo-articlehead__title,
	.epo-pagehead__title { letter-spacing: -0.02em; line-height: 1.1; }

	.epo-card--lead .epo-card__title,
	.epo-card--listing-lead .epo-card__title { letter-spacing: -0.018em; line-height: 1.14; }
}

/* — Topic strip. */
.epo-topics {
	padding-block: var(--epo-s-5);
	border-block-end: 1px solid var(--epo-line);
	background: var(--epo-paper-2);
}

.epo-topics__inner {
	display: flex;
	align-items: center;
	gap: var(--epo-s-4);
	min-inline-size: 0;
}

.epo-topics__label {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	white-space: nowrap;
	flex: none;
	display: none;
}

@media (min-width: 768px) {
	.epo-topics__label { display: block; }
}

/* Horizontal scroller — intentional mobile behaviour, not a squeezed row. */
.epo-topics__list {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 0.25rem;
	padding-inline-end: var(--epo-gutter);
	margin-inline-end: calc(var(--epo-gutter) * -1);
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.epo-topics__list::-webkit-scrollbar { display: none; }
.epo-topics__list > li { scroll-snap-align: start; flex: none; }

@media (min-width: 1024px) {
	.epo-topics__list { flex-wrap: wrap; overflow: visible; margin-inline-end: 0; padding-inline-end: 0; }
}

/* — Category block: mosaic layout. */
.epo-mosaic {
	display: grid;
	gap: var(--epo-s-7) var(--epo-s-6);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.epo-mosaic {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
	}
	.epo-mosaic__rest { display: grid; gap: 0; }
	.epo-mosaic__rest .epo-card--compact {
		grid-template-columns: 8rem 1fr;
		padding-block: var(--epo-s-5);
		border-block-start: 1px solid var(--epo-line);
	}
	.epo-mosaic__rest .epo-card--compact:first-child { border-block-start: 0; padding-block-start: 0; }
}

@media (min-width: 1180px) {
	.epo-mosaic { gap: var(--epo-s-8); }
}


/*
 * Category bands all show the same 280px square, so the presentations that
 * normally put a small thumbnail beside the text — the mosaic side list, the
 * picture row, the explainer row, the ranked list — stack instead. Without this
 * the square is forced into a 5–14rem column and the card overflows its cell.
 */
.epo-block .epo-card--compact,
.epo-block .epo-card--row,
.epo-block .epo-mosaic__rest .epo-card--compact,
.epo-block .epo-explain .epo-card--row,
.epo-block .epo-card--numbered .epo-card__inner {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--epo-s-3);
	align-items: start;
}

.epo-block .epo-card--numbered .epo-card__media,
.epo-block .epo-card--numbered .epo-card__body { order: 0; }


/*
 * Every band picture is the same 280px square now, so the mosaic has no size
 * hierarchy left to express: its lead and its side list flow as one uniform
 * grid. `display: contents` lets the side cards join that grid directly instead
 * of being trapped in their wrapper, which is what left a tall column of
 * thumbnails beside a short lead and a screen-high gap under it.
 */
.epo-block .epo-mosaic {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--epo-s-7) var(--epo-s-6);
	align-items: start;
}

.epo-block .epo-mosaic__rest { display: contents; }

.epo-block .epo-mosaic__rest .epo-card--compact {
	padding-block: 0;
	border-block-start: 0;
}

/*
 * Inside a band every card is now the same size, so they all take the same
 * headline. The compact and row presentations were scaled for a thumbnail
 * beside the text; left alone they read as a mistake next to their neighbours.
 */
.epo-block .epo-card--lead .epo-card__title,
.epo-block .epo-card--compact .epo-card__title,
.epo-block .epo-card--row .epo-card__title,
.epo-block .epo-explain .epo-card--row .epo-card__title { font-size: var(--epo-t-xl); }


/*
 * Explainer cards carry a surface and padding, so a fixed 280px picture sat in a
 * 359px card and left a band of card colour down one side. Here the picture
 * fills the card instead: still square, still cropped by object-fit, so nothing
 * is stretched and all the cards in the band match.
 */
.epo-block .epo-explain .epo-card__media { --epo-fig: 100%; }

/* — Newsletter band. */
.epo-newsletter {
	background: var(--epo-pine);
	color: var(--epo-paper);
	position: relative;
	overflow: hidden;
}

.epo-newsletter::before,
.epo-newsletter::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.epo-newsletter::before {
	inline-size: 26rem;
	block-size: 26rem;
	inset-block-start: -12rem;
	inset-inline-end: -8rem;
	background: radial-gradient(circle, rgba(226, 152, 111, 0.22), transparent 68%);
}

.epo-newsletter::after {
	inline-size: 20rem;
	block-size: 20rem;
	inset-block-end: -11rem;
	inset-inline-start: -6rem;
	background: radial-gradient(circle, rgba(223, 234, 229, 0.16), transparent 68%);
}

.epo-newsletter__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--epo-s-7);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.epo-newsletter__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--epo-s-10); }
}

.epo-newsletter__eyebrow {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #e5b193;
	margin: 0 0 var(--epo-s-4);
}

.epo-newsletter__heading {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 500;
	font-size: var(--epo-t-3xl);
	line-height: 1.14;
	letter-spacing: -0.024em;
	color: var(--epo-paper);
	text-wrap: balance;
	margin: 0;
}

.epo-newsletter__text {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-base);
	line-height: 1.65;
	color: rgba(250, 246, 239, 0.78);
	margin-block-start: var(--epo-s-4);
	max-inline-size: 48ch;
}

.epo-newsletter__form { display: grid; gap: var(--epo-s-3); }

.epo-newsletter__row {
	display: grid;
	gap: var(--epo-s-3);
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.epo-newsletter__row { grid-template-columns: minmax(0, 1fr) auto; }
}

.epo-newsletter__input {
	background: rgba(250, 246, 239, 0.06);
	border: 1px solid rgba(250, 246, 239, 0.28);
	color: var(--epo-paper);
	border-radius: 999px;
	padding: 1rem 1.25rem;
	min-block-size: 3.25rem;
}

.epo-newsletter__input::placeholder { color: rgba(250, 246, 239, 0.62); }

.epo-newsletter__input:focus {
	outline: none;
	border-color: rgba(250, 246, 239, 0.7);
	background: rgba(250, 246, 239, 0.1);
}

.epo-newsletter__btn {
	background: var(--epo-paper);
	border-color: var(--epo-paper);
	color: var(--epo-pine);
	min-block-size: 3.25rem;
	padding-inline: 1.75rem;
}

.epo-newsletter__btn:hover { background: #e5b193; border-color: #e5b193; color: var(--epo-ink); }

.epo-newsletter__note {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	color: rgba(250, 246, 239, 0.58);
	margin: 0;
	line-height: 1.5;
}

/* == 13 Listing pages ==================================================== */

.epo-pagehead {
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	border-block-end: 1px solid var(--epo-line);
}

.epo-pagehead__inner { display: grid; gap: var(--epo-s-4); max-inline-size: 58rem; }

.epo-pagehead__title {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 600;
	font-size: var(--epo-t-4xl);
	line-height: 1.06;
	letter-spacing: -0.028em;
	color: var(--epo-ink);
	text-wrap: balance;
	margin: 0;
}

.epo-pagehead__desc {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-md);
	line-height: 1.62;
	color: var(--epo-ink-3);
	max-inline-size: 52ch;
	margin: 0;
}

.epo-pagehead__count {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin: 0;
}

.epo-pagehead__query {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-style: italic;
	color: var(--epo-clay);
}

.epo-breadcrumbs {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	letter-spacing: 0.06em;
	color: var(--epo-ink-4);
}

.epo-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epo-breadcrumbs__item { display: inline-flex; align-items: center; gap: 0.6rem; }

.epo-breadcrumbs__item + .epo-breadcrumbs__item::before {
	content: "";
	inline-size: 0.35em;
	block-size: 0.35em;
	border-block-start: 1px solid var(--epo-line-strong);
	border-inline-end: 1px solid var(--epo-line-strong);
	transform: rotate(45deg);
}

.epo-breadcrumbs a { color: var(--epo-ink-3); text-decoration: none; }
.epo-breadcrumbs a:hover { color: var(--epo-clay); text-decoration: underline; }
.epo-breadcrumbs [aria-current="page"] { color: var(--epo-ink); font-weight: 600; }

/*
 * On small screens the current-page crumb wraps to its own line and drags its
 * separator chevron with it. It is also verbatim the H1 printed directly
 * underneath, so nothing is lost by leaving the trail at its parent section.
 */
@media (max-width: 639px) {
	.epo-breadcrumbs__item:last-child { display: none; }
}

/* Empty state */
.epo-empty {
	max-inline-size: 42rem;
	display: grid;
	gap: var(--epo-s-5);
	padding-block: var(--epo-s-6);
}

.epo-empty__title {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 600;
	font-size: var(--epo-t-2xl);
	line-height: 1.14;
	letter-spacing: -0.02em;
	margin: 0;
}

.epo-empty__text { color: var(--epo-ink-3); margin: 0; line-height: 1.65; }

.epo-empty__actions { display: flex; flex-wrap: wrap; gap: var(--epo-s-3); align-items: center; }

.epo-empty .epo-searchform { max-inline-size: 30rem; }

/* Pagination */
.epo-pagination {
	margin-block-start: var(--epo-s-9);
	padding-block-start: var(--epo-s-6);
	border-block-start: 1px solid var(--epo-line);
}

.epo-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epo-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding: 0 0.85rem;
	border-radius: var(--epo-radius);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--epo-ink-2);
	border: 1px solid transparent;
	transition: background var(--epo-fast) var(--epo-ease), color var(--epo-fast) var(--epo-ease), border-color var(--epo-fast) var(--epo-ease);
}

.epo-pagination a.page-numbers:hover { background: var(--epo-paper-3); color: var(--epo-ink); }

.epo-pagination .page-numbers.current {
	background: var(--epo-pine);
	border-color: var(--epo-pine);
	color: var(--epo-paper);
}

.epo-pagination .page-numbers.dots { min-inline-size: 1.75rem; padding-inline: 0.25rem; color: var(--epo-ink-4); }

.epo-pagination__arrow { display: inline-flex; }
.epo-pagination__arrow .epo-svg { inline-size: 1rem; block-size: 1rem; }
.epo-pagination__arrow--prev { transform: rotate(180deg); }

.epo-pagination .prev.page-numbers span:not(.epo-pagination__arrow),
.epo-pagination .next.page-numbers span:not(.epo-pagination__arrow) { display: none; }

@media (min-width: 560px) {
	.epo-pagination .prev.page-numbers span:not(.epo-pagination__arrow),
	.epo-pagination .next.page-numbers span:not(.epo-pagination__arrow) { display: inline; }
}

/* 404 */
.epo-404 {
	display: grid;
	gap: var(--epo-s-6);
	max-inline-size: 44rem;
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
}

.epo-404__code {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 700;
	font-size: clamp(4.5rem, 2rem + 14vw, 11rem);
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: var(--epo-line-strong);
	margin: 0;
}

/* == 14 Single article =================================================== */

.epo-article { display: block; }

/* Article masthead */
/*
 * The masthead lives inside the article's main column now. Its top spacing moved
 * to .epo-articlelayout so the sidebar beside it starts level with the
 * breadcrumb instead of a few rows above it.
 */
.epo-articlehead {
	margin-block-end: var(--epo-s-8);
}

.epo-articlehead__inner {
	display: grid;
	gap: var(--epo-s-5);
	max-inline-size: 52rem;
	margin-inline: auto;
	text-align: left;
}

/*
 * Article headlines only: 0.04em between words. The smallest step that reads as
 * less cramped at display size — letterforms and their tracking are untouched.
 */
.epo-articlehead__title {
	word-spacing: 0.04em;
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 600;
	font-size: var(--epo-t-4xl);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--epo-ink);
	text-wrap: balance;
	margin: 0;
}

.epo-articlehead__standfirst {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 24;
	font-size: var(--epo-t-lg);
	line-height: 1.55;
	color: var(--epo-ink-2);
	max-inline-size: 46ch;
	margin: 0;
}

.epo-articlehead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epo-s-4);
	padding-block: var(--epo-s-4);
	border-block: 1px solid var(--epo-line);
}

.epo-articlehead__meta .epo-share { margin: 0; }

/* Lead image */
.epo-articlemedia { margin-block-start: var(--epo-s-6); }

.epo-articlemedia__figure { margin: 0; }

.epo-articlemedia__figure img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	border-radius: var(--epo-radius-lg);
	background: var(--epo-paper-3);
}


/*
 * Pictures inside the article body match the featured picture — a 350px square,
 * cropped by object-fit so nothing is ever stretched. Alignment classes from the
 * editor still work; the picture simply has a fixed box to sit in. Authors keep
 * uploading whatever they like and WordPress keeps serving the right file.
 */
.epo-content figure.wp-block-image,
.epo-content .wp-block-image {
	inline-size: min(350px, 100%);
	max-inline-size: 100%;
	margin-inline: 0;
}

.epo-content figure.wp-block-image img,
.epo-content .wp-block-image img,
.epo-content > img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--epo-radius);
	display: block;
}

.epo-content .wp-block-image figcaption {
	max-inline-size: min(350px, 100%);
}

.epo-articlemedia__caption {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.5;
	color: var(--epo-ink-3);
	margin-block-start: var(--epo-s-3);
	padding-inline-start: var(--epo-s-4);
	border-inline-start: 2px solid var(--epo-line-strong);
	max-inline-size: 44rem;
}

/* Article body layout: content column + optional sticky rail. */
.epo-articlelayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--epo-s-8);
	padding-block: clamp(1.5rem, 0.9rem + 2.4vw, 3rem) 0;
	align-items: start;
}

.epo-articlelayout__main { min-inline-size: 0; max-inline-size: 44rem; margin-inline: auto; inline-size: 100%; }

.epo-articlelayout__rail { min-inline-size: 0; }

@media (min-width: 1100px) {
	.epo-articlelayout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
		gap: var(--epo-s-9);
		max-inline-size: 66rem;
		margin-inline: auto;
	}
	.epo-articlelayout__main { margin-inline: 0; }
	.epo-articlelayout__rail {
		position: sticky;
		inset-block-start: calc(var(--epo-header-h) + var(--epo-adminbar) + 1.5rem);
		max-block-size: calc(100vh - var(--epo-header-h) - 4rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/*
 * Article lead image.
 *
 * Sized like the lead picture on the homepage: the full width of its column at
 * 4:3, rather than a small fixed square. The crop is done by object-fit, so the
 * artwork is never stretched whatever shape it was uploaded in.
 */
.epo-articlemedia__figure {
	inline-size: 100%;
	max-inline-size: 100%;
	margin-inline: 0;
}

.epo-articlemedia__figure img,
.epo-articlemedia__img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--epo-radius);
	display: block;
}

.epo-articlemedia__caption { max-inline-size: 100%; }

/* == Most popular in the article rail ==================================== */

/* Most Popular leads the rail; whatever follows it gets the breathing room. */
.epo-railpopular { margin-block-start: 0; }

.epo-articlelayout__rail > * + * { margin-block-start: var(--epo-s-7); }

.epo-railpopular__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epo-railpopular__item {
	padding-block: var(--epo-s-4);
	border-block-start: 1px solid var(--epo-line);
	min-inline-size: 0;
}

.epo-railpopular__item:first-child { border-block-start: 0; padding-block-start: 0; }

/* == 15 Article body (Gutenberg) ========================================= */

.epo-content {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 14;
	font-size: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
	line-height: 1.78;
	color: var(--epo-ink-2);
	letter-spacing: 0.001em;
}

/* Vertical rhythm for the body. Note: do NOT add a `.epo-content p {margin:0}`
   rule — it outranks this one and silently removes every paragraph gap. The
   base reset already zeroes paragraph margins. */
.epo-content > * + * { margin-block-start: 1.45em; }

.epo-content > h2,
.epo-content > h3,
.epo-content > h4 {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 96;
	font-weight: 650;
	color: var(--epo-ink);
	letter-spacing: -0.018em;
	line-height: 1.2;
	text-wrap: balance;
	scroll-margin-block-start: calc(var(--epo-header-h) + var(--epo-adminbar) + 1.5rem);
}

.epo-content > h2 {
	font-size: var(--epo-t-2xl);
	margin-block-start: 2.1em;
	padding-block-start: 0.55em;
	border-block-start: 1px solid var(--epo-line);
}

.epo-content > h3 { font-size: var(--epo-t-lg); margin-block-start: 1.9em; }

.epo-content > h4 {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-base);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-block-start: 1.8em;
}

.epo-content > h5,
.epo-content > h6 {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--epo-ink-3);
	margin-block-start: 1.8em;
}

/* Drop cap on the opening paragraph — an editorial signature, off on mobile. */
@media (min-width: 640px) {
	.epo-content > p:first-of-type::first-letter {
		float: left;
		font-family: var(--epo-serif);
		font-variation-settings: "opsz" 144;
		font-weight: 700;
		font-size: 3.9em;
		line-height: 0.78;
		margin-inline-end: 0.09em;
		margin-block-start: 0.07em;
		color: var(--epo-pine);
	}
}

.epo-content a {
	color: var(--epo-ink);
	text-decoration: underline;
	text-decoration-color: var(--epo-clay);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.16em;
	transition: color var(--epo-fast) var(--epo-ease), background var(--epo-fast) var(--epo-ease);
}

.epo-content a:hover { color: var(--epo-clay); background: var(--epo-clay-soft); }

.epo-content a[target="_blank"]::after {
	content: "↗";
	font-size: 0.72em;
	margin-inline-start: 0.18em;
	vertical-align: 0.35em;
	color: var(--epo-ink-4);
	text-decoration: none;
}

.epo-content strong, .epo-content b { font-weight: 700; color: var(--epo-ink); }
.epo-content em, .epo-content i { font-style: italic; }

.epo-content ul,
.epo-content ol {
	padding-inline-start: 1.35em;
	display: grid;
	gap: 0.6em;
}

.epo-content ul { list-style: none; padding-inline-start: 1.5em; }

.epo-content ul > li { position: relative; }

.epo-content ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -1em;
	inset-block-start: 0.72em;
	inline-size: 0.4em;
	block-size: 0.4em;
	background: var(--epo-clay);
	border-radius: 50%;
}

.epo-content ol { list-style: decimal; }
.epo-content ol > li::marker { color: var(--epo-clay); font-weight: 700; font-family: var(--epo-sans); font-size: 0.9em; }

.epo-content li > ul,
.epo-content li > ol { margin-block-start: 0.6em; }

.epo-content blockquote {
	margin-block: 2em;
	padding-inline-start: clamp(1.25rem, 4vw, 2.25rem);
	border-inline-start: 3px solid var(--epo-clay);
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 90;
	font-size: var(--epo-t-lg);
	line-height: 1.45;
	color: var(--epo-ink);
	font-style: italic;
}

.epo-content blockquote p + p { margin-block-start: 0.7em; }

.epo-content blockquote cite,
.epo-content blockquote .wp-block-quote__citation {
	display: block;
	margin-block-start: 0.9em;
	font-family: var(--epo-sans);
	font-style: normal;
	font-size: var(--epo-t-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
}

.epo-content .wp-block-pullquote {
	margin-block: 2.5em;
	padding: 0;
	border: 0;
	border-block: 2px solid var(--epo-ink);
	padding-block: 1.6em;
	text-align: left;
}

.epo-content .wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: var(--epo-t-2xl);
	line-height: 1.24;
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.018em;
}

.epo-content figure { margin-block: 2.2em; }

.epo-content figure img { border-radius: var(--epo-radius); inline-size: 100%; }

.epo-content figcaption,
.epo-content .wp-caption-text,
.epo-caption__text {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.5;
	color: var(--epo-ink-3);
	margin-block-start: 0.85em;
	padding-inline-start: 0.9em;
	border-inline-start: 2px solid var(--epo-line-strong);
	text-align: left;
}

.epo-content code,
.epo-content kbd,
.epo-content samp {
	font-family: var(--epo-mono);
	font-size: 0.86em;
	background: var(--epo-paper-3);
	padding: 0.15em 0.4em;
	border-radius: var(--epo-radius-sm);
}

.epo-content pre {
	font-family: var(--epo-mono);
	font-size: 0.86em;
	line-height: 1.6;
	background: var(--epo-ink);
	color: #f0ebe1;
	padding: 1.25rem;
	border-radius: var(--epo-radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.epo-content pre code { background: none; padding: 0; color: inherit; }

/* Tables scroll rather than break the layout. */
.epo-content .wp-block-table,
.epo-content figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.epo-content table {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	min-inline-size: 32rem;
}

.epo-content th,
.epo-content td {
	padding: 0.85rem 1rem;
	border-block-end: 1px solid var(--epo-line);
	text-align: left;
	vertical-align: top;
}

.epo-content thead th {
	background: var(--epo-paper-2);
	font-weight: 700;
	font-size: var(--epo-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--epo-ink);
}

/* Alignment support */
.epo-content .alignleft,
.epo-content .alignright { max-inline-size: 50%; }

@media (min-width: 640px) {
	.epo-content .alignleft { float: left; margin: 0.4em 2em 1.4em 0; }
	.epo-content .alignright { float: right; margin: 0.4em 0 1.4em 2em; }
}

@media (max-width: 639px) {
	.epo-content .alignleft,
	.epo-content .alignright { max-inline-size: 100%; float: none; margin-inline: 0; }
}

.epo-content .aligncenter { margin-inline: auto; text-align: center; }

.epo-content .alignwide {
	inline-size: min(100vw - (var(--epo-gutter) * 2), 58rem);
	max-inline-size: none;
	margin-inline: auto;
}

.epo-content .alignfull {
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}

.epo-content .alignfull img { border-radius: 0; }

@media (min-width: 1100px) {
	.epo-content .alignwide { inline-size: min(52rem, 118%); margin-inline-start: -9%; }
	.epo-content .alignfull { inline-size: min(58rem, 128%); max-inline-size: none; margin-inline-start: -14%; }
}

.epo-content .wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--epo-line-strong);
	max-inline-size: 6rem;
	margin-block: 2.6em;
	margin-inline: 0;
	opacity: 1;
}

.epo-content .wp-block-separator.is-style-dots { border: 0; }

.epo-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.epo-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	background: var(--epo-pine);
	color: var(--epo-paper);
	border-radius: 999px;
	padding: 0.9rem 1.6rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 650;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.epo-content .wp-block-embed,
.epo-content .wp-block-video { margin-block: 2.2em; }

.epo-content .wp-block-embed__wrapper iframe { inline-size: 100%; }

.epo-content .wp-block-gallery { margin-block: 2.2em; }

.epo-content .wp-block-image.is-style-rounded img { border-radius: 50%; }

.epo-content .has-drop-cap:not(:focus)::first-letter { font-size: inherit; }

/* == 16 Article furniture ================================================ */

/* — Table of contents. */
/*
 * Contents list: a plain white block that reads as part of the article rather
 * than a widget parked inside it. No card border, no guide rules, no collapse —
 * the whole outline is there as soon as the page loads. Hierarchy is carried by
 * indentation, type size and spacing alone.
 */
.epo-toc {
	background: #ffffff;
	padding: var(--epo-s-5) var(--epo-s-5) var(--epo-s-4);
	margin-block: var(--epo-s-7);
}

/* It is part of the prose column now, so it keeps its own type, not the body's. */
.epo-content .epo-toc { font-family: var(--epo-sans); }

.epo-toc__title {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-ink);
	margin: 0 0 var(--epo-s-4);
}

/*
 * Scoped to .epo-toc: the list now sits inside .epo-content, whose own ol rules
 * would otherwise put WordPress's numbers and indent back.
 */
.epo-toc .epo-toc__list {
	list-style: none;   /* the marker is the period drawn below */
	margin: 0;
	padding: 0;
}

/*
 * Tight rows. The prose column styles its lists as a grid with its own row gap
 * and a taller line, all of which lands on this list now that it sits inside the
 * article; these reset that and set the spacing here instead.
 */
.epo-toc .epo-toc__list { display: block; gap: 0; }

.epo-toc .epo-toc__item {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

.epo-toc .epo-toc__list > .epo-toc__item + .epo-toc__item { margin-block-start: 0.35rem; }

/*
 * Scoped to .epo-toc on purpose: the base reset uses ol[class], whose attribute
 * selector outranks a plain class, so a bare .epo-toc__sublist rule loses its
 * indent and the hierarchy collapses.
 */
.epo-toc .epo-toc__sublist { margin-block-start: 0.3rem; padding-inline-start: 1.15rem; }
.epo-toc__sublist > .epo-toc__item + .epo-toc__item { margin-block-start: 0.2rem; }

/*
 * Scoped to .epo-toc throughout: the list is rendered inside .epo-content now,
 * and that column's own link colour would otherwise win on specificity.
 */
.epo-toc .epo-toc__link {
	/* Block, not inline-block: no baseline descender padding the row out. */
	display: block;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 500;
	line-height: 1.45;
	color: #400c0c;
	text-decoration: none;
	text-underline-offset: 0.18em;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

/* The period marker, set close to the words. */
.epo-toc .epo-toc__link::before {
	content: ".";
	margin-inline-end: 0.45rem;
	color: currentColor;
}

.epo-toc .epo-toc__link--sub { font-size: var(--epo-t-xs); font-weight: 400; }

.epo-toc .epo-toc__link:hover,
.epo-toc .epo-toc__link:focus-visible {
	color: #2a0808;
	text-decoration: underline;
}

.epo-toc .epo-toc__item.is-current > .epo-toc__link { font-weight: 650; }

/* Phones: pull the child rows back in so long headings keep their width. */
@media (max-width: 559px) {
	.epo-toc { padding-inline: var(--epo-s-4); }
	.epo-toc .epo-toc__sublist { padding-inline-start: 0.8rem; }
}

/* — FAQ accordion. */
.epo-faq { margin-block-start: var(--epo-s-9); }

.epo-faq__list { display: grid; gap: 0; border-block-start: 1px solid var(--epo-line); }

.epo-faq__item { border-block-end: 1px solid var(--epo-line); }

.epo-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--epo-s-4);
	inline-size: 100%;
	text-align: left;
	padding: var(--epo-s-5) 0;
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 60;
	font-size: var(--epo-t-md);
	font-weight: 600;
	line-height: 1.35;
	color: var(--epo-ink);
	transition: color var(--epo-fast) var(--epo-ease);
}

.epo-faq__q:hover { color: var(--epo-clay); }

.epo-faq__icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	inline-size: 1.85rem;
	block-size: 1.85rem;
	margin-block-start: 0.05em;
	color: var(--epo-clay);
}

/* The glyph rotates, not its box: a rotated box would push the button's
   scrollable overflow 4px wider than its content. */
.epo-faq__icon .epo-svg { transition: transform var(--epo-mid) var(--epo-ease); }

.epo-faq__q[aria-expanded="true"] .epo-faq__icon .epo-svg { transform: rotate(45deg); }

.epo-faq__a {
	padding-block-end: var(--epo-s-5);
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 14;
	font-size: var(--epo-t-base);
	line-height: 1.72;
	color: var(--epo-ink-2);
	max-inline-size: 46rem;
}

.epo-faq__a p + p { margin-block-start: 0.9em; }
.epo-faq__a[hidden] { display: none; }

/* — Share row. */
.epo-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--epo-s-3);
	position: relative;
}

.epo-share__label {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
}

.epo-share__list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.epo-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--epo-line-strong);
	color: var(--epo-ink-2);
	text-decoration: none;
	transition: background var(--epo-fast) var(--epo-ease),
	            color var(--epo-fast) var(--epo-ease),
	            border-color var(--epo-fast) var(--epo-ease),
	            transform var(--epo-fast) var(--epo-ease);
}

.epo-share__link:hover {
	background: var(--epo-pine);
	border-color: var(--epo-pine);
	color: var(--epo-paper);
	transform: translateY(-2px);
}

.epo-share__link .epo-svg { inline-size: 1.05rem; block-size: 1.05rem; }

.epo-share__toast {
	position: absolute;
	inset-block-end: calc(100% + 0.5rem);
	inset-inline-start: 0;
	background: var(--epo-ink);
	color: var(--epo-paper);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.4rem 0.75rem;
	border-radius: var(--epo-radius-sm);
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity var(--epo-mid) var(--epo-ease), transform var(--epo-mid) var(--epo-ease);
	white-space: nowrap;
}

.epo-share__toast.is-visible { opacity: 1; transform: translateY(0); }

.epo-share--footer {
	margin-block-start: var(--epo-s-7);
	padding-block: var(--epo-s-5);
	border-block-start: 1px solid var(--epo-line);
	justify-content: space-between;
	row-gap: var(--epo-s-4);
}

@media (max-width: 479px) {
	.epo-share--footer { justify-content: flex-start; }
}

/* — Tags row. */
.epo-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--epo-s-3);
	margin-block-start: var(--epo-s-7);
}

.epo-tags__label {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
}

.epo-tags__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

/* — Author card. */
.epo-author-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--epo-s-4);
	margin-block-start: var(--epo-s-8);
	padding: var(--epo-s-6);
	background: var(--epo-paper-2);
	border-radius: var(--epo-radius-lg);
}

@media (min-width: 560px) {
	.epo-author-card { grid-template-columns: auto 1fr; gap: var(--epo-s-6); align-items: start; }
}

.epo-author-card__avatar img {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 50%;
	background: var(--epo-paper-3);
}

.epo-author-card__body { display: grid; gap: var(--epo-s-2); min-inline-size: 0; }

.epo-author-card__eyebrow {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin: 0;
}

.epo-author-card__name {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 100;
	font-size: var(--epo-t-xl);
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.2;
	margin: 0;
}

.epo-author-card__name a { text-decoration: none; }
.epo-author-card__name a:hover { color: var(--epo-clay); }

.epo-author-card__bio {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.65;
	color: var(--epo-ink-3);
	margin: 0;
	max-inline-size: 52ch;
}

.epo-author-card__body .epo-link-arrow { margin-block-start: var(--epo-s-2); }

/* — Prev / next. */
.epo-postnav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-block-start: var(--epo-s-7);
	border-block-start: 1px solid var(--epo-line);
}

@media (min-width: 700px) {
	.epo-postnav { grid-template-columns: 1fr 1fr; }
	.epo-postnav__item--next { border-inline-start: 1px solid var(--epo-line); text-align: right; }
	.epo-postnav__item--next:first-child { grid-column: 2; }
}

.epo-postnav__item {
	display: grid;
	gap: var(--epo-s-3);
	padding: var(--epo-s-6) 0;
	text-decoration: none;
	border-block-end: 1px solid var(--epo-line);
	transition: background var(--epo-fast) var(--epo-ease);
}

@media (min-width: 700px) {
	.epo-postnav__item { padding-inline: var(--epo-s-5); border-block-end: 0; }
	.epo-postnav__item--prev { padding-inline-start: 0; }
	.epo-postnav__item--next { padding-inline-end: 0; }
}

.epo-postnav__item:hover { background: var(--epo-paper-2); }

.epo-postnav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
}

.epo-postnav__item--next .epo-postnav__label { justify-content: flex-end; }

.epo-postnav__chev { display: inline-flex; }
.epo-postnav__chev .epo-svg { inline-size: 0.9rem; block-size: 0.9rem; }
.epo-postnav__item--prev .epo-postnav__chev { transform: rotate(180deg); }

.epo-postnav__title {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 60;
	font-size: var(--epo-t-md);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--epo-ink);
}

.epo-postnav__item:hover .epo-postnav__title { color: var(--epo-clay); }

/* — Related reading. */
.epo-related { margin-block-start: 0; }

/* == 17 Article interaction area (comments + share + prev/next) ========== */

/*
 * The foot of an article, treated as one block rather than three stacked
 * afterthoughts: the conversation, the share row, then where to read next.
 */
.epo-interact { margin-block-start: var(--epo-s-9); }

.epo-interact > * + * { margin-block-start: 0; }

/* Each child already carries its own top rule/spacing, so collapse the first
   one's extra margin to keep the block tight under the author card. */
.epo-interact > :first-child { margin-block-start: 0; }

.epo-comments { margin-block-start: 0; }

/* — Heading: the word and the count, nothing else. */
.epo-comments__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	padding-block-end: var(--epo-s-3);
	margin: 0 0 var(--epo-s-5);
	border-block-end: 2px solid var(--epo-ink);
}

.epo-comments__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.5rem;
	block-size: 1.5rem;
	padding-inline: 0.4rem;
	border-radius: 999px;
	background: var(--epo-pine);
	color: var(--epo-paper);
	font-size: var(--epo-t-xs);
	line-height: 1;
	letter-spacing: 0;
	font-feature-settings: "tnum";
}

/* == The composer ======================================================== */

.epo-comments .comment-respond { margin-block-end: var(--epo-s-8); }
.epo-comments .comment-reply-title { margin: 0; }

.epo-composer {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--epo-s-4);
	align-items: start;
}

.epo-composer__avatar {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--epo-paper-3);
	display: grid;
	place-items: center;
}

.epo-composer__avatar img,
.epo-avatar__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.epo-avatar__fallback {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--epo-ink-4);
}

.epo-avatar__fallback .epo-svg { inline-size: 1.4rem; block-size: 1.4rem; }

.epo-composer__main { display: grid; gap: var(--epo-s-4); min-inline-size: 0; }

/*
 * One rounded surface holding the typing area and its toolbar. The textarea has
 * no frame of its own so the two read as a single control; the focus ring is
 * drawn on the box instead, which is why :focus-within does the work here.
 */
.epo-composer__box {
	background: var(--epo-surface);
	border: 1px solid var(--epo-line);
	border-radius: 16px;
	transition: border-color var(--epo-fast) var(--epo-ease), box-shadow var(--epo-fast) var(--epo-ease);
	min-inline-size: 0;
}

.epo-composer__box:focus-within {
	border-color: var(--epo-pine);
	box-shadow: 0 0 0 3px rgba(15, 61, 53, 0.16);
}

.epo-composer__input {
	display: block;
	inline-size: 100%;
	min-block-size: 110px;
	padding: var(--epo-s-5) var(--epo-s-5) var(--epo-s-4);
	border: 0;
	background: none;
	border-radius: 16px 16px 0 0;
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 14;
	font-size: var(--epo-t-base);
	line-height: 1.65;
	color: var(--epo-ink);
	resize: vertical;
}

.epo-composer__input::placeholder { color: var(--epo-ink-4); opacity: 1; }
.epo-composer__input:focus { outline: 0; }

.epo-composer__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epo-s-4);
	padding: 0.55rem 0.7rem 0.55rem 0.85rem;
	border-block-start: 1px solid var(--epo-line);
}

.epo-composer__tools { display: flex; align-items: center; gap: 0.15rem; }

.epo-composer__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--epo-radius);
	background: none;
	color: var(--epo-ink-3);
	cursor: pointer;
	transition: background var(--epo-fast) var(--epo-ease), color var(--epo-fast) var(--epo-ease);
}

.epo-composer__tool .epo-svg { inline-size: 1.05rem; block-size: 1.05rem; }
.epo-composer__tool:hover { background: var(--epo-paper-3); color: var(--epo-ink); }

.epo-composer__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.35rem;
	min-block-size: 2.25rem;
	border: 1px solid var(--epo-pine);
	border-radius: 999px;
	background: var(--epo-pine);
	color: var(--epo-paper);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--epo-fast) var(--epo-ease);
}

.epo-composer__submit:hover { background: var(--epo-pine-2); }
.epo-composer__submit[disabled] { opacity: 0.6; cursor: default; }

/* Name and email: side by side where there is room, stacked on a phone. */
.epo-composer__identity {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--epo-s-4);
}

@media (min-width: 560px) {
	.epo-composer__identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.epo-field { margin: 0; min-inline-size: 0; }

.epo-field__label {
	display: block;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin-block-end: 0.35rem;
}

.epo-field__input {
	inline-size: 100%;
	padding: 0.6rem 0.85rem;
	min-block-size: 2.625rem;
	border: 1px solid var(--epo-line);
	border-radius: 999px;
	background: var(--epo-surface);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	color: var(--epo-ink);
}

.epo-field__input:focus-visible {
	outline: 0;
	border-color: var(--epo-pine);
	box-shadow: 0 0 0 3px rgba(15, 61, 53, 0.16);
}

.epo-composer__consent,
.epo-composer__signedin {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	color: var(--epo-ink-3);
}

.epo-composer__consent input { inline-size: 1rem; block-size: 1rem; accent-color: var(--epo-pine); }
.epo-composer__signedin a { color: var(--epo-pine); }

.epo-composer__cancel {
	display: block;
	margin-block-start: var(--epo-s-3);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.epo-composer__cancel a { color: var(--epo-clay); }

/* The composer sits inside a comment while a reply is being written. */
.epo-comment .comment-respond {
	margin-block: var(--epo-s-5) 0;
	padding-block-start: var(--epo-s-5);
	border-block-start: 1px solid var(--epo-line);
}

/* == The discussion ====================================================== */

.epo-comments__list {
	display: grid;
	gap: var(--epo-s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epo-comments__list ol.children {
	list-style: none;
	display: grid;
	gap: var(--epo-s-5);
	margin-block-start: var(--epo-s-5);
	padding-inline-start: var(--epo-s-5);
	border-inline-start: 2px solid var(--epo-line);
}

.epo-comment { padding-block-end: var(--epo-s-6); border-block-end: 1px solid var(--epo-line); }
.epo-comment:last-child { padding-block-end: 0; border-block-end: 0; }
.epo-comment .epo-comment { border-block-end: 0; padding-block-end: 0; }

.epo-comment__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--epo-s-4);
	align-items: start;
}

.epo-comment__avatar {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--epo-paper-3);
}

.epo-comment__main { min-inline-size: 0; display: grid; gap: 0.3rem; }

.epo-comment__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
}

.epo-comment__author {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 650;
	color: var(--epo-ink);
}

.epo-comment__date {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	color: var(--epo-ink-4);
}

.epo-comment__text {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 14;
	font-size: var(--epo-t-base);
	line-height: 1.7;
	color: var(--epo-ink-2);
}

.epo-comment__text p { margin: 0 0 0.6rem; }
.epo-comment__text p:last-child { margin-block-end: 0; }

.epo-comment__text blockquote {
	margin: 0.6rem 0;
	padding-inline-start: var(--epo-s-4);
	border-inline-start: 2px solid var(--epo-line-strong);
	color: var(--epo-ink-3);
}

.epo-comment__pending {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	color: var(--epo-clay);
	margin: 0;
}

.epo-comment__foot {
	display: flex;
	gap: var(--epo-s-4);
	margin-block-start: 0.2rem;
}

.epo-comment__foot a {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--epo-pine);
	text-decoration: none;
}

.epo-comment__foot a:hover { color: var(--epo-clay); }

.epo-comments__closed { color: var(--epo-ink-3); font-size: var(--epo-t-sm); }

/* Phones: the avatar tucks above the box so the composer gets the full width. */
@media (max-width: 479px) {
	.epo-composer { grid-template-columns: minmax(0, 1fr); gap: var(--epo-s-3); }
	.epo-composer__input { min-block-size: 96px; padding: var(--epo-s-4); }
	.epo-composer__toolbar { padding-inline: 0.5rem 0.55rem; }
	.epo-composer__submit { padding-inline: 1rem; }
	.epo-comment__body { gap: var(--epo-s-3); }
	.epo-comments__list ol.children { padding-inline-start: var(--epo-s-4); }
}

/* == Share this story ==================================================== */

.epo-storyshare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epo-s-4);
	padding-block: var(--epo-s-5);
	margin-block-end: var(--epo-s-7);
	border-block: 1px solid var(--epo-line);
}

.epo-storyshare__title {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin: 0;
}

.epo-storyshare__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epo-storyshare__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 1px solid var(--epo-line-strong);
	border-radius: 50%;
	color: var(--epo-ink-2);
	text-decoration: none;
	transition: color var(--epo-fast) var(--epo-ease), border-color var(--epo-fast) var(--epo-ease), background var(--epo-fast) var(--epo-ease);
}

.epo-storyshare__link .epo-svg { inline-size: 1.05rem; block-size: 1.05rem; }

.epo-storyshare__link:hover,
.epo-storyshare__link:focus-visible {
	color: var(--epo-pine);
	border-color: var(--epo-pine);
	background: var(--epo-paper-3);
}

@media (max-width: 559px) {
	.epo-storyshare { justify-content: flex-start; }
	.epo-storyshare__list { gap: 0.45rem; }
	.epo-storyshare__link { inline-size: 2.75rem; block-size: 2.75rem; }
}



/* == Article like and share ============================================== */

/*
 * A quiet row beneath the picture, aligned to its right edge. It never overlaps
 * the artwork and never changes the picture's size or ratio.
 */
.epo-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	margin-block-start: var(--epo-s-3);
	/* Full width of the column, so the buttons finish level with the picture. */
	inline-size: 100%;
}

/* Without a picture above them the controls need a little air of their own. */
.epo-articlehead > .epo-actions { margin-block-start: var(--epo-s-5); }

.epo-actions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-inline-size: 2.25rem;
	min-block-size: 2.25rem;
	padding-inline: 0.55rem;
	border: 1px solid var(--epo-line-strong);
	border-radius: 999px;
	background: var(--epo-surface);
	color: var(--epo-ink-2);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	font-feature-settings: "tnum";
	cursor: pointer;
	transition: color var(--epo-fast) var(--epo-ease), border-color var(--epo-fast) var(--epo-ease), background var(--epo-fast) var(--epo-ease);
}

.epo-actions__btn:hover,
.epo-actions__btn:focus-visible { border-color: var(--epo-ink-3); color: var(--epo-ink); }

.epo-actions__icon { display: inline-flex; }
.epo-actions__icon .epo-svg { inline-size: 1.05rem; block-size: 1.05rem; }

/* Outline by default, filled once liked — one icon shows at a time. */
.epo-actions__icon--full { display: none; }
.epo-actions__like[aria-pressed="true"] { color: var(--epo-clay); border-color: var(--epo-clay); }
.epo-actions__like[aria-pressed="true"] .epo-actions__icon--outline { display: none; }
.epo-actions__like[aria-pressed="true"] .epo-actions__icon--full { display: inline-flex; }

.epo-actions__count[hidden] { display: none; }

.epo-actions__share { position: relative; }

/* — The share menu. */
.epo-sharemenu {
	position: absolute;
	inset-block-start: calc(100% + 0.4rem);
	inset-inline-end: 0;
	z-index: 30;
	min-inline-size: 11rem;
	padding: 0.3rem;
	border: 1px solid var(--epo-line);
	border-radius: var(--epo-radius);
	background: var(--epo-surface);
	box-shadow: 0 12px 30px rgba(23, 20, 15, 0.12);
	display: grid;
	gap: 0.1rem;
}

.epo-sharemenu[hidden] { display: none; }

.epo-sharemenu__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	inline-size: 100%;
	min-block-size: 2.25rem;
	padding: 0.35rem 0.55rem;
	border: 0;
	border-radius: var(--epo-radius-sm);
	background: none;
	color: var(--epo-ink-2);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	text-align: left;
    text-decoration: none;
	cursor: pointer;
	transition: background var(--epo-fast) var(--epo-ease), color var(--epo-fast) var(--epo-ease);
}

.epo-sharemenu__item:hover,
.epo-sharemenu__item:focus-visible { background: var(--epo-paper-3); color: var(--epo-ink); }

.epo-sharemenu__icon { display: inline-flex; color: var(--epo-ink-3); }
.epo-sharemenu__icon .epo-svg { inline-size: 1rem; block-size: 1rem; }

/* On a phone the menu hugs the right edge of the column rather than the button. */
@media (max-width: 479px) {
	.epo-sharemenu { min-inline-size: 12rem; }
}

/* == References card ===================================================== */

/*
 * The sources behind an article, set apart from the prose. Written as an
 * ordinary group block with the class epo-references, so an editor can still
 * open it in Posts and change a line without touching any code.
 */
.epo-references {
	background: var(--epo-paper-2, var(--epo-paper-3));
	border: 1px solid var(--epo-line);
	border-radius: var(--epo-radius-lg);
	padding: var(--epo-s-6);
	margin-block: var(--epo-s-8);
}

/* Descendant, not child: the group block wraps its children in an inner div. */
.epo-references h2,
.epo-references h3 {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin: 0 0 var(--epo-s-4);
	padding-block-end: var(--epo-s-3);
	border-block-end: 2px solid var(--epo-ink);
}

.epo-references ol {
	display: grid;
	gap: var(--epo-s-4);
	margin: 0;
	padding-inline-start: 1.5rem;
}

.epo-references li {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.5;
	color: var(--epo-ink-2);
}

.epo-references li::marker { color: var(--epo-ink-4); font-weight: 650; }

/* The address sits on its own line, and wraps rather than pushing the card wide. */
.epo-references a {
	display: inline-block;
	margin-block-start: 0.2rem;
	color: var(--epo-pine);
	font-size: var(--epo-t-xs);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.epo-references a:hover { color: var(--epo-clay); }

/* == 18 Footer =========================================================== */

.epo-footer {
	/*
	 * The footer sets its own two type steps, about 2px above the site values,
	 * so every rule below scales with it. Nothing outside the footer changes.
	 */
	--epo-t-xs: 0.875rem;   /* 14px, from 12px */
	--epo-t-sm: 0.9375rem;  /* 15px, from 13px */

	background: var(--epo-footer-bg);
	color: rgba(250, 246, 239, 0.78);
	margin-block-start: var(--epo-band);
}

.epo-footer a { color: inherit; }

.epo-footer__widgets { border-block-end: 1px solid rgba(250, 246, 239, 0.12); }

.epo-footer__widgets-inner {
	display: grid;
	gap: var(--epo-s-6);
	padding-block: var(--epo-s-7);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.epo-footer__widgets-inner { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

.epo-widget__title {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-paper);
	margin-block-end: var(--epo-s-3);
}

.epo-widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.epo-widget a { text-decoration: none; }
.epo-widget a:hover { color: var(--epo-paper); text-decoration: underline; }

.epo-footer__grid {
	display: grid;
	gap: var(--epo-s-8);
	padding-block: var(--epo-s-9);
	grid-template-columns: 1fr;
}

/* Tablet: two balanced columns. Phones stay single-column right up to this
   breakpoint — at 640px two columns of links were already cramped. */
@media (min-width: 768px) {
	.epo-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.epo-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.epo-footer__grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: var(--epo-s-9);
	}
	.epo-footer__brand { grid-column: auto; }
}

.epo-footer__brand { display: grid; gap: var(--epo-s-4); align-content: start; }

/*
 * Footer lockup — the reversed (cream) artwork, on the footer's dark ink.
 * `justify-self` keeps it at its natural width inside the footer's grid column
 * instead of being stretched to the full column.
 */
/*
 * Footer lockup — the official FULL-COLOUR artwork, the same file the masthead
 * uses. The footer ground is the darkest ink in the palette, and the brand's
 * charcoal wordmark would disappear against it, so the logo is given its own
 * small cream panel instead. The artwork is never recoloured and the site
 * palette is untouched: this is one local surface, sized to its contents.
 */
.epo-footer__logolink {
	/* The cream panel exists only so the charcoal wordmark stays legible on the
	   dark ground, so it hugs the artwork — a tight card, not a block behind
	   the whole brand column. */
	display: inline-block;
	inline-size: auto;
	justify-self: start;
	line-height: 0;
	text-decoration: none;
	max-inline-size: 100%;
	background: var(--epo-paper);
	padding: 0.45rem 0.6rem;
	border-radius: var(--epo-radius);
	transition: background var(--epo-fast) var(--epo-ease);
}

.epo-footer__logolink:hover,
.epo-footer__logolink:focus-visible { background: var(--epo-surface); }

.epo-footer__logo {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 4rem;   /* ~150px wide inside the panel. */
}

@media (min-width: 1024px) {
	.epo-footer__logo { max-block-size: 4.75rem; }  /* ~179px wide. */
}

.epo-footer__wordmark {
	font-family: var(--epo-serif);
	font-variation-settings: "opsz" 144;
	font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--epo-paper);
	text-decoration: none;
}

.epo-footer__about {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.65;
	max-inline-size: 40ch;
	margin: 0;
}

.epo-footer__col { display: grid; gap: var(--epo-s-4); align-content: start; min-inline-size: 0; }

.epo-footer__coltitle {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-paper);
	margin: 0;
}

.epo-footer__list { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }

.epo-footer__list a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	text-decoration: none;
	transition: color var(--epo-fast) var(--epo-ease);
}

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

/*
 * Phones: a single vertical stack, one section per row, in reading order —
 * brand, Explore, Company, Legal, social links, then the legal bar.
 *
 * `display: contents` dissolves the brand wrapper so the logo, the blurb and
 * the social row each become grid items in their own right. That is what lets
 * the social row sit AFTER the three link columns on a phone while staying
 * tucked under the logo on desktop, without duplicating it in the markup and
 * shipping the same links to a screen reader twice.
 */
@media (max-width: 767px) {
	.epo-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--epo-s-6);
	}

	.epo-footer__brand { display: contents; }

	.epo-footer__logolink,
	.epo-footer__wordmark { order: 1; }
	.epo-footer__about    { order: 2; }
	/* All three columns share one order value, so they keep source order:
	   Explore, Company, Legal. */
	.epo-footer__col      { order: 3; }
	.epo-footer__social   { order: 4; }

	/* Roomier links: full 44px targets and body-sized type, not small print. */
	.epo-footer__list { gap: 0.15rem; }

	.epo-footer__list a {
		min-block-size: 2.75rem;
		align-items: center;
		font-size: var(--epo-t-base);
	}

	.epo-sociallist { gap: 0.6rem; }
}

.epo-footer__count {
	font-size: var(--epo-t-xs);
	color: rgba(250, 246, 239, 0.55);
	font-feature-settings: "tnum";
}

.epo-footer__bar { border-block-start: 1px solid rgba(250, 246, 239, 0.12); }

.epo-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epo-s-4);
	padding-block: var(--epo-s-5);
}

.epo-footer__legalcol {
	display: grid;
	gap: 0.35rem;
	min-inline-size: 0;
	max-inline-size: 70ch;
}

.epo-footer__copy {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	/* 0.72, not 0.55: the maroon ground is lighter than the near-black it
	   replaced, so this line needs a little more weight to keep the legibility
	   it had before (7.4:1 rather than 4.8:1). */
	color: rgba(250, 246, 239, 0.72);
	margin: 0;
}

.epo-footer__disclaimer {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	line-height: 1.55;
	color: rgba(250, 246, 239, 0.4);
	margin: 0;
}

.epo-totop {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(250, 246, 239, 0.75);
	padding: 0.6rem 0;
	min-block-size: 2.75rem;
	transition: color var(--epo-fast) var(--epo-ease);
}

.epo-totop:hover { color: var(--epo-paper); }

.epo-totop__icon { display: inline-flex; transform: rotate(-90deg); }
.epo-totop__icon .epo-svg { inline-size: 1rem; block-size: 1rem; }

/*
 * Phone overrides for the legal bar and the social pills.
 *
 * These sit here, after the base rules above, on purpose: a media query adds no
 * specificity, so the same rules written earlier in the file would simply lose
 * to `.epo-footer__bar-inner { align-items: center }` and the bar would render
 * centred instead of left-aligned.
 */
@media (max-width: 767px) {
	.epo-footer__bar-inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--epo-s-4);
	}

	.epo-footer__legalcol { justify-items: start; }

	/* Readable rather than fine print. */
	.epo-footer__copy,
	.epo-footer__disclaimer { font-size: var(--epo-t-sm); }

	.epo-sociallist a {
		min-block-size: 2.75rem;
		font-size: var(--epo-t-sm);
	}

	.epo-totop {
		min-block-size: 2.75rem;
		font-size: var(--epo-t-sm);
	}
}

/* == 20 Small parts added by the listing + article templates ============= */

/* Promoted first result on the blog index and category fronts. */
.epo-card--listing-lead { gap: var(--epo-s-5); }

.epo-card--listing-lead .epo-card__title {
	font-size: var(--epo-t-3xl);
	font-variation-settings: "opsz" 144;
	line-height: 1.06;
	letter-spacing: -0.028em;
}

@media (min-width: 900px) {
	.epo-card--listing-lead {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--epo-s-8);
		align-items: center;
	}
	.epo-card--listing-lead .epo-card__body { gap: var(--epo-s-4); }
}

.epo-listing__divider { margin-block: var(--epo-s-8); }

.epo-searchpage__form { max-inline-size: 40rem; margin-block-end: var(--epo-s-8); }

.epo-empty__sections { display: grid; gap: var(--epo-s-3); }

.epo-faq__title { margin-block-end: var(--epo-s-5); }

/* wp_link_pages output on paginated posts. */
.epo-pagelinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: var(--epo-s-7);
	padding-block-start: var(--epo-s-5);
	border-block-start: 1px solid var(--epo-line);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
}

.epo-pagelinks__label {
	font-size: var(--epo-t-xs);
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epo-ink-4);
	margin-inline-end: 0.35rem;
}

.epo-pagelinks a,
.epo-pagelinks > span:not(.epo-pagelinks__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--epo-line-strong);
	border-radius: var(--epo-radius);
	font-weight: 600;
	text-decoration: none;
}

.epo-pagelinks > span:not(.epo-pagelinks__label) {
	background: var(--epo-pine);
	border-color: var(--epo-pine);
	color: var(--epo-paper);
}

/* Password-protected posts. */
.epo-content .post-password-form { display: grid; gap: var(--epo-s-3); max-inline-size: 26rem; font-family: var(--epo-sans); }

/* Gutenberg colour/size utility classes that core emits. */
.epo-content .has-text-align-center { text-align: center; }
.epo-content .has-text-align-right { text-align: right; }
.epo-content .has-text-align-left { text-align: left; }

/* == 19 Motion, focus, print ============================================= */

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

.epo-footer :where(a, button, input):focus-visible,
.epo-newsletter :where(a, button, input):focus-visible,
.epo-card--overlay :where(a, button):focus-visible { outline-color: #e5b193; }

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

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

/* == Cookie consent bar ================================================= */

.epo-cookiebar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1000;
	background: var(--epo-surface);
	border-block-start: 1px solid var(--epo-line-strong);
	box-shadow: 0 -8px 24px rgba(23, 20, 15, 0.12);
	padding-block: var(--epo-s-4);
}

.epo-cookiebar[hidden] { display: none; }

.epo-cookiebar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--epo-s-4);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.epo-cookiebar__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--epo-s-6);
	}
}

.epo-cookiebar__text {
	margin: 0;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.55;
	color: var(--epo-ink-2);
}

.epo-cookiebar__link { color: var(--epo-clay); text-decoration: underline; }

.epo-cookiebar__actions {
	display: flex;
	gap: var(--epo-s-3);
	flex-shrink: 0;
}

/* == Contact page ======================================================= */

.epo-contact__layout {
	display: grid;
	gap: var(--epo-s-7);
	padding-block: var(--epo-s-7) var(--epo-s-9);
	align-items: start;
}

@media (min-width: 900px) {
	.epo-contact__layout {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: var(--epo-s-8);
	}
}

.epo-contact__intro { margin-block-end: var(--epo-s-6); }
.epo-contact__intro > :last-child { margin-block-end: 0; }

.epo-contact__form { display: grid; gap: var(--epo-s-5); }

.epo-contact__row { display: grid; gap: var(--epo-s-5); }

@media (min-width: 560px) {
	.epo-contact__row { grid-template-columns: 1fr 1fr; }
}

.epo-contact__field { display: grid; gap: var(--epo-s-2); }

.epo-contact__label {
	font-family: var(--epo-sans);
	font-weight: 700;
	font-size: var(--epo-t-sm);
	color: var(--epo-ink);
}

.epo-contact__req { color: var(--epo-clay); }

.epo-contact__input {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-base);
	color: var(--epo-ink);
	background: var(--epo-surface);
	border: 1px solid var(--epo-line-strong);
	border-radius: var(--epo-radius);
	padding: 0.85rem 1rem;
	inline-size: 100%;
	transition: border-color var(--epo-fast) var(--epo-ease),
	            box-shadow var(--epo-fast) var(--epo-ease);
}

.epo-contact__input::placeholder { color: var(--epo-ink-4); opacity: 1; }

.epo-contact__input:focus {
	outline: none;
	border-color: var(--epo-clay);
	box-shadow: 0 0 0 3px var(--epo-clay-soft);
}

.epo-contact__input[aria-invalid="true"] { border-color: var(--epo-clay); }

.epo-contact__textarea { resize: vertical; min-block-size: 9rem; }

/* Native select with a custom caret. */
.epo-contact__selectwrap { position: relative; }

.epo-contact__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-inline-end: 2.75rem;
	cursor: pointer;
}

.epo-contact__selectwrap::after {
	content: "";
	position: absolute;
	inset-inline-end: 1.05rem;
	inset-block-start: 50%;
	inline-size: 0.55rem;
	block-size: 0.55rem;
	border-right: 2px solid var(--epo-ink-3);
	border-bottom: 2px solid var(--epo-ink-3);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.epo-contact__error {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	color: var(--epo-clay);
}

.epo-contact__actions { margin-block-start: var(--epo-s-2); }

/* Submission feedback. */
.epo-contact__alert {
	border-radius: var(--epo-radius);
	padding: var(--epo-s-4) var(--epo-s-5);
	margin-block-end: var(--epo-s-5);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.5;
}

.epo-contact__alert strong { display: block; margin-block-end: 0.15rem; }
.epo-contact__alert--ok { background: #e8f3ec; border: 1px solid #bcdcc7; color: #1d5233; }
.epo-contact__alert--error { background: var(--epo-clay-soft); border: 1px solid #e6bda8; color: var(--epo-clay); }

/* Honeypot — kept in the DOM for bots, out of sight and off the tab order. */
.epo-contact__hp {
	position: absolute !important;
	left: -9999px !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* Mailing-address card. */
.epo-contact__card {
	background: var(--epo-paper-2);
	border: 1px solid var(--epo-line);
	border-radius: var(--epo-radius-lg);
	padding: var(--epo-s-6);
}

.epo-contact__card-title {
	font-family: var(--epo-serif);
	font-size: var(--epo-t-xl);
	line-height: 1.2;
	margin: 0 0 var(--epo-s-4);
	color: var(--epo-ink);
}

.epo-contact__address {
	margin: 0;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-base);
	line-height: 1.7;
	color: var(--epo-ink-2);
}

.epo-contact__address strong { color: var(--epo-ink); font-weight: 700; }

/* == Product roundup (Shopping) =========================================
   Reusable "best products" comparison list + buy buttons, shared by every
   Shopping roundup article. Lives in the theme, never per-article (see
   ARTICLE-STANDARD §0). Rows stack under 560px so there is no overflow. */
.epo-roundup {
	margin: var(--epo-s-6) 0;
	border: 1px solid var(--epo-line-strong);
	border-radius: var(--epo-radius);
	overflow: hidden;
	font-family: var(--epo-sans);
}
.epo-roundup__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--epo-s-4);
	padding: var(--epo-s-3) var(--epo-s-4);
	background: var(--epo-pine);
	color: var(--epo-paper);
	font-size: var(--epo-t-sm);
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.epo-roundup__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epo-s-4);
	padding: var(--epo-s-4);
	border-top: 1px solid var(--epo-line);
}
.epo-roundup__row:nth-child(even) { background: var(--epo-paper); }
.epo-roundup__meta { min-inline-size: 0; }
.epo-roundup__label {
	display: block;
	font-size: var(--epo-t-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epo-clay);
	margin-block-end: 0.15em;
}
.epo-roundup__name {
	display: block;
	font-size: var(--epo-t-base);
	color: var(--epo-ink);
	line-height: 1.3;
}
.epo-roundup__row .epo-btn { flex: none; }
.epo-pick__cta { margin: var(--epo-s-4) 0 var(--epo-s-6); }
.epo-pick__bestfor { color: var(--epo-ink); }
@media (max-width: 560px) {
	.epo-roundup__head { font-size: var(--epo-t-xs); }
	.epo-roundup__row { flex-direction: column; align-items: stretch; }
	.epo-roundup__row .epo-btn { inline-size: 100%; }
}

/* Per-product pick: eyebrow tag, product image, pros/cons boxes. */
.epo-pick__tag {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epo-clay);
	margin-block: 0 var(--epo-s-3);
}
/* Star rating as shown on the retailer. Set --epo-rating (0–5) inline; the
   gold fill stops at that fraction, so 4.6 shows 4.6 stars. */
.epo-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15em 0.5em;
	margin-block: 0 var(--epo-s-3);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	line-height: 1.2;
}
.epo-rating__stars {
	--epo-rating-fill: calc(var(--epo-rating, 0) / 5 * 100%);
	font-size: 1.35em;
	line-height: 1;
	background: linear-gradient(90deg, #f5a623 var(--epo-rating-fill), #d8d2c8 var(--epo-rating-fill));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.epo-rating__score { font-weight: 700; color: var(--epo-ink); }
.epo-rating__count { color: var(--epo-ink); opacity: 0.65; }
.epo-pick__media { margin-block: var(--epo-s-4); }
/* Product shots show the WHOLE product (contain, not the theme's square crop)
   and every one sits in the same fixed box, so all 10 are a uniform size. The
   high-specificity selector beats the global .epo-content .wp-block-image rule. */
.epo-content figure.wp-block-image.epo-pick__media,
.epo-content .wp-block-image.epo-pick__media {
	inline-size: min(340px, 100%);
}
.epo-content figure.wp-block-image.epo-pick__media img,
.epo-content .wp-block-image.epo-pick__media img {
	inline-size: 100%;
	block-size: 340px;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
	background: #fff;
	border: 1px solid var(--epo-line);
	border-radius: var(--epo-radius);
	display: block;
}
.epo-pick__media figcaption {
	font-family: var(--epo-sans);
	font-size: var(--epo-t-xs);
	color: var(--epo-ink);
	opacity: 0.6;
	margin-block-start: 0.4em;
}
.epo-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--epo-s-4);
	margin-block: var(--epo-s-5);
}
.epo-proscons__col {
	border: 1px solid var(--epo-line);
	border-radius: var(--epo-radius);
	overflow: hidden;
	background: var(--epo-surface);
}
.epo-proscons__head {
	padding: var(--epo-s-3) var(--epo-s-4);
	color: #fff;
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.epo-proscons__col--pros .epo-proscons__head { background: #2e7d5b; }
.epo-proscons__col--cons .epo-proscons__head { background: var(--epo-clay); }
.epo-proscons__list {
	list-style: none;
	margin: 0;
	padding: var(--epo-s-3) var(--epo-s-4);
	font-family: var(--epo-sans);
	font-size: var(--epo-t-sm);
}
.epo-proscons__list li {
	position: relative;
	padding-inline-start: 1.7em;
	margin-block: 0.55em;
	line-height: 1.5;
}
/* Reset the theme's clay dot (.epo-content ul > li::before draws a filled
   circle) so the marker is ONLY the tick / cross, and make it thick. The
   `.epo-content` prefix is required so this out-ranks that dot rule. */
.epo-content .epo-proscons__list li::before {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.05em;
	inline-size: auto;
	block-size: auto;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 1.05em;
	font-weight: 900;
	line-height: 1.4;
}
.epo-proscons__col--pros .epo-proscons__list li::before {
	content: "\2714\FE0E"; /* heavy check mark, text (non-emoji) presentation */
	color: #2e7d5b;
}
.epo-proscons__col--cons .epo-proscons__list li::before {
	content: "\2716\FE0E"; /* heavy multiplication x, text presentation */
	color: var(--epo-clay);
}
@media (max-width: 560px) {
	.epo-proscons { grid-template-columns: 1fr; }
	.epo-pick__media { max-inline-size: 100%; }
}

@media print {
	.epo-header,
	.epo-footer,
	.epo-mobilemenu,
	.epo-searchpanel,
	.epo-share,
	.epo-postnav,
	.epo-related,
	.epo-toc,
	.epo-progress,
	.epo-topics { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }
	.epo-content a { text-decoration: underline; color: #000; }
	.epo-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
	.epo-articlelayout { display: block; }
}