/*
Theme Name: Old House
Theme URI: https://oldhousepublishing.com
Author: Old House Publishing
Description: A block theme for Old House Publishing. Cream page between black bands, covers doing the work.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Version: 0.58.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oldhouse
Tags: full-site-editing, block-patterns, publishing
*/

/* --- Dark bands: header and footer --- */

.ohp-dark a { color: var(--wp--preset--color--base); text-decoration: none; }
.ohp-dark a:hover, .ohp-dark a:focus { color: var(--wp--preset--color--gold); }

.ohp-dark .ohp-legal {
	color: rgba(250, 246, 239, 0.45);
	max-width: 62ch;
	line-height: 1.7;
}

.ohp-dark .wp-block-site-logo img { display: block; }

/* --- Book meta --- */

.ohp-meta {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ohp-meta a {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid rgba(138, 128, 120, 0.5);
	padding-bottom: 1px;
}

.ohp-meta a:hover, .ohp-meta a:focus {
	color: var(--wp--preset--color--oxblood);
	border-bottom-color: var(--wp--preset--color--oxblood);
}

.ohp-cover img {
	border: 1px solid rgba(26, 23, 20, 0.16);
	display: block;
	width: 100%;
	height: auto;
}

/* --- Buy buttons --- */

.ohp-buy {
	margin: 2.5rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.ohp-buy__status {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
	margin: 0 0 1.5rem;
}

.ohp-buy__group { margin-bottom: 1.5rem; }

.ohp-buy__label {
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.7rem;
	font-weight: 500;
}

.ohp-buy__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Solid rather than outlined — an outline on cream disappears. */
.ohp-buy__link {
	display: inline-block;
	padding: 0.85rem 1.5rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--contrast) !important;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ohp-buy__link:hover, .ohp-buy__link:focus {
	background: var(--wp--preset--color--oxblood);
	border-color: var(--wp--preset--color--oxblood) !important;
}

/* When a book has its own CTA colour (matching its hero button), keep
   that colour on hover rather than switching to the site default oxblood
   — a brightness bump reads as "same button, pressed" instead of "this
   button changed colour". */
.ohp-buy__link[data-solid]:hover,
.ohp-buy__link[data-solid]:focus {
	background: inherit;
	border-color: inherit !important;
	filter: brightness( 1.15 );
}

.ohp-buy__more { margin: 1.25rem 0 0; font-size: 0.8rem; }

.ohp-buy__more a {
	color: var(--wp--preset--color--oxblood);
	letter-spacing: 0.08em;
	text-underline-offset: 3px;
}

.ohp-dark .ohp-buy, .has-ink-background-color .ohp-buy {
	border-top-color: rgba(250, 246, 239, 0.35);
}

.ohp-dark .ohp-buy__link, .has-ink-background-color .ohp-buy__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--base) !important;
}

/* --- Depth --- */

.wp-block-post-content p {
	color: rgba(26, 23, 20, 0.86);
	max-width: 64ch;
}

.wp-block-post-title { line-height: 1.03; }

/* --- Hero --- */

.ohp-hero {
	position: relative;
	background: var(--wp--preset--color--ink);
	overflow: hidden;
	isolation: isolate;

	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--60) !important;
}

html, body { overflow-x: hidden; }

.wp-block-post-content > .ohp-hero:first-child { margin-top: 0 !important; }

.ohp-hero__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ohp-hero__track::-webkit-scrollbar { display: none; }

/* Grid, not flex — a flex child with a background can be pushed out of
   normal flow by intrinsic image sizing. Grid tracks are fixed regardless
   of content size, which is what was breaking on real image dimensions. */
.ohp-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 48% 1fr;
	align-items: stretch;
	min-height: 460px;
	background: var(--wp--preset--color--ink);
}

.ohp-hero__media {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	background-image: var(--ohp-hero-image);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--wp--preset--color--ink);
	min-height: 460px;
}

