/*
Theme Name: CCE Prime
Theme URI: https://ccekeke.com
Author: C.C. Ekeke
Description: Custom theme for C.C. Ekeke — sci-fi, fantasy & superhero fiction. Dark, cinematic, premium.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: cc-ekeke
*/

:root {
	--c-void: #0A0B0D;
	--c-gunmetal: #16181D;
	--c-offwhite: #F2F3F5;
	--c-grey: #8A8F98;
	--c-ion: #3FA9F5;
	--c-ion-rgb: 63, 169, 245;
	--c-amber: #F2A93B;
	--c-line: #2A2D34;

	--font-display: 'Orbitron', 'Rajdhani', sans-serif;
	--font-alt: 'Rajdhani', sans-serif;
	--font-ui: 'Sora', sans-serif;
	--font-body: 'Inter', sans-serif;

	--container: 1200px;
	--radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--c-void);
	color: var(--c-offwhite);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* Fixed scroll-scrubbed video background layer */
.bg-video {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.mobile-poster {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}

.bg-tint {
	position: fixed;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(10, 11, 13, 0.15), rgba(10, 11, 13, 0.75) 70%),
		linear-gradient(180deg, rgba(10, 11, 13, 0.55) 0%, rgba(10, 11, 13, 0.35) 30%, rgba(10, 11, 13, 0.65) 100%);
	pointer-events: none;
}

.motion-glow {
	position: fixed;
	inset: 0;
	z-index: 2;
	background: radial-gradient(ellipse 600px 400px at 50% 15%, rgba(var(--c-ion-rgb), 0.08), transparent 70%);
	pointer-events: none;
	mix-blend-mode: screen;
}

#page {
	position: relative;
	z-index: 10;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-transform: uppercase;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; color: var(--c-grey); }

.eyebrow {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-ion);
	display: inline-block;
	margin-bottom: 0.75em;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.9em 1.8em;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn--primary {
	background: var(--c-ion);
	color: var(--c-void);
}
.btn--primary:hover { background: #6cc0f7; }

.btn--ghost {
	background: transparent;
	color: var(--c-offwhite);
	border-color: var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-ion); color: var(--c-ion); }

/* Header — three stacked bands: utility bar / logo band / nav bar */
.site-header {
	position: relative;
	z-index: 50;
}

/* Band 1: thin utility bar */
.header-utility {
	background: var(--c-void);
	border-bottom: 1px solid var(--c-line);
}

.header-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.header-utility__cta {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ion);
}

.header-utility__cta:hover { color: var(--c-offwhite); }

.header-social {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-social a {
	display: inline-flex;
	color: var(--c-grey);
	transition: color 0.2s ease;
}

.header-social a:hover { color: var(--c-ion); }
.header-social svg { width: 16px; height: 16px; }

/* Band 2: logo over the header image */
.header-band {
	position: relative;
	background-color: var(--c-gunmetal);
	/* Set here (relative to the stylesheet) so the block header part needs no
	   inline PHP for the theme URL. */
	background-image: url('img/header-band.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.header-band::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 11, 13, 0.72) 0%, rgba(10, 11, 13, 0.82) 100%);
}

.header-band__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 132px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.header-band .custom-logo-link img {
	max-height: 76px;
	width: auto;
}

.site-logo {
	font-family: 'Montserrat', var(--font-body);
	font-weight: 700;
	font-size: clamp(4.2rem, 10.2vw, 6.6rem);
	letter-spacing: 0.077em;
	text-transform: uppercase;
	color: var(--c-offwhite);
	text-align: center;
	line-height: 1.1;
}

/* Band 3: centered main menu */
.header-nav-bar {
	background: var(--c-void);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	position: sticky;
	top: 0;
	z-index: 60;
	transition: box-shadow 0.25s ease;
}

/* Condensed header.
   sticky alone cannot do this: the nav bar is the last child of .site-header, so
   it is only pinned while .site-header is still on screen (about 4px of travel).
   Once the utility strip and title band scroll away, JS adds .is-condensed and the
   nav bar leaves the flow to sit fixed at the top of the viewport, in a smaller
   form with a compact wordmark. --nav-h is set from JS to the height the bar gave
   up, so the page below does not jump. */
.site-header.is-condensed {
	padding-bottom: var(--nav-h, 52px);
}

.site-header.is-condensed .header-nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.site-header.is-condensed .header-nav-bar__inner {
	min-height: 46px;
}

.site-header.is-condensed .primary-nav a {
	font-size: 1rem;
}

/* small wordmark that stands in for the big title band once it is scrolled past */
.header-compact-logo {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Montserrat', var(--font-body);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.098em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--c-offwhite);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.header-compact-logo:hover { color: var(--c-ion); }

.site-header.is-condensed .header-compact-logo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.header-nav-bar,
	.header-compact-logo { transition: none; }
}

.header-nav-bar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
}

.primary-nav ul {
	display: flex;
	gap: 2.64em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	font-family: var(--font-ui);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-grey);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"],
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a,
.primary-nav .current_page_item > a,
.primary-nav .current_page_parent > a {
	color: var(--c-ion);
}

/* Books dropdown. Class names match what wp_nav_menu emits, so a Customizer-managed
   menu with child items picks this up without any extra markup. */
.primary-nav li {
	position: relative;
}

.primary-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	margin-left: 0.5em;
	vertical-align: 0.18em;
	border-left: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-top: 0.3em solid currentColor;
}

