/* Responsive layout for Zhenyuan Dong, using Jon Barron's original typography. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #222; background: #fff; line-height: 1.65; }
.page { width: 100%; max-width: 840px; margin: 0 auto; padding: 42px 24px 24px; }
a { overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid #1772d0; outline-offset: 4px; }
.skip-link { position: absolute; left: 16px; top: -60px; padding: 8px 12px; background: #fff; }
.skip-link:focus { top: 8px; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 36px; align-items: center; }
.name { text-align: center; padding: 0; line-height: 1.3; font-weight: 400; }
.profile p { margin: 14px 0; }
.portrait-link { display: block; overflow: hidden; border-radius: 50%; aspect-ratio: 1; }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transform: scale(1.15) translate(-4.5%, -3%); }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px; }
.section-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px 19px; border-top: 1px solid #e5e8ec; border-bottom: 1px solid #e5e8ec; padding: 15px 0; margin: 30px 0 32px; }
.section-nav a { font-size: 12px; }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; margin-bottom: 12px; }
.news-list time { color: #616975; font-size: 13px; }
section { margin: 0 0 34px; scroll-margin-top: 20px; }
h2 { margin-bottom: 17px; color: #222; }
h3 { font-size: 14px; margin: 0; line-height: 1.55; }
p { margin: 8px 0; }
.detail { color: #616975; }
.detail { font-size: 13px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.subheading { font-weight: 400; color: #616975; margin: 15px 0 10px; }
.publication { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px 0; align-items: center; }
.publication-figure { display: block; width: 100%; }
.publication-figure img { display: block; width: 100%; height: auto; object-fit: contain; }
.publication-figure:hover { opacity: .85; }
.venue-label { color: #1772d0; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.publication p { margin: 4px 0; }
.publication .paper-links { margin-top: 7px; }
footer { margin-top: 48px; border-top: 1px solid #e5e8ec; padding-top: 18px; text-align: right; color: #616975; font-size: 12px; }
footer a { font-size: inherit; }
@media (max-width: 640px) {
  .page { padding: 28px 20px 20px; }
  .profile { grid-template-columns: 1fr; gap: 22px; }
  .portrait-link { grid-row: 1; width: 156px; margin: 0 auto; }
  .name { font-size: 30px; }
  .news-list li { grid-template-columns: 1fr; gap: 2px; margin-bottom: 16px; }
  .publication { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
  .publication-figure { max-width: 360px; margin: 0 auto; }
  .venue-label br { display: none; }
  .section-nav { gap: 8px 16px; }
  footer { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.honors-list, .teaching-list { margin: 0; padding-left: 20px; }
.honors-list li, .teaching-list li { margin-bottom: 8px; }