/*
Theme Name: Oyu
Theme URI: https://www.kazakhstantourism.org/
Author: Kazakhstan Tourism Guide
Author URI: https://www.kazakhstantourism.org/
Description: A printed-guide editorial theme for independent travel-guide authority sites, built on Kazakh felt-appliqué (syrmak) colours — terracotta on undyed cream. Masthead, table of contents and a repeating oyu ornament as the divider between sections. Two typefaces, self-hosted. No shadows, no radii, no ad slots.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oyu
Tags: blog, news, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, editor-style, block-styles, translation-ready, threaded-comments, full-width-template
*/

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

:root {
	--oyu-cream: #f7efe3;
	--oyu-ink: #110c0a;
	--oyu-terracotta: #b6322d;
	--oyu-terracotta-dark: #9b1f1d;
	--oyu-ink-soft: #3f3937;

	--oyu-rule: rgba(17, 12, 10, 0.25);
	--oyu-leader: rgba(17, 12, 10, 0.5);
	--oyu-muted: rgba(17, 12, 10, 0.65);
	--oyu-soft: rgba(17, 12, 10, 0.8);

	--oyu-container: 1184px;
	--oyu-gutter: 48px;

	--oyu-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
	--oyu-text: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	--oyu-image-filter: grayscale(0.15) contrast(1.05);
	--oyu-ornament-height: 24px;

	/* Fluid display sizes: the desktop value is the ceiling. */
	--oyu-size-hero: 80px;
	--oyu-size-h1: 68px;
	--oyu-size-archive: 92px;
	--oyu-size-section: 36px;
	--oyu-size-wordmark: 64px;
	--oyu-size-wordmark-compact: 38px;
	--oyu-size-body: 18px;
}

/* The ornament is one gradient pair, declared once. */
.oyu-ornament,
.oyu-divider,
.wp-block-separator.is-style-oyu {
	height: var(--oyu-ornament-height);
	border: 0;
	background:
		radial-gradient(circle at 50% 100%, transparent 4px, var(--oyu-terracotta) 4.5px 7px, transparent 7.5px) 0 0 / 24px 12px repeat-x,
		radial-gradient(circle at 50% 0%, transparent 4px, var(--oyu-terracotta) 4.5px 7px, transparent 7.5px) 12px 12px / 24px 12px repeat-x;
}

/* =========================================================================
   2. Fonts
   ========================================================================= */

@font-face {
	font-family: "Bodoni Moda";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/BodoniModa-Roman-latin.woff2") format("woff2");
	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: "Bodoni Moda";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/BodoniModa-Roman-latin-ext.woff2") format("woff2");
	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: "Bodoni Moda";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/BodoniModa-Italic-latin.woff2") format("woff2");
	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: "Bodoni Moda";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/BodoniModa-Italic-latin-ext.woff2") format("woff2");
	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: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/SpaceGrotesk-Roman-latin.woff2") format("woff2");
	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: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/SpaceGrotesk-Roman-latin-ext.woff2") format("woff2");
	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;
}

/* =========================================================================
   3. Base
   ========================================================================= */

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

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

@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;
	}
}

body {
	margin: 0;
	background: var(--oyu-cream);
	color: var(--oyu-ink);
	font-family: var(--oyu-text);
	font-size: var(--oyu-size-body);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--oyu-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	margin: 0;
}

p {
	margin: 0 0 18px;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 150ms ease, color 150ms ease, border-color 150ms ease;
}

a:hover {
	opacity: 0.8;
}

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

figure {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--oyu-terracotta);
	outline-offset: 3px;
}

::selection {
	background: var(--oyu-terracotta);
	color: var(--oyu-cream);
}

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

.oyu-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--oyu-terracotta);
	color: var(--oyu-cream);
	padding: 12px 20px;
	font: 500 12px/1 var(--oyu-text);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oyu-skip-link:focus {
	left: 8px;
	top: 8px;
	opacity: 1;
}

/* =========================================================================
   4. Shared primitives
   ========================================================================= */

.oyu-shell {
	max-width: calc(var(--oyu-container) + var(--oyu-gutter) * 2);
	margin: 0 auto;
	padding-left: var(--oyu-gutter);
	padding-right: var(--oyu-gutter);
}

/* The ornament is decorative and inset to the content width. */
.oyu-divider {
	margin-top: 40px;
}

.oyu-divider--top {
	margin-top: 16px;
}

.oyu-eyebrow {
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oyu-terracotta);
}