.ohp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba(11,11,12,0) 55%, rgba(11,11,12,0.75) 82%, rgba(11,11,12,1) 100% ) !important;
}

.ohp-hero__body {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: calc( var(--wp--preset--spacing--50) + 3.5rem ) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--base);
	max-width: 46ch;
	margin-left: clamp( 1.5rem, 5vw, 4rem );
	margin-right: auto;
	background: transparent;
}

.ohp-hero__super {
	font-size: 0.95rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base, #FAF6EF) !important;
	margin: 0 0 1rem;
}

.ohp-hero__title {
	font-size: clamp( 2.2rem, 4.2vw, 3.8rem );
	line-height: 1.03;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--base, #FAF6EF) !important;
}

.ohp-hero__sub {
	font-size: clamp( 1.05rem, 1.6vw, 1.3rem );
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--base, #FAF6EF) !important;
	margin: 0 0 1.75rem;
}

.ohp-hero__cta {
	align-self: center;
	display: inline-block;
	padding: 0.95rem 2rem;
	border: 1px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.ohp-hero__cta:hover,
.ohp-hero__cta:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.ohp-hero__cta[data-solid] { border-width: 1px; }

.ohp-hero__cta[data-solid]:hover,
.ohp-hero__cta[data-solid]:focus {
	background: inherit;
	filter: brightness( 1.15 );
}

.ohp-hero__controls {
	position: absolute;
	bottom: 1.25rem;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}

.ohp-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1px solid rgba(250, 246, 239, 0.6);
	background: transparent;
	cursor: pointer;
}

.ohp-hero__dot[aria-current="true"] { background: var(--wp--preset--color--base); }

.ohp-hero__pause {
	position: absolute;
	right: 1.5rem;
	background: transparent;
	border: 1px solid rgba(250, 246, 239, 0.4);
	color: rgba(250, 246, 239, 0.8);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
	margin-left: 0.5rem;
}

.ohp-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 4;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba( 11, 11, 12, 0.5 );
	color: var( --wp--preset--color--base );
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ohp-hero__arrow:hover,
.ohp-hero__arrow:focus {
	background: rgba( 11, 11, 12, 0.8 );
}

.ohp-hero__arrow--prev { left: 1.25rem; }
.ohp-hero__arrow--next { right: 1.25rem; }

/* Mobile: match the Hammer pattern — full-height art with the title and
   button overlaid on top at the bottom, not stacked in a separate box
   below it. One layer, not two. */
@media ( max-width: 860px ) and ( orientation: portrait ) {
	.ohp-hero__slide {
		display: block;
		position: relative;
		min-height: 0;
		height: 88vh;
		max-height: 760px;
	}

	.ohp-hero__media {
		position: absolute;
		inset: 0;
		height: 100%;
		min-height: 0;
		background-size: cover;
	}

	/* Scrim covers the full frame, dark at the very top for the nav to sit
	   on, clear through the middle, dark again at the bottom for the type. */
	.ohp-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba(11,11,12,0.55) 0%,
			rgba(11,11,12,0) 18%,
			rgba(11,11,12,0) 46%,
			rgba(11,11,12,0.92) 78%,
			rgba(11,11,12,1) 100%
		) !important;
	}

	.ohp-hero__body {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		max-width: none;
		width: 100%;
		box-sizing: border-box;
		padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		align-items: center;
		text-align: center;
	}

	/* A second, tighter radial vignette sits directly under the text block
	   itself, independent of the directional scrim above — the text needs
	   a dark patch under it specifically, not just a generally darker zone. */
	.ohp-hero__body::before {
		content: "";
		position: absolute;
		inset: -35% -10% -10%;
		z-index: -1;
		background: radial-gradient( ellipse at center bottom, rgba(11,11,12,0.7) 0%, rgba(11,11,12,0) 72% );
	}

	.ohp-hero__super,
	.ohp-hero__sub { text-align: center; }

	.ohp-hero__title {
		text-align: center;
		font-size: clamp( 1.9rem, 8vw, 2.6rem );
	}

	.ohp-hero__cta {
		align-self: center;
		width: 100%;
		text-align: center;
	}

	.ohp-hero__controls {
		position: absolute;
		bottom: var(--wp--preset--spacing--40);
		left: 0;
		right: 0;
		justify-content: center;
		padding: 0;
	}

	.ohp-hero__arrow {
		width: 36px;
		height: 36px;
		font-size: 1.3rem;
	}
}

