:root{
  --bg:#F6F7F9;--alt:#EDEFF4;--surface:#fff;--ink:#0B1B33;--soft:#44516A;--faint:#66738C;
  --line:#DCE1EA;--accent:#C8203A;--tint:#FBE8EB;--primary:#0B1B33;--on-primary:#fff;--glow:rgba(200,32,58,.07);
  --display:"Bricolage Grotesque",system-ui,sans-serif;--body:"Instrument Sans",system-ui,sans-serif;
  --r:12px;--wrap:1120px;--ease:cubic-bezier(.22,.8,.28,1);color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0A1222;--alt:#0E182C;--surface:#121D34;--ink:#E8EDF7;--soft:#A7B3C9;--faint:#8493AD;
  --line:#22304D;--accent:#FF7C8E;--tint:#2B1B2A;--primary:#E8EDF7;--on-primary:#0A1222;--glow:rgba(255,124,142,.09);color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.i{width:18px;height:18px;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.7em 1.2em;z-index:500}
.skip:focus{left:0}
kbd{font:600 .8em var(--body);padding:.1em .45em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--surface)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.section{padding-block:clamp(4rem,9vw,7rem)}
.alt{background:var(--alt)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
h1,h2,h3{font-family:var(--display);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4vw,2.75rem);margin-bottom:1.8rem}
h2::before{content:"";display:block;width:34px;height:4px;border-radius:2px;background:var(--accent);margin-bottom:.9rem}
h3{font-size:1.2rem}
.big{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;max-width:34ch;color:var(--soft)}
.prose{color:var(--soft);max-width:60ch}
.prose p+p{margin-top:1rem}

/* header */
.header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.header.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-color:var(--line)}
.nav{max-width:var(--wrap);margin-inline:auto;padding:.85rem clamp(1.25rem,4vw,2.5rem);display:flex;align-items:center;gap:.55rem}
.brand{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-right:auto}
.links{display:flex;align-items:center;gap:1.4rem;font-size:.95rem;margin-right:.6rem}
.links a{color:var(--soft);padding-block:.3rem;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.links a:hover,.links a.active{color:var(--ink);border-color:var(--accent)}
.pill{border:1.5px solid var(--line);border-radius:999px;padding:.3em .95em;font-size:.88rem;font-weight:600;color:var(--soft);transition:border-color .2s,color .2s,background .2s}
.pill:hover{border-color:var(--accent);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.icon-btn{min-width:42px;height:42px;padding:0 .7rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;gap:.45rem;transition:border-color .2s}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn:disabled{opacity:.35;cursor:default;border-color:var(--line)}
.kbd{font-size:.82rem;font-weight:600;color:var(--soft)}
.menu-btn{display:none}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:17px;height:2px;background:var(--ink);transition:transform .3s var(--ease),background .3s}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* hero */
.hero{padding-top:clamp(7.5rem,15vw,11rem);padding-bottom:clamp(3.5rem,8vw,6rem);background:radial-gradient(60% 70% at 85% 0%,var(--glow),transparent)}
.hero-copy{max-width:calc(var(--wrap))}
.lead-in{color:var(--accent);font-weight:600;margin-bottom:1rem}
h1{font-size:clamp(3.2rem,10vw,6.8rem);line-height:.96;letter-spacing:-.04em;font-weight:700}
.role{margin-top:1.2rem;font-size:clamp(1.2rem,2.4vw,1.65rem);font-weight:500;color:var(--soft)}
.statement{margin-top:1rem;max-width:48ch;color:var(--soft);font-size:1.15rem}
.actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.9rem}
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.8em 1.5em;border-radius:999px;font-weight:600;font-size:.97rem;background:var(--primary);color:var(--on-primary);border:1.5px solid var(--primary);transition:transform .25s var(--ease),border-color .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.social{margin-top:2rem;display:flex;gap:.7rem}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--soft);transition:color .2s,border-color .2s,background .2s}
.social a:hover{color:var(--accent);border-color:var(--accent);background:var(--tint)}

/* timeline */
.timeline{position:relative;max-width:62ch;margin-left:.4rem}
.timeline::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 2.2rem 2rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-6px;top:.45rem;width:14px;height:14px;border-radius:50%;background:var(--alt);border:2px solid var(--accent)}
.timeline .now::before{background:var(--accent)}
.timeline .next::before{border-style:dashed}
.meta{color:var(--accent);font-weight:600;font-size:.92rem;margin:.2rem 0 .4rem}
.timeline p:last-child{color:var(--soft)}

/* skills */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.skills li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.skills b{font-weight:600}
.skills span{font-size:.9rem;color:var(--faint)}

