/* ══════════════════════════════════════════════
       Reset & Design Tokens
       ══════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --primary:       #2b4590;
      --primary-dark:  #1a2f6b;
      --primary-soft:  #e8edf7;
      --primary-line:  #c9d5ef;

      --text:          #16203a;
      --text-mid:      #2d3748;
      --text-light:    #4a5568;
      --text-muted:    #77839a;

      --bg:            #f6f8fc;
      --bg-card:       #ffffff;
      --bg-soft:       #f0f4ff;
      --masthead-bg:   rgba(255,255,255,.86);

      --border:        #e2e8f0;
      --border-light:  #edf1f7;

      --badge-bg:      #2b4590;
      --badge-fg:      #ffffff;
      --btn-hover-fg:  #ffffff;

      --esi-bg:        #fff2f2;
      --esi-fg:        #c53030;
      --esi-border:    #fbd5d5;

      --award-bg:      #fff8e6;
      --award-fg:      #8a5a06;
      --award-border:  #f2dca6;

      --ok-bg:         #e9f7ef;
      --ok-fg:         #1c7a4d;
      --ok-border:     #bfe6d0;
      --ok-dot:        #22a06b;

      --shadow-sm:     0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
      --shadow-md:     0 4px 18px rgba(43,69,144,.10);
      --shadow-lg:     0 10px 34px rgba(43,69,144,.14);

      --radius:        10px;
      --radius-sm:     7px;
      --sidebar-w:     262px;
      --maxw:          1180px;
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --primary:       #93aefc;
        --primary-dark:  #b7c9ff;
        --primary-soft:  #1b2540;
        --primary-line:  #2c3a5e;

        --text:          #e9edf6;
        --text-mid:      #ccd4e4;
        --text-light:    #a3aec3;
        --text-muted:    #7d879c;

        --bg:            #0e131e;
        --bg-card:       #161d2b;
        --bg-soft:       #1a2233;
        --masthead-bg:   rgba(14,19,30,.86);

        --border:        #27314a;
        --border-light:  #202940;

        --badge-bg:      #3d5bb5;
        --badge-fg:      #ffffff;
        --btn-hover-fg:  #0e131e;

        --esi-bg:        rgba(197,48,48,.16);
        --esi-fg:        #f98a8a;
        --esi-border:    rgba(249,138,138,.28);

        --award-bg:      rgba(214,164,42,.16);
        --award-fg:      #eec565;
        --award-border:  rgba(238,197,101,.28);

        --ok-bg:         rgba(34,160,107,.14);
        --ok-fg:         #6fdca6;
        --ok-border:     rgba(111,220,166,.26);
        --ok-dot:        #4ecf94;

        --shadow-sm:     0 1px 2px rgba(0,0,0,.35);
        --shadow-md:     0 4px 18px rgba(0,0,0,.4);
        --shadow-lg:     0 10px 34px rgba(0,0,0,.5);
      }
    }

    :root[data-theme="dark"] {
      --primary:       #93aefc;
      --primary-dark:  #b7c9ff;
      --primary-soft:  #1b2540;
      --primary-line:  #2c3a5e;

      --text:          #e9edf6;
      --text-mid:      #ccd4e4;
      --text-light:    #a3aec3;
      --text-muted:    #7d879c;

      --bg:            #0e131e;
      --bg-card:       #161d2b;
      --bg-soft:       #1a2233;
      --masthead-bg:   rgba(14,19,30,.86);

      --border:        #27314a;
      --border-light:  #202940;

      --badge-bg:      #3d5bb5;
      --badge-fg:      #ffffff;
      --btn-hover-fg:  #0e131e;

      --esi-bg:        rgba(197,48,48,.16);
      --esi-fg:        #f98a8a;
      --esi-border:    rgba(249,138,138,.28);

      --award-bg:      rgba(214,164,42,.16);
      --award-fg:      #eec565;
      --award-border:  rgba(238,197,101,.28);

      --ok-bg:         rgba(34,160,107,.14);
      --ok-fg:         #6fdca6;
      --ok-border:     rgba(111,220,166,.26);
      --ok-dot:        #4ecf94;

      --shadow-sm:     0 1px 2px rgba(0,0,0,.35);
      --shadow-md:     0 4px 18px rgba(0,0,0,.4);
      --shadow-lg:     0 10px 34px rgba(0,0,0,.5);
    }

    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

    body {
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      color: var(--text-mid);
      background: var(--bg);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      transition: background .25s ease, color .25s ease;
    }

    a { color: var(--primary); text-decoration: none; transition: color .15s; }
    a:hover { color: var(--primary-dark); }
    strong { color: var(--text); font-weight: 600; }
    em { font-style: italic; }
    img { max-width: 100%; }

    :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 500;
      background: var(--primary); color: #fff; padding: .6em 1em; border-radius: 0 0 6px 0;
    }
    .skip-link:focus { left: 0; color: #fff; }

    /* ══════════════════════════════════════════════
       Masthead
       ══════════════════════════════════════════════ */
    .masthead {
      position: sticky; top: 0; z-index: 200;
      background: var(--masthead-bg);
      backdrop-filter: saturate(160%) blur(12px);
      -webkit-backdrop-filter: saturate(160%) blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .masthead__inner {
      max-width: var(--maxw); margin: 0 auto;
      padding: .62em 2em;
      display: flex; align-items: center; gap: 1.2em;
    }
    .masthead__title {
      font-family: "Source Serif 4", Georgia, serif;
      font-size: 1.02em; font-weight: 700;
      color: var(--text); letter-spacing: -.01em;
      white-space: nowrap; flex-shrink: 0;
    }
    .masthead__title span { color: var(--text-muted); font-weight: 400; }

    .masthead__nav {
      display: flex; gap: .35em; margin-left: auto;
      overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .masthead__nav::-webkit-scrollbar { display: none; }
    .masthead__nav::after { content: ''; flex: 0 0 .4em; }
    .masthead__nav a {
      position: relative;
      font-size: .8em; font-weight: 500;
      color: var(--text-light);
      padding: .45em .6em; border-radius: 6px;
      white-space: nowrap;
      transition: color .15s, background .15s;
    }
    .masthead__nav a:hover { color: var(--primary); background: var(--primary-soft); }
    .masthead__nav a.is-active { color: var(--primary); font-weight: 600; }
    .masthead__nav a.is-active::after {
      content: ''; position: absolute; left: .6em; right: .6em; bottom: .1em;
      height: 2px; background: var(--primary); border-radius: 2px;
    }

    .theme-toggle {
      flex-shrink: 0;
      width: 32px; height: 32px;
      display: grid; place-items: center;
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--bg-card); color: var(--text-light);
      cursor: pointer; font-size: .82em;
      transition: color .15s, border-color .15s, background .15s;
    }
    .theme-toggle:hover { color: var(--primary); border-color: var(--primary-line); }
    .theme-toggle .fa-moon { display: none; }
    :root[data-theme="dark"] .theme-toggle .fa-moon { display: block; }
    :root[data-theme="dark"] .theme-toggle .fa-sun { display: none; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .theme-toggle .fa-moon { display: block; }
      :root:not([data-theme="light"]) .theme-toggle .fa-sun { display: none; }
    }

    /* ══════════════════════════════════════════════
       Page Layout
       ══════════════════════════════════════════════ */
    .page-wrapper {
      max-width: var(--maxw); margin: 0 auto;
      padding: 2.4em 2em 3em;
      display: flex; gap: 2.8em; align-items: flex-start;
    }
    .main { flex: 1; min-width: 0; }

    /* ══════════════════════════════════════════════
       Sidebar
       ══════════════════════════════════════════════ */
    .sidebar {
      width: var(--sidebar-w); flex-shrink: 0;
      position: sticky; top: 4.4em;
    }
    .sidebar__card {
      position: relative; overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.7em 1.4em 1.5em;
      box-shadow: var(--shadow-sm);
    }
    .sidebar__card::before {
      content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
      background: linear-gradient(90deg, var(--primary), #6d8ce0 55%, var(--ok-dot));
    }

    .avatar-wrap { text-align: center; margin-bottom: 1em; }
    .avatar-wrap img {
      width: 132px; height: 132px;
      border-radius: 50%; object-fit: cover;
      border: 3px solid var(--bg-card);
      box-shadow: var(--shadow-lg);
      transition: box-shadow .25s, transform .25s;
    }
    .avatar-wrap img:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(43,69,144,.24); }

    .author-name {
      text-align: center;
      font-family: "Source Serif 4", Georgia, serif;
      font-size: 1.28em; font-weight: 700; color: var(--text);
      letter-spacing: -.015em; line-height: 1.25; margin-bottom: .1em;
    }
    .author-name-cn { text-align: center; font-size: .84em; color: var(--text-muted); margin-bottom: .65em; letter-spacing: .08em; }

    .role-badge {
      display: block; width: fit-content; margin: 0 auto .6em;
      font-size: .72em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
      color: var(--primary); background: var(--primary-soft);
      border: 1px solid var(--primary-line);
      padding: .2em .7em; border-radius: 999px;
    }
    .author-affil {
      text-align: center; font-size: .82em;
      color: var(--text-light); line-height: 1.55; margin-bottom: .4em;
    }
    .author-location { text-align: center; font-size: .78em; color: var(--text-muted); }
    .author-location i { margin-right: .35em; font-size: .92em; }

    .divider { border: none; border-top: 1px solid var(--border-light); margin: 1.1em 0; }

    .author-links { list-style: none; }
    .author-links li { margin-bottom: .3em; }
    .author-links a {
      display: flex; align-items: center; gap: .65em;
      font-size: .8em; color: var(--text-light);
      padding: .3em .4em; margin: 0 -.4em; border-radius: 6px;
      transition: color .15s, background .15s; overflow-wrap: break-word;
    }
    .author-links a:hover { color: var(--primary); background: var(--bg-soft); }
    .author-links .icon {
      width: 18px; flex-shrink: 0; text-align: center;
      color: var(--primary); font-size: .92em;
    }

    /* ══════════════════════════════════════════════
       Sections
       ══════════════════════════════════════════════ */
    .section { margin-bottom: 2.7em; scroll-margin-top: 4.6em; }
    .section:last-child { margin-bottom: 0; }

    .section-title {
      position: relative;
      display: flex; align-items: center; gap: .6em;
      font-size: 1.06em; font-weight: 700;
      color: var(--text); letter-spacing: -.012em;
      padding-bottom: .62em; margin-bottom: 1.25em;
      border-bottom: 1px solid var(--border);
    }
    .section-title::after {
      content: ''; position: absolute; left: 0; bottom: -1px;
      width: 2.4em; height: 2px; background: var(--primary); border-radius: 2px;
    }
    .section-title .ico {
      width: 1.75em; height: 1.75em; flex-shrink: 0;
      display: grid; place-items: center;
      background: var(--primary-soft); color: var(--primary);
      border-radius: var(--radius-sm); font-size: .78em;
    }

    /* ══════════════════════════════════════════════
       About / Hero
       ══════════════════════════════════════════════ */
    .lead {
      font-family: "Source Serif 4", Georgia, serif;
      font-size: 1.22em; line-height: 1.5; color: var(--text);
      margin-bottom: .95em; letter-spacing: -.008em;
    }
    .about-text p {
      margin-bottom: .8em; font-size: .95em;
      color: var(--text-mid); line-height: 1.78;
    }
    .about-text p:last-child { margin-bottom: 0; }

    .keyword-row { display: flex; flex-wrap: wrap; gap: .45em; margin: 1.1em 0 .2em; }
    .kw {
      font-size: .76em; font-weight: 500;
      color: var(--text-light); background: var(--bg-card);
      border: 1px solid var(--border);
      padding: .25em .7em; border-radius: 999px;
    }

    .recruit-pill {
      display: inline-flex; align-items: center; gap: .55em;
      margin-top: 1.1em;
      font-size: .82em; font-weight: 600;
      color: var(--ok-fg); background: var(--ok-bg);
      border: 1px solid var(--ok-border);
      padding: .4em .95em; border-radius: 999px;
      transition: transform .15s;
    }
    .recruit-pill:hover { color: var(--ok-fg); transform: translateX(2px); }
    .recruit-pill .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--ok-dot); flex-shrink: 0;
      box-shadow: 0 0 0 0 rgba(34,160,107,.55);
      animation: pulse 2.4s infinite;
    }
    @keyframes pulse {
      0%   { box-shadow: 0 0 0 0 rgba(34,160,107,.5); }
      70%  { box-shadow: 0 0 0 7px rgba(34,160,107,0); }
      100% { box-shadow: 0 0 0 0 rgba(34,160,107,0); }
    }

    /* ══════════════════════════════════════════════
       News
       ══════════════════════════════════════════════ */
    .news-list { position: relative; padding-left: 1.6em; }
    .news-list::before {
      content: ''; position: absolute; left: 3px; top: 1em; bottom: 1em;
      width: 2px; background: var(--border); border-radius: 2px;
    }
    .news-item {
      position: relative;
      display: grid; grid-template-columns: 4.6em 1fr; gap: .85em;
      padding: .45em 0; align-items: baseline;
    }
    .news-item::before {
      content: ''; position: absolute; left: -1.6em; top: .9em;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary-line);
      box-shadow: 0 0 0 3px var(--bg);
    }
    .news-item.is-new::before { background: var(--primary); box-shadow: 0 0 0 3px var(--bg); }
    .news-date {
      font-size: .78em; font-weight: 700; color: var(--text-muted);
      font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .news-item.is-new .news-date { color: var(--primary); }
    .news-text { font-size: .89em; color: var(--text-mid); line-height: 1.65; }

    /* ══════════════════════════════════════════════
       Research cards
       ══════════════════════════════════════════════ */
    .research-grid {
      display: grid; gap: 1em;
      grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    }
    .research-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.25em 1.15em;
      transition: transform .18s, box-shadow .18s, border-color .18s;
    }
    .research-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: var(--primary-line);
    }
    .rc-ico {
      width: 34px; height: 34px; margin-bottom: .8em;
      display: grid; place-items: center;
      background: var(--primary-soft); color: var(--primary);
      border-radius: 9px; font-size: .92em;
    }
    .rc-title { font-size: .92em; font-weight: 650; color: var(--text); margin-bottom: .35em; line-height: 1.4; }
    .rc-text { font-size: .82em; color: var(--text-light); line-height: 1.65; }

    /* ══════════════════════════════════════════════
       Papers
       ══════════════════════════════════════════════ */
    .paper-list { display: flex; flex-direction: column; }
    .paper-box {
      display: flex; gap: 1.7em; align-items: flex-start;
      padding: 1.5em 1em;
      border-bottom: 1px solid var(--border-light);
      border-radius: var(--radius);
      transition: background .18s;
    }
    .paper-box:last-child { border-bottom: none; }
    .paper-box:hover { background: var(--bg-soft); }

    .paper-img-wrap { flex-shrink: 0; width: 212px; position: relative; }
    .paper-img-wrap img {
      width: 100%; border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md);
      object-fit: cover; display: block;
      transition: box-shadow .2s, transform .2s;
    }
    .paper-img-wrap:hover img { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

    .badge {
      position: absolute; top: .6em; left: -.35em; z-index: 2;
      padding: .28em .8em;
      background: var(--badge-bg); color: var(--badge-fg);
      font-size: .68em; font-weight: 700; letter-spacing: .045em;
      border-radius: 0 4px 4px 0;
      box-shadow: 2px 3px 10px rgba(0,0,0,.2);
      white-space: nowrap;
    }

    .paper-body { flex: 1; min-width: 0; }
    .paper-title {
      font-size: .97em; font-weight: 600; color: var(--primary);
      line-height: 1.45; margin-bottom: .4em; display: block;
    }
    .paper-authors { font-size: .83em; color: var(--text-light); line-height: 1.6; margin-bottom: .55em; }
    .paper-abstract { font-size: .87em; color: var(--text-mid); line-height: 1.72; margin-bottom: .7em; }
    .paper-tags { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: .65em; }
    .tag-esi {
      display: inline-flex; align-items: center; gap: .35em;
      background: var(--esi-bg); color: var(--esi-fg); border: 1px solid var(--esi-border);
      padding: .16em .6em; border-radius: 5px; font-size: .74em; font-weight: 600;
    }
    .tag-award {
      display: inline-flex; align-items: center; gap: .35em;
      background: var(--award-bg); color: var(--award-fg); border: 1px solid var(--award-border);
      padding: .16em .6em; border-radius: 5px; font-size: .74em; font-weight: 600;
    }
    .paper-links { display: flex; flex-wrap: wrap; gap: .5em; }
    .paper-btn {
      display: inline-flex; align-items: center; gap: .38em;
      font-size: .78em; font-weight: 500;
      padding: .28em .8em;
      border: 1.5px solid var(--primary); border-radius: 6px;
      color: var(--primary); transition: background .15s, color .15s;
    }
    .paper-btn:hover { background: var(--primary); color: var(--btn-hover-fg); }
    .paper-btn i { font-size: .92em; }

    /* ══════════════════════════════════════════════
       Awards
       ══════════════════════════════════════════════ */
    .awards-list { list-style: none; }
    .awards-list li {
      display: flex; align-items: baseline; gap: .8em;
      padding: .42em .3em;
      border-bottom: 1px solid var(--border-light);
      font-size: .9em; border-radius: 5px;
      transition: background .15s;
    }
    .awards-list li:hover { background: var(--bg-soft); }
    .awards-list li:last-child { border-bottom: none; }
    .award-year {
      flex-shrink: 0; width: 2.9em;
      font-weight: 700; color: var(--primary);
      font-size: .87em; font-variant-numeric: tabular-nums;
    }
    .award-text { color: var(--text-mid); }

    /* ══════════════════════════════════════════════
       Timeline (education / talks / teaching)
       ══════════════════════════════════════════════ */
    .timeline { display: flex; flex-direction: column; }
    .tl-item {
      display: grid; grid-template-columns: max-content 1fr; gap: .9em;
      padding: .72em .3em; align-items: baseline;
      border-bottom: 1px solid var(--border-light);
      border-radius: 5px; transition: background .15s;
    }
    .tl-item:hover { background: var(--bg-soft); }
    .tl-item:last-child { border-bottom: none; }
    .tl-date {
      font-size: .81em; font-weight: 700; color: var(--primary);
      font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .tl-content { font-size: .9em; color: var(--text-mid); line-height: 1.6; }
    .tl-content small { display: block; color: var(--text-muted); font-size: .87em; margin-top: .12em; }
    .tl-item.is-current .tl-date::before {
      content: ''; display: inline-block; vertical-align: middle;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--ok-dot); margin-right: .45em;
    }

    /* ══════════════════════════════════════════════
       Callout (prospective students / teaching note)
       ══════════════════════════════════════════════ */
    .callout {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-left: 3px solid var(--primary);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: 1.3em 1.45em;
      box-shadow: var(--shadow-sm);
    }
    .callout p { font-size: .9em; color: var(--text-mid); line-height: 1.75; margin-bottom: .8em; }
    .callout p:last-child { margin-bottom: 0; }
    .callout ul { list-style: none; margin: .2em 0 .9em; }
    .callout ul li {
      position: relative; padding-left: 1.35em;
      font-size: .89em; color: var(--text-mid); line-height: 1.7; margin-bottom: .3em;
    }
    .callout ul li::before {
      content: '\f105'; font-family: "Font Awesome 6 Free"; font-weight: 900;
      position: absolute; left: .25em; top: 0; color: var(--primary); font-size: .9em;
    }
    .callout-note { font-size: .86em; color: var(--text-muted); }
    .callout--note { padding: .9em 1.2em; background: transparent; box-shadow: none; }
    .mail-chip {
      display: inline-flex; align-items: center; gap: .4em;
      font-size: .84em; font-weight: 600;
      color: var(--primary); background: var(--primary-soft);
      border: 1px solid var(--primary-line);
      padding: .25em .7em; border-radius: 6px;
    }
    .mail-chip:hover { color: var(--primary-dark); }

    /* ══════════════════════════════════════════════
       Other publications
       ══════════════════════════════════════════════ */
    .pub-list { display: flex; flex-direction: column; gap: .15em; }
    .pub-item {
      padding: .85em 1em;
      border-left: 3px solid var(--border);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      transition: border-color .15s, background .15s;
    }
    .pub-item:hover { border-left-color: var(--primary); background: var(--bg-soft); }
    .pub-venue {
      display: inline-block; font-size: .71em; font-weight: 700;
      color: var(--primary); letter-spacing: .04em;
      background: var(--primary-soft); border-radius: 4px;
      padding: .1em .5em; margin-bottom: .35em;
    }
    .pub-title { font-size: .9em; font-weight: 500; color: var(--text); line-height: 1.5; display: block; margin-bottom: .22em; }
    .pub-title:hover { color: var(--primary); }
    .pub-authors { font-size: .81em; color: var(--text-muted); line-height: 1.55; }

    /* ══════════════════════════════════════════════
       Footer & back-to-top
       ══════════════════════════════════════════════ */
    .site-footer {
      border-top: 1px solid var(--border);
      margin-top: 1em;
    }
    .site-footer__inner {
      max-width: var(--maxw); margin: 0 auto;
      padding: 1.6em 2em 2.4em;
      display: flex; flex-wrap: wrap; gap: .6em 1.4em;
      justify-content: space-between; align-items: center;
      font-size: .8em; color: var(--text-muted);
    }
    .site-footer a { color: var(--text-muted); }
    .site-footer a:hover { color: var(--primary); }

    .to-top {
      position: fixed; right: 1.4em; bottom: 1.4em; z-index: 150;
      width: 38px; height: 38px; display: grid; place-items: center;
      background: var(--bg-card); color: var(--text-light);
      border: 1px solid var(--border); border-radius: 50%;
      box-shadow: var(--shadow-md); cursor: pointer;
      opacity: 0; visibility: hidden; transform: translateY(8px);
      transition: opacity .2s, transform .2s, visibility .2s, color .15s;
    }
    .to-top.show { opacity: 1; visibility: visible; transform: none; }
    .to-top:hover { color: var(--primary); }

    /* ══════════════════════════════════════════════
       Motion preferences
       ══════════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .recruit-pill .dot { animation: none; }
    }

    /* ══════════════════════════════════════════════
       Scrollbar
       ══════════════════════════════════════════════ */
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* ══════════════════════════════════════════════
       Responsive
       ══════════════════════════════════════════════ */
    @media (max-width: 1020px) {
      .masthead__title span { display: none; }
    }
    @media (max-width: 880px) {
      .page-wrapper { flex-direction: column; padding: 1.6em 1.15em 2.4em; gap: 1.8em; }
      .sidebar { width: 100%; position: static; }
      .sidebar__card { display: grid; grid-template-columns: auto 1fr; gap: 0 1.3em; align-items: center; padding: 1.5em 1.3em; }
      .sidebar__card > .avatar-wrap { grid-row: 1 / span 5; grid-column: 1; align-self: center; margin-bottom: 0; }
      .avatar-wrap img { width: 92px; height: 92px; }
      .author-name, .author-name-cn, .author-affil, .author-location { text-align: left; grid-column: 2; }
      .role-badge { margin: .1em 0 .45em; grid-column: 2; }
      .sidebar__card > .divider { grid-column: 1 / -1; }
      .author-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1em; }
      .masthead__inner { padding: .55em 1.15em; gap: .8em; }
      .masthead__nav { margin-left: 0; order: 3; width: 100%; padding-bottom: .1em; }
      .masthead__title { order: 1; }
      .theme-toggle { order: 2; margin-left: auto; }
      .masthead__inner { flex-wrap: wrap; }
      .paper-box { flex-direction: column; gap: 1.1em; padding: 1.4em .4em; }
      .paper-img-wrap { width: 100%; max-width: 330px; }
      .news-item { grid-template-columns: 4.3em 1fr; gap: .7em; }
      .site-footer__inner { padding: 1.4em 1.15em 2em; }
      .section { scroll-margin-top: 6.6em; }
    }
    @media (max-width: 460px) {
      body { font-size: 14.5px; }
      .sidebar__card { gap: 0 1em; padding: 1.3em 1.15em; }
      .avatar-wrap img { width: 76px; height: 76px; }
      .author-name { font-size: 1.16em; }
      .news-item { grid-template-columns: 1fr; gap: .1em; }
      .news-item::before { top: .82em; }
      .tl-item { grid-template-columns: 1fr; gap: .1em; }
    }

    /* ============================================================
       Multi-page additions
       ============================================================ */

    /* Page-level nav item for the page you are on */
    .masthead__nav a.is-current { color: var(--primary); font-weight: 600; }
    .masthead__nav a.is-current::after {
      content: ''; position: absolute; left: .6em; right: .6em; bottom: .1em;
      height: 2px; background: var(--primary); border-radius: 2px;
    }
    .masthead__nav .nav-sep {
      align-self: center; flex: 0 0 auto;
      width: 1px; height: 1.1em; margin: 0 .35em;
      background: var(--border);
    }

    /* "View all publications ->" style link at the end of a section */
    .more-link {
      display: inline-flex; align-items: center; gap: .45em;
      margin-top: 1.1em;
      font-size: .85em; font-weight: 600;
      color: var(--primary);
      padding: .4em .95em;
      border: 1.5px solid var(--primary); border-radius: 7px;
      transition: background .15s, color .15s, transform .15s;
    }
    .more-link:hover { background: var(--primary); color: var(--btn-hover-fg); transform: translateX(2px); }

    /* Year band inside the full publication list */
    .pub-year {
      display: flex; align-items: center; gap: .8em;
      margin: 1.6em 0 .7em;
      font-size: .8em; font-weight: 700; letter-spacing: .06em;
      color: var(--text-muted); font-variant-numeric: tabular-nums;
    }
    .pub-year:first-child { margin-top: 0; }
    .pub-year::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

    /* Page intro line under a section title */
    .page-intro {
      font-size: .9em; color: var(--text-light);
      line-height: 1.7; margin-bottom: 1.4em;
    }