:root {
	--ink: #111820;
	--paper: #f4f7f8;
	--surface: #ffffff;
	--muted: #5f6c76;
	--line: #cbd4d9;
	--azure: #0969da;
	--azure-dark: #064b9b;
	--signal: #ef5b3f;
	--grid: rgba(17, 24, 32, 0.055);
	--display: "Space Grotesk", sans-serif;
	--body: "IBM Plex Sans", sans-serif;
	--mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background:
		linear-gradient(90deg, var(--grid) 1px, transparent 1px),
		linear-gradient(var(--grid) 1px, transparent 1px),
		var(--paper) !important;
	background-size: 32px 32px !important;
	color: var(--ink) !important;
	font-family: var(--body) !important;
	font-size: 16px;
	line-height: 1.65;
}

a { text-underline-offset: 0.2em; }

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

header {
	position: sticky !important;
	top: 0;
	z-index: 40;
	background: rgba(244, 247, 248, 0.92) !important;
	border-color: var(--line) !important;
	backdrop-filter: blur(14px);
}

header nav {
	height: 72px !important;
	max-width: 1240px !important;
}

header nav > a img {
	width: 42px !important;
	height: 42px !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	ring: none !important;
}

header nav > a span {
	font-family: var(--display);
	font-weight: 650 !important;
	letter-spacing: 0 !important;
}

header nav > a span span {
	color: var(--azure) !important;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500 !important;
	text-transform: uppercase;
}

header button {
	border-radius: 3px !important;
	border-color: var(--line) !important;
}

header nav > div a {
	color: var(--muted);
	font-family: var(--mono);
	font-size: .72rem;
	text-decoration: none;
	text-transform: uppercase;
}

header nav > div a:hover { color: var(--azure); }

header > div:last-child {
	background: var(--paper);
	border-color: var(--line) !important;
}

main > section:first-child {
	min-height: min(760px, calc(100vh - 72px));
	background: var(--ink);
	color: white;
}

.gradient-mesh {
	background:
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) !important;
	background-size: 32px 32px !important;
}

main > section:first-child > div:last-child {
	max-width: 1240px !important;
	padding-top: clamp(4rem, 10vh, 8rem) !important;
	padding-bottom: clamp(4rem, 10vh, 8rem) !important;
}

main > section:first-child .grid {
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr) !important;
	gap: clamp(3rem, 8vw, 8rem) !important;
}

main > section:first-child .grid > div:first-child::before {
	content: "AZURE ARCHITECT  /  APPLIED AI  /  PLATFORM ENGINEERING";
	display: block;
	margin-bottom: 1.75rem;
	color: #82b8ff;
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .08em;
}

h1 {
	max-width: 780px;
	color: white !important;
	font-family: var(--display) !important;
	font-size: clamp(3.6rem, 8vw, 7.2rem) !important;
	font-weight: 620 !important;
	line-height: .9 !important;
	letter-spacing: -.055em !important;
}

h1::after {
	content: ".";
	color: var(--signal);
}

main > section:first-child p {
	color: #bdc9d3 !important;
	font-size: 1rem !important;
}

main > section:first-child p:first-of-type {
	max-width: 650px;
	color: white !important;
	font-family: var(--display);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important;
	font-weight: 420;
	line-height: 1.35;
}

main > section:first-child a {
	min-height: 46px;
	border-radius: 3px !important;
	border-color: #596773 !important;
	background: transparent !important;
	color: white !important;
	font-family: var(--mono);
	font-size: .74rem !important;
	letter-spacing: .02em;
	text-transform: uppercase;
}

main > section:first-child a:first-child {
	border-color: var(--signal) !important;
	background: var(--signal) !important;
}

main > section:first-child a:hover { border-color: #fff !important; }

main > section:first-child .hidden.lg\:block { display: block !important; }

main > section:first-child .hidden.lg\:block > div {
	padding: 12px 12px 44px;
	background: #e8edf0;
	transform: rotate(2deg);
}

main > section:first-child .hidden.lg\:block > div::after {
	content: "CHRISTIAN WUNDERLICH  /  MICROSOFT";
	position: absolute;
	bottom: 13px;
	left: 16px;
	color: var(--ink);
	font-family: var(--mono);
	font-size: .65rem;
	letter-spacing: .05em;
}

main > section:first-child .hidden.lg\:block > div > div { display: none; }

main > section:first-child img {
	width: min(31vw, 390px) !important;
	height: min(40vw, 500px) !important;
	border-radius: 0 !important;
	object-position: 50% 22% !important;
	ring: none !important;
	box-shadow: none !important;
}

main > section:nth-child(2) {
	position: relative;
	z-index: 2;
	max-width: 1240px !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

main > section:nth-child(2) > div {
	gap: 0 !important;
	border-right: 1px solid var(--line);
}

main > section:nth-child(2) article {
	min-height: 310px;
	padding: 2.4rem !important;
	border: 0 !important;
	border-left: 1px solid var(--line) !important;
	border-radius: 0 !important;
	background: rgba(255,255,255,.88) !important;
	box-shadow: none !important;
}

.tile { transition: background-color .2s ease !important; }
.tile:hover { transform: none !important; box-shadow: none !important; }
main > section:nth-child(2) article:hover { background: white !important; }

main > section:nth-child(2) article > div:first-child {
	align-items: flex-start !important;
	flex-direction: column;
}

main > section:nth-child(2) article > div:first-child span {
	width: 34px !important;
	height: 34px !important;
	border-radius: 3px !important;
	background: var(--ink) !important;
	color: white !important;
}

main > section:nth-child(2) h3,
#experience h3,
#experience h4,
main > section:last-child h2 {
	font-family: var(--display) !important;
	letter-spacing: -.025em !important;
}

main > section:nth-child(2) h3 {
	font-size: 1.4rem !important;
}

main > section:nth-child(2) li {
	color: var(--muted) !important;
	font-size: .84rem !important;
}

main > section:nth-child(2) li span { background: var(--signal) !important; }

#experience {
	max-width: 1240px !important;
	padding-top: 8rem !important;
	padding-bottom: 8rem !important;
}

#experience > div:first-child {
	margin-bottom: 3.5rem !important;
	padding-bottom: 1.5rem;
	border-bottom: 3px solid var(--ink);
}

