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

:root {
	--ink: #f5f5f5;
	--paper: #050505;
	--lime: #ff007f;
	--coral: #902d41;
	--blue: #004fff;
	--turquoise: #31afd4;
	--line: rgba(49, 175, 212, .32);
	--muted: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: var(--paper);
	color: var(--ink);
	font-family: 'DM Sans', sans-serif;
}
a { color: inherit; text-decoration: none; }
.mono, .eyebrow, .index, .year { font-family: 'DM Mono', monospace; }
.page { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 5vw; }

header { min-height: 50vh; display: flex; flex-direction: column; justify-content: space-between; padding: 27px 0 42px; }
nav { position: fixed; top: 0; right: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-start; padding: 16px 5vw; background: #111; font-size: 13px; border-bottom: 1px solid var(--line); color: var(--turquoise); }
nav a { color: var(--turquoise); }
nav a:hover { color: var(--ink); }
.mark { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.mark-dot { display: none; }
.nav-links { display: flex; gap: 27px; margin-left: auto; }
.nav-flight { margin-left: 18px; font-weight: 700; color: var(--turquoise); border-bottom: 2px solid var(--turquoise); padding-bottom: 2px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8vw; align-items: end; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--muted); }
h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(64px, 12vw, 178px); line-height: .82; letter-spacing: -.07em; margin: 22px 0 35px; max-width: 850px; }
.hero-note { border-left: 2px solid var(--coral); padding-left: 18px; margin-bottom: 10px; max-width: 250px; font-size: 16px; line-height: 1.45; }
.hero-note strong { display: block; margin-bottom: 9px; font-family: 'Space Grotesk', sans-serif; font-size: 21px; }
.scroll-cue { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.arrow { font-size: 22px; color: var(--coral); }

section { border-top: 1px solid var(--line); padding: 85px 0 110px; }
.section-grid { display: grid; grid-template-columns: 25% 1fr; gap: 0.5vw; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: 27px; margin: 0; letter-spacing: -.04em; color: var(--turquoise); }
.intro { max-width: 680px; font-size: clamp(24px, 3vw, 42px); line-height: 1.08; letter-spacing: -.045em; margin: 0; }
.intro em { color: var(--coral); font-style: normal; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 65px; }
.fact { border-top: 2px solid var(--ink); padding-top: 12px; }
.fact b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 34px; margin-bottom: 5px; }
.fact span { color: var(--muted); font-size: 13px; }

