@font-face {
	font-family: "0xProto";
	src:url("/web/fonts/0xProto-Regular.woff2") format("woff2");
	font-display: swap;
}

:root {
	color-scheme: light;
	--ctp-rosewater: #dc8a78;
	--ctp-flamingo: #dd7878;
	--ctp-pink: #ea76cb;
	--ctp-mauve: #8839ef;
	--ctp-red: #d20f39;
	--ctp-maroon: #e64553;
	--ctp-peach: #fe640b;
	--ctp-yellow: #df8e1d;
	--ctp-green: #40a02b;
	--ctp-teal: #179299;
	--ctp-sky: #04a5e5;
	--ctp-sapphire: #209fb5;
	--ctp-blue: #1e66f5;
	--ctp-lavender: #7287fd;
	--ctp-text: #4c4f69;
	--ctp-subtext1: #5c5f77;
	--ctp-subtext0: #6c6f85;
	--ctp-overlay2: #7c7f93;
	--ctp-overlay1: #8c8fa1;
	--ctp-overlay0: #9ca0b0;
	--ctp-surface2: #acb0be;
	--ctp-surface1: #bcc0cc;
	--ctp-surface0: #ccd0da;
	--ctp-base: #eff1f5;
	--ctp-mantle: #e6e9ef;
	--ctp-crust: #dce0e8;
	--font-main: "0xProto", "0xProto Nerd Font", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--border: color-mix(in srgb, var(--ctp-text) 18%, transparent);
	--shadow: color-mix(in srgb, var(--ctp-crust) 72%, transparent);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--ctp-rosewater: #f4dbd6;
		--ctp-flamingo: #f0c6c6;
		--ctp-pink: #f5bde6;
		--ctp-mauve: #c6a0f6;
		--ctp-red: #ed8796;
		--ctp-maroon: #ee99a0;
		--ctp-peach: #f5a97f;
		--ctp-yellow: #eed49f;
		--ctp-green: #a6da95;
		--ctp-teal: #8bd5ca;
		--ctp-sky: #91d7e3;
		--ctp-sapphire: #7dc4e4;
		--ctp-blue: #8aadf4;
		--ctp-lavender: #b7bdf8;
		--ctp-text: #cad3f5;
		--ctp-subtext1: #b8c0e0;
		--ctp-subtext0: #a5adcb;
		--ctp-overlay2: #939ab7;
		--ctp-overlay1: #8087a2;
		--ctp-overlay0: #6e738d;
		--ctp-surface2: #5b6078;
		--ctp-surface1: #494d64;
		--ctp-surface0: #363a4f;
		--ctp-base: #24273a;
		--ctp-mantle: #1e2030;
		--ctp-crust: #181926;
		--border: color-mix(in srgb, var(--ctp-text) 20%, transparent);
		--shadow: color-mix(in srgb, var(--ctp-crust) 88%, transparent);
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	margin: 0;
}

body {
	color: var(--ctp-text);
	font-family: var(--font-main);
	background:
		radial-gradient(circle at top left, color-mix(in srgb, var(--ctp-mauve) 24%, transparent), transparent 28rem),
		radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--ctp-peach) 18%, transparent), transparent 24rem),
		linear-gradient(135deg, var(--ctp-base), var(--ctp-mantle));
}

body::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	content: "";
	background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 52px 52px;
	mask-image: linear-gradient(to bottom, black, transparent 78%);
	opacity: 0.28;
}

h1,
h2,
p {
	margin: 0;
}

.page {
	min-height: 100vh;
}

