:root{
  --ink:#10202c; --soft:#374c59; --mute:#6e8595;
  --paper:#ffffff; --card:#ffffff; --line:#e2e7eb;
  --hover:#edf2f7; --accent:#14496f; --accent-hi:#1c6a9e;
  --nav-h:60px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8eef2; --soft:#bac8d2; --mute:#8498a7;
    --paper:#0e141a; --card:#151d24; --line:#233039;
    --hover:#18242e; --accent:#7fb2d6; --accent-hi:#a3cbe8;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#e8eef2; --soft:#bac8d2; --mute:#8498a7;
  --paper:#0e141a; --card:#151d24; --line:#233039;
  --hover:#18242e; --accent:#7fb2d6; --accent-hi:#a3cbe8;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-size:18px; line-height:1.62;
  color:var(--soft); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-hi); text-decoration:underline }
b,strong{ color:var(--ink); font-weight:600 }

/* Shared type roles */
.mono, .nav a:not(.nav-name), .fullname, .pub-year, .badge, .pub-links a,
.when, .course-terms, .contact dt, .chips li, .proj-kicker, .sec-head .role-label, footer{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── Nav ── */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-top:3px solid var(--accent);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1120px; margin:0 auto; padding:0 36px;
  height:var(--nav-h); display:flex; align-items:center; gap:4px;
}
.nav-name{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); margin-right:auto; white-space:nowrap;
}
.nav-name:hover{ text-decoration:none; color:var(--accent) }
.nav a:not(.nav-name){
  position:relative; padding:20px 14px;
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); white-space:nowrap;
}
.nav a:not(.nav-name):hover{ color:var(--ink); text-decoration:none }
.nav a.active{ color:var(--ink) }
.nav a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:14px;
  height:2px; background:var(--accent);
}
.nav a.nav-cv{ color:var(--accent) }
.nav a.nav-cv:hover{ color:var(--accent-hi) }

/* ── Shell: content left, profile column right ── */
.shell{
  max-width:1120px; margin:0 auto; padding:56px 36px 80px;
  display:grid; grid-template-columns:minmax(0,1fr) 252px; gap:64px; align-items:start;
}
main{ grid-column:1; grid-row:1 }
.side{ grid-column:2; grid-row:1; position:sticky; top:calc(var(--nav-h) + 36px) }
.photo{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:2px;
}
.side h1{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:1.42rem; font-weight:600; line-height:1.18; letter-spacing:-.015em;
  color:var(--ink); margin:18px 0 6px;
}
.fullname{
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mute); line-height:1.45; margin-bottom:12px;
}
.role{ font-size:16.5px; color:var(--ink); font-weight:600 }
.affil{ font-size:16px; color:var(--mute); line-height:1.45; margin-bottom:18px }
.lns{ list-style:none; border-top:1px solid var(--line) }
.ln{
  display:flex; align-items:center; gap:11px;
  padding:9px 0 9px 2px; border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--soft); transition:color .15s, padding .15s;
}
.ln svg{ width:17px; height:15px; flex-shrink:0; fill:var(--mute); transition:fill .15s }
.ln:hover{ color:var(--accent); text-decoration:none; padding-left:6px }
.ln:hover svg{ fill:var(--accent) }

/* ── Sections ── */
main h2{
  display:flex; align-items:center; gap:18px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:1.28rem; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 22px;
  scroll-margin-top:calc(var(--nav-h) + 20px);
}
main h2::after{ content:""; flex:1; height:1px; background:var(--line) }
section + section{ margin-top:54px }
section p + p{ margin-top:14px }

.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; list-style:none }
.chips li{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--soft); border:1px solid var(--line); background:var(--card);
  padding:4px 10px; border-radius:2px;
}

