/* Site theme, loaded after yeti/_yeti.css. Yeti's docs: .tools/yeti/docs/llms.txt */

@layer yeti.reset, yeti.base, yeti.theme, yeti.layouts, yeti.components, yeti.utilities;

:root {
	/* An academic blue: deep, sober and only slightly saturated. */
	--yeti-hue-primary: 255;
	--yeti-hue-secondary: 220;
	--yeti-chroma: 0.12;

	/* The type and space scale, written with clamp() only.
	   Yeti derives these from clamp(0, tan(atan2(100vw - 320px, 960px)), 1), which
	   browsers on an older Gecko (LibreWolf 152, for one) reject: every size then
	   collapses to nothing. These are the same values Yeti computes (base 1rem to
	   1.125rem, ratio 1.2 to 1.333, from a 320px to a 1280px viewport), growing
	   linearly with the viewport in a form every current browser understands. */
	--yeti-space-xs: clamp(0.6331rem, 0.7149rem + -0.1022vw, 0.6944rem);
	--yeti-space-sm: clamp(0.8333rem, 0.8298rem + 0.01771vw, 0.844rem);
	--yeti-space-md: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);
	--yeti-space-lg: clamp(1.2rem, 1.1rem + 0.4994vw, 1.5rem);
	--yeti-space-xl: clamp(2rem, 1.917rem + 0.4167vw, 2.25rem);
	--yeti-space-2xl: clamp(4rem, 3.833rem + 0.8333vw, 4.5rem);
	--yeti-space-3xl: clamp(8rem, 7.667rem + 1.667vw, 9rem);
	--yeti-space-4xl: clamp(16rem, 15.33rem + 3.333vw, 18rem);
	--yeti-text-xs: clamp(0.6331rem, 0.7149rem + -0.1022vw, 0.6944rem);
	--yeti-text-sm: clamp(0.8333rem, 0.8298rem + 0.01771vw, 0.844rem);
	--yeti-text-md: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);
	--yeti-text-lg: clamp(1.2rem, 1.1rem + 0.4994vw, 1.5rem);
	--yeti-text-xl: clamp(1.44rem, 1.254rem + 0.9317vw, 1.999rem);
	--yeti-text-2xl: clamp(1.728rem, 1.416rem + 1.561vw, 2.665rem);
	--yeti-text-3xl: clamp(2.074rem, 1.581rem + 2.464vw, 3.552rem);
	--yeti-text-display: clamp(2.488rem, 1.739rem + 3.744vw, 4.735rem);
	--yeti-radius-sm: clamp(0.25rem, 0.2396rem + 0.05208vw, 0.2812rem);
	--yeti-radius-md: clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem);
	--yeti-radius-lg: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);
	--yeti-leading-md: calc(1em + clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem));

	/* Neutral surfaces and text: white paper and near-black ink, with no blue cast.
	   Yeti tints these with the brand hue by default. */
	--yeti-color-surface: light-dark(oklch(100% 0 0), oklch(16% 0.01 255));
	--yeti-color-surface-raised: light-dark(oklch(97.5% 0.003 255), oklch(20% 0.012 255));
	--yeti-color-surface-sunken: light-dark(oklch(96% 0.004 255), oklch(13% 0.01 255));
	--yeti-color-text: light-dark(oklch(22% 0.01 255), oklch(92% 0.005 255));
	--yeti-color-text-muted: light-dark(oklch(48% 0.012 255), oklch(70% 0.01 255));
	--yeti-color-border: light-dark(oklch(89% 0.006 255), oklch(30% 0.012 255));

	/* Serif headings over a sans body. Noto Serif and DejaVu Serif are the usual
	   serifs on Linux; Charter and Iowan on macOS; Georgia on Windows. */
	--yeti-font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans", Roboto, sans-serif;
	--yeti-font-heading: "Iowan Old Style", Charter, "Bitstream Charter", "Noto Serif", Georgia, "DejaVu Serif", serif;
	--yeti-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	--yeti-weight-heading: 600;
	--yeti-tracking-heading: -0.015em;

	--yeti-link-color: var(--yeti-color-primary-text);
	--yeti-link-color-hover: var(--yeti-color-primary-strong);

	/* The nav, its inner edge aligned with the reading column. */
	--site-navy: oklch(29% 0.075 255);
	--site-column: var(--yeti-width-lg);
}

