/* IPNL — Warm, professional, 圓融. Matisse/IPNL palette (ultramarine #2D3B97 + vermilion #D3313A) on warm ivory.
   Typography: Fraunces (headings) + Mulish (body) + Noto Serif/Sans CJK (Chinese) + IBM Plex Mono (numbers).
   Soft shadows, rounded cards, no neon glow. */

/* ---- Fonts ---- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Mulish:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---- Variables ---- */
:root {
  --maxw: 760px;
  --maxw-home: 1100px;
  --accent: #2D3B97;
  --accent-cyan: #2D3B97;
  --accent-cyan-bright: #3A4DB8;
  --accent-orange: #D3313A;
  --accent-light: #ECEEF8;
  --border: #E7E1D6;
  --text: #1A1F3A;
  --text-secondary: #474C63;
  --text-tertiary: #7B7F92;
  --bg: #FAF7F1;
  --bg-soft: #F4EFE5;
  --bg-dark: #161B40;
  --bg-dark-2: #20275A;
  --radius: 10px;

  --font-serif: "Fraunces", "Noto Serif TC", "Noto Serif SC", Georgia, serif;
  --font-sans: "Mulish", "Noto Sans TC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ---- Base ---- */
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.25; color: var(--text); }
h1 { font-size: 1.9rem; margin: 0 0 14px; letter-spacing: -0.012em; }
h2 { font-size: 1.45rem; margin: 36px 0 14px; }
h3 { font-size: 1.1rem; margin: 22px 0 8px; }
h4 { font-size: 1rem; margin: 18px 0 6px; }

p { margin: 0 0 14px; }
strong { font-weight: 600; }

code, kbd, .mono, .num {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

/* ---- Layout: site-main is now an unconstrained wrapper. Each section provides its own container. ---- */
.site-main { display: block; }

/* ---- Site Header (DARK, sticky, tech feel — matches PPT) ---- */
.site-header {
  background: rgba(22, 27, 64, 0.97);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  color: #fff;
  border-bottom: 1px solid rgba(45, 59, 151, 0.18);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(45, 59, 151, 0.45) 50%, transparent 100%);
}
.site-header-inner {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
/* Push the language switcher all the way to the right */
.site-header-inner > .lang-switch {
  margin-left: auto;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  border-bottom: none;
  text-decoration: none;
}
.brand-link:hover { border-bottom: none; }
.brand-logo {
  display: block;
  /* no invert filter — show original colorful IPNL logo */
}
.brand-logo-ipnl {
  height: 38px;
  background: #fff;
  border-radius: 5px;
  padding: 5px 9px;
}
.brand-logo-polyu {
  height: 38px;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
}
.brand-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: -0.005em;
}
.brand-sub {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.04em;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 1.35;
  max-width: 220px;
}

/* IPNL wordmark — the brand block next to the logo icon */
.brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.brand-wordmark-name {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.brand-wordmark-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan-bright) 0%, var(--accent-orange) 75%, transparent 100%);
  border-radius: 2px;
  opacity: 0.85;
}
.brand-wordmark-tag {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.05em;
  margin-top: 6px;
  white-space: nowrap;
}
.brand-link:hover .brand-wordmark-name {
  color: var(--accent-cyan-bright);
  transition: color 0.2s;
}
.brand-link:hover .brand-wordmark-name::after {
  opacity: 1;
}

@media (max-width: 980px) {
  .brand-sub { display: none; }
  .brand-wordmark-tag { display: none; }
  .brand-divider { display: none; }
}
@media (max-width: 560px) {
  .brand-logo-polyu { display: none; }
  .brand-wordmark-name { font-size: 1.3rem; }
}

/* (legacy nav-home-link removed — Home is now rendered inside .nav as the first tab) */

/* ==========================================================================
   CONTACT FORM — on the Engage page (#contact)
   ========================================================================== */
.contact-form {
  display: grid;
  gap: 18px;
  max-width: 640px;
  margin: 24px 0 40px;
}
.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.contact-form-label .req { color: var(--accent-orange); margin-left: 4px; }
.contact-form-input,
.contact-form-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: var(--accent-cyan-bright);
  box-shadow: 0 0 0 3px rgba(45, 59, 151, 0.15);
}
.contact-form-textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font-sans);
  line-height: 1.55;
}
.contact-form-honeypot { display: none !important; }

/* Translation-in-progress notice on zh-cn / zh-tw detail pages */
.translation-stub {
  display: block;
  margin: 24px 0;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 4px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.translation-stub a {
  color: var(--accent-cyan);
  font-weight: 500;
}
.translation-stub a:hover { color: var(--accent-cyan-bright); }
.contact-form-captcha { margin-top: 4px; }
.contact-form-captcha .h-captcha { display: block; }

/* Two-column "fast lane / slow lane" layout — replaces the cramped markdown table */
.lane-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 16px 0 28px;
}
.lane-grid-2 .lane-col {
  padding: 16px 18px 4px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 4px;
}
.lane-grid-2 .lane-col:nth-child(2) {
  border-left-color: var(--accent-orange);
}
.lane-grid-2 .lane-col-tag {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  font-weight: 700;
  margin-bottom: 10px;
}
.lane-grid-2 .lane-col:nth-child(2) .lane-col-tag {
  color: var(--accent-orange);
}
.lane-grid-2 .lane-col ul {
  margin: 0;
  padding-left: 18px;
}
.lane-grid-2 .lane-col li {
  margin-bottom: 6px;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .lane-grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Obfuscated email — non-clickable, monospace, subtle (at)/(dot) markers */
.email-obfuscated {
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  word-spacing: 0.1em;
  user-select: all;
}
.email-obfuscated em {
  font-style: normal;
  color: var(--text-tertiary);
  font-size: 0.88em;
}
.contact-form-submit {
  justify-self: start;
  background: var(--accent-cyan-bright);
  color: #161B40;
  border: none;
  border-radius: 4px;
  padding: 12px 32px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.contact-form-submit:hover {
  background: #2D3B97;
  transform: translateY(-1px);
}
.contact-direct {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.contact-direct strong { color: var(--text); }
.contact-direct a { color: var(--accent-cyan); }
.contact-direct a:hover { color: var(--accent-cyan-bright); }

/* ==========================================================================
   PAGE PARTS — large section dividers for long pages (e.g. R&D Projects)
   ========================================================================== */
.page-part {
  position: relative;
  margin: 88px 0 36px;
  padding: 36px 0 4px;
  border-top: 1px solid rgba(45, 59, 151, 0.22);
}
.page-part:first-child {
  margin-top: 24px;
}
.page-part::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan-bright) 0%, var(--accent-orange) 100%);
  border-radius: 2px;
}
.page-part-num {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 10px;
}
.page-part-title {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 10px;
}
.page-part-sub {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 680px;
}
@media (max-width: 640px) {
  .page-part { margin: 56px 0 24px; padding-top: 28px; }
  .page-part-title { font-size: 1.65rem; }
}

/* Language switcher EN | 简 | 繁 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  gap: 2px;
}
.lang-link {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  padding: 5px 9px;
  border-radius: 3px;
  border-bottom: none;
  transition: color 0.18s, background 0.18s;
}
.lang-link[lang^="zh"] {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.86rem;
}
.lang-link:hover {
  color: var(--accent-cyan-bright);
  background: rgba(45, 59, 151, 0.08);
  border-bottom: none;
}
.lang-link.is-active {
  color: var(--accent-cyan-bright);
  background: rgba(45, 59, 151, 0.12);
}
@media (max-width: 768px) {
  .lang-switch {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 8px;
  }
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nav a {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-bottom: none;
  border-radius: 3px;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}
.nav a:hover {
  color: var(--accent-cyan-bright);
  background: rgba(45, 59, 151, 0.08);
  border-bottom: none;
}
.nav a.active {
  color: var(--accent-cyan-bright);
  background: rgba(45, 59, 151, 0.1);
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #fff;
}
@media (max-width: 980px) { .brand-sub { display: none; } }

/* ---- Homepage lead ---- */
.home-lead {
  padding: 20px 0 0;
  margin-bottom: 8px;
}
.home-lead h1 {
  font-size: 2.2rem;
  line-height: 1.18;
  margin: 0 0 18px;
  letter-spacing: -0.018em;
}
.home-lead-def {
  font-size: 1.02rem;
  color: var(--text-secondary);
  max-width: 660px;
}

