/* ---------- tokens ---------- */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --text:#26282b;
  --text-soft:#5b6169;
  --text-faint:#8b9198;
  --rule:#e3e6ea;
  --accent:#8a1a1a;          /* harvard crimson */
  --accent-soft:#f3e9e9;
  --max:1080px;
  --sidebar:250px;
  --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16181b; --bg-soft:#1e2126; --text:#e4e6e9; --text-soft:#aab1b9;
    --text-faint:#7d858e; --rule:#2c3036; --accent:#e08a8a; --accent-soft:#2a2022;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--rule); background:var(--bg);
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(180%) blur(8px);
}
.masthead-inner{
  max-width:var(--max); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px; flex-wrap:wrap;
}
.brand{font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--text); letter-spacing:.01em}
.brand:hover{text-decoration:none; color:var(--accent)}
.nav{display:flex; gap:2px; flex-wrap:wrap; margin:0; padding:0; list-style:none}
.nav a{
  display:block; padding:7px 11px; border-radius:6px;
  font-size:.855rem; color:var(--text-soft); letter-spacing:.01em;
}
.nav a:hover{background:var(--bg-soft); color:var(--text); text-decoration:none}
.nav a.is-active{color:var(--accent); font-weight:600}

/* ---------- layout ---------- */
.layout{
  max-width:var(--max); margin:0 auto; padding:44px 24px 72px;
  display:grid; grid-template-columns:var(--sidebar) 1fr; gap:56px; align-items:start;
}
@media (max-width:860px){
  .layout{grid-template-columns:1fr; gap:26px; padding:22px 20px 56px}
}

/* ---------- sidebar ---------- */
.sidebar{position:sticky; top:88px}

/* On narrow screens the sidebar stacks above the content, so keep it to a
   compact one-glance header instead of a full-height profile column. */
@media (max-width:860px){
  .sidebar{
    position:static; overflow:hidden;
    padding-bottom:18px; border-bottom:1px solid var(--rule);
  }
  .sidebar picture{float:left; margin:2px 15px 6px 0}
  .avatar,.avatar-fallback{width:76px; height:76px; font-size:1.5rem}
  .side-name{margin:0; font-size:1.14rem}
  .side-kr{margin:0 0 5px; font-size:.78rem}
  .side-role{font-size:.8rem; margin:0 0 2px}
  .side-loc{display:none}
  .side-links{
    clear:both; flex-direction:row; flex-wrap:wrap;
    gap:8px 18px; margin-top:13px;
  }
  .side-links a{font-size:.82rem}
}
.avatar,.avatar-fallback{
  width:170px; height:170px; border-radius:50%; object-fit:cover;
  border:1px solid var(--rule); display:block;
}
.avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--serif); font-size:3.1rem; letter-spacing:.02em;
}
.side-name{font-family:var(--serif); font-size:1.32rem; margin:18px 0 2px; line-height:1.3}
.side-name a{color:var(--text)}
.side-name a:hover{color:var(--accent); text-decoration:none}
.side-kr{font-size:.85rem; color:var(--text-faint); margin:0 0 12px}
.side-role{font-size:.875rem; color:var(--text-soft); margin:0 0 4px; line-height:1.5}
.side-role strong{color:var(--text); font-weight:600}
.side-loc{font-size:.83rem; color:var(--text-faint); margin:10px 0 0}
.side-links{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.side-links a{font-size:.855rem; color:var(--text-soft); display:inline-flex; gap:9px; align-items:center}
.side-links a:hover{color:var(--accent); text-decoration:none}
.side-links .ico{width:16px; text-align:center; opacity:.75; flex:none}

/* ---------- main ---------- */
.main{min-width:0}
.page-title{
  font-family:var(--serif); font-size:2rem; font-weight:600;
  margin:0 0 6px; line-height:1.2; letter-spacing:-.01em;
}
.page-sub{color:var(--text-faint); font-size:.9rem; margin:0 0 30px}
h2.section{
  font-family:var(--serif); font-size:1.28rem; font-weight:600;
  margin:46px 0 4px; padding-bottom:8px; border-bottom:1px solid var(--rule);
}
h2.section:first-of-type{margin-top:0}
h3.sub{
  font-size:.79rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--text-faint); margin:30px 0 12px;
}
.prose p{margin:0 0 15px; color:var(--text-soft)}
.prose strong{color:var(--text); font-weight:600}

