/*
Theme Name: Online Health Point
Theme URI: https://onlinehealthpoint.com
Description: Child theme of Twenty Twenty-Five carrying the Online Health Point
             brand palette. All colour decisions live in theme.json.
Author: Online Health Point
Version: 1.0.0
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: onlinehealthpoint
*/

/* =========================================================================
   Mulish — self-hosted, SIL Open Font License.
   Only the weights the theme uses. TTF for now; .htaccess gzips them (~53%).
   Convert to WOFF2 before launch for a further ~40% saving.
   ========================================================================= */
@font-face{
	font-family:"Mulish";
	src:url("assets/fonts/Mulish-Regular.ttf") format("truetype");
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Mulish";
	src:url("assets/fonts/Mulish-Italic.ttf") format("truetype");
	font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
	font-family:"Mulish";
	src:url("assets/fonts/Mulish-SemiBold.ttf") format("truetype");
	font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Mulish";
	src:url("assets/fonts/Mulish-Bold.ttf") format("truetype");
	font-weight:700; font-style:normal; font-display:swap;
}

/* =========================================================================
   Legacy content (Classic Editor HTML) — 336 imported posts have no block
   markup, so map the raw tags onto the same tokens theme.json defines.
   ========================================================================= */

/* WordPress core [caption] blocks */

/* Tables — including the two converted from wpDataTables */
/* wide tables must scroll themselves, never the page */

/* FAQ accordion converted from the quick-and-easy-faqs plugin */
.ohp-faq {
	margin-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--stone-deep);
}
.ohp-faq details {
	border-bottom: 1px solid var(--wp--preset--color--stone-deep);
}
.ohp-faq summary {
	cursor: pointer;
	padding: 1rem 2rem 1rem 0;
	font-weight: 600;
	color: var(--wp--preset--color--evergreen);
	list-style: none;
	position: relative;
}
.ohp-faq summary::-webkit-details-marker { display: none; }
.ohp-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--terracotta-text);
}
.ohp-faq details[open] summary::after { content: "\2013"; }
.ohp-faq summary:hover { color: var(--wp--preset--color--terracotta-text); }
.ohp-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-text);
	outline-offset: 2px;
}
.ohp-faq details p {
	padding: 0 0 1rem;
	margin: 0;
	color: var(--wp--preset--color--evergreen);
}

/* Lists in legacy markup */
ol){ padding-left: 1.25rem; }

/* Visible focus everywhere — the palette relies on colour, so focus must not */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-text);
	outline-offset: 2px;
}

/* Form states (Contact Form 7 and friends) */
.wpcf7-not-valid-tip,
.wpcf7 form.invalid .wpcf7-response-output { color: var(--wp--preset--color--error); }
.wpcf7 form.sent .wpcf7-response-output    { color: var(--wp--preset--color--success); }

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

/* =========================================================================
   Typography — the brand spec applied to legacy Classic-Editor markup.
   One family throughout; contrast comes from weight, scale and space.
   ========================================================================= */

/* Headings: Bold 700, tight tracking, tight leading */
h2,
h3,
h4,
h5,
h6){
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--wp--preset--color--evergreen);
	margin-block: 2em 0.6em;
	text-wrap: balance;
}

/* Uppercase labels carry the wide tracking from the spec */
.ohp-eyebrow,

/* UI + meta: Medium 500, slight positive tracking */
.ohp-meta{
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--evergreen-muted);
}

/* Comfortable reading measure for 336 imported articles */
ul,
ol,
h2,
h3,
h4,
blockquote){
	max-width: 68ch;
}

/* Optical detail: don't let the first heading push off the top */
h2,
h3):first-child{ margin-top: 0 }

/* =========================================================================
   HOMEPAGE SYSTEM
   Glass lives on chrome only. Ads get reserved space and their own surface.
   ========================================================================= */

/* ---- 1. Glass: the sticky header, and nothing else above the fold ------- */
.ohp-header{
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--ivory) 72%, transparent);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, background .2s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
	.ohp-header{
		-webkit-backdrop-filter: blur(16px) saturate(1.4);
		backdrop-filter: blur(16px) saturate(1.4);
	}
}
/* only show the hairline once the page has actually moved */
.ohp-header.is-stuck{ border-bottom-color: var(--wp--preset--color--stone-deep) }

/* ---- 2. Topic rail: native scroll-snap, no carousel library ------------- */
.ohp-rail{
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-block: .25rem .75rem;
	margin-inline: calc(-1 * var(--wp--preset--spacing--30));
	padding-inline: var(--wp--preset--spacing--30);
}
.ohp-rail > *{ scroll-snap-align: start; flex: 0 0 auto }
.ohp-topic{
	position: relative;
	display: block;
	inline-size: 13rem;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	background: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
	isolation: isolate;
}
.ohp-topic.has-img::before{
	content: "";
	position: absolute; inset: 0; z-index: -2;
	background-image: var(--ohp-topic-img);
	background-size: cover; background-position: center;
	transition: transform .3s ease;
}
/* scrim keeps the label legible whatever the photo is doing */
.ohp-topic::after{
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(
		to top,
		color-mix(in srgb, #16241A 88%, transparent) 0%,
		color-mix(in srgb, #16241A 55%, transparent) 45%,
		color-mix(in srgb, #16241A 18%, transparent) 100%);
}
.ohp-topic:hover.has-img::before{ transform: scale(1.05) }
.ohp-topic__body{
	position: absolute; inset-inline: 0; inset-block-end: 0;
	display: grid; gap: .1rem;
	padding: .85rem .9rem;
}
.ohp-topic b{
	font-weight: 700; letter-spacing: -.01em; line-height: 1.15;
	color: var(--wp--preset--color--ivory);
}
.ohp-topic span span,
.ohp-topic__body > span{
	font-weight: 600; font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .02em;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 88%, transparent);
}
.ohp-topic:focus-visible{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px }

/* ---- 3. Ad zones: reserved height + their own surface ------------------- */
.ohp-ad{
	display: grid;
	place-items: center;
	gap: .4rem;
	background: var(--wp--preset--color--stone);
	border-block: 1px solid var(--wp--preset--color--stone-deep);
	margin-block: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--30);
	content-visibility: auto;
	contain-intrinsic-size: auto 280px;
}
.ohp-ad::before{
	content: "Advertisement";
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--evergreen-muted);
}
/* reserved heights - these stop layout shift when a unit fills */
.ohp-ad--leaderboard{ min-block-size: 280px }
.ohp-ad--infeed     { min-block-size: 250px }
.ohp-ad--inarticle  { min-block-size: 280px }
.ohp-ad--sidebar    { min-block-size: 600px }
@media (max-width: 47.99rem){
	.ohp-ad--sidebar{ display: none }          /* desktop-only inventory */
	.ohp-ad--leaderboard{ min-block-size: 250px }
}

/* ---- 4. Trust strip ----------------------------------------------------- */
.ohp-trust{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2.5rem;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--stone-deep);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wp--preset--color--evergreen-muted);
}
.ohp-trust b{ color: var(--wp--preset--color--evergreen); font-weight: 700 }

/* ---- 5. Section headings ------------------------------------------------ */
.ohp-sectionhead{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: var(--wp--preset--spacing--40);
}
.ohp-sectionhead h2{ margin: 0 }
.ohp-sectionhead a{
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}

/* ---- 6. Scroll-driven reveals: native, compositor-only ------------------ */
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference){
		.ohp-reveal{
			animation: ohp-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 30%;
		}
	}
}
@keyframes ohp-rise{
	from{ opacity: 0; transform: translateY(16px) }
	to  { opacity: 1; transform: none }
}

/* ---- 7. Below-the-fold render skipping --------------------------------- */
.ohp-deferred{ content-visibility: auto; contain-intrinsic-size: auto 640px }

/* ---- 8. Link colour discipline -----------------------------------------
   theme.json paints every link terracotta, which is right for links inside
   running text and wrong for headlines and category labels. Titles are ink;
   category labels are the gold utility tone. Underline is reserved for
   in-copy links, so nothing else competes with it.
   ------------------------------------------------------------------------ */
:is(.wp-block-post-title, .ohp-sectionhead h2) a{
	color: inherit;
	text-decoration: none;
}
:is(.wp-block-post-title) a:hover,
:is(.wp-block-post-title) a:focus-visible{
	color: var(--wp--preset--color--terracotta-text);
	text-decoration: underline;
	text-underline-offset: .12em;
}
.wp-block-post-title{ color: var(--wp--preset--color--evergreen) }

/* category eyebrows: utility gold, never underlined */
.wp-block-post-terms a{
	color: var(--wp--preset--color--gold-text);
	text-decoration: none;
}
.wp-block-post-terms a:hover{ text-decoration: underline }

/* on the dark Compare panel, titles invert */
.has-evergreen-background-color .wp-block-post-title,
.has-evergreen-background-color .wp-block-post-title a{ color: var(--wp--preset--color--ivory) }
.has-evergreen-background-color .wp-block-post-title a:hover{ color: var(--wp--preset--color--gold) }

/* excerpt tone */
.wp-block-post-excerpt{ color: var(--wp--preset--color--evergreen-muted) }

/* =========================================================================
   ARTICLE TEMPLATE
   Sticky utility rail beside the reading column. Where a retailer would put
   product blocks, this puts ad inventory — same slots, different business.
   ========================================================================= */

.ohp-progress{
	position: fixed; inset-block-start: 0; inset-inline: 0;
	block-size: 3px; z-index: 300; pointer-events: none;
	background: color-mix(in srgb, var(--wp--preset--color--stone-deep) 40%, transparent);
}
.ohp-progress span{
	display: block; block-size: 100%;
	background: var(--wp--preset--color--terracotta);
	transform: scaleX(0); transform-origin: 0 50%;
}

.ohp-crumbs{
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600; letter-spacing: .02em;
	color: var(--wp--preset--color--evergreen-muted);
	padding-block: 1.25rem .25rem;
}
.ohp-crumbs a{ color: inherit; text-decoration: none }
.ohp-crumbs a:hover{ color: var(--wp--preset--color--terracotta-text); text-decoration: underline }
.ohp-crumbs [aria-current]{ color: var(--wp--preset--color--evergreen) }

