@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/atkinson-bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/playfair-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/playfair-700.woff2') format('woff2');
}

:root {
	--color-bg: #0c1018;
	--color-text: #e2ddd5;
	--color-text-muted: rgb(226 221 213 / 60%);
	--color-accent: #c98a4b;
	--color-surface: rgb(226 221 213 / 4%);
	--color-surface-hover: rgb(226 221 213 / 8%);
	--color-bg-rgb: 12, 16, 24;
	--color-text-rgb: 226, 221, 213;
	--color-accent-rgb: 201, 138, 75;
	--font-sans: 'Atkinson Hyperlegible', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
	--font-display: 'Playfair Display', georgia, 'Times New Roman', serif;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--text-xs: 0.875rem;
	--text-sm: 1rem;
	--text-md: 1.25rem;
	--text-lg: 1.5rem;
	--text-xl: 2rem;
	--text-2xl: 3rem;
	--header-height: 4rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--transition-fast: 200ms ease;
	--transition-normal: 300ms ease;
	--transition-theme: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-theme {
	--color-bg: #0c1018;
	--color-text: #e2ddd5;
	--color-text-muted: rgb(226 221 213 / 60%);
	--color-accent: #c98a4b;
	--color-surface: rgb(226 221 213 / 4%);
	--color-surface-hover: rgb(226 221 213 / 8%);
	--color-bg-rgb: 12, 16, 24;
	--color-text-rgb: 226, 221, 213;
	--color-accent-rgb: 201, 138, 75;
}

.light-theme {
	--color-bg: #f7f3ee;
	--color-text: #1c2830;
	--color-text-muted: rgb(28 40 48 / 60%);
	--color-accent: #2a7d6e;
	--color-surface: rgb(28 40 48 / 4%);
	--color-surface-hover: rgb(28 40 48 / 8%);
	--color-bg-rgb: 247, 243, 238;
	--color-text-rgb: 28, 40, 48;
	--color-accent-rgb: 42, 125, 110;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
	font-family: var(--font-sans);
	background-color: var(--color-bg);
	color: var(--color-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background-color var(--transition-normal), color var(--transition-normal);
}

body > header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	padding: 0 var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgb(var(--color-bg-rgb), 0.95);
	backdrop-filter: blur(8px);
	z-index: 100;
	border-bottom: 1px solid rgb(var(--color-text-rgb), 0.1);
	transition: transform var(--transition-normal), background-color var(--transition-theme);
}

body > header.header-hidden {
	transform: translateY(-100%);
}

body > header > h1 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	letter-spacing: 0.02em;
}

body > header > nav {
	display: flex;
	align-items: center;
}

body > header > nav details {
	display: none;
}

body > header > nav ul {
	display: flex;
	gap: var(--space-4);
	list-style: none;
}

body > header > nav a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

body > header > nav a:hover {
	color: var(--color-accent);
}

.theme-toggle {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgb(var(--color-text-rgb), 0.2);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: all var(--transition-theme);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.theme-toggle:hover {
	border-color: var(--color-accent);
	transform: scale(1.1);
}

.theme-toggle svg {
	transition: transform var(--transition-theme);
}


main {
	position: relative;
	min-height: 100vh;
	padding-top: var(--header-height);
}

main > section {
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-normal);
}

main > section:target {
	display: block;
	opacity: 1;
	visibility: visible;
}

main > section > h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	color: var(--color-accent);
	text-align: center;
	margin-bottom: var(--space-6);
}

#about {
	padding: var(--space-6) var(--space-4);
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: var(--space-6);
	max-width: 1200px;
	margin: 0 auto;
	min-height: 80vh;
	align-items: start;
	opacity: 1;
	visibility: visible;
}

#about:target {
	display: grid;
}

main:has(section:target) > #about:not(:target) {
	display: none;
	opacity: 0;
	visibility: hidden;
}

#about > figure {
	width: 100%;
}

#about > figure > img {
	width: 100%;
	max-width: 250px;
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-4);
}

#about > figure > nav {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
	justify-content: center;
}

#about > figure > nav a {
	color: var(--color-text);
	transition: all var(--transition-fast);
}

#about > figure > nav a:hover {
	color: var(--color-accent);
	transform: translateY(-2px);
}

#about > figure > nav svg {
	width: var(--text-xl);
	height: var(--text-xl);
	display: block;
}

#about > article {
	max-width: 800px;
}

#about > article > p {
	margin-bottom: var(--space-4);
	font-size: var(--text-xs);
	font-family: var(--font-sans);
}

#about > article > ul {
	position: relative;
	list-style: none;
	padding: 0;
	margin: var(--space-6) 0;
	width: 100%;
}

#about > article > ul::before {
	content: "";
	position: absolute;
	top: 0;
	left: 120px;
	height: 100%;
	border-left: 2px solid rgb(var(--color-text-rgb), 0.1);
}

#about > article > ul > li {
	position: relative;
	margin: var(--space-4) 0;
	padding-left: 160px;
	width: 100%;
	min-height: 100px;
}