.primary-nav .sub-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	/* fits "THE PANTHEON SAGA" uppercase with slack; it is nowrap, so a tight
	   box would overflow rather than wrap if the UI font falls back */
	min-width: 240px;
	flex-direction: column;
	gap: 0;
	padding: 8px 0;
	margin: 0;
	list-style: none;
	background: var(--c-gunmetal);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 70;
}

/* focus-within keeps the dropdown reachable by keyboard without any JS */
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.primary-nav .sub-menu li {
	display: block;
}

.primary-nav .sub-menu a {
	display: block;
	padding: 0.55em 1.1em;
	font-size: 0.95rem;
	/* uppercase to match the top-level menu buttons */
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--c-offwhite);
}

.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a[aria-current="page"] {
	color: var(--c-ion);
	background: rgba(255, 255, 255, 0.04);
}

@media (prefers-reduced-motion: reduce) {
	.primary-nav .sub-menu { transition: none; }
}

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--c-line);
	color: var(--c-offwhite);
	padding: 8px 12px;
	border-radius: var(--radius);
}

/* Hero — transparent over the fixed video background.
   min-height is reduced from 100vh so the centred promo sits roughly half as
   far below the sticky menu as it did at full viewport height. */
.hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.hero__promo {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 56px;
	align-items: center;
	max-width: 900px;
}

.hero__promo--reverse {
	grid-template-columns: 320px 1fr;
	max-width: 900px;
	margin: 0 auto;
}

#home h1 {
	font-family: var(--font-body);
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	letter-spacing: 0.01em;
}

/* one step up the button scale from .btn--large (0.95rem) */
#star-brigade-promo .hero__actions .btn {
	font-size: 1.05rem;
}

/* Same body font as the hero headline, but set smaller and in sentence case:
   this is a long pull-quote and reads as a wall of type at hero scale. */
#star-brigade-promo h2 {
	font-family: var(--font-body);
	font-size: clamp(1.15rem, 1.9vw, 1.55rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: none;
}

#home .hero__release-note {
	font-size: 1.1rem;
}

.hero__release-note {
	font-family: var(--font-ui);
	font-size: 0.95rem;
	color: var(--c-grey);
	margin-bottom: 2em;
}

.hero__kindle-btn {
	text-transform: uppercase;
	font-weight: 500;
	/* uppercase needs looser tracking than the sentence-case it replaced */
	letter-spacing: 0.08em;
}

/* Sins of Tomorrow hero button + Star Brigade promo "Learn More" hover to brand
   amber instead of the default blue. Both override .btn--primary:hover, so each
   needs higher specificity than that generic rule. */
.hero__kindle-btn.btn--primary:hover,
#star-brigade-promo .btn--primary:hover {
	background: var(--c-amber);
	border-color: var(--c-amber);
	color: var(--c-void);
}

.hero__promo-cover {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--c-line);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
	transition: transform 0.3s ease;
}

.hero__promo-cover:hover { transform: translateY(-4px); }
.hero__promo-cover img { width: 100%; display: block; }

.hero__actions { display: flex; gap: 1em; flex-wrap: wrap; }

.hero__scroll-cue {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 22px;
	height: 36px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
}

.hero__scroll-cue span {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 3px;
	height: 8px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--c-ion);
	animation: scrollCue 1.8s ease-in-out infinite;
}

@keyframes scrollCue {
	0% { opacity: 1; transform: translateY(0); }
	70% { opacity: 0; transform: translateY(12px); }
	100% { opacity: 0; transform: translateY(12px); }
}

/* Section rhythm */
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section-head { max-width: 640px; margin-bottom: 3em; }
.section--alt { background: var(--c-gunmetal); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }

/* Glass panels */
.glass {
	position: relative;
	overflow: hidden;
	background: rgba(18, 19, 25, 0.46);
	border: 1px solid color-mix(in srgb, var(--c-line) 75%, transparent);
	backdrop-filter: blur(22px) saturate(1.18);
	-webkit-backdrop-filter: blur(22px) saturate(1.18);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
	border-radius: var(--radius);
}

.glass::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(var(--c-ion-rgb), 0.05));
	pointer-events: none;
}

.glass > * { position: relative; z-index: 2; }

/* Audible promo — cover art (3D tilted) left, copy right */
.audible-promo {
	position: relative;
	z-index: 2;
	background: var(--c-void);
	border-top: 1px solid var(--c-line);
	padding: 88px 0;
}

.audible-promo__layout {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 72px;
	align-items: center;
}

/* 3D cover: perspective container + tilted face + extruded right edge */
.audible-promo__art {
	perspective: 1400px;
	display: flex;
	justify-content: center;
}

.audible-promo__cover {
	position: relative;
	display: block;
	width: 300px;
	transform-style: preserve-3d;
	transform: rotateY(-22deg) rotateX(4deg);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* eases toward the viewer on hover */
.audible-promo__cover:hover { transform: rotateY(-8deg) rotateX(1deg); }

@media (prefers-reduced-motion: reduce) {
	.audible-promo__cover { transition: none; }
	.audible-promo__cover:hover { transform: rotateY(-22deg) rotateX(4deg); }
}

.audible-promo__cover img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow:
		22px 26px 48px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(242, 243, 245, 0.06);
}

/* extruded edge gives the flat cover real depth */
.audible-promo__cover::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 100%;
	background: linear-gradient(90deg, rgba(10, 11, 13, 0.55), rgba(10, 11, 13, 0.9));
	transform: rotateY(90deg);
	transform-origin: right center;
}