/* ---- two-column shell ---- */
.ohp-layout{
	display: grid;
	grid-template-columns: 296px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
@media (max-width: 61.99rem){
	.ohp-layout{ grid-template-columns: minmax(0,1fr) }
	.ohp-rail-side{ order: 2 }
}
.ohp-rail-side{
	position: sticky; top: var(--ohp-stick);
	display: flex; flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.ohp-article{ min-inline-size: 0 }

/* ---- sidebar blocks ---- */
.ohp-block{
	background: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 10px;
	padding: 1.15rem 1.25rem;
}
.ohp-block__title{
	margin: 0 0 .75rem;
	font-size: .68rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--gold-text);
}

/* ---- table of contents ---- */
.ohp-toc ol{ margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem }
.ohp-toc li.lvl-3{ padding-inline-start: .9rem }
.ohp-toc a{
	display: block; padding: .32rem 0;
	font-size: .875rem; line-height: 1.35;
	color: var(--wp--preset--color--evergreen);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	padding-inline-start: .6rem; margin-inline-start: -.6rem;
}
.ohp-toc a:hover{ color: var(--wp--preset--color--terracotta-text) }
.ohp-toc a.is-current{
	color: var(--wp--preset--color--terracotta-text);
	border-inline-start-color: var(--wp--preset--color--terracotta);
	font-weight: 600;
}
/* headings must clear the sticky header when jumped to */
.ohp-article :is(h2,h3){ scroll-margin-top: 6rem }

/* ---- author card ---- */
.ohp-author__row{ display: flex; align-items: center; gap: .7rem }
.ohp-author__row b{ display: block; font-weight: 700; line-height: 1.2 }
.ohp-author__row span{
	font-size: .75rem; font-weight: 600; letter-spacing: .02em;
	color: var(--wp--preset--color--evergreen-muted);
}
.ohp-author__img{ border-radius: 50%; flex: none }
.ohp-author__bio{
	margin: .75rem 0 0; font-size: .85rem; line-height: 1.5;
	color: var(--wp--preset--color--evergreen-muted);
}
.ohp-author__updated{
	margin: .75rem 0 0; padding-top: .7rem;
	border-top: 1px solid var(--wp--preset--color--stone-deep);
	font-size: .72rem; font-weight: 600; letter-spacing: .02em;
	color: var(--wp--preset--color--evergreen-muted);
}

/* ---- related posts ---- */
/* Related posts, rebuilt on the reference layout: a header row with eyebrow and
   a "see all" link, then 2x2 horizontal cards - media left, body right, with a
   read-time badge on the image and a Read more affordance. */
.ohp-related{ margin-top: var(--wp--preset--spacing--70) }
.ohp-related__head{
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 1rem var(--wp--preset--spacing--40); flex-wrap: wrap;
	margin-block-end: var(--wp--preset--spacing--50);
}
.ohp-related__eyebrow{
	margin: 0 0 .4rem;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .17em; text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.ohp-related h2{
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	line-height: 1.08; letter-spacing: -.025em; font-weight: 800;
}
.ohp-related__all{
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap;
	color: var(--wp--preset--color--gold);
}
.ohp-related__all:hover{ color: var(--wp--preset--color--ivory) }
.ohp-related__grid{
	display: grid; gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ohp-rcard{
	display: grid; grid-template-columns: 190px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start; text-decoration: none;
}
.ohp-rcard__media{ position: relative; display: block; border-radius: 12px; overflow: hidden }
.ohp-rcard__media img{
	display: block; inline-size: 100%; block-size: auto;
	aspect-ratio: 4/3; object-fit: cover;
	transition: transform .25s ease;
}
.ohp-rcard:hover .ohp-rcard__media img{ transform: scale(1.04) }
.ohp-rcard__time{
	position: absolute; inset-block-start: .55rem; inset-inline-start: .55rem;
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .28rem .55rem; border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--ivory) 92%, transparent);
	color: var(--wp--preset--color--evergreen);
	font-size: .66rem; font-weight: 700; letter-spacing: .02em;
}
.ohp-rcard__body{ display: grid; gap: .5rem; align-content: start; min-inline-size: 0 }
.ohp-rcard__body b{
	font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ohp-rcard__exc{
	font-size: .88rem; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ohp-rcard__more{
	justify-self: start; margin-block-start: .2rem;
	padding: .48rem 1.1rem; border-radius: 999px;
	border: 1px solid currentColor;
	font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	transition: background .15s ease, color .15s ease;
}
@media (max-width: 61.99rem){ .ohp-related__grid{ grid-template-columns: 1fr } }
@media (max-width: 35.99rem){
	.ohp-rcard{ grid-template-columns: 1fr }
	.ohp-rcard__media img{ aspect-ratio: 16/9 }
}

/* in-article ads sit inside the reading column, not full-bleed */
.ohp-article .ohp-ad{ border-radius: 10px; border: 1px solid var(--wp--preset--color--stone-deep) }

/* ---- reading measure -----------------------------------------------------
   The block layout caps content at contentSize (42rem), which in Aeonik at
   18px lands on ~75 characters — the very top of the comfortable range.
   Text elements tighten to ~66; figures, tables and ads keep the full column
   so data isn't squeezed.
   -------------------------------------------------------------------------- */
/* Body copy runs the full content width so its left edge lines up with the lead
   image and every figure. It used to be capped at 37rem, and WP's constrained
   layout then centred that inside the 704px column with 56px auto margins - the
   text sat inset from the image on both sides and read as a mistake.
   At 704px/18px this is ~78 characters, so line-height goes up to compensate. */
.ohp-article .entry-content > :is(p, ul, ol, blockquote, h2, h3, h4, .ohp-faq){
	max-inline-size: none;
	margin-inline: 0;
}
.ohp-article .entry-content > :is(figure, .wp-block-table, table, .ohp-ad, .wp-block-image){
	max-inline-size: none;
}
/* At the full 704px the line runs ~78 characters at 18px, past the comfortable
   50-75 range. Nudging the body to 19px brings it back to ~74 and reads larger,
   and the paragraph gap goes 24px -> 28px so the column breathes. */
.ohp-article .entry-content > :is(p, ul, ol, blockquote){
	font-size: 1.1875rem;
	line-height: 1.72;
}
.ohp-article .entry-content > :is(p, ul, ol, blockquote) + :is(p, ul, ol, blockquote){
	margin-block-start: 1.75rem;
}

/* The migrated content carries style="text-align: center" on 1382 headings and
   47 paragraphs, left over from the old theme. Inline styles can only be beaten
   with !important; scoped to entry-content so nothing else is affected.
   Captions and images are deliberately excluded - centring those is legitimate. */
.ohp-article .entry-content > :is(h1,h2,h3,h4,h5,h6),
.ohp-article .entry-content > p{ text-align: left !important }
/* keep everything on the same left edge rather than centring alternate blocks */
.ohp-article .entry-content > *{ margin-inline: 0 }

/* =========================================================================
   WIDER SHELL + THREE-ZONE ARTICLE
   The site now runs to 86rem. On large screens the article gains a right
   rail for the 300x600 unit, so the extra width carries inventory and
   navigation rather than empty margin.
   ========================================================================= */

/* fix: an <img> with both width and height attributes ignores aspect-ratio
   unless one axis is released. This is why related-post images rendered
   512px tall instead of 16:10. */

/* --- three zones from 1200px up --- */
@media (min-width: 75rem){
	.ohp-layout{
		grid-template-columns: 17rem minmax(0, 1fr) 300px;
		gap: var(--wp--preset--spacing--50);
	}
	.ohp-rail-side{ grid-column: 1 }
	.ohp-article  { grid-column: 2 }
	.ohp-rail-end {
		grid-column: 3;
		position: sticky; top: var(--ohp-stick);
		display: flex; flex-direction: column;
		gap: var(--wp--preset--spacing--30);
	}
	/* the tall unit belongs in the right rail on wide screens */
	.ohp-rail-side .ohp-ad--sidebar{ display: none }
}

/* --- two zones between 62rem and 75rem --- */
@media (min-width: 62rem) and (max-width: 74.99rem){
	.ohp-rail-end{ display: none }
}

/* --- single column below 62rem --- */
@media (max-width: 61.99rem){
	.ohp-rail-end{ display: none }
}

/* related cards: even heights regardless of title length */

/* ==== RECOVERED: nav / cover / cards / homepage grid system ====
   Rebuilt from session history after an unanchored s.index() deleted this
   region. Declarations merged chronologically, property-level last-wins. */
.ohp-topic:hover{ transform: translateY(-2px); background: var(--wp--preset--color--ivory) }
.ohp-topic span{ font-weight: 500; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .02em; color: var(--wp--preset--color--evergreen-muted) }
.ohp-footer__brand p{ max-inline-size: 34ch }
.ohp-footer__bottom p{ max-inline-size: 62ch; margin: 0 }
/* The seal is a square badge on an ivory fill, so it reads on the ivory header
   AND on the dark footer with no recolouring - deliberately no filter here.
   (The retired wordmark needed currentColor; a multicolour badge must not be
   inverted or it turns to mush.) */
.ohp-logo{ display: block; text-decoration: none }
.ohp-logo img{ display: block; inline-size: 100%; block-size: auto }
.ohp-footer .ohp-logo--footer{
	inline-size: 72px;
	margin-bottom: var(--wp--preset--spacing--30);
}
.ohp-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-block: var(--wp--preset--spacing--30) }
.ohp-meta > *{ margin: 0 }
.ohp-meta .wp-block-post-time-to-read{ display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px; background: var(--wp--preset--color--stone); color: var(--wp--preset--color--evergreen-muted); font-weight: 500; letter-spacing: .02em }
.ohp-meta .wp-block-post-author-name{ font-weight: 500; letter-spacing: .02em; color: var(--wp--preset--color--evergreen-muted) }
.ohp-meta .wp-block-post-author-name a{ color: var(--wp--preset--color--terracotta-text); text-decoration: none }
.ohp-meta .wp-block-post-author-name a:hover{ text-decoration: underline }
.ohp-article > .wp-block-post-terms{ display: inline-flex; flex-wrap: wrap; gap: .4rem }
.ohp-article > .wp-block-post-terms a{ padding: .25rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--wp--preset--color--gold) 18%, transparent); color: var(--wp--preset--color--gold-text); text-decoration: none }
.ohp-article > .wp-block-post-terms a:hover{ background: color-mix(in srgb, var(--wp--preset--color--gold) 30%, transparent) }
.ohp-toprow{ margin-block-start: var(--wp--preset--spacing--70) }
.ohp-toprow__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40) }
.ohp-card{ display: grid; gap: .5rem; align-content: start; text-decoration: none; color: var(--wp--preset--color--evergreen) }
.ohp-card img{ inline-size: 100%; block-size: auto; object-fit: cover; border-radius: 8px; transition: transform .2s ease; aspect-ratio: 16/10 }
.ohp-card:hover img{ transform: translateY(-2px) }
.ohp-card b{ font-weight: 700; line-height: 1.25; letter-spacing: -.01em }
.ohp-card:hover b{ color: var(--wp--preset--color--terracotta-text) }
.ohp-card time{ font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: .02em; color: var(--wp--preset--color--evergreen-muted) }
.ohp-icon{ flex: none; vertical-align: -0.15em; stroke: currentColor }
.ohp-trust span{ display: inline-flex; align-items: center; gap: .4rem }
.ohp-trust .ohp-icon{ color: var(--wp--preset--color--gold-text); opacity: .9 }
.ohp-sectionhead a .ohp-icon{ transition: transform .18s ease }
.ohp-sectionhead a:hover .ohp-icon{ transform: translateX(3px) }
.ohp-compare__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) }
.ohp-compare__card{ display: grid; gap: .75rem; align-content: start; text-decoration: none; color: var(--wp--preset--color--ivory) }
.ohp-compare__media{ position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background-color: color-mix(in srgb, var(--wp--preset--color--ivory) 8%, transparent); background-image: var(--img); background-size: cover; background-position: center; transition: transform .22s ease }
.ohp-compare__media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, #16241A 55%, transparent) 0%, transparent 55%) }
.ohp-compare__card:hover .ohp-compare__media{ transform: translateY(-3px) }
.ohp-compare__badge{ position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; z-index: 1; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border-radius: 999px; background: var(--wp--preset--color--gold); color: #29402E; font-size: .62rem; font-weight: 700; letter-spacing: .12em }
.ohp-compare__card b{ font-weight: 700; line-height: 1.28; letter-spacing: -.01em; color: var(--wp--preset--color--ivory) }
.ohp-compare__card:hover b{ color: var(--wp--preset--color--gold) }
.ohp-compare__card:focus-visible{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; border-radius: 12px }
.ohp-author__updated .ohp-icon{ color: var(--wp--preset--color--gold-text) }
.ohp-meta .wp-block-post-time-to-read::before{ content: ""; inline-size: 13px; block-size: 13px; margin-inline-end: .35rem; background: currentColor; -webkit-mask: var(--ohp-clock) center / contain no-repeat; mask: var(--ohp-clock) center / contain no-repeat }
:root{ --ohp-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); --ohp-gap: clamp(3rem, 5vw, 4.5rem);
	/* Sticky rails must clear the header. Derived from one base so the breakpoint
	   and admin-bar variants stay in sync: desktop header is 98px at rest / 83px
	   stuck, so 6rem clears it; under 62rem the stacked header is 110px, so 7.5rem. */
	--ohp-stick-base: 6rem;
	--ohp-stick: var(--ohp-stick-base) }
@media (max-width: 61.99rem){ :root{ --ohp-stick-base: 7.5rem } }
.ohp-topsec{ margin-block-start: var(--ohp-gap) }
.ohp-card, .ohp-li, .ohp-ov, .ohp-row, .ohp-feat{ text-decoration: none; color: var(--wp--preset--color--evergreen) }
.ohp-card__meta{ display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 500; letter-spacing: .02em; color: var(--wp--preset--color--evergreen-muted) }
.ohp-card__meta i{ font-style: normal; opacity: .5; margin-inline: .15rem }
/* card atoms — shared by every topsec variant. Without the img rule the
   images render at intrinsic size and blow the sections apart. */
:is(.ohp-card,.ohp-li,.ohp-ov,.ohp-row,.ohp-feat) img{
	inline-size: 100%; block-size: auto; object-fit: cover; border-radius: 8px;
}
:is(.ohp-card,.ohp-li,.ohp-row,.ohp-feat) b{
	font-weight: 700; line-height: 1.25; letter-spacing: -.01em; display: block;
}
:is(.ohp-card,.ohp-li,.ohp-row,.ohp-feat):hover b{ color: var(--wp--preset--color--terracotta-text) }
.ohp-li{ display: grid; grid-template-columns: 66px 1fr; gap: .8rem; align-items: start; padding-block: .7rem; border-block-start: 1px solid var(--wp--preset--color--stone-deep) }
.ohp-li:first-child{ border-block-start: 0; padding-block-start: 0 }
.ohp-li img{ aspect-ratio: 1; border-radius: 6px }
.ohp-li b{ margin-block-end: .3rem; font-size: .95rem }
.ohp-ov{ position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--wp--preset--color--evergreen) var(--img) center / cover no-repeat; color: var(--wp--preset--color--ivory); isolation: isolate }
.ohp-ov::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, #16241A 94%, transparent) 0%, color-mix(in srgb, #16241A 72%, transparent) 38%, color-mix(in srgb, #16241A 20%, transparent) 78%, transparent 100%) }
.ohp-ov__body{ position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: .35rem; padding: .9rem }
.ohp-ov b{ font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--wp--preset--color--ivory) }
.ohp-ov .ohp-card__meta{ color: color-mix(in srgb, var(--wp--preset--color--stone) 85%, transparent) }
.ohp-ov:hover b{ color: var(--wp--preset--color--gold) }
.ohp-row{ display: grid; grid-template-columns: 190px 1fr; gap: var(--wp--preset--spacing--40); align-items: center; padding-block: var(--wp--preset--spacing--30); border-block-start: 1px solid var(--wp--preset--color--stone-deep) }
.ohp-row:first-child{ border-block-start: 0; padding-block-start: 0 }
.ohp-row img{ aspect-ratio: 16/10 }
.ohp-row b{ font-size: var(--wp--preset--font-size--medium); margin-block-end: .4rem }
.ohp-row__exc{ display: block; margin-block-end: .5rem; color: var(--wp--preset--color--evergreen-muted); font-size: .9rem; line-height: 1.5; max-inline-size: 60ch }
.ohp-feat{ display: grid; gap: .6rem; align-content: start }
.ohp-feat img{ aspect-ratio: 16/10 }
.ohp-feat b{ font-size: var(--wp--preset--font-size--medium) }
.ohp-feat__exc{ color: var(--wp--preset--color--evergreen-muted); font-size: .9rem; line-height: 1.55 }
.ohp-topsec__body{ display: grid; gap: var(--wp--preset--spacing--30) }
.ohp-topsec--feature .ohp-topsec__body{ grid-template-columns: 1.62fr 1fr; gap: var(--wp--preset--spacing--40) }
.ohp-topsec--overlay .ohp-topsec__body{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.ohp-topsec--rows    .ohp-topsec__body{ grid-template-columns: 1fr; gap: 0 }
.ohp-topsec--grid    .ohp-topsec__body{ grid-template-columns: repeat(4, minmax(0,1fr)) }
.ohp-topsec--mosaic  .ohp-topsec__body{ grid-template-columns: 1fr 1.35fr; gap: var(--wp--preset--spacing--40) }
.ohp-topsec--mosaic .ohp-topsec__mini{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--wp--preset--spacing--40) }
.ohp-topsec__side{ display: grid; align-content: start }
:is(.ohp-card, .ohp-li, .ohp-ov, .ohp-row, .ohp-feat) b{ font-size: 1rem; line-height: 1.32 }

.ohp-home{ display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: var(--wp--preset--spacing--60); align-items: start; margin-block-start: 0 }
.ohp-home__side{ position: sticky; top: var(--ohp-stick); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40) }
.ohp-topsec:first-child{ margin-block-start: 0 }
.ohp-card b, .ohp-li b{ font-size: .95rem }
.ohp-tag{ display: inline-block; align-self: start; padding: .16rem .5rem; border-radius: 4px; background: color-mix(in srgb, var(--wp--preset--color--gold) 20%, transparent); color: var(--wp--preset--color--gold-text); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-block-end: .35rem; justify-self: start; inline-size: fit-content }
.ohp-ov .ohp-tag{ background: color-mix(in srgb, var(--wp--preset--color--gold) 90%, transparent); color: #29402E }
.ohp-side{ border: 1px solid var(--wp--preset--color--stone-deep); border-radius: 10px; padding: 1rem 1.1rem 1.15rem; background: var(--wp--preset--color--ivory) }
.ohp-side__title{ margin: 0 0 .8rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-text) }
.ohp-pop{ list-style: none; margin: 0; padding: 0; display: grid }
.ohp-pop li + li{ border-block-start: 1px solid var(--wp--preset--color--stone-deep) }
.ohp-pop a{ display: grid; grid-template-columns: auto 52px 1fr; gap: .6rem; align-items: center; padding-block: .65rem; text-decoration: none; color: var(--wp--preset--color--evergreen) }
.ohp-pop__n{ font-family: var(--wp--preset--font-family--brand); font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--wp--preset--color--gold-text) 55%, transparent); font-variant-numeric: tabular-nums }
.ohp-pop img{ inline-size: 52px; block-size: 52px; object-fit: cover; border-radius: 6px }
.ohp-pop b{ display: block; font-size: .85rem; line-height: 1.3; font-weight: 600 }
.ohp-pop a:hover b{ color: var(--wp--preset--color--terracotta-text) }
.ohp-sidetopics{ list-style: none; margin: 0; padding: 0; display: grid }
.ohp-sidetopics li + li{ border-block-start: 1px solid var(--wp--preset--color--stone-deep) }
.ohp-sidetopics a{ display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-block: .5rem; text-decoration: none; color: var(--wp--preset--color--evergreen); font-size: .9rem; font-weight: 500 }
.ohp-sidetopics em{ font-style: normal; font-size: .75rem; color: var(--wp--preset--color--evergreen-muted); font-variant-numeric: tabular-nums }
.ohp-sidetopics a:hover{ color: var(--wp--preset--color--terracotta-text) }
.ohp-sub{ background: var(--wp--preset--color--evergreen); border-color: var(--wp--preset--color--evergreen) }
.ohp-sub .ohp-side__title{ color: var(--wp--preset--color--gold) }
.ohp-sub__blurb{ margin: 0 0 .8rem; font-size: .88rem; line-height: 1.5; color: var(--wp--preset--color--stone) }
/* No box-sizing is set anywhere in this stylesheet, so `inline-size: 100%` plus
   padding and borders overflowed the sidebar panel by 24px (299px in a 275px box).
   Scoped to form controls so the tuned grid/flex layouts cannot shift. */
