:root { --bg: #050505; --panel: #0a0a0a; --panel-2: #0e0e0e; --text: #e7e7e2; --muted: #8c8c86; --faint: #444440; --line: #22221f; --lime: #d7ff3f; --sidebar: 250px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Manrope, sans-serif; font-size: 15px; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .19; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 8px 8px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 80px)); margin: 0 auto; }

#site-header { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 10; border-right: 1px solid var(--line); background: rgba(5,5,5,.95); }
.navbar { min-height: 100%; display: flex; flex-direction: column; padding: 28px 24px; }
.nav-logo { display: flex; align-items: center; gap: 9px; font: 500 11px/1.15 "DM Mono", monospace; letter-spacing: -.04em; }
.logo-mark { display: grid; place-items: center; width: 24px; height: 24px; background: var(--text); color: var(--bg); font: 500 14px/1 "DM Mono", monospace; }
.nav-links { list-style: none; padding: 0; margin: 92px 0 0; border-top: 1px solid var(--line); }
.nav-links li { border-bottom: 1px solid var(--line); }
.nav-links a { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; color: var(--muted); font: 500 10px/1 "DM Mono", monospace; text-transform: uppercase; transition: color .2s, padding .2s; }
.nav-links a span { color: var(--faint); }
.nav-links a:hover, .nav-links a.active { color: var(--text); padding-left: 5px; }
.nav-links a.active span { color: var(--lime); }
.sidebar-meta { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line); font: 10px/1.6 "DM Mono", monospace; color: var(--muted); }
.sidebar-meta p { margin: 0 0 7px; }
.sidebar-meta i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.sidebar-links { display: flex; gap: 12px; margin-top: 18px; color: var(--text); }
.sidebar-links a:hover { color: var(--lime); }
.hamburger { display: none; }
main, footer { margin-left: var(--sidebar); }

.hero { min-height: 100vh; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; flex: 1; padding: 72px 0 50px; }
.kicker, .section-head > p, .card-index, .project-card > p { margin: 0; color: var(--muted); font: 500 10px/1.3 "DM Mono", monospace; letter-spacing: .04em; }
.hero h1 { margin: 21px 0 24px; max-width: 750px; font-size: clamp(43px, 5.6vw, 82px); letter-spacing: -.085em; line-height: .98; font-weight: 700; }
em { color: var(--lime); font-style: normal; }
.hero-bio { max-width: 570px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-bio strong { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 33px; }
.btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 30px; padding: 12px 15px; border: 1px solid var(--text); font: 500 10px/1 "DM Mono", monospace; text-transform: uppercase; transition: background .2s, color .2s; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-ghost { color: var(--text); border-color: var(--line); }
.btn-primary:hover { background: var(--lime); border-color: var(--lime); }
.btn-ghost:hover { border-color: var(--text); }
.btn-primary b, .btn-ghost b { font-size: 15px; font-weight: 400; }
.signal-panel { align-self: stretch; min-height: 430px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); overflow: hidden; font: 12px/1.65 "DM Mono", monospace; }
.terminal-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.terminal-bar > span:first-child { display: flex; gap: 5px; }.terminal-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }.terminal-bar i:first-child { background: #e8795f; }.terminal-bar i:nth-child(2) { background: #e7c05c; }.terminal-bar i:last-child { background: #7bc970; }
.terminal-output { flex: 1; padding: 20px 18px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }.terminal-output p { margin: 0 0 9px; overflow-wrap: anywhere; }.terminal-output p:last-child { margin-bottom: 0; }.terminal-output strong, .terminal-command { color: var(--lime); font-weight: 500; }.terminal-muted { color: var(--muted); }
.terminal-form { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--lime); }.terminal-form label { white-space: nowrap; }.terminal-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); caret-color: var(--lime); font: inherit; }
.ticker { display: flex; justify-content: center; gap: 0; overflow: hidden; border-top: 1px solid var(--line); white-space: nowrap; }
.ticker span { display: inline-block; padding: 13px 27px; border-right: 1px solid var(--line); color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .04em; }
.ticker span::before { content: "✦"; margin-right: 25px; color: var(--lime); }

