/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/crimson-pro-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/crimson-pro-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/crimson-pro-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/crimson-pro-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/crimson-pro-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/crimson-pro-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink:#595959;
  --heading:#043361;
  --muted:#767676;
  --accent:#3399cc;
  --accent-hover:#006699;
  --emphasis:#222222;
  --highlight-red:#c92e3b;
  --highlight-pink:#c73587;
  --highlight-purple:#8246af;
  --line:#e1e7ed;
  --soft:#f2f6fa;
  --white:#fff;
  --focus:#447fbc;
  --control-line:#c9d7e5;
  --surface:#f7f9fb;
  --nav-active:#f0f5fa;
  --secondary:#767676;
  --belief-line:#648bad;
  --accent-muted:#666666;
  --separator:#adb9c5;
  --badge:#eaf1f8;
  --skip-bg:#203a5c;
  --skip-ink:#fff;
  --toggle-bg:#fff;
  --toggle-ink:#55514b;
  --toggle-border:#e4e0da;
  color-scheme:light;
  --serif:"Crimson Pro","Songti SC","Noto Serif CJK SC","Yu Mincho",Georgia,serif;
  --sans:var(--serif);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:36px;
}

body {
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

a {
  color:var(--accent);
  text-decoration:none;
  text-underline-offset:4px;
}

a:hover {
  color:var(--accent-hover);
  text-decoration:underline;
}

a:focus-visible,summary:focus-visible,button:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px;
  border-radius:2px;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

p {
  margin:0 0 17px;
}

/* Always-visible character and title colors, with readable night variants. */
.highlight-red {
  color:var(--highlight-red);
}

.highlight-pink {
  color:var(--highlight-pink);
}

.highlight-purple {
  color:var(--highlight-purple);
}


strong {
  font-weight:500;
  color:var(--emphasis);
}

.skip-link {
  position:fixed;
  z-index:10;
  top:12px;
  left:12px;
  padding:8px 18px;
  background:var(--skip-bg);
  color:var(--skip-ink);
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:translateY(0);
}

.page-shell {
  max-width:1192px;
  margin:0 auto;
  padding:58px 40px 0;
  display:grid;
  grid-template-columns:247px minmax(0,1fr);
  gap:80px;
}

.sidebar {
  position:sticky;
  top:46px;
  align-self:start;
  padding-bottom:24px;
}

.portrait-link {
  display:block;
  width:180px;
  margin-bottom:23px;
}

.portrait {
  width:180px;
  height:180px;
  object-fit:cover;
  object-position:var(--photo-position,50% 50%);
  border-radius:9px;
}

.profile h1 {
  font-family:var(--serif);
  font-size:30px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:normal;
  margin:0 0 13px;
  color:var(--emphasis);
}

.profile-name {
  display:grid;
}

.name-sizing,.rotating-name {
  grid-area:1 / 1;
}

.name-sizing {
  visibility:hidden;
  pointer-events:none;
}

.role {
  font-size:14px;
  margin-bottom:0;
  line-height:1.65;
}

.affiliation {
  font-size:15px;
  font-weight:500;
  color:var(--emphasis);
  margin-bottom:8px;
}

.email-link {
  font-size:14px;
  display:block;
  width:fit-content;
}

.cv-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  width:fit-content;
  font-size:14px;
  font-weight:500;
  margin-top:18px;
  border:1px solid var(--control-line);
  padding:5px 13px;
  border-radius:4px;
  color:var(--accent);
  transition:background .15s;
}

.cv-link:hover {
  background:var(--soft);
  text-decoration:none;
}

.section-nav {
  margin-top:34px;
  display:flex;
  flex-direction:column;
}

.nav-label,.footer-label {
  color:var(--muted);
  font-size:12px;
  letter-spacing:1.6px;
  font-weight:600;
  margin-bottom:11px;
}

.section-nav>a {
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  padding:5px 13px 5px 14px;
  border-left:2px solid var(--line);
  transition:color .15s,background .15s;
}

.section-nav>a:hover {
  color:var(--accent);
  text-decoration:none;
  background:var(--surface);
}

.section-nav>a.active {
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
  background:linear-gradient(90deg,var(--nav-active),transparent);
}

.nav-index {
  font-size:12px;
  color:var(--secondary);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}

.profile-links {
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr;
  gap:5px 10px;
  font-size:14px;
}

.profile-links a {
  white-space:nowrap;
  color:var(--accent);
}

.profile-links a:hover {
  color:var(--accent);
}

.profile-links span {
  font-size:12px;
  color:var(--secondary);
}

main {
  min-width:0;
}

main:focus {
  outline:none;
}

