:root {
	--background: #09090b;
	--background-soft: #0d0d11;

	--text: #f4f4f5;
	--text-secondary: #a1a1aa;
	--text-dark: #71717a;

	--border: rgba(255, 255, 255, 0.11);
	--border-strong: rgba(255, 255, 255, 0.18);

	--purple: #a78bfa;
	--cyan: #67e8f9;

	--page-width: 1180px;
}


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


html {
	scroll-behavior: smooth;
}


body {
	background:
		radial-gradient(
			circle at 10% 0%,
			rgba(139, 92, 246, 0.06),
			transparent 35rem
		),
		var(--background);

	color: var(--text);

	font-family: 'DM Sans', sans-serif;

	line-height: 1.6;

	-webkit-font-smoothing: antialiased;
}


a {
	color: inherit;
	text-decoration: none;
}


button {
	font: inherit;
}


ul {
	list-style: none;
}


::selection {
	background: var(--purple);
	color: #09090b;
}


.page-width {
	width: min(calc(100% - 48px), var(--page-width));
	margin-left: auto;
	margin-right: auto;
}



/* HEADER */

.site-header {
	position: relative;
	z-index: 100;

	border-bottom: 1px solid var(--border);
}


.header-inner {
	width: min(calc(100% - 48px), var(--page-width));
	height: 76px;

	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;
}


.site-logo {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 16px;
	font-weight: 500;

	letter-spacing: -0.03em;
}


.site-logo span {
	color: var(--cyan);
}


.desktop-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}


.desktop-nav a {
	font-family: 'IBM Plex Mono', monospace;

	font-size: 13px;

	color: var(--text-secondary);

	transition: color 150ms ease;
}


.desktop-nav a:hover {
	color: var(--cyan);
}


.menu-button {
	display: none;

	background: none;
	border: none;

	color: var(--text);

	cursor: pointer;

	font-family: 'IBM Plex Mono', monospace;
}


.mobile-nav {
	display: none;
}



/* GENERAL */

.section {
	padding-top: 130px;
	padding-bottom: 130px;

	border-bottom: 1px solid var(--border);
}


.section-top {
	display: grid;

	grid-template-columns:
		minmax(180px, 0.45fr)
		1fr;

	gap: 40px;

	margin-bottom: 74px;
}


.section-label {
	font-family: 'IBM Plex Mono', monospace;

	font-size: 11px;

	letter-spacing: 0.11em;

	color: var(--cyan);
}


.section-description {
	max-width: 430px;

	font-size: 15px;

	color: var(--text-secondary);
}



/* HERO */

.hero {
	min-height: calc(100vh - 77px);

	display: grid;

	grid-template-columns:
		minmax(0, 1.55fr)
		minmax(260px, 0.45fr);

	gap: 100px;

	align-items: center;

	padding-top: 120px;
	padding-bottom: 120px;
}


.hero-main h1 {
	max-width: 820px;

	margin-top: 30px;

	font-family: 'Space Grotesk', sans-serif;

	font-weight: 500;

	font-size: clamp(52px, 7vw, 98px);

	line-height: 0.98;

	letter-spacing: -0.065em;
}


.hero-main h1 span {
	display: block;

	color: var(--text-secondary);
}


.hero-copy {
	max-width: 640px;

	margin-top: 38px;

	font-size: 18px;

	line-height: 1.65;

	color: var(--text-secondary);
}


.hero-links {
	display: flex;

	gap: 30px;

	margin-top: 38px;
}


.hero-links a {
	font-family: 'IBM Plex Mono', monospace;

	font-size: 13px;

	border-bottom: 1px solid var(--border-strong);

	padding-bottom: 4px;

	transition:
		color 150ms ease,
		border-color 150ms ease;
}


.hero-links a:hover {
	color: var(--cyan);
	border-color: var(--cyan);
}



/* HERO SIDE */

.hero-meta {
	border-left: 1px solid var(--border);

	padding-left: 34px;
}


.meta-block {
	padding: 27px 0;

	border-bottom: 1px solid var(--border);
}


.meta-block:first-child {
	padding-top: 0;
}


.meta-label {
	margin-bottom: 8px;

	font-family: 'IBM Plex Mono', monospace;

	font-size: 10px;

	text-transform: uppercase;

	letter-spacing: 0.12em;

	color: var(--text-dark);
}