/* Phones in landscape: keep the desktop side-by-side split rather than the
   portrait full-bleed overlay. There is enough width for it, and the
   overlay pattern reads as far too tall when the viewport is this short. */
@media ( max-width: 860px ) and ( orientation: landscape ) {
	.ohp-hero__slide {
		min-height: 0;
		height: 88vh;
		max-height: 520px;
	}

	.ohp-hero__media {
		min-height: 0;
	}

	.ohp-hero__body {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}

	.ohp-hero__title {
		font-size: clamp( 1.4rem, 4.5vw, 2.1rem );
	}

	.ohp-hero__super,
	.ohp-hero__sub {
		font-size: 0.7rem;
	}

	.ohp-hero__cta {
		padding: 0.7rem 1.4rem;
	}

	.ohp-hero__controls {
		bottom: 0.75rem;
		right: 1rem;
	}
}

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

/* --- Related lists: series nav, author's series --- */

.ohp-related {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(26, 23, 20, 0.16);
}

.ohp-related__label {
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.9rem;
	font-weight: 500;
}

.ohp-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohp-related__list li {
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(26, 23, 20, 0.08);
	font-size: 0.95rem;
}

.ohp-related__list li:last-child { border-bottom: 0; }

.ohp-related__list a {
	text-decoration: none;
	border-bottom: 1px solid rgba(26, 23, 20, 0.25);
}

.ohp-related__list a:hover,
.ohp-related__list a:focus {
	color: var(--wp--preset--color--oxblood);
	border-bottom-color: var(--wp--preset--color--oxblood);
}

/* The book you are already on is stated, not linked. */
.ohp-related__list .is-current span {
	color: var(--wp--preset--color--muted);
}

/* --- Footer columns --- */

.ohp-footer__heading {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(250, 246, 239, 0.55);
	margin: 0 0 0.9rem;
}

.ohp-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohp-footer__list li {
	margin: 0 0 0.55rem;
	font-size: 0.9rem;
}

.ohp-footer__columns .wp-block-group {
	flex: 1 1 200px;
	min-width: 200px;
}

/* Jetpack's Subscribe block ships its own markup. On the dark footer,
   this makes it a solid white input joined to a solid black button —
   one grouped control that reads clearly against the dark background,
   rather than relying on transparency against a background whose
   brightness varies per page. */
.ohp-dark .wp-block-jetpack-subscriptions {
	max-width: 340px;
}

.ohp-dark .wp-block-jetpack-subscriptions form {
	display: flex;
	gap: 0;
}

.ohp-dark .wp-block-jetpack-subscriptions input[type="email"] {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	padding: 0.7rem 0.9rem;
	flex: 1;
}

.ohp-dark .wp-block-jetpack-subscriptions button,
.ohp-dark .wp-block-jetpack-subscriptions__button {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	border-radius: 0 !important;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.7rem 1.1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ohp-dark .wp-block-jetpack-subscriptions button:hover,
.ohp-dark .wp-block-jetpack-subscriptions__button:hover {
	background: var(--wp--preset--color--oxblood) !important;
	border-color: var(--wp--preset--color--oxblood) !important;
}

/* --- Latest posts strip --- */

.ohp-latest {
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid rgba(26, 23, 20, 0.12);
}

/* --- Mobile nav overlay --- */

/* The header's nav is set small and tight-tracked for the compact top bar.
   Full-screen, that reads as cramped, so the overlay gets its own larger,
   more relaxed treatment independent of the inline nav's size. */
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
	font-size: 1.4rem !important;
	letter-spacing: 0.08em !important;
}

