/* Frontier Thesis Press: site-wide tokens, type and chrome. See docs/DESIGN.md. */

:root {
	--paper: #ffffff;
	--ink: #191a18;
	--plate: #000000;
	--blue: #4b95bf; /* sampled from the cover artwork, 2026-10-10 */
	--quiet: #6b6b66;
	/* The press's greens (DESIGN.md, The press pages). */
	--phthalo: #123524;
	--mint: #e8fff4;

	/* Links, focus rings, selection and the progress line. The blue belongs to the Thomas Brown
	   edition (with its black and white); the press's pages switch these to the greens. */
	--accent: var(--blue);
	--link: var(--blue);

	--serif: 'itc-giovanni', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
	--sans: 'nimbus-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--sans-ext: 'nimbus-sans-extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--measure: 36rem;
	--gutter: clamp(1rem, 4vw, 2.5rem);
}

/* The live colours. Registered so the narrative's nightfall can animate them. */
@property --bg {
	syntax: '<color>';
	inherits: true;
	initial-value: #ffffff;
}
@property --fg {
	syntax: '<color>';
	inherits: true;
	initial-value: #191a18;
}
@property --muted {
	syntax: '<color>';
	inherits: true;
	initial-value: #6b6b66;
}

html {
	background: var(--bg);
	color: var(--fg);
	font: 400 100%/1.58 var(--serif);
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}
body {
	margin: 0;
	font-size: 1.1875rem;
}
@media (max-width: 40rem) {
	body {
		font-size: 1.125rem;
	}
}
img,
picture,
svg {
	display: block;
	max-width: 100%;
}
a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
em {
	font-style: italic;
}
::selection {
	background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip {
	position: absolute;
	left: var(--gutter);
	top: -3rem;
	z-index: 20;
	padding: 0.4rem 0.8rem;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
}
.skip:focus {
	top: 0.75rem;
}

/* Chrome: quiet, so it never competes with the text (DESIGN.md, Strong centers). */
.site-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding: 1.4rem var(--gutter);
	font: 400 0.9rem/1.2 var(--sans);
}
/* The press name, set as the logo is: lowercase Nimbus Sans Extended at its heaviest. */
.press {
	font: 900 1rem/1 var(--sans-ext);
	color: inherit;
	text-decoration: none;
	letter-spacing: -0.01em;
}
.site-header nav {
	display: flex;
	gap: 1.4rem;
}
.site-header nav a {
	color: inherit;
	text-decoration: none;
}
.site-header nav a:hover,
.press:hover {
	color: var(--accent);
}
.site-footer {
	max-width: var(--measure);
	margin: 6rem auto 0;
	padding: 2rem var(--gutter) 3rem;
	color: var(--muted);
	font-size: 0.85rem;
	line-height: 1.5;
}
.site-footer p {
	margin: 0 0 0.6rem;
}

