:root{
  --paper:#f5f5f0;
  --paper-raised:#eeeee7;
  --ink:#1e2124;
  --ink-soft:#4b4f52;
  --muted:#767a76;
  --teal:#1f6f6b;
  --teal-deep:#164f4c;
  --gold:#b8862f;
  --rule:#d9d8cf;
  --max:720px;
  --sidebar:270px;
  --topbar-h:60px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-deep);text-decoration:none;border-bottom:1px solid rgba(31,111,107,0.3);}
a:hover{border-bottom-color:var(--teal-deep);}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;color:var(--ink);}

/* Top navigation bar */
.topbar{
  height:var(--topbar-h);
  box-sizing:border-box;
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 24px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.topbar::-webkit-scrollbar{display:none;}
.topbar a{
  border-bottom:none;
  color:var(--ink-soft);
  font-size:14px;
  padding:8px 16px;
  border-radius:20px;
  white-space:nowrap;
  flex-shrink:0;
}
.topbar a:hover, .topbar a.active{background:var(--paper-raised);color:var(--ink);}

/* Layout */
.shell{display:flex;min-height:calc(100vh - var(--topbar-h));}
.sidebar{
  width:var(--sidebar);
  flex-shrink:0;
  padding:40px 32px;
  position:sticky;
  top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
  border-right:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  scrollbar-width:thin;
}
.sidebar-top{display:flex;align-items:center;gap:14px;}
.mark{
  width:72px;height:72px;border-radius:50%;
  background:var(--teal);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:24px;font-weight:600;
  overflow:hidden;flex-shrink:0;
  border:2px solid var(--paper-raised);
}
.mark img{width:100%;height:100%;object-fit:cover;display:block;}
.big-photo{
  width:220px;height:220px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  border:3px solid var(--paper-raised);
  box-shadow:0 1px 0 var(--rule);
}
.big-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.about-head{display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.sidebar h1{font-size:22px;line-height:1.25;margin:0 0 2px;}
.sidebar .role{font-size:13.5px;color:var(--ink-soft);margin:0;}
.sidebar-foot{font-size:13px;color:var(--muted);margin-top:28px;}
.sidebar-links{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.sidebar-links a{border-bottom:none;color:var(--ink-soft);font-size:13.5px;}
.sidebar-links a:hover{color:var(--teal-deep);}

main{flex:1;min-width:0;padding:64px 48px 96px;max-width:calc(var(--max) + 96px);}
section{max-width:var(--max);margin-bottom:64px;}
section:last-child{margin-bottom:40px;}
.eyebrow{font-size:12.5px;color:var(--muted);margin:0 0 6px;}
h2.section-title{font-size:26px;margin:0 0 28px;}
.page-title{font-size:32px;margin:0 0 14px;}
.page-lede{font-size:17px;color:var(--ink-soft);max-width:60ch;margin:0 0 44px;}

/* Hero (home page) */
.hero p.lede{font-size:18px;color:var(--ink-soft);max-width:60ch;margin:0 0 32px;}
.scatter-wrap{margin:0 0 8px;}
.scatter-wrap svg{display:block;width:100%;max-width:420px;height:auto;}
.stats{display:flex;gap:36px;margin:0 0 40px;flex-wrap:wrap;}
.stat-num{font-family:'Fraunces',serif;font-size:30px;color:var(--teal-deep);line-height:1;}
.stat-label{font-size:12.5px;color:var(--muted);margin-top:6px;}

/* Bio */
.bio p{max-width:66ch;color:var(--ink-soft);margin:0 0 16px;font-size:15.5px;}
.bio p:last-child{margin-bottom:0;}

/* Interests grid */
.interests{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;}
.interests li{font-size:14.5px;color:var(--ink-soft);padding-left:16px;border-left:2px solid var(--teal);}

/* Education / list rows */
.ed-item{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:14.5px;}
.ed-item:first-child{border-top:1px solid var(--rule);}
.ed-item .what{color:var(--ink);}
.ed-item .where{color:var(--muted);font-size:13.5px;margin-top:2px;}
.ed-item .year{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Publications */
.pub-group{margin-bottom:28px;}
.pub-group:last-child{margin-bottom:0;}
.pub-group-label{font-size:13px;color:var(--gold);font-weight:600;margin:0 0 14px;}
ol.pubs{list-style:none;counter-reset:pub;margin:0;padding:0;}
ol.pubs li{counter-increment:pub;display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--ink-soft);}
ol.pubs li:first-child{border-top:1px solid var(--rule);}
ol.pubs li::before{content:counter(pub);color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;flex-shrink:0;width:20px;padding-top:1px;}
ol.pubs li .venue{color:var(--muted);font-size:13.5px;}
ol.pubs li strong{color:var(--ink);font-weight:500;}
.pubs-note{font-size:13.5px;color:var(--muted);margin-top:16px;}

/* Projects / patents / funding */
.proj{padding:20px 0;border-bottom:1px solid var(--rule);}
.proj:first-of-type{border-top:1px solid var(--rule);}
.proj-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:6px;}
.proj-head h3{font-size:16.5px;margin:0;}
.tag{font-size:11.5px;color:var(--teal-deep);background:rgba(31,111,107,0.1);padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.tag.status-gold{color:var(--gold);background:rgba(184,134,47,0.12);}
.proj p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:64ch;}
.proj .meta{font-size:13px;color:var(--muted);margin-top:6px;}

/* Timeline (numbered, chronological) */
ol.timeline{list-style:none;counter-reset:tl;margin:0;padding:0;}
ol.timeline > li{counter-increment:tl;display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--rule);}
ol.timeline > li:first-child{border-top:1px solid var(--rule);}
ol.timeline > li::before{
  content:counter(tl);
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--teal);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:14px;font-weight:600;
  margin-top:2px;
}
ol.timeline h3{font-size:17px;margin:0 0 2px;}
ol.timeline .role{font-size:13.5px;color:var(--teal-deep);margin:0 0 10px;}
ol.timeline p{font-size:14.5px;color:var(--ink-soft);margin:0 0 12px;max-width:60ch;}
ol.timeline p:last-child{margin-bottom:0;}
.module-tags{display:flex;flex-wrap:wrap;gap:6px;}
.module-tags span{font-size:12.5px;color:var(--ink-soft);background:var(--paper-raised);border:1px solid var(--rule);padding:4px 10px;border-radius:20px;}

