/* ===== Yixin (Sarah) Zhang — academic site shared styles ===== */
:root{
  --bg:#ffffff; --fg:#1a1f24; --muted:#5b6673; --line:#e5e8ec;
  --card:#f7f9fb; --accent:#0d6d75; --accent-fg:#ffffff;
  --tag:#e6f1f2; --tag-fg:#0d6d75; --maxw:900px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12161a; --fg:#e7ecf0; --muted:#9aa6b2; --line:#252c33;
    --card:#1a2026; --accent:#4bb8c0; --accent-fg:#08252a;
    --tag:#12303a; --tag-fg:#63c9d1;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:17px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
img{max-width:100%}

/* Nav */
nav{position:sticky; top:0; z-index:10; background:var(--bg);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(180%) blur(6px)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:58px; gap:12px}
nav .brand{font-weight:700; letter-spacing:.2px; white-space:nowrap}
nav ul{display:flex; gap:20px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
nav ul a{color:var(--muted); font-size:15px; font-weight:500}
nav ul a:hover{color:var(--accent); text-decoration:none}
nav ul a.active{color:var(--fg); border-bottom:2px solid var(--accent); padding-bottom:2px}
@media(max-width:640px){ nav .wrap{height:auto; flex-direction:column; align-items:flex-start; padding-top:10px; padding-bottom:10px}
  nav ul{gap:14px} nav ul a{font-size:14px} }

/* Hero (home) */
header.hero{padding:48px 0 24px; display:flex; gap:30px; align-items:flex-start}
header.hero .avatar{flex:0 0 190px; width:190px; height:190px; object-fit:cover;
  border-radius:50%; border:1px solid var(--line)}
header.hero .intro{flex:1; min-width:0}
.hero h1{font-size:2.1rem; margin:0 0 6px; line-height:1.15}
.hero .role{font-size:1.1rem; color:var(--muted); margin:0 0 3px}
.hero .aff{color:var(--muted); margin:0 0 16px}
.hero p.lead{font-size:1.03rem; margin:0 0 18px}
@media(max-width:640px){ header.hero{flex-direction:column; gap:18px; padding-top:34px}
  header.hero .avatar{width:150px; height:150px; flex-basis:auto} .hero h1{font-size:1.8rem} }

/* Page title (inner pages) */
.pagehead{padding:44px 0 6px}
.pagehead h1{font-size:1.9rem; margin:0 0 6px}
.pagehead p{color:var(--muted); margin:0}

/* Links row */
.links{display:flex; flex-wrap:wrap; gap:10px}
.links a{display:inline-block; padding:7px 14px; border:1px solid var(--line);
  border-radius:999px; font-size:14.5px; color:var(--fg); background:var(--card)}
.links a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

/* Metrics */
.metrics{display:flex; gap:26px; flex-wrap:wrap; margin:4px 0 18px}
.metrics div{line-height:1.2}
.metrics .n{font-size:1.35rem; font-weight:700; color:var(--accent)}
.metrics .l{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}

/* Sections */
section{padding:32px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
section h2{font-size:1.32rem; margin:0 0 18px; display:flex; align-items:center; gap:10px}
section h2::before{content:""; width:20px; height:3px; background:var(--accent); border-radius:2px; display:inline-block}
.subhead{font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  margin:24px 0 6px; font-weight:700}

/* Cards grid */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){ .grid{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.card h3{margin:0 0 6px; font-size:1.02rem}
.card p{margin:0; color:var(--muted); font-size:15px}

/* Publications */
.pub{padding:14px 0; border-bottom:1px solid var(--line)}
.pub:last-child{border-bottom:0}
.pub .title{font-weight:600}
.pub .meta{color:var(--muted); font-size:15px; margin-top:2px}
.tag{display:inline-block; background:var(--tag); color:var(--tag-fg); font-size:12px; font-weight:600;
  padding:2px 8px; border-radius:6px; margin-left:6px; white-space:nowrap}

/* News */
ul.news{list-style:none; padding:0; margin:0}
ul.news li{display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--line)}
ul.news li:last-child{border-bottom:0}
ul.news .yr{flex:0 0 54px; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums}
@media(max-width:640px){ ul.news .yr{flex-basis:46px} }

/* Clean lists */
ul.clean{list-style:none; padding:0; margin:0}
ul.clean li{padding:9px 0; border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:0}
.role-line{color:var(--muted); font-size:15px}

/* Footer */
footer{padding:34px 0 60px; border-top:1px solid var(--line); color:var(--muted); font-size:15px}
footer a{font-weight:500}
footer .foot-links{margin-top:10px; display:flex; gap:16px; flex-wrap:wrap}