/*
Theme Name: Exceptional Leader
Theme URI: https://beinganexceptionalleader.com
Author: Dr. John Thinnes
Author URI: https://beinganexceptionalleader.com
Description: A focused, uncluttered book theme built for "Being an Exceptional Leader" by Dr. John Thinnes. Deep blue and tan typography taken from the book jacket, with templates for the book, the author, what the book offers, buy links, and a companion workbook.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
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: exceptional-leader
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, blog
*/

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
	/*
	 * Brand palette. #111485 and #E1DBC7 are the two given colours; the rest
	 * are steps either side of them, for gradients, tints, and hover states.
	 */
	--el-blue-900: #070845; /* deepest — footer, quote band */
	--el-blue-800: #0c0e66;
	--el-blue-700: #111485; /* primary brand blue */
	--el-blue-600: #191ea6;
	--el-blue-500: #2b31c4;
	--el-blue-050: #eeeff9; /* palest tint, for panels on white */

	--el-cream: #e1dbc7; /* brand tan */
	--el-cream-soft: #efebdd;
	--el-gold-700: #6f6647; /* the tan, darkened until it reads on white */

	--el-ink: #0e1220;
	--el-slate: #4a5266;
	--el-line: #dfe3ee;
	--el-mist: #f5f6fa;
	--el-paper: #ffffff;

	/*
	 * Typography
	 *
	 * Three roles, deliberately separated:
	 *   display — Anton, the jacket's heavy condensed caps. Big sizes only.
	 *   head    — Oswald, condensed. Headings and pull quotes, never small text.
	 *   body/ui — Source Sans 3. All reading text, and every small label,
	 *             button, and menu item. A condensed face set small and in
	 *             capitals is hard to read; this is the fix for that.
	 */
	--el-font-display: "Anton", "Haettenschweiler", "Arial Narrow", "Franklin Gothic Heavy", sans-serif;
	--el-font-head: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--el-font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--el-font-ui: var(--el-font-body);

	/*
	 * Tracking for capitals. Uppercase needs more room between letters than
	 * lowercase, and the smaller it gets the more it needs.
	 */
	--el-track-micro: 0.14em; /* under 0.85rem */
	--el-track-label: 0.1em;  /* 0.85rem and up */
	--el-track-btn: 0.07em;

	--el-step--1: clamp(0.94rem, 0.92rem + 0.12vw, 1rem);
	--el-step-0: clamp(1.06rem, 1rem + 0.28vw, 1.22rem);
	--el-step-1: clamp(1.25rem, 1.14rem + 0.5vw, 1.55rem);
	--el-step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
	--el-step-3: clamp(1.9rem, 1.5rem + 1.7vw, 3rem);
	--el-step-4: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);

	/* Layout */
	--el-measure: 34rem; /* reading width — the copy is long, keep lines short */
	--el-wide: 76rem;
	--el-gutter: clamp(1.25rem, 5vw, 3rem);
	--el-section-y: clamp(3.5rem, 8vw, 7rem);

	--el-radius: 6px;
	--el-radius-lg: 12px;

	/*
	 * Cards are separated by elevation and fill, not by outlines. Hairline
	 * borders around every box make a page look like a spreadsheet.
	 */
	--el-shadow-book: 0 2px 4px rgba(7, 8, 69, 0.08), 0 18px 40px rgba(7, 8, 69, 0.18), 0 40px 80px rgba(7, 8, 69, 0.14);
	--el-shadow-card: 0 1px 2px rgba(7, 8, 69, 0.04), 0 6px 16px rgba(7, 8, 69, 0.06);
	--el-shadow-card-hover: 0 2px 4px rgba(7, 8, 69, 0.06), 0 16px 36px rgba(7, 8, 69, 0.13);
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ---------------------------------------------------------------------- */

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

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

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--el-paper);
	color: var(--el-ink);
	font-family: var(--el-font-body);
	font-size: var(--el-step-0);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--el-blue-700);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--el-blue-800);
}

:focus-visible {
	outline: 3px solid var(--el-blue-600);
	outline-offset: 3px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--el-font-head);
	font-weight: 500;
	line-height: 1.18;
	/* Oswald is condensed. Positive tracking opens it up; negative closes it
	   past the point of comfortable reading. */
	letter-spacing: 0.012em;
	color: var(--el-blue-900);
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: var(--el-step-3);
}
h2 {
	font-size: var(--el-step-2);
}
h3 {
	font-size: var(--el-step-1);
	font-weight: 600;
}

/* Small headings drop the condensed face entirely — at this size it is the
   legibility of the letterforms that matters, not their character. */
h4,
h5,
h6 {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: var(--el-step-0);
	letter-spacing: var(--el-track-label);
	text-transform: uppercase;
}

p,
ul,
ol,
blockquote,
figure,
table,
pre {
	margin: 0 0 1.35em;
}

ul,
ol {
	padding-left: 1.15em;
}

li {
	margin-bottom: 0.5em;
}

li::marker {
	color: var(--el-blue-600);
}

strong,
b {
	font-weight: 700;
}

hr {
	border: 0;
	height: 1px;
	background: var(--el-line);
	margin: var(--el-section-y) 0;
}

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

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	text-align: left;
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--el-line);
}

/* -------------------------------------------------------------------------
   3. Utilities
   ---------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -140%);
	z-index: 999;
	background: var(--el-blue-700);
	color: #fff;
	padding: 0.75rem 1.5rem;
	font-family: var(--el-font-ui);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--el-track-label);
	text-decoration: none;
	transition: transform 0.18s ease;
}

.skip-link:focus {
	transform: translate(-50%, 0);
	color: #fff;
}

.el-shell {
	width: min(100% - (var(--el-gutter) * 2), var(--el-wide));
	margin-inline: auto;
}

.el-measure {
	width: min(100%, var(--el-measure));
	margin-inline: auto;
}

.el-section {
	padding-block: var(--el-section-y);
}

.el-section--mist {
	background: var(--el-mist);
}

.el-center {
	text-align: center;
}

.el-center-flex {
	display: flex;
	justify-content: center;
}

.el-stack-sm {
	margin-top: 1.5rem;
}

.el-stack-md {
	margin-top: 2rem;
}

.el-stack-lg {
	margin-top: 3rem;
}

.el-flush {
	margin-inline: 0;
}

/* Eyebrow — the small label above a heading */
.el-eyebrow {
	display: block;
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.76rem;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--el-blue-600);
	margin: 0 0 0.9rem;
}