.page-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding-bottom:17px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.8px;
  color:var(--muted);
  margin-bottom:37px;
}

section {
  scroll-margin-top:30px;
  margin-bottom:42px;
}

.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:15px;
  margin-bottom:19px;
}

.section-heading h2 {
  font-family:var(--serif);
  font-size:29px;
  line-height:1.3;
  font-weight:500;
  color:var(--heading);
  letter-spacing:normal;
  margin:0;
}

.section-number {
  font-size:12px;
  color:var(--secondary);
  letter-spacing:1px;
}

.about-section .section-heading {
  margin-bottom:22px;
}

.about-section h2 {
  font-size:39px;
}

.intro {
  font-size:19px;
  line-height:1.75;
  letter-spacing:normal;
}

.research-belief {
  border-left:3px solid var(--belief-line);
  background:var(--soft);
  padding:18px 23px;
  margin:26px 0 0;
}

.belief-label {
  display:block;
  font-size:12px;
  letter-spacing:1.45px;
  color:var(--accent-muted);
  font-weight:600;
  margin-bottom:6px;
}

.research-belief p {
  font-family:var(--serif);
  font-size:20px;
  line-height:1.5;
  color:var(--emphasis);
  font-weight:500;
  margin:0;
}

.interest-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:24px;
}

.interest {
  padding-top:16px;
  border-top:1px solid var(--control-line);
}

.interest-kicker {
  color:var(--accent-muted);
  font-size:12px;
  letter-spacing:1.7px;
  font-weight:600;
}

.interest h3 {
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  color:var(--emphasis);
  margin:5px 0 10px;
}

.interest p {
  font-size:16px;
  line-height:1.8;
  margin:0;
}

.related-interests {
  font-size:14px;
  color:var(--accent-muted);
  line-height:2;
  margin:20px 0 0;
}

.related-interests>span:first-child {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:1px;
}

.separator {
  padding:0 8px;
  color:var(--separator);
}

.news-list {
  padding:0;
  margin:0;
  list-style:none;
}

.news-list li {
  display:grid;
  grid-template-columns:91px 1fr;
  gap:17px;
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}

.news-list li:first-child {
  padding-top:1px;
}

.news-list time {
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  white-space:nowrap;
}

.news-list p {
  font-size:16px;
  line-height:1.75;
  margin:0;
}

.older-news {
  margin-top:9px;
}

.older-news summary {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:var(--accent);
  padding:4px 0;
  list-style:none;
  width:122px;
}

.older-news summary::-webkit-details-marker {
  display:none;
}

.details-plus {
  font-size:18px;
  line-height:1;
  font-weight:300;
  transition:transform .15s;
}

.older-news[open] .details-plus {
  transform:rotate(45deg);
}

.older-news .news-list {
  margin-top:12px;
}

.publication {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:25px;
  align-items:start;
}

.publication-figure {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  margin-top:2px;
}

.publication-figure>img {
  width:100%;
  aspect-ratio:1.28;
  object-fit:contain;
  padding:12px;
  background:#fff;
}

.publication-figure>span {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  padding:5px 11px;
  color:var(--muted);
  border-top:1px solid var(--line);
}

.publication-figure:hover {
  text-decoration:none;
  border-color:var(--focus);
}

.publication-meta {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  font-size:12px;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:9px;
}

.venue {
  background:var(--badge);
  border-radius:3px;
  color:var(--accent);
  font-size:12px;
  letter-spacing:.45px;
  padding:2px 7px;
  font-weight:600;
}

.publication h3 {
  font-size:18px;
  line-height:1.5;
  letter-spacing:normal;
  font-weight:600;
  margin:0 0 10px;
}

.publication h3 a {
  color:var(--accent);
}

.authors {
  font-size:14px;
  line-height:1.8;
  margin-bottom:5px;
}

.authors strong {
  border-bottom:1px solid var(--control-line);
  padding-bottom:1px;
}

.conference {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:5px;
}

.contribution {
  font-size:12px;
  color:var(--muted);
  margin-bottom:12px;
}

.paper-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:14px;
  font-weight:600;
  border-bottom:1px solid var(--control-line);
  padding:0 0 2px;
}

.scholar-link {
  display:inline-block;
  margin-top:23px;
  font-size:14px;
}

.photo-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:18px;
  margin-top:25px;
}

.photo-grid figure {
  margin:0;
  min-width:0;
}

.photo-grid img {
  width:100%;
  height:225px;
  object-fit:cover;
  object-position:var(--photo-position,50% 50%);
  border-radius:5px;
}

.photo-grid figcaption {
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:var(--muted);
  margin-top:7px;
}

footer {
  border-top:1px solid var(--line);
  padding:30px 0 34px;
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.footer-label {
  display:block;
  font-size:12px;
  margin-bottom:5px;
}

.footer-email {
  font-family:var(--serif);
  font-size:21px;
  color:var(--accent);
}

.footer-email span {
  font-family:var(--sans);
  font-size:15px;
  margin-left:10px;
}

.footer-note {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-size:12px;
  color:var(--muted);
}

.footer-note a {
  margin-top:3px;
}

@media(min-width:1400px) {
  .page-shell {
    padding-top:72px;
    gap:90px;
  }
  .sidebar {
    top:60px;
  }
  .page-heading {
    margin-bottom:43px;
  }
  section {
    margin-bottom:48px;
  }
}

@media(max-width:1050px) {
  .page-shell {
    padding:42px 30px 0;
    grid-template-columns:218px minmax(0,1fr);
    gap:45px;
  }
  .profile h1 {
    font-size:28px;
  }
  .publication {
    grid-template-columns:180px 1fr;
    gap:19px;
  }
  .publication h3 {
    font-size:17px;
  }
  .publication-meta {
    gap:6px;
  }
  .photo-grid img {
    height:190px;
  }
  .profile-links {
    grid-template-columns:1fr;
  }
  .profile-links a {
    display:flex;
    justify-content:space-between;
  }
}

@media(max-width:800px) {
  html {
    scroll-padding-top:22px;
  }
  .page-shell {
    display:block;
    padding:30px 28px 0;
    max-width:720px;
  }
  .sidebar {
    position:static;
    padding-bottom:0;
  }
  .profile {
    display:grid;
    grid-template-columns:140px 1fr;
    gap:26px;
    align-items:center;
  }
  .portrait-link {
    width:140px;
    margin:0;
  }
  .portrait {
    width:140px;
    height:160px;
    object-position:var(--photo-position,50% 50%);
  }
  .profile h1 {
    font-size:31px;
    margin-bottom:8px;
  }
  .cv-link {
    margin-top:11px;
  }
  .section-nav {
    margin:25px 0 0;
    padding:13px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px 18px;
  }
  .nav-label,.nav-index {
    display:none;
  }
  .section-nav>a {
    padding:6px 0;
    border:0;
    font-size:14px;
  }
  .section-nav>a.active {
    background:none;
    text-decoration:underline;
    text-underline-offset:7px;
    text-decoration-thickness:2px;
  }
  .profile-links {
    margin-top:12px;
    padding-top:0;
    border:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px 20px;
    font-size:14px;
  }
  .profile-links a {
    gap:5px;
  }
  .page-heading {
    margin-top:29px;
    margin-bottom:26px;
    padding-bottom:13px;
  }
  .about-section h2 {
    font-size:35px;
  }
  .section-heading h2 {
    font-size:28px;
  }
  .intro {
    font-size:18px;
  }
  .publication {
    grid-template-columns:190px 1fr;
  }
  section {
    scroll-margin-top:24px;
    margin-bottom:39px;
  }
  .photo-grid img {
    height:215px;
  }
  .footer-note {
    font-size:12px;
  }
}

@media(max-width:480px) {
  body {
    font-size:16px;
    line-height:1.8;
  }
  .page-shell {
    padding:26px 22px 0;
  }
  .profile {
    grid-template-columns:100px minmax(0,1fr);
    gap:18px;
  }
  .portrait-link {
    width:100px;
  }
  .portrait {
    width:100px;
    height:135px;
  }
  .profile h1 {
    font-size:26px;
    letter-spacing:normal;
  }
  .role {
    font-size:14px;
    line-height:1.5;
  }
  .affiliation {
    font-size:14px;
    margin-bottom:4px;
  }
  .email-link {
    font-size:14px;
  }
  .cv-link {
    font-size:14px;
    padding:3px 9px;
    margin-top:9px;
    gap:17px;
  }
  .section-nav {
    gap:5px 17px;
    padding:10px 0;
    margin-top:23px;
  }
  .section-nav>a {
    font-size:14px;
  }
  .profile-links {
    gap:8px 18px;
    font-size:14px;
  }
  .page-heading {
    font-size:12px;
    letter-spacing:1.2px;
  }
  .about-section h2 {
    font-size:33px;
  }
  .intro {
    font-size:18px;
  }
  .research-belief {
    padding:16px 18px;
    margin-top:23px;
  }
  .research-belief p {
    font-size:19px;
  }
  .belief-label {
    font-size:12px;
  }
  .interest-grid {
    grid-template-columns:1fr;
    gap:21px;
    margin-top:21px;
  }
  .interest p {
    font-size:16px;
  }
  .related-interests {
    font-size:14px;
  }
  .separator {
    padding:0 4px;
  }
  .news-list li {
    grid-template-columns:72px 1fr;
    gap:13px;
  }
  .news-list p {
    font-size:16px;
  }
  .news-list time {
    font-size:12px;
  }
  .publication {
    grid-template-columns:1fr;
    gap:18px;
  }
  .publication-figure>img {
    aspect-ratio:2.3;
    padding:14px;
  }
  .publication h3 {
    font-size:19px;
  }
  .publication-meta {
    font-size:12px;
  }
  .authors {
    font-size:14px;
  }
  .conference {
    font-size:14px;
  }
  .contribution {
    font-size:12px;
  }
  .paper-link,.scholar-link {
    font-size:14px;
  }
  .photo-grid {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .photo-grid img {
    height:180px;
  }
  .photo-grid figcaption {
    font-size:12px;
  }
  footer {
    align-items:flex-start;
    flex-direction:column;
    gap:19px;
    padding:26px 0;
  }
  .footer-note {
    align-items:flex-start;
  }
  .footer-email {
    font-size:22px;
  }
}


/* The dark palette applies only on screens; printed pages stay light. */
@media screen {
  :root[data-theme="dark"] {
    --ink:#bdbdbd;
    --heading:#3eb7f0;
    --muted:#a9a9a9;
    --accent:#63c4f4;
    --accent-hover:#a5def9;
    --emphasis:#f3f3f3;
    --highlight-red:#ff7a85;
    --highlight-pink:#f58ac4;
    --highlight-purple:#c39af2;
    --line:#3a352d;
    --soft:#252119;
    --white:#171510;
    --focus:#f2b774;
    --control-line:#595044;
    --surface:#211e18;
    --nav-active:#30281c;
    --secondary:#a9a9a9;
    --belief-line:#b7864d;
    --accent-muted:#b5b5b5;
    --separator:#857b6c;
    --badge:#34291b;
    --skip-bg:#edab67;
    --skip-ink:#171510;
    --toggle-bg:#211e18;
    --toggle-ink:#edab67;
    --toggle-border:#d69347;
    color-scheme:dark;
  }
}

.theme-toolbar {
  display:flex;
  justify-content:flex-end;
  max-width:1192px;
  margin:0 auto;
  padding:20px 40px 0;
}

.theme-toolbar[hidden] {
  display:none;
}

.theme-toolbar:not([hidden]) + .page-shell {
  padding-top:24px;
}

.theme-toggle {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:48px;
  height:48px;
  padding:0;
  color:var(--toggle-ink);
  background:var(--toggle-bg);
  border:1.5px solid var(--toggle-border);
  border-radius:50%;
  cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}

.theme-toggle:hover {
  background:var(--soft);
  border-color:var(--toggle-ink);
}

.theme-toggle:active {
  transform:scale(.94);
}

.theme-icon {
  grid-area:1 / 1;
  width:24px;
  height:24px;
  pointer-events:none;
}

.theme-icon-moon,
[data-theme="dark"] .theme-icon-sun {
  display:none;
}

[data-theme="dark"] .theme-icon-moon {
  display:block;
}

@media(max-width:1050px) {
  .theme-toolbar {
    padding-right:30px;
    padding-left:30px;
  }
}

@media(max-width:800px) {
  .theme-toolbar {
    max-width:720px;
    padding:16px 28px 0;
  }
  .theme-toggle {
    width:44px;
    height:44px;
  }
  .theme-toolbar:not([hidden]) + .page-shell {
    padding-top:18px;
  }
}

@media(max-width:480px) {
  .theme-toolbar {
    padding-right:22px;
    padding-left:22px;
  }
}

@media print {
  .theme-toolbar {
    display:none;
  }
  .theme-toolbar:not([hidden]) + .page-shell {
    padding-top:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
  }
}

@media print {
  .page-shell {
    display:block;
    padding:0;
    max-width:none;
  }
  .sidebar {
    position:static;
  }
  .profile {
    display:flex;
    gap:25px;
    align-items:center;
  }
  .portrait-link {
    width:100px;
  }
  .portrait {
    width:100px;
    height:100px;
  }
  .section-nav,.profile-links,.page-heading,.cv-link,.skip-link {
    display:none;
  }
  .about-section {
    margin-top:20px;
  }
  section {
    break-inside:avoid;
    margin-bottom:24px;
  }
  .photo-grid img {
    height:170px;
  }
  a {
    color:inherit;
  }
  details {
    display:block;
  }
  footer {
    padding-bottom:0;
  }
  .footer-note>a {
    display:none;
  }
}


/* Keep any future form controls consistent with the page typography. */
button, input, select, textarea {
  font:inherit;
}