/* khlee.org — minimal, mobile-first */

:root{
  --ink:#1b1c1f;
  --ink-soft:#4a4d55;
  --muted:#8a8d95;
  --rule:#e6e7ea;
  --bg:#fff;
  --accent:#e2490f;
  --accent-soft:#fdf1ec;
  --maxw:880px;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Inter,Arial,"Noto Sans",sans-serif;
  --serif:serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.46;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.p-home main.wrap{padding-right:calc(22px + var(--maxw) * .12)}

a{color:var(--accent);text-decoration:none}
a:hover{border-bottom:1px solid var(--accent)}

/* ---------- top bar ---------- */
.topbar{background:#fff;position:sticky;top:0;z-index:10}
.topbar-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{color:var(--ink);font-weight:600;letter-spacing:.01em;font-size:17px}
.brand:hover{border-bottom:0;color:var(--accent)}
.nav{display:flex;gap:19px;font-family:var(--sans)}
.nav a{color:var(--ink-soft);font-size:16px}
.nav a:hover{color:var(--accent);border-bottom:0}
.nav a.on{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px}
.navbtn{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px}
.navbtn span{display:block;width:20px;height:2px;background:var(--ink)}

@media (max-width:640px){
  .navbtn{display:flex}
  .nav{display:none;width:100%;flex-direction:column;gap:0;padding-top:8px}
  #navtoggle:checked ~ .nav{display:flex}
  .nav a{padding:9px 0;border-top:1px solid var(--rule)}
  .nav a.on{border-bottom:0;color:var(--accent)}
}

/* ---------- type ---------- */
main{padding:44px 0 10px}
h1{font-size:25px;line-height:1.13;margin:0 0 6px;letter-spacing:-.01em}
h2{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
   font-weight:600;margin:56px 0 18px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
main > h2:first-child{margin-top:0}
h2.sep{margin-top:104px}
h3{font-size:18px;margin:0 0 6px;font-weight:600}
p{margin:0 0 16px}
.lede{font-size:19px;line-height:1.44}
.muted{color:var(--muted);font-size:14px}
.tag{color:var(--ink-soft);font-size:14.5px}

/* ---------- hero ---------- */
.hero{display:flex;gap:30px;align-items:flex-start}
.hero img{width:158px;border-radius:3px;flex:none;filter:saturate(.95)}
.hero .role{color:var(--ink-soft);margin:0 0 18px;font-size:15.5px}
.hero .role b{font-weight:600;color:var(--ink)}
@media (max-width:640px){
  .hero{flex-direction:column;gap:18px}
  .hero img{width:132px}
  h1{font-size:23px}
  .lede{font-size:17.5px}
}

/* ---------- intro (home) ---------- */
.role{color:var(--muted);font-size:14px;margin:0 0 14px}
.intro{overflow:hidden}
.intro h1{margin:2px 0 2px}
.me{float:left;width:62px;margin:2px 14px 8px 0}
.me img{width:62px;border-radius:3px;filter:saturate(.95);display:block}
.intro > p:not(.role){clear:left}
@media (max-width:640px){
  .p-home main.wrap{padding-right:22px}
  .intro p.wide{clear:none}
  .me{width:62px;margin:2px 14px 8px 0}
  .me img{width:62px}
}

/* ---------- brain tree ---------- */
.me.brain{width:62px}
.me.brain img{width:62px;border-radius:0;opacity:.85}
@media (max-width:640px){
  .me.brain,.me.brain img{width:62px}
}

/* ---------- highlight rows ---------- */
.rows{border-top:1px solid var(--rule)}
.row{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.row .yr{flex:none;width:74px;color:var(--muted);font-size:13.5px;padding-top:2px;font-variant-numeric:tabular-nums}
.row .txt{flex:1}
.row .txt p{margin:0}
@media (max-width:640px){
  .row{flex-direction:column;gap:2px}
  .row .yr{width:auto}
}

/* ---------- work cards ---------- */
.work{display:flex;gap:26px;align-items:flex-start;margin:0 0 40px;padding-bottom:34px;border-bottom:1px solid var(--rule)}
.work:last-child{border-bottom:0}
.work figure{margin:0;flex:0 0 40%}
.work figure img{width:100%;border:1px solid var(--rule);border-radius:2px;background:#fff}
.work figure img.bare{border:0;border-radius:0}
.work figure figcaption{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.31}
.work .body{flex:1}
.work .venue{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.work .au{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.31}
.work .links{margin-top:12px;font-size:14px}
.work .links a{margin-right:12px}
@media (max-width:760px){
  .work{flex-direction:column;gap:0}
  .work figure{flex:none;width:100%;order:2;margin:0 0 16px}
  .work .body{display:contents}
  .work .body h3{order:1;margin:0 0 10px}
  .work .body p{order:3}
}
.work.wide figure{flex:0 0 100%}

/* ---------- axes ---------- */
.axis{margin:0 0 26px}
.axis h3{font-size:16.5px}
.axis h3 span{color:var(--accent);font-weight:600;margin-right:8px}

/* ---------- publications ---------- */
.pub{padding:15px 0;border-bottom:1px solid var(--rule)}
.pub:last-child{border-bottom:0}
.pub .t{margin:0 0 3px}
.pub .a{margin:0;color:var(--ink-soft);font-size:14.5px}
.pub .v{margin:2px 0 0;font-size:14.5px;color:var(--muted)}
.pub .v em{font-style:normal;color:var(--ink-soft)}
.pub b.me{font-weight:600;color:var(--ink)}
.pub .lk{font-size:13.5px;margin-top:5px}
.pub .lk a{margin-right:10px}
.note{display:inline-block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.note.grey{color:var(--muted);border-color:var(--rule)}

/* ---------- lists ---------- */
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:7px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
ul.plain li:last-child{border-bottom:0}
ul.bul{padding-left:18px;margin:0 0 16px}
ul.bul li{margin-bottom:7px}

/* ---------- video ---------- */
.vid{margin:0 0 40px}
.vid h3{margin-bottom:4px}
.vid p{font-size:15px;color:var(--ink-soft)}
.frame{position:relative;width:72%;padding-top:40.5%;background:#f4f4f6;border-radius:2px;overflow:hidden}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){
  .frame{width:100%;padding-top:56.25%}
}

/* ---------- footer ---------- */
.foot{margin-top:70px;padding:24px 0 42px;font-size:14px;color:var(--ink-soft)}
.foot p{margin:0 0 4px}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--accent)}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:10px 0 30px}
.notfound h1{font-size:64px;line-height:1;margin:10px 0 6px;color:var(--accent)}
.notfound .lede{margin:0 auto 22px;max-width:34ch}
.notfound img{width:100%;max-width:420px;height:auto;border-radius:4px}
.notfound .muted{margin-top:16px}