:root {
	--accent: #36b99a;
	--accent-dark: #238f77;
	--accent-soft: #e9f8f4;
	--ink: #18242e;
	--muted: #66727d;
	--surface: #ffffff;
	--surface-alt: #f7f9f9;
	--border: #e1e8e7;
	--shadow: 0 18px 50px rgba(30, 54, 65, 0.08);
}

html {
	scroll-behavior: smooth;
}

body,
input,
select,
textarea {
	color: var(--muted);
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
	background: var(--surface);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ink);
	letter-spacing: -0.025em;
}

a {
	color: var(--accent-dark);
}

.container {
	max-width: 72rem;
	width: calc(100% - 6rem);
}

#header {
	background: linear-gradient(160deg, #3fc2a3 0%, #25967d 100%);
	box-shadow: -12px 0 40px rgba(23, 63, 55, 0.12);
}

#header > header {
	padding-bottom: 2em;
}

#header > header .avatar {
	box-shadow: 0 14px 40px rgba(8, 58, 48, 0.24);
	margin-bottom: 1.6em;
	width: 7.5em;
}

#header > header p {
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.5;
}

.sidebar-affiliations {
	color: rgba(255, 255, 255, 0.76);
	font-size: 0.72em;
	line-height: 1.55;
	margin-top: 1em;
}

#header > nav ul li {
	border-top-color: rgba(255, 255, 255, 0.14);
}

#header > nav ul li a {
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

#header > nav ul li a.active {
	color: var(--accent-dark) !important;
}

#header > footer .icons li a {
	color: rgba(255, 255, 255, 0.78);
}

#main > section {
	border-top: 1px solid var(--border);
}

#main > section:nth-child(even) {
	background: var(--surface-alt);
}

#main > section > .container {
	padding-bottom: 5.5em;
	padding-top: 5.5em;
}

.eyebrow {
	color: var(--accent-dark);
	font-size: 0.72em;
	font-weight: 900;
	letter-spacing: 0.14em;
	margin-bottom: 1.25em;
	text-transform: uppercase;
}

header.major h2 {
	color: var(--ink);
	font-size: clamp(2.35em, 5vw, 4.3em);
	line-height: 1.06;
	max-width: 13ch;
}

.hero-copy {
	color: #34434e;
	font-size: 1.25em;
	line-height: 1.75;
	max-width: 48em;
}

.hero > p:not(.eyebrow) {
	max-width: 52em;
}

.status-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65em;
	margin: 2em 0;
}

.status-list span {
	background: var(--accent-soft);
	border: 1px solid #cdeee5;
	border-radius: 999px;
	color: var(--accent-dark);
	font-size: 0.76em;
	font-weight: 800;
	padding: 0.55em 0.9em;
}

.hero-actions {
	margin-top: 2em;
}

.focus-matrix {
	border-bottom: 1px solid var(--border);
	margin-top: 2em;
}

.focus-row {
	align-items: baseline;
	border-top: 1px solid var(--border);
	display: grid;
	gap: 2em;
	grid-template-columns: 7em minmax(0, 1fr);
	padding: 1.15em 0;
}

.focus-row h4,
.focus-row p {
	margin: 0;
}

