:root {
	color-scheme: dark;
	--black: #0b0b0b;
	--ink: #f1f1ee;
	--muted: #989894;
	--dim: #5c5c59;
	--line: #30302e;
	--line-strong: #555552;
	--panel: #111110;
	--panel-hover: #191918;
	--radius: 6px;
	--font-display: "Google Sans Flex", system-ui, sans-serif;
	--font-mono: "Google Sans Code", "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	min-height: 100vh;
	background: var(--black);
	color: var(--ink);
	font-family: var(--font-display);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--black); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 3px; }

.bg-grid, .bg-blob { display: none; }

.section {
	position: relative;
	z-index: 1;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 28px;
}
.section-header {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 10px;
}
.section-eyebrow, .eyebrow {
	margin: 0;
	color: var(--muted);
	font: 11px var(--font-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.section-title {
	margin: 0;
	color: var(--ink);
	font-size: clamp(23px, 4vw, 32px);
	font-weight: 500;
	letter-spacing: -.04em;
}

.hero {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 100px 24px 140px;
	scroll-snap-align: start;
}
.hero-bento {
	width: 100%;
	max-width: 924px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.65fr 1fr;
	grid-template-areas: "main mark" "main stats";
	border: 1px solid var(--line);
}
.bento-tile { min-width: 0; }
.bento-tile--main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(30px, 6vw, 76px);
	border-right: 1px solid var(--line);
}
.bento-tile--mark, .bento-tile--stats {
	background: var(--panel);
	padding: 22px;
}
.bento-tile--mark {
	grid-area: mark;
	min-height: 180px;
	display: grid;
	place-items: center;
	border-bottom: 1px solid var(--line);
}
.bento-tile--stats {
	grid-area: stats;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.bento-tile__label, .bento-tile__meta {
	margin: 0;
	color: var(--muted);
	font: 11px var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.bento-tile__meta { letter-spacing: 0; text-transform: none; }

.blob-mark {
	width: 88px;
	height: 88px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 8px 9px);
}
.blob-mark__letter {
	color: var(--ink);
	font: 500 32px var(--font-mono);
}
.eyebrow { margin-bottom: 24px; }
.title {
	margin: 0 0 24px;
	color: var(--ink);
	font-size: clamp(42px, 8vw, 78px);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.075em;
}
.accent { color: var(--ink); }
.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-bottom: 22px;
	padding: 5px 8px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	color: var(--ink);
	font: 12px var(--font-mono);
}
.status-chip__dot { width: 6px; height: 6px; background: var(--ink); }
.status-chip__cursor { animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }
.subtitle {
	max-width: 480px;
	margin: 0 0 28px;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.55;
}
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	color: var(--ink);
	font: 12px var(--font-mono);
	transition: background .15s ease, color .15s ease;
}
.btn:hover, .btn--tonal:hover { background: var(--ink); color: var(--black); }
.btn__icon { width: 14px; height: 14px; filter: grayscale(1) brightness(1.7); }
.btn:hover .btn__icon { filter: grayscale(1) brightness(0); }
.btn--small { padding: 7px 10px; font-size: 11px; }
.ripple { display: none; }
.scroll-hint {
	display: inline-flex;
	gap: 8px;
	margin-top: 48px;
	color: var(--dim);
	font: 10px var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.scroll-hint:hover { color: var(--ink); }

.stat-row { display: flex; gap: 24px; }
.stat { display: flex; flex-direction: column; }
.stat__value { color: var(--ink); font: 500 20px var(--font-mono); }
.stat__label { color: var(--dim); font: 10px var(--font-mono); text-transform: uppercase; }

.skills-section, .projects-section { padding: 76px 0 90px; scroll-snap-align: start; }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.stack-row {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 14px;
	min-height: 130px;
	padding: 20px 18px 20px 0;
	border-bottom: 1px solid var(--line);
}
.stack-row:nth-child(odd) { border-right: 1px solid var(--line); }
.stack-row:nth-child(even) { padding-left: 18px; }
.stack-row__number { color: var(--dim); font: 12px var(--font-mono); }
.stack-row h3 {
	margin: 0 0 12px;
	color: var(--ink);
	font: 500 14px var(--font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.stack-row p { margin: 0; color: var(--muted); font: 14px/1.6 var(--font-mono); }

.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.project-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 300px;
	padding: 24px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--panel);
	transition: background .15s ease;
}
.project-card:hover { background: var(--panel-hover); }
.project-card__title { margin: 0; font: 500 18px var(--font-mono); }
.project-card__desc { flex: 1; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.project-card__tags, .hobby-card__tags { display: flex; flex-wrap: wrap; gap: 12px; }
.tag {
	color: var(--muted);
	font: 11px var(--font-mono);
	letter-spacing: .04em;
}
.tag::before { content: "·"; margin-right: 6px; color: var(--line-strong); }
.tag img { display: none; }
.project-card__footer { display: flex; justify-content: flex-start; }
.project-card--more { align-items: center; justify-content: center; min-height: 300px; color: var(--muted); text-align: center; }
.project-card--more:hover { color: var(--ink); }
.project-card--more__icon { width: 25px; height: 25px; }

.hobbies-section { padding: 76px 0 120px; scroll-snap-align: start; }
.hobby-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hobby-card { position: relative; min-height: 340px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.hobby-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .42; transition: opacity .2s ease; }
.hobby-card:hover img, .hobby-card:focus-within img { opacity: .62; }
.hobby-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--black)); }
.hobby-card__body { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 20px; }
.hobby-card__title { margin: 0 0 6px; font: 500 16px var(--font-mono); }
.hobby-card__line { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.tag--ghost { color: var(--dim); }

.footer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 24px 150px; color: var(--dim); font: 11px var(--font-mono); }
.footer__links { display: flex; gap: 10px; }
.footer__links a { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 4px; }
.footer__links a:hover { border-color: var(--ink); }
.footer__links img { width: 13px; height: 13px; filter: grayscale(1) brightness(1.5); }

.bottom-nav {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 200;
	display: flex;
	gap: 0;
	transform: translateX(-50%);
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	background: rgba(11, 11, 11, .94);
}
.bottom-nav__indicator { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: transform .2s ease, width .2s ease; z-index: 0; }
.bottom-nav__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 10px 13px; color: var(--muted); font: 11px var(--font-mono); }
.bottom-nav__item.is-active { color: var(--black); }
.bottom-nav__item svg { width: 14px; height: 14px; }
.bottom-nav__label { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (max-width: 760px) {
	.hero { padding: 76px 20px 140px; }
	.hero-bento { grid-template-columns: 1fr; grid-template-areas: "main" "stats" "mark"; }
	.bento-tile--main { border-right: 0; border-bottom: 1px solid var(--line); }
	.skills-grid, .project-grid { grid-template-columns: 1fr; }
	.stack-row:nth-child(odd) { border-right: 0; }
	.stack-row:nth-child(even) { padding-left: 0; }
	.hobby-grid { grid-template-columns: 1fr; }
	.section { padding: 0 20px; }
}
@media (max-width: 480px) {
	.bottom-nav { width: calc(100% - 24px); justify-content: space-between; }
	.bottom-nav__item { flex: 1; justify-content: center; padding: 11px 8px; }
	.bottom-nav__label { display: none; }
}