/* Simple prose pages (press home, contents). */
.page {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 4vh var(--gutter) 0;
}
.page h1 {
	font: 900 clamp(2.1rem, 5.5vw, 3.4rem)/1.04 var(--sans);
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}
.page h2 {
	font: 900 1.05rem/1.2 var(--sans);
	margin: 2.75rem 0 0.8rem;
}
.page .sub {
	color: var(--muted);
	font-style: italic;
	margin-top: -0.5rem;
}
.contents {
	list-style: none;
	padding: 0;
	margin: 0;
}
.contents li {
	padding: 0.55rem 0;
	border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.contents a {
	color: inherit;
	text-decoration: none;
}
.contents a:hover {
	color: var(--accent);
}
.contents .soon {
	color: var(--muted);
}

/* ---------------------------------------------------------------------------------------
   The press's greens (DESIGN.md, The press pages) on every page but the narrative, which
   alone is the book: white paper, black ink, the cover blue. The home page and the essays
   list are mint on phthalo green. Essays and the edition's apparatus (contents, timeline,
   and in time the introduction and notes) read in phthalo green on mint.
   --------------------------------------------------------------------------------------- */
html.press-page {
	--bg: var(--phthalo);
	--fg: var(--mint);
	--muted: #a9c9b8;
	--link: var(--mint);
	--accent: var(--mint);
}
html.essay-page,
html.apparatus-page {
	--bg: var(--mint);
	--fg: var(--phthalo);
	--muted: #527162; /* phthalo 70%, mint 30%: 5.1:1 on mint */
	--link: var(--phthalo);
	--accent: var(--phthalo);
}
html.press-page .site-header nav a,
html.essay-page .site-header nav a,
html.apparatus-page .site-header nav a {
	font: 900 0.95rem/1 var(--sans-ext);
}
/* Where the accent is the text's own colour, hovering underlines instead. */
html.press-page .site-header nav a:hover,
html.essay-page .site-header nav a:hover,
html.apparatus-page .site-header nav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
/* The apparatus pages share the essays' reading column and type size. */
html.apparatus-page .page {
	max-width: 46rem;
	font-size: 1.25rem;
}
@media (max-width: 40rem) {
	html.apparatus-page .page {
		font-size: 1.125rem;
	}
}
.home {
	max-width: 52rem;
	margin: 0 auto;
	padding: 2vh var(--gutter) 0;
}
.home-logo {
	margin: 6vh 0 3.5rem;
}
.home-logo img {
	width: min(100%, 38rem);
	height: auto;
}
.home-about {
	max-width: 36rem;
	font-size: 1.25rem;
	line-height: 1.55;
}
.home-about p {
	margin: 0 0 1rem;
}
.home h2,
.press-prose h1 {
	font: 900 1.5rem/1 var(--sans-ext);
	letter-spacing: -0.01em;
	margin: 4.5rem 0 1.5rem;
	padding-top: 1.25rem;
	border-top: 2px solid color-mix(in srgb, var(--fg) 35%, transparent);
}
.books {
	list-style: none;
	margin: 0;
	padding: 0;
}
.book {
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: 2rem;
	align-items: start;
}
.book-cover {
	display: block;
	background: #fff;
	padding: 1.4rem 1.2rem;
	box-shadow: 0 1px 0 rgb(0 0 0 / 0.25);
	transition: transform 0.25s ease;
}
.book-cover:hover,
.book-cover:focus-visible {
	transform: translateY(-4px);
}
.book-cover img {
	width: 100%;
	height: auto;
}
.book-text h3 {
	font: italic 700 1.5rem/1.2 var(--serif);
	margin: 0 0 0.5rem;
}
.book-text h3 a {
	text-decoration: none;
}
.book-text h3 a:hover {
	text-decoration: underline;
}
.book-meta {
	font: 400 0.9rem/1.3 var(--sans);
	color: var(--muted);
	margin: 0 0 1rem;
}
.book-text p {
	margin: 0 0 1rem;
}
.book-read {
	font: 900 0.95rem/1 var(--sans-ext);
	text-decoration: none;
}
.essay-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.essay-list li {
	padding: 0.9rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
}
.essay-list a {
	font: italic 700 1.25rem/1.3 var(--serif);
	text-decoration: none;
}
.essay-list a:hover {
	text-decoration: underline;
}
.essay-date {
	display: block;
	font: 400 0.85rem/1.4 var(--sans);
	color: var(--muted);
}
.essay-list p {
	margin: 0.35rem 0 0;
}
.quiet {
	color: var(--muted);
	font-style: italic;
}
@media (max-width: 40rem) {
	.book {
		grid-template-columns: 1fr;
	}
	.book-cover {
		width: 60%;
	}
}

/* An essay: the press header, the edition's reading page. The figures span the narrative's
   whole width (date margin, text and notes: 62.5rem). The text is a step larger than the
   narrative's and set at 46rem, about 76 characters a line, like Substack's 728-760px column. */
.page.essay {
	max-width: 62.5rem;
	font-size: 1.25rem;
}
@media (max-width: 40rem) {
	.page.essay {
		font-size: 1.125rem;
	}
}
.page.essay > :not(figure) {
	max-width: 46rem;
	margin-inline: auto;
}
.essay h1 {
	font: 900 clamp(1.9rem, 5vw, 2.8rem)/1.08 var(--sans);
	letter-spacing: -0.02em;
	margin: 0.25rem 0 2rem;
}
.essay p {
	margin: 0 0 1.1em;
}
.essay .standfirst {
	margin-bottom: 2.2rem;
	font-size: 1.2em;
	font-style: italic;
	line-height: 1.45;
}
/* Figures: the lead above the text, and images within it. Each is as wide as its image, which
   fits the column and the screen, so its caption can sit flush right under the image. */
.essay figure {
	width: fit-content;
	max-width: 100%;
	margin: 2.4rem auto;
}
.essay figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80svh;
}
/* A pen drawing cleaned to white paper: printed onto the page, its paper takes the page's mint. */
.essay figure.drawing img {
	mix-blend-mode: multiply;
}
.essay figcaption {
	margin-top: 0.5rem;
	text-align: right;
	font: italic 700 0.8rem/1.35 var(--serif);
	text-wrap: pretty;
}
.essay figcaption .credit {
	display: block;
	margin-top: 0.15rem;
	font: 400 0.68rem/1.3 var(--sans);
	color: var(--muted);
}
/* The lead image, sized from its aspect ratio (--ar), with the title over its top in white on
   one line where it fits. On narrow screens the title follows the image and caption instead. */
