/* ==========================================================================
   anetteleonoraandersen.dk by StayMain
   Core stylesheet: tokens, base, layout, components, header/footer, hero.
   Section and block styles live in blocks.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Light surfaces. White carries the page; the warm bone is used where a
	   section needs to step back — cards, insets, alternating bands. */
	--white: #ffffff;
	--paper: #ffffff;
	--paper-raised: #ffffff;
	--paper-sunken: #f1eae0;

	/* The dark surface, and the body text colour. Pure black: it reads as
	   printing ink and gives the gilt somewhere to land. */
	--ink: #000000;
	--ink-raised: #121212;
	--ink-sunken: #000000;

	/* The only accent: foil stamped on a book spine. */
	--gilt: #ddae5c;
	--gilt-bright: #ddae5c;
	/* Darkened so accent text clears AA on both white and bone. */
	--gilt-deep: #7d5a1c;

	/* Text */
	--text: var(--ink);
	--text-muted: #5f5f5f;
	--text-faint: #757575;
	--text-invert: #ffffff;
	--text-invert-muted: rgba(255, 255, 255, 0.74);

	/* Lines */
	--line: #e4dfd7;
	--line-strong: #cdc7bc;
	--line-invert: rgba(255, 255, 255, 0.18);
	--line-invert-strong: rgba(255, 255, 255, 0.4);

	/* Type */
	--font-display: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
	--font-body: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--step--2: clamp(0.7rem, 0.685rem + 0.075vw, 0.75rem);
	--step--1: clamp(0.875rem, 0.85rem + 0.125vw, 0.95rem);
	--step-0: clamp(1rem, 0.975rem + 0.13vw, 1.0625rem);
	--step-1: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--step-2: clamp(1.45rem, 1.28rem + 0.85vw, 2rem);
	--step-3: clamp(1.85rem, 1.45rem + 2vw, 3rem);
	--step-4: clamp(2.35rem, 1.5rem + 4.2vw, 4.25rem);
	--step-5: clamp(2.75rem, 1.15rem + 8vw, 6.75rem);

	/* Space */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.25rem;
	--space-xl: 3.25rem;
	--space-2xl: 4.5rem;
	--space-3xl: 6.5rem;
	--space-4xl: 9rem;

	/* Layout */
	--container: 82rem;
	--container-prose: 42rem;
	--gutter: clamp(1.25rem, 5vw, 4rem);
	--header-height: 4.5rem;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.45s;

	/* The gilt hairline. Used as a rule, a spine, and a focus marker. */
	--gilt-hairline: 1px solid var(--gilt);
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-optical-sizing: auto;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip, not hidden: hidden turns the body into a scroll container, which
	   traps position:sticky descendants (like the product cover). Older
	   browsers ignore clip and keep hidden — same look, no stick there. */
	overflow-x: hidden;
	overflow-x: clip;
}

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

/* Icons are Phosphor marks inlined as SVG. They default to the current text
   colour; sizes are set by the width/height attributes on each icon. */
svg {
	fill: currentColor;
	flex: 0 0 auto;
}

.icon {
	display: inline-block;
	vertical-align: -0.125em;
}

/* The arrow that slides on hover. */
.icon--arrow {
	transition: transform 0.25s var(--ease-out);
}

.entry__more:hover .icon--arrow,
.book-card__buy:hover .icon--arrow,
.section__more:hover .icon--arrow {
	transform: translateX(3px);
}

figure {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

a {
	color: var(--gilt-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.2s var(--ease);
}

a:hover {
	color: var(--ink);
}

:focus-visible {
	outline: 2px solid var(--gilt-deep);
	outline-offset: 3px;
	border-radius: 1px;
}

::selection {
	background: var(--gilt);
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.display {
	font-family: var(--font-display);
	font-weight: 500;
	font-variation-settings: "SOFT" 16, "WONK" 1;
	letter-spacing: -0.018em;
	line-height: 1.06;
	text-wrap: balance;
	color: var(--ink);
}

h1 {
	font-size: var(--step-4);
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-1);
	letter-spacing: -0.01em;
}

h4,
h5,
h6 {
	font-size: var(--step-0);
}

em,
cite,
dfn {
	font-style: italic;
}

strong {
	font-weight: 600;
}

.mono-label {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--text-muted);
}

/* Long-form reading measure. */
.prose {
	max-width: 40rem;
	color: var(--text);
	font-size: var(--step-1);
	line-height: 1.68;
}

.prose--wide {
	max-width: 62rem;
}

.prose--intro {
	font-size: var(--step-2);
	line-height: 1.5;
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 22, "WONK" 1;
	letter-spacing: -0.012em;
}

.prose > * + * {
	margin-top: 1.2em;
}

.prose h2,
.prose h3,
.prose h4 {
	margin-top: 1.8em;
}

/* A heading opening the text needs no distance to whatever sits above it. */
.prose > h2:first-child,
.prose > h3:first-child,
.prose > h4:first-child {
	margin-top: 0;
}

.prose ul,
.prose ol {
	padding-left: 1.2em;
}

.prose li + li {
	margin-top: 0.45em;
}

.prose a {
	color: var(--gilt-deep);
	text-decoration: underline;
}

.prose a:hover {
	color: var(--ink);
}

.prose blockquote {
	margin-left: 0;
	padding-left: var(--space-m);
	border-left: var(--gilt-hairline);
	font-style: italic;
	color: var(--text-muted);
}

.prose img {
	margin-block: var(--space-l);
}

.prose code,
.prose kbd {
	font-family: var(--font-mono);
	font-size: 0.86em;
	background: var(--paper-sunken);
	padding: 0.15em 0.4em;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step-0);
}

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.site-main {
	flex: 1 0 auto;
	outline: none;
}

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--prose {
	max-width: calc(var(--container-prose) + var(--gutter) * 2);
}

.container--quote {
	max-width: calc(62rem + var(--gutter) * 2);
}

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

.container--center .section__head--block {
	margin-inline: auto;
}

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

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-m);
}

.section__head--block {
	display: block;
	max-width: 48rem;
	margin-bottom: var(--space-xl);
}

.section__title {
	margin-top: var(--space-2xs);
}

.container--center .section__title {
	font-style: italic;
	font-variation-settings: "SOFT" 30, "WONK" 1;
}

.section__lead {
	margin-top: var(--space-s);
	font-size: var(--step-1);
	color: var(--text-muted);
	max-width: 34rem;
}

.container--center .section__lead {
	margin-inline: auto;
}

.section__more {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gilt-deep);
	white-space: nowrap;
}

.section__more:hover {
	color: var(--ink);
}

/* Ink-surfaced sections. */
.section--ink,
.quote-band--ink,
.cta--ink,
.cta--sunken {
	background: var(--ink);
	color: var(--text-invert);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.quote-band--ink h2,
.quote-band--ink h3,
.cta--ink h2,
.cta--sunken h2 {
	color: var(--text-invert);
}

.section--ink .mono-label,
.quote-band--ink .mono-label,
.cta--ink .mono-label,
.cta--sunken .mono-label {
	color: var(--text-invert-muted);
}

.section--ink .eyebrow__text,
.quote-band--ink .eyebrow__text,
.cta--ink .eyebrow__text,
.cta--sunken .eyebrow__text,
.hero--on-light .eyebrow__text {
	color: var(--gilt-bright);
}

.section--ink .section__lead {
	color: var(--text-invert-muted);
}

.section--ink a:not(.btn):not(.book-card__buy):not(.entry__more),
.cta--ink a:not(.btn),
.cta--sunken a:not(.btn) {
	color: var(--gilt-bright);
}

.section--ink a:not(.btn):hover,
.cta--ink a:not(.btn):hover,
.cta--sunken a:not(.btn):hover {
	color: var(--text-invert);
}

.section--ink .prose,
.quote-band--ink .prose {
	color: var(--text-invert);
}

.section--ink :focus-visible,
.quote-band--ink :focus-visible,
.cta--ink :focus-visible,
.cta--sunken :focus-visible {
	outline-color: var(--gilt-bright);
}

.cta--sunken {
	background: var(--ink-sunken);
}

/* --------------------------------------------------------------------------
   5. The eyebrow: the theme's smallest repeated mark
   -------------------------------------------------------------------------- */

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--text-muted);
}

.eyebrow__rule {
	display: block;
	width: 2.25rem;
	height: 1px;
	flex: 0 0 auto;
	background: var(--gilt);
	transform-origin: left center;
}

.eyebrow--center {
	justify-content: center;
}

.eyebrow--section .eyebrow__rule {
	width: 3rem;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-m);
}

.btn {
	--btn-bg: var(--ink);
	--btn-fg: var(--paper);
	--btn-border: var(--ink);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* A gilt wipe across the button on hover: the foil catches the light. It
   sits behind the label (negative z-index inside the button's own stacking
   context), so the text stays readable even on buttons whose label is a
   bare text node — including <input> buttons, which cannot hold a span. */
.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gilt);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 0.32s var(--ease-out);
	z-index: -1;
}

.btn > * {
	position: relative;
	z-index: 1;
}

.btn:hover,
.btn:focus-visible {
	color: var(--ink);
	border-color: var(--gilt);
}

.btn:hover::after,
.btn:focus-visible::after {
	transform: scaleY(1);
}

.btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--ink);
	--btn-border: var(--line-strong);
}

.btn--secondary::after {
	background: var(--ink);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	color: var(--paper);
	border-color: var(--ink);
}

.btn--quiet {
	--btn-bg: transparent;
	--btn-fg: var(--gilt-deep);
	--btn-border: transparent;
	padding-inline: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.btn--quiet::after {
	display: none;
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
	color: var(--ink);
	border-color: transparent;
}

/* Buttons on ink surfaces invert: the fill becomes gilt, and a secondary
   button stays an outline so the two never read as the same control. */
.section--ink .btn,
.quote-band--ink .btn,
.cta--ink .btn,
.cta--sunken .btn,
.hero--on-light .btn:not(.btn--secondary):not(.btn--quiet) {
	--btn-bg: var(--gilt);
	--btn-fg: var(--ink);
	--btn-border: var(--gilt);
}

.section--ink .btn::after,
.quote-band--ink .btn::after,
.cta--ink .btn::after,
.cta--sunken .btn::after,
.hero--on-light .btn::after {
	background: var(--text-invert);
}

.section--ink .btn:hover,
.quote-band--ink .btn:hover,
.cta--ink .btn:hover,
.cta--sunken .btn:hover,
.hero--on-light .btn:hover {
	color: var(--ink);
	border-color: var(--text-invert);
}

.section--ink .btn--secondary,
.quote-band--ink .btn--secondary,
.cta--ink .btn--secondary,
.cta--sunken .btn--secondary,
.hero--on-light .btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--text-invert);
	--btn-border: var(--line-invert-strong);
}

.section--ink .btn--secondary::after,
.quote-band--ink .btn--secondary::after,
.cta--ink .btn--secondary::after,
.cta--sunken .btn--secondary::after,
.hero--on-light .btn--secondary::after {
	background: var(--paper);
}

.section--ink .btn--secondary:hover,
.quote-band--ink .btn--secondary:hover,
.cta--ink .btn--secondary:hover,
.cta--sunken .btn--secondary:hover,
.hero--on-light .btn--secondary:hover {
	color: var(--ink);
	border-color: var(--paper);
}

.section--ink .btn--quiet,
.quote-band--ink .btn--quiet,
.cta--ink .btn--quiet,
.cta--sunken .btn--quiet,
.hero--on-light .btn--quiet {
	--btn-fg: var(--gilt-bright);
}

.btn-row--hero {
	margin-top: var(--space-l);
}

.btn-row--hero .btn {
	padding: 1em 1.9em;
}