.oyu-meta {
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.oyu-textbutton {
	display: inline-block;
	font-family: var(--oyu-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	/* 12px of uppercase over a 1px rule is a 16px target. The extra top
	   padding buys WCAG 2.5.8's 24px without moving the rule; every place this
	   sits is baseline-aligned, so nothing else shifts either. */
	padding-top: 8px;
}

.oyu-textbutton:hover {
	opacity: 1;
	border-bottom-color: var(--oyu-terracotta);
	color: var(--oyu-terracotta);
}

.oyu-section-heading {
	font-family: var(--oyu-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--oyu-size-section);
	line-height: 1;
	letter-spacing: 0;
}

.oyu-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 26px;
}

.oyu-rule-heavy {
	border-top: 3px solid var(--oyu-ink);
}

.oyu-photo {
	display: block;
	width: 100%;
	object-fit: cover;
	filter: var(--oyu-image-filter);
}

.oyu-figure {
	position: relative;
	margin: 0;
}

.oyu-figure > img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.oyu-caption-tag {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 100%;
	background: var(--oyu-terracotta);
	color: var(--oyu-cream);
	padding: 10px 16px;
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* A placeholder keeps every fixed-ratio slot from collapsing when a post
   has no featured image, so nothing shifts once one is added. */
.oyu-placeholder {
	display: block;
	width: 100%;
	background: rgba(17, 12, 10, 0.06);
	background-image:
		radial-gradient(circle at 50% 100%, transparent 4px, rgba(182, 50, 45, 0.25) 4.5px 7px, transparent 7.5px) 0 50% / 24px 12px repeat-x,
		radial-gradient(circle at 50% 0%, transparent 4px, rgba(182, 50, 45, 0.25) 4.5px 7px, transparent 7.5px) 12px calc(50% + 12px) / 24px 12px repeat-x;
}

/* =========================================================================
   5. Masthead
   ========================================================================= */

.oyu-masthead {
	position: relative;
}

.oyu-masthead__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.oyu-masthead--full .oyu-masthead__meta {
	padding-top: 18px;
}

.oyu-masthead--compact .oyu-masthead__meta {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-top: 14px;
}

.oyu-masthead__meta > * {
	min-width: 0;
}

.oyu-masthead__lead,
.oyu-masthead__established,
.oyu-masthead__date {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The compact masthead's date only appears once the lockup has moved out of
   the meta row. */
.oyu-masthead__date--stowed {
	display: none;
}

.oyu-masthead--compact .oyu-masthead__search {
	text-align: right;
}

.oyu-search-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	letter-spacing: inherit;
	text-transform: inherit;
}

.oyu-search-toggle:hover {
	color: var(--oyu-terracotta);
}

.oyu-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin: 0;
	padding: 0;
}

.oyu-masthead--full .oyu-lockup {
	margin-top: 22px;
}

.oyu-masthead--compact .oyu-lockup {
	gap: 14px;
	justify-self: center;
}

.oyu-lockup__link {
	display: flex;
	align-items: center;
	gap: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.oyu-lockup__mark {
	display: block;
	flex: none;
	width: 44px;
	height: 44px;
	color: var(--oyu-terracotta);
}

.oyu-masthead--compact .oyu-lockup__mark {
	width: 32px;
	height: 32px;
}

.oyu-lockup__mark img,
.oyu-lockup__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.oyu-wordmark {
	font-family: var(--oyu-display);
	font-weight: 500;
	font-size: var(--oyu-size-wordmark);
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: none;
	margin: 0;
	text-wrap: balance;
}

.oyu-masthead--compact .oyu-wordmark {
	font-size: var(--oyu-size-wordmark-compact);
}

.oyu-nav {
	border-top: 3px solid var(--oyu-ink);
	border-bottom: 1px solid var(--oyu-ink);
	padding: 13px 0;
}

.oyu-masthead--full .oyu-nav {
	margin-top: 22px;
}

.oyu-masthead--compact .oyu-nav {
	margin-top: 16px;
}

.oyu-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	font-family: var(--oyu-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oyu-nav__list a {
	display: inline-block;
	/* 12px uppercase links are 12px tall; buy WCAG 2.5.8 target height with
	   padding and give the layout back with a matching negative margin. */
	padding-block: 6px;
	margin-block: -6px;
	border-bottom: 2px solid transparent;
	padding-bottom: 8px;
	margin-bottom: -8px;
}

.oyu-nav__list .current-menu-item > a,
.oyu-nav__list .current-menu-parent > a,
.oyu-nav__list .current-menu-ancestor > a,
.oyu-nav__list .current_page_item > a,
.oyu-nav__list .oyu-nav-current > a {
	color: var(--oyu-terracotta);
	border-bottom-color: var(--oyu-terracotta);
}

.oyu-nav__list a:hover {
	opacity: 1;
	color: var(--oyu-terracotta);
}

.oyu-nav__list ul {
	display: none;
}

/* Inline search, opened from the masthead. */
.oyu-searchbar {
	padding-top: 18px;
}

.oyu-searchbar[hidden] {
	display: none;
}

.oyu-searchform {
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--oyu-ink);
}

.oyu-searchform__field {
	flex: 1;
	min-width: 0;
	appearance: none;
	background: none;
	border: 0;
	padding: 8px 0 10px;
	color: inherit;
	font-family: var(--oyu-display);
	font-style: italic;
	font-size: 18px;
	line-height: 1.4;
}

.oyu-searchform__field::placeholder {
	color: var(--oyu-ink);
	opacity: 0.55;
}

.oyu-searchform__field:focus {
	outline: 0;
}

.oyu-searchform:focus-within {
	border-bottom-color: var(--oyu-terracotta);
}

.oyu-searchform__submit {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	padding: 0 0 3px;
	margin-bottom: 8px;
	color: inherit;
	cursor: pointer;
	font-family: var(--oyu-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oyu-searchform__submit:hover {
	color: var(--oyu-terracotta);
	border-bottom-color: var(--oyu-terracotta);
}

/* =========================================================================
   6. Front page
   ========================================================================= */

.oyu-hero {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 40px;
	padding-top: 36px;
}

.oyu-hero__figure img,
.oyu-hero__figure .oyu-placeholder {
	aspect-ratio: 4 / 3;
}

.oyu-hero__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}

.oyu-hero__title {
	margin-top: 14px;
	font-size: var(--oyu-size-hero);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.oyu-hero__tagline {
	margin: 22px 0 0;
	max-width: 420px;
	font-size: 19px;
	line-height: 1.45;
}

.oyu-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	border-top: 1px solid var(--oyu-ink);
	padding-top: 18px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.oyu-stats__value {
	display: block;
	font-family: var(--oyu-display);
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	margin-bottom: 6px;
}

.oyu-stats__label {
	display: block;
	margin: 0;
}

/* Contents list */
.oyu-contents {
	padding-top: 32px;
}

.oyu-contents__heading {
	margin: 0 0 12px;
}

.oyu-contents__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Multi-column, not grid: a contents page is read down one column and then
	   down the next, and columns balance themselves however many collections
	   the site ends up with. */
	column-count: 2;
	column-gap: 56px;
}

.oyu-contents__item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.oyu-contents__link {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--oyu-rule);
}

.oyu-contents__link:hover {
	opacity: 1;
}

.oyu-contents__link:hover .oyu-contents__name {
	color: var(--oyu-terracotta);
}

.oyu-contents__num {
	flex: none;
	min-width: 44px;
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	color: var(--oyu-terracotta);
	font-variant-numeric: lining-nums tabular-nums;
}

.oyu-contents__name {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	transition: color 150ms ease;
}

.oyu-contents__leader {
	flex: 1;
	min-width: 12px;
	border-bottom: 1px dotted var(--oyu-leader);
	transform: translateY(-5px);
}

.oyu-contents__count {
	flex: none;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Latest articles */
.oyu-latest {
	padding-top: 32px;
	padding-bottom: 56px;
}

.oyu-latest__lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.oyu-latest__tail {
	margin-top: 36px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	border-top: 3px solid var(--oyu-ink);
	padding-top: 20px;
}

/* =========================================================================
   7. Cards
   ========================================================================= */

.oyu-card {
	display: block;
	min-width: 0;
}

.oyu-card__media img,
.oyu-card__media .oyu-placeholder {
	aspect-ratio: 3 / 2;
}

.oyu-card__eyebrow {
	display: block;
	font-family: var(--oyu-text);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--oyu-terracotta);
}

.oyu-card__title {
	font-family: var(--oyu-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	margin: 0;
}

.oyu-card__excerpt {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--oyu-soft);
}

.oyu-card__date {
	display: block;
	font-size: 12px;
	line-height: 1;
	color: var(--oyu-muted);
}

.oyu-card:hover {
	opacity: 1;
}

.oyu-card:hover .oyu-card__title {
	color: var(--oyu-terracotta);
}

.oyu-card__title {
	transition: color 150ms ease;
}

/* Large */
.oyu-card--large .oyu-card__eyebrow {
	margin: 18px 0 10px;
	font-size: 11px;
	letter-spacing: 0.14em;
}

.oyu-card--large .oyu-card__title {
	font-size: 34px;
	line-height: 1.1;
}

/* Small */
.oyu-card--small .oyu-card__eyebrow {
	font-size: 10px;
	letter-spacing: 0.14em;
}

.oyu-card--small .oyu-card__title {
	display: block;
	margin: 10px 0 8px;
	font-size: 21px;
	line-height: 1.15;
	letter-spacing: 0;
}

/* Medium */
.oyu-card--medium .oyu-card__eyebrow {
	margin: 16px 0 8px;
	font-size: 11px;
	letter-spacing: 0.14em;
}

.oyu-card--medium .oyu-card__title {
	font-size: 26px;
	line-height: 1.15;
}

.oyu-more {
	padding-top: 48px;
	padding-bottom: 56px;
}

.oyu-more__head {
	border-top: 3px solid var(--oyu-ink);
	padding-top: 20px;
}

.oyu-more__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

/* =========================================================================
   8. Archive
   ========================================================================= */

.oyu-collection-head {
	padding-top: 44px;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 40px;
	align-items: end;
}

.oyu-collection-head--solo {
	grid-template-columns: minmax(0, 1fr);
}

.oyu-collection-head__title {
	margin: 10px 0 0;
	display: flex;
	align-items: baseline;
	gap: 24px;
	font-size: var(--oyu-size-archive);
	line-height: 1;
	letter-spacing: -0.02em;
}

.oyu-collection-head__num {
	color: var(--oyu-terracotta);
	font-variant-numeric: lining-nums tabular-nums;
}

.oyu-collection-head__desc {
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.45;
}

.oyu-featured {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 40px;
	padding-top: 36px;
}

.oyu-featured__figure img,
.oyu-featured__figure .oyu-placeholder {
	aspect-ratio: 4 / 3;
}

.oyu-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.oyu-featured__eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
}

.oyu-featured__title {
	margin: 14px 0 0;
	font-size: 52px;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.oyu-featured__excerpt {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(17, 12, 10, 0.85);
}

.oyu-featured__link {
	/* 26px in the design, less the 8px of target padding the button carries. */
	margin-top: 18px;
}

.oyu-rows {
	padding-top: 40px;
	border-top: 0;
}

.oyu-rows__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 3px solid var(--oyu-ink);
}

.oyu-row {
	display: grid;
	grid-template-columns: 52px 240px minmax(0, 1fr) 140px;
	gap: 32px;
	align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid var(--oyu-rule);
}

.oyu-row:hover {
	opacity: 1;
}

.oyu-row:hover .oyu-row__title {
	color: var(--oyu-terracotta);
}

.oyu-row__num {
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	color: var(--oyu-terracotta);
	font-variant-numeric: lining-nums tabular-nums;
}

.oyu-row__media img,
.oyu-row__media .oyu-placeholder {
	width: 100%;
	aspect-ratio: 3 / 2;
}

.oyu-row__title {
	display: block;
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	transition: color 150ms ease;
}

.oyu-row__excerpt {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--oyu-soft);
}