.essay figure.essay-lead {
	width: min(100%, calc(80svh * var(--ar)));
	margin: 0 auto 2rem;
}
.essay-lead-art {
	position: relative;
}
.essay-lead-art picture,
.essay figure .essay-lead-art img {
	display: block;
	width: 100%;
	max-height: none;
}
.essay-lead-art h1 {
	margin: 1.75rem 0 0;
}
@media (max-width: 39.99rem) {
	.essay figure.essay-lead {
		display: flex;
		flex-direction: column;
	}
	.essay-lead-art {
		display: contents;
	}
	.essay-lead figcaption {
		order: 1;
	}
	.essay-lead-art h1 {
		order: 2;
	}
}
@media (min-width: 40rem) {
	.essay-lead-art h1 {
		position: absolute;
		top: clamp(1rem, 4.5%, 2.5rem);
		left: clamp(1rem, 4%, 2.5rem);
		right: clamp(1rem, 4%, 2.5rem);
		margin: 0;
		color: var(--mint);
	}
}
/* A section break: space, and a short rule like a plate's frame. */
.essay hr {
	width: 3rem;
	margin: 2.4em auto;
	border: 0;
	border-top: 1px solid currentColor;
}
.essay-back {
	margin-top: 3rem;
	font: 400 0.95rem var(--sans);
}

/* Reading progress: a thin line in the cover blue across the top, as on the GuildeHall blog,
   on the narrative and the essays. It fills as the article (each page names it --article)
   scrolls past. Hidden where scroll-driven animation is unsupported. */
.progress {
	display: none;
}
@supports (animation-timeline: view()) {
	.progress {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 9px;
		z-index: 60;
		pointer-events: none;
	}
	.progress-fill {
		height: 100%;
		background: var(--accent);
		transform-origin: left;
		animation: progress linear both;
		animation-timeline: --article;
		animation-range: entry 0% exit 0%;
	}
	.essay {
		view-timeline: --article block;
	}
	/* An essay starts near the top of the page: empty until its first line reaches the top of
	   the screen, full when its last line meets the bottom. */
	html.essay-page .progress-fill {
		animation-range: contain 0% contain 100%;
	}
	html.essay-page {
		timeline-scope: --article;
	}
}
@keyframes progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* On the home page the logo is the masthead, and the statement opens the page. */
html.home-page .site-header .press {
	visibility: hidden;
}
html.home-page .site-footer p:first-child {
	display: none;
}
html.press-page .site-footer {
	max-width: 52rem;
}