.meta-primary {
	font-size: 14px;
}


.meta-secondary {
	margin-top: 2px;

	font-size: 13px;

	color: var(--text-secondary);
}


.meta-list {
	display: flex;

	flex-wrap: wrap;

	gap: 6px 14px;

	font-family: 'IBM Plex Mono', monospace;

	font-size: 12px;

	color: var(--text-secondary);
}


.site-status {
	display: flex;
	align-items: center;
	gap: 8px;

	padding-top: 24px;

	font-family: 'IBM Plex Mono', monospace;

	font-size: 10px;

	color: var(--text-dark);
}


.status-dot {
	display: inline-block;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #4ade80;

	box-shadow:
		0 0 10px rgba(74, 222, 128, 0.5);
}



/* WORK */

.work-list {
	border-top: 1px solid var(--border);
}


.work-item {
	display: grid;

	grid-template-columns:
		70px
		minmax(240px, 0.72fr)
		1fr;

	gap: 36px;

	padding: 58px 0;

	border-bottom: 1px solid var(--border);
}


.work-number {
	font-family: 'IBM Plex Mono', monospace;

	font-size: 11px;

	color: var(--text-dark);
}


.work-category {
	margin-bottom: 11px;

	font-family: 'IBM Plex Mono', monospace;

	font-size: 10px;

	letter-spacing: 0.08em;

	color: var(--purple);
}


.work-title h2 {
	max-width: 360px;

	font-family: 'Space Grotesk', sans-serif;

	font-weight: 500;

	font-size: 30px;

	line-height: 1.12;

	letter-spacing: -0.035em;
}


.work-description {
	max-width: 550px;

	color: var(--text-secondary);

	font-size: 15px;
}


.work-description > p {
	margin-bottom: 23px;
}


.work-description ul {
	display: flex;
	flex-direction: column;

	gap: 6px;
}


.work-description li {
	position: relative;

	padding-left: 16px;
}


.work-description li::before {
	content: '↳';

	position: absolute;
	left: 0;

	color: var(--text-dark);
}


.work-stack {
	display: flex;

	flex-wrap: wrap;

	gap: 8px;

	margin-top: 26px;
}


.work-stack span {
	padding: 5px 9px;

	border: 1px solid var(--border);

	font-family: 'IBM Plex Mono', monospace;

	font-size: 10px;

	color: var(--text-dark);
}



/* ABOUT */

.about-layout {
	display: grid;

	grid-template-columns:
		1fr
		0.8fr;

	gap: 120px;
}


.about-heading h2 {
	max-width: 700px;

	font-family: 'Space Grotesk', sans-serif;

	font-size: clamp(40px, 5vw, 66px);

	font-weight: 500;

	line-height: 1.02;

	letter-spacing: -0.055em;
}


.about-heading h2 span {
	display: block;

	color: var(--text-secondary);
}


.about-copy {
	max-width: 540px;

	font-size: 17px;

	color: var(--text-secondary);
}


.about-copy > p + p {
	margin-top: 24px;
}