.oyu-row__date {
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: right;
}

.oyu-pagination {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 28px 0 56px;
}

.oyu-pagination__indicator {
	font-family: var(--oyu-display);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
}

.oyu-pagination__links {
	display: flex;
	gap: 28px;
	align-items: baseline;
}

.oyu-pagination__spacer {
	flex: 1;
}

/* =========================================================================
   9. Single post
   ========================================================================= */

.oyu-article-head {
	padding-top: 40px;
}

.oyu-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.oyu-breadcrumb a {
	opacity: 0.6;
}

.oyu-breadcrumb a:hover {
	opacity: 0.9;
}

.oyu-breadcrumb__sep {
	opacity: 0.4;
}

.oyu-breadcrumb__current,
.oyu-breadcrumb a.oyu-breadcrumb__term {
	color: var(--oyu-terracotta);
	opacity: 1;
}

/* Rank Math renders its own markup; give it the same look. */
.oyu-breadcrumb .last,
.oyu-breadcrumb .separator {
	opacity: 0.4;
}

.oyu-breadcrumb .last {
	color: var(--oyu-terracotta);
	opacity: 1;
}

.oyu-article-title {
	margin: 18px 0 0;
	max-width: 980px;
	font-size: var(--oyu-size-h1);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.oyu-standfirst {
	margin: 22px 0 0;
	max-width: 720px;
	font-size: 20px;
	line-height: 1.45;
}

.oyu-byline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-top: 26px;
	padding: 14px 0;
	border-top: 1px solid var(--oyu-ink);
	border-bottom: 1px solid var(--oyu-rule);
	font-size: 13px;
	line-height: 1.4;
}