.btn-row--section,
.btn-row--intro,
.btn-row--split,
.btn-row--featured,
.btn-row--row {
	margin-top: var(--space-l);
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.ala-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.ala-header.is-stuck {
	border-bottom-color: var(--line);
	background: color-mix(in srgb, var(--paper) 96%, transparent);
}

.ala-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	min-height: var(--header-height);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ala-header__brand {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	min-width: 0;
}

.site-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-variation-settings: "SOFT" 16, "WONK" 1;
	font-size: var(--step-1);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.site-title__link {
	text-decoration: none;
	color: var(--ink);
}

.site-title__name {
	display: inline-block;
}

.site-title__tagline {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.ala-header .custom-logo-link {
	display: block;
}

.ala-header .custom-logo {
	max-height: 2.75rem;
	width: auto;
}

/* Primary and secondary logos ride side by side in the header; stacked in
   the footer lead, secondary directly under primary. */
.site-brand-logos {
	display: inline-flex;
	align-items: center;
	gap: var(--space-m);
}

.secondary-logo {
	height: auto;
}

/* No secondary logo in the header once the menu icon takes over (1275px),
   unless the Customizer switch keeps it beside the primary logo. It still
   moves to the offcanvas as well. */
@media (max-width: 1275px) {
	.ala-header .secondary-logo {
		display: none;
	}

	body.ala-mobile-secondary-logo .ala-header .secondary-logo {
		display: block;
	}
}

.ala-mobile-nav .secondary-logo {
	max-width: 12rem;
}

.site-footer__lead .site-brand-logos {
	flex-direction: column;
	align-items: flex-start;
}

/* Nav and the cart live in one right-hand group, so the menu ends up next to
   the cart rather than adrift in the middle of the bar. */
.ala-header__right {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	min-width: 0;
}

.ala-nav {
	display: flex;
	align-items: center;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	list-style: none;
}

.nav-list li {
	position: relative;
}

.nav-list a {
	display: inline-block;
	padding-block: 0.35rem;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	position: relative;
}

/* A gilt rule that wipes in from the left on hover and when current. */
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--gilt);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s var(--ease-out);
}

.nav-list a:hover::after,
.nav-list a:focus-visible::after,
.nav-list .current-menu-item > a::after,
.nav-list .current-menu-ancestor > a::after,
.nav-list .current_page_item > a::after {
	transform: scaleX(1);
}

.nav-list .sub-menu {
	list-style: none;
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 12rem;
	padding: 0.5rem;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-list .sub-menu a {
	padding: 0.45rem 0.6rem;
	font-size: var(--step--2);
	letter-spacing: 0.08em;
}

.ala-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

/* Icon-only cart. The count rides on the corner of the bag, so nothing is
   lost when the word "Kurv" is taken away. */
.header-cart {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--ink);
	border-radius: 1px;
}

.header-cart__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	transition: color 0.2s var(--ease);
}

.header-cart:hover .header-cart__icon,
.header-cart:focus-visible .header-cart__icon {
	color: var(--gilt-deep);
}

.header-cart__count {
	position: absolute;
	/* Clear of the bag's outline rather than sitting on its corner. */
	top: -0.35em;
	right: -1.1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15em;
	height: 1.15em;
	padding-inline: 0.25em;
	background: var(--gilt);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--paper);
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
}

/* Phosphor marks the open and closed state; both are rendered and swapped,
   so the toggle animates without the button losing its width. */
.nav-toggle__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
}

.nav-toggle__icon svg {
	position: absolute;
	transition: transform 0.28s var(--ease-out), opacity 0.18s var(--ease);
}

.nav-toggle__close {
	transform: rotate(-90deg) scale(0.7);
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	transform: rotate(90deg) scale(0.7);
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	transform: rotate(0) scale(1);
	opacity: 1;
}

/* Mobile nav panel: the paper surface, so it reads as a continuation of
   the header rather than a separate dark room. */
.ala-mobile-nav {
	position: fixed;
	inset: var(--header-height) 0 0;
	z-index: 99;
	background: var(--paper);
	color: var(--text);
	border-top: 1px solid var(--line);
	overflow-y: auto;
	animation: ala-fade-in 0.28s var(--ease);
}

.ala-mobile-nav[hidden] {
	display: none;
}

.ala-mobile-nav__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	min-height: 100%;
	padding: var(--space-xl) var(--gutter) var(--space-3xl);
}

.mobile-nav-list {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.mobile-nav-list li {
	border-bottom: 1px solid var(--line);
}

.mobile-nav-list a {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	padding-block: 0.85rem;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-variation-settings: "SOFT" 16, "WONK" 1;
	color: var(--ink);
	text-decoration: none;
}

.mobile-nav-list a:hover {
	color: var(--gilt-deep);
}

.mobile-nav-list .sub-menu {
	list-style: none;
	padding-left: var(--space-m);
	border-top: 1px solid var(--line);
}

/* Parent rows that gained a toggle: the link keeps its width, the button
   sits beside it, the submenu drops to a full row of its own. Without JS
   there is no button and the row renders exactly as before. */
.mobile-nav-list .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mobile-nav-list .menu-item-has-children > a {
	flex: 1 1 auto;
}

.mobile-nav-list .menu-item-has-children > .sub-menu {
	flex: 1 1 100%;
}

.mobile-nav-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--text-muted);
	border-radius: 999px;
	transition: color 0.2s var(--ease);
}

.mobile-nav-toggle:hover {
	color: var(--gilt-deep);
}

.mobile-nav-toggle svg {
	transition: transform 0.25s var(--ease-out);
}

.mobile-nav-toggle[aria-expanded="true"] {
	color: var(--gilt-deep);
}

.mobile-nav-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.mobile-nav-list .sub-menu a {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.ala-mobile-nav__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	margin-top: auto;
}

.mobile-nav-email {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	color: var(--gilt-deep);
	text-decoration: none;
	word-break: break-all;
}

.mobile-nav-email:hover {
	color: var(--ink);
}

/* Social links default to footer tones; on paper they take the body voice. */
.ala-mobile-nav .social__link {
	color: var(--text-muted);
}

.ala-mobile-nav .social__link:hover {
	color: var(--gilt-deep);
}

@keyframes ala-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   8. The hero, in three impact levels
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* clip, not hidden: same visual cut-off for the media and scroll cue,
	   but sticky children (product cover) keep sticking to the viewport. */
	overflow: hidden;
	overflow: clip;
	background: var(--paper);
	color: var(--ink);
}