.home-section {
  margin: 48px 0;
}
.home-section h2 {
  font-size: 1.4rem;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.home-section h3 {
  font-size: 1.08rem;
  margin: 26px 0 6px;
  color: var(--text);
}
.home-section-link {
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.home-contact {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.home-contact p {
  margin: 0;
  color: var(--text-secondary);
}

/* Project list (homepage current work) */
.project-list { margin: 8px 0 0; }
.project-list dt {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.06rem;
  margin-top: 20px;
}
.project-list dt:first-of-type { margin-top: 4px; }
.project-list dt a { color: var(--text); border-bottom: none; }
.project-list dt a:hover { color: var(--accent); border-bottom: none; }
.project-list dd {
  margin: 4px 0 0;
  color: var(--text-secondary);
}
.proj-meta {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Record list */
.record-list {
  margin: 8px 0 0;
  padding-left: 22px;
}
.record-list li {
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.record-list strong {
  font-family: var(--font-sans);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--text);
}

/* ---- Generic section ---- */
.section { margin: 36px 0; }
.section h2 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ---- Cards grid ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card h3 { font-family: var(--font-serif); margin: 0 0 6px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.card .meta {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Tags (was colored badges, now neutral monospace) ---- */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.badge-ongoing   { color: #1e6b3a; border-color: #c8e3d2; }
.badge-completed { color: var(--text-tertiary); }
.badge-current   { color: var(--accent); border-color: #d4e0eb; }
.badge-alumni    { color: var(--text-tertiary); }
.badge-featured  { color: #8c6b00; border-color: #ece2c0; }
.badge-journal, .badge-conference, .badge-magazine, .badge-book { color: var(--text-secondary); }
.badge-patent    { color: #5b3b8c; border-color: #ddd4ec; }
.badge-q1 { color: #15803d; border-color: #c6e5d1; font-weight: 600; }
.badge-q2 { color: #1d4ed8; border-color: #d0d8f0; }
.badge-q3 { color: #b45309; border-color: #eed7c0; }
.badge-q4 { color: #b91c1c; border-color: #ebcccc; }
.badge-unranked { color: var(--text-tertiary); }
.badge-q-       { color: var(--text-tertiary); font-style: italic; }
.pub-badges { margin-bottom: 4px; display: flex; gap: 4px; flex-wrap: wrap; }

/* ---- Person card ---- */
.person-card {
  text-align: center;
  padding: 18px 14px;
}
.person-card .photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.person-card .photo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.person-card .photo-placeholder svg {
  width: 44px;
  height: 44px;
  fill: var(--text-tertiary);
}
.person-card h3 { font-family: var(--font-serif); font-size: 1rem; margin: 0 0 4px; }
.person-card .role { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.person-card .role-subtitle {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-orange);
  margin-top: 2px;
  font-weight: 600;
}

.member-groups { display: grid; gap: 32px; }
.member-group h3 {
  font-family: var(--font-serif);
  margin: 24px 0 14px;
  font-size: 1.08rem;
  color: var(--text);
}
.member-group:first-child h3 { margin-top: 0; }
.group-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ---- Publication entry ---- */
.pub-entry {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.pub-entry:last-child { border-bottom: none; }
.pub-entry .pub-title { font-weight: 500; color: var(--text); }
.pub-entry .pub-title a { color: inherit; border-bottom: none; }
.pub-entry .pub-title a:hover { color: var(--accent); border-bottom: none; }
.pub-entry .pub-authors {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 3px;
}
.pub-entry .pub-authors strong { color: var(--accent); }
.pub-entry .pub-venue {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.pub-entry .pub-links {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pub-entry .pub-links a {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--accent);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.pub-entry .pub-links a:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

/* ---- Year group (publications) ---- */
.year-group { margin: 32px 0; }
.year-group h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--accent);
  display: inline-block;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* ---- News feed ---- */
.news-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.news-thumb-link { flex-shrink: 0; display: block; border-bottom: none; }
.news-thumb-link:hover { border-bottom: none; }
.news-thumb {
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.news-body { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .news-item { flex-direction: column; gap: 8px; }
  .news-thumb { width: 100%; height: 160px; }
}
.news-item:last-child { border-bottom: none; }
.news-item .news-date {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.news-item .news-category {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  text-transform: uppercase;
  margin-left: 8px;
  letter-spacing: 0.04em;
}
.news-item h3 { font-family: var(--font-serif); margin: 6px 0; font-size: 1.05rem; }
.news-item p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.95rem; }
.news-source {
  font-size: 0.88rem;
  color: var(--text-tertiary);
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.news-article img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 22px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ---- Co-I engagements table ---- */
.co-i-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 24px;
  font-size: 0.9rem;
}
.co-i-table th, .co-i-table td {
  border-bottom: 1px solid var(--border);
  padding: 9px 10px;
  vertical-align: top;
  text-align: left;
}
.co-i-table th {
  background: var(--bg-soft);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- People pills + project list ---- */
.people-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.person-link {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.88rem;
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.person-link:hover {
  background: var(--bg-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.person-link-missing { color: var(--text-tertiary); font-style: italic; }
.person-projects { margin: 10px 0 0; padding-left: 22px; }
.person-projects li { margin-bottom: 6px; }
.person-projects .badge { font-size: 0.7rem; margin-left: 6px; }

/* ---- Research theme tile (uniform accent — no rainbow) ---- */
.theme-card {
  padding: 18px 18px;
  border-top: 3px solid var(--accent);
}
.theme-card.accent-1,
.theme-card.accent-2,
.theme-card.accent-3,
.theme-card.accent-4,
.theme-card.accent-5,
.theme-card.accent-6 { border-top-color: var(--accent); }
.theme-card h3 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0 0 8px; }
.theme-card p { font-size: 0.93rem; }
.theme-card .keywords { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.theme-card .keywords span {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  padding: 2px 6px;
  background: var(--bg-soft);
  border-radius: 3px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ---- Resource card ---- */
.resource-card .subtype {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* ---- Page banner ---- */
.page-banner {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 18px;
  display: block;
}

/* ---- Image / video stacks (news posts) ---- */
.image-stack { margin: 22px 0; }
.image-stack h2 { margin-bottom: 10px; }
.image-stack img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.image-stack img:last-child { margin-bottom: 0; }

.video-stack { margin: 22px 0; }
.video-stack h2 { margin-bottom: 10px; }
.video-stack .video-embed:not(:last-child) { margin-bottom: 14px; }
.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 18px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ---- Pager (news) ---- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 32px 0 8px;
  font-size: 0.9rem;
}
.pager-status { color: var(--text-tertiary); font-family: var(--font-sans); }
.pager-disabled { color: #bbb; }

/* ---- Funded-programs ledger ---- */
.ledger { margin-top: 4px; }
.ledger > summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--accent);
  padding: 6px 0;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.ledger > summary:hover { text-decoration: underline; }
.ledger[open] > summary { margin-bottom: 6px; }
.ledger-intro { color: var(--text-secondary); font-size: 0.95rem; margin: 4px 0 14px; }

/* ---- Publication filter chips ---- */
.pub-filter {
  margin: 18px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.pub-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.pub-filter-row:last-child { margin-bottom: 0; }
.pub-filter-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  width: 54px;
  flex-shrink: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  line-height: 1.4;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.chip:hover { background: var(--bg-soft); border-color: var(--accent); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.chip-accent-1.is-active, .chip.chip-accent-2.is-active,
.chip.chip-accent-3.is-active, .chip.chip-accent-4.is-active,
.chip.chip-accent-5.is-active, .chip.chip-accent-6.is-active {
  background: var(--accent); border-color: var(--accent);
}
.pub-search {
  flex: 1;
  min-width: 180px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
}
.pub-search:focus { outline: none; border-color: var(--accent); }
.pub-count {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.pub-clear {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
}
.pub-clear:hover { text-decoration: underline; }
.pub-noresults { color: var(--text-secondary); margin: 20px 0; }
.link-btn {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.pub-entry[hidden], .year-group[hidden] { display: none; }
@media (max-width: 560px) {
  .pub-filter-label { width: 100%; }
  .pub-search { min-width: 0; }
}

/* ---- Markdown tables (Partnerships, Engage, etc.) ---- */
.content table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0 22px;
  font-size: 0.93rem;
}
.content table th, .content table td {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.content table th {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-soft);
}

.content blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--border);
  color: var(--text-secondary);
  font-style: italic;
}
.content blockquote p:last-child { margin-bottom: 0; }

/* ---- Site Footer (DARK, tech feel — matches PPT) ---- */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 0;
  font-size: 0.9rem;
  margin-top: 0;
  border-top: 1px solid rgba(45, 59, 151, 0.15);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(45, 59, 151, 0.45) 50%, transparent 100%);
}
.site-footer-grid {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 0 28px 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
}
@media (max-width: 900px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; gap: 22px; } }
.footer-block { display: flex; flex-direction: column; gap: 10px; }
.footer-brand {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.footer-brand-sub {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-cyan-bright);
  margin-bottom: 14px;
}
.footer-affil {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}
.footer-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-cyan-bright);
  font-weight: 500;
  margin-bottom: 4px;
}
.footer-block a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  border-bottom: none;
  padding: 2px 0;
}
.footer-block a:hover {
  color: var(--accent-cyan-bright);
  border-bottom: none;
}
.footer-email {
  font-family: var(--font-sans);
  font-size: 0.84rem !important;
  color: var(--accent-cyan-bright) !important;
  word-break: break-all;
}
.site-footer-bar {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 18px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}
.footer-meta-links a {
  color: rgba(255, 255, 255, 0.55);
  border-bottom: none;
  margin-left: 14px;
}
.footer-meta-links a:hover { color: var(--accent-cyan-bright); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
  }
  .nav.open { display: flex; }
  .nav a { margin-right: 0; padding: 8px 0; }
  .cards { grid-template-columns: 1fr; }
  .header-inner { flex-wrap: wrap; }
  .home-lead h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
}

/* ==========================================================================
   HOMEPAGE — full-bleed, dark hero, big stats, partner grid, capability cards
   Visual reference: IPNL_产业合作介绍手册 PPT (dark city skyline + cyan/orange).
   ========================================================================== */

/* Override base container for homepage — full width, no padding */
.container-home {
  max-width: none;
  margin: 0;
  padding: 0;
}
.content-home {
  padding: 0;
}

/* Section eyebrow (uppercase mono label above each section h2) */
.section-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  font-weight: 500;
  margin-bottom: 12px;
}
.section-eyebrow-light { color: var(--accent-cyan-bright); }

.section-h2 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 36px;
  max-width: 760px;
}

/* ---- HERO (full-bleed dark city skyline) ---- */
.home-hero {
  position: relative;
  width: 100%;
  min-height: 540px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--bg-dark);
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45) saturate(1.1);
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22,27,64,0.85) 0%, rgba(22,27,64,0.45) 35%, rgba(22,27,64,0.85) 100%),
    linear-gradient(90deg, rgba(22,27,64,0.6) 0%, rgba(22,27,64,0.1) 60%);
}
.home-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 96px 28px;
}
.home-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9FB0F0;
  margin-bottom: 32px;
  font-weight: 600;
}
.home-hero-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: #fff;
  max-width: 820px;
}
.home-hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 32px;
  max-width: 640px;
  line-height: 1.55;
}
.home-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-hero-chips span {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
}

/* ---- STATS STRIP (partner cards on soft background) ---- */
.home-stats {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 80px 0;
}
.home-stats-inner {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 0 28px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1080px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .stat-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: #fff;
  border-radius: 6px;
  padding: 22px 18px 18px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-cyan);
  display: flex;
  flex-direction: column;
}
.stat-card:nth-child(even) { border-top-color: var(--accent-orange); }
.stat-partner {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.stat-num {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-cyan);
  margin: 0 0 4px;
  letter-spacing: -0.025em;
}
.stat-card:nth-child(even) .stat-num { color: var(--accent-orange); }
.stat-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.stat-context {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: auto;
  line-height: 1.45;
}
.home-stats-foot {
  margin-top: 28px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.home-stats-foot strong { color: var(--text); font-weight: 600; }
.home-stats-foot a {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- GENERIC HOME BLOCKS (capabilities, work, record) ---- */
.home-block {
  background: #fff;
  padding: 88px 0;
  border-bottom: 1px solid var(--border);
}
.home-block-soft {
  background: var(--bg-soft);
}
.home-block-inner {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 0 28px;
}
.home-block-more {
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.home-block-more a { border-bottom: none; }
.home-block-more a:hover { border-bottom: 1px solid var(--accent); }

/* ---- CAPABILITIES (4 numbered cards) ---- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 960px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cap-grid { grid-template-columns: 1fr; } }
.cap-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 6px;
  padding: 26px 22px 24px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.15s, background 0.15s;
}
.home-block-soft .cap-card { background: #fff; }
.cap-card-orange { border-top-color: var(--accent-orange); }
.cap-card:hover {
  border-color: var(--border);
  background: var(--bg-soft);
}
.cap-card:hover.cap-card { border-top-color: var(--accent-cyan); }
.cap-card-orange:hover.cap-card { border-top-color: var(--accent-orange); }
.cap-num {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  margin-bottom: 18px;
}
.cap-card-orange .cap-num { color: var(--accent-orange); }
.cap-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.3;
}
.cap-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.55;
}
.cap-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ---- CURRENT WORK GRID (project cards with images) ---- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 720px) { .work-grid { grid-template-columns: 1fr; } }
.work-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.15s, transform 0.15s;
}
.work-card:hover {
  border-color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.work-img {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-dark);
}
.work-img-fallback { opacity: 0.85; }
/* Portrait product shots — fit entire image, light backdrop */
.work-img-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f0f3f6;
}
.work-body { padding: 22px 24px 24px; }
.work-meta {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.work-card h3 {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.3;
}
.work-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* ---- RECORD LIST (year-prefixed bullets) ---- */
.record-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.record-grid li {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.rec-year {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--accent-cyan);
  font-weight: 600;
  letter-spacing: 0.04em;
  min-width: 70px;
  flex-shrink: 0;
}
.rec-text { flex: 1; }

/* ---- CONTACT BAR (full-bleed dark footer-bookend) ---- */
.home-contact-bar {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.9);
  padding: 64px 0;
  text-align: center;
}
.home-contact-bar-inner {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 0 28px;
}
.home-contact-bar p { margin: 8px 0; }
.contact-email {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.015em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-block;
  padding-bottom: 2px;
}
.contact-email:hover {
  color: var(--accent-cyan-bright);
  border-bottom-color: var(--accent-cyan-bright);
}
.contact-sub {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 20px !important;
  color: rgba(255, 255, 255, 0.65);
}
.contact-sub a {
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.contact-sub a:hover {
  color: var(--accent-cyan-bright);
  border-bottom-color: var(--accent-cyan-bright);
}

/* ---- Responsive tweaks for hero ---- */
@media (max-width: 760px) {
  .home-hero { min-height: 460px; }
  .home-hero-inner { padding: 72px 22px; }
  .home-hero-title { font-size: 2.2rem; }
  .home-hero-sub { font-size: 0.98rem; }
  .home-stats, .home-block { padding: 56px 0; }
  .home-stats-inner, .home-block-inner, .home-contact-bar-inner { padding: 0 22px; }
  .section-h2 { font-size: 1.4rem; margin-bottom: 28px; }
  .contact-email { font-size: 1.4rem; }
  .home-contact-bar { padding: 52px 0; }
}

/* ==========================================================================
   PAGE-HERO — Universal small dark banner used on every non-home page.
   Uses city skyline background + cyan accent + dot grid overlay (tech feel).
   ========================================================================== */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--bg-dark);
  overflow: hidden;
}
.page-hero-small { min-height: 220px; }
.page-hero-medium { min-height: 320px; }
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.4) saturate(1.05);
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 27, 64, 0.7) 0%, rgba(22, 27, 64, 0.55) 50%, rgba(22, 27, 64, 0.92) 100%);
}
.page-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(circle, rgba(45, 59, 151, 0.18) 0.7px, transparent 0.8px);
  background-size: 28px 28px;
  background-position: 0 0;
  mix-blend-mode: screen;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 56px 28px;
}
.page-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-cyan-bright);
  margin-bottom: 16px;
  font-weight: 500;
}
.page-hero-title {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
  max-width: 880px;
}
.page-hero-title .hi-cyan, .page-hero-title .hi-cyan-text {
  color: var(--accent-cyan-bright);
  font-weight: 700;
}
.page-hero-title .hi-orange, .page-hero-title .hi-orange-text {
  color: var(--accent-orange);
  font-weight: 700;
}
.page-hero-sub {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 18px 0 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-hero-sub strong {
  color: #fff;
  font-weight: 600;
}
.page-hero-sub .hi-cyan-text { color: var(--accent-cyan-bright); }
.page-hero-sub .hi-orange-text { color: var(--accent-orange); }
@media (max-width: 760px) {
  .page-hero { min-height: 240px; }
  .page-hero-inner { padding: 48px 22px; }
  .page-hero-title { font-size: 2rem; }
  .page-hero-sub { font-size: 0.96rem; }
}

/* ==========================================================================
   INNER PAGE TYPOGRAPHY — prose pages get the same emphasis as homepage
   ========================================================================== */
.page-body-inner h2,
.engage-section h2,
.partner-section .section-h2 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 48px 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.page-body-inner h2:first-child,
.engage-section h2:first-child,
.partner-section .section-h2:first-child { margin-top: 0; }
.page-body-inner h2::after,
.partner-section .section-h2::after,
.engage-section h2::after {
  content: "";
  position: absolute;
  inset: auto auto -1px 0;
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, transparent 100%);
}