.audible-promo__heading {
	font-family: 'Montserrat', var(--font-body);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-offwhite);
	margin: 0 0 0.6em;
	line-height: 1.25;
}

.audible-promo__body p {
	font-family: 'Open Sans', var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-grey);
	margin: 0 0 1.4em;
}

.audible-promo__btn {
	display: inline-block;
	font-family: 'Open Sans', var(--font-ui);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--c-void);
	background: var(--c-ion);
	border: 1px solid var(--c-ion);
	border-radius: var(--radius);
	padding: 0.7em 1.4em;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.audible-promo__btn:hover { background: var(--c-amber); border-color: var(--c-amber); }

/* Reader community promo — three cards: cover artwork above, copy + button below */
.reader-promo {
	position: relative;
	z-index: 2;
	background: var(--c-gunmetal);
	border-top: 1px solid var(--c-line);
	padding: 88px 0;
}

.reader-promo__heading {
	font-family: 'Montserrat', var(--font-body);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-offwhite);
	text-align: center;
	margin: 0 0 1.6em;
}

.reader-promo__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.reader-promo__card {
	display: flex;
	flex-direction: column;
	text-align: center;
}

/* artwork sits above the copy, as on the reference site */
.reader-promo__card-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	margin-bottom: 24px;
}

.reader-promo__card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.reader-promo__card h3 {
	font-family: 'Montserrat', var(--font-body);
	/* scales with the column so every card title stays on one line */
	font-size: clamp(1.125rem, 1.85vw, 1.5rem);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	margin: 0 0 0.5em;
	line-height: 1.25;
}

.reader-promo__card p {
	font-family: 'Open Sans', var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-offwhite);
	margin: 0 0 1.6em;
}

.reader-promo__btn {
	display: inline-block;
	/* pins buttons to a shared baseline despite differing copy lengths */
	margin-top: auto;
	font-family: 'Open Sans', var(--font-ui);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--c-void);
	background: var(--c-ion);
	border: 1px solid var(--c-ion);
	border-radius: var(--radius);
	padding: 0.7em 1.6em;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.reader-promo__btn:hover { background: var(--c-amber); border-color: var(--c-amber); }

/* About the author promo — solid band, centred heading, photo left / text right */
.about-promo {
	position: relative;
	z-index: 2;
	background: var(--c-gunmetal);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	padding: 72px 0;
}

.about-promo__heading {
	font-family: 'Montserrat', var(--font-body);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--c-offwhite);
	text-align: center;
	margin: 0 0 2em;
}

.about-promo__layout {
	display: grid;
	grid-template-columns: 332px 1fr;
	gap: 48px;
	align-items: start;
}

.about-promo__photo {
	display: block;
	width: 332px;
	height: 332px;
	overflow: hidden;
	border: 1px solid var(--c-line);
	background: var(--c-void);
}

.about-promo__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* portrait source in a square frame: anchor to the top so the centred
	   crop does not cut the head off */
	object-position: center top;
}

.about-promo__body p {
	font-family: 'Open Sans', var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-offwhite);
	margin: 0 0 1em;
}

.about-promo__btn {
	display: inline-block;
	font-family: 'Open Sans', var(--font-ui);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--c-void);
	background: var(--c-ion);
	border: 1px solid var(--c-ion);
	border-radius: var(--radius);
	padding: 0.7em 1.4em;
	margin-top: 0.6em;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.about-promo__btn:hover { background: var(--c-amber); border-color: var(--c-amber); }

/* Series hero promos — full-viewport parallax cover sections.
   background-attachment: fixed produces the scroll-reveal ("parallax")
   transition between consecutive promos. */
.series-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	text-align: center;
	overflow: hidden;
}

.series-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10, 11, 13, 0.55);
}

.series-hero__inner {
	position: relative;
	z-index: 2;
	padding: 64px 24px;
}

.series-hero__title {
	font-family: 'Montserrat', var(--font-body);
	font-size: clamp(2.6rem, 6vw, 4.06rem);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 0.25em;
	line-height: 1.15;
}

.series-hero__tagline {
	font-family: 'Open Sans', var(--font-body);
	font-size: clamp(1.25rem, 3vw, 2.19rem);
	font-weight: 300;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.6em;
}

.series-hero__btn {
	display: inline-block;
	font-family: 'Open Sans', var(--font-ui);
	font-size: 1rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--c-void);
	background: var(--c-ion);
	border: 1px solid var(--c-ion);
	border-radius: var(--radius);
	padding: 0.75em 1.25em;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.series-hero__btn:hover {
	background: var(--c-amber);
	border-color: var(--c-amber);
}

/* Latest Release promo — a 1600x624 banner (Sins of Tomorrow cover crop as the
   background) with a COMING SOON heading and three device mockups. */
.release-promo {
	position: relative;
	z-index: 2;
	padding: 72px 0 88px;
}

/* match the width of the hero promos (their .hero__promo container caps at 900) */
.release-promo > .container { max-width: 900px; }

.release-promo__eyebrow {
	display: block;
	text-align: center;
	font-family: var(--font-ui);
	font-size: 2.4rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.4em;
}

.release-banner {
	position: relative;
	display: block;
	width: 100%;
	/* height grows to fit the (fixed-size) devices + text rather than a locked ratio,
	   so the banner can be the narrow hero-promo width without shrinking the devices */
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background-size: cover;
	background-position: center;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.release-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 11, 13, 0.35), rgba(10, 11, 13, 0.15) 40%, rgba(10, 11, 13, 0.35));
	transition: background 0.3s ease;
}

