/* ============================================================
   Race Horse Ownership 101 — Block Theme Stylesheet
   Augments theme.json with section-level styles for block
   patterns. All design tokens come from theme.json; this file
   provides layout, hover states, and component details.
   ============================================================ */

/* ---- Reset + base ---- */
* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wp-block-image figcaption { display: none; }

:root {
	--rho-gutter: clamp(1.5rem, 4vw, 5rem);
	--rho-content-max: 1480px;
	/* Type role tokens (Stream 2 standardization, 2026-05-28) */
	--rho-h1: var(--wp--preset--font-size--h-1);
	--rho-h2: var(--wp--preset--font-size--h-2);
	--rho-h2-big: var(--wp--preset--font-size--big-h-2);
	--rho-h3: var(--wp--preset--font-size--h-3);
	--rho-body: var(--wp--preset--font-size--body);
	--rho-lede: var(--wp--preset--font-size--lede);
	--rho-prose: var(--wp--preset--font-size--prose);
	--rho-eyebrow-size: 11px;
	--rho-eyebrow-ls: 0.22em;
	--rho-meta-ls: 0.18em;
}

body {
	margin: 0;
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---- Reusable utility ---- */
.rho-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terra);
}

/* ============================================================
   NAV / HEADER — fluid scaling, hamburger menu, active state
   ============================================================ */
.rho-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--wp--preset--color--bg);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	transition: background 0.3s ease, border-color 0.3s ease;
}

/* Spacer so non-hero pages don't slide under the fixed header */
body:not(.has-hero) {
	padding-top: clamp(4.5rem, 8vh, 6rem);
}

/* Overlay state — nav fully transparent over hero so the video reads to the
   viewport top edge. No gradient — the prototype relies on the video's own
   tonal range to keep nav text legible. If a future hero video has too-bright
   sky, re-add a much lighter fade (e.g. opacity 0.15 at top). */
.rho-nav--on-hero {
	background: transparent;
	border-bottom-color: transparent;
}

.rho-nav__inner {
	/* No max-width cap — nav extends edge-to-edge so logo shares the
	   hero's left anchor (--rho-gutter) at all viewports. */
	padding: clamp(1rem, 2vh, 1.75rem) var(--rho-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 2rem);
	position: relative;
	z-index: 1;
}
.rho-nav__brand {
	display: flex;
	align-items: center;
	gap: clamp(0.625rem, 1vw, 0.875rem);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: color 0.3s ease;
}
.rho-nav__mark {
	display: inline-block;
	width: clamp(2.25rem, 3vw, 3rem);
	height: clamp(2.125rem, 2.85vw, 2.85rem);
	flex-shrink: 0;
	background-color: var(--wp--preset--color--green);
	-webkit-mask: url("../images/logo-mark-green.png") center / contain no-repeat;
	        mask: url("../images/logo-mark-green.png") center / contain no-repeat;
	transition: background-color 0.3s ease;
}
.rho-nav__wordmark { line-height: 1; }
.rho-nav__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1rem, 1.25vw, 1.25rem);
	letter-spacing: -0.01em;
	color: inherit;
}
.rho-nav__sub {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(0.625rem, 0.75vw, 0.75rem);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
	margin-top: 5px;
	transition: color 0.3s ease;
}
.rho-nav__links {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}
.rho-nav__link {
	position: relative;
	padding-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(0.75rem, 0.9vw, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: color 0.3s ease;
}
.rho-nav__link:hover { color: var(--wp--preset--color--ink); }
.rho-nav__link.is-current::after {
	content: "";
	position: absolute;
	bottom: -0.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--terra);
}

.rho-nav__actions {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1vw, 1rem);
}

/* SUBSCRIBE — styled pill button (fluid scaling) */
.rho-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg) !important;
	padding: clamp(0.5rem, 0.85vw, 0.875rem) clamp(0.875rem, 1.4vw, 1.5rem) !important;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px !important;
	border: 1.5px solid var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}
.rho-nav__cta:hover {
	background: var(--wp--preset--color--terra);
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--terra);
}

/* Hamburger toggle — hidden on desktop, shown on mobile */
.rho-nav__toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	width: 2.5rem;
	height: 2.5rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.rho-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--wp--preset--color--ink);
	transition: transform 0.25s ease, opacity 0.25s ease, background 0.3s ease;
}
.rho-nav[data-menu-open="true"] .rho-nav__toggle-bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.rho-nav[data-menu-open="true"] .rho-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}
.rho-nav[data-menu-open="true"] .rho-nav__toggle-bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Overlay state — cream text, cream mark, cream pill button */
.rho-nav--on-hero .rho-nav__brand,
.rho-nav--on-hero .rho-nav__name { color: var(--wp--preset--color--bg); }
.rho-nav--on-hero .rho-nav__sub {
	color: color-mix(in oklab, var(--wp--preset--color--bg) 70%, transparent);
}
.rho-nav--on-hero .rho-nav__mark {
	background-color: var(--wp--preset--color--bg);
}
.rho-nav--on-hero .rho-nav__link {
	color: color-mix(in oklab, var(--wp--preset--color--bg) 85%, transparent);
}
.rho-nav--on-hero .rho-nav__link:hover {
	color: var(--wp--preset--color--bg);
}
.rho-nav--on-hero .rho-nav__cta {
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--bg);
}
.rho-nav--on-hero .rho-nav__cta:hover {
	background: var(--wp--preset--color--terra);
	border-color: var(--wp--preset--color--terra);
}
.rho-nav--on-hero .rho-nav__toggle-bar {
	background: var(--wp--preset--color--bg);
}

