/*!
Theme Name: Kimberly
Theme URI: https://booksbykimberly.com/
Author: Kimberly Lang
Author URI: https://booksbykimberly.com/
Description: A warm, inviting author website theme for Kimberly Lang — home/about, news, and a book catalog with editions, international versions, awards, and retailer links. Built from the _s (underscores) starter theme; classic PHP theme, build-free CSS/JS.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
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: kimberly
Tags: custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* --------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
1.0 Design tokens (visual system: palette, type scale, spacing)
2.0 Reset & base elements
3.0 Typography
4.0 Layout & structure
5.0 Site header & navigation
6.0 Site footer & social links
7.0 Home (hiatus notice, latest books, news + bio card)
8.0 News (posts) listing & single
9.0 Comments
10.0 Book catalog (listing & single)
11.0 Contact
12.0 Forms & buttons
13.0 Accessibility helpers
14.0 Responsive (mobile / tablet / desktop)
-------------------------------------------------------------- */

/* --------------------------------------------------------------
1.0 Design tokens — the shared visual system (Decision 9)
   Warm & inviting; carries forward the prior site's palette,
   modernized: warm serif headings + clean sans body, flat surfaces.
-------------------------------------------------------------- */
:root {
	/* Palette (from the prior booksbykimberly.com color story) */
	--color-navy: #2d3b6a;        /* headings, primary */
	--color-navy-dark: #222c50;   /* hover/darker navy */
	--color-gold: #eccd96;        /* links, accents — the "warm" note */
	--color-gold-deep: #c9a25c;   /* gold for text on white (AA contrast) */
	--color-gold-dark: #856012;   /* deep gold for links/accents on light (AA) */
	--color-slate: #586875;       /* secondary text */
	--color-slate-light: #7888ab; /* tertiary text */
	--color-teal: #d3faf7;        /* pale accent wash */
	--color-teal-tint: #eefbfa;   /* softer wash for section bands */

	/* Warm accent (soft blush) — the extra "welcoming" note alongside gold */
	--color-rose: #f0c8bd;        /* blush fills / washes */
	--color-rose-deep: #a84a34;   /* deep blush/terracotta for text/icons on light (AA) */

	/* Surfaces & section bands */
	--color-bg: #faf6f0;          /* warm ivory — the default page surface */
	--color-surface: #ffffff;     /* crisp white for cards, covers, inputs */
	--color-bg-alt: #f3ece1;      /* warm sand band (alternating sections) */
	--color-wash-teal: #eaf7f5;   /* cool tint band */
	--color-wash-gold: #f7edd7;   /* warm gold tint band */
	--color-text: #2f3338;        /* body text — near-black, warm */
	--color-border: #e6e1d8;      /* warm hairline */

	/* Typography — warm serif headings, clean sans body (no external fonts) */
	--font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Modular type scale (1.25 major third), base 1.125rem/18px */
	--fs-base: 1.125rem;
	--fs-sm: 0.9rem;
	--fs-xs: 0.78rem;
	--fs-lg: 1.375rem;
	--fs-h4: 1.35rem;
	--fs-h3: 1.7rem;
	--fs-h2: 2.15rem;
	--fs-h1: 2.7rem;
	--fs-display: 3.35rem;

	--lh-tight: 1.15;
	--lh-normal: 1.65;

	/* Spacing scale (8px base) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	/* Structure */
	--content-width: 1140px;
	--content-narrow: 760px;
	--radius: 8px;
	--radius-lg: 14px;
	--shadow-sm: 0 1px 3px rgba(45, 59, 106, 0.08);
	--shadow-md: 0 6px 20px rgba(45, 59, 106, 0.12);
	--transition: 160ms ease;
}

/* --------------------------------------------------------------
2.0 Reset & base
-------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-6) 0;
}

/* --------------------------------------------------------------
3.0 Typography
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-navy);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-4);
	/* The serif carries the emphasis — headings are never bold. */
	font-weight: 400;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

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

a {
	color: var(--color-gold-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color var(--transition);
}
a:hover, a:focus { color: var(--color-navy); }

blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-2) var(--space-5);
	border-left: 4px solid var(--color-gold);
	color: var(--color-slate);
	font-style: italic;
}

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

.entry-content > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------
4.0 Layout & structure
-------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--content-narrow); }

.section { padding-block: var(--space-7); }
.section--alt { background: var(--color-bg-alt); }
.section--wash { background: var(--color-wash-teal); }
.section--warm { background: var(--color-wash-gold); }

.page-header { margin-bottom: var(--space-6); }
.page-title { margin-bottom: var(--space-2); }
.page-subtitle { color: var(--color-slate); font-size: var(--fs-lg); margin: 0; }