/* projects: sideways rail */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
.head-row h2{margin-bottom:0}
.rail-nav{display:flex;gap:.5rem}
.rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .2rem 1.2rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior-x:contain}
.card{flex:0 0 min(340px,84%);scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-top-color:var(--accent);transform:translateY(-3px)}
.card p{color:var(--soft);font-size:.99rem}
.card>p{flex:1}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{font-size:.82rem;padding:.2em .7em;border-radius:999px;background:var(--tint);color:var(--accent);font-weight:500}
.note summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--ink);list-style:none}
.note summary::before{content:"+";display:inline-block;width:1.1em;color:var(--accent)}
.note[open] summary::before{content:"\2212"}
.note p{margin-top:.5rem;font-size:.93rem}
.link{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--accent);width:fit-content}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.more{margin-top:2rem}

/* playground */
.play-note{margin:-.8rem 0 1.4rem}
.play-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1.2rem}
select{border:1.5px solid var(--line);border-radius:999px;background:var(--surface);padding:.7em 1.2em}
.stat{color:var(--soft);font-size:.92rem}
.bars{display:flex;align-items:flex-end;gap:3px;height:240px;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.bars i{flex:1;background:var(--faint);border-radius:3px 3px 0 0;min-width:0;transition:background .12s}
.bars i.hot{background:var(--accent)}
.bars i.done{background:var(--primary)}

/* resume, contact */
.resume h3{margin-bottom:.6rem}
.resume p{color:var(--soft)}
.resume p+h3{margin-top:1.6rem}
.resume p+p{margin-top:.9rem}
.resume b{color:var(--ink);font-weight:600}
.mail-btn{margin-top:1.8rem;display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:left;transition:border-color .2s}
.mail-btn:hover{border-color:var(--accent)}
.mail-btn .i{width:22px;height:22px;color:var(--accent)}
.mail-btn small{display:block;color:var(--faint);font-size:.8rem}
.mail-btn.ok small{color:var(--accent);font-weight:600}
form{display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
label{font-weight:600;font-size:.92rem}
input,textarea{border:1.5px solid var(--line);border-radius:8px;background:var(--surface);padding:.8em 1em;resize:vertical;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--tint)}
[aria-invalid="true"]{border-color:var(--accent)}
.err{min-height:1.1em;font-size:.84rem;color:var(--accent)}
.hp{position:absolute;left:-9999px}
form .btn{align-self:flex-start}
.note-msg{min-height:1.3em;font-size:.92rem;color:var(--soft)}
.note-msg.error{color:var(--accent)}

/* recruiter mode */
.rm-only{display:none}
.recruiter .rm-only{display:block}
.recruiter .fluff,.recruiter .fluff-sec{display:none}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.glance>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.glance h3{margin-bottom:.5rem}
.glance p{color:var(--soft);font-size:.98rem}

/* command palette */
.pal{margin:12vh auto auto;width:min(560px,92vw);padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.55);overflow:hidden}
.pal::backdrop{background:rgba(6,12,24,.55);backdrop-filter:blur(3px)}
.pal input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:1.1rem 1.3rem;background:transparent;font-size:1.05rem}
.pal input:focus{box-shadow:none}
.pal ul{max-height:min(46vh,340px);overflow-y:auto;padding:.4rem}
.pal li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-radius:8px;cursor:pointer;font-size:.97rem}
.pal li small{color:var(--faint);font-size:.8rem;align-self:center}
.pal li[aria-selected="true"]{background:var(--tint);color:var(--ink)}
.pal li.empty{color:var(--faint);cursor:default}
.pal-foot{padding:.6rem 1.2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--faint)}

/* footer + helpers */
.footer{border-top:1px solid var(--line);padding-block:2rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;color:var(--faint);font-size:.9rem}
.foot .social{margin:0}
.to-top{position:fixed;right:1.2rem;bottom:1.2rem;width:46px;height:46px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,visibility .3s,transform .3s;z-index:90}
.to-top.show{opacity:1;visibility:visible;transform:none}
.toast{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,16px);background:var(--primary);color:var(--on-primary);padding:.7em 1.3em;border-radius:999px;font-size:.9rem;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;z-index:150}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* cursor follower (fine pointers only, native cursor stays visible) */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:600;opacity:0;transition:opacity .25s}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent)}
.cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid var(--accent);transition:opacity .25s,width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s}
.cur-ring.hot{width:56px;height:56px;margin:-28px 0 0 -28px;background:color-mix(in srgb,var(--accent) 14%,transparent)}

@media (max-width:860px){
  .two{grid-template-columns:1fr}
  .menu-btn{display:inline-flex}
  .kbd span{display:none}
  .kbd{padding:0;width:42px}
  .links{position:fixed;inset:0 0 0 auto;width:min(300px,80vw);background:var(--surface);flex-direction:column;align-items:flex-start;gap:.3rem;padding:5.5rem 1.8rem 2rem;margin:0;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 40px -24px rgba(0,0,0,.4)}
  .links.open{transform:none}
  .links a{font-family:var(--display);font-size:1.4rem;padding:.6rem 0;width:100%;border-bottom:1px solid var(--line)}
  .links .pill{margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}
@media print{.header,.to-top,.toast,.pal,.cur-dot,.cur-ring{display:none}body{background:#fff;color:#000}}