/*
Theme Name: Bookshelf
Description: Web-native personal library with a dynamic book-cover shelf and long-form notes.
Version: 0.12.4
Requires PHP: 8.2
Text Domain: bookshelf
ABOUTME: Custom block theme for the book-notes blog's shelf, posts, and utilities.
ABOUTME: Uses web-native responsive compositions while keeping the restrained reading voice.
*/

/* Every book title in a list (shelf, topics, search, pager) shares one size. */
:root {
	--list-title-size: clamp(1rem, 1.3vw, 1.125rem);
	/* The side gutter shared by the header, main content and footer, so the
	   name, the covers and the forms start on one edge. */
	--site-gutter: clamp(1.25rem, 3vw, 2.5rem);
}

@media (max-width: 782px) {
	:root {
		--site-gutter: 1.25rem;
	}
}

/* Squared everything: ink does not glow and paper does not float. */
button,
input,
img,
figure,
.wp-block-button__link {
	border-radius: 0;
}

/* ---------- Masthead: the highlighted name ---------- */

.wp-block-site-title a {
	display: inline-block;
	background-image: linear-gradient(transparent 42%, var(--wp--preset--color--accent) 42%, var(--wp--preset--color--accent) 92%, transparent 92%);
	color: var(--wp--preset--color--contrast);
	padding: 0.1em 0.15em;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-site-title a:hover,
.wp-block-site-title a:focus {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

header > .site-header-shell {
	padding-left: var(--site-gutter);
	padding-right: var(--site-gutter);
}

/* The folio line under the compact top header. */
header .site-header-inner {
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	padding-bottom: 1rem;
}

/* The header is one two-column grid: the name and the links share the first
   line on one baseline, the tagline the second. */
header .wp-block-group.site-header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 1.5rem;
	row-gap: 0.2rem;
}

/* The nameplate stays identical on every route: stamp, then promise. Its two
   lines take their places in the header grid. */
header .wp-block-group.site-nameplate {
	display: contents;
}

header .wp-block-site-title {
	grid-area: 1 / 1;
}

.site-tagline {
	grid-area: 2 / 1 / auto / -1;
}

.site-tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--literata);
	font-style: italic;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* Both cover sources stay in view; the one on screen is underlined in ink. */
.cover-source-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cover-source-toggle__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.cover-source-toggle a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	color: var(--wp--preset--color--muted);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.cover-source-toggle a[aria-current] {
	color: var(--wp--preset--color--contrast);
	text-decoration-style: solid;
	text-decoration-thickness: 2px;
}

.cover-source-toggle a:not([aria-current]):hover,
.cover-source-toggle a:not([aria-current]):focus-visible {
	color: var(--wp--preset--color--contrast);
	text-decoration-style: solid;
}