.section { padding: 138px 0; border-bottom: 1px solid var(--line); }
.section-muted { background: var(--panel); }
.section-head { display: grid; grid-template-columns: 165px 1fr auto; gap: 20px; align-items: start; margin-bottom: 56px; }
.section-head h2 { max-width: 700px; margin: -9px 0 0; font-size: clamp(32px, 4vw, 56px); letter-spacing: -.075em; line-height: 1.05; font-weight: 600; }
.section-title-nowrap { white-space: nowrap; }
.section-head > span { color: var(--muted); font: 500 10px/1 "DM Mono", monospace; padding-top: 1px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); }
.feature-card { min-height: 288px; padding: 25px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.feature-card:nth-child(1) { border-left: 0; border-top: 0; }.feature-card:nth-child(2) { border-top: 0; }.feature-card:nth-child(3) { border-left: 0; }
.feature-card-main { grid-row: span 2; min-height: 576px; background: linear-gradient(145deg, #14140d, var(--panel) 55%); }
.feature-card h3 { margin: 45px 0 16px; font-size: 25px; line-height: 1.1; letter-spacing: -.065em; font-weight: 600; }.feature-card-main h3 { margin-top: auto; font-size: clamp(32px,4vw,48px); }
.feature-card > p:not(.card-index):not(.card-footer) { margin: 0; max-width: 390px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.card-footer { margin: auto 0 0; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font: 500 9px/1.4 "DM Mono", monospace; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 25px; }.tag-row span { padding: 5px 7px; border: 1px solid var(--faint); color: var(--muted); font: 500 8px/1 "DM Mono", monospace; }

.publication-list { border-top: 1px solid var(--line); }.publication { display: grid; grid-template-columns: 165px 1fr 24px; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding .2s, background .2s; }.publication:hover { background: #101010; padding-left: 14px; padding-right: 14px; }
.pub-number { margin: 4px 0 0; color: var(--muted); font: 500 10px/1 "DM Mono", monospace; }.publication h3 { max-width: 720px; margin: 0 0 9px; font-size: 20px; line-height: 1.3; letter-spacing: -.04em; font-weight: 500; }.publication div p { margin: 0; color: var(--muted); font-size: 12px; }.publication strong { color: var(--text); font-weight: 500; }.publication > a { align-self: center; color: var(--muted); font-size: 20px; }.publication:hover > a { color: var(--lime); }

.timeline { border-top: 1px solid var(--line); }.timeline-item { display: grid; grid-template-columns: 165px 1fr; gap: 20px; padding: 31px 0 34px; border-bottom: 1px solid var(--line); }.timeline-item > p { margin: 4px 0 0; color: var(--muted); font: 500 10px/1 "DM Mono", monospace; }.timeline-item h3 { margin: 0 0 9px; font-size: 22px; line-height: 1.2; letter-spacing: -.05em; font-weight: 600; }.timeline-item h3 span { color: var(--muted); font-weight: 400; }.timeline-item div p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }.project-card { min-height: 273px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; background: var(--panel); transition: background .2s; }.project-card:nth-child(3n) { border-right: 0; }.project-card:nth-last-child(-n+3) { border-bottom: 0; }.project-card:hover { background: #171717; }.project-card > p { color: var(--muted); }.project-card h3 { margin: auto 0 8px; font-size: 27px; letter-spacing: -.06em; line-height: 1; font-weight: 600; }.project-card > span { min-height: 45px; color: var(--muted); font-size: 12px; line-height: 1.55; }.project-card small { margin-top: 23px; color: var(--faint); font: 500 8px/1 "DM Mono", monospace; }.project-card:hover small { color: var(--lime); }.clients-card { background: #111109; }.clients-card h3 { font-size: 22px; line-height: 1.12; }
.client-roster { margin-top: 16px; border: 1px solid var(--line); }.client-roster > p { margin: 0; padding: 13px 16px; color: var(--muted); border-bottom: 1px solid var(--line); font: 500 9px/1 "DM Mono", monospace; }.client-roster > div { display: grid; grid-template-columns: repeat(4, 1fr); }.client-roster span { padding: 11px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }.client-roster span:nth-child(4n) { border-right: 0; }.client-roster span:hover { color: var(--lime); background: #151515; }

.awards-section { padding-bottom: 120px; }.awards-list { border-top: 1px solid var(--line); }.awards-list p { display: grid; grid-template-columns: 165px 1fr; gap: 20px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.awards-list span { color: var(--muted); font: 500 10px/1.6 "DM Mono", monospace; }
footer { padding: 120px 0 28px; background: #10100f; }.contact-panel h2 { max-width: 820px; margin: 23px 0 38px; font-size: clamp(45px, 7vw, 90px); line-height: .94; letter-spacing: -.09em; font-weight: 600; }.contact-email { display: inline-flex; gap: 26px; padding-bottom: 7px; border-bottom: 1px solid var(--text); font-size: clamp(15px, 2vw, 24px); letter-spacing: -.04em; }.contact-email span { color: var(--lime); }.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 110px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font: 500 9px/1.5 "DM Mono", monospace; }.footer-bottom div { display: flex; gap: 24px; }.footer-bottom a:hover { color: var(--lime); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 940px) { :root { --sidebar: 0px; } #site-header { position: sticky; top: 0; width: 100%; height: 62px; border-right: 0; border-bottom: 1px solid var(--line); } .navbar { position: relative; min-height: 62px; padding: 16px 22px; flex-direction: row; align-items: center; justify-content: space-between; } .hamburger { display: flex; flex-direction: column; gap: 5px; padding: 5px 0; border: 0; background: none; }.hamburger span { display: block; width: 19px; height: 1px; background: var(--text); }.hamburger.open span:first-child { transform: translateY(3px) rotate(45deg); }.hamburger.open span:last-child { transform: translateY(-3px) rotate(-45deg); }.nav-links { display: none; position: absolute; top: 61px; left: 0; right: 0; margin: 0; padding: 10px 22px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }.nav-links.open { display: block; }.sidebar-meta { display: none; }.hero-layout { gap: 38px; }.section { padding: 95px 0; } }
@media (max-width: 670px) { .container { width: min(100% - 36px, 1160px); }.hero { min-height: auto; }.hero-layout { grid-template-columns: 1fr; padding: 76px 0 38px; }.hero h1 { font-size: clamp(44px, 13vw, 68px); }.signal-panel { min-height: 330px; }.terminal-output { padding: 15px; }.terminal-form { padding: 12px 15px; }.ticker { margin-top: 0; }.ticker span { padding: 11px 18px; }.section { padding: 78px 0; }.section-head { grid-template-columns: 1fr auto; gap: 15px; margin-bottom: 40px; }.section-head h2 { grid-column: 1 / -1; grid-row: 2; font-size: 37px; }.section-title-nowrap { white-space: normal; }.section-head > span { grid-column: 2; grid-row: 1; }.feature-grid, .project-grid { grid-template-columns: 1fr; }.feature-card, .feature-card:nth-child(n) { min-height: 260px; border-left: 0; border-top: 1px solid var(--line); }.feature-card:first-child { border-top: 0; }.feature-card-main { min-height: 430px !important; }.feature-card-main h3 { font-size: 39px; }.publication, .timeline-item { grid-template-columns: 50px 1fr 18px; gap: 13px; }.timeline-item { grid-template-columns: 65px 1fr; }.publication h3 { font-size: 17px; }.publication div p, .timeline-item div p { font-size: 12px; }.project-card, .project-card:nth-child(n) { min-height: 225px; border-right: 0; border-bottom: 1px solid var(--line); }.project-card:last-child { border-bottom: 0; }.client-roster > div { grid-template-columns: repeat(2, 1fr); }.client-roster span:nth-child(4n) { border-right: 1px solid var(--line); }.client-roster span:nth-child(2n) { border-right: 0; }.awards-list p { grid-template-columns: 58px 1fr; gap: 12px; font-size: 12px; }.footer-bottom { flex-direction: column; margin-top: 80px; }.footer-bottom div { gap: 15px; flex-wrap: wrap; } footer { padding-top: 78px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }