/*
Theme Name: Omorphos
Theme URI:
Author: Omorphos
Description: Clean, minimal marketing theme for educational language-learning ebooks.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: omorphos
Tags: custom-menu, featured-images, footer-widgets, custom-colors
*/

/* =========================================================
   CSS Custom Properties
   ========================================================= */

:root {
	/* Color palette */
	--color-bg:          #FAFAF9;
	--color-surface:     #FFFFFF;
	--color-border:      #E7E4DF;
	--color-text:        #1C1917;
	--color-muted:       #78716C;
	--color-stone-5:     #A8A29E;
	--color-stone-3:     #D6D3CF;
	--color-accent:      #2d5a8e;
	--color-accent-dark: #1e3f64;
	--color-accent-light:#e8f0f9;
	--color-accent-new:   #b84f00;

	/* Typography */
	--font-serif:     'Lora', Georgia, serif;
	--font-sans:      'DM Sans', system-ui, sans-serif;
	--font-size-xs:   0.75rem;
	--font-size-sm:   0.875rem;
	--font-size-base: 1rem;
	--font-size-lg:   1.125rem;
	--font-size-xl:   1.25rem;
	--font-size-2xl:  1.5rem;
	--font-size-3xl:  2rem;
	--font-size-4xl:  2.75rem;

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;

	/* Layout */
	--container-width:   1200px;
	--container-padding: 1.25rem;
	--border-radius:     6px;
	--border-radius-md:  8px;
	--border-radius-lg:  12px;

	/* Transitions */
	--transition: 150ms ease;


	/* cefr badge colors — emitted from omorphos_cefr_registry() (omorphos-books
	   inc/cefr-registry.php) on wp_head so CSS and the cover badge share one
	   source. Fallbacks kept here in case the plugin is inactive. */
	--color-cefr-a1: #1D2E87;
	--color-cefr-a2: #146171;
	--color-cefr-b1: #1C6E45;
	--color-cefr-b2: #8B7418;
	--color-cefr-c1: #865213;
	--color-cefr-c2: #772237;

	/* Shared section-variant tokens */
	--color-ink:        #1C1917;  /* alias of --color-text; explicit name for dark-bg variants */
	--color-off-white:  #F7F5F2;  /* slightly warmer than --color-bg; used by variant-b */
	--color-amber:      #BF7833;  /* honey-caramel; used by variant-c */
	--color-dark-brown: #3A1A07;  /* dark chocolate brown; used by variant-e */
	--color-natural:    #EDD5BF;  /* warm nude/natural; used by variant-f */

	/* CTA button tokens — global defaults so call-to-action__button-* work outside .gt-call-to-action-block */
	--btn-primary-bg:         var(--color-ink);
	--btn-primary-hover-bg:   #2A2520;

}

/* =========================================================
   Reset & Base
   ========================================================= */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: 1.65;
}

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

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent-dark);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	line-height: 1.25;
	font-family: var(--font-serif);
	font-weight: 700;
}

/* Base heading scale — h2 matches .section__title's size exactly (both
   2xl here, both bump to 3xl at 640px below) so a plain h2.wp-block-heading
   anywhere (not just inside .entry-content, which previously had its own
   scoped override) reads as the same visual weight as the site's styled
   section headers. h1/h3-h6 scale proportionally off that same anchor. */
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
	margin-top: 0;
	margin-bottom: var(--space-4);
}

ul, ol {
	padding-left: var(--space-6);
	margin-bottom: var(--space-4);
}

/* =========================================================
   Block gap — set via theme.json styles.spacing.blockGap (2rem).
   WordPress applies this as margin-block-start on all blocks.
   Use adjacent sibling CSS to adjust specific transitions.
   ========================================================= */

/* =========================================================
   Layout Utilities
   ========================================================= */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	white-space: nowrap;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Prevent any section from widening the page and hiding the container's right padding */
.site-main {
	overflow-x: clip;
}

/* =========================================================
   Site Header
   ========================================================= */

.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Admin bar — mobile bar is 46px tall */
.admin-bar .site-header {
	top: 46px;
}

.site-header__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding-block: var(--space-4);
}

.site-branding a {
	text-decoration: none;
	color: var(--color-text);
}
.site-branding .custom-logo-link img {
	max-height: 2rem;
	width: auto;
	height: auto;
}

.site-title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
}

.site-tagline {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0;
}

/* =========================================================
   Navigation
   ========================================================= */

.main-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3);
	width: 100%;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.main-navigation a {
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.main-navigation a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

/* =========================================================
   Site Search (header) — icon trigger, reveals an inline input
   ========================================================= */

.site-search {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	background: transparent;
	transition: border-color var(--transition), background var(--transition);
}

/* Open state becomes one connected pill — icon and input share a single
   border/background instead of two separately-styled elements sitting
   next to each other. */
.site-search--open {
	border-color: var(--color-border);
	background: var(--color-surface);
}

.site-search--open:focus-within {
	border-color: var(--color-accent);
}

.site-search__trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--color-muted);
	cursor: pointer;
	transition: color var(--transition), background var(--transition);
}

.site-search__trigger:hover {
	color: var(--color-accent);
	background: var(--color-accent-light);
}

/* Once open, the trigger is just the pill's leading icon — no more of
   its own circular hover background, so it reads as part of the input
   rather than a separate button glued on. */
.site-search--open .site-search__trigger {
	color: var(--color-accent);
	border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.site-search--open .site-search__trigger:hover {
	background: transparent;
}

.site-search__form {
	display: flex;
	align-items: center;
}

/* The trigger button now lives inside .site-search__form (so it can be a
   real <button type="submit"> once open, not just a JS-driven click
   handler) — the collapse/expand happens on the input alone, not the
   whole form, so the icon stays visible at every state. */
.site-search__input {
	width: 0;
	box-sizing: border-box;
	border: none;
	background: transparent;
	padding: var(--space-2) 0;
	font-size: var(--font-size-sm);
	font-family: var(--font-sans);
	color: var(--color-text);
	opacity: 0;
	transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

.site-search--open .site-search__input {
	/* min() keeps this from overflowing the header on narrow phones, where
	   220px plus the logo and trigger icon can exceed the viewport width. */
	width: min(220px, calc(100vw - 120px));
	padding-right: var(--space-3);
	opacity: 1;
}

.site-search__input:focus {
	outline: none;
}

/* =========================================================
   Site Footer
   ========================================================= */

.site-footer {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-12);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
	appearance: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	padding: 0.75em 1.5em;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	font-family: var(--font-sans);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn--primary {
	background: var(--btn-primary-bg);
	color: var(--color-surface);
	border-color: var(--btn-primary-bg);
}

.btn--primary:hover {
	background: var(--btn-primary-hover-bg);
	border-color: var(--btn-primary-hover-bg);
	color: var(--color-surface);
	text-decoration: none;
	transform: translateY(-2px);
}

.btn--outline {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.btn--outline:hover {
	background: var(--color-ink);
	color: var(--color-surface);
	text-decoration: none;
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	color: var(--color-muted);
	border-color: var(--color-border);
}

.btn--ghost:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	text-decoration: none;
	transform: translateY(-2px);
}

.btn--lg {
	padding: 1em 2em;
	font-size: var(--font-size-lg);
}

/* =========================================================
   Taxonomy Badges
   ========================================================= */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: var(--space-1) var(--space-3);
	border-radius: 999px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.badge--series   { background: #eef4ed; color: #2d6a4f; }
.badge--language { background: #e8f0f9; color: #2d5a8e; }
.badge--topic    { background: #fef3e2; color: #8b5e12; }
.badge--level    { background: #f3eef9; color: #6a3d9a; text-transform: none; } /* level codes are already uppercase in the string; keeps "Early B1" position prefix from being all-capped */
.badge--new        { background: #fff0e0; color: #b84f00; }
.badge--unpublished { background: #f1f5f9; color: #64748b; border: 1px dashed #94a3b8; }

/* Blog category chips — one color per category, matching the "Blog
   Featured Image Framework"'s six locked canvas colors exactly (same
   background tints as each category's featured-image canvas), so a
   category reads as the same visual identity whether it's the card's
   image background or its chip. Text color is each canvas's own "Source"
   hue from that framework (the CEFR/theme color it was tinted from) —
   Language Deep-Dives, Inside the Books, and For Educators have no such
   source hue (all three are neutral canvases by design), so their chip
   text shares one dark warm gray (#57534E) instead of each inventing its
   own — checked against WCAG AA (4.5:1) against each of those three
   canvases specifically, since the lightest of the three
   (Language Deep-Dives' #F7F5F2) failed at the sitewide --color-muted
   value (#78716C, 4.41:1) before being darkened to this one. Mapped from
   category
   slug via omorphos_blog_category_badge_class() (inc/blog.php); any
   category not in that map (e.g. Uncategorized) falls back to the
   generic .badge--topic amber above. */
.badge--cat-method-research     { background: #E3EEF0; color: #146171; }
.badge--cat-language-deep-dives { background: #F7F5F2; color: #57534E; }
.badge--cat-inside-the-books    { background: #E8E4DE; color: #57534E; }
.badge--cat-reading-guides      { background: #EFE9DC; color: #865213; }
.badge--cat-educators           { background: #E7E4E4; color: #57534E; }
.badge--cat-news-releases       { background: #DDE3E8; color: #2d5a8e; }

.badge:hover { opacity: 0.8; text-decoration: none; }

.badge__icon {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.badge__icon--svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.badge__icon--svg svg {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}

/* Recoloured SVG mask — same technique as .page-hero__icon--mask */
.badge__icon--mask {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	background-color: var(--lang-icon-recolor, currentColor);
	-webkit-mask-image: var(--lang-icon-svg);
	mask-image: var(--lang-icon-svg);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

/* Admin-only unpublished state — subtle opacity on the card */
.book-card--unpublished,
.series-card--unpublished,
.language-card--unpublished,
.post-card--unpublished { opacity: 0.65; }

/* =========================================================
   Book Card
   ========================================================= */

.book-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}

.book-card:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

.book-card__cover {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--color-surface);
}

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

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

.book-card__cover--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-border);
	font-size: 3rem;
}

.book-card__status-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}

.book-card__status-overlay span {
	background: #fff;
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--border-radius);
}

.book-card__corner-badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 1;
	box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.book-card--coming_soon .book-card__cover img {
	filter: grayscale(30%);
}

.book-card--coming_soon:hover .book-card__cover img {
	transform: none;
}

.book-card__body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-3);
	min-width: 0;
}

.book-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.book-card__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.book-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.book-card__title a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.book-card__romanization,
.series-card__romanization {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: var(--color-muted);
	margin-top: var(--space-1);
}

.book-card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0;
	flex: 1;
}

/* Description only belongs on the detailed layout — the compact card
   (grid or mobile list row) has no room for it at any viewport width. */
.book-card:not(.book-card--detailed) .book-card__excerpt {
	display: none;
}

.book-card__location {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0;
}

.book-card__location svg {
	flex-shrink: 0;
}

/* Same as the description — detailed layout only. */
.book-card:not(.book-card--detailed) .book-card__location {
	display: none;
}

.book-card__footer {
	margin-top: auto;
}

.book-card__footer .btn {
	width: 100%;
	justify-content: center;
	font-size: var(--font-size-sm);
	padding: 0.6em 1.25em;
	letter-spacing: 0.04em;
}

.book-card__release-date {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-accent);
	margin: 0;
}

.book-card__status-notice {
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 var(--space-2);
}

.book-series-position {
	/* Explicit size — nested inside a heading in both places it's used
	   (single-book.php's <h1>, content-book-card.php's <h2>), which
	   previously left it inheriting that heading's own large font-size
	   instead of a size of its own — reported live on single-book.php as
	   "way too big." --font-size-sm matches the sizing convention already
	   used for secondary book-card metadata (.book-card__location) — the
	   right register for the card context. Bumped back up specifically
	   for the single-book page below, where --font-size-sm alone read as
	   too small next to that page's own larger title. */
	font-size: var(--font-size-sm);
	font-weight: normal;
	font-style: italic;
	color: var(--color-muted);
	/* Breathing room from the title text directly above — nesting inside
	   a heading means this otherwise sits flush against that line with
	   no gap at all. */
	margin: var(--space-1) 0 0;
}

/* On the single-book page this sits directly under the title, in the
   same role as .single-book__romanization right above it — sized to
   match that sibling line rather than the smaller book-card default. */
.single-book__title .book-series-position {
	font-size: var(--font-size-lg);
}

/* =========================================================
   Book Card — detailed layout variant
   One book per row (not a multi-column grid), two-column card on
   desktop (cover left, title/label/status/description right), single
   stacked column on mobile. Used on series pages via the Asset Cards
   block's "Card layout: Detailed" setting. Reuses every compact-layout
   sub-element/token as-is — only the card's own flex direction and
   column widths change. See template-parts/content-book-card.php.
   ========================================================= */

/* Two classes (not just .books-grid--detailed) so this reliably beats the
   later, single-class desktop ".books-grid { grid-template-columns:
   repeat(auto-fill, ...) }" override further down — same specificity would
   otherwise let source order decide, and that rule comes after this one. */
.books-grid.books-grid--detailed {
	grid-template-columns: 1fr;
}

/* Large/full-screen viewports: two detailed cards side by side instead of
   one per row — each card still keeps its own internal cover-left/text-right
   two-column layout, so this is a grid of two-column cards, not a second
   level of columns inside a single row. */
@media ( min-width: 1280px ) {
	.books-grid.books-grid--detailed {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( min-width: 768px ) {
	.book-card--detailed {
		flex-direction: row;
		align-items: flex-start;
	}

	.book-card--detailed .book-card__cover {
		width: 240px;
		flex-shrink: 0;
	}

	.book-card--detailed .book-card__body {
		padding: var(--space-6);
	}
}

/* =========================================================
   Books Grid — mobile: 2 columns
   ========================================================= */

.books-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	width: 100%;
}

/* =========================================================
   Archive Layout (with sidebar) — mobile: stacked
   ========================================================= */

.archive-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: start;
}

.archive-sidebar {
	position: static;
}

/* ── Mobile filter trigger bar ── */
.filter-trigger-bar {
	display: none; /* shown only on mobile via media query below */
}

/* ── Filter drawer (bottom sheet, mobile only) ── */
.filter-drawer {
	/* On desktop the drawer wrapper is transparent — form sits inside .archive-sidebar */
}

.filter-drawer__close {
	display: none;
}

.filter-drawer-overlay {
	display: none;
}

/* ── Mobile overrides ── */
@media ( max-width: 767px ) {
	.archive-sidebar {
		display: contents; /* let .filter-drawer position itself fixed */
	}

	.filter-trigger-bar {
		display: flex;
		align-items: center;
		padding-bottom: var(--space-4);
	}

	.filter-trigger {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius);
		background: var(--color-surface);
		font-size: var(--font-size-sm);
		font-weight: 500;
		font-family: var(--font-sans);
		cursor: pointer;
		color: var(--color-text);
	}

	.filter-trigger__count {
		background: var(--color-accent);
		color: #fff;
		border-radius: 999px;
		font-size: 0.7rem;
		font-weight: 700;
		padding: 1px 6px;
		line-height: 1.4;
	}

	.filter-drawer {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 400;
		background: var(--color-surface);
		border-radius: 12px 12px 0 0;
		padding: var(--space-8) var(--space-4) var(--space-8);
		max-height: 80vh;
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform 280ms ease;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
	}

	.filter-drawer.is-open {
		transform: translateY(0);
	}

	.filter-drawer__close {
		display: block;
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
		background: none;
		border: none;
		font-size: 1.1rem;
		line-height: 1;
		cursor: pointer;
		color: var(--color-muted);
		padding: 4px 6px;
	}

	.filter-drawer-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 399;
	}

	.filter-drawer-overlay.is-visible {
		display: block;
	}

	/* ── Book grid: single-column horizontal list cards ──
	   Scoped to :not(.book-card--detailed) — the detailed layout variant
	   (series pages) keeps the normal stacked column + full-width cover on
	   mobile too, matching its desktop two-column treatment instead of the
	   compact grid's narrow 90px thumbnail row. */
	.books-grid {
		grid-template-columns: 1fr;
	}

	.book-card:not(.book-card--detailed) {
		flex-direction: row;
		height: auto;
	}

	.book-card:not(.book-card--detailed) .book-card__cover {
		width: 90px;
		flex-shrink: 0;
		aspect-ratio: 2 / 3;
		/* Transparent inset frame — the image itself is rounded (below), not
		   this container, so there's no flush edge for the card's own corner
		   radius to cut through. */
		margin: var(--space-2) 0 var(--space-2) var(--space-2);
		background: transparent;
	}

	.book-card:not(.book-card--detailed) .book-card__cover img {
		border-radius: var(--border-radius);
		display: block;
	}

	/* Move NEW/unpublished badge to bottom of cover (near body boundary) */
	.book-card:not(.book-card--detailed) .book-card__corner-badge {
		top: auto;
		bottom: var(--space-2);
		left: var(--space-2);
		/* No `right` — setting both left and right on an absolutely positioned
		   element with no explicit width stretches it to fill the span
		   between them, overriding the badge's normal fit-to-content sizing. */
		max-width: calc(100% - var(--space-4));
		font-size: 0.55rem;
		padding: 2px 6px;
		letter-spacing: 0.02em;
		white-space: normal;
		line-height: 1.2;
		text-align: center;
	}

	/* Narrow 90px cover: shrink and top-anchor the status pill so it
	   doesn't collide with the corner badge pinned to the bottom. */
	.book-card:not(.book-card--detailed) .book-card__status-overlay {
		align-items: flex-start;
		padding-top: var(--space-1);
	}

	.book-card:not(.book-card--detailed) .book-card__status-overlay span {
		font-size: 0.55rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		padding: 2px 6px;
		white-space: normal;
		text-align: center;
		max-width: calc(100% - var(--space-2));
		line-height: 1.25;
	}

	.book-card:not(.book-card--detailed) .book-card__body {
		padding: var(--space-3);
		gap: var(--space-2);
	}

	.book-card:not(.book-card--detailed) .book-card__title {
		font-size: var(--font-size-base);
	}

	.book-card__footer {
		margin-top: auto;
	}

	.book-card:not(.book-card--detailed) .book-card__footer .btn {
		min-width: 100px;
		align-self: flex-start;
		font-size: var(--font-size-xs);
		padding: 0.5em 1em;
	}

	/* Detailed layout on mobile: same thumbnail-left/text-right row as the
	   compact layout, just a bigger thumbnail (more room since it's one
	   card per row, not two-up) and none of the compact layout's space-
	   saving trims — excerpt/description, full-size title, and full-size
	   footer button all stay as they render on desktop. */
	.book-card--detailed {
		flex-direction: row;
		height: auto;
		align-items: flex-start;
	}

	.book-card--detailed .book-card__cover {
		width: 150px;
		flex-shrink: 0;
		/* Natural height — no forced 2:3 crop. Width is fixed to the column,
		   height follows the cover image's own aspect ratio. */
		aspect-ratio: auto;
		/* Transparent inset frame — the image itself is rounded (below), not
		   this container, so there's no flush edge/mismatched-height gap for
		   a visible background to show through. */
		margin: var(--space-3) 0 var(--space-3) var(--space-3);
		background: transparent;
	}

	.book-card--detailed .book-card__cover img {
		/* Base rule sets height:100% (needs a defined-height parent, which
		   this no longer is) — override to scale naturally with the width. */
		height: auto;
		border-radius: var(--border-radius);
		display: block;
	}

	.book-card--detailed .book-card__body {
		padding: var(--space-4);
	}
}

.archive-main {
	min-width: 0; /* prevent grid blowout */
}

.archive-main.is-loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 150ms ease;
}

.filter-group {
	margin-bottom: var(--space-6);
}


.filter__lang_region, .filter__cefr_abbr {
	text-transform: uppercase;
	font-weight: 700;
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	
}
.filter__cefr_abbr {
	width: 1.5em;
	text-align: center;
}
.filter-group__title {
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-3);
}

.filter-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.filter-group li {
	margin-bottom: var(--space-2);
}

.filter-group label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	cursor: pointer;
}

.filter-group input[type="checkbox"] {
	accent-color: var(--color-accent);
}

.filter-actions {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

/* =========================================================
   Single Book Page — mobile: stacked
   ========================================================= */

article.single-book {
	padding-block: var(--space-12);
}

.single-book__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: start;
}

.single-book__sidebar {
	max-width: 260px;
	margin-inline: auto;
}

.single-book__cover {
	/* Purely a layout wrapper — no border-radius/shadow/background of its
	   own (see the <img> rule below for why those live there instead).
	   Plain block + text-align (not display:flex) — a flex row's default
	   stretch/cross-axis behavior was interacting unpredictably with the
	   <img>'s own percentage sizing (reported live: image not reacting to
	   its actual container, no change on window resize). text-align:center
	   centers the inline-level <img> with zero flex ambiguity. */
	margin-bottom: var(--space-6);
	text-align: center;
	/* min-height:0 lets this shrink below the image's own intrinsic size
	   once .single-book__sidebar becomes a height-constrained flex column
	   (≥768px, see below) — without it a flex child won't shrink past its
	   content's natural size no matter how little room is actually left. */
	min-height: 0;
}

.single-book__cover img {
	/* max-height (not a forced height:100%) + auto width — the image
	   shrinks to fit whatever definite height .single-book__cover
	   actually has (only meaningful once the ≥768px sticky rules below
	   give it one via flex:1 1 auto; at narrower widths .single-book__cover
	   has no explicit height at all, so max-height is simply a no-op and
	   the image falls back to max-width instead), while width stays auto
	   so it's always derived from the image's own real intrinsic aspect
	   ratio — no object-fit, no cropping, no distortion. This is what
	   "reacting to its container" actually requires: the element's own
	   rendered box always equals the real visible picture, whichever
	   constraint (max-width or max-height) ends up binding. */
	display: block;
	margin-inline: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	border-radius: var(--border-radius-lg);
	box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}

.single-book__subtitle {
	font-size: var(--font-size-xl);
	color: var(--color-muted);
	margin-bottom: var(--space-4);
	font-style: italic;
}

.single-book__title {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-2);
}

