:root {
  --bg: #0a0d0b;
  --panel: #101512;
  --text: #d8dfda;
  --muted: #89928c;
  --green: #79e69d;
  --line: #263029;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; background: var(--green); color: var(--bg); padding: .6rem 1rem; z-index: 10; }
.skip-link:focus { top: 1rem; }

.site-header { max-width: 1120px; height: 82px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { color: var(--text); font: 600 .95rem var(--mono); text-decoration: none; }
.wordmark span { color: var(--green); }
nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
nav a { color: var(--muted); font: .75rem var(--mono); text-decoration: none; }
nav a:hover { color: var(--green); }

main { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.intro { padding: clamp(5rem, 10vw, 8rem) 0; border-bottom: 1px solid var(--line); }
.prompt, .label { margin: 0; color: var(--green); font: .75rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
h1 { margin: 0 0 2.5rem; font-size: clamp(2.1rem, 6vw, 5.5rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.lede { max-width: 640px; text-wrap: pretty; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.75; }
.intro-links { margin-top: 2.5rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; font: .76rem var(--mono); }
.intro-links > a:not(.button) { color: var(--muted); text-underline-offset: .3rem; }
.intro-links > a:hover { color: var(--green); }
.button { padding: .85rem 1rem; display: inline-flex; gap: 2.5rem; justify-content: space-between; color: var(--bg); background: var(--green); text-decoration: none; }
.button:hover { color: var(--bg); filter: brightness(1.08); }

.intro, .plain-section, .contact { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 3rem; }
.plain-section, .contact { padding: clamp(5rem, 10vw, 8rem) 0; border-bottom: 1px solid var(--line); }
/* The label rail earns its width by tracking the section as you scroll. */
.intro > .prompt, .plain-section > .label, .contact > .label { align-self: start; position: sticky; top: 2.5rem; }
.section-content h2 { max-width: 800px; margin: 0 0 3rem; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 550; text-wrap: balance; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 6rem); max-width: 830px; }
.columns p, .work-list p, .contact p { color: var(--muted); margin: 0; }
.signature { margin-top: 2.5rem; color: var(--green); font: .78rem var(--mono); }

.project-list { border-top: 1px solid var(--line); }
.project-list > a, .project-list > .project-row { display: grid; grid-template-columns: 115px 1fr 30px; align-items: start; gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.project-type { padding-top: .2rem; color: var(--green); font: .68rem var(--mono); }
.project-list h3 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 550; }
.project-list h3 em { display: inline-block; margin-left: .55rem; padding: .12rem .5rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: .6rem var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; vertical-align: .16em; }
.project-list p { max-width: 650px; color: var(--muted); font-size: .9rem; margin: 0; }
.project-list strong { color: var(--muted); font-weight: 400; transition: transform .2s, color .2s; }
.project-list > a:hover h3, .project-list > a:hover strong { color: var(--green); }
.project-list > a:hover strong { transform: translate(3px, -3px); }
.note { max-width: 650px; margin-top: 4rem; padding: 1.5rem; background: var(--panel); border-left: 2px solid var(--green); }
.note span { color: var(--green); font: .7rem var(--mono); }
.note p { margin: .7rem 0 0; color: var(--muted); }

.contact { min-height: 480px; align-items: start; }
.contact .section-content h2 { margin-bottom: 1rem; }
.email { display: inline-block; margin-top: 2.5rem; color: var(--green); font: clamp(1.1rem, 2.5vw, 1.7rem) var(--mono); text-underline-offset: .5rem; }
.email span { display: inline-block; transition: transform .2s; }
.email:hover span { transform: translate(3px, -3px); }

footer { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 3rem; align-items: start; color: var(--muted); font: .7rem/1.8 var(--mono); }
footer div { display: flex; flex-direction: column; }
footer strong { color: var(--text); }
footer a:hover { color: var(--green); }

.legal-header { position: relative; }
.legal-header .nav-cta { color: var(--muted); font: .75rem var(--mono); text-decoration: none; }
.legal-main { max-width: 860px; margin: 0 auto; padding: 8rem 1.5rem 7rem; }
.legal-main > h1 { margin: 1rem 0; font-size: clamp(3rem, 8vw, 6rem); }
.terminal-cursor { color: var(--green); animation: blink 1s steps(1) infinite; }
.section-index { color: var(--green); font: .75rem var(--mono); }
.legal-updated { color: var(--muted); font: .7rem var(--mono); margin-bottom: 5rem; text-transform: uppercase; }
.legal-main section { display: grid; grid-template-columns: 190px 1fr; gap: 3rem; border-top: 1px solid var(--line); padding: 2rem 0; }
.legal-main section h2 { margin: 0; color: var(--green); font: .72rem var(--mono); text-transform: uppercase; }
.legal-main section p { color: var(--muted); margin: 0; }
.legal-main section > *:not(h2) { grid-column: 2; }
.legal-main section a { color: var(--green); }
.legal-page footer { grid-template-columns: 1fr auto; }

@media (max-width: 700px) {
  .site-header { height: 70px; }
  nav a, .wordmark, .intro-links > a:not(.button), footer a, .email, .button {
    display: inline-flex; align-items: center; min-height: 44px; }
  .email { margin-top: 1.5rem; }
  nav { gap: 1rem; }
  .intro, .plain-section, .contact { grid-template-columns: 1fr; gap: 1.5rem; }
  .intro > .prompt, .plain-section > .label, .contact > .label { position: static; }
  .columns { grid-template-columns: 1fr; gap: 1rem; }
  .project-list > a, .project-list > .project-row { grid-template-columns: 1fr 25px; gap: .7rem; }
  .project-type { grid-column: 1 / -1; }
  footer { grid-template-columns: 1fr; }
  .legal-main section { grid-template-columns: 1fr; gap: .7rem; }
  .legal-main section > *:not(h2) { grid-column: 1; }
}

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