@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
	--ink: #e8f0e9;
	--muted: #8fa39a;
	--paper: #090f0e;
	--cream: #121d1a;
	--mint: #d4f36a;
	--coral: #ff806d;
	--line: rgba(232, 240, 233, 0.14);
	--shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	background-image: radial-gradient(circle at 78% 8%, rgba(48, 92, 75, 0.2), transparent 28%), radial-gradient(circle at 8% 48%, rgba(75, 43, 40, 0.12), transparent 25%);
	font-family: 'Space Grotesk', sans-serif;
	transition: background 0.3s ease, color 0.3s ease;
}
body.night {
	--ink: #10201d;
	--muted: #61716d;
	--paper: #f5f3ed;
	--cream: #fffdf7;
	--mint: #c7f36b;
	--coral: #ff765d;
	--line: rgba(16, 32, 29, 0.14);
	--shadow: 0 18px 50px rgba(16, 32, 29, 0.1);
	background-image: none;
}
body.night .hero::before { background: linear-gradient(90deg, rgba(245, 243, 237, 0.3) 0%, rgba(245, 243, 237, 0.1) 44%, rgba(245, 243, 237, 0.02) 100%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1040px, calc(100% - 32px)); margin: auto; }
.topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 0; border-bottom: 1px solid var(--line);
}
.mark { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.04em; }
.mark-dot { width: 12px; height: 12px; background: var(--coral); border-radius: 50%; display: inline-block; }
nav { display: flex; gap: 22px; color: var(--muted); font-size: 0.84rem; }
nav a { transition: color 0.2s ease; }
nav a:hover, nav a.active { color: var(--ink); }
.theme-toggle {
	border: 1px solid var(--line); background: transparent; color: var(--ink);
	width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
}
main { overflow: hidden; }
.hero {
	min-height: 65vh; display: grid; grid-template-columns: 1.1fr 0.9fr;
	position: relative; isolation: isolate; overflow: hidden; gap: 45px; align-items: center; padding: 50px 0 65px; background: var(--paper);
}
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 72%, transparent) 44%, color-mix(in srgb, var(--paper) 30%, transparent) 100%); }
.about-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; opacity: 0.38; mix-blend-mode: screen; filter: saturate(1) contrast(1.05); }
body.night .about-photo { opacity: 0.5; mix-blend-mode: multiply; filter: saturate(1.05) contrast(1.12); }
body.night .hero > div:first-child { position: relative; z-index: 1; padding: 14px 18px; margin: -14px -18px; background: rgba(245, 243, 237, 0.58); border-left: 2px solid var(--coral); text-shadow: 0 1px 8px rgba(255, 253, 247, 0.7); }
.eyebrow, .label { font-family: 'DM Mono', monospace; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--coral); }
h1 { max-width: 620px; margin: 14px 0 18px; font-size: clamp(2.8rem, 6vw, 6.4rem); line-height: 0.9; letter-spacing: -0.09em; }
.hero-copy { max-width: 440px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.hero-note { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-family: 'DM Mono', monospace; font-size: 0.7rem; }
.pulse { width: 9px; height: 9px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 7px rgba(199, 243, 107, 0.2); }
section { padding: 65px 0; border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.section-heading { display: grid; grid-template-columns: 0.35fr 1fr; gap: 24px; margin-bottom: 30px; }
h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 0.95; letter-spacing: -0.07em; }
.section-intro { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.98rem; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fact { padding: 25px; background: var(--cream); border: 1px solid var(--line); min-height: 150px; }
.fact strong { display: block; margin-top: 32px; font-size: 1.15rem; }
.timeline { border-top: 1px solid var(--line); }
.timeline-item { display: grid; grid-template-columns: 0.35fr 1fr 0.35fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.timeline-item h3, .project h3 { margin: 0 0 7px; font-size: 1.25rem; }
.timeline-item p, .project p { margin: 0; color: var(--muted); line-height: 1.55; }
.year { color: var(--coral); font-family: 'DM Mono', monospace; font-size: 0.78rem; }
.role { text-align: right; color: var(--muted); font-size: 0.86rem; }
.filters { display: flex; gap: 7px; margin-bottom: 18px; }
.filter { border: 1px solid var(--line); color: var(--muted); background: transparent; padding: 6px 10px; border-radius: 30px; cursor: pointer; font-size: 0.72rem; }
.filter.selected, .filter:hover { background: var(--ink); color: var(--paper); }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.project { background: var(--cream); border: 1px solid var(--line); min-height: 220px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.project[hidden] { display: none; }
.project:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: var(--shadow); }
.project-top { display: flex; justify-content: space-between; align-items: center; }
.project-number { font-family: 'DM Mono', monospace; color: var(--coral); }
.project-link { font-size: 1.35rem; }
.project-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.project-tags span { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--muted); border: 1px solid var(--line); padding: 5px 7px; }
.project-interactive { width: 100%; color: var(--ink); text-align: left; cursor: pointer; }
.project-interactive .project-detail { display: none; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.project-interactive.is-open .project-detail { display: block; }
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; }
.social-links { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.social-link { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); line-height: 0; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.social-link svg { display: block; width: 23px; height: 23px; fill: currentColor; }
.resume-link svg { fill: none; stroke: currentColor; }
.social-link:hover { background: var(--mint); color: var(--paper); transform: translateY(-3px); }
.contact-details { border-top: 1px solid var(--line); }
.contact-line { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.contact-line:hover { color: var(--coral); }
.contact-key { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) {
	.shell { width: min(100% - 24px, 600px); }
	.topbar { gap: 15px; } nav { display: none; }
	.hero { display: block; padding: 48px 0 65px; }
	.section-heading, .about-grid { grid-template-columns: 1fr; gap: 24px; }
	.timeline-item { grid-template-columns: 0.25fr 1fr; } .role { grid-column: 2; text-align: left; }
	.project-grid { grid-template-columns: 1fr; } .contact-wrap { grid-template-columns: 1fr; gap: 30px; }
	section { padding: 55px 0; }
}