.wp-block-navigation__responsive-dialog .wp-block-navigation-item {
	margin-bottom: 0.5rem;
}

/* The close and open toggle icons inherit overlayTextColor automatically
   once it's set on the block, but the closed (hamburger) icon in the
   header bar uses the block's own textColor — keep both visibly cream. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base) !important;
}

/* Core's overlay ships with a lot of default top padding — trim it so
   content starts near the top instead of leaving dead space above it,
   while still clearing the iOS notch/status bar via safe-area-inset. */
.wp-block-navigation__responsive-dialog {
	padding-top: max( 1.25rem, env( safe-area-inset-top ) ) !important;
}

.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content {
	padding-top: 0.5rem !important;
}

/* --- Header overlaid on the hero --- */

/* Matches the Hammer pattern: the header floats over the hero artwork
   instead of sitting in a separate solid band above it.

   This is scoped by :has(.ohp-hero) — whether a hero actually exists in
   the page — rather than WordPress's .home body class. That's a smaller
   assumption: it doesn't matter whether this page is technically the
   configured front page, only whether there's a hero to sit over. If
   there's no hero, neither rule below matches anything, and the header
   stays in its normal static, solid-black state automatically — no
   separate fallback rule needed to undo it.

   Two separate elements, targeted separately: <header> is the outer tag
   from the template-part block itself, with no class of its own — that's
   the one taken out of flow. The .ohp-dark class sits on the <div> inside
   it, and that's the one that gets the translucent tint.

   The tint is translucent rather than fully see-through: the artwork
   still shows through it, but nav text keeps a baseline of contrast
   regardless of how bright any particular hero image is near the top.

   Because the header is taken out of normal document flow, there is
   nothing left between it and the hero for a gap to hide in. */
body:has( .ohp-hero ) header {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 20 !important;
}

body:has( .ohp-hero ) header .ohp-dark {
	background: rgba( 11, 11, 12, 0.35 ) !important;
	border-bottom: none !important;
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
}

/* The inner logo/nav row is normally centred within the site's 1180px
   content column — correct on every ordinary page, where the header sits
   on plain black. But once the header floats over a full-width hero, that
   centred column no longer touches the true edges of the screen: it's
   inset by whatever margin falls outside 1180px on a wide viewport, so
   the logo lands wherever that inset happens to be rather than at the
   corner. This resets the row to the real full width with a small fixed
   edge padding instead, so logo and nav pin to the actual left and right
   edges of the screen — matching where they visually need to sit against
   full-bleed artwork underneath them. */
body:has( .ohp-hero ) header .alignwide {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: var( --wp--preset--spacing--40 ) !important;
	padding-right: var( --wp--preset--spacing--40 ) !important;
	box-sizing: border-box !important;
}

/* Zero any residual top spacing above the hero itself. */
body:has( .ohp-hero ) main,
.ohp-hero:first-child {
	margin-top: 0 !important;
}

/* --- Wordmark logo sizing --- */

/* The header/footer logo is now a wide horizontal wordmark (2146×334px,
   ~6.4:1) rather than the old compact square mark, sized in parts/header.html
   and parts/footer.html for that real aspect ratio. On narrow phones it
   still needs a hard cap so it doesn't crowd the hamburger toggle. */