/* ── Publications: year in a left gutter ── */
.pub-group{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 20px }
.pub-group + .pub-group{ margin-top:10px }
.pub-year{
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); padding-top:20px;
}
.pub-list{ list-style:none }
.pub-item{ padding:18px 0; border-top:1px solid var(--line) }
.badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.badge{
  font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); border:1px solid var(--line); border-radius:2px; padding:3px 8px;
}
.badge-alt{ color:var(--accent); border-color:var(--accent) }
.pub-title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.4;
}
.pub-authors{ font-size:17px; margin-top:4px }
.pub-authors b{ color:var(--ink) }
.pub-venue{ font-size:16px; color:var(--mute); font-style:italic; margin-top:2px }
.pub-points{ list-style:none; margin-top:8px; font-size:16.5px }
.pub-points li{ position:relative; padding-left:20px; margin:4px 0 }
.pub-points li::before{ content:"—"; position:absolute; left:0; color:var(--accent) }
.pub-links{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px }
.pub-links a{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--soft); border:1px solid var(--line); border-radius:2px; padding:4px 10px;
  transition:border-color .15s, color .15s;
}
.pub-links a:hover{ color:var(--accent); border-color:var(--accent); text-decoration:none }

/* ── Projects & posters ── */
.proj{ padding:20px 0; border-top:1px solid var(--line) }
.proj-kicker{
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:5px;
}
.proj-title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:17px; font-weight:600; color:var(--ink); line-height:1.4;
}
.proj-note{ font-weight:400; color:var(--mute) }
.proj-meta{ font-size:16px; color:var(--mute); font-style:italic; margin-top:3px }
.proj p{ font-size:17px; margin-top:10px }
.proj ul{ list-style:none; margin-top:8px; font-size:17px }
.proj li{ position:relative; padding-left:20px; margin:4px 0 }
.proj li::before{ content:"—"; position:absolute; left:0; color:var(--accent) }

/* ── Experience, education, honors: date in a left gutter ── */
.exp{ }
.exp-row{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--line);
}
.exp-role{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600; color:var(--ink); font-size:16.5px;
}
.exp-org{ font-size:16.5px; color:var(--mute) }
.when{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute) }
.honors{ list-style:none }
.honors li{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line); font-size:17px;
}

/* ── Teaching ── */
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:36px 0 4px; padding-bottom:10px;
}
.sec-head:first-of-type{ margin-top:0 }
.sec-head h3{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:1.15rem; font-weight:600; color:var(--ink);
}
.sec-head h3 span{
  display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px; font-weight:400; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-top:4px;
}
.sec-when{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-left:auto }
.course{
  padding:15px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:baseline;
}
.course-code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--accent);
}
.course-name{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:16.5px; font-weight:600; color:var(--ink); margin-top:2px;
}
.course-terms{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); text-align:right }

/* ── Contact ── */
.contact{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 24px; font-size:17px }
.contact dt{
  color:var(--accent); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding-top:6px;
}

/* ── Footer ── */
footer{
  border-top:1px solid var(--line); padding:24px 36px;
  text-align:center; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute);
}

/* ── Responsive ── */
/* Unpin the profile column when it's taller than the window */
@media (max-height:840px){ .side{ position:static } }
@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); gap:40px; padding:34px 22px 60px }
  main{ grid-row:2 }
  .side{
    grid-column:1; grid-row:1; position:static;
    display:grid; grid-template-columns:170px minmax(0,1fr); gap:26px; align-items:center;
  }
  .side h1{ margin-top:0 }
  .nav-in{ padding:0 20px; gap:0 }
}
@media (max-width:620px){
  body{ font-size:17px }
  .shell{ padding:28px 16px 52px }
  .nav-in{ padding:0 14px }
  .nav a:not(.nav-name){ padding:20px 9px; font-size:11px; letter-spacing:.09em }
  .nav a.active::after{ left:9px; right:9px }
  .side{ grid-template-columns:minmax(0,1fr) }
  .photo{ max-width:220px }
  .pub-group{ grid-template-columns:minmax(0,1fr); gap:0 }
  .pub-year{ padding:0 0 6px }
  .exp-row, .honors li, .course{ grid-template-columns:minmax(0,1fr); gap:3px }
  .course-terms{ text-align:left }
  .contact{ grid-template-columns:minmax(0,1fr); gap:4px }
  .contact dt{ padding-top:10px }
}
@media (max-width:420px){
  .nav-name{ display:none }
  .nav-in{ justify-content:center }
}