.el-eyebrow--onblue {
	color: var(--el-cream);
}

/* Cream rule used as a section divider, echoing the jacket's accent */
.el-rule {
	width: 68px;
	height: 4px;
	background: var(--el-blue-700);
	border: 0;
	margin: 0 0 1.75rem;
	border-radius: 2px;
}

.el-rule--center {
	margin-inline: auto;
}

.el-rule--cream {
	background: var(--el-cream);
}

/* Display type — matches the jacket's heavy condensed caps */
.el-display {
	font-family: var(--el-font-display);
	font-weight: 400;
	font-size: var(--el-step-4);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--el-blue-900);
	margin: 0;
}

.el-display__lead {
	display: block;
	font-size: 0.46em;
	color: var(--el-gold-700);
	letter-spacing: 0.05em;
	margin-bottom: 0.12em;
}

/* -------------------------------------------------------------------------
   4. Header + navigation
   ---------------------------------------------------------------------- */

.el-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Tan reads well only on a dark ground; on white it is barely visible. */
	background: var(--el-blue-700);
	border-bottom: 3px solid var(--el-cream);
}

.el-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 72px;
	padding-block: 0.75rem;
}

.el-brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

.el-brand__title {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
}

.el-brand__title a {
	color: #fff;
	text-decoration: none;
}

.el-brand__title a:hover,
.el-brand__title a:focus {
	color: var(--el-cream);
}

.el-brand .custom-logo {
	max-height: 48px;
	width: auto;
}

.el-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.el-nav__menu {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.el-nav__menu li {
	margin: 0;
	position: relative;
}

.el-nav__menu a {
	display: inline-block;
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.86rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--el-cream);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.el-nav__menu a:hover,
.el-nav__menu a:focus,
.el-nav__menu .current-menu-item > a,
.el-nav__menu .current_page_item > a,
.el-nav__menu .current-menu-ancestor > a {
	color: #fff;
	border-bottom-color: var(--el-cream);
}

/*
 * "Buy the Book" is a menu item rendered as the tan button, so the one action
 * on the page sits in the same bar as everything else rather than beside it.
 */
.el-nav__menu .el-menu-buy > a {
	background: var(--el-cream);
	color: var(--el-blue-900);
	border-radius: var(--el-radius);
	border-bottom: 0;
	padding: 0.6rem 1.05rem;
	font-weight: 700;
}

.el-nav__menu .el-menu-buy > a:hover,
.el-nav__menu .el-menu-buy > a:focus {
	background: #fff;
	color: var(--el-blue-900);
	border-bottom: 0;
}

/* Sub menus */
.el-nav__menu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 220px;
	background: var(--el-blue-800);
	border: 0;
	box-shadow: 0 14px 28px rgba(7, 8, 69, 0.35);
	padding: 0.5rem 0;
	margin: 0;
	list-style: none;
	display: none;
	z-index: 20;
}

.el-nav__menu li:hover > .sub-menu,
.el-nav__menu li:focus-within > .sub-menu {
	display: block;
}

.el-nav__menu .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	border-bottom: 0;
	letter-spacing: 0.06em;
}

.el-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.55rem;
	background: transparent;
	border: 1px solid rgba(225, 219, 199, 0.5);
	border-radius: var(--el-radius);
	padding: 0.6rem 0.9rem;
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: var(--el-track-label);
	text-transform: uppercase;
	color: var(--el-cream);
	cursor: pointer;
}

.el-nav__toggle-bars,
.el-nav__toggle-bars::before,
.el-nav__toggle-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--el-cream);
	content: "";
	position: relative;
}

.el-nav__toggle-bars::before {
	top: -6px;
}

.el-nav__toggle-bars::after {
	top: 4px;
}

.el-nav__toggle[aria-expanded="true"] .el-nav__toggle-bars {
	background: transparent;
}

.el-nav__toggle[aria-expanded="true"] .el-nav__toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
}

.el-nav__toggle[aria-expanded="true"] .el-nav__toggle-bars::after {
	top: -2px;
	transform: rotate(-45deg);
}

@media (max-width: 860px) {
	.el-nav__toggle {
		display: inline-flex;
	}

	.el-nav {
		gap: 0.75rem;
	}

	.el-nav__menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--el-blue-800);
		border-bottom: 3px solid var(--el-cream);
		box-shadow: 0 18px 32px rgba(7, 8, 69, 0.4);
		padding: 0.5rem var(--el-gutter) 1.25rem;
	}

	.el-header.is-open .el-nav__menu {
		display: flex;
	}

	.el-nav__menu a {
		display: block;
		padding: 0.85rem 0;
		border-bottom: 1px solid rgba(225, 219, 199, 0.22);
		font-size: 0.9rem;
	}

	.el-nav__menu li:last-child a {
		border-bottom: 0;
	}

	/* Full-width tan button at the end of the open panel. */
	.el-nav__menu .el-menu-buy > a {
		text-align: center;
		margin: 0.85rem 0 0.25rem;
	}

	.el-nav__menu .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
	}

	/* Scoped so it beats the .el-btn display rule that follows. */
	.el-header .el-header__cta {
		display: none;
	}

	.el-brand__title {
		font-size: 0.86rem;
		letter-spacing: 0.04em;
	}
}