@media ( max-width: 600px ) {
	.wp-block-site-logo img {
		max-width: 130px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* --- Split nav, centred logo --- */

/* Desktop: logo mathematically centred regardless of how many links sit on
   each side. flex:1 on both nav wrappers forces them to claim equal space;
   without that, an uneven link count would visually push the logo off
   centre rather than keeping it fixed in the middle. */
.ohp-nav-split {
	align-items: center;
	gap: var( --wp--preset--spacing--50 );
}

.ohp-nav-side {
	flex: 1 1 0;
}

.ohp-nav-logo {
	flex: 0 0 auto;
	align-self: center;
	margin: 0 !important;
	margin-top: 6px !important;
}

.ohp-nav-logo .wp-block-site-logo {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

.ohp-nav-logo a {
	display: block;
	line-height: 0;
}

.ohp-nav-logo img {
	display: block;
	vertical-align: middle;
	margin: 0 !important;
}

/* Three separate <nav> elements exist so mobile can show one combined menu
   instead of two side-by-side hamburgers, which would be a genuinely
   confusing pattern on a narrow screen. Only one is visible at a time. */
.ohp-nav-mobile {
	display: none;
}

@media ( max-width: 860px ) {
	.ohp-nav-split {
		justify-content: space-between;
	}

	.ohp-nav-side {
		display: none;
	}

	.ohp-nav-mobile {
		display: flex;
	}
}

/* --- Display font: menu and hero --- */

/* Bevan needs installing once via Appearance -> Editor -> Styles ->
   Typography -> Manage fonts, same route already used for Space Grotesk
   and Newsreader. Until it's installed, browsers fall back to the serif
   stack below rather than showing nothing. */
.ohp-nav-side .wp-block-navigation-item__label,
.ohp-nav-mobile .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container .wp-block-navigation-item__label {
	font-family: var( --wp--preset--font-family--display );
}

.ohp-hero__super,
.ohp-hero__title,
.ohp-hero__sub {
	font-family: var( --wp--preset--font-family--display );
}

/* Bevan is a heavy display face — letter-spacing this wide on top of it
   gets muddy at small sizes, so easing it back specifically here rather
   than inheriting the sans nav's tighter, lighter-weight tracking. */
.ohp-nav-side .wp-block-navigation-item__label,
.ohp-nav-mobile .wp-block-navigation-item__label {
	letter-spacing: 0.08em !important;
	font-size: 0.7rem !important;
}

/* --- Home banner: 20% taller than a book's own static hero --- */

/* Book pages keep the base .ohp-hero__slide/.ohp-hero__media sizing —
   it's already right for a page banner that sits above a full page of
   content. The home carousel is the primary landing visual and gets a
   scoped bump instead of changing the shared base rule, so this can't
   silently also grow the book-page hero. 460 -> 552, 520 -> 624,
   760 -> 912: each is the previous value at 120%. */
.ohp-hero--home .ohp-hero__slide,
.ohp-hero--home .ohp-hero__media {
	min-height: 552px;
}

@media ( max-width: 860px ) and ( orientation: portrait ) {
	.ohp-hero--home .ohp-hero__slide {
		max-height: 912px;
	}
}

@media ( max-width: 860px ) and ( orientation: landscape ) {
	.ohp-hero--home .ohp-hero__slide {
		max-height: 624px;
	}
}

/* --- Book browser: filter bar + alternating rows --- */

.ohp-browser {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70);
}

.ohp-browser__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: 1.1rem 1.5rem;
	margin-bottom: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface);
}

.ohp-browser__select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--wp--preset--color--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A1714' stroke-width='1.5'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 14px;
	border: 1px solid rgba(26, 23, 20, 0.28);
	font-family: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	padding: 0.55rem 2.1rem 0.55rem 0.9rem;
	min-width: 130px;
}

.ohp-browser__select:hover {
	border-color: var(--wp--preset--color--contrast);
}

.ohp-browser__select:disabled {
	cursor: default;
	opacity: 0.55;
	background-image: none;
	padding-right: 0.9rem;
}

.ohp-browser__sep {
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
}

.ohp-browser__go {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: none;
	padding: 0.5rem 1.2rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.ohp-browser__empty {
	text-align: center;
	color: var(--wp--preset--color--muted);
	padding: var(--wp--preset--spacing--60) 0;
}

.ohp-browser__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60) 0;
	border-bottom: 1px solid rgba(26, 23, 20, 0.1);
}

