/* Faculty-profile layout inspired by NYU's Stefanos Geroulanos profile. */
/* Montserrat is NYU's recommended alternative when Perstare is unavailable. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/montserrat-regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/montserrat-italic.woff2") format("woff2"); }
:root {
    --purple: #57068c;
    --bright-purple: #8900e1;
    --ink: #373c3d;
    --muted: #666;
    --rule: #999;
    --sans: "Montserrat", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --bs-primary: #57068c;
    --bs-primary-rgb: 87, 6, 140;
}
html { scroll-behavior: smooth; }
body { padding: 0; margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.8 var(--sans); }
a { color: #7007ab; text-decoration-thickness: 1px; text-underline-offset: .13em; }
a:hover { color: #350351; }
a:focus-visible, button:focus-visible { outline: 3px solid #aa63dd; outline-offset: 4px; }
::selection { background: #eadcf5; color: #35114c; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 1100; padding: .5rem 1rem; background: #fff; }
.skip-link:focus { top: .5rem; }
.site-width { width: min(1170px, calc(100% - 64px)); margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--sans); letter-spacing: normal; text-transform: none; }
h1 { margin: 0 0 18.2px; color: var(--purple); font-size: 60px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.chinese-name { font-family: Arial, Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 600; letter-spacing: .04em; }
h1 .chinese-name { display: inline-block; margin-left: 20px; font-size: 34px; vertical-align: 5px; }
h2 { margin: 0 0 17px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); color: var(--purple); font-size: 16px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
h3 { margin: 0 0 10px; color: var(--purple); font-size: 16px; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 15px; }
.university-bar { background: var(--purple); color: #fff; }
.bar-inner { display: flex; align-items: center; min-height: 60px; }
.university-brand { display: inline-flex; align-items: center; padding-block: 15px; }
.university-brand img { display: block; width: auto; max-width: 100%; height: 30px; }
.site-header { position: relative; z-index: 10; background: var(--bright-purple); color: #fff; }
#mainNav { position: static; display: flex; flex-direction: row; width: auto; height: auto; padding: 0; text-align: left; }
#mainNav .navbar-collapse { display: block; flex-basis: auto; flex-grow: 1; width: auto; margin: 0; }
#mainNav .navbar-nav { flex-direction: row; width: auto; gap: 30px; margin: 0; padding: 0; }
#mainNav .navbar-nav .nav-item { display: block; }
#mainNav .navbar-nav .nav-link { padding: 13px 0 11px; border-bottom: 3px solid transparent; color: #fff; font: 500 14px/1.4 var(--sans); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
#mainNav .navbar-nav .nav-link:hover { border-bottom-color: #fff; color: #fff; }
#mainNav a:focus-visible, #mainNav button:focus-visible { outline-color: #fff; }
.mobile-nav-label, #mainNav .navbar-toggler { display: none; }
.profile-banner { padding-block: 30px 24px; background: #fafafa; }
.profile-overview { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 48px; }
.profile-portrait { margin: 0; padding-left: 8px; background: var(--bright-purple); }
.profile-portrait img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: center 33%; }
.profile-summary { padding-top: 2px; }
.profile-role { margin-bottom: 12px; color: var(--ink); font: 400 16px/1.4 Georgia, "Times New Roman", serif; }
.profile-affiliation { margin: 0; max-width: 700px; color: var(--ink); font-size: 16px; line-height: 1.8; }
.faculty-layout { display: grid; grid-template-columns: minmax(0, 750fr) minmax(0, 360fr); align-items: start; gap: 60px; padding-top: 48px; padding-bottom: 72px; }
.faculty-main { min-width: 0; }
.content-section { margin-bottom: 58px; scroll-margin-top: 28px; }
.content-section:last-child { margin-bottom: 0; }
.content-section p:last-child { margin-bottom: 0; }
.profile-topics { margin: 0; }
.personal-motto { margin: 24px 0 0; color: var(--ink); font-style: italic; font-size: 16px; line-height: 1.8; }
.book-entry { display: grid; grid-template-columns: minmax(0, 1fr) 165px; gap: 50px; align-items: start; }
.book-title { margin: 0 0 10px; font-size: 14.4px; line-height: 1.2; }
.book-publisher { margin: 0 0 20px; color: #6f777b; font-size: 14.4px; font-weight: 700; line-height: normal; }
.book-authors { margin: 0; font-size: 14.4px; line-height: 1.4; }
.book-credit-note { margin: 12px 0 0; color: #555; font-size: 12.8px; line-height: 1.5; }
.book-cover { margin: 0; }
.book-cover img { display: block; width: 100%; height: 236px; object-fit: cover; }
.publication-list { display: block; }
.publication-entry { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 22px; padding: 22px 0; border-bottom: 1px solid #d2d2d2; }
.publication-entry:first-child { padding-top: 0; }
.publication-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.publication-year { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 14.4px; line-height: 1.4; text-align: right; }
.publication-entry > div { grid-column: 1; grid-row: 1; min-width: 0; }
.publication-entry h3 { margin: 0 0 10px; font-size: 14.4px; line-height: 1.2; }
.publication-entry h3 a { color: var(--purple); text-decoration: none; }
.publication-entry h3 a:hover { text-decoration: underline; }
.publication-entry p { margin: 0 0 4px; font-size: 14.4px; line-height: 1.4; }
.publication-entry .authors { margin-block: 8px; }
.publication-entry .venue { color: #6f777b; }
.paper-type { color: var(--muted); }
.award { color: var(--purple); font-weight: 700; }
.publication-entry .publication-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 11px; }
.publication-note { margin: 20px 0 0; color: var(--muted); font-size: 13px; }
.publications-subheading { margin-top: 35px; }
.question-list { padding-left: 22px; margin: 0; }
.question-list li { padding-left: 6px; margin-bottom: 18px; }
.question-list li:last-child { margin-bottom: 0; }
.question-list li::marker { color: var(--purple); }
.research-grid { display: block; }
.research-grid article { padding: 22px 0; border-bottom: 1px solid #d2d2d2; }
.research-grid article:first-child { padding-top: 0; }
.research-grid article:last-child { padding-bottom: 0; border-bottom: 0; }
.research-grid h3 { font-size: 16px; }
.research-grid p { margin: 10px 0 0; }
.interest-list { padding-left: 21px; margin: 0; }
.interest-list li { padding-left: 5px; margin-bottom: 10px; }
.contact-sidebar { min-width: 0; scroll-margin-top: 28px; color: #373b3e; font-size: 16.8px; line-height: 1.65; }
.contact-sidebar h2 { margin-bottom: 24px; }
.contact-name { color: #373b3e; font-size: 26.04px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; }
.contact-name .chinese-name { display: inline-block; margin-left: 5px; font-size: 18px; }
.contact-sidebar p { margin-bottom: 21px; }
.contact-invitation { font-size: 16px; }
.contact-profiles { list-style: none; padding: 0; margin: 0; }
.contact-profiles li { margin-bottom: 8px; }
.cv-section { margin-top: 38px; scroll-margin-top: 28px; }
.cv-section h2 { margin-bottom: 17px; }
.cv-section p { margin: 0; }
.cv-source { color: var(--muted); font-size: 14px; }
.site-footer { background: #f8f8f8; border-top: 1px solid #dedede; padding-block: 30px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 28px; color: #666; font-size: 13px; }
.footer-bottom > a:first-child { font-size: 16px; }
@media (max-width: 991px) {
    .book-entry { grid-template-columns: 1fr; gap: 20px; }
    .book-cover { width: min(165px, 100%); }
    h1 { font-size: 48px; }
    h1 .chinese-name { font-size: 29px; }
    .faculty-layout { gap: 35px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .profile-overview { grid-template-columns: 180px minmax(0, 1fr); gap: 35px; }
    .profile-portrait img { height: 210px; }
    #mainNav .navbar-nav { gap: 10px; }
    .contact-name { font-size: 24px; }
}
@media (max-width: 767px) {
    .site-width { width: calc(100% - 40px); }
    .bar-inner { min-height: 51px; }
    .university-brand { padding-block: 12px; }
    .university-brand img { height: 27px; }
    #mainNav { flex-wrap: wrap; padding-block: 6px; }
    .mobile-nav-label { display: block; font: 700 12px var(--sans); text-transform: uppercase; }
    #mainNav .navbar-toggler { display: block; padding: 9px 7px; border: 0; border-radius: 0; color: #fff; }
    #mainNav .navbar-toggler:focus { box-shadow: none; }
    .menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 22px; height: 2px; background: #fff; }
    .menu-lines { position: relative; margin-block: 6px; }
    .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
    .menu-lines::before { top: -6px; }.menu-lines::after { top: 6px; }
    #mainNav .navbar-collapse { flex-basis: 100%; }
    #mainNav .navbar-collapse.collapse:not(.show) { display: none; }
    #mainNav .navbar-nav { flex-direction: column; gap: 0; padding: 6px 0 10px; }
    #mainNav .navbar-nav .nav-link { display: inline-block; padding: 10px 0 7px; }
    .profile-overview { grid-template-columns: 145px minmax(0, 1fr); gap: 25px; }
    .profile-portrait img { height: 185px; }
    h1 { font-size: 38px; }
    h1 .chinese-name { display: block; margin: 10px 0 0; font-size: 25px; }
    .profile-role { font-size: 16px; }
    .profile-affiliation { font-size: 16px; }
    .faculty-layout { grid-template-columns: 1fr; gap: 48px; padding-top: 35px; padding-bottom: 45px; }
    .content-section { margin-bottom: 42px; }
    .book-entry { grid-template-columns: 1fr; gap: 20px; }
    .book-cover { width: min(165px, 100%); }
    .publication-entry { grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 13px; }
}
@media (max-width: 479px) {
    body { font-size: 16px; }
    .profile-overview { grid-template-columns: 1fr; gap: 22px; }
    .profile-portrait { width: 170px; }
    .profile-portrait img { height: 200px; }
    .profile-banner { padding-block: 25px 28px; }
    h1 { font-size: 38px; }
    h1 .chinese-name { display: inline-block; margin: 0 0 0 10px; font-size: 24px; vertical-align: 2px; }
    .publication-entry { display: flex; flex-direction: column; gap: 6px; }
    .publication-year { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }