/* ============================================================
   v4 · 大事记（/milestones/）· 彩带式时间轴
   一条一条的横向条带：左年份 / 中间文字 / 右侧小缩略图，
   照片只做点缀，不做主角。设计基调仍是浅底 + 雅思红 #C8102E。
   ============================================================ */

/* ===== 大事记 · 3D 环形轮播 ===== */
.ms-ring-section {
  /* 这页内容只有一圈照片，上面没有导语了，用通用的 72px 会很空 */
  padding-top: 26px;
  padding-bottom: 44px;
}
/* 玻璃展台：深色底 + 两团彩色光晕，环形照片压在玻璃上才显得高级；
   深底和浅底页面之间靠圆角和投影过渡，不做生硬的一条黑边 */
.ms-stage-panel {
  position: relative;
  isolation: isolate;
  border-radius: 26px;
  overflow: hidden;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* 冷底（靛蓝炭黑）+ 左边一团品牌红、右上偏蓝、底下一道青光：
     红只做"一点"，蓝青撑住科技感，整体别搞成节日彩灯 */
  background:
    radial-gradient(112% 74% at 12% -10%, rgba(214, 24, 58, 0.34), transparent 58%),
    radial-gradient(88% 68% at 88% -4%, rgba(74, 116, 255, 0.26), transparent 62%),
    radial-gradient(76% 62% at 52% 122%, rgba(56, 190, 214, 0.16), transparent 64%),
    linear-gradient(168deg, #171a24 0%, #12141c 46%, #0b0d13 100%);
  box-shadow:
    0 40px 74px -34px rgba(10, 12, 22, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 0 0 1px rgba(120, 160, 255, 0.05);
}
/* 顶边一道极细的渐变亮线，像屏幕边缘的高光 */
.ms-stage-panel::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120, 170, 255, 0.55) 26%, rgba(255, 255, 255, 0.7) 50%, rgba(214, 24, 58, 0.55) 74%, transparent);
}
/* 四角定位括号：科技界面最省事也最有效的一笔，纯背景渐变画，不占布局 */
.ms-stage-panel::after {
  content: '';
  position: absolute;
  inset: 13px;
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) left top / 16px 1px no-repeat,
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) left top / 1px 16px no-repeat,
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) right top / 16px 1px no-repeat,
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) right top / 1px 16px no-repeat,
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) left bottom / 16px 1px no-repeat,
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) left bottom / 1px 16px no-repeat,
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) right bottom / 16px 1px no-repeat,
    linear-gradient(rgba(190, 210, 255, 0.85), rgba(190, 210, 255, 0.85)) right bottom / 1px 16px no-repeat;
}
/* 网格底纹 + 地平线：只在中部显影，边缘化开，别糊满整块 */
.ms-hud {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(150, 180, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 180, 255, 0.045) 1px, transparent 1px);
  background-size: 58px 58px, 58px 58px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(78% 64% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.6) 52%, transparent 86%);
  mask-image: radial-gradient(78% 64% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.6) 52%, transparent 86%);
}
/* 地平线：展台底部一道冷光，环像立在上面而不是浮着 */
.ms-hud::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 170, 255, 0.55) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(120, 170, 255, 0.55) 70%, transparent);
  box-shadow: 0 0 26px rgba(96, 150, 255, 0.45);
}

.ms-ring-wrap {
  position: relative;
  z-index: 1;
  height: 500px;
  margin: -6px 0 -10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ms-ring-stage {
  position: absolute;
  inset: 0;
  perspective-origin: 50% 46%;
}
.ms-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  /* ⚠️ 这里必须有真实尺寸。曾经写成 0×0，Chrome 会按 0×0 给整个 3D 合成层
     生成纹理，环上的照片被低分辨率栅格化，再高清的图都被糟蹋成糊的。
     尺寸 = 一张卡的大小，居中用负 margin 拉回来，旋转原点仍是卡片中心。 */
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-h) / -2);
  transform-style: preserve-3d;
  will-change: transform;
  /* 自转交给 CSS 动画，跑在合成器线程上：GPU 只需栅格化一次纹理，
     之后每帧只是顶点变换。原来用 rAF 每帧写 transform，浏览器会当成
     "样式变更"反复重绘，转动中的照片就被重采样成半糊状态了。
     ⚠️ 不要再在这里写 transform，动画会盖掉它。 */
  animation: ms-spin 48s linear infinite;
}
@keyframes ms-spin {
  from {
    transform: translate3d(0, var(--ms-dy, 0px), 0) rotateX(-10deg) rotateY(0deg);
  }
  to {
    transform: translate3d(0, var(--ms-dy, 0px), 0) rotateX(-10deg) rotateY(-360deg);
  }
}
/* 鼠标悬停 / 手指按住 → 暂停 */
.ms-ring-stage.is-paused .ms-ring {
  animation-play-state: paused;
}
/* 系统开了「减少动效」时，site.css 那条全局 * 规则会把所有动画压到 0.01ms。
   环是无限循环的，被压完就成了疯转。这里用 JS 写进来的 --ms-period 顶回去，
   环照常按"停 2 秒 / 走 0.7 秒"的节奏走。 */