/* The design's standard eyebrow / meta label, shared across all views. Sections
   that need a variant (the notice's gold-on-navy, the bio card's tighter
   tracking) restate only what differs. */
.eyebrow {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}

.site-content { padding-block: var(--space-8); min-height: 50vh; }

/* Templates built from full-bleed bands own their own vertical rhythm, so they
   butt straight against the header and footer instead of sitting in a gutter. */
.home .site-content,
.post-type-archive-book .site-content,
.tax-series .site-content,
.single-book .site-content,
.page-template-page-contact .site-content { padding-block: 0; }

/* --------------------------------------------------------------
5.0 Site header & navigation
-------------------------------------------------------------- */

/* Persistent navy brand rule above the header — a brand device, never a slot. */
.brand-rule {
	height: 44px;
	background: var(--color-navy);
}

.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding-block: var(--space-5);
}
.site-branding { display: flex; flex-direction: column; }
/*
 * Capped by height, not width: custom-logo prints the full-size image with its
 * own width/height attributes, and the theme registers flex dimensions, so the
 * upload's pixel size can't be assumed. 96px is the brand mark at full presence
 * — the ratio the design drew at (900x157) lands ~550px wide, so the upload
 * wants to be ~1100px wide to stay sharp on retina.
 */
.custom-logo {
	width: auto;
	max-height: 96px;
}
.site-title {
	font-family: var(--font-heading);
	/* The serif wordmark carries the emphasis — never bold. */
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: 1;
	letter-spacing: 0.01em;
	margin: 0;
}
.site-title a { color: var(--color-navy); text-decoration: none; }
.site-title a:hover { color: var(--color-navy-dark); }

/* Primary nav — Books · News · Contact. Sentence case, not caps. */
.main-navigation { display: flex; align-items: center; }
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-6);
}
.main-navigation a {
	color: var(--color-slate);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--fs-sm);
	letter-spacing: 0.03em;
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
	transition: border-color var(--transition), color var(--transition);
}
.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--color-gold-dark);
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	color: var(--color-navy);
	border-bottom-color: var(--color-gold-deep);
}

/* Gold CTA, right of the nav. */
.site-header__cta { flex: none; }

/* Mobile menu toggle */
.menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
	font: inherit;
	font-size: var(--fs-sm);
	color: var(--color-navy);
	cursor: pointer;
}

/* --------------------------------------------------------------
6.0 Site footer & social links
-------------------------------------------------------------- */
/* One footer on all four views: wordmark left, centered social row, legal right.
   Explicit grid columns keep the social row truly centered — and keep the legal
   line on the right when no social links are set and the middle cell is absent. */
.site-footer {
	background: var(--color-navy-dark);
	color: #b9c1d6;
	padding-block: var(--space-6);
	margin-top: 0;
}
.site-footer a { color: var(--color-gold); }
.site-footer a:hover, .site-footer a:focus { color: #fff; }
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-6);
}
/* Prefixed with .site-footer so the cream wordmark outranks `.site-footer a`. */
.site-footer .site-footer__wordmark {
	grid-column: 1;
	justify-self: start;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: var(--fs-lg);
	line-height: 1;
	color: var(--color-bg);
	text-decoration: none;
}
.site-footer .site-footer__wordmark:hover,
.site-footer .site-footer__wordmark:focus { color: var(--color-gold); }

.site-footer__social { grid-column: 2; justify-self: center; }

.site-footer__legal {
	grid-column: 3;
	justify-self: end;
	margin: 0;
	font-size: var(--fs-sm);
	color: #b9c1d6;
}
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover, .site-footer__legal a:focus { text-decoration: underline; }

/* Icon-only social squares — gold glyph on a hairline gold border. */
.social-links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); flex-wrap: wrap; }
.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	border: 1px solid rgba(236, 205, 150, 0.32);
	color: var(--color-gold);
	text-decoration: none;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-links a:hover, .social-links a:focus {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-navy);
}
.social-links svg { width: 19px; height: 19px; fill: currentColor; }

/* --------------------------------------------------------------
7.0 Home
-------------------------------------------------------------- */

/* Shared band heading: serif title left, gold-dark "see all" link right. */
.home-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}
.home-head__title { font-size: 2.25rem; margin: 0; }
.home-head__link {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-gold-dark);
	text-decoration: none;
	white-space: nowrap;
}
.home-head__link:hover, .home-head__link:focus { color: var(--color-navy); text-decoration: underline; }

