/* ==========================================================================
   Page level components. Blog,
essay,
shop,
book,
about,
contact,
policy.
   Every section sits inside the shared .wrap so left edges align sitewide.
   ========================================================================== */

/* ---------------------------------------------------------------- Blog */

.blogmast { padding-block: 68px 64px; }
.blogmast .eyebrow { margin-bottom: 24px; }
.blogmast__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 68px;
	line-height: 1.04;
	color: var(--ink);
}
.blogmast__intro {
	margin-top: 20px;
	max-width: 720px;
	font-size: 16px;
	line-height: 1.56;
	color: var(--muted);
}

.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 82px;
	padding: 11px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter:hover { background: var(--mist); }
.filter.is-active {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--paper);
}

.featrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 412px;
	gap: 40px;
	align-items: start;
}

.leadstory {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	overflow: hidden;
	background: var(--forest);
}
.media--leadstory { aspect-ratio: 790 / 326; border-radius: 0; }
.leadstory .media__img { transition: transform 500ms var(--ease); }
.leadstory:hover .media__img { transform: scale(1.02); }
.leadstory__band { padding: 26px 24px 28px; }
.leadstory__cat {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sage);
}
.leadstory__title {
	margin-top: 14px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.12;
	color: var(--paper);
}
.leadstory__excerpt {
	margin-top: 14px;
	max-width: 60ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mist);
}
.leadstory__meta {
	margin-top: 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sage);
}

.latest__heading {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.1;
	color: var(--ink);
}
.latest__list { margin-top: 26px; }
.listrow + .listrow { border-top: 1px solid var(--line); }
.listrow__link {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	padding-block: 22px;
}
.listrow:first-child .listrow__link { padding-top: 0; }
.media--thumb { aspect-ratio: 86 / 76; border-radius: var(--r-sm); }
.listrow__title {
	display: block;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--ink);
}
.listrow__meta {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.listrow__link:hover .listrow__title { text-decoration: underline; text-underline-offset: 3px; }

.loadmore { display: flex; justify-content: center; margin-top: 44px; }

.section-head--stacked { display: block; }
.section-head--stacked .section-head__text { max-width: 680px; }

/* ---------------------------------------------------------------- Essay */

.essayhero { padding-block: 70px 0; }
.essayhero .wrap { text-align: center; }
.essayhero__title {
	max-width: 920px;
	margin-inline: auto;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 72px;
	line-height: 1.01;
	color: var(--ink);
}
.essayhero__deck {
	max-width: 700px;
	margin: 24px auto 0;
	font-size: 17px;
	line-height: 1.53;
	color: var(--muted);
}
.essayhero__meta {
	margin-top: 22px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.media--banner {
	aspect-ratio: 1192 / 300;
	border-radius: 24px;
	margin-top: 40px;
	transform: translateY(60px);
}
.essayhero + .band { padding-top: 130px; }

.essaybody {
	display: grid;
	grid-template-columns: 100px 720px 240px;
	justify-content: space-between;
	gap: 40px;
	align-items: start;
}
.essaybody__column { min-width: 0; }
.essaybody .prose--essay { margin-inline: 0; max-width: 720px; }

.share { position: sticky; top: 32px; }
.share__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.share__list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--ivory);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.share__btn:hover { background: var(--sand); }
.share__btn.is-copied { background: var(--sage); }

.toc {
	position: sticky;
	top: 32px;
	padding: 20px;
	border-radius: var(--r-md);
	background: var(--ivory);
}
.toc__list { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.toc__list a {
	display: flex;
	gap: 10px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}
.toc__list a:hover { color: var(--clay); }
.toc__num { color: var(--muted); }

.prose--essay > p:first-of-type {
	font-size: 20px;
	line-height: 1.6;
	color: var(--ink);
}
.prose--essay h2 { font-size: 38px; line-height: 1.13; margin-top: 52px; }
.prose--essay blockquote {
	margin: 44px 0;
	padding: 42px 52px;
	border: 0;
	border-radius: var(--r-md);
	background: var(--forest);
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1.27;
	color: var(--paper);
}
.prose--essay blockquote p { font-size: inherit; line-height: inherit; color: inherit; font-family: inherit; }
.prose--essay blockquote cite { display: block; margin-top: 16px; font-family: var(--sans); font-size: 13px; font-style: normal; color: var(--sage); }

.scripture {
	margin-top: 40px;
	padding: 24px 26px 28px;
	border-radius: var(--r-md);
	background: var(--ivory);
}
.scripture__ref {
	margin-top: 14px;
	font-family: var(--serif);
	font-size: 27px;
	line-height: 1.1;
	color: var(--ink);
}
.scripture__note {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted);
}

.byline { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.byline__text { font-size: 13px; line-height: 1.5; color: var(--muted); }
/* ----------------------------------------------------------------- Shop */

.shophero { padding-block: 78px; }
.shophero__inner {
	display: grid;
	grid-template-columns: minmax(0, 610px) 520px;
	justify-content: space-between;
	gap: 48px;
	align-items: center;
}
.shophero__title {
	margin-top: 24px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 66px;
	line-height: 1.04;
	color: var(--ink);
}
.shophero__intro {
	margin-top: 24px;
	max-width: 590px;
	font-size: 16px;
	line-height: 1.56;
	color: var(--muted);
}
.shophero .btn-row { margin-top: 32px; }

.guide { padding-block: 42px; }
.guide__inner {
	display: grid;
	grid-template-columns: minmax(0, 430px) minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
}
.guide__head .eyebrow { margin-bottom: 14px; }
.guide__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.11;
	color: var(--ink);
}
.guide__copy { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------ Book page */

.bookhero { padding-block: 86px; }
.bookhero__inner {
	display: grid;
	grid-template-columns: 390px minmax(0, 1fr);
	gap: 80px;
	align-items: center;
}
.bookhero__cover { width: 390px; }
.media--bigcover { aspect-ratio: 390 / 580; border-radius: var(--r-sm); }

.covercard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 390 / 580;
	padding: 32px 30px;
	border-radius: var(--r-sm);
	background: linear-gradient(160deg, var(--mist) 0%, var(--sage) 100%);
}
.covercard__author {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.covercard__title {
	font-family: var(--serif);
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
}

.bookhero__title {
	margin-top: 18px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 62px;
	line-height: 1.05;
	color: var(--ink);
}
.bookhero__blurb {
	margin-top: 22px;
	max-width: 590px;
	font-size: 16px;
	line-height: 1.62;
	color: var(--muted);
}
.bookhero__meta {
	margin-top: 28px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clay);
}
.bookhero .btn-row { margin-top: 28px; }
.bookhero__note { margin-top: 16px; font-size: 13px; color: var(--muted); }

.bookstory { padding-block: 84px; }
.bookstory__inner {
	display: grid;
	grid-template-columns: minmax(0, 620px) 520px;
	justify-content: space-between;
	gap: 56px;
	align-items: center;
}
.bookstory__text .eyebrow { margin-bottom: 20px; }
.bookstory__body {
	margin-top: 26px;
	max-width: 570px;
	font-size: 16px;
	line-height: 1.62;
	color: var(--muted);
}
.bookstory__prose { margin-top: 24px; }
.media--story { aspect-ratio: 520 / 440; border-radius: 22px; }

/* ---------------------------------------------------------------- About */

.abouthero { padding-block: 84px; }
.abouthero__inner {
	display: grid;
	grid-template-columns: 530px minmax(0, 1fr);
	gap: 106px;
	align-items: center;
}
.media--abouthero { aspect-ratio: 530 / 480; }
.abouthero__title {
	margin-top: 20px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 58px;
	line-height: 1.04;
	color: var(--ink);
}
.abouthero__body {
	margin-top: 26px;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.62;
	color: var(--muted);
}

.story { padding-block: 90px; }
.story__inner {
	display: grid;
	grid-template-columns: minmax(0, 620px) 510px;
	justify-content: space-between;
	gap: 56px;
	align-items: center;
}
.story__text .eyebrow { margin-bottom: 20px; }
.story__body {
	margin-top: 26px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
}
.story__prose { margin-top: 20px; }

.values__heading { margin-bottom: 32px; }
.valuecard {
	padding: 22px 20px 26px;
	border-radius: var(--r-md);
	background: var(--paper);
	border: 1px solid var(--line);
}
.valuecard__text {
	margin-top: 22px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.26;
	color: var(--ink);
}

/* -------------------------------------------------------------- Contact */

.contacthero { padding-block: 72px; }
.contacthero__inner {
	display: grid;
	grid-template-columns: minmax(0, 570px) 500px;
	justify-content: space-between;
	gap: 56px;
	align-items: center;
}
.contacthero__title {
	margin-top: 24px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 68px;
	line-height: 1.02;
	color: var(--ink);
}
.contacthero__intro {
	margin-top: 24px;
	max-width: 570px;
	font-size: 17px;
	line-height: 1.53;
	color: var(--muted);
}

.details {
	padding: 28px;
	border-radius: 20px;
	background: var(--paper);
	border: 1px solid var(--line);
}
.details .eyebrow { margin-bottom: 26px; }
.details__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.details__value {
	margin-top: 8px;
	font-size: 20px;
	line-height: 1.2;
	color: var(--ink);
}
.details__value--sm { font-size: 18px; }
.details__value a { text-decoration: underline; text-underline-offset: 3px; }
.details__value a:hover { color: var(--clay); }
.details__rule { height: 1px; border: 0; background: var(--line); margin-block: 22px; }
.details__note { margin-top: 22px; font-size: 13px; line-height: 1.55; color: var(--muted); }

.contactgrid {
	display: grid;
	grid-template-columns: minmax(0, 860px) 324px;
	justify-content: space-between;
	gap: 64px;
	align-items: start;
}
.contactgrid__privacy {
	margin-top: 28px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}
.contactgrid__privacy a { text-decoration: underline; text-underline-offset: 2px; }

.cform__hp { position: absolute; left: -9999px; }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.cform__field { margin-bottom: 32px; }
.cform__label {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.cform__input {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper);
	font-size: 15px;
	color: var(--ink);
	transition: border-color var(--dur) var(--ease);
}
.cform__input:focus { outline: none; border-color: var(--forest); }
.cform__input--area { min-height: 140px; resize: vertical; }

.notice {
	margin-bottom: 28px;
	padding: 16px 20px;
	border-radius: var(--r-sm);
	font-size: 14px;
	line-height: 1.5;
}
.notice--ok { background: var(--mist); color: var(--ink); }
.notice--bad { background: var(--sand); color: var(--ink); }

.tips {
	padding: 24px;
	border-radius: var(--r-md);
	background: var(--ivory);
}
.tips .eyebrow { margin-bottom: 14px; }
.tips__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.12;
	color: var(--ink);
}
.tips__list { margin-top: 24px; display: flex; flex-direction: column; gap: 22px; }
.tips__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
.tips__num {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--clay);
	padding-top: 3px;
}
.tips__list li span:last-child { font-size: 13px; line-height: 1.5; color: var(--ink); }

