/* ---------------------------------------------------------------
   Jingzhou Chen — academic homepage
   Two-column glass layout (sticky sidebar + content) on wide screens.
   Shared by index.html (EN) and index-zh.html (ZH).
   --------------------------------------------------------------- */

:root {
  --fg:        #1c2027;
  --muted:     #5f6672;
  --faint:     #848c99;
  --rule:      rgba(28, 32, 39, .12);
  --accent:    #1d5b8e;
  --accent-bg: rgba(29, 91, 142, .10);
  --tag-bg:    rgba(28, 32, 39, .06);

  --glass:      rgba(255, 255, 255, .42);
  --glass-edge: rgba(255, 255, 255, .8);
  /* stacked shadows + an inner bevel read as thickness, not a flat pane */
  --glass-shadow:
      0 1px 2px rgba(24, 44, 74, .06),
      0 8px 20px rgba(24, 44, 74, .07),
      0 24px 60px rgba(24, 44, 74, .12),
      inset 0 1px 0 rgba(255, 255, 255, .85),
      inset 0 -1px 0 rgba(24, 44, 74, .06);
  --panel:      rgba(255, 255, 255, .34);
  --panel-edge: rgba(255, 255, 255, .7);
  --panel-shadow:
      0 2px 6px rgba(24, 44, 74, .05),
      0 12px 28px rgba(24, 44, 74, .09),
      inset 0 1px 0 rgba(255, 255, 255, .8);

  --base1: #f2f6fb;
  --base2: #e6ebf4;

  /* recruiting notice — deliberately off the page's blue-grey palette */
  --notice-bg:     rgba(214, 158, 46, .13);
  --notice-edge:   rgba(178, 130, 30, .30);
  --notice-accent: #b5831f;
  --notice-strong: #8a6212;

  /* Arial for Latin, KaiTi for CJK — fallback runs per glyph */
  --font: Arial, "Helvetica Neue", Helvetica,
          KaiTi, "Kaiti SC", STKaiti, "TW-Kai", 楷体,
          "AR PL UKai CN", "Songti SC", serif;

  /* type scale — each step maps to one level of the hierarchy */
  --t-name:    2.75rem;  /* page owner            */
  --t-section: 1.5rem;   /* section heading       */
  --t-sub:     1.2rem;   /* sub-heading           */
  --t-body:    1.125rem; /* body copy, item title */
  --t-meta:    1rem;     /* authors, venue, notes */
  --t-small:   .875rem;  /* dates, resource links */
  --t-micro:   .75rem;   /* tags, chips           */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg:        #e7e9ec;
    --muted:     #a3a9b4;
    --faint:     #868d99;
    --rule:      rgba(231, 233, 236, .14);
    --accent:    #8ec0e8;
    --accent-bg: rgba(142, 192, 232, .14);
    --tag-bg:    rgba(231, 233, 236, .08);

    --glass:      rgba(30, 34, 42, .44);
    --glass-edge: rgba(255, 255, 255, .14);
    --glass-shadow:
        0 1px 2px rgba(0, 0, 0, .30),
        0 8px 20px rgba(0, 0, 0, .30),
        0 24px 60px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 -1px 0 rgba(0, 0, 0, .25);
    --panel:      rgba(255, 255, 255, .055);
    --panel-edge: rgba(255, 255, 255, .11);
    --panel-shadow:
        0 2px 6px rgba(0, 0, 0, .25),
        0 12px 28px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .10);

    --base1: #101319;
    --base2: #0a0c10;

    --notice-bg:     rgba(214, 168, 74, .13);
    --notice-edge:   rgba(214, 168, 74, .27);
    --notice-accent: #d9b168;
    --notice-strong: #ecc98d;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;

  background: linear-gradient(158deg, var(--base1) 0%, var(--base2) 100%);
  background-attachment: fixed;
}

/* CJK copy gets a touch more leading */
body.zh { line-height: 1.75; }

/* ---------- glass shell: sidebar + content ---------- */

.wrap {
  max-width: 96rem;
  /* explicit width, so the background frame survives even when the viewport
     is narrower than max-width (where `auto` margins would collapse to 0) */
  width: calc(100% - 5rem);
  margin: 2.5rem auto;
  padding: 3.25rem 4rem 3.5rem;

  display: grid;
  grid-template-columns: 21rem 1fr;
  gap: 4rem;
  align-items: start;

  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  backdrop-filter: blur(30px) saturate(175%);
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
}

/* specular sheen across the top edge — the cue that sells "glass" */
.wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
      168deg,
      rgba(255, 255, 255, .38) 0%,
      rgba(255, 255, 255, .10) 22%,
      transparent 45%);
}
@media (prefers-color-scheme: dark) {
  .wrap::before {
    background: linear-gradient(
        168deg,
        rgba(255, 255, 255, .09) 0%,
        rgba(255, 255, 255, .03) 22%,
        transparent 45%);
  }
}

/* inner rim — light gathering at the edge of the pane */
.wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .34),
      inset 0 0 30px rgba(255, 255, 255, .18);
}
@media (prefers-color-scheme: dark) {
  .wrap::after {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .07),
        inset 0 0 30px rgba(255, 255, 255, .045);
  }
}