@media (max-width: 460px) {
	.el-brand__title {
		font-size: 0.8rem;
	}

	/* Keep the word "Menu" — it is clearer than the icon alone. */
	.el-nav__toggle span:not(.el-nav__toggle-bars) {
		font-size: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------------- */

.el-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.86rem;
	letter-spacing: var(--el-track-btn);
	text-transform: uppercase;
	line-height: 1.1;
	padding: 0.95rem 1.7rem;
	border: 2px solid var(--el-blue-700);
	border-radius: var(--el-radius);
	background: var(--el-blue-700);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.el-btn:hover,
.el-btn:focus {
	background: var(--el-blue-800);
	border-color: var(--el-blue-800);
	color: #fff;
	transform: translateY(-1px);
}

.el-btn--ghost {
	background: transparent;
	color: var(--el-blue-700);
}

.el-btn--ghost:hover,
.el-btn--ghost:focus {
	background: var(--el-blue-700);
	color: #fff;
}

.el-btn--cream {
	background: var(--el-cream);
	border-color: var(--el-cream);
	color: var(--el-blue-900);
}

.el-btn--cream:hover,
.el-btn--cream:focus {
	background: var(--el-cream-soft);
	border-color: var(--el-cream-soft);
	color: var(--el-blue-900);
}

.el-btn--onblue-ghost {
	background: transparent;
	border-color: rgba(225, 219, 199, 0.7);
	color: var(--el-cream);
}

.el-btn--onblue-ghost:hover,
.el-btn--onblue-ghost:focus {
	background: var(--el-cream);
	border-color: var(--el-cream);
	color: var(--el-blue-900);
}

.el-btn--sm {
	padding: 0.72rem 1.2rem;
	font-size: 0.78rem;
}

.el-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	align-items: center;
}

.el-btn-row--center {
	justify-content: center;
}

/* Text link with arrow */
.el-textlink {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.84rem;
	letter-spacing: var(--el-track-label);
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid var(--el-cream);
	padding-bottom: 3px;
	transition: border-color 0.15s ease;
}

.el-textlink::after {
	content: " \2192";
}

.el-textlink:hover,
.el-textlink:focus {
	border-bottom-color: var(--el-blue-700);
}

/* -------------------------------------------------------------------------
   6. Hero (front page — the jacket is the first page)
   ---------------------------------------------------------------------- */

.el-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(120% 100% at 18% 0%, var(--el-blue-600) 0%, var(--el-blue-700) 42%, var(--el-blue-900) 100%);
	color: #fff;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/*
 * A soft light source behind the book, so the jacket sits in the gradient
 * rather than on top of it. Replaces an earlier ruled pattern that competed
 * with the type.
 */
.el-hero::after {
	content: "";
	position: absolute;
	top: -20%;
	right: -5%;
	width: 70%;
	height: 120%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(225, 219, 199, 0.16), rgba(225, 219, 199, 0) 70%);
}

/* Cream hairline where the hero meets the page — the jacket's foil edge. */
.el-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	z-index: 2;
	background: linear-gradient(90deg, var(--el-cream), rgba(225, 219, 199, 0.15));
}

.el-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

@media (max-width: 900px) {
	.el-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.el-hero .el-btn-row {
		justify-content: center;
	}

	.el-hero__meta {
		justify-content: center;
	}
}

.el-hero__title {
	font-family: var(--el-font-display);
	font-weight: 400;
	font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);
	line-height: 0.9;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.el-hero__title-lead {
	display: block;
	color: var(--el-cream);
	font-size: 0.36em;
	letter-spacing: 0.06em;
	margin-bottom: 0.15em;
}

.el-hero__subtitle {
	font-family: var(--el-font-head);
	font-weight: 300;
	font-style: italic;
	font-size: var(--el-step-1);
	line-height: 1.3;
	color: var(--el-cream);
	margin: 0 0 1.5rem;
}

.el-hero__author {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: var(--el-track-label);
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.75rem;
}

.el-hero__author::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--el-cream);
	margin-bottom: 1rem;
}

@media (max-width: 900px) {
	.el-hero__author::before {
		margin-inline: auto;
	}
}

.el-hero__blurb {
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--el-step-0);
	max-width: 36rem;
	margin: 0 0 2rem;
}

.el-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	color: rgba(225, 219, 199, 0.92);
}

/* -------------------------------------------------------------------------
   6b. Cover-only front page
   ---------------------------------------------------------------------- */

/*
 * Deliberately a light field. The uploaded jacket may be a three-dimensional
 * mock-up on a white background, and on a dark field that reads as a white
 * box behind the book. A near-white ground is safe for either a flat cover or
 * a mock-up, and the brand blue carries the header and footer instead.
 */
.el-cover {
	position: relative;
	overflow: hidden;
	color: var(--el-ink);
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

/*
 * Plain white behind a mock-up, so the white the photograph was shot on
 * disappears into the page instead of showing as a panel behind the book.
 */
.el-cover--mockup {
	background: #fff;
	/*
	 * A mock-up is photographed with white space around the book, so much of any
	 * width given to it is margin rather than jacket — on a square canvas, most
	 * of it. It gets the larger ceiling so the book inside the frame reads at a
	 * size comparable to flat artwork.
	 */
	--el-book-max: 38rem;
}

/* Trimmed to a book's shape, so the frame no longer needs the extra width. */
.el-cover--square {
	background: #fff;
	--el-book-max: 28rem;
}

.el-cover--flat {
	background: linear-gradient(180deg, #fff 0%, var(--el-mist) 100%);
	--el-book-max: 24rem;
}

/* Brand hairline where the cover section meets the page. */
.el-cover::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--el-blue-700), var(--el-cream));
}

/*
 * Jacket on the left, the opening paragraph on the right, both centred on the
 * same axis. Standing alone above the text, the cover read as though it had
 * been dropped on the page; set beside the words it has something to hold on
 * to. The columns size to the artwork rather than to fractions, so a wider or
 * narrower cover file does not leave the text stranded.
 */