#about > article > ul > li::before {
	content: "";
	position: absolute;
	left: 113px;
	top: 0;
	width: 16px;
	height: 16px;
	background: var(--color-bg);
	border: 2px solid var(--color-accent);
	border-radius: 50%;
}

#about > article > ul > li > h4 {
	font-size: var(--text-md);
	margin-bottom: var(--space-2);
	color: var(--color-accent);
	font-family: var(--font-display);
}

#about > article > ul > li > h4 + p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}

#about > article > ul > li > p:last-of-type {
	color: var(--color-text);
	font-size: var(--text-sm);
	line-height: 1.6;
}

#about > article > ul > li > time {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	text-align: right;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	display: block;
}

#about > article > ul > li > time + time {
	top: 1.5em;
}

#research {
	padding: var(--space-6) var(--space-4);
}

#research > article {
	background: var(--color-surface);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	max-width: 800px;
	margin: 0 auto var(--space-4);
	transition: transform var(--transition-normal);
}

#research > article:hover {
	transform: translateY(-5px);
}

#research > article > footer {
	margin-top: var(--space-3);
}

#research mark {
	background: var(--color-accent);
	color: var(--color-bg);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: 500;
}

#articles {
	padding: var(--space-6) var(--space-4);
}

#articles > article {
	background: var(--color-surface);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#articles > article > h3 {
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

#articles > article > p {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-bottom: var(--space-2);
}

#articles > article > p > em {
	font-style: italic;
}

#articles > article > nav,
#projects > article > nav {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

#articles > article > nav > a,
#projects > article > nav > a {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	background: var(--color-accent);
	color: var(--color-bg);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: var(--text-xs);
	transition: all var(--transition-fast);
}

#articles > article > nav > a:hover,
#projects > article > nav > a:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

#projects {
	padding: var(--space-6) var(--space-4);
}

#projects > article {
	background: var(--color-surface);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#projects > article > h3 {
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

#projects > article > p:first-of-type {
	color: var(--color-accent);
	font-size: var(--text-sm);
	margin-bottom: var(--space-2);
}

#projects > article > p:last-of-type {
	color: var(--color-text-muted);
}

#contact {
	padding: var(--space-6) var(--space-4);
}

#contact > address {
	display: grid;
	gap: var(--space-4);
	max-width: 600px;
	margin: 0 auto;
	font-style: normal;
}

#contact > address > p {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-surface);
	border-radius: var(--radius-md);
}

#contact > address svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

#contact > address a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

#contact > address a:hover {
	color: var(--color-accent);
}

body > footer {
	padding: var(--space-4);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

body > footer > nav a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

body > footer > nav a:hover {
	color: var(--color-text);
}

:focus {
	outline: 1px solid var(--color-accent);
	outline-offset: 2px;
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.rotating {
	animation: rotate 0.4s ease-in-out;
}

@media (width <= 768px) {
	:root {
		--header-height: 3.5rem;
	}

	body > header > h1 {
		font-size: var(--text-lg);
	}

	body > header > nav details {
		display: block;
	}

	body > header > nav details > summary {
		list-style: none;
		cursor: pointer;
		color: var(--color-text);
		display: flex;
		align-items: center;
		padding: var(--space-2);
	}

	body > header > nav details > summary::-webkit-details-marker {
		display: none;
	}

	body > header > nav > ul {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: rgb(var(--color-bg-rgb), 0.98);
		padding: var(--space-4);
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		border-bottom: 1px solid rgb(var(--color-text-rgb), 0.1);
		display: none;
	}

	body > header > nav details[open] + ul {
		display: flex;
	}

	#about {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	#about > figure {
		text-align: center;
	}

	#about > figure > img {
		margin: 0 auto var(--space-4);
	}

	#about > article > ul::before {
		left: 24px;
	}

	#about > article > ul > li {
		padding-left: 48px;
	}

	#about > article > ul > li::before {
		left: 17px;
		width: 14px;
		height: 14px;
	}

	#about > article > ul > li > time {
		position: relative;
		left: 0;
		width: 100%;
		text-align: left;
		margin-bottom: var(--space-2);
		display: inline;
		margin-right: var(--space-2);
	}

	#about > article > ul > li > time + time {
		top: auto;
	}

	.theme-toggle {
		position: relative;
		z-index: 1001;
	}
}

@media (width <= 480px) {
	body > header > h1 {
		font-size: var(--text-md);
	}
}

@media (width >= 769px) {
	body > header {
		transition: transform var(--transition-normal);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0s;
		--transition-normal: 0s;
	}

	html {
		scroll-behavior: auto;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--color-bg: #f7f3ee;
		--color-text: #1c2830;
		--color-text-muted: rgb(28 40 48 / 60%);
		--color-accent: #2a7d6e;
	}
}

@media (prefers-contrast: more) {
	:root {
		--color-text-muted: var(--color-text);
	}
}