/* Academic Pages-inspired layout */
:root {
  color-scheme: light;
  --text: #515151;
  --muted: #707373;
  --link: #2b6297;
  --line: #e9eaeb;
  --font: 'Trebuchet MS', 'Lucida Grande', 'Optima', 'Cardo', 'HelveticaNeue', 'Helvetica Neue', 'Arial', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: #fff; font-family: var(--font); font-size: 16px; line-height: 1.5; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }

.masthead { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.masthead-inner { max-width: 1200px; min-height: 80px; padding: 16px 32px; margin: auto; display: flex; align-items: center; gap: 64px; }
.site-title { color: var(--muted); font-size: 20px; font-weight: 300; white-space: nowrap; }
nav { display: flex; gap: 32px; flex-wrap: wrap; }
nav a { color: var(--muted); padding: 8px 0; position: relative; }
nav a:hover { color: var(--text); text-decoration: none; }
nav a[aria-current] { color: var(--text); }
nav a[aria-current]::after { content: ''; position: absolute; height: 3px; background: #7a8288; left: 0; right: 0; bottom: 0; }

.page-layout { max-width: 1200px; margin: 42px auto 72px; padding: 0 32px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; min-height: calc(100vh - 280px); }

.author-profile { font-size: 14px; line-height: 1.5; align-self: start; }
.author-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: center 30%; padding: 4px; border: 1px solid var(--line); }
.author-profile h2 { color: var(--muted); font-size: 19px; font-weight: 300; line-height: 1.5; margin: 16px 0 6px; }
.chinese-name { font-family: Georgia, serif; font-weight: normal; white-space: nowrap; }
.author-profile p { margin: 0 0 14px; }
.author-role { font-weight: 400; }
.profile-links { list-style: none; padding: 0; margin: 22px 0 0; }
.profile-links li { margin: 8px 0; }
.profile-links a { color: var(--text); display: inline-flex; align-items: center; gap: 8px; }

main { min-width: 0; overflow-wrap: break-word; }
h1 { font-size: 30px; font-weight: 400; line-height: 1.5; margin: 0 0 24px; letter-spacing: 0; }
h2 { font-size: 23px; font-weight: 400; line-height: 1.5; margin: 0 0 20px; letter-spacing: 0; }
.award-list { list-style: disc outside; padding-left: 21px; margin: 0; }
.award-list li { line-height: 1.5; margin: 0; padding: 0 0 0 3px; }
main h2 { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
main section + section { margin-top: 30px; }
main p { margin: 0; }
main ul { padding-left: 21px; margin: 18px 0; }
main li { line-height: 1.5; padding: 0 0 0 3px; margin: 0; }

/* Style helpers from the original site */
.style_2 { font-weight: bold; }
.style_3 { font-style: italic; }
.paragraph_style_5 { color: #a1263c; padding: 16px 20px; border-left: 3px solid #c7cdd1; background: #f7f8f9; }

/* Experience entries */
.exp-entry { margin-bottom: 12px; }
.exp-title { font-weight: bold; margin: 0; }
.exp-meta { font-style: italic; margin: 0; }

/* Publication list */
.pub-list { list-style: none; padding: 0; margin: 0; }
.pub-list li { padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.pub-list li:last-child { border-bottom: none; }

.site-footer { background: #f2f3f3; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.site-footer div { max-width: 1200px; margin: auto; padding: 28px 32px; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 10px 16px; background: white; z-index: 2; }
.skip-link:focus { top: 8px; }

@media (max-width: 800px) {
  .masthead-inner { gap: 24px; padding: 14px 24px; flex-wrap: wrap; }
  nav { gap: 24px; }
  .page-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 30px; padding: 0 24px; }
}
@media (max-width: 600px) {
  .masthead-inner { gap: 8px; }
  .site-title { width: 100%; }
  nav { gap: 22px; font-size: 14px; }
  .page-layout { display: block; margin-top: 26px; }
  .author-profile { margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .author-profile h2 { padding-top: 8px; }
  .profile-links { clear: both; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
  .profile-links li { margin: 0; }
  h1 { font-size: 27px; }
  body { font-size: 15px; }
}
@media print {
  .masthead, .site-footer, .skip-link { display: none; }
  .page-layout { margin: 0; padding: 0; grid-template-columns: 180px 1fr; gap: 24px; }
}