/* Plain academic homepage. No framework, no build step. */
:root { --text: #222; --muted: #666; --link: #1a5fb4; --rule: #e5e5e5; }
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); background: #fff;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
main { max-width: 820px; margin: 0 auto; padding: 48px 24px 64px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; gap: 32px; align-items: center; }
header img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; flex: none; }
h1 { margin: 0; font-size: 32px; font-weight: 600; }
h1 .zh { font-size: 20px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.role { margin: 4px 0 10px; color: var(--muted); }
.links a { margin-right: 14px; white-space: nowrap; }
h2 { font-size: 20px; font-weight: 600; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
h3 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 20px 0 6px; }
ul.pubs, ul.plain { list-style: none; padding: 0; margin: 0; }
ul.pubs li { margin: 0 0 14px; }
.title { font-weight: 600; }
.venue { font-style: italic; }
.me { font-weight: 600; text-decoration: underline; text-decoration-color: #bbb; }
.tag { color: var(--muted); font-size: 14px; }
ul.plain li { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 6px; }
ul.plain .when { color: var(--muted); white-space: nowrap; }
footer { margin-top: 48px; color: var(--muted); font-size: 13px; }
@media (max-width: 600px) {
  header { flex-direction: column; text-align: center; }
  ul.plain li { flex-direction: column; gap: 0; }
}