.ohp-browser__row:first-child {
	padding-top: 0;
}

.ohp-browser__row--reverse {
	flex-direction: row-reverse;
}

.ohp-browser__cover {
	flex: 0 0 220px;
	display: block;
}

.ohp-browser__cover img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid rgba(26, 23, 20, 0.16);
}

.ohp-browser__text {
	flex: 1;
	min-width: 0;
	padding: 0 var(--wp--preset--spacing--40);
	border-left: 1px solid rgba(26, 23, 20, 0.14);
}

.ohp-browser__row--reverse .ohp-browser__text {
	border-left: none;
	border-right: 1px solid rgba(26, 23, 20, 0.14);
}

.ohp-browser__kicker {
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
	margin: 0 0 0.6rem;
}

.ohp-browser__title {
	font-size: clamp( 1.4rem, 2.6vw, 2rem );
	margin: 0 0 0.9rem;
	line-height: 1.1;
}

.ohp-browser__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ohp-browser__title a:hover {
	color: var(--wp--preset--color--oxblood);
}

.ohp-browser__excerpt {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba( 26, 23, 20, 0.82 );
	margin: 0 0 0.8rem;
}

.ohp-browser__more {
	color: var(--wp--preset--color--oxblood);
	white-space: nowrap;
}

.ohp-browser__byline {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

@media ( max-width: 780px ) {
	.ohp-browser__row,
	.ohp-browser__row--reverse {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30);
	}

	.ohp-browser__cover {
		flex-basis: auto;
	}

	.ohp-browser__text,
	.ohp-browser__row--reverse .ohp-browser__text {
		border-left: none;
		border-right: none;
		padding: 0;
	}

	.ohp-browser__bar {
		gap: 0.6rem;
	}

	.ohp-browser__sep {
		display: none;
	}
}

/* --- Media page: carousels --- */

.ohp-media-section {
	margin-bottom: var(--wp--preset--spacing--60);
}

.ohp-media-section__title {
	font-size: 1.3rem;
	margin: 0 0 1.25rem;
}

.ohp-media-carousel-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ohp-media-carousel-wrap .ohp-media-carousel {
	flex: 1;
	min-width: 0;
}

.ohp-media-carousel__arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(26, 23, 20, 0.2);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--contrast);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ohp-media-carousel__arrow:hover,
.ohp-media-carousel__arrow:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

@media ( max-width: 600px ) {
	.ohp-media-carousel__arrow {
		width: 32px;
		height: 32px;
		font-size: 1.1rem;
	}
}

.ohp-media-carousel {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ohp-media-carousel::-webkit-scrollbar {
	display: none;
}

.ohp-media-carousel__item {
	position: relative;
	flex: 0 0 200px;
	scroll-snap-align: start;
	display: block;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

/* The video-container doubling belongs here, scoped to videos only — it
   was previously on the shared base rule above, which meant it was also
   widening the book-cover carousel and pushing it into overflow (hence
   the scrollbar appearing there unprompted). */
.ohp-media-carousel__item--video {
	flex-basis: 400px;
}

.ohp-media-carousel--covers .ohp-media-carousel__item img {
	border: 1px solid rgba(26, 23, 20, 0.16);
}

.ohp-media-carousel__item img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
}

/* A video with no Featured image set gets this instead of vanishing
   entirely — deliberately obvious, so the gap is easy to spot and fix. */
.ohp-media-carousel__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	aspect-ratio: 16 / 13.5;
	background: repeating-linear-gradient( 45deg, #f1f0ec, #f1f0ec 10px, #e4e2dc 10px, #e4e2dc 20px );
	border: 1px dashed rgba(26, 23, 20, 0.35);
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	padding: 0.5rem;
	box-sizing: border-box;
}

/* 50% taller than a plain 16:9 frame (16/13.5, i.e. 16/9 * 1.5), and
   cropped rather than letterboxed — object-fit: cover fills the whole
   box, with object-position anchored to the top so a face or head near
   the top of a portrait-oriented Featured image doesn't get cut off the
   way centre-cropping would risk. */
.ohp-media-carousel__item--video img {
	aspect-ratio: 16 / 13.5;
	object-fit: cover;
	object-position: center top;
	background: var(--wp--preset--color--ink);
}

.ohp-media-carousel__play {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 16 / 13.5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ohp-media-carousel__play::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 0 18px 29px;
	border-color: transparent transparent transparent var(--wp--preset--color--base);
	filter: drop-shadow( 0 0 8px rgba(0,0,0,0.6) );
	margin-left: 6px;
}

.ohp-media-carousel__caption {
	display: block;
	font-size: 1.07rem;
	text-align: center;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--contrast);
}