.cover-source-toggle a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Primary navigation stays deliberately small beside the nameplate. */
.site-nav {
	grid-area: 1 / 2;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.site-nav a {
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
	color: var(--wp--preset--color--contrast);
}

.wp-block-site-title a:focus-visible,
.site-nav a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.site-nav a[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.page-heading {
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.page-heading > .wp-block-post-title {
	margin: 0;
}

.library-search {
	flex: 0 0 auto;
	margin-left: auto;
}

/* The Library magnifier is a full tap target while remaining visually quiet. */
.site-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	box-sizing: border-box;
	width: auto;
	height: 2.75rem;
	padding: 0 0.35rem;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.site-search-toggle:hover,
.site-search-toggle:focus {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.site-search-toggle svg {
	width: 18px;
	height: 18px;
}

/* The search modal: a Spotlight-style panel high on a dimmed page. Opens and
   closes with :target (CSS only); a small script adds focus/Escape/Cmd-K. */
.site-search-modal {
	display: none;
}

.site-search-modal:target {
	display: grid;
	place-items: start center;
	position: fixed;
	inset: 0;
	z-index: 9999;
	isolation: isolate;
	box-sizing: border-box;
	max-width: none;
	margin: 0;
	overflow: auto;
}

.site-search-modal__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(26, 22, 17, 0.55);
	cursor: default;
}

.site-search-modal__panel {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	box-sizing: border-box;
	width: min(calc(100vw - 2rem), 44rem);
	margin: clamp(4rem, 14vh, 8rem) auto 1rem;
	padding: 0.65rem 0.75rem 0.65rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
}

.site-search-modal__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
}

.site-search-modal__icon svg {
	width: 24px;
	height: 24px;
}

.spotlight-search {
	flex: 1 1 auto;
	min-width: 0;
}

.spotlight-search__input {
	box-sizing: border-box;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0.85rem 0.25rem;
	font-family: var(--wp--preset--font-family--literata);
	font-size: clamp(1rem, 4vw, 1.5rem);
	color: var(--wp--preset--color--contrast);
}

.spotlight-search__input:focus {
	outline: 0;
}

.site-search-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.site-search-modal__close:hover,
.site-search-modal__close:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.site-search-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.site-search-modal__close svg {
	width: 1.125rem;
	height: 1.125rem;
}

.has-site-search {
	overflow: hidden;
}

/* ---------- Homepage shelf: authored compositions ---------- */

.shelf-main {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* The site's wide width (theme.json wideSize), shared with the header so the
   name and the covers start on one edge. The curated compositions are
   proportioned for it: at 1100px the lead cover and its support covers end on
   one line. */
.shelf-view {
	width: min(100%, 68.75rem);
	margin: 0 auto;
	container-type: inline-size;
}

.shelf-main > .shelf-view {
	max-width: 68.75rem;
}

.shelf-toolbar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 1rem auto;
}

.curated-shelf {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.curated-shelf > :first-child {
	grid-column: 1 / -1;
}

.shelf-card,
.shelf-card article,
.shelf-card__figure {
	min-width: 0;
	margin: 0;
}

.shelf-card__cover {
	display: block;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	transition: border-color 150ms ease;
}

.shelf-card__cover:hover,
.shelf-card__cover:focus-visible {
	border-color: var(--wp--preset--color--accent);
}

.shelf-card__cover:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.shelf-card__image {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
}

.shelf-card__figure figcaption {
	margin-top: 0.75rem;
}

.shelf-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--list-title-size);
	font-weight: 550;
	line-height: 1.25;
}

.shelf-card--lead .shelf-card__title {
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
}

.shelf-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.shelf-card__title a:hover,
.shelf-card__title a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

@container (min-width: 40rem) {
	.curated-shelf {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: clamp(1.75rem, 3vw, 3rem) clamp(0.875rem, 1.8vw, 1.5rem);
	}

	.curated-shelf--layout-01 {
		grid-template-columns: repeat(21, minmax(0, 1fr));
	}

	.curated-shelf--layout-01 > :nth-child(1) {
		grid-column: 1 / span 11;
		grid-row: 1 / span 2;
	}

	.curated-shelf--layout-01 > :nth-child(2),
	.curated-shelf--layout-01 > :nth-child(4) {
		grid-column: 12 / span 5;
	}

	.curated-shelf--layout-01 > :nth-child(3),
	.curated-shelf--layout-01 > :nth-child(5) {
		grid-column: 17 / span 5;
	}

	.curated-shelf--layout-01 > :nth-child(2),
	.curated-shelf--layout-01 > :nth-child(3) {
		grid-row: 1;
	}

	.curated-shelf--layout-01 > :nth-child(4),
	.curated-shelf--layout-01 > :nth-child(5) {
		grid-row: 2;
	}

	.curated-shelf--layout-01 > :nth-child(n + 6) {
		grid-column: span 7;
	}

	.curated-shelf--layout-06 > .shelf-card {
		grid-column: span 3;
	}
}

@media (max-width: 22rem) {
	.curated-shelf {
		grid-template-columns: minmax(0, 1fr);
	}

	.curated-shelf > .shelf-card {
		grid-column: auto;
	}

}

/* ---------- Latest shelf and archive grids ---------- */

/* Topic pages: a label names the kind of page, the title names the topic. */
.archive-kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

main > .archive-kicker + .wp-block-query-title {
	margin-top: 0.35rem;
}

.book-grid .wp-block-post-template {
	gap: 3rem 1.5rem;
}

.book-grid--latest .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Archive covers stay shelf-sized on phones: two-up like the homepage, one-up only when tiny. */
@media (max-width: 40rem) {
	.book-grid:not(.book-grid--latest) .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 22rem) {
	.book-grid:not(.book-grid--latest) .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.book-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
}

.book-grid .wp-block-post-title {
	margin-top: 0.75rem;
	font-size: var(--list-title-size);
	font-weight: 550;
	line-height: 1.25;
}

.book-grid .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.book-grid .wp-block-post-title a:hover,
.book-grid .wp-block-post-title a:focus {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* Byline under grid tiles and post titles: the margin voice. */
.book-byline {
	margin-top: 0.25rem;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-title + .book-byline,
.shelf-card__title + .book-byline {
	margin-block-start: 0.25rem;
	line-height: 1.4;
}

.single-post main > .wp-block-post-title {
	margin-block-end: 0;
}

/* The display title's descenders need air before the byline. */
.single-post main > .wp-block-post-title + .book-byline {
	margin-block-start: 0.75rem;
}

/* ---------- Single post ---------- */

/* Every interpretation stays on the page. The sequence builds to its primary,
   and the publisher cover closes the row at the same size, for comparison. */
.book-covers {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: var(--wp--preset--spacing--50, 2rem) 0;
}

.book-covers figure {
	margin: 0;
}

.book-covers > .book-cover {
	flex: 0 1 220px;
}

.book-covers--variants {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.book-covers--variants > .book-cover {
	width: 100%;
	max-width: 11rem;
}

.book-covers img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
}

.book-covers figcaption {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.book-covers {
		gap: 1rem;
	}

	.book-covers .book-cover {
		/* Two covers plus a 1rem gap fill the row exactly, never overflowing. */
		flex-basis: calc(50% - 0.5rem);
	}

	.book-covers--variants > .book-cover {
		max-width: none;
	}
}

@media (max-width: 22rem) {
	.book-covers--variants {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A cover is still a direct full-image link without JavaScript. With support,
   one native dialog becomes the restrained fullscreen browser for the set. */
.book-cover__zoom {
	display: block;
	cursor: zoom-in;
}

.has-cover-browser {
	overflow: hidden;
}

.cover-browser {
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	margin: 0;
	padding:
		max(1rem, env(safe-area-inset-top))
		max(1rem, env(safe-area-inset-right))
		max(1rem, env(safe-area-inset-bottom))
		max(1rem, env(safe-area-inset-left));
	border: 0;
	background-color: #26221C;
	color: var(--wp--preset--color--base);
	overflow: hidden;
}

.cover-browser::backdrop {
	background: #26221C;
}

.cover-browser__stage {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
	grid-template-rows: minmax(0, 1fr);
	align-items: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	width: 100%;
	height: 100%;
}

.cover-browser button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 1px solid rgba(250, 248, 241, 0.45);
	background: transparent;
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.cover-browser button:hover,
.cover-browser button:focus-visible {
	border-color: var(--wp--preset--color--base);
	background: rgba(250, 248, 241, 0.08);
}

.cover-browser button:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

.cover-browser button:disabled {
	visibility: hidden;
}

.cover-browser button svg {
	width: 1.5rem;
	height: 1.5rem;
}

.cover-browser__close {
	position: absolute;
	z-index: 2;
	top: max(1rem, env(safe-area-inset-top));
	right: max(1rem, env(safe-area-inset-right));
}

.cover-browser__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	height: 100%;
	margin: 0;
}

.cover-browser__figure img {
	display: block;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: calc(100% - 3rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--wp--preset--color--hairline);
}

.cover-browser__status {
	min-height: 1.5rem;
	margin-top: 0.75rem;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: rgba(250, 248, 241, 0.78);
}

@media (max-width: 40rem) {
	.cover-browser__stage {
		grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
		gap: 0.35rem;
	}

	.cover-browser button {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (orientation: landscape) and (max-height: 36rem) {
	.cover-browser__stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) 2.75rem;
	}

	.cover-browser__previous,
	.cover-browser__next {
		position: absolute;
		bottom: max(1rem, env(safe-area-inset-bottom));
	}

	.cover-browser__previous {
		left: calc(50% - 3.1rem);
	}

	.cover-browser__next {
		right: calc(50% - 3.1rem);
	}
}

/* The flyleaf voice: reflection paragraphs before the Notes heading. */
.wp-block-post-content > p:has(~ h2.wp-block-heading) {
	font-style: italic;
	font-size: 1.1875rem;
	line-height: 1.6;
}

/* Section headings become kickers: furniture, not headlines. */
.wp-block-post-content > h2.wp-block-heading,
.book-links h2 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--60, 3rem);
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.wp-block-post-content > h2.wp-block-heading::after,
.book-links h2::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* ---------- The notes: numbered verses (contract in CLAUDE.md) ---------- */

.wp-block-post-content {
	counter-reset: note;
}

.book-note {
	counter-increment: note;
	position: relative;
	margin: 3.5rem 0;
	padding: 0.125rem 0;
	border: none;
	font-size: 1.375rem;
	line-height: 1.5;
	font-style: normal;
}

.book-note p {
	margin: 0 0 0.75rem;
}

.book-note p:last-of-type {
	margin-bottom: 0;
}

/* The numeral IS the permalink you grab: the ¶ collapses, the counter shows. */
.book-note .note-anchor {
	position: absolute;
	left: -3.25rem;
	top: 0.3rem;
	font-size: 0;
	text-decoration: none;
}

.book-note .note-anchor::after {
	content: counter(note, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
}

/* The numeral stays plain ink, even on hover: the highlighter is kept for the
   name and for the note a link lands on. */
.book-note .note-anchor:hover,
.book-note .note-anchor:focus-visible {
	text-decoration: none;
}

/* Narrow screens have no margin: the numeral sits above the passage. */
@media (max-width: 56rem) {
	.book-note {
		margin-top: 4rem;
	}

	.book-note .note-anchor {
		left: 0;
		top: -1.75rem;
	}
}

/* Landing on #note-N folds the paper open to that column. */
.book-note:target {
	background-color: var(--wp--preset--color--wash);
	padding: 0.75rem;
	margin-left: -0.75rem;
	margin-right: -0.75rem;
}

.book-note:target .note-anchor {
	left: -2.5rem;
	top: 1rem;
}

@media (max-width: 56rem) {
	.book-note:target .note-anchor {
		left: 0.75rem;
		top: -1.75rem;
	}
}

/* ---------- Metadata: the catalog card ---------- */

.book-meta {
	margin: var(--wp--preset--spacing--50, 2rem) 0;
	padding: 0;
	border-top: 2px solid var(--wp--preset--color--contrast);
	font-size: 1rem;
}

.book-meta__row {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.book-meta__row dt {
	flex: 0 0 8rem;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.book-meta__row dd {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Links & references ---------- */

.book-links {
	margin-top: var(--wp--preset--spacing--50, 2rem);
}

/* ---------- Pager: the books read just before and after ---------- */

/* Sized by its own column, not the viewport, so it fits whatever column holds it. */
.book-pager {
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--60, 3rem);
	padding-top: 1.25rem;
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.book-pager__link {
	display: flex;
	flex: 1 1 15rem;
	align-items: flex-start;
	gap: 1rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Next always holds the right-hand side, even on the oldest book. */
.book-pager__link--next {
	flex-direction: row-reverse;
	text-align: right;
}

.book-pager__cover {
	flex: 0 0 4.5rem;
	width: 4.5rem;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
}

.book-pager__text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.book-pager__kicker {
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.book-pager__title {
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--list-title-size);
	font-weight: 550;
	line-height: 1.25;
}

/* The same margin voice as every other byline. */
.book-pager__author {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.875rem;
}

.book-pager__link:hover .book-pager__title,
.book-pager__link:focus-visible .book-pager__title {
	color: var(--wp--preset--color--contrast);
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 0.45em;
	text-underline-offset: -0.3em;
	text-decoration-skip-ink: none;
}

.book-pager__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* When the two books stack, both read from the left; the kicker carries direction. */
@container (width < 31.5rem) {
	.book-pager__link--next {
		flex-direction: row;
		text-align: left;
	}

	.book-pager__cover {
		flex-basis: 3.75rem;
		width: 3.75rem;
	}
}

/* ---------- The ledger: ten years of reading as one column of type ---------- */

.book-ledger {
	margin: var(--wp--preset--spacing--50, 2rem) 0;
}

.book-ledger__year {
	margin-top: var(--wp--preset--spacing--60, 3rem);
}

.book-ledger__year:first-child {
	margin-top: 0;
}

.book-ledger__heading {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.25rem;
	font-weight: 500;
}

.book-ledger__count {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.book-ledger__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A row is a small cover, then the title/author stack, then the finish date. */
.book-ledger__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: 1rem;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.book-ledger__cover {
	display: block;
	width: 40px;
	height: 60px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--hairline);
}

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

.book-ledger__cover--empty {
	background-color: var(--wp--preset--color--hairline);
}

.book-ledger__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.book-ledger__title {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.book-ledger__title:hover,
.book-ledger__title:focus {
	color: var(--wp--preset--color--contrast);
}

.book-ledger__author {
	color: var(--wp--preset--color--muted);
	font-style: italic;
	font-size: 0.9375rem;
}

.book-ledger__when {
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

/* ---------- Newsletter signup ---------- */

/* Below rail widths every page ends with the full form, on the same 680px
   column as the notes. */
.site-footer {
	box-sizing: content-box;
	max-width: 680px;
	margin: var(--wp--preset--spacing--60, 3rem) auto 0;
	padding: var(--wp--preset--spacing--50, 2.5rem) var(--site-gutter);
}

.subscribe-section {
	display: grid;
	grid-template-columns: minmax(10rem, 0.7fr) minmax(15rem, 1fr);
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.subscribe-section__intro {
	min-width: 0;
}

.subscribe-section__form {
	min-width: 0;
}

.subscribe-section__title {
	margin: 0;
	font-size: 1rem !important;
	line-height: 1.3;
}

.subscribe-section__intro p {
	display: none;
}

/* The form is unboxed (a written-on line); the one filled Subscribe button
   carries the shape and marks this as the primary act. */
.subscribe-form {
	display: flex;
	align-items: stretch;
	margin: 0;
}

.subscribe-form__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	box-sizing: border-box;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	padding: 0.55em 0.25em;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.subscribe-form__button {
	flex: 0 0 auto;
	min-height: 2.75rem;
	margin-left: 0.75rem;
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.55em 1.25em;
	font-size: 0.9375rem;
	cursor: pointer;
}

@media (max-width: 30rem) {
	.subscribe-section {
		grid-template-columns: minmax(0, 1fr);
	}
}

.subscribe-form__button:hover,
.subscribe-form__button:focus {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.subscribe-status {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.subscribe-status:empty {
	display: none;
}

/* Focus rings on the newsletter and the modal search (WCAG 2.4.7). */
.subscribe-form__input:focus-visible,
.subscribe-form__button:focus-visible,
.spotlight-search .wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Keep placeholders at full muted so they never fall below contrast. */
.subscribe-form__input::placeholder,
.spotlight-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

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

/* ---------- Search results ---------- */

/* Quiet, readable label so the results, not the query echo, carry the page. */
.search-heading {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

.search-results .wp-block-post {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.search-result__cover {
	flex: 0 0 auto;
	margin: 0;
}

.search-result__cover img {
	display: block;
	box-sizing: border-box;
	width: 3.25rem;
	height: 4.875rem;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--hairline);
}

.search-result__text {
	min-width: 0;
}

.search-result__text .wp-block-post-title {
	margin: 0;
	font-size: var(--list-title-size);
	font-weight: 550;
	line-height: 1.25;
}

.search-result__text .book-byline {
	margin-top: 0.15rem;
}

@media print {
	/* Forms are useless on paper: the footer is only the newsletter now, so the
	   whole footer (and its rule) drops out in print. */
	.site-footer {
		display: none;
	}
}

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

/* Main content keeps the site gutter so nothing (title, covers, meta, cover
   grids) touches the screen edge. */
main.wp-block-group {
	padding-left: var(--site-gutter);
	padding-right: var(--site-gutter);
}

/* On phones and tablets the header's rule runs edge to edge, so the gutter
   moves inside it. */
@media (max-width: 782px) {
	header > .site-header-shell {
		padding-left: 0;
		padding-right: 0;
	}

	header .wp-block-group.alignwide {
		padding-left: var(--site-gutter);
		padding-right: var(--site-gutter);
	}
}

@media (max-width: 22rem) {
	.subscribe-form {
		flex-direction: column;
		gap: 0.75rem;
	}

	.subscribe-form__button {
		margin-left: 0;
	}
}

/* ---------- Wide screens: the navigation rail ---------- */

/* Below rail widths the header carries no form; the footer does. */
.site-rail-subscribe {
	display: none;
}

/* Where the screen holds a 14rem rail beside the full wide column (14rem +
   the gap and page padding + 68.75rem = 90rem), the header becomes a sticky
   left rail with the newsletter form, so covers and notes keep the size they
   have under the top header. */
@media (min-width: 90rem) {
	.wp-site-blocks {
		display: grid;
		grid-template-columns: 14rem minmax(0, 1fr);
		column-gap: clamp(1.5rem, 3vw, 3rem);
		box-sizing: border-box;
		width: min(100%, 100rem);
		margin: 0 auto;
		padding: clamp(1.25rem, 2.5vw, 2.5rem);
	}

	.wp-site-blocks > header {
		grid-column: 1;
		grid-row: 1 / span 2;
		position: sticky;
		top: 1.25rem;
		align-self: start;
		max-height: calc(100vh - 2.5rem);
		overflow-y: auto;
	}

	.wp-site-blocks > main,
	.wp-site-blocks > footer {
		grid-column: 2;
		min-width: 0;
	}

	header > .site-header-shell,
	header .site-header-inner {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	header .wp-block-group.site-header-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
		border-bottom: 0;
	}

	header .wp-block-group.site-nameplate {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;
	}

	.site-nav {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.25rem;
	}

	.site-nav a {
		box-sizing: border-box;
		width: 100%;
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
		font-size: 0.75rem;
	}

	/* The page padding is the gutter here. */
	main.wp-block-group {
		padding-left: 0;
		padding-right: 0;
	}

	.shelf-main {
		padding: 0;
	}

	.site-rail-subscribe {
		display: block;
		width: 100%;
	}

	.site-rail-subscribe .subscribe-section {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}

	.site-rail-subscribe .subscribe-form {
		flex-direction: column;
		gap: 0.5rem;
	}

	.site-rail-subscribe .subscribe-form__button {
		width: 100%;
		margin-left: 0;
	}

	/* The rail's form stays in view, so pages end without a second one. The
	   footer keeps its screen-reader RSS link. */
	.site-footer {
		margin: 0;
		padding: 0;
	}

	.site-footer .subscribe-section {
		display: none;
	}
}

/* ---------- Print: the page survives paper ---------- */

@media print {
	/* Browsers drop backgrounds: the highlighter stroke goes, the name stays in ink. */
	.wp-block-site-title a {
		background: transparent;
		color: #1A1611;
		padding: 0;
	}

	.cover-browser,
	.site-search-modal {
		display: none !important;
	}
}

/* ---------- The highlighter on hover ---------- */

/* The highlighter: yellow marks things the way a reader's marker does, as a
   stroke behind ink letters, never as the colour of text (it is unreadable on
   paper). Hovered links get a thick yellow underline drawn under the glyphs.
   Last in the file so it outranks resting `text-decoration: none` rules of
   equal weight; deliberate exceptions use more specific selectors. */
a:hover,
a:focus-visible {
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 0.45em;
	text-underline-offset: -0.3em;
	text-decoration-skip-ink: none;
}