.hero--high {
	min-height: calc(100svh - var(--header-height));
	background: var(--ink);
	color: var(--text-invert);
}

.hero--high.has-image {
	background: var(--ink);
}

.hero--medium {
	min-height: min(60svh, 38rem);
	padding-block: clamp(4rem, 12vw, 9rem);
	border-bottom: 1px solid var(--line);
}

/* Without an image or a cover there is nothing to fill a tall band, so the
   medium hero collapses to a comfortable margin around the type. */
.hero--medium:not(.has-image):not(.has-book):not(.has-product) {
	min-height: 0;
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero--low {
	min-height: 0;
	padding-block: clamp(2.75rem, 7vw, 4.5rem);
	background: var(--ink);
	color: var(--text-invert);
}

/* Explicit "light text" choice: headings inherit this, so without it they
   stay body-black even though the class says otherwise. */
.hero--on-light {
	color: var(--text-invert);
}

.hero--on-light .hero__lead a {
	color: var(--gilt-bright);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}

/* Two gradients: one running with the type, one rising from the foot of the
   hero. The second guarantees a floor under the text whatever image is used —
   a pale cover photograph would otherwise swallow the headline. */
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgba(0, 0, 0, calc(var(--hero-scrim, 60%) / 100)) 0%,
			rgba(0, 0, 0, calc(var(--hero-scrim, 60%) / 100 * 0.88)) 40%,
			rgba(0, 0, 0, calc(var(--hero-scrim, 60%) / 100 * 0.34)) 76%,
			rgba(0, 0, 0, 0.1) 100%
		),
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.78) 0%,
			rgba(0, 0, 0, 0.42) 30%,
			rgba(0, 0, 0, 0) 66%
		);
}

/* Type sitting on a photograph gets a soft shadow rather than relying on the
   image being dark enough. */
.hero.has-image .hero__title,
.hero.has-image .hero__subtitle,
.hero.has-image .hero__lead,
.hero.has-image .eyebrow__text,
.hero.has-image .hero__book-caption {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 28px rgba(0, 0, 0, 0.55);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: clamp(2rem, 6vw, 5rem);
	width: 100%;
}

.hero--high .hero__inner {
	padding-block: clamp(3.5rem, 9vw, 7rem);
}

.hero--medium .hero__inner,
.hero--low .hero__inner {
	padding-block: 0;
}

.hero__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 44rem;
}

.hero--align-center .hero__body {
	margin-inline: auto;
	text-align: center;
}

.hero--align-center .eyebrow {
	justify-content: center;
}