.service-item{padding:12px 0;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--ink-soft);}
.service-item:first-child{border-top:1px solid var(--rule);}
.service-item strong{color:var(--ink);font-weight:500;}

/* Skills table */
.skills-group{margin-bottom:36px;}
.skills-group:last-child{margin-bottom:0;}
.skills-group h3{font-size:17px;margin:0 0 14px;}
.skills-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.skills-col-label{font-size:12px;color:var(--muted);margin:0 0 10px;text-transform:none;}
.skills-col ul{list-style:none;margin:0;padding:0;}
.skills-col li{font-size:14px;color:var(--ink-soft);padding:8px 0 8px 16px;border-left:2px solid var(--teal);margin-bottom:8px;}
.skills-col li strong{color:var(--ink);font-weight:500;}
@media (max-width: 640px){
  .skills-cols{grid-template-columns:1fr;}
}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.contact-card{border:1px solid var(--rule);border-radius:10px;padding:16px 18px;background:var(--paper-raised);}
.contact-card .label{font-size:12.5px;color:var(--muted);margin-bottom:4px;}
.contact-card a{border-bottom:none;font-size:14.5px;font-weight:500;}

footer{max-width:var(--max);font-size:13px;color:var(--muted);padding-top:24px;border-top:1px solid var(--rule);}

@media (max-width: 860px){
  html{overflow-x:hidden;}
  body{overflow-x:hidden;}
  .topbar{padding:0 14px;}
  .topbar a{padding:7px 12px;font-size:13.5px;}
  .shell{flex-direction:column;min-height:auto;}
  .sidebar{
    width:100%;height:auto;position:relative;
    top:0;
    flex-direction:column;align-items:stretch;
    padding:18px 20px 14px;
    border-right:none;border-bottom:1px solid var(--rule);
    gap:0;
  }
  .sidebar-top{gap:12px;}
  .mark{margin-bottom:0;width:44px;height:44px;font-size:16px;flex-shrink:0;}
  .sidebar h1{font-size:18px;line-height:1.2;}
  .sidebar .role{margin-bottom:0;font-size:12.5px;}

  .sidebar-foot{margin-top:16px;}
  .sidebar-links{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-top:0;
  }
  .sidebar-links a{font-size:12.5px;}

  main{padding:32px 18px 56px;}
  .page-title{font-size:26px;}
  h2.section-title{font-size:21px;margin-bottom:20px;}
  .page-lede{font-size:15.5px;margin-bottom:32px;}
  .hero p.lede{font-size:16px;}

  section{margin-bottom:44px;}

  .interests{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .ed-item{flex-direction:column;gap:4px;}
  .ed-item .year{white-space:normal;}

  .stats{gap:20px 28px;}
  .stat-num{font-size:24px;}

  .about-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .big-photo{width:120px;height:120px;}

  ol.timeline > li{gap:12px;padding:18px 0;}
  ol.timeline > li::before{width:26px;height:26px;font-size:12px;margin-top:0;}
  ol.timeline h3{font-size:15.5px;}
  ol.timeline p{font-size:14px;}
  .module-tags span{font-size:11.5px;padding:3px 8px;}

  .proj-head{flex-direction:column;align-items:flex-start;gap:6px;}

  .skills-cols{grid-template-columns:1fr;}
  .skills-group h3{font-size:16px;}
}

@media (max-width: 420px){
  .sidebar h1{font-size:16px;}
  .mark{width:38px;height:38px;font-size:14px;}
  .page-title{font-size:22px;}
  .stat-num{font-size:21px;}
  .stats{gap:16px 22px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}