.page-body-inner h3,
.engage-section h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 30px 0 12px;
  color: var(--text);
}

.page-body-inner .prose p,
.engage-section p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.page-body-inner .prose p strong,
.engage-section p strong {
  color: var(--text);
  font-weight: 700;
}

.page-body-inner ul:not(.cards):not(.lane-grid):not(.layer-grid):not(.funding-grid):not(.stat-grid):not(.people-pills):not(.record-list):not(.member-groups):not(.tab-mini-stats):not(.year-group):not(.pub-badges):not(.pub-links) {
  padding-left: 22px;
  margin: 14px 0 20px;
  line-height: 1.7;
}
.page-body-inner ul:not(.cards) li { margin-bottom: 6px; }

/* Section eyebrow above h2 in inner pages too */
.partner-section .section-eyebrow,
.engage-section + .engage-section .section-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .page-body-inner h2,
  .engage-section h2,
  .partner-section .section-h2 { font-size: 1.45rem; }
  .page-body-inner h3,
  .engage-section h3 { font-size: 1.1rem; }
}

/* ==========================================================================
   PAGE-BODY — Light content area below the page-hero on inner pages.
   ========================================================================== */
.page-body {
  background: var(--bg);
  padding: 56px 0 80px;
  position: relative;
  min-height: 60vh;
}
.page-body-inner {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 0 28px;
}
.page-body-inner h1 { display: none; } /* if any layout still renders <h1>, hide it (page-hero already shows title) */

