:root {
  /* AI4Rad restrained identity — reduced palette */
  --ai4rad-teal: #009b8f; --ai4rad-teal-dark: #008c95; --ai4rad-teal-soft: #e3f3f1;
  --ai4rad-blue: #00529b; --ai4rad-blue-dark: #003f88;
  --ai4rad-red: #c9102e; --ai4rad-ink: #0f1b29; --ai4rad-paper: #ffffff;
  --text-primary: var(--ai4rad-ink);
  --text-secondary: #3f4d59;
  --text-muted: #66727e;
  --bg-page: var(--ai4rad-paper);
  --bg-card: #ffffff;
  --border: #d8e5e8;
  --border-light: #e8f2f4;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(17,32,51,0.04);
  --shadow-md: 0 4px 10px rgba(17,32,51,0.05);
  --nav-height: 56px;
  --content-max: 720px;
  /* Typography: serif display (Newsreader) for headings — editorial, academic feel;
     neutral sans (Inter) for body; Noto Sans/Serif SC paired for consistent CJK. */
  --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-display: 'Newsreader', 'Noto Serif SC', 'Songti SC', serif;
  --font-serif: 'Newsreader', 'Noto Serif SC', 'Songti SC', serif;
  --nav-bg: rgba(247,251,252,0.96);

  /* ── Fluid type scale ─────────────────────────────────────────────
     One source of truth for every text size. Each token fluidly scales
     from a phone-portrait floor to a 4K ceiling via clamp(min, vw, max),
     so phone → 1080p → 2K → 4K share ONE logic with no per-selector or
     per-page breakpoint overrides. Anchors: floor ≈ 375px, ceiling ≈ 2560px.
        token        phone → desktop → 2K → 4K (approx px)
        --fs-hero     29 → 51 → 56 → 67     hero / page titles
        --fs-h1       30 → 39 → 45 → 50     profile name
        --fs-h2       18 → 24 → 30 → 37     section titles
        --fs-h3       16 → 18 → 20 → 25     card / group titles
        --fs-lead     15 → 18 → 22 → 27     hero subtitle / lead text
        --fs-body     16 → 16 → 19 → 22     base reading size
        --fs-copy     14 → 16 → 18 → 21     body copy in lists
        --fs-meta     13 → 14 → 16 → 18     meta / caption lines
        --fs-micro    12 → 12 → 14 → 15     tiny labels / chips         */
  --fs-hero:  clamp(1.8rem, 1.40rem + 1.75vw, 4.2rem);
  --fs-h1:    clamp(1.9rem, 1.55rem + 1.45vw, 3.1rem);
  --fs-h2:    clamp(1.15rem, 0.70rem + 1.00vw, 2.3rem);
  --fs-h3:    clamp(1rem, 0.78rem + 0.42vw, 1.55rem);
  --fs-lead:  clamp(0.95rem, 0.66rem + 0.66vw, 1.66rem);
  --fs-body:  clamp(1rem, 0.62rem + 0.47vw, 1.375rem);
  --fs-copy:  clamp(0.9rem, 0.66rem + 0.40vw, 1.3rem);
  --fs-meta:  clamp(0.84rem, 0.72rem + 0.23vw, 1.1rem);
  --fs-micro: clamp(0.72rem, 0.62rem + 0.18vw, 0.95rem);

  /* Fluid spacing — vertical rhythm + gutters scale with the viewport too. */
  --space-section: clamp(40px, 1.6rem + 2.0vw, 96px);
  --gutter: clamp(20px, 1rem + 1vw, 40px);
}

[data-theme="dark"] {
  --text-primary: #e8f4f2;
  --text-secondary: #9aaba6;
  --text-muted: #6e807b;
  --bg-page: #0b1418;
  --bg-card: #141f23;
  --border: #233439;
  --border-light: #1a272b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.3);
  --nav-bg: rgba(11,20,24,0.96);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 24px); }
body {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.78; color: var(--text-primary);
  background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-top: var(--nav-height);
}

a { color: var(--ai4rad-teal-dark); text-decoration: none; transition: color 0.2s; }
[data-theme="dark"] a { color: #4ad4c8; }
a:hover { color: var(--ai4rad-blue); }
[data-theme="dark"] a:hover { color: #6ee4da; }

::selection { background: rgba(0,142,155,0.16); }

/* Navigation — minimal */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height);
  background: var(--nav-bg); border-bottom: 1px solid var(--border);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
}
.nav__inner { display: flex; align-items: center; gap: 12px; max-width: var(--content-max); width: 100%; padding: 0 var(--gutter); }
.nav__brand { margin-right: auto; display: flex; align-items: center; gap: 10px; }
/* team-logo.png is a pure icon (no wordmark), so keep it compact and show the
   lab name as a text label next to it. */
.nav__brand-logo { height: 30px; width: auto; flex-shrink: 0; }
.nav__brand-text { font-family: var(--font-display); font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.35rem); font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { padding: 5px 12px; font-size: var(--fs-meta); font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm); transition: color 0.2s; white-space: nowrap; }
.nav__link:hover { color: var(--text-primary); background: transparent; }
.nav__link.active { color: var(--text-primary); font-weight: 600; }
.nav__link--lang { padding: 5px 12px; font-size: var(--fs-meta); font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm); border: 1px solid var(--border); transition: all 0.2s; white-space: nowrap; }
.nav__link--lang:hover { color: var(--text-primary); border-color: var(--text-secondary); background: transparent; }
.nav__theme-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 4px 8px; border-radius: var(--radius-sm); transition: background 0.2s; line-height: 1; margin-left: 4px; color: var(--text-secondary); }
.nav__theme-btn:hover { background: var(--border-light); }

.wrapper { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

/* Unified vertical rhythm: every section after the hero shares one scalable gap. */
.wrapper > section + section { margin-top: var(--space-section); }

/* Hero — minimal */
.hero { padding: clamp(40px, 5vw, 104px) 0 clamp(20px, 2.5vw, 52px); text-align: center; }
.hero__brandrow { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.5vw, 26px); margin-bottom: 18px; }
.hero__emblem { height: clamp(64px, 7vw, 160px); width: auto; flex-shrink: 0; }
.hero__title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); text-align: left; }
.hero__subtitle { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--text-secondary); max-width: 36em; margin: 0 auto; line-height: 1.62; font-weight: 400; }
.hero__links { margin-top: 24px; font-size: var(--fs-meta); color: var(--text-muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.hero__links a { font-weight: 500; }
.hero__sep { color: #c2cfd3; }

/* Section titles — minimal */
.section-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--text-primary); margin-bottom: 20px; letter-spacing: -0.005em; line-height: 1.25; }
.section-title::after { content: ''; display: block; width: 28px; height: 2px; background: var(--ai4rad-teal); border-radius: 2px; margin-top: 12px; }

.text-body { color: var(--text-secondary); font-size: var(--fs-copy); line-height: 1.78; }

/* Text lists */
.text-list { list-style: none; padding: 0; margin: 0; }
.text-list li { position: relative; padding: 12px 0 12px 20px; color: var(--text-secondary); font-size: var(--fs-copy); line-height: 1.7; border-bottom: 1px solid var(--border-light); }
.text-list li:last-child { border-bottom: none; }
.text-list li::before { content: ''; position: absolute; left: 0; top: 21px; width: 10px; height: 2px; background: var(--ai4rad-teal); }
.text-list p { color: var(--text-secondary); font-size: var(--fs-copy); line-height: 1.78; margin: 0 0 13px; }
.text-list p:last-child { margin-bottom: 0; }
.text-list strong, .text-list p strong { color: var(--text-primary); font-weight: 600; }

.news-list-plain { list-style: none; padding: 0; margin: 0; }
.news-list-plain li { padding: 11px 0; color: var(--text-secondary); font-size: var(--fs-copy); line-height: 1.72; border-bottom: 1px solid var(--border-light); }
.news-list-plain li:last-child { border-bottom: none; }
.news-date { display: inline-block; min-width: 72px; font-weight: 600; color: var(--ai4rad-teal-dark); margin-right: 14px; font-feature-settings: 'tnum'; }

/* Footer — minimal */
.footer { margin-top: var(--space-section); padding: clamp(44px, 3vw, 68px) 0 clamp(52px, 3.4vw, 68px); border-top: 1px solid var(--border); text-align: center; background: var(--bg-page); }
.footer__brand { margin-bottom: 26px; }
.footer__brandlogo { height: clamp(96px, 11vw, 280px); width: auto; max-width: 100%; opacity: 0.95; }
.footer__brand-cap { margin-top: 14px; line-height: 1.6; color: var(--text-secondary); }
.footer__brand-cap strong { color: var(--text-primary); font-weight: 600; }
/* Two-line lockup: institution intro on top, smaller keyword vision below. */
.footer__brand-intro { display: block; font-size: var(--fs-meta); font-weight: 500; color: var(--text-primary); }
.footer__brand-vision { display: block; margin-top: 5px; font-size: var(--fs-micro); color: var(--text-muted); letter-spacing: 0.01em; }
.footer__links { display: flex; justify-content: center; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.footer__links a { font-size: var(--fs-meta); color: var(--text-secondary); font-weight: 500; }
.footer__links a:hover { color: var(--text-primary); }
.footer__meta { font-size: var(--fs-micro); color: var(--text-muted); margin-bottom: 26px; }
/* Affiliations: row layout, logos scaled by their native aspect ratio so the
   wide SSPH wordmark and the SJTU lockup sit on a shared baseline. */
.footer__affil { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer__affil-cap { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.footer__affil-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(20px, 3vw, 34px); }
.footer__affil img { width: auto; opacity: 0.82; display: block; }
/* SSPH wordmark is very wide (~4:1) — cap by height so it reads; SJTU lockup
   is wider than tall — keep it a touch shorter to balance the SSPH wordmark. */
.footer__affil .a-ssph { height: clamp(46px, 4.6vw, 88px); }
.footer__affil .a-sjtu { height: clamp(40px, 4.0vw, 74px); }
.footer__affil-sep { width: 1px; height: clamp(46px, 4vw, 76px); background: var(--border); flex-shrink: 0; }
[data-theme="dark"] .footer__brandlogo { filter: brightness(1.1); }
[data-theme="dark"] .footer__affil img { opacity: 0.75; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =============== Team roster (rendered by js/main.js renderTeam) =============== */

.section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.section-label__text { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--text-primary); white-space: nowrap; letter-spacing: -0.01em; }
.section-label__line { flex: 1; height: 1px; background: var(--border); }

.leader-card { display: flex; align-items: center; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--border-light); }
.leader-card:last-of-type { border-bottom: none; }
.leader-card__avatar { width: clamp(96px, 8vw, 132px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--border-light); flex-shrink: 0; }
.leader-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.leader-card__name { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.leader-card__name-en { font-weight: 400; font-size: var(--fs-lead); color: var(--text-secondary); margin-left: 8px; font-family: var(--font-body); }
.leader-card__tags { display: none; }
.leader-card__meta { font-size: var(--fs-copy); color: var(--text-secondary); line-height: 1.65; margin-top: 6px; }

.pi-card { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--border-light); }
.pi-card:last-of-type { border-bottom: none; }
.pi-card__avatar { width: clamp(76px, 6.4vw, 108px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--border-light); flex-shrink: 0; }
.pi-card__avatar img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.pi-card__avatar a:hover img { opacity: 0.85; }
.pi-card__name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--text-primary); }
.pi-card__name-en, .pi-card__name-cn { font-weight: 400; font-size: var(--fs-copy); color: var(--text-secondary); margin-left: 8px; font-family: var(--font-body); }
.pi-card__meta { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 4px; line-height: 1.6; }

.member-card { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border-light); background: transparent; border-radius: 0; }
.member-card:last-of-type { border-bottom: none; }
.member-card:hover { border-color: var(--border-light); box-shadow: none; }
.member-card__avatar { width: clamp(52px, 4.4vw, 76px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--border-light); flex-shrink: 0; }
.member-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-card__avatar a:hover img { opacity: 0.85; }
.member-card__info { flex: 1; min-width: 0; }
.member-card__name { font-weight: 600; font-size: var(--fs-h3); color: var(--text-primary); }
.member-card__name-en, .member-card__name-cn { font-weight: 400; font-size: var(--fs-meta); color: var(--text-secondary); }
.member-card__meta { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 3px; line-height: 1.55; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.student-category { margin-top: var(--space-section); }
.student-category__sub { margin-bottom: 22px; }
.student-category__sub-label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; padding-left: 4px; }

.alumni-section .member-card { background: var(--bg-card); }
.alumni-section .member-card__avatar { opacity: 0.9; }

/* The member profile page (members/index.html) owns its own .mp-* styles inline,
   co-located with the only template that renders them. */

/* ============ Publication cards (shared by publications page + member page) ============ */
.pub-list { list-style: none; padding: 0; margin: 0; }
.pub-list--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.pub-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); transition: box-shadow 0.2s, border-color 0.2s; }
.pub-card:hover { box-shadow: var(--shadow-md); border-color: var(--border); }
.pub-card__media { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--ai4rad-teal-soft); }
.pub-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-card__body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pub-title { font-size: var(--fs-copy); font-weight: 600; line-height: 1.45; color: var(--text-primary); }
.pub-title a { color: inherit; }
.pub-title a:hover { color: var(--ai4rad-teal-dark); }
.pub-authors { font-size: var(--fs-meta); color: var(--text-secondary); line-height: 1.55; }
.pub-author { color: inherit; border-bottom: 1px dotted var(--text-muted); text-decoration: none; }
.pub-author:hover { color: var(--ai4rad-teal-dark); border-bottom-color: var(--ai4rad-teal); }
.pub-author--me { font-weight: 700; color: var(--ai4rad-teal-dark); border-bottom: none; }
.pub-venue { font-size: var(--fs-meta); font-style: italic; color: var(--text-muted); }
.pub-featured { background: var(--ai4rad-teal-soft); padding: 1px 7px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.65rem; margin-right: 6px; color: var(--ai4rad-teal-dark); vertical-align: 1px; }
[data-theme="dark"] .pub-featured { background: #142327; color: #4ad4c8; }
.pub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pub-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--fs-micro); font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; }
.pub-tag--jcr { color: #b4470b; background: #fff1e1; border-color: transparent; }       /* Q1/Q2 — amber */
.pub-tag--if { color: #0f766e; background: #d3f3ee; border-color: transparent; }         /* IF — teal */
.pub-tag--cas { color: #0f766e; background: #d3f3ee; border-color: transparent; }
.pub-tag--ccf { color: var(--ai4rad-blue-dark); background: #e7f0fb; border-color: transparent; }
.pub-tag--award { color: var(--ai4rad-red); background: #fff0f3; border-color: transparent; }
.pub-tag--type { color: #6b5b95; background: #efebf7; border-color: transparent; }        /* Dataset/Review — purple */
[data-theme="dark"] .pub-tag { border-color: var(--border); }
[data-theme="dark"] .pub-tag--jcr { color: #ffb27a; background: #3a2410; }
[data-theme="dark"] .pub-tag--if, [data-theme="dark"] .pub-tag--cas { color: #4ad4c8; background: #102321; }
[data-theme="dark"] .pub-tag--ccf { color: #7db8ff; background: #102033; }
[data-theme="dark"] .pub-tag--award { color: #ff8fa3; background: #2b1118; }
[data-theme="dark"] .pub-tag--type { color: #c4b6e8; background: #221a33; }
.pub-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.pub-link { font-size: var(--fs-meta); font-weight: 700; color: var(--ai4rad-teal-dark); padding: 2px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.pub-link::before { content: ''; display: inline-block; width: 0.5em; }
.pub-link:hover { color: var(--text-primary); text-decoration: underline; }
.pub-abstract { font-size: var(--fs-meta); color: var(--text-secondary); line-height: 1.6; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.pub-empty { text-align: center; color: var(--text-muted); padding: 60px 0; list-style: none; }

/* ============ Filters ============ */
.filters { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 18px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-label { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; width: 56px; flex-shrink: 0; }
.chip { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 500; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s; }
.chip:hover { border-color: var(--ai4rad-teal); color: var(--text-primary); }
.chip--active { background: var(--ai4rad-teal-dark); border-color: var(--ai4rad-teal-dark); color: #fff; }
[data-theme="dark"] .chip--active { background: #009b8f; border-color: #009b8f; }
.filter-search { flex: 1; min-width: 180px; font-family: var(--font-body); font-size: var(--fs-meta); padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); background: var(--bg-card); }
.filter-search:focus { outline: none; border-color: var(--ai4rad-teal); }
.filter-count { font-size: var(--fs-meta); color: var(--text-muted); margin: 0 0 14px; }

/* Avatar placeholder */
.avatar-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--ai4rad-teal-soft); color: var(--ai4rad-teal-dark); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }
[data-theme="dark"] .avatar-ph { background: #142327; color: #4ad4c8; }
.member-card__avatar .avatar-ph { font-size: clamp(0.85rem, 0.7rem + 0.3vw, 1.2rem); }
.pi-card__avatar .avatar-ph { font-size: clamp(1.2rem, 0.9rem + 0.6vw, 1.7rem); }
.leader-card__avatar .avatar-ph { font-size: clamp(1.5rem, 1.1rem + 0.8vw, 2.2rem); }

/* Monochrome line-icon system */
.ic { display: inline-block; width: 1.2rem; height: 1.2rem; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; flex-shrink: 0; vertical-align: -0.18em; }
.ic--team { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ic--flask { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M10 2v7.31'/><path d='M14 9.3V2'/><path d='M8.5 2h7'/><path d='M14 9.3a6.5 6.5 0 1 1-4 0'/><path d='M5.52 16h12.96'/></svg>"); }
.ic--play { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='10 8 16 12 10 16 10 8'/></svg>"); }
.ic--layers { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/><path d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/><path d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/></svg>"); }
.ic--eye { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.ic--chat { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); }
.ic--spark { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.94 14.5A2 2 0 0 0 8.5 13.06l-5.6-1.44a.5.5 0 0 1 0-.97L8.5 9.2a2 2 0 0 0 1.44-1.44l1.44-5.6a.5.5 0 0 1 .97 0l1.44 5.6A2 2 0 0 0 15.2 9.2l5.6 1.44a.5.5 0 0 1 0 .97l-5.6 1.44a2 2 0 0 0-1.44 1.44l-1.44 5.6a.5.5 0 0 1-.97 0z'/><path d='M20 3v4'/><path d='M22 5h-4'/></svg>"); }
.ic--cube { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/><path d='m3.3 7 8.7 5 8.7-5'/><path d='M12 22V12'/></svg>"); }
.ic--pulse { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>"); }
.ic--github { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/></svg>"); }
.ic--cap { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/><path d='M22 10v6'/><path d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/></svg>"); }
.ic--mail { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>"); }
.ic--brain { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z'/><path d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z'/></svg>"); }
.ic--external { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>"); }
.ic--calendar { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><line x1='16' x2='16' y1='2' y2='6'/><line x1='8' x2='8' y1='2' y2='6'/><line x1='3' x2='21' y1='10' y2='10'/></svg>"); }
.ic--document { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/><polyline points='14 2 14 8 20 8'/></svg>"); }
.ic--sun { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><path d='M12 1v2'/><path d='M12 21v2'/><path d='M4.22 4.22l1.42 1.42'/><path d='M18.36 18.36l1.42 1.42'/><path d='M1 12h2'/><path d='M21 12h2'/><path d='M4.22 19.78l1.42-1.42'/><path d='M18.36 5.64l1.42-1.42'/></svg>"); }
.ic--moon { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>"); }

/* Theme toggle icon */
.nav__theme-icon { display: inline-block; width: 1.1rem; height: 1.1rem; color: var(--text-secondary); }

/* ============== Responsive layout ==============
   Type and most spacing scale fluidly through the clamp() tokens in :root, so
   these breakpoints carry LAYOUT only: the reading measure (--content-max),
   grid column counts, and how the nav / cards reflow on small screens. One
   ladder, no per-selector font sizing — phone → 1080p → 2K → 4K share it.
     ≤768      phone portrait     full-bleed, single column, compact nav
     769–1023  portrait tablet
     1024–1279 laptop             (default 720px measure)
     1280–1919 desktop / 1080p    wider measure
     1920–2559 2K (QHD)           wider measure + taller nav
     ≥2560     4K                 measure capped so lines stay readable    */

@media (max-width: 768px) {
  :root { --nav-height: 52px; --content-max: 100%; }
  /* Compact nav: the circular emblem already carries the wordmark, so drop the
     text label and let all four links + lang + theme fit the bar without
     wrapping (the wrap was overflowing the fixed-height nav onto the page). */
  .nav__brand-text { display: none; }
  .nav__brand-logo { height: 28px; max-width: 150px; }
  .nav__inner { gap: 5px; }
  .nav__link, .nav__link--lang { font-size: 0.7rem; padding: 4px 4px; }
  .nav__link--lang { padding: 4px 6px; }
  /* Links scroll horizontally if they can't all fit; the fade hints there's
     more (e.g. the 中文 toggle) just off the right edge. */
  .nav__links { gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 90%, transparent 100%); }
  .nav__links::-webkit-scrollbar { display: none; }
  .leader-card, .pi-card { flex-direction: column; gap: 12px; text-align: center; }
  .leader-card__avatar, .pi-card__avatar { margin: 0 auto; }
  .member-grid { grid-template-columns: 1fr; }
  /* Keep footer marks modest on phones (the clamp floors are tuned for desktop). */
  .footer__brandlogo { height: 64px; }
  .footer__affil .a-ssph { height: 34px; }
  .footer__affil .a-sjtu { height: 28px; }
  .footer__affil-logos { gap: 20px; }
  .footer__affil-sep { height: 28px; }
}

/* Portrait tablet / small laptop (portrait iPad, Surface, etc.) */
@media (min-width: 769px) and (max-width: 1023px) {
  :root { --content-max: 680px; }
}

/* Desktop / 1080p — widen the reading measure */
@media (min-width: 1280px) {
  :root { --content-max: 820px; }
  .nav__brand-logo { height: 38px; }
}

/* 2K (QHD) — wider measure, taller nav */
@media (min-width: 1920px) {
  :root { --content-max: 940px; --nav-height: 66px; }
  .nav__brand-logo { height: 44px; }
}

/* 4K — cap the measure so line length stays readable */
@media (min-width: 2560px) {
  :root { --content-max: 1080px; }
  .nav__brand-logo { height: 52px; }
}

@media print { body { background: #fff; padding-top: 0; } .nav { display: none; } .reveal { opacity: 1; transform: none; } }