.oyu-byline__author {
	font-weight: 600;
}

.oyu-byline__reading {
	flex: none;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.oyu-article-hero {
	margin-top: 28px;
}

.oyu-article-hero img,
.oyu-article-hero .oyu-placeholder {
	aspect-ratio: 2 / 1;
}

.oyu-article-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 64px;
	padding-top: 40px;
}

.oyu-article-main {
	min-width: 0;
}

/* Sidebar */
.oyu-sidebar {
	position: sticky;
	top: 24px;
	align-self: start;
	display: grid;
	gap: 36px;
	min-width: 0;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.oyu-sidebar__title {
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oyu-terracotta);
	padding-bottom: 12px;
	border-bottom: 3px solid currentColor;
	margin: 0;
}

.oyu-toc__list,
.oyu-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: oyu-toc;
}

.oyu-toc__link {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--oyu-rule);
}

.oyu-toc__num {
	flex: none;
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: var(--oyu-terracotta);
	font-variant-numeric: lining-nums tabular-nums;
}

.oyu-toc__label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	transition: color 150ms ease;
}

.oyu-toc__link:hover {
	opacity: 1;
}

.oyu-toc__link:hover .oyu-toc__label,
.oyu-toc__item.is-current .oyu-toc__label {
	color: var(--oyu-terracotta);
}

.oyu-related__link {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--oyu-rule);
}

.oyu-related__title {
	display: block;
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.2;
	text-wrap: pretty;
	transition: color 150ms ease;
}

.oyu-related__link:hover {
	opacity: 1;
}

.oyu-related__link:hover .oyu-related__title {
	color: var(--oyu-terracotta);
}

.oyu-related__date {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1;
	color: var(--oyu-muted);
}

.oyu-sidebar__search .oyu-searchform {
	border-bottom-color: var(--oyu-ink);
}