/* --- Hiatus notice: full-bleed navy band with a gold glow top-left --- */
.hiatus {
	position: relative;
	background: var(--color-navy);
	padding-block: var(--space-8);
	overflow: hidden;
}
.hiatus::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 10% 0%, rgba(236, 205, 150, 0.2), transparent 62%);
	pointer-events: none;
}
.hiatus__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-8);
	align-items: center;
}
.hiatus__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gold);
}
/* The 26px gold rule that leads into the eyebrow. */
.hiatus__eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--color-gold-deep);
	flex: none;
}
.hiatus__title {
	margin: 0 0 var(--space-5);
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	color: var(--color-bg);
	text-wrap: pretty;
}
.hiatus__copy { color: #dfe4f0; }
.hiatus__copy p {
	margin: 0 0 var(--space-4);
	/* Design says 19px; --fs-base (18px) is the nearest declared step. */
	font-size: var(--fs-base);
	line-height: 1.7;
	max-width: 52ch;
	text-wrap: pretty;
}
.hiatus__copy a { color: var(--color-gold); }
.hiatus__body .button { margin-top: var(--space-3); }

.hiatus__aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}
/* The logo always sits on a cream tile — never directly on the navy. */
.hiatus__tile {
	width: 100%;
	max-width: 440px;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: 0 24px 54px rgba(20, 26, 50, 0.45);
}
.hiatus__image { width: 100%; height: 100%; object-fit: contain; }
.hiatus__caption {
	margin: 0;
	max-width: 440px;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: #b9c1d6;
	text-align: center;
	text-wrap: pretty;
}
.hiatus__caption em { color: var(--color-gold); font-style: italic; }
.hiatus__caption a { color: var(--color-gold); }

/* --- Latest Books: five covers across --- */
.home-books { padding-block: var(--space-8) var(--space-5); }
.home-books__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-5);
}
.home-book { display: flex; flex-direction: column; gap: var(--space-3); }
.home-book__cover {
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
	transition: transform var(--transition), box-shadow var(--transition);
}
.home-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.home-book__cover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), 0 12px 28px rgba(45, 59, 106, 0.18); }
/* 18px here vs 22px on news rows — the design keeps the two deliberately apart. */
.home-book__title { margin: 0; font-size: var(--fs-base); line-height: 1.3; }
.home-book__title a { color: var(--color-navy); text-decoration: none; }
.home-book__title a:hover, .home-book__title a:focus { color: var(--color-gold-dark); }
.home-book__meta {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1;
	color: var(--color-slate-light);
}

/* --- News beside the bio card --- */
.home-lower { padding-block: var(--space-8); }
.home-lower__inner {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: var(--space-7);
	align-items: start;
}
.news-rows { display: flex; flex-direction: column; }
.news-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-5);
	padding-block: var(--space-5);
	border-top: 1px solid var(--color-border);
}
.news-row:last-child { border-bottom: 1px solid var(--color-border); }
.news-row__date {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-gold-dark);
}
.news-row__title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); line-height: 1.3; }
.news-row__title a { color: var(--color-navy); text-decoration: none; }
.news-row__title a:hover, .news-row__title a:focus { color: var(--color-gold-dark); }
.news-row__excerpt {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--color-slate);
	max-width: 60ch;
}
.home-news__all { display: inline-block; margin-top: var(--space-5); }

.bio-card {
	background: var(--color-wash-teal);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}
.bio-card__photo { margin-bottom: var(--space-5); }
.bio-card__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
}
.bio-card__title { margin: 0 0 var(--space-3); font-size: var(--fs-h3); line-height: 1.2; }
.bio-card__body { color: var(--color-slate); }
.bio-card__body p { margin: 0 0 var(--space-3); font-size: var(--fs-base); line-height: 1.65; }
.bio-card__body > *:last-child { margin-bottom: 0; }

.bio-card__elsewhere {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-teal);
}
.bio-card__eyebrow {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}

/* Labelled social buttons — the bio card's counterpart to the footer squares. */
.social-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	/* A step darker than --color-border so the button reads as a button on white. */
	border: 1px solid #c9c3b6;
	border-radius: var(--radius);
	color: var(--color-navy);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.social-button:hover, .social-button:focus {
	border-color: var(--color-gold-deep);
	box-shadow: var(--shadow-sm);
	color: var(--color-navy);
}
.social-button__icon { display: inline-flex; flex: none; width: 17px; height: 17px; }
.social-button__icon svg { width: 100%; height: 100%; fill: currentColor; }

/* --------------------------------------------------------------
8.0 News (posts) listing & single
-------------------------------------------------------------- */
.posts-list { display: grid; gap: var(--space-6); }
.post-card {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-5);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}
.post-card:last-child { border-bottom: 0; }
.post-card__thumb img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.post-card__title { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.post-card__title a { color: var(--color-navy); text-decoration: none; }
.post-card__title a:hover { color: var(--color-gold-dark); }
.entry-meta {
	color: var(--color-slate-light);
	font-size: var(--fs-sm);
	margin-bottom: var(--space-3);
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.entry-meta a { color: var(--color-slate); text-decoration: none; }
.entry-meta a:hover { color: var(--color-gold-dark); }

.single-post .entry-header { margin-bottom: var(--space-6); }
.single-post .entry-title { font-size: var(--fs-h1); }
.post-thumbnail img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6); }
.entry-content { font-size: var(--fs-base); }
.entry-content h2 { margin-top: var(--space-7); }
.entry-content img { border-radius: var(--radius); }