.release-banner:hover::after { background: linear-gradient(180deg, rgba(10, 11, 13, 0.25), rgba(var(--c-ion-rgb), 0.12) 60%); }

.release-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 32px 44px;
}

.release-banner__label {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3.4vw, 3rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* bright light blue at the top fading into the brand blue at the bottom */
	background: linear-gradient(180deg, #CDEEFF 0%, var(--c-ion) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--c-ion); /* fallback for browsers without background-clip: text */
	-webkit-text-stroke: 3px #0b1f33;
	text-shadow: 0 3px 20px rgba(0, 0, 0, 0.6);
	line-height: 1;
}

.release-banner__date {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 2.4rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	margin-top: 0.7em;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.75);
}

.release-banner__devices {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 32px;
	margin-top: 32px;
	width: 100%;
}

/* shared device look. Sizes are fixed px so the devices stay the same size
   regardless of the banner width. */
.device { position: relative; flex: 0 0 auto; }
.device img { display: block; }

/* Kindle tablet: dark bezel with a thicker chin for the wordmark */
.device--kindle {
	background: #17181d;
	border: 1px solid #2f333c;
	border-radius: 10px;
	padding: 12px 12px 34px;
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
}

.device--kindle img { height: 214px; width: auto; border-radius: 3px; }

.device--kindle .device__brand {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: #9aa0aa;
}

/* 3D paperback: front cover tilted with an extruded page edge */
.device--paperback { perspective: 1400px; }

.device--paperback .device__book {
	position: relative;
	transform-style: preserve-3d;
	transform: rotateY(-24deg);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.release-banner:hover .device--paperback .device__book { transform: rotateY(-14deg); }

.device--paperback img {
	height: 253px;
	width: auto;
	border-radius: 2px 4px 4px 2px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}

.device--paperback .device__book::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 100%;
	background: linear-gradient(90deg, rgba(235, 235, 240, 0.9), rgba(180, 182, 190, 0.85));
	transform: rotateY(90deg);
	transform-origin: right center;
}

/* Phone: portrait frame (aspect drives width from height), audible cover + controls */
.device--phone {
	height: 268px;
	aspect-ratio: 47 / 100;
	background: #0c0d11;
	border: 1px solid #33373f;
	border-radius: 16px;
	padding: 7px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);
}

.device--phone .device__screen {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #05060a;
	border-radius: 11px;
	overflow: hidden;
}

.device--phone .device__statusbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 9px 3px;
	font-family: var(--font-ui);
	font-size: 0.55rem;
	color: var(--c-offwhite);
}

.device--phone .device__art {
	flex: 1;
	padding: 6px 9px;
	display: flex;
	align-items: center;
}

.device--phone .device__art img { width: 100%; border-radius: 5px; }

.device--phone .device__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding: 8px 0 12px;
	color: var(--c-offwhite);
}

.device--phone .device__controls svg { width: 14px; height: 14px; }
.device--phone .device__controls .device__play { width: 20px; height: 20px; }

/* Feature sections */
.feature__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.feature--reverse .feature__grid { direction: rtl; }
.feature--reverse .feature__grid > * { direction: ltr; }

.feature__visual img,
.design__visual img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.feature__visual, .design__visual {
	padding: 0;
}

/* Design & Craft */
.design__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.design__specs-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 2em;
}

.design__spec {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 16px 0;
	border-top: 1px solid var(--c-line);
}

.design__spec-label {
	font-family: var(--font-ui);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-ion);
}

.design__spec-value {
	font-family: var(--font-alt);
	font-weight: 600;
	color: var(--c-offwhite);
}

/* Made for the Audience (pinned card gallery) */
.workflow {
	position: relative;
	min-height: 100vh;
}

.workflow__pin {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 0;
}

.workflow-track {
	position: relative;
	height: 320px;
	margin-top: 2em;
}

.workflow-card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(420px, 84vw);
	padding: 32px;
	transform: translate(-50%, -50%);
}

/* Specs table */
.specs__table { padding: 8px 40px; }

.specs__row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--c-line);
}

.specs__row:last-child { border-bottom: none; }

.specs__label {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-grey);
}

.specs__value {
	font-family: var(--font-alt);
	font-weight: 700;
	color: var(--c-offwhite);
	text-align: right;
}

/* Pre-order CTA */
.buy__card {
	max-width: 640px;
	margin: 0 auto;
	padding: 64px;
	text-align: center;
}

.buy__title { margin-bottom: 0.3em; }

.buy__formats {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 1.5em 0 2em;
}

.buy__format-chip {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-offwhite);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	padding: 0.5em 1.2em;
}

.btn--large { padding: 1.1em 2.4em; font-size: 0.95rem; }

/* Series grid (Books overview page) */
.series-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 32px;
}

.series-card {
	position: relative;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-gunmetal);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.series-card:hover { border-color: var(--c-ion); transform: translateY(-2px); }

.series-card__covers {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 2px;
	margin: 20px 20px 0;
}

.series-card__covers img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
	opacity: 0;
	transition: opacity 0.8s ease;
	box-shadow: 0 10px 24px rgba(0,0,0,0.5);
}

.series-card__covers img.is-active { opacity: 1; }

.series-card__body { padding: 20px; }

.series-card__title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin-bottom: 0.4em;
}

.series-card__count {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ion);
}

