/*
 * Cover Story + Parallax: front end.
 * Colours (--rr-px-bg, --rr-px-panel, --rr-px-accent) are set per article by assets.php.
 * Fallbacks below keep the blocks looking right if they are used on a page without settings.
 */

body.rr-has-parallax,
body.rr-cover-layout {
	overflow-x: clip; /* full-width bands never cause sideways scrolling */
}

/* ---------- Parallax Section ---------- */

.rr-px-section {
	--rr-px-align: center;
	position: relative;
	display: flex;
	align-items: var(--rr-px-align);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw); /* break out of the article's narrow column */
	overflow: hidden;
	background: var(--rr-px-section-bg, var(--rr-px-bg, #101b2c));
	box-sizing: border-box;
}

.rr-px-section--light {
	color: #fff;
}

.rr-px-section--dark {
	color: #1b1b1b;
}

.rr-px-bg {
	position: absolute;
	top: -15%;
	right: 0;
	bottom: -15%;
	left: 0;
	background-position: center;
	background-size: cover;
	pointer-events: none;
	will-change: transform;
}

/*
 * The inner wrapper is deliberately NOT positioned, so absolutely placed
 * Parallax Layers measure their top/left/width against the full-width section,
 * not against this centred column. Text and cards are lifted above the layers instead.
 */
.rr-px-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 48px;
	box-sizing: border-box;
}

.rr-px-inner > :not(.rr-px-layer) {
	position: relative;
	z-index: 2;
}

/* ---------- Parallax Layer ---------- */

.rr-px-layer {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	will-change: transform;
}

/* Cover collage pictures sit above the hero's title block (z-index 2) when "in front". */
.rr-px-layer--front {
	z-index: 3;
}

.rr-px-layer__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Parallax Card ---------- */

.rr-px-card {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: 48px;
	color: var(--rr-px-card-fg, #1b1b1b); /* set per card from its background, see the card's render.php */
	background: var(--rr-px-card-bg, var(--rr-px-panel, #f5efe2));
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	will-change: transform;
}

.rr-px-card--left {
	margin-right: auto;
}

.rr-px-card--center {
	margin-right: auto;
	margin-left: auto;
}

.rr-px-card--right {
	margin-left: auto;
}

.rr-px-card > :first-child {
	margin-top: 0;
}

.rr-px-card > :last-child {
	margin-bottom: 0;
}

/*
 * The site's base styles (UIkit) give headings and quotes a fixed dark colour.
 * Inside sections and cards, let them follow the colour the section/card chose,
 * so light text on a dark card stays readable.
 */
.rr-px-section :is(h1, h2, h3, h4, h5, h6, blockquote, figcaption, li, p, cite) {
	color: inherit;
}

/* ---------- Reader's Motion button ---------- */

.rr-px-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	color: #fff;
	font: 700 13px/1 "Lato", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(11, 26, 38, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	cursor: pointer;
}

.rr-px-toggle__state {
	padding: 2px 8px;
	font-weight: 400;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.rr-px-toggle[hidden] {
	display: none;
}

.rr-px-toggle:hover {
	background: #101b2c;
}

.rr-px-toggle:focus-visible {
	outline: 3px solid #fdbf56;
	outline-offset: 3px;
}

.rr-px-toggle[aria-pressed="false"] {
	border-style: dashed;
}

/* ---------- Motion off: everything sits still ---------- */

body.rr-px-off [data-speed] {
	transform: none !important;
}

/* Pictures that fade in on scroll are simply all visible when motion is off. */
body.rr-px-off [data-reveal] {
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-speed] {
		will-change: auto;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
	.rr-px-inner {
		padding: 56px 22px;
	}

	.rr-px-card {
		padding: 28px 22px;
	}

	.rr-px-layer--hide-small {
		display: none;
	}

	.rr-px-toggle {
		right: 12px;
		bottom: 12px;
	}
}

/* ---------- Cover Story page ---------- */

/*
 * Only the opening section (and any Parallax Section blocks) carry the cover's dark design.
 * The article below it keeps the site's normal look: page colour, text colour, fonts and links
 * all come from the theme, and normal blocks sit in the same column as on a standard article
 * (900px wide, with the theme's side gaps).
 */
.rr-cover .rr-cover__content > :not(.rr-px-section, .rr-chapters, .rr-entry) {
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 40px;
	padding-left: 40px;
	box-sizing: content-box;
}

/*
 * The story body is one block with its own top and bottom spacing (padding, not margins), so a
 * story background colour fills the space above the first line and below the last one. With
 * margins, those gaps collapsed outside the block and showed as white strips.
 */
.rr-cover .rr-cover__content {
	display: flow-root;
	padding-top: 48px;
	padding-bottom: 60px;
}

/* The audio player the site adds above the article (Trinity Audio) sits in the same column as the text. */
.rr-cover .rr-cover__content > #trinity-audio-table {
	width: calc(100% - 80px) !important;
	max-width: 900px !important;
	margin: 0 auto 24px !important;
}

@media (max-width: 959px) {
	.rr-cover .rr-cover__content > #trinity-audio-table {
		width: calc(100% - 60px) !important;
	}
}

@media (max-width: 639px) {
	.rr-cover .rr-cover__content > #trinity-audio-table {
		width: calc(100% - 30px) !important;
	}
}

/*
 * The player itself is an iframe from Trinity with a see-through background and dark grey text,
 * which a theme cannot recolour. On a story with its own background colour it therefore sits
 * on a white card, so it stays readable on a dark page.
 */
.rr-cover .rr-cover__content.has-story-bg > #trinity-audio-table td#trinity-audio-tab {
	padding: 12px 16px !important;
	background: #fff;
	border-radius: 8px;
}