.el-cover__inner {
	display: grid;
	/*
	 * Fractions, not `auto`. An `auto` track sizes to the image's intrinsic
	 * width — 1200px or more for a print-resolution jacket — which claims the
	 * row and squeezes the paragraph into a single column of words. Fractions
	 * also make the cover's own max-width percentage resolvable.
	 */
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	/*
	 * A tight gap. The jacket's own white margin already reads as space between
	 * the two columns, so a wide gutter on top of it only pushes the book
	 * smaller for no gain.
	 */
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
}

@media (max-width: 880px) {
	.el-cover__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: clamp(1.75rem, 5vw, 2.5rem);
	}
}

/* No text beside it: the jacket takes the row on its own, centred. */
.el-cover__inner--solo {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

.el-cover__jacket {
	min-width: 0;
	display: flex;
	justify-content: center;
}

.el-cover__text {
	min-width: 0;
	/* The same reading measure as the rest of the site, not the column width. */
	max-width: var(--el-measure);
}

.el-cover__text > *:first-child {
	margin-top: 0;
}

.el-cover__text > *:last-child {
	margin-bottom: 0;
}

/* A tan rule to start the column, echoing the jacket's foil. */
.el-cover__text::before {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	background: var(--el-cream);
	border-radius: 2px;
	margin-bottom: 1.5rem;
}

/*
 * The paragraph stays left-aligned when the columns stack. It runs to a
 * hundred words, and centred text that long is ragged on both edges and
 * noticeably harder to read; the jacket above it carries the symmetry.
 */

/* The jacket is the page heading, so the h1 carries no type of its own. */
.el-book-heading {
	margin: 0;
	max-width: 100%;
	font-size: 0;
	line-height: 0;
}

/* The book object */
.el-book {
	position: relative;
	/*
	 * Sized to the file, never past it. The cover is artwork with fine
	 * lettering, and upscaling it past its natural width blurs the type — so
	 * the width comes from the image itself and this is only a ceiling.
	 */
	width: fit-content;
	max-width: min(100%, var(--el-book-max, 30rem));
	justify-self: center;
	perspective: 1600px;
}

.el-book__inner {
	position: relative;
	transition: transform 0.4s ease;
}

.el-book:hover .el-book__inner {
	transform: translateY(-5px);
}

.el-book__cover {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/*
 * Flat artwork is just the front of the jacket, so the theme supplies the
 * shadow and the rounded fore-edge that make it read as a physical book.
 */
.el-book--flat .el-book__cover {
	border-radius: 3px 6px 6px 3px;
	box-shadow: var(--el-shadow-book);
}

/*
 * A mock-up was photographed with its own shadow and background, and adding a
 * second shadow turns it into a card sitting on the page. Nothing is added.
 */
.el-book--mockup .el-book__cover,
.el-book--square .el-book__cover {
	border-radius: 0;
	box-shadow: none;
}

/*
 * A square mock-up is mostly margin. The book sits in the middle of the canvas
 * with white to the left and right of it, so giving the frame more width mostly
 * buys more white — the jacket stays small and the section grows taller and
 * emptier around it.
 *
 * Instead the frame is given a book's proportions and the image is scaled to
 * cover it, which trims the outer margins and leaves the middle. Because the
 * book is centred in the canvas, what gets cut is white space rather than
 * artwork. --el-cover-crop is the one dial: nearer 1/1 trims less, nearer 2/3
 * trims more. If the artwork ever clips, raise it or switch the Customizer
 * setting to the already-cropped option.
 */
.el-book--square .el-book__cover {
	width: 100%;
	aspect-ratio: var(--el-cover-crop, 4 / 5);
	object-fit: cover;
	object-position: center;
}

/*
 * No painted-on spine. The uploaded artwork may already be a three-dimensional
 * mock-up with a spine of its own, and drawing a second one over it looks
 * wrong. The shadow alone lifts a flat cover off the page.
 */

/* CSS fallback jacket, used when no cover image has been uploaded */
.el-book__fallback {
	width: 20rem;
	max-width: 100%;
	aspect-ratio: 2 / 3;
	background: linear-gradient(160deg, var(--el-blue-600) 0%, var(--el-blue-700) 45%, var(--el-blue-900) 100%);
	border-radius: 3px 6px 6px 3px;
	box-shadow: var(--el-shadow-book);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	color: #fff;
}

.el-book__fallback-lead {
	font-family: var(--el-font-display);
	font-size: clamp(1.1rem, 3vw, 1.6rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--el-cream);
	line-height: 1;
}

.el-book__fallback-title {
	font-family: var(--el-font-display);
	font-size: clamp(2rem, 6.5vw, 3.4rem);
	line-height: 0.88;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0.1em 0 0.35em;
}

.el-book__fallback-sub {
	font-family: var(--el-font-head);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(0.85rem, 2.2vw, 1.05rem);
	color: var(--el-cream);
	line-height: 1.3;
}

.el-book__fallback-author {
	font-family: var(--el-font-head);
	font-weight: 600;
	font-size: clamp(0.8rem, 2vw, 1rem);
	letter-spacing: 0.06em;
	color: var(--el-cream);
	margin-top: auto;
	padding-top: 2.5rem;
}

/* -------------------------------------------------------------------------
   7. Page header (interior pages)
   ---------------------------------------------------------------------- */

.el-pagehead {
	background: var(--el-blue-900);
	background-image: radial-gradient(110% 130% at 20% 0%, var(--el-blue-700) 0%, var(--el-blue-900) 70%);
	color: #fff;
	padding-block: clamp(2.75rem, 7vw, 5rem);
	text-align: center;
}

.el-pagehead__title {
	font-family: var(--el-font-display);
	font-weight: 400;
	font-size: var(--el-step-4);
	line-height: 0.94;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	text-wrap: balance;
}

.el-pagehead__sub {
	font-family: var(--el-font-head);
	font-style: italic;
	font-weight: 300;
	font-size: var(--el-step-1);
	color: var(--el-cream);
	margin: 0.85rem auto 0;
	max-width: 40rem;
}

.el-pagehead__rule {
	width: 68px;
	height: 4px;
	background: var(--el-cream);
	border: 0;
	margin: 1.5rem auto 0;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   8. Long-form content (the entry body)
   ---------------------------------------------------------------------- */

.el-entry {
	padding-block: var(--el-section-y);
}

.el-prose {
	width: min(100%, var(--el-measure));
	margin-inline: auto;
}

.el-prose--wide {
	width: min(100%, 48rem);
}

.el-prose > *:first-child {
	margin-top: 0;
}

.el-prose > *:last-child {
	margin-bottom: 0;
}

.el-prose h2 {
	font-size: var(--el-step-2);
	margin-top: 2.2em;
	padding-top: 0.1em;
}

.el-prose h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--el-cream);
	margin-bottom: 1rem;
	border-radius: 2px;
}

.el-prose h3 {
	margin-top: 1.9em;
	color: var(--el-blue-800);
}

.el-prose p:first-of-type {
	font-size: 1.06em;
}

/*
 * Intro paragraph — larger, and in the same ink as the body text. It used to
 * be set in a lighter grey, which read as two different shades of print on one
 * page; the size alone is enough to mark it as the opening.
 */
.el-prose .is-style-lead,
.el-lead {
	font-size: var(--el-step-1);
	line-height: 1.55;
	font-weight: 600;
	color: var(--el-ink);
}

.el-prose ul {
	list-style: none;
	padding-left: 0;
}

.el-prose ul li {
	position: relative;
	padding-left: 1.7rem;
}

.el-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	background: var(--el-blue-600);
	border-radius: 50%;
}

