/* ==========================================================================
   emilyleider.com — 2026
   Single stylesheet, no build step, no external requests.
   Everything tunable lives in the token block below.
   ========================================================================== */

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

:root {
	color-scheme: light dark;

	/* Type. --font-sans leads with faces that share Verdana's tall x-height
	   and wide apertures, so body copy reads large at any given size.
	   To drop the serif entirely, set --font-display to var(--font-sans). */
	--font-sans: "Seravek", "Verdana", "DejaVu Sans", ui-sans-serif, system-ui,
		-apple-system, "Segoe UI", sans-serif;
	--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
		"Times New Roman", serif;

	/* Fluid scale: min value at a 360px viewport, max at 1200px. */
	--step--1: clamp(0.9375rem, 0.89rem + 0.21vw, 1.0625rem);
	--step-0: clamp(1.0625rem, 1.0rem + 0.30vw, 1.25rem);
	--step-1: clamp(1.1875rem, 1.09rem + 0.45vw, 1.4375rem);
	--step-2: clamp(1.4375rem, 1.27rem + 0.75vw, 1.875rem);
	--step-3: clamp(1.75rem, 1.44rem + 1.4vw, 2.625rem);

	--measure: 68ch;

	/* Space */
	--space-2xs: 0.375rem;
	--space-xs: 0.625rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.25rem;
	--space-xl: 3.5rem;
	--space-2xl: 5rem;

	/* Color — light */
	--bg: #faf8f5;
	--surface: #ffffff;
	--text: #1c1a17;
	--text-muted: #56504a;
	--rule: #ddd6cc;
	--accent: #8a2f39;
	--accent-hover: #6d232c;
	--accent-soft: #f3e7e6;
	--focus: #0b5fa5;

	--radius: 6px;
	--shadow: 0 1px 2px rgb(28 26 23 / 0.06), 0 8px 24px -12px rgb(28 26 23 / 0.18);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14120f;
		--surface: #1e1b17;
		--text: #ece7e0;
		--text-muted: #b3aaa0;
		--rule: #38322b;
		--accent: #e79aa4;
		--accent-hover: #f3b8c0;
		--accent-soft: #2c2220;
		--focus: #8fc4ff;
		--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.7);
	}
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.65;
	/* Verdana-class faces get slightly negative tracking at large sizes only. */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}

h1 {
	font-size: var(--step-3);
	letter-spacing: -0.015em;
}
h2 {
	font-size: var(--step-2);
	letter-spacing: -0.01em;
}
h3 {
	font-size: var(--step-1);
}

p,
ul,
ol,
blockquote,
figure {
	margin: 0;
}

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

a {
	color: var(--accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

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

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

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

/* --------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: var(--space-s);
	top: var(--space-s);
	z-index: 100;
	padding: 0.6em 1em;
	background: var(--surface);
	color: var(--text);
	border: 2px solid var(--accent);
	border-radius: var(--radius);
	font-size: var(--step--1);
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--rule);
	background: var(--surface);
}

.site-header__inner {
	max-width: 78rem;
	margin-inline: auto;
	padding: var(--space-m) var(--space-s);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
}

.site-title {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.1;
	color: var(--text);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.site-title:hover {
	color: var(--accent);
}

.site-tagline {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	font-weight: 400;
	color: var(--text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   5. Nav
   -------------------------------------------------------------------------- */

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5em;
	font: inherit;
	font-size: var(--step--1);
	padding: 0.55em 0.9em;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	cursor: pointer;
}

.nav-toggle:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.nav-toggle__bars {
	display: inline-block;
	width: 1.1em;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.layout {
	max-width: 78rem;
	margin-inline: auto;
	padding: var(--space-l) var(--space-s) var(--space-2xl);
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: start;
}

.site-nav {
	position: sticky;
	top: var(--space-m);
	font-size: var(--step--1);
}

.nav__heading {
	font-family: var(--font-sans);
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--space-xs);
	padding-bottom: var(--space-2xs);
	border-bottom: 1px solid var(--rule);
}

.nav__list {
	list-style: none;
	margin: 0 0 var(--space-l);
	padding: 0;
}

.nav__list a {
	display: block;
	padding: 0.5em 0.6em;
	margin-left: -0.6em;
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	border-left: 3px solid transparent;
	line-height: 1.4;
}

.nav__list a:hover {
	background: var(--accent-soft);
	color: var(--accent-hover);
}

.nav__list a[aria-current="page"] {
	border-left-color: var(--accent);
	color: var(--accent);
	font-weight: 700;
	background: var(--accent-soft);
}

.nav__list--plain a {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Content
   -------------------------------------------------------------------------- */

.content > * + * {
	margin-top: var(--space-l);
}

.prose {
	max-width: var(--measure);
}

.prose > * + * {
	margin-top: var(--space-m);
}

.prose h2 {
	margin-top: var(--space-xl);
}

.eyebrow {
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--space-xs);
}

.page-header {
	border-bottom: 1px solid var(--rule);
	padding-bottom: var(--space-m);
}

.page-header__subtitle {
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--text-muted);
	line-height: 1.2;
	margin-top: var(--space-2xs);
	text-wrap: balance;
}

.page-header__meta {
	font-size: var(--step--1);
	color: var(--text-muted);
	margin-top: var(--space-s);
}

/* Book layout: cover beside copy on wide screens, stacked on narrow. */
.book-layout {
	display: grid;
	grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
	gap: var(--space-l);
	align-items: start;
}

.book-cover img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--surface);
}

.book-cover figcaption {
	font-size: var(--step--1);
	color: var(--text-muted);
	margin-top: var(--space-xs);
}

/* --------------------------------------------------------------------------
   7. Buy links
   -------------------------------------------------------------------------- */

