:root{
  --bg:#f4efe6; --bg2:#ebe4d6; --ink:#1b1a17; --mute:#6d675c; --line:#d6cdbb;
  --accent:#d9461a; --card:#faf6ee;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --bg:#121311; --bg2:#1a1c19; --ink:#e9e6dc; --mute:#8d8a7e; --line:#2c2f2a;
  --accent:#ff6a3d; --card:#171916;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121311; --bg2:#1a1c19; --ink:#e9e6dc; --mute:#8d8a7e; --line:#2c2f2a;
    --accent:#ff6a3d; --card:#171916;
  }
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:28px 28px;background-attachment:fixed}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
main,footer,.top{max-width:1080px;margin-inline:auto;padding-inline:24px}

/* top bar */
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;height:64px;
  max-width:none;padding-inline:max(24px,calc((100vw - 1080px)/2 + 24px));
  background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 14px var(--mono);letter-spacing:.04em;color:var(--accent)}
.mark span{color:var(--ink)}
.top nav{display:flex;align-items:center;gap:26px;font:400 14px var(--mono)}
.top nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.top nav a:hover{color:var(--accent)}
#theme{width:34px;height:20px;border-radius:20px;border:1px solid var(--mute);background:none;cursor:pointer;position:relative;padding:0}
#theme span{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--accent);transition:transform .3s}
:root[data-theme="dark"] #theme span{transform:translateX(14px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #theme span{transform:translateX(14px)}}

/* hero */
.hero{padding:clamp(60px,12vh,130px) 0 40px}
.eyebrow{font:400 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
h1{font:400 clamp(44px,8vw,96px)/1.02 var(--serif);letter-spacing:-.02em;font-variation-settings:"opsz" 144}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--accent)}
.lede{max-width:600px;margin-top:30px;font-size:19px;color:var(--mute)}
.trace{display:block;width:100%;height:110px;margin-top:70px;overflow:visible}
.trace path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000)}
.trace.go path{animation:draw 4.5s cubic-bezier(.6,.05,.3,1) forwards}
.trace circle{fill:var(--accent);opacity:0}
.trace.go circle{opacity:1}
@keyframes draw{to{stroke-dashoffset:0}}
.trace-cap{display:flex;justify-content:space-between;font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:10px;border-top:1px solid var(--line);padding-top:10px}

/* sections */
.block{padding:clamp(60px,10vh,110px) 0 0}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:36px;border-bottom:1px solid var(--line);padding-bottom:14px}
.num{font:400 13px var(--mono);color:var(--accent)}
h2{font:400 clamp(28px,4vw,42px)/1.15 var(--serif);letter-spacing:-.01em}
.sec-sub{margin:-18px 0 30px;color:var(--mute)}
h3{font:500 21px/1.3 var(--serif)}

.now-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.now{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:28px;position:relative;transition:transform .3s,border-color .3s}
.now:hover{transform:translateY(-4px);border-color:var(--accent)}
.now::before{content:"";position:absolute;left:-1px;top:28px;width:3px;height:28px;background:var(--accent)}
.tag{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.now h3{margin:12px 0 10px}
.now p{color:var(--mute);font-size:15.5px}

.work{list-style:none;padding:0}
.work li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
.work li:hover{padding-left:12px}
.work li:hover h3{color:var(--accent)}
.yr{font:400 13px var(--mono);color:var(--mute);padding-top:5px}
.work h3{transition:color .2s}
.work p{color:var(--mute);margin-top:6px;max-width:680px;font-size:15.5px}

.posts{list-style:none;padding:0}
.posts a{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .3s}
.posts a:hover{padding-left:12px}
.posts a:hover h3{color:var(--accent)}
.posts time{font:400 13px var(--mono);color:var(--mute)}
.posts p{color:var(--mute);font-size:15px;margin-top:4px}
.posts .arr{color:var(--accent);font-family:var(--mono)}
.empty{color:var(--mute);font-style:italic}

.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:50px}
blockquote{font:300 clamp(28px,3.4vw,40px)/1.25 var(--serif);font-style:italic;border-left:3px solid var(--accent);padding-left:26px;align-self:start;position:sticky;top:100px}
.about-grid p{margin-bottom:18px}
.small{font-size:14.5px;color:var(--mute)}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--ink);padding:10px 22px;border-radius:40px;font:400 14px var(--mono);transition:all .25s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.stack span{font:400 12.5px var(--mono);border:1px solid var(--line);padding:6px 14px;border-radius:40px;color:var(--mute);background:var(--card)}

.contact{text-align:center;padding-bottom:100px}
.contact h2{font-size:clamp(34px,6vw,64px)}
.mail{display:inline-block;margin-top:34px;font:400 clamp(18px,3vw,28px) var(--mono);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:4px;transition:color .2s}
.mail:hover{color:var(--accent)}
.links{margin-top:30px;display:flex;justify-content:center;gap:28px;font:400 14px var(--mono)}
.links a{color:var(--mute);text-decoration:none}.links a:hover{color:var(--accent)}

footer{display:flex;justify-content:space-between;padding-block:26px;border-top:1px solid var(--line);font:400 12px var(--mono);color:var(--mute)}
.blink::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;animation:bl 2s infinite}
@keyframes bl{50%{opacity:.2}}

/* post page */
.post{max-width:700px;margin:0 auto;padding:60px 0 80px}
.post h1{font-size:clamp(34px,5.5vw,56px);margin-bottom:34px}
.back{font:400 13px var(--mono);color:var(--mute);text-decoration:none;display:inline-block;margin-bottom:40px}
.back:hover{color:var(--accent)}
.prose p{margin-bottom:22px;font-size:18.5px;line-height:1.75}
.prose h2{font-size:28px;margin:44px 0 16px}
.prose ul,.prose ol{margin:0 0 22px 22px;font-size:18px}
.prose li{margin-bottom:8px}
.prose blockquote{position:static;font-size:24px;margin:30px 0}
.prose code{font:14.5px var(--mono);background:var(--bg2);padding:2px 6px;border-radius:3px}
.prose pre{background:var(--bg2);padding:18px;overflow:auto;border-radius:4px;margin-bottom:22px}
.prose pre code{background:none;padding:0}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.js-off .reveal{opacity:1;transform:none}

@media (max-width:760px){
  .top nav{gap:16px;font-size:13px}
  .work li,.posts a{grid-template-columns:1fr;gap:4px}.posts .arr{display:none}
  .about-grid{grid-template-columns:1fr;gap:30px}blockquote{position:static}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.trace path{stroke-dashoffset:0}.trace circle{display:none}
}

/* additions */
.past{font:400 13px var(--mono);color:var(--mute);margin:-12px 0 22px}
.hobbies{font:400 14px var(--mono);color:var(--ink)}
.hobbies span{color:var(--accent);margin-right:12px;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.papers{list-style:none;padding:0;counter-reset:p}
.papers li{counter-increment:p;padding:26px 0 26px 56px;border-bottom:1px solid var(--line);position:relative}
.papers li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:30px;font:400 13px var(--mono);color:var(--accent)}
.papers h3{font-size:22px}
.papers .venue{color:var(--mute);margin-top:8px;font-size:15.5px}
.papers .meta{font:400 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:10px}
.papers a{color:var(--accent)}
@media (max-width:760px){.top nav a:nth-child(n+4){display:none}}