/* Mobile — hide nav links into slide-down menu, show hamburger; keep CTA visible */
@media (max-width: 760px) {
	.rho-nav__sub { display: none; }
	.rho-nav__toggle { display: flex; }
	.rho-nav__links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wp--preset--color--bg);
		border-bottom: 1px solid var(--wp--preset--color--rule);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem var(--rho-gutter) 1.5rem;
		transform: translateY(-1rem);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	.rho-nav[data-menu-open="true"] .rho-nav__links {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.rho-nav__link {
		padding: 1rem 0;
		font-size: 0.875rem;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
	.rho-nav__link:last-child { border-bottom: 0; }
	.rho-nav__link.is-current::after {
		left: 0;
		bottom: 0.875rem;
		transform: none;
	}
	/* Menu always renders on cream regardless of overlay state — readable */
	.rho-nav--on-hero .rho-nav__links {
		background: var(--wp--preset--color--bg);
	}
	.rho-nav--on-hero .rho-nav__link {
		color: var(--wp--preset--color--ink-soft);
	}
}

/* ============================================================
   HERO — rem-clamps + grid + capped at 1480px (consistent with rest of page)
   ============================================================ */
.rho-hero {
	position: relative;
	overflow: hidden;
	background: #0a0907;
	min-height: 100vh;
	/* WP core's :where(.wp-site-blocks) > * adds margin-block-start: 24px to
	   non-first children. The hero is the 2nd child of wp-site-blocks (after
	   the template-part wrapper around the nav), so without this it gets a
	   24px cream gap above the video. */
	margin: 0;
	padding-top: clamp(5rem, 10vh, 10rem);
	padding-bottom: clamp(3rem, 6vh, 6rem);
	padding-left: var(--rho-gutter);
	padding-right: var(--rho-gutter);
}
.rho-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	filter: saturate(1.15) contrast(1.12) brightness(0.72);
}
.rho-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	height: 100%;
	width: 100%;
	/* Hero is edge-to-edge — content sits at viewport edge minus --rho-gutter. */
	max-width: none;
	margin: 0;
}
.rho-hero__h1 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(3rem, 8vw, 9rem);
	line-height: 0.95;
	letter-spacing: -0.018em;
	margin: 0;
	color: var(--wp--preset--color--bg);
}
.rho-hero__accent {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.8vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--terra);
	margin-top: clamp(1rem, 1.5vw, 1.75rem);
	max-width: 22ch;
}
.rho-hero__side { padding-bottom: 0.5rem; }
.rho-hero__lede {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	line-height: 1.45;
	color: color-mix(in oklab, var(--wp--preset--color--bg) 90%, transparent);
	margin: 0 0 clamp(1.25rem, 1.8vw, 2rem);
	max-width: 32ch;
}
.rho-hero__cta {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.125rem, 1.7vw, 1.5rem);
	line-height: 1.3;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--bg);
	margin: clamp(0.75rem, 1vw, 1.25rem) 0 clamp(1.125rem, 1.5vw, 1.75rem);
}
.rho-hero__leadmag {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(0.95rem, 1.25vw, 1.25rem);
	line-height: 1.45;
	color: color-mix(in oklab, var(--wp--preset--color--bg) 88%, transparent);
	margin: 0 0 clamp(0.75rem, 1vw, 1.125rem);
	max-width: 36ch;
}
.rho-hero__leadmag strong {
	font-style: italic;
	font-weight: 600;
	color: var(--wp--preset--color--bg);
	background: linear-gradient(transparent 62%, rgba(217,120,73,0.35) 62%, rgba(217,120,73,0.35) 92%, transparent 92%);
	padding: 0 2px;
}
/* Defeat WordPress core's :where(.is-layout-constrained) > * max-width cap
   on the inner group + columns, so the hero fills viewport-minus-gutter. */
.rho-hero__inner,
.rho-hero .wp-block-columns {
	max-width: none;
}
.rho-hero .wp-block-columns {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(2.5rem, 5vw, 6rem);
	align-items: end;
	width: 100%;
}
.rho-hero .wp-block-column {
	flex-basis: auto;
	width: auto;
	min-width: 0;
}
@media (max-width: 959px) {
	.rho-hero .wp-block-columns {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ============================================================
   HERO TRUST STRIP — edge-to-edge dark band, fluid text gutters
   ============================================================ */
.rho-trust-strip {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg-2);
	padding: clamp(1rem, 1.4vh, 1.5rem) var(--rho-gutter);
	display: flex;
	justify-content: center;
}
.rho-trust-strip__text {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}
.rho-trust-strip__dot {
	color: var(--wp--preset--color--terra);
}

/* ============================================================
   SECTION FOUNDATION
   ============================================================ */
.rho-section {
	padding: clamp(64px, 8vw, 112px) var(--rho-gutter);
}
.rho-section--alt { background: var(--wp--preset--color--bg-2); }

/* Shared eyebrow */
.rho-eyebrow,
.rho-syndication__eyebrow,
.rho-leadmag__eyebrow,
.rho-publication__eyebrow,
.rho-publication__row-eyebrow,
.rho-writers__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terra);
	margin: 0 0 1.5rem;
}

/* ============================================================
   SYNDICATION — CSS Grid, 44/56 split
   ============================================================ */
