:root{
  --bg:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --line:#e6e8ec;
  --card:#f7f8fa;
  --accent:#2f6fd6;      /* blue */
  --accent-soft:#e5edfb;
  --link:#3b82c4;
}
html[data-theme="dark"]{
  --bg:#0e1116;
  --text:#e8eaed;
  --muted:#9aa0aa;
  --line:#232833;
  --card:#161a21;
  --accent:#6ea0ff;
  --accent-soft:#1b2942;
  --link:#7db3f0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  max-width:1080px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.topbar .brand{font-weight:700;font-size:20px;color:var(--text)}
.topbar .brand:hover{text-decoration:none}
.topbar nav{display:flex;align-items:center;gap:28px}
.topbar nav a{color:var(--muted);font-size:17px}
.topbar nav a:hover{color:var(--text);text-decoration:none}
.topbar nav a.active{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:5px}
.toggle{
  background:var(--card);border:1px solid var(--line);color:var(--text);
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0;
}
.toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Layout ---------- */
.layout{
  max-width:1080px;margin:0 auto;padding:40px 32px 64px;
  display:flex;gap:56px;align-items:flex-start;
}
.sidebar{
  width:230px;flex-shrink:0;
  position:sticky;top:96px;
  text-align:center;
}
.content{flex:1;min-width:0;padding-top:4px}

/* ---------- Sidebar ---------- */
.sidebar .avatar{
  width:180px;height:180px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--card);margin:0 auto 20px;display:block;
}
.sidebar .s-name{font-size:22px;font-weight:700;letter-spacing:-.2px;margin-bottom:8px}
.sidebar .s-role{font-style:italic;font-size:15px;margin-bottom:2px}
.sidebar .s-areas{color:var(--muted);font-size:15px;margin-bottom:22px}

.contact{list-style:none;text-align:left;display:flex;flex-direction:column;gap:2px}
.contact a{
  display:flex;align-items:center;gap:11px;
  padding:5px 4px;color:var(--text);font-size:15px;border-radius:6px;
}
.contact a:hover{color:var(--accent);text-decoration:none}
.contact svg{flex-shrink:0;width:17px;height:17px}

/* ---------- Content ---------- */
.content h1.page-title{
  font-size:34px;font-weight:700;letter-spacing:-.5px;margin-bottom:28px;
}
.content .bio p{margin-bottom:18px;font-size:16.5px}
.content .bio p:last-child{margin-bottom:0}
.content .bio strong{font-weight:600}

/* ---------- Publications ---------- */
.year{font-size:15px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:1px;margin:34px 0 6px}
.year:first-of-type{margin-top:0}
.pub{padding:16px 0;border-bottom:1px solid var(--line)}
.pub:last-child{border-bottom:none}
.pub .title{font-size:17px;line-height:1.4;margin-bottom:7px}
.pub .vtag{font-weight:700;color:var(--text);margin-right:6px}
.pub .title a{font-weight:600}
.pub .meta{font-size:15px;color:var(--muted);line-height:1.55}
.pub .meta b{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pub .meta em{font-style:italic}
.pub .type{
  display:inline-block;font-size:12px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);
  padding:1px 9px;border-radius:100px;margin-right:8px;vertical-align:middle;
}

footer{
  border-top:1px solid var(--line);
  padding:26px 32px;color:var(--muted);font-size:13px;text-align:center;
}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .layout{flex-direction:column;gap:36px;padding:32px 24px 56px}
  .sidebar{position:static;width:100%;top:auto}
  .sidebar .avatar{width:140px;height:140px}
  .contact{max-width:260px;margin:0 auto}
  .topbar .inner{padding:16px 24px}
  .topbar nav{gap:20px;font-size:16px}
  .content h1.page-title{font-size:28px}
}