:root{
  --paper:#FCFCFA;
  --ink:#17191E;
  --muted:#5E646D;
  --line:#E5E6E2;
  --accent:#1E3EC8;
  --fill:#FFF3C4;
  --mono:'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:940px;margin:0 auto;padding:0 24px}

/* ---------- site nav (shared across pages) ---------- */
.sitenav{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  flex-wrap:wrap;
  padding:26px 0 20px;
  border-bottom:1px solid var(--line);
}
.sitenav .brand{
  font:700 13px/1 var(--mono);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.sitenav .pages{display:flex;gap:20px;flex-wrap:wrap}
.sitenav .pages a{
  font:400 10.5px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1.5px solid transparent;
}
.sitenav .pages a:hover{color:var(--accent)}
.sitenav .pages a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- home masthead ---------- */
header.mastwrap{padding:60px 0 52px}
.mast{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
h1{
  font:700 clamp(34px, 5.6vw, 54px)/0.98 var(--mono);
  letter-spacing:-0.03em;
  text-transform:uppercase;
}
.tagline{margin:22px 0 18px;max-width:34em;font-size:18px}
.idline{
  font:400 10.5px/1.9 var(--mono);
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
}
nav.links{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
nav.links a{
  font:400 10.5px/1 var(--mono);
  letter-spacing:.1em;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:3px;
  padding:7px 11px;
  transition:border-color .15s, color .15s;
}
nav.links a:hover{border-color:var(--accent);color:var(--accent)}

figure.sig{padding-top:6px}
figure.sig svg{width:100%;height:auto;display:block}
figure.sig figcaption{
  margin-top:10px;
  font:400 9.5px/1.6 var(--mono);
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
  max-width:36em;
}

/* ---------- subpage header ---------- */
.pagehead{padding:52px 0 6px}
.pagehead h1{font-size:clamp(30px, 4.6vw, 46px)}
.pagehead p.lede{
  margin-top:18px;
  max-width:40em;
  font-size:17.5px;
  color:var(--muted);
}

/* ---------- section rows ---------- */
section{
  display:grid;
  grid-template-columns:168px 1fr;
  gap:40px;
  padding:44px 0;
  border-top:1px solid var(--line);
}
section h2{
  font:400 11px/1 var(--mono);
  letter-spacing:.22em;
  color:var(--muted);
  text-transform:uppercase;
  padding-top:7px;
}
.content > * + *{margin-top:16px}
.content p{max-width:42em}

/* focus-area tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}

/* ---------- top nav (not sticky) ---------- */
.topbar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar .sitenav{border-bottom:0}

/* ---------- "on this page" sidebar (left rail, scrolls with the page) ---------- */
main{position:relative}
.toc{display:none}
@media (min-width:1280px){
  .toc{
    display:block;
    position:absolute;
    top:2px;
    left:-170px;
    width:150px;
  }
}
.toc .toc-h{
  font:400 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.toc ol{list-style:none}
.toc a{
  display:block;
  font:400 10.5px/1.35 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  padding:6px 0 6px 12px;border-left:2px solid var(--line);
}
.toc a:hover{color:var(--ink);border-left-color:var(--muted)}
.toc a.active{color:var(--accent);border-left-color:var(--accent)}

/* small offset for anchored-section jumps */
main section[id], main article[id]{scroll-margin-top:16px}

/* accent-bulleted list (about "current threads") */
.threads{list-style:none;max-width:44em;margin-top:2px}
.threads li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.5;margin-top:9px}
.threads li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;background:var(--accent);border-radius:50%}

/* compact link list (résumé selected publications) */
.linklist{list-style:none;max-width:47em}
.linklist li{padding:8px 0;font-size:15.5px;line-height:1.5}
.linklist li + li{border-top:1px solid var(--line)}
.linklist em{
  font:400 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-style:normal;margin-left:8px;white-space:nowrap;
}

/* full-width list body for single-topic pages */
.pagebody{padding:30px 0 8px}
.pagebody > article:first-child{margin-top:0}

/* news */
.news{list-style:none}
.news li{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:20px;
  padding:7px 0;
  max-width:46em;
}
.news .yr{font:400 11px/2.1 var(--mono);color:var(--muted);letter-spacing:.06em}

/* publications & projects */
article + article{margin-top:34px}
article h3{font:600 19px/1.35 var(--serif);max-width:36em}
article h3 a{color:inherit;text-decoration:none}
article h3 a:hover{color:var(--accent)}
.authors{margin-top:5px;color:var(--muted);font-size:15.5px;max-width:40em}
.authors strong{color:var(--ink);font-weight:600}
.pubmeta{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{
  font:400 9.5px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:3px;
  padding:5px 8px;
  color:var(--ink);
}
.chip.acc{border-color:var(--accent);color:var(--accent)}
.chip.star{color:#8f7526;border-color:#E4D9B8;background:#FBF8EF}
.chip.status{display:inline-flex;align-items:center;gap:6px;color:var(--ink);border-color:var(--line)}
.chip.status .light{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.chip.status.green{border-color:#bfe3c9;background:#f2faf4}.chip.status.green .light{background:#2e9e4f}
.chip.status.yellow{border-color:#ecdba6;background:#fbf7ea}.chip.status.yellow .light{background:#e0a400}
.chip.status.red{border-color:#ecc4bd;background:#fbf1ef}.chip.status.red .light{background:#c0392b}
.orglogo{width:18px;height:18px;object-fit:contain;border-radius:3px;vertical-align:-4px;margin-right:7px}

/* project card: tags row / links row (github icon + star + live) / short + long desc */
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.plinks{display:flex;align-items:center;gap:16px;margin-top:10px}
.plinks .ghicon{color:var(--ink);display:inline-flex}
.plinks .ghicon:hover{color:var(--accent)}
.plinks .ghicon svg{width:18px;height:18px;display:block}
.plinks .starnum{font:400 11px/1 var(--mono);letter-spacing:.05em;color:#8f7526}
.plinks .livelink{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.plinks .livelink:hover{color:var(--accent)}
.pshort{margin-top:13px;font:600 16.5px/1.45 var(--serif);color:var(--ink);max-width:42em}
.pubmeta a{
  font:400 9.5px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:5px 2px;
}
.pubmeta a:hover{text-decoration:underline;text-underline-offset:4px}
article .desc{margin-top:10px;font-size:16px;max-width:42em}

/* experience / education */
.xp + .xp{margin-top:26px}
.xp .org{
  font:400 11px/1.6 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  max-width:44em;
}
.xp .org .when{color:var(--muted);letter-spacing:.08em}
.xp p.role{margin-top:6px;max-width:42em;font-size:16px}

/* ---------- resume / cv toggle ---------- */
.cv-toggle{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{
  font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;background:none;border:0;border-right:1px solid var(--line);
  cursor:pointer;color:var(--muted);
}
.seg button:last-child{border-right:0}
.seg button.active{background:var(--ink);color:var(--paper)}
.dl-btn{
  font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--accent);color:var(--accent);
  border-radius:7px;padding:11px 18px;cursor:pointer;white-space:nowrap;
}
.dl-btn:hover{background:var(--accent);color:#fff}

/* scannable metrics — plain bold, no highlight */
mark.hl{background:none;color:inherit;font-weight:600}

/* school-pride chips */
.pride{
  display:inline-block;margin-left:8px;
  font:400 9px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid;border-radius:20px;padding:1px 9px;vertical-align:middle;
}
.pride.emory{color:#012169;border-color:#012169;background:#EEF1F8}
.pride.gt{color:#003057;border-color:#B3A369;background:#FBF8EF}

/* experience entries (CV) — role title as the anchor */
.job + .job{margin-top:30px}
.job-head{display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline}
.job-title{font:600 19px/1.3 var(--serif);color:var(--ink)}
.job-when{
  font:400 10px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;text-align:right;
}
.job-org{margin-top:3px;font:italic 400 15.5px/1.45 var(--serif);color:var(--muted);max-width:44em}
.job ul{margin:12px 0 0;padding-left:18px;max-width:46em}
.job li{font-size:15.5px;line-height:1.55;margin-top:6px}
.job li::marker{color:var(--accent)}
.job .sum{margin-top:9px;font-size:15px;line-height:1.55;max-width:45em}
/* stack the date under the title on small screens */
@media (max-width:600px){
  .job-head{grid-template-columns:1fr}
  .job-when{text-align:left;margin-top:2px}
}

@media print{
  .sitenav, footer, .cv-toggle, .pagehead .lede, noscript{display:none !important}
  [hidden]{display:none !important}
  body{background:#fff;font-size:12px}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:none}
  section{border-color:#ccc;padding:14px 0}
  h1{font-size:26px}
}

/* ---------- front-page hero photo ---------- */
.hero-photo{margin:10px 0 4px}
.hero-photo img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line)}
.hero-photo figcaption{margin-top:10px;font:italic 400 14px/1.5 var(--serif);color:var(--muted)}

/* time-lapse video */
figure.video{margin:0}
figure.video video{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line);background:#000}
figure.video figcaption{margin-top:10px;font:italic 400 14px/1.5 var(--serif);color:var(--muted)}

/* slide-to-reveal: still photo -> time-lapse */
.hero-reveal{margin:10px 0 4px}
.hero-reveal figcaption{margin-top:10px;font:italic 400 14px/1.5 var(--serif);color:var(--muted)}
.reveal{
  position:relative;aspect-ratio:16 / 9;overflow:hidden;
  border-radius:6px;border:1px solid var(--line);background:#000;
  --pos:0%;touch-action:pan-y;
}
.rv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rv-photo{clip-path:inset(0 0 0 var(--pos))}
.rv-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.rv-grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;background:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  font:700 15px var(--mono);color:var(--accent);
}
.rv-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.rv-hint{
  position:absolute;left:12px;bottom:12px;
  font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(23,25,30,.55);padding:7px 11px;border-radius:20px;
  pointer-events:none;transition:opacity .3s;
}
.reveal.unlocked .rv-hint{opacity:0}

/* ---------- journey page ---------- */
.journeymap{margin:0}
.journeymap svg{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:6px;background:#F4F7FB;
}
.journeymap figcaption{margin-top:12px;font-size:14px;color:var(--muted);max-width:44em}
.zh{font-family:'Source Serif 4','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}

.lifebar{display:flex;height:26px;border-radius:5px;overflow:hidden;margin-top:2px;border:1px solid var(--line)}
.lifebar span{display:block;min-width:22px}
.yearaxis{
  display:flex;justify-content:space-between;margin-top:8px;
  font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--muted);
}
.phases{list-style:none;margin-top:22px;max-width:50em}
.phase{display:flex;align-items:baseline;gap:11px;padding:8px 0;font-size:15.5px;line-height:1.5}
.phase + .phase{border-top:1px solid var(--line)}
.phase .sw{flex:0 0 auto;width:12px;height:12px;border-radius:3px;position:relative;top:2px}
.phase b{font-weight:600;white-space:nowrap}

/* footprints: coarse place (left) -> fine footprint (right) */
.footprints{margin-top:24px}
.fprow{
  display:grid;grid-template-columns:190px 1fr;gap:36px;
  padding:22px 0;border-top:1px solid var(--line);align-items:start;
}
.footprints .fprow:last-of-type{border-bottom:1px solid var(--line)}
.fp-name{font:600 18px/1.3 var(--serif);color:var(--ink);display:flex;align-items:center;gap:9px}
.fp-name .sw{flex:0 0 auto;width:12px;height:12px;border-radius:3px}
.fp-years{margin-top:7px;font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fp-note{margin-top:7px;font-size:14.5px;color:var(--muted);font-style:italic;max-width:22em}
.fp-list{list-style:none;max-width:44em}
.fp-list li{padding:8px 0;font-size:15px;line-height:1.5}
.fp-list li + li{border-top:1px solid var(--line)}
.fp-cont{margin-top:18px;color:var(--muted);font-size:15px}
@media (max-width:820px){ .fprow{grid-template-columns:1fr;gap:12px;padding:18px 0} }

/* ---------- footer (shared) ---------- */
footer{
  border-top:1px solid var(--line);
  margin-top:8px;
  padding:30px 0 60px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font:400 10px/1.8 var(--mono);
  letter-spacing:.12em;
  color:var(--muted);
  text-transform:uppercase;
}
footer .footlinks{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  header.mastwrap{padding:44px 0 36px}
  .mast{grid-template-columns:1fr;gap:40px}
  section{grid-template-columns:1fr;gap:14px;padding:36px 0}
  section h2{padding-top:0}
  .pagehead{padding:40px 0 6px}
}