input, textarea, select, button{ box-sizing: border-box }
.ohp-sub__form{ display: grid; gap: .45rem }
.ohp-sub__form input{ inline-size: 100%; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 35%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--wp--preset--color--ivory) 10%, transparent); color: var(--wp--preset--color--ivory); font-family: inherit; font-size: .9rem }
.ohp-sub__form input::placeholder{ color: color-mix(in srgb, var(--wp--preset--color--stone) 65%, transparent) }
.ohp-sub__form button{ padding: .55rem .9rem; border: 0; border-radius: 7px; cursor: pointer; background: var(--wp--preset--color--terracotta-deep); color: var(--wp--preset--color--ivory); font-family: inherit; font-size: .85rem; font-weight: 600; letter-spacing: .02em }
.ohp-sub__form button:hover{ background: var(--wp--preset--color--terracotta-hover) }
.ohp-sub__note{ margin: .6rem 0 0; font-size: .7rem; color: color-mix(in srgb, var(--wp--preset--color--stone) 70%, transparent) }
.ohp-home__side .ohp-ad{ border: 1px solid var(--wp--preset--color--stone-deep); border-radius: 10px; margin: 0; margin-block: 0 }
.ohp-home__main .ohp-ad{ border-radius: 10px; border: 1px solid var(--wp--preset--color--stone-deep); margin-block: 0 }
.ohp-topsec--mosaic .ohp-topsec__body{ align-items: stretch }
.ohp-topsec--mosaic > .ohp-topsec__body > .ohp-ov{ aspect-ratio: auto; block-size: 100%; min-block-size: 320px }
.ohp-topsec--feature .ohp-feat img{ aspect-ratio: 16/9 }
.ohp-exc{ display: block; font-size: .925rem; line-height: 1.5; color: var(--wp--preset--color--evergreen-muted); margin-block-end: .45rem }
.ohp-li .ohp-exc{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.ohp-ov .ohp-exc{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: color-mix(in srgb, var(--wp--preset--color--stone) 90%, transparent) }
.ohp-row .ohp-exc{ max-inline-size: 60ch; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden }
.ohp-feat .ohp-exc{ -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden }
.ohp-hero{ display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--wp--preset--spacing--60); align-items: start; margin-block-start: 0 }
.ohp-hero__lead .ohp-feat img{ aspect-ratio: 16/9 }
.ohp-hero__side{ display: grid; align-content: start }
.ohp-hero__side .ohp-side__title{ margin-block-end: .5rem }
.ohp-hero__side .ohp-li:first-of-type{ border-block-start: 0; padding-block-start: 0 }
.ohp-section:first-child{ margin-block-start: 0 }
main > *{ margin-block-start: var(--ohp-gap) }
main > *:first-child{ margin-block-start: 0 }
main > .ohp-ad{ margin-block: 0 }
main > .ohp-section{ margin-block-start: var(--ohp-gap) }
main > .wp-block-group:first-of-type{ margin-block-start: 0 }
main > .wp-block-group > .ohp-ad{ margin-block: 0 }
.ohp-home__side > *{ margin-block: 0 }
/* Main column rhythm. Six competing margin rules used to fight here — several at
   (0,2,0) zeroing everything while the restoring rule at (0,1,0) lost to them,
   collapsing every gap to 0 and leaving the ad slabs touching the sections.
   `gap` cannot be overridden by a margin rule, so the fight cannot recur. */
.ohp-home__main{ display: flex; flex-direction: column; gap: var(--ohp-gap) }
.ohp-home__main > *{ margin-block: 0 }
.ohp-rail-side > *{ margin-block: 0 }
.ohp-card__media{ position: relative; display: block }
.ohp-card__media img{ inline-size: 100%; block-size: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; transition: transform .2s ease }
.ohp-card--compare:hover .ohp-card__media img{ transform: translateY(-2px) }
.ohp-card--compare{ color: var(--wp--preset--color--ivory) }
.ohp-card--compare b{ color: var(--wp--preset--color--ivory) }
.ohp-card--compare:hover b{ color: var(--wp--preset--color--gold) }
.ohp-card--compare .ohp-exc{ color: color-mix(in srgb, var(--wp--preset--color--stone) 82%, transparent) }
.ohp-card--compare .ohp-card__meta{ color: color-mix(in srgb, var(--wp--preset--color--stone) 70%, transparent) }
.ohp-card--compare:focus-visible{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; border-radius: 10px }
/* Masthead: wordmark left, nav right, on one line. The seal was centred above
   the nav because it was square; a 12:1 wordmark reads as a masthead instead. */
.ohp-header__bar{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-block: 1rem;
	transition: padding-block .2s ease;
}
.ohp-header.is-stuck .ohp-header__bar{ padding-block: .7rem }
.ohp-header__brand{ flex: none }
/* logo | nav | search. Equal-width outer columns keep the nav optically centred
   however wide the logo or the search control happen to be. */
.ohp-header__nav{ display: flex; justify-content: center; align-items: center; min-inline-size: 0 }
.ohp-header__end{ display: flex; justify-content: flex-end; align-items: center; min-inline-size: 0 }
/* Core gives every flow child after the first a 24px top margin, so the logo
   (:first-child, margin 0) sat 12px higher than the nav and the search field.
   (0,2,0) to outrank :root :where(.is-layout-flow) > * at (0,1,0). */
.ohp-header__bar > .ohp-header__brand,
.ohp-header__bar > .ohp-header__nav,
.ohp-header__bar > .ohp-header__end{ margin-block: 0 }
/* the nav is a flex item, so without this it is sized by its content and the
   list's overflow-x never gets a chance to clip and scroll */
.ohp-header__nav .ohp-nav{ min-inline-size: 0; flex: 1 1 auto }
body > header.wp-block-template-part{ position: sticky; top: 0; z-index: 100 }
.ohp-header .ohp-logo{ inline-size: 78px; transition: inline-size .25s ease }
.ohp-header.is-stuck .ohp-logo{ inline-size: 56px }
.ohp-section--cover{ margin-block-start: 0 }
.ohp-cover{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; block-size: clamp(23rem, 52vh, 34rem) }
.ohp-cover__pane{ position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--wp--preset--color--ivory); background: var(--wp--preset--color--evergreen); isolation: isolate }
.ohp-cover__img{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1) }
.ohp-cover__pane:hover .ohp-cover__img{ transform: scale(1.04) }
.ohp-cover__pane::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in srgb, #16241A 92%, transparent) 0%, color-mix(in srgb, #16241A 62%, transparent) 38%, color-mix(in srgb, #16241A 12%, transparent) 78%, transparent 100%) }
.ohp-cover__body{ position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; display: grid; gap: .45rem; padding: clamp(1.1rem, 2.2vw, 1.9rem) }
.ohp-cover__body b{ font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 700; line-height: 1.22; letter-spacing: -.015em; color: var(--wp--preset--color--ivory); text-wrap: balance }
.ohp-cover__pane:hover b{ color: var(--wp--preset--color--gold) }
.ohp-cover__body .ohp-card__meta{ color: color-mix(in srgb, var(--wp--preset--color--stone) 82%, transparent) }
.ohp-cover__body .ohp-tag{ background: color-mix(in srgb, var(--wp--preset--color--gold) 92%, transparent); color: #29402E }
.ohp-cover__pane:focus-visible{ outline: 3px solid var(--wp--preset--color--gold); outline-offset: -3px }
.ohp-explore__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-block-end: var(--wp--preset--spacing--40) }
.ohp-explore__eyebrow{ margin: 0 0 .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--gold-text) }
.ohp-explore__head h2{ margin: 0; font-size: var(--wp--preset--font-size--x-large); letter-spacing: -.02em; line-height: 1.05 }
.ohp-explore__nav{ display: flex; gap: .5rem; flex: none }
.ohp-explore__btn{ inline-size: 2.4rem; block-size: 2.4rem; display: grid; place-items: center; border: 1px solid var(--wp--preset--color--stone-deep); border-radius: 50%; background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--evergreen); cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease }
.ohp-explore__btn:hover:not(:disabled){ background: var(--wp--preset--color--evergreen); border-color: var(--wp--preset--color--evergreen); color: var(--wp--preset--color--ivory) }
.ohp-explore__btn:disabled{ opacity: .35; cursor: default }
.ohp-explore__btn:focus-visible{ outline: 2px solid var(--wp--preset--color--terracotta-text); outline-offset: 2px }
.ohp-explore__rail{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(184px, 1fr); gap: var(--wp--preset--spacing--30); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-end: .25rem }
.ohp-explore__rail::-webkit-scrollbar{ display: none }
.ohp-explore__card{ scroll-snap-align: start; display: grid; gap: .15rem; text-decoration: none; color: var(--wp--preset--color--evergreen) }
.ohp-explore__media{ display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--wp--preset--color--stone); margin-block-end: .6rem }
.ohp-explore__media img{ inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2,.6,.2,1) }
.ohp-explore__card:hover .ohp-explore__media img{ transform: scale(1.05) }
.ohp-explore__card b{ font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25 }
.ohp-explore__card:hover b{ color: var(--wp--preset--color--terracotta-text) }
.ohp-explore__card > span:last-child{ font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: .02em; color: var(--wp--preset--color--evergreen-muted) }
.ohp-explore__card:focus-visible{ outline: 2px solid var(--wp--preset--color--terracotta-text); outline-offset: 4px; border-radius: 14px }
.ohp-nav__list{
	display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;
	gap: .3rem 1.85rem; list-style: none; margin: 0; padding: 0;
}
.ohp-nav__list a{
	position: relative; display: inline-block;
	padding-block: .45rem;
	font-size: .7rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--evergreen-muted);
	text-decoration: none;
	transition: color .18s ease;
}
.ohp-nav__list a:hover{ color: var(--wp--preset--color--evergreen) }
/* a rule that wipes in from the left, rather than a border that pops on */
.ohp-nav__list a::after{
	content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
	block-size: 2px; border-radius: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0); transform-origin: left;
	transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.ohp-nav__list a:hover::after,
.ohp-nav__list a:focus-visible::after{ transform: scaleX(1) }
.ohp-nav__list a.is-current,
.ohp-nav__list .current-menu-item > a{ color: var(--wp--preset--color--evergreen) }
.ohp-nav__list a.is-current::after,
.ohp-nav__list .current-menu-item > a::after{ transform: scaleX(1) }

/* Compare is a different kind of destination, so it reads as a pill not a link */
.ohp-nav__cta a{
	padding: .5rem 1.05rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--evergreen) 24%, transparent);
	color: var(--wp--preset--color--evergreen);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ohp-nav__cta a::after{ content: none }
