/*
	Stylesheet for davidhosking's academic page.
	Editorial, print-inspired: serif type, generous measure, hairline rules.
*/

:root {
	--paper: #fffdf8;
	--ink: #1b1b1b;
	--ink-soft: #5f5b53;
	--rule: #1b1b1b;
	--rule-soft: #ddd7c8;
	--accent: #8a1c1c;
	--display: "Playfair Display", "Times New Roman", Times, serif;
	--body: "Libre Caslon Text", Georgia, "Times New Roman", serif;
	--measure: 46rem;
	--wide: 62rem;
}

/* Base */

html {
	font-size: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1.5rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 0.875rem;
	line-height: 1.65;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: rgba(27, 27, 27, 0.4);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

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

strong {
	font-weight: 700;
}

/* Small-caps style labels, used for nav, section rubrics, and link rows */

.label,
.masthead__nav a,
.section__label,
.links a,
.ledger__group,
.ledger__meta,
.pub__links a,
.colophon {
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Masthead */

.masthead {
	max-width: var(--wide);
	margin: 0 auto;
	padding: 3.25rem 1.5rem 0;
	text-align: center;
}

.masthead__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.6rem, 6.5vw, 4.4rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.masthead__title a {
	text-decoration: none;
	color: inherit;
}

.masthead__title a:hover {
	color: inherit;
}

.masthead__dek {
	margin: 0.75rem 0 1.6rem;
	font-style: italic;
	font-size: 0.92rem;
	color: var(--ink-soft);
}

.masthead__nav {
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 0.8rem 0;
}

.masthead__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 2.4rem;
}

.masthead__nav a {
	text-decoration: none;
	color: var(--ink);
}

/* Layout */

main {
	max-width: var(--wide);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.section {
	padding: 3.5rem 0 1.5rem;
}

/* About follows the masthead directly, so it needs less space above it */
#about {
	padding-top: 2.25rem;
}

.section__head {
	max-width: 46rem;
	margin: 0 auto 2.4rem;
	text-align: center;
}

.section__label {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2rem);
	letter-spacing: 0.12em;
	line-height: 1.2;
	color: var(--ink);
}

.section__dek {
	margin: 0.9rem 0 0;
	font-style: italic;
	font-size: 0.92rem;
	color: var(--ink-soft);
}

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

.prose p {
	margin: 0 0 1.25em;
}

.prose p:last-child {
	margin-bottom: 0;
}

/* Ornament between sections */

.ornament {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	max-width: 22rem;
	margin: 2.5rem auto 0;
	color: var(--ink-soft);
	font-size: 0.65rem;
}

.ornament::before,
.ornament::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--rule-soft);
}

/* Intro: portrait beside the opening text */

.intro {
	display: flow-root;
	max-width: var(--measure);
	margin: 0 auto;
}

.intro__portrait {
	float: left;
	width: 13rem;
	margin: 0.35rem 2.2rem 1rem 0;
}

.intro__portrait img {
	display: block;
	width: 100%;
	border: 1px solid var(--rule-soft);
}

.intro__portrait figcaption,
.fig figcaption {
	margin-top: 0.6rem;
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--ink-soft);
}

.intro__text {
	margin: 0;
	max-width: none;
}

/* Row of profile links */

/* Profile links: a red secondary row under the masthead nav */

.links {
	list-style: none;
	margin: 0.85rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0;
}

.links li:not(:last-child)::after {
	content: "\00b7";
	margin: 0 0.75rem;
	color: var(--ink-soft);
}

.links a {
	font-size: 0.68rem;
	text-decoration: none;
	color: var(--accent);
}

.links a:hover {
	text-decoration: underline;
}

/* Institution crests */

.affiliations {
	list-style: none;
	max-width: 46rem;
	margin: 2.8rem auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 3.5rem;
}

.affiliations li {
	text-align: center;
}

.affiliations a {
	display: block;
	text-decoration: none;
	color: var(--ink);
}

.affiliations img {
	display: block;
	height: 3.6rem;
	width: auto;
	margin: 0 auto 0.7rem;
	filter: grayscale(1);
	opacity: 0.78;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.affiliations a:hover img {
	filter: none;
	opacity: 1;
}

.affiliations span {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.affiliations small {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	color: var(--ink-soft);
}

/* Research topics */

.topic {
	max-width: var(--measure);
	margin: 2.6rem auto 0;
}

.topic h3 {
	margin: 0 0 0.7rem;
	font-family: var(--display);
	font-weight: 400;
	font-style: italic;
	font-size: 1.45rem;
	line-height: 1.25;
}

.fig {
	margin: 1.8rem 0 0;
}

/* A figure between paragraphs needs the same space below it as above */
.fig:not(:last-child) {
	margin-bottom: 1.8rem;
}

.fig img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--rule-soft);
}

/* Two items side by side; the column ratio matches their aspect ratios so heights agree.
   Set --cols on a pair whose items have different shapes. */

