/* ---------------------------------------------------------------------------
   Warthog
   A catalogue, not a brochure. Labelled records, hairline rules, one accent.
   Type is Iosevka Input throughout: Sans Normal for apparatus (nav, labels,
   captions), Slab Quasi for reading text.
   --------------------------------------------------------------------------- */

:root {
	/* Identity palette. Three hues from the colour-system generator:
	   https://adriencater.github.io/color-system-generator/#c=0_0.5&k=60_0.2145~180_0.166~300_0.489&d=0_0.5&n=3&o=0&p=1&e=0.15

	   Three hues at three lightness steps. The middle step is the identity
	   colour; the outer two are kept for supplementary use.

	   Hex is declared first as a fallback: a browser without oklch() drops the
	   second declaration and keeps the first, so nothing goes unstyled. */
	/* Main: the middle (Normal, 50% L) step. Used in both schemes — the palette
	   no longer flips by scheme, so a hue reads the same on paper and on dark. */
	--color1: #845832;
	--color1: oklch(50.00% 0.0794 60.00);   /* warm   */
	--color2: #376F64;
	--color2: oklch(50.00% 0.0614 180.00);  /* teal   */
	--color3: #7541B9;
	--color3: oklch(50.00% 0.1809 300.00);  /* violet */

	/* Supplementary: the 35% and 65% steps of the same three hues, same chroma.
	   Not used yet — here for fills, hovers, borders and anything that needs to
	   sit under or over the main step without introducing a new hue. */
	--color1-dark: #582F03;
	--color1-dark: oklch(35.00% 0.0794 60.00);
	--color2-dark: #04453C;
	--color2-dark: oklch(35.00% 0.0614 180.00);
	--color3-dark: #4C0688;
	--color3-dark: oklch(35.00% 0.1809 300.00);

	--color1-light: #B3845D;
	--color1-light: oklch(65.00% 0.0794 60.00);
	--color2-light: #649C90;
	--color2-light: oklch(65.00% 0.0614 180.00);
	--color3-light: #A170EB;
	--color3-light: oklch(65.00% 0.1809 300.00);

	/* One of the three, chosen per request in header.php, which re-points this
	   with an inline `--accent: var(--colorN)`. Kept as an alias rather than a
	   copied value so the dark-scheme block below can retune the whole trio in
	   one place without PHP knowing anything about light and dark. */
	--accent: var(--color2);

	--paper: #fbfaf8;
	--ink: #16181a;
	--ink-soft: #6a6d70;
	--rule: #dcd9d4;
	--rule-strong: #16181a;

	--sans: 'Iosevka Input Sans Normal Web', ui-monospace, 'SF Mono', Menlo, monospace;
	/* the wordmark's face — already loaded in header.php, now addressable */
	--sans-quasi: 'Iosevka Input Sans Quasi Web', ui-monospace, 'SF Mono', Menlo, monospace;
	--slab: 'Iosevka Input Slab Quasi Web', ui-monospace, 'SF Mono', Menlo, monospace;

	--gutter: clamp(1.25rem, 4vw, 3.5rem);
	--measure: 68ch;
	--stack: clamp(3rem, 7vw, 6rem);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* The middle step is tuned for paper: on dark it drops to 2.85-3.21:1,
		   which fails AA for the body-size text the accent actually colours
		   (link underlines, .foot-name, record-title hovers) — violet fails
		   even the large-text threshold. Resolving to the 65% step restores
		   5.34-5.93:1. Same hue, same chroma; only lightness moves, so the
		   identity reads identically and just stays legible. */
		--color1: var(--color1-light);
		--color2: var(--color2-light);
		--color3: var(--color3-light);

		--paper: #121314;
		--ink: #eceae6;
		--ink-soft: #9a9d9f;
		--rule: #2e3134;
		--rule-strong: #eceae6;
	}
}

/* --- width ------------------------------------------------------------------

   Two widths carry the same split the two families already carry: reading text
   is Extended, apparatus is Normal. Wide for the things you read, narrow for
   the things that label them.

   Only `normal` and `expanded` ship — there is no condensed cut of Iosevka in
   font/. `font-stretch: condensed` would not fail loudly, it would quietly
   resolve to the nearest available width, which is `normal` — so `normal` is
   written here directly rather than asking for a width that isn't there.

   Reading text is set on `p` so it reaches prose, intros and record values
   without listing them. Apparatus overrides by class, which wins on
   specificity regardless of source order.
   --------------------------------------------------------------------------- */