/* Series banners (Books overview page) — one full-width linked banner per series,
   stacked vertically. */
.series-banners {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
}

.series-banner {
	position: relative;
	display: block;
	width: 100%;
	/* fixed 970x300 banner; scales down proportionally on narrow screens */
	max-width: 970px;
	aspect-ratio: 970 / 300;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--c-line);
	background: var(--c-gunmetal);
}

.series-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* darken toward the centre so the title stays legible over any artwork */
.series-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 11, 13, 0.15), rgba(10, 11, 13, 0.55));
	transition: background 0.3s ease;
}

/* series logo overlaid on the banner, replacing the plain text title */
.series-banner__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: min(64%, 620px);
	height: auto;
	/* lifts the logo off busy artwork */
	filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.55));
}

.series-banner:hover .series-banner__img { transform: scale(1.04); }
.series-banner:hover::after { background: linear-gradient(180deg, rgba(10, 11, 13, 0.05), rgba(var(--c-ion-rgb), 0.25)); }

@media (prefers-reduced-motion: reduce) {
	.series-banner__img { transition: none; }
	.series-banner:hover .series-banner__img { transform: none; }
}

/* Book grid (Series detail page) */
/* same typeface as the About and Contact headlines, capped at 48px */
.series-page-title {
	font-family: 'Montserrat', var(--font-body);
	font-size: clamp(2.4rem, 5vw, 3rem);
	font-weight: 600;
	letter-spacing: normal;
}

.subsection-head {
	font-family: var(--font-body);
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: normal;
	margin-bottom: 1.2em;
}

.subsection-head--spaced { margin-top: 1.5em; }

.book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 28px;
	margin-bottom: 3em;
}

.book-grid:last-child { margin-bottom: 0; }

.book-card { display: block; }

.book-card__cover {
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--c-line);
	margin-bottom: 12px;
	background: var(--c-gunmetal);
}

.book-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.book-card:hover .book-card__cover img { transform: scale(1.04); }

.book-card__title {
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1rem;
	color: var(--c-offwhite);
	text-transform: none;
	letter-spacing: normal;
}

.book-card__cta {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.9em;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 1.6px;
	padding: 0.6em 1.2em;
}

/* Book detail page */
.book-detail {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 56px;
	align-items: start;
}

.book-detail__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.book-detail__cover {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--c-line);
	box-shadow: 0 30px 60px rgba(0,0,0,0.55);
}

/* outlined rectangle CTA under the cover, thicker border than the format ghost buttons */
.book-detail__sample {
	display: block;
	text-align: center;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-offwhite);
	background: transparent;
	border: 2px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.9em 1em;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.book-detail__sample:hover { border-color: var(--c-ion); color: var(--c-ion); }

.book-detail__series {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--c-ion);
	margin-bottom: 0.8em;
	display: inline-block;
}

.book-detail__title {
	font-family: var(--font-body);
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: normal;
	margin-bottom: 0.3em;
}

.book-detail__meta {
	color: var(--c-grey);
	font-family: var(--font-ui);
	font-size: 0.85rem;
	margin-bottom: 2em;
}

.book-detail__synopsis { max-width: 640px; color: var(--c-offwhite); }
.book-detail__synopsis p { color: inherit; font-size: 1rem; line-height: 1.5; }

.format-links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 2.5em;
}

/* About */
.about-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 56px;
	align-items: start;
}

.about-portrait {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	border: 1px solid var(--c-line);
	background: var(--c-gunmetal);
	overflow: hidden;
}

/* portrait source in a 4:5 frame — anchor to the top so the crop keeps the head */
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Montserrat at full h1 scale. Uppercased here rather than in the page title
   so the WordPress titles stay properly cased for the browser tab and menus. */
.about-layout h1,
.contact-layout h1,
/* Books overview title. .section-head is shared with the series pages, so the
   series title is excluded here to keep its own smaller size. */
.section-head h1:not(.series-page-title) {
	font-family: 'Montserrat', var(--font-body);
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase;
}

/* Contact page */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.5em;
}

.social-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	color: var(--c-offwhite);
	border: 1px solid var(--c-line);
	border-radius: 50%;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.social-pill svg { width: 40px; height: 40px; }

.social-pill:hover {
	border-color: var(--c-ion);
	color: var(--c-ion);
	background: rgba(var(--c-ion-rgb), 0.08);
}

.contact-card { padding: 40px; }

.contact-form { display: flex; flex-direction: column; gap: 0.5em; }

.contact-form label {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-grey);
	margin-top: 1em;
}

.contact-form label span { color: var(--c-ion); }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	background: var(--c-void);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.9em 1.1em;
	color: var(--c-offwhite);
	font-family: var(--font-body);
	resize: vertical;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus { outline: none; border-color: var(--c-ion); }

.contact-form .btn { margin-top: 1.5em; align-self: flex-start; }

.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.contact-status {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	padding: 0.9em 1.1em;
	border-radius: var(--radius);
	margin: 0 0 1.2em;
}

.contact-status--success { background: rgba(63, 169, 245, 0.12); color: var(--c-ion); border: 1px solid rgba(63, 169, 245, 0.3); }
.contact-status--error { background: rgba(242, 169, 59, 0.12); color: var(--c-amber); border: 1px solid rgba(242, 169, 59, 0.3); }

/* Newsletter */
.newsletter {
	background: var(--c-gunmetal);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 56px;
	text-align: center;
}

.newsletter-form {
	display: flex;
	gap: 12px;
	max-width: 440px;
	margin: 2em auto 0;
}