.ohp-nav__cta a:hover,
.ohp-nav__cta a.is-current{
	background: var(--wp--preset--color--evergreen);
	border-color: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
}
.ohp-compare__all{ display: inline-block; margin-block-start: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .02em; color: var(--wp--preset--color--gold); text-decoration: underline; text-underline-offset: .18em }
.ohp-compare__all:hover{ color: var(--wp--preset--color--ivory) }
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important }
	.ohp-cover__pane:hover .ohp-cover__img{ transform: none }
	.ohp-explore__card:hover .ohp-explore__media img{ transform: none }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
	.ohp-header{ -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4) }
}
@media (max-width: 47.99rem){
	.ohp-ad--sidebar{ display: none }
	.ohp-ad--leaderboard{ min-block-size: 250px }
	.ohp-related__grid{ grid-template-columns: 1fr }
	.ohp-footer__top{ grid-template-columns: 1fr }
	.ohp-row{ grid-template-columns: 1fr }
	.ohp-explore__head{ align-items: flex-start; flex-direction: column; gap: .9rem }
	.ohp-explore__rail{ grid-auto-columns: minmax(150px, 60%) }
	.ohp-nav__list{ justify-content: center; gap: .3rem 1.05rem }
	.ohp-nav__list a{ font-size: .66rem; letter-spacing: .09em }
}
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference){ animation-timeline: view(); animation-range: entry 8% cover 30% }
}
@media (max-width: 61.99rem){
	.ohp-layout{ grid-template-columns: minmax(0,1fr) }
	.ohp-rail-side{ order: 2 }
	.ohp-rail-end{ display: none }
	.ohp-toprow__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
	.ohp-compare__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
	.ohp-topsec--mosaic  .ohp-topsec__body{ grid-template-columns: 1fr }
	.ohp-topsec--overlay .ohp-topsec__body{ grid-template-columns: repeat(2, minmax(0,1fr)) }
	.ohp-topsec--grid    .ohp-topsec__body{ grid-template-columns: repeat(2, minmax(0,1fr)) }
	.ohp-hero{ grid-template-columns: 1fr }
	.ohp-cover{ grid-template-columns: 1fr 1fr; block-size: auto }
	.ohp-cover__pane{ aspect-ratio: 4/3 }
	.ohp-cover__pane:first-child{ grid-column: 1 / -1; aspect-ratio: 16/9 }
}
@media (min-width: 75rem){
	.ohp-layout{ grid-template-columns: 17rem minmax(0, 1fr) 300px; gap: var(--wp--preset--spacing--50) }
	.ohp-rail-side{ grid-column: 1 }
	.ohp-article{ grid-column: 2 }
	.ohp-rail-end{ grid-column: 3; position: sticky; top: var(--ohp-stick); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30) }
	.ohp-rail-side .ohp-ad--sidebar{ display: none }
}
@media (min-width: 62rem) and (max-width: 74.99rem){
	.ohp-rail-end{ display: none }
}
@media (prefers-reduced-motion: no-preference){
	html{ scroll-behavior: smooth }
}
@media (max-width: 29.99rem){
	.ohp-toprow__grid{ grid-template-columns: 1fr }
	.ohp-topsec--mosaic .ohp-topsec__mini{ grid-template-columns: 1fr }
}
@media (max-width: 35.99rem){
	.ohp-compare__grid{ grid-template-columns: 1fr }
	.ohp-cover{ grid-template-columns: 1fr }
	.ohp-cover__pane:first-child{ aspect-ratio: 4/3; grid-column: auto }
}
@media (max-width: 67.49rem){
	.ohp-home{ grid-template-columns: minmax(0,1fr) }
	.ohp-home__side{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--wp--preset--spacing--40); position: static }
}
@media (max-width: 41.99rem){
	.ohp-home__side{ grid-template-columns: 1fr }
}
@media (min-width: 62rem){
	.ohp-explore__rail{ grid-auto-columns: 15.5rem }
}

.ohp-compare__eyebrow{ margin: 0 0 .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--gold) }
.ohp-compare__title{ margin: 0 0 var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--x-large); line-height: 1.05; letter-spacing: -.02em; color: var(--wp--preset--color--ivory) }

/* ---- recovered grouped selectors (chronological; cascade preserved) ---- */
.ohp-eyebrow{ font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--gold-text) }
.has-evergreen-background-color .wp-block-post-title, .has-evergreen-background-color .wp-block-post-title a{ color: var(--wp--preset--color--ivory) }
.ohp-meta .wp-block-post-date, .ohp-meta .wp-block-post-time-to-read{ display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px; background: var(--wp--preset--color--stone); color: var(--wp--preset--color--evergreen-muted); font-weight: 500; letter-spacing: .02em }
.ohp-card .ohp-exc, .ohp-li .ohp-exc{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.ohp-feat .ohp-exc, .ohp-row .ohp-exc{ max-inline-size: 60ch }
.ohp-section, .ohp-home, .ohp-hero{ margin-block-start: var(--ohp-gap) }
main > * > .ohp-ad, main > .ohp-ad{ margin-block: 0 }
.ohp-section, .ohp-hero, .ohp-home{ margin-block-start: 0 }
main > .wp-block-group, main > .ohp-section{ margin-block-start: var(--ohp-gap) }
.wp-site-blocks > header.wp-block-template-part, body > header.wp-block-template-part{ position: sticky; top: 0; z-index: 100 }

/* The WP admin bar is position:fixed, so a sticky header at top:0 slides under it
   and its top 32px — which is where the logo sits — is hidden. Logged-in only.
   Core: 32px above 782px, 46px from 601–782px, and position:absolute below 600px
   (it scrolls away there, so no offset). */
body.admin-bar .wp-site-blocks > header.wp-block-template-part,
body.admin-bar > header.wp-block-template-part{ top: 32px }
@media screen and (max-width: 782px){
	body.admin-bar .wp-site-blocks > header.wp-block-template-part,
	body.admin-bar > header.wp-block-template-part{ top: 46px }
}
@media screen and (max-width: 600px){
	body.admin-bar .wp-site-blocks > header.wp-block-template-part,
	body.admin-bar > header.wp-block-template-part{ top: 0 }
}

/* ---- recovered grouped selectors nested inside @media ---- */
@media (max-width: 61.99rem){
	.ohp-topsec--feature .ohp-topsec__body,
	.ohp-topsec--mosaic .ohp-topsec__body{ grid-template-columns: 1fr }
}
@media (max-width: 35.99rem){
	.ohp-cover__pane,
	.ohp-cover__pane:first-child{ aspect-ratio: 4/3; grid-column: auto }
}
@media (max-width: 29.99rem){
	.ohp-topsec--overlay .ohp-topsec__body,
	.ohp-topsec--grid .ohp-topsec__body,
	.ohp-topsec--mosaic .ohp-topsec__mini{ grid-template-columns: 1fr }
}

body.admin-bar{ --ohp-stick: calc(var(--ohp-stick-base) + 32px) }
@media screen and (max-width: 782px){ body.admin-bar{ --ohp-stick: calc(var(--ohp-stick-base) + 46px) } }
@media screen and (max-width: 600px){ body.admin-bar{ --ohp-stick: var(--ohp-stick-base) } }

/* =========================================================================
   POST MASTHEAD - adapted from the reference layout Adil supplied.
   A full-bleed evergreen band carries crumbs, category, title and byline, so
   the article opens with a deliberate cover rather than drifting into body
   text. The lead image then sits on the ivory below and overlaps the band.
   ========================================================================= */
.ohp-posthero{
	background: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	margin-block-start: 0;
}
.ohp-posthero__inner{
	max-inline-size: 52rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	text-align: center;
}
.ohp-posthero .ohp-crumbs{
	justify-content: center;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 72%, transparent);
	margin-block-end: var(--wp--preset--spacing--40);
}
.ohp-posthero .ohp-crumbs a{ color: inherit }
.ohp-posthero .ohp-crumbs a:hover{ color: var(--wp--preset--color--gold) }
.ohp-posthero .ohp-crumbs [aria-current]{ color: var(--wp--preset--color--stone) }
.ohp-posthero__eyebrow{
	display: inline-block; text-decoration: none;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .17em; text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-block-end: var(--wp--preset--spacing--30);
}
.ohp-posthero__eyebrow:hover{ color: var(--wp--preset--color--ivory) }
.ohp-posthero__title{
	margin: 0;
	font-size: clamp(2rem, 4.6vw, 3.25rem);
	line-height: 1.08; letter-spacing: -.028em; font-weight: 800;
	color: var(--wp--preset--color--ivory);
	text-wrap: balance;
}
.ohp-posthero__standfirst{
	margin: var(--wp--preset--spacing--30) auto 0;
	max-inline-size: 44ch;
	font-size: 1.02rem; line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 88%, transparent);
}
.ohp-posthero__meta{
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: .5rem .7rem;
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: .82rem;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 82%, transparent);
}
.ohp-posthero__avatar{
	inline-size: 36px; block-size: 36px; border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--gold) 60%, transparent);
	margin-inline-end: .15rem;
}
.ohp-posthero__by{ color: var(--wp--preset--color--ivory); font-weight: 600 }
.ohp-posthero__dot{
	inline-size: 3px; block-size: 3px; border-radius: 50%;
	background: currentColor; opacity: .55;
}
/* No overlap onto the band: pulling the layout up drags the TOC rail onto the
   dark ground with it, which reads as a mistake. The reference doesn't overlap
   either - the band ends and the content starts. `main >` to beat (0,1,1). */
main > .ohp-layout{ margin-block-start: var(--wp--preset--spacing--60) }
.ohp-article__lead img{ box-shadow: 0 14px 34px -22px rgba(27,44,31,.4) }
.ohp-article .ohp-article__lead{ margin-block-start: 0 }
/* The three columns are flow children, so core gives every one after the first
   a 24px top margin - the article started 24px below the TOC card. (0,2,0) to
   outrank :root :where(.is-layout-flow) > * at (0,1,0). */
.ohp-layout > .ohp-rail-side,
.ohp-layout > .ohp-article,
.ohp-layout > .ohp-rail-end{ margin-block: 0 }

/* ---- share row in the rail ---- */
.ohp-share__label{
	margin: 0 0 .55rem;
	font-size: .62rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--evergreen-muted);
}
.ohp-share__row{ display: flex; gap: .45rem; flex-wrap: wrap }
.ohp-share__link{
	display: grid; place-items: center;
	inline-size: 34px; block-size: 34px; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--stone-deep);
	color: var(--wp--preset--color--evergreen-muted);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ohp-share__link:hover{
	background: var(--wp--preset--color--evergreen);
	border-color: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
}
.ohp-share__link:focus-visible{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px }

/* ---- related, on its own dark band ---- */
.ohp-relatedband,
main > .ohp-relatedband{
	background: var(--wp--preset--color--evergreen-deep);
	padding-block: var(--wp--preset--spacing--70);
	margin-block-start: 0;
}
.ohp-relatedband .ohp-related{ margin-top: 0 }
.ohp-relatedband .ohp-related h2{ color: var(--wp--preset--color--ivory) }
.ohp-relatedband .ohp-rcard{ color: var(--wp--preset--color--ivory) }
.ohp-relatedband .ohp-rcard:hover b{ color: var(--wp--preset--color--gold) }
.ohp-relatedband .ohp-rcard__exc{
	color: color-mix(in srgb, var(--wp--preset--color--stone) 78%, transparent);
}
.ohp-relatedband .ohp-rcard__more{
	color: color-mix(in srgb, var(--wp--preset--color--stone) 82%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--stone) 34%, transparent);
}
.ohp-relatedband .ohp-rcard:hover .ohp-rcard__more{
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--evergreen-deep);
}