/* Prose constraint for article-style pages (single news, project detail, etc.) */
.prose {
  max-width: 760px;
  margin: 0 auto;
}
.prose > h2:first-child,
.prose > p:first-child {
  margin-top: 0;
}

/* Person detail tweaks */
.person-photo-detail {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 18px;
  border: 2px solid var(--border);
  display: block;
}
.person-prose { max-width: 760px; }

@media (max-width: 760px) {
  .page-body { padding: 40px 0 56px; }
  .page-body-inner { padding: 0 22px; }
}

/* ==========================================================================
   CARDS-TECH — Card grid used on section landing pages (research, _default, etc.)
   Tech feel: white card on light bg, cyan top accent, monospace meta.
   ========================================================================== */
.cards-tech {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.card-link {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 5px;
  padding: 22px 22px 20px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.15s, transform 0.15s;
}
.card-link:nth-child(even) { border-top-color: var(--accent-orange); }
.card-link:hover {
  border-color: var(--border);
  border-bottom-color: var(--border);
  transform: translateY(-1px);
}
.card-link h3 {
  font-family: var(--font-serif);
  margin: 0 0 8px;
  font-size: 1.08rem;
  line-height: 1.3;
}
.card-link p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Apply tech-card accents to the existing .card (used by project-card, etc.) */
.cards-tech .card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 5px;
  transition: transform 0.15s, border-color 0.15s;
}
.cards-tech .card:nth-child(even) { border-top-color: var(--accent-orange); }
.cards-tech .card:hover { transform: translateY(-1px); }

/* ==========================================================================
   BODY background — keep page body white, body bg slightly darker behind for
   "container floats on darker page" effect — but actually we just keep white.
   ========================================================================== */
body { background: var(--bg); }
body.is-home .site-footer { margin-top: 0; }

/* Don't show .page-banner img (the old top banner) on any page — page-hero replaces it */
.page-banner { display: none; }

/* ==========================================================================
   PARTNERSHIPS PAGE — partner section blocks, funding grid
   ========================================================================== */
.partner-section {
  margin: 0 0 56px;
}
.partner-section:first-of-type { margin-top: 4px; }
.partner-section .section-eyebrow { color: var(--accent); }
.partner-section .section-h2 {
  font-size: 1.4rem;
  margin-bottom: 22px;
}

.funding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.funding-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 4px;
  padding: 18px 20px;
}
.funding-card:nth-child(even) { border-left-color: var(--accent-orange); }
.funding-agency {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 10px;
}
.funding-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.funding-card ul li { margin-bottom: 6px; }
.funding-card ul li strong {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.85em;
}

/* ==========================================================================
   ENGAGE PAGE — three-lane top grid + layer cards
   ========================================================================== */
.lane-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 56px;
}
@media (max-width: 760px) { .lane-grid { grid-template-columns: 1fr; } }
.lane-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-cyan);
  border-radius: 5px;
  padding: 26px 24px 24px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.15s, transform 0.15s;
}
.lane-card-orange { border-top-color: var(--accent-orange); }
.lane-card:hover { transform: translateY(-2px); }
.lane-num {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  margin-bottom: 14px;
}
.lane-card-orange .lane-num { color: var(--accent-orange); }
.lane-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 1.3;
}
.lane-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.55;
}
.lane-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.engage-section {
  margin: 0 0 56px;
  scroll-margin-top: 80px;
}
.engage-section h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.engage-section h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin: 26px 0 10px;
}