.rho-syndication__grid {
	display: grid;
	grid-template-columns: 44fr 56fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
	max-width: 1480px;
	margin: 0 auto;
}
.rho-syndication__photo { margin: 0; width: 100%; }
.rho-syndication__photo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.rho-syndication__h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--big-h-2);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
}
.rho-syndication__lede,
.rho-syndication__para {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.5rem;
}
.rho-syndication__lede { margin-bottom: 2.5rem; }
.rho-syndication__para:last-child { margin-bottom: 0; }
.rho-syndication__para strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
@media (max-width: 959px) {
	.rho-syndication__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   LEAD MAGNET — CSS Grid, 45/55 split
   ============================================================ */
.rho-leadmag__grid {
	display: grid;
	grid-template-columns: 45fr 55fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: center;
	max-width: 1480px;
	margin: 0 auto;
}
.rho-leadmag__photo { margin: 0; width: 100%; }
.rho-leadmag__photo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.rho-leadmag__h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1.5rem;
}
.rho-leadmag__h2 em {
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--terra);
}
.rho-leadmag__lede {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 2.25rem;
}
.rho-leadmag__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 2.25rem;
	display: grid;
	gap: 0.875rem;
}
.rho-leadmag__bullets li {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	padding-left: 1.5rem;
	position: relative;
}
.rho-leadmag__bullets li::before {
	content: "·";
	color: var(--wp--preset--color--terra);
	font-size: 1.375rem;
	position: absolute;
	left: 0.375rem;
	top: -0.25rem;
}
@media (max-width: 959px) {
	.rho-leadmag__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   PUBLICATION — centered header + two alternating grid rows
   ============================================================ */
.rho-publication__head {
	max-width: 47.5rem;
	margin: 0 auto clamp(48px, 6vw, 96px);
	text-align: center;
}
.rho-publication__h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--big-h-2);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 2rem;
}
.rho-publication__lede {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 auto;
	max-width: 64ch;
}
.rho-publication__row {
	display: grid;
	grid-template-columns: 47fr 53fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
	max-width: 1480px;
	margin: 0 auto;
}
.rho-publication__row + .rho-publication__row { margin-top: clamp(64px, 7vw, 112px); }
@media (max-width: 959px) {
	.rho-publication__row { grid-template-columns: 1fr; gap: 3rem; }
}
.rho-publication__row-h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.625rem, 2.2vw, 2.125rem);
	line-height: 1.04;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1.125rem;
}
.rho-publication__row-body {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 2rem;
}
.rho-publication__row-link a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--wp--preset--color--terra-deep);
	border-bottom: 1px solid var(--wp--preset--color--terra);
	padding-bottom: 2px;
	text-decoration: none;
}
.rho-publication__row-link a:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
.rho-publication__row-photo { margin: 0; }
.rho-publication__row-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }

.rho-publication__toc-rule {
	width: 5rem;
	height: 1px;
	background: var(--wp--preset--color--rule);
	margin-bottom: 2.25rem;
}
.rho-publication__toc-list { list-style: none; padding: 0; margin: 0; }
.rho-publication__toc-list li + li { margin-top: 0.5rem; }
.rho-publication__toc-link {
	display: grid;
	grid-template-columns: 3.25rem 1fr auto;
	grid-template-areas:
		"num title time"
		".   sub   sub";
	column-gap: 1rem;
	row-gap: 0.5rem;
	padding: 1.25rem 0 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	align-items: baseline;
	text-decoration: none;
}
.rho-publication__toc-list li:last-child .rho-publication__toc-link {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.rho-publication__toc-num { grid-area: num; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--wp--preset--color--ink); }
.rho-publication__toc-title { grid-area: title; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: 0.08em; text-transform: uppercase; font-variant-caps: all-small-caps; color: var(--wp--preset--color--ink); transition: color 0.2s ease; }
.rho-publication__toc-time { grid-area: time; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; color: var(--wp--preset--color--ink-mute); }
.rho-publication__toc-sub { grid-area: sub; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 0.9375rem; color: var(--wp--preset--color--ink-mute); }
.rho-publication__toc-link:hover .rho-publication__toc-title,
.rho-publication__toc-link:hover .rho-publication__toc-num { color: var(--wp--preset--color--terra); }

/* ============================================================
   ABOUT THE WRITERS — CSS Grid, 53/47 (text left, photo right)
   ============================================================ */
.rho-writers__grid {
	display: grid;
	grid-template-columns: 53fr 47fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
	max-width: 1480px;
	margin: 0 auto;
}
@media (max-width: 959px) {
	.rho-writers__grid { grid-template-columns: 1fr; gap: 3rem; }
	.rho-writers__photo { order: -1; }
}
.rho-writers__photo { margin: 0; }
.rho-writers__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.rho-writers__h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 2rem;
}
.rho-writers__para {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.5rem;
}
.rho-writers__para:last-child { margin-bottom: 0; }
.rho-writers__para a {
	color: var(--wp--preset--color--terra-deep);
	font-weight: 500;
	border-bottom: 1px solid var(--wp--preset--color--terra);
	text-decoration: none;
}
.rho-writers__para a:hover { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
.rho-section {
	scroll-margin-top: 100px;
}


/* ============================================================
   START HERE — FULL-BLEED HERO IMAGE
   The pattern wraps the hero photo in a wp-block-group with
   flow layout. WordPress core caps non-aligned flow children at
   contentSize (720px), which produces visible cream gutters on
   each side. These rules break the image out to viewport edges.
   ============================================================ */
.rho-sh-hero {
	width: 100%;
	max-width: none;
	margin: 0;
}
.rho-sh-hero__img {
	margin: 0;
	width: 100%;
	max-width: none;
	/* Cinematic banner aspect ratio — wider than the natural image so the
	   center crops to a horizontal slice. Tune the ratio if too tall/short. */
	aspect-ratio: 8 / 3;
	display: block;
	overflow: hidden;
}
.rho-sh-hero__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0;
}

/* ============================================================
   START HERE — CHAPTER ROWS
   ============================================================ */
