:root{
  --bg:#ffffff;
  --surface:#f4f5f7;
  --ink:#11151c;
  --dim:#46505c;
  --line:#e4e7ec;
  --line-strong:#ccd1d9;
  --accent:#2f6fd6;
  --accent-dim:#dde7f7;
  --mono:#79818f;
  --sans:'Inter','Segoe UI',system-ui,sans-serif;
  --mono-font:'Fira Code','JetBrains Mono',ui-monospace,monospace;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --radius:14px;
  --shadow:0 1px 2px rgba(18,21,26,.04);
}

html.dark{
  --bg:#0e1014;
  --surface:#13161b;
  --ink:#eef0f3;
  --dim:#9aa1ac;
  --line:#22262d;
  --line-strong:#2e333b;
  --accent:#7aa7f0;
  --accent-muted:#9dbbe8;
  --accent-dim:#1b2740;
  --mono:#7a8290;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{
  font-family:var(--display);
  font-size:16px; line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  transition:background .35s ease, color .35s ease;
  min-height:100vh;
}

.wrap{max-width:860px; margin:0 auto; padding:clamp(1.75rem,5vw,4.5rem) 1.5rem}

/* TOP BAR */
.top{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:clamp(3rem,9vh,6rem)}
.brand{display:flex; align-items:center; gap:.65rem}
.brand-mark{
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:10px; border:1px solid var(--accent);
  font-family:var(--display); font-weight:600; font-size:.82rem;
  color:var(--accent); background:var(--accent-dim,transparent);
}
html:not(.dark) .brand-mark{background:var(--surface)}
.brand-name{font-family:var(--mono-font); font-size:.78rem; letter-spacing:.03em; color:var(--ink)}
.brand-dots{color:var(--mono)}

.ctrl{display:flex; gap:.4rem}
.ctrl button{
  all:unset; cursor:pointer;
  font-family:var(--mono-font); font-size:.72rem; letter-spacing:.02em;
  color:var(--dim); padding:.35rem .7rem; border-radius:8px;
  border:1px solid transparent; transition:all .25s ease;
}
.ctrl button:hover{color:var(--ink); border-color:var(--line-strong)}
.ctrl button.on{color:var(--accent); border-color:var(--accent); background:var(--accent-dim)}
#themeToggle{
  font-size:.85rem; line-height:1;
  border-color:var(--line-strong);
  color:var(--ink);
  background:var(--surface,transparent);
}
#themeToggle svg{width:15px; height:15px; display:block}
#themeToggle .ico-moon{display:none}
html.dark #themeToggle .ico-moon{display:block}
html.dark #themeToggle .ico-sun{display:none}
#themeToggle:hover{border-color:var(--accent); color:var(--accent)}

/* HERO */
.hero{margin-bottom:clamp(3.5rem,11vh,6.5rem)}
.kicker{
  font-family:var(--mono-font); font-size:.78rem; color:var(--accent);
  margin-bottom:1.1rem; display:flex; align-items:center; gap:.6rem;
}
.kicker::before{content:""; width:26px; height:1px; background:var(--accent)}
.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.5rem,9vw,4.2rem);
  letter-spacing:-.045em; line-height:1.02;
  text-wrap:balance; margin-bottom:1.5rem;
}
.hero .role{
  font-family:var(--mono-font); font-size:.92rem; color:var(--dim); position:relative;
  padding-bottom:1.6rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.hero .bio{color:var(--dim); max-width:58ch; font-size:1.02rem; line-height:1.7; text-wrap:pretty; margin-bottom:.6rem}
.hero .bio b{color:var(--ink); font-weight:600}
.hero .bio:last-child{margin-bottom:0}

/* SECTION HEADINGS */
.sec{margin-bottom:clamp(3rem,9vh,5rem)}
.sec-head{display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.8rem}
.sec-head .n{font-family:var(--mono-font); font-size:.78rem; color:var(--accent)}
.sec-head h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.35rem,3.4vw,1.7rem); letter-spacing:-.025em; text-wrap:balance;
}
.sec-head::after{content:""; flex:1; height:1px; background:var(--line)}

/* WORKFLOW ROWS */
.rows{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:minmax(120px,220px) 1fr; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line)}
.row .k{font-family:var(--mono-font); font-size:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; padding-top:.35rem}
.row .v{font-size:.99rem; color:var(--ink); text-wrap:pretty}
.row .v small{color:var(--dim)}

/* KNOWLEDGE STACK */
.stack{display:grid; gap:1.4rem}
.sitem{padding-left:1.4rem; border-left:2px solid var(--line-strong); transition:border-color .25s ease}
.sitem:hover{border-left-color:var(--accent)}
.sitem h3{font-family:var(--display); font-size:1.08rem; font-weight:600; margin-bottom:.4rem; letter-spacing:-.015em}
.sitem p{font-family:'Inter',system-ui,sans-serif; color:var(--dim); font-size:.95rem; max-width:72ch; text-wrap:pretty}

/* PROJECTS */
.grid3{display:grid; gap:2rem; grid-template-columns:repeat(3,1fr)}
.pcard{display:flex; flex-direction:column; gap:.7rem; text-decoration:none; color:inherit; border-top:1px solid var(--line-strong); padding-top:1.1rem; transition:border-color .25s ease}
.pcard:hover{border-top-color:var(--accent)}
.pcard h4{font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.01em}
.pcard .arrow{color:var(--accent); margin-left:.3rem; opacity:0; transform:translateX(-3px); transition:all .25s ease; display:inline-block}
.pcard:hover .arrow{opacity:1; transform:translateX(0); margin-left:.55rem}
.pcard p{font-family:'Inter',sans-serif; font-size:.85rem; color:var(--dim); flex:1; text-wrap:pretty}
.tags{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{font-family:var(--mono-font); font-size:.66rem; color:var(--accent); border:1px solid var(--accent-dim); padding:.16rem .55rem; border-radius:99px}
html:not(.dark) .tag{border-color:#c9d8ef}

/* FOOTER */
footer{
  margin-top:clamp(3rem,8vh,5rem); padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--mono-font); font-size:.75rem; color:var(--mono);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}

/* SCROLL REVEAL */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
[data-reveal].visible{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; transition:none}
}

/* RESPONSIVE */
@media (max-width:760px){
  .grid3{grid-template-columns:1fr}
  .row{grid-template-columns:1fr; gap:.3rem}
  .hide-sm{display:none}
  .top{margin-bottom:2.5rem}
}
@media (max-width:480px){
  .hero h1{font-size:2.35rem}
  .ctrl button{padding:.3rem .55rem}
}