/* =========================================================================
   Jiang Lab @ SISU — stylesheet
   Built on the SISU Visual Identity System:
     - Primary: SISU Blue (sea & sky)
     - Accent: bright yellow (auxiliary color from SISU VI)
   ========================================================================= */

:root {
  --sisu-blue:      #003f88;  /* SISU Blue, deep */
  --sisu-blue-dk:   #002a5c;
  --sisu-blue-soft: #e6eef7;
  --sisu-yellow:    #fcb813;
  --ink:            #1a1a1a;
  --body:           #333333;
  --muted:          #5a5a5a;
  --line:           #cccccc;
  --line-soft:      #e8e8e8;
  --bg:             #ffffff;
  --bg-soft:        #f5f7fa;
  --nav-bg:         var(--sisu-blue);
  --link:           var(--sisu-blue);
  --link-visited:   var(--sisu-blue-dk);
  --serif:          "Source Han Serif SC", "Songti SC", "Noto Serif SC", Georgia, "Times New Roman", serif;
  --sans:           "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
}

a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { color: var(--sisu-blue-dk); border-bottom-color: var(--sisu-yellow); }
a:visited { color: var(--link-visited); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.6em;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }

/* ── Sticky header wrapper (desktop only) ────────────────
   Wraps #brand-strip + #nav-bar so the full header (logo row +
   blue nav bar) stays pinned to the top while scrolling. Mobile
   keeps the original static layout — the hamburger pattern doesn't
   need stickiness and we want phone behaviour unchanged. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
}

/* ── Top brand strip ─────────────────────────────────────── */
#brand-strip {
  background: var(--bg);
  padding: 20px 0;
  border-bottom: 3px solid var(--sisu-blue);
}
.brand-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand-sisu img { height: 56px; width: auto; }
.brand-divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  margin: 4px 8px;
}
.brand-lab {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.brand-lab:hover { color: var(--sisu-blue); border: none; }
.brand-lab:visited { color: var(--ink); }
.brand-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-lang {
  font-size: 0.9375rem;
}
.brand-lang {
  color: var(--sisu-blue);
  border-bottom: 1px solid var(--sisu-blue);
  padding-bottom: 1px;
}

/* Dark mode toggle (Phosphor moon / sun) */
.dark-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s, color 0.15s;
  color: var(--ink);
  font-size: 16px;
}
.dark-toggle:hover { border-color: var(--sisu-blue); color: var(--sisu-blue); }
.dark-toggle i { font-size: 16px; line-height: 1; }

/* ── Top nav (blue bar) ──────────────────────────────────── */
#nav-bar { background: var(--nav-bg); }
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
}
#nav-bar ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex: 1;
}
#nav-bar li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  color: #fff;
  border: none;
  font-size: 0.9375rem;
}
#nav-bar li a:hover {
  background: var(--sisu-blue-dk);
  color: #fff;
  border: none;
}
#nav-bar li.active a {
  background: var(--sisu-blue-dk);
  box-shadow: inset 0 -3px 0 var(--sisu-yellow);
}
#nav-bar .home-icon { display: inline-block; font-size: 0.95rem; }
#nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  padding: 12px 20px;
  cursor: pointer;
  margin-left: auto;
}

/* ── Lab intro (home only) — replaces the old blue #hero block.
   Lives inside .main-col under the PI card; a yellow accent rule
   marks the visual transition from PI bio to lab mission. */
.lab-intro {
  margin: 36px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.lab-intro::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 80px;
  height: 4px;
  background: var(--sisu-yellow);
}
.lab-intro-title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 3.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--sisu-blue);
  margin: 0 0 12px;
  font-weight: 600;
  max-width: 720px;
}
.lab-intro-sub {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.75;
  color: var(--body);
  margin: 0;
  max-width: 720px;
}
body.dark .lab-intro { border-top-color: var(--line); }
body.dark .lab-intro-title { color: #6ea8ff; }

/* ── Main container ──────────────────────────────────────── */
#main { max-width: 1240px; margin: 0 auto; padding: 40px 24px 64px; }

.page-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
.page-grid .main-col h1:first-child,
.page-grid .main-col h2:first-child { margin-top: 0; }
.page-single .main-col { max-width: 920px; }

/* CSS-Grid intrinsic-min-content fix: a `1fr` track defaults to
   minmax(auto, 1fr), which lets a child's max-content (e.g. the
   funder marquee track with `width: max-content`) push the column
   wider than the available space and shove the sidebar out of view.
   Explicit `min-width: 0` lets `1fr` honour its share. */
.page-grid > * { min-width: 0; }
.main-col      { min-width: 0; }
.funders-marquee { max-width: 100%; }

/* PI card on home — with photo. Lives at the top of .main-col since
   the homepage now leads with the PI block, so no top margin. */
.pi-card {
  margin-top: 0;
  padding: 24px;
  background: var(--bg-soft);
  border-left: 4px solid var(--sisu-blue);
}
.pi-card-inner {
  display: grid;
  grid-template-columns: clamp(88px, 13vw, 120px) 1fr;  /* fluid photo column */
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
.pi-photo {
  width: clamp(88px, 13vw, 120px);
  height: clamp(88px, 13vw, 120px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--sisu-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pi-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pi-photo .photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3rem);    /* follows the fluid photo size */
  font-weight: 600;
  color: var(--sisu-blue);
}
.pi-card .pi-name {
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--ink);
  font-weight: 600;
}
.pi-card .pi-meta { font-size: 0.9375rem; color: var(--muted); margin-top: 4px; }
.pi-card .pi-links {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pi-card .pi-links a {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border: 1.5px solid var(--sisu-blue);
  color: var(--sisu-blue);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  margin-right: 0;
}
.pi-card .pi-links a:hover {
  background: var(--sisu-blue);
  color: #fff;
  border-color: var(--sisu-blue);
}

.pi-bio {
  margin-top: 24px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--body);
}
.pi-bio strong { color: var(--ink); }
body.dark .pi-bio { color: var(--body); }

/* ── Sidebar (Latest updates card stack) ─────────────────── */
#sidebar {
  background: var(--bg-soft);
  padding: 22px 20px;
  border-top: 3px solid var(--sisu-blue);
}
#sidebar .sidebar-news-heading {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.news-mini-card {
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--bg);
  border-left: 3px solid var(--sisu-blue);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s, transform 0.15s;
}
.news-mini-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.news-mini-card.featured {
  border-left-color: var(--sisu-yellow);
  border-left-width: 4px;
  background: linear-gradient(to right, rgba(252,184,19,0.08), var(--bg) 60%);
}
.news-mini-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  background: var(--sisu-blue);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.news-mini-card.featured .news-mini-tag {
  background: var(--sisu-yellow);
  color: var(--ink);
}
.news-mini-title {
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 6px;
}
.news-mini-summary {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 10px;
}
.news-mini-more {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sisu-blue);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.news-mini-more:hover { color: var(--sisu-blue-dk); }

#sidebar .full-link {
  display: inline-block;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  width: 100%;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sisu-blue);
}

.funders-row {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 2px solid var(--sisu-blue);
  display: block;
}
.funders-row .label {
  display: block;
  font-family: var(--serif);
  font-size: 0.875rem;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 22px;
}
/* Marquee container: hard-clip overflow only. The earlier 32px gradient
   mask faded the first/last card's content into invisibility at the
   edges — text-only cards like "National Language Commission" had their
   left character cut. With overflow:hidden alone, cards remain fully
   opaque inside the visible window and just disappear instantly past the
   edge — no perceived cropping at any moment of the loop. The duplicate
   set in .funders-dup is hidden on mobile / reduced-motion so users
   without animation only see each funder once. */
.funders-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}
.funders-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
}
.funders-track-animated {
  animation: funder-scroll 30s linear infinite;
}
.funders-marquee:hover .funders-track-animated {
  animation-play-state: paused;
}
.funders-dup { display: contents; }
@keyframes funder-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reduced-motion users: drop animation, hide duplicate set, center wrap */
@media (prefers-reduced-motion: reduce) {
  .funders-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    overflow: visible;
  }
  .funders-track-animated { animation: none; }
  .funders-track {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .funders-dup { display: none; }
}

.funder-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  min-width: 200px;
  padding: 22px 32px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  flex-shrink: 0;
}
.funder-card:hover {
  border-color: var(--sisu-blue);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.funder-card a, .funder-card > span { display: inline-flex; align-items: center; }
.funder-card img {
  max-height: 84px;   /* enlarged from 72 — funder logos are the focal point */
  max-width: 260px;
  width: auto;
  display: block;
  object-fit: contain;
}
.funder-text {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--sisu-blue);
  padding: 0 4px;
  text-align: center;
  line-height: 1.4;
}

/* ── Collaborator cards (on People page) ──────────────── */
.collab-heading {
  border-bottom-color: var(--sisu-yellow) !important;
}
.collab-heading::after {
  background: var(--sisu-blue) !important;
}
.collab-heading.emerging-heading {
  border-bottom-color: var(--line) !important;
}
.collab-heading.emerging-heading::after {
  background: var(--muted) !important;
}
.collab-intro {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 6px 0 18px;
  font-style: italic;
}
.collab-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.collab-card {
  background: var(--bg);
  border-left: 4px solid var(--sisu-blue);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s;
}
.collab-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.emerging-list .collab-card {
  border-left-color: var(--sisu-yellow);
  padding: 12px 16px;
}
.collab-name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}
.collab-name a {
  color: var(--ink);
  border: none;
}
.collab-name a:hover {
  color: var(--sisu-blue);
  border: none;
}
.collab-affil {
  font-size: 0.8125rem;
  color: var(--sisu-blue);
  margin-top: 2px;
  font-weight: 600;
}
.collab-bio {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--body);
  margin: 10px 0 0;
}

/* ── People page (grid of clickable cards that expand) ───── */
.people-group-heading {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 36px 0 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sisu-blue);
  position: relative;
}
.people-group-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 50px;
  height: 2px;
  background: var(--sisu-yellow);
}
.people-group-heading.alumni-heading {
  border-bottom-color: var(--muted);
}
.people-group-heading.alumni-heading::after {
  background: var(--muted);
}
.alumni-placeholder {
  font-size: 0.9375rem;
  color: var(--muted);
  font-style: italic;
  padding: 12px 0;
}

/* Placeholder cards for empty role slots (Student 1, 2, 3 etc.) */
.person-card.person-placeholder {
  cursor: default;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  opacity: 0.85;
}
.person-card.person-placeholder:hover {
  border-color: var(--line);
  box-shadow: none;
}
.person-placeholder-inner {
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.person-placeholder .person-photo {
  background: transparent !important;
  border: 1px dashed var(--line);
}
.placeholder-dim {
  color: var(--muted) !important;
  font-weight: 400 !important;
  font-family: var(--sans) !important;
  font-size: 2.5rem !important;
}
.placeholder-dim-text { color: var(--muted) !important; }
.placeholder-tag {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sisu-yellow) !important;
  background: rgba(252,184,19,0.08);
  padding: 2px 10px;
  border-radius: 10px;
  display: inline-block;
  margin: 4px auto;
}
body.dark .person-card.person-placeholder { background: #15181e; }

/* ── PI card (always expanded on People page) ─────────── */
.person-card.person-pi {
  grid-column: 1 / -1;      /* spans full grid width */
  border: 1px solid var(--line-soft);
  background: var(--bg-soft);
  padding: 24px 28px;
  display: block;
}
.person-card.person-pi:hover { border-color: var(--sisu-blue); }
.person-pi-header {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.person-card.person-pi .person-photo { width: 120px; height: 120px; }
.person-card.person-pi .person-photo .photo-placeholder { font-size: 3rem; }
.person-card.person-pi .person-name {
  font-size: 1.25rem;
  text-align: left;
  margin-bottom: 6px;
}
.person-card.person-pi .person-title,
.person-card.person-pi .person-affil { text-align: left; }
.person-card.person-pi .person-details {
  display: block;
  padding: 0;
  margin: 0;
  border-top: none;
  animation: none;
}

/* Education as a clean bulleted list */
.person-education-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 14px;
}
.person-education-list li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--body);
  padding-left: 14px;
  position: relative;
  margin-bottom: 2px;
}
.person-education-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--sisu-blue);
  font-weight: 700;
}