.el-prose ol {
	padding-left: 1.35rem;
}

.el-prose ol li::marker {
	font-family: var(--el-font-head);
	font-weight: 600;
	color: var(--el-blue-600);
}

.el-prose blockquote {
	margin: 2rem 0;
	padding: 0.35rem 0 0.35rem 1.5rem;
	border-left: 4px solid var(--el-cream);
	font-family: var(--el-font-head);
	font-weight: 300;
	font-style: italic;
	font-size: var(--el-step-1);
	line-height: 1.45;
	color: var(--el-blue-800);
}

.el-prose blockquote p:last-child {
	margin-bottom: 0;
}

.el-prose img,
.el-prose .wp-block-image {
	border-radius: var(--el-radius);
}

.el-prose figcaption {
	font-size: 0.85rem;
	color: var(--el-slate);
	text-align: center;
	margin-top: 0.6rem;
}

/* -------------------------------------------------------------------------
   9. Question list — "the two questions the book answers"
   ---------------------------------------------------------------------- */

.el-questions,
.el-prose ul.is-style-questions {
	list-style: none;
	margin: 2rem 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.el-questions li,
.el-prose ul.is-style-questions li {
	margin: 0;
	padding: 1.3rem 1.5rem;
	background: var(--el-blue-050);
	border-left: 4px solid var(--el-blue-600);
	border-radius: 0 var(--el-radius) var(--el-radius) 0;
	font-family: var(--el-font-head);
	font-weight: 400;
	font-size: var(--el-step-1);
	line-height: 1.4;
	letter-spacing: 0.012em;
	color: var(--el-blue-900);
}

.el-questions li::before,
.el-prose ul.is-style-questions li::before {
	display: none;
}

/* -------------------------------------------------------------------------
   10. Parts of the book (I / II / III)
   ---------------------------------------------------------------------- */

.el-parts {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
}

.el-part {
	position: relative;
	margin: 0;
	padding: 2rem 1.75rem 1.85rem;
	background: #fff;
	border: 0;
	border-radius: var(--el-radius-lg);
	box-shadow: var(--el-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.el-part:hover {
	transform: translateY(-3px);
	box-shadow: var(--el-shadow-card-hover);
}

.el-part::before {
	display: none;
}

/* The part number sits in a cream chip rather than on a ruled edge. */
.el-part__num {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	background: var(--el-cream);
	border-radius: 999px;
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	color: var(--el-blue-900);
	margin-bottom: 1rem;
}

.el-part__q {
	font-family: var(--el-font-head);
	font-weight: 400;
	font-size: var(--el-step-1);
	line-height: 1.32;
	letter-spacing: 0.012em;
	color: var(--el-blue-900);
	margin: 0;
}

/* -------------------------------------------------------------------------
   12. Author block
   ---------------------------------------------------------------------- */

.el-author {
	background: var(--el-mist);
	padding-block: var(--el-section-y);
}

.el-author__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.85fr);
	gap: clamp(1.75rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 800px) {
	.el-author__grid {
		grid-template-columns: 1fr;
	}
}

.el-author__portrait {
	position: relative;
}

.el-author__portrait img,
.el-author__portrait--empty {
	position: relative;
	z-index: 1;
}

.el-author__portrait img {
	width: 100%;
	border-radius: var(--el-radius);
	box-shadow: var(--el-shadow-card);
}

/* Cream bracket in the lower-left corner, echoing the jacket's foil rules. */
.el-author__portrait::after {
	content: "";
	position: absolute;
	left: -14px;
	bottom: -14px;
	width: 96px;
	height: 96px;
	border-left: 4px solid var(--el-cream);
	border-bottom: 4px solid var(--el-cream);
	z-index: 0;
}

.el-author__portrait--empty {
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, var(--el-blue-600), var(--el-blue-900));
	border-radius: var(--el-radius);
	display: grid;
	place-items: center;
	color: var(--el-cream);
	font-family: var(--el-font-display);
	font-size: 3rem;
	letter-spacing: 0.06em;
	box-shadow: var(--el-shadow-card);
}

.el-author__name {
	font-family: var(--el-font-display);
	font-size: var(--el-step-3);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--el-blue-900);
	margin: 0 0 0.35rem;
}