@media (prefers-reduced-motion: reduce) {
  .ms-ring {
    animation-duration: var(--ms-period, 62.1s) !important;
  }
}
.ring-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  /* 玻璃卡：半透明乳白 + 顶部一道亮边，靠渐变做出厚度，不挂 backdrop-filter
     （3D 变换元素上挂滤镜会强制按布局尺寸栅格化，照片立刻变糊） */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.075) 42%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 22px 46px -16px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  text-decoration: none;
  transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 暗化用半透明遮罩，不用 filter：filter 会强制浏览器按布局尺寸先栅格化再放大，照片就糊了 */
  transition: box-shadow 0.35s var(--ease);
}
.ring-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 10, 0.42);
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
/* 正面卡只靠"不被压暗"来突出（下面的 ::after 遮罩透明），
   不改 transform / box-shadow —— 那会让这张卡每次转到正面都重新
   栅格化一次，转起来就一卡一卡、照片发虚。 */
.ring-item.is-front::after {
  opacity: 0;
}
.ri-photo {
  display: block;
  position: relative;
  height: 63%;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ri-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 照片下缘往卡身里化开，看着像照片压在玻璃下面，而不是贴了张便利贴 */
.ri-photo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: linear-gradient(to bottom, transparent, rgba(26, 18, 24, 0.42));
  pointer-events: none;
}
.ri-photo-none {
  display: grid;
  place-items: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.35);
}
.ri-photo-none .ico {
  width: 40%;
  height: 40%;
}
.ri-body {
  display: block;
  padding: 11px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.09) 100%);
}
.ri-year {
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--card-w) * 0.135);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 8px 22px rgba(200, 16, 46, 0.42);
  font-variant-numeric: tabular-nums;
}
.ri-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- 专题页 ---------- */
.milestone-page .ms-year-xl {
  margin: 4px 0 2px;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(54px, 11vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.milestone-page .ms-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.milestone-page .pagehero-article h1 {
  max-width: 24em;
}

/* ============================================================
   关于我们 · 资质与荣誉
   ============================================================ */

/* 证照 / 授牌：竖版证书图墙 */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cert-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.cert-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 16, 46, 0.24);
  box-shadow: 0 14px 30px rgba(113, 12, 27, 0.11);
}

.cert-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  background: #F3F1F2;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.cert-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.cert-card:hover .cert-shot img {
  transform: scale(1.03);
}

.cert-body {
  padding: 14px 16px 16px;
}

.cert-body h3 {
  margin: 0 0 5px;
  font-size: 1.02rem;
  line-height: 1.4;
}

.cert-sub {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-2);
  font-size: 0.72rem;
  font-weight: 700;
}

.cert-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* 办学资质：无照片的文字清单 */
.license-block {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.license-block h3 {
  margin: 0 0 16px;
  font-size: 1.06rem;
  letter-spacing: 0.02em;
}

.license-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.license-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.license-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FBEFF1;
  color: var(--primary);
}

.license-ico .ico {
  width: 16px;
  height: 16px;
}

.license-txt b {
  display: block;
  font-size: 0.96rem;
  line-height: 1.5;
}

.license-txt p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.62;
}

.license-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* 历年荣誉：紧凑行式清单 */
.honor-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.honor-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}

.honor-row .honor-ico {
  display: grid;
  place-items: center;
  padding-top: 3px;
  color: var(--primary);
}

.honor-row .honor-ico .ico {
  width: 18px;
  height: 18px;
}

/* 有确切年份才显示，作为标题前的小红标 */
.honor-row .honor-year {
  display: inline-block;
  margin-right: 9px;
  font-family: var(--font-en);
  font-style: normal;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--primary);
  white-space: nowrap;
}

.honor-row h3 {
  margin: 0 0 3px;
  font-size: 1rem;
  line-height: 1.5;
}

.honor-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.62;
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ms-ring-wrap {
    height: 470px;
  }
}