/* Alumni cards a touch lighter visually */
.person-card.person-alumni .person-photo { background: #eef2f7; }
.person-card.person-alumni .person-photo .photo-placeholder { color: var(--muted); }

/* ── Person-detail link badges: distinct colors per service ─────── */
.person-links a.ln-home    { border-color: var(--sisu-blue); color: var(--sisu-blue); }
.person-links a.ln-home:hover { background: var(--sisu-blue); color: #fff; }
.person-links a.ln-orcid   { border-color: #a6ce39; color: #6a8423; }
.person-links a.ln-orcid:hover { background: #a6ce39; color: #fff; border-color: #a6ce39; }
.person-links a.ln-scholar { border-color: #4285f4; color: #1a73e8; }
.person-links a.ln-scholar:hover { background: #4285f4; color: #fff; border-color: #4285f4; }
.person-links a.ln-rg      { border-color: #00ccbb; color: #008874; }
.person-links a.ln-rg:hover { background: #00ccbb; color: #fff; border-color: #00ccbb; }
.person-links a.ln-mail    { border-color: #888; color: #555; }
.person-links a.ln-mail:hover { background: #555; color: #fff; border-color: #555; }
/* Home-page PI links use the same scheme */
.pi-card .pi-links a.ln-home    { border-color: var(--sisu-blue); color: var(--sisu-blue); }
.pi-card .pi-links a.ln-home:hover { background: var(--sisu-blue); color: #fff; }
.pi-card .pi-links a.ln-orcid   { border-color: #a6ce39; color: #6a8423; }
.pi-card .pi-links a.ln-orcid:hover { background: #a6ce39; color: #fff; border-color: #a6ce39; }
.pi-card .pi-links a.ln-scholar { border-color: #4285f4; color: #1a73e8; }
.pi-card .pi-links a.ln-scholar:hover { background: #4285f4; color: #fff; border-color: #4285f4; }
.pi-card .pi-links a.ln-rg      { border-color: #00ccbb; color: #008874; }
.pi-card .pi-links a.ln-rg:hover { background: #00ccbb; color: #fff; border-color: #00ccbb; }
.pi-card .pi-links a.ln-mail    { border-color: #888; color: #555; }
.pi-card .pi-links a.ln-mail:hover { background: #555; color: #fff; border-color: #555; }

/* Dark mode tweaks for badges */
body.dark .person-links a.ln-orcid,
body.dark .pi-card .pi-links a.ln-orcid { color: #a6ce39; }
body.dark .person-links a.ln-scholar,
body.dark .pi-card .pi-links a.ln-scholar { color: #6ea8ff; border-color: #6ea8ff; }
body.dark .person-links a.ln-rg,
body.dark .pi-card .pi-links a.ln-rg { color: #00ccbb; }
body.dark .person-links a.ln-mail,
body.dark .pi-card .pi-links a.ln-mail { color: var(--body); border-color: var(--line); }
body.dark .person-card.person-alumni .person-photo { background: #1e242b; }

/* Secondary title row (e.g. "Vice Dean, …" under "Professor · …") */
.person-title-secondary {
  font-weight: 500 !important;
  color: var(--muted) !important;
  margin-top: 2px;
}
.pi-card .pi-meta-role-extra {
  color: var(--muted);
  font-size: 0.9375rem;
}
body.dark .person-title-secondary { color: var(--muted) !important; }

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.person-card {
  position: relative;  /* anchor for .role-badge */
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.person-card:hover {
  border-color: var(--sisu-blue);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Role badge (PhD / MA / Undergrad) — top-right of student cards */
.role-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.role-badge.role-phd       { background: var(--sisu-blue); color: #fff; }
.role-badge.role-master    { background: var(--bg); color: var(--sisu-blue); border: 1px solid var(--sisu-blue); }
.role-badge.role-undergrad { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }
body.dark .role-badge.role-master    { background: var(--bg-soft); color: #6ea8ff; border-color: #6ea8ff; }
body.dark .role-badge.role-undergrad { background: var(--bg-soft); border-color: var(--line); }

.person-avatar-btn {
  background: none;
  border: none;
  padding: 18px;
  width: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  color: inherit;
  text-align: center;
  transition: background 0.15s;
}
.person-avatar-btn:hover { background: var(--bg-soft); }

.person-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sisu-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.person-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.person-photo .photo-placeholder {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--sisu-blue);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.person-meta { width: 100%; }
.person-name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.person-title {
  font-size: 0.8125rem;
  color: var(--sisu-blue);
  font-weight: 600;
  margin-bottom: 2px;
}
.person-affil {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.person-toggle-hint {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--muted);
  transition: transform 0.2s;
}
.person-card.expanded .person-toggle-hint {
  transform: rotate(180deg);
}

.person-details {
  display: none;
  padding: 0 18px 18px;
  border-top: 1px solid var(--line-soft);
  margin-top: 0;
}
.person-card.expanded .person-details {
  display: block;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.person-details p {
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 6px 0 12px;
  color: var(--body);
}
.person-row-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sisu-blue);
  margin-top: 12px;
}
.person-bio {
  margin-top: 14px !important;
  margin-bottom: 1em;  /* preserve UA <p> bottom margin (used to be a <p>; div has none by default) */
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.person-links a {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 10px;
  border: 1.5px solid var(--sisu-blue);
  color: var(--sisu-blue);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}
.person-links a:hover {
  background: var(--sisu-blue);
  color: #fff;
  border-color: var(--sisu-blue);
}

/* ── News page Join-Us filter view ───────────────────────── */
.news-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 8px 0 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sisu-yellow);
  flex-wrap: wrap;
}
.news-filter-title {
  font-family: var(--serif);
  font-size: 1.875rem;
  color: var(--sisu-blue);
  margin: 0;
  font-weight: 600;
}
.news-filter-clear {
  font-size: 0.875rem;
  color: var(--muted);
  border: none;
  font-weight: 600;
}
.news-filter-clear:hover { color: var(--sisu-blue); border: none; }
.news-filter-empty {
  color: var(--muted);
  font-style: italic;
  padding: 32px 0;
  text-align: center;
}

.join-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.join-us-card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--sisu-blue);
  border-radius: 6px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s, transform 0.15s, border-left-color 0.18s;
}
.join-us-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  border-left-color: var(--sisu-yellow);
}
.join-us-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--sisu-yellow);
  color: var(--ink);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.join-us-card h3 {
  font-family: var(--serif);
  color: var(--sisu-blue);
  font-size: 1.125rem;
  margin: 0 0 10px;
}
.join-us-summary {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 500;
}
.join-us-body {
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0 0 12px;
  color: var(--body);
}
.join-us-more-wrap { margin: auto 0 0; }
.join-us-more {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sisu-blue);
  border: none;
}
.join-us-more:hover { color: var(--sisu-blue-dk); border: none; }

body.dark .join-us-card { background: var(--bg-soft); border-color: var(--line); }
body.dark .join-us-card h3 { color: #6ea8ff; }
body.dark .join-us-summary { color: var(--ink); }
body.dark .join-us-body { color: var(--body); }
body.dark .join-us-more { color: #6ea8ff; }
body.dark .news-filter-title { color: #6ea8ff; }

@media (max-width: 768px) {
  .news-filter-title { font-size: 1.5rem; }
  .join-us-grid { grid-template-columns: 1fr; gap: 14px; }
  .join-us-card { padding: 18px 20px; }
}

/* ── Projects / Research-themes page (Option α — full-bleed SISU
   Blue panel + white floating cards) ─────────────────────────── */
#main.page-themes {
  max-width: none;
  padding: 0;
  margin: 0;
}
.themes-section {
  background: linear-gradient(135deg, var(--sisu-blue) 0%, var(--sisu-blue-dk) 100%);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}
.themes-section::before {
  /* subtle yellow corner accent, matches old #hero treatment */
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--sisu-yellow);
  opacity: 0.07;
  pointer-events: none;
}
.themes-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.themes-section-title {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  color: #fff;
  margin: 0 0 6px;
  font-weight: 600;
}
.themes-yellow-rule {
  width: 80px;
  height: 4px;
  background: var(--sisu-yellow);
  margin: 4px 0 18px;
}
.themes-section-intro {
  color: rgba(255,255,255,0.86);
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.75;
  max-width: 760px;
  margin: 0 0 32px;
}

/* White cards float on the blue panel */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.theme-card {
  background: var(--bg);
  padding: 28px 24px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.theme-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sisu-blue-soft);
  color: var(--sisu-blue);
  font-size: 1.5rem;
  line-height: 1;
  transition: background 0.18s, color 0.18s;
}
.theme-card:hover .theme-icon {
  background: var(--sisu-yellow);
  color: var(--ink);
}
.theme-card h3 {
  font-family: var(--serif);
  color: var(--sisu-blue);
  font-size: 1.125rem;
  line-height: 1.35;
  text-align: left;
  margin: 0 0 6px;
}
.theme-sep {
  width: 36px;
  height: 2px;
  background: var(--sisu-yellow);
  margin: 0 0 14px;
}
.theme-card p,
.theme-card .theme-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
  color: var(--body);
  text-align: left;
}

body.dark .themes-section {
  background: linear-gradient(135deg, #0d1830 0%, #0a1224 100%);
}
body.dark .theme-card { background: #1a2336; }
body.dark .theme-card h3 { color: #9ec4ff; }
body.dark .theme-icon { background: rgba(255,255,255,0.08); color: #9ec4ff; }
body.dark .theme-card:hover .theme-icon { background: var(--sisu-yellow); color: var(--ink); }

@media (max-width: 1024px) {
  .themes-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Publications page: search bar + filter bar ─────────── */
.pub-search-bar { margin: 16px 0 14px; }
#pub-search {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-family: var(--sans);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
#pub-search:focus {
  outline: none;
  border-color: var(--sisu-blue);
  box-shadow: 0 0 0 3px rgba(0,63,136,0.12);
}
#pub-search::placeholder { color: var(--muted); }
body.dark #pub-search { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
body.dark #pub-search:focus { border-color: #6ea8ff; box-shadow: 0 0 0 3px rgba(110,168,255,0.15); }

/* Floating back-to-top button (every page) */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sisu-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s, background 0.15s;
  z-index: 200;
}
#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0s, background 0.15s;
}
#back-to-top:hover { background: var(--sisu-blue-dk); }
@media (prefers-reduced-motion: reduce) {
  #back-to-top { transition: opacity 0s, transform 0s; }
}
@media (max-width: 480px) {
  #back-to-top { width: 40px; height: 40px; bottom: 16px; right: 16px; font-size: 1.125rem; }
}

.pub-filter-bar {
  margin: 24px 0 28px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-soft);
}
.filter-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filter-group:last-of-type { margin-bottom: 14px; }
.filter-group-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  min-width: 40px;
  flex-shrink: 0;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.filter-chips.year-chips {
  /* year chips can scroll if too many */
  max-height: 80px;
  overflow-y: auto;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: var(--sisu-blue);
  color: var(--sisu-blue);
}
.filter-chip-count {
  display: inline-block;
  background: var(--bg-soft);
  color: var(--muted);
  padding: 0 7px;
  border-radius: 9px;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.filter-chip-x {
  font-size: 12px;
  line-height: 1;
}
/* Active state: filled with category color or SISU blue for year */
.filter-chip.active {
  color: #fff;
  border-color: transparent;
}
.filter-chip.active .filter-chip-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.filter-chip.year-chip.active {
  background: var(--sisu-blue);
}
/* Category-specific active colors */
.filter-chip.cat-journal.active      { background: #002a5c; }
.filter-chip.cat-preprint.active     { background: #b35a00; }
.filter-chip.cat-chinese.active      { background: #b52a2a; }
.filter-chip.cat-conference.active   { background: #5a2ab5; }
.filter-chip.cat-book.active         { background: #3b6b1a; }
.filter-chip.cat-book-chapter.active { background: #1a6b6b; }

.filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}
.filter-summary-text {
  font-family: var(--serif);
  color: var(--muted);
}
.filter-summary-text #pub-shown-count {
  color: var(--sisu-blue);
  font-weight: 700;
  font-size: 1rem;
}
.filter-clear {
  background: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s;
}
.filter-clear:hover {
  color: var(--sisu-blue);
  border-color: var(--sisu-blue);
}
.filter-clear i { font-size: 14px; }

.pub-empty {
  color: var(--muted);
  font-style: italic;
  padding: 24px;
  text-align: center;
  background: var(--bg-soft);
  border-radius: 6px;
  border: 1px dashed var(--line);
}

/* ── Author folding ───────────────────────────────────── */
.authors-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--sisu-blue);
  font-size: 0.75rem;
  padding: 1px 8px;
  border-radius: 10px;
  cursor: pointer;
  margin-left: 4px;
  font-weight: 600;
  transition: all 0.12s;
}
.authors-toggle:hover {
  background: var(--sisu-blue);
  color: #fff;
  border-color: var(--sisu-blue);
}
.authors-tail { display: inline; }
.authors-tail[hidden] { display: none; }

/* Card-style publication item with year badge + colored category badge */
.pub-item {
  background: var(--bg);
  border-radius: 6px;
  padding: 18px 22px 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  border-left: 4px solid var(--sisu-blue);
  transition: box-shadow 0.2s, transform 0.15s;
}
.pub-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.11);
  transform: translateY(-1px);
}
.pub-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pub-year {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: var(--sisu-blue);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.pub-year.inpress { background: #999; }

.pub-cat {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cat-journal      { background: #e3eeff; color: #002a5c; }
.cat-preprint     { background: #fff3e0; color: #b35a00; }
.cat-chinese      { background: #fde8e8; color: #b52a2a; }
.cat-conference   { background: #ede8ff; color: #5a2ab5; }
.cat-book         { background: #e3f3e0; color: #3b6b1a; }
.cat-book-chapter { background: #d6e9e9; color: #1a6b6b; }
.cat-other        { background: #eee;    color: #666; }

.pub-note {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fffbeb;
  color: #8a6300;
  white-space: nowrap;
  border: 1px solid #fcb813;
}

.pub-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 4px;
}
.pub-title a { color: var(--ink); border: none; }
.pub-title a:hover { color: var(--sisu-blue); border: none; }
.pub-authors { font-size: 0.8125rem; color: var(--muted); margin-bottom: 3px; }
.pub-authors .me { font-weight: 700; color: var(--sisu-blue); }
.pub-journal {
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 8px;
}

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.pub-actions a {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1.5px solid;
  transition: all 0.15s;
}
.btn-view { border-color: var(--sisu-blue); color: var(--sisu-blue); }
.btn-view:hover { background: var(--sisu-blue); color: #fff; border-color: var(--sisu-blue); }
.btn-pdf  { border-color: #e05a2b; color: #e05a2b; }
.btn-pdf:hover  { background: #e05a2b; color: #fff; border-color: #e05a2b; }
.btn-code { border-color: #444; color: #444; }
.btn-code:hover { background: #444; color: #fff; border-color: #444; }
.btn-video { border-color: var(--sisu-blue-dk); color: var(--sisu-blue-dk); }
.btn-video:hover { background: var(--sisu-blue-dk); color: #fff; border-color: var(--sisu-blue-dk); }

/* ── Facilities page ─────────────────────────────────────── */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.facility-card {
  background: var(--bg-soft);
  padding: 24px;
  border-top: 3px solid var(--sisu-blue);
  transition: transform 0.15s ease, border-top-color 0.15s ease;
}
.facility-card:hover {
  transform: translateY(-2px);
  border-top-color: var(--sisu-yellow);
}
.facility-card .facility-icon {
  font-size: 2.25rem;
  line-height: 1;
  display: block;
  color: var(--sisu-blue);
  margin-bottom: 14px;
}
i.facility-icon { /* phosphor icon variant */
  font-size: 2.5rem;
}
.facility-card h3 {
  font-family: var(--serif);
  color: var(--sisu-blue);
  font-size: 1.125rem;
  margin: 0 0 10px;
}
.facility-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  color: var(--body);
}

/* ── News page ───────────────────────────────────────────── */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
}
.news-item .news-date {
  font-family: var(--serif);
  color: var(--sisu-blue);
  font-size: 0.9375rem;
  font-weight: 600;
}
.news-item .news-tag {
  display: inline-block;
  background: var(--sisu-yellow);
  color: var(--ink);
  font-size: 0.75rem;
  padding: 2px 8px;
  font-weight: 600;
  margin-bottom: 6px;
}
.news-item h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  margin: 0 0 8px;
  color: var(--ink);
}
.news-item p, .news-item .news-body { font-size: 0.9375rem; margin: 0; }

/* ── Contact page (Admissions / Int'l / Collab / Teaching / Contact cards) */
.contact-intro {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 6px 0 26px;
  max-width: 720px;
  line-height: 1.7;
}
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.contact-card {
  background: var(--bg-soft);
  padding: 26px 24px;
  border-radius: 6px;
  border-top: 3px solid var(--sisu-blue);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-top-color 0.15s ease, box-shadow 0.18s;
}
.contact-card:hover {
  transform: translateY(-2px);
  border-top-color: var(--sisu-yellow);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.contact-card-wide {
  margin-top: 18px;
}
.contact-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--sisu-blue);
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid var(--sisu-blue-soft);
}
.contact-card h2 {
  font-family: var(--serif);
  color: var(--sisu-blue);
  font-size: 1.125rem;
  margin: 0 0 4px;
  text-align: left;
  border: none;
  padding: 0;
}
.contact-card-sep {
  width: 36px;
  height: 2px;
  background: var(--sisu-yellow);
  margin: 4px 0 14px;
}
.contact-card-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--body);
}
.contact-card-body p { margin: 0 0 10px; }
.contact-card-body p:last-child { margin-bottom: 0; }
.contact-card-body ul,
.contact-card-body ol {
  padding-left: 20px;
  margin: 8px 0;
}
.contact-card-body li { line-height: 1.6; margin: 0 0 4px; }
.contact-address {
  font-family: var(--sans);
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 4px 0 0;
}

.contact-visit {
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.contact-visit-h {
  font-family: var(--serif);
  color: var(--sisu-blue);
  font-size: 1.25rem;
  margin: 0 0 14px;
}
.contact-visit-p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 14px;
  color: var(--body);
  max-width: 760px;
}

body.dark .contact-card { background: var(--bg-soft); }
body.dark .contact-card-icon { background: var(--bg); border-color: var(--line); color: #6ea8ff; }
body.dark .contact-card h2 { color: #6ea8ff; }
body.dark .contact-visit-h { color: #6ea8ff; }
body.dark .contact-visit { border-top-color: var(--line); }

@media (max-width: 768px) {
  .contact-cards-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-card { padding: 22px 20px; }
  .contact-visit { margin-top: 32px; padding-top: 22px; }
}

/* ── Footer ──────────────────────────────────────────────── */
#footer {
  background: var(--sisu-blue-dk);
  color: rgba(255,255,255,0.85);
  margin-top: 64px;
}
.footer-banner {
  width: 100%;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: center;
}
.footer-banner img {
  width: 100%;
  max-width: 1240px;
  height: auto;
  display: block;
  padding: 0 24px;
  box-sizing: border-box;
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 24px;
}
/* Footer banner is now a clickable link to the ILAS English site */
.footer-banner a {
  display: block;
  text-align: center;
  width: 100%;
  border: none;
}
.footer-banner a:hover { opacity: 0.9; border: none; }
.footer-banner a img { display: block; margin: 0 auto; }
/* Last-updated stamp lives in the subfooter row, right-aligned */
.footer-last-updated {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
  margin-left: auto;
}
.footer-last-updated:empty { display: none; }
.subfooter-copyright { flex: 0 1 auto; }

#subfooter {
  background: #000;
  color: rgba(255,255,255,0.6);
  padding: 14px 24px;
  font-size: 0.8125rem;
}
.subfooter-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
#subfooter a { color: rgba(255,255,255,0.75); }
#subfooter a:hover { color: var(--sisu-yellow); }

/* "Developed by" credit — present in the DOM and selectable, but
   visually invisible (text + link colour match the subfooter background).
   Editable as i18n key footer.developed_by_html via the editor's
   Site Text tab.

   Layout: a normal flex sibling between .subfooter-copyright (left)
   and #footer-last-updated (right). margin-left:auto on the invisible
   credit consumes all available row space — both it AND the
   last-updated stamp get pushed to the right end of the row, with
   the invisible text immediately left of the visible last-updated
   stamp. Result row:
       [© copyright …]              [<INVISIBLE dev credit>] [Last updated …]
   The invisible credit does take real layout space (~150px), but
   that space lives in the right gutter where the row would have been
   empty anyway — copyright stays exactly where it was before.

   Theming: #subfooter background is #000 in both light and dark mode
   (see #subfooter + body.dark #subfooter), so `color: #000` works for
   both themes. If subfooter background ever changes, this rule needs
   revisiting. */
/* SPECIFICITY NOTE — earlier passes lost a fight against the global
   `#subfooter a { color: rgba(255,255,255,0.75) }` rule and the
   matching :hover, because a single ID (`#subfooter`) outranks two
   classes (`.footer-credit-invisible a`). The selectors below all
   live under `#subfooter` so they match or exceed that specificity
   and win cleanly without resorting to !important. */
.footer-credit-invisible {
  /* `color: transparent` is more reliable than #000-on-#000 — black-on-
     black can still leak via font anti-aliasing / sub-pixel rendering
     ("半透明痕迹"). Transparent text-fill renders nothing visible at
     any zoom level, but the glyph bounding boxes are still there so
     drag-selection and Ctrl+A both pick the text up. */
  color: transparent;
  font-size: 0.6875rem;
  letter-spacing: 0.2px;
  white-space: nowrap;
  margin-left: auto;
  /* Keyboard / drag selection still works (user-select stays at default,
     which is "text"). DO NOT add user-select:none here — that would
     defeat the "copy-paste discoverable" intent. */
}
/* Nuke every link state — :link / :visited / :hover / :active / :focus.
   In dark mode the visited-link rule especially needs catching, since
   browsers paint visited links a different default colour. */
#subfooter .footer-credit-invisible,
#subfooter .footer-credit-invisible *,
#subfooter .footer-credit-invisible a,
#subfooter .footer-credit-invisible a:link,
#subfooter .footer-credit-invisible a:visited,
#subfooter .footer-credit-invisible a:hover,
#subfooter .footer-credit-invisible a:active,
#subfooter .footer-credit-invisible a:focus,
#subfooter .footer-credit-invisible a:focus-visible {
  color: transparent;
  background: transparent;
  text-decoration: none;
  border-bottom: none;
  outline: none;
  box-shadow: none;
  text-shadow: none;
  /* Don't change the cursor on the link — pointer cursor would betray
     the link's location to a hovering mouse. Use the text-selection
     cursor (consistent with surrounding selectable text). */
  cursor: text;
}
/* On narrow screens the subfooter wraps. Keep the invisible credit
   small but otherwise let it wrap naturally — since it's the same
   colour as the background, an extra blank row is invisible. */
@media (max-width: 720px) {
  .footer-credit-invisible {
    font-size: 0.625rem;
    margin-left: 0;
  }
}

/* ── Dark mode ────────────────────────────────────────────── */
body.dark {
  --bg:        #121419;
  --bg-soft:   #1c2027;
  --ink:       #f0f2f5;
  --body:      #cfd2d8;
  --muted:     #8a9099;
  --line:      #2a2f38;
  --line-soft: #232831;
  --sisu-blue-soft: #1a2336;
  background: var(--bg);
  color: var(--body);
}
body.dark a { color: #6ea8ff; }
body.dark a:hover { color: #fff; }
body.dark h1, body.dark h2, body.dark h3, body.dark h4 { color: var(--ink); }
body.dark #brand-strip { background: #0f1115; border-bottom-color: var(--sisu-blue); }
body.dark .brand-lab { color: var(--ink); }
body.dark .brand-lab .en { color: var(--muted); }
body.dark .brand-lang { color: #6ea8ff; border-bottom-color: #6ea8ff; }
body.dark .dark-toggle {
  background: #1c2027; border-color: var(--line); color: var(--ink);
}
body.dark #sidebar { background: var(--bg-soft); }
body.dark #sidebar .sidebar-news-heading { color: var(--ink); border-bottom-color: var(--line); }
body.dark .news-mini-card { background: #181c22; box-shadow: none; }
body.dark .news-mini-card.featured { background: linear-gradient(to right, rgba(252,184,19,0.04), #181c22 60%); }
body.dark .news-mini-title { color: var(--ink); }
body.dark .news-mini-summary { color: var(--body); }
body.dark .news-mini-more { color: #6ea8ff; }
body.dark #sidebar .full-link { color: #6ea8ff; border-top-color: var(--line); }
body.dark .pub-item {
  background: var(--bg-soft);
  box-shadow: none;
}
body.dark .pub-title, body.dark .pub-title a { color: var(--ink); }
body.dark .pub-authors { color: var(--muted); }
body.dark .pub-authors .me { color: #6ea8ff; }
body.dark .pub-journal { color: var(--muted); }
body.dark .pub-filter-bar { background: var(--bg-soft); border-color: var(--line); }
body.dark .filter-chip { background: var(--bg); border-color: var(--line); color: var(--body); }
body.dark .filter-chip:hover { border-color: #6ea8ff; color: #6ea8ff; }
body.dark .filter-chip-count { background: var(--line); color: var(--muted); }
body.dark .filter-summary { border-top-color: var(--line); }
body.dark .filter-summary-text #pub-shown-count { color: #6ea8ff; }
body.dark .filter-clear { border-color: var(--line); color: var(--muted); }
body.dark .filter-clear:hover { color: #6ea8ff; border-color: #6ea8ff; }
body.dark .pub-empty { background: var(--bg-soft); border-color: var(--line); }
body.dark .authors-toggle { border-color: var(--line); color: #6ea8ff; }
body.dark .authors-toggle:hover { background: #6ea8ff; color: var(--bg); border-color: #6ea8ff; }
body.dark .cat-journal      { background: #1d2a4d; color: #9ec4ff; }
body.dark .cat-preprint     { background: #3a2410; color: #ffb670; }
body.dark .cat-chinese      { background: #3a1a1a; color: #ff9696; }
body.dark .cat-conference   { background: #2a1f3d; color: #c9a8ff; }
body.dark .cat-book         { background: #1d3a14; color: #a3d28a; }
body.dark .cat-book-chapter { background: #143030; color: #8acaca; }
body.dark .pub-note { background: #2a2410; color: #fcb813; border-color: #5a4400; }
body.dark .person-card { background: var(--bg-soft); border-color: var(--line); }
body.dark .person-avatar-btn:hover { background: rgba(110,168,255,0.05); }
body.dark .person-name { color: var(--ink); }
body.dark .person-affil, body.dark .person-toggle-hint { color: var(--muted); }
body.dark .person-details { border-top-color: var(--line); }
body.dark .facility-card { background: var(--bg-soft); }
body.dark .facility-card h3 { color: #6ea8ff; }
body.dark .pi-card { background: var(--bg-soft); }
body.dark .pi-card .pi-name { color: var(--ink); }
body.dark .funder-card { background: var(--bg-soft); border-color: var(--line); }
body.dark .funder-card:hover { border-color: #6ea8ff; }
body.dark .funder-text { color: #6ea8ff; }
body.dark .collab-card { background: var(--bg-soft); }
body.dark .collab-name, body.dark .collab-name a { color: var(--ink); }
body.dark .collab-affil { color: #6ea8ff; }
body.dark .collab-bio { color: var(--body); }
body.dark .collab-intro { color: var(--muted); }
body.dark #footer { background: #0a0c10; }
body.dark #subfooter { background: #000; }
body.dark .news-item { border-bottom-color: var(--line); }

/* ── Responsive ──────────────────────────────────────────── */

/* Small-laptop & tablet landscape (≤ 1024px) — light horizontal trim */
@media (max-width: 1024px) {
  .brand-inner,
  .nav-inner,
  .breadcrumb-inner,
  .hero-inner,
  #main,
  .footer-inner,
  .subfooter-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .page-grid { gap: 32px; grid-template-columns: 1fr 280px; }
  #hero { padding: 48px 20px; }
}

/* Tablet portrait & large phones (≤ 768px) — main mobile breakpoint.
   Note: .lab-intro-title / .pi-photo / .pi-card-inner now use clamp()
   at the root so no explicit overrides here. */
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }
  .lab-intro { margin: 28px 0 8px; }

  /* Mobile keeps the pre-sticky layout — header scrolls with content. */
  #site-header { position: static; }

  .page-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; }

  /* Hamburger nav: stack links when hamburger is opened */
  #nav-bar ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  #nav-bar ul.open { display: flex; }
  #nav-bar li a { border-bottom: 1px solid var(--sisu-blue-dk); padding: 14px 20px; }
  #nav-hamburger { display: block; min-height: 44px; min-width: 44px; }
  .nav-inner { flex-wrap: wrap; }

  /* News list collapses to single column */
  .news-item { grid-template-columns: 1fr; gap: 4px; }

  /* Brand strip — centered stacked layout (logo above title), controls top-right */
  .brand-inner {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .brand-sisu img { height: 64px; }
  .brand-divider { display: none; }
  .brand-lab {
    font-size: 1.25rem;
    text-align: center;
  }
  .brand-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
  }

  /* Footer mobile: subfooter center-align (banner already centred) */
  .subfooter-inner { justify-content: center; text-align: center; }

  /* PI card padding only — fluid clamp() handles photo & gap */
  .pi-card { padding: 20px; }

  /* People page PI card */
  .person-pi-header { grid-template-columns: 100px 1fr; gap: 18px; }
  .person-card.person-pi .person-photo { width: 100px; height: 100px; }
  .person-card.person-pi { padding: 20px 22px; }

  /* People grid: tighter floor so ≥2 cards still fit on phablets */
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

  /* Collaborator grid: single column for readability */
  .collab-list { grid-template-columns: 1fr; }

  /* Research themes: 2 cols on tablet portrait + tighter panel padding */
  .themes-section { padding: 44px 0 52px; }
  .themes-inner { padding: 0 20px; }
  .themes-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Facilities grid */
  .facilities-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  /* Funder marquee on mobile: swap horizontal animation for swipe-snap.
     Native horizontal scroll, snap to center, no fade mask. */
  .funders-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .funders-track-animated { animation: none; }
  .funders-track {
    gap: 18px;
    padding: 4px 4px 8px;
  }
  .funders-dup { display: none; }  /* swipe-scroll only — no duplicates */
  .funder-card {
    min-width: 200px;
    min-height: 100px;
    padding: 16px 20px;
    scroll-snap-align: center;
  }
  .funder-card img { max-height: 64px; }
  .funders-row { text-align: center; }
  .funders-row .label { text-align: center; }

  /* Publications filter bar */
  .pub-filter-bar { padding: 14px 14px; }
  .filter-group { gap: 8px; }
  .filter-chips.year-chips { max-height: 96px; }

  /* Touch-target lift — minimum 40px tap area on tablet/phone */
  .dark-toggle { min-width: 40px; min-height: 40px; }
  .filter-chip { min-height: 32px; padding: 7px 12px; }
  .filter-clear { min-height: 32px; }
  .authors-toggle { min-height: 26px; padding: 3px 10px; }

  /* Pub item tighter padding */
  .pub-item { padding: 16px 16px 12px; }
  .pub-actions { gap: 8px; }
}

/* Tablet portrait (481-768) — bridge between phone and small laptop.
   Most fluid metrics (hero, PI photo) are already handled by clamp() at
   the root; this tier just lifts a couple of values that the blanket
   ≤768 rules push too aggressively. */
@media (min-width: 481px) and (max-width: 768px) {
  body { font-size: 15.5px; }
  /* People grid floor a hair lower so an iPad portrait (768) consistently
     shows 3 cards per row regardless of the surrounding container. */
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* Small phones (≤ 480px) — iPhone SE 375 / iPhone 14 Pro 393 */
@media (max-width: 480px) {
  body { font-size: 15px; line-height: 1.65; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.0625rem; }

  .brand-inner,
  .nav-inner,
  .breadcrumb-inner,
  .hero-inner,
  #main,
  .footer-inner,
  .subfooter-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
  #main { padding-top: 28px; padding-bottom: 40px; }
  .lab-intro { margin: 22px 0 4px; padding-top: 20px; }

  .brand-sisu img { height: 56px; }
  .brand-lab { font-size: 1.125rem; }
  .brand-controls { top: 8px; right: 8px; gap: 4px; }

  /* PI card stacks photo above text on tiny screens (override the 2-col
     clamp grid). Photo width still flows via clamp() above. */
  .pi-card-inner { grid-template-columns: 1fr; gap: 12px; }
  .pi-photo { margin: 0 auto; }
  .pi-card { padding: 18px; }

  /* People page PI card — same stack */
  .person-pi-header { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .person-pi-header .person-photo { margin: 0 auto; }
  .person-card.person-pi .person-name,
  .person-card.person-pi .person-title,
  .person-card.person-pi .person-affil { text-align: center; }
  .person-card.person-pi { padding: 18px; }

  /* People grid: floor at 150px → keeps 2 cards on a 375px screen */
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .person-avatar-btn { padding: 12px 8px; }
  .person-photo { width: 80px; height: 80px; }
  .person-photo .photo-placeholder { font-size: 2rem; }

  /* Funder marquee — even more compact on small phones */
  .funder-card { min-width: 180px; min-height: 90px; padding: 14px 16px; }
  .funder-card img { max-height: 56px; }
  .funders-track { gap: 14px; }

  /* Research themes: 1 column on small phones, tighter panel */
  .themes-section { padding: 32px 0 40px; }
  .themes-section::before { width: 180px; height: 180px; top: -60px; right: -60px; }
  .themes-inner { padding: 0 14px; }
  .themes-grid { grid-template-columns: 1fr; gap: 12px; }
  .theme-card { padding: 22px 18px; }

  /* Sidebar */
  #sidebar { padding: 18px 14px; }
  .news-mini-card { padding: 12px 14px; }

  /* Publications: stack label above chips, horizontally scroll year chips */
  .pub-filter-bar { padding: 12px 12px; }
  .filter-group { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 8px; }
  .filter-group-label { min-width: 0; }
  .filter-chips { gap: 6px; }
  .filter-chips.year-chips {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .filter-chips.year-chips .filter-chip { flex-shrink: 0; }

  .pub-item { padding: 14px 14px 10px; }
  .pub-title { font-size: 0.9375rem; }
  .pub-actions a { font-size: 0.625rem; padding: 4px 9px; }

  /* News list */
  .news-item { padding: 18px 0; }

  /* Footer */
  .footer-inner { padding: 28px 14px; }
  .footer-school h2 { font-size: 1rem; }
  .footer-school p { font-size: 0.8125rem; }
}

/* =========================================================================
   Rich-text body wrappers — paragraph / list / heading spacing for HTML
   produced by the local editor (tools/editor.html). For plain-text content
   (the current state of every JSON record), the wrapper is a div with one
   text node and no child elements — these rules don't apply and rendering
   is identical to the pre-WYSIWYG layout. For multi-paragraph WYSIWYG
   output, child <p>s get vertical spacing instead of running together.
   ========================================================================= */
.news-body p, .news-mini-summary p, .person-bio p,
.theme-body p, .join-us-summary p, .join-us-body p {
  margin: 0 0 0.7em;
}
.news-body p:last-child, .news-mini-summary p:last-child, .person-bio p:last-child,
.theme-body p:last-child, .join-us-summary p:last-child, .join-us-body p:last-child {
  margin-bottom: 0;
}
.news-body ul, .news-body ol,
.join-us-body ul, .join-us-body ol,
.person-bio ul, .person-bio ol,
.theme-body ul, .theme-body ol {
  margin: 0 0 0.7em 1.2em;
  padding-left: 0;
}
.news-body li, .join-us-body li, .person-bio li, .theme-body li {
  margin-bottom: 0.2em;
}
.news-body h2, .news-body h3,
.join-us-body h2, .join-us-body h3,
.person-bio  h2, .person-bio  h3,
.theme-body  h2, .theme-body  h3 {
  font-family: var(--serif);
  font-size: 1.0625em;
  font-weight: 600;
  color: var(--ink);
  margin: 0.9em 0 0.35em;
  line-height: 1.3;
}
.news-body h2:first-child, .news-body h3:first-child,
.join-us-body h2:first-child, .join-us-body h3:first-child,
.person-bio h2:first-child, .person-bio h3:first-child,
.theme-body h2:first-child, .theme-body h3:first-child {
  margin-top: 0;
}
/* In-content links: visibly distinct from body text — SISU blue + solid
   underline so users can scan rich-text for clickable affordances. */
.news-body a, .join-us-body a,
.person-bio a, .theme-body a,
.news-mini-summary a, .join-us-summary a {
  color: var(--sisu-blue);
  border-bottom: 1px solid var(--sisu-blue-soft);
  font-weight: 500;
}
.news-body a:hover, .join-us-body a:hover,
.person-bio a:hover, .theme-body a:hover,
.news-mini-summary a:hover, .join-us-summary a:hover {
  color: var(--sisu-blue-dk);
  border-bottom-color: var(--sisu-yellow);
  border-bottom-width: 2px;
}
body.dark .news-body h2, body.dark .news-body h3,
body.dark .join-us-body h2, body.dark .join-us-body h3,
body.dark .person-bio h2, body.dark .person-bio h3,
body.dark .theme-body h2, body.dark .theme-body h3 { color: #e8eef9; }

/* ── Multi-image galleries — unified container .image-gallery ──────
   Used by News, Research, and Facilities. The `layout-*` modifier
   class picks between:
     · layout-gallery (default): responsive grid, 16:9 crop,
       2–4 per row on desktop, single column below 720 px
     · layout-stack: full-width natural-aspect images, max 480 px tall
   Both modes share rounded corners, soft shadow, and clickable
   cursor so they pair with the lightbox handler. */
.image-gallery {
  margin: 12px 0;
}
.image-gallery img {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: var(--bg-soft);
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  cursor: zoom-in;
  transition: transform 0.15s, box-shadow 0.15s;
}
.image-gallery img:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.image-gallery.layout-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.image-gallery.layout-gallery img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Single-image edge case: don't crop when there's only one image */
.image-gallery.layout-gallery img:only-child {
  aspect-ratio: auto;
  max-height: 420px;
  object-fit: cover;
}
.image-gallery.layout-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.image-gallery.layout-stack img {
  max-height: 480px;
  object-fit: contain;
}
@media (max-width: 720px) {
  .image-gallery.layout-gallery {
    grid-template-columns: 1fr;
  }
  .image-gallery.layout-gallery img {
    aspect-ratio: auto;
    max-height: 320px;
  }
  .image-gallery.layout-stack img {
    max-height: 320px;
  }
}

/* Legacy aliases — keep .news-image / .theme-images / .facility-images
   working for any HTML still using them. These map to .image-gallery
   gallery layout for backward compat. */
.news-image {
  display: block;
  max-width: 100%;
  width: 100%;
  max-height: 420px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin: 12px 0;
  background: var(--bg-soft);
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  cursor: zoom-in;
}

/* ── Custom sections (per-item modular content blocks) ────────────
   Used by News / Research / Facilities / People / Contact / Teaching.
   Each item can append zero-or-more sections, rendered below the
   main body. Visual treatment: subtle left-rail accent in SISU
   yellow, slightly tighter typography than primary body text. */
.custom-sections {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  gap: 14px;
}
.custom-section {
  padding-left: 12px;
  border-left: 2px solid var(--sisu-yellow);
}
.custom-section-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sisu-blue);
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}
.custom-section-body {
  font-size: 0.9375rem;
  color: var(--body);
  line-height: 1.65;
}
.custom-section-body p:first-child { margin-top: 0; }
.custom-section-body p:last-child  { margin-bottom: 0; }
body.dark .custom-sections { border-top-color: var(--line); }

/* ── Contact map embed ─────────────────────────────────────────── */
.contact-map {
  margin: 32px 0 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: var(--bg-soft);
}
.contact-map-label {
  padding: 10px 14px;
  background: var(--sisu-blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.contact-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}
@media (max-width: 720px) {
  .contact-map iframe { height: 280px; }
}

/* ── Teaching course numbers + archived list ───────────────────── */
.course-card .course-number {
  font-family: var(--serif, Georgia, serif);
  color: var(--sisu-yellow);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.875em;
  margin-right: 6px;
  vertical-align: 2px;
}
.teaching-archived-heading {
  margin: 36px 0 8px;
  font-family: var(--serif, Georgia, serif);
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.teaching-archived-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.teaching-archived-list li {
  padding: 6px 12px;
  background: var(--bg-soft);
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
  border-radius: 0 4px 4px 0;
}
.teaching-archived-list .course-number {
  font-family: var(--serif, Georgia, serif);
  color: var(--muted);
  font-weight: 700;
}

/* ── Lightbox — pure CSS/JS, no external dependencies ──────────────
   One <div id="lightbox"> is injected by main.js (and by the editor's
   preview iframe srcdoc). Click any img.lightbox-target on the page
   (research/facilities/news only — funders excluded) → opens here.
   Keyboard: Esc closes, ← / → navigates within the same item's
   image set. Click backdrop or ✕ to close. */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  padding: 32px;
}
.lightbox[hidden] { display: none !important; }
.lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  background: #0a0c10;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.lightbox-caption {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--serif, Georgia, serif);
  font-size: 0.875rem;
  margin-top: 14px;
  max-width: 80vw;
  text-align: center;
  font-style: italic;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  border: 0;
  cursor: pointer;
  font-family: var(--serif, Georgia, serif);
  transition: background 0.12s, color 0.12s;
}
.lightbox-close {
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
}
.lightbox-prev, .lightbox-next {
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 80px;
  font-size: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.lightbox-prev { left: 12px; border-radius: 0 4px 4px 0; }
.lightbox-next { right: 12px; border-radius: 4px 0 0 4px; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: var(--sisu-yellow);
  color: var(--sisu-blue-dk);
}
.lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
@media (max-width: 720px) {
  .lightbox { padding: 16px; }
  .lightbox-img { max-width: 96vw; max-height: 72vh; }
  .lightbox-prev, .lightbox-next { width: 36px; height: 60px; font-size: 1.75rem; }
}

/* ── Prerender hydration: cross-language hide ──────────────────────
   When the page is statically prerendered in English (default), but the
   user's stored language preference is Chinese, we briefly hide the EN
   content while JS swaps in the ZH render. visibility:hidden preserves
   layout so there's no jump on swap. main.js sets the html[lang] very
   early via the inline bootstrap script that prerender injects in <head>.
   Once the renderer finishes, it sets data-prerendered to the new
   language and the rule below stops matching, revealing the content. */
html[lang^="zh"] [data-prerendered="en"],
html[lang="en"]  [data-prerendered="zh"] {
  visibility: hidden;
}

/* ── News page polish ───────────────────────────────────────
   Timeline-style list (left-rail date | right body). Single
   optional image per item rendered as a separate field above
   the body text — kept out of the sanitized body HTML so the
   safe-HTML allowlist stays minimal. */
.news-intro {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 6px 0 28px;
  max-width: 720px;
  line-height: 1.7;
}
.news-item.featured {
  border-left: 3px solid var(--sisu-yellow);
  padding-left: 16px;
  margin-left: -19px;
}
.news-item .news-content {
  min-width: 0;     /* allows long titles / URLs to wrap inside the grid cell */
}
.news-item .news-image {
  display: block;
  max-width: 100%;
  width: 100%;
  max-height: 360px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin: 10px 0 14px;
  background: var(--bg-soft);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.news-item .news-link-row {
  margin-top: 10px;
}
.news-item .news-link-row a {
  font-size: 0.9375rem;
  color: var(--sisu-blue);
  font-weight: 500;
}
.news-item .news-link-row a:hover { color: var(--sisu-blue-dk); }

/* Spotlight-permalink landing highlight. When the user clicks an
   anchor on the homepage Spotlight, the targeted news item briefly
   flashes a soft yellow background so they can spot which entry
   they landed on. Removed after ~2.4s by main.js. */
.news-item.news-item-anchor {
  background: linear-gradient(to right, rgba(252, 184, 19, 0.18), rgba(252, 184, 19, 0));
  transition: background 0.6s ease-out;
}

@media (max-width: 720px) {
  .news-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .news-item .news-date {
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .news-item .news-image { max-height: 220px; }
  .news-item.featured {
    margin-left: 0;
    padding-left: 12px;
  }
}

body.dark .news-item { border-bottom-color: var(--line); }
body.dark .news-item .news-date { color: #6ea8ff; }
body.dark .news-item.featured { border-left-color: var(--sisu-yellow); }
body.dark .news-item h3 { color: var(--ink); }
body.dark .news-item.news-item-anchor {
  background: linear-gradient(to right, rgba(252, 184, 19, 0.12), rgba(252, 184, 19, 0));
}