@media (max-width: 47.99rem){
	.ohp-posthero{ padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) }
	main > .ohp-layout{ margin-block-start: var(--wp--preset--spacing--50) }
	.ohp-relatedband .ohp-related__grid{ grid-template-columns: 1fr }
}

/* ---- header search: pill input with the icon set inside it ---- */
.ohp-search{
	display: flex; align-items: center; gap: .5rem;
	inline-size: 100%; max-inline-size: 15rem;
	padding: .5rem .9rem;
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--ivory) 70%, #fff);
	transition: border-color .15s ease, background .15s ease;
}
.ohp-search:focus-within{
	border-color: var(--wp--preset--color--evergreen);
	background: #fff;
}
.ohp-search__icon{
	display: grid; place-items: center; flex: none;
	color: var(--wp--preset--color--evergreen-muted);
}
.ohp-search input{
	flex: 1 1 auto; min-inline-size: 0;
	border: 0; background: none; padding: 0;
	color: var(--wp--preset--color--evergreen);
	font-family: inherit; font-size: .88rem;
}
.ohp-search input::placeholder{ color: var(--wp--preset--color--evergreen-muted); opacity: .85 }
.ohp-search input:focus{ outline: none }
.ohp-search:focus-within .ohp-search__icon{ color: var(--wp--preset--color--evergreen) }
/* the search field is the focus target, so the ring belongs on the pill */
.ohp-search:focus-within{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px }
.ohp-search input::-webkit-search-cancel-button{ cursor: pointer }

/* ---- author masthead: portrait beside the name, not a one-line archive title ---- */
.ohp-posthero--author{ padding-block: var(--wp--preset--spacing--60) }
.ohp-authorhero{
	max-inline-size: 62rem; margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid; grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center; text-align: start;
}
.ohp-authorhero__media{ inline-size: 180px }
.ohp-authorhero__img{
	inline-size: 180px; block-size: 180px;
	border-radius: 50%; object-fit: cover; display: block;
	border: 3px solid color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent);
}
.ohp-authorhero__name{
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3rem);
	line-height: 1.05; letter-spacing: -.03em; font-weight: 800;
	color: var(--wp--preset--color--ivory);
}
.ohp-authorhero__role{
	margin: .45rem 0 0;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 82%, transparent);
}
.ohp-authorhero__bio{
	margin-block-start: var(--wp--preset--spacing--40);
	max-inline-size: 52ch;
}
.ohp-authorhero__bio p{
	margin: 0; font-size: 1rem; line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 90%, transparent);
}
.ohp-authorhero__facts{
	display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: .84rem;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 85%, transparent);
}
.ohp-authorhero__facts span,
.ohp-authorhero__link{ display: inline-flex; align-items: center; gap: .4rem }
.ohp-authorhero__link{ color: var(--wp--preset--color--gold); text-decoration: none; font-weight: 600 }
.ohp-authorhero__link:hover{ color: var(--wp--preset--color--ivory) }
@media (max-width: 47.99rem){
	.ohp-authorhero{
		grid-template-columns: 1fr; justify-items: center; text-align: center;
		gap: var(--wp--preset--spacing--40);
	}
	.ohp-authorhero__media, .ohp-authorhero__img{ inline-size: 120px; block-size: 120px }
	.ohp-authorhero__bio{ margin-inline: auto }
	.ohp-authorhero__facts{ justify-content: center }
}

/* ---- static pages: one readable column, no rails ---- */
.ohp-posthero--page{ padding-block: var(--wp--preset--spacing--60) }
main > .ohp-pagewrap{ margin-block-start: var(--wp--preset--spacing--60) }
/* auto margins rather than a grid: justify-items:center does not centre an item
   that also declares inline-size:100%, and the column sat flush right. */
.ohp-pagewrap{ display: block }
.ohp-page{ margin-inline: auto; max-inline-size: 48rem }
.ohp-page .entry-content > :is(p, ul, ol, blockquote){ font-size: 1.1875rem; line-height: 1.72 }
.ohp-page .entry-content > :is(p, ul, ol, blockquote) + :is(p, ul, ol, blockquote){ margin-block-start: 1.75rem }

/* ---- story pages: lead paragraph, pull quote, facts strip ---- */
.ohp-page .entry-content > .ohp-lead{
	font-size: 1.32rem; line-height: 1.55;
	color: var(--wp--preset--color--evergreen);
	margin-block-end: var(--wp--preset--spacing--50);
}
.ohp-pullquote{
	margin: var(--wp--preset--spacing--60) 0;
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-inline-start: 3px solid var(--wp--preset--color--gold);
}
.ohp-pullquote p{
	margin: 0;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	line-height: 1.3; letter-spacing: -.015em; font-weight: 700;
	color: var(--wp--preset--color--evergreen);
	text-wrap: balance;
}
.ohp-pullquote cite{
	display: block; margin-block-start: .7rem;
	font-style: normal; font-size: .72rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--gold-text);
}
.ohp-facts{
	display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--50);
	border-block: 1px solid var(--wp--preset--color--stone-deep);
}
.ohp-facts__item{ display: grid; gap: .2rem }
.ohp-facts__item b{
	font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1;
	letter-spacing: -.03em; font-weight: 800;
	color: var(--wp--preset--color--evergreen);
	font-variant-numeric: tabular-nums;
}
.ohp-facts__item span{
	font-size: .74rem; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--wp--preset--color--evergreen-muted);
}
.ohp-page .entry-content > .ohp-note{
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--stone-deep);
	font-size: .92rem; color: var(--wp--preset--color--evergreen-muted);
}
.ohp-page .entry-content > h3{ margin-block-start: var(--wp--preset--spacing--50) }

/* ---- Contact Form 7, restyled to the theme ---- */
.wpcf7 form{ margin-block-start: var(--wp--preset--spacing--50) }
.wpcf7 p{ margin-block-end: var(--wp--preset--spacing--40) }
.wpcf7 label{
	display: block; font-size: .78rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--evergreen-muted);
}
.wpcf7 :is(input[type=text], input[type=email], textarea, select){
	inline-size: 100%; margin-block-start: .5rem;
	padding: .75rem 1rem;
	border: 1px solid var(--wp--preset--color--stone-deep);
	border-radius: 12px;
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--evergreen);
	font-family: inherit; font-size: 1rem; line-height: 1.5;
}
.wpcf7 textarea{ resize: vertical; min-block-size: 9rem }
.wpcf7 :is(input, textarea, select):focus-visible{
	outline: 2px solid var(--wp--preset--color--gold); outline-offset: 1px;
	border-color: var(--wp--preset--color--evergreen);
}
.wpcf7 input[type=submit]{
	inline-size: auto; margin-block-start: .25rem;
	padding: .85rem 1.9rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--terracotta-deep);
	color: var(--wp--preset--color--ivory);
	font-family: inherit; font-size: .95rem; font-weight: 700; letter-spacing: .03em;
}
.wpcf7 input[type=submit]:hover{ background: var(--wp--preset--color--terracotta-hover) }
.wpcf7-not-valid-tip{ color: var(--wp--preset--color--error); font-size: .85rem; margin-block-start: .35rem }
.wpcf7 .wpcf7-response-output{
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: .9rem 1.1rem; border-radius: 12px;
	border: 1px solid var(--wp--preset--color--stone-deep);
	font-size: .95rem;
}
.wpcf7 form.sent .wpcf7-response-output{
	border-color: var(--wp--preset--color--success);
	color: var(--wp--preset--color--success);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{
	border-color: var(--wp--preset--color--error);
	color: var(--wp--preset--color--error);
}

/* ---- full-bleed bands, the rhythm device from the Healthline Media reference ---- */
.ohp-band,
main > .ohp-band{
	padding-block: var(--wp--preset--spacing--70);
	margin-block-start: 0;
}
.ohp-band--dark{
	background: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
}
.ohp-band__eyebrow{
	margin: 0 0 .5rem;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .17em; text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.ohp-band__title{
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	line-height: 1.06; letter-spacing: -.028em; font-weight: 800;
	text-wrap: balance;
}
.ohp-band--dark .ohp-band__title{ color: var(--wp--preset--color--ivory) }

.ohp-topicbtns{ display: flex; flex-wrap: wrap; gap: .6rem }
.ohp-topicbtn{
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .7rem 1.25rem; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 34%, transparent);
	color: var(--wp--preset--color--ivory);
	text-decoration: none; font-size: .9rem; font-weight: 600;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ohp-topicbtn span{
	font-size: .72rem; font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 70%, transparent);
}
.ohp-topicbtn:hover{
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--evergreen-deep);
}
.ohp-topicbtn:hover span{ color: var(--wp--preset--color--evergreen-deep) }
.ohp-topicbtn:focus-visible{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px }

.ohp-latestrow{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
.ohp-latestrow .ohp-rcard{ grid-template-columns: 1fr; gap: .85rem }
.ohp-latestrow .ohp-rcard__media img{ aspect-ratio: 16/10 }
@media (max-width: 61.99rem){ .ohp-latestrow{ grid-template-columns: 1fr } }

/* ---- classic-editor content: anything pasted as plain HTML must land in-design ---- */
.ohp-article .entry-content table.ohp-table,
.ohp-page .entry-content table.ohp-table{
	display: block; max-inline-size: 100%; overflow-x: auto;
	border-collapse: collapse; font-size: .95rem;
	-webkit-overflow-scrolling: touch;
}
.ohp-article .entry-content :is(th, td),
.ohp-page .entry-content :is(th, td){
	border: 1px solid var(--wp--preset--color--stone-deep);
	padding: .65rem .85rem; text-align: start; vertical-align: top;
}
.ohp-article .entry-content th,
.ohp-page .entry-content th{
	background: color-mix(in srgb, var(--wp--preset--color--stone) 45%, transparent);
	font-weight: 700;
}
.ohp-article .entry-content :is(img, iframe, video, embed),
.ohp-page .entry-content :is(img, iframe, video, embed){
	max-inline-size: 100%; block-size: auto; border-radius: 8px;
}
.ohp-article .entry-content iframe,
.ohp-page .entry-content iframe{ aspect-ratio: 16/9; inline-size: 100% }
.ohp-article .entry-content blockquote,
.ohp-page .entry-content blockquote{
	margin-inline: 0;
	padding: .4rem 0 .4rem var(--wp--preset--spacing--40);
	border-inline-start: 3px solid var(--wp--preset--color--gold);
	font-style: normal;
}
.ohp-article .entry-content :is(ul, ol),
.ohp-page .entry-content :is(ul, ol){ padding-inline-start: 1.4rem }
.ohp-article .entry-content li,
.ohp-page .entry-content li{ margin-block-end: .5rem }
.ohp-article .entry-content hr,
.ohp-page .entry-content hr{
	border: 0; border-block-start: 1px solid var(--wp--preset--color--stone-deep);
	margin-block: var(--wp--preset--spacing--60);
}

/* ---- 404 ---- */
.ohp-posthero--404{ padding-block: var(--wp--preset--spacing--70) }
.ohp-404{ max-inline-size: 44rem; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); text-align: center }
.ohp-404__title{
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.08; letter-spacing: -.028em; font-weight: 800;
	color: var(--wp--preset--color--ivory); text-wrap: balance;
}
.ohp-404__lead{
	margin: 0 auto var(--wp--preset--spacing--50);
	max-inline-size: 42ch; font-size: 1.02rem; line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 88%, transparent);
}
/* the header search pill, re-used here on the dark band */
.ohp-404 .ohp-search{
	margin-inline: auto; max-inline-size: 24rem;
	background: color-mix(in srgb, var(--wp--preset--color--ivory) 12%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--stone) 34%, transparent);
}
.ohp-404 .ohp-search input{ color: var(--wp--preset--color--ivory) }
.ohp-404 .ohp-search input::placeholder{ color: color-mix(in srgb, var(--wp--preset--color--stone) 65%, transparent) }
.ohp-404 .ohp-search__icon{ color: color-mix(in srgb, var(--wp--preset--color--stone) 75%, transparent) }
.ohp-404 .ohp-search:focus-within{ background: color-mix(in srgb, var(--wp--preset--color--ivory) 18%, transparent) }