.buy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
	margin-top: var(--space-m);
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--step--1);
	font-weight: 700;
	line-height: 1.2;
	padding: 0.75em 1.15em;
	border-radius: var(--radius);
	text-decoration: none;
	border: 2px solid var(--accent);
	background: var(--accent);
	color: var(--surface);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--surface);
}

.button--secondary {
	background: transparent;
	color: var(--accent);
}

.button--secondary:hover {
	background: var(--accent-soft);
	color: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* Marks links that open a new tab; paired with visually-hidden text. */
.ext::after {
	content: "\2197";
	font-size: 0.8em;
	margin-left: 0.15em;
	vertical-align: 0.15em;
}

.buy-note {
	font-size: var(--step--1);
	color: var(--text-muted);
	margin-top: var(--space-xs);
	max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   8. Reviews
   -------------------------------------------------------------------------- */

.reviews {
	max-width: var(--measure);
}

.reviews__list {
	list-style: none;
	margin: var(--space-m) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-m);
}

.review {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: var(--space-m);
	margin: 0;
}

.review p {
	font-size: var(--step-0);
	line-height: 1.6;
}

.review footer {
	margin-top: var(--space-xs);
	font-size: var(--step--1);
	color: var(--text-muted);
}

.review cite {
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   9. Poem
   -------------------------------------------------------------------------- */

.poem {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--space-m);
	max-width: var(--measure);
}

.poem__body {
	font-family: var(--font-display);
	font-size: var(--step-0);
	line-height: 1.7;
	margin-top: var(--space-s);
}

/* One block per line of verse, so a line too long for the column wraps with a
   hanging indent and still reads as a single line. */
.poem__line {
	display: block;
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.poem__line:empty {
	height: 0.9em;
}

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

/* --------------------------------------------------------------------------
   10. Embedded form
   -------------------------------------------------------------------------- */

.form-embed {
	max-width: 640px;
}

.form-embed iframe {
	display: block;
	width: 100%;
	/* Google Forms is cross-origin, so the page can't measure the form and size
	   the frame to fit. This is the height Google published for the embed; if a
	   question is added the frame scrolls rather than clipping. */
	height: 1494px;
	border: 0;
	border-radius: var(--radius);
	background: var(--surface);
}

.form-fallback {
	max-width: var(--measure);
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. Home
   -------------------------------------------------------------------------- */

.bio-layout {
	display: grid;
	grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
	gap: var(--space-l);
	align-items: start;
}

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

.portrait figcaption {
	font-size: var(--step--1);
	color: var(--text-muted);
	margin-top: var(--space-xs);
}

.book-list {
	list-style: none;
	margin: var(--space-m) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.book-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	height: 100%;
	padding: var(--space-m);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.book-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
	color: var(--text);
}

/* Each book keeps its own proportions — Rapid Eye Movement is a markedly
   taller book than the biographies, and flattening them to one shape would
   crop the jackets. The hairline stops pale covers (Yesterday, Mae West) from
   bleeding into the card behind them.

   max-width matches the cover column on the book pages (.book-layout, and the
   .book-cover cap under 40rem), so a given book renders at the same size
   wherever it appears. Without it the cards' 1fr tracks stretch: a cover would
   reach 396px in the two-column layout and ~310px on a phone, against 240px on
   its own page. */
.book-card__cover {
	width: 100%;
	max-width: 15rem;
	height: auto;
	border: 1px solid var(--rule);
	border-radius: 2px;
	background: var(--surface);
}

/* Wraps the title, subtitle and imprint so they stay a column once the cover
   becomes the card's first child. flex: 1 lets the imprint's margin-top: auto
   go on pinning it to the bottom of the card. */
.book-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	flex: 1;
	min-width: 0;
}

.book-card__title {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.2;
	color: var(--accent);
}

/* Part of the title, not a field of its own: it flows on inline after the
   colon and is only set quieter, so a long title stays one object rather than
   breaking into two competing lines. */
.book-card__subtitle {
	font-size: 0.78em;
	color: var(--text-muted);
}

.book-card:hover .book-card__title {
	color: var(--accent-hover);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* The underline carries across the whole title on hover, but the subtitle
   keeps its quieter colour rather than lighting up with the main title. */
.book-card:hover .book-card__subtitle {
	color: var(--text-muted);
}

.book-card__meta {
	font-size: var(--step--1);
	color: var(--text-muted);
	margin-top: auto;
	padding-top: var(--space-xs);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--rule);
	background: var(--surface);
	font-size: var(--step--1);
	color: var(--text-muted);
}

.site-footer__inner {
	max-width: 78rem;
	margin-inline: auto;
	padding: var(--space-l) var(--space-s);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-m);
	justify-content: space-between;
}

/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   14. Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
	.layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-l);
		padding-top: var(--space-m);
	}

	.site-nav {
		position: static;
		border-bottom: 1px solid var(--rule);
		padding-bottom: var(--space-s);
	}

	/* With JS, the nav starts collapsed and the toggle drives it.
	   Without JS the nav simply stays open — nothing is unreachable. */
	.js .nav-toggle {
		display: inline-flex;
	}

	.js .site-nav[data-collapsed="true"] {
		display: none;
	}

	.nav__list {
		margin-bottom: var(--space-m);
	}
}

@media (max-width: 40rem) {
	.form-embed iframe {
		height: 1900px;
	}

	.book-layout,
	.bio-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.book-cover,
	.portrait {
		max-width: 15rem;
	}
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */

@media print {
	.site-nav,
	.nav-toggle,
	.skip-link,
	.buy {
		display: none;
	}

	.layout {
		display: block;
		padding: 0;
	}

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