.work-list, .experience-list { border-top: 1px solid var(--line); }
.work-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); padding: 23px 0; }
.work-row.has-details { align-items: start; }
.index { color: var(--coral); font-size: 12px; }
.work-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 3vw, 39px); letter-spacing: -.05em; display: inline; margin-right: 12px; white-space: nowrap; }
.work-type { color: var(--muted); font-size: 12px; margin-left: auto; }
.work-bullets { grid-column: 2 / -1; margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.work-bullets li { padding-left: 4px; margin-bottom: 5px; }
.experience-list { margin-top: 0; }
.experience-item { display: grid; grid-template-columns: 125px 1fr 150px; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.year { font-size: 12px; color: var(--muted); }
.experience-item h3 { margin: 0 0 7px; font-family: 'Space Grotesk', sans-serif; font-size: 23px; letter-spacing: -.03em; }
.experience-item p { max-width: 530px; color: var(--muted); line-height: 1.5; margin: 0; font-size: 14px; }
.experience-bullets { max-width: 530px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.experience-bullets li { padding-left: 4px; margin-bottom: 5px; }
.company { font-size: 13px; text-align: right; }
.education-list { border-top: 1px solid var(--line); }
.education-item { display: grid; grid-template-columns: 1fr 170px; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.education-item h3 { margin: 0 0 7px; font-family: 'Space Grotesk', sans-serif; font-size: 23px; letter-spacing: -.03em; }
.education-item p { margin: 0 0 9px; color: var(--muted); line-height: 1.5; font-size: 14px; }
.education-meta { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; }
.education-project-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding-bottom: 7px; font-family: 'Space Grotesk', sans-serif; font-size: 18px; }
.education-project-link:hover { color: var(--blue); }
.work-project-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; margin-left: 60px; border-bottom: 2px solid var(--ink); padding-bottom: 7px; font-family: 'Space Grotesk', sans-serif; font-size: 16px; color: var(--turquoise); }
.work-project-link:hover { color: var(--ink); }

.skills { display: flex; flex-wrap: wrap; gap: 10px; max-width: 700px; }
.skill { border: 1px solid var(--turquoise); padding: 10px 14px; font-size: 13px; border-radius: 999px; }
.skills-list { display: grid; gap: 28px; }
.skill-group { display: grid; gap: 12px; }
.skill-label { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 18px; letter-spacing: -.03em; }
.contact-band { background: rgba(5, 5, 5, .78); margin: 0 -5vw; padding: 75px 5vw 85px; }
.contact-band h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(44px, 7vw, 100px); line-height: .9; letter-spacing: -.065em; margin: 18px 0 36px; max-width: 800px; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.contact-link { display: inline-flex; align-items: center; gap: 14px; font-family: 'Space Grotesk', sans-serif; font-size: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 7px; }
.social-icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.contact-link:hover { color: var(--blue); }
.project-template { min-height: auto; padding-bottom: 70px; }
.project-template h1 { max-width: 900px; margin-bottom: 20px; }
.project-intro { max-width: 610px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.5; }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-card { border: 1px solid var(--line); padding: 25px; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; }
.project-card:nth-child(3) { background: var(--blue); border-color: var(--blue); }
.project-card:nth-child(3) .eyebrow, .project-card:nth-child(3) .project-card-meta { color: var(--ink); }
.project-card h2 { margin: 18px 0 10px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 42px); line-height: .95; letter-spacing: -.05em; }
.project-card p { max-width: 470px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.project-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.project-links div { border-bottom: 1px solid var(--turquoise); padding-bottom: 5px; }
.project-links a { color: var(--turquoise); font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; }
.project-links a:hover { color: var(--ink); }
.project-links span { font-size: 14px; }
.project-card:nth-child(3) p { color: var(--ink); }
.project-card-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 35px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; }
.project-footer { padding-top: 35px; }
footer { display: flex; justify-content: space-between; padding: 25px 0; color: var(--muted); font-size: 11px; }

@media (max-width: 700px) {
	.page { padding: 0 22px; }
	header { min-height: 88vh; padding-top: 20px; }
	nav { padding-right: 22px; padding-left: 22px; }
	.nav-links { gap: 12px; font-size: 11px; }
	.hero { display: block; }
	h1 { margin: 20vh 0 35px; font-size: clamp(66px, 22vw, 125px); }
	.hero-note { max-width: 290px; }
	section { padding: 58px 0 72px; }
	.section-grid { display: block; }
	.section-title { margin-bottom: 32px; }
	.facts { gap: 12px; margin-top: 45px; }
	.fact b { font-size: 25px; }
	.fact span { font-size: 11px; }
	.work-row { grid-template-columns: 35px 1fr; gap: 10px; }
	.work-type { grid-column: 2; text-align: left; margin-top: -7px; }
	.work-row.has-details { grid-template-columns: 1fr; gap: 10px; }
	.work-row.has-details .work-type, .work-row.has-details .work-bullets { grid-column: 1; }
	.work-row.has-details .work-type { margin-top: -4px; }
	.work-bullets { margin-top: 4px; padding-left: 18px; font-size: 13px; }
	.experience-item { grid-template-columns: 1fr; gap: 8px; }
	.company { text-align: left; color: var(--muted); }
	.education-item { grid-template-columns: 1fr; gap: 8px; }
	.contact-band { margin: 0 -22px; padding: 58px 22px 65px; }
	.contact-links { align-items: flex-start; flex-direction: column; gap: 16px; }
	.project-template { padding-top: 35px; }
	.project-template h1 { margin: 45px 0 20px; font-size: clamp(58px, 18vw, 100px); }
	.project-list { grid-template-columns: 1fr; }
	.project-card { min-height: 230px; padding: 20px; }
	footer { gap: 20px; flex-wrap: wrap; }
}