.oyu-sidebar__search .oyu-searchform__field {
	font-size: 18px;
	padding-top: 0;
	padding-bottom: 8px;
}

/* The article TOC folded into a details block on narrow screens. */
.oyu-toc-inline {
	display: none;
	margin: 0 0 32px;
	border: 1px solid var(--oyu-rule);
}

.oyu-toc-inline > summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 20px;
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oyu-terracotta);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.oyu-toc-inline > summary::-webkit-details-marker {
	display: none;
}

.oyu-toc-inline > summary::after {
	content: "+";
	font-size: 16px;
	line-height: 1;
}

.oyu-toc-inline[open] > summary::after {
	content: "\2013";
}

.oyu-toc-inline__body {
	padding: 0 20px 8px;
}

/* Prev / next */
.oyu-prevnext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-top: 28px;
}

.oyu-prevnext__cell--next {
	text-align: right;
}

.oyu-prevnext__eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
}

.oyu-prevnext__title {
	display: block;
	margin-top: 10px;
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	text-wrap: pretty;
	transition: color 150ms ease;
}

.oyu-prevnext a:hover {
	opacity: 1;
}

.oyu-prevnext a:hover .oyu-prevnext__title {
	color: var(--oyu-terracotta);
}

/* =========================================================================
   10. Entry content
   ========================================================================= */

.oyu-entry {
	font-family: var(--oyu-text);
	font-size: var(--oyu-size-body);
	line-height: 1.65;
	counter-reset: oyu-h2;
}

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

.oyu-entry p {
	margin: 0 0 18px;
}

.oyu-entry h2 {
	margin: 40px 0 14px;
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	scroll-margin-top: 24px;
}

.oyu-entry.is-numbered h2:not(.oyu-h2--plain) {
	counter-increment: oyu-h2;
}

.oyu-entry.is-numbered h2:not(.oyu-h2--plain)::before {
	content: counter(oyu-h2, decimal-leading-zero);
	color: var(--oyu-terracotta);
	margin-right: 14px;
	font-variant-numeric: lining-nums tabular-nums;
}

.oyu-entry h3 {
	margin: 32px 0 12px;
	font-size: 26px;
	line-height: 1.2;
	scroll-margin-top: 24px;
}

.oyu-entry h4 {
	margin: 28px 0 10px;
	font-size: 21px;
	line-height: 1.25;
}

.oyu-entry a {
	color: var(--oyu-terracotta);
	border-bottom: 1px solid rgba(182, 50, 45, 0.4);
}

.oyu-entry a:hover {
	opacity: 1;
	border-bottom-color: var(--oyu-terracotta);
}

.oyu-entry ul,
.oyu-entry ol {
	margin: 0 0 18px;
	padding-left: 24px;
}

.oyu-entry li {
	margin-bottom: 8px;
}

.oyu-entry li::marker {
	color: var(--oyu-terracotta);
}

.oyu-entry strong {
	font-weight: 600;
}

.oyu-entry figure {
	margin: 28px 0;
}

.oyu-entry figure img {
	display: block;
	width: 100%;
	height: auto;
}

.oyu-entry figcaption {
	margin-top: 10px;
	font-family: var(--oyu-text);
	font-size: 13px;
	line-height: 1.4;
	color: rgba(17, 12, 10, 0.7);
}

.oyu-entry .oyu-dropcap::first-letter,
.oyu-entry.has-dropcap > p:first-of-type::first-letter {
	float: left;
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 92px;
	line-height: 0.78;
	color: var(--oyu-terracotta);
	margin: 8px 12px 0 0;
}

.oyu-entry blockquote,
.wp-block-quote {
	margin: 32px 0;
	padding: 0 0 0 28px;
	border-left: 3px solid var(--oyu-terracotta);
	font-family: var(--oyu-display);
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.oyu-entry blockquote p,
.wp-block-quote p {
	margin: 0 0 12px;
}

.oyu-entry blockquote p:last-child,
.wp-block-quote p:last-child {
	margin-bottom: 0;
}

.oyu-entry blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--oyu-text);
	font-style: normal;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--oyu-muted);
}

/* Tables — no zebra, no vertical borders, scrollable when they must be. */
.oyu-tablewrap {
	overflow-x: auto;
	margin: 28px 0;
	-webkit-overflow-scrolling: touch;
}

.oyu-tablewrap.is-overflowing {
	mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.oyu-tablewrap.is-overflowing.is-scrolled-end {
	mask-image: none;
	-webkit-mask-image: none;
}

.oyu-entry table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--oyu-text);
	font-size: 15px;
	line-height: 1.4;
}

.oyu-tablewrap table {
	min-width: 520px;
	margin: 0;
}

.oyu-entry th,
.wp-block-table th {
	text-align: left;
	padding: 0 16px 12px 0;
	border-bottom: 3px solid var(--oyu-ink);
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: bottom;
}

.oyu-entry th:last-child,
.wp-block-table th:last-child {
	padding-right: 0;
}