.newsletter-form input[type="email"] {
	flex: 1;
	background: var(--c-void);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.9em 1.2em;
	color: var(--c-offwhite);
	font-family: var(--font-body);
}

.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--c-ion); }

/* Newsletter page (Free Book lead magnet) — cover on the left, copy and signup
   form on the right. */
.newsletter-page__inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 48px;
	align-items: start;
	max-width: 900px;
	margin: 0 auto;
}

.newsletter-page__title {
	/* spans the full width above the cover + copy columns */
	grid-column: 1 / -1;
	text-align: center;
	font-family: 'Montserrat', var(--font-body);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase;
	margin-bottom: 0.4em;
}

.newsletter-page__cover {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

.newsletter-page__copy p {
	font-family: 'Open Sans', var(--font-body);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--c-offwhite);
	margin: 0 0 1.2em;
}

.newsletter-page__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
	margin: 2em 0 0;
}

.newsletter-page__form input {
	width: 100%;
	background: var(--c-void);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.95em 1.2em;
	color: var(--c-offwhite);
	font-family: var(--font-body);
	font-size: 1rem;
}

.newsletter-page__form input::placeholder { color: var(--c-grey); }
.newsletter-page__form input:focus { outline: none; border-color: var(--c-ion); }
.newsletter-page__form .btn { justify-content: center; margin-top: 4px; }

/* stack the cover above the copy/form on narrow screens */
@media (max-width: 720px) {
	.newsletter-page__inner { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
	.newsletter-page__cover { width: min(280px, 70%); }
	.newsletter-page__copy p { max-width: 480px; }
	.newsletter-page__form { margin-inline: auto; }
}

/* Footer */
.site-footer {
	/* lifts the footer above the fixed background video/tint layers on the front page */
	position: relative;
	z-index: 10;
	background: var(--c-void);
	border-top: 1px solid var(--c-line);
	padding: 48px 0;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 20px;
}

/* centered icon row above the copyright */
.footer-social {
	display: flex;
	justify-content: center;
	gap: 22px;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	color: var(--c-grey);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover { color: var(--c-ion); border-color: var(--c-ion); }
.footer-social svg { width: 20px; height: 20px; display: block; }

.site-footer__copyright {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--c-grey);
}

/* Responsive */
@media (max-width: 860px) {
	.book-detail, .about-layout, .contact-layout { grid-template-columns: 1fr; }
	/* a 1600x624 ratio makes the devices tiny on phones, so let the banner grow
	   taller and give the device row a fixed, legible height */
	.release-promo { padding: 48px 0 56px; }
	.release-banner__inner { padding: 28px 16px 32px; }
	/* scale the enlarged headings down so they don't overflow a phone width */
	.release-promo__eyebrow { font-size: 1.5rem; }
	.release-banner__date { font-size: 1.4rem; }
	/* shrink the fixed device sizes so all three fit a phone width */
	.release-banner__devices { gap: 10px; }
	.device--kindle { padding: 7px 7px 20px; }
	.device--kindle img { height: 116px; }
	.device--kindle .device__brand { font-size: 0.5rem; bottom: 6px; }
	.device--paperback img { height: 132px; }
	.device--paperback .device__book::after { width: 13px; }
	.device--phone { height: 200px; }
	/* fixed backgrounds are unreliable on iOS Safari — fall back to scroll */
	.series-hero { background-attachment: scroll; min-height: 70vh; }
	.reader-promo { padding: 56px 0; }
	.reader-promo__grid { grid-template-columns: 1fr; gap: 40px; }
	.reader-promo__btn { margin-top: 0; }
	/* cards are full-width once stacked, so the title can size back up */
	.reader-promo__card h3 { font-size: 1.375rem; }

	.audible-promo { padding: 56px 0; }
	.audible-promo__layout { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
	.audible-promo__body { text-align: center; }
	.audible-promo__cover { width: min(260px, 80vw); transform: rotateY(-14deg) rotateX(3deg); }

	.about-promo { padding: 48px 0; }
	.about-promo__layout { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
	.about-promo__photo { width: min(332px, 100%); height: auto; aspect-ratio: 1 / 1; }
	.about-promo__body { text-align: center; }
	.hero__promo { grid-template-columns: 1fr; }
	.hero__promo-cover { max-width: 260px; }
	.contact-card { padding: 28px 24px; }
	.primary-nav { display: none; }
	.primary-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--c-gunmetal);
		border-bottom: 1px solid var(--c-line);
		padding: 20px 24px;
	}
	.primary-nav.is-open ul { flex-direction: column; gap: 1.2em; }
	/* no hover on touch, so the dropdown sits open and indented instead */
	.primary-nav .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		min-width: 0;
		margin: 0.8em 0 0;
		padding: 0 0 0 1.2em;
		background: none;
		border: none;
		border-left: 1px solid var(--c-line);
		border-radius: 0;
		box-shadow: none;
		gap: 0.8em;
	}
	.primary-nav .menu-item-has-children:hover > .sub-menu,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu { transform: none; }
	.primary-nav .sub-menu a { padding: 0; }
	.primary-nav .menu-item-has-children > a::after { display: none; }
	.nav-toggle { display: block; }
	.header-band__inner { min-height: 92px; }
	/* Smaller floor on phones so "C.C. EKEKE" stays on one line */
	.site-logo { letter-spacing: 0.056em; font-size: clamp(3.2rem, 8vw, 4.6rem); }
	.header-utility__cta { font-size: 0.65rem; letter-spacing: 0.1em; }
	.header-social { gap: 14px; }
	.newsletter { padding: 36px 24px; }
	.newsletter-form { flex-direction: column; }

	/* let the logo occupy more width once the banner is small */
	.series-banner__logo { width: min(78%, 620px); }

	.feature__grid, .design__grid { grid-template-columns: 1fr; gap: 32px; }
	.feature--reverse .feature__grid { direction: ltr; }
	.design__specs-strip { grid-template-columns: 1fr; }
	.buy__card { padding: 40px 24px; }
	.specs__table { padding: 8px 20px; }
	.workflow__pin, .workflow { min-height: auto; }
	.workflow-track { height: auto; }
	.workflow-card {
		position: static;
		transform: none;
		width: 100%;
		margin-bottom: 20px;
		opacity: 1 !important;
		filter: none !important;
	}
}