/* --------------------------------------------------------------- Policy */

.policymast { padding-block: 74px 64px; }
.policymast .eyebrow { margin-bottom: 22px; }
.policymast__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 58px;
	line-height: 1.05;
	color: var(--ink);
}
.policymast__updated { margin-top: 22px; font-size: 14px; color: var(--muted); }

.prose--policy { max-width: 920px; margin-inline: auto; }
.prose--policy h2 {
	font-family: var(--serif);
	font-size: 27px;
	line-height: 1.15;
	margin-top: 48px;
	color: var(--ink);
}
.prose--policy h2:first-child { margin-top: 0; }
.prose--policy p { font-size: 15px; line-height: 1.73; color: var(--muted); }
.prose--policy > * + * { margin-top: 18px; }

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1288px) {
	.essaybody { grid-template-columns: 80px minmax(0, 1fr) 220px; gap: 32px; }
	.essaybody .prose--essay { max-width: none; }
	.abouthero__inner { gap: 56px; }
}

@media (max-width: 1024px) {
	.blogmast { padding-block: 52px 48px; }
	.blogmast__title { font-size: 48px; }

	.featrow { grid-template-columns: minmax(0, 1fr); gap: 48px; }

	.essayhero__title { font-size: 48px; }
	.media--banner { aspect-ratio: 16 / 7; transform: translateY(48px); }
	.essayhero + .band { padding-top: 108px; }
	.essaybody { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.share { position: static; }
	.share__list { flex-direction: row; }
	.toc { position: static; order: 3; }
	.prose--essay blockquote { padding: 32px 34px; font-size: 26px; }

	.shophero__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.shophero__title { font-size: 48px; }
	.coverstack__panel { height: 380px; }

	.guide__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	.bookhero__inner { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
	.bookhero__cover { width: 300px; }
	.bookhero__title { font-size: 46px; }
	.bookstory__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }

	.abouthero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.abouthero__title { font-size: 44px; }
	.story__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }

	.contacthero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.contacthero__title { font-size: 48px; }
	.contactgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }

	.policymast__title { font-size: 44px; }
}