.rho-sh-ch-list { border-top: 1px solid var(--wp--preset--color--rule); }
.rho-sh-ch-row {
	padding: 48px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.rho-sh-ch-row--primary {
	background: linear-gradient(to right,
		color-mix(in oklab, var(--wp--preset--color--terra) 8%, transparent),
		transparent 60%);
	padding-left: 24px;
	margin-left: -24px;
}
.rho-sh-ch-grid {
	display: grid;
	grid-template-columns: 28% 1fr;
	gap: 80px;
	align-items: start;
}
@media (max-width: 900px) {
	.rho-sh-ch-grid { grid-template-columns: 1fr; gap: 24px; }
}
.rho-sh-ch-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(72px, 9vw, 120px);
	line-height: 0.9;
	color: color-mix(in oklab, var(--wp--preset--color--ink) 35%, var(--wp--preset--color--bg));
	margin-bottom: 24px;
}
.rho-sh-ch-meta {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}
.rho-sh-ch-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 24px;
}
.rho-sh-ch-body {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 32px;
	max-width: 62ch;
}
.rho-sh-ch-link,
.rho-sh-inline-link {
	color: var(--wp--preset--color--terra-deep);
	font-weight: 500;
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	border-bottom: 1px solid var(--wp--preset--color--terra);
	padding-bottom: 2px;
	text-decoration: none;
	display: inline-block;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.rho-sh-ch-link:hover,
.rho-sh-inline-link:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* ============================================================
   START HERE — PAGEHEAD H1 + SKIP-SECTION H2 (stream CHAPTER-START-HERE, 2026-05-29)
   theme.json slugs h1/big-h2 are kebab-cased by WP to --wp--preset--font-size--h-1 /
   --big-h-2, but the heading blocks emit the RAW-slug classes has-h1-font-size /
   has-big-h2-font-size, which match no generated rule — so both headings collapse to
   the 17px body base. Point them at the existing display clamps. (Deeper root: the
   slug naming + styles.elements no-hyphen refs are a sitewide theme.json bug; out of
   scope here — flagged for an authorized theme.json pass.)
   ============================================================ */
.rho-sh-pagehead h1 {
	font-size: var(--wp--preset--font-size--h-1);
}
.rho-sh-skip h2 {
	font-size: var(--wp--preset--font-size--big-h-2);
}

/* Skip section is single-column editorial prose (per skip-around.php), NOT a rail+
   content grid. WP's constrained layout centered the heading/eyebrow on a different
   left edge than the prose (the audited 'stranded rail'), and the >=1600px
   .rho-section > .wp-block-group cap re-centered the eyebrow/list. Left-align every
   child to ONE column edge so the properly-sized H2 sits directly above its content.
   (margin, not width: prose keeps its inline 64ch measure; the heading sizes itself.)
   Specificity .rho-section.rho-sh-skip > .wp-block-group (0,3,0) beats the 1600px cap. */
.rho-section.rho-sh-skip > .rho-sh-eyebrow-row,
.rho-section.rho-sh-skip > h2,
.rho-section.rho-sh-skip > p,
.rho-section.rho-sh-skip > .rho-sh-skip-list {
	/* override WP constrained-layout 'margin: auto !important' centering */
	margin-left: 0 !important;
	margin-right: auto !important;
}
.rho-section.rho-sh-skip > h2,
.rho-section.rho-sh-skip > .rho-sh-eyebrow-row {
	max-width: none;
}

/* ============================================================
   CHAPTER ARTICLE
   ============================================================ */
.rho-chapter-body {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.75;
	color: var(--wp--preset--color--ink-soft);
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
}
.rho-chapter-body p { margin: 0 0 24px; }
.rho-chapter-body p strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.rho-chapter-body em { color: var(--wp--preset--color--ink); }
.rho-chapter-body h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.08;
	color: var(--wp--preset--color--green);
	margin: 64px 0 24px;
	clear: both;
	scroll-margin-top: 100px;
	max-width: 22ch;
}
.rho-chapter-body h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1.18;
	color: var(--wp--preset--color--ink);
	margin: 48px 0 16px;
}
.rho-chapter-body a {
	color: var(--wp--preset--color--terra-deep);
	font-weight: 600;
	border-bottom: 1.5px solid var(--wp--preset--color--terra);
	text-decoration: none;
}
.rho-chapter-body a:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
.rho-chapter-body p.rho-chapter-intro {
	margin-top: 48px;
}
.rho-dropcap {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-style: italic;
	font-size: 5.2em;
	line-height: 0.85;
	float: left;
	padding: 8px 12px 0 0;
	color: var(--wp--preset--color--green);
}

/* ============================================================
   CHAPTER PULL QUOTE
   Authored quotes in chapters carry the .rho-chapter-pull class
   but no inline styles — these CSS rules do the visual work.
   ============================================================ */
.rho-chapter-pull {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	line-height: 1.3;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--green);
	border-left: 2.5px solid var(--wp--preset--color--terra);
	padding: 0.5rem 0 0.5rem 2rem;
	margin: 3rem 0;
	max-width: 720px;
}
.rho-chapter-pull p {
	margin: 0;
}
.rho-chapter-pull p + p {
	margin-top: 0.75rem;
}

/* ============================================================
   CHAPTER GLOSSARY
   Definition list with terra-rule top/bottom, display-green
   terms, body-color definitions.
   ============================================================ */