/* Mobile / no-hover: swap the scroll-scrubbed video for a static poster */
@media (hover: none), (max-width: 768px) {
	.bg-video { display: none; }
	.mobile-poster { display: block; }
}

/* =========================================================================
   Block theme (FSE) adjustments
   ========================================================================= */

/* Lenis smooth-scroll reset. The theme enqueues Lenis's script but not its
   stylesheet, so the global `scroll-behavior: smooth` (see top of file) fights
   Lenis for control of the wheel — that tug-of-war makes wheel scrolling lag and
   destabilises scroll-position reads (which the condensed header depends on).
   Lenis adds the `lenis` class to <html> on init; hand it scrolling cleanly. */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* The block editor injects vertical block-gap between the root-level template
   blocks (…#page and the footer) and between the promos inside #page. The promos
   are full-bleed sections with their own internal padding, so stack them flush
   like the original layout — this removes the exposed-background gaps between
   promos and the large gap before the footer. */
.wp-site-blocks > * { margin-block: 0; }
#page { margin: 0; }
#page > * { margin-block: 0; }

/* When the nav bar goes fixed on scroll, keep it above the promo layers (#page
   sits at z-index 10). */
.site-header.is-condensed .header-nav-bar { z-index: 200; }

/* The newsletter band lives in the footer part, so it renders on every page. It
   is redundant on the front page (which already has the newsletter reader card),
   so hide it there. WordPress adds the `home` body class on the front page. */
.home #newsletter { display: none; }

/* -------------------------------------------------------------------------
   Editable-promo bridges.
   The promo patterns are built from core blocks (heading / paragraph / button /
   image) so they are click-to-type editable, but the theme's component CSS was
   written for the original hand-coded markup. These rules bridge the gap:
   they make the core-block structure adopt the same styles.
   ------------------------------------------------------------------------- */

/* Core Button block renders <div class="wp-block-button"><a class="wp-block-button__link">.
   The theme button classes land on the wrapper <div>, so strip the core chrome
   off the inner link and let the wrapper be the button. */
.wp-block-button:is(.btn, .hero__kindle-btn, .audible-promo__btn, .reader-promo__btn, .about-promo__btn, .series-hero__btn, .book-detail__sample, .header-utility__cta) > .wp-block-button__link {
	/* !important beats WordPress' default button styles, which apply with
	   elevated specificity via global styles. */
	background: none !important;
	color: inherit !important;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none;
	width: auto;
}

/* Core Buttons wrapper (.wp-block-buttons) adds its own flex layout/margins;
   neutralise them so the promos keep their original alignment. */
.hero__actions.wp-block-buttons,
.audible-promo__body .wp-block-buttons,
.about-promo__body .wp-block-buttons,
.series-hero__inner .wp-block-buttons { margin: 0; }
.series-hero__inner .wp-block-buttons { justify-content: center !important; }
.audible-promo__body .wp-block-buttons,
.about-promo__body .wp-block-buttons { justify-content: flex-start !important; }
/* Reader card buttons pin to a shared baseline (the container is the flex child now). */
.reader-promo__card-body .wp-block-buttons { margin-top: auto !important; margin-bottom: 0; justify-content: center !important; }

/* Core Image block wraps the <img> in a <figure> (sometimes plus an <a>). Keep
   those wrappers transparent so the theme's image frames style the img as before. */
figure.hero__promo-cover,
figure.audible-promo__cover,
figure.about-promo__photo,
figure.book-detail__cover { margin: 0; padding: 0; }

/* Reader card artwork: the three source images have different aspect ratios, so
   fix the ratio on the figure (the box) and make the image fill it. This keeps all
   three cards identical regardless of the source image. */
.reader-promo__card .wp-block-image {
	aspect-ratio: 3 / 2;
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}
.reader-promo__card .wp-block-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
/* Preserve the Facebook card's lowered crop (second card). */
.reader-promo__grid > .reader-promo__card:nth-child(2) .wp-block-image img { object-position: center 30%; }

/* Uniform button width across the three cards so the labels ("Sign Up", "Join",
   "Follow") all render at the same size instead of hugging their text. */
.reader-promo__card .wp-block-button.reader-promo__btn {
	min-width: 160px;
	text-align: center;
}

/* Core group flow-layout injects margin-block-start on every child except the
   first. On the promos whose containers are CSS grid (columns), that pushes the
   2nd/3rd column down and misaligns them (e.g. reader cards 2 & 3 dropped 24px
   below the first). Zero it on the horizontal layout containers — their spacing
   comes from grid gap, not block margins. */
.hero__promo > *,
.reader-promo__grid > *,
.audible-promo__layout > *,
.about-promo__layout > *,
.book-detail > *,
.book-detail__aside > *,
.book-grid > *,
.contact-layout > * { margin-block: 0 !important; }

/* Series page (editable pattern): keep each book card's internal spacing
   (cover / title / More Info) matching the original hand-coded card. */
.book-card > * { margin-block-start: 0 !important; }
figure.book-card__cover { margin: 0 0 12px !important; padding: 0; }
.book-card__cover a { display: block; width: 100%; height: 100%; }
.book-card__title { margin: 0 !important; }
.book-card .wp-block-buttons { width: 100%; margin: 0 !important; justify-content: center; }

/* Book Detail main column: use the theme's own margins (not injected block-gap)
   so the vertical rhythm matches the original layout. */
.book-detail__main > *,
.book-detail__synopsis > * { margin-block-start: 0 !important; }
.book-detail__main .format-links { margin-top: 2.5em !important; }
.book-detail__synopsis p { margin: 0 0 1em; }
.book-detail__synopsis p:last-child { margin-bottom: 0; }

/* Contact: style the core Form blocks (Form / Form Input / Submit) like the
   theme form — full-width, comfortably sized fields instead of the small core
   defaults. */
.contact-card .wp-block-form {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	margin: 0;
}
.wp-block-form-input { margin: 0; }
.wp-block-form-input__label {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	width: 100%;
}
.wp-block-form-input__label-content {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-grey);
}
.wp-block-form-input__input {
	width: 100%;
	background: var(--c-void);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.9em 1.1em;
	color: var(--c-offwhite);
	font-family: var(--font-body);
	font-size: 1rem;
}
.wp-block-form-input__input:focus { outline: none; border-color: var(--c-ion); }
textarea.wp-block-form-input__input { min-height: 150px; resize: vertical; }
.wp-block-form .wp-block-form-submit-button,
.contact-card .wp-block-form .wp-block-buttons { margin-top: 0.5em; }