@media (max-width: 767px) {
	.blogmast__title { font-size: 36px; }
	.filter { min-width: 0; padding: 10px 16px; }

	.leadstory__title { font-size: 26px; }
	.leadstory__band { padding: 20px; }

	.essayhero__title { font-size: 34px; }
	.essayhero__deck { font-size: 16px; }
	.media--banner { aspect-ratio: 3 / 2; transform: translateY(36px); }
	.essayhero + .band { padding-top: 84px; }
	.prose--essay > p:first-of-type { font-size: 18px; }
	.prose--essay h2 { font-size: 28px; }
	.prose--essay blockquote { padding: 24px; font-size: 21px; }

	.shophero__title { font-size: 36px; }
	.coverstack__panel { height: 300px; padding: 18px; }
	.coverstack__item { width: 132px; }
	.coverstack__item--1 { left: 24px; top: 34px; }
	.coverstack__item--2 { left: 176px; top: 62px; }

	.bookhero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.bookhero__cover { width: 220px; }
	.bookhero__title { font-size: 34px; }

	.abouthero__title { font-size: 34px; }
	.contacthero__title { font-size: 40px; }
	.cform__row { grid-template-columns: minmax(0, 1fr); gap: 0; }

	.policymast__title { font-size: 34px; }
	.prose--policy h2 { font-size: 23px; margin-top: 36px; }
}

@media (max-width: 420px) {
	.coverstack__panel { height: 240px; }
	.coverstack__item { width: 104px; }
	.coverstack__item--2 { left: 140px; top: 52px; }
}
/* --------------------------------------------------------------------------
   Cookie consent. The plugin ships a blue button set that fights the palette,
so its controls are brought onto the brand tokens here.
   -------------------------------------------------------------------------- */

.cookieadmin_btn,
button.cookieadmin_btn {
	border-radius: var(--r-pill) !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 11px 20px !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	transition: background-color var(--dur) var(--ease) !important;
}

.cookieadmin_accept_btn,
button.cookieadmin_accept_btn {
	background: var(--forest) !important;
	color: var(--on-dark) !important;
}
.cookieadmin_accept_btn:hover { background: var(--ink) !important; }

.cookieadmin_reject_btn,
.cookieadmin_customize_btn,
.cookieadmin_save_btn,
button.cookieadmin_reject_btn,
button.cookieadmin_customize_btn,
button.cookieadmin_save_btn {
	background: var(--paper) !important;
	border-color: var(--line) !important;
	color: var(--ink) !important;
}
.cookieadmin_reject_btn:hover,
.cookieadmin_customize_btn:hover,
.cookieadmin_save_btn:hover { background: var(--ivory) !important; }

[class*="cookieadmin"] a { color: var(--clay) !important; }
[id*="cookieadmin"] { font-family: var(--sans) !important; }
/* ==========================================================================
   Interaction layer.
   No underlines outside running prose: links move through colour instead.
   Buttons roll their label. Images ease rather than jump.
   ========================================================================== */

:root {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-slow: 620ms;
}

/* ---------------------------------------------- Grids,
now fully fluid */

.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shophero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.bookstory__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
.contactgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 56px; }
.hero__inner { grid-template-columns: minmax(0, 439px) minmax(0, 520px); }

/* ------------------------------------------------------------- Buttons */

.btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.btn__label {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 19px;
}
.btn__text {
	display: block;
	will-change: transform;
	transition: transform 520ms var(--ease-out);
}
.btn__text--in {
	position: absolute;
	inset: 0;
	transform: translateY(108%);
}
.btn:hover .btn__text,
.btn:focus-visible .btn__text { transform: translateY(-108%); }
.btn:hover .btn__text--in,
.btn:focus-visible .btn__text--in { transform: translateY(0); }

.btn__arrow {
	display: inline-block;
	transition: transform 520ms var(--ease-out);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translate(3px, -3px); }

/* A ground that wipes up behind the label. */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateY(100%);
	transition: transform 520ms var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn--primary::before { background: var(--ink); }
.btn--secondary::before { background: var(--mist); }
.btn--primary:hover { background: var(--forest); }
.btn--secondary:hover { background: var(--paper); border-color: var(--sand); }

.btn--sm .btn__label { line-height: 17px; }
.btn--xs { font-size: 12px; }
.btn--xs .btn__label { line-height: 15px; }

.subscribe__btn { position: relative; overflow: hidden; }
.subscribe__btn:hover { background: var(--clay-deep); }

/* --------------------------------------------------- Links,
no underline */

.card__link:hover .card__title,
.listrow__link:hover .listrow__title,
.bookcard__title a:hover,
.tcard__link:hover .tcard__title,
.toc__list a:hover {
	color: var(--clay);
	text-decoration: none;
}
.tcard--sage .tcard__link:hover .tcard__title,
.tcard--sand .tcard__link:hover .tcard__title { color: var(--clay-deep); }

.card__title,
.listrow__title,
.tcard__title,
.bookcard__title a,
.leadstory__title,
.details__value a,
.linklist a,
.nav__list a,
.toc__list a {
	transition: color var(--dur) var(--ease-out);
}

.leadstory:hover .leadstory__title { color: var(--sage); }
.details__value a { text-decoration: none; }
.details__value a:hover { color: var(--clay); }
.contactgrid__privacy a {
	text-decoration: none;
	color: var(--clay);
	transition: color var(--dur) var(--ease-out);
}
.contactgrid__privacy a:hover { color: var(--forest); }

/* Nav gets a line that grows from the left rather than a static underline. */
.nav__list a { position: relative; }
.nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: var(--clay);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 420ms var(--ease-out);
}
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after,
.nav__list .is-current > a::after { transform: scaleX(1); }

.linklist a { position: relative; width: fit-content; }
.linklist a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 1px;
	background: var(--sage);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 420ms var(--ease-out);
}
.linklist a:hover::after { transform: scaleX(1); }

/* Running prose keeps a hairline,
because colour alone is not enough to
   mark a link inside a paragraph. It is faint at rest and fills on hover. */
.prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: rgba(154, 76, 52, 0.32);
	transition: text-decoration-color 360ms var(--ease-out), color 360ms var(--ease-out);
}
.prose a:hover { color: var(--clay); text-decoration-color: var(--clay); }

