/* ==========================================================================
   Linda Bradley Salamon — site styles
   No dependencies. One file for every page.
   ========================================================================== */

/* ---------- Tokens: pigments from a Tudor miniaturist's paint box ---------- */
:root {
	color-scheme: light dark;

	--vellum: light-dark(#f6f1e7, #1b1916); /* the page itself            */
	--vellum-2: light-dark(#ede5d4, #26221c); /* a second sheet, for panels */
	--ink: light-dark(#2b2622, #ebe4d6); /* oak-gall ink               */
	--sepia: light-dark(#685c52, #b3a796); /* faded marginalia           */
	--lapis: light-dark(#2e4a7d, #9db3df); /* ground lapis — links       */
	--vermilion: light-dark(#ad3f29, #e8866d); /* rubrication — accents      */
	--gold: light-dark(#b8955a, #c9a96e); /* shell gold — rules only    */

	--serif:
		"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
		"URW Palladio L", Georgia, serif;

	--step--1: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
	--step-0: clamp(1.08rem, 1rem + 0.35vw, 1.22rem);
	--step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
	--step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
	--step-3: clamp(2.1rem, 1.6rem + 2.3vw, 3.4rem);

	--space: clamp(1rem, 0.8rem + 1vw, 1.5rem);
	--measure: 64ch;
	--list: 52rem; /* width of a bibliography list */
	--wide: 68rem;
	--rule: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}

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

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

body {
	margin: 0;
	background: var(--vellum);
	color: var(--ink);
	font: var(--step-0) / 1.65 var(--serif);
	font-variant-numeric: oldstyle-nums;
	text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3 {
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

a {
	color: var(--lapis);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	&:hover {
		color: var(--vermilion);
	}
}

:focus-visible {
	outline: 2px solid var(--vermilion);
	outline-offset: 3px;
	border-radius: 2px;
}
::selection {
	background: color-mix(in srgb, var(--gold) 35%, transparent);
}

.wrap {
	width: min(100% - 2 * var(--space), var(--wide));
	margin-inline: auto;
}

.skip {
	position: absolute;
	left: -999px;
	&:focus {
		left: var(--space);
		top: var(--space);
		padding: 0.5em 1em;
		background: var(--vellum);
	}
}

/* ---------- Header ---------- */
.site-head {
	border-bottom: var(--rule);
	& .wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.5rem 2rem;
		padding-block: 1.25rem;
	}
}

.wordmark {
	color: var(--ink);
	text-decoration: none;
	font-size: var(--step-1);
	font-variant: small-caps;
	letter-spacing: 0.05em;
}

.nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.nav a {
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sepia);
	text-decoration: none;
	padding-block: 0.2em;
	border-bottom: 1px solid transparent;
	&:hover {
		color: var(--ink);
	}
	&[aria-current="page"] {
		color: var(--ink);
		border-color: var(--vermilion);
	}
}

/* ---------- Shared page parts ---------- */
main {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.eyebrow {
	margin-bottom: 1em;
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vermilion);
}

.page-head {
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	& h1 {
		font-size: var(--step-3);
		margin: 0;
	}
}

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

.dropcap::first-letter {
	float: left;
	font-size: 3.6em;
	line-height: 0.8;
	padding: 0.08em 0.1em 0 0;
	color: var(--vermilion);
}

/* ---------- Home ---------- */
.intro {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	& h1 {
		font-size: var(--step-3);
		margin-bottom: 0.3em;
	}
	@media (min-width: 48rem) {
		grid-template-columns: minmax(12rem, 17rem) 1fr;
	}
}

/* A portrait miniature: oval, double gold frame */
.portrait {
	margin: 0;
	padding: 7px; /* room for the outer gold ring */
	width: 100%;
	& picture {
		border-radius: 50%;
		box-shadow:
			0 0 0 3px var(--vellum),
			0 0 0 4px var(--gold),
			0 0 0 7px var(--vellum),
			0 0 0 8px var(--gold);
	}
	& img {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		object-position: 50% 20%; /* keep the face, not the chair */
		border-radius: 50%;
		clip-path: ellipse(50% 50% at 50% 50%); /* hard oval crop in every browser */
	}
}

/* Portrait with CV link beneath */
.portrait-col {
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	width: min(17rem, 70vw);
	@media (max-width: 47.99rem) {
		margin-inline: auto; /* centred as a unit on phones */
	}
}

.cv-link {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.6em;
	min-height: 2.75rem; /* 44px touch target */
	padding: 0.5em 1.4em;
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	font-size: var(--step--1);
	font-variant: small-caps;
	letter-spacing: 0.08em;
	transition:
		color 0.2s,
		border-color 0.2s;
	& small {
		font-size: 0.8em;
		font-style: italic;
		font-variant: normal;
		letter-spacing: 0;
		color: var(--sepia);
	}
	&:hover {
		color: var(--vermilion);
		border-color: var(--vermilion);
	}
	@media (max-width: 47.99rem) {
		width: 100%;
		font-size: var(--step-0);
	}
}

.themes {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	font-style: italic;
	color: var(--sepia);
	& li:not(:last-child)::after {
		content: "·";
		margin-inline: 0.6em;
		color: var(--gold);
		font-style: normal;
	}
}

/* ---------- Bibliography ---------- */
.works-group {
	max-width: var(--list);
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
	scroll-margin-top: 1.5rem;
	& > h2 {
		font-size: var(--step-2);
	}
	& > p {
		max-width: var(--measure);
		color: var(--sepia);
		font-style: italic;
	}
}

.works {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	border-top: var(--rule);
}

.work {
	display: grid;
	grid-template-columns: 3.75rem 1fr;
	gap: 0.25rem 1.25rem;
	padding-block: 1.1rem;
	border-bottom: var(--rule);
	& .year {
		padding-top: 0.15em;
		font-size: var(--step--1);
		color: var(--vermilion);
	}
	& cite {
		display: block;
		font-style: normal;
	}
	& .venue {
		display: block;
		font-size: var(--step--1);
		font-style: italic;
		color: var(--sepia);
	}
	& a[href^="http"]::after {
		content: " ↗";
		font-size: 0.75em;
	}
}

span.underscore {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: 0.2em;
}

/* "In progress": a small rubricated label, like a scribe's note in the margin */
.status {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0 0.6em;
	border: 1px solid color-mix(in srgb, var(--vermilion) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--vermilion) 8%, transparent);
	color: var(--vermilion);
	font-size: 0.78em;
	font-style: normal;
	font-variant: small-caps;
	letter-spacing: 0.08em;
	line-height: 1.6;
	vertical-align: 0.1em;
}

/* Monographs: Hilliard's self-portrait beside her work on him */
.works-group--figure {
	max-width: none;
	display: grid;
	grid-template-areas: "head" "figure" "list";
	@media (min-width: 56rem) {
		grid-template-columns: minmax(0, var(--list)) auto;
		grid-template-areas: "head ." "list figure";
		justify-content: space-between;
		align-items: start;
		column-gap: clamp(2rem, 4vw, 3.5rem);
	}
	& > h2 {
		grid-area: head;
	}
	& > .works {
		grid-area: list;
	}
	& > .miniature {
		grid-area: figure;
	}
}

.miniature {
	margin: 1.25rem auto 0.25rem;
	text-align: center;
	@media (min-width: 56rem) {
		margin: 1.5rem 0 0;
	}
	& img {
		width: clamp(8.5rem, 32vw, 12.5rem);
		margin-inline: auto;
		rotate: 2.5deg;
		filter: drop-shadow(0 0.7rem 0.9rem rgb(30 22 14 / 0.25));
		transition:
			rotate 0.6s ease,
			translate 0.6s ease,
			filter 0.6s ease;
	}
	&:hover img {
		rotate: 0deg;
		translate: 0 -0.35rem;
		filter: drop-shadow(0 1.1rem 1.2rem rgb(30 22 14 / 0.3));
	}
	& figcaption {
		margin-top: 1rem;
		font-size: var(--step--1);
		font-variant: small-caps;
		letter-spacing: 0.06em;
		line-height: 1.35;
	}
	& figcaption span {
		display: block;
		color: var(--vermilion);
		font-style: italic;
		font-variant: normal;
		letter-spacing: 0;
	}
	& figcaption small {
		display: block;
		font-size: 0.9em;
		font-style: italic;
		font-variant: normal;
		letter-spacing: 0;
		color: var(--sepia);
	}
}

/* ---------- Footer ---------- */
.site-foot {
	padding-block: 1rem 3rem;
	font-size: var(--step--1);
	color: var(--sepia);
	&::before {
		content: "❧";
		display: block;
		text-align: center;
		font-size: 1.6rem;
		color: var(--gold);
	}
	& .wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1rem 2rem;
		padding-top: 1.5rem;
		border-top: var(--rule);
	}
	& address {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1.5rem;
		font-style: normal;
	}
	& p {
		margin: 0;
	}
}

/* ---------- Respect motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}