.single-book__romanization {
	display: block;
	font-size: var(--font-size-lg);
	font-weight: 400;
	color: var(--color-muted);
	margin-top: var(--space-1);
}

.single-book__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

.single-book__description {
	font-size: var(--font-size-lg);
	line-height: 1.75;
	margin-bottom: var(--space-8);
}

.single-book__back-cover-summary {
	font-size: var(--font-size-base);
	line-height: 1.75;
	color: var(--color-text);
	margin-bottom: var(--space-8);
}

.single-book__back-cover-summary-heading {
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-3);
}

.single-book__specs {
	margin-bottom: var(--space-8);
}

.single-book__specs-heading {
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-3);
}

.single-book__specs-list {
	margin: 0;
	border-top: 1px solid var(--color-border);
}

.single-book__specs-row {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
}

.single-book__specs-row dt {
	flex: 0 0 40%;
	color: var(--color-muted);
}

.single-book__specs-row dd {
	margin: 0;
	color: var(--color-text);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Colorized CEFR chip — same --color-cefr-* custom properties as the cover
   badge / level-range component (level-range.php), so the Reading Level
   row's color always matches the rest of the site for that level. */
.cefr-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0.15em 0.5em;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.cefr-chip--a1 { background-color: var(--color-cefr-a1); }
.cefr-chip--a1-a2 { background: linear-gradient(135deg, var(--color-cefr-a1), var(--color-cefr-a2)); }
.cefr-chip--a2 { background-color: var(--color-cefr-a2); }
.cefr-chip--a2-b1 { background: linear-gradient(135deg, var(--color-cefr-a2), var(--color-cefr-b1)); }
.cefr-chip--b1 { background-color: var(--color-cefr-b1); }
.cefr-chip--b1-b2 { background: linear-gradient(135deg, var(--color-cefr-b1), var(--color-cefr-b2)); }
.cefr-chip--b2 { background-color: var(--color-cefr-b2); }
.cefr-chip--b2-c1 { background: linear-gradient(135deg, var(--color-cefr-b2), var(--color-cefr-c1)); }
.cefr-chip--c1 { background-color: var(--color-cefr-c1); }
.cefr-chip--c1-c2 { background: linear-gradient(135deg, var(--color-cefr-c1), var(--color-cefr-c2)); }
.cefr-chip--c2 { background-color: var(--color-cefr-c2); }

.single-book__specs-cefr-label {
	font-weight: 600;
}

/* Info-icon tooltip on a spec row's value (currently: Print Length's
   English-equivalent reading-investment comparison — see
   omorphos_book_specs()'s own docblock for why this is a tooltip and not
   its own row). Real <button> (keyboard-focusable) + :hover/:focus-within
   reveal, not a bare [title] attribute — title has no reliable keyboard
   path and never appears on touch at all. */
.single-book__specs-tooltip {
	position: relative;
	display: inline-flex;
}

.single-book__specs-tooltip-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--color-muted);
	font-size: var(--font-size-base);
	line-height: 1;
	cursor: help;
}
.single-book__specs-tooltip-trigger:hover,
.single-book__specs-tooltip-trigger:focus-visible {
	color: var(--color-accent);
}

.single-book__specs-tooltip-text {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 220px;
	padding: var(--space-2) var(--space-3);
	background: var(--color-ink, #1C1917);
	color: #fff;
	font-size: var(--font-size-xs);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition);
	z-index: 5;
	/* Tap-to-open on touch (no hover) — a focusable trigger + :focus-within
	   on the wrapper covers both mouse hover and keyboard/touch focus. */
	pointer-events: none;
}

.single-book__specs-tooltip:hover .single-book__specs-tooltip-text,
.single-book__specs-tooltip:focus-within .single-book__specs-tooltip-text {
	opacity: 1;
	visibility: visible;
}

.single-book__artifacts {
	margin-bottom: var(--space-8);
}

.single-book__artifacts-heading {
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-2);
}

.single-book__artifacts-intro {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin-bottom: var(--space-4);
	max-width: 60ch;
}

/* Auto-fill grid, not a single vertical list — a book with a long tail of
   different artifact types (a dozen+ rows) read as an overly long column
   before; this reflows into as many ~220px-minimum columns as the
   container width allows (1 on mobile, 2-3 on a wider details pane),
   collapsing back to one automatically at narrow widths with no media
   query needed. */
.single-book__artifacts-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	/* row-gap column-gap — was `var(--space-3) var(--space-5)`, but
	   --space-5 doesn't exist in this theme's scale (3/4/6/8 only), so the
	   column gap silently fell back to nothing and columns read as too
	   tight/cramped. */
	row-gap: var(--space-6);
	column-gap: var(--space-8);
}

.single-book__artifacts-item {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	min-width: 0;
}

/* Bold ink-colored text, not a filled color pill — the accent-blue badge
   read as its own separate UI element (a status/tag chip) rather than part
   of the sentence "22× Notebook Entries", which lost readers trying to
   parse what the number even meant. Plain bold text sitting inline with
   the label reads as one unit instead. */
.single-book__artifacts-count {
	flex: 0 0 auto;
	min-width: 2rem;
	text-align: right;
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}

.single-book__artifacts-text {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.single-book__artifacts-label {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
}

.single-book__artifacts-desc {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* "Buy Now" + "Request a Free Sample" sit side by side as the page's two
   primary purchase-decision actions — see single-book.php's sidebar.
   Natural-width buttons in a centered, wrapping flex row, same shape as
   every other CTA group on the site (.hero__actions,
   .call-to-action__actions) — not stretched to fill the column. An
   earlier version force-stretched both to 100% width, then tried a
   natural-width row, then a "Buy Now" popover — all three didn't land;
   this settled back on full-width/stacked, which was the one version
   reported as fine on its own (the popover interaction was the actual
   problem, not the width). */
.single-book__cta-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.retailer-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.retailer-buttons .btn {
	width: 100%;
	text-align: center;
}

.single-book__sample-btn {
	width: 100%;
	/* A bit of extra breathing room above, on top of .single-book__cta-row's
	   own uniform gap — Request a Free Sample is a different kind of
	   action than Buy/More retailers (reported live: sitting inside the
	   purchase cluster's own spacing made it read as part of that group).
	   Small enough not to look like a mistake if it's ever the only
	   button in the row (no retailer links configured yet). */
	margin-top: var(--space-2);
}

.retailer-buttons__disclosure {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* Featured retailer buttons (max 2 — see
   omorphos_get_featured_retailer_links()) + the "More retailers" trigger,
   same full-width/stacked treatment as the sample button above. */
.single-book__buy-btn {
	width: 100%;
	text-align: center;
}

/* Plain text link, not a .btn — a full-height button here competed with
   the cover for the sidebar's limited vertical space (the cover flexes
   to fill whatever's left after the CTA row, see .single-book__cover in
   the ≥768px rules below), and "More retailers" is a secondary,
   lower-frequency action that doesn't need equal visual weight with
   Buy/Sample anyway. */
.single-book__more-retailers-btn {
	display: block;
	width: 100%;
	padding: var(--space-1) 0;
	background: none;
	border: none;
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	text-decoration: underline;
	cursor: pointer;
}

.single-book__more-retailers-btn:hover {
	color: var(--color-accent);
}

.single-book__retailer-disclosure {
	/* No margin-top — this now sits inside .single-book__cta-row's own
	   flex column, right after the purchase cluster it's disclosing
	   (moved there from after the whole row, including Request a Free
	   Sample, which it was never actually about). The row's own `gap`
	   already provides spacing; an extra margin here would double up. */
	margin: 0;
	font-size: var(--font-size-xs);
	line-height: 1.4;
	color: var(--color-muted);
}

/* =========================================================
   "More retailers" modal (single-book.php)
   ========================================================= */

.retailer-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
	background: rgba(0,0,0,0.5);
}

.retailer-modal-overlay[hidden] {
	display: none;
}

.retailer-modal {
	position: relative;
	width: 100%;
	max-width: 380px;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--color-surface);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	padding: var(--space-6);
}

.retailer-modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--color-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.retailer-modal__close:hover {
	background: var(--color-accent-light);
	color: var(--color-accent);
}

.retailer-modal__title {
	font-size: var(--font-size-lg);
	margin: 0 0 var(--space-4);
	padding-right: var(--space-8);
}

.retailer-modal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.retailer-modal__item {
	border-bottom: 1px solid var(--color-border);
}

.retailer-modal__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-1);
	color: var(--color-text);
	text-decoration: none;
}