/* ------------------------------------------------------------- Images */

.media { overflow: hidden; }
.media__img,
.media--empty {
	transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.card__link:hover .media__img,
.listrow__link:hover .media__img,
.leadstory:hover .media__img,
.lead-card:hover .media__img,
.bookcard__cover:hover .media__img {
	transform: scale(1.045);
	filter: saturate(1.06);
}

.card__link:hover .media--empty,
.listrow__link:hover .media--empty,
.leadstory:hover .media--empty,
.lead-card:hover .media--empty,
.bookcard__cover:hover .media--empty {
	transform: scale(1.045);
	filter: brightness(1.03);
}

/* Cards settle upward a touch. No shadow: the direction does not allow one. */
.card,
.tcard,
.valuecard {
	transition: transform 420ms var(--ease-out), border-color 420ms var(--ease-out), background-color 420ms var(--ease-out);
}
.card:hover,
.tcard:hover,
.valuecard:hover { transform: translateY(-3px); }
.card:hover,
.valuecard:hover { border-color: var(--sand); }

.leadstory,
.lead-card { transition: transform 420ms var(--ease-out); }
.leadstory:hover,
.lead-card:hover { transform: translateY(-3px); }

.filter { position: relative; overflow: hidden; }
.bookcard__cover { display: block; overflow: hidden; border-radius: var(--r-sm); }

@media (max-width: 1024px) {
	.shophero__inner,
	.bookstory__inner,
	.story__inner,
	.contactgrid,
	.hero__inner { grid-template-columns: minmax(0, 1fr); }
	.bento { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.btn__text--in { display: none; }
	.card:hover, .tcard:hover, .valuecard:hover,
	.leadstory:hover, .lead-card:hover { transform: none; }
	.media__img, .media--empty { transform: none !important; filter: none !important; }
}
/* --------------------------------------------------------------------------
   Image hover,
restrained.
   A photograph drifts by about one and a half percent over nearly a second,
which reads as breathing rather than zooming. Placeholder blocks have no
   detail to reveal,
so they only warm slightly and never move.
   -------------------------------------------------------------------------- */

.media__img {
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.media--empty {
	transition: filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
	transform: none;
}

.card__link:hover .media__img,
.listrow__link:hover .media__img,
.leadstory:hover .media__img,
.lead-card:hover .media__img,
.bookcard__cover:hover .media__img {
	transform: scale(1.015);
	filter: none;
}

.card__link:hover .media--empty,
.listrow__link:hover .media--empty,
.leadstory:hover .media--empty,
.lead-card:hover .media--empty,
.bookcard__cover:hover .media--empty {
	transform: none;
	filter: brightness(1.018);
}

.card:hover,
.tcard:hover,
.valuecard:hover,
.leadstory:hover,
.lead-card:hover { transform: translateY(-2px); }
/* --------------------------------------------------------------------------
   Rolling labels on the navigation. No underline anywhere: the current page
   is marked by weight and ink,
and hover rolls the word over.
   -------------------------------------------------------------------------- */

.nav__list a::after,
.linklist a::after { display: none !important; content: none !important; }

.roll {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 22px;
}
.roll__text {
	display: block;
	will-change: transform;
	transition: transform 520ms var(--ease-out);
}
.roll__text--in {
	position: absolute;
	inset: 0;
	transform: translateY(108%);
	color: var(--clay);
}
.nav__list a:hover .roll__text,
.nav__list a:focus-visible .roll__text { transform: translateY(-108%); }
.nav__list a:hover .roll__text--in,
.nav__list a:focus-visible .roll__text--in { transform: translateY(0); }

/* The current page keeps its ink and weight,
with no line under it. */
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a,
.nav__list .is-current > a { color: var(--ink); font-weight: 600; }
.nav__list .current-menu-item > a .roll__text--in,
.nav__list .current_page_item > a .roll__text--in,
.nav__list .is-current > a .roll__text--in { color: var(--clay); }

/* Footer links move through colour rather than growing a rule. */
.linklist a { transition: color 360ms var(--ease-out); }
.linklist a:hover { color: var(--sage); }

@media (max-width: 1024px) {
	.roll { line-height: 26px; }
	.nav__list a { padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.roll__text--in { display: none; }
	.nav__list a:hover { color: var(--clay); }
}
/* --------------------------------------------------------------------------
   Single post,
corrected against frame 07.
   The banner sits inside the ivory hero band with 60px beneath it. It was
   overlapping the seam into the white band,
which the frame does not do.
   -------------------------------------------------------------------------- */

.essayhero { padding-block: 70px 60px; }
.media--banner {
	aspect-ratio: 1240 / 300;
	border-radius: 24px;
	margin-top: 62px;
	transform: none;
}
.essayhero + .band { padding-top: 110px; }

.essayhero__title { max-width: 920px; }
.essayhero__deck { max-width: 700px; }

/* Reading column,
share rail and contents panel,
per the frame. */
.essaybody { gap: 40px; }
.toc { padding: 20px; border-radius: var(--r-md); }
.toc__list { gap: 16px; }
.toc__list a { font-size: 12px; line-height: 1.33; }
.toc__num { min-width: 14px; }

.share__list { gap: 16px; }

.prose--essay blockquote { padding: 42px 52px; }
.scripture { padding: 24px 24px 28px; }

@media (max-width: 1024px) {
	.essayhero { padding-block: 52px 44px; }
	.media--banner { aspect-ratio: 16 / 7; margin-top: 44px; transform: none; }
	.essayhero + .band { padding-top: 64px; }
}

@media (max-width: 767px) {
	.media--banner { aspect-ratio: 3 / 2; margin-top: 32px; transform: none; }
	.essayhero + .band { padding-top: 52px; }
}
/* The reading measure is 720px and stays 720px: the rail and the contents
   panel give up the space instead of the column taking it. */
@media (max-width: 1288px) {
	.essaybody {
		grid-template-columns: 80px minmax(0, 720px) 220px;
		justify-content: space-between;
		gap: 32px;
	}
}
/* --------------------------------------------------------------------------
   Related essays card,
per frame 07: 300px tall,
360x150 media,
25px title,
no excerpt. The home grid card stays taller and keeps its excerpt.
   -------------------------------------------------------------------------- */

.media--compact { aspect-ratio: 360 / 150; border-radius: var(--r-sm); }
.card--compact .card__body { padding: 18px 8px 0; }
.card__title--lg {
	margin-top: 12px;
	font-size: 25px;
	line-height: 1.16;
}
.card--compact .card__meta { padding: 26px 8px 10px; }

/* The frame drops the rail and the contents panel 20px below the column. */
.share,
.toc { margin-top: 20px; }

@media (max-width: 1024px) {
	.share,
	.toc { margin-top: 0; }
}

@media (max-width: 767px) {
	.card__title--lg { font-size: 22px; }
}
/* --------------------------------------------------------------------------
   Shop hero: the cover composition from frame 03.
   A paper panel of 520x450 holding two 190x300 faces,
the second stepped down
   and across. Everything is a percentage of the panel,
so it keeps its
   proportions as the container narrows. Tones map onto existing tokens:
   the pale face is mist with forest lettering,
the dark face is ink with
   ivory lettering.
   -------------------------------------------------------------------------- */

.coverstack {
	position: relative;
	width: 100%;
	aspect-ratio: 520 / 450;
	border-radius: 20px;
	background: var(--paper);
}

.bookface {
	position: absolute;
	display: block;
	width: 36.54%;   /* 190 of 520 */
	height: 66.67%;  /* 300 of 450 */
	padding: 6.67% 9.47%;
	border-radius: var(--r-sm);
	overflow: hidden;
	transition: transform 620ms var(--ease-out);
}
.bookface--1 { left: 10%;     top: 12%; z-index: 1; }
.bookface--2 { left: 53.46%;  top: 20%; z-index: 2; }
.bookface:hover { transform: translateY(-4px); z-index: 3; }

.bookface--light { background: var(--mist); }
.bookface--dark { background: var(--ink); }

.bookface__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bookface__author {
	display: block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.bookface__title {
	position: absolute;
	left: 9.47%;
	right: 9.47%;
	top: 45%;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.04;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.bookface--light .bookface__author { color: var(--ink); }
.bookface--light .bookface__title { color: var(--forest); }
.bookface--dark  .bookface__author { color: var(--sage); }
.bookface--dark  .bookface__title { color: var(--ivory); }

@media (max-width: 1024px) {
	.coverstack { max-width: 520px; }
}

@media (max-width: 767px) {
	.bookface__title { font-size: 21px; }
	.bookface__author { font-size: 10px; letter-spacing: 0.14em; }
}

@media (max-width: 420px) {
	.bookface__title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.bookface:hover { transform: none; }
}
/* Percentage padding resolves against the containing block,
not the element,
so 9.47% became 45px inside a 175px card and forced the author name onto
   two lines. The inset is fixed instead,
and tracks down with the card. */

.bookface { padding: 18px 16px; }
.bookface__title { left: 16px; right: 16px; }
.bookface__author { white-space: nowrap; }

@media (max-width: 1288px) {
	.bookface { padding: 16px 14px; }
	.bookface__title { left: 14px; right: 14px; font-size: 24px; }
}

@media (max-width: 767px) {
	.bookface { padding: 14px 12px; }
	.bookface__title { left: 12px; right: 12px; font-size: 21px; }
}

@media (max-width: 420px) {
	.bookface { padding: 11px 10px; }
	.bookface__title { left: 10px; right: 10px; font-size: 17px; }
	.bookface__author { font-size: 9px; letter-spacing: 0.12em; }
}
/* --------------------------------------------------------------------------
   Load more. A real link upgraded to fetch in place.
   -------------------------------------------------------------------------- */

.loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 44px;
}
.loadmore__status {
	min-height: 1em;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--muted);
}
.loadmore.is-loading .btn {
	pointer-events: none;
	opacity: 0.55;
}
.loadmore.is-loading .btn__arrow {
	animation: pennings-nudge 900ms var(--ease-out) infinite;
}
@keyframes pennings-nudge {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(3px, -3px); }
}

/* Newly appended cards settle in rather than snapping. */
.grid > .card { animation: pennings-settle 520ms var(--ease-out) both; }
@keyframes pennings-settle {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.loadmore.is-loading .btn__arrow { animation: none; }
	.grid > .card { animation: none; }
}
/* --------------------------------------------------------------------------
   Breadcrumb. Sentence case and quiet,
so it does not compete with the clay
   category line directly beneath it.
   -------------------------------------------------------------------------- */

.crumbs { margin-bottom: 26px; }
.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.crumbs__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--muted);
}
.crumbs__item + .crumbs__item::before {
	content: "\203A";
	color: var(--sand);
	font-size: 13px;
	line-height: 1;
}
.crumbs__item a {
	color: var(--muted);
	transition: color 360ms var(--ease-out);
}
.crumbs__item a:hover { color: var(--clay); }
.crumbs__item [aria-current="page"] {
	color: var(--ink);
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.crumbs { margin-bottom: 20px; }
	.crumbs__item { font-size: 11px; }
	.crumbs__item [aria-current="page"] { max-width: 20ch; }
}
/* --------------------------------------------------------------------------
   Breadcrumb takes over the eyebrow treatment now that the category line is
   gone: uppercase Inter 600 at 10px in clay,
on the eyebrow tracking.
   The chevron stays but is dropped back so the words carry the line.
   -------------------------------------------------------------------------- */

.crumbs { margin-bottom: 26px; }
.crumbs__list { gap: 12px; }

.crumbs__item {
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clay);
	gap: 12px;
}
.crumbs__item a { color: var(--clay); }
.crumbs__item a:hover { color: var(--ink); }
.crumbs__item [aria-current="page"] {
	color: var(--clay);
	max-width: 40ch;
}
.crumbs__item + .crumbs__item::before {
	content: "\203A";
	color: var(--clay);
	opacity: 0.45;
	font-size: 12px;
	letter-spacing: 0;
}

