:root {
  color-scheme:dark;
  --bg:#101310;
  --panel:#171c17;
  --text:#f0f1e9;
  --muted:#a6afa1;
  --line:#333c30;
  --accent:#c1f17d;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6}
::selection {
  background:var(--accent);
  color:var(--bg)}
a {
  color:inherit;
  text-decoration:none}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px}
a:hover {
  color:var(--accent)}
.shell {
  max-width:1320px;
  margin:auto;
  padding:0 64px}
.header {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)}
.wordmark {
  font-family:var(--mono);
  font-size:30px;
  letter-spacing:-1.5px;
  font-weight:700}
.wordmark span {
  color:var(--accent)}
nav {
  display:flex;
  gap:32px;
  font-size:16px}
.header-contact {
  font-size:16px}
.header-contact span {
  margin-left:18px;
  color:var(--accent)}
.hero {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:50px;
  align-items:center;
  padding:90px 0 74px}
.eyebrow {
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 24px}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  margin-right:9px}
.hero h1 {
  font-size:clamp(44px,5.2vw,70px);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-3.5px;
  margin:30px 0}
.hero h1 span {
  color:var(--accent)}
.intro {
  font-size:18px;
  color:var(--muted);
  line-height:1.8}
.hero-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
  margin:32px 0 22px}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:34px;
  padding:13px 22px;
  background:var(--accent);
  color:#152011;
  font-size:16px;
  font-weight:600;
  border:1px solid var(--accent)}
.button:hover {
  background:#d3ffa0;
  color:#101310}
.text-link {
  font-size:16px;
  border-bottom:1px solid var(--line);
  padding:10px 0}
.text-link span {
  margin-left:10px}
.field {
  position:relative;
  height:390px;
  background:radial-gradient(ellipse at 50% 50%,#27352255,transparent 65%),linear-gradient(#a6c38a09 1px,transparent 1px),linear-gradient(90deg,#a6c38a09 1px,transparent 1px);
  background-size:auto,26px 26px,26px 26px;
  border:1px solid var(--line);
  overflow:hidden}
canvas {
  width:100%;
  height:100%;
  display:block}
.field-label {
  position:absolute;
  font:16px var(--mono);
  letter-spacing:1px;
  color:var(--accent);
  background:var(--bg);
  padding:5px 8px;
  border:1px solid var(--line);
  pointer-events:none}
.label-ai {
  left:15%;
  top:23%}
.label-software {
  right:8%;
  top:37%}
.label-psych {
  left:8%;
  bottom:26%}
.label-music {
  right:19%;
  bottom:17%}
.discipline-strip {
  display:flex;
  justify-content:space-between;
  padding:21px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font:16px var(--mono);
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--muted)}
.discipline-strip span:nth-child(even) {
  color:#526348}
.section {
  padding:85px 0}
.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  align-items:baseline;
  margin-bottom:36px}
.section h2 {
  font-size:38px;
  letter-spacing:-1.5px;
  font-weight:400;
  line-height:1.2;
  margin:0}
.work-row {
  border-top:1px solid var(--line);
  padding:30px 0;
  display:grid;
  grid-template-columns:1fr 45px;
  gap:15px}
.work-row .eyebrow {
  margin-bottom:9px;
  font-size:16px}
.work-row h3 {
  font-size:26px;
  font-weight:400;
  letter-spacing:-.6px;
  margin:0 0 10px}
.work-row p:not(.eyebrow) {
  color:var(--muted);
  font-size:16px;
  max-width:650px;
  margin:0 0 18px}
.row-symbol {
  font:24px var(--mono);
  color:var(--accent);
  text-align:right}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.tags span {
  font:16px var(--mono);
  padding:5px 9px;
  border:1px solid var(--line);
  color:var(--muted)}
.background {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  border-top:1px solid var(--line)}
.background h2 span {
  color:var(--muted)}
.background-intro img {
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:50%;
  margin:30px 0 7px}
.background-intro>p:last-child {
  color:var(--muted);
  font-size:16px;
  max-width:460px}
.background-details article {
  border-top:1px solid var(--line);
  padding:24px 0}
.background-details article:first-child {
  border-top:0;
  padding-top:0}
.background-details .eyebrow {
  font-size:16px}
.background-details h3 {
  font-size:24px;
  font-weight:400;
  margin:8px 0}
.background-details p {
  font-size:16px;
  color:var(--muted);
  margin:0 0 9px}
.detail-note {
  font:16px/1.6 var(--mono);
  color:var(--accent)}
.contact {
  background:var(--panel);
  border:1px solid var(--line);
  padding:44px 48px 48px;
  margin:0 0 80px}
.contact h2 {
  font-size:clamp(34px,4.5vw,58px);
  line-height:1.1;
  letter-spacing:-2px;
  font-weight:400;
  margin:0 0 30px}
.contact h2 span {
  color:var(--accent)}
.contact>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px}
.contact p:not(.eyebrow) {
  font-size:16px;
  color:var(--muted)}