@media (max-width: 720px) {
  .ms-ring-section {
    padding-top: 14px;
    padding-bottom: 28px;
  }
  .ms-stage-panel {
    border-radius: 18px;
    padding: 2px 0;
  }
  .ms-stage-panel::after {
    inset: 9px;
  }
  .ms-hud {
    background-size: 40px 40px, 40px 40px;
  }
  .ms-hud::after {
    bottom: 16px;
  }
  .ms-ring-wrap {
    height: 300px;
    margin: 0 0 -6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .ri-title {
    font-size: 0.68rem;
    line-height: 1.4;
  }
  .ri-body {
    padding: 8px 10px 10px;
  }
  .cert-grid {
    gap: 12px;
  }
  .honor-row {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    padding: 13px 0;
  }
}

@media (max-width: 420px) {
  .cert-grid {
    gap: 10px;
  }
  .license-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .license-block {
    margin-top: 26px;
    padding-top: 20px;
  }
  .cert-body {
    padding: 10px 11px 12px;
  }
  .cert-body h3 {
    font-size: 0.92rem;
  }
  .cert-body p {
    font-size: 0.82rem;
    line-height: 1.5;
  }
}

/* 证照放大查看 */
.zoom-box {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(18, 18, 20, 0.9);
  backdrop-filter: blur(2px);
}
.zoom-box.is-on {
  display: grid;
}
.zoom-box img {
  max-width: min(1100px, 100%);
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}
.zoom-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.zoom-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 720px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v4 · 师资（/teachers/）
   排法 2 / 4 / 3：上排两位总监（大卡 + 图录编号）、中排四位铺满、
   末排三位居中收尾。不套白卡、不加投影，靠照片和细红线撑版式。
   ============================================================ */
.tch-section {
  padding-top: 20px;
}

/* ---------- 页头 ---------- */
.tch-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 52px;
}
.tch-head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.tch-head p {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.78;
  color: var(--muted);
}
.tch-head-r {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding-bottom: 3px;
  white-space: nowrap;
}
.tch-num {
  font-family: var(--font-en);
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.tch-num-lb {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted-2);
}

/* ---------- 三排 ---------- */
.tch-rows {
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.tch-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 38px 24px;
}
/* 上排两位：比下面大一档，但不铺满整行，两侧留白当气口 */
.tch-row--a .tch-card--lead {
  flex: 0 1 calc((100% - 40px) / 2);
  max-width: 430px;
}
/* 中排四位：正好铺满一行 */
.tch-row--b .tch-card {
  flex: 0 1 calc((100% - 72px) / 4);
  max-width: 268px;
}
/* 末排三位：跟中排同尺寸，居中收窄 */
.tch-row--c .tch-card {
  flex: 0 1 calc((100% - 72px) / 4);
  max-width: 268px;
}