.hero__title {
	margin-top: var(--space-s);
	font-size: var(--step-4);
	font-variation-settings: "SOFT" 14, "WONK" 1;
	letter-spacing: -0.028em;
	line-height: 0.98;
	color: inherit;
	/* Long display words (book titles) must never clip past the viewport —
	   break mid-word as a last resort, hyphenate where the browser can. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.hero--high .hero__title {
	font-size: var(--step-4);
	font-weight: 400;
	letter-spacing: -0.035em;
}

.hero--low .hero__title {
	font-size: var(--step-3);
	font-style: italic;
	font-variation-settings: "SOFT" 40, "WONK" 1;
}

.hero__subtitle {
	margin-top: var(--space-2xs);
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-style: italic;
	font-variation-settings: "SOFT" 40, "WONK" 1;
	color: var(--gilt-bright);
	letter-spacing: -0.01em;
}

.hero--low .hero__subtitle {
	font-size: var(--step-1);
}

.hero__lead {
	margin-top: var(--space-m);
	font-size: var(--step-1);
	line-height: 1.55;
	max-width: 36rem;
	color: color-mix(in srgb, currentColor 88%, transparent);
}

.hero--high .hero__lead {
	font-size: var(--step-1);
}

.hero--low .hero__lead {
	font-size: var(--step-0);
	max-width: 44rem;
}

.hero--align-center .hero__lead {
	margin-inline: auto;
}

.hero__lead > * + * {
	margin-top: 0.75em;
}

/* Ink-on-paper heroes get the muted tone rather than a mix. */
.hero--on-ink .hero__lead {
	color: var(--text-muted);
}

/* The hero book, set like an object on a shelf. */
.hero__book {
	flex: 0 0 auto;
	width: clamp(9rem, 20vw, 15rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.hero__book-caption {
	color: inherit;
	opacity: 0.88;
}

.hero--high .hero__book-caption {
	color: var(--text-invert-muted);
}

/* --------------------------------------------------------------------------
    Product hero.
   Same two-column shelf as the shared hero, but on a light surface, and the
   column carries the purchase flow: title, subtitle, price, short
   description, add-to-cart, catalogue data. Everything here is derived from
   the product.
   -------------------------------------------------------------------------- */

.hero--product.hero--high {
	background: var(--paper);
	color: var(--ink);
	/* Content height only, never the full viewport. */
	min-height: 0;
}

/* The product hero starts at the top instead of sinking to the bottom. */
.hero--product {
	justify-content: flex-start;
}

.hero--product .hero__inner {
	align-items: flex-start;
}

@media (min-width: 1025px) {
	.hero--product .hero__inner {
		padding-top: var(--space-2xl);
	}
}

@media (max-width: 600px) {
	.hero--product.hero--high .hero__title {
		font-size: var(--step-3);
	}
}

/* The product cover gets more shelf than the shared hero's object. */
.hero--product .hero__book {
	width: clamp(17rem, 34vw, 30rem);
}

.hero--product .hero__subtitle {
	color: var(--gilt-deep);
}

.hero--product .hero__book-caption {
	color: var(--text-muted);
}

.hero--product .price {
	/* The row carries the rhythm now, so the badge can centre on the
	   price itself instead of price-plus-margin. */
	margin: 0;
	font-size: var(--step-2);
	color: var(--ink);
}

.hero--product .price del {
	color: var(--text-muted);
	opacity: 1;
}

.hero--product .price ins {
	text-decoration: none;
}

.hero--product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	margin-top: var(--space-m);
}

/* No quantity steppers on the product hero: one click buys one book. */
.hero--product .quantity {
	display: none;
}

/* The button also matches .woocommerce button.button.alt (0,3,1) in the later
   stylesheet, which ties this rule and wins on order — so this carries one
   extra class to settle it without !important. */
.hero--product form.cart .single_add_to_cart_button.button {
	width: 100%;
	background: var(--gilt);
	border-color: var(--gilt);
	color: var(--ink);
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.hero--product form.cart .single_add_to_cart_button.button:hover,
.hero--product form.cart .single_add_to_cart_button.button:focus-visible {
	border-color: var(--ink);
	color: var(--paper);
}

.hero--product .meta-list--hero {
	margin-top: var(--space-l);
	max-width: 34rem;
}

/* The cover travels with the column on tall screens instead of scrolling
   away with the hero. */
@media (min-width: 861px) {
	.hero--product .hero__book {
		position: sticky;
		top: calc(var(--header-height) + var(--space-l));
	}
}

/* --------------------------------------------------------------------------
    9. Metadata list — the library-catalogue device
   -------------------------------------------------------------------------- */

.meta-list {
	display: grid;
	gap: 0;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	line-height: 1.5;
}

.meta-list__row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding-block: 0.4rem;
	border-top: 1px solid var(--line);
}

.meta-list__row:first-child {
	border-top: 0;
}

.meta-list dt {
	flex: 0 0 7.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.meta-list dd {
	flex: 1 1 auto;
	margin: 0;
	letter-spacing: 0.02em;
	color: var(--text);
}

.meta-list--dark .meta-list__row {
	border-top-color: var(--line-invert);
}

.meta-list--dark dt {
	color: var(--text-invert-muted);
}

.meta-list--dark dd {
	color: var(--text-invert);
}

.meta-list--compact {
	font-size: var(--step--2);
}

.meta-list--compact .meta-list__row {
	padding-block: 0.3rem;
}

/* --------------------------------------------------------------------------
   10. Book covers — the signature object
   -------------------------------------------------------------------------- */

.book-cover {
	position: relative;
	isolation: isolate;
}

.book-cover__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 1px;
	/* Inset hairline first: pale artwork (sky, sand) must not melt into
	   the page — the edge of the cover stays readable all the way round. */
	box-shadow:
		inset 0 0 0 1px rgba(10, 20, 19, 0.14),
		0 1px 1px rgba(0, 0, 0, 0.14),
		0 2px 4px rgba(0, 0, 0, 0.1),
		0 22px 40px -20px rgba(0, 0, 0, 0.55);
	transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

/* A gilt edge down the spine, as if the cover were foil-blocked. */
.book-cover__spine {
	position: absolute;
	inset-block: 1px;
	left: 0;
	width: 3px;
	z-index: 2;
	background: linear-gradient(to right, rgba(221, 174, 92, 0.9), rgba(221, 174, 92, 0.15));
	opacity: 0;
	transition: opacity 0.4s var(--ease);
	pointer-events: none;
}

.book-cover:hover .book-cover__spine,
.book-card:hover .book-cover__spine {
	opacity: 1;
}

.book-cover--hero .book-cover__spine,
.book-cover--featured .book-cover__spine {
	opacity: 0.7;
}

.book-cover--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 3;
	border: 1px dashed var(--line-strong);
	background: var(--paper-sunken);
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

a:hover .book-cover__img,
.book-card__buy:hover ~ .book-cover__img {
	transform: translateY(-4px) rotate(-0.4deg);
	box-shadow:
		inset 0 0 0 1px rgba(10, 20, 19, 0.14),
		0 2px 2px rgba(0, 0, 0, 0.14),
		0 4px 8px rgba(0, 0, 0, 0.1),
		0 40px 60px -26px rgba(0, 0, 0, 0.6);
}

.book-cover--hero .book-cover__img {
	/* Clean product shot: no shadow, no edge, and no hover animation. The
	   full-ratio source fills the standard 4:5 presentation frame. */
	box-shadow: none;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	transition: none;
	transform: none;
}

.book-cover--hero:hover .book-cover__spine,
.book-cover--hero:focus-within .book-cover__spine {
	opacity: 0;
}

.book-cover--hero .book-cover__spine {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   11. Book cards and rows
   -------------------------------------------------------------------------- */

.books {
	display: grid;
	gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem);
}

.books--grid {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.books--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.books--count-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.books--count-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.books--rows {
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
}

.book-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.book-card .book-cover {
	max-width: 20rem;
}

.book-card__title {
	font-size: var(--step-2);
	line-height: 1.1;
}

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

.book-card__title a:hover {
	color: var(--gilt-deep);
}

.book-card__catalogue {
	margin-top: 0.5rem;
	color: var(--text-muted);
}

.book-card__tagline {
	margin-top: var(--space-2xs);
	color: var(--text-muted);
	font-style: italic;
}

.book-card__buy {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: var(--space-s);
	text-decoration: none;
	color: var(--gilt-deep);
}

.book-card__buy:hover {
	color: var(--ink);
}

/* Book row — the editorial two-column spread used on the books page. */
.book-row {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* The figure has to hold the same measure as its column, or the cover
   stretches to fill whatever space is left over. */
.book-row__figure {
	max-width: 17rem;
}

.book-row--flip .book-row__figure {
	order: 2;
}

.book-row__title {
	font-size: var(--step-3);
	line-height: 1.02;
}

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

.book-row__title a:hover {
	color: var(--gilt-deep);
}

.book-row__index {
	margin-bottom: var(--space-s);
	color: var(--gilt-deep);
}

.book-row__tagline {
	margin-top: var(--space-s);
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-style: italic;
	font-variation-settings: "SOFT" 40, "WONK" 1;
	color: var(--gilt-deep);
	line-height: 1.3;
}

.book-row .meta-list {
	margin-top: var(--space-l);
	max-width: 34rem;
}

.book-row .buy {
	margin-top: var(--space-m);
}

.book-row__excerpt {
	margin-top: var(--space-l);
	max-width: 38rem;
	font-size: var(--step-0);
}

.book-row--compact {
	/* Column 1 has to match the figure, or a flipped row squeezes its body. */
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

/* When the cover moves right, the narrow column moves with it — otherwise the
   body lands in the 11rem track and the catalogue wraps to four lines. */
.book-row--compact.book-row--flip {
	grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
}

.book-row--compact .book-row__figure {
	display: block;
	max-width: 11rem;
}

.book-row--compact .book-row__title {
	font-size: var(--step-2);
}

.book-row--compact .meta-list {
	margin-top: var(--space-s);
}

/* The single-book detail band. */
.book-detail {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.book-detail--featured {
	align-items: center;
}

.book-detail__title {
	font-size: var(--step-4);
	line-height: 1;
}

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

.book-detail__tagline {
	margin-top: var(--space-s);
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-style: italic;
	font-variation-settings: "SOFT" 40, "WONK" 1;
	color: var(--gilt-deep);
	line-height: 1.3;
}

.book-detail .meta-list {
	margin-top: var(--space-l);
	max-width: 32rem;
}

.book-detail__excerpt {
	margin-top: var(--space-l);
	max-width: 38rem;
	font-size: var(--step-0);
}

.book-detail .buy {
	margin-top: var(--space-l);
}

.book-detail__body .add_to_cart_button {
	margin-top: var(--space-l);
}

/* Buy links — a short list of shops, not a wall of buttons. */
.buy__label {
	margin-bottom: var(--space-2xs);
}

.buy__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--space-m);
}

.buy__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 0.15rem;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.buy__link:hover {
	color: var(--gilt-deep);
	border-bottom-color: var(--gilt);
}

.buy__link.is-primary {
	font-weight: 500;
}

.buy__note {
	font-size: var(--step--2);
	color: var(--text-faint);
}

.section--ink .buy__link,
.cta--ink .buy__link,
.cta--sunken .buy__link {
	color: var(--text-invert);
	border-bottom-color: var(--line-invert-strong);
}

.section--ink .buy__note,
.cta--ink .buy__note {
	color: var(--text-invert-muted);
}

/* --------------------------------------------------------------------------
   12. Feed and entries
   -------------------------------------------------------------------------- */

.feed {
	display: grid;
	gap: var(--space-2xl);
}

.feed--grid {
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: var(--space-xl) clamp(1.5rem, 3vw, 2.5rem);
}

.feed--with-sidebar {
	grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
	gap: var(--space-2xl);
	align-items: start;
}

.entry--card {
	display: grid;
	gap: var(--space-m);
	grid-template-areas:
		"media"
		"body";
	padding-top: var(--space-m);
	border-top: 1px solid var(--line);
}

.entry--card .thumb {
	grid-area: media;
}

.entry--card .entry__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.feed--grid .entry--card {
	border-top: 0;
	padding-top: 0;
}

.thumb {
	display: block;
	overflow: hidden;
	background: var(--paper-sunken);
}

.thumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

a:hover .thumb__img {
	transform: scale(1.03);
}

.thumb--card {
	aspect-ratio: 10 / 7;
}

.entry__title {
	font-size: var(--step-2);
	line-height: 1.12;
}

.entry__title a {
	text-decoration: none;
	color: var(--ink);
}

.entry__title a:hover {
	color: var(--gilt-deep);
}

.entry__excerpt {
	color: var(--text-muted);
	font-size: var(--step-0);
	max-width: 36rem;
}

.entry__more {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: var(--space-2xs);
	align-self: flex-start;
	text-decoration: none;
	color: var(--gilt-deep);
}


.entry__meta,
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.entry__kind {
	color: var(--gilt-deep);
}

.entry__excerpt + .entry__more {
	margin-top: var(--space-s);
}

.entry--result {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding-block: var(--space-m);
	border-top: 1px solid var(--line);
}

.entry--result .entry__excerpt {
	color: var(--text-muted);
}

.entry--single .entry__content {
	max-width: 40rem;
}

.entry__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-l);
}

.entry__tags a {
	display: inline-block;
	padding: 0.3em 0.8em;
	border: 1px solid var(--line-strong);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-muted);
}

.entry__tags a:hover {
	border-color: var(--gilt);
	color: var(--gilt-deep);
}

/* Pagination */
.pagination {
	margin-top: var(--space-2xl);
	padding-top: var(--space-m);
	border-top: 1px solid var(--line);
}

.pagination__list,
.pagination .nav-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid transparent;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--text-muted);
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.pagination .page-numbers:hover {
	color: var(--ink);
	border-color: var(--line-strong);
}

.pagination .page-numbers.current {
	color: var(--ink);
	border-color: var(--gilt);
	background: color-mix(in srgb, var(--gilt) 10%, transparent);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Post navigation */
.post-nav {
	margin-top: var(--space-2xl);
	padding-top: var(--space-l);
	border-top: 1px solid var(--line);
}

.post-nav__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--space-l);
}