.retailer-modal__link:hover {
	color: var(--color-accent);
}

.retailer-modal__name {
	font-size: var(--font-size-base);
}

.retailer-modal__arrow {
	color: var(--color-muted);
	flex-shrink: 0;
}

.single-book__contributors {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

/* =========================================================
   Homepage — Section headings
   ========================================================= */

.section {
	padding-block: var(--space-12);
}

.section--alt {
	background: var(--color-surface);
}

.section__header {
	margin-bottom: var(--space-8);
}

.section__eyebrow {
	font-size: var(--font-size-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	font-weight: 600;
	display: block;
	margin-bottom: var(--space-2);
}

.section__title {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--space-3);
}

.section__subtitle {
	font-size: var(--font-size-base);
	color: var(--color-muted);
}

/* =========================================================
   Homepage — Series Overview
   ========================================================= */

.series-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.series-card {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	background: var(--color-bg);
	transition: box-shadow var(--transition);
}

.series-card:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.series-card__name {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-weight: 700;
	margin-bottom: var(--space-2);
}

.series-card__name a {
	color: var(--color-text);
}

.series-card__name a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.series-card__translation {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	font-style: italic;
	margin-top: calc( var(--space-2) * -1 );
	margin-bottom: var(--space-2);
}

.series-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}

.series-card__description {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin-bottom: var(--space-4);
}

.series-card__meta {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	letter-spacing: 0.04em;
}

/* =========================================================
   Homepage — Learning Approach
   ========================================================= */

.principles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.principle-card {
	text-align: center;
}

.principle-card__icon {
	font-size: 2.5rem;
	margin-bottom: var(--space-4);
	display: block;
}

.principle-card__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-3);
}

.principle-card__description {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.7;
}

/* =========================================================
   Taxonomy Archive Header
   ========================================================= */

/* =========================================================
   Breadcrumbs (inc/breadcrumbs.php) — rendered inside
   .taxonomy-header/.page-hero (their own flex `gap` already spaces it
   from the eyebrow below, no margin needed there) and directly inside
   single.php/single-book.php's plain-block containers (margin-bottom
   below handles spacing there instead — the small doubled gap this
   creates in the flex contexts reads fine as slightly more separation
   from the title, not a bug).
   ========================================================= */

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin-bottom: var(--space-2);
}

/* single.php/single-book.php's containers are plain block flow (no flex
   `gap` doing the spacing the way .taxonomy-header/.page-hero__inner
   already do), so .breadcrumbs' own small default margin read as too
   tight against the eyebrow/title right below it — direct feedback,
   screenshot showed the trail nearly touching "NEWS & RELEASES." Bumped
   just for these two contexts rather than raising the shared default,
   which would double up with the flex-gap contexts' existing spacing. */
.single-post__container .breadcrumbs,
.single-book .breadcrumbs,
.page-doc__container .breadcrumbs {
	margin-bottom: var(--space-6);
}

.breadcrumbs__link {
	color: var(--color-muted);
	text-decoration: none;
}

.breadcrumbs__link:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.breadcrumbs__separator {
	color: var(--color-stone-5);
}

.breadcrumbs__current {
	color: var(--color-text);
	font-weight: 500;
}

.taxonomy-header {
	padding-block: var(--space-8) var(--space-6);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.taxonomy-header .container {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.taxonomy-header__eyebrow {
	font-size: var(--font-size-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	font-weight: 600;
	margin: 0;
}

.taxonomy-header__title {
	font-size: var(--font-size-3xl);
	margin: 0;
}

.taxonomy-header__romanization {
	display: block;
	font-size: var(--font-size-lg);
	font-weight: 400;
	color: var(--color-muted);
	margin-top: var(--space-1);
}

.taxonomy-header__subtitle {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	font-style: italic;
	margin: var(--space-1) 0 0;
}

.taxonomy-header__description {
	font-size: var(--font-size-base);
	color: var(--color-muted);
	max-width: 680px;
	margin: 0;
}

/* =========================================================
   Page Content
   ========================================================= */

.page-content {
	padding-block: var(--space-12);
}

.entry-header {
	margin-bottom: var(--space-8);
}

.entry-title {
	font-size: var(--font-size-3xl);
}

.entry-content {
	max-width: 720px;
}

.entry-content--full {
	max-width: none;
}

/* Block gap — theme.json sets --wp--style--block-gap (2rem).
   Zero bottom margins so browser defaults don't stack with it.
   First child gets no top gap. */
.entry-content > * {
	margin-block-end: 0;
}
.entry-content > * + * {
	margin-block-start: var(--wp--style--block-gap, 2rem);
}

/* Consecutive paragraphs need tighter spacing than the full block gap. */
.entry-content > p + p {
	margin-block-start: var(--space-4);
}

/* Headings: larger gap above, tighter gap below their content.
   Font-size comes from the base h1-h6 scale now (see top of file) — these
   were previously the only place h2/h3 got sized at all, which meant a
   wp-block-heading outside .entry-content fell back to unstyled browser
   defaults. Kept scoped here for the margin only. */
.entry-content > h2,
.entry-content > .wp-block-heading:is(h2) {
	margin-block-start: var(--space-12);
}
.entry-content > h3,
.entry-content > .wp-block-heading:is(h3) {
	margin-block-start: var(--space-8);
}

/* Images */
.entry-content img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Lists */
.entry-content ul,
.entry-content ol {
	padding-inline-start: var(--space-6);
}
.entry-content li + li {
	margin-block-start: var(--space-2);
}

/* =========================================================
   Author Card
   ========================================================= */

.author-card {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
}

.author-card + .author-card {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.author-card__avatar {
	flex-shrink: 0;
}

.author-card__avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.author-card--small .author-card__avatar img {
	width: 40px;
	height: 40px;
}

.author-card__name {
	font-weight: 700;
	margin: 0 0 var(--space-1);
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.author-card__name a { color: var(--color-text); }
.author-card__name a:hover { color: var(--color-accent); text-decoration: none; }

.author-card__role {
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.author-card__meta {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0 0 var(--space-2);
}

.author-card__bio {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: var(--space-2) 0 var(--space-3);
	line-height: 1.6;
}

.author-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.author-card__link {
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* =========================================================
   No Results
   ========================================================= */

.no-results {
	padding: var(--space-12);
	text-align: center;
	color: var(--color-muted);
}

/* =========================================================
   404 Page
   ========================================================= */

.error-404__content {
	padding-block: var(--space-4) var(--space-16);
}

/* Rendered inside .taxonomy-header's own container (via page-header.php's
   after_html slot) — that container is already flex-column with a
   consistent gap between eyebrow/title/description/this, so no extra
   margin is needed here, just the row layout for the buttons themselves. */
.error-404__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Same pill-with-icon shape as the header's .site-search--open, just
   always in that "open" state (no icon-trigger collapse/expand — this
   page's whole point is the search box) and sized up to read as the
   page's primary search entry point rather than a compact header
   control. */
.error-404__search-form {
	display: flex;
	align-items: center;
	max-width: 480px;
	margin-bottom: var(--space-6);
	border: 2px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	transition: border-color var(--transition);
}

.error-404__search-form:focus-within {
	border-color: var(--color-accent);
}

.error-404__search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border: none;
	background: transparent;
	color: var(--color-muted);
	cursor: pointer;
	transition: color var(--transition);
}

.error-404__search-icon:hover,
.error-404__search-form:focus-within .error-404__search-icon {
	color: var(--color-accent);
}

.error-404__search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.9em 1em 0.9em 0;
	border: none;
	background: transparent;
	font-size: var(--font-size-lg);
	font-family: var(--font-sans);
	color: var(--color-text);
}

.error-404__search-input:focus {
	outline: none;
}

.error-404__books-heading {
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-4);
}

/* =========================================================
   Hero — mobile: single column
   ========================================================= */

.hero {
	border-bottom: 1px solid var(--color-border);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	padding-top: 2rem;
	padding-bottom: 3rem;
}

.hero__title {
	font-family: var(--font-serif);
	font-size: clamp(1.875rem, 6vw, 2.625rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.hero__title strong {
	font-weight: 500;
	font-style: normal;
}

/* Typewriter cursor — only visible once JS adds .is-animating */
.hero__lang-word.is-animating::after {
	content: '|';
	font-weight: 300;
	font-style: italic;
	color: var(--color-muted);
	margin-left: 1px;
	animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

.hero__description {
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--color-muted);
	margin: 0 0 1.125rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 2rem;
}

.hero__text-link {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.hero__text-link:hover {
	color: var(--color-text);
}

/* Language panel — mobile: horizontal chips below copy */
.hero__languages {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	width: 100%;
	container-type: inline-size;
	container-name: lang-panel;
}

/* Hide the region label when the panel is too narrow to show it cleanly.
   The region stays in the <a title> attribute for a11y/tooltip coverage. */
@container lang-panel (max-width: 240px) {
	.lang-chip__region {
		display: none;
	}
}

.hero__languages-label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

.hero__lang-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Active chip set by JS */
.lang-chip.is-active {
	border-color: var(--color-text);
	background: var(--color-bg);
	font-weight: 500;
}
.lang-chip__region {
	font-size: 0.6875rem;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* =========================================================
   Pull quote band
   ========================================================= */

.pull-quote-band {
	padding: 3rem 0;
	border-bottom: 1px solid var(--color-border);
}

.pull-quote-band__inner {
	display: grid;
	grid-template-columns: 3px 1fr;
	gap: 1.5rem;
	align-items: start;
}

.pull-quote-band__rule {
	width: 3px;
	min-height: 60px;
	align-self: stretch;
	background: var(--color-stone-3);
	border-radius: 2px;
}

.pull-quote-band__text {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.55;
	color: var(--color-text);
	margin: 0 0 1.25rem;
}

.pull-quote-band__attribution {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-stone-5);
	margin: 0;
}

/* =========================================================
   What we do — mobile: single column, nav hidden
   ========================================================= */

.what-we-do {
	border-bottom: 1px solid var(--color-border);
}

.what-we-do__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

.what-we-do__nav {
	display: none;
}

.what-we-do__nav-label {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-stone-5);
	margin: 0 0 1.25rem;
}

.what-we-do__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.what-we-do__nav-link {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-muted);
	text-decoration: none;
	padding: 5px 0 5px 12px;
	border-left: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}

.what-we-do__nav-link:hover,
.what-we-do__nav-link.is-active {
	color: var(--color-text);
	border-left-color: var(--color-text);
}

.what-we-do__heading {
	font-family: var(--font-serif);
	font-size: 1.625rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.2;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.what-we-do__copy {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.85;
	color: var(--color-muted);
	margin: 0 0 1.125rem;
}

.differentiators {
	margin-top: 2rem;
}

.differentiator {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 1.25rem;
	align-items: start;
	padding: 1.25rem 0;
	border-top: 1px solid var(--color-border);
}

.differentiator:last-child {
	border-bottom: 1px solid var(--color-border);
}

.differentiator__num {
	font-family: var(--font-serif);
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--color-stone-3);
	padding-top: 2px;
}

.differentiator__title {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	margin: 0 0 0.3125rem;
}

.differentiator__desc {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--color-muted);
	margin: 0;
}

/* =========================================================
   Upcoming Releases
   ========================================================= */

.upcoming-list {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.upcoming-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
}

.upcoming-row--new-series .upcoming-row__identity {
	color: var(--color-accent);
}

.upcoming-row__identity {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	min-width: 0;
}

.upcoming-row__new-badge {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent-light);
	background: var(--color-accent-new);
	padding: 2px 8px;
	border-radius: var(--border-radius);
	white-space: nowrap;
	flex-shrink: 0;
}

.upcoming-row__title {
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--color-text);
}

.upcoming-row__volume {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	white-space: nowrap;
}

.upcoming-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.upcoming-row__date {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	font-variant-numeric: tabular-nums;
}

.upcoming-row--new-series .upcoming-row__date {
	font-weight: 600;
	color: var(--color-text);
}

.upcoming-cta {
	text-align: center;
	padding-top: var(--space-4);
}

/* =========================================================
   Email signup — mobile: single column
   ========================================================= */

/* Email signup section (template-parts/email-capture.php) — a trigger for
   the shared newsletter modal, not its own form; see that file's own
   docblock for the 2026-08-07 consolidation. Everything the old inline
   form needed (input/consent/honeypot/feedback states) is gone — the
   modal owns all of that now. */
.email-signup__trigger-wrap {
	margin-top: var(--space-6);
}

.email-signup__btn {
	margin-bottom: var(--space-3);
}

.email-signup__fine-print {
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: 1.6;
	margin: 0;
	text-align: left;
}

/* Dark variant backgrounds (A = ink, E = dark brown) */
.variant-a .email-signup__fine-print,
.variant-e .email-signup__fine-print {
	color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   Footer — mobile: single column
   ========================================================= */

.site-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-border);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	padding-top: 1.75rem;
}

.footer-brand__logo {
	margin-bottom: 0.625rem;
	opacity: 0.5;
}

.footer-brand__logo img,
.footer-brand__logo svg {
	height: 28px;
	width: auto;
	display: block;
}

.footer-brand__name {
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 0.625rem;
}

.footer-brand__name em {
	font-style: italic;
	color: var(--color-stone-5);
}

.footer-brand__tagline {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--color-stone-5);
	line-height: 1.7;
	max-width: 180px;
	margin: 0;
}

.footer-col__heading {
	font-family: var(--font-sans);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-stone-3);
	margin: 0 0 0.875rem;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5625rem;
}