/* The site bar: one navy in both light and dark mode, its contents on the
   same edges as the reading column below it. */
.nav {
	color-scheme: dark;
	color: oklch(97% 0.01 255);
	padding-inline: max(var(--yeti-space-md), calc((100% - var(--site-column)) / 2));
	--yeti-nav-surface: var(--site-navy);
	--yeti-nav-link: oklch(86% 0.035 255);
	--yeti-nav-panel: var(--site-navy);
	--yeti-nav-panel-text: oklch(97% 0.01 255);
}
.nav [data-brand] {
	color: oklch(98% 0.01 255);
	font-family: var(--yeti-font-heading);
	font-weight: 600;
}
.nav [aria-current] {
	color: oklch(100% 0 0);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}
.nav > button[popovertarget] {
	margin-inline-start: auto;
}

/* Secondary text: dates, places, journals. */
.meta {
	color: var(--yeti-color-text-muted);
	font-size: var(--yeti-text-sm);
}

/* Lists of posts: title and date read as one unit, the summary just below. */
.post-list h2,
.post-list h3 {
	font-size: var(--yeti-text-lg);
}
.post-list h2 a,
.post-list h3 a {
	text-decoration: none;
}
.post-list h2 a:hover,
.post-list h3 a:hover {
	text-decoration: underline;
}
.post-list > li > .meta {
	margin-block-start: 0.15em;
}
.post-list > li > p + p {
	margin-block-start: var(--yeti-space-xs);
}

/* Publications: the citation, then a line of links. */
.publications {
	--yeti-list-gap: var(--yeti-space-md);
}
.publication > p + p {
	margin-block-start: 0.25rem;
}
.publication cite {
	font-style: normal;
	font-weight: var(--yeti-weight-strong);
}
.publication .journal {
	font-style: italic;
}
.pub-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem var(--yeti-space-sm);
	font-size: var(--yeti-text-sm);
}

/* CV entries: the place sits under the title-and-dates row. */
.entry h3 {
	font-size: var(--yeti-text-md);
}

/* Footer: quiet, on the sunken surface. */
.site-footer {
	font-size: var(--yeti-text-sm);
}
.site-footer a {
	color: var(--yeti-color-text-muted);
}
.site-footer a:hover {
	color: var(--yeti-link-color-hover);
}

/* Tag badges are links, but read as labels. */
a.badge {
	text-decoration: none;
}

/* Table of contents: nested entries indented under their section. */
.toc ul ul {
	padding-inline-start: var(--yeti-space-sm);
}

/* Wide formulas scroll instead of widening the page. */
.math {
	overflow-x: auto;
	overflow-y: hidden;
}

/* Diagrams and figures in posts never overflow the column. */
article img {
	max-inline-size: 100%;
	block-size: auto;
}

/* Figures: plots keep their white paper in dark mode too, with the caption below. */
.figure {
	margin-inline: 0;
}
.figure img,
.hero-figure img,
.highlights img {
	background-color: oklch(100% 0 0);
	border-radius: var(--yeti-radius-sm);
}
.figure img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 30rem;
	object-fit: contain;
	border: 1px solid var(--yeti-color-border);
}
.figure figcaption {
	margin-block-start: var(--yeti-space-xs);
	color: var(--yeti-color-text-muted);
	font-size: var(--yeti-text-sm);
}

/* Research highlights: whole figures, never cropped, on a white card top. */
.highlights .card > img {
	object-fit: contain;
	padding: var(--yeti-space-sm);
	border-radius: 0;
	border-block-end: 1px solid var(--yeti-color-border);
}
.highlights h3 {
	font-size: var(--yeti-text-md);
	line-height: 1.3;
}
.highlights h3 a {
	text-decoration: none;
}
.highlights .card:hover h3 a {
	text-decoration: underline;
}

/* The research overview beside the introduction. */
.hero-figure {
	margin: 0;
}
.hero-figure img {
	object-fit: contain;
}

/* Lab projects: cards of text, with the status above the title. */
.projects .card {
	padding: var(--yeti-space-md);
}
.projects h3 {
	font-size: var(--yeti-text-md);
	line-height: 1.3;
}
.projects ul {
	padding-inline-start: 0;
}
.projects .meta {
	line-height: 1.4;
}

/* Talks share the publication list's look. */
.talk > p + p {
	margin-block-start: 0.25rem;
}
.talk cite {
	font-style: normal;
	font-weight: var(--yeti-weight-strong);
}