.post-nav__item--next {
	text-align: right;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	text-decoration: none;
	color: var(--ink);
}

.post-nav__link:hover .post-nav__title {
	color: var(--gilt-deep);
}

.post-nav__title {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.2;
	transition: color 0.2s var(--ease);
}

/* --------------------------------------------------------------------------
   13. Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: var(--space-s) var(--gutter) 0;
}

.breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-right: 0.5em;
	color: var(--line-strong);
}

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

.breadcrumbs a:hover {
	color: var(--gilt-deep);
}

.breadcrumbs [aria-current="page"] {
	color: var(--text);
}

/* --------------------------------------------------------------------------
   14. Search
   -------------------------------------------------------------------------- */

.search-bar {
	max-width: 34rem;
}

.search-bar--wide {
	max-width: 42rem;
}

.search-form__field {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--line-strong);
	transition: border-color 0.25s var(--ease);
}

.search-form__field:focus-within {
	border-bottom-color: var(--gilt);
}

.search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 0.5rem 0.75rem 0;
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-variation-settings: "SOFT" 16, "WONK" 1;
	color: var(--ink);
}

.search-form__input::placeholder {
	color: var(--text-faint);
}

.search-form__input:focus {
	outline: none;
}

.search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem;
	color: var(--text-muted);
	transition: color 0.2s var(--ease);
}