.entry-footer {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-slate);
}

.pagination { margin-top: var(--space-7); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex;
	min-width: 42px;
	justify-content: center;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-navy);
}
.pagination .page-numbers.current { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.pagination .page-numbers:hover { border-color: var(--color-gold); }

/* --------------------------------------------------------------
9.0 Comments
-------------------------------------------------------------- */
.comments-area { margin-top: var(--space-8); }
.comments-title, .comment-reply-title { font-size: var(--fs-h3); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol { list-style: none; }
.comment-body {
	padding: var(--space-5);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	margin-bottom: var(--space-4);
}
.comment-author { font-weight: 700; color: var(--color-navy); }
.comment-author .avatar { border-radius: 50%; margin-right: var(--space-2); vertical-align: middle; }
.comment-metadata { font-size: var(--fs-sm); color: var(--color-slate-light); }
.comment-list .children { margin-left: var(--space-5); }
.comment-respond { margin-top: var(--space-6); }

/* --------------------------------------------------------------
10.0 Book catalog (listing & single)
-------------------------------------------------------------- */
/* --- Catalog header + series filter pills --- */
.books-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-7) var(--space-6);
}
.books-header__title { margin: 0 0 var(--space-3); font-size: var(--fs-display); line-height: 1.1; }
.books-header__subtitle {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--color-slate);
	max-width: 58ch;
}
.books-header .series-filter { margin-top: var(--space-5); }

.series-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.series-filter__label {
	margin: 0 var(--space-2) 0 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}

/* Fully rounded, unlike the 8px radius used everywhere else — the pills are the
   one place the design goes for a capsule. */
.pill {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-teal);
	border-radius: 999px;
	background: var(--color-wash-teal);
	color: var(--color-navy);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pill:hover, .pill:focus { border-color: var(--color-gold-deep); color: var(--color-navy); }
.pill--standalone { background: var(--color-wash-gold); border-color: var(--color-gold); }
.pill--active {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-bg);
}
.pill--active:hover, .pill--active:focus { background: var(--color-navy-dark); border-color: var(--color-navy-dark); color: var(--color-bg); }

/* --- Catalog grid --- */
.books-body { padding-block: var(--space-7) var(--space-8); }
.books-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6) var(--space-5);
}

.book-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.book-card__cover {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: transform var(--transition), box-shadow var(--transition);
	background: var(--color-surface);
	aspect-ratio: 2 / 3;
}
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card:hover .book-card__cover { transform: translateY(-2px); box-shadow: var(--shadow-md), 0 12px 28px rgba(45, 59, 106, 0.18); }

/* The text sits in its own block so the card's 12px gap applies only between
   cover and text; the tighter spacing inside is set per line. */
.book-card__series {
	margin: 0 0 var(--space-2);
	/* Books with no series render this line empty, and an empty <p> makes no line
	   box at all. Reserve one line so their titles stay level with the titles of
	   books that do carry a series. 1em is this element's own --fs-xs, so the
	   reserved height matches a real one-line series name exactly. */
	min-height: calc(var(--lh-normal) * 1em);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}
.book-card__title { margin: 0 0 var(--space-1); font-size: var(--fs-h4); line-height: 1.28; }
.book-card__title a { color: var(--color-navy); text-decoration: none; }
.book-card__title a:hover, .book-card__title a:focus { color: var(--color-gold-dark); }
/* Stretch the title's link across the card so the cover is clickable too. */
.book-card__title a::after { content: ""; position: absolute; inset: 0; }
.book-card__date { margin: 0; font-size: var(--fs-sm); line-height: 1; color: var(--color-slate-light); }

/* --- Catalog pagination --- */
.books-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-7);
}
.books-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-navy);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}
.books-pagination .page-numbers:hover { border-color: var(--color-gold-deep); }
.books-pagination .page-numbers.current {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-bg);
}
.books-pagination .page-numbers.dots { border-color: transparent; }
.books-pagination__step {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	color: var(--color-gold-dark);
	text-decoration: none;
}
.books-pagination__step:hover, .books-pagination__step:focus { color: var(--color-navy); }
.books-pagination__step.is-disabled { color: var(--color-slate-light); }

/* Cover placeholder when no image is set */
.cover-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--space-4);
	color: var(--color-slate-light);
	font-family: var(--font-heading);
	text-align: center;
}

