:root {
	--bg: #0A0A0B;
	--border: #26262B;
	--text: #F2F2F3;
	--muted: #8B8B93;
	--faint: #74747C;
	--focus: #4D9FFF;
	--sans: 'Geist', system-ui, -apple-system, sans-serif;
	--mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.sprite { display: none; }

svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

a { color: inherit; }

.skip {
	position: absolute;
	left: -9999px;
	padding: 12px 18px;
	background: var(--text);
	color: var(--bg);
}

.skip:focus { left: 16px; top: 16px; z-index: 10; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* Two-column shell: sticky rail on the left, scrolling content on the right */
.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 110px 40px;
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 140px;
}

.rail-inner { position: sticky; top: 110px; }

.rail h1 {
	margin: 0;
	font-size: 52px;
	font-weight: 600;
	letter-spacing: -1.6px;
	line-height: 1.1;
}

.rail .role {
	margin: 14px 0 0;
	max-width: 22em;
	color: var(--muted);
	font-size: 17px;
	line-height: 1.5;
}

.rail .role a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: border-color .2s ease;
}

.rail .role a:hover { border-bottom-color: var(--text); }

.rail nav { margin-top: 48px; }

.rail nav ul, .socials, .stack, .projects, .links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rail nav li + li { margin-top: 14px; }

.rail nav a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
}

.rule {
	width: 32px;
	height: 1px;
	background: var(--faint);
	transition: width .25s ease, background-color .25s ease;
}

.rail nav a:hover, .rail nav a.active { color: var(--text); }
.rail nav a:hover .rule, .rail nav a.active .rule { width: 56px; background: var(--text); }

.socials { margin-top: 72px; display: flex; gap: 22px; }
.socials a { display: block; color: var(--muted); transition: color .2s ease; }
.socials svg { width: 21px; height: 21px; }
.socials a:hover { color: var(--text); }

.section-label {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	color: var(--faint);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.section-label::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border);
}

section { scroll-margin-top: 60px; }

main p { margin: 16px 0 0; color: var(--muted); font-size: 15px; }

main p.lead { margin-top: 26px; color: var(--text); font-size: 18px; line-height: 1.65; }

.stack { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }

.stack li {
	padding: 6px 11px;
	border: 1px solid var(--border);
	border-radius: 3px;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.4;
}

#experience, #projects { margin-top: 88px; }

.org {
	color: var(--muted);
	font-weight: 400;
}

.org::before {
	content: '\00b7';
	margin: 0 7px 0 4px;
	color: var(--faint);
}

.project { padding: 24px 0; border-top: 1px solid var(--border); }
.projects > li:first-child { border-top: 0; padding-top: 32px; }

.project-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
}

.project h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
}

.tech {
	flex: none;
	color: var(--faint);
	font-family: var(--mono);
	font-size: 11px;
	text-align: right;
}

.project p { margin-top: 10px; }

.links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 20px; }

.links a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 12px;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: color .2s ease, border-color .2s ease;
}

.links svg { width: 12px; height: 12px; transition: transform .2s ease; }
.links a:hover { color: var(--text); border-color: var(--muted); }
.links a:hover svg { transform: translate(2px, -2px); }

main footer { margin-top: 96px; padding-top: 20px; border-top: 1px solid var(--border); }

main footer p {
	margin: 0;
	color: var(--faint);
	font-family: var(--mono);
	font-size: 11px;
}

@media (max-width: 1180px) {
	.wrap { grid-template-columns: 340px minmax(0, 1fr); gap: 88px; padding: 88px 40px; }
	.rail-inner { top: 88px; }
	.rail h1 { font-size: 44px; }
}

@media (max-width: 1000px) {
	.wrap { grid-template-columns: 1fr; gap: 72px; padding: 72px 32px; }
	.rail-inner { position: static; }
	.socials { margin-top: 48px; }
}

@media (max-width: 620px) {
	.wrap { padding: 56px 22px; gap: 56px; }
	.rail h1 { font-size: 38px; letter-spacing: -1px; }
	.rail .role { font-size: 16px; }
	.project-head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.tech { text-align: left; }
	#experience, #projects { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}