.search-form__submit:hover {
	color: var(--gilt-deep);
}

input[type="search"]::-webkit-search-cancel-button {
	appearance: none;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	margin-top: auto;
	background: var(--ink);
	color: var(--text-invert);
	padding-block: var(--space-2xl) var(--space-l);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--space-xl) clamp(2rem, 5vw, 4rem);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-footer__lead .site-footer__social {
	margin-top: var(--space-m);
}

/* Inside the lead column the list flows with the contact block: full
   width, left aligned. (The base .social carries justify-self: end from
   its days as a footer grid item, which would shrink-wrap it right.) */
.site-footer__lead .social {
	justify-self: start;
}

.site-footer .site-title {
	color: var(--text-invert);
	font-size: var(--step-2);
}

.site-footer .site-title__link {
	color: var(--text-invert);
}

/* The dark logo plate is inverted for the black footer. */
.site-footer .custom-logo,
.site-footer .secondary-logo {
	filter: invert(1);
}

.site-footer .site-title__tagline {
	color: var(--text-invert-muted);
	margin-top: 0.25em;
}

.site-footer__contact {
	list-style: none;
	margin-top: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.site-footer__contact a {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-style: italic;
	font-variation-settings: "SOFT" 40, "WONK" 1;
	color: var(--gilt-bright);
	text-decoration: none;
	overflow-wrap: break-word;
}

.site-footer__contact a:hover {
	color: var(--text-invert);
}

.site-footer__agent {
	margin-top: var(--space-m);
	color: var(--text-invert-muted);
}

.footer-nav {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.footer-nav a {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-invert);
}

.footer-nav a:hover {
	color: var(--gilt-bright);
}

.social {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	justify-self: end;
}

.social__link {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-invert-muted);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.social__link::before {
	content: "";
	width: 1.5rem;
	height: 1px;
	background: var(--gilt);
	transform: scaleX(0.5);
	transform-origin: left center;
	transition: transform 0.25s var(--ease-out);
}

.social__link:hover {
	color: var(--text-invert);
}

.social__link:hover::before {
	transform: scaleX(1);
}

/* Icon socials (Instagram): no dash, just the mark. */
.social__link--icon::before {
	content: none;
}

.social__link--icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.site-footer__press {
	grid-column: 1 / -1;
	padding-top: var(--space-l);
	border-top: 1px solid var(--line-invert);
	max-width: 46rem;
}

.site-footer__press p {
	margin-top: var(--space-2xs);
	color: var(--text-invert-muted);
	font-size: var(--step--1);
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-m) var(--space-xl);
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: var(--space-xl) auto 0;
	padding: var(--space-m) var(--gutter) 0;
	border-top: 1px solid var(--line-invert);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.08em;
	color: var(--text-invert-muted);
}

.site-footer__colophon {
	margin-left: auto;
}

.legal-nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
}