/* if the browser cannot blur, lean on opacity so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .90); --panel: rgba(255, 255, 255, .72); }
  @media (prefers-color-scheme: dark) {
    :root { --glass: rgba(26, 29, 35, .93); --panel: rgba(255, 255, 255, .07); }
  }
}

/* ---------- recruiting notice ---------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 2.5rem;
  padding: 1.05rem 1.35rem;
  background: var(--notice-bg);
  border: 1px solid var(--notice-edge);
  border-left: 3px solid var(--notice-accent);
  border-radius: 12px;
  font-size: var(--t-meta);
  line-height: 1.65;
}

.notice p { margin: 0; font-size: inherit; max-width: none; }
.notice b { color: var(--notice-strong); font-weight: 700; }
.notice a {
  color: var(--notice-strong);
  font-weight: 700;
  border-bottom: 1px solid rgba(138, 98, 18, .45);
}
.notice a:hover { border-bottom-color: currentColor; }
@media (prefers-color-scheme: dark) {
  .notice a { border-bottom-color: rgba(236, 201, 141, .45); }
}

.notice-ico {
  width: 1.45em;
  height: 1.45em;
  flex-shrink: 0;
  margin-top: .1em;
  color: var(--notice-accent);
}

/* the sidebar floats as a second pane above the base sheet */
.sidebar {
  position: sticky;
  top: 2rem;
  align-self: start;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--panel-edge);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
}

/* a hairline rail anchors the two columns and gives the gutter a purpose */
.content {
  min-width: 0;
  padding-left: 4rem;
  border-left: 1px solid var(--rule);
  counter-reset: sec;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
a:hover { border-bottom-color: var(--accent); }

/* ---------- language switch ---------- */

.lang {
  display: flex;
  gap: .3rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-small);
}
.lang a {
  padding: .22rem .62rem;
  border-radius: 100px;
  color: var(--faint);
  border: 1px solid var(--rule);
}
.lang a:hover { color: var(--accent); border-color: var(--accent); }
.lang a.on {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: transparent;
  font-weight: 700;
}

/* ---------- identity ---------- */

.portrait {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-bottom: 1.4rem;
  border: 1px solid var(--panel-edge);
  box-shadow:
      0 2px 4px rgba(24, 44, 74, .10),
      0 10px 26px rgba(24, 44, 74, .22);
}

h1 {
  margin: 0 0 .7rem;
  font-size: var(--t-name);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}
.affil {
  color: var(--muted);
  font-size: var(--t-meta);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

/* ---------- sidebar links ---------- */

.links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.75rem;
  font-size: var(--t-small);
}
.links a {
  padding: .32rem .75rem;
  border: 1px solid var(--panel-edge);
  border-radius: 100px;
  color: var(--muted);
  background: rgba(255, 255, 255, .45);
  box-shadow:
      0 1px 2px rgba(24, 44, 74, .07),
      inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
@media (prefers-color-scheme: dark) {
  .links a {
    background: rgba(255, 255, 255, .07);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .09);
  }
}
.links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow:
      0 4px 10px rgba(24, 44, 74, .14),
      inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- sidebar section nav ---------- */

.toc {
  list-style: none;
  margin: 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  counter-reset: toc;
}
.toc li { counter-increment: toc; margin-bottom: .1rem; }
.toc a {
  display: block;
  color: var(--muted);
  padding: .22rem .5rem .22rem 2.3rem;
  border-radius: 5px;
  border-bottom: none;
  position: relative;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: .5rem;
  color: var(--accent);
  opacity: .45;
  font-weight: 700;
}
.toc a:hover {
  color: var(--accent);
  background: var(--accent-bg);
}

/* set by the scroll handler: marks the section currently in view */
.toc a.on {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-bg);
}
.toc a.on::before { opacity: 1; }

/* ---------- sections ---------- */

section { margin-bottom: 2.75rem; }
section:last-of-type { margin-bottom: 1.5rem; }

/* section headings carry an index numeral set into the left margin, and a
   rule that fades out to the right — editorial, but still quiet */
section { counter-increment: sec; }

h2 {
  position: relative;
  font-size: var(--t-section);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--fg);
  padding-bottom: .55rem;
  margin: 0 0 1.4rem;
  border-bottom: none;
  background-image: linear-gradient(to right, var(--accent) 0 3.5rem, var(--rule) 3.5rem 55%, transparent 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}

h2::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  left: -4rem;
  top: .18em;
  width: 2rem;
  text-align: right;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  opacity: .55;
}

h3 {
  font-size: var(--t-sub);
  font-weight: 700;
  color: var(--muted);
  margin: 1.9rem 0 .9rem;
}

p { margin: 0 0 1rem; font-size: var(--t-body); }

/* running prose only — keeps line length readable on wide screens.
   Structured content (publications, grants, lists) stays full width. */
.sub { max-width: 82ch; }

/* ---------- research interests ---------- */

.interests { list-style: none; margin: 0; padding: 0; font-size: var(--t-body); }
.interests li {
  padding-left: 1.15rem;
  position: relative;
  margin-bottom: .6rem;
}
.interests li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.interests b { font-weight: 700; }