.rho-chapter-glossary {
	display: grid;
	gap: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 2rem 0;
	margin: 2rem 0 1rem;
	max-width: 720px;
}
.rho-chapter-glossary dt {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--prose);
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--green);
	margin-bottom: 0.25rem;
}
.rho-chapter-glossary dd {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* ============================================================
   CHAPTER SHELL + STICKY TABLE OF CONTENTS
   Flexbox 2-column layout: TOC sidebar (200px) | article body.
   The chapter-header block sits at the top of the body column
   alongside the TOC (it doesn't span full width, simpler &
   predictable). On mobile/tablet, TOC is hidden and the body
   flows as a normal single column.
   ============================================================ */
@media (min-width: 1024px) {
	.rho-chapter-shell {
		display: flex;
		gap: 80px;
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 24px;
		align-items: flex-start;
	}
	.rho-chapter-toc-wrap {
		flex: 0 0 200px;
		position: sticky;
		top: 6rem;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
		padding-top: 2rem;
	}
	.rho-chapter-shell > .rho-chapter-body,
	.rho-chapter-shell > .wp-block-post-content {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
	}
}
@media (max-width: 1023px) {
	.rho-chapter-toc-wrap {
		display: none;
	}
}

.rho-chapter-toc {
	font-family: var(--wp--preset--font-family--sans);
}
.rho-chapter-toc__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
	margin: 0 0 1.25rem;
}
.rho-chapter-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.875rem;
	counter-reset: rhotoc;
}
.rho-chapter-toc__list li {
	counter-increment: rhotoc;
	position: relative;
	padding-left: 2rem;
}
.rho-chapter-toc__list li::before {
	content: counter(rhotoc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1875rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--ink-mute);
}
.rho-chapter-toc__list a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	display: block;
	transition: color 0.2s ease;
}
.rho-chapter-toc__list a:hover {
	color: var(--wp--preset--color--terra-deep);
}
.rho-chapter-toc__list a.is-current {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.rho-chapter-toc__list li:has(a.is-current)::before {
	color: var(--wp--preset--color--terra);
}

/* Reading progress bar */
.rho-reading-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px; width: 0;
	background: var(--wp--preset--color--terra);
	z-index: 60;
	transition: width 80ms linear;
}

/* Chapter nav footer */
.rho-chapter-navfoot__list { border-top: 1px solid rgba(240,231,212,0.25); }
.rho-chapter-navfoot__link {
	display: grid;
	grid-template-columns: 1.2fr 2fr 1fr;
	gap: 24px;
	align-items: center;
	padding: 28px 0;
	border-bottom: 1px solid rgba(240,231,212,0.18);
	color: var(--wp--preset--color--bg);
	text-decoration: none;
	transition: background 0.2s ease, padding 0.2s ease;
}
.rho-chapter-navfoot__link:hover {
	background: color-mix(in oklab, var(--wp--preset--color--bg) 6%, transparent);
	padding-left: 12px;
	padding-right: 12px;
}
.rho-chapter-navfoot__link:hover .rho-chapter-navfoot__title {
	color: var(--wp--preset--color--terra);
}
.rho-chapter-navfoot__tag {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--wp--preset--color--bg) 65%, var(--wp--preset--color--green));
}
.rho-chapter-navfoot__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(20px, 1.9vw, 26px);
	color: var(--wp--preset--color--bg);
	transition: color 0.2s ease;
}
.rho-chapter-navfoot__state {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--wp--preset--color--bg) 60%, var(--wp--preset--color--green));
	text-align: right;
}
@media (max-width: 700px) {
	.rho-chapter-navfoot__link { grid-template-columns: 1fr; gap: 8px; }
	.rho-chapter-navfoot__state { text-align: left; }
}

/* ============================================================
   BLOG HUB
   ============================================================ */
.rho-bl-body { padding-top: 8px; }
.rho-bl-row { transition: background 0.15s ease; }
.rho-bl-row:hover {
	background: color-mix(in oklab, var(--wp--preset--color--terra) 4%, transparent);
}
.rho-bl-row:hover .wp-block-post-title { color: var(--wp--preset--color--terra-deep); }

.rho-bl-sidebar { position: sticky; top: 96px; }
@media (max-width: 1100px) {
	.rho-bl-sidebar { position: static; }
}

.rho-bl-main .wp-block-post-content,
.rho-bl-main .wp-block-post-content p,
.rho-bl-main .wp-block-post-content li,
.rho-bl-main .wp-block-post-content blockquote p {
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.55;
}

.rho-bl-search input[type="search"] {
	width: 100%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
}
.rho-bl-search input[type="search"]:focus { border-color: var(--wp--preset--color--terra); outline: none; }

.rho-bl-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper);
	border-radius: 0;
}
.rho-bl-search .wp-block-search__input {
	border: 0 !important;
	background: transparent !important;
	height: 42px;
	padding: 0 0 0 16px;
}
.rho-bl-search .wp-block-search__button {
	border: 0 !important;
	background: transparent !important;
	padding: 0 14px !important;
	margin: 0 !important;
	color: var(--wp--preset--color--ink-mute);
	transition: color 0.2s ease;
}
.rho-bl-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--terra-deep);
	background: transparent !important;
}
.rho-bl-search .wp-block-search__button svg {
	fill: currentColor;
}
.rho-bl-search:focus-within .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--terra);
}