.source-code-button {
	position: absolute;
	inset-block-start: clamp(1.2rem, 4vw, 2.125rem);
	inset-inline-end: clamp(1.2rem, 4vw, 2.125rem);
	display: inline-flex;
	gap: 12px;
	align-items: center;
	color: var(--ctp-lavender);
	font-size: clamp(1.2rem, 0.8vw + 0.95rem, 1.45rem);
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.source-code-button .project-glyph {
	width: clamp(1.5rem, 0.9vw + 1.15rem, 1.8rem);
	height: clamp(1.5rem, 0.9vw + 1.15rem, 1.8rem);
}

.source-code-button:hover {
	color: var(--ctp-teal);
}

.shell {
	width: min(1120px, calc(100% - 32px));
	margin: 0 auto;
	padding: clamp(28px, 6vw, 84px) 0;
}

.hero {
	position: relative;
	padding: clamp(28px, 7vw, 88px);
	border: 1px solid var(--border);
	border-radius: 32px;
	background: color-mix(in srgb, var(--ctp-surface0) 54%, transparent);
	box-shadow: 0 24px 80px var(--shadow);
}

.eyebrow {
	margin-bottom: 18px;
	color: var(--ctp-peach);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

h1 {
	max-width: 900px;
	font-size: clamp(3rem, 9vw, 5rem);
	line-height: 0.92;
	letter-spacing: -0.09em;
}

.lede {
	max-width: 760px;
	margin-top: 28px;
	color: var(--ctp-subtext1);
	font-size: clamp(1rem, 2vw, 1.3rem);
	line-height: 1.65;
}

.content-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}

.card {
	min-height: 210px;
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: 26px;
	background: color-mix(in srgb, var(--ctp-surface0) 58%, transparent);
}

.card h2 {
	color: var(--ctp-lavender);
	font-size: 1.2rem;
	letter-spacing: -0.04em;
}

.card p {
	margin-top: 16px;
	color: var(--ctp-subtext0);
	font-size: 1rem;
	line-height: 1.65;
}

.track-record-card {
	grid-column: span 2;
}

.contact-list,
.project-list,
.proof-list {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.proof-list {
	padding: 0;
	list-style: none;
}

.proof-list li {
	display: grid;
	gap: 5px;
	padding-left: 16px;
	border-left: 2px solid color-mix(in srgb, var(--ctp-teal) 42%, transparent);
	color: var(--ctp-subtext0);
	font-size: 0.9rem;
	line-height: 1.5;
}

.proof-title {
	color: var(--ctp-text);
	font-size: 0.95rem;
	font-weight: 800;
}

.project-item {
	display: grid;
	gap: 4px;
}

.contact-link,
.project-link {
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--ctp-text);
	font-size: 1rem;
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contact-link:hover,
.project-link:hover {
	color: var(--ctp-teal);
}

.project-status {
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--ctp-overlay2);
	font-size: 0.72rem;
	line-height: 1.3;
}

.project-title {
	display: flex;
	gap: 8px;
	align-items: center;
	color: inherit;
}

.project-description {
	display: block;
	margin-left: 32px;
	color: var(--ctp-subtext0);
	font-size: 0.86rem;
	line-height: 1.45;
}

.contact-glyph,
.project-glyph {
	flex: 0 0 auto;
	width: 1.2rem;
	height: 1.2rem;
	background: currentColor;
	mask: var(--link-icon) center / contain no-repeat;
}

.project-glyph {
	--link-icon: url("/web/icons/lucide/code-xml.svg");
}

.contact-glyph-email {
	--link-icon: url("/web/icons/simple-icons/gmail.svg");
}

.contact-glyph-github {
	--link-icon: url("/web/icons/simple-icons/github.svg");
}

.contact-glyph-linkedin {
	--link-icon: url("/web/icons/simple-icons/linkedin.svg");
}

@media (max-width: 820px) {
	.shell {
		width: min(100% - 20px, 1120px);
		padding: 10px 0 32px;
	}

	.hero {
		border-radius: 24px;
	}

	.content-grid {
		grid-template-columns: 1fr;
	}

	.track-record-card {
		grid-column: auto;
	}
}

.party-mode h1,
.party-mode h2 {
	animation: party-heading-colours 4.8s linear infinite;
}

.party-mode a {
	animation: party-heading-colours 2.4s linear infinite;
}

.party-mode h2 {
	animation-delay: -1.2s;
}

@keyframes party-heading-colours {
	0% {
		color: var(--ctp-rosewater);
	}

	7.14% {
		color: var(--ctp-flamingo);
	}

	14.28% {
		color: var(--ctp-pink);
	}

	21.42% {
		color: var(--ctp-mauve);
	}

	28.56% {
		color: var(--ctp-red);
	}

	35.7% {
		color: var(--ctp-maroon);
	}

	42.84% {
		color: var(--ctp-peach);
	}

	49.98% {
		color: var(--ctp-yellow);
	}

	57.12% {
		color: var(--ctp-green);
	}

	64.26% {
		color: var(--ctp-teal);
	}

	71.4% {
		color: var(--ctp-sky);
	}

	78.54% {
		color: var(--ctp-sapphire);
	}

	85.68% {
		color: var(--ctp-blue);
	}

	92.82% {
		color: var(--ctp-lavender);
	}

	100% {
		color: var(--ctp-rosewater);
	}
}