.footer-col ul a {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 300;
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.footer-col ul a:hover {
	color: var(--color-text);
}

.footer-copy {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	color: var(--color-stone-3);
	margin: 0;
}

/* =========================================================
   Lang chip — shared component
   ========================================================= */

.lang-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: 2rem;
	background: var(--color-surface);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.lang-chip:hover {
	border-color: var(--color-text);
	background: var(--color-bg);
	text-decoration: none;
}

.lang-chip__icon {
	font-size: 1.1em;
	line-height: 1;
}

/* Inline SVG icon in a chip — fixed px so font-size:0 doesn't collapse em units */
.lang-chip__icon--svg {
	font-size: 0;
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	flex-shrink: 0;
}

.lang-chip__icon--svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Recoloured SVG mask — same technique as .page-hero__icon--mask */
.lang-chip__icon--mask {
	font-size: 0;
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	flex-shrink: 0;
	background-color: var(--lang-icon-recolor, currentColor);
	-webkit-mask-image: var(--lang-icon-svg);
	mask-image: var(--lang-icon-svg);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

/* =========================================================
   Language / Series landing page
   ========================================================= */

.page-hero {
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-8) var(--space-6);
	background: var(--color-surface);
}

.page-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.page-hero__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.page-hero__icon {
	font-size: 2.5rem;
	line-height: 1;
}

/* SVG icon: emoji font-size doesn't apply; constrain the inline SVG directly */
.page-hero__icon--svg {
	font-size: 0;
	display: block;
	width: 56px;
	height: 56px;
}

.page-hero__icon--svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Recoloured icon: SVG used as luminance mask; span is coloured by --lang-icon-recolor */
.page-hero__icon--mask {
	font-size: 0;
	display: block;
	width: 56px;
	height: 56px;
	background-color: var(--lang-icon-recolor, currentColor);
	-webkit-mask-image: var(--lang-icon-svg);
	mask-image: var(--lang-icon-svg);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

.page-hero__title {
	font-size: clamp(1.875rem, 5vw, 3.25rem);
	line-height: 1.25;
    font-family: var(--font-serif);
    font-weight: 700;
	color: var(--color-text);
	margin: 0;
}

.page-hero__romanization {
	display: block;
	font-size: clamp(1rem, 2.5vw, 1.375rem);
	font-weight: 400;
	color: var(--color-muted);
	margin-top: var(--space-1);
}

.page-hero__subtitle {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-style: italic;
	color: var(--color-muted);
	margin: var(--space-2) 0 0;
}


.page-hero__description {
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-muted);
	max-width: 56ch;
	margin: 0;
}

/* Page lead — rich text shown in hero directly below the title */
.page-hero__lead {
	font-family: var(--font-sans);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text);
	max-width: 68ch;
	margin: 0;
}

.page-hero__lead p,
.page-hero__lead .section__description {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0 0 1.4em;
}

.page-hero__lead p:last-child,
.page-hero__lead .section__description:last-child {
	margin-bottom: 0;
}

.page-hero__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.page-content-section {
	padding-block: var(--space-8);
}

.page-content-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: start;
}

/* Two-column layout when sidebar is active — kicks in at 768px */
@media ( min-width: 768px ) {
	.page-content-section--has-sidebar .page-content-layout {
		grid-template-columns: 1fr 280px;
	}
}

.page-main-content {
	min-width: 0; /* prevent grid blowout */
}

.page-sidebar {
	min-width: 0;
}

.lang-books {
	background: var(--color-bg);
}

.lang-books__browse-link {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	color: var(--color-muted);
	text-decoration: none;
}

.lang-books__browse-link:hover {
	color: var(--color-text);
}

.lang-switcher-bar {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-6);
	background: var(--color-surface);
}

.lang-switcher-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.lang-switcher-bar__label {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.lang-switcher-bar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* =========================================================
   Cookie consent banner
   ========================================================= */

.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
	transform: translateY(100%);
	transition: transform 280ms ease;
}

.cookie-banner.is-visible {
	transform: translateY(0);
}

.cookie-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-4);
}

.cookie-banner__message {
	flex: 1 1 240px;
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0;
	line-height: 1.6;
}

/* When consent is already accepted, update the message */
.cookie-banner__message[data-state="accepted"]::before {
	content: 'You have accepted cookies. ';
	font-weight: 500;
	color: var(--color-text);
}

.cookie-banner__actions {
	display: flex;
	gap: var(--space-3);
	flex-shrink: 0;
}

/* Ghost button inside cookie banner — thinner 1px border */
.cookie-banner .btn--ghost {
	border-width: 1px;
}

.cookie-banner .btn--ghost:hover {
	border-color: var(--color-text);
	color: var(--color-text);
	transform: none;
}

/* Small button size used in the banner */
.btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--font-size-sm);
}

/* Legal nav in footer (cookie prefs, delete data, privacy policy) */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-4);
	align-items: center;
}

.footer-legal__link {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	color: var(--color-stone-3);
	text-decoration: none;
	transition: color var(--transition);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.footer-legal__link:hover {
	color: var(--color-muted);
}

/* =========================================================
   Admin utilities
   ========================================================= */

.admin-edit-link {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--color-stone-5);
	text-decoration: none;
	border-bottom: 1px dashed var(--color-stone-3);
	padding-bottom: 1px;
	white-space: nowrap;
	align-self: center;
}

.admin-edit-link:hover {
	color: var(--color-text);
	border-bottom-color: var(--color-text);
}

.admin-section-actions {
	margin-top: var(--space-6);
	text-align: center;
}

/* =========================================================
   Assessment modal
   ========================================================= */

/* Step enter / exit animations */
@keyframes assessmentOverlayIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes assessmentModalIn {
	from { opacity: 0; transform: translateY( 12px ) scale( 0.98 ); }
	to   { opacity: 1; transform: translateY( 0 )    scale( 1 ); }
}

@keyframes assessmentFadeIn {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@keyframes assessmentFadeOut {
	from { opacity: 1; transform: translateY( 0 ); }
	to   { opacity: 0; transform: translateY( -4px ); }
}

/* Step transitions — only used for changes once the modal is already open */
.assessment-step,
.assessment-checking {
	animation: assessmentFadeIn 220ms ease forwards;
}

/* Prior result: renders at opacity 0 first (height locks in), then transitions
   to visible once .is-visible is added via requestAnimationFrame. */
.assessment-prior-result {
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity 280ms ease, transform 280ms ease;
}

.assessment-prior-result.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* Three-dot loading indicator shown while checking for a prior result */
.assessment-checking {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-12) var(--space-6);
}

@keyframes assessmentDotPulse {
	0%, 80%, 100% { opacity: 0.25; transform: scale( 0.75 ); }
	40%           { opacity: 1;    transform: scale( 1 ); }
}

.assessment-checking__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	animation: assessmentDotPulse 1.2s ease-in-out infinite;
}

.assessment-checking__dot:nth-child(2) { animation-delay: 0.2s; }
.assessment-checking__dot:nth-child(3) { animation-delay: 0.4s; }

/* Wraps the domain title + options; fades in on mount, out when .is-leaving.
   Must be a real flex child (flex: 1) so the options list still fills space. */
.assessment-domain-content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: assessmentFadeIn 220ms ease forwards;
}

.assessment-domain-content.is-leaving {
	animation: assessmentFadeOut 180ms ease forwards;
}

.assessment-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(28, 25, 23, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	backdrop-filter: blur(2px);
	animation: assessmentOverlayIn 200ms ease forwards;
}

.assessment-modal {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	width: 100%;
	max-width: 620px;
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0,0,0,0.15);
	display: flex;
	flex-direction: column;
	animation: assessmentModalIn 250ms ease forwards;
}

/* Fixed header row: language name + close button */
.assessment-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
	gap: var(--space-3);
}

.assessment-modal__lang {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
	letter-spacing: 0.01em;
}

.assessment-modal__close {
	background: none;
	border: none;
	font-size: 1.125rem;
	color: var(--color-muted);
	cursor: pointer;
	padding: var(--space-1);
	line-height: 1;
	transition: color var(--transition);
	flex-shrink: 0;
}

.assessment-modal__close:hover {
	color: var(--color-text);
}

/* Body area: fills remaining height, scrolls when content overflows */
.assessment-modal > .assessment-step,
.assessment-modal > .assessment-prior-result {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--space-6);
}
.assessment-modal > .assessment-step.assessment-step--question {
	padding: 0;
}
/* Question step: internal flex layout — step indicator + title pinned at top,
   options scroll in the middle, actions pinned at bottom. */
.assessment-step--question {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.assessment-step--question .assessment-steps {
	flex-shrink: 0;
	padding: var(--space-6) var(--space-6) 0;
	margin-bottom: 0;
}

.assessment-step--question .assessment-step__title {
	flex-shrink: 0;
	padding: var(--space-4) var(--space-6) var(--space-2);
	margin: 0;
}

/* .assessment-domain-content (its parent) is flex:1 — this just needs to scroll */
.assessment-step--question .assessment-options-wrap {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.assessment-options__instruction {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	padding: var(--space-3) var(--space-6) var(--space-2);
	margin: 0;
}

.assessment-step--question .assessment-options {
	margin: 0;
	padding: 0;
}

.assessment-step--question .assessment-error,
.assessment-step--question .assessment-step__saving {
	flex-shrink: 0;
	padding: var(--space-2) var(--space-6) 0;
}

.assessment-step--question .assessment-step__actions {
	flex-shrink: 0;
	padding: var(--space-4) var(--space-6) var(--space-6);
	margin-top: 0;
	border-top: 1px solid var(--color-border);
}

/* Named step indicator */
.assessment-steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	margin-bottom: var(--space-6);
}

.assessment-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
	gap: var(--space-1);
}

/* Connector line between items */
.assessment-steps__item + .assessment-steps__item::before {
	content: '';
	position: absolute;
	top: 13px;
	right: calc(50% + 14px);
	left: calc(-50% + 14px);
	height: 2px;
	background: var(--color-border);
}

.assessment-steps__item--done + .assessment-steps__item::before,
.assessment-steps__item--done + .assessment-steps__item--active::before {
	background: var(--color-accent);
}

.assessment-steps__circle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	border: 2px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-muted);
	transition: all 200ms ease;
	position: relative;
	z-index: 1;
}

.assessment-steps__item--active .assessment-steps__circle {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: #fff;
}

.assessment-steps__item--done .assessment-steps__circle {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: #fff;
	font-size: 0.875rem;
}

.assessment-steps__label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted);
	text-align: center;
	max-width: 64px;
	line-height: 1.3;
}

.assessment-steps__item--active .assessment-steps__label {
	color: var(--color-accent);
}

/* Step shared */
.assessment-step__meta {
	font-size: var(--font-size-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 var(--space-3);
}

.assessment-step__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-text);
	margin: 0 0 var(--space-6);
}

.assessment-step__subtitle {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: calc(-1 * var(--space-4)) 0 var(--space-6);
}

.assessment-step__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.assessment-step__actions--result {
	flex-direction: column;
	align-items: stretch;
}

/* Language selector */
.assessment-language-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.assessment-language-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	font-weight: 400;
	color: var(--color-text);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--transition), background var(--transition);
}

.assessment-language-btn:hover {
	border-color: var(--color-accent);
	background: var(--color-accent-light);
}

.assessment-language-btn__icon {
	font-size: 1.25rem;
	line-height: 1;
}