/* --- Single book: breadcrumb + top block --- */
.book-crumb {
	padding-top: var(--space-5);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--color-slate-light);
}
.book-crumb a { color: var(--color-gold-dark); text-decoration: none; }
.book-crumb a:hover, .book-crumb a:focus { color: var(--color-navy); text-decoration: underline; }
.book-crumb__sep { padding-inline: var(--space-2); }

.book-hero { padding-block: var(--space-6) var(--space-8); }
.book-hero__inner {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: var(--space-8);
	align-items: start;
}
.book-hero__cover {
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-surface);
	/* Deeper than --shadow-md: the cover is the page's anchor. */
	box-shadow: 0 14px 40px rgba(45, 59, 106, 0.24);
}
.book-hero__cover img { width: 100%; height: 100%; object-fit: cover; }

.book-hero__series {
	display: inline-block;
	margin-bottom: var(--space-4);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
	text-decoration: none;
}
.book-hero__series:hover, .book-hero__series:focus { color: var(--color-navy); }
.book-hero__title { margin: 0 0 var(--space-3); font-size: var(--fs-h1); line-height: 1.12; text-wrap: pretty; }
.book-hero__release {
	margin: 0 0 var(--space-6);
	font-size: var(--fs-sm);
	line-height: 1;
	color: var(--color-slate-light);
}
.book-hero__description { max-width: 66ch; color: var(--color-slate); }
.book-hero__description p { margin: 0 0 var(--space-4); font-size: var(--fs-base); line-height: 1.75; }
.book-hero__description > *:last-child { margin-bottom: 0; }

/* --- Shared band shell for the conditional sections --- */
.book-band { padding-block: var(--space-7); }
.book-band--sand {
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.book-band--navy { background: var(--color-navy); }
/* Carries the whole gap down to the band's content, which the intro paragraph
   below it used to supply before it was removed. */
.book-band__title { margin: 0 0 var(--space-6); font-size: 2.125rem; line-height: var(--lh-tight); }
.book-band--navy .book-band__title { color: var(--color-bg); }

/* --- Editions --- */
.edition-list { display: flex; flex-direction: column; gap: var(--space-5); }
.edition {
	display: grid;
	grid-template-columns: 112px 1fr 300px;
	gap: var(--space-6);
	align-items: start;
	padding: var(--space-6);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.edition__cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 2 / 3; }
.edition__cover img { width: 100%; height: 100%; object-fit: cover; }
.edition__type { margin: 0 0 var(--space-4); font-size: var(--fs-h3); line-height: 1.2; }

.edition__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	max-width: 44ch;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--color-slate);
}
.edition__details dt { font-weight: 600; color: var(--color-text); }
.edition__details dd { margin: 0; }
.edition__details .edition__isbn { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.edition__buy-label {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}

/* --- International versions --- */
.version-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.version {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--space-5);
	align-items: start;
	padding: var(--space-5);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.version__cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 2 / 3; }
.version__cover img { width: 100%; height: 100%; object-fit: cover; }
.version__lang {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}
.version__title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); line-height: 1.25; }
.version__publisher { margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-slate); }

/* --- Retailer buy buttons --- */
.retailer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.retailer-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	/* Cream, not white: these sit on cream cards, matching the mockup. */
	background: var(--color-bg);
	border: 1px solid #c9c3b6;
	border-radius: var(--radius);
	color: var(--color-navy);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.retailer-link:hover, .retailer-link:focus { border-color: var(--color-gold-deep); box-shadow: var(--shadow-sm); color: var(--color-navy); }
/* Row order picks the primary — first link is the filled one. */
.retailer-link--primary {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-bg);
}
.retailer-link--primary:hover, .retailer-link--primary:focus {
	background: var(--color-navy-dark);
	border-color: var(--color-navy-dark);
	color: var(--color-bg);
}
.retailer-link__icon { display: inline-flex; flex: none; width: 15px; height: 15px; }
.retailer-link__icon svg, .retailer-link__icon img { width: 100%; height: 100%; object-fit: contain; fill: currentColor; }
/* Stands in for a brand mark no icon set ships; inherits currentColor like the
   SVGs. Sized by its own text — never put it in .retailer-link__icon, whose fixed
   15px box would let the glyph bleed over the label. */