.rho-bl-cat-list,
.wp-block-categories {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.wp-block-categories li { border-bottom: 1px solid var(--wp--preset--color--rule); }
.wp-block-categories a {
	display: flex;
	justify-content: space-between;
	padding: 12px 4px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.wp-block-categories a:hover {
	background: color-mix(in oklab, var(--wp--preset--color--terra) 5%, transparent);
	color: var(--wp--preset--color--terra-deep);
}

/* ============================================================
   BLOG SIDEBAR — ToC module, collapsible Categories, CTA image
   (SIDEBAR-TOC stream, 2026-05-29). Featured-Chapter rules removed.
   ============================================================ */
.rho-bl-toc { display: none; }
.rho-bl-toc.is-populated { display: block; }
.rho-bl-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	/* BLOG-POST-SIDEBAR stream 2026-05-29: cap to ~5 visible links so the
	   sidebar CTA stays above the fold; keep scrollable with a quiet cream
	   scrollbar (house rule: capped scroll containers get cream, not raw grey).
	   ~5 items: link 16px*1.35=21.6 + 10px*2 padding + 1px li border = 42.6px;
	   5*42.6 + 1px ul border-top + ~2px safety = 216px. */
	max-height: 216px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--rule) transparent;
}
.rho-bl-toc-list::-webkit-scrollbar { width: 7px; }
.rho-bl-toc-list::-webkit-scrollbar-track { background: transparent; }
.rho-bl-toc-list::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--rule);
	border-radius: 999px;
}
.rho-bl-toc-list::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--ink-mute); }
.rho-bl-toc-list li { border-bottom: 1px solid var(--wp--preset--color--rule); }
.rho-bl-toc-list a {
	display: block;
	padding: 10px 4px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.15s ease;
}
.rho-bl-toc-list a:hover { color: var(--wp--preset--color--terra-deep); }
.rho-bl-toc-list a.is-active { color: var(--wp--preset--color--terra); }
.rho-bl-sidebar #ez-toc-container {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	width: auto;
}
.rho-bl-sidebar #ez-toc-container .ez-toc-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terra);
}
.rho-bl-sidebar #ez-toc-container a {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
}
.rho-bl-sidebar #ez-toc-container a:hover { color: var(--wp--preset--color--terra-deep); }
.rho-bl-sidebar #ez-toc-container a.is-active { color: var(--wp--preset--color--terra); }
.rho-bl-categories-collapse summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1rem;
}
.rho-bl-categories-collapse summary::-webkit-details-marker { display: none; }
.rho-bl-categories-collapse summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--wp--preset--color--ink-mute);
	border-bottom: 1.5px solid var(--wp--preset--color--ink-mute);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-left: 12px;
	flex: 0 0 auto;
}
.rho-bl-categories-collapse[open] summary::after { transform: rotate(-135deg); }
.rho-bl-cta-magnet img {
	display: block;
	max-width: 250px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   SUBSCRIBE FORM (shortcode output)
   ============================================================ */
.rho-subscribe {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 16px 0 0;
	flex-wrap: wrap;
}
.rho-subscribe input[type="email"] {
	flex: 1;
	min-width: 200px;
	height: 48px;
	padding: 0 18px;
	border: 1.5px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	outline: none;
}
.rho-subscribe input[type="email"]:focus { border-color: var(--wp--preset--color--terra); }
.rho-subscribe button {
	height: 48px;
	padding: 0 22px;
	border: 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.rho-subscribe button:hover {
	background: var(--wp--preset--color--terra);
	color: var(--wp--preset--color--ink);
}
.rho-subscribe__note {
	width: 100%;
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}

/* On dark backgrounds (hero, chapter nav) */
.rho-hero .rho-subscribe input[type="email"],
.rho-chapter-navfoot .rho-subscribe input[type="email"] {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.25);
	color: var(--wp--preset--color--bg);
}
.rho-hero .rho-subscribe input[type="email"]::placeholder {
	color: rgba(255,255,255,0.55);
}
.rho-hero .rho-subscribe button {
	background: var(--wp--preset--color--terra);
	color: var(--wp--preset--color--ink);
}
.rho-hero .rho-subscribe button:hover {
	background: var(--wp--preset--color--bg);
}
.rho-hero .rho-subscribe__note {
	color: color-mix(in oklab, var(--wp--preset--color--bg) 60%, transparent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.rho-footer__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}
.rho-footer__mark {
	display: inline-block;
	width: 46px;
	height: 44px;
	background-color: var(--wp--preset--color--bg);
	-webkit-mask: url("../images/logo-mark-green.png") center / contain no-repeat;
	        mask: url("../images/logo-mark-green.png") center / contain no-repeat;
}
.rho-footer__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--bg);
}
.rho-footer__promise {
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	line-height: 1.55;
	color: color-mix(in oklab, var(--wp--preset--color--bg) 80%, transparent);
	margin: 28px 0 0;
}
.rho-footer__sub-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terra);
	margin: 0 0 14px;
}
.rho-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	flex: 1;
}
.rho-footer__h5 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terra);
	margin: 0 0 22px;
}
.rho-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 14px;
}
.rho-footer__list a {
	color: color-mix(in oklab, var(--wp--preset--color--bg) 80%, transparent);
	text-decoration: none;
	font-size: 15px;
	transition: color 0.2s ease;
}
.rho-footer__list a:hover { color: var(--wp--preset--color--terra); }
.rho-footer__disclaimer {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: color-mix(in oklab, var(--wp--preset--color--bg) 50%, transparent);
	max-width: 90ch;
	padding: 28px 0 0;
	border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--bg) 18%, transparent);
	margin-top: 56px;
}
.rho-footer__wordmark-bottom {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 32px;
	color: var(--wp--preset--color--bg);
	opacity: 0.4;
}

/* ============================================================
   CATEGORY ARCHIVE
   Header (breadcrumb + eyebrow + title + description), pagination,
   and back-to-blog link. Loop styling is inherited from .rho-bl-row
   in the BLOG HUB section above.
   ============================================================ */
.rho-cat-header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 8px;
}

/* Yoast breadcrumb — wp:shortcode emits no wrapper class, so the template
   wraps it in <nav class="rho-cat-breadcrumb">. Yoast's own markup is:
   <p><span><span><a>Home</a></span> » <span class="breadcrumb_last">...</span></span></p> */
.rho-cat-breadcrumb p {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
	margin: 0;
	line-height: 1.4;
}
.rho-cat-breadcrumb a {
	color: var(--wp--preset--color--ink-mute);
	text-decoration: none;
	transition: color 0.2s ease;
}
.rho-cat-breadcrumb a:hover {
	color: var(--wp--preset--color--terra-deep);
}
.rho-cat-breadcrumb .breadcrumb_last {
	color: var(--wp--preset--color--ink);
}

.rho-cat-header .wp-block-query-title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
}
.rho-cat-header .wp-block-term-description {
	max-width: 64ch;
	font-family: var(--wp--preset--font-family--display);
}
/* If the category description field is empty, WP still emits an empty wrapper — collapse it */
.rho-cat-header .wp-block-term-description:empty,
.rho-cat-header .wp-block-term-description p:empty {
	display: none;
}