.assessment-language-btn__icon--img {
	display: block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.assessment-language-btn__icon--svg {
	display: block;
	width: 1.5em;
	height: 1.5em;
	flex-shrink: 0;
}

.assessment-language-btn__icon--svg svg {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}

/* Recoloured SVG mask — same technique as .page-hero__icon--mask */
.assessment-language-btn__icon--mask {
	display: block;
	width: 1.5em;
	height: 1.5em;
	flex-shrink: 0;
	background-color: var(--lang-icon-recolor, currentColor);
	-webkit-mask-image: var(--lang-icon-svg);
	mask-image: var(--lang-icon-svg);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

.assessment-modal__lang-icon {
	display: block;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.assessment-modal__lang-icon--svg {
	border-radius: 0;
}

.assessment-modal__lang-icon--svg svg {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}

/* Recoloured SVG mask — same technique as .page-hero__icon--mask */
.assessment-modal__lang-icon--mask {
	border-radius: 0;
	background-color: var(--lang-icon-recolor, currentColor);
	-webkit-mask-image: var(--lang-icon-svg);
	mask-image: var(--lang-icon-svg);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

/* Domain questions — full-width flush list, no horizontal padding */
.assessment-options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.assessment-options li {
	border-bottom: 1px solid var(--color-border);
}

.assessment-options li:first-child {
	border-top: 1px solid var(--color-border);
}

.assessment-option {
	width: 100%;
	padding: var(--space-3) var(--space-6);
	background: var(--color-surface);
	border: none;
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: var(--color-text);
	cursor: pointer;
	text-align: left;
	line-height: 1.6;
	transition: background var(--transition), color var(--transition);
}

.assessment-option:hover:not(:disabled) {
	background: var(--color-accent-light);
	color: var(--color-accent-dark);
}

.assessment-option.is-selected {
	background: var(--color-accent-light);
	color: var(--color-accent-dark);
	font-weight: 500;
}

/* Briefly dims all options while auto-advancing to next domain */
.assessment-option.is-advancing {
	opacity: 0.5;
	cursor: default;
}

.assessment-step__saving {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	text-align: center;
	margin: var(--space-4) 0 0;
}

/* Prior result — reuses .assessment-breakdown grid, just needs spacing */
.assessment-prior-result {
	margin-bottom: var(--space-2);
}

.assessment-prior-result .assessment-breakdown {
	margin-bottom: var(--space-4);
}

.assessment-prior-result__single {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0 0 var(--space-4);
}

/* Result screen */
.assessment-result__eyebrow {
	font-size: var(--font-size-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 var(--space-5);
}

/* Breakdown grid */
.assessment-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.assessment-breakdown__card {
	padding: var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
}

.assessment-breakdown__card-label {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	margin: 0 0 var(--space-2);
	line-height: 1.4;
}

.assessment-breakdown__bar-wrap {
	height: 4px;
	background: var(--color-border);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: var(--space-2);
}

.assessment-breakdown__bar-fill {
	height: 100%;
	background: var(--color-accent);
	border-radius: 2px;
	transition: width 600ms ease;
}

.assessment-breakdown__card-level {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0;
}

.assessment-breakdown__card-level strong {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-weight: 400;
	font-style: italic;
	color: var(--color-accent);
	line-height: 1;
}

.assessment-breakdown__card-level span {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* Overall badge */
.assessment-overall {
	text-align: center;
	padding: var(--space-6) var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	margin-bottom: var(--space-6);
}

.assessment-overall__label {
	font-size: var(--font-size-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 var(--space-2);
}

.assessment-overall__badge {
	font-family: var(--font-serif);
	font-size: 4rem;
	font-weight: 300;
	font-style: italic;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: var(--space-1);
}

.assessment-overall__name {
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--color-text);
	margin: 0 0 var(--space-3);
}

.assessment-overall__note {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	margin: 0;
	line-height: 1.6;
}

.assessment-result__note {
	font-size: var(--font-size-xs);
	color: var(--color-stone-5);
	margin: var(--space-4) 0 0;
	text-align: center;
}

@media (max-width: 480px) {
	.assessment-breakdown {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Assessment — inline / embedded mode
   [level_assessment display="inline"]
   ========================================================= */

/* Inline / embedded assessment — feels like page content, not a modal card */
.assessment-embed {
	width: 100%;
	max-width: 620px;
	margin-inline: auto;
}

.assessment-embed .assessment-modal {
	max-width: 100%;
	max-height: none;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	animation: none;
}

/* Header becomes a simple section heading row */
.assessment-modal__header--inline {
	background: transparent;
	border-bottom: 2px solid var(--color-border);
	padding-left: 0;
	padding-right: 0;
}

.assessment-modal__header--inline .assessment-modal__lang {
	font-size: var(--font-size-xl);
	font-family: var(--font-serif);
	font-weight: 600;
}

/* ↺ reset — unobtrusive text link */
.assessment-modal__reset {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	font-weight: 400;
	opacity: 1;
}

.assessment-modal__reset:hover {
	color: var(--color-text);
}

/* Step body: no horizontal padding offset, page scrolls */
.assessment-embed .assessment-modal > .assessment-step,
.assessment-embed .assessment-modal > .assessment-prior-result {
	overflow-y: visible;
	padding-left: 0;
	padding-right: 0;
}

/* =========================================================
   GDPR notices and delete-data form
   ========================================================= */

.omorphos-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 8000;
	background: var(--color-text);
	color: var(--color-bg);
	font-size: var(--font-size-sm);
	padding: var(--space-4) 0;
	text-align: center;
}

.omorphos-data-form {
	max-width: 480px;
}

.omorphos-data-form__intro {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin-bottom: var(--space-4);
}

.omorphos-data-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.omorphos-data-form__success {
	font-size: var(--font-size-sm);
	color: #2d6a2d;
}

.omorphos-data-form__error {
	font-size: var(--font-size-sm);
	color: #b32d2e;
	margin-bottom: var(--space-4);
}

/* "Not sure of your level?" inline trigger in filter sidebar */
.filter-assessment-trigger {
	display: inline-block;
	margin-top: var(--space-3);
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	color: var(--color-accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.filter-assessment-trigger:hover {
	color: var(--color-accent-dark);
}

.assessment-error {
	font-size: var(--font-size-sm);
	color: #b32d2e;
	margin: var(--space-2) 0 0;
}

/* =========================================================
   Block Editor Patterns
   ========================================================= */

.pattern-pull-quote {
	border-left: 3px solid var(--color-stone-3);
	padding-left: 1.5rem;
	margin-block: 2rem;
}

p.pattern-pull-quote__text {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--color-text);
	margin: 0 0 1rem;
}

p.pattern-pull-quote__attribution {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-stone-5);
	margin: 0;
}

.pattern-differentiator {
	border-top: 1px solid var(--color-border);
	padding-block: 1.25rem;
	margin: 0 !important;
}

.pattern-differentiator:last-child {
	border-bottom: 1px solid var(--color-border);
}

.pattern-differentiators .wp-block-columns {
	gap: 1.25rem !important;
	align-items: start;
	flex-wrap: nowrap !important;
}

p.pattern-differentiator__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 0.8125rem;
	color: var(--color-stone-3);
	margin: 0;
	padding-top: 2px;
}

p.pattern-differentiator__title {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text);
	margin: 0 0 0.3125rem;
}

p.pattern-differentiator__title strong {
	font-weight: 500;
}

p.pattern-differentiator__desc {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--color-muted);
	margin: 0;
}

.pattern-stats-row {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: 1.5rem;
	margin-block: 1.5rem;
}

p.pattern-stat__num {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 300;
	font-style: italic;
	color: var(--color-text);
	line-height: 1;
	margin: 0 0 0.25rem;
}

p.pattern-stat__label {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	color: var(--color-stone-5);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.pattern-editorial-col {
	max-width: 640px;
	margin-block: 2rem;
}

h2.pattern-editorial-col__heading {
	font-family: var(--font-serif);
	font-size: 1.625rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.2;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

p.pattern-editorial-col__body {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.85;
	color: var(--color-muted);
	margin: 0 0 1rem;
}

/* ==========================================================================
   1. Layout Wrappers
   ========================================================================== */

.cefr-level-range__outer-wrapper {
    display: grid;
    grid-template-columns: 5rem 3fr;
    gap: 0.5rem;
    min-height: 0;
	
	
}

.cefr-level-range__labels-wrapper {
    display: flex;
    flex-direction: column;
	order:0;
}

.cefr-level-range__labels-wrapper > div {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    text-align: center;
    flex: 1;
}

.cefr-table table {
	width: 100%;
	border-collapse: collapse;
}
.cefr-table th,
.cefr-table td {
	border: 1px solid var(--color-border);
	padding: var(--space-3);
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-text);
}
.cefr-table th {
	background: var(--color-bg);
	font-weight: 600;
}
.cefr-table td {
	background: var(--color-surface);
	text-align: left;
}
.cefr-table td .cefr-level__badge {
	margin: 0 0.5rem 0 0;
}
.cefr-table .cefr-table__header--cefrlevel {
	width: 120px;
}
.cefr-badge {
		/* width: 48px; */
		/* height: 48px; */
		border-radius: 1em;
		display: flex;
		width: 4rem;
		align-items: flex-start;
		justify-content: center;
		font-size: var(--font-size-sm);
		font-weight: 500;
		text-transform: uppercase;
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		margin: 0 auto;
	}
	.cefr-badge.cefr-badge--a1 { background-color: var(--color-cefr-a1); }
	.cefr-badge.cefr-badge--a2 { background-color: var(--color-cefr-a2); }
	.cefr-badge.cefr-badge--b1 { background-color: var(--color-cefr-b1); }
	.cefr-badge.cefr-badge--b2 { background-color: var(--color-cefr-b2); }
	.cefr-badge.cefr-badge--c1 { background-color: var(--color-cefr-c1); }
	.cefr-badge.cefr-badge--c2 { background-color: var(--color-cefr-c2); }

/* Mobile: stacked cards instead of a horizontally-cramped table.
   Each row becomes a card; cells stack with their header as a label. */
@media ( max-width: 767px ) {
	.cefr-table table,
	.cefr-table thead,
	.cefr-table tbody,
	.cefr-table th,
	.cefr-table td,
	.cefr-table tr {
		display: block;
		width: auto;
	}

	.cefr-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.cefr-table tbody tr {
		margin-bottom: var(--space-4);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
		overflow: hidden;
	}

	.cefr-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.cefr-table td {
		border: none;
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-3) var(--space-4);
	}

	.cefr-table tr td:last-child {
		border-bottom: none;
	}

	.cefr-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: var(--font-size-xs);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-muted);
		margin-bottom: var(--space-1);
	}

	.cefr-table td[data-label="CEFR Level"] {
		background: var(--color-bg);
		text-align: center;
	}

	.cefr-table td[data-label="CEFR Level"]::before {
		display: none;
	}

	.cefr-badge {
		margin: 0 auto;
	}
}

/* ==========================================================================
   2. Entry & Exit Labels
   ========================================================================== */

.cefr-level-range__label-entry {
    display: flex;
    justify-content: flex-end; 
	align-items: flex-start; /* Align bottom right */
}

.cefr-level-range__label-exit {
    display: flex;
    justify-content: flex-end; /* Align top right */
    align-items: flex-end; /* Align bottom right */
}

/* ==========================================================================
   3. CEFR Level Blocks
   ========================================================================== */

.cefr-level {
    display: grid;
    grid-template-columns: 75px auto;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-text);
    line-height: 1;
    margin: 0;
    flex: 1;
    position: relative;
}

.cefr-level-range--book .cefr-level__book-name {
	display: none;
}



.cefr-level-range__title {
		font-size: var(--font-size-sm);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--color-muted);
		margin: 0 0 var(--space-3);
		text-align: center;
	}

.cefr-level__badge {
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
}

/* Series-level badges can carry an "Early"/"Mid"/"Late" position prefix
   (mixed case) ahead of the CEFR code — don't force-uppercase those. */
.cefr-level-range--series .cefr-level__badge {
    text-transform: none;
}

.cefr-level__name {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
}


/* Modifier for range variations */
.cefr-level-range {
	order: 1;
    flex-direction: column;
}

.cefr-level-range .cefr-level__badge {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    flex: 1;
	height: 48px;
	align-items: center;
	margin-bottom: 1px;
}
.cefr-level-range__assessment-link {
	font-size: var(--font-size-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
	text-decoration: none;
	/* margin-top: var(--space-3); */
	text-align: right;


		margin: var(--space-3) 0;
}

/* ==========================================================================
   4. CEFR Theme Colors
   ========================================================================== */

.cefr-level__a1 .cefr-level__badge { background-color: var(--color-cefr-a1); }
.cefr-level__a1-a2 .cefr-level__badge { background: linear-gradient(180deg, var(--color-cefr-a1), var(--color-cefr-a2)); }
.cefr-level__a2 .cefr-level__badge { background-color: var(--color-cefr-a2); }
.cefr-level__a2-b1 .cefr-level__badge { background: linear-gradient(180deg, var(--color-cefr-a2), var(--color-cefr-b1)); }
.cefr-level__b1 .cefr-level__badge { background-color: var(--color-cefr-b1); }
.cefr-level__b1-b2 .cefr-level__badge { background: linear-gradient(180deg, var(--color-cefr-b1), var(--color-cefr-b2)); }
.cefr-level__b2 .cefr-level__badge { background-color: var(--color-cefr-b2); }
.cefr-level__b2-c1 .cefr-level__badge { background: linear-gradient(180deg, var(--color-cefr-b2), var(--color-cefr-c1)); }
.cefr-level__c1 .cefr-level__badge { background-color: var(--color-cefr-c1); }
.cefr-level__c1-c2 .cefr-level__badge { background: linear-gradient(180deg, var(--color-cefr-c1), var(--color-cefr-c2)); }
.cefr-level__c2 .cefr-level__badge { background-color: var(--color-cefr-c2); }


.cefr-level__book-name .book-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-muted);
        text-align: left;
    
    /* Shifts text slightly to the right of the line so it doesn't overlap */
    padding-left: 0.75rem; 
    
}
.wp-block-heading {
	margin-top: var(--space-8);
}

/* =========================================================
   Variants & Modifiers
   ========================================================= */

/* variant-default: used by email-capture block fallback */


/* variant-a/b/c/d are defined in the Section Variants block at end of file */



/* =========================================================
   Media Queries — min-width, mobile-first
   ========================================================= */









/* 480px — small phones landscape, phablets */
@media ( min-width: 480px ) {
	.email-signup__form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.email-signup__input {
		flex: 1;
		min-width: 220px;
		width: auto;
	}

	.email-signup__btn {
		flex-shrink: 0;
		align-self: auto;
	}

	.series-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}

	.principles-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

	.cefr-level-range {
		width: 100%;
		display: flex;
		flex-direction: row;
		order: 0;
	}

	.cefr-level-range__title {
		text-align: left;
		padding-left: 0.5rem;
	}
	
	.cefr-level-range__outer-wrapper {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: auto;
		/* padding-bottom: 1em; */
		

	}
	.cefr-level-range__labels-wrapper {
		flex-direction: row;
		order: 1;
	}
	.cefr-level-range__assessment-link{
		/* order: 2; */
		align-self: flex-end;
	}
	.cefr-level-range__label-entry, .cefr-level-range__label-exit {
		display: flex;
		flex:1
	}
	.cefr-level-range__label-entry {
		justify-content: flex-start;
		align-items: flex-start;
	}
	.cefr-level {
		grid-template-columns: auto;
		text-align: center;
	}
	.cefr-level__name {
		padding: 0;
		justify-content: center;
		padding-top: 0.5rem;
	}
	.cefr-level__a1-a2 .cefr-level__badge {
		background: linear-gradient(90deg, var(--color-cefr-a1), var(--color-cefr-a2));
	}
	.cefr-level__a2-b1 .cefr-level__badge {
		background: linear-gradient(90deg, var(--color-cefr-a2), var(--color-cefr-b1));
	}
	.cefr-level__b1-b2 .cefr-level__badge {
		background: linear-gradient(90deg, var(--color-cefr-b1), var(--color-cefr-b2));
	}
	.cefr-level__b2-c1 .cefr-level__badge {
		background: linear-gradient(90deg, var(--color-cefr-b2), var(--color-cefr-c1));
	}
	.cefr-level__c1-c2 .cefr-level__badge {
		background: linear-gradient(90deg, var(--color-cefr-c1), var(--color-cefr-c2));
	}

	
	.cefr-level-range--series {
		padding: 1rem 0 0;
	}
	.cefr-level-range--custom.cefr-level-range--has-description {
		padding: 3rem 0 0;
	}
	.cefr-level {
		position: relative; /* Crucial so absolute children position correctly */
	}

	/* 2. The Pillar: This acts as your vertical pointer line and centers itself */
	.cefr-level .cefr-level__book-name {
		position: absolute;
		left: 10%; /* Adjust this percentage to place the dot exactly where it belongs on the bar */
		width: 2px; /* This becomes your solid line */
		background-color: var(--color-ink);
		
		/* Top alternating defaults */
		bottom: 33%; /* Starts line right from the middle of the gauge bar */
		height: 3rem; /* Length of the pointer line */
		
		/* Flex alignment to push text to the top */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	/* 3. The Dot: Perfectly centered on the 2px wide line */
	.cefr-level .cefr-level__book-name::before {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		background: var(--color-ink);
		border-radius: 50%;
		
		/* Perfect center centering on a 2px line */
		left: 50%;
		transform: translateX(-50%);
		
		/* Default bottom alignment for top-positioned items */
		bottom: 0;
	}
	/* Missing closing brace found live (2026-08-05) — the min-width:480px
	   block opened above never closed, silently nesting every rule after
	   it (including width-unconditional ones, like the Korean italic
	   suppression and prefers-reduced-motion blocks near EOF) inside a
	   min-width:480px context they were never meant to be scoped to.
	   Confirmed live: Korean italic suppression worked at >=480px,
	   silently failed below it — narrower than "mobile" in the loose
	   sense, but real phones in portrait are routinely under 480px wide. */
}