p,
.lede,
.foot-name {
	font-stretch: expanded;
}

h1, h2, h3, h4, h5, h6,
.site-nav,
.crumb,
.more,
.entry__kind,
.entry__byline,
.record__label,
.figure figcaption,
.person__role,
.site-foot p,
.foot-expansion,
.wordmark__expansion {
	font-stretch: normal;
}

/* the footer's mark is the logotype, not footer apparatus */
.site-foot .foot-name { font-stretch: expanded; }

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

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--slab);
	font-weight: 300;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
a:focus-visible,
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
	position: absolute;
	left: -9999px;
	font-family: var(--sans);
	font-size: 0.8rem;
}
.skip:focus {
	left: var(--gutter);
	top: 0.5rem;
	z-index: 10;
	background: var(--paper);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--rule-strong);
}

/* --- header ---------------------------------------------------------------- */

.site-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter) 1.25rem;
	border-bottom: 1px solid var(--rule-strong);
}

.wordmark {
	display: block;
	text-decoration: none;
}
.wordmark:hover { color: inherit; }

.wordmark__mark {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	font-size: clamp(2rem, 6vw, 3.25rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--accent);
}
.wordmark:hover .wordmark__mark { color: var(--ink); }

/* segments and separators are addressable so the parametric identity can drive
   them independently. assets/js/logotype.js repaints the mark on every load;
   these rules cover both the server-rendered spans and the ones it writes. */
.wordmark__seg,
.logoType__seg { display: inline-block; }

/* the mark between segments runs lighter than the letters, the way it does in
   the logo playground */
.wordmark__sep,
.logoType__sep {
	display: inline-block;
	font-weight: 200;
}

/* The masthead arrangement separates every letter, so it needs the playground's
   captured setting: sans quasi, extended, 600 over 0.1em. Applied here rather
   than inline by the script so it holds for the server-rendered fallback too. */
.wordmark__mark[data-logotype-painted="display"] {
	font-family: var(--sans-quasi);
	font-stretch: expanded;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/* Inline in running prose. Keeps the three segments whole so the sentence still
   reads, and picks up whatever accent the load chose. */
.logoType {
	font-family: var(--sans-quasi);
	font-weight: 600;
	font-stretch: expanded;
	color: var(--accent);
	white-space: nowrap;
}

.wordmark__expansion {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sans);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}
.site-nav a {
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--accent); }
.site-nav a[aria-current] { border-bottom-color: currentColor; }

/* --- shared page furniture -------------------------------------------------- */

main { padding: 0 var(--gutter); }

.page,
.record-page,
.home {
	max-width: 78rem;
	margin: 0 auto;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--stack);
}

.page__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.page__head h1 {
	margin: 0;
	font-family: var(--sans);
	font-weight: 500;
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	max-width: 22ch;
}

.page__intro {
	margin: 1rem 0 0;
	max-width: var(--measure);
	color: var(--ink-soft);
	font-size: 1rem;
}

.crumb {
	margin: 0 0 1.25rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}
.crumb a { text-decoration: none; border-bottom: 1px solid var(--rule); }