.layer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.layer-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 4px;
  padding: 20px 22px;
}
.layer-card:nth-child(even) { border-top-color: var(--accent-orange); }
.layer-tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
}
.layer-card h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  margin: 0 0 8px;
}
.layer-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* ==========================================================================
   LEADERSHIP (homepage) — 2 large hero-style cards for PI + Co-PI
   ========================================================================== */
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 880px) { .leadership-grid { grid-template-columns: 1fr; } }
.leader-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-cyan);
  border-radius: 6px;
  padding: 26px 26px 24px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.leader-card-orange { border-top-color: var(--accent-orange); }
.leader-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 27, 64, 0.07);
}
/* Non-linking variant — keeps all visual effects (tilt, glow, reveal),
   only kills the link cursor. */
.leader-card-static {
  cursor: default;
}
.leader-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  background:
    var(--bg-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='18' fill='%23c5cdd6'/%3E%3Cpath d='M18 92 Q50 64 82 92 Z' fill='%23c5cdd6'/%3E%3C/svg%3E")
    center / cover no-repeat;
  border: 1px solid var(--border);
  display: block;
}
.leader-tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  font-weight: 600;
  margin-bottom: 8px;
}
.leader-card-orange .leader-tag { color: var(--accent-orange); }
.leader-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.leader-role {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.45;
}
.leader-credits {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.leader-credits li {
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.leader-credits li:first-child { border-top: none; padding-top: 2px; }
.leader-credits strong {
  font-family: var(--font-sans);
  font-size: 0.82em;
  color: var(--text);
  font-weight: 500;
  display: inline-block;
  min-width: 72px;
}
.leader-more {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
@media (max-width: 560px) {
  .leader-card { grid-template-columns: 90px 1fr; gap: 16px; padding: 20px 18px; }
  .leader-photo { width: 90px; height: 90px; }
}

/* ==========================================================================
   TABS (homepage Case Studies)
   ========================================================================== */
.tabs { width: 100%; }
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.tab-btn {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  margin-bottom: -1px;
  position: relative;
}
.tab-btn:hover { color: var(--text); background: var(--bg-soft); }
.tab-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent-cyan);
}
.tab-btn.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-cyan-bright) 100%);
  box-shadow: 0 0 8px rgba(45, 59, 151, 0.45);
}
.tab-panels { position: relative; }
.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}
.tab-panel.is-active {
  display: block;
  animation: tabFadeIn 0.35s ease forwards;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) { .tab-grid { grid-template-columns: 1fr; gap: 24px; } }
.tab-tag {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 500;
}
.tab-body h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 16px;
}
.tab-body p {
  color: var(--text-secondary);
  margin: 0 0 14px;
  font-size: 0.96rem;
  line-height: 1.7;
}
.tab-more {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-top: 10px;
}
.tab-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tab-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 4px;
  padding: 16px 14px;
}
.tab-stat:nth-child(even) { border-top-color: var(--accent-orange); }
.tab-stat .stat-num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent-cyan);
  margin: 0 0 4px;
  letter-spacing: -0.018em;
}
.tab-stat:nth-child(even) .stat-num { color: var(--accent-orange); }
.tab-stat > div:last-child {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ==========================================================================
   MOTION — scroll reveal + hero pulses + h2 underline draw
   ========================================================================== */
.reveal-target {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-target.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-target { opacity: 1; transform: none; transition: none; }
}

/* H2 cyan underline subtle pulse on the homepage section heads */
.home-hero-eyebrow,
.section-eyebrow,
.page-hero-eyebrow {
  position: relative;
  display: inline-block;
}
.home-hero-eyebrow::before,
.page-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent-cyan-bright);
  vertical-align: middle;
  margin-right: 12px;
  box-shadow: 0 0 8px rgba(45, 59, 151, 0.6);
  animation: eyebrowPulse 2.6s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 0.55; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.4); }
}

/* Hero starfield drift (subtle background motion) */
.home-hero-bg, .page-hero-bg {
  animation: heroSlowZoom 38s ease-in-out infinite alternate;
}
@keyframes heroSlowZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Page-hero grid layer — subtle slow drift */
.page-hero-grid {
  animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to { background-position: 28px 28px; }
}

/* Section-h2: a thin cyan accent on the underline border (animated reveal) */
.home-section h2,
.section-h2,
.engage-section h2,
.year-group h3 {
  position: relative;
}
.section-h2::after,
.home-section h2::after {
  content: "";
  position: absolute;
  inset: auto auto -1px 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, transparent 100%);
  transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.section-h2.is-revealed::after,
.home-section h2.is-revealed::after { width: 120px; }

/* Stat-num: a subtle accent glow */
.stat-num {
  transition: text-shadow 0.4s;
}
.stat-card:hover .stat-num,
.tab-stat:hover .stat-num {
  text-shadow: 0 0 12px rgba(45, 59, 151, 0.35);
}
.stat-card:nth-child(even):hover .stat-num,
.tab-stat:nth-child(even):hover .stat-num {
  text-shadow: 0 0 12px rgba(211, 49, 58, 0.4);
}

/* Cap-card subtle accent line on hover */
.cap-card { position: relative; overflow: hidden; }
.cap-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cap-card-orange::after { background: var(--accent-orange); }
.cap-card:hover::after { transform: scaleX(1); }

/* Smooth global scroll */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-hero-bg, .page-hero-bg, .page-hero-grid,
  .home-hero-eyebrow::before, .page-hero-eyebrow::before { animation: none !important; }
}

/* ==========================================================================
   PNT VIZ — interactive single-image pipeline diagram (Research page)
   ========================================================================== */
.pnt-viz {
  margin: 32px 0 40px;
  background: linear-gradient(180deg, #161B40 0%, #20275A 100%);
  border-radius: 10px;
  padding: 24px 18px 22px;
  box-shadow: 0 0 0 1px rgba(45, 59, 151, 0.18),
              0 16px 40px -16px rgba(22, 27, 64, 0.4);
  position: relative;
  overflow: hidden;
}
.pnt-viz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(45, 59, 151, 0.5) 50%, transparent 100%);
}
.pnt-viz-svg {
  width: 100%;
  height: auto;
  max-height: 460px;
  display: block;
}

/* Thumbnails above each stage */
.pnt-thumb-img {
  opacity: 0.7;
  filter: saturate(0.85) brightness(0.95);
  transition: opacity 0.35s, filter 0.35s;
}
.pnt-thumb-border {
  transition: stroke-opacity 0.3s, stroke-width 0.3s;
}
.pnt-thumb-link {
  transition: opacity 0.3s;
}
.pnt-node.is-active ~ .pnt-thumb,
.pnt-thumb.is-active .pnt-thumb-img {
  opacity: 1;
}
.pnt-thumb.is-active .pnt-thumb-img {
  opacity: 1;
  filter: saturate(1.1) brightness(1.05);
}
.pnt-thumb.is-active .pnt-thumb-border {
  stroke-opacity: 1;
  stroke-width: 2.2;
}
.pnt-thumb.is-active .pnt-thumb-link {
  opacity: 0.9;
}

/* Nodes */
.pnt-node { cursor: pointer; }
.pnt-node-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: pntPulse 2.4s ease-in-out infinite;
}
.pnt-node-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: pntSpin 18s linear infinite;
}
@keyframes pntPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.95); }
  50%      { opacity: 0.65; transform: scale(1.1); }
}
@keyframes pntSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.pnt-node-i {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  transition: font-size 0.3s, fill 0.3s;
}
.pnt-node-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  fill: #fff;
  pointer-events: none;
  transition: font-size 0.3s, fill 0.3s;
}
.pnt-node-sub {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  fill: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  pointer-events: none;
  transition: fill 0.3s;
}
.pnt-node[data-color="orange"] .pnt-node-sub { fill: rgba(255, 180, 100, 0.7); }
.pnt-flow-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  fill: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pnt-node-core {
  transition: r 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              stroke-width 0.3s;
}
.pnt-node.is-active .pnt-node-core {
  r: 26;
  stroke-width: 3;
}
.pnt-node.is-active .pnt-node-ring {
  opacity: 0.95;
  animation-duration: 6s;
}
.pnt-node.is-active .pnt-node-pulse {
  opacity: 0.85;
  animation-duration: 1.4s;
}
.pnt-node.is-active .pnt-node-name {
  font-size: 19px;
  fill: var(--accent-cyan-bright);
}
.pnt-node.is-active[data-color="orange"] .pnt-node-name {
  fill: #E0533D;
}
.pnt-node.is-active .pnt-node-sub {
  fill: rgba(255, 255, 255, 0.9);
}
.pnt-node:hover .pnt-node-core {
  r: 25;
}

/* Detail panel below */
.pnt-viz-panel {
  margin-top: 18px;
  padding: 16px 18px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(45, 59, 151, 0.22);
  border-radius: 6px;
  transition: border-color 0.3s, background 0.3s;
}
.pnt-viz-panel-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pnt-viz-panel-idx {
  color: var(--accent-cyan-bright);
  font-weight: 700;
  transition: color 0.3s;
}
.pnt-viz-panel[data-color="orange"] .pnt-viz-panel-idx { color: var(--accent-orange); }
.pnt-viz-panel-sep { color: rgba(255, 255, 255, 0.3); }
.pnt-viz-panel-total { color: rgba(255, 255, 255, 0.55); }
.pnt-viz-panel-hint {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.pnt-viz-panel-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 8px;
  letter-spacing: -0.01em;
  transition: color 0.3s;
}
.pnt-viz-panel-tags {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  letter-spacing: 0.02em;
  min-height: 2.6em;
}

@media (max-width: 640px) {
  .pnt-viz { padding: 16px 8px 14px; }
  .pnt-viz-panel-hint { display: none; }
  .pnt-viz-panel-name { font-size: 1.15rem; }
  .pnt-viz-panel-tags { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pnt-node-pulse, .pnt-viz-svg circle[fill] { animation: none !important; }
}

/* ==========================================================================
   PROFILE LINKS — LinkedIn / Google Scholar / Website on person pages
   Tight pill buttons with icon + label, clearly separated.
   ========================================================================== */
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
}
.profile-link:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-soft);
  transform: translateY(-1px);
}
.profile-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: var(--accent);
}
.profile-link-linkedin .profile-link-icon {
  background: #0a66c2;
}
.profile-link-scholar .profile-link-icon {
  background: #4285f4;
}
.profile-link-website .profile-link-icon {
  background: var(--accent-orange);
  font-size: 1rem;
}
.profile-link-label {
  font-family: var(--font-sans);
}

/* Nav-active underline animation */
.nav a {
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 12px 4px 12px;
  height: 1px;
  background: var(--accent-cyan-bright);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s;
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

/* ==========================================================================
   STICKY SECTION TAB NAV (homepage)
   The "tab bar" that lives below the hero and follows scroll.
   ========================================================================== */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 9;
  background: rgba(22, 27, 64, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(45, 59, 151, 0.18);
  box-shadow: 0 1px 0 rgba(45, 59, 151, 0.1), 0 8px 24px rgba(22, 27, 64, 0.25);
}
.section-nav::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(45, 59, 151, 0.5) 50%, transparent 100%);
}
.section-nav-inner {
  max-width: var(--maxw-home);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav-link {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding: 18px 16px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  position: relative;
  white-space: nowrap;
}
.section-nav-link:hover {
  color: #fff;
  background: rgba(45, 59, 151, 0.05);
}
.section-nav-link.is-active {
  color: var(--accent-cyan-bright);
  border-bottom-color: var(--accent-cyan-bright);
}
.section-nav-link.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  box-shadow: 0 0 10px rgba(45, 59, 151, 0.7);
  background: var(--accent-cyan-bright);
}
.section-nav-cta {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg-dark);
  background: var(--accent-cyan-bright);
  padding: 8px 16px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
.section-nav-cta:hover {
  background: #fff;
  transform: translateY(-1px);
  border-bottom: none;
}
@media (max-width: 760px) {
  .section-nav-inner { padding: 0 16px; }
  .section-nav-link { padding: 14px 11px; font-size: 0.72rem; letter-spacing: 0.05em; }
  .section-nav-cta { padding: 7px 12px; font-size: 0.7rem; }
}

/* ==========================================================================
   INLINE TEXT HIGHLIGHTS — bring key words forward, PPT-style
   ========================================================================== */
.hi-cyan {
  color: var(--accent-cyan-bright);
  font-weight: 700;
}
.hi-orange {
  color: var(--accent-orange);
  font-weight: 700;
}
.hi-cyan-text { color: var(--accent); font-weight: 600; }
.hi-orange-text { color: #C02A33; font-weight: 600; }
.home-hero .hi-cyan, .home-hero .hi-orange,
.home-contact-bar .hi-cyan, .home-contact-bar .hi-orange { font-weight: 700; }
.hi-line { display: inline; }

/* Hero title — PUMP it. Stronger size + emphasis */
.home-hero-title {
  font-size: 3.4rem;
  letter-spacing: -0.028em;
  font-weight: 700;
}
@media (max-width: 760px) { .home-hero-title { font-size: 2.1rem; } }

/* Hero sub — make the strong phrases bigger and brighter */
.home-hero-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
}
.home-hero-sub strong {
  color: #fff;
  font-weight: 600;
}

/* Stat-partner — make the brand name MUCH more prominent (was small gray) */
.stat-partner {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.012em;
  position: relative;
  padding-bottom: 12px;
}
.stat-partner::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 26px;
  height: 2px;
  background: var(--accent-cyan);
}
.stat-card:nth-child(even) .stat-partner::after { background: var(--accent-orange); }

/* Partner logo on stat-card (image replaces text when available)
   Uses a fixed bounding box so every logo occupies the same visual real estate,
   regardless of native aspect ratio (Google wide vs. Tencent square vs. HKSI tall). */
.stat-partner.has-logo {
  height: 72px;
  width: 100%;
  max-width: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 14px;
  box-sizing: content-box;
}
.partner-logo {
  max-height: 44px;
  max-width: 140px;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
}
.has-logo .stat-partner-text {
  display: none;
}
/* If image fails to load and is hidden by onerror, fall back to text */
.has-logo .partner-logo[style*="display: none"] + .stat-partner-text,
.has-logo .partner-logo[style*="display:none"] + .stat-partner-text {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.25rem;
}

/* Per-logo size tuning — calibrated to the TRIMMED mark dimensions so each
   logo occupies roughly equal visual area regardless of its native aspect
   ratio. Source images are auto-trimmed of transparent / white margins;
   widths below cap the WIDE marks, heights cap the SQUARE / TALL marks. */
.partner-logo {
  max-width: 130px;
  width: auto;
  height: auto;
}

/* Calibrated so every mark "weighs" about the same. Square logos shrink
   their height (so they don't dominate), ultra-wide wordmarks get more
   height so the text stays readable. */
.partner-logo[alt="HUAWEI"]      { max-height: 52px; max-width: 110px; }  /* 1:1 square — bumped */
.partner-logo[alt="Meituan"]     { max-height: 38px; max-width: 90px; }   /* 1:1 square */
.partner-logo[alt="Hotel ICON"]  { max-height: 44px; max-width: 80px; }   /* 1:1.2 tall */
.partner-logo[alt="SAIC Motor"]  { max-height: 58px; max-width: 160px; }  /* 1.75:1 — bumped further */
.partner-logo[alt="NYU Langone Health"],
.partner-logo[alt="NYU Langone"] { max-height: 52px; max-width: 180px; }  /* 2.4:1 — bumped further */
.partner-logo[alt="AIROHA"]      { max-height: 28px; max-width: 110px; }  /* 2.8:1 */
.partner-logo[alt="Google"]      { max-height: 28px; max-width: 120px; }  /* 3:1 */
.partner-logo[alt="Hong Kong Sports Institute"],
.partner-logo[alt="HKSI"]        { max-height: 28px; max-width: 130px; }  /* 3.5:1 */
.partner-logo[alt="MediaTek"]    { max-height: 26px; max-width: 140px; }  /* 4:1 */
.partner-logo[alt="OPPO"]        { max-height: 26px; max-width: 140px; }  /* 4.2:1 */
.partner-logo[alt="HONOR"]       { max-height: 26px; max-width: 150px; }  /* 7:1 ultra-wide — keep text readable */
.partner-logo[alt="Tencent"]     { max-height: 26px; max-width: 150px; }  /* 7.4:1 ultra-wide — keep text readable */