.focus-row h4 {
	color: var(--accent-dark);
	font-size: 0.78em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.focus-row p {
	color: #34434e;
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
.button.primary {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
.button.primary:hover {
	background: var(--accent);
	border-color: var(--accent);
}

.expertise-grid,
.project-grid,
.education-grid {
	display: grid;
	gap: 1.25em;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 2.5em;
}

.expertise-card,
.project-card,
.education-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0.8em;
	box-shadow: 0 1px 0 rgba(30, 54, 65, 0.02);
	padding: 1.8em;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.expertise-card:hover,
.project-card:hover,
.education-card:hover {
	border-color: #b9ddd4;
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}

.expertise-card > .icon {
	color: var(--accent-dark);
	display: block;
	font-size: 1.35em;
	margin-bottom: 1em;
}

.expertise-card h4,
.project-card h4,
.education-card h4 {
	font-size: 1.15em;
	margin-bottom: 0.6em;
}

.expertise-card p,
.project-card p,
.education-card p {
	margin-bottom: 0;
}

.recognition {
	border-top: 1px solid var(--border);
	margin-top: 2.5em;
	padding-top: 2em;
}

.badge-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em;
	list-style: none;
	margin: 1.25em 0 0;
	padding: 0;
}

.badge-list li {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0.45em;
	color: var(--ink);
	font-size: 0.8em;
	font-weight: 700;
	padding: 0.65em 0.85em;
}

.badge-list a {
	border: 0;
	color: inherit;
}

.project-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card.featured {
	grid-column: 1 / -1;
	padding: 2.25em;
}

.project-card.featured p {
	max-width: 56em;
}

.project-visuals {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 2em;
}

.project-visuals figure {
	background: #11191f;
	border: 1px solid #26353e;
	border-radius: 0.65em;
	margin: 0;
	overflow: hidden;
}

.project-visuals .visual-wide {
	grid-column: 1 / -1;
}

.project-visuals img {
	background: #0e151a;
	display: block;
	height: auto;
	max-height: 34em;
	object-fit: contain;
	width: 100%;
}

.project-visuals figcaption {
	color: #c8d2d7;
	font-size: 0.72em;
	font-weight: 700;
	padding: 0.8em 1em;
}

.project-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1.2em;
}

.project-meta span {
	color: var(--accent-dark);
	font-size: 0.68em;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.text-link {
	border: 0;
	display: inline-block;
	font-weight: 800;
	margin-top: 1.25em;
}

.timeline {
	margin-top: 2.75em;
}

.timeline-item {
	display: grid;
	gap: 2.5em;
	grid-template-columns: 10em minmax(0, 1fr);
	padding: 0 0 3em;
	position: relative;
}

.timeline-item::before {
	background: var(--accent);
	border: 4px solid var(--accent-soft);
	border-radius: 50%;
	content: "";
	height: 0.9em;
	left: 10.55em;
	position: absolute;
	top: 0.25em;
	width: 0.9em;
	z-index: 1;
}

.timeline-item::after {
	background: var(--border);
	content: "";
	height: 100%;
	left: 10.95em;
	position: absolute;
	top: 1em;
	width: 1px;
}

.timeline-item:last-child::after {
	display: none;
}

.timeline-date,
.education-year {
	color: var(--accent-dark);
	font-size: 0.72em;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.timeline-content {
	padding-left: 1.5em;
}

.role-org {
	color: var(--muted);
	font-size: 0.78em;
	font-weight: 800;
	margin-bottom: 0.45em;
	text-transform: uppercase;
}

.timeline-content h4 {
	font-size: 1.3em;
	margin-bottom: 0.65em;
}

.degree {
	color: var(--accent-dark);
	font-size: 0.85em;
	font-weight: 800;
}

.education-year {
	margin-bottom: 1em;
}

.contact-layout {
	display: grid;
	gap: 4em;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.contact-intro p {
	max-width: 28em;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0.45em;
	box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-response {
	font-size: 0.85em;
	margin-top: 1em;
}

.form-response.success {
	color: #1c7b65;
}

.form-response.error {
	color: #b13d3d;
}

.sr-only {
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

#footer {
	border-top: 1px solid var(--border);
}

@media screen and (max-width: 1280px) {
	.container {
		width: calc(100% - 4rem);
	}
}

@media screen and (max-width: 1024px) {
	.container {
		max-width: none;
		width: calc(100% - 4rem) !important;
	}
}

@media screen and (max-width: 736px) {
	.container {
		width: calc(100% - 2.5rem) !important;
	}

	#main > section > .container {
		padding-bottom: 3.5em;
		padding-top: 3.5em;
	}

	header.major h2 {
		font-size: 2.4em;
	}

	.hero-copy {
		font-size: 1.08em;
	}

	.focus-row {
		gap: 0.4em;
		grid-template-columns: 1fr;
		padding: 1em 0;
	}

	.expertise-grid,
	.project-grid,
	.education-grid,
	.contact-layout {
		grid-template-columns: 1fr;
	}

	.project-card.featured {
		grid-column: auto;
		padding: 1.8em;
	}

	.project-visuals {
		grid-template-columns: 1fr;
	}

	.project-visuals .visual-wide {
		grid-column: auto;
	}

	.timeline-item {
		gap: 0.65em;
		grid-template-columns: 1fr;
		padding-left: 1.5em;
	}

	.timeline-item::before {
		left: 0;
		top: 0.1em;
	}

	.timeline-item::after {
		left: 0.4em;
	}

	.timeline-content {
		padding-left: 0;
	}

	.contact-layout {
		gap: 2.5em;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}