.oyu-entry td,
.wp-block-table td {
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--oyu-rule);
	vertical-align: top;
}

.oyu-entry td:last-child,
.wp-block-table td:last-child {
	padding-right: 0;
}

.oyu-entry tbody td:first-child,
.wp-block-table tbody td:first-child {
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
}

/* Key facts box */
.oyu-keyfacts,
.wp-block-group.is-style-oyu-key-facts {
	margin: 36px 0;
	border: 1px solid rgba(17, 12, 10, 0.3);
	padding: 0;
}

.oyu-keyfacts::before,
.wp-block-group.is-style-oyu-key-facts::before {
	content: "";
	display: block;
	height: var(--oyu-ornament-height);
	margin: 10px 16px 0;
	background:
		radial-gradient(circle at 50% 100%, transparent 4px, var(--oyu-terracotta) 4.5px 7px, transparent 7.5px) 0 0 / 24px 12px repeat-x,
		radial-gradient(circle at 50% 0%, transparent 4px, var(--oyu-terracotta) 4.5px 7px, transparent 7.5px) 12px 12px / 24px 12px repeat-x;
}

.wp-block-group.is-style-oyu-key-facts {
	padding: 18px 24px 24px;
}

.wp-block-group.is-style-oyu-key-facts::before {
	margin: -8px -8px 14px;
}

.oyu-keyfacts__inner {
	padding: 18px 24px 24px;
}

.oyu-keyfacts__title {
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oyu-terracotta);
	margin: 0;
}

.oyu-keyfacts dl,
.wp-block-group.is-style-oyu-key-facts dl {
	margin: 14px 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 24px;
	font-family: var(--oyu-text);
	font-size: 15px;
	line-height: 1.4;
}

.oyu-keyfacts dt,
.wp-block-group.is-style-oyu-key-facts dt {
	font-family: var(--oyu-display);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
}

.oyu-keyfacts dd,
.wp-block-group.is-style-oyu-key-facts dd {
	margin: 0;
}

/* The at-a-glance table, when it is promoted into the box. */
.oyu-keyfacts .oyu-tablewrap {
	margin: 14px 0 0;
}

/* FAQ */
.oyu-faq {
	margin: 40px 0 0;
	border-top: 3px solid var(--oyu-ink);
}

.oyu-faq__item {
	border-bottom: 1px solid var(--oyu-rule);
}

.oyu-faq__q {
	margin: 0;
	padding: 20px 0 0;
	font-family: var(--oyu-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
}

.oyu-faq__a {
	padding: 10px 0 20px;
}

.oyu-faq__a > p:last-child {
	margin-bottom: 0;
}

/* Credits, folded away at the foot of the article. */
.oyu-credits {
	margin: 40px 0 0;
	border-top: 1px solid var(--oyu-rule);
}

.oyu-credits > summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 0 0;
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oyu-terracotta);
}

.oyu-credits > summary::-webkit-details-marker {
	display: none;
}

.oyu-credits > summary::after {
	content: " +";
}

.oyu-credits[open] > summary::after {
	content: " \2013";
}

.oyu-credits__body {
	padding: 12px 0 20px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(17, 12, 10, 0.7);
}

.oyu-credits__body p {
	margin: 0 0 10px;
}

.oyu-entry .photo-credits {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(17, 12, 10, 0.7);
}

/* Lede lifted out of the prose. */
.oyu-verified {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

/* =========================================================================
   11. Page, search, 404
   ========================================================================= */

.oyu-page-body {
	max-width: 760px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 56px;
}

.oyu-page-head {
	padding-top: 40px;
}

.oyu-search-head {
	padding-top: 44px;
}

.oyu-search-head__title {
	margin: 10px 0 0;
	font-style: italic;
	font-size: var(--oyu-size-archive);
	line-height: 1;
	letter-spacing: -0.02em;
}

.oyu-404 {
	padding-top: 44px;
	padding-bottom: 8px;
}

.oyu-404__title {
	margin: 10px 0 0;
	display: flex;
	align-items: baseline;
	gap: 24px;
	font-size: var(--oyu-size-archive);
	line-height: 1;
	letter-spacing: -0.02em;
}

.oyu-404__num {
	color: var(--oyu-terracotta);
	font-variant-numeric: lining-nums tabular-nums;
}

.oyu-404__search {
	max-width: 560px;
	margin-top: 32px;
}

.oyu-empty {
	padding: 40px 0 56px;
	font-size: 19px;
	line-height: 1.5;
	max-width: 640px;
}

/* Comments are off across the network, but the theme must not break if a
   site turns them on. */
.oyu-comments {
	padding-top: 48px;
	padding-bottom: 56px;
	max-width: 760px;
}

.oyu-comments__title {
	font-family: var(--oyu-display);
	font-style: italic;
	font-size: var(--oyu-size-section);
	line-height: 1;
	margin: 0 0 24px;
}

.oyu-comments .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oyu-comments .comment-list li {
	padding: 20px 0;
	border-bottom: 1px solid var(--oyu-rule);
}

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

.oyu-comments .submit {
	appearance: none;
	background: var(--oyu-terracotta);
	color: var(--oyu-cream);
	border: 0;
	padding: 12px 22px;
	font-family: var(--oyu-text);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.oyu-comments .submit:hover {
	background: var(--oyu-terracotta-dark);
}

/* =========================================================================
   12. Footer
   ========================================================================= */

.oyu-footer {
	background: var(--oyu-terracotta);
	color: var(--oyu-cream);
}

.oyu-footer a:hover {
	opacity: 0.8;
}

.oyu-footer--full {
	padding: 36px 0 28px;
}

.oyu-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(247, 239, 227, 0.35);
}

.oyu-footer__wordmark {
	font-family: var(--oyu-display);
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	margin: 0;
}

.oyu-footer__desc {
	margin: 12px 0 0;
	max-width: 340px;
	font-size: 14px;
	line-height: 1.55;
	opacity: 0.9;
}

.oyu-footer__label {
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 14px;
	opacity: 0.85;
}

.oyu-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px 20px;
	font-size: 14px;
	line-height: 1.4;
}