/* Contact: style the core Social Icons block (.wp-block-social-links) like the
   theme's outlined circular pills. */
.social-row.wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.5em;
	padding: 0;
	list-style: none;
}
.social-row .wp-social-link {
	width: 92px;
	height: 92px;
	margin: 0;
	padding: 0;
	background: none !important;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	color: var(--c-offwhite);
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.social-row .wp-social-link .wp-social-link-anchor {
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.social-row .wp-social-link svg {
	width: 40px;
	height: 40px;
	fill: currentColor;
}
.social-row .wp-social-link:hover {
	border-color: var(--c-ion);
	color: var(--c-ion);
	background: rgba(var(--c-ion-rgb), 0.08) !important;
}

/* -------------------------------------------------------------------------
   Primary navigation: core Navigation block styled like the theme's .primary-nav.
   The block carries the "primary-nav" class; these rules map its structure
   (wp-block-navigation*) onto the original menu design, including the hover
   dropdown and the condensed-header sizing.
   ------------------------------------------------------------------------- */

/* header flex rows: remove the injected block-gap between children */
.header-utility__inner > *,
.header-nav-bar__inner > * { margin-block: 0 !important; }

.primary-nav.wp-block-navigation { font-family: var(--font-ui); }
.primary-nav .wp-block-navigation__container {
	gap: 2.64em;
	align-items: center;
}
.primary-nav .wp-block-navigation-item__content,
.primary-nav .wp-block-navigation-item__label {
	font-family: var(--font-ui);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-grey);
}
.primary-nav .wp-block-navigation-item__content { padding: 0; }
.primary-nav .wp-block-navigation-item__content:hover,
.primary-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.primary-nav .wp-block-navigation-item__content[aria-current],
.primary-nav .wp-block-navigation-item__content[aria-current] .wp-block-navigation-item__label,
.primary-nav .current-menu-item > .wp-block-navigation-item__content,
.primary-nav .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label { color: var(--c-ion); }
.primary-nav .wp-block-navigation__submenu-icon { color: currentColor; padding: 0 0 0 0.1em; }

/* Books-style dropdown (hover/focus, matching the original) */
.primary-nav .wp-block-navigation__submenu-container {
	top: 100% !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) translateY(6px);
	min-width: 240px !important;
	padding: 8px 0;
	margin: 0;
	background: var(--c-gunmetal);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 70;
}
.primary-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.primary-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.55em 1.1em;
	font-size: 0.95rem;
	color: var(--c-offwhite);
	white-space: nowrap;
}
.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--c-ion);
	background: rgba(255, 255, 255, 0.04);
}

/* Condensed (scrolled) header uses the smaller nav size */
.site-header.is-condensed .primary-nav .wp-block-navigation-item__content,
.site-header.is-condensed .primary-nav .wp-block-navigation-item__label { font-size: 1rem; }

/* Mobile: the block provides its own hamburger overlay, so keep the nav visible
   (the theme's old rule hid .primary-nav on mobile) and darken the overlay. */
@media (max-width: 900px) {
	.primary-nav.wp-block-navigation { display: flex; }
	.primary-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--c-void);
	}
	.primary-nav .wp-block-navigation__responsive-container-open,
	.primary-nav .wp-block-navigation__responsive-container-close { color: var(--c-offwhite); }
}

/* On other pages the band sits above the void body background, so a solid
   background keeps it consistent. */
#newsletter {
	position: relative;
	z-index: 10;
	background: var(--c-void);
}