:root{
  --ink:#10131C;
  --panel:#161A26;
  --line:#262C3B;
  --line-soft:#1E2331;
  --text:#E6E9F2;
  --muted:#8892AB;
  --amber:#E0A22B;
  --cyan:#4FD1D9;
  --green:#4FCE7E;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- masthead ---------- */
.masthead{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.eyebrow b{color:var(--amber);font-weight:500}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(46px,9vw,92px);line-height:.92;
  letter-spacing:-.035em;text-transform:uppercase;
  margin:18px 0 20px;
}
h1 span{display:block;color:var(--muted)}
.thesis{max-width:56ch;font-size:clamp(17px,2vw,20px);color:#C6CCDD}
.thesis b{color:var(--text);font-weight:600}
.contact{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;
  font-family:var(--mono);font-size:13px;
}
.contact a{
  text-decoration:none;padding:9px 15px;
  border:1px solid var(--line);border-radius:2px;
  color:var(--text);transition:border-color .18s,color .18s,background .18s;
}
.contact a:hover{border-color:var(--amber);color:var(--amber);background:rgba(224,162,43,.06)}

/* ---------- sections ---------- */
section{padding:64px 0;border-bottom:1px solid var(--line)}
.head{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;flex-wrap:wrap}
h2{
  font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;
}
.head p{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- ledger (signature) ---------- */
.ledger{border-top:1px solid var(--line-soft)}
.row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) 128px;
  gap:20px;align-items:start;
  padding:20px 20px 20px 22px;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  transition:background .2s;
}
.row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--line);transition:background .2s,width .2s;
}
.row:hover{background:var(--panel)}
.row:hover::before{background:var(--amber);width:3px}
.title{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em}
.title em{
  display:block;font-style:normal;font-family:var(--mono);
  font-size:11.5px;color:var(--muted);letter-spacing:.06em;margin-top:5px;
}
.what{font-size:14.5px;color:#BFC6D8}
.what code{font-family:var(--mono);font-size:12.5px;color:var(--cyan)}
.status{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;justify-self:start;
  padding:4px 9px;border-radius:2px;white-space:nowrap;
  border:1px solid currentColor;
}
.live{color:var(--green)}
.testing{color:var(--amber)}
.build{color:var(--muted)}

/* ---------- method ---------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px}
.lede{font-size:clamp(16px,1.7vw,18.5px);color:#C6CCDD;max-width:44ch}
.lede b{color:var(--text);font-weight:600}
.method{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.m{background:var(--ink);padding:22px 24px}
.m .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);display:block;margin-bottom:9px;
}
.m p{font-size:14.5px;color:#BFC6D8}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:28px}}

/* ---------- fit ---------- */
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.f{background:var(--ink);padding:24px 24px 26px}
.f .k{
  font-family:var(--display);font-weight:600;font-size:16px;
  display:block;margin-bottom:10px;letter-spacing:-.01em;
}
.f .k::before{content:"";display:inline-block;width:16px;height:2px;background:var(--cyan);vertical-align:middle;margin-right:9px}
.f p{font-size:14.5px;color:#BFC6D8}

.go{
  display:inline-block;margin-top:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);
  text-decoration:none;border-bottom:1px solid rgba(79,209,217,.35);padding-bottom:2px;
}
.go:hover{color:var(--amber);border-color:var(--amber)}

/* ---------- deep dives ---------- */
.dives{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line-soft)}
.dive{background:var(--ink);padding:28px 26px}
.dive h3{
  font-family:var(--display);font-weight:600;font-size:17px;
  margin-bottom:12px;letter-spacing:-.01em;
}
.dive p{font-size:14.5px;color:#BFC6D8}
.dive .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:14px;
}

/* ---------- stack ---------- */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px}
.stack h3{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);
  font-weight:500;margin-bottom:12px;
}
.stack ul{list-style:none;font-size:14.5px;color:#BFC6D8}
.stack li{padding:5px 0;border-bottom:1px solid var(--line-soft)}

/* ---------- background ---------- */
.bg-item{display:flex;gap:24px;padding:18px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.bg-item .when{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:110px}
.bg-item h3{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:4px}
.bg-item p{font-size:14.5px;color:#BFC6D8;max-width:62ch}

/* ---------- footer ---------- */
footer{padding:60px 0 80px}
footer p{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
footer .big{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;color:var(--text);
  margin-bottom:18px;line-height:1.05;
}
footer a{color:var(--amber)}

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

@media (max-width:720px){
  .row{grid-template-columns:1fr;gap:10px;padding:18px 16px}
  .masthead{padding:52px 0 40px}
  section{padding:48px 0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}