/* 4. The Text Container: Keeps text from messing with the line positioning */
.cefr-level__book-name .book-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-muted);
    white-space: normal; /* Allows wrapping */
    width: 180px; /* Give it a safe maximum wrapping width */
    text-align: left;
    
    /* Shifts text slightly to the right of the line so it doesn't overlap */
    padding-left: 0.75rem; 
    
    /* Pulls text slightly upward so it sits nicely near the top of the line */
    transform: translateY(-0.25rem); 
}


.cefr-level-range__outer-wrapper--series {
	padding-bottom: 1rem; /* Extra space for longer series titles */
}


	.cefr-level:nth-of-type(2n) .cefr-level__book-name {
		top: 33%; /* Drops down from the middle of the bar */
		bottom: auto;
		height: 4rem; /* Length of the pointer line */
		justify-content: flex-end; /* Pushes text to the bottom of the line */
	}

	.cefr-level:nth-of-type(2n) .cefr-level__book-name::before {
		bottom: auto;
		top: 0;
	}


	.cefr-level:nth-of-type(2n) .cefr-level__book-name .book-text {
		/* align-self: flex-end; */
		text-align: left;
		transform: translateY(0.25rem); 
	}

.cefr-level-range--custom .cefr-level__book-name {
	height: 5rem; /* Allows the line to stretch based on content */
}
.cefr-level-range--custom .cefr-level__book-name .book-text__subtitle {
	font-weight: 500;
	padding-bottom: 0.25rem;
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}
.cefr-level-range--custom .cefr-level__book-name .book-text__description {
	font-weight: normal;
	font-size: var(--font-size-xs);
	/* color: var(--color-muted); */
}

/* 640px — tablet portrait, large phones landscape */
@media ( min-width: 640px ) {
	h1 { font-size: var(--font-size-4xl); }
	h2 { font-size: var(--font-size-3xl); }

	.site-header__inner {
		flex-direction: row;
		align-items: center;
		gap: 0;
	}

	.main-navigation {
		width: auto;
		margin-left: auto;
	}

	.main-navigation ul {
		flex-wrap: nowrap;
		gap: var(--space-6);
	}

	.site-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.pull-quote-band__text {
		font-size: 1.375rem;
	}

	.pull-quote-band {
		padding: 4.5rem 0;
	}

	.section {
		padding-block: var(--space-16);
	}

	.section__header {
		margin-bottom: var(--space-10);
	}

	.section__title {
		font-size: var(--font-size-3xl);
	}

	.section__subtitle {
		font-size: var(--font-size-lg);
		max-width: 600px;
	}

	.taxonomy-header {
		padding-block: var(--space-12) var(--space-10);
	}

	.taxonomy-header__title {
		font-size: var(--font-size-4xl);
	}

	.taxonomy-header__description {
		font-size: var(--font-size-lg);
	}

	.entry-title {
		font-size: var(--font-size-4xl);
	}

	.what-we-do__heading {
		font-size: 1.875rem;
	}

	.what-we-do__copy {
		max-width: 520px;
	}

	.differentiators {
		margin-top: 3rem;
	}

	.email-signup__heading {
		font-size: 1.75rem;
	}

	.page-hero {
		padding-block: var(--space-12) var(--space-10);
	}

	.page-hero__icon {
		font-size: 3rem;
	}

	.page-content-section {
		padding-block: var(--space-12);
	}

	p.pattern-pull-quote__text {
		font-size: 1.375rem;
	}

	.pattern-pull-quote {
		padding-left: 2rem;
	}
}

/* 768px — tablet landscape, small desktop */
@media ( min-width: 768px ) {
	.variant-a,
	.variant-b,
	.variant-c,
	.variant-d,
	.variant-e,
	.variant-f {
		padding: var(--space-12) var(--container-padding);
	}

	.email-signup__btn {
		width: auto;
	}

	.archive-layout {
		grid-template-columns: 240px 1fr;
	}

	.archive-sidebar {
		position: sticky;
		top: 80px;
	}

	/* Multi-column grid only once the mobile horizontal-list card layout
	   (max-width: 767px, above) has fully handed off — avoids the overlap
	   window where both rules used to apply at once (640–767px). */
	.books-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	article.single-book {
		padding-block: var(--space-16);
	}

	.single-book__title {
		font-size: var(--font-size-4xl);
	}

}

/* 1024px — the sticky 2-column buy sidebar needs real desktop/laptop width
   to not feel cramped: a 320px fixed cover column plus a sidebar that can
   grow up to 900px tall is comfortable on a 1280px+ display, but at
   768–1023px (the whole portrait- AND landscape-tablet range, e.g. iPad
   768–834px portrait, older 1024px landscape excluded on purpose) it eats
   most of the available width AND most of the viewport height at once,
   crowding out the title/description and making the purchase block feel
   oversized. Below 1024px this now stays on the same comfortable stacked
   single-column layout used at true mobile widths (see "mobile: stacked"
   above) instead of switching early. */
@media ( min-width: 1024px ) {
	.single-book__layout {
		grid-template-columns: 320px 1fr;
		gap: var(--space-12);
	}

	.single-book__sidebar {
		max-width: none;
		margin-inline: 0;
		position: sticky;
		/* Site header is itself position:sticky;top:0 (~71px tall in
		   practice) — this needs a top offset at least that large or it
		   tries to stick underneath the header instead of below it. A
		   fixed 240px here (an earlier, wrong guess at the header's
		   height) left a large dead gap above the sidebar and made the
		   sticky position look arbitrary/"mid-image" rather than tucked
		   just under the header. --sidebar-top drives both this offset
		   and the max-height below, so the two always agree. */
		--sidebar-top: 88px;
		top: var(--sidebar-top);
		/* A real `height`, not `max-height` — confirmed live that
		   max-height alone doesn't work here: this container's own size
		   would otherwise shrink-to-fit its content (a `max-height` is
		   only a cap on that, not a target), and once the cover's <img>
		   became position:absolute (see below) it stopped contributing
		   any size to that content-fit calculation at all, leaving zero
		   actual leftover space for the cover's flex-grow to expand into
		   even though there was plenty of room under the cap. An explicit
		   `height` gives flex-grow a real amount of space to distribute
		   regardless of how little (or how much) the children's own
		   content naturally needs. `overflow-y:auto` is the safety valve
		   for the opposite case — content (e.g. a long retailer list)
		   that needs more room than this height allows scrolls inside the
		   sidebar rather than overflowing it unpredictably. */
		height: calc(100vh - var(--sidebar-top) - 24px);
		/* Caps how tall this gets on a very tall/portrait monitor — with
		   only the calc() above, a 2000px+ viewport height would grow the
		   cover to match (it flex-grows into whatever's left), well past
		   the source image's actual resolution and past any reasonable
		   size for a book cover in a 320px-wide column. 900px comfortably
		   fits a full cover + both CTA buttons on any normal display
		   without ever being the binding constraint there. */
		max-height: 900px;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.single-book__cover {
		flex: 1 1 auto;
		/* Overrides the base rule's fixed margin — spacing between the
		   cover and the CTA row below it is handled by the flex column's
		   own gap instead, so it collapses to 0 cleanly if the cover ever
		   shrinks all the way down. */
		margin-bottom: 0;
		/* Confirmed live (getComputedStyle, not a guess): a flex item's
		   height, when it comes from flex-grow/flex-basis rather than an
		   explicit `height` property, is NOT treated as definite for a
		   normal-flow child's percentage `max-height` to resolve against —
		   the <img>'s `max-height:100%` was silently no-op'ing, rendering
		   at its raw intrinsic pixel height (measured: 512px img inside a
		   286px cover) and overflowing straight over the CTA row below.
		   `position:relative` here + `position:absolute` on the <img>
		   below sidesteps this: an absolutely-positioned descendant's
		   percentage height resolves against the containing block's real,
		   already-computed (post-flex-layout) size regardless of how that
		   size was arrived at — this is the one construct that reliably
		   works for "percentage-size a child to a flex-grown parent"
		   across browsers. */
		position: relative;
	}

	.single-book__cover img {
		position: absolute;
		inset: 0;
		margin: auto;
	}

	.single-book__cta-row {
		flex: 0 0 auto;
		margin-top: var(--space-6);
		margin-bottom: 0;
	}

	/* Logged-in WP admin bar pushes the sticky header down (see
	   .admin-bar .site-header above) — the sidebar's own offset needs the
	   same compensation or it sticks underneath the header while an admin
	   is browsing the site. Mobile-width admin bar (46px) applies below
	   the 783px breakpoint; the desktop 32px variant is compensated
	   separately at the 783px breakpoint, which overrides this above that
	   width — 783 < 1024 so both cases are covered here regardless of
	   which admin-bar height is active once the sidebar goes sticky. */
	.admin-bar .single-book__sidebar {
		--sidebar-top: 134px;
	}
}

/* 783px — WordPress admin bar desktop breakpoint */
@media screen and ( min-width: 783px ) {
	.admin-bar .site-header {
		top: 32px;
	}
	.admin-bar .single-book__sidebar {
		--sidebar-top: 120px;
	}
	.upcoming-row {
		grid-template-columns: 8rem 2fr 1fr;
		gap: var(--space-6);
		/* align-items: center; */
	}
}

/* 900px — wide tablet, desktop */
@media ( min-width: 900px ) {
	.hero__inner {
		grid-template-columns: 1fr minmax(280px, 360px);
		gap: var(--space-16);
		padding-top: 4rem;
		padding-bottom: 6rem;
	}

	/* Single-column variant: no language panel */
	.hero--single .hero__inner {
		grid-template-columns: 1fr;
		max-width: 680px;
	}

	.hero__title {
		margin-bottom: 2.25rem;
	}

	.hero__actions {
		gap: 1.75rem;
		margin-top: 3rem;
	}

	.hero__languages {
		padding: 2rem 2rem 1.75rem;
		
		/* max-width: 360px; */
	}

	.hero__lang-chips {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.what-we-do__layout {
		grid-template-columns: 200px 1fr;
		gap: 4rem;
	}

	.what-we-do__nav {
		display: block;
		position: sticky;
		top: 4rem;
	}

	.email-signup__layout {
		grid-template-columns: 1fr 280px;
		gap: 4rem;
		align-items: center;
	}

	.site-footer__top {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 2.5rem;
		padding-bottom: 2.5rem;
	}

	/* Upcoming releases — desktop layout */
	.upcoming-row__date {
		min-width: 9rem;
		/* text-align: right; */
	}


}

/* =========================================================
   Section Variants
   Apply .variant-a/.variant-b/.variant-c/.variant-d to any
   section wrapper. Each variant overrides only the delta from
   the global .section__* base styles defined above.
   ========================================================= */

/* ── Base: actions row ── */
.section__actions,
.call-to-action__actions {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-6);
	justify-content: flex-start;
}

/* ── Shared padding ── */
.variant-a,
.variant-b,
.variant-c,
.variant-d,
.variant-e,
.variant-f {
	padding: var(--space-8) var(--container-padding);
}

/* When a template-part uses a .container inside a variant section,
   suppress its horizontal padding — the variant already provides the gutter */
.variant-a > .container,
.variant-b > .container,
.variant-c > .container,
.variant-d > .container,
.variant-e > .container,
.variant-f > .container {
	padding-inline: 0;
}

/* ── Centered layout (A, C, E, F) ── */
.variant-a,
.variant-c,
.variant-e,
.variant-f {
	text-align: center;
}

.variant-a .section__header,
.variant-c .section__header,
.variant-e .section__header,
.variant-f .section__header {
	max-width: 600px;
	margin-inline: auto;
}

.variant-a .section__actions,
.variant-a .call-to-action__actions,
.variant-c .section__actions,
.variant-c .call-to-action__actions,
.variant-e .section__actions,
.variant-e .call-to-action__actions,
.variant-f .section__actions,
.variant-f .call-to-action__actions {
	justify-content: center;
}

/* ── Dark-bg text colors (A + E share this) ── */
.variant-a .section__eyebrow,
.variant-e .section__eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.variant-a .section__title,
.variant-a .section__heading,
.variant-e .section__title,
.variant-e .section__heading {
	color: var(--color-surface);
}

.variant-a .section__subtitle,
.variant-a .section__description,
.variant-e .section__subtitle,
.variant-e .section__description {
	color: rgba(255, 255, 255, 0.9);
}

/* ── White ghost/text buttons on dark bg (A + E) ── */
.variant-a .btn--ghost,
.variant-a .btn--ghost:link,
.variant-a .btn--ghost:visited,
.variant-a .call-to-action__button-text,
.variant-a .call-to-action__button-text:link,
.variant-a .call-to-action__button-text:visited,
.variant-e .btn--ghost,
.variant-e .btn--ghost:link,
.variant-e .btn--ghost:visited,
.variant-e .call-to-action__button-text,
.variant-e .call-to-action__button-text:link,
.variant-e .call-to-action__button-text:visited {
	color: var(--color-surface);
}

.variant-a .btn--ghost:hover,
.variant-a .btn--ghost:focus,
.variant-a .call-to-action__button-text:hover,
.variant-a .call-to-action__button-text:focus,
.variant-e .btn--ghost:hover,
.variant-e .btn--ghost:focus,
.variant-e .call-to-action__button-text:hover,
.variant-e .call-to-action__button-text:focus {
	color: var(--color-surface);
	opacity: 0.7;
}

/* ── White outline buttons on dark bg (A + E) ── */
.variant-a .btn--outline,
.variant-a .btn--outline:link,
.variant-a .btn--outline:visited,
.variant-a .call-to-action__button-secondary,
.variant-a .call-to-action__button-secondary:link,
.variant-a .call-to-action__button-secondary:visited,
.variant-e .btn--outline,
.variant-e .btn--outline:link,
.variant-e .btn--outline:visited,
.variant-e .call-to-action__button-secondary,
.variant-e .call-to-action__button-secondary:link,
.variant-e .call-to-action__button-secondary:visited {
	background-color: transparent;
	color: var(--color-surface);
	border-color: var(--color-surface);
}

/* ── Bare links on dark bg (A + E) ── */
.variant-a a:not([class]),
.variant-e a:not([class]) {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}

.variant-a a:not([class]):hover,
.variant-e a:not([class]):hover {
	color: var(--color-surface);
}

/* ─────────────────────────────────────
   Variant A — Dark (Ink)
   ───────────────────────────────────── */
.variant-a {
	background-color: var(--color-ink);
	color: var(--color-surface);
}

.variant-a .btn--primary,
.variant-a .btn--primary:link,
.variant-a .btn--primary:visited,
.variant-a .call-to-action__button-primary,
.variant-a .call-to-action__button-primary:link,
.variant-a .call-to-action__button-primary:visited {
	background-color: var(--color-surface);
	color: var(--color-ink);
	border-color: var(--color-surface);
}

.variant-a .btn--primary:hover,
.variant-a .btn--primary:focus,
.variant-a .call-to-action__button-primary:hover,
.variant-a .call-to-action__button-primary:focus {
	background-color: rgba(255, 255, 255, 0.88);
	color: var(--color-ink);
}

.variant-a .btn--outline:hover,
.variant-a .btn--outline:focus,
.variant-a .call-to-action__button-secondary:hover,
.variant-a .call-to-action__button-secondary:focus {
	background-color: var(--color-surface);
	color: var(--color-ink);
}

/* ─────────────────────────────────────
   Variant B — Off-white, left-aligned
   (default alignment — no overrides needed)
   ───────────────────────────────────── */
.variant-b {
	background-color: var(--color-off-white);
	text-align: left;
}

/* ─────────────────────────────────────
   Variant C — Honey/Amber (dark ink text on warm bg)
   ───────────────────────────────────── */
.variant-c {
	background-color: var(--color-amber);
	color: var(--color-ink);
}

/* Override cool-colored elements that clash on warm honey bg */
.variant-c .section__eyebrow {
	color: rgba(28, 25, 23, 0.6);
}

.variant-c .section__subtitle,
.variant-c .section__description {
	color: rgba(28, 25, 23, 0.8);
}

.variant-c .email-signup__consent-text,
.variant-c .email-signup__fine-print {
	color: rgba(28, 25, 23, 0.65);
}

.variant-c .btn--primary,
.variant-c .btn--primary:link,
.variant-c .btn--primary:visited,
.variant-c .call-to-action__button-primary,
.variant-c .call-to-action__button-primary:link,
.variant-c .call-to-action__button-primary:visited {
	background-color: var(--color-ink);
	color: var(--color-surface);
	border-color: var(--color-ink);
}

.variant-c .btn--primary:hover,
.variant-c .btn--primary:focus,
.variant-c .call-to-action__button-primary:hover,
.variant-c .call-to-action__button-primary:focus {
	background-color: #2A2520;
	color: var(--color-surface);
}

.variant-c .btn--outline,
.variant-c .btn--outline:link,
.variant-c .btn--outline:visited,
.variant-c .call-to-action__button-secondary,
.variant-c .call-to-action__button-secondary:link,
.variant-c .call-to-action__button-secondary:visited {
	background-color: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.variant-c .btn--outline:hover,
.variant-c .btn--outline:focus,
.variant-c .call-to-action__button-secondary:hover,
.variant-c .call-to-action__button-secondary:focus {
	background-color: var(--color-ink);
	color: var(--color-surface);
}

/* ─────────────────────────────────────
   Variant D — Minimal (bordered), left-aligned
   (default alignment — no overrides needed)
   ───────────────────────────────────── */
.variant-d {
	border-top: 1px solid var(--color-stone-3);
	border-bottom: 1px solid var(--color-stone-3);
}
.variant-b .call-to-action__actions {
	/* padding: 0 var(--space-6); */
}

/* ─────────────────────────────────────
   Variant E — Dark Brown (dark bg, white text, centered)
   ───────────────────────────────────── */
.variant-e {
	background-color: var(--color-dark-brown);
	color: var(--color-surface);
}

.variant-e .btn--primary,
.variant-e .btn--primary:link,
.variant-e .btn--primary:visited,
.variant-e .call-to-action__button-primary,
.variant-e .call-to-action__button-primary:link,
.variant-e .call-to-action__button-primary:visited {
	background-color: var(--color-surface);
	color: var(--color-ink);
	border-color: var(--color-surface);
}

.variant-e .btn--primary:hover,
.variant-e .btn--primary:focus,
.variant-e .call-to-action__button-primary:hover,
.variant-e .call-to-action__button-primary:focus {
	background-color: rgba(255, 255, 255, 0.88);
	color: var(--color-ink);
}

.variant-e .btn--outline:hover,
.variant-e .btn--outline:focus,
.variant-e .call-to-action__button-secondary:hover,
.variant-e .call-to-action__button-secondary:focus {
	background-color: var(--color-surface);
	color: var(--color-ink);
}

/* ─────────────────────────────────────
   Variant F — Natural (warm nude bg, dark text, centered)
   ───────────────────────────────────── */
.variant-f {
	background-color: var(--color-natural);
	color: var(--color-ink);
}

/* Override cool/muted-colored elements that clash on warm natural bg */
.variant-f .section__eyebrow {
	color: rgba(28, 25, 23, 0.55);
}

.variant-f .section__subtitle,
.variant-f .section__description {
	color: rgba(28, 25, 23, 0.75);
}

.variant-f .email-signup__consent-text,
.variant-f .email-signup__fine-print {
	color: rgba(28, 25, 23, 0.6);
}

/* ── Responsive — re-center left-aligned variants on mobile ── */
@media (max-width: 599px) {

	.variant-d {
		text-align: center;
	}

	.variant-b .section__actions,
	.variant-b .call-to-action__actions,
	.variant-d .section__actions,
	.variant-d .call-to-action__actions {
		justify-content: center;
	}
}

/* =========================================================
   Link adornments — shared across blocks
   ========================================================= */

.link-adornment--arrow-right::after {
	content: '→';
	display: inline-block;
	margin-left: 0.5em;
	transition: transform var(--transition);
}

.link-adornment--external::after {
	content: '↗';
	display: inline-block;
	margin-left: 0.5em;
	transition: transform var(--transition);
}

.link-adornment--download::after {
	content: '↓';
	display: inline-block;
	margin-left: 0.5em;
	transition: transform var(--transition);
}

.link-adornment--chevron-right::after {
	content: '›';
	display: inline-block;
	margin-left: 0.3em;
	font-size: 1.2em;
	line-height: 1;
	transition: transform var(--transition);
}

/* ============================================================
   Modal Trigger page template
   ============================================================ */

.modal-trigger-page {
	min-height: 60vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--space-12) var(--container-padding);
}

.modal-trigger-page__content {
	background: var(--color-surface);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
	width: 100%;
	max-width: 720px;
	overflow: hidden;
}

/* ============================================================
   Search results
   ============================================================ */

.search-results__section {
	margin-bottom: var(--space-12);
}

.search-results__section:last-child {
	margin-bottom: 0;
}

.search-results__heading {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	margin: 0 0 var(--space-4);
}

.search-results__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.search-result-row {
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.search-result-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.search-result-row__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	margin: 0 0 var(--space-2);
}

.search-result-row__title a {
	color: var(--color-text);
	text-decoration: none;
}

.search-result-row__title a:hover {
	color: var(--color-accent);
}

.search-result-row__excerpt {
	color: var(--color-muted);
	font-size: var(--font-size-sm);
	margin: 0;
}

.search-result-row--faq .search-result-row__title {
	color: var(--color-accent);
}

/* ── Generic email-capture modal (assets/js/email-capture-modal.js) ──────────────
   Single-screen form, not the multi-step assessment modal — reuses the same
   overlay/surface/shadow tokens as .assessment-overlay/.assessment-modal
   above rather than its own bespoke look, since it's the same "modal over
   the page" pattern. Hidden by default (display:none); JS only ever toggles
   .is-open, never removes the element from the DOM. Shared by every mode
   (sample_request, newsletter, …) — the JS swaps title/description/button
   text and which of the two checkbox rows is visible per mode; the chrome
   itself never changes. */
.capture-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(28, 25, 23, 0.55);
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	backdrop-filter: blur(2px);
}

