/*
Theme Name: HKU CPS Lab
Theme URI: https://cps.hku.hk
Author: HKU CPS Lab
Description: Custom block theme for HKU CPS Lab. Home styles migrated from the current Twenty Twenty-Five site editor customizations.
Version: 1.4.9
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: cps-lab
*/

/*
===========================================
 WordPress Styles (single file)

 目的：把 header / footer / about / projects / team / contact 的样式集中在一个文件里
 维护方式：
 - 改配色：优先改下面 :root 里的变量
 - Home 大头图：Section 2
 - 小头图（其他页面）：Section 3
 - Footer：Section 4
 - About：Section 5
 - Projects：Section 6
 - Team：Section 7
 - Global Page Entrance Animation：Section 8
 - Contact：Section 9

===========================================
*/

/* =====================================================
   0) Theme vars (改颜色就改这里)
   ===================================================== */
:root {
  --home-c1: #0a1a3d;
  --home-c2: #1a4a6d;
  --home-c3: #0a5a7d;
  --home-c4: #1f4483;
  --home-c5: #3e306d;
  --home-c6: #0a1a3d;

  --small-c1: var(--home-c1);
  --small-c2: var(--home-c2);
  --small-c3: var(--home-c3);
  --small-c4: var(--home-c4);
  --small-c5: var(--home-c5);
  --small-c6: var(--home-c6);

  /* 统一页面左右内边距（Projects/Team/Contact） */
  --page-pad-x: clamp(32px, 4vw, 60px);
}

/* =====================================================
   1) Animations (all together)
   ===================================================== */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes orbitRotate {
  0% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes gridScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* ✅ 全站“高级出场”动画：轻微上浮 + 淡入（main 容器） */
@keyframes pageLiftIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ✅ 分块 stagger 出场动画（projects/team/about/home-inner/contact） */
@keyframes pageFloatIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   2) HOME BIG HEADER
   ===================================================== */
header[data-big],
header[data-big="true"]{
  position: relative;
  z-index: 2;
  overflow: hidden;

  min-height: clamp(460px, 52vh, 520px);
  padding: clamp(64px, 7vh, 88px) 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 33% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 75% 35%, rgba(255, 255, 255, 0.6), transparent),
    linear-gradient(
      -45deg,
      var(--home-c1) 0%,
      var(--home-c2) 20%,
      var(--home-c3) 40%,
      var(--home-c4) 60%,
      var(--home-c5) 80%,
      var(--home-c6) 100%
    );
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;

  color: #fff;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(144, 238, 144, 0.16);
}

/* 修复：Home 大 header 和 About 之间的白色空行 */
:where(header[data-big], header[data-big="true"]){ margin-bottom: 0; }

:where(header[data-big], header[data-big="true"])
+ :where(.about-lab, .wp-block-html, .wp-block-group, .wp-block-columns, .wp-block-cover){
  margin-top: 0 !important;
}

:where(header[data-big], header[data-big="true"])
+ :where(.wp-block-html, .wp-block-group, .wp-block-columns, .wp-block-cover)
:where(.about-lab){
  margin-top: 0 !important;
}

