:root {
	/* Palette: Yale blue, tomato jam, slate grey, peach glow, lavender blush. */
	--yale-blue: #08415c;
	--tomato-jam: #cc2936;
	--slate-grey: #6b818c;
	--peach-glow: #f1bf98;
	--lavender-blush: #eee5e9;

	/* Light: lavender blush page, Yale blue text; tomato jam and slate grey
	   nudged toward Yale blue so links and muted text stay readable on cards. */
	--bg: color-mix(in srgb, var(--lavender-blush) 50%, white);
	--surface: var(--lavender-blush);
	--border: color-mix(in srgb, var(--lavender-blush) 75%, var(--slate-grey));
	--text: var(--yale-blue);
	--muted: color-mix(in srgb, var(--slate-grey) 60%, var(--yale-blue));
	--accent: color-mix(in srgb, var(--tomato-jam) 85%, var(--yale-blue));
	--font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', SFMono-Regular, Menlo, monospace;
	color-scheme: light dark;
}
/* Theme follows the OS unless the header toggle sets data-theme on <html>.
   Dark: deep Yale blue page, cool off-white text, peach glow accent
   (tomato jam is too dark to read on blue). */
:root[data-theme='light'] {
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bg: color-mix(in srgb, var(--yale-blue) 45%, black);
		--surface: color-mix(in srgb, var(--yale-blue) 65%, black);
		--border: color-mix(in srgb, var(--yale-blue) 90%, black);
		--text: color-mix(in srgb, white 92%, var(--yale-blue));
		--muted: color-mix(in srgb, var(--slate-grey) 45%, var(--lavender-blush));
		--accent: var(--peach-glow);
	}
}
:root[data-theme='dark'] {
	--bg: color-mix(in srgb, var(--yale-blue) 45%, black);
	--surface: color-mix(in srgb, var(--yale-blue) 65%, black);
	--border: color-mix(in srgb, var(--yale-blue) 90%, black);
	--text: color-mix(in srgb, white 92%, var(--yale-blue));
	--muted: color-mix(in srgb, var(--slate-grey) 45%, var(--lavender-blush));
	--accent: var(--peach-glow);
	color-scheme: dark;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 18px/1.7 var(--font-sans);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}
.container {
	max-width: 44rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}
main.container {
	padding-top: 1.5rem;
	padding-bottom: 4rem;
}
h1,
h2,
h3,
h4 {
	line-height: 1.25;
	margin: 2em 0 0.5em;
	letter-spacing: -0.01em;
}
h1 {
	font-size: 2.2rem;
	margin-top: 0;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.2rem;
}
p,
ul,
ol {
	margin: 0 0 1.25em;
}
a {
	color: var(--accent);
	text-underline-offset: 3px;
}
a:hover {
	text-decoration-thickness: 2px;
}
img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}
hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2.5rem 0;
}
code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--surface);
	padding: 0.15em 0.35em;
	border-radius: 4px;
}
pre {
	padding: 1rem 1.25rem;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.55;
	border: 1px solid var(--border);
	background: var(--surface);
	margin: 0 0 1.5em;
}
pre code {
	background: none;
	padding: 0;
	font-size: inherit;
}
blockquote {
	margin: 0 0 1.25em;
	padding-left: 1rem;
	border-left: 3px solid var(--accent);
	color: var(--muted);
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25em;
}
th,
td {
	text-align: left;
	padding: 0.4em 0.6em;
	border-bottom: 1px solid var(--border);
}
button {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}
.muted {
	color: var(--muted);
}
.tag {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.05rem 0.55rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	background: var(--surface);
	line-height: 1.6;
}
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 0.4rem 0 0;
	list-style: none;
}

/* ---------- Header & footer ---------- */

.site-header {
	border-bottom: 1px solid var(--border);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.brand {
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
}
.site-header nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.theme-toggle {
	display: inline-flex;
	padding: 0.35rem;
	border: none;
	background: none;
	color: var(--muted);
}
.theme-toggle:hover {
	color: var(--text);
	background: var(--surface);
}
.theme-toggle svg {
	width: 1.1rem;
	height: 1.1rem;
}
.site-header nav a {
	color: var(--muted);
	text-decoration: none;
}
.site-header nav a:hover,
.site-header nav a[aria-current='page'] {
	color: var(--text);
}
.site-header nav a[aria-current='page'] {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.site-footer {
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 0.9rem;
}
.site-footer .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
}
.site-footer .links {
	display: flex;
	gap: 1rem;
}
.site-footer a {
	color: var(--muted);
}
.site-footer a:hover {
	color: var(--text);
}

/* ---------- Home ---------- */

.intro {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-bottom: 3rem;
}
.intro p:last-child {
	margin-bottom: 0;
}
.headshot {
	flex-shrink: 0;
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 50%;
	border: 1px solid var(--border);
	object-fit: cover;
}
.lead {
	font-size: 1.35rem;
	line-height: 1.5;
}

/* ---------- Projects ---------- */

.grid {
	display: grid;
	gap: 1rem;
	margin-bottom: 1rem;
}
.card {
	padding: 1.25rem;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}
.card h3 {
	margin: 0 0 0.4rem;
}
.card p {
	margin: 0 0 0.5rem;
}
.card .links {
	display: flex;
	gap: 1rem;
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
}

/* ---------- About ---------- */

.skills {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.6rem 1.5rem;
	margin: 0;
}
.skills dt {
	font-weight: 600;
}
.skills dd {
	margin: 0;
}
.skills dd .tags {
	margin: 0.3rem 0 0;
}
.entry {
	margin-bottom: 1.5rem;
}
.entry .head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0 1rem;
}
.entry .head h3 {
	margin: 0;
}

@media (max-width: 600px) {
	body {
		font-size: 17px;
	}
	h1 {
		font-size: 1.8rem;
	}
	.skills {
		grid-template-columns: 1fr;
	}
	.intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
	.headshot {
		width: 6.5rem;
		height: 6.5rem;
	}
}