.capture-modal-overlay.is-open {
	display: flex;
	animation: assessmentOverlayIn 200ms ease forwards;
}

.capture-modal {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	width: 100%;
	max-width: 440px;
	padding: var(--space-8) var(--space-6) var(--space-6);
	box-shadow: 0 24px 64px rgba(0,0,0,0.15);
	animation: assessmentModalIn 250ms ease forwards;
}

.capture-modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	background: none;
	border: none;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
	padding: var(--space-1);
	transition: color var(--transition);
}

.capture-modal__close:hover { color: var(--color-text); }

.capture-modal__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	color: var(--color-text);
	margin: 0 0 var(--space-2);
}

.capture-modal__desc {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.5;
	margin: 0 0 var(--space-6);
}

.capture-modal-form { display: flex; flex-direction: column; gap: var(--space-3); }

/* .capture-modal-form's own flex column only lays out ITS direct children
   (honeypot / __fields / __success) — this nested wrapper (label, input,
   checkbox rows, submit button) never had a display rule of its own, so
   the <label>/<input> pair fell back to their default inline/inline-block
   flow and rendered side by side on one line instead of stacked, visually
   overlapping. flex-direction:column here (with align-items stretch, the
   flex default) blockifies + full-widths every child for free. */
.capture-modal-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
/* Same class-selector-beats-[hidden]-UA-rule gotcha as .capture-modal-form__success
   and .capture-modal-form__checkbox below — this rule's own unconditional
   display:flex was added for the stacking fix above, but it just as easily
   beats [hidden] too. Without this, the whole form (including a stale
   "Sending…" status line) stayed visible underneath the success checkmark. */
.capture-modal-form__fields[hidden] {
	display: none;
}

.capture-modal-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.capture-modal-form__label {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
}

.capture-modal-form__input {
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-bg);
	color: var(--color-text);
	box-sizing: border-box;
}

.capture-modal-form__input:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.capture-modal-form__notice {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: 1.4;
	margin: 0;
}
.capture-modal-form__notice a { color: inherit; text-decoration: underline; }
.capture-modal-form__notice[hidden] { display: none; }

.capture-modal-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: 1.4;
	cursor: pointer;
}

.capture-modal-form__checkbox input { margin-top: 2px; flex-shrink: 0; }

/* Groups the terms summary + its own "I understand" checkbox into one
   colocated unit, separate from the unrelated newsletter opt-in checkbox
   below it — direct feedback: the two checkboxes used to sit adjacent with
   no visual distinction, reading as one undifferentiated list even though
   only one of them is about the terms summary just above. A tighter
   internal gap than .capture-modal-form__fields' own between-row gap keeps
   the summary and its checkbox read as a single unit. */
.capture-modal-form__terms-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.capture-modal-form__terms-group[hidden] { display: none; }

/* Plain label naming the group below it — same "small, uppercase, muted
   caption" convention omorphos-studio's own reader terms gate
   (.reader__terms-gate-scroll-label) already established for the same
   underlying content (the reading-access terms summary). */
.capture-modal-form__terms-label {
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0;
}

.capture-modal-form__terms-summary {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: 1.5;
	margin: 0;
	padding-left: var(--space-4);
}
.capture-modal-form__terms-summary li { margin-bottom: var(--space-1); }
.capture-modal-form__terms-summary[hidden] { display: none; }

/* The newsletter-cross and consent checkbox rows are shown/hidden per mode
   via the [hidden] attribute (see email-capture-modal.js's open()) — same
   class-selector-beats-[hidden]-UA-rule gotcha as the success view below,
   so both need an explicit override for the toggle to actually take effect. */
.capture-modal-form__checkbox[hidden] {
	display: none;
}

.capture-modal-form__submit { margin-top: var(--space-2); width: 100%; justify-content: center; }

/* Covers both cases the JS disables this button for: mid-submit ("Sending…")
   and newsletter mode's required-but-unchecked consent box — previously no
   visual difference from the enabled state at all, just a non-clickable
   button with no affordance explaining why. */
.capture-modal-form__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.capture-modal-form__status {
	font-size: var(--font-size-sm);
	margin: 0;
	min-height: 1.2em;
}

.capture-modal-form__status--success { color: #2d6a4f; }
.capture-modal-form__status--error   { color: #b3261e; }

/* Shown in place of the whole field group on success — see
   email-capture-modal.js's handleSubmit(); a disabled-but-still-visible
   form read as ambiguous ("did that work? should I try again?") and
   invited a second submission. */
.capture-modal-form__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	padding: var(--space-4) 0;
}
/* The class selector above beats the browser's own very-low-priority
   [hidden] UA rule, so the JS's `successWrap.hidden = true` was silently
   ignored — the checkmark showed alongside the form fields even before any
   submission. Needs an explicit override the JS's hidden-attribute toggle
   can actually win against. */
.capture-modal-form__success[hidden] {
	display: none;
}

/* Matches omorphos-support's .support-confirm-* success screen exactly
   (assets/css/support-frontend.css) — same light-green badge/dark-green
   checkmark, serif heading, muted body text, outlined Close button — so
   every "you did the thing, here's confirmation" moment across the site
   reads as the same pattern instead of each modal inventing its own. */
.capture-modal-form__success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #d1fae5;
	color: #065f46;
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: var(--space-2);
}

/* Expired/invalid confirmation-link states (MODES.confirm_expired/
   confirm_invalid, isError:true) — amber warning instead of the green
   checkmark, so it doesn't read as a success. */
.capture-modal-form__success-icon--error {
	background: #fef3e2;
	color: #b45309;
}

.capture-modal-form__success-heading {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	color: var(--color-text);
	margin: 0;
}

.capture-modal-form__success-msg {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0;
}

.capture-modal-form__success-close { margin-top: var(--space-2); }

body.capture-modal-open { overflow: hidden; }

/* Inline embed (assets/js/email-capture-modal.js's buildInlineEmbed(),
   [omorphos_email_capture] shortcode) — the form itself IS the page
   content, no overlay/card chrome around it (unlike .capture-modal
   above), so this just adds padding + reuses .capture-modal__title/desc's
   typography under new class names (:not() would be more DRY but these
   two rules are simple enough that duplicating them beats fighting
   specificity against the overlay-specific selector). */
.capture-embed {
	padding: var(--space-8) var(--space-6);
}

.capture-embed__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	color: var(--color-text);
	margin: 0 0 var(--space-2);
}

.capture-embed__desc {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.5;
	margin: 0 0 var(--space-6);
}

/* =========================================================
   Language-specific italic suppression — Korean (ko)
   Korean serif/sans fonts have no italic tradition; synthetic
   slant looks broken. Suppress on any element that would
   otherwise be italic on book cards, series cards, and single
   book pages when the content language is Korean.
   ========================================================= */

.book-card--lang-ko .book-series-position,
.single-book--lang-ko .book-series-position,
.single-book--lang-ko .single-book__subtitle {
	font-style: normal;
}