.retailer-link__lettermark {
	flex: none;
	width: auto;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.retailer-link__label { min-width: 0; }

.retailer-links--sm { gap: var(--space-1); }
.retailer-links--sm .retailer-link { padding: 9px 13px; font-size: 0.78rem; }
.retailer-links--sm .retailer-link__icon { width: 13px; height: 13px; }
/* Scale the lettermark with the smaller label so it doesn't dominate. */
.retailer-links--sm .retailer-link__lettermark { font-size: 0.78rem; }

/* --- Awards --- */
.awards-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.award {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-5);
	background: rgba(250, 246, 240, 0.06);
	border: 1px solid rgba(236, 205, 150, 0.3);
	border-radius: var(--radius-lg);
}
.award__seal { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.award__seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* No seal uploaded — a dashed ring keeps the row's rhythm without inventing art. */
.award__seal--empty { border: 2px dashed rgba(236, 205, 150, 0.45); }
.award__year {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	color: var(--color-gold);
}
.award__name { margin: 0 0 var(--space-1); font-size: var(--fs-lg); line-height: 1.25; color: var(--color-bg); }
.award__category { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: #b9c1d6; }

/* --- Prev / next --- */
.book-nav { padding-block: var(--space-7) var(--space-8); }
.book-nav__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.book-nav__card {
	display: block;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.book-nav__card:hover, .book-nav__card:focus { border-color: var(--color-gold-deep); box-shadow: var(--shadow-sm); }
.book-nav__card--next { text-align: right; }
.book-nav__label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}
.book-nav__title {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--color-navy);
}

/* --------------------------------------------------------------
11.0 Contact
-------------------------------------------------------------- */
.contact-header {
	padding-block: var(--space-7) var(--space-6);
	border-bottom: 1px solid var(--color-border);
}
.contact-header__title { margin: 0 0 var(--space-3); font-size: var(--fs-display); line-height: 1.1; }
.contact-header__intro { max-width: 62ch; color: var(--color-slate); }
.contact-header__intro p { margin: 0 0 var(--space-4); font-size: var(--fs-base); line-height: 1.7; text-wrap: pretty; }
.contact-header__intro > *:last-child { margin-bottom: 0; }

.contact-body { padding-block: var(--space-7) var(--space-8); }
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--space-7);
	align-items: start;
}

/* The form card — the plugin's markup lives inside this. */
.contact-card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
}
.contact-card__title { margin: 0 0 var(--space-1); font-size: 1.875rem; line-height: var(--lh-tight); }
.contact-card__note { margin: 0 0 var(--space-6); font-size: var(--fs-sm); line-height: 1.6; color: var(--color-slate); }
/* The only red-adjacent token in the system — asterisks and errors share it. */
.required, .contact-form .wpcf7-not-valid-tip { color: var(--color-rose-deep); }
.contact-form__setup { font-size: var(--fs-sm); color: var(--color-slate-light); }

/* --------------------------------------------------------------
   Plugin-agnostic form controls. Everything below targets generic
   element selectors inside .contact-form so the fields inherit the
   card regardless of which form plugin is installed; the few
   wpcf7-* hooks are additive, not required.
-------------------------------------------------------------- */
/* Plugins differ on whether the label wraps its control (Contact Form 7 does) or
   sits beside it. No bottom margin here — it would land *after* a wrapped field and
   stack with the group spacing below. The gap is put on the control instead, in
   both arrangements. */
.contact-form label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-text);
}
.contact-form label > input,
.contact-form label > textarea,
.contact-form label > select,
.contact-form label + input,
.contact-form label + textarea,
.contact-form label + select,
.contact-form .wpcf7-form-control-wrap { display: block; margin-top: var(--space-2); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form textarea,
.contact-form select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	/* White fields on the sand card so they read as fields; the border is a step
	   darker than --color-border to hold AA against white. */
	background: var(--color-surface);
	border: 1px solid #c9c3b6;
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-base);
	/* Explicit: a wrapping <label> is 600, and `font: inherit` would otherwise
	   make the field's own text semibold. */
	font-weight: 400;
	color: var(--color-text);
	margin-bottom: 0;
}
.contact-form textarea { min-height: 170px; line-height: 1.6; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	outline: 2px solid var(--color-gold-deep);
	outline-offset: 2px;
	border-color: var(--color-navy);
	box-shadow: none;
}
.contact-form p { margin: 0 0 var(--space-5); }
.contact-form p:last-child { margin-bottom: 0; }

.contact-form input[type="submit"],
.contact-form button[type="submit"] {
	width: auto;
	background: var(--color-navy);
	border: 1px solid var(--color-navy);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-6);
	color: var(--color-bg);
	font-size: var(--fs-sm);
	font-weight: 600;
	box-shadow: var(--shadow-md);
	cursor: pointer;
}
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
	background: var(--color-navy-dark);
	border-color: var(--color-navy-dark);
}

.contact-form input[type="checkbox"],
.contact-form input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--color-navy); }

/* A radio group rendered as pills — the design's "What's this about?" row. Applies
   automatically if the form gains a radio field; a plain select is fine otherwise. */
.contact-form .wpcf7-radio,
.contact-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contact-form .wpcf7-list-item { margin: 0; }
.contact-form .wpcf7-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	background: var(--color-surface);
	border: 1px solid #c9c3b6;
	border-radius: 999px;
	font-size: var(--fs-sm);
	color: var(--color-navy);
	cursor: pointer;
}