@media (max-width: 959px) {
	.rr-cover .rr-cover__content > :not(.rr-px-section, .rr-chapters, .rr-entry) {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media (max-width: 639px) {
	.rr-cover .rr-cover__content > :not(.rr-px-section, .rr-chapters, .rr-entry) {
		padding-right: 15px;
		padding-left: 15px;
	}
}

.rr-cover .rr-cover-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh; /* phones: ignore the collapsing address bar */
	padding: 140px 0 0;
	overflow: hidden;
	color: #fff;
	background: var(--rr-px-bg, #101b2c);
	box-sizing: border-box;
}

.rr-cover .rr-cover-hero__bg {
	position: absolute;
	top: -12%;
	right: 0;
	bottom: -12%;
	left: 0;
	background-position: center;
	background-size: cover;
	opacity: 0.6;
	will-change: transform;
}

.rr-cover .rr-cover-hero__shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(11, 26, 38, 0.15), rgba(11, 26, 38, 0.85));
}

.rr-cover .rr-cover-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px 110px;
	box-sizing: border-box;
	will-change: transform;
}

.rr-cover .rr-cover-hero__kicker {
	margin: 0 0 18px;
	color: var(--rr-px-accent, #fdbf56);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.rr-cover .rr-cover-hero__title {
	max-width: 900px;
	margin: 0;
	color: #fff;
	font-family: "Big Shoulders Display", sans-serif;
	font-size: clamp(48px, 8.4vw, 124px);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* The template adds these by title length (over 22 and over 40 characters): longer titles, smaller type. */
.rr-cover .rr-cover-hero__title--medium {
	max-width: 1000px;
	font-size: clamp(42px, 6.4vw, 96px);
	line-height: 0.96;
}

.rr-cover .rr-cover-hero__title--long {
	max-width: 1000px;
	font-size: clamp(36px, 4.8vw, 72px);
	line-height: 1;
}

.rr-cover .rr-cover-hero__dek {
	max-width: 620px;
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.88);
	font-family: "Playfair Display", serif;
	font-size: clamp(19px, 2.2vw, 26px);
	line-height: 1.45;
}

.rr-cover .rr-cover-hero__byline {
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/*
 * "Read the story" button. It is only as wide as its text on every screen size: the
 * opening text is a column (flex), which would otherwise stretch the button full width.
 */
.rr-cover .rr-cover-hero__cta {
	display: inline-block;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
	margin: 32px 0 0;
	padding: 4px 28px;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
}

.rr-cover .rr-cover__content {
	position: relative;
	scroll-margin-top: 90px; /* the site header is fixed; keep "Read the story" from landing under it */
}

@media (max-width: 767px) {
	.rr-cover .rr-cover-hero {
		min-height: 88vh;
		min-height: 88svh;
		padding-top: 110px;
	}

	.rr-cover .rr-cover-hero__inner {
		padding: 0 22px 64px;
	}
}

/* ---------- Chapter bar (Cover Story) ---------- */

/*
 * A row of links under the opening section, pinned under the site header while the
 * reader scrolls. chapters.js sets --rr-cs-top (the header's height) and --rr-cs-bar-h.
 * The fallbacks keep it usable without JavaScript.
 */
.rr-chapters {
	position: sticky;
	top: var(--rr-cs-top, 80px);
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 52px;
	padding: 0 24px;
	color: #fff;
	font-family: "Lato", sans-serif;
	background: rgba(11, 26, 38, 0.96);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	box-sizing: border-box;
}

.rr-chapters__title {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.rr-chapters__list {
	display: flex;
	flex: 1 1 auto;
	gap: 2px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.rr-chapters__list::-webkit-scrollbar {
	display: none;
}

.rr-chapters__list li {
	flex: none;
	margin: 0;
	padding: 0;
}

.rr-chapters__link {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 12px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.rr-chapters__link:hover {
	color: #fff;
	text-decoration: none;
}

.rr-chapters__link[aria-current="location"] {
	color: #fff;
	border-bottom-color: var(--rr-px-accent, #fdbf56);
}

.rr-chapters__link:focus-visible {
	outline: 3px solid #fdbf56;
	outline-offset: -3px;
}

/* Jumping to a chapter lands below the fixed header and the bar, not under them. */
.rr-cover .rr-px-section {
	scroll-margin-top: calc(var(--rr-cs-top, 80px) + var(--rr-cs-bar-h, 52px));
}

/* Smooth jumps, unless the reader wants less motion (device setting or our Motion button). */
@media (prefers-reduced-motion: no-preference) {
	html:has(body.rr-cover-layout:not(.rr-px-off)) {
		scroll-behavior: smooth;
	}
}

@media (max-width: 767px) {
	.rr-chapters {
		gap: 10px;
		padding: 0 10px;
	}

	.rr-chapters__title {
		font-size: 13px;
	}
}

/* ---------- Cover opening: taller and mosaic modes ---------- */

/*
 * "Stacked" openings (a taller section, or a mosaic) show the title on the first screen and
 * give the pictures room below it. The title block keeps its screen-high box; the hero grows.
 */
.rr-cover .rr-cover-hero--stack {
	display: block;
	min-height: calc(var(--rr-hero-h, 1) * 100vh);
	min-height: calc(var(--rr-hero-h, 1) * 100svh);
}

.rr-cover .rr-cover-hero--stack .rr-cover-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(100vh - 140px);
	min-height: calc(100svh - 140px);
}

/* The background photo and its shade belong to the first screen; below it the page colour shows. */
.rr-cover .rr-cover-hero--stack .rr-cover-hero__bg {
	top: -12vh;
	top: -12svh;
	bottom: auto;
	height: 124vh;
	height: 124svh;
}

.rr-cover .rr-cover-hero--stack .rr-cover-hero__shade {
	background: linear-gradient(to bottom, rgba(11, 26, 38, 0.25) 0, rgba(11, 26, 38, 0.85) 100vh, rgba(11, 26, 38, 0.95) 100%);
	background: linear-gradient(to bottom, rgba(11, 26, 38, 0.25) 0, rgba(11, 26, 38, 0.85) 100svh, rgba(11, 26, 38, 0.95) 100%);
}

/*
 * The mosaic: one block, 60% of the page wide, that holds every picture. Its height comes from
 * an inline aspect-ratio, so the pictures (positioned in % of the block) stay edge to edge on
 * every screen shape.
 *
 * The title screen (photo + title) is pinned: it stays in place, one screen high, for as long
 * as the pictures are passing over it. When the last pictures arrive the pin lets go and the
 * page carries on to the next section. So the whole animation plays on the opening screen.
 */
.rr-cover .rr-cover-hero--mosaic {
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: clip; /* "hidden" would stop the pin (position: sticky) from working */
}

.rr-cover .rr-cover-hero--mosaic .rr-cover-hero__bg {
	position: sticky;
	top: 0;
	right: auto;
	bottom: auto;
	left: auto;
	height: 100vh;
	height: 100svh;
	margin-bottom: -100vh;
	margin-bottom: -100svh;
	transform: none !important; /* pinned, so it does not drift */
}

.rr-cover .rr-cover-hero--mosaic .rr-cover-hero__shade {
	background: rgba(11, 26, 38, 0.6);
}

.rr-cover .rr-cover-hero--mosaic .rr-cover-hero__inner {
	/* Pinned just under the fixed site header (chapters.js measures it as --rr-cs-top) and
	   exactly as tall as the screen left below it, so the button is never below the fold. */
	position: sticky;
	top: var(--rr-cs-top, 80px);
	height: calc(100vh - var(--rr-cs-top, 80px));
	height: calc(100svh - var(--rr-cs-top, 80px));
	min-height: 0;
	padding-top: 24px;
}

.rr-cover .rr-cover-hero__mosaic {
	position: relative;
	z-index: 3;
	width: 60%;
	margin: -12vh auto 0; /* the first pictures start just below the title screen */
	margin: -12svh auto 0;
}

/*
 * The "stage" (class added by parallax.js while motion is on): the pictures' block is pinned
 * over the title screen too, one screen high, and parallax.js plays the pictures inside it as
 * the reader scrolls: each appears in place, then shrinks back and fades. The section's height
 * (one screen + a stretch of scrolling per picture, --rr-n = number of pictures) is how long
 * the opening stays pinned. Without the class (motion off) the pictures are the plain wall above.
 */
.rr-cover .rr-cover-hero--stage {
	height: calc(100vh + (var(--rr-n, 8) + 2) * 32vh);
	height: calc(100svh + (var(--rr-n, 8) + 2) * 32svh);
}

.rr-cover .rr-cover-hero--stage .rr-cover-hero__mosaic {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	margin: -100vh 0 0;
	margin: -100svh 0 0;
	aspect-ratio: auto !important;
	overflow: hidden;
	pointer-events: none;
}

.rr-cover .rr-cover-hero--stage .rr-cover-hero__piece {
	top: 50% !important;
	left: 50% !important;
	width: calc(var(--rr-w, 30) * 1vw) !important;
	opacity: 0;
	transform: translate(-50%, -50%);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
	will-change: transform, opacity;
}

@media (max-width: 767px) {
	.rr-cover .rr-cover-hero__mosaic {
		width: 94%;
	}

	.rr-cover .rr-cover-hero--stage .rr-cover-hero__piece {
		width: calc(var(--rr-w, 30) * 1.9vw) !important;
	}
}

/* ---------- Cover Story entry (ranked entries) ---------- */

/*
 * One ranked entry: link icon, big number, title and credit line, a picture, the editor's
 * text, and an optional tick box. Colours are inherited, so entries read on the dark cover
 * page (white text) and on a light background alike.
 */
.rr-entry {
	max-width: 740px;
	margin: 0 auto;
	padding: 88px 24px 0;
	color: inherit;
	text-align: center;
	scroll-margin-top: calc(var(--rr-cs-top, 80px) + var(--rr-cs-bar-h, 52px));
	box-sizing: border-box;
}

.rr-entry__head {
	margin-bottom: 36px;
}

.rr-cover .rr-entry .rr-entry__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	color: inherit;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.rr-cover .rr-entry .rr-entry__link:hover,
.rr-cover .rr-entry .rr-entry__link:focus-visible {
	text-decoration: none;
	opacity: 1;
}

.rr-entry__heading {
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	line-height: 1.1;
}

.rr-entry__number {
	display: block;
	font-family: "Playfair Display", serif;
	font-size: clamp(56px, 9vw, 88px);
	font-weight: 400;
	line-height: 1;
}

.rr-entry__title {
	display: block;
	margin-top: 10px;
	font-family: "Playfair Display", serif;
	font-size: clamp(24px, 3.6vw, 34px);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;
}

.rr-entry__credit {
	margin: 12px 0 0;
	font-family: "Lato", sans-serif;
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.65;
}

.rr-entry__figure {
	margin: 0 auto 32px;
}

.rr-entry__img {
	display: block;
	width: 100%;
	height: auto;
}

.rr-entry__caption {
	margin-top: 8px;
	font-size: 13px;
	text-align: left;
	opacity: 0.65;
}

.rr-entry__body {
	font-size: clamp(18px, 1.6vw, 20px);
	line-height: 1.65;
	text-align: left;
}

.rr-entry__body > :first-child {
	margin-top: 0;
}

.rr-entry__body p {
	margin: 0 0 1.1em;
	color: inherit;
}

/* Quotes inside an entry: italic, with a thin rule on the left (not the centred article style). */
.rr-cover .rr-entry blockquote {
	max-width: none;
	margin: 36px 0;
	padding: 0 0 0 20px;
	text-align: left;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.rr-cover .rr-entry blockquote::before {
	content: none;
}

.rr-cover .rr-entry blockquote p {
	margin: 0;
	font-family: "Playfair Display", serif;
	font-size: clamp(20px, 2vw, 24px);
	font-style: italic;
	line-height: 1.5;
}

.rr-cover .rr-entry blockquote cite {
	display: block;
	margin-top: 14px;
	font-family: "Lato", sans-serif;
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* The tick box. */
.rr-entry__tracker {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 40px 0 0;
	padding: 22px 28px;
	text-align: left;
	background: rgba(128, 128, 128, 0.14); /* a faint panel on a light page and on a dark section alike */
	border-radius: 2px;
}

.rr-entry__thumb {
	flex: none;
	width: 64px;
}

.rr-entry__thumb-img {
	display: block;
	width: 100%;
	height: auto;
}

.rr-entry__checks {
	flex: 1 1 auto;
	min-width: 0;
}

.rr-entry__check + .rr-entry__check {
	margin-top: 16px;
}

.rr-entry__check-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: "Playfair Display", serif;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
}

.rr-entry__check-label input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--rr-px-accent, #fdbf56);
}

.rr-entry__check-label input:focus-visible {
	outline: 3px solid var(--rr-px-accent, #fdbf56);
	outline-offset: 2px;
}

.rr-entry__hint {
	margin: 4px 0 0 30px;
	font-size: 14px;
	line-height: 1.45;
	opacity: 0.8;
}

.rr-cover .rr-entry .rr-entry__hint a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.rr-entry {
		padding-top: 64px;
	}

	.rr-entry__tracker {
		gap: 14px;
		padding: 18px 18px;
	}

	.rr-entry__thumb {
		width: 48px;
	}

	.rr-entry__check-label {
		font-size: 18px;
	}
}

/* Running totals in the chapter bar ("I own it 3 | I want it 5"). */
.rr-chapters__counts {
	display: flex;
	flex: none;
	gap: 16px;
	margin: 0 0 0 auto;
	padding-left: 16px;
	font-size: 13px;
	white-space: nowrap;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.rr-chapters__count strong {
	margin-left: 4px;
}

@media (max-width: 767px) {
	.rr-chapters__counts {
		gap: 10px;
		padding-left: 10px;
		font-size: 12px;
	}
}

/*
 * Motion off (the Motion button, the device's "reduce motion" setting, or no JavaScript): the
 * opening pictures are not shown at all, so the opening is a plain, still title screen.
 */
.rr-cover .rr-cover-hero--mosaic:not(.rr-cover-hero--stage) .rr-cover-hero__mosaic {
	display: none;
}

/* ---------- Story colours (Cover Story template box) ---------- */

/*
 * The story background and text colour are set once per article (variables on .rr-cover__content)
 * and apply to everything in the story body: headings, paragraphs, lists, quotes, captions and
 * entries. Parallax Sections and their cards keep their own colours. Links take the text colour
 * and stay underlined, so they are still recognisable on a dark background.
 */
.rr-cover__content.has-story-bg {
	background: var(--rr-body-bg);
}

.rr-cover__content.has-story-text {
	color: var(--rr-body-text);
}

.rr-cover__content.has-story-text > :not(.rr-px-section, .rr-chapters) :is(h1, h2, h3, h4, h5, h6, p, li, ul, ol, blockquote, figcaption, cite, span, label, dt, dd, td, th, strong, em) {
	color: var(--rr-body-text);
}

.rr-cover__content.has-story-text > :not(.rr-px-section, .rr-chapters) a:not(.btn, .wp-block-button__link) {
	color: var(--rr-body-text);
	text-decoration: underline;
}

.rr-cover__content.has-story-text > :not(.rr-px-section, .rr-chapters) :is(.wp-block-pullquote, blockquote) {
	--rr-pq-mark: var(--rr-body-text);
}