.ohp-media-carousel__item:hover img {
	opacity: 0.9;
}

/* --- Video modal --- */

.ohp-video-modal {
	border: none;
	padding: 0;
	background: transparent;
	max-width: min( 90vw, 960px );
	width: 100%;
}

.ohp-video-modal::backdrop {
	background: rgba( 11, 11, 12, 0.85 );
}

.ohp-video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.ohp-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.ohp-video-modal__close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--base);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.4rem;
}

/* --- Authors grid --- */

.ohp-authors-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(160px, 1fr) );
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
}

.ohp-authors-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.ohp-authors-grid__photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.9rem;
	border: 1px solid rgba(26, 23, 20, 0.14);
}

.ohp-authors-grid__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photo set yet — a plain initial rather than a blank or broken image,
   same "obviously incomplete, not silently missing" principle used for
   videos with no cover. */
.ohp-authors-grid__initial {
	font-size: 2.2rem;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--muted);
}

.ohp-authors-grid__name {
	font-size: 0.95rem;
	font-weight: 500;
}

.ohp-authors-grid__item:hover .ohp-authors-grid__name {
	color: var(--wp--preset--color--oxblood);
}

/* --- Author page photo --- */

.ohp-author-photo {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(26, 23, 20, 0.14);
}

.ohp-author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ohp-author-photo__initial {
	font-size: 4rem;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--muted);
}

@media ( max-width: 780px ) {
	.ohp-author-photo {
		max-width: 200px;
		margin: 0 auto var(--wp--preset--spacing--40);
	}
}

/* --- Contact and mailing list forms --- */

.ohp-form p { margin: 0 0 1rem; }

.ohp-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 0.4rem;
}

.ohp-form input[type="text"],
.ohp-form input[type="email"],
.ohp-form select,
.ohp-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(26, 23, 20, 0.25);
	background: var(--wp--preset--color--paper);
	font-family: inherit;
	font-size: 0.95rem;
}

.ohp-form__submit {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: none;
	padding: 0.8rem 1.6rem;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.ohp-form__submit:hover { background: var(--wp--preset--color--oxblood); }

.ohp-form__notice {
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}

.ohp-form__notice--success {
	background: rgba(46, 125, 50, 0.1);
	border: 1px solid rgba(46, 125, 50, 0.35);
}

.ohp-form__notice--error {
	background: rgba(179, 45, 46, 0.1);
	border: 1px solid rgba(179, 45, 46, 0.35);
}

/* Inline mailing-list form, sized for the footer */
.ohp-form--inline {
	max-width: 340px;
}

.ohp-form--inline input[type="email"] {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.6rem;
}

.ohp-form--inline .ohp-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 400;
	color: rgba(250, 246, 239, 0.6);
	margin-top: 0.7rem;
	cursor: pointer;
}

.ohp-form--inline .ohp-form__consent input {
	margin-top: 0.2rem;
}

.ohp-form--inline .cf-turnstile { margin-top: 0.7rem; }