/* A portable, responsive version of Lu Dong's existing academic homepage. */
:root { color-scheme: light; --text: #333; --link: #24699b; --journal: #17804c; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; color: var(--text); font: 400 16px/1.5 Arial, Helvetica, sans-serif; }
.site-header { padding: 38px 24px 0; text-align: center; }
h1 { margin: 0; color: #000; font: 700 22px/31px Arial, Helvetica, sans-serif; letter-spacing: 1.6px; }
.page { max-width: 920px; margin: 100px auto 80px; display: grid; grid-template-columns: minmax(0, 712px) 160px; gap: 48px; align-items: start; }
.academic-home { min-width: 0; font-weight: 400; }
p { margin: 0 0 24px; }
h2 { margin: 0 0 24px; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
a { color: var(--link); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #16466a; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.journal { color: var(--journal); font-weight: 700; font-style: normal; }
.portrait { padding-top: 10px; text-align: center; }
.portrait img { display: inline-block; width: 133px; height: 133px; max-width: 100%; object-fit: cover; }
@media (max-width: 1000px) {
  .page { margin: 74px 32px 64px; grid-template-columns: minmax(0, 1fr) 133px; gap: 36px; }
}
@media (max-width: 640px) {
  .site-header { padding-top: 30px; }
  .page { margin: 42px 24px 48px; display: flex; flex-direction: column; gap: 28px; }
  .portrait { order: -1; padding: 0; align-self: center; }
  .academic-home { width: 100%; overflow-wrap: break-word; }
  h1 { font-size: 22px; }
}
@media print {
  .page { display: block; margin: 40px auto; }
  .portrait { display: none; }
  a { color: inherit; }
}