.el-author__role {
	font-family: var(--el-font-head);
	font-style: italic;
	font-weight: 300;
	color: var(--el-slate);
	font-size: var(--el-step-1);
	margin: 0 0 1.5rem;
}

/* Credential strip */
.el-credentials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 1.25rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--el-line);
}

.el-credential {
	margin: 0;
}

.el-credential::before {
	display: none;
}

.el-credential__num {
	display: block;
	font-family: var(--el-font-display);
	font-size: clamp(2.1rem, 4vw, 2.9rem);
	line-height: 1;
	color: var(--el-blue-700);
}

/*
 * Sentence case, not capitals. These labels are the longest strings in the
 * block and the ones most often set on two or three lines; capitals plus
 * tracking made them a wall.
 */
.el-credential__label {
	display: block;
	margin-top: 0.55rem;
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--el-slate);
	line-height: 1.45;
}

/* Logos / client list */
.el-clients {
	margin-top: 1.75rem;
}

.el-clients__label {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.74rem;
	line-height: 1.5;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	color: var(--el-slate);
	margin: 0 0 0.9rem;
}

.el-clients__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.el-clients__list li {
	margin: 0;
	padding: 0.45rem 0.9rem;
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(7, 8, 69, 0.06);
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--el-blue-800);
}

.el-clients__list li::before {
	display: none;
}

/* -------------------------------------------------------------------------
   13. Buy the book
   ---------------------------------------------------------------------- */

.el-retailers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.el-retailer {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 2.25rem 2rem;
	background: #fff;
	border: 0;
	border-radius: var(--el-radius-lg);
	box-shadow: var(--el-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.el-retailer::before {
	display: none;
}

.el-retailer:hover {
	transform: translateY(-3px);
	box-shadow: var(--el-shadow-card-hover);
}

.el-retailer__format {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	color: var(--el-gold-700);
	margin: 0 0 0.8rem;
}

.el-retailer__name {
	font-family: var(--el-font-display);
	font-size: var(--el-step-2);
	line-height: 1;
	text-transform: uppercase;
	color: var(--el-blue-900);
	margin: 0 0 0.75rem;
}

.el-retailer__desc {
	color: var(--el-slate);
	font-size: var(--el-step--1);
	margin: 0 0 1.6rem;
}

.el-retailer .el-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* Preview / Book2Look callout */
.el-preview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.85rem 2rem;
	background: var(--el-blue-050);
	border: 0;
	border-radius: var(--el-radius-lg);
	margin-top: 2rem;
}

@media (max-width: 700px) {
	.el-preview {
		grid-template-columns: 1fr;
	}
}

.el-preview__title {
	font-family: var(--el-font-head);
	font-size: var(--el-step-1);
	color: var(--el-blue-900);
	margin: 0 0 0.35rem;
}

.el-preview__desc {
	margin: 0;
	color: var(--el-slate);
	font-size: var(--el-step--1);
}

/* -------------------------------------------------------------------------
   14. Coming soon / workbook
   ---------------------------------------------------------------------- */

.el-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	background: var(--el-cream);
	color: var(--el-blue-900);
	border-radius: 999px;
	font-family: var(--el-font-ui);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

.el-badge--outline {
	background: transparent;
	border: 1px solid var(--el-cream);
	color: var(--el-cream);
}

.el-workbook {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
	gap: clamp(2rem, 6vw, 4rem);
	align-items: center;
}

@media (max-width: 860px) {
	.el-workbook {
		grid-template-columns: 1fr;
	}
}

.el-workbook__cover {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 3px 6px 6px 3px;
	background: linear-gradient(160deg, #fff 0%, var(--el-mist) 100%);
	border: 0;
	border-left: 14px solid var(--el-blue-700);
	box-shadow: var(--el-shadow-book);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	text-align: center;
}

.el-workbook__kicker {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	color: var(--el-gold-700);
	margin-bottom: 0.75rem;
}

.el-workbook__title {
	font-family: var(--el-font-display);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--el-blue-900);
	margin: 0 0 0.5rem;
}

.el-workbook__sub {
	font-family: var(--el-font-head);
	font-style: italic;
	font-weight: 300;
	color: var(--el-slate);
	font-size: 0.95rem;
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
   17. Blog / archive (kept simple — the site is a book site first)
   ---------------------------------------------------------------------- */

.el-postlist {
	display: grid;
	gap: 2.5rem;
}

.el-postcard {
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--el-line);
}

.el-postcard:last-child {
	border-bottom: 0;
}

.el-postcard__title {
	font-size: var(--el-step-2);
	margin-bottom: 0.4rem;
}

.el-postcard__title a {
	color: var(--el-blue-900);
	text-decoration: none;
}

.el-postcard__title a:hover,
.el-postcard__title a:focus {
	color: var(--el-blue-700);
}

.el-meta {
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	color: var(--el-slate);
	margin-bottom: 1rem;
}

.el-postcard__thumb {
	margin-bottom: 1.25rem;
}

.el-postcard__thumb img {
	width: 100%;
	border-radius: var(--el-radius);
}

.el-pagination {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--el-line);
	font-family: var(--el-font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--el-track-label);
	font-size: 0.82rem;
}

.el-pagination .page-numbers {
	display: inline-block;
	padding: 0.45rem 0.8rem;
	text-decoration: none;
	background: var(--el-mist);
	border: 0;
	border-radius: var(--el-radius);
	margin-right: 0.35rem;
}

.el-pagination .page-numbers.current {
	background: var(--el-blue-700);
	border-color: var(--el-blue-700);
	color: #fff;
}

/* Post navigation */
.el-postnav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--el-line);
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: var(--el-track-btn);
	text-transform: uppercase;
}

/* Comments — minimal */
.el-comments {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--el-line);
}

.el-comments .comment-list {
	list-style: none;
	padding: 0;
}

.el-comments .comment-list ol {
	list-style: none;
}

.el-comments .comment-body {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--el-line);
}

.el-comments input[type="text"],
.el-comments input[type="email"],
.el-comments input[type="url"],
.el-comments textarea,
.el-form-control {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius);
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--el-ink);
}

.el-comments input[type="submit"],
.el-comments .submit {
	font-family: var(--el-font-ui);
	font-weight: 700;
	letter-spacing: var(--el-track-btn);
	text-transform: uppercase;
	background: var(--el-blue-700);
	color: #fff;
	border: 2px solid var(--el-blue-700);
	border-radius: var(--el-radius);
	padding: 0.9rem 1.5rem;
	cursor: pointer;
}

/* Search form */
.el-searchform {
	display: flex;
	gap: 0.5rem;
	max-width: 26rem;
}

.el-searchform input[type="search"] {
	flex: 1;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius);
	font: inherit;
}

/* 404 */
.el-404 {
	text-align: center;
	padding-block: clamp(4rem, 12vw, 8rem);
}

.el-404__code {
	font-family: var(--el-font-display);
	font-size: clamp(4rem, 16vw, 9rem);
	line-height: 0.85;
	color: var(--el-blue-050);
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------------------
   18. Footer
   ---------------------------------------------------------------------- */

.el-footer {
	background: var(--el-blue-900);
	color: rgba(255, 255, 255, 0.82);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	font-size: var(--el-step--1);
}

/* Exclude buttons — they carry their own colours. */
.el-footer a:not(.el-btn) {
	color: var(--el-cream);
}

/* About | Explore | Widgets — the last two auto-size and drop out cleanly. */
.el-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: clamp(2rem, 6vw, 4rem);
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 720px) {
	.el-footer__grid {
		grid-template-columns: 1fr;
	}
}

.el-footer__title {
	font-family: var(--el-font-display);
	font-size: var(--el-step-2);
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 0.5rem;
}

.el-footer__sub {
	font-family: var(--el-font-head);
	font-style: italic;
	font-weight: 300;
	color: var(--el-cream);
	margin: 0 0 1.25rem;
}

.el-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.el-footer__menu a {
	font-family: var(--el-font-ui);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
}

.el-footer__menu a:hover,
.el-footer__menu a:focus {
	text-decoration: underline;
}

.el-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.75rem;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
}

.el-footer__heading {
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: var(--el-track-micro);
	text-transform: uppercase;
	color: rgba(225, 219, 199, 0.9);
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------------------
   19. WordPress core classes
   ---------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0.4rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	width: min(100vw - (var(--el-gutter) * 2), 62rem);
	margin-inline: auto;
	max-width: none;
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: 0.85rem;
	color: var(--el-slate);
	text-align: center;
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* required by the theme check */
}

.el-prose .alignwide,
.el-prose .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

@media (min-width: 1200px) {
	.el-prose .alignwide {
		width: 62rem;
		max-width: 62rem;
		margin-left: calc(50% - 31rem);
		margin-right: calc(50% - 31rem);
	}
}

/* Block editor colour classes generated from theme.json */
.has-royal-blue-background-color {
	background-color: var(--el-blue-700);
}
.has-royal-blue-color {
	color: var(--el-blue-700);
}
.has-deep-blue-background-color {
	background-color: var(--el-blue-900);
}
.has-deep-blue-color {
	color: var(--el-blue-900);
}
.has-cream-background-color {
	background-color: var(--el-cream);
}
.has-cream-color {
	color: var(--el-cream);
}
.has-gold-color {
	color: var(--el-gold-700);
}
.has-mist-background-color {
	background-color: var(--el-mist);
}
.has-ink-color {
	color: var(--el-ink);
}
.has-white-background-color {
	background-color: #fff;
}
.has-white-color {
	color: #fff;
}

/* Sections placed on blue need light text */
.el-onblue,
.el-onblue h1,
.el-onblue h2,
.el-onblue h3,
.el-onblue p,
.el-onblue li {
	color: #fff;
}

.el-onblue a:not(.el-btn) {
	color: var(--el-cream);
}

.el-onblue .el-prose h2::before {
	background: var(--el-cream);
}

/* -------------------------------------------------------------------------
   19b. Content Page template (hero, sections, FAQ, call to action)
   ---------------------------------------------------------------------- */

/*
 * A light hero, for the same reason as the front page: the jacket may be a
 * mock-up on a white ground, which reads as a white box on a dark field.
 */
.el-chero {
	position: relative;
	background: linear-gradient(180deg, var(--el-blue-050) 0%, var(--el-mist) 100%);
	padding-block: clamp(3rem, 7vw, 5.5rem);
	border-bottom: 3px solid var(--el-cream);
}

.el-chero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.el-chero--solo .el-chero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.el-chero--solo .el-chero__text {
	max-width: 48rem;
}

@media (max-width: 900px) {
	.el-chero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

.el-chero__title {
	font-family: var(--el-font-display);
	font-weight: 400;
	font-size: var(--el-step-4);
	line-height: 0.94;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--el-blue-900);
	margin: 0 0 1.5rem;
	text-wrap: balance;
}

.el-chero__title::after {
	content: "";
	display: block;
	width: 68px;
	height: 4px;
	background: var(--el-cream);
	border-radius: 2px;
	margin-top: 1.5rem;
}

.el-chero__intro {
	max-width: 40rem;
}

.el-chero__intro p:first-child {
	font-size: var(--el-step-1);
	line-height: 1.55;
	font-weight: 600;
}

.el-chero__intro > *:last-child {
	margin-bottom: 0;
}

.el-chero__buttons {
	margin-top: 2rem;
}

.el-chero__jacket {
	display: flex;
	justify-content: center;
	--el-book-max: 22rem;
}

@media (max-width: 900px) {
	.el-chero__jacket {
		--el-book-max: 16rem;
	}
}

/* Highlights list — the bold lead-in, then the sentence, on a card. */
.el-prose ul.el-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
	padding: 0;
}

.el-prose ul.el-features li.el-feature {
	margin: 0;
	padding: 1.6rem 1.6rem 1.7rem;
	background: #fff;
	border-top: 4px solid var(--el-blue-600);
	border-radius: var(--el-radius-lg);
	box-shadow: var(--el-shadow-card);
	font-size: var(--el-step--1);
	line-height: 1.6;
	color: var(--el-slate);
}

.el-prose ul.el-features li.el-feature::before {
	display: none;
}

.el-features .el-list__title {
	display: block;
	font-family: var(--el-font-head);
	font-weight: 500;
	font-size: var(--el-step-1);
	line-height: 1.25;
	letter-spacing: 0.012em;
	color: var(--el-blue-900);
	margin-bottom: 0.55rem;
}

/* Image and text */
.el-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	width: min(100%, 62rem);
	margin-inline: auto;
}

.el-media--right .el-media__image {
	order: 2;
}

.el-media--noimage {
	grid-template-columns: minmax(0, 1fr);
	width: min(100%, 48rem);
}

.el-media__image {
	margin: 0;
}

.el-media__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--el-radius-lg);
	box-shadow: var(--el-shadow-card);
}

.el-media .el-media__text {
	width: 100%;
}

@media (max-width: 800px) {
	.el-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.el-media--right .el-media__image {
		order: 0;
	}
}

/* Two columns */
.el-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
	width: min(100%, 62rem);
	margin: 0 auto;
}

.el-prose.el-columns__head {
	width: min(100%, 62rem);
}

.el-columns__head + .el-columns {
	margin-top: 1.75rem;
}

.el-columns .el-columns__col {
	width: 100%;
}

.el-columns__col > *:first-child {
	margin-top: 0;
}

/* Quote or testimonial */
.el-quote {
	width: min(100%, 48rem);
	margin: 0 auto;
	text-align: center;
}

.el-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--el-font-head);
	font-weight: 300;
	font-style: italic;
	font-size: var(--el-step-2);
	line-height: 1.4;
	color: var(--el-blue-900);
}

.el-quote__text::before {
	content: "\201C";
	display: block;
	font-family: var(--el-font-display);
	font-style: normal;
	font-size: 4.5rem;
	line-height: 0.8;
	color: var(--el-cream);
	margin-bottom: 0.5rem;
}

.el-quote__text p {
	margin: 0;
}

.el-quote__by {
	margin-top: 1.5rem;
	font-family: var(--el-font-ui);
	font-size: 0.86rem;
	letter-spacing: var(--el-track-label);
	text-transform: uppercase;
}

.el-quote__name {
	display: block;
	font-weight: 700;
	color: var(--el-blue-900);
}

.el-quote__role {
	display: block;
	margin-top: 0.25rem;
	color: var(--el-slate);
}

/* Callout band — one statement, set large. */
.el-callout {
	background: var(--el-blue-900);
	background-image: radial-gradient(110% 130% at 20% 0%, var(--el-blue-700) 0%, var(--el-blue-900) 70%);
	padding-block: clamp(3rem, 7vw, 5rem);
}

.el-callout__text {
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
	font-family: var(--el-font-head);
	font-weight: 300;
	font-style: italic;
	font-size: var(--el-step-2);
	line-height: 1.4;
	color: #fff;
	text-wrap: balance;
}

.el-callout__text::before {
	content: "";
	display: block;
	width: 68px;
	height: 4px;
	background: var(--el-cream);
	border-radius: 2px;
	margin: 0 auto 1.75rem;
}

/* FAQ — native disclosure, so it works without JavaScript. */
.el-faq {
	background: var(--el-mist);
}

.el-faq__list {
	width: min(100%, 48rem);
	margin: 2rem auto 0;
	display: grid;
	gap: 0.85rem;
}

.el-faq__item {
	background: #fff;
	border-radius: var(--el-radius-lg);
	box-shadow: var(--el-shadow-card);
}

.el-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	list-style: none;
}

.el-faq__q::-webkit-details-marker {
	display: none;
}

.el-faq__q::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--el-cream);
	font-family: var(--el-font-ui);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--el-blue-900);
	transition: transform 0.2s ease;
}

.el-faq__item[open] .el-faq__q::after {
	transform: rotate(45deg);
}

.el-faq__q:focus-visible {
	outline: 3px solid var(--el-blue-500);
	outline-offset: 2px;
	border-radius: var(--el-radius-lg);
}

.el-faq__q-text {
	margin: 0;
	font-family: var(--el-font-head);
	font-weight: 500;
	font-size: var(--el-step-1);
	line-height: 1.3;
	color: var(--el-blue-900);
}

.el-faq__a {
	padding: 0 1.5rem 1.4rem;
	color: var(--el-slate);
}

.el-faq__a > *:last-child {
	margin-bottom: 0;
}

/* Closing call to action */
.el-cta {
	background: var(--el-blue-900);
	background-image: radial-gradient(110% 130% at 80% 0%, var(--el-blue-700) 0%, var(--el-blue-900) 70%);
	padding-block: var(--el-section-y);
	text-align: center;
}

.el-cta__inner {
	max-width: 46rem;
}

.el-cta__title {
	font-family: var(--el-font-display);
	font-weight: 400;
	font-size: var(--el-step-3);
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
	text-wrap: balance;
}

.el-cta__text {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 2rem;
}

.el-cta__text > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   20. Print
   ---------------------------------------------------------------------- */

@media print {
	.el-header,
	.el-footer,
	.skip-link {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}

	.el-pagehead {
		background: none !important;
		color: #000;
		padding-block: 0 1rem;
	}

	.el-pagehead__title,
	.el-pagehead__sub {
		color: #000;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}
}