.education {
	margin-top: 54px;

	padding-top: 27px;

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


.education strong {
	display: block;

	margin-bottom: 5px;

	color: var(--text);

	font-weight: 500;
}


.education span {
	display: block;

	font-size: 14px;
}



/* STACK */

.stack-table {
	border-top: 1px solid var(--border);
}


.stack-row {
	display: grid;

	grid-template-columns:
		minmax(160px, 0.32fr)
		1fr;

	gap: 40px;

	padding: 32px 0;

	border-bottom: 1px solid var(--border);
}


.stack-category {
	font-family: 'IBM Plex Mono', monospace;

	font-size: 11px;

	color: var(--text-dark);
}


.stack-items {
	display: flex;

	flex-wrap: wrap;

	gap: 10px 30px;
}


.stack-items span {
	font-size: 16px;
}



/* CONTACT */

.contact-layout {
	display: grid;

	grid-template-columns:
		1.1fr
		0.6fr;

	gap: 120px;
}


.contact-heading {
	max-width: 760px;

	margin-top: 22px;

	font-family: 'Space Grotesk', sans-serif;

	font-size: clamp(46px, 6vw, 78px);

	font-weight: 500;

	line-height: 1;

	letter-spacing: -0.055em;
}


.contact-heading span {
	display: block;

	color: var(--purple);
}


.contact-info {
	padding-top: 30px;
}


.contact-info > p {
	max-width: 420px;

	color: var(--text-secondary);
}


.contact-links {
	margin-top: 42px;

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


.contact-links a {
	display: flex;

	align-items: center;
	justify-content: space-between;

	padding: 17px 0;

	border-bottom: 1px solid var(--border);

	font-family: 'IBM Plex Mono', monospace;

	font-size: 12px;

	transition:
		color 150ms ease,
		padding-left 150ms ease;
}


.contact-links a:hover {
	padding-left: 7px;

	color: var(--cyan);
}



/* FOOTER */

footer {
	min-height: 150px;

	display: flex;

	align-items: center;
	justify-content: space-between;

	font-family: 'IBM Plex Mono', monospace;

	font-size: 10px;

	color: var(--text-dark);
}


.footer-left,
.footer-right {
	display: flex;

	gap: 24px;
}


.footer-right p:first-child {
	display: flex;
	align-items: center;

	gap: 7px;
}



/* REVEAL */

.reveal {
	opacity: 0;

	transform: translateY(18px);

	transition:
		opacity 600ms ease,
		transform 600ms ease;
}


.reveal.visible {
	opacity: 1;

	transform: translateY(0);
}



/* TABLET */

@media (max-width: 900px) {

	.hero {
		grid-template-columns: 1fr;

		gap: 80px;
	}


	.hero-meta {
		display: grid;

		grid-template-columns: repeat(2, 1fr);

		gap: 0 40px;

		border-left: none;

		border-top: 1px solid var(--border);

		padding-left: 0;
	}


	.site-status {
		align-self: end;
	}


	.work-item {
		grid-template-columns:
			45px
			1fr;
	}


	.work-description {
		grid-column: 2;
	}


	.about-layout {
		grid-template-columns: 1fr;

		gap: 60px;
	}


	.contact-layout {
		grid-template-columns: 1fr;

		gap: 55px;
	}

}



/* MOBILE */

@media (max-width: 650px) {

	.page-width {
		width: min(calc(100% - 32px), var(--page-width));
	}


	.header-inner {
		width: min(calc(100% - 32px), var(--page-width));

		height: 68px;
	}


	.desktop-nav {
		display: none;
	}


	.menu-button {
		display: block;
	}


	.mobile-nav {
		display: none;

		padding:
			5px
			16px
			24px;

		background: var(--background);

		border-bottom: 1px solid var(--border);
	}


	.mobile-nav.open {
		display: flex;

		flex-direction: column;

		gap: 4px;
	}


	.mobile-nav a {
		padding: 10px 0;

		font-family: 'IBM Plex Mono', monospace;

		font-size: 13px;

		color: var(--text-secondary);
	}


	.hero {
		min-height: auto;

		padding-top: 90px;
		padding-bottom: 90px;
	}


	.hero-main h1 {
		font-size: clamp(48px, 15vw, 70px);
	}


	.hero-copy {
		font-size: 16px;
	}


	.hero-links {
		flex-direction: column;

		align-items: flex-start;

		gap: 16px;
	}


	.hero-meta {
		grid-template-columns: 1fr;
	}


	.section {
		padding-top: 90px;
		padding-bottom: 90px;
	}


	.section-top {
		grid-template-columns: 1fr;

		gap: 15px;

		margin-bottom: 50px;
	}


	.work-item {
		grid-template-columns: 1fr;

		gap: 20px;

		padding: 45px 0;
	}


	.work-description {
		grid-column: auto;
	}


	.work-title h2 {
		font-size: 27px;
	}


	.stack-row {
		grid-template-columns: 1fr;

		gap: 18px;
	}


	.stack-items {
		gap: 8px 18px;
	}


	.footer-left,
	.footer-right {
		flex-direction: column;

		gap: 4px;
	}


	footer {
		align-items: flex-start;

		padding-top: 45px;
		padding-bottom: 45px;

		gap: 30px;
	}

}



/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}


	.reveal {
		opacity: 1;

		transform: none;

		transition: none;
	}

}