.team-page {
  position: relative;
  background: #f8f9ff;
  color: #111;
}
.team-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 18%, rgba(200, 225, 255, 0.45), transparent 28%),
    radial-gradient(circle at 90% 14%, rgba(180, 215, 255, 0.5), transparent 26%),
    radial-gradient(circle at 50% 62%, rgba(215, 235, 255, 0.35), transparent 24%),
    radial-gradient(circle at 82% 88%, rgba(190, 220, 255, 0.4), transparent 22%);
}
.team-layout {
  position: relative;
  display: grid;
  /* 与新闻中心 / 技术研发 / 科研平台等二级页保持一致：1232px 内容区，右侧正文保持 1000px 面板；
     左侧导航列保持 139px 宽（正文位置不动），导航自身按标题内容向左侧撑开（见 .team-rail）。 */
  grid-template-columns: 139px minmax(0, 1000px);
  gap: 14px;
  justify-content: start;
  width: min(1232px, calc(100% - 24px));
  margin: 0 auto;
  padding: 30px 0 80px;
}
.team-rail {
  position: sticky;
  top: 18px;
  align-self: start;
  /* 右边缘与 139px 导航列对齐，宽度由内容（图标 + 最多 5 个汉字的标题 + 箭头）决定后向左撑开：
     正文面板位置不动，也不需要 JS 测量，刷新/切换页面都不会闪。 */
  justify-self: end;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  padding: 8px;
  border: 1px solid #fff;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.team-rail a {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 38px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #949393;
  font-family: "微软雅黑", "Microsoft Yahei", Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.375px;
  text-decoration: none;
  transition: min-height 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.team-rail a:hover,
.team-rail a:focus { color: #949393; text-decoration: none; }
.team-rail a[data-on="true"] {
  height: auto;
  min-height: 50px;
  padding: 8px;
  border: 0;
  background: #2d79eb;
  color: #fff;
  box-shadow: 0 6px 16px rgba(45, 121, 235, 0.35);
}
.team-rail a[data-on="true"]:hover,
.team-rail a[data-on="true"]:focus { color: #fff; }
.team-rail a[data-on="true"]::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}
.team-rail-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.team-rail-label {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  /* 标题默认单行。5 个字以内（人才概况、中心主任、学科带头人……）不能用
     max-width 卡「正好 5 个字」的宽度：Safari 的中文字宽取整（以及「最小字号」
     设置）会比 Chrome 略宽一丁点，第 5 个字会被挤到第二行（学科带头 / 人）。 */
  white-space: nowrap;
  text-align: right;
}
/* 「技术委员会主任」这类超过 5 个字的标题由 team-view.tsx 拆成两段，
   这里让第二段换行（固定断在 5 个字之后，和浏览器字宽无关）：
   换行后的第二行居中于第一行下方，而不是贴右。
   只在桌面左侧竖排导航里生效：窄屏（<=980px）导航是横向一条，必须单行。 */
@media (min-width: 981px) {
  .team-rail a[data-wrap="true"] .team-rail-label { text-align: center; }
  .team-rail a[data-wrap="true"] .team-rail-label-rest { display: block; }
}
.team-rail-icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}
.team-rail-chevron {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: 17px;
  height: 15.33px;
  padding: 3px 5px;
}
.team-rail a[data-on="true"] .team-rail-chevron { width: 19px; }
.team-rail-chevron img {
  display: block;
  flex: none;
  width: 6.13333px;
  height: 10.8px;
}
.team-rail a[data-on="true"] .team-rail-icon { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) {
  .team-rail a { transition: none; }
}
.team-main { min-width: 0; overflow-x: clip; }
.team-section,
.tech-director-frame[id] { scroll-margin-top: 24px; }
.team-section { margin-bottom: 48px; }
.team-intro {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  padding: 30px;
  border: 1px solid #d9e2ff;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 20px -2px rgba(36, 104, 216, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(16px);
  font-family: "微软雅黑", "Microsoft Yahei", Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
}
.team-intro::before,
.team-intro::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.team-intro::before {
  top: -96px;
  right: -96px;
  width: 384px;
  height: 384px;
  background: linear-gradient(225deg, rgba(0, 79, 181, 0.1), rgba(159, 190, 255, 0.2) 50%, transparent);
  filter: blur(40px);
}
.team-intro::after {
  left: -80px;
  bottom: -80px;
  width: 320px;
  height: 320px;
  background: rgba(208, 228, 255, 0.3);
  filter: blur(24px);
}
.team-intro h1 {
  position: relative;
  margin: 1px 0 0;
  color: #000;
  font-family: "微软雅黑", "Microsoft Yahei", Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
  font-size: 36px;
  font-weight: 700;
  font-style: normal;
  line-height: 46px;
  letter-spacing: -0.9px;
}
.team-kicker {
  margin: 4px 0 16px;
  background: linear-gradient(180deg, #8993a4 28.125%, #deecff 87.294%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "微软雅黑", "Microsoft Yahei", Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.team-intro .team-kicker {
  margin: 4px 0 0;
  letter-spacing: 0;
  white-space: nowrap;
}
.team-title { position: relative; margin-bottom: 8px; text-align: center; }
.team-title .team-kicker { margin-bottom: 0; }
/* 「更多 ›」（标题右侧，16px）和「‹ 返回」（名录页 / 人物页，32px）共用同一套箭头文字样式：
   蓝色粗体 + 内联 SVG 箭头，箭头随字号等比缩放（描边也跟着变粗），由 flex 垂直居中。
   以前「›」是一个文字，跟汉字共用基线，会比汉字中心低 1～2px（行高 / 字体不同还会变），
   改成 SVG 后文字和箭头都不会错位。 */
.team-more,
.team-back {
  display: inline-flex;
  align-items: center;
  color: #0c75d8;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
/* 箭头墨迹约 4.2 × 7.2px（16px 字号时），盒子 5 × 8；「返回」按字号放大到 15 × 24，
   墨迹约 12.6 × 21.6、描边约 3.9px，和 32px 粗体文字的笔画重量相当。
   汉字墨迹中心比行盒中心略偏上（字体 ascent 大于 descent），上移 0.07em 做视觉居中：
   不靠字体基线和行高凑数，换字体、放大缩小后箭头墨迹中心仍对文字墨迹中心。 */
.team-chevron {
  display: block;
  flex: none;
  transform: translateY(-0.07em);
}
.team-more .team-chevron { width: 5px; height: 8px; }
.team-back .team-chevron { width: 15px; height: 24px; }
.team-more {
  position: absolute;
  top: 0;
  right: 0;
  gap: 5px;
  /* 与 .team-heading 的行高（36px × 1.2 = 43.2px）一致，按标题行垂直居中，不跟着 kicker 往下掉 */
  height: 43px;
  font-size: 16px;
}
.team-more:hover,
.team-more:focus,
.team-back:hover,
.team-back:focus { color: #004fb5; text-decoration: none; }
.team-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 0;
  color: #000;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.team-heading::before,
.team-heading::after {
  content: "";
  width: 92px;
  height: 30px;
  border-radius: 999px;
  flex: 0 0 92px;
}
.team-heading::before {
  background: linear-gradient(90deg, rgba(180, 210, 251, 0) 0%, #b4d2fb 100%);
}
.team-heading::after {
  background: linear-gradient(270deg, rgba(180, 210, 251, 0) 0%, #b4d2fb 100%);
}
.team-overview { position: relative; color: #424753; font-size: 14px; line-height: 1.75; }
.team-intro .team-overview {
  margin-top: 24px;
  color: #424753;
  font-family: "微软雅黑", "Microsoft Yahei", Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  letter-spacing: 0;
}
.team-overview p { margin: 0 0 16px; }
.team-intro .team-overview p {
  margin: 0 0 16px;
  color: #424753;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}
.team-overview p:last-child,
.team-intro .team-overview p:last-child { margin-bottom: 0; }

.feature-profile {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 380px;
}
.feature-profile-end { grid-template-columns: minmax(0, 1fr) 340px; }
.feature-profile-start { grid-template-columns: 340px minmax(0, 1fr); }
.feature-profile-end .feature-photo { grid-column: 2; grid-row: 1; }
.feature-profile-end .feature-copy { grid-column: 1; grid-row: 1; padding: 8px 0 8px 78px; }
.feature-profile-start .feature-photo { grid-column: 1; grid-row: 1; }
.feature-profile-start .feature-copy {
  grid-column: 2;
  grid-row: 1;
  padding: 8px 78px 8px 0;
  text-align: right;
}
.feature-photo {
  position: relative;
  z-index: 2;
  width: 340px;
  height: 340px;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(90, 120, 180, 0.35), transparent 62%),
    linear-gradient(210deg, rgba(63, 147, 185, 0.92), rgba(125, 138, 210, 0.92));
  box-shadow: 0 18px 40px rgba(55, 96, 168, 0.16);
}
.feature-photo img,
.feature-photo span {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.feature-photo span {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 64px;
  font-weight: 700;
}
.feature-name {
  position: absolute;
  z-index: 3;
  top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  min-height: 102px;
  padding: 14px 0;
  background: linear-gradient(180deg, #3962d0, #1d326a);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.feature-profile-end .feature-name { left: 0; }
.feature-profile-start .feature-name { right: 0; }
.feature-copy h2 {
  margin: 0;
  color: #000;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.feature-kicker {
  margin: 6px 0 18px;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.feature-profile-start .feature-pill { text-align: left; }
.feature-pill {
  position: relative;
  z-index: 1;
  background: #537fc2;
  color: #fff;
}
.feature-profile-end .feature-pill {
  margin-right: -86px;
  padding: 26px 128px 26px 28px;
  border-radius: 22px 170px 170px 22px;
}
.feature-profile-start .feature-pill {
  margin-left: -86px;
  padding: 26px 28px 26px 128px;
  border-radius: 170px 22px 22px 170px;
}
.feature-pill strong { display: block; font-size: 20px; font-weight: 700; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 12px 17px; margin-top: 8px; }
.feature-profile-start .feature-chips { justify-content: flex-start; }
.feature-chips span {
  padding: 2px 10px;
  border-radius: 999px;
  background: #dbe9ff;
  color: #004fb5;
  font-size: 12px;
  font-weight: 400;
}
.feature-pill p { margin: 14px 0 0; color: #c7cfe2; font-size: 14px; line-height: 1.7; }
.feature-pill a { display: inline-flex; margin-top: 12px; color: #fff; font-size: 13px; }

.leader-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px 48px;
  justify-content: center;
  align-items: start;
}
.leader-card:nth-child(3n+1),
.leader-card:nth-child(3n) { margin-top: 48px; }
.leader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 6px solid transparent;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 11px 22px rgba(0, 0, 0, 0.18);
  color: inherit;
  text-decoration: none;
}
.leader-card:hover { border-color: #6480fb; }
.leader-photo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 245px;
  overflow: hidden;
  border-radius: 28px 28px 200px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #a6bdfb);
}
.leader-photo img,
.leader-photo span {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.leader-photo span {
  display: grid;
  place-items: center;
  color: #1d4fb8;
  font-size: 48px;
  font-weight: 700;
}
.leader-card-body { width: 100%; text-align: center; }
.leader-card-body strong { display: block; color: #071d31; font-size: 20px; }
.leader-card-body em {
  display: block;
  margin-top: 4px;
  color: #004fb5;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}
.leader-tag {
  display: inline-block;
  max-width: 100%;
  margin-top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #3d5e99;
  font-size: 11px;
  font-weight: 500;
}
.leader-card-body p { margin: 12px 0 0; color: #737785; font-size: 13px; line-height: 1.65; text-align: left; }

.staff-kicker {
  margin: 2px 0 0;
  color: #3d5e99;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.staff-caption {
  max-width: 672px;
  margin: 8px auto 22px;
  color: #737785;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.staff-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 22px;
}
.staff-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  color: inherit;
  text-decoration: none;
}
.staff-portrait-photo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100px;
  height: 123px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(76, 146, 201, 0), #798eb0);
}
.staff-portrait-photo img,
.staff-portrait-photo span {
  display: block;
  width: 100px;
  height: 123px;
  object-fit: cover;
  object-position: center top;
}
.staff-portrait-photo span {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}
.staff-portrait-name {
  position: relative;
  z-index: 1;
  display: block;
  width: 85px;
  margin-top: -16px;
  padding: 3px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #52cffc, #0f76cb);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.staff-portrait:hover .staff-portrait-photo {
  box-shadow: 0 0 0 3px #fff, 0 4px 15px 6px #7bb2f9;
}
.staff-portrait:hover .staff-portrait-name {
  box-shadow: 0 0 0 2px #fff, 0 4px 11px #7bb2f9;
}

.team-train-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 30px;
}
.team-train-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 226px;
  padding: 21px;
  border: 1px solid rgba(217, 226, 255, 0.8);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px -2px rgba(36, 104, 216, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(16px);
}
.team-train-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #dbe9ff;
}
.team-train-icon img { display: block; }
.team-train-card h3 { margin: 8px 0 0; color: #004fb5; font-size: 17px; font-weight: 700; }
.team-train-card p {
  margin: 0;
  color: #737785;
  font-size: 13px;
  line-height: normal;
}
.team-train {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 49px;
  border: 1px solid rgba(217, 226, 255, 0.8);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 20px -2px rgba(36, 104, 216, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(16px);
}
.team-train::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 256px;
  height: 256px;
  border-radius: 999px;
  background: rgba(216, 226, 255, 0.4);
  filter: blur(64px);
  pointer-events: none;
}
.team-train-item { border-left: 4px solid #004fb5; padding-left: 24px; }
.team-train-item .team-overview { line-height: normal; }
.team-train-item .team-overview p { margin: 0; }
.team-empty { margin: 0; color: #737785; font-size: 14px; }
.team-status { padding: 80px 0; color: #5d7088; text-align: center; }

.person-sheet { background: #e5f0ff; }
.person-sheet { padding: 30px 0 48px; }
.person-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 与名录页 .directory-wrap、站点头部同宽（1232）：从名录页点进人物页、再点「返回」，
     版心宽度和「返回」按钮的 x 位置都不变，页面不会忽宽忽窄。 */
  width: min(1232px, calc(100% - 48px));
  margin: 0 auto;
  font-family: "微软雅黑", "Microsoft Yahei", Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
}
/* 名录页 / 人物页共用的「返回」：蓝色粗体 32px + 细长箭头，与需求方名录页参考图
   （docs/talent-directory/source-directory.webp）一致。
   宽高写死（89 = 箭头 15 + 间距 10 + 「返回」64），不靠内容撑开，也不在任何页面级
   样式表里覆盖：两页切换时按钮尺寸和位置完全一致；即使字体还没就绪，
   盒子也先占好位置，标题和下方卡片不会跟着跳，避免宽度上的闪烁。 */
.team-back {
  flex: none;
  align-self: flex-start;
  box-sizing: border-box;
  gap: 10px;
  width: 89px;
  height: 43px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 32px;
}
.person-stage { position: relative; min-height: 431px; }
.person-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 26px 40px;
  border-radius: 23px;
  background: #e0eef9;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.person-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-right: 280px;
}
.person-name strong {
  color: #071d31;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
}
.person-name span {
  color: #6f6f6f;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
}
.person-band {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 8px 12px;
  background: linear-gradient(90deg, #88b4ce, #fff);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}
.person-copy {
  box-sizing: border-box;
  max-width: 584px;
  margin: 0;
  padding: 8px 12px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}
.person-copy p { margin: 0; }
.person-copy span,
.person-copy font {
  font-family: inherit !important;
  font-size: 14px !important;
  color: #000;
}
.person-copy a { color: #0c75d8; text-decoration: underline; }
.person-photo {
  position: absolute;
  top: 17px;
  right: 49px;
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.person-photo img {
  display: block;
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: center top;
}
.person-photo span {
  display: grid;
  width: 300px;
  height: 300px;
  place-items: center;
  background: #c5d8ea;
  color: #071d31;
  font-size: 72px;
  font-weight: 700;
}
.person-status { margin: 0; padding: 24px 12px; color: #5d7088; }

/* 没有简介的人物：详情页只展示照片（姓名 / 身份保留），不出现空的「教师简介」「科学研究」栏。 */
.person-stage-portrait { min-height: 0; }
.person-card-portrait {
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px;
}
.person-card-portrait .person-name {
  justify-content: center;
  padding-right: 0;
  text-align: center;
}
.person-card-portrait .person-name strong { font-size: 40px; }
.person-photo-portrait {
  position: static;
  flex: none;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.tech-director-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  padding-top: 8px;
}
.tech-director-frame {
  container-type: inline-size;
  width: 100%;
}
.tech-director {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* 比例盒：画布 968×447，百分比 padding 按包含块宽度算，各浏览器都支持。
     不要用 calc(447px * 100cqi / 968px)：360 等旧内核里 calc() 不支持长度相乘，
     整条 height 声明失效，高度塌成 0，两张主任卡片就会上下叠在一起。 */
  padding-bottom: 46.177686%;
  color: inherit;
  text-decoration: none;
}
a.tech-director:hover,
a.tech-director:focus { color: inherit; text-decoration: none; }
.tech-director,
.tech-director * { box-sizing: border-box; }
.tech-director-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 968px;
  height: 447px;
  /* --tech-scale 由卡片组件按 frame 实测宽度写入，旧内核据此缩放；
     现代内核下面的 @supports 会用 100cqi 算，JS 未生效时也不闪。 */
  transform: scale(var(--tech-scale, 1));
  transform-origin: top left;
  font-family: "微软雅黑", "Microsoft Yahei", Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;
}
@supports (transform: scale(calc(100cqi / 968px))) {
  .tech-director-canvas { transform: scale(var(--tech-scale, calc(100cqi / 968px))); }
}
.tech-scene {
  position: absolute;
  z-index: 1;
  top: 67px;
  width: 517px;
  height: 380px;
}
.tech-director[data-side="start"] .tech-scene { left: -2px; }
.tech-director[data-side="end"] .tech-scene { right: -2px; }
.tech-scene-photo,
.tech-scene-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tech-layers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 12px 16px rgba(37, 74, 145, 0.16));
}
.tech-layer { position: absolute; background: #537fc2; }
.tech-layer-a { top: 168px; width: 519px; height: 206px; }
.tech-layer-b { top: 140px; width: 554px; height: 234px; }
.tech-layer-c { top: 155px; width: 467px; height: 215px; }
.tech-layer-d { top: 119px; width: 569px; height: 258px; }
.tech-director[data-side="start"] .tech-layer { border-radius: 999px 0 0 999px; }
.tech-director[data-side="end"] .tech-layer { border-radius: 0 999px 999px 0; }
.tech-director[data-side="start"] .tech-layer-a { left: 450.5px; }
.tech-director[data-side="start"] .tech-layer-b { left: 406.5px; }
.tech-director[data-side="start"] .tech-layer-c { left: 418.5px; }
.tech-director[data-side="start"] .tech-layer-d { left: 384.5px; }
.tech-director[data-side="end"] .tech-layer-a { right: 450.5px; }
.tech-director[data-side="end"] .tech-layer-b { right: 406.5px; }
.tech-director[data-side="end"] .tech-layer-c { right: 418.5px; }
.tech-director[data-side="end"] .tech-layer-d { right: 384.5px; }
.tech-portrait {
  position: absolute;
  z-index: 2;
  top: -11px;
  width: 443px;
  height: 443px;
}
.tech-director[data-side="start"] .tech-portrait { left: 71px; }
.tech-director[data-side="end"] .tech-portrait { right: 71px; }
.tech-portrait img,
.tech-portrait span {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tech-portrait span {
  display: grid;
  place-items: center;
  background: rgba(29, 50, 106, 0.35);
  color: #fff;
  font-size: 72px;
  font-weight: 700;
}
.tech-badge {
  position: absolute;
  z-index: 5;
  top: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 55px;
  min-height: 102px;
  padding: 8px 0;
  background: linear-gradient(180deg, #3962d0, #1d326a);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.tech-director[data-side="start"] .tech-badge { right: 36px; }
.tech-director[data-side="end"] .tech-badge { left: 36px; }
.tech-head {
  position: absolute;
  z-index: 5;
  top: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 320px;
}
.tech-director[data-side="start"] .tech-head { left: 500px; }
.tech-director[data-side="end"] .tech-head { right: 500px; }
.tech-head h2 {
  margin: 0;
  color: #000;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.tech-kicker {
  color: #000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.tech-body {
  position: absolute;
  z-index: 4;
  top: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 443px;
}
.tech-director[data-side="start"] .tech-body { left: 436.5px; }
.tech-director[data-side="end"] .tech-body { right: 436.5px; }
.tech-body strong {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.tech-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 17px;
  margin-top: 4px;
}
.tech-chips span {
  padding: 2px 10px;
  border-radius: 999px;
  background: #dbe9ff;
  color: #004fb5;
  font-size: 12px;
  line-height: 1.45;
}
.tech-body p {
  align-self: stretch;
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  color: #c7cfe2;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

@media (max-width: 980px) {
  .team-layout { grid-template-columns: 1fr; width: min(100% - 20px, 1000px); }
  .team-rail {
    position: static;
    flex-direction: row;
    align-items: center;
    width: 100%;
    overflow: auto;
    border-radius: 18px;
  }
  .team-rail a,
  .team-rail a[data-on="true"] {
    width: auto;
    height: auto;
    min-width: 108px;
    min-height: 38px;
  }
  .team-rail-label {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    font-size: 15px;
    letter-spacing: 0.375px;
    white-space: nowrap;
  }
  .feature-profile-end,
  .feature-profile-start { grid-template-columns: 1fr; min-height: 0; }
  .feature-profile-end .feature-photo,
  .feature-profile-start .feature-photo,
  .feature-profile-end .feature-copy,
  .feature-profile-start .feature-copy {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
    text-align: left;
  }
  .feature-photo { width: min(340px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto 16px; }
  .feature-name { position: static; width: auto; min-height: 0; margin-bottom: 12px; padding: 8px 16px; writing-mode: horizontal-tb; letter-spacing: 0.2em; }
  .feature-profile-end .feature-pill,
  .feature-profile-start .feature-pill { margin: 0; padding: 22px; border-radius: 24px; }
  .leader-list { grid-template-columns: 1fr; }
  /* 窄屏标题行放不下右侧「更多」，改为静态居中排在 kicker 下面，避免压住标题 */
  .team-more {
    position: static;
    display: inline-flex;
    height: auto;
    margin-top: 6px;
  }
  .leader-card,
  .leader-card:nth-child(3n+1),
  .leader-card:nth-child(3n) { margin-top: 0; }
  .team-train { padding: 24px; }
  .person-stage { min-height: 0; }
  .person-name { padding-right: 0; }
  .person-photo {
    position: static;
    width: 220px;
    height: 220px;
    margin: 0 auto;
  }
  .person-photo img,
  .person-photo span { width: 220px; height: 220px; }
  .person-copy { max-width: none; }
  .person-name strong { font-size: 36px; }
  .person-name span { font-size: 22px; }
}

@media (max-width: 640px) {
  .tech-director-frame { container-type: normal; }
  .tech-director { height: auto; padding-bottom: 0; }
  .tech-director-canvas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    transform: none;
    gap: 12px;
  }
  .tech-layers { display: none; }
  .tech-badge,
  .tech-head,
  .tech-scene,
  .tech-body {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: min(100%, 520px);
  }
  .tech-badge {
    order: 1;
    width: fit-content;
    min-height: 0;
    flex-direction: row;
    gap: 4px;
    padding: 8px 16px;
  }
  .tech-head { order: 2; }
  .tech-head h2,
  .tech-kicker { white-space: normal; }
  .tech-scene {
    order: 3;
    width: min(100%, 420px);
    height: 280px;
  }
  .tech-director[data-side="end"] .tech-scene,
  .tech-director[data-side="start"] .tech-scene,
  .tech-director[data-side="end"] .tech-badge,
  .tech-director[data-side="start"] .tech-badge,
  .tech-director[data-side="end"] .tech-head,
  .tech-director[data-side="start"] .tech-head,
  .tech-director[data-side="end"] .tech-body,
  .tech-director[data-side="start"] .tech-body,
  .tech-director[data-side="end"] .tech-portrait,
  .tech-director[data-side="start"] .tech-portrait {
    left: auto;
    right: auto;
    transform: none;
  }
  .tech-portrait {
    position: relative;
    order: 4;
    top: auto;
    left: auto;
    right: auto;
    width: 220px;
    height: 220px;
    margin-top: -190px;
  }
  .tech-body {
    order: 5;
    margin-top: 8px;
    padding: 22px 18px;
    background: #537fc2;
    border-radius: 28px;
  }
}

/* 窄屏：名录页 / 人物页的版心边距统一成 16px（和名录页一致），
   「返回」按比例缩到 24px，免得比窄屏标题（30px）还大。 */
@media (max-width: 620px) {
  .person-wrap { width: calc(100% - 32px); }
  .team-back {
    gap: 8px;
    width: 67px;
    font-size: 24px;
  }
  .team-back .team-chevron { width: 11px; height: 17.6px; }
}