:root{
  --bg:#f9fafb; --card:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --accent:#11182710;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-serif, Cambria, 'Hoefler Text','Liberation Serif', Times, 'Times New Roman', serif;
  color:var(--text);
  background:linear-gradient(180deg,#ffffff, #f7f7fb 300px);
  font-size:18px;
  line-height:1.7;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(10px);
  background-color: rgba(255,255,255,0.85); border-bottom:1px solid var(--border);}
.brand{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand h1{font-size:26px;margin:0;font-weight:700;letter-spacing:.2px}
.brand small{color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 14px 0}
.nav-link{padding:7px 12px;border:1px solid var(--border);border-radius:999px;
  text-decoration:none;color:var(--text);background:var(--card);transition:transform .1s ease, box-shadow .2s ease;}
.nav-link:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--accent)}
.nav-link.active{border-color:#111827}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start;}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px;
  box-shadow:0 4px 14px var(--accent);}
.card h2{margin-top:0;font-size:22px}
.section{background:var(--card); border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 4px 14px var(--accent);}
.section h2{font-size:22px}
.footer{color:var(--muted);text-align:center;padding:20px 0;border-top:1px solid var(--border);margin-top:32px}
ul{margin:0 0 0 1.2rem; padding:0}
li{margin:.5rem 0}
hr{border:none;border-top:1px dashed var(--border);margin:14px 0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.badge{display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--muted);font-size:14px}
.table{width:100%;border-collapse:collapse}
.table td,.table th{border-bottom:1px solid var(--border);padding:8px}
/* logos smaller + neat row */
/* --- Logos section (responsive version, 2025-10-31) --- */
/* --- Logos section (smaller refined version, 2025-10-31) --- */
/* --- Logos section (left-aligned elegant version, 2025-10-31) --- */
/* --- Logos section (tight spacing, left-aligned refined version, 2025-10-31) --- */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;  /* 左对齐 */
  gap: 12px;                    /* 更整齐的间距 */
  margin: 4px 0 6px 0;          /* 适度压缩与下方内容的空白 */
}
.logos img {
  max-height: 56px;             /* 仅此处扩大尺寸 */
  width: auto;
  display: block;
}
.photo img{max-width:360px}
/* Publications/preprints list styling */
ul.publist{list-style:none; margin:0; padding:0}
li.pub{padding:14px 0; border-bottom:1px dashed var(--border)}
li.pub:last-child{border-bottom:none}
.pub-title{font-weight:700; text-decoration:none}
.pub-title:hover{text-decoration:underline}
.badges a{display:inline-block; margin-right:10px; padding:3px 10px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:inherit; background:#fff}
.badges a:hover{text-decoration:underline}
/* Harmonize generic lists */
.section ul:not(.publist){list-style:none; margin:0; padding:0}
.section ul:not(.publist) > li{padding:12px 0; border-bottom:1px dashed var(--border)}
.section ul:not(.publist) > li:last-child{border-bottom:none}
.section ul:not(.publist) a{color:inherit; text-decoration:none; font-weight:600}
.section ul:not(.publist) a:hover{text-decoration:underline}
.section{line-height:1.7}
.section p{margin:0.45rem 0}
.section h3{margin:0.6rem 0 0.4rem 0}
/* Extra layouts */
.list.neat{list-style:none; margin:0; padding:0}
.list.neat > li{padding:12px 0; border-bottom:1px dashed var(--border)}
.list.neat > li:last-child{border-bottom:none}
.item-title{margin-bottom:2px}
.muted{color:var(--muted)}
.pill-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.pill{display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; box-shadow:0 2px 10px var(--accent)}
.sup-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.sup-col h3{margin:4px 0 6px 0; font-size:18px}
@media (max-width:900px){ .grid{grid-template-columns:1fr;} .nav{gap:6px} .photo img{max-width:100%} }

/* --- Mobile fix: let header scroll on small screens to avoid covering content --- */
@media (max-width: 900px){
  .header{ position: static !important; top: auto !important; }
}

/* --- Mobile UX: keep sticky header, avoid overlap by offsetting content --- */
@media (max-width: 900px){
  .header{ position: sticky !important; top: 0 !important; }
  main.container{ padding-top: calc(var(--header-h, 0px)); }
}

/* --- Mobile compact navigation (<=900px): keep sticky header, single-row scrollable nav) --- */
@media (max-width: 900px){
  .header{ position: sticky; top: 0; }
  .brand{ padding: 6px 0 !important; }
  .brand h1{ font-size: 20px !important; margin: 0 !important; }
  .nav{ 
    display: flex; 
    flex-wrap: nowrap !important; 
    gap: 6px !important; 
    padding: 4px 0 6px 0 !important;
    overflow-x: auto; 
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar{ height: 6px; }
  .nav::-webkit-scrollbar-thumb{ background: #ddd; border-radius: 10px; }
  .nav-link{ 
    padding: 6px 10px !important; 
    font-size: 14px !important; 
    border-radius: 999px;
  }
  /* Content offset equals header height (uses JS to set --header-h) */
  main.container{ padding-top: calc(var(--header-h, 0px)); }
}

/* === Global scroll behavior (2025-10-26): header scrolls with content, no overlap === */
.header{ position: static !important; top: auto !important; }
main.container{ padding-top: 0 !important; }
/* Back-to-home button styling */
.back-home{ text-align:center; }
a.btn-home{
  display:inline-block;
  margin-top: 16px;
  padding: 8px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px var(--accent, rgba(17,24,39,0.06));
}
a.btn-home:hover{ text-decoration: underline; }
/* === Email pill badges (minimal addition) === */
.email-badges {
  margin: 8px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.email-pill {
  display: inline-block;
  background: #f4f4f8;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 15px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.email-pill:hover {
  background: #fff;
  border-color: #ccc;
  color: var(--text);
}