/* ---------- metrics ---------- */
.metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:10px; margin:22px 0 4px;
}
.metric{
  background:var(--bg-soft); border:1px solid var(--rule); border-radius:9px;
  padding:13px 14px;
}
.metric .n{font-family:var(--serif); font-size:1.5rem; font-weight:600; display:block; line-height:1.15}
.metric .l{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint)}

/* ---------- news ---------- */
.news{list-style:none; margin:16px 0 0; padding:0}
.news li{
  display:grid; grid-template-columns:88px 1fr; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--rule); font-size:.925rem;
}
.news li:last-child{border-bottom:0}
.news .date{
  color:var(--text-faint); font-size:.8rem; font-variant-numeric:tabular-nums;
  padding-top:2px; white-space:nowrap;
}
.news .what{color:var(--text-soft)}
@media (max-width:560px){
  .news li{grid-template-columns:1fr; gap:2px}
  .news .date{padding-top:0}
}

/* ---------- publications ---------- */
.pubs{list-style:none; margin:14px 0 0; padding:0; counter-reset:pub}
.pub{
  padding:15px 0 15px 42px; border-bottom:1px solid var(--rule); position:relative;
}
.pub:last-child{border-bottom:0}
.pub::before{
  counter-increment:pub; content:counter(pub) ".";
  position:absolute; left:0; top:15px; width:32px; text-align:right;
  color:var(--text-faint); font-size:.82rem; font-variant-numeric:tabular-nums;
}
.pub .t{
  display:block; font-family:var(--serif); font-size:1.03rem; line-height:1.42;
  color:var(--text); margin-bottom:4px;
}
.pub .a{font-size:.865rem; color:var(--text-soft); line-height:1.55; margin-bottom:4px}
.pub .a .me{color:var(--text); font-weight:700}
.pub .v{font-size:.855rem; color:var(--text-faint)}
.pub .v em{color:var(--text-soft); font-style:italic}
.tag{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:20px;
  font-size:.685rem; font-weight:600; letter-spacing:.03em; vertical-align:1px;
  background:var(--accent-soft); color:var(--accent); border:1px solid transparent;
}
.tag.plain{background:var(--bg-soft); color:var(--text-faint); border-color:var(--rule)}
.eq{color:var(--accent); font-weight:700}

/* ---------- generic table-ish lists ---------- */
.rows{list-style:none; margin:14px 0 0; padding:0}
.rows li{
  display:grid; grid-template-columns:108px 1fr; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--rule); font-size:.92rem;
}
.rows li:last-child{border-bottom:0}
.rows .k{color:var(--text-faint); font-size:.82rem; font-variant-numeric:tabular-nums; padding-top:2px}
.rows .v strong{display:block; color:var(--text); font-weight:600; margin-bottom:2px}
.rows .v span{color:var(--text-soft); font-size:.875rem}
@media (max-width:560px){
  .rows li{grid-template-columns:1fr; gap:3px}
  .rows .k{padding-top:0}
}

.chips{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0; padding:0; list-style:none}
.chips li{
  background:var(--bg-soft); border:1px solid var(--rule); border-radius:20px;
  padding:5px 13px; font-size:.845rem; color:var(--text-soft);
}

.note{
  background:var(--bg-soft); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:13px 16px; font-size:.875rem; color:var(--text-soft);
  margin:18px 0 0;
}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--rule); margin-top:8px;
  padding:24px; text-align:center; font-size:.8rem; color:var(--text-faint);
}
.visits{display:block; margin-top:6px; font-size:.74rem; opacity:.75}

/* ---------- mobile polish ---------- */
@media (max-width:860px){
  .masthead-inner{padding:0 20px; min-height:50px}
  .brand{font-size:1rem}
  .nav a{padding:6px 9px; font-size:.82rem}
  .page-title{font-size:1.6rem}
  h2.section{margin-top:34px; font-size:1.14rem}
  .pub{padding-left:34px}
  .pub::before{width:26px}
}