/* ===== Tokens ===== */
:root[data-theme="light"]{
  --bg:#faf9f7; --text:#1a1a1a; --muted:#4a4740;
  --faint:#77726a; --border:#e6e2d8; --card:#ffffff; --btn-bg:#1a1a1a; --btn-fg:#faf9f7;
  --chip-bg:#ffffff; --hover:#f0eee7;
}
:root[data-theme="dark"]{
  --bg:#1a1815; --text:#f3f1ea; --muted:#c3bdb0;
  --faint:#8b8577; --border:#332f28; --card:#221f1a; --btn-bg:#f3f1ea; --btn-fg:#1a1a1a;
  --chip-bg:#26231e; --hover:#2a2620;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.wrap{max-width:720px; margin:0 auto; padding:0 28px}
a{color:inherit}
:focus-visible{outline:2px solid var(--text); outline-offset:3px; border-radius:2px}

/* ===== Top bar ===== */
.topbar{max-width:720px; margin:0 auto; padding:24px 28px 0; display:flex; justify-content:space-between; align-items:center}
.brand{font-size:13px; letter-spacing:.3px; color:var(--faint)}
.brand b{color:var(--text); font-weight:600}
.toggle{
  background:var(--card); border:1px solid var(--border); color:var(--muted);
  font-size:12px; padding:7px 13px; border-radius:20px; cursor:pointer;
  display:flex; gap:7px; align-items:center; transition:background .2s,border-color .2s;
}
.toggle:hover{background:var(--hover)}

/* ===== Hero ===== */
.hero{padding:70px 0 46px}
.kicker{font-size:12.5px; letter-spacing:.5px; color:var(--faint); margin:0 0 24px}
h1{font-size:clamp(30px,5.4vw,46px); line-height:1.12; font-weight:700; letter-spacing:-1.2px; margin:0 0 24px; max-width:15ch}
.lead{font-size:clamp(16px,2.4vw,17px); color:var(--muted); max-width:56ch; margin:0 0 16px}
.lead strong{color:var(--text); font-weight:600}
.cta{display:flex; gap:11px; flex-wrap:wrap; margin-top:34px; align-items:center}
.btn{
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bg);
  padding:12px 22px; border-radius:3px; font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:opacity .2s, transform .2s;
}
.btn:hover{opacity:.85; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{background:var(--hover); opacity:1}

/* ===== Sections ===== */
.section{padding:44px 0; border-top:1px solid var(--border)}
.label{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--faint); margin:0 0 22px; font-weight:400}
/* AI projects */
.projects{display:grid; gap:26px}
.proj{display:grid; gap:7px}
.proj h3{font-size:16.5px; margin:0; font-weight:600; letter-spacing:-.2px}
.proj p{margin:0; color:var(--muted); font-size:15px}
.tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:5px}
.tag{font-size:11.5px; color:var(--faint); border:1px solid var(--border); padding:3px 10px; border-radius:14px; font-family:ui-monospace,"SF Mono",Menlo,monospace}
/* Quantified wins */
.work{display:grid; gap:20px}
.win{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline}
.stat{font-size:26px; font-weight:700; letter-spacing:-.5px; min-width:74px; font-variant-numeric:tabular-nums}
.win p{margin:0; color:var(--muted); font-size:15px}
.win p b{color:var(--text); font-weight:600}
/* Skill groups */
.grp{margin-bottom:22px}
.grp:last-child{margin-bottom:0}
.grp .sub{font-size:12px; color:var(--faint); margin:0 0 10px}
.chips{display:flex; gap:9px; flex-wrap:wrap; list-style:none; padding:0; margin:0}
.chip{background:var(--chip-bg); border:1px solid var(--border); padding:7px 14px; border-radius:20px; font-size:13.5px}

/* ===== Footer ===== */
footer{max-width:720px; margin:0 auto; padding:40px 28px 70px; border-top:1px solid var(--border); color:var(--faint); font-size:13px}
footer .links{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px}
footer a{text-decoration:none; border-bottom:1px solid var(--border); padding-bottom:2px}
footer a:hover{border-color:var(--text)}
.copyright{margin:0}

/* ===== Motion ===== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  body{transition:none}
  .btn:hover{transform:none}
}