/* ---------- 卡片 ---------- */
.tch-card {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.tch-card-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: #F6F2F3;
}
.tch-row--a .tch-card-photo {
  aspect-ratio: 3 / 4;
}
.tch-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 0.9s var(--ease-out);
}
.tch-card:hover .tch-card-photo img {
  transform: scale(1.035);
}
/* 上排文字 */
.tch-card-body {
  padding-top: 15px;
}
.tch-kicker {
  margin: 0 0 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--primary);
}
.tch-card-name {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tch-card-name em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tch-card-years {
  margin: 8px 0 0;
  font-size: 0.74rem;
  line-height: 1.66;
  color: var(--muted-2);
}
.tch-card-body .tag-list {
  margin: 10px 0 0;
}
.tch-card-intro {
  margin: 10px 0 0;
  font-size: 0.83rem;
  line-height: 1.8;
  color: var(--ink-2);
}

/* 中/末排文字 */
.tch-item-name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.32;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.tch-item-name em {
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tch-rule {
  display: block;
  width: 26px;
  height: 2px;
  margin: 10px 0 9px;
  background: var(--primary);
  transition: width 0.45s var(--ease-out);
}
.tch-card:hover .tch-rule {
  width: 48px;
}
.tch-item-meta {
  margin: 0;
  font-size: 0.71rem;
  line-height: 1.66;
  color: var(--muted-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 金牌教师条带 ---------- */
.tch-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin: -14px 0 0;
}
.tch-band h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--ink);
}
.tch-band-lb {
  font-size: 0.635rem;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  white-space: nowrap;
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .tch-row--a .tch-card--lead {
    max-width: 380px;
  }
  /* 四列会挤成豆干，中/末排降到三列 */
  .tch-row--b .tch-card,
  .tch-row--c .tch-card {
    flex-basis: calc((100% - 48px) / 3);
    max-width: 268px;
  }
}
@media (max-width: 820px) {
  /* 标题下面不再有副标题，手机上别把人数块挤到标题下面另起一行，
     保持"标题在左、人数在右"同一条基线上 */
  .tch-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 36px;
  }
  .tch-num {
    font-size: 2rem;
  }
  .tch-num-lb {
    font-size: 0.66rem;
  }
  .tch-row--a .tch-card--lead {
    flex-basis: calc((100% - 20px) / 2);
    max-width: none;
  }
  .tch-rows {
    gap: 40px;
  }
}
@media (max-width: 560px) {
  /* 手机上三排全部统一成两列等宽，上排总监也不再单独放大：
     一排两张、规规矩矩往下走，不要一张大一张小。 */
  .tch-row--a .tch-card--lead,
  .tch-row--b .tch-card,
  .tch-row--c .tch-card {
    flex-basis: calc((100% - 14px) / 2);
    max-width: none;
  }
  .tch-row--a .tch-card-photo {
    aspect-ratio: 4 / 5;
  }
  .tch-row {
    gap: 26px 14px;
  }
  /* 卡片上只留姓名和教龄，简介、标签、职务都收进详情页，
     这样每张卡高度一致，网格才齐。 */
  .tch-card--lead .tch-card-intro,
  .tch-card--lead .tag-list,
  .tch-card--lead .tch-kicker {
    display: none;
  }
  .tch-card-name {
    font-size: 0.98rem;
  }
  .tch-card-years {
    margin-top: 6px;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--muted-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tch-item-name {
    font-size: 0.9rem;
  }
  .tch-band {
    margin-top: -6px;
  }
  .tch-band-lb {
    display: none;
  }
  .tch-num {
    font-size: 2.2rem;
  }
}

/* ============================================================
   教师个人页 /teachers/<slug>/
   左照片、右信息；不套白卡不加投影，靠留白和一条细红线收口。
   ============================================================ */
.tp-head {
  padding: 26px 0 0;
}
.tp-head .crumbs {
  margin: 0;
}
.tp-section {
  padding-top: 18px;
}
.tp-others-h {
  margin: 0 0 24px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--ink);
}
.tp-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.tp-photo {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: #F6F2F3;
}
.tp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.tp-kicker {
  margin: 0 0 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--primary);
}
.tp-name {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  display: flex;
  align-items: baseline;
  gap: 13px;
  flex-wrap: wrap;
}
.tp-name em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 46px;
  margin: 30px 0 0;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tp-fact--wide {
  flex: 1 1 100%;
}
.tp-facts dt {
  margin: 0 0 8px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--muted-2);
}
.tp-facts dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.tp-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tp-subjects li {
  padding: 3px 10px;
  border-radius: 4px;
  background: #f7f2f3;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
}
.tp-intro {
  margin: 26px 0 0;
  font-size: 0.95rem;
  line-height: 2.05;
  color: var(--ink-2);
}
.tp-tags {
  margin: 20px 0 0;
}
.tp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---------- 其他老师 ---------- */
.tp-others {
  margin-top: 76px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.tp-others-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 22px;
}
.tp-other {
  display: block;
  color: inherit;
  text-decoration: none;
}
.tp-other-photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 5px;
  background: #F6F2F3;
}
.tp-other-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 0.9s var(--ease-out);
}
.tp-other:hover .tp-other-photo img {
  transform: scale(1.035);
}
.tp-other b {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink);
}
.tp-other b em {
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tp-other-meta {
  display: block;
  margin-top: 5px;
  font-size: 0.7rem;
  color: var(--muted-2);
}

@media (max-width: 960px) {
  .tp-grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 40px;
  }
  .tp-others-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .tp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .tp-photo {
    max-width: 320px;
  }
  .tp-facts {
    gap: 18px 30px;
    margin-top: 24px;
  }
  .tp-intro {
    margin-top: 20px;
    line-height: 1.95;
  }
  .tp-others {
    margin-top: 52px;
    padding-top: 28px;
  }
  .tp-others-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
  }
}

/* ---------- 移动端顶栏按钮：把汉堡做明确 ----------
   原来只有 1px 浅灰描边 + 白底，白页头上看就是个空框，
   不点不知道是菜单。改成浅粉底、去掉描边、加粗线条。 */
@media (max-width: 960px) {
  .nav-toggle {
    border: none;
    background: #f7f2f3;
    width: 46px;
    height: 46px;
    padding: 12px 13px;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
  }
  .nav-toggle span {
    width: 100%;
    height: 2.5px;
    background: #C8102E;
    border-radius: 2px;
  }
  .nav-toggle[aria-expanded="true"] {
    background: #C8102E;
  }
  .nav-toggle[aria-expanded="true"] span {
    background: #fff;
  }
  .header-phone .ico {
    width: 22px;
    height: 22px;
  }
}


/* ============================================================
   备案行（ICP + 公安联网备案）
   窄屏两个号各自占一行，不留悬空的分隔点；底部留出悬浮按钮的高度。
   ============================================================ */
@media (max-width: 560px) {
  .footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .footer-meta .sep {
    display: none;
  }
  .site-footer {
    padding-bottom: 96px;
  }
  /* 免责声明绕开右下悬浮按钮 */
  .footer-note {
    padding-right: 78px;
  }
}