:root{
  --bg:#0E0E0F;--fg:#F1F0EC;--muted:#8A8985;--faint:#1D1D1F;--line:#262628;--card:#151517;--card-2:#1B1B1D;
  --accent:#C084FC;
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:light){
  :root{--bg:#F4F2ED;--fg:#151514;--muted:#6F6D68;--faint:#E3E0D9;--line:#DCD9D2;--card:#FFFFFF;--card-2:#FAF9F6;--accent:#8B3FD9}
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);font:400 15.5px/1.6 var(--font);-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg)}
a{color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:720px;margin:0 auto;padding:72px 22px 48px}
h1,h2,h3{font-weight:300;margin:0}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* intro */
.me{display:flex;align-items:center;gap:14px}
.me img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.me b{display:block;font-weight:500;font-size:15px}
.status{display:inline-flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
h1{font-size:clamp(32px,6vw,46px);letter-spacing:-.035em;line-height:1.08;margin:40px 0 18px;text-transform:lowercase}
h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:17px;color:var(--muted);max-width:60ch;margin:0}
.lead strong{color:var(--fg);font-weight:400}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 15px;border-radius:12px;border:1px solid var(--line);text-decoration:none;font-size:14px;transition:border-color .26s var(--ease),background .26s var(--ease)}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.primary:hover{opacity:.88}
.btn svg,.ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* sections */
section{margin-top:88px}
.label{display:flex;align-items:center;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.label::after{content:"";flex:1;height:1px;background:var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.stack{display:grid;gap:12px}

/* ventures */
.v-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.v-head h3{font-size:22px;letter-spacing:-.02em}
.v-role{margin:4px 0 16px;color:var(--muted)}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.row:last-child{border-bottom:0;padding-bottom:0}
.row .t{font-size:15.5px;transition:transform .26s var(--ease)}
.row .d{grid-column:1;color:var(--muted);font-size:13.5px}
.row .u{grid-row:1/3;grid-column:2;display:flex;align-items:center;gap:6px;transition:color .26s var(--ease)}
a.row:hover .t{transform:translateX(4px)}
a.row:hover .u{color:var(--accent)}
.bullets{margin:0;padding:0;list-style:none}
.bullets li{border-left:1px solid var(--line);padding:2px 0 2px 14px;margin:6px 0;color:var(--muted);font-size:14.5px}
.past{opacity:.72}
.go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .26s var(--ease),border-color .26s var(--ease)}
.go:hover{color:var(--accent);border-color:var(--accent)}
.badge{font:400 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:5px 7px;color:var(--muted)}
.badge.on{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));color:var(--accent)}

