:root{
  --paper:#FAFBF9;
  --ink:#0E1F2B;
  --ink-soft:#3C4E59;
  --grid:#E3E9E4;
  --accent:#0E7C66;
  --accent-soft:#E2F0EB;
  --signal:#D98324;
  --line:#CBD5CE;
  --panel:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#fff}

.gridbg{
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

.display{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 118, 'wght' 800;
  letter-spacing:-0.015em;
  line-height:1.02;
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.mono b{color:var(--accent);font-weight:500}

/* nav */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,251,249,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:58px}
nav a{color:var(--ink);text-decoration:none}
nav .links{display:flex;gap:28px}
nav .links a{font-size:14px;font-weight:500;padding:4px 2px;border-bottom:2px solid transparent}
nav .links a:hover,nav .links a:focus-visible{border-color:var(--accent);outline:none}
nav .links a.active{border-color:var(--accent)}
.navmark{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500}
.navmark span{color:var(--accent)}

/* buttons */
.btn{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;letter-spacing:0.04em;
  text-decoration:none;
  padding:13px 22px;
  border:1.5px solid var(--ink);
  color:var(--ink);
  background:transparent;
  transition:background .15s,color .15s;
}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--accent);border-color:var(--accent);outline:none}
.btn:not(.primary):hover,.btn:not(.primary):focus-visible{background:var(--ink);color:var(--paper);outline:none}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* hero (home) */
header.hero-wrap{border-bottom:1px solid var(--line);overflow:hidden}
.hero{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:40px;
  align-items:center;
  padding:84px 0 64px;
}
.hero h1{font-size:clamp(44px,6.4vw,78px);margin:14px 0 20px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lede{font-size:19px;color:var(--ink-soft);max-width:44ch;margin-bottom:30px}

/* pose panel */
.posepanel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 1px 0 var(--line);
}
.posepanel .panelhead{
  display:flex;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--grid);
}
.posepanel svg{display:block;width:100%;height:auto}
.kp{fill:var(--accent)}
.kp-ring{fill:none;stroke:var(--accent);stroke-width:1;opacity:.35}
.bone{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.conf{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:var(--ink-soft)}

/* waveform strip */
.wavestrip{border-bottom:1px solid var(--line);background:var(--panel)}
.wavestrip .wrap{display:flex;align-items:center;gap:20px;padding:10px 24px}
.wavestrip canvas{flex:1;height:44px;min-width:0}
.wavestrip .mono{white-space:nowrap}

/* generic sections */
section{padding:80px 0}
.sechead{margin-bottom:44px}
.sechead h2{font-size:clamp(30px,3.6vw,44px);margin-top:10px}
.pagehead{padding:70px 0 10px}
.pagehead h1{font-size:clamp(38px,5vw,62px);margin-top:12px}
.pagehead p{color:var(--ink-soft);max-width:56ch;margin-top:16px;font-size:18px}

/* home: pointer cards */
.pointer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pointer{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);
  padding:30px 28px;
  transition:border-color .15s, transform .15s;
}
.pointer:hover,.pointer:focus-visible{border-color:var(--accent);transform:translateY(-2px);outline:none}
.pointer h3{font-size:24px;margin:8px 0 6px}
.pointer p{color:var(--ink-soft);font-size:15.5px}
.pointer .go{margin-top:14px;display:inline-block;color:var(--accent);font-weight:600;font-size:14px}

/* projects */
.case{background:var(--panel);border:1px solid var(--line);margin-bottom:44px}
.case:last-child{margin-bottom:0}
.casehead{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:8px;
  padding:16px 28px;
  border-bottom:1px solid var(--grid);
}
.casehead h3{font-size:clamp(22px,2.6vw,30px)}
.casebody{display:grid;grid-template-columns:1.1fr 0.9fr}
.casetext{padding:30px 28px;border-right:1px solid var(--grid)}
.casetext p{color:var(--ink-soft);font-size:16.5px}
.casetext p + p{margin-top:14px}
.caseviz{padding:30px 28px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.caseviz svg{width:100%;height:auto}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 28px;border-top:1px solid var(--grid)}
.tags .mono{margin-right:4px}
.tag{font-family:'IBM Plex Mono',monospace;font-size:11.5px;padding:4px 10px;background:var(--accent-soft);color:var(--accent)}

.maplab{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--ink-soft)}
.mapline{stroke:var(--accent);stroke-width:1.2;opacity:.55}
.mapbox{fill:var(--panel);stroke:var(--line)}
.mapbox-hl{fill:var(--accent-soft);stroke:var(--accent)}

/* contact */
.contactpage{padding:100px 0 80px}
.contactpage h1{font-size:clamp(40px,5.6vw,70px);margin:14px 0 22px}
.contactpage p{color:var(--ink-soft);max-width:52ch;margin-bottom:34px;font-size:18px}
.foot-meta{margin-top:80px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:18px}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:56px 0 44px}
  .casebody{grid-template-columns:1fr}
  .casetext{border-right:none;border-bottom:1px solid var(--grid)}
  .pointer-grid{grid-template-columns:1fr}
  nav .links{gap:16px}
}