/* ---------- two-column entries ---------- */

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

.entry {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  margin-bottom: 1.55rem;
  padding: .35rem .75rem .35rem 0;
  margin-left: -.75rem;
  padding-left: .75rem;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.entry:hover {
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-left-color: var(--accent);
  box-shadow:
      0 2px 6px rgba(24, 44, 74, .07),
      0 10px 24px rgba(24, 44, 74, .09),
      inset 0 1px 0 rgba(255, 255, 255, .6);
}
@media (prefers-color-scheme: dark) {
  .entry:hover {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .3),
        0 10px 24px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
  }
}

/* date ranges ("2022.04 – 2023.06") need a wider gutter than bare years */
.timeline .entry { grid-template-columns: 8.6rem 1fr; }

.when {
  font-size: var(--t-small);
  color: var(--faint);
  padding-top: .3em;
  white-space: nowrap;
}

.title {
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.45;
}

.authors { color: var(--muted); font-size: var(--t-meta); }
.authors .me { color: var(--fg); font-weight: 700; }

.venue { font-size: var(--t-meta); color: var(--muted); }

.tag {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  padding: .12rem .45rem;
  border-radius: 3px;
  background: var(--tag-bg);
  color: var(--muted);
  vertical-align: 1px;
}
/* flagship venues carry the accent, so they read first */
.tag.major { background: var(--accent-bg); color: var(--accent); }

/* honours such as ESI Highly Cited */
.honor {
  font-size: var(--t-micro);
  font-weight: 700;
  padding: .1rem .42rem;
  border-radius: 3px;
  background: rgba(176, 122, 26, .13);
  color: #8a6212;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .honor { background: rgba(214, 168, 74, .16); color: #d9b168; }
}

.res { font-size: var(--t-small); margin-left: .45rem; }
.res a { color: var(--faint); }
.res a:hover { color: var(--accent); }

/* inline brand marks sit on the text baseline and inherit its colour */
.ico {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.16em;
  margin-right: .28em;
  flex-shrink: 0;
}

.sub {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: var(--t-meta);
}
.sub li { margin-bottom: .3rem; }

.note { font-size: var(--t-small); color: var(--faint); margin-top: -.3rem; }

/* role chip for grants (PI / Co-I) */
.role-chip {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  color: var(--muted);
  margin-left: .4rem;
  vertical-align: 2px;
}
.role-chip.pi { border-color: var(--accent); color: var(--accent); }

/* ---------- plain bullet lists ---------- */

.inline { list-style: none; margin: 0; padding: 0; font-size: var(--t-meta); }
.inline li {
  margin-bottom: .48rem;
  padding-left: 1.1rem;
  position: relative;
}
.inline li::before {
  content: "·";
  position: absolute;
  left: .3rem;
  color: var(--faint);
}

/* two columns for the long reviewer list once there is room */
@media (min-width: 60rem) {
  .cols2 {
    columns: 2;
    column-gap: 2.5rem;
  }
  .cols2 li { break-inside: avoid; }
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  color: var(--faint);
  font-size: var(--t-small);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ---------- responsive ---------- */

/* below the two-column threshold the sidebar becomes a normal header */
@media (max-width: 64rem) {
  .wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 52rem;
    padding: 2.75rem 2.5rem 3rem;
  }
  .sidebar { position: static; padding: 1.5rem 1.4rem 1.35rem; }
  /* no side rail once the columns stack — pull the numeral inline instead */
  .content { padding-left: 0; border-left: none; }
  h2 { padding-left: 2.7rem; }
  h2::before { left: 0; width: auto; text-align: left; }
  .portrait {
    max-width: 150px;
    float: left;
    margin: 0 1.6rem .6rem 0;
  }
  .affil { overflow: hidden; }
  .links { clear: both; }
  .toc { display: none; }
}

@media (max-width: 40rem) {
  body { font-size: 17px; }
  .wrap {
    width: auto;
    margin: 0;
    padding: 2.25rem 1.2rem 3rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  :root { --t-name: 2.1rem; --t-section: 1.3rem; }
  .portrait {
    float: none;
    margin: 0 0 1.1rem;
    max-width: 120px;
  }
  .entry, .timeline .entry {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
  .when { padding-top: 0; }
}

/* ---------- print ---------- */

@media print {
  :root {
    --fg: #000; --muted: #333; --faint: #555;
    --rule: #ccc; --accent: #000;
    --accent-bg: #eee; --tag-bg: #eee;
  }
  body { background: #fff; }
  .links, .lang, .toc { display: none; }
  .wrap {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .wrap::before, .wrap::after { display: none; }
  .sidebar {
    position: static;
    margin-bottom: 1.5rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .content { padding-left: 0; border-left: none; }
  h2 { padding-left: 0; background: none; border-bottom: 1px solid #ccc; }
  h2::before { display: none; }
  .entry { margin-left: 0; padding-left: 0; border-left: none; background: none; }
  .portrait { max-width: 110px; float: left; margin: 0 1.2rem .5rem 0; }
  a { border-bottom: none; }
  section { break-inside: avoid; }
}