/* ==========================================================================
   HERO CONSTELLATION — satellite network overlay
   ========================================================================== */
.hero-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.net-lines line {
  opacity: 0.18;
  animation: lineFlicker 6s ease-in-out infinite;
}
.net-lines line:nth-child(3n)   { animation-delay: 1.2s; }
.net-lines line:nth-child(3n+1) { animation-delay: 2.4s; }
.net-lines line:nth-child(3n+2) { animation-delay: 3.6s; }
@keyframes lineFlicker {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.35; }
}
.net-dots circle {
  opacity: 0.55;
  filter: drop-shadow(0 0 4px rgba(45, 59, 151, 0.8));
  animation: dotPulse 3.5s ease-in-out infinite;
}
.net-dots circle:nth-child(2n)   { animation-delay: 0.7s; }
.net-dots circle:nth-child(3n)   { animation-delay: 1.4s; }
.net-dots circle:nth-child(5n)   { animation-delay: 2.1s; }
.net-dots circle:nth-child(7n)   { animation-delay: 2.8s; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; r: 2px; }
  50%      { opacity: 1;   r: 3.2px; }
}
.net-active circle:first-child {
  filter: drop-shadow(0 0 12px rgba(211, 49, 58, 0.9));
  animation: activePulse 2s ease-in-out infinite;
}
.net-active circle:last-child {
  opacity: 0.6;
  animation: activeRing 2s ease-out infinite;
  transform-origin: 780px 400px;
}
@keyframes activePulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@keyframes activeRing {
  0%   { opacity: 0.8; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(3); }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-constellation * { animation: none !important; }
}

/* ==========================================================================
   HERO LIVE TICKER — bottom strip showing "lab status" / coordinates
   ========================================================================== */
.hero-ticker {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(22, 27, 64, 0) 0%, rgba(22, 27, 64, 0.85) 70%);
  padding: 14px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: flex-start;
  border-top: 1px solid rgba(45, 59, 151, 0.18);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-ticker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
}
.hero-ticker-label {
  color: rgba(255, 255, 255, 0.45);
}
.hero-ticker-val {
  color: var(--accent-cyan-bright);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-ticker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.85);
  animation: dotBlink 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes dotBlink {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 4px rgba(46, 204, 113, 0.6); }
  50%      { opacity: 1; box-shadow: 0 0 14px rgba(46, 204, 113, 1); }
}
@media (max-width: 760px) {
  .hero-ticker { gap: 14px; font-size: 0.66rem; padding: 12px 18px; }
  .home-hero-inner { padding-bottom: 100px; }
}

/* ==========================================================================
   CARD NEON HOVER — cyan glow + 3D lift for tech vibes
   ========================================================================== */
.stat-card, .cap-card, .work-card, .leader-card, .tab-stat, .lane-card, .pub-chart-card {
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.32s;
}
.stat-card:hover,
.cap-card:hover,
.work-card:hover,
.leader-card:hover,
.tab-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 59, 151, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(45, 59, 151, 0.4),
    0 12px 36px -8px rgba(45, 59, 151, 0.2),
    0 4px 12px -4px rgba(22, 27, 64, 0.12);
}
.stat-card:nth-child(even):hover,
.cap-card-orange:hover,
.leader-card-orange:hover {
  border-color: rgba(211, 49, 58, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(211, 49, 58, 0.4),
    0 12px 36px -8px rgba(211, 49, 58, 0.2),
    0 4px 12px -4px rgba(22, 27, 64, 0.12);
}

/* ==========================================================================
   STAT-NUM neon text glow when revealed
   ========================================================================== */
.stat-num {
  text-shadow: 0 0 24px rgba(45, 59, 151, 0);
  transition: text-shadow 0.6s ease-out;
}
.stat-card.is-revealed .stat-num,
.stat-card:hover .stat-num {
  text-shadow: 0 0 22px rgba(45, 59, 151, 0.35);
}
.stat-card:nth-child(even).is-revealed .stat-num,
.stat-card:nth-child(even):hover .stat-num {
  text-shadow: 0 0 22px rgba(211, 49, 58, 0.42);
}

/* Hero key-word glow */
.home-hero-title .hi-cyan {
  text-shadow: 0 0 28px rgba(45, 59, 151, 0.55);
}
.home-hero-title .hi-orange {
  text-shadow: 0 0 28px rgba(211, 49, 58, 0.55);
}

/* ==========================================================================
   CAPABILITY ICONS — small animated SVGs above each cap-num
   ========================================================================== */
.cap-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  color: var(--accent-cyan);
  filter: drop-shadow(0 0 8px rgba(45, 59, 151, 0.35));
}
.cap-card-orange .cap-icon {
  color: var(--accent-orange);
  filter: drop-shadow(0 0 8px rgba(211, 49, 58, 0.4));
}

/* 01 Orbit — satellite spinning around center node */
.cap-icon-orbit .orbit-dot {
  transform-origin: 24px 24px;
  animation: orbitSpin 4s linear infinite;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* 02 Rings — concentric signal pulses */
.cap-icon-ring .ring {
  transform-origin: 24px 24px;
  animation: ringPulse 2.4s ease-out infinite;
  opacity: 0;
}
.cap-icon-ring .r1 { animation-delay: 0s; }
.cap-icon-ring .r2 { animation-delay: 0.6s; }
.cap-icon-ring .r3 { animation-delay: 1.2s; }
@keyframes ringPulse {
  0%   { transform: scale(0.4); opacity: 0; }
  25%  { opacity: 0.95; }
  100% { transform: scale(1.0); opacity: 0; }
}

/* 03 Bars — audio-meter style signal indicator */
.cap-icon-bars .bar {
  transform-origin: center bottom;
  animation: barOsc 1.6s ease-in-out infinite;
}
.cap-icon-bars .b1 { animation-delay: 0s;    }
.cap-icon-bars .b2 { animation-delay: 0.15s; }
.cap-icon-bars .b3 { animation-delay: 0.3s;  }
.cap-icon-bars .b4 { animation-delay: 0.45s; }
.cap-icon-bars .b5 { animation-delay: 0.6s;  }
@keyframes barOsc {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1);   }
}

/* 04 Shield — pulsing inner arc */
.cap-icon-shield .shield-arc {
  transform-origin: 24px 24px;
  animation: shieldPulse 2.2s ease-in-out infinite;
}
@keyframes shieldPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* ==========================================================================
   CARD SCANLINE SWEEP — cyan/orange gradient sweep when card reveals
   ========================================================================== */