/* Pagination */
.rho-bl-pagination {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 28px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}
.rho-bl-pagination a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.rho-bl-pagination a:hover {
	color: var(--wp--preset--color--terra-deep);
	border-color: var(--wp--preset--color--terra);
}
.rho-bl-pagination .wp-block-query-pagination-numbers {
	display: inline-flex;
	gap: 12px;
	align-items: baseline;
}
.rho-bl-pagination .wp-block-query-pagination-numbers .current {
	color: var(--wp--preset--color--terra-deep);
	font-weight: 600;
}

/* Back-to-blog affordance below the loop */
.rho-cat-back {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}
.rho-cat-back a {
	color: var(--wp--preset--color--terra-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--terra);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.rho-cat-back a:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* Empty-state copy when a category has no posts */
.rho-cat-empty a {
	color: var(--wp--preset--color--terra-deep);
	border-bottom: 1px solid var(--wp--preset--color--terra);
	text-decoration: none;
}
.rho-cat-empty a:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* Mobile: stack the sidebar below the loop, keep cards readable */
@media (max-width: 959px) {
	.rho-cat-header {
		padding-top: 32px !important;
		padding-bottom: 24px !important;
	}
	.rho-bl-row .wp-block-columns {
		flex-direction: column !important;
		gap: 20px;
	}
	.rho-bl-row .wp-block-column[style*="flex-basis:220px"] {
		flex-basis: 100% !important;
		max-width: 100%;
	}
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Custom column stack point — keep two-column layouts side-by-side until 960px
   (WordPress default is 782px which crashes too early for tablets) */
@media (min-width: 960px) {
	.rho-bl-header .wp-block-columns,
	.rho-ab-origin .wp-block-columns {
		flex-wrap: nowrap !important;
		flex-direction: row !important;
	}
}

@media (max-width: 959px) {
	.wp-block-columns {
		flex-direction: column !important;
	}
	.wp-block-column[style*="flex-basis"] {
		flex-basis: 100% !important;
	}
}

/* Very wide screens — cap content width so text doesn't sprawl */
@media (min-width: 1600px) {
	.wp-block-cover__inner-container,
	.rho-section > .wp-block-columns,
	.rho-section > .wp-block-group {
		max-width: 1480px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* ============================================================
   CANONICAL META LINE (Stream 2 standardization, 2026-05-28)
   Post date, author, reading-time uppercase microtext. Used by
   templates/single.html, templates/category.html, templates/home.html,
   patterns/chapter-rows.php, patterns/chapter-header.php,
   patterns/chapter-nav-footer.php. Distinct from .rho-eyebrow by
   letter-spacing (0.18em vs 0.22em) and color (ink-mute vs terra).
   ============================================================ */
.rho-meta {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--rho-eyebrow-size);
	font-weight: 500;
	letter-spacing: var(--rho-meta-ls);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}

/* ============================================================
   EYEBROW MUTE MODIFIER (per Calvin Decision 2, 2026-05-28)
   Same as .rho-eyebrow but ink-mute color, deliberately subtler
   so the chapter title carries primary emphasis. Used by the
   chapter-header kicker in patterns/chapter-header.php.
   ============================================================ */
.rho-eyebrow--mute {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--rho-eyebrow-size);
	font-weight: 500;
	letter-spacing: var(--rho-eyebrow-ls);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}

/* ============================================================
   CHAPTER-DISPLAY-H1 ROLE (per Calvin Decision 1, 2026-05-28)
   Chapter display H1, monumental by design. Used only at the
   top of chapter posts via patterns/chapter-header.php. Kept
   distinct from the page-H1 preset because chapter openings
   are display moments meant to feel monumental.
   ============================================================ */
.rho-chapter-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(56px, 8vw, 120px);
	line-height: 0.96;
	letter-spacing: -0.028em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 24px;
}

/* ============================================================
   CANONICAL INLINE EDITORIAL LINK (Stream 2 standardization)
   Newsreader, weight 500, color terra-deep, border-bottom 1px
   solid terra. .rho-chapter-body a stays distinct at weight 600
   / 1.5px border (long-form body link role).
   ============================================================ */
.rho-inline-link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	color: var(--wp--preset--color--terra-deep);
	border-bottom: 1px solid var(--wp--preset--color--terra);
	padding-bottom: 2px;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.rho-inline-link:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}


/* ============================================================
   BLOG CATEGORY CHIPS (BLOG-CATEGORIES / Monet inaugural decision)
   Quiet cream-outlined index entries in the blog-hub header and the
   category archive header. Outline (no fill) at rest; near-square 4px
   radius; eyebrow-tier type (sibling of 'THE BLOG'); green = active
   only; the loudest warm accent is held back entirely. Spacing from
   the token ladder.
   ============================================================ */
.rho-bl-cat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	margin-top: var(--wp--preset--spacing--md);
}
.rho-bl-cat-chip {
	display: inline-block;
	padding: 8px 12px; /* 8 and 12 are ladder rungs; written literal because WP omits the digit-prefixed spacing preset var */
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--rho-eyebrow-size);
	font-weight: 500;
	letter-spacing: var(--rho-eyebrow-ls);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.rho-bl-cat-chip:hover,
.rho-bl-cat-chip:focus-visible {
	border-color: var(--wp--preset--color--ink-mute);
	color: var(--wp--preset--color--ink);
}
body.category-costs-economics .rho-bl-cat-chip--costs-economics,
body.category-syndicates-partnerships .rho-bl-cat-chip--syndicates-partnerships,
body.category-getting-started .rho-bl-cat-chip--getting-started,
body.category-the-sport-explained .rho-bl-cat-chip--the-sport-explained,
body.category-sales-buying .rho-bl-cat-chip--sales-buying,
body.category-aftercare-ending .rho-bl-cat-chip--aftercare-ending,
body.category-notes-from-the-track .rho-bl-cat-chip--notes-from-the-track {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green);
}