@media (max-width: 767px) {
	.crumbs { margin-bottom: 20px; }
	.crumbs__list { gap: 9px; }
	.crumbs__item { font-size: 10px; letter-spacing: 0.1em; gap: 9px; }
	.crumbs__item [aria-current="page"] { max-width: 22ch; }
}
/* ==========================================================================
   Mobile pass.
   ========================================================================== */

/* Nothing may push the page sideways. */
html,
body { overflow-x: hidden; }
body { overflow-wrap: break-word; }
.prose a,
.prose code,
.prose pre { overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Book card. The frame keeps two cramped columns at 390,
which left the cover
   small and the button crowding the paragraph. Below 768 the cover takes the
   full width of the card and the text sits under it with real breathing room.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.bookcard { padding: 20px; }
	.bookcard__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.bookcard__cover { width: 100%; max-width: none; }
	.bookcard__text { padding-block: 0; }
	.bookcard__title { margin-top: 14px; font-size: 28px; }
	.bookcard__blurb { margin-top: 12px; font-size: 15px; }
	.bookcard .btn { margin-top: 26px; }
}

@media (max-width: 420px) {
	.bookcard { padding: 16px; }
	.bookcard__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.bookcard__cover { max-width: none; }
	.bookcard__title { font-size: 26px; }
}
/* ==========================================================================
   Responsive authority.

   This stylesheet grew by appending,
and several later blocks written for a
   wide breakpoint were landing after narrower ones and overriding them,
so
   the essay body stayed a three column grid on a phone. Everything that must
   win at small sizes is restated here,
last,
in descending width order.
   ========================================================================== */