footer {
  border-top:1px solid var(--line);
  padding:28px 0 35px;
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
  font:16px var(--mono);
  color:var(--muted)}
footer>div {
  display:flex;
  gap:24px;
  margin-left:auto}
.skip {
  position:absolute;
  left:20px;
  top:-80px;
  background:var(--accent);
  color:var(--bg);
  padding:10px;
  z-index:10}
.skip:focus {
  top:10px}
.document {
  max-width:780px;
  margin:70px auto 100px}
.document h1 {
  font-size:56px;
  letter-spacing:-2px}
.document h2 {
  font-size:28px;
  margin-top:45px;
  font-weight:400}
.document h3 {
  font-size:19px;
  margin-bottom:4px}
.document p,.document li {
  color:var(--muted)}
.document a {
  color:var(--accent);
  text-decoration:underline}
.document .button {
  color:var(--bg);
  text-decoration:none}
@media(min-width:1500px) {
  .hero {
  padding-top:110px;
  padding-bottom:95px}
}
@media(max-width:900px) {
  .shell {
  padding:0 32px}
.hero {
  gap:25px}
.hero h1 {
  font-size:50px;
  letter-spacing:-2.5px}
.field {
  height:340px}
.background {
  gap:45px}
.hero-links {
  gap:20px}
.button {
  gap:20px;
  padding:12px 17px}
}
@media(max-width:680px) {
  .shell {
  padding:0 22px}
.header {
  min-height:116px;
  height:auto;
  padding:20px 0;
  flex-wrap:wrap;
  gap:16px}
.wordmark {
  font-size:clamp(23px,6vw,30px)}
nav {
  width:100%;
  justify-content:space-between}
nav {
  gap:18px;
  font-size:16px}
.header-contact {
  display:none}
.hero {
  grid-template-columns:1fr;
  padding:55px 0 40px;
  gap:32px}
.hero h1 {
  font-size:clamp(44px,11vw,64px);
  margin:24px 0;
  letter-spacing:-2.7px}
.hero .eyebrow {
  font-size:16px}
.intro {
  font-size:16px}
.field {
  height:300px}
.discipline-strip {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
  font-size:16px;
  letter-spacing:1px}
.discipline-strip span:nth-child(even) {
  display:none}
.section {
  padding:55px 0}
.section-heading {
  display:block}
.section-heading .eyebrow {
  margin-bottom:15px}
.section h2 {
  font-size:32px}
.work-row {
  grid-template-columns:1fr;
  gap:12px;
  padding:25px 0}
.work-row h3 {
  font-size:23px}
.row-symbol {
  display:none}
.work-row .eyebrow {
  font-size:16px;
  letter-spacing:1px}
.work-row p:not(.eyebrow) {
  font-size:16px}
.background {
  grid-template-columns:1fr;
  gap:30px}
.background-intro img {
  float:left;
  margin:24px 18px 12px 0;
  width:75px;
  height:75px}
.background-intro>p:last-child {
  margin-top:22px}
.background-details article:first-child {
  border-top:1px solid var(--line);
  padding-top:24px}
.contact {
  padding:30px 24px;
  margin-bottom:50px}
.contact>div {
  display:block}
.contact .button {
  margin-top:12px}
.contact h2 {
  letter-spacing:-1.5px}
footer {
  flex-wrap:wrap;
  gap:15px}
footer>div {
  width:100%;
  margin:0;
  gap:25px}
.document {
  margin-top:45px}
.document h1 {
  font-size:44px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}


.location {
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:none;
  letter-spacing:0}
.location svg {
  flex-shrink:0;
  color:var(--accent)}