/* ---- newsletter: honeypot + feedback ---- */
.ohp-hp{ position:absolute; left:-9999px; display:block; width:1px; height:1px; overflow:hidden }
.ohp-nl-msg{
	margin: .7rem 0 0; font-size: .85rem; line-height: 1.45;
	padding: .55rem .8rem; border-radius: 10px;
}
.ohp-nl-msg--ok{ background: rgba(43,99,64,.12); color: var(--wp--preset--color--success) }
.ohp-nl-msg--bad{ background: rgba(155,44,31,.12); color: var(--wp--preset--color--error) }
.ohp-cta .ohp-nl-msg{ max-inline-size: 30rem; margin-inline: auto }
.ohp-cta .ohp-nl-msg--ok{ background: color-mix(in srgb, var(--wp--preset--color--ivory) 14%, transparent); color: var(--wp--preset--color--ivory) }
.ohp-cta .ohp-nl-msg--bad{ background: color-mix(in srgb, var(--wp--preset--color--terracotta) 26%, transparent); color: var(--wp--preset--color--ivory) }

/* ---- stand-in when a post has no featured image ---- */
.ohp-thumbfall{
	display: grid; place-items: center;
	aspect-ratio: 16/10; inline-size: 100%;
	border-radius: 8px;
	background:
		radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--wp--preset--color--gold) 22%, transparent), transparent 60%),
		var(--wp--preset--color--evergreen);
	overflow: hidden;
}
.ohp-thumbfall span{
	font-size: .72rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 78%, transparent);
	padding-inline: 1rem; text-align: center;
}
.ohp-ov .ohp-thumbfall, .ohp-rcard__media .ohp-thumbfall{ aspect-ratio: 4/3 }
.ohp-li .ohp-thumbfall{ aspect-ratio: 1; border-radius: 6px }
.ohp-li .ohp-thumbfall span{ font-size: .5rem; letter-spacing: .1em }

/* =========================================================================
   ARCHIVES - category, tag, author, date and search.
   Same masthead band and two-column body as the rest of the site, and the
   same card atoms as the homepage, so an archive never reads as a stock
   Query Loop bolted onto the theme.
   ========================================================================= */
.ohp-posthero--archive{ padding-block: var(--wp--preset--spacing--60) }
.ohp-posthero__standfirst p{ margin: 0 }
.ohp-posthero__standfirst p + p{ margin-block-start: .6rem }

.ohp-archive__grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
.ohp-archive__adslot{ grid-column: 1 / -1 }
.ohp-archive__adslot .ohp-ad{ margin-block: 0 }
.ohp-archive__empty{
	padding: var(--wp--preset--spacing--60) 0;
	color: var(--wp--preset--color--evergreen-muted);
}

/* ---- pagination ---- */
.ohp-pager{
	display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
	margin-block-start: var(--ohp-gap);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--stone-deep);
}
.ohp-pager .page-numbers{
	display: inline-flex; align-items: center; gap: .35rem;
	min-inline-size: 2.4rem; block-size: 2.4rem;
	padding-inline: .7rem;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--stone-deep);
	color: var(--wp--preset--color--evergreen);
	text-decoration: none;
	font-size: .88rem; font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ohp-pager .page-numbers:hover{
	background: var(--wp--preset--color--evergreen);
	border-color: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
}
.ohp-pager .page-numbers.current{
	background: var(--wp--preset--color--evergreen);
	border-color: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
}
.ohp-pager .page-numbers.dots{ border-color: transparent; min-inline-size: 1.4rem; padding-inline: .2rem }
.ohp-pager .page-numbers.dots:hover{ background: none; color: inherit }
.ohp-pager .prev svg{ transform: rotate(180deg) }
.ohp-pager .page-numbers:focus-visible{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px }

@media (max-width: 61.99rem){
	.ohp-archive__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 35.99rem){
	.ohp-archive__grid{ grid-template-columns: 1fr }
}

/* =========================================================================
   FOOTER + CTA
   The CTA card floats on the ivory ground; the footer sits behind it in the
   deeper evergreen, so two dark bands read as layered rather than merged.
   ========================================================================= */
.ohp-cta-slot{ margin-block-start: var(--ohp-gap) }
.ohp-cta{
	background: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
	border-radius: 18px;
	padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
	text-align: center;
	position: relative;
	z-index: 1;
}
/* Overlap the footer so the card reads as sitting on top of it.
   Needs (0,3,0) to outrank core's
   :root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }  (0,2,0). */
.ohp-footer-wrap .ohp-cta-slot > .ohp-cta{
	margin-block-end: calc(-1 * clamp(2rem, 4vw, 3.25rem));
}
.ohp-cta__inner{ max-inline-size: 46rem; margin-inline: auto }
.ohp-cta__eyebrow{
	margin: 0 0 .6rem;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.ohp-cta__title{
	margin: 0 0 .6rem;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	line-height: 1.12; letter-spacing: -.02em;
	color: var(--wp--preset--color--ivory);
	text-wrap: balance;
}
.ohp-cta__blurb{
	margin: 0 auto var(--wp--preset--spacing--40);
	max-inline-size: 46ch;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 88%, transparent);
	font-size: .95rem; line-height: 1.55;
}
.ohp-cta__form{
	display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
	max-inline-size: 30rem; margin-inline: auto;
}
.ohp-cta__form input{
	flex: 1 1 15rem;
	padding: .8rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 34%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--ivory) 9%, transparent);
	color: var(--wp--preset--color--ivory);
	font-family: inherit; font-size: .95rem;
}
.ohp-cta__form input::placeholder{ color: color-mix(in srgb, var(--wp--preset--color--stone) 62%, transparent) }
.ohp-cta__form input:focus-visible{ outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px }
.ohp-cta__form button{
	flex: 0 0 auto;
	padding: .8rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--terracotta-deep);
	color: var(--wp--preset--color--ivory);
	font-family: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .02em;
}
.ohp-cta__form button:hover{ background: var(--wp--preset--color--terracotta-hover) }
.ohp-cta__note{
	margin: .85rem 0 0;
	font-size: .72rem;
	color: color-mix(in srgb, var(--wp--preset--color--stone) 62%, transparent);
}

/* ---- footer ---- */
.ohp-footer{
	background: var(--wp--preset--color--evergreen-deep);
	color: var(--wp--preset--color--ivory);
	padding-block: calc(clamp(2rem, 4vw, 3.25rem) + var(--wp--preset--spacing--60)) var(--wp--preset--spacing--50);
	margin-block-start: 0;
}
.ohp-footer__top{
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
	gap: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--50);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 20%, transparent);
}
@media (max-width: 47.99rem){ .ohp-footer__top{ grid-template-columns: 1fr } }
.ohp-footer__blurb{ max-inline-size: 36ch; margin-block: .9rem 0; line-height: 1.55 }
/* Two labelled groups side by side. The topics list uses CSS multi-column so it
   reads DOWN each column; the previous grid flowed row-major, so the eye tracked
   across (Nutrition, Conditions, Fitness, Women's Health) which is not how anyone
   reads a link list, and 193px tracks holding ~110px labels left it sprawling. */