@media (max-width: 1024px) {
	/* Essay: one column, rail and contents unpinned. */
	.essaybody {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		justify-content: stretch;
	}
	.essaybody .prose--essay { max-width: none; margin-inline: 0; }
	.share,
	.toc {
		position: static;
		margin-top: 0;
		width: auto;
	}
	.share__list { flex-direction: row; gap: 12px; }
	.toc { order: 3; }

	.media--banner { aspect-ratio: 16 / 7; margin-top: 44px; transform: none; }
	.essayhero + .band { padding-top: 64px; }

	.bookface__title { font-size: 24px; }

	.hero__inner,
	.bento,
	.featrow,
	.shophero__inner,
	.bookstory__inner,
	.story__inner,
	.abouthero__inner,
	.contacthero__inner,
	.contactgrid,
	.author__inner,
	.guide__inner { grid-template-columns: minmax(0, 1fr); }

	.bookhero__inner { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.media--banner { aspect-ratio: 3 / 2; margin-top: 30px; transform: none; }
	.essayhero + .band { padding-top: 48px; }

	.bookface__title { font-size: 21px; }

	.essaybody { gap: 28px; }
	.share__btn { width: 40px; height: 40px; }

	/* Grids all collapse to one column. */
	.grid--2,
	.grid--3,
	.bento__grid,
	.bookcard__inner,
	.bookhero__inner,
	.cform__row { grid-template-columns: minmax(0, 1fr); }
	.bento__grid { grid-template-rows: none; }

	.bookhero__cover { width: 100%; max-width: 240px; }

	/* Section headers stack, buttons go full width so they are easy to hit. */
	.section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.btn-row { width: 100%; }
	.btn-row .btn { flex: 1 1 auto; justify-content: center; }

	.prose--essay { max-width: none; }
	.prose--policy { max-width: none; }
}

@media (max-width: 420px) {
	.wrap { padding-inline: 20px; }
	.bookface__title { font-size: 17px; }
	.btn { padding: 11px 15px; }
	.filters { gap: 8px; }
	.share__list { flex-wrap: wrap; }
}
/* --------------------------------------------------------------------------
   Cover lettering. These are single uppercase words,
so they must never be
   broken across lines. The global break-word rule was splitting REMISSION
   into REMISSI / ON once the cover narrowed,
so the size steps down instead.
   -------------------------------------------------------------------------- */

.covercard__title,
.bookface__title {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

@media (max-width: 1024px) {
	.covercard__title { font-size: 36px; }
}

@media (max-width: 767px) {
	.covercard { padding: 26px 22px; }
	.covercard__title { font-size: 30px; }
	.covercard__author { font-size: 10px; letter-spacing: 0.14em; }
}

@media (max-width: 420px) {
	.covercard { padding: 22px 18px; }
	.covercard__title { font-size: 25px; }
}
/* --------------------------------------------------------------------------
   Small screen header.
   The shop button leaves the bar,
so the bar holds the wordmark and the
   toggle only. The button reappears at the foot of the open menu,
full width
   like every other button on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.masthead__inner {
		flex-wrap: wrap;
		gap: 0;
		min-height: 64px;
		column-gap: 16px;
	}

	.wordmark { order: 1; }
	.nav-toggle { order: 2; display: inline-flex; margin-left: auto; }
	.nav { order: 3; }
	.masthead__action { order: 4; }

	.nav {
		flex: 0 0 100%;
		display: none;
		justify-content: flex-start;
		padding-top: 8px;
		padding-bottom: 0;
	}
	.nav.is-open { display: flex; }

	.masthead__action {
		flex: 0 0 100%;
		display: none;
		padding-bottom: 22px;
	}
	.masthead.is-open .masthead__action { display: block; }
	.masthead__action .btn {
		width: 100%;
		justify-content: center;
		font-size: 15px;
	}
	.masthead__action .btn .btn__label { line-height: 18px; }

	.nav__list { gap: 2px; padding-bottom: 14px; }
	.nav__list li { width: 100%; border-bottom: 1px solid var(--line); }
	.nav__list li:last-child { border-bottom: 0; }
	.nav__list a { display: block; padding-block: 14px; font-size: 17px; }
}
/* --------------------------------------------------------------------------
   Breadcrumb on small screens.

   The full four step trail wrapped,
stranding the page title on a second line
   behind a lone chevron,
which read as broken centring even though every line
   was centred. On a phone the last step is dropped: it names the page you are
   already on,
and the headline says the same thing directly beneath it in
   forty point type. The full trail stays on desktop and in the structured
   data either way.

   The rule only fires when the trail is three steps or longer,
so a short
   trail like Home > About is never reduced to Home alone.
   -------------------------------------------------------------------------- */

.crumbs__item { white-space: nowrap; }

@media (max-width: 767px) {
	.crumbs__item:last-child:nth-child(n+3) { display: none; }
	.crumbs__list { row-gap: 6px; }
}
/* --------------------------------------------------------------------------
   Mobile menu,
corrected.

   Two problems: the close glyph sat low because the two rotated bars were
   offset from the button centre rather than stacked on it,
and the open panel
   was in flow,
so it pushed the hero down and shoved it back on close.
   The panel is now absolutely positioned and overlays the hero instead.
   -------------------------------------------------------------------------- */

/* The toggle: both bars centred on the same point,
so the X is true. */
.nav-toggle {
	position: relative;
	flex: none;
}
.nav-toggle__bar {
	position: relative;
	width: 18px;
	height: 1.5px;
	background: var(--ink);
	transition: background-color 200ms var(--ease-out);
}
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 1.5px;
	background: var(--ink);
	content: "";
	transition: transform 320ms var(--ease-out);
}
.nav-toggle__bar::before { transform: translateY(-5.5px); }
.nav-toggle__bar::after { transform: translateY(5.5px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(0) rotate(-45deg); }

@media (max-width: 1024px) {
	/* The bar itself stays a fixed height whatever the panel does. */
	.masthead {
		position: relative;
		z-index: 60;
	}
	.masthead__inner {
		flex-wrap: nowrap;
		min-height: 64px;
		column-gap: 16px;
	}

	/* The panel floats over the hero rather than displacing it. */
	.nav,
	.masthead__action {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 59;
		background: var(--paper);
		padding-inline: 24px;
	}
	.nav {
		top: 100%;
		padding-top: 4px;
		padding-bottom: 0;
		border-top: 1px solid var(--line);
	}
	.masthead__action {
		top: 100%;
		padding-bottom: 24px;
	}
	.masthead.is-open .masthead__action { display: block; }

	.nav__list { width: 100%; }
}

@media (max-width: 420px) {
	.nav,
	.masthead__action { padding-inline: 20px; }
}
/* --------------------------------------------------------------------------
   Menu panel,
final.
   On desktop the panel is display:contents,
so the nav and the shop button
   remain direct children of the bar and nothing about that layout changes.
   On small screens it becomes one absolutely positioned sheet that drops over
   the hero,
so opening and closing the menu never moves the page underneath.
   -------------------------------------------------------------------------- */

.masthead__panel { display: contents; }

@media (max-width: 1024px) {
	.masthead { position: relative; z-index: 60; }
	.masthead__inner {
		position: static;
		flex-wrap: nowrap;
		min-height: 64px;
		column-gap: 16px;
	}
	.wordmark { order: 0; }
	.nav-toggle { order: 0; margin-left: auto; }

	.masthead__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 59;
		padding: 6px 24px 24px;
		background: var(--paper);
		border-top: 1px solid var(--line);
		max-height: calc(100dvh - 64px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.masthead.is-open .masthead__panel { display: block; }

	/* The children sit in normal flow inside the sheet. */
	.nav,
	.nav.is-open,
	.masthead__action,
	.masthead.is-open .masthead__action {
		position: static;
		display: block;
		flex: none;
		inset: auto;
		width: auto;
		padding: 0;
		background: none;
		border: 0;
	}
	.masthead__action { padding-top: 18px; }

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding-bottom: 0;
	}
}

@media (max-width: 420px) {
	.masthead__panel { padding-inline: 20px; }
}
/* --------------------------------------------------------------------------
   Toggle icon,
rebuilt.
   Three bars,
all centred on the same point,
offset by translate. Opening
   collapses the middle one and rotates the outer two onto each other,
so the
   cross is centred on the button by construction rather than by eye.
   -------------------------------------------------------------------------- */

.nav-toggle {
	position: relative;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: none;
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 1.5px;
	margin: 0;
	background: var(--ink);
	content: "";
	transition: transform 340ms var(--ease-out), background-color 200ms linear;
}

.nav-toggle__bar { transform: translate(-50%, -50%); }
.nav-toggle__bar::before { transform: translate(-50%, -50%) translateY(-6px); }
.nav-toggle__bar::after { transform: translate(-50%, -50%) translateY(6px); }

.nav-toggle.is-open .nav-toggle__bar { background: transparent; }
.nav-toggle.is-open .nav-toggle__bar::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1024px) {
	.nav-toggle { display: inline-flex; order: 0; margin-left: auto; flex: none; }
}
/* --------------------------------------------------------------------------
   Imagery on phones.

   Every picture that is the subject of its section runs the full width of the
   container. The book cover on the book page was capped at 240px, which left
   it stranded in white space the way the shop card was. The only images that
   stay small are the ones where size carries meaning: the thumbnails in the
   Latest list, which are an index rather than a picture.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.bookhero__cover,
	.covercard,
	.media--bigcover {
		width: 100%;
		max-width: none;
	}
	.bookhero__inner { gap: 28px; }

	.coverstack { max-width: none; }

	.media--hero,
	.media--abouthero,
	.media--portrait,
	.media--story,
	.media--banner,
	.media--leadstory,
	.media--lead { width: 100%; max-width: none; }

	/* The list thumbnail stays an index, not a picture. */
	.media--thumb { width: 86px; }
}