.stat-card, .cap-card, .work-card, .leader-card, .lane-card, .tab-stat, .pub-chart-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before,
.cap-card::before,
.work-card::before,
.leader-card::before,
.lane-card::before,
.tab-stat::before,
.pub-chart-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 35%,
    rgba(45, 59, 151, 0.28) 50%,
    transparent 65%,
    transparent 100%);
  transform: translateX(-110%);
  opacity: 0;
}
.stat-card:nth-child(even)::before,
.cap-card-orange::before,
.leader-card-orange::before,
.tab-stat:nth-child(even)::before {
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 35%,
    rgba(211, 49, 58, 0.28) 50%,
    transparent 65%,
    transparent 100%);
}
.stat-card.is-revealed::before,
.cap-card.is-revealed::before,
.work-card.is-revealed::before,
.leader-card.is-revealed::before,
.lane-card.is-revealed::before,
.tab-stat.is-revealed::before,
.pub-chart-card.is-revealed::before {
  animation: scanSweep 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes scanSweep {
  0%   { transform: translateX(-110%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(110%);  opacity: 0; }
}
/* Card inner content stays above the scanline */
.stat-card > *, .cap-card > *, .work-card > *,
.leader-card > *, .lane-card > *, .tab-stat > *,
.pub-chart-card > * { position: relative; z-index: 1; }

/* ==========================================================================
   3D MOUSE TILT — JS-driven; just provide the perspective + transition base
   ========================================================================== */
.cap-grid, .stat-grid, .work-grid, .leadership-grid, .lane-grid {
  perspective: 1100px;
}
.stat-card, .cap-card, .work-card, .leader-card, .lane-card, .tab-stat {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Typewriter caret on ticker values */
.hero-ticker-val.is-typing::after {
  content: "_";
  color: var(--accent-cyan-bright);
  margin-left: 1px;
  animation: caretBlink 0.5s steps(1) infinite;
}
@keyframes caretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.stat-num {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.stat-label {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
}

/* Section h2 inline highlights need slightly larger */
.section-h2 { font-size: 1.8rem; }
@media (max-width: 760px) { .section-h2 { font-size: 1.45rem; } }

/* ==========================================================================
   TAB MEDIA — case studies now have a photo on the left
   ========================================================================== */
.tab-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) { .tab-grid { grid-template-columns: 1fr; } }
.tab-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-dark);
  aspect-ratio: 4 / 3;
}
.tab-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Portrait variant — for tall product shots (Stairio etc.) — show whole image */
.tab-media-portrait {
  background: linear-gradient(180deg, #f6f9fb 0%, #e8eef3 100%);
  aspect-ratio: 4 / 3;
}
.tab-media-portrait img {
  object-fit: contain;
  padding: 18px 24px 36px;
}
.tab-media-portrait .tab-media-cap {
  background: linear-gradient(180deg, rgba(22,27,64,0) 0%, rgba(22,27,64,0.92) 80%);
  color: #fff;
}
.tab-panel.is-active .tab-media img {
  transform: scale(1.04);
}
.tab-media-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 18px 14px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(0deg, rgba(22, 27, 64, 0.85) 0%, rgba(22, 27, 64, 0) 100%);
}

/* Tab body upgrades: bigger h3, mini-stats grid */
.tab-body h3 {
  font-size: 1.7rem;
  letter-spacing: -0.018em;
  margin-bottom: 18px;
}
@media (max-width: 760px) { .tab-body h3 { font-size: 1.35rem; } }
.tab-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}
.tab-mini-stats > div {
  border-left: 2px solid var(--accent-cyan);
  padding: 4px 0 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tab-mini-stats > div:nth-child(even) { border-left-color: var(--accent-orange); }
.tab-mini-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.tab-mini-stats > div:nth-child(odd) .tab-mini-num { color: var(--accent); }
.tab-mini-stats > div:nth-child(even) .tab-mini-num { color: #B12A32; }
.tab-mini-stats > div span:last-child {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* Tab nav buttons — pump strength */
.tab-btn {
  font-size: 0.94rem;
  padding: 16px 26px;
  letter-spacing: 0.08em;
}
.tab-btn.is-active { color: var(--text); }

/* Record-grid: pump the year */
.rec-year {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-cyan);
  min-width: 78px;
}

/* Tab body keeps padding aligned to image */
.tab-body { padding-top: 4px; }
.tab-tag {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--accent);
}
.tab-panel:nth-child(even) .tab-tag,
.tab-panel[data-panel="meituan"] .tab-tag,
.tab-panel[data-panel="stairio"] .tab-tag { color: #B12A32; }

/* ==========================================================================
   IMAGE GRID — figure-based gallery (research / projects / partnerships)
   ========================================================================== */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 24px 0 36px;
}
.image-grid-2 { grid-template-columns: repeat(2, 1fr); }
.image-grid-3 { grid-template-columns: repeat(3, 1fr); }
.image-grid-4 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .image-grid-3, .image-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .image-grid, .image-grid-2, .image-grid-3, .image-grid-4 { grid-template-columns: 1fr; }
}
.image-grid figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.image-grid figure:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 20px rgba(22, 27, 64, 0.08);
}
.image-grid figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--bg-soft);
}
.image-grid figcaption {
  padding: 12px 14px 14px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.img-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-right: 6px;
}
.image-grid figure:nth-child(even) .img-tag { color: #B12A32; }

/* ==========================================================================
   NEWS CARDS — bigger image, bolder title, grid layout
   ========================================================================== */
.news-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.news-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.news-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 20px rgba(22, 27, 64, 0.08);
}
.news-card-link {
  display: block;
  color: var(--text);
  text-decoration: none;
  border-bottom: none;
}
.news-card-link:hover { border-bottom: none; }
.news-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-dark);
  position: relative;
}
.news-card-img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background: linear-gradient(0deg, rgba(22, 27, 64, 0.4) 0%, rgba(22, 27, 64, 0) 100%);
}
.news-card-body {
  padding: 18px 20px 22px;
}
.news-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.news-card-date {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  font-weight: 600;
}
.news-card-cat {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
}
.news-card-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0 0 10px;
  color: var(--text);
  transition: color 0.18s;
}
.news-card:hover .news-card-title { color: var(--accent); }
.news-card-summary {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.news-card-textonly .news-card-body { padding-top: 20px; }
.news-card-textonly::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, transparent 60%);
}

/* ==========================================================================
   PUBLICATIONS — animated chart strip above the filter
   ========================================================================== */
.pub-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin: 8px 0 32px;
}
.pub-charts-3 {
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 980px) {
  .pub-charts, .pub-charts-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pub-charts, .pub-charts-3 { grid-template-columns: 1fr; }
}
.pub-chart-card:nth-child(3) { border-top-color: var(--accent); }
.pub-chart-card:nth-child(3) .pub-chart-title { color: var(--accent); }

/* ==========================================================================
   FUNDING-HERO (Projects page) — big funding stat strip
   ========================================================================== */
.funding-hero {
  margin: 0 0 32px;
}
.funding-hero .stat-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .funding-hero .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .funding-hero .stat-grid { grid-template-columns: 1fr; } }
.funding-hero .stat-card {
  background: #fff;
}
.funding-hero .stat-num {
  font-size: 2.2rem;
}
.pub-chart-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 6px;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
}
.pub-chart-card:nth-child(even) { border-top-color: var(--accent-orange); }
.pub-chart-title {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
}
.pub-chart-card:nth-child(even) .pub-chart-title { color: #B12A32; }
.pub-chart-headline {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
  margin-bottom: 16px;
}
.pub-chart-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 200px;
}
.pub-chart-canvas-wrap canvas {
  max-height: 240px;
}
.pub-chart-footnote {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 12px;
}

/* ===== Light header (warm ivory) — logos blend, dark ink text ===== */
.site-header {
  background: rgba(250, 247, 241, 0.92);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.site-header::after {
  background: linear-gradient(90deg, transparent 0%, rgba(45, 59, 151, 0.16) 50%, transparent 100%);
}
.brand-link, .brand-name, .brand-wordmark-name { color: var(--text); }
.brand-sub, .brand-wordmark-tag { color: var(--text-secondary); border-left-color: var(--border); }
.brand-logo-ipnl, .brand-logo-polyu { background: transparent; padding: 0; border-radius: 6px; }
.nav a { color: var(--text-secondary); }
.nav-toggle { border-color: var(--border); color: var(--text); }
.lang-switch { border-left-color: var(--border); }
.lang-link { color: var(--text-tertiary); }