.legal-nav a {
	text-decoration: none;
	color: var(--text-invert-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.legal-nav a:hover {
	color: var(--gilt-bright);
}

.payment-icons {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

/* Chained under .site-footer on purpose: WooCommerce's own
   `.woocommerce img { height: auto }` outranks a lone class and would
   blow the icons up to full size on shop pages. */
.site-footer .payment-icons {
	margin-top: var(--space-m);
}

.site-footer .payment-icons__item {
	background: #e3e3e3;
	border-radius: 3px;
	width: 3.25rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.45rem;
}

.site-footer .payment-icons__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(1);
}

.site-footer__colophon a {
	text-decoration: none;
	color: var(--text-invert-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.site-footer__colophon a:hover {
	color: var(--gilt-bright);
}

/* --------------------------------------------------------------------------
   16. Empty states, notices
   -------------------------------------------------------------------------- */

.no-results {
	max-width: 34rem;
	padding-block: var(--space-l);
}

.no-results__lead {
	margin-top: var(--space-m);
	font-size: var(--step-1);
	color: var(--text-muted);
}

.no-results .btn-row {
	margin-top: var(--space-l);
}

.editor-notice {
	padding: var(--space-m);
	border: 1px dashed var(--line-strong);
	background: color-mix(in srgb, var(--gilt) 7%, transparent);
	color: var(--text-muted);
	font-size: var(--step--1);
}

.editor-notice a {
	color: var(--gilt-deep);
}

.not-found {
	max-width: 40rem;
}

.not-found__body {
	margin-top: var(--space-m);
	font-size: var(--step-1);
	color: var(--text-muted);
}

.not-found .search-bar {
	margin-top: var(--space-l);
}

.not-found .btn-row {
	margin-top: var(--space-l);
}

.not-found__books {
	margin-top: var(--space-2xl);
	padding-top: var(--space-l);
	border-top: 1px solid var(--line);
}

.contact {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.contact__line {
	margin-top: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.contact__line a {
	font-family: var(--font-display);
	font-size: var(--step-0);
	text-decoration: none;
	color: var(--ink);
	overflow-wrap: break-word;
}

.contact__line a:hover {
	color: var(--gilt-deep);
}

.contact .social {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-m);
	justify-self: start;
	margin-top: var(--space-l);
}

.contact .social__link {
	color: var(--text-muted);
}

.contact .social__link:hover {
	color: var(--gilt-deep);
}

/* Comments */
.section--comments {
	padding-top: 0;
}

.comments__title {
	font-size: var(--step-2);
	margin-bottom: var(--space-m);
}

.comments__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	margin-bottom: var(--space-l);
}

.comment-body {
	padding-bottom: var(--space-m);
	border-bottom: 1px solid var(--line);
	font-size: var(--step-0);
}

.comment-author {
	font-family: var(--font-display);
	font-size: var(--step-1);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	margin-top: 0.2rem;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.06em;
	color: var(--text-faint);
}

.comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--line-strong);
	background: var(--paper-raised);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	transition: border-color 0.2s var(--ease);
}

input:focus,
textarea:focus {
	border-color: var(--gilt);
	outline: none;
}

textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.55;
}

.comment-form p {
	margin-bottom: var(--space-m);
}

.comment-notes,
.form-allowed-tags {
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   17. Under construction
   -------------------------------------------------------------------------- */

/* One page, no navigation: the site name sits above a hairline, the headline
   under it, and the way to get in touch last. Left-aligned like every other
   heading on the site, and held to a reading measure so it does not strand a
   single line across a wide screen. */
.under-construction {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: var(--space-2xl);
}

.under-construction__inner {
	width: 100%;
}

.under-construction__head {
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid var(--line);
}

.under-construction__body {
	max-width: 46rem;
	padding-top: var(--space-xl);
}

.under-construction__title {
	margin-top: var(--space-s);
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--ink);
	text-wrap: balance;
}

.under-construction__contact {
	margin-top: var(--space-xl);
	padding-top: var(--space-l);
	border-top: 1px solid var(--line);
}

.under-construction__contact-list {
	margin-top: var(--space-s);
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.02em;
}

.under-construction__contact-list a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.under-construction__contact-list a:hover,
.under-construction__contact-list a:focus-visible {
	color: var(--gilt-deep);
	border-color: var(--gilt);
}

/* ala_social_links() is built for the ink footer; here it sits on paper. */
.under-construction .social {
	margin-top: var(--space-m);
	justify-self: start;
	gap: var(--space-2xs);
}

.under-construction .social__link {
	color: var(--text-muted);
}

.under-construction .social__link:hover {
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
	position: absolute !important;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.alignleft {
	float: left;
	margin: 0.4rem 1.75rem 1.25rem 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1.25rem 1.75rem;
}

.aligncenter {
	margin-inline: auto;
}

.alignwide {
	width: min(100% + 2 * var(--gutter), calc(var(--container) + 2 * var(--gutter)));
	margin-inline: calc(-1 * var(--gutter));
	max-width: none;
}

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

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

.wp-caption-text,
.wp-block-image figcaption {
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.08em;
	color: var(--text-faint);
}

.sticky .entry__title::before {
	content: "— ";
	color: var(--gilt-deep);
}

.bypostauthor > .comment-body .fn::after {
	content: " ✓";
	color: var(--gilt-deep);
}

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.7s var(--ease-out),
		transform 0.7s var(--ease-out);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.books--count-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The hamburger takes over at 1275px: desktop nav and secondary header
   logo give way to the offcanvas. */
@media (max-width: 1275px) {
	.ala-nav {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
	}
}

@media (max-width: 1024px) {
	:root {
		--space-3xl: 5rem;
		--space-4xl: 7rem;
	}

	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.social {
		justify-self: start;
	}
}

@media (max-width: 860px) {
	.book-detail,
	.book-row,
	.contact,
	.feed--with-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.book-row--flip .book-row__figure {
		order: 0;
	}

	.book-row__figure,
	.book-detail__figure {
		max-width: 15rem;
	}

	.book-detail--featured {
		gap: var(--space-xl);
	}

	.books--count-3,
	.books--count-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Once the hero stacks, the cover has no shelf to sit on — the image
	   takes over as the backdrop, so the floating book is removed rather
	   than squeezed under the text. The product hero is the exception: the
	   cover is the goods, so it stays and moves above the title. */
	.hero__book {
		display: none;
	}

	.hero--product .hero__book {
		display: flex;
		order: -1;
		width: clamp(9rem, 46vw, 14rem);
		max-width: 100%;
		margin-inline: auto;
	}
}

@media (max-width: 600px) {
	:root {
		--header-height: 3.75rem;
		--space-3xl: 3.75rem;
		--space-4xl: 5rem;
	}

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

	body {
		font-size: var(--step-0);
	}

	/* A long author name should still sit on one line beside the toggle. */
	.site-title {
		font-size: 1.0625rem;
		letter-spacing: -0.01em;
	}

	.site-title__tagline {
		font-size: 0.625rem;
		letter-spacing: 0.08em;
	}

	.ala-header__inner {
		gap: var(--space-s);
	}

	.nav-toggle__label {
		display: none;
	}

	.hero--high {
		min-height: calc(92svh - var(--header-height));
	}

	.hero--medium {
		min-height: 0;
	}

	.books--count-2,
	.books--count-3,
	.books--count-4,
	.books--grid,
	.feed--grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.books--grid .book-card {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-m);
	}

	.books--grid .book-card .book-cover {
		flex: 0 0 6.5rem;
		max-width: 6.5rem;
	}

	.section__head {
		align-items: flex-start;
	}

	.meta-list__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
	}

	.meta-list dt {
		flex: 0 0 auto;
	}

	.btn-row--hero .btn,
	.btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}



	.site-footer__base {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-s);
	}

	.site-footer__base .legal-nav {
		order: -1;
		flex-direction: column;
		gap: 0.4rem;
	}

	.site-footer__colophon {
		margin-left: 0;
	}

	.post-nav__item--next {
		text-align: left;
	}

	.hero__media .hero__image {
		object-position: 62% 28%;
	}
}

/* --------------------------------------------------------------------------
   21. Motion preferences and print
   -------------------------------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
	}

	.btn::after {
		display: none;
	}

	a:hover .book-cover__img,
	.book-cover--hero {
		transform: none;
	}
}

@media print {
	.ala-header,
	.ala-mobile-nav,
	.site-footer,
	.btn,
	.pagination,
	.post-nav,
	.breadcrumbs {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.section {
		padding-block: 1.5rem;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.book-cover__img {
		box-shadow: none;
	}
}

/* Fallback for browsers without color-mix. */
@supports not (color: color-mix(in srgb, white, black)) {
	.ala-header {
		background: rgba(255, 255, 255, 0.92);
	}

	.ala-header.is-stuck {
		background: var(--paper);
	}

	.hero__lead {
		color: var(--text-muted);
	}

	.section--ink .hero__lead {
		color: var(--text-invert-muted);
	}

	.editor-notice {
		background: #f6f1e9;
	}

	.pagination .page-numbers.current {
		background: #f4e6cd;
	}
}