:root{
  --background: 40 20% 98%;
  --foreground: 0 0% 8%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background-color:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:"Inter",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  height:100vh;overflow:hidden;display:flex;flex-direction:column;
}
.mono{font-family:Menlo,ui-monospace,SFMono-Regular,monospace}
.nav-wrap{display:flex;justify-content:center;padding:2rem 2rem 0}
nav{display:flex;gap:2rem}
nav a{
  font-family:Menlo,ui-monospace,SFMono-Regular,monospace;
  font-size:11px;text-transform:uppercase;letter-spacing:0.15em;
  padding-bottom:0.75rem;border-bottom:1px solid transparent;
  color:#9ca3af;text-decoration:none;transition:color .15s;white-space:nowrap;
}
nav a:hover{color:#4b5563}
nav a.active{color:#000;border-bottom-color:#000}
.divider{width:100%;height:1px;background:#e5e7eb}
main{flex:1;overflow-y:auto;padding:2.5rem 2.5rem;width:100%;max-width:64rem;margin:0 auto}
.container{max-width:42rem}
.container-sm{max-width:36rem}
.container-xs{max-width:24rem}
.kicker{font-family:Menlo,ui-monospace,SFMono-Regular,monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.2em;color:#9ca3af;margin-bottom:1.5rem}
.kicker-sm{font-family:Menlo,ui-monospace,SFMono-Regular,monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.2em;color:#9ca3af;margin-bottom:1rem}
.kicker-xs{font-family:Menlo,ui-monospace,SFMono-Regular,monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.15em;color:#d1d5db;margin-bottom:0.25rem}
.hero-row{display:flex;align-items:flex-start;gap:2rem;margin-bottom:1.25rem}
.hero-row .flex1{flex:1}
h1{font-size:3rem;font-weight:700;line-height:1.05;letter-spacing:-0.025em}
.portrait{width:9rem;height:11rem;object-fit:cover;object-position:top;flex-shrink:0}
.lede{font-size:1rem;font-weight:500;color:#1f2937;line-height:1.375;margin-bottom:1.25rem}
.rule{width:2rem;height:1px;background:#d1d5db;margin-bottom:1.25rem}
.stack>*+*{margin-top:0.75rem}
.p-dark{font-size:0.875rem;color:#374151;line-height:1.625}
.p-muted{font-size:0.875rem;color:#6b7280;line-height:1.625}
a.inline-link{color:#000;font-weight:600;text-decoration:none;transition:color .15s}
a.inline-link:hover{color:#6b7280}
.now-block{margin-top:1.75rem}
.talk{margin-top:1.5rem;font-size:0.875rem}
/* track record */
.row{display:flex;align-items:flex-start;gap:1.25rem;padding:1rem 0;border-bottom:1px solid #f3f4f6}
.row:last-child{border-bottom:none}
.row .num{font-family:Menlo,ui-monospace,SFMono-Regular,monospace;font-size:10px;color:#d1d5db;font-variant-numeric:tabular-nums;padding-top:2px;width:1rem;flex-shrink:0;user-select:none}
.row .body{flex:1;min-width:0}
.row .topline{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;margin-bottom:2px}
.row .company{font-size:0.875rem;font-weight:600;color:#000;line-height:1.375}
.row .milestone{font-family:Menlo,ui-monospace,SFMono-Regular,monospace;font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.05em;flex-shrink:0}
.row .meta{font-family:Menlo,ui-monospace,SFMono-Regular,monospace;font-size:10px;color:#9ca3af;letter-spacing:0.05em;margin-bottom:4px}
.row .desc{font-size:0.75rem;color:#6b7280;line-height:1.625}
/* link list rows (alchemy, connect) */
.lrow{padding-bottom:1.25rem;border-bottom:1px solid #f3f4f6;margin-bottom:1.25rem}
.lrow:last-child{border-bottom:none;margin-bottom:0}
.lrow a.big{font-size:0.875rem;font-weight:600;color:#000;text-decoration:none;transition:color .15s}
.lrow a.big:hover{color:#6b7280}
.lrow p{font-size:0.75rem;color:#9ca3af;margin-top:0.25rem;line-height:1.625}
@media (max-width:520px){
  main{padding:2rem 1.5rem}
  .nav-wrap{padding:1.5rem 1rem 0}
  nav{gap:1.25rem}
  h1{font-size:2.4rem}
  .portrait{width:7rem;height:8.75rem}
  .hero-row{gap:1.25rem}
}