.oyu-footer__menu--two {
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row;
}

.oyu-footer__menu a {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
}

.oyu-footer__menu ul {
	display: none;
}

.oyu-footer__legal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding-top: 18px;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.oyu-footer--compact {
	padding: 28px 0;
}

.oyu-footer--compact .oyu-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	font-size: 13px;
	line-height: 1.4;
}

/* =========================================================================
   13. Block styles for the editor's own blocks
   ========================================================================= */

.wp-block-separator:not(.is-style-oyu) {
	border: 0;
	border-top: 1px solid var(--oyu-rule);
	margin: 32px 0;
}

.wp-block-image.is-style-oyu-caption-tag {
	position: relative;
	margin-bottom: 28px;
}

.wp-block-image.is-style-oyu-caption-tag img {
	display: block;
	width: 100%;
}

.wp-block-image.is-style-oyu-caption-tag figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	max-width: 100%;
	background: var(--oyu-terracotta);
	color: var(--oyu-cream);
	padding: 10px 16px;
	font-family: var(--oyu-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wp-block-pullquote.is-style-oyu-plate {
	margin: 40px 0;
	padding: 28px 0;
	border-top: 3px solid var(--oyu-ink);
	border-bottom: 3px solid var(--oyu-ink);
	text-align: left;
}

.wp-block-pullquote.is-style-oyu-plate p {
	font-family: var(--oyu-display);
	font-style: italic;
	font-size: 30px;
	line-height: 1.25;
	margin: 0;
}

.wp-block-button__link,
.oyu-entry .wp-block-button__link {
	background: var(--oyu-terracotta);
	color: var(--oyu-cream);
	border: 0;
	border-radius: 0;
	padding: 14px 24px;
	font-family: var(--oyu-text);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oyu-entry .wp-block-button__link:hover {
	background: var(--oyu-terracotta-dark);
	opacity: 1;
}

.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: none;
	color: var(--oyu-ink);
	border: 1px solid var(--oyu-ink);
}

.oyu-entry .wp-block-embed,
.oyu-entry .wp-block-video {
	margin: 28px 0;
}

.oyu-entry .wp-block-code,
.oyu-entry pre {
	background: rgba(17, 12, 10, 0.05);
	padding: 20px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}

.wp-block-calendar,
.wp-block-search__button {
	border-radius: 0;
}

.alignleft {
	float: left;
	margin: 6px 28px 20px 0;
}

.alignright {
	float: right;
	margin: 6px 0 20px 28px;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.oyu-entry .alignwide,
.oyu-entry .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.oyu-entry::after {
	content: "";
	display: table;
	clear: both;
}

/* =========================================================================
   14. Responsive
   ========================================================================= */

@media (max-width: 1279px) {
	:root {
		--oyu-gutter: 40px;
		--oyu-size-wordmark: 52px;
		--oyu-size-wordmark-compact: 34px;
	}

	.oyu-article-body {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 48px;
	}

	.oyu-row {
		grid-template-columns: 52px 200px minmax(0, 1fr) 120px;
		gap: 24px;
	}
}

@media (max-width: 1023px) {
	:root {
		--oyu-gutter: 32px;
		--oyu-size-hero: 56px;
		--oyu-size-h1: 48px;
		--oyu-size-archive: 68px;
		--oyu-size-section: 30px;
	}

	.oyu-hero,
	.oyu-featured,
	.oyu-collection-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.oyu-hero__body {
		justify-content: flex-start;
		gap: 28px;
	}

	.oyu-collection-head__desc {
		margin-bottom: 0;
	}

	.oyu-contents__list {
		column-count: 1;
	}

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

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

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

	.oyu-article-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.oyu-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* The sidebar's own contents list is redundant once the article carries
	   a details block at the top. */
	.oyu-sidebar .oyu-toc {
		display: none;
	}

	.oyu-toc-inline {
		display: block;
	}

	.oyu-row {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 20px;
		align-items: start;
	}

	.oyu-row__media {
		grid-column: 2;
		max-width: 240px;
	}

	.oyu-row__text {
		grid-column: 2;
	}

	.oyu-row__date {
		grid-column: 2;
		text-align: left;
	}

	.oyu-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

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

@media (max-width: 767px) {
	:root {
		--oyu-gutter: 20px;
		--oyu-size-hero: 48px;
		--oyu-size-h1: 40px;
		--oyu-size-archive: 56px;
		--oyu-size-section: 28px;
		--oyu-size-wordmark: 34px;
		--oyu-size-wordmark-compact: 28px;
		--oyu-size-body: 17px;
	}

	body {
		line-height: 1.6;
	}

	/* Below 768 the meta row keeps only the date and Search. */
	.oyu-masthead__established {
		display: none;
	}

	.oyu-masthead__date--stowed {
		display: inline;
	}

	.oyu-masthead--compact .oyu-masthead__meta {
		grid-template-columns: 1fr auto;
		gap: 16px;
	}

	.oyu-masthead--compact .oyu-lockup {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		margin-top: 14px;
	}

	.oyu-lockup__mark {
		width: 32px;
		height: 32px;
	}

	.oyu-masthead--compact .oyu-lockup__mark {
		width: 26px;
		height: 26px;
	}

	/* The nav becomes one scrolling row with fade masks; no hamburger. */
	.oyu-nav {
		position: relative;
	}

	.oyu-nav__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 22px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* The row bleeds into the gutter so the first and last items can scroll
		   to the page edge. Tie the bleed to the gutter itself: a fixed value
		   larger than the gutter pushes the list past the viewport and gives
		   the whole document a horizontal scrollbar. */
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--oyu-gutter), #000 calc(100% - var(--oyu-gutter)), transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--oyu-gutter), #000 calc(100% - var(--oyu-gutter)), transparent 100%);
		padding-inline: var(--oyu-gutter);
		margin-inline: calc(var(--oyu-gutter) * -1);
	}

	.oyu-nav__list::-webkit-scrollbar {
		display: none;
	}

	.oyu-nav__list li {
		flex: none;
	}

	.oyu-nav__list a {
		padding-block: 12px;
		margin-block: -12px;
		padding-bottom: 14px;
		margin-bottom: -14px;
		white-space: nowrap;
	}

	.oyu-hero__title {
		line-height: 1;
	}

	.oyu-article-title {
		line-height: 1.05;
	}

	.oyu-collection-head__title,
	.oyu-404__title {
		display: block;
	}

	.oyu-collection-head__num,
	.oyu-404__num {
		display: block;
		margin-bottom: 4px;
	}

	.oyu-stats {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.oyu-latest__tail,
	.oyu-more__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.oyu-card--large .oyu-card__title {
		font-size: 26px;
	}

	.oyu-card--medium .oyu-card__title {
		font-size: 22px;
	}

	.oyu-card--small .oyu-card__title {
		font-size: 19px;
	}

	.oyu-featured__title {
		font-size: 34px;
	}

	.oyu-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.oyu-row__num {
		grid-column: 1;
		font-size: 24px;
	}

	.oyu-row__media,
	.oyu-row__text,
	.oyu-row__date {
		grid-column: 1;
		max-width: none;
	}

	.oyu-row__title {
		font-size: 24px;
	}

	.oyu-entry h2 {
		font-size: 28px;
	}

	.oyu-entry h3 {
		font-size: 22px;
	}

	.oyu-standfirst {
		font-size: 18px;
		line-height: 1.4;
	}

	.oyu-entry blockquote,
	.wp-block-quote {
		font-size: 24px;
		padding-left: 20px;
	}

	.oyu-entry.has-dropcap > p:first-of-type::first-letter,
	.oyu-entry .oyu-dropcap::first-letter {
		font-size: 64px;
	}

	.oyu-byline {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.oyu-prevnext {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.oyu-prevnext__cell--next {
		text-align: left;
	}

	.oyu-pagination {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.oyu-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.oyu-footer__menu--two {
		grid-template-columns: 1fr 1fr;
	}

	.oyu-footer__legal,
	.oyu-footer--compact .oyu-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.oyu-featured__figure img,
	.oyu-featured__figure .oyu-placeholder,
	.oyu-hero__figure img,
	.oyu-hero__figure .oyu-placeholder {
		aspect-ratio: 3 / 2;
	}

	.oyu-article-hero img,
	.oyu-article-hero .oyu-placeholder {
		aspect-ratio: 3 / 2;
	}
}

/* =========================================================================
   15. Print
   ========================================================================= */

@media print {
	.oyu-nav,
	.oyu-sidebar,
	.oyu-prevnext,
	.oyu-more,
	.oyu-searchbar,
	.oyu-footer,
	.oyu-divider,
	.oyu-skip-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.oyu-article-body {
		display: block;
	}

	.oyu-entry a {
		border: 0;
	}
}

/* The 404 page ends on the Contents list; keep the footer off it. */
.oyu-404__tail {
	padding-bottom: 56px;
}