.fig__pair {
	display: grid;
	grid-template-columns: var(--cols, 1.32fr 1.78fr);
	gap: 1.75rem;
	align-items: center;
}

.fig img.fig__plain {
	border: 0;
	mix-blend-mode: multiply;
}

.fig__video {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--rule-soft);
	background: #000;
}

.fig__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Ledger: year-in-margin lists for publications and courses */

.ledger__group {
	max-width: 46rem;
	margin: 2.4rem auto 0.3rem;
	color: var(--ink-soft);
	font-family: var(--body);
	font-weight: 400;
}

.ledger {
	list-style: none;
	max-width: 46rem;
	margin: 0 auto;
	padding: 0;
}

.ledger__item {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: 1.2rem;
	padding: 0.95rem 0;
	border-top: 1px solid var(--rule-soft);
}

.ledger__item:last-child {
	border-bottom: 1px solid var(--rule-soft);
}

.ledger__meta {
	padding-top: 0.32rem;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
}

.ledger__body {
	line-height: 1.55;
}

/* Publications: authors, title, then venue and links, each on its own line */

.pub__authors,
.pub__title,
.pub__venue {
	display: block;
}

.pub__title {
	font-style: normal;
}

.pub__links {
	white-space: nowrap;
}

.pub__links a {
	margin-left: 0.9rem;
	text-decoration: none;
	color: var(--accent);
}

.pub__links a:hover {
	text-decoration: underline;
}

/* Footer */

.colophon {
	max-width: var(--wide);
	margin: 3.5rem auto 0;
	padding: 1.4rem 1.5rem 3.5rem;
	border-top: 1px solid var(--rule);
	text-align: center;
	color: var(--ink-soft);
	letter-spacing: 0.12em;
}

.colophon p {
	margin: 0;
}

.colophon a {
	text-decoration: none;
}

/* Back-to-top button: sits in the right margin once the masthead has scrolled away */

.to-top {
	display: none;
}

@media (min-width: 57rem) {
	.to-top {
		position: fixed;
		right: 1.5rem;
		bottom: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--rule);
		background: var(--paper);
		color: var(--ink);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease, color 0.15s ease, border-color 0.15s ease;
	}

	.to-top.is-visible {
		opacity: 1;
		visibility: visible;
	}

	.to-top:hover,
	.to-top:focus-visible {
		color: var(--accent);
		border-color: var(--accent);
	}

	.to-top svg {
		width: 1rem;
		height: 1rem;
	}
}

/* Side nav: a copy of the masthead links in the left margin, shown once the masthead has scrolled away */

.side-nav {
	display: none;
}

@media (min-width: 70rem) {
	.side-nav {
		position: fixed;
		top: 2.5rem;
		left: 1.5rem;
		display: block;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.side-nav.is-visible {
		opacity: 1;
		visibility: visible;
	}

	/* Long labels ("PhD opportunities") wrap rather than widen the menu into the text column */
	.side-nav ul {
		list-style: none;
		max-width: 9.3rem;
		margin: 0;
		padding: 0;
		border-left: 1px solid var(--rule-soft);
	}

	.side-nav a {
		display: block;
		margin-left: -1px;
		padding: 0.35rem 0 0.35rem 0.9rem;
		border-left: 1px solid transparent;
		line-height: 1.45;
		text-decoration: none;
		color: var(--ink-soft);
		font-size: 0.74rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	.side-nav a:hover,
	.side-nav a[aria-current] {
		color: var(--accent);
	}

	.side-nav a[aria-current] {
		border-left-color: var(--accent);
	}
}

/* Responsive */

@media (max-width: 44rem) {
	.fig__pair {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	/* Two photos stay side by side longer than a pair with a video: stacked, each would be
	   shown wider than its resolution supports */
	.fig__pair--photos {
		grid-template-columns: var(--cols);
		gap: 0.9rem;
	}

	.fig img.fig__plain {
		max-width: 20rem;
		margin: 0 auto;
	}

	.masthead {
		padding-top: 2.4rem;
	}

	.masthead__nav ul {
		gap: 0.5rem 1.4rem;
	}

	/* The row wraps here, so space the links like the nav instead of leaving a dot at a line end */
	.links {
		gap: 0.4rem 1.2rem;
	}

	.links li:not(:last-child)::after {
		content: none;
	}

	.section {
		padding-top: 2.8rem;
	}

	.intro__portrait {
		float: none;
		width: 11rem;
		margin: 0 auto 1.8rem;
	}

	.ledger__item {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.ledger__meta {
		padding-top: 0;
	}
}

@media (max-width: 30rem) {
	.fig__pair--photos {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}
}

@media print {
	.masthead__nav,
	.colophon a[href="#top"],
	.to-top,
	.side-nav {
		display: none;
	}

	body {
		background: #fff;
	}
}