@media (max-width: 420px) {
	.bookhero__cover { width: 100%; max-width: none; }
}
/* ==========================================================================
   Display scale, reduced.

   The Figma sizes were drawn against short placeholder headlines. The real
   copy is longer, and at 70px in a 439px column the home headline broke to
   five lines. The hero column widens and every page level heading steps down
   so the real wording lands in two or three lines.
   ========================================================================== */

@media (min-width: 1025px) {
	.hero__inner { grid-template-columns: minmax(0, 560px) minmax(0, 520px); }
}

.hero__title { font-size: 56px; line-height: 1.04; }
.hero__body { max-width: 470px; }

.essayhero__title { font-size: 58px; }
.blogmast__title { font-size: 54px; }
.shophero__title { font-size: 54px; }
.contacthero__title { font-size: 56px; }
.bookhero__title { font-size: 52px; }
.abouthero__title { font-size: 50px; }
.policymast__title { font-size: 48px; }

.h2 { font-size: 34px; }
.h2--lg { font-size: 38px; }
.h2--xl { font-size: 42px; }

@media (max-width: 1024px) {
	.hero__title { font-size: 48px; }
	.essayhero__title { font-size: 46px; }
	.blogmast__title { font-size: 44px; }
	.shophero__title { font-size: 44px; }
	.contacthero__title { font-size: 44px; }
	.bookhero__title { font-size: 42px; }
	.abouthero__title { font-size: 42px; }
	.policymast__title { font-size: 40px; }
	.h2 { font-size: 30px; }
	.h2--lg { font-size: 34px; }
	.h2--xl { font-size: 36px; }
}