/* CF7's response banner. The design's full "replace the form with a confirmation"
   success state is listed as a follow-up in the handoff, not built here. */
.contact-form .wpcf7-response-output {
	margin: var(--space-5) 0 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-rose-deep);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	color: var(--color-rose-deep);
}
.contact-form .wpcf7-mail-sent-ok {
	border-color: var(--color-teal);
	background: var(--color-wash-teal);
	color: var(--color-navy);
}

/* --- The aside: three stacked panels --- */
.contact-aside { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-panel {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-6);
}
.contact-panel--email { background: var(--color-wash-teal); border-color: var(--color-teal); }
.contact-panel--faq { background: var(--color-wash-gold); border-color: var(--color-gold); }
.contact-panel__title { margin: 0 0 var(--space-3); font-size: var(--fs-h3); line-height: 1.2; }
.contact-panel--elsewhere .contact-panel__title,
.contact-panel--faq .contact-panel__title { font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.contact-panel__lead { margin: 0 0 var(--space-4); font-size: var(--fs-base); line-height: 1.65; color: var(--color-slate); }

.contact-email {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	border: 1px solid #c9c3b6;
	border-radius: var(--radius);
	color: var(--color-navy);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	/* Long addresses must not blow out the 380px column. */
	word-break: break-all;
}
.contact-email:hover, .contact-email:focus { border-color: var(--color-gold-deep); color: var(--color-navy); }
.contact-email__icon { display: inline-flex; flex: none; width: 18px; height: 18px; }
.contact-email__icon svg { width: 100%; height: 100%; fill: currentColor; }

/* Social links as hairline-separated rows. */
.social-rows { display: flex; flex-direction: column; }
.social-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-slate);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}
.social-row:last-child { border-bottom: 0; }
.social-row:hover, .social-row:focus { color: var(--color-gold-dark); }
.social-row__icon { display: inline-flex; flex: none; width: 19px; height: 19px; }
.social-row__icon svg { width: 100%; height: 100%; fill: currentColor; }

.contact-faq { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.contact-faq dt { font-size: var(--fs-sm); font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-1); }
.contact-faq dd { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: #4c4327; }
.contact-faq dd p { margin: 0; }
.contact-faq dd em { font-style: italic; }

/* Cookie notice */
.cookie-notice {
	position: fixed;
	bottom: var(--space-4);
	left: var(--space-4);
	right: var(--space-4);
	max-width: 720px;
	margin-inline: auto;
	background: var(--color-navy);
	color: #eef1f8;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	display: flex;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	z-index: 100;
	font-size: var(--fs-sm);
}
.cookie-notice a { color: var(--color-gold); }
.cookie-notice[hidden] { display: none; }
/* The notice sits on a navy surface, so the ghost button's default navy text
   would be invisible until hover. Use gold text/border at rest, gold fill on hover. */
.cookie-notice .button--ghost { color: var(--color-gold); border-color: var(--color-gold); }
.cookie-notice .button--ghost:hover,
.cookie-notice .button--ghost:focus { background: var(--color-gold); color: var(--color-navy); border-color: var(--color-gold); }

/* --------------------------------------------------------------
12.0 Forms & buttons
-------------------------------------------------------------- */
.button, button, input[type="submit"], .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: var(--color-navy);
	color: #fff;
	border: 2px solid var(--color-navy);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-5);
	font: inherit;
	font-weight: 700;
	font-size: var(--fs-sm);
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.button:hover, button:hover, input[type="submit"]:hover, .wpcf7-submit:hover {
	background: var(--color-navy-dark);
	border-color: var(--color-navy-dark);
	color: #fff;
}
.button--ghost {
	background: transparent;
	color: var(--color-navy);
	border-color: var(--color-gold);
}
.button--ghost:hover { background: var(--color-gold); color: var(--color-navy); border-color: var(--color-gold); }

/* Gold fill with navy text — the header CTA and the hiatus-notice button.
   Darkens to --color-gold-deep rather than navy, which would erase the label. */
.button--gold {
	background: var(--color-gold);
	color: var(--color-navy);
	border-color: var(--color-gold);
	box-shadow: var(--shadow-sm);
}
.button--gold:hover, .button--gold:focus {
	background: var(--color-gold-deep);
	border-color: var(--color-gold-deep);
	color: var(--color-navy);
}

label { display: block; font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-1); font-size: var(--fs-sm); }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select {
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-sm);
	background: var(--color-surface);
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-navy);
	box-shadow: 0 0 0 3px rgba(45, 59, 106, 0.12);
}
textarea { min-height: 160px; resize: vertical; }

