@import url("lato-light.css");
/* Shared layout modeled on Yu Deng's Google Sites homepage. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #212121; font-family: Lato, Arial, sans-serif; font-size: 16px; }
body p, body a, body strong { font-size: inherit; }
a { color: #47778a; text-decoration: underline; }
a:hover, a:focus { color: #285163; text-decoration: underline; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; background: white; padding: 12px; }
.skip-link:focus { top: 12px; }
.banner { height: 340px; background-position: center; background-size: cover; position: relative; }
.banner::before { content: ''; position: absolute; inset: 0; background: rgba(33,33,33,.4); }
.banner-about { background-image: url('about-banner.jpg'); }
.banner-research { background-image: url('research-banner.jpg'); }
.banner-misc { background-image: url('misc-banner.jpg'); }
.site-nav { position: relative; z-index: 1; min-height: 60px; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-name { font-size: 20px; white-space: nowrap; }
.site-nav a { color: rgba(255,255,255,.8); text-decoration: none; }
.site-nav a:hover, .site-nav a:focus, .site-nav a[aria-current] { color: white; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 16px; }
main { max-width: 1140px; padding: 0 0 64px; margin: 0 auto; }
h1 { font-size: 46px; font-weight: 300; color: #47778a; text-align: center; margin: 32px 0 56px; line-height: 1.3; }
.text-content { line-height: 1.65; }
.text-content p { margin: 0 0 18px; }
.text-content ul { padding-left: 22px; }
.text-content h2 { margin: 30px 0 14px; font-size: 22px; }
.research-content { max-width: 800px; margin: auto; }
.research-intro { padding: 0 16px 16px; font-size: 14px; line-height: 1.5; }
.paper-list { width: 100%; border: 0; border-spacing: 0 10px; border-collapse: separate; }
.paper-list td { vertical-align: middle; font-size: 14px; line-height: 1.35; }
.paper-image { padding: 16px; width: 20%; }
.paper-info { padding: 20px; width: 80%; }
.paper-info a { color: #1772d0; text-decoration: none; }
.paper-info a:hover, .paper-info a:focus { color: #f09228; }
.paper-info p { margin-bottom: 0; }
.paper-image img { width: 160px; height: 160px; object-fit: contain; display: block; }
.paper-list .highlight { background: #ffffd0; }
.example-note { color: #666; }
@media (max-width: 1200px) { main { padding-left: 5.5%; padding-right: 5.5%; } }
@media (max-width: 600px) {
 .site-nav { padding: 16px 20px; flex-wrap: wrap; gap: 18px; }
 .nav-links { gap: 22px; flex-wrap: wrap; }
 .nav-links a { font-size: 14px; }
 .banner { height: 260px; }
 h1 { font-size: 36px; margin-bottom: 36px; }
 .paper-list, .paper-list tbody, .paper-list tr, .paper-list td { display: block; width: 100%; }
 .paper-image { padding: 20px 20px 0; }
 .paper-info { padding: 16px 20px 24px; }
}

.site-footer {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  border-top: 1px solid #eee;
  color: #777;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}
.site-footer a { color: #647e89; }

.profile-title { margin-bottom: 16px; }
.contact-links { text-align: center; margin: 0 0 56px; font-size: 16px; }
@media (max-width: 600px) { .contact-links { margin-bottom: 36px; } }

.education-entry { display: flex; align-items: center; gap: 28px; padding: 12px 0; }
.education-entry img { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; }
.education-entry p { margin: 0 0 6px; }
.research-interests { padding: 0 16px; margin-bottom: 36px; }
.publications-heading { padding: 0 16px; margin-bottom: 18px; }
@media (max-width: 600px) {
  .education-entry { gap: 18px; align-items: flex-start; }
  .education-entry img { width: 72px; height: 72px; }
}

.education-dates { display: inline-block; margin-left: 14px; color: #666; }

/* Text-only project entries use the Research listing's typography and width. */
.projects-content section > h2 { margin: 30px 16px 14px; }
.course-project { width: 100%; margin: 0 0 10px; padding: 20px; font-size: 14px; line-height: 1.35; }
.course-project h3 { font-size: 14px; font-weight: 700; margin: 0; line-height: inherit; }
.course-project .project-course, .course-project .project-links { color: inherit; font-size: 14px; margin: 0; }
.course-project .project-abstract { margin: 14px 0 0; }
.projects-content .others-note { padding: 0 16px; font-size: 14px; }