/* series-card__translation is always English text (a romanization
   or translated title), so italic is appropriate there regardless
   of the series language — no override needed. */

/* =========================================================
   Blog — post card, grid, single post, comments
   ========================================================= */

.posts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	width: 100%;
}

@media ( min-width: 768px ) {
	.posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
}

.post-card__cover {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-stone-3);
}

/* Admin-only — see inc/blog.php's omorphos_blog_admin_status_label().
   Same absolute-corner-badge shape as .book-card__corner-badge, just not
   shared as one class across differently-structured card components. */
.post-card__corner-badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 1;
	box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.post-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	flex: 1;
}

.post-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-bottom: var(--space-1);
}

.post-card__title {
	font-size: var(--font-size-lg);
	margin: 0;
	line-height: 1.3;
}

.post-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.post-card__title a:hover {
	text-decoration: underline;
}

.post-card__meta {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	margin: 0;
}

.post-card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0;
	flex: 1;
}

.post-card__read-more {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	margin-top: var(--space-2);
}

.post-card__read-more:hover {
	text-decoration: underline;
}

/* Single post */

/* Full-bleed white surface for the article itself (byline through
   categories) — reads as one continuous "the article" zone against the
   page's default gray, which everything after it (comments, a future
   promo block) sits on instead. Matches .taxonomy-header's own
   --color-surface background, so the page-header block above it and this
   flow together as one visual unit even though they're two adjacent
   elements. */
.single-post__article {
	background: var(--color-surface);
}

/* Admin-only — see inc/blog.php's omorphos_blog_admin_status_label().
   Same dim treatment as .book-card--unpublished/.post-card--unpublished,
   applied to the whole article surface here since there's no separate
   "cover" element to dim on the single-post page the way a card has. */
.single-post__article--unpublished {
	opacity: 0.7;
}

.single-post__unpublished-notice {
	display: inline-block;
	margin: 0 0 var(--space-4);
}

.single-post__container {
	max-width: 760px;
	padding-block: var(--space-8) var(--space-12);
}

.single-post__meta {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin: 0 0 var(--space-6);
}


.single-post__content {
	font-size: var(--font-size-base);
	line-height: 1.7;
}

.single-post__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

/* Plain content/document pages (Privacy Policy, Terms of Use, FAQ, etc —
   page.php's $is_plain_doc branch) — same "title merged into the same
   white surface as the body, no divider" treatment as .single-post__*
   above, just under its own namespace since this isn't post content. A
   page WITH a page-header CTA block (lead/buttons) still gets the wider
   taxonomy-header hero instead — this is only for the plain document case. */
.page-doc__article {
	background: var(--color-surface);
}

.page-doc__container {
	max-width: 760px;
	padding-block: var(--space-8) var(--space-12);
}

.page-doc__title {
	margin-bottom: var(--space-6);
}

.page-doc__content {
	font-size: var(--font-size-base);
	line-height: 1.7;
}

/* Comments — deliberately plain, no nested-reply visual threading beyond
   WP's own default list-item nesting (this blog's comment volume is
   expected to be low; a more elaborate thread UI isn't worth building
   until that's no longer true). */

.single-post__comments {
	max-width: 760px;
	padding-block: var(--space-8) var(--space-16);
	/* No border-top here — the white .single-post__article → gray page-bg
	   transition right above this already reads as a clear section break;
	   an additional border on this narrower, centered container (not
	   full-bleed like the white section) would float disconnected in the
	   gray area with nothing to visually relate to. */
}

.blog-comments__heading {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-4);
}

.blog-comments__list {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
}

/* Real markup from WP core's default html5 comment walker (not something
   this theme controls the structure of, only its styling):
     <article class="comment-body">
       <footer class="comment-meta">
         <div class="comment-author vcard"><img class="avatar">Name <span class="says">says:</span></div>
         <div class="comment-metadata"><a><time>...</time></a></div>
         <em class="comment-awaiting-moderation">...</em>       (unapproved only)
       </footer>
       <div class="comment-content"><p>...</p></div>
       <div class="reply"><a class="comment-reply-link">Reply</a></div>
     </article>
   avatar/name/date are siblings-of-siblings, not already grouped into one
   row — .comment-meta is what's turned into the flex row below so they
   read as one header line instead of avatar-stacked-above-name (the
   unstyled default). */

.blog-comments__list .comment-body {
	/* Was var(--space-5) — not a real token in this theme's scale
	   (3/4/6/8 only; see the CSS custom properties section of this file's
	   own docs), so the whole padding-block value was invalid and
	   collapsed to 0 — the actual cause of the cramped spacing reported
	   live, not a deliberate tight layout. Split top/bottom (not
	   padding-block) — top stayed too generous relative to the divider
	   sitting right above it (li + li's own border-top already reads as
	   the separator), while the bottom still needs the fuller space to
	   clear the .reply button below it. */
	padding-top: var(--space-4);
	padding-bottom: var(--space-6);
}

.blog-comments__list ol.children .comment-body {
	padding-top: var(--space-3);
	padding-bottom: var(--space-4);
}

/* Dividers live on the <li> sibling boundary, not on .comment-body's own
   border — a border on .comment-body itself showed up between a comment
   and its OWN nested reply (ol.children is appended right after
   .comment-body, inside the same <li>), reading as a stray line in the
   middle of one thread rather than a separator between distinct threads.
   `li + li` only matches a later sibling at the SAME nesting level, so a
   top-level comment's own children are never affected by the top-level
   rule, and vice versa for the nested rule below. */
.blog-comments__list > li + li {
	border-top: 1px solid var(--color-border);
}

.blog-comments__list ol.children > li + li {
	border-top: 1px solid var(--color-border);
}

.blog-comments__list .comment-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
}

.blog-comments__list .comment-author.vcard {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Shape shared by every .avatar wherever it renders (comment list, the
   "posting as" pill, …) — unscoped so it isn't tied to one container.
   Context-specific rules below only set size. */
.avatar {
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.blog-comments__list .avatar {
	width: 40px;
	height: 40px;
}

.blog-comments__list .comment-author .fn {
	font-weight: 600;
	font-style: normal;
	font-size: var(--font-size-sm);
	color: var(--color-text);
}

/* "says:" reads as filler once name + avatar are already visually grouped
   into one row — kept in the DOM (some assistive tech / plugins expect
   it) but not shown. */
.blog-comments__list .comment-author .says {
	display: none;
}

.blog-comments__list .comment-metadata {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

.blog-comments__list .comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.blog-comments__list .comment-metadata a:hover {
	text-decoration: underline;
}

.blog-comments__list .comment-metadata .edit-link {
	margin-left: var(--space-2);
}

.blog-comments__list .comment-awaiting-moderation {
	display: inline-block;
	font-style: normal;
	font-weight: 600;
	font-size: var(--font-size-xs);
	color: #8b5e12;
	background: #fef3e2;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--border-radius);
	margin-top: var(--space-1);
}

.blog-comments__list .comment-content p {
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 var(--space-2);
}

.blog-comments__list .comment-content p:last-child {
	margin-bottom: 0;
}

.blog-comments__list .reply {
	margin-top: var(--space-3);
	margin-bottom: var(--space-3);
}

/* This is a real <button>, not an <a> (see omorphos_blog_comment_callback()
   in inc/blog.php for why) — without an explicit reset, the browser's
   default button chrome (border/background/padding) still shows through
   for whatever this rule doesn't touch, which is why it rendered as a
   boxed button instead of the plain link it's meant to look like. */
.blog-comments__list .comment-reply-link {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.blog-comments__list .comment-reply-link:hover {
	text-decoration: underline;
}

/* Nested replies — a left accent rule reads more clearly at this depth
   than pure indentation alone, and doubles as a visual "this is a reply
   thread" marker without needing a background-color change per depth
   level (this theme only nests one level deep in practice — WP's default
   max_depth is unrestricted, but a blog this size isn't expected to grow
   deep reply chains). */
.blog-comments__list ol.children {
	list-style: none;
	/* margin-bottom (was 0) — this is the container the left accent line
	   actually lives on, not the innermost .reply div; without it the
	   vertical line ran flush into the next top-level comment's divider,
	   even though .reply itself already had breathing room above it. */
	margin: var(--space-4) 0 var(--space-4) var(--space-5);
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-border);
}

/* The margin-bottom above had NO visible effect on its own — real bug,
   not a caching issue (confirmed the declaration was actually being
   served, then confirmed live that manually re-adding the same value in
   DevTools didn't survive a refresh either). Root cause: ol.children is
   the last child inside its <li>, and since that <li> has no padding/
   border of its own, a last child's margin-bottom collapses straight
   through the parent's bottom edge instead of producing visible space
   (CSS margin collapsing — see MDN "Mastering margin collapsing"). Any
   padding on the <li> itself blocks that collapse regardless of value,
   which is what actually makes ol.children's margin-bottom (and .reply's,
   for a comment with no children) finally show up. */
.blog-comments__list li {
	padding-bottom: var(--space-2);
}


.blog-comments__gravatar-note {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	margin: var(--space-2) 0 0;
}

.blog-comments__gravatar-note a {
	color: inherit;
	text-decoration: underline;
}

/* Marks a staff reply (sent publicly from omorphos-support's Support
   Inbox) in the public thread — reuses .badge/.badge--topic's existing
   chip look (same amber tone already used for category chips elsewhere
   on this page), just smaller/inline since it sits directly next to a
   name instead of standing alone. */
.blog-comments__staff-badge {
	font-size: 0.6875rem;
	padding: 1px var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
}

.blog-comments__closed {
	color: var(--color-muted);
	font-style: italic;
}

/* Shared input styling — used by the modal's own fields
   (.blog-comment-modal__field input/textarea below). */
.blog-comments__field {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	background: var(--color-surface);
	color: var(--color-text);
}

.blog-comments__toggle {
	/* Small default footprint (direct feedback) — a plain button, not the
	   full form, is what a post page shows until someone actually wants to
	   comment. */
	margin-top: var(--space-2);
}

/* =========================================================
   Blog comment modal
   ---------------------------------------------------------
   Same overlay/dialog visual language as .capture-modal-overlay/
   .capture-modal (assets/js/email-capture-modal.js), own class prefix
   since it's built by a different script with a different field set —
   not worth sharing markup/classes across two files that don't otherwise
   depend on each other.
   ========================================================= */

.blog-comment-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(28, 25, 23, 0.55);
	align-items: flex-start;
	justify-content: center;
	padding: var(--space-6) var(--space-4);
	overflow-y: auto;
	backdrop-filter: blur(2px);
}

.blog-comment-modal-overlay.is-open {
	display: flex;
}

.blog-comment-modal {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	width: 100%;
	max-width: 520px;
	padding: var(--space-6);
	box-shadow: 0 24px 64px rgba(0,0,0,0.15);
	margin-block: var(--space-8);
}

.blog-comment-modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	background: none;
	border: none;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
	padding: var(--space-1);
}

.blog-comment-modal__close:hover { color: var(--color-text); }

.blog-comment-modal__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	margin: 0 0 var(--space-4);
	padding-right: var(--space-8);
}

.blog-comment-modal__quote {
	background: var(--color-bg);
	border-left: 3px solid var(--color-border);
	border-radius: var(--border-radius);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
}

.blog-comment-modal__quote-author {
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--color-muted);
	margin: 0 0 var(--space-1);
}

.blog-comment-modal__quote-text {
	font-size: var(--font-size-sm);
	color: var(--color-text);
	font-style: italic;
	margin: 0;
}

.blog-comment-modal-form {
	display: flex;
	flex-direction: column;
	/* Direct feedback on the old inline form: too much space between
	   fields. Tighter gap + each field's own compact label-to-input
	   spacing (below) instead of the old form's looser var(--space-4). */
	gap: var(--space-3);
}

.blog-comment-modal__field label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.blog-comment-modal__field .required {
	color: var(--color-accent);
}

.blog-comment-modal__fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Same "a class selector's own unconditional display rule beats the
   browser's very-low-specificity [hidden] UA style" gotcha this codebase
   has hit (and documented) multiple times already, in the exact same
   family of modals — .capture-modal-form__fields/__success in
   email-capture-modal.js's own CSS. Missing this override here is why
   both the pill AND the fields showed at once regardless of which one
   JS's `.hidden = true/false` was actually toggling — found live. */
.blog-comment-modal__fields[hidden] {
	display: none;
}

.blog-comment-modal__remember {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	cursor: pointer;
}

.blog-comment-modal__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* "Posting as" pill — replaces the two Name/Email fields once a visitor
   has successfully posted once (saved to localStorage, not WP core's own
   comment-author cookie — see this file's own docblock for why). */
.blog-comment-modal__pill {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-bg);
}

.blog-comment-modal__pill[hidden] {
	display: none;
}

.blog-comment-modal__pill-avatar .avatar {
	width: 24px;
	height: 24px;
	font-size: var(--font-size-xs);
}

.blog-comment-modal__pill-text {
	flex: 1;
	font-size: var(--font-size-sm);
	color: var(--color-text);
}

.blog-comment-modal__pill-email {
	color: var(--color-muted);
}

.blog-comment-modal__pill-clear {
	background: none;
	border: none;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
	padding: var(--space-1);
}

.blog-comment-modal__pill-clear:hover { color: var(--color-text); }

.blog-comment-modal__error {
	font-size: var(--font-size-sm);
	color: #8b5e12;
	background: #fef3e2;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--border-radius);
	margin: 0;
}

.blog-comment-modal__submit {
	align-self: flex-start;
}

/* Initials-in-a-circle avatar (JS-inserted comments and the "posting as"
   pill) — matches the real <img class="avatar"> WP core renders (same
   width/height/border-radius), just filled with a color instead of a
   photo, since building the correct Gravatar URL client-side would need
   an MD5 hash of the email. Centered via text-align/line-height, not
   flex — `.blog-comments__list .avatar`'s own `display: block` (0,2,0
   specificity) would otherwise beat a `display: flex` override here
   (0,1,0) whenever this renders inside the comment list, since the more
   specific rule wins regardless of source order. line-height needs an
   explicit px value matching the avatar's own height (not 1/normal),
   since percentage/keyword line-heights don't reliably vertically-center
   single-line text this way. */
.blog-comments__initials-avatar {
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-weight: 600;
}

.blog-comment-modal__pill-avatar .blog-comments__initials-avatar {
	line-height: 24px;
}

/* =========================================================
   Reduced motion
   ---------------------------------------------------------
   Every transition/animation on the site is presentational
   (hover states, modal/drawer open-close, chevron rotation) —
   none carries information that's lost by cutting it to a
   near-instant duration, so a blanket override is safe here
   rather than needing a case-by-case opt-out list.
   ========================================================= */

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