/* Shared site styles. Homepage and historical archive pages. */

:root {
	color-scheme: light dark;
	--bg: #f4f2ee;
	--text: #1c1b19;
	--muted: #4a463f;
	--accent: #1c4f86;
	--accent-active: #163f6b;
	--line: #e2ddd4;
	--footer: #555148;
	--focus: #1c4f86;
	--surface: #fbfaf7;
	--portrait-ring: #d4cfc6;
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: clamp(1.0625rem, 0.25vw + 1rem, 1.125rem);
	line-height: 1.6;
}

.page {
	min-height: 100vh;
	min-height: 100dvh;
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(2.75rem, 10vh, 6rem) clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 4vh, 2.25rem);
	display: flex;
	flex-direction: column;
	overflow-wrap: break-word;
}

.identity {
	display: flex;
	align-items: center;
	gap: 1.15rem;
}

.identity-text,
.identity h1 {
	min-width: 0;
}

.role {
	margin: 0.35rem 0 0;
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.4;
}

.intro {
	margin: 1.75rem 0 0;
}

.intro p {
	margin: 0;
}

.intro p + p {
	margin-top: 0.95rem;
}

.viewer img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	background: var(--surface);
}

.viewer .crumb a,
.viewer .back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.portrait {
	width: 112px;
	height: 112px;
	max-width: 112px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--surface);
	border: 1px solid var(--portrait-ring);
}

.site-header h1 {
	margin: 0;
	font-size: clamp(2.125rem, 1.4vw + 1.7rem, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

main {
	flex: 1 0 auto;
}

.primary-links {
	list-style: none;
	margin: clamp(2.25rem, 6vh, 3.25rem) 0 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.primary-links li {
	border-bottom: 1px solid var(--line);
	padding-top: 0.35rem;
	padding-bottom: 0.85rem;
}

.primary-links a {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	width: 100%;
	min-height: 48px;
	padding: 0.15rem 0.15rem;
	color: var(--accent);
	font-size: clamp(1.125rem, 0.3vw + 1.05rem, 1.25rem);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(28, 79, 134, 0.14);
}

.primary-links .link-label {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.primary-links a:visited {
	color: var(--accent);
}

.primary-links a:hover,
.primary-links a:active {
	color: var(--accent-active);
}

.profile {
	margin-top: 2.5rem;
}

.profile h2 {
	margin: 0 0 0.85rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.profile h3 {
	margin: 0;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
}

.profile p {
	margin: 0.4rem 0 0;
}

.profile .dates {
	margin-top: 0.15rem;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.profile ul {
	margin: 0.75rem 0 0;
	padding-left: 1.15rem;
}

.profile li + li {
	margin-top: 0.55rem;
}

.profile article + article {
	margin-top: 1.35rem;
}

.site-footer {
	margin-top: clamp(3rem, 10vh, 5rem);
}

.old-portfolio {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--footer);
}

.old-portfolio a,
.old-portfolio a:visited,
.old-portfolio a:hover,
.old-portfolio a:active {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	display: inline-block;
	padding: 0.45rem 0.2rem;
	margin: -0.2rem 0 -0.2rem -0.2rem;
}

a:focus {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

a:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

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

.crumb {
	margin: 0 0 0.85rem;
	font-size: 0.9375rem;
}

.crumb a,
.prose a,
.project a,
.back a {
	color: var(--accent);
	text-underline-offset: 0.15em;
}

.crumb a:visited,
.prose a:visited,
.project a:visited,
.back a:visited {
	color: var(--accent);
}

.crumb a:hover,
.prose a:hover,
.project a:hover,
.back a:hover {
	color: var(--accent-active);
}

.note {
	margin: 1rem 0 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.prose h1 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.prose h2,
.entry h2 {
	margin: 1.75rem 0 0.45rem;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.prose h3 {
	margin: 1.4rem 0 0.4rem;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
}

.prose p,
.entry p {
	margin: 0.75rem 0;
}

.prose ul,
.prose ol {
	margin: 0.5rem 0 1rem;
	padding-left: 1.25rem;
}

.prose li {
	margin: 0.2rem 0;
}

.year-group h2 {
	margin: 1.85rem 0 0.15rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.project {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: 0.85rem 1.25rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
}

.project h3 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.35;
}

.project p {
	margin: 0.35rem 0 0;
}

.project img {
	display: block;
	width: 100%;
	background: var(--surface);
}

.entry {
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--line);
}

.entry h2 {
	margin-top: 0;
}

.meta {
	margin: 0.2rem 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.shots {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.shots img {
	display: block;
	width: 100%;
	background: var(--surface);
}

.shots figcaption {
	margin-top: 0.35rem;
	color: var(--muted);
	font-size: 0.95rem;
}

@media (max-width: 560px) {
	.project {
		grid-template-columns: 1fr;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #161513;
		--text: #f4f1eb;
		--muted: #c8bfb4;
		--accent: #9ec4f5;
		--accent-active: #d7e7fb;
		--line: #5c574f;
		--footer: #b7aea3;
		--focus: #9ec4f5;
		--surface: #211f1c;
		--portrait-ring: #6a645c;
	}
}

@media (prefers-reduced-motion: no-preference) {
	a {
		transition: color 180ms ease, background-color 180ms ease, text-decoration-color 180ms ease;
	}

	.portrait,
	.identity h1,
	.role,
	.intro,
	.primary-links,
	.profile:first-of-type > h2,
	.profile:first-of-type > article,
	.profile:nth-of-type(2),
	.site-footer {
		--i: 0;
		animation: rise-in 0.8s ease-out both;
		animation-delay: calc(var(--i) * 110ms);
	}

	.identity h1 { --i: 1; }
	.role { --i: 2; }
	.intro { --i: 3; }
	.primary-links { --i: 4; }
	.profile:first-of-type > h2 { --i: 5; }
	.profile:first-of-type > article:nth-child(2) { --i: 6; }
	.profile:first-of-type > article:nth-child(3) { --i: 7; }
	.profile:nth-of-type(2) { --i: 8; }
	.site-footer { --i: 9; }

	@keyframes rise-in {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}