#experience h2,
main > section:last-child h2 {
	color: var(--ink) !important;
	font-family: var(--display) !important;
	font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -.045em !important;
}

#experience > div:first-child p {
	margin-top: 1rem !important;
}

#experience > div:not(:first-child) {
	position: relative;
	padding: 2.5rem 0 4rem 15rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

#experience > div:not(:first-child) > div:first-child {
	display: block !important;
}

#experience > div:not(:first-child) > div:first-child > span {
	position: absolute;
	top: 2.85rem;
	left: 0;
	color: var(--azure) !important;
	font-family: var(--mono);
	font-size: .72rem !important;
}

#experience h3 {
	color: var(--ink) !important;
	font-size: clamp(1.45rem, 3vw, 2rem) !important;
}

#experience > div:nth-child(2) > .grid {
	display: block !important;
	margin-top: 2rem;
}

#experience > div:nth-child(2) > .grid > div {
	position: relative;
	padding: 2rem 0 2rem 2rem !important;
	border: 0 !important;
	border-top: 1px solid var(--line) !important;
	border-radius: 0 !important;
	background: transparent !important;
}

#experience > div:nth-child(2) > .grid > div::before {
	content: "";
	position: absolute;
	top: 2.55rem;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--signal);
}

#experience h4 {
	color: var(--ink) !important;
	font-size: 1.18rem;
	text-decoration: none !important;
}

#experience p,
#experience li { color: var(--muted) !important; }

#experience strong,
#experience .font-semibold { color: var(--ink) !important; }

main > section:last-child {
	max-width: 1240px !important;
	padding-bottom: 8rem !important;
}

main > section:last-child > div {
	padding: 0 !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	background: white !important;
	box-shadow: none !important;
	overflow: hidden;
}

main > section:last-child img { width: 100%; }

footer {
	border-color: var(--ink) !important;
	background: var(--ink) !important;
}

footer > div { max-width: 1240px !important; }
footer, footer div, footer a { color: #bdc9d3 !important; }
footer .font-medium { color: white !important; }
footer a:hover { color: white !important; }
footer a[aria-label] { border-radius: 3px !important; border-color: #596773 !important; }

@media (max-width: 1023px) {
	main > section:first-child .grid {
		grid-template-columns: minmax(0, 1fr) 270px !important;
	}

	main > section:first-child img {
		width: 270px !important;
		height: 350px !important;
	}
}

@media (max-width: 767px) {
	header nav > a span { font-size: .88rem; }
	header > div:last-child a { color: var(--ink); text-decoration: none; }

	main > section:first-child { min-height: auto; }

	main > section:first-child > div:last-child {
		padding-top: 4.5rem !important;
		padding-bottom: 3rem !important;
	}

	main > section:first-child .grid {
		display: flex !important;
		flex-direction: column;
		gap: 3rem !important;
	}

	h1 { font-size: clamp(3.15rem, 16vw, 5rem) !important; }

	main > section:first-child .hidden.lg\:block {
		display: block !important;
		align-self: center;
	}

	main > section:first-child img {
		width: min(78vw, 340px) !important;
		height: min(98vw, 430px) !important;
	}

	main > section:nth-child(2) { padding: 0 !important; }
	main > section:nth-child(2) > div { display: block !important; }
	main > section:nth-child(2) article { min-height: 0; border-top: 1px solid var(--line) !important; }

	#experience { padding-top: 5rem !important; padding-bottom: 5rem !important; }

	#experience > div:not(:first-child) {
		padding: 4.5rem 0 3rem !important;
	}

	#experience > div:not(:first-child) > div:first-child > span {
		top: 1.5rem;
	}

	#experience > div:nth-child(2) > .grid > div { padding-left: 1.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

.dark body { background-color: var(--paper) !important; color: var(--ink) !important; }
.dark header { background: rgba(244, 247, 248, .92) !important; }
.dark header nav > a > span { color: var(--ink) !important; }
.dark header button { color: var(--ink) !important; }