/* --------------------------------------------------------------
13.0 Accessibility helpers
-------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: var(--color-navy);
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
.skip-link:focus { outline: 2px solid var(--color-gold); }

/* One ring for every surface — gold-deep reads on both ivory and navy. */
:focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 2px; }

.alignwide { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }

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

/* --------------------------------------------------------------
14.0 Responsive (mobile / tablet / desktop)
-------------------------------------------------------------- */

/* Tablet and below */
@media (max-width: 900px) {
	:root {
		--fs-h1: 2.2rem;
		--fs-h2: 1.9rem;
		--fs-display: 2.6rem;
	}
	/* The mark is ~5.7:1, so 96px tall is 550px wide — more than the header can
	   spare once the nav and CTA are alongside it, and .site-header__inner wraps
	   rather than overflows. 44px keeps it on one row down to the narrowest phone. */
	.custom-logo { max-height: 44px; }
	/* Notice stacks image-first; books drop to 3-up; news goes single column
	   with the bio card beneath it. */
	.hiatus__inner { grid-template-columns: 1fr; gap: var(--space-6); }
	.hiatus__aside { order: -1; }
	.home-books__grid { grid-template-columns: repeat(3, 1fr); }
	.home-lower__inner { grid-template-columns: 1fr; gap: var(--space-7); }
	.home-head__title { font-size: var(--fs-h2); }

	/* Catalog: 4-up ≥1100px, 3-up here, 2-up on mobile. */
	.books-grid { grid-template-columns: repeat(3, 1fr); }
	.books-header__title { font-size: var(--fs-h1); }

	/* Single book: narrower cover, buy buttons drop below the details, and the
	   three-across grids halve. */
	.book-hero__inner { grid-template-columns: 240px 1fr; gap: var(--space-6); }
	.edition { grid-template-columns: 112px 1fr; }
	.edition__buy { grid-column: 1 / -1; }
	.version-list, .awards-list { grid-template-columns: repeat(2, 1fr); }

	/* Aside drops below the form and its cards stretch full-width. */
	.contact-layout { grid-template-columns: 1fr; }
	.contact-header__title { font-size: var(--fs-h1); }

	/* Footer stacks to three centered rows: wordmark, socials, legal. */
	.site-footer__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--space-5);
		text-align: center;
	}
	.site-footer__wordmark,
	.site-footer__social,
	.site-footer__legal { grid-column: 1; justify-self: center; }
}

/* Mobile */
@media (max-width: 640px) {
	:root {
		--fs-h1: 1.9rem;
		--fs-display: 2.1rem;
		--fs-base: 1.0625rem;
	}
	.section { padding-block: var(--space-6); }

	/* Collapse primary nav into a toggle */
	.menu-toggle { display: inline-block; }
	/* Wrap rather than overflow: below ~340px the wordmark, toggle and CTA can't
	   share a row, so the CTA drops to a second line instead of pushing the page
	   sideways. Self-adjusting — it only wraps when it actually has to. */
	.site-header__inner {
		gap: var(--space-3);
		row-gap: var(--space-3);
		padding-block: var(--space-4);
		flex-wrap: wrap;
	}
	.site-header__cta { padding-inline: var(--space-4); }

	/* Bump the social squares to a full 44px touch target. */
	.social-links a { width: 44px; height: 44px; }
	.main-navigation .primary-menu-container {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-md);
		padding: var(--space-4) var(--space-5);
	}
	.main-navigation.toggled .primary-menu-container { display: block; }
	.main-navigation ul { flex-direction: column; gap: var(--space-1); }
	.main-navigation a { display: block; padding-block: var(--space-3); }
	.site-header__inner { position: relative; }

	.home-books__grid { grid-template-columns: repeat(2, 1fr); }
	/* Date above the headline rather than in a cramped 120px gutter. */
	.news-row { grid-template-columns: 1fr; gap: var(--space-2); }
	.hiatus__tile { padding: var(--space-4); }

	.post-card { grid-template-columns: 1fr; }
	.post-card__thumb { max-width: 280px; }
	.book-hero__inner { grid-template-columns: 1fr; }
	.book-hero__cover { max-width: 260px; }
	/* Editions stack: cover beside the title, details and buttons full-width below. */
	.edition { grid-template-columns: 90px 1fr; gap: var(--space-4); padding: var(--space-5); }
	.version { grid-template-columns: 90px 1fr; gap: var(--space-4); }
	.version-list, .awards-list { grid-template-columns: 1fr; }
	.book-nav__inner { grid-template-columns: 1fr; }
	.book-nav__card--next { text-align: left; }
	.books-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
}

/* The catalog holds 4-up only where there is room for it. */
@media (min-width: 901px) and (max-width: 1100px) {
	.books-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Very narrow phones — trim the wordmark so it still shares a row with the toggle. */
@media (max-width: 400px) {
	.site-title { font-size: var(--fs-lg); }
}