/* =============================================================
   BLOG-CONTENT-DESIGN / fix (stream 36ff8aaa-2951-8176) 2026-05-29
   Scoped to .rho-bl-main .wp-block-post-content (blog post bodies;
   identical element to .entry-content). NOT bare .wp-block-post-content,
   which would also match chapters via .rho-chapter-shell. Append-only;
   no existing line touched (hero-safe).
   ============================================================= */

/* ITEM 0 - body-column alignment. WP constrained layout caps default blocks
   at content-size (720px) and centres them, while the featured image fills
   the 871px column -> body text inset ~76px each side. Redefine content-size
   to 100% within the post body so text shares the featured-image left edge +
   width. Mobile side gutters come from .rho-bl-body padding (unaffected). */
.rho-bl-main .wp-block-post-content {
	--wp--style--global--content-size: 100%;
}

/* ITEM 1 - #9 in-body links: visible + accessible. Underline (non-colour cue)
   + terra-deep. Specificity (0,3,1) beats WP core ZERO-specificity :where()
   rules incl. `p.has-text-color a{color:inherit}`. CTA buttons excluded. */
.rho-bl-main .wp-block-post-content a:not(.wp-element-button) {
	color: var(--wp--preset--color--terra-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: color-mix(in oklab, var(--wp--preset--color--terra-deep) 50%, transparent);
}
.rho-bl-main .wp-block-post-content a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--ink);
	text-decoration-color: currentColor;
}

/* ITEM 2 - in-body heading hierarchy. The global stylesheet references the
   non-dashed (undefined) --wp--preset--font-size--h2/h3, so headings fall back
   to 22px prose. Restore with the real dash-named presets (same vars the
   chapter styles use). theme.json root preset wiring left to its own stream. */
.rho-bl-main .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.18;
}
.rho-bl-main .wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.26;
}
.rho-bl-main .wp-block-post-content h4 {
	font-size: clamp(1.375rem, 1.3rem + 0.4vw, 1.5rem);
	line-height: 1.3;
}

/* ITEM 3 - #3b tables: editorial palette header + zebra; mobile horizontal-
   scroll instead of column-cram (figure.wp-block-table already overflow-x:auto;
   min-width forces scroll). */
.rho-bl-main .wp-block-post-content .wp-block-table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
}
.rho-bl-main .wp-block-post-content .wp-block-table th,
.rho-bl-main .wp-block-post-content .wp-block-table td {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent);
	text-align: left;
	vertical-align: top;
}
.rho-bl-main .wp-block-post-content .wp-block-table thead th {
	background: color-mix(in oklab, var(--wp--preset--color--terra) 16%, var(--wp--preset--color--paper));
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	border-bottom: 2px solid color-mix(in oklab, var(--wp--preset--color--terra) 45%, transparent);
}
.rho-bl-main .wp-block-post-content .wp-block-table tbody tr:nth-child(even) td {
	background: color-mix(in oklab, var(--wp--preset--color--terra) 6%, transparent);
}

/* ITEM 4 - #6/#4 floated in-body image: cap size + bottom margin so text wraps
   and the next block clears (global inline-end float margin retained on
   desktop). Linearize to full width at <=959px (theme reflow breakpoint).
   Non-floated / full / center images are NOT capped. */
.rho-bl-main .wp-block-post-content .wp-block-image.alignleft,
.rho-bl-main .wp-block-post-content .wp-block-image.alignright {
	max-width: 44%;
	margin-bottom: 1.75rem;
}
.rho-bl-main .wp-block-post-content .wp-block-image.alignleft img,
.rho-bl-main .wp-block-post-content .wp-block-image.alignright img {
	width: 100%;
	height: auto;
}
@media (max-width: 959px) {
	.rho-bl-main .wp-block-post-content .wp-block-image.alignleft,
	.rho-bl-main .wp-block-post-content .wp-block-image.alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
		margin-bottom: 1.5rem;
	}
}
/* end BLOG-CONTENT-DESIGN / fix */
/* BLOG-CARD-REDESIGN — stacked full-width cards (/blog/ + category). Append-only; hero + trust-strip invariants preserved (no existing line touched). */
.rho-bl-list { display:flex; flex-direction:column; gap:0; }
.rho-bl-card { padding:0 0 48px; border-bottom:1px solid #d4c8a8; margin-bottom:48px; }
.rho-bl-card:last-of-type { border-bottom:0; margin-bottom:0; }
.rho-bl-card .wp-block-post-featured-image { margin:0; }
.rho-bl-card .wp-block-post-featured-image img { width:100%; height:100%; object-fit:cover; }
.rho-bl-cardtitle a { color:var(--wp--preset--color--ink); text-decoration:none; }
.rho-bl-cardtitle a:hover { color:var(--wp--preset--color--terra-deep); }
.rho-bl-cardmeta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 0; padding:12px 0; border-top:1px solid #d4c8a8; border-bottom:1px solid #d4c8a8; font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:#76705f; }
.rho-bl-cardmeta p { margin:0; color:#b3a98f; }
.rho-bl-cardmeta .wp-block-post-author-name, .rho-bl-cardmeta .wp-block-post-author-name a, .rho-bl-cardmeta .wp-block-post-date { color:#76705f; text-decoration:none; }
.rho-bl-cardcat a { color:#d97849; text-decoration:none; }
.rho-bl-cardcat a:hover { color:var(--wp--preset--color--terra-deep); }
.rho-bl-card .wp-block-post-excerpt__more-link { display:inline-block; margin-top:8px; color:#d97849; text-decoration:none; font-style:italic; }