:where(header[data-big], header[data-big="true"])
+ :where(.wp-block-spacer, .wp-block-separator, hr){
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* orbit rings 大头 */
header[data-big]::before,
header[data-big="true"]::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  height: 85%;
  border: 2px solid rgba(180, 180, 180, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
  animation: orbitRotate 20s linear infinite, pulseGlow 3s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(200, 200, 200, 0.3), inset 0 0 20px rgba(220, 220, 220, 0.2);
}

header[data-big]::after,
header[data-big="true"]::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;
  height: 65%;
  border: 2px solid rgba(100, 200, 150, 0.5);
  border-top-color: rgba(120, 220, 170, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
  animation: orbitRotate 15s linear infinite reverse, pulseGlow 3s ease-in-out infinite 1.5s;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 25px rgba(100, 200, 150, 0.4), inset 0 0 25px rgba(120, 220, 170, 0.3);
}

/* 内容层 + 网格叠层 */
header[data-big] .aurora-inner,
header[data-big="true"] .aurora-inner{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

header[data-big] .aurora-inner::before,
header[data-big="true"] .aurora-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
  background-size: 60px 60px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

header[data-big] .aurora-inner > *,
header[data-big="true"] .aurora-inner > *{
  position: relative;
  z-index: 1;
}

/* 标题 */
header[data-big] .title-text,
header[data-big="true"] .title-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

header[data-big] .title-text .title,
header[data-big="true"] .title-text .title{
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  line-height: 1.1;
  margin: 0;

  background: linear-gradient(135deg, #ffffff 0%, #90EE90 50%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 2px 8px rgba(144, 238, 144, 0.3));
}

header[data-big] .title-text .subtitle,
header[data-big="true"] .title-text .subtitle{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 导航 */
header[data-big] nav,
header[data-big="true"] nav{
  margin-top: 15px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

header[data-big] nav a,
header[data-big="true"] nav a{
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

header[data-big] nav a:hover,
header[data-big="true"] nav a:hover{
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 响应式 BIG HEADER */
@media (max-width: 1024px){
  header[data-big],
  header[data-big="true"]{
    min-height: clamp(480px, 58vh, 560px);
    padding: 78px 28px;
  }
  header[data-big] .title-text .subtitle,
  header[data-big="true"] .title-text .subtitle{
    letter-spacing: 3px;
  }
}

@media (max-width: 768px){
  header[data-big],
  header[data-big="true"]{
    min-height: max(520px, 68vh);
    padding: 84px 20px 64px;
  }
  header[data-big] .title-text .subtitle,
  header[data-big="true"] .title-text .subtitle{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    letter-spacing: 2px;
  }
}

@media (max-width: 480px){
  header[data-big],
  header[data-big="true"]{
    min-height: max(560px, 72vh);
    padding: 78px 16px 58px;
  }

  header[data-big] nav,
  header[data-big="true"] nav{
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;
  }

  header[data-big] nav a,
  header[data-big="true"] nav a{
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 9px 8px;
    font-size: 0.78rem;
  }
}

/* =====================================================
   3) SMALL HEADER (other pages)
   ===================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  overflow: hidden;

  min-height: 84px;
  padding: 18px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(
    -45deg,
    var(--small-c1) 0%,
    var(--small-c2) 20%,
    var(--small-c3) 40%,
    var(--small-c4) 60%,
    var(--small-c5) 80%,
    var(--small-c6) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;

  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.2),
    0 5px 12px rgba(144, 238, 144, 0.14);
}

/* 小 header 星轨 */
.site-header::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border: 2px solid rgba(120, 220, 170, 0.28);
  border-top-color: rgba(144, 238, 144, 0.45);
  border-left-color: rgba(125, 211, 252, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
  animation: orbitRotate 22s linear infinite, pulseGlow 3s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
  box-shadow: none;
}

.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(144, 238, 144, 0.24), transparent),
    radial-gradient(1px 1px at 18% 68%, rgba(144, 238, 144, 0.2), transparent),
    radial-gradient(2px 2px at 27% 38%, rgba(125, 211, 252, 0.18), transparent),
    radial-gradient(1px 1px at 33% 82%, rgba(144, 238, 144, 0.18), transparent),
    radial-gradient(2px 2px at 46% 18%, rgba(144, 238, 144, 0.22), transparent),
    radial-gradient(1px 1px at 52% 64%, rgba(125, 211, 252, 0.16), transparent),
    radial-gradient(2px 2px at 61% 36%, rgba(144, 238, 144, 0.2), transparent),
    radial-gradient(1px 1px at 68% 78%, rgba(144, 238, 144, 0.18), transparent),
    radial-gradient(2px 2px at 76% 24%, rgba(125, 211, 252, 0.18), transparent),
    radial-gradient(1px 1px at 84% 58%, rgba(144, 238, 144, 0.2), transparent),
    radial-gradient(2px 2px at 92% 30%, rgba(144, 238, 144, 0.18), transparent),
    radial-gradient(1px 1px at 88% 82%, rgba(125, 211, 252, 0.16), transparent),
    linear-gradient(0deg, transparent 24%, rgba(144, 238, 144, 0.04) 25%, rgba(144, 238, 144, 0.04) 26%, transparent 27%, transparent 74%, rgba(144, 238, 144, 0.04) 75%, rgba(144, 238, 144, 0.04) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, rgba(125, 211, 252, 0.035) 25%, rgba(125, 211, 252, 0.035) 26%, transparent 27%, transparent 74%, rgba(125, 211, 252, 0.035) 75%, rgba(125, 211, 252, 0.035) 76%, transparent 77%, transparent);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, 60px 60px, 60px 60px;
  animation: twinkle 8s ease-in-out infinite, gridScale 12s ease-in-out infinite;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

/* header 内部 */
.site-header__inner{
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  max-width: 100%;
}

/* 品牌/标题区 */
.site-header__brand{
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  text-decoration: none;
  border: none;
}

.site-header__title{
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1;
  margin: 0;

  background: linear-gradient(135deg, #ffffff 0%, #90EE90 50%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-decoration: none;
  border: none;
  transition: all 0.3s ease;

  filter: drop-shadow(0 1px 4px rgba(144, 238, 144, 0.25));
}

.site-header__title:hover{
  filter: drop-shadow(0 2px 8px rgba(144, 238, 144, 0.4));
}

.site-header__subtitle{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
  margin: 0;
  margin-top: 5px;
}

/* 导航菜单 */
.site-header__nav{
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav li{ margin: 0; padding: 0; }

.site-header__nav a{
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 8px 6px;
  display: inline-block;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}

.site-header__nav a::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(144, 238, 144, 0),
    rgba(144, 238, 144, 0.7),
    rgba(125, 211, 252, 0.65),
    rgba(144, 238, 144, 0)
  );
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-header__nav a:hover{ color: #fff; transform: translateY(-1px); }
.site-header__nav a:hover::after{ opacity: 1; transform: translateY(0); }

/* Mobile toggle button (WordPress) */
.site-header__toggle,
.menu-toggle{
  display: none;
  position: relative;
  z-index: 11;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.site-header__toggle::before,
.menu-toggle::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
}

.site-header__toggle:hover,
.menu-toggle:hover{ background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }

/* Mobile */
@media (max-width: 600px){
  .site-header__inner{ flex-wrap: wrap; gap: 2px; }
  .site-header__brand{ flex: 1 1 100%; }
  .site-header__nav{
    flex: 1 0 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .site-header__nav li{ flex: 0 0 auto; }
  .site-header__nav a{
    width: auto;
    text-align: center;
    padding: 4px 4px;
    font-size: 0.72rem;
    letter-spacing: 1px;
  }
  .site-header__nav a::after{ left: 8px; right: 8px; }
}

/* Mobile: turn nav into expandable menu */
@media (max-width: 900px){
  .site-header__inner{ gap: 2px; }

  .site-header__toggle,
  .menu-toggle{ display: inline-flex; }

  .site-header__nav{
    position: static;
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    max-height: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    overflow: visible;
    transition: none;
  }

  .site-header__nav.is-open{
    max-height: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-header__nav.is-collapsed{
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    overflow: hidden;
  }

  .site-header__nav[hidden]{ display: none; }

  .site-header__nav li{ flex: 0 0 auto; }

  .site-header__nav a{
    width: auto;
    text-align: center;
    padding: 4px 4px;
    font-size: 0.78rem;
    letter-spacing: 1px;
  }

  .site-header__nav a::after{ left: 0; right: 0; }
}

/* 横屏（移动端）防止导航超出屏幕 */
@media (max-width: 900px) and (orientation: landscape){
  .site-header{ min-height: 72px; padding: 12px 18px; }
  .site-header__inner{ flex-wrap: nowrap; gap: 14px; }
  .site-header__brand{ flex: 0 0 auto; }
  .site-header__title{ font-size: 0.95rem; letter-spacing: 3px; }
  .site-header__subtitle{ font-size: 0.58rem; letter-spacing: 1px; margin-top: 4px; }

  .site-header__nav{
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .site-header__nav a{
    padding: 6px 4px;
    font-size: 0.72rem;
    letter-spacing: 1px;
  }
}

/* =====================================================
   4) Footer
   ===================================================== */
:where(.wp-site-blocks, #page, .site){
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

:where(.wp-site-blocks, #page, .site)
> :where(main, .site-main, #primary, #content, .site-content, .content-area){
  flex: 1 0 auto;
}

.site-footer{
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  padding: 22px 16px;

  color: rgba(255,255,255,.92);

  background: linear-gradient(
    -45deg,
    var(--small-c1) 0%,
    var(--small-c2) 20%,
    var(--small-c3) 40%,
    var(--small-c4) 60%,
    var(--small-c5) 80%,
    var(--small-c6) 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 14s ease infinite;

  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -14px 40px rgba(0,0,0,.28);
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 18% 28%, rgba(144, 238, 144, .34), transparent),
    radial-gradient(2px 2px at 62% 72%, rgba(125, 211, 252, .28), transparent),
    radial-gradient(1px 1px at 52% 54%, rgba(144, 238, 144, .28), transparent),
    radial-gradient(1px 1px at 82% 14%, rgba(125, 211, 252, .26), transparent);
  opacity: .65;
  animation: twinkle 6s ease-in-out infinite;
}

.site-footer__inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-align: center;
}

.site-footer__title{
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1;

  background: linear-gradient(135deg, #ffffff 0%, #90EE90 55%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 1px 4px rgba(144,238,144,.22));
}

.site-footer__subtitle{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: .72rem;
  line-height: 1.25;
  color: rgba(255,255,255,.65);
  max-width: 52ch;
}

.site-footer__meta{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .78rem;
  letter-spacing: 1px;
  color: rgba(255,255,255,.72);
}

@media (max-width: 480px){
  .site-footer{ padding: 18px 14px; }
  .site-footer__title{ font-size: .98rem; letter-spacing: 3px; }
  .site-footer__subtitle{ font-size: .68rem; }
}

/* =====================================================
   5) About (scoped block)
   ===================================================== */
.about-lab{
  position: relative;
  z-index: 1;
  margin-top: 0 !important;

  --about-max: 1120px;
  --about-pad: 32px;

  padding: var(--about-pad) max(var(--about-pad), calc((100% - var(--about-max)) / 2));
  background: linear-gradient(
    180deg,
    rgba(13, 90, 74, 0.08) 0%,
    rgba(13, 90, 74, 0.03) 55%,
    rgba(255, 255, 255, 1) 100%
  );
}

.about-lab__inner{
  max-width: var(--about-max);
  margin: 0 auto;
  padding: 0 clamp(10px, 1.8vw, 22px);
}

.about-lab__inner > :first-child{ margin-top: 0 !important; }

.about-lab__title{
  margin: 0 0 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 700;
  font-size: clamp(1.35rem, 1.9vw, 1.95rem);
  color: rgba(58, 163, 142, 0.92);
}

.about-lab__text{
  margin: 0 0 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 1.04rem;
  line-height: 1.7;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
}

.about-lab .about-lab__text strong{
  font-weight: 600;
  color: rgba(10, 26, 61, 0.92);
}

.about-lab__text a{
  color: rgba(31, 134, 113, 0.78);
  text-decoration: none;
  border-bottom: none;
  display: inline-block;
  padding: 0 2px;
  border-radius: 6px;
  position: relative;
  transition: color 0.15s ease;
}

.about-lab__text a:hover{ color: rgba(58, 163, 142, 0.95); }

.about-lab__text a::after{
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(58, 163, 142, 0),
    rgba(58, 163, 142, 0.75),
    rgba(31, 134, 113, 0.75),
    rgba(58, 163, 142, 0)
  );
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.about-lab__text a:hover::after{ transform: scaleX(1); opacity: 1; }

.about-lab__text a:focus-visible{
  outline: 2px solid rgba(58, 163, 142, 0.35);
  outline-offset: 2px;
}

@media (max-width: 560px){
  .about-lab{ --about-pad: 22px; }
}

/* =====================================================
   6) Projects Page (final)
   ===================================================== */
body:has(.projects-page){
  background: linear-gradient(
    180deg,
    rgba(13, 90, 74, 0.10) 0%,
    rgba(13, 90, 74, 0.06) 35%,
    rgba(13, 90, 74, 0.04) 65%,
    rgba(245,250,248,1) 100%
  );
}

.projects-page{
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px var(--page-pad-x) 52px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #13223a;
  line-height: 1.75;
}

.projects-page > h1{
  text-align: center;
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  font-weight: 680;
  color: #0a1a3d;
}

/* 顶部介绍 */
.projects-page > .projects-lead{
  max-width: 920px;
  margin: 0 auto 22px;
  font-size: 1.05rem;
  color: rgba(19,34,58,.72);
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-word;
}

/* Section 标题 */
.projects-page > h2{
  text-align: center;
  margin: 34px 0 12px;
  font-size: 1.52rem;
  font-weight: 650;
  color: #0a1a3d;
  position: relative;
  padding-bottom: 12px;
}

/* 标题长线 */
.projects-page > h2::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(680px, 88%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(58,159,142,0),
    rgba(58,159,142,.55),
    rgba(125,211,252,.40),
    rgba(58,159,142,0)
  );
}

/* 两列布局 */
.projects-cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin: 0 0 18px;
}

@media (max-width: 860px){
  .projects-cols{ grid-template-columns: 1fr; }
}

/* Video blocks */
.video-container{
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(10,26,61,.09);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.video-container::before{
  content: "";
  display: block;
  padding-top: 56.25%;
}

.video-container:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.video-thumbnail{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease;
}

.video-container:hover .video-thumbnail{ transform: scale(1.04); }

.video-play-button{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  background: radial-gradient(circle at center, rgba(0,0,0,.22), rgba(0,0,0,0));
}

.video-play-button::before{
  content:"";
  width:64px;height:44px;
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:12px;
  background:rgba(220,38,38,.95);
}

.video-play-button::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-42%,-50%);
  border-left:15px solid #fff;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

.video-container iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

.video-title{
  margin:12px 0 6px;
  font-size:1.04rem;
  font-weight:650;
  color:#0a1a3d;
}

.video-description{
  font-size:.96rem;
  color:rgba(19,34,58,.70);
  text-align: justify;
}

/* Robot fleet */
.projects-page .figure{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0;
}

.projects-page .figure-image{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(10,26,61,.10);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  outline: none !important;
}

.projects-page .figure-image:focus,
.projects-page .figure-image:active{
  outline: none !important;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.projects-page .figure:hover .figure-image{
  transform: translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}

.projects-page .figure-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .28s ease;
}

.projects-page .figure:hover img{ transform: scale(1); }

.projects-page .figure-caption{
  text-align:center;
  padding:12px 0 6px;
  font-size:1.02rem;
  font-weight:500;
  letter-spacing: 0.2px;
  color: rgba(10,26,61,.92);
}

@media (max-width:600px){
  .projects-page{ padding: 44px var(--page-pad-x) 52px; }

  .projects-page .video-description,
  .projects-page .video-description p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* =====================================================
   7) TEAM PAGE — UNIVERSITY LAB STYLE (CLEAN)
   ===================================================== */
body:has(.team-page){
  background: linear-gradient(
    180deg,
    rgba(13, 90, 74, 0.10) 0%,
    rgba(13, 90, 74, 0.05) 40%,
    rgba(13, 90, 74, 0.03) 65%,
    rgba(245, 250, 248, 1) 100%
  );
}

.team-page{
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px var(--page-pad-x) 60px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #13223a;
}

.team-page h1{
  text-align: center;
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  font-weight: 680;
  color: #0a1a3d;
}

.team-lead{
  max-width: 880px;
  margin: 0 auto 38px;
  font-size: 1.03rem;
  line-height: 1.8;
  color: rgba(19,34,58,.72);
  text-align: justify;
  text-justify: inter-word;
  text-align-last: center;
}

/* 网格布局 */
.team-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 28px;
}

@media (max-width: 980px){
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px){
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .team-grid{ grid-template-columns: 1fr; }
}


.team-member{ text-align: center; }

/* Avatar */
.team-avatar{
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;

  background: #fff;
  border: 1px solid rgba(10,26,61,.10);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.team-member:hover .team-avatar{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.team-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-avatar img[src=""]{ display: none; }

.team-avatar-fallback {
  display: none !important;
}

.team-avatar:focus,
.team-avatar:active{
  outline: none !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.08) !important;
}

/* 文本 */
.team-name{
  font-size: 1.06rem;
  font-weight: 650;
  color: #0a1a3d;
  margin-bottom: 2px;
}

.team-role{
  font-size: .93rem;
  color: rgba(19,34,58,.60);
}

/* =====================================================
   8) Global Page Entrance Animation
   ===================================================== */

/* ✅ 方案 A：main 内容整体进场 */
:where(.wp-site-blocks, #page, .site)
:where(main, .site-main, #primary, #content, .site-content, .content-area){
  animation: pageLiftIn .62s cubic-bezier(.2,.8,.2,1) both;
}

/* ✅ 方案 B：块级 stagger（需要 JS 给 html 加 class） */
.page-anim-ready .projects-page > *,
.page-anim-ready .team-page > *,
.page-anim-ready .about-lab > *,
.page-anim-ready .contact-page > *,
.page-anim-ready header[data-big] .aurora-inner > *,
.page-anim-ready header[data-big="true"] .aurora-inner > *{
  opacity: 0;
  transform: translateY(14px);
}

.page-anim-run .projects-page > *,
.page-anim-run .team-page > *,
.page-anim-run .about-lab > *,
.page-anim-run .contact-page > *,
.page-anim-run header[data-big] .aurora-inner > *,
.page-anim-run header[data-big="true"] .aurora-inner > *{
  animation: pageFloatIn .75s cubic-bezier(.2,.8,.2,1) both;
}

/* stagger */
.page-anim-run .projects-page > *:nth-child(1),
.page-anim-run .team-page > *:nth-child(1),
.page-anim-run .about-lab > *:nth-child(1),
.page-anim-run .contact-page > *:nth-child(1){ animation-delay: .06s; }

.page-anim-run .projects-page > *:nth-child(2),
.page-anim-run .team-page > *:nth-child(2),
.page-anim-run .about-lab > *:nth-child(2),
.page-anim-run .contact-page > *:nth-child(2){ animation-delay: .12s; }

.page-anim-run .projects-page > *:nth-child(3),
.page-anim-run .team-page > *:nth-child(3),
.page-anim-run .about-lab > *:nth-child(3),
.page-anim-run .contact-page > *:nth-child(3){ animation-delay: .18s; }

.page-anim-run .projects-page > *:nth-child(4),
.page-anim-run .team-page > *:nth-child(4),
.page-anim-run .about-lab > *:nth-child(4),
.page-anim-run .contact-page > *:nth-child(4){ animation-delay: .24s; }

/* prefers-reduced-motion：关闭所有动画（包含 header 动态） */
@media (prefers-reduced-motion: reduce){
  header[data-big],
  header[data-big="true"],
  header[data-big]::before,
  header[data-big="true"]::before,
  header[data-big]::after,
  header[data-big="true"]::after,
  .site-header,
  .site-header::before,
  .site-header::after,
  .site-footer{
    animation: none !important;
  }

  :where(.wp-site-blocks, #page, .site)
  :where(main, .site-main, #primary, #content, .site-content, .content-area){
    animation: none !important;
  }

  .page-anim-ready .projects-page > *,
  .page-anim-ready .team-page > *,
  .page-anim-ready .about-lab > *,
  .page-anim-ready .contact-page > *,
  .page-anim-ready header[data-big] .aurora-inner > *,
  .page-anim-ready header[data-big="true"] .aurora-inner > *{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .page-anim-run .projects-page > *,
  .page-anim-run .team-page > *,
  .page-anim-run .about-lab > *,
  .page-anim-run .contact-page > *,
  .page-anim-run header[data-big] .aurora-inner > *,
  .page-anim-run header[data-big="true"] .aurora-inner > *{
    animation: none !important;
  }
}

/* =====================================================
   9) CONTACT PAGE — unified with other pages
   ===================================================== */
body:has(.contact-page){
  background: linear-gradient(
    180deg,
    rgba(13, 90, 74, 0.10) 0%,
    rgba(13, 90, 74, 0.05) 40%,
    rgba(13, 90, 74, 0.03) 65%,
    rgba(245, 250, 248, 1) 100%
  );
}

.contact-page{
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px var(--page-pad-x) 60px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #13223a;
  line-height: 1.75;
}

/* Hero */
.contact-hero{
  max-width: 940px;
  margin: 0 auto 26px;
  padding: 34px clamp(18px, 2.4vw, 28px) 26px;
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-hero::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border: 2px solid rgba(120, 220, 170, 0.28);
  border-top-color: rgba(144, 238, 144, 0.45);
  border-left-color: rgba(125, 211, 252, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
  animation: orbitRotate 22s linear infinite, pulseGlow 3s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.contact-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(144, 238, 144, 0.24), transparent),
    radial-gradient(1px 1px at 18% 68%, rgba(144, 238, 144, 0.2), transparent),
    radial-gradient(2px 2px at 27% 38%, rgba(125, 211, 252, 0.18), transparent);
  background-size: auto;
  animation: twinkle 8s ease-in-out infinite;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.contact-title{
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  font-weight: 680;
  color: #0a1a3d;
  animation: pageLiftIn 0.6s cubic-bezier(.2,.8,.2,1) both;
  position: relative;
  z-index: 1;
}

/* Description：左右对称 + 两端对齐 + 一行更“满” */
.contact-hero .contact-lead{
  max-width: 900px;
  margin: 0 auto !important;
  width: 100%;
  display: block !important;

  text-align: justify !important;
  text-justify: inter-word !important;
  text-align-last: left !important;

  font-size: 1.0rem !important;
  line-height: 1.65;

  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;

  animation: pageFloatIn 0.7s cubic-bezier(.2,.8,.2,1) 0.1s both;
  position: relative;
  z-index: 1;
}

.contact-location{
  max-width: 940px;
  margin: 0 auto 18px;
  font-size: 1.00rem;
  line-height: 1.8;
  color: rgba(19,34,58,.72);
  text-align: center;

  animation: pageFloatIn 0.7s cubic-bezier(.2,.8,.2,1) 0.2s both;
  position: relative;
  z-index: 1;
}

.contact-location strong{
  color: rgba(10,26,61,.92) !important;
  font-weight: 650 !important;
}

/* Buttons */
.contact-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;

  animation: pageFloatIn 0.7s cubic-bezier(.2,.8,.2,1) 0.3s both;
  position: relative;
  z-index: 1;
}

.contact-actions p{ margin: 0 !important; }

.contact-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;   
  border-radius: 999px;
  text-decoration: none !important;
  color: rgba(10,26,61,.92) !important;
  background: transparent;
  border: none;
  box-shadow: none;

  transition: transform .18s ease, color .18s ease;
}

.contact-btn:hover{
  transform: translateY(-2px);
  color: rgba(58,163,142,.95) !important;
}

.contact-btn:active{
  transform: translateY(-1px);
}

.btn-ico{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;

  background: rgba(255,255,255,.65);
  border: 1px solid rgba(58,163,142,.25);

  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.btn-text{
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .2px;
}


/* Divider */
.contact-divider{
  max-width: 1120px;
  margin: 22px auto 26px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(58,159,142,0),
    rgba(58,159,142,.55),
    rgba(125,211,252,.40),
    rgba(58,159,142,0)
  );
  opacity: .95;
  animation: pageFloatIn 0.7s cubic-bezier(.2,.8,.2,1) 0.4s both;
}

/* Images */
.contact-cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  animation: pageFloatIn 0.7s cubic-bezier(.2,.8,.2,1) 0.5s both;
}

.contact-figure,
.contact-figure figure{ margin: 0 !important; }

.contact-figure{
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10,26,61,.10);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.contact-figure:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.contact-figure img{
  width: 100% !important;
  height: clamp(220px, 26vw, 340px) !important;
  object-fit: cover;
  display: block;
}


/* Contact pages do not render a direct <main>, so make the content block fill spare vertical space. */
body:has(.contact-page) .wp-site-blocks > .entry-content,
body:has(.contact-page) .wp-site-blocks > .wp-block-post-content {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

body:has(.contact-page) .contact-page {
  flex: 1 0 auto;
}

/* =====================================================
   CONTACT — caption below image (REAL transparent style)
   ===================================================== */
body:has(.contact-page) figure.contact-figure{
  overflow: hidden !important;
  border-radius: 16px !important;
  background: transparent !important;  /* 去掉卡片白底 */
}

body:has(.contact-page) figure.contact-figure > figcaption.contact-caption{
  position: relative !important;
  margin: 0 !important;

  padding: 10px 6px 8px !important;
  text-align: center !important;

  font-size: .93rem !important;
  font-weight: 600 !important;
  letter-spacing: .15px !important;
  line-height: 1.35 !important;

  color: rgba(10,26,61,.88) !important;

  background: transparent !important;  /* 完全透明 */
  border-top: 1px solid rgba(10,26,61,.08) !important; /* 细分隔线 */

  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 860px){
  .contact-cols{ grid-template-columns: 1fr; }
  .contact-hero{ padding: 30px 18px 22px; }
}

@media (max-width: 600px){

  /* page padding */
  body:has(.contact-page) .contact-page{
    padding: 44px 0 54px !important;
    max-width: 100vw !important;
  }

  /* hero */
  body:has(.contact-page) .contact-hero{
    padding: 30px 8px 22px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* buttons */
  body:has(.contact-page) .contact-actions{
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  body:has(.contact-page) .contact-btn{
    width: 90% !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  body:has(.contact-page) .btn-ico{
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  body:has(.contact-page) .btn-text{
    font-size: 0.85rem !important;
  }

  /* lead text */
  body:has(.contact-page) .contact-hero .contact-lead{
    font-size: 0.94rem !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
  }

  /* location */
  body:has(.contact-page) .contact-location{
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 0 8px !important;
  }

  body:has(.contact-page) .contact-hero .contact-lead p,
  body:has(.contact-page) .contact-location p{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body:has(.contact-page) figure.contact-figure > figcaption.contact-caption,
  body:has(.contact-page) figure.contact-figure > figcaption.wp-element-caption{
    padding: 9px 8px 8px !important;
    font-size: .88rem !important;
  }
}


/* Additional CSS migrated from Twenty Twenty-Five customizer. */
/* Research 页淡绿色背景 */
body:has(.research-page),
body:has(.facilities-page){
  background: linear-gradient(
    180deg,
    rgba(13, 90, 74, 0.10) 0%,
    rgba(13, 90, 74, 0.05) 40%,
    rgba(13, 90, 74, 0.03) 65%,
    rgba(245, 250, 248, 1) 100%
  );
}


.site-header__brand{
  display: flex !important;
  flex-direction: row !important; 
  align-items: center;
  gap: 16px;
}

/* logo */
.site-logo{
  width: 55px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.25));
}

/* 文字区上下排 */
.site-header__brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}



/* Live preview compatibility: constellation lines use this animation. */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}



/* === CPS clean home about layout START === */
body.home .home-main .entry-content {
  margin: 0;
}

body.home .home-main .entry-content > .about-lab {
  margin-top: 0 !important;
}

body.home .about-lab {
  display: block !important;
}

body.home .about-lab__inner {
  width: min(1120px, calc(100% - 2 * var(--page-pad-x)));
  margin-inline: auto;
}

body.home .about-lab__image {
  margin: clamp(24px, 4vw, 44px) auto 0;
  max-width: min(940px, 100%);
}

body.home .about-lab__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(10, 26, 61, 0.14);
}
/* === CPS clean home about layout END === */


/* === CPS single-layer home layout START === */
body.home .home-main .entry-content {
  margin: 0;
}

body.home .home-main .entry-content > .about-lab {
  width: min(1120px, calc(100% - 2 * var(--page-pad-x)));
  margin: 0 auto !important;
  padding: clamp(28px, 5vw, 54px) 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.home .home-main .entry-content > .about-lab > :first-child {
  margin-top: 0 !important;
}

body.home .about-lab__title {
  text-align: left;
}

body.home .about-lab__image {
  margin: clamp(24px, 4vw, 44px) auto 0;
  max-width: min(940px, 100%);
}

body.home .about-lab__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(10, 26, 61, 0.14);
}
/* === CPS single-layer home layout END === */

/* === CPS home hero-to-content transition START === */
body.home {
  background: #f5faf8;
}

body.home header[data-big],
body.home header[data-big="true"] {
  box-shadow: none;
  margin-bottom: 0 !important;
}

body.home header[data-big] + .home-main,
body.home header[data-big="true"] + .home-main,
body.home .wp-block-template-part:has(header[data-big]) + .home-main {
  position: relative;
  z-index: 3;
  margin-top: clamp(-72px, -5vw, -44px) !important;
  padding-top: clamp(86px, 7vw, 126px);
  background: linear-gradient(
    180deg,
    rgba(245, 250, 248, 0) 0%,
    rgba(245, 250, 248, 0.82) 42%,
    #f5faf8 100%
  ) !important;
}

body.home .wp-block-template-part:has(header[data-big]) + .home-main::before,
body.home header[data-big] + .home-main::before,
body.home header[data-big="true"] + .home-main::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 768px) {
  body.home .wp-block-template-part:has(header[data-big]) + .home-main,
  body.home header[data-big] + .home-main,
  body.home header[data-big="true"] + .home-main {
    margin-top: -34px !important;
    padding-top: 58px;
  }
}
/* === CPS home hero-to-content transition END === */

/* === CPS maintainable team page START === */
/* Keep /team editable while matching the legacy /groups/team visual format. */
.team-main {
  margin-top: 0 !important;
}

.team-main .entry-content,
.team-main .wp-block-post-content {
  margin: 0;
}

.team-pi-section {
  display: flex;
  justify-content: center;
  margin: 0 0 38px;
}

.team-pi-card {
  width: min(320px, 100%);
}

.team-section {
  margin-top: 34px;
}

.team-section-title {
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  font-weight: 660;
  color: #0a1a3d;
  border-bottom: 1px solid rgba(58, 159, 142, 0.28);
}

.team-section-title::before {
  content: none !important;
}

.team-roster-panel {
  margin-top: 34px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.team-roster-panel .team-section-title {
  margin-bottom: 16px;
}

.team-roster-group {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.team-subsection-title {
  margin: 0 0 12px;
  color: rgba(19, 34, 58, 0.72);
  font-size: 1rem;
  font-weight: 660;
  letter-spacing: 0;
  text-transform: none;
}

.team-name-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 28px;
  margin: 0;
}

.team-name-list--single {
  grid-template-columns: minmax(220px, 1fr);
  max-width: 100%;
}

.team-chip {
  display: block;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(19, 34, 58, 0.72);
  font-size: 0.95rem;
  font-weight: 520;
  line-height: 1.7;
}

.team-chip-meta {
  margin-left: 6px;
  color: rgba(19, 34, 58, 0.55);
  font-size: 0.9rem;
  font-weight: 520;
  white-space: nowrap;
}

.team-avatar-fallback {
  display: none !important;
}

@media (max-width: 980px) {
  .team-name-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .team-name-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .team-name-list {
    grid-template-columns: 1fr;
  }
}
/* === CPS maintainable team page END === */

/* === CPS maintainable facilities page START === */
.facilities-main {
  margin-top: 0 !important;
  background: transparent;
}

.facilities-main .entry-content,
.facilities-main .wp-block-post-content {
  margin: 0;
}

.facilities-page {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) 0 clamp(64px, 7vw, 92px);
  color: #203044;
  font-family: inherit;
}

.facilities-intro {
  max-width: 940px;
  margin: 0 auto clamp(34px, 5vw, 54px);
  text-align: center;
}

.facilities-page h1 {
  margin: 0 0 16px;
  color: #0a1a3d;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.facilities-lead {
  margin: 0 auto;
  max-width: 900px;
  color: #5e6b7d;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.85;
  text-align: center !important;
  word-spacing: normal !important;
}

.facilities-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.facility-card {
  grid-column: span 3;
  position: relative;
  min-height: 260px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(238, 248, 246, 0.55);
  box-shadow: 0 18px 52px rgba(17, 44, 73, 0.10);
}

.facility-card--wide {
  grid-column: span 6;
  min-height: clamp(320px, 42vw, 520px);
}

.facility-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease, filter 320ms ease;
}

.facility-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}

@media (max-width: 900px) {
  .facilities-gallery {
    grid-template-columns: 1fr;
  }

  .facility-card,
  .facility-card--wide {
    grid-column: auto;
    min-height: 240px;
  }
}

@media (max-width: 768px) {
  .facilities-page {
    width: min(100% - 32px, 1120px);
    padding-top: 34px;
  }
}
/* === CPS maintainable facilities page END === */

/* === CPS maintainable research page START === */
.research-main {
  margin-top: 0 !important;
  background: transparent;
}

.research-main .entry-content,
.research-main .wp-block-post-content {
  margin: 0;
}

.research-page {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(40px, 5.4vw, 64px) 0 clamp(64px, 7vw, 92px);
  color: #203044;
  font-family: inherit;
}

.research-section {
  margin: 0;
}

.research-section__title {
  margin: 0 0 26px;
  padding-bottom: 14px;
  color: #0a1a3d;
  font-size: clamp(1.45rem, 2.2vw, 1.78rem);
  font-weight: 760;
  letter-spacing: -0.025em;
  border-bottom: 1px solid rgba(58, 159, 142, 0.28);
}

.research-list {
  display: grid;
  gap: 24px;
}

.research-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: clamp(22px, 3.2vw, 38px);
  align-items: center;
  padding: clamp(18px, 2.8vw, 30px);
  border: 1px solid rgba(10, 26, 61, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 48px rgba(17, 44, 73, 0.08);
}

.research-card__media {
  margin: 0;
}

.research-card__image {
  display: block;
  width: 100%;
  height: clamp(150px, 17vw, 220px);
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(17, 44, 73, 0.12);
}

.research-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(150px, 17vw, 220px);
  border-radius: 16px;
  border: 1px dashed rgba(58, 159, 142, 0.38);
  background:
    linear-gradient(135deg, rgba(58, 159, 142, 0.10), rgba(125, 211, 252, 0.08)),
    rgba(255, 255, 255, 0.48);
  color: rgba(10, 26, 61, 0.42);
  font-size: 0.86rem;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.research-card__body {
  min-width: 0;
}

.research-card__eyebrow {
  margin: 0 0 8px;
  color: rgba(58, 159, 142, 0.96);
  font-size: 0.82rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.research-card__title {
  margin: 0 0 12px;
  color: #0a1a3d;
  font-size: clamp(1.18rem, 1.8vw, 1.46rem);
  font-weight: 740;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.research-card__text {
  margin: 0;
  color: #405064;
  font-size: clamp(0.98rem, 1.05vw, 1.04rem);
  line-height: 1.78;
  text-align: justify;
  text-justify: inter-word;
}

.research-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.research-card__tags li {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(58, 159, 142, 0.08);
  color: rgba(10, 26, 61, 0.74);
  font-size: 0.82rem;
  font-weight: 620;
}

.research-card__tags li.research-card__tag--review {
  background: rgba(220, 38, 38, 0.10);
  color: rgba(185, 28, 28, 0.92);
}

.research-card__status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.10);
  color: rgba(51, 65, 85, 0.92);
  border: 1px solid rgba(71, 85, 105, 0.16);
  font-size: 0.68rem;
  font-weight: 740;
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.research-card__status--under-review {
  background: rgba(245, 158, 11, 0.14);
  color: rgba(180, 83, 9, 0.96);
  border-color: rgba(245, 158, 11, 0.24);
}

.research-card__status--published {
  background: rgba(16, 185, 129, 0.13);
  color: rgba(4, 120, 87, 0.96);
  border-color: rgba(16, 185, 129, 0.22);
}

.research-card__status--preprint {
  background: rgba(14, 165, 233, 0.13);
  color: rgba(3, 105, 161, 0.96);
  border-color: rgba(14, 165, 233, 0.22);
}

@media (max-width: 820px) {
  .research-page {
    width: min(100% - 32px, 1120px);
    padding-top: 34px;
  }

  .research-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .research-card__image,
  .research-card__placeholder {
    height: clamp(190px, 48vw, 300px);
  }

  .research-card__text {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .research-page {
    width: min(100% - 24px, 1120px);
    padding: 28px 0 56px;
  }

  .research-section__title {
    margin-bottom: 18px;
    padding-bottom: 10px;
    font-size: 1.34rem;
  }

  .research-list {
    gap: 18px;
  }

  .research-card {
    gap: 15px;
    padding: 14px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(17, 44, 73, 0.07);
  }

  .research-card__image,
  .research-card__placeholder {
    height: clamp(158px, 52vw, 230px);
    border-radius: 14px;
  }

  .research-card__eyebrow {
    margin-bottom: 6px;
    font-size: 0.72rem;
    line-height: 1.35;
    letter-spacing: 0.06em;
  }

  .research-card__title {
    margin-bottom: 9px;
    font-size: 1.12rem;
    line-height: 1.28;
  }

  .research-card__text {
    font-size: 0.94rem;
    line-height: 1.68;
    text-align: left;
  }

  .research-card__tags {
    gap: 7px;
    margin-top: 14px;
  }

  .research-card__tags li {
    padding: 4px 8px;
    font-size: 0.76rem;
  }

  .research-card__status {
    top: 9px;
    right: 9px;
    padding: 4px 7px;
    font-size: 0.62rem;
  }
}

@media (max-width: 420px) {
  .research-page {
    width: min(100% - 18px, 1120px);
    padding-top: 24px;
  }

  .research-card {
    padding: 12px;
    border-radius: 16px;
  }

  .research-card__image,
  .research-card__placeholder {
    height: clamp(138px, 50vw, 190px);
    border-radius: 12px;
  }

  .research-card__title {
    font-size: 1.04rem;
  }

  .research-card__text {
    font-size: 0.91rem;
    line-height: 1.62;
  }
}


/* Long research images: duplicate the image in a track for seamless horizontal/vertical loops. */
.research-card__media--pan {
  position: relative;
  overflow: hidden;
  height: clamp(150px, 17vw, 220px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 34px rgba(17, 44, 73, 0.12);
}

.research-card__pan-track {
  display: flex;
  will-change: transform;
}

.research-card__media--pan-x .research-card__pan-track {
  width: 350%;
  height: 100%;
  animation: researchImagePanX 22s linear infinite;
}

.research-card__media--pan-y .research-card__pan-track {
  flex-direction: column;
  width: 100%;
  height: 320%;
  animation: researchImagePanY 24s linear infinite;
}

.research-card__media--pan .research-card__image--pan {
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}

.research-card__media--pan-x .research-card__image--pan {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.research-card__media--pan-y .research-card__image--pan {
  flex: 0 0 50%;
  width: 100%;
  height: 50%;
  object-fit: cover;
  object-position: center top;
}

@keyframes researchImagePanX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes researchImagePanY {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .research-card__media--pan .research-card__pan-track {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 820px) {
  .research-card__media--pan {
    height: clamp(190px, 48vw, 300px);
  }
}

@media (max-width: 640px) {
  .research-card__media--pan {
    height: clamp(158px, 52vw, 230px);
  }

  .research-card__media--pan-x .research-card__pan-track {
    width: 370%;
  }
}

@media (max-width: 420px) {
  .research-card__media--pan {
    height: clamp(138px, 50vw, 190px);
  }
}

/* === CPS maintainable research page END === */

/* === CPS team page groups snapshot format START === */
/* /team mirrors the /groups/team chip rhythm with transparent chips. */
body.page-id-92 .groups-snapshot {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #13223a;
}

body.page-id-92 .groups-snapshot .team-page {
  box-sizing: border-box;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px var(--page-pad-x) 60px;
}

body.page-id-92 .groups-snapshot .team-pi-section {
  display: flex;
  justify-content: center;
  margin: 8px 0 34px;
}

body.page-id-92 .groups-snapshot .team-pi-card {
  max-width: 240px;
}

body.page-id-92 .groups-snapshot .team-intro h1 {
  text-align: center;
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  color: #0a1a3d;
}

body.page-id-92 .groups-snapshot .team-group-photo {
  width: min(1120px, 100%);
  margin: 34px auto 38px;
  text-align: center;
}

body.page-id-92 .groups-snapshot .team-group-photo img,
body.page-id-92 .groups-snapshot .team-group-photo__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1900 / 1080;
  height: auto;
  border-radius: 22px;
  object-fit: contain;
  border: 1px solid rgba(58, 159, 142, 0.18);
  background:
    linear-gradient(135deg, rgba(58, 159, 142, 0.10), rgba(125, 211, 252, 0.08)),
    rgba(255, 255, 255, 0.48);
  box-shadow: 0 18px 46px rgba(17, 44, 73, 0.10);
  color: rgba(10, 26, 61, 0.42);
}

body.page-id-92 .groups-snapshot .team-group-photo__placeholder span {
  font-size: 0.9rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.page-id-92 .groups-snapshot .team-group-photo figcaption {
  margin-top: 10px;
  color: rgba(19, 34, 58, 0.58);
  font-size: 0.9rem;
  font-weight: 560;
}

body.page-id-92 .groups-snapshot .team-section-title {
  text-align: center;
  margin: 34px 0 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(58, 159, 142, 0.28) !important;
  font-size: 1.45rem;
  color: #0a1a3d;
}

body.page-id-92 .groups-snapshot .team-subsection-title {
  text-align: center;
  margin: 22px 0 14px;
  font-size: 1.05rem;
  color: rgba(10, 26, 61, 0.84);
}

body.page-id-92 .groups-snapshot .team-roster-panel {
  max-width: 960px;
  margin: 38px auto 0;
}

body.page-id-92 .groups-snapshot .team-name-list,
body.page-id-92 .groups-snapshot .team-name-list--single {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
}

body.page-id-92 .groups-snapshot .team-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(19, 34, 58, 0.78);
  box-shadow: none !important;
  font-size: 0.95rem;
  font-weight: 520;
  line-height: 1.4;
  white-space: nowrap;
}

body.page-id-92 .groups-snapshot .team-chip-meta {
  margin-left: 5px;
  color: rgba(19, 34, 58, 0.52);
}

@media (max-width: 600px) {
  body.page-id-92 .groups-snapshot .team-page {
    padding: 44px 20px 56px;
  }
}
/* === CPS team page groups snapshot format END === */