/* the big opening statement */
.lede {
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	max-width: 24ch;
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(1.6rem, 4.2vw, 2.75rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.home .lede { color: var(--accent); }

/* the opening statement and the body sit side by side once there's room */
.split { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.split .lede { margin-bottom: 0; }

@media (min-width: 64rem) {
	.split {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}
	.split .prose { padding-top: 0.55rem; }
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15em; }
.prose > :last-child { margin-bottom: 0; }
.prose a { text-decoration-color: var(--accent); }
.prose em { font-style: italic; }

.section {
	margin-top: var(--stack);
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
}
.section__head {
	margin: 0 0 1.5rem;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: 0;
}

/* --- catalogue index -------------------------------------------------------- */

.index {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule-strong);
}

.entry { border-bottom: 1px solid var(--rule); }

.entry__link {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 0.35rem 1.5rem;
	padding: 1.1rem 0;
	text-decoration: none;
	align-items: start;
}
.entry__link:hover { color: inherit; }

.entry__media img,
.entry__media--empty {
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	background: var(--rule);
	filter: grayscale(1) contrast(1.05);
	transition: filter .35s ease;
}
.entry__media--empty { display: block; }
.entry__link:hover .entry__media img { filter: none; }

.entry__body { display: block; }

.entry__title {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	font-size: clamp(1.05rem, 2vw, 1.375rem);
	line-height: 1.2;
	text-wrap: balance;
}
.entry__link:hover .entry__title { color: var(--accent); }

.entry__subtitle {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.entry__byline {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ink-soft);
	max-width: 52ch;
}

.entry__kind {
	grid-column: 2;
	font-family: var(--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--accent);
	margin-top: 0.5rem;
}

@media (min-width: 52rem) {
	.entry__link {
		grid-template-columns: 10rem 1fr 9rem;
		gap: 2rem;
		padding: 1.5rem 0;
		align-items: center;
	}
	.entry__kind {
		grid-column: 3;
		margin-top: 0;
		text-align: right;
	}
}

/* homepage strips */
/* The strips sit outside <article class="home">, so they don't inherit its
   column and were running wider than the statement block above them. Same
   78rem, same centring, so the home page reads as one column throughout. */
.strip {
	max-width: 78rem;
	margin-inline: auto;
	margin-top: var(--stack);
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}
.strip__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.strip__head h2 {
	margin: 0;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 1.125rem;
}
.more {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}
.more:hover { border-bottom-color: var(--accent); }

/* --- single record ---------------------------------------------------------- */

.record-page__body {
	margin-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--rule-strong);
}

.record {
	display: grid;
	gap: 0.35rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--rule);
}

.record__label {
	margin: 0;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
	padding-top: 0.3em;
}

.record__value { margin: 0; max-width: var(--measure); }

@media (min-width: 52rem) {
	.record {
		grid-template-columns: 9rem 1fr;
		gap: 2rem;
		padding: 1.5rem 0;
	}
}

.linklist {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sans);
	font-size: 0.875rem;
}
.linklist li + li { margin-top: 0.4rem; }
.linklist a {
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
	overflow-wrap: anywhere;
}
.linklist a:hover { border-bottom-color: var(--accent); }
.linklist a::after { content: ' ↗'; color: var(--ink-soft); }

/* --- figures ---------------------------------------------------------------- */

.figure { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.record-page .figure + .figure { margin-top: var(--stack); }

.figure img { width: 100%; }

.figure figcaption {
	margin-top: 0.65rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 60ch;
}
.figure .credit { display: block; }

/* --- people ----------------------------------------------------------------- */

.people { border-top: 1px solid var(--rule-strong); }

.person {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.75rem, 4vw, 2.75rem) 0;
	border-bottom: 1px solid var(--rule);
}

.person__aside img { width: 100%; max-width: 15rem; filter: grayscale(1); }

.person__body h2 {
	margin: 0;
	font-family: var(--sans);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	line-height: 1.15;
}

.person__role {
	margin: 0.35rem 0 1rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--accent);
}

.person__body .linklist { margin-top: 1rem; }

@media (min-width: 52rem) {
	.person { grid-template-columns: 9rem 1fr; gap: 2rem; }
	.person--noportrait .person__body { grid-column: 2; }
	.person__aside img { max-width: none; }
}

/* --- siblings --------------------------------------------------------------- */

.siblings {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: var(--stack);
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}
.siblings a { text-decoration: none; max-width: 22rem; }
.siblings__next { margin-left: auto; text-align: right; }
.siblings__dir {
	display: block;
	font-family: var(--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
}
.siblings__title {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
	line-height: 1.25;
}
.siblings a:hover .siblings__title { color: var(--accent); }

/* --- footer ----------------------------------------------------------------- */

.site-foot {
	display: grid;
	gap: 1.75rem 2.5rem;
	padding: 2.25rem var(--gutter) 3rem;
	border-top: 1px solid var(--rule-strong);
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--ink-soft);
}
.site-foot p { margin: 0 0 0.35rem; }
.site-foot ul { margin: 0; padding: 0; list-style: none; }
.site-foot li + li { margin-top: 0.35rem; }
.site-foot a { text-decoration: none; border-bottom: 1px solid var(--rule); }

.foot-name { color: var(--accent); font-size: 0.9375rem; font-weight: 500; }

@media (min-width: 52rem) {
	.site-foot { grid-template-columns: 2fr 1fr 1fr; }
}