@media (max-width: 767px) {
	.hero__title { font-size: 38px; }
	.essayhero__title { font-size: 32px; }
	.blogmast__title { font-size: 33px; }
	.shophero__title { font-size: 33px; }
	.contacthero__title { font-size: 36px; }
	.bookhero__title { font-size: 32px; }
	.abouthero__title { font-size: 32px; }
	.policymast__title { font-size: 32px; }
	.h2, .h2--lg, .h2--xl { font-size: 28px; }
}
/* --------------------------------------------------------------------------
   Hero balance.
   The text column is shorter than the image, so it centres against it rather
   than hanging from the top. On phones the quote card keeps the desktop move
   and straddles the bottom edge of the image instead of sitting under it.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.hero__inner {
		align-items: center;
		grid-template-columns: minmax(0, 560px) minmax(0, 520px);
	}
}

@media (max-width: 1024px) {
	.hero__inner { align-items: stretch; }

	.hero__figure {
		position: relative;
		margin-bottom: 46px;
	}

	.hero__note {
		position: absolute;
		left: 16px;
		right: 16px;
		top: auto;
		bottom: -26px;
		width: auto;
		margin: 0;
		padding: 16px 18px;
		border: 0;
		border-radius: 14px;
		background: var(--paper);
		font-size: 15px;
		line-height: 1.45;
	}
}

@media (max-width: 767px) {
	.hero__figure { margin-bottom: 40px; }
	.hero__note {
		left: 12px;
		right: 12px;
		bottom: -22px;
		padding: 14px 16px;
		font-size: 14px;
	}
}

@media (max-width: 420px) {
	.hero__note { font-size: 13px; padding: 12px 14px; bottom: -20px; }
}
/* Logo image in place of the wordmark. */
.wordmark__logo { display: block; width: auto; max-width: 260px; }
@media (max-width: 767px) { .wordmark__logo { max-width: 180px; } }

/* Category filters are interactive, so they take the pill radius the
   buttons use rather than the 18px card radius. */
.filter { border-radius: var(--r-pill); }

/* The hero quote card reads as a caption on the image, so it centres. */
.hero__note { text-align: center; }

/* --------------------------------------------------------------------------
   Brand lockup: monogram beside the wordmark.
   -------------------------------------------------------------------------- */

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.wordmark__logo {
	display: block;
	width: auto;
	flex: none;
}
.wordmark__text {
	font-family: var(--serif);
	font-size: 17px;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.wordmark { gap: 9px; }
	.wordmark__text { font-size: 15px; }
	.wordmark__logo { height: 28px !important; }
}

@media (max-width: 380px) {
	.wordmark__text { font-size: 13px; }
	.wordmark__logo { height: 24px !important; }
}

/* --------------------------------------------------------------------------
   Footer wordmark. At 30px the full name broke over two lines inside the
   260px brand column, so it steps down and is held to a single line.
   -------------------------------------------------------------------------- */

.colophon__brand { max-width: 300px; }
.colophon__wordmark {
	font-size: 22px;
	line-height: 1.15;
	white-space: nowrap;
}

@media (max-width: 400px) {
	.colophon__wordmark { font-size: 20px; }
}

/* ==========================================================================
   Social and share icons. Drawn inline, so they take the colour around them.
   ========================================================================== */

.icon { display: block; }

/* Footer profiles, under the brand line. */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}
.social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--forest);
	border-radius: var(--r-pill);
	color: var(--mist);
	transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.social__link:hover {
	color: var(--ink);
	background: var(--sage);
	border-color: var(--sage);
	transform: translateY(-2px);
}
.social__link::after { content: none !important; }

/* Share rail on a post. */
.share__btn {
	position: relative;
	color: var(--ink);
}
.share__btn:hover { background: var(--sand); }
.share__icon--done { display: none; }
.share__copy.is-copied { background: var(--sage); }
.share__copy.is-copied .share__icon--idle { display: none; }
.share__copy.is-copied .share__icon--done { display: block; }

@media (max-width: 1024px) {
	.share__list { flex-wrap: wrap; }
}

@media (max-width: 767px) {
	.social { gap: 8px; margin-top: 20px; }
	.social__link { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.social__link:hover { transform: none; }
}
/* ==========================================================================
   Tinted card grounds.

   Four more drawn from the palette so the rotation runs to eight before it
   repeats: blush from the clay accent, fern from the forest, stone between
   sand and ivory, dusk a deeper sage. Ordered warm after cool, so neighbours
   never sit flat against each other.
   ========================================================================== */

:root {
	--blush: #EDDCD3;
	--fern:  #D6DFD2;
	--stone: #E3DCCF;
	--dusk:  #C9D2BC;
}

.tcard--mist,  .bookcard--mist  { background: var(--mist); }
.tcard--sand,  .bookcard--sand  { background: var(--sand); }
.tcard--fern,  .bookcard--fern  { background: var(--fern); }
.tcard--blush, .bookcard--blush { background: var(--blush); }
.tcard--sage,  .bookcard--sage  { background: var(--sage); }
.tcard--stone, .bookcard--stone { background: var(--stone); }
.tcard--dusk,  .bookcard--dusk  { background: var(--dusk); }
.tcard--ivory, .bookcard--ivory { background: var(--ivory); }

/* Sage and dusk are dark enough that clay drops under 4.5:1, so on those two
   the eyebrow deepens. The rest keep the accent as it is. */
.tcard--sage .eyebrow,
.tcard--dusk .eyebrow,
.bookcard--sage .bookcard__kicker,
.bookcard--dusk .bookcard__kicker,
.bookcard--sand .bookcard__kicker { color: var(--clay-deep); }

.tcard--mist .eyebrow,
.tcard--sand .eyebrow,
.tcard--fern .eyebrow,
.tcard--blush .eyebrow,
.tcard--stone .eyebrow,
.tcard--ivory .eyebrow { color: var(--clay); }

.tcard--mist .tcard__meta,
.tcard--sand .tcard__meta,
.tcard--fern .tcard__meta,
.tcard--blush .tcard__meta,
.tcard--sage .tcard__meta,
.tcard--stone .tcard__meta,
.tcard--dusk .tcard__meta,
.tcard--ivory .tcard__meta { color: var(--ink-soft); }

.tcard--sage .tcard__link:hover .tcard__title,
.tcard--dusk .tcard__link:hover .tcard__title,
.tcard--sand .tcard__link:hover .tcard__title { color: var(--clay-deep); }

.bookcard--mist .bookcard__kicker,
.bookcard--fern .bookcard__kicker,
.bookcard--blush .bookcard__kicker,
.bookcard--stone .bookcard__kicker,
.bookcard--ivory .bookcard__kicker { color: var(--ink-soft); }

/* Placeholder media follows the same widened family. */
.media--tint5 { background: linear-gradient(135deg, var(--blush) 0%, var(--ivory) 100%); }
.media--tint6 { background: linear-gradient(150deg, var(--fern) 0%, var(--stone) 100%); }
.media--tint7 { background: linear-gradient(160deg, var(--dusk) 0%, var(--mist) 100%); }
.media--tint8 { background: linear-gradient(135deg, var(--stone) 0%, var(--blush) 100%); }