.ohp-footer__links{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	align-items: start;
}
.ohp-footer__title{
	margin: 0 0 .85rem;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
/* Core emits :root :where(.is-layout-flow) > *{margin-block-start:24px} at (0,1,0),
   which skips :first-child — so as grid items the columns after the first sat 24px
   lower than column one. (0,2,0) to outrank it. */
.ohp-footer__links > .ohp-footer__col{ margin-block: 0 }
.ohp-footer__links ul{ margin: 0; padding: 0; list-style: none }
.ohp-footer__links li{ break-inside: avoid; margin-block-end: .55rem }
.ohp-footer__links li:last-child{ margin-block-end: 0 }
@media (max-width: 61.99rem){
	.ohp-footer__links{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 35.99rem){
	.ohp-footer__links{ grid-template-columns: 1fr }
}
.ohp-footer__links a{
	color: color-mix(in srgb, var(--wp--preset--color--stone) 90%, transparent);
	text-decoration: none; font-size: .9rem;
}
.ohp-footer__links a:hover{ color: var(--wp--preset--color--gold) }

.ohp-footer__bottom{
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: .75rem 1.5rem;
	padding-block-start: var(--wp--preset--spacing--40);
}
.ohp-footer__copy{ margin: 0; max-inline-size: 62ch; line-height: 1.5 }
.ohp-footer__legal{ display: flex; flex-wrap: wrap; gap: 1.25rem }
.ohp-footer__legal a{
	color: color-mix(in srgb, var(--wp--preset--color--stone) 78%, transparent);
	font-size: .8rem; text-decoration: underline; text-underline-offset: .16em;
}
.ohp-footer__legal a:hover{ color: var(--wp--preset--color--gold) }

/* =========================================================================
   SOCIAL LINKS
   ========================================================================= */
.ohp-social{ margin-block-start: var(--wp--preset--spacing--40) }
.ohp-social__label{
	margin: 0 0 .55rem;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.ohp-social__row{ display: flex; flex-wrap: wrap; gap: .5rem }
.ohp-social__link{
	inline-size: 2.35rem; block-size: 2.35rem;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 32%, transparent);
	color: var(--wp--preset--color--stone);
	text-decoration: none;
	transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.ohp-social__link:hover{
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: #29402E;
	transform: translateY(-2px);
}
.ohp-social__link:focus-visible{
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}
.ohp-social__icon{ display: block }
@media (prefers-reduced-motion: reduce){ .ohp-social__link:hover{ transform: none } }

/* on a light ground (if reused outside the footer) */
.ohp-section .ohp-social__link{
	border-color: var(--wp--preset--color--stone-deep);
	color: var(--wp--preset--color--evergreen);
}

/* Responsive header. Must stay last: media queries add no specificity, so these
   would otherwise lose to the base .ohp-logo rule declared further down. */
@media (max-width: 61.99rem){
	/* The bar is a grid, so the old flex-direction here did nothing and the three
	   columns kept fighting for 375px - the search column collapsed to 0 and the
	   page scrolled sideways. Two rows instead: brand + search, then the nav. */
	.ohp-header__bar{
		grid-template-columns: auto 1fr;
		grid-template-areas: "brand end" "nav nav";
		align-items: center;
		gap: .3rem .55rem;
		padding-block: .5rem;
	}
	.ohp-header__brand{ grid-area: brand }
	.ohp-header__end{ grid-area: end }
	/* scoped to the header: the footer logo has its own size */
	.ohp-header .ohp-logo, .ohp-header.is-stuck .ohp-logo{ inline-size: 52px }
	.ohp-header__nav .ohp-nav{ inline-size: 100% }

	/* One swipeable line instead of wrapping. Wrapped, seven items ran to three
	   rows on a phone and pushed the header to 184px — a quarter of the screen. */
	.ohp-header__nav{
		grid-area: nav;
		justify-content: flex-start;
		inline-size: 100%;
		margin-inline: calc(-1 * var(--wp--preset--spacing--30));
	}
	.ohp-nav__list{
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		gap: 1.3rem;
		padding-inline: var(--wp--preset--spacing--30);
		-webkit-overflow-scrolling: touch;
	}
	.ohp-nav__list::-webkit-scrollbar{ display: none }
	.ohp-nav__list li{ flex: 0 0 auto }
}

/* Phone: the trailing responsive-header block above sets 232px, so this has to
   come after it — media queries carry no specificity of their own. */
@media (max-width: 35.99rem){
	.ohp-header .ohp-logo, .ohp-header.is-stuck .ohp-logo{ inline-size: 56px }
}

/* =========================================================================
   ARTICLE + PAGE CONTENT TYPOGRAPHY
so rendering is unchanged.
   ========================================================================= */
.ohp-article .entry-content,
.ohp-page .entry-content{
	font-family: var(--wp--preset--font-family--brand);
	color: var(--wp--preset--color--evergreen);
}
.ohp-article .entry-content :is(h1,h2,h3,h4,h5,h6),
.ohp-page .entry-content :is(h1,h2,h3,h4,h5,h6){
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--wp--preset--color--evergreen);
}
.ohp-article .entry-content > h2, .ohp-page .entry-content > h2{
	font-size: var(--wp--preset--font-size--x-large);
	margin-block: 64px 19.2px;
}
.ohp-article .entry-content > h3, .ohp-page .entry-content > h3{
	font-size: var(--wp--preset--font-size--large);
	margin-block: 44px 13.2px;
}
.ohp-article .entry-content > h4, .ohp-page .entry-content > h4{
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
	margin-block: 32px 12px;
}
.ohp-article .entry-content > :is(h1,h2,h3):first-child,
.ohp-page .entry-content > :is(h1,h2,h3):first-child{ margin-block-start: 0 }
.ohp-article .entry-content li, .ohp-page .entry-content li{ margin-block-start: .4rem }
.ohp-article .entry-content thead th, .ohp-page .entry-content thead th{
	background: var(--wp--preset--color--evergreen);
	color: var(--wp--preset--color--ivory);
	text-align: start; font-weight: 600;
}
.ohp-article .entry-content tbody tr:nth-child(even),
.ohp-page .entry-content tbody tr:nth-child(even){ background: var(--wp--preset--color--stone) }
.ohp-article .entry-content :is(.wp-caption-text, figcaption),
.ohp-page .entry-content :is(.wp-caption-text, figcaption){
	color: var(--wp--preset--color--evergreen-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	margin-block-start: .5rem;
}


/* ==========================================================================
   ARTICLE BLOCKS
   Five structural devices adapted from the SPay template. Structure borrowed,
   styling entirely house palette - the dark/teal/mono treatment does not
   transfer to editorial health content.
   ========================================================================== */

/* --- 1. article spine: the piece's own h2s as anchor chips ---------------- */
.ohp-spine{
	display: flex;
	align-items: center;
	/* the hero centres its children with text-align, which a flex row ignores */
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block: 1.25rem 0;
}
.ohp-spine__step{
	display: inline-flex;
	align-items: baseline;
	gap: .55rem;
	padding: .5rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ivory) 34%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--ivory) 10%, transparent);
	color: var(--wp--preset--color--ivory);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease, border-color .16s ease;
}
.ohp-spine__step b{
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}
.ohp-spine__step:hover,
.ohp-spine__step:focus-visible{
	background: color-mix(in srgb, var(--wp--preset--color--ivory) 20%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--ivory) 55%, transparent);
}
.ohp-spine__arrow{
	color: color-mix(in srgb, var(--wp--preset--color--ivory) 45%, transparent);
	font-size: .8125rem;
}
@media (max-width: 600px){
	.ohp-spine{ gap: .375rem; }
	.ohp-spine__arrow{ display: none; }
	.ohp-spine__step{ padding: .4375rem .8125rem; font-size: .75rem; }
}

/* --- 2. callout: safety + evidence ---------------------------------------- */
.ohp-article .ohp-note,
.ohp-page .entry-content .ohp-note{
	display: flex;
	gap: .9375rem;
	margin-block: 2rem;
	padding: 1.25rem 1.375rem;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--evergreen) 14%, transparent);
	border-left: 4px solid var(--wp--preset--color--terracotta);
	border-radius: 0 12px 12px 0;
}
.ohp-note svg{
	inline-size: 22px;
	block-size: 22px;
	flex: 0 0 22px;
	margin-block-start: 2px;
	color: var(--wp--preset--color--terracotta-deep);
}
.ohp-note__body > :first-child{ margin-block-start: 0; }
.ohp-note__body > :last-child{ margin-block-end: 0; }
.ohp-note__body{
	color: var(--wp--preset--color--evergreen-muted);
	font-size: 1rem;
	line-height: 1.62;
}
.ohp-note__body b{ color: var(--wp--preset--color--evergreen-deep); font-weight: 800; }
/* Modifiers must match the base rule's specificity (0,2,0) or the shared
   .ohp-note declarations win and the variant silently renders terracotta. */
.ohp-article .ohp-note--evidence,
.ohp-page .entry-content .ohp-note--evidence{
	border-left-color: var(--wp--preset--color--gold);
}
.ohp-article .ohp-note--evidence svg,
.ohp-page .entry-content .ohp-note--evidence svg{
	color: var(--wp--preset--color--gold-text);
}

/* --- 3. at a glance -------------------------------------------------------- */
.ohp-glance{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .75rem;
	margin-block: 2rem 1rem;
}
.ohp-glance__i{
	padding: .9375rem 1rem;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--evergreen) 14%, transparent);
	border-radius: 12px;
}
.ohp-article .ohp-glance__n{
	margin: 0;
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--evergreen-deep);
	font-variant-numeric: tabular-nums;
}
.ohp-glance__suf{ font-size: .625em; font-weight: 700; }
.ohp-article .ohp-glance__u{
	margin: .3125rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-text);
}
.ohp-article .ohp-glance__c{
	margin: .4375rem 0 0;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--evergreen-muted);
}
.ohp-article .ohp-glance__src{
	margin-block: 0 2rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--evergreen-muted);
}

/* --- 4. read next: mid-article internal links ------------------------------ */
.ohp-readnext{
	margin-block: 2.5rem;
	padding: 1.375rem;
	background: linear-gradient(168deg,
		color-mix(in srgb, var(--wp--preset--color--stone) 55%, #fff) 0%,
		color-mix(in srgb, var(--wp--preset--color--stone) 92%, #fff) 100%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--evergreen) 14%, transparent);
	border-radius: 16px;
}
.ohp-readnext__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-block-end: .9375rem;
}
.ohp-article .ohp-readnext__title{
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--wp--preset--color--evergreen-deep);
}
.ohp-readnext__all{
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .65625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-text);
	text-decoration: none;
	white-space: nowrap;
}
.ohp-readnext__all:hover{ text-decoration: underline; }
.ohp-readnext__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .6875rem;
}
.ohp-lcard{
	display: block;
	padding: .9375rem;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--evergreen) 13%, transparent);
	border-radius: 11px;
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease;
}
.ohp-lcard:hover{
	border-color: var(--wp--preset--color--terracotta);
	transform: translateY(-2px);
}
.ohp-lcard__tag{
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .625rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-text);
}
.ohp-lcard__name{
	display: block;
	margin-block: .4375rem .3125rem;
	font-size: .90625rem;
	font-weight: 700;
	line-height: 1.32;
	color: var(--wp--preset--color--evergreen-deep);
}
.ohp-lcard__desc{
	display: block;
	font-size: .78125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--evergreen-muted);
}

/* --- 5. steps: a sequence where order carries meaning ---------------------- */
.ohp-article ol.ohp-steps{
	list-style: none;
	counter-reset: ohp-step;
	margin-block: 2rem;
	padding: 0;
}
.ohp-article ol.ohp-steps li{
	position: relative;
	counter-increment: ohp-step;
	margin-inline-start: 13px;
	padding: 0 0 1.375rem 2.625rem;
	border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--evergreen) 16%, transparent);
}
.ohp-article ol.ohp-steps li::before{
	content: counter(ohp-step);
	position: absolute;
	inset-inline-start: -14px;
	inset-block-start: -3px;
	inline-size: 28px;
	block-size: 28px;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--terracotta);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 700;
	color: var(--wp--preset--color--terracotta-text);
}
.ohp-article ol.ohp-steps li:last-child{
	border-inline-start-color: transparent;
	padding-block-end: 0;
}
.ohp-steps__t{
	display: block;
	margin-block-end: .1875rem;
	font-size: .96875rem;
	font-weight: 800;
	color: var(--wp--preset--color--evergreen-deep);
}
.ohp-steps__d{
	display: block;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--evergreen-muted);
}