/* case studies */
.cs{padding:0;overflow:hidden}
.cs figure{margin:0;aspect-ratio:16/8.4;background:var(--faint);border-bottom:1px solid var(--line);overflow:hidden}
.cs figure img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .7s var(--ease)}
.cs:hover figure img{transform:scale(1.02)}
.cs .body{padding:24px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.cs h3{font-size:24px;letter-spacing:-.02em}
.cs .one{margin:6px 0 18px;color:var(--muted)}
.ps{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.ps p{margin:4px 0 0;font-size:14.5px}
.k{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.stat{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.stat b{display:block;font-weight:200;font-size:28px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat:first-child b{color:var(--accent)}
.stat span{display:block;margin-top:8px;font:400 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs .links{margin-top:0}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{all:unset;cursor:pointer;display:block;border-radius:16px;border:1px solid var(--line);background:var(--card);overflow:hidden;transition:border-color .26s var(--ease)}
.tile:hover{border-color:var(--muted)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tile .img{aspect-ratio:4/3;background:var(--faint);overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tile .cap{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;font-size:14px}

/* skills */
.skill{display:grid;grid-template-columns:170px 1fr;gap:6px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.skill:first-of-type{padding-top:0}
.skill:last-child{border-bottom:0}
.skill h3{font-size:18px;letter-spacing:-.01em}
.skill p{margin:0;color:var(--muted);font-size:14.5px}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}

/* footer */
footer{margin-top:88px}
.cta h2{font-size:clamp(26px,4.4vw,34px);letter-spacing:-.03em;line-height:1.1;text-transform:lowercase;margin-bottom:10px}
.fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}

/* lightbox */
dialog{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:20px;padding:0;max-width:min(960px,calc(100vw - 32px));width:100%;overflow:hidden}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog img{display:block;width:100%;max-height:78vh;object-fit:contain;background:var(--faint)}
dialog .bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
dialog button{background:none;border:1px solid var(--line);color:var(--fg);border-radius:10px;width:40px;height:40px;cursor:pointer;display:grid;place-items:center}

/* motion */
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none}.js .rise.in{animation:none}.dot{animation:none}*{transition-duration:.15s!important}}

@media (max-width:600px){
  .wrap{padding:48px 16px 40px}
  .card,.cs .body{padding:18px}
  .ps{grid-template-columns:1fr;gap:12px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  .tile .cap{flex-direction:column;gap:0;padding:10px 12px;font-size:13px}
  .skill{grid-template-columns:1fr}
  section{margin-top:64px}
}

/* archived ventures */
.archived{opacity:.62}
.archived h3{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}

/* floating dock */
html{scroll-behavior:smooth;scroll-padding-top:24px}
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;gap:2px;padding:5px;border-radius:999px;
  background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.18);animation:dock .7s var(--ease) .4s both}
.dock a{padding:8px 14px;border-radius:999px;font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .26s var(--ease),background .26s var(--ease)}
.dock a:hover{color:var(--fg)}
.dock a.on{color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent)}
@keyframes dock{from{opacity:0;transform:translate(-50%,16px)}}
.wrap{padding-bottom:120px}
@media (max-width:600px){.dock a{padding:8px 10px;font-size:12.5px}.wrap{padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dock{animation:none}}

/* ---------- v2: multi-page ---------- */
.serif{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;letter-spacing:-.02em;color:var(--accent)}
.glow{position:fixed;top:-25vh;left:-25vw;width:80vw;height:80vh;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,#7C3AED 30%,transparent),transparent 72%)}
@media (prefers-color-scheme:light){.glow{opacity:.4}}
body{position:relative;isolation:isolate}

/* top bar on inner pages */
.top{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:14.5px}
.top img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}

/* hero */
.hero .photo{width:128px;height:128px;border-radius:32px;object-fit:cover;border:1px solid var(--line);display:block}
.hero .who{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.hero .who b{font-weight:500;font-size:16px}
.hero h1{text-transform:none;font-size:clamp(38px,7.4vw,60px);line-height:1.04;letter-spacing:-.04em;margin:36px 0 20px}
.hero h1 .serif{letter-spacing:-.03em}
.strip{display:inline-block;padding:7px 14px;font-size:15px;font-weight:500;color:#111;background:#fff}
@media (prefers-color-scheme:light){.strip{color:#fff;background:#151514}}
.roles{margin:18px 0 0;color:var(--muted);font-size:15px}
.roles i{font-style:normal;opacity:.45;margin:0 8px}

/* page titles */
.page h1{text-transform:none;margin:56px 0 12px}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;color:var(--muted);text-decoration:none;transition:color .26s var(--ease)}
.more:hover{color:var(--accent)}

/* compact case-study cards on home */
.mini{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mini a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);transition:border-color .26s var(--ease)}
.mini a:hover{border-color:var(--muted)}
.mini .img{aspect-ratio:16/10;overflow:hidden;background:var(--faint)}
.mini img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.mini .cap{padding:14px}
.mini .cap b{display:block;font-weight:400;font-size:16px}
.mini .cap span{display:block;margin-top:4px;color:var(--muted);font-size:13.5px}

/* browser-frame viewer (projects + videos) */
dialog.browser{max-width:min(1040px,calc(100vw - 24px))}
.b-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--card-2)}
.b-dots{display:flex;gap:6px;flex:none}
.b-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.b-dots i:nth-child(2){background:#febc2e}.b-dots i:nth-child(3){background:#28c840}
.b-url{flex:1;min-width:0;text-align:center;font:400 12px/1 var(--mono);color:var(--muted);background:var(--faint);border-radius:8px;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-view{max-height:min(78vh,900px);overflow:auto;overscroll-behavior:contain;background:var(--faint)}
dialog .b-view img{display:block;width:100%;height:auto;max-height:none;object-fit:initial}
dialog .b-bar button{width:32px;height:32px;flex:none}

/* explore */
.posts{display:grid;gap:12px}
.post{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;text-decoration:none;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .26s var(--ease)}
.post:hover{border-color:var(--muted)}
.post .img{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--faint)}
.post img{width:100%;height:100%;object-fit:cover;display:block}
.post b{display:block;font-weight:400;font-size:17px;letter-spacing:-.01em}
.post p{margin:4px 0 6px;color:var(--muted);font-size:14px}
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.vid{all:unset;cursor:pointer;display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.vid:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vid .img{position:relative;aspect-ratio:16/9;background:var(--faint)}
.vid img{width:100%;height:100%;object-fit:cover;display:block}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.vid .cap{padding:12px 14px;font-size:14.5px}
.empty{color:var(--muted);border:1px dashed var(--line);border-radius:16px;padding:22px;text-align:center;font-size:14.5px}
.frame{position:relative;aspect-ratio:16/9;background:#000}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* article */
.article h1{font-size:clamp(30px,5.4vw,44px)}
.article .cover{width:100%;border-radius:18px;border:1px solid var(--line);margin:8px 0 28px;display:block}
.prose{font-size:17px;line-height:1.75}
.prose h2{font-size:26px;letter-spacing:-.02em;margin:36px 0 10px;text-transform:none}
.prose p{margin:0 0 18px}
.prose a{color:var(--accent)}

/* contact */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:28px 0}
.steps div{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card)}
.steps b{display:block;font:400 11px/1 var(--mono);color:var(--accent);margin-bottom:10px}
.steps span{font-size:14px}
.cal{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);margin-top:12px}
.cal .calendly-inline-widget{min-width:300px;height:720px}

@media (max-width:600px){
  .hero .photo{width:104px;height:104px;border-radius:26px}
  .strip{font-size:13.5px}
  .mini,.vids{grid-template-columns:1fr}
  .post{grid-template-columns:96px 1fr;gap:12px}
  .steps{grid-template-columns:1fr}
}

button.btn{cursor:pointer;background:none;color:inherit;font:inherit;font-size:14px}

/* ---------- v3: engineering detail ---------- */
.prose figure{margin:28px 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.prose figcaption{margin-top:8px;font:400 12px/1.4 var(--mono);color:var(--muted)}
.prose ul{margin:0 0 18px;padding-left:20px}
.prose li{margin:6px 0}
.prose strong{font-weight:500;color:var(--fg)}
.facts{display:grid;gap:14px;margin:0 0 20px;padding:16px 0 0;border-top:1px solid var(--line)}
.facts .row2{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font:400 11.5px/1 var(--mono);color:var(--fg);background:var(--card-2);border:1px solid var(--line);border-radius:7px;padding:6px 8px}
.facts .bullets li{font-size:14px}
.stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.lab .v-role{margin-bottom:14px}
.lab .chips{margin-bottom:12px}
.badge.demo{border-color:color-mix(in srgb,#E0B15C 50%,var(--line));color:#E0B15C}
.note-line{font-size:13.5px;color:var(--muted);margin:-6px 0 16px}
.principles .skill h3{font-size:17px}
@media (max-width:600px){.facts .row2{grid-template-columns:1fr;gap:6px}}