@charset "utf-8";
/* ============================================================
   清琪雅苑艺术培训中心 · 官网设计系统 v1.0（2026-09-24）
   ------------------------------------------------------------
   品牌色沿用「青禾双色 v1.3」VIS 规范，官网做如下适配：
     · 大底：奶油亮白 #FFF9EF（替代纯白，更温润、贴合中式气质）
     · 主色：松烟绿 #006838（CTA / 强调 / 导航激活）
     · 次色：黛紫 #5A49B8（辅助强调 / 数据 / 印章元素）
     · 图形色：亮青绿 #00C48C、亮紫 #9C82E0（只做图形，绝不做文字）
   ⚠️ 可读性硬规则（VIS 手册一级红线，改样式前先读）：
     · 文字色仅允许：墨绿 #1F4A34 / 松烟绿 #006838 / 黛紫 #5A49B8
     · 白字只许出现在松烟绿 / 黛紫 / 深紫 / 墨绿底上
     · 绿底紫字、米底白字 = 一级事故（对比度≈1:1），禁止
   ============================================================ */

:root {
  /* ---------- 品牌色 ---------- */
  --brand: #006838;          /* 松烟绿：主色 */
  --brand-deep: #1F4A34;     /* 墨绿：正文 / 深底 */
  --brand-mid: #0A7A46;      /* 主色 hover 态 */
  --brand-light: #00C48C;    /* 亮青绿：仅图形（数字 / 圆点 / 短线） */
  --brand-bg: #DDF3E9;       /* 淡绿：卡片底 */
  --brand-soft: #F2FAF6;     /* 极淡绿：区块底 */

  --purple: #5A49B8;         /* 黛紫：次主色 */
  --purple-deep: #45358A;    /* 深紫 */
  --purple-light: #9C82E0;   /* 亮紫：仅图形 */
  --purple-bg: #ECE7F8;      /* 淡紫：卡片底 */

  /* ---------- 中性色 ---------- */
  --cream: #FFF9EF;          /* 奶油亮白：大底面 */
  --white: #FFFFFF;
  --ink: #14261C;            /* 一级文字（墨绿偏黑） */
  --ink-2: #3D4F45;          /* 二级文字 */
  --muted: #6B7C72;          /* 弱化文字 */
  --faint: #9AA89F;          /* 极弱文字 */
  --line: rgba(31, 74, 52, .12);
  --line-soft: rgba(31, 74, 52, .07);

  /* ---------- 圆角 / 阴影 ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --sh-sm: 0 2px 8px rgba(20, 38, 28, .06);
  --sh: 0 8px 24px rgba(20, 38, 28, .09);
  --sh-lg: 0 18px 48px rgba(20, 38, 28, .14);

  /* ---------- 版心 / 导航 ---------- */
  --page: 1280px;
  --nav-h: 78px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 品牌标语字体：阿里妈妈东方大楷（子集化，仅含「艺心致远雅韵登峰·」，约 4KB） */
@font-face {
  font-family: "AlimamaDFDK";
  src: url("/assets/font/AlimamaDFDK-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ============================================================
   基础重置
   ============================================================ */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* 锚点跳转时给吸顶导航留出让位 */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand-mid); }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* 2026-09-27c：UA 默认给 figure 加了 1em/40px 边距，
   之前没重置 ⇒ 图块比网格轨道窄 80px、图墙填不满一行。 */
figure { margin: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

.wrap { width: min(var(--page), 92vw); margin: 0 auto; }
.wrap-narrow { width: min(920px, 92vw); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   顶部导航 —— 老师核心要求：做大、平均分布、hover + 点击双交互、每项带下拉
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 249, 239, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .28s var(--ease), background .28s var(--ease);
}
/* 滚动后浮起来 */
.site-header.is-stuck {
  background: rgba(255, 249, 239, .97);
  box-shadow: 0 4px 22px rgba(20, 38, 28, .07);
}
.header-inner {
  width: min(1440px, 96vw);
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---------- 品牌区（LOGO + 名称） ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-logo { height: 40px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-deep);
  font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--faint);
  text-transform: uppercase;
}

/* ---------- 主导航：等宽平均分布（列数跟随菜单项数，勿再写死） ---------- */
.mainnav {
  flex: 1 1 auto;
  min-width: 0;
}
.nav-list {
  display: grid;
  /* 关键：等分列宽 ⇒ 「平均分布 + 屏幕宽度自适应」。
     ⚠️ 2026-11-04 修复：原为 repeat(7, …) 写死 7 列，新增「智慧家校」变 8 项后
     第 8 项「联系我们」被挤到第二行、页头压变形（全站 34 页均中招）。
     改用「自动列 + 等分」：以后再加栏目不用改这里，列数自动跟随。
     移动端单列在 ≤1239px 断点里用 grid-auto-flow: row 复位。 */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  height: var(--nav-h);
}
.nav-item { position: relative; display: flex; }

/* 主链接：整格可点，水平居中，高度拉满便于点按 */
.nav-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  white-space: nowrap;
  position: relative;
  transition: color .2s var(--ease);
}
/* 下划线滑动指示条 —— hover 与当前页都有 */
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: translateX(-50%);
  transition: width .24s var(--ease);
}
.nav-item:hover > .nav-link,
.nav-link:focus-visible {
  color: var(--brand);
}
.nav-item:hover > .nav-link::after,
.nav-item.is-open > .nav-link::after { width: 26px; }
.nav-item.is-current > .nav-link { color: var(--brand); }
.nav-item.is-current > .nav-link::after { width: 26px; }

/* 下拉箭头：独立小按钮，专门用于「点击展开」（与主链接跳转互不干扰） */
.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--faint);
  transition: transform .24s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.nav-caret svg { width: 9px; height: 9px; }
.nav-item:hover .nav-caret { color: var(--brand); background: var(--brand-bg); }
.nav-item.is-open .nav-caret {
  transform: rotate(180deg);
  color: var(--brand);
  background: var(--brand-bg);
}

/* ---------- 下拉菜单 ---------- */
.dropdown {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  min-width: 190px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 20;
}
/* 鼠标滑上去 ⇒ 展开 */
.nav-item:hover > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 点击箭头 ⇒ 展开（JS 加 is-open） */
.nav-item.is-open > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 下拉顶部小三角 */
.dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  background: var(--white);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), padding-left .16s var(--ease);
}
.dropdown a:hover,
.dropdown a:focus-visible {
  background: var(--brand-soft);
  color: var(--brand);
  padding-left: 16px;
}
/* 下拉项前的品牌小点（绿紫交替，图形色，非文字色） */
.dropdown a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-light);
  flex: 0 0 auto;
}
.dropdown a:nth-child(even)::before { background: var(--purple-light); }

/* ---------- 右上角：教师管理后台 ---------- */
.header-cta { flex: 0 0 auto; }

/* ---------- 汉堡按钮（移动端） ---------- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  color: var(--brand-deep);
  border: 1px solid var(--line);
  background: var(--white);
}
.burger svg { width: 20px; height: 20px; }
.burger .ico-close { display: none; }
.site-header.is-navopen .burger .ico-open { display: none; }
.site-header.is-navopen .burger .ico-close { display: block; }

/* ============================================================
   按钮
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--r-pill);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 1.5px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* 主按钮：松烟绿底白字（对比 6.91:1 达标） */
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 104, 56, .24);
}
.btn-primary:hover {
  background: var(--brand-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 104, 56, .3);
}
/* 次按钮：黛紫底白字 */
.btn-purple {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 8px 22px rgba(90, 73, 184, .24);
}
.btn-purple:hover {
  background: var(--purple-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(90, 73, 184, .3);
}
/* 描边按钮 */
.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: rgba(0, 104, 56, .32);
}
.btn-outline:hover {
  background: var(--brand-bg);
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
}
/* 深底上的描边按钮 */
.btn-ghost {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}
.btn-sm { padding: 10px 20px; font-size: 14.5px; }
.btn-lg { padding: 16px 36px; font-size: 17px; }
.btn-block { width: 100%; }

/* ============================================================
   首屏
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, #12352A 0%, #1F4A34 38%, #3A3566 100%);
  color: #fff;
  padding: 88px 0 96px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .3;
  transform: scale(1.04);
}
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 8% 8%, rgba(0, 104, 56, .55) 0%, transparent 55%),
    linear-gradient(158deg, rgba(18, 53, 42, .82) 0%, rgba(31, 74, 52, .72) 40%, rgba(58, 53, 102, .78) 100%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-latin {
  font-size: 12px;
  letter-spacing: .38em;
  color: rgba(255, 255, 255, .62);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 58px);
  letter-spacing: .04em;
  font-weight: 700;
  font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .3);
}
.hero-slogan {
  margin-top: 16px;
  font-family: "AlimamaDFDK", "Songti SC", "STSong", serif;
  font-size: clamp(22px, 3vw, 34px);
  color: rgba(255, 255, 255, .98);
  letter-spacing: .1em;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .32);
}
.hero-slogan .dot { color: var(--brand-light); margin: 0 10px; }
.hero-desc {
  margin-top: 20px;
  max-width: 660px;
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .8);
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
/* 首屏两栏：宽屏下左边文案、右边「园区即课堂」卡（第三十五轮补：原来单栏在 1440 宽下右半是空的） */
.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
}
@media (min-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .78fr); }
}
.hero-aside { min-width: 0; }
.hero-card {
  position: relative;
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 28px 24px 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
  overflow: hidden;
}
/* 顶部学科色条（绿 52% + 紫 48%）：沿用品牌「白卡 + 顶部色条」版式语言 */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand) 0 52%, var(--purple) 52% 100%);
}
.hero-card-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--purple);
}
.hero-card-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 16px;
}
.hero-card-nums b {
  display: block;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.hero-card-nums div + div b { color: var(--purple); }
.hero-card-nums span { font-size: 12.5px; color: var(--muted); }
.hero-card-list {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.hero-card-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* 青苗纹圆点：绿紫交替，仅图形用色 */
.hero-card-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-light);
}
.hero-card-list li:nth-child(even)::before { background: var(--purple-light); }
.hero-card-link {
  display: inline-flex;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.hero-card-link:hover { color: var(--purple); }

/* 首屏关键数据条 */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: 52px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
}
.hero-stat {
  background: rgba(255, 255, 255, .08);
  padding: 22px 16px;
  text-align: center;
}
.hero-stat b {
  display: block;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-light);   /* 亮青绿只做图形/数字，这里是大号数字，非正文 */
  font-variant-numeric: tabular-nums;
}
.hero-stat:nth-child(even) b { color: #C9B8F0; }
.hero-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .04em;
}

/* ============================================================
   版块通用
   ============================================================ */
.sec { padding: 88px 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
/* 向后兼容锚点（#works / #contact）：零高度不占位，只负责把旧链接接住并给吸顶导航让位 */
.anchor { display: block; height: 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
.sec-tight { padding: 64px 0; }
.sec-white { background: var(--white); }
.sec-soft { background: var(--brand-soft); }
.sec-purple { background: var(--purple-bg); }
.sec-dark { background: linear-gradient(158deg, #12352A, #1F4A34 55%, #3A3566); color: #fff; }

.sec-head { margin-bottom: 44px; }
.sec-head-center { text-align: center; }
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 14px;
}
.sec-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-light);
}
.sec-head-center .sec-eyebrow::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-light);
}
.sec-title {
  font-size: clamp(24px, 3.4vw, 38px);
  color: var(--brand-deep);
  letter-spacing: .02em;
  font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
}
.sec-dark .sec-title, .sec-dark .sec-sub { color: #fff; }
.sec-dark .sec-eyebrow { color: var(--brand-light); }
.sec-sub {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 720px;
}
.sec-head-center .sec-sub { margin-left: auto; margin-right: auto; }

/* ============================================================
   卡片
   ============================================================ */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
  overflow: hidden;
}
/* 卡片顶部学科/主题色条 */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: rgba(0, 104, 56, .2); }
.card:hover::before { transform: scaleX(1); }
.card-purple::before { background: var(--purple); }
.card-purple:hover { border-color: rgba(90, 73, 184, .22); }

.card h3 { font-size: 18px; color: var(--brand-deep); margin-bottom: 12px; }
.card-purple h3 { color: var(--purple-deep); }
.card p { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.card-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--brand-light);
  margin-bottom: 12px;
}
.card-purple .card-num { color: var(--purple-light); }

/* 带图卡片 */
.card-media { padding: 0; }
.card-media .media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--brand-soft);
}
.card-media .media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card-media:hover .media img { transform: scale(1.05); }
.card-media .body { padding: 22px 24px 26px; }

/* 图标卡（SVG 内联图标） */
.icon-card .ico {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg);
  color: var(--brand);
  margin-bottom: 18px;
}
.icon-card .ico svg { width: 22px; height: 22px; }
.icon-card.card-purple .ico { background: var(--purple-bg); color: var(--purple); }

/* ============================================================
   数据 / 战绩
   ============================================================ */
.stat-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.stat-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 20px;
  text-align: center;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.stat-box:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.stat-box b {
  display: block;
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.stat-box:nth-child(even) b { color: var(--purple); }
.stat-box span {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}
.stat-box i {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-style: normal;
  letter-spacing: .16em;
  color: var(--faint);
  text-transform: uppercase;
}

/* ============================================================
   师资
   ============================================================ */
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
/* 首页师资条四张卡（管理层三人 + 教学组长代表）：宽屏改四列 */
@media (min-width: 981px) {
  .faculty-grid.has-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 2026-09-27c：老师要求透明底 —— 卡片不再铺白，直接露出 body 的奶油底 --cream。
   注意：首页师资区块原来是 `sec sec-white`（白底），只改卡片还是白的，
   所以同步把首页那一段的 sec-white 去掉了（见下面的 HTML 步骤）。 */
.faculty {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.faculty:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.faculty-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0B0F14;
  overflow: hidden;
}
.faculty-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .6s var(--ease);
}
.faculty:hover .faculty-photo img { transform: scale(1.04); }
/* 头像下方的品牌渐变过渡 */
.faculty-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(11, 15, 20, .9), transparent);
}
.faculty-tag {
  position: absolute;
  left: 18px; bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
.faculty:nth-child(2) .faculty-tag { background: var(--purple); }
.faculty:nth-child(3) .faculty-tag { background: var(--brand-deep); }
.faculty-body { padding: 22px 24px 26px; }
.faculty-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.faculty-name b {
  font-size: 22px;
  color: var(--brand-deep);
  font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
  letter-spacing: .08em;
}
.faculty-name i {
  font-style: normal;
  font-size: 13px;
  color: var(--purple);
  font-weight: 600;
}
.faculty-body p { font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.faculty-list {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 7px;
}
.faculty-list li {
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}
.faculty-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-light);
}
.faculty-list li:nth-child(even)::before { background: var(--purple-light); }

/* ============================================================
   录取捷报墙（横向滚动跑马灯，展示录取通知书）
   ============================================================ */
.admit-marquee {
  position: relative;
  /* 2026-09-27b：原来是 overflow:hidden —— 一旦动画没跑（如系统开了减弱动效），
     被裁掉的后半段海报就完全够不到。改成可横向滚动：动画照跑，用户也能自己拖。 */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  /* 两侧渐隐遮罩，视觉更柔和 */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.admit-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: admit-scroll 64s linear infinite;
}
.admit-marquee:hover .admit-track { animation-play-state: paused; }
.admit-card {
  flex: 0 0 auto;
  width: 188px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.admit-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--sh); }
.admit-card img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
/*
  无缝循环：轨道共 32 张（16 张 × 2 遍），总宽 = 32w + 31g。
  平移一个循环应等于「16 张 + 16 个间距」= 16w + 16g，
  而 -50% 只有 16w + 15.5g，差半个间距，所以补上 gap/2 = 9px 才真正无跳变。
*/
@keyframes admit-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 9px)); }
}

/* 录取榜单表格 */
.table-scroll { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); }
table.rank {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--white);
  min-width: 520px;
}
table.rank th, table.rank td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
table.rank th {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.rank tr:last-child td { border-bottom: 0; }
table.rank tbody tr { transition: background .16s var(--ease); }
table.rank tbody tr:hover { background: var(--brand-soft); }
table.rank td:first-child { font-weight: 600; color: var(--ink); }
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-985 { background: var(--brand-bg); color: var(--brand); }
.badge-211 { background: var(--purple-bg); color: var(--purple); }
.badge-top { background: #FDF0DC; color: #8A5A15; }
.badge-dual { background: var(--brand-soft); color: var(--brand-deep); }

/* 榜单分组切换（纯 CSS :target + JS 页签） */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.tab {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  transition: all .18s var(--ease);
}
.tab:hover { border-color: var(--brand); color: var(--brand); }
.tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fade-up .32s var(--ease); }

/* ============================================================
   图片墙 / 相册
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.gallery-item {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--brand-soft);
  aspect-ratio: 4 / 3;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 14px 12px;
  font-size: 13.5px;
  color: #fff;
  background: linear-gradient(to top, rgba(11, 20, 16, .82), transparent);
  transform: translateY(6px);
  opacity: .92;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.gallery-item:hover figcaption { transform: translateY(0); opacity: 1; }
.gallery-item.span-2 { grid-column: span 2; aspect-ratio: 8 / 3; }
.gallery-item.tall { aspect-ratio: 3 / 4; grid-row: span 2; }

/* ============================================================
   时间轴 / 流程
   ============================================================ */
.steps4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: step;
  position: relative;
}
.step-item {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px 26px;
  counter-increment: step;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.step-item:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.step-item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 22px; right: 22px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-bg);
  font-variant-numeric: tabular-nums;
  transition: color .24s var(--ease);
}
.step-item:hover::before { color: var(--brand-light); }
.step-item h3 { font-size: 17px; color: var(--brand-deep); margin-bottom: 10px; }
.step-item p { font-size: 14px; line-height: 1.8; color: var(--ink-2); }

/* ============================================================
   课程卡（带令牌区，供 {{COURSES}} 注入）
   ============================================================ */
.courses { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.course {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
  overflow: hidden;
}
.course::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--brand-bg);
  opacity: .5;
  transition: transform .5s var(--ease);
}
.course:nth-child(even)::after { background: var(--purple-bg); }
.course:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(0, 104, 56, .22); }
.course:hover::after { transform: scale(1.25); }
.course > * { position: relative; z-index: 1; }
.course-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-bg);
  letter-spacing: .04em;
}
.course:nth-child(even) .course-tag { color: var(--purple); background: var(--purple-bg); }
.course h3 { font-size: 21px; color: var(--brand-deep); margin-bottom: 12px; }
.course-audience {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-mid);
  margin-bottom: 10px;
}
.course:nth-child(even) .course-audience { color: var(--purple); }
.course p { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); margin-bottom: 14px; }
.course-meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* ============================================================
   双栏文字 / 图文
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.split-rev { grid-template-columns: .95fr 1.05fr; }
.split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.prose p { font-size: 15.5px; line-height: 2; color: var(--ink-2); margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--brand-deep); font-weight: 700; }

/* 特点列表 */
.feat-list { display: grid; gap: 16px; margin-top: 26px; }
.feat-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.feat-list .fi {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--brand-bg);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.feat-list .fi svg { width: 17px; height: 17px; }
.feat-list li:nth-child(even) .fi { background: var(--purple-bg); color: var(--purple); }
.feat-list b { display: block; font-size: 15.5px; color: var(--brand-deep); margin-bottom: 3px; }
.feat-list span { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* 荣誉徽章墙 */
.honors { display: flex; flex-wrap: wrap; gap: 12px; }
.honor {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-2);
  transition: all .2s var(--ease);
}
.honor::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-light);
  flex: 0 0 auto;
}
.honor:nth-child(3n+2)::before { background: var(--purple-light); }
.honor:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}
.honor-major {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.honor-major::before { background: #fff; }
.honor-major:hover { background: var(--brand-mid); border-color: var(--brand-mid); color: #fff; }

/* 信息条 / 联系方式 */
.info-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.info-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.info-card .ico {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--brand-bg);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.info-card .ico svg { width: 20px; height: 20px; }
.info-card:nth-child(even) .ico { background: var(--purple-bg); color: var(--purple); }
.info-card h3 { font-size: 16px; color: var(--brand-deep); margin-bottom: 10px; }
.info-card p { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.info-card .placeholder {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: var(--r-xs);
  background: var(--brand-soft);
  font-size: 12.5px;
  color: var(--muted);
  border: 1px dashed var(--line);
}

/* 关键词卡（公众号指令） */
.kw-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kw-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.kw-item code {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
}
.kw-item:nth-child(even) code { background: var(--purple); }
.kw-item span { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* CTA 区块 */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 56px 48px;
  background: linear-gradient(140deg, #12352A, #1F4A34 50%, #3A3566);
  color: #fff;
  text-align: center;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
}
.cta-band::before {
  width: 300px; height: 300px;
  right: -110px; top: -130px;
  background: radial-gradient(circle, rgba(0, 196, 140, .34), transparent 68%);
}
.cta-band::after {
  width: 260px; height: 260px;
  left: -100px; bottom: -140px;
  background: radial-gradient(circle, rgba(156, 130, 224, .34), transparent 68%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(22px, 3.2vw, 32px); margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, .82); font-size: 15.5px; max-width: 640px; margin: 0 auto; }
.cta-band .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}

/* 页面小头图（子页面統一） */
.pagehead {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background: linear-gradient(150deg, #12352A, #1F4A34 55%, #3A3566);
  color: #fff;
}
.pagehead-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .26;
}
.pagehead-inner { position: relative; z-index: 2; }
.pagehead h1 {
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: .04em;
  font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
}
.pagehead p { margin-top: 14px; color: rgba(255, 255, 255, .8); font-size: 15.5px; max-width: 680px; }
/* 面包屑 */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .62);
}
.crumb a { color: rgba(255, 255, 255, .82); }
.crumb a:hover { color: #fff; }
.crumb .sep { opacity: .5; }

/* ============================================================
   页脚
   ============================================================ */
.site-foot {
  background: #10312A;
  color: rgba(255, 255, 255, .66);
  padding: 60px 0 0;
  font-size: 14px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.foot-brand .brand-logo { height: 38px; width: auto; margin-bottom: 18px; opacity: .95; }
.foot-brand p { font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .6); max-width: 320px; }
.foot-col h4 {
  font-size: 14px;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: .08em;
}
.foot-col ul { display: grid; gap: 10px; }
.foot-col a { color: rgba(255, 255, 255, .62); font-size: 13.5px; }
.foot-col a:hover { color: #fff; }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  /* ★ 2026-10-09（老师报「备案信息跨行了」）：
     原来是 space-between（左版权 / 右备案），老师要求**备案信息紧跟版权信息、落在同一行** ⇒
     改 flex-start：与上方「友情链接」行同为左对齐，版权与备案相邻成一行。
     ★ 窄屏（≤760px）本来就已 flex-start，这里只是把宽屏也对齐。 */
  justify-content: flex-start;
  align-items: center;
  padding: 24px 0 30px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .46);
}
.foot-icp { min-height: 16px; }
.foot-icp a { color: rgba(255, 255, 255, .46); }
.foot-icp a:hover { color: #fff; }
/* 公安联网备案：图标 + 编号是**一个整体**，任何情况下都不许被拆到两行。
   ⚠️ 图标必须 inline-block —— 本文件第 84 行有全局重置 `img{display:block}`，
   它会把这个行内小图标变成块级、独占一行，把备案号劈成三段（2026-10-09 线上缺陷）。
   行内样式已写死一份（portalRoutes.icpLine / IcpRecord.jsx），这里再兜一层。 */
.foot-mps { white-space: nowrap; }
.foot-mps img { display: inline-block; vertical-align: middle; }

/* 返回顶部 */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 104, 56, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .26s var(--ease);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-mid); color: #fff; transform: translateY(-3px); }
.to-top svg { width: 18px; height: 18px; }

/* ============================================================
   滚动淡入（JS 加 is-in 触发）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   响应式：导航先保住「平均分布」，再逐级降密，最后切汉堡
   ============================================================ */
/* 中屏：压缩字号与间距，但仍等宽平均分布
   ---- 2026-11-04 字号分档（8 项导航实测得出，改前先跑 1440/1366/1280/1240 四档探针）----
   最长标签「关于清琪雅苑」6 字 + 箭头，单项最少需要 6×字号 + 29px；
   8 项等分时可用宽度 ≈（0.96×视口 − 308）/8，据此倒推出下面四档。 */
@media (max-width: 1439px) { .nav-link { font-size: 15px; } }
@media (max-width: 1365px) { .nav-link { font-size: 14px; } }
@media (max-width: 1279px) { .nav-link { font-size: 13.5px; } }

@media (max-width: 1200px) {
  :root { --nav-h: 70px; }
  .header-inner { gap: 14px; width: 97vw; }
  .brand-logo { height: 34px; }
  .brand-name { font-size: 15.5px; }
  .header-cta .btn { padding: 10px 18px; font-size: 14px; }
}
@media (max-width: 1024px) {
  .brand-sub { display: none; }
  .split, .split-rev { grid-template-columns: 1fr; gap: 34px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* ≤1239px：切移动端汉堡菜单
   ⚠️ 2026-11-04 断点由 900 提到 1239：8 项导航在 1239 以下即使缩到 13.5px
   也会让「关于清琪雅苑」与「师资团队」粘连（实测 1024 宽两项文字相接、箭头被吃）。
   1239 是「13.5px 刚好放得下 8 项」的临界值。 */
@media (max-width: 1239px) {
  :root { --nav-h: 62px; }
  .header-inner { height: var(--nav-h); gap: 10px; }
  .burger { display: flex; }
  .header-cta { order: 2; }
  .mainnav {
    order: 3;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(20, 38, 28, .14);
    /* 收起态 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .site-header.is-navopen .mainnav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-list {
    grid-auto-flow: row;          /* 关键：复位桌面端的「自动列」，否则 8 项会横排溢出 */
    grid-template-columns: 1fr;   /* 移动端改单列 */
    height: auto;
    padding: 10px 0 20px;
  }
  .nav-item { flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
  .nav-link {
    justify-content: flex-start;
    padding: 15px 6vw;
    font-size: 16.5px;
  }
  .nav-link::after { display: none; }
  .nav-item.is-current > .nav-link { background: var(--brand-soft); }
  /* 移动端下拉改为常驻展开（点击父项切换）。
     ⚠️ 选择器必须用 .mainnav .dropdown（0,2,0）：pages.css 末尾加载且有一条
     无媒体查询的 `.dropdown { display: grid }`（0,1,0），同特异性按顺序它赢，
     会把这里的 display:none 压掉 ⇒ 收起菜单后下拉仍在布局里、visibility:visible
     使其可点击，一层透明链接盖住页头拦截点击（2026-10-27 实测「点下载跳师资页」根因）。
     提到 0,2,0 后稳压 pages.css，且不影响下方 is-open 展开（0,3,0）。 */
  .mainnav .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 10px;
    background: transparent;
    min-width: 0;
    display: none;
  }
  .mainnav .dropdown::before { display: none; }
  .mainnav .nav-item.is-open > .dropdown { display: block; }
  .mainnav .nav-item:hover > .dropdown { display: none; }
  .mainnav .nav-item.is-open:hover > .dropdown { display: block; }
  /*
    重要：移动端下拉是「文档流内展开」，必须把 base 里的 translate(-50%) 压掉。
    base 的 .nav-item:hover / .nav-item.is-open > .dropdown 特异度是 (0,3,0)，
    高于上面 .dropdown 的 (0,1,0)，只写 .dropdown{transform:none} 会被覆盖，
    导致面板整体左移半个屏宽、内容跑到 overflow 之外变成一片空白。
    所以必须在这三个高特异度选择器上显式重置。
  */
  .nav-item:hover > .dropdown,
  .nav-item.is-open > .dropdown,
  .nav-item.is-open:hover > .dropdown { transform: none; }
  .dropdown a { padding: 11px 9vw; font-size: 15px; }
  .dropdown a:hover { padding-left: calc(9vw + 4px); }
  .nav-caret {
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
  }
  .nav-item.is-open .nav-caret { transform: translateY(-50%) rotate(180deg); }
}

/* 小屏：版块与网格降为单列 */
@media (max-width: 760px) {
  .sec { padding: 56px 0; }
  .hero { padding: 60px 0 66px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 38px; }
  .grid-2, .grid-3, .grid-4,
  .faculty-grid, .stat-band, .steps4,
  .gallery { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item.span-2 { grid-column: span 2; aspect-ratio: 16 / 10; }
  .gallery-item.tall { grid-row: span 1; aspect-ratio: 4 / 3; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { padding: 40px 24px; border-radius: var(--r-lg); }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .pagehead { padding: 54px 0 46px; }
  .admit-card { width: 150px; }
  .to-top { right: 16px; bottom: 16px; }
}
@media (max-width: 460px) {
  .hero-stats, .stat-band, .steps4, .gallery { grid-template-columns: 1fr; }
  .gallery-item.span-2 { grid-column: span 1; aspect-ratio: 4 / 3; }
  .btn { width: 100%; }
  .hero-btns, .cta-band .btn-row { flex-direction: column; }
}

/* ============================================================
   第三十七轮（2026-09-24）· 师资 / 作品 / 口碑 / 公众号 素材升级
   ------------------------------------------------------------
   本轮改动要点：
     · 师资头像改为「透明底人物 + 浅色卡片底」（源图经抠图流水线处理）
     · 新增作品网格 .works-grid + 照片灯箱 .lightbox（点击放大、左右滑动翻页）
     · 新增家长口碑 .voice / .koubei-grid、公众号 .qr-card、地址卡、荣誉 .honor-grid
   ============================================================ */

/* ---------------- 师资头像：人物抠图统一透明底 ----------------
   旧版给 .faculty-photo 铺了深色底（#0B0F14），那是配「黑底抠图」用的；
   现在源图是**透明底**，再压深色底会让头像发灰、边缘出现脏边。
   所以底色改为淡绿 → 淡紫交替的浅色面，人物 transparent 直接叠上去。 */
.faculty-photo {
  aspect-ratio: 4 / 5;
  position: relative;          /* 供 ::before 落地投影定位 */
  overflow: hidden;            /* 锁死 aspect-ratio 高度，防止 img 溢出后头顶被裁 */
  /* 2026-09-27b：老师要求透明底 —— 去掉不透明渐变，直接露出卡片/站点背景色。
     人物抠图的 alpha 通道直接叠在背景上，不再有「色块感」。 */
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.faculty:nth-child(even) .faculty-photo {
  background: transparent;  /* 2026-09-27b：与奇数位一致，统一透明底 */
}
.faculty-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 撑满头像框，多余部分裁掉 */
  object-position: top center; /* 顶部对齐：头顶完整，裁掉的是身体下部 */
  filter: drop-shadow(0 10px 18px rgba(20, 38, 28, .18));
  transition: transform .5s var(--ease);
}
.faculty:hover .faculty-photo img { transform: translateY(-4px) scale(1.015); }
.faculty-photo::after { display: none; }        /* 透明头像不需要压暗渐变带 */
.faculty-photo::before {                        /* 人物落地柔和投影 */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 62%; height: 28px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(20, 38, 28, .17), transparent 72%);
  pointer-events: none;
}
.faculty-tag { background: var(--brand-deep); }
.faculty:nth-child(even) .faculty-tag { background: var(--purple); }

/* 卡片正文：引导句 + 简介 + 可展开的完整带班成绩 */
.faculty-body { padding: 20px 22px 24px; }
.faculty-name { margin-bottom: 8px; }
.faculty-lead {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple);
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.faculty-body p.faculty-intro { font-size: 13.5px; line-height: 1.8; }
.faculty-more { display: none; margin-top: 12px; }
.faculty-more.is-open { display: block; }
.faculty-toggle {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.faculty-toggle::after {
  content: "";
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid currentColor;
  transition: transform .2s var(--ease);
}
.faculty-toggle.is-open::after { transform: rotate(180deg); }
.faculty-toggle:hover { color: var(--brand-mid); }

/* 暂无工作照的岗位：品牌字标占位（不拿旧照片凑数） */
.faculty-photo.is-mono { align-items: center; }
.faculty-mono {
  font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
  font-size: 84px;
  font-weight: 700;
  color: rgba(0, 104, 56, .22);
  letter-spacing: .1em;
  line-height: 1;
}

/* 师资分组小标题（管理团队 / 教学团队） */
.team-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 44px 0 20px;
}
.team-sub:first-of-type { margin-top: 0; }
.team-sub::before {
  content: "";
  width: 4px; height: 16px;
  border-radius: 2px;
  background: var(--brand);
  flex: 0 0 auto;
}
.team-sub::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--line), transparent);
}
.team-sub h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: .12em;
  margin: 0;
  white-space: nowrap;
}
.team-sub.is-purple::before { background: var(--purple); }
.team-sub.is-purple h3 { color: var(--purple-deep); }

/* ---------------- 作品网格（教师作品 / 学生作品 / 活动相册） ----------------
   一张图一个文件：网格里 object-fit 裁成统一比例，点开灯箱看完整大图，
   不额外请求缩略图（省流量，也避免缩略图与原图不一致） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.works-grid.is-sm { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.work {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.work:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.work img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.work.is-landscape img { aspect-ratio: 4 / 3; }
.work.is-tall img { aspect-ratio: 3 / 4; }
.work.is-square img { aspect-ratio: 1 / 1; }
.work:hover img { transform: scale(1.05); }
.work figcaption {
  padding: 9px 12px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--white);
}
/* 右上角放大提示（悬停出现；触屏直接点即可） */
.work::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006838' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3Cpath d='M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
.work:hover::after { opacity: 1; transform: scale(1); }
.tabpanel .works-grid { margin-top: 22px; }

/* ---------------- 照片灯箱：点击放大 + 左右滑动 / 滚轮翻页 ----------------
   纯原生 JS（零依赖、不用可选链与顶层 await），微信内置浏览器可用 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: rgba(10, 20, 15, .93);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.lightbox.is-open { display: flex; }
body.lb-lock { overflow: hidden; }
.lb-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 76px 66px;
  min-width: 0;
}
.lb-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 172px);
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  background: #fff;
}
.lb-cap {
  color: #F2FAF6;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  max-width: 760px;
}
.lb-cap span.lb-count {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--brand-light);
  letter-spacing: .08em;
}
.lb-btn {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, .26); transform: scale(1.06); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn[disabled] { opacity: .3; cursor: default; }
.lb-btn[disabled]:hover { background: rgba(255, 255, 255, .14); transform: none; }
.lb-prev { left: 16px; top: 50%; margin-top: -23px; }
.lb-next { right: 16px; top: 50%; margin-top: -23px; }
.lb-close { top: 14px; right: 16px; }
.lb-hint {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
  letter-spacing: .04em;
  pointer-events: none;
}
/* 翻页时轻微方向动画，让「翻到了下一张」有感知 */
.lb-img.from-left { animation: lbInLeft .26s var(--ease); }
.lb-img.from-right { animation: lbInRight .26s var(--ease); }
@keyframes lbInLeft { from { transform: translateX(46px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes lbInRight { from { transform: translateX(-46px); opacity: .3; } to { transform: none; opacity: 1; } }

/* ---------------- 家长口碑（学员感言 + 送锦旗实照） ---------------- */
.voice {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 32px 32px;
  position: relative;
}
.voice::before {
  content: "\201C";
  position: absolute;
  top: 4px; left: 20px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 76px;
  line-height: 1;
  color: var(--purple-bg);
}
.voice h3 {
  font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
  font-size: 22px;
  color: var(--brand-deep);
  letter-spacing: .04em;
  margin: 0 0 8px;
  position: relative;
}
.voice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--purple);
  font-weight: 600;
}
.voice-meta span { display: inline-flex; align-items: center; gap: 12px; }
.voice-meta span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--purple-light); }
.voice-meta span:last-child::after { display: none; }
.voice-body p {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.voice-body p:last-child { margin-bottom: 0; }
.voice-sign {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.koubei-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
}
.koubei-grid .work img { aspect-ratio: 3 / 2; }

/* ---------------- 微信公众号二维码 ---------------- */
.qr-card {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.qr-card img.qr-img {
  width: 154px;
  height: 154px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
  cursor: zoom-in;
}
.qr-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--brand-deep); }
.qr-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.qr-tip { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.qr-id { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  background: var(--brand-bg);
  color: var(--brand-deep);
  letter-spacing: .02em;
}
.copy-btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--brand);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.copy-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.copy-btn.is-done { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ---------------- 地址卡（定位名 + 详细地址 + 地图外链） ---------------- */
.addr-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0 0 4px;
}
.addr-detail { font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 0 0 12px; }
.addr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ---------------- 荣誉资质 ---------------- */
.honor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.honor {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-align: center;
  padding-bottom: 14px;
}
.honor img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--brand-soft);
  padding: 12px;
}
.honor figcaption { font-size: 13.5px; color: var(--ink-2); padding: 10px 14px 0; line-height: 1.6; }

/* ---------------- 小屏适配 ---------------- */
@media (max-width: 900px) {
  .works-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .lb-stage { padding: 62px 12px 76px; }
  .lb-btn { width: 40px; height: 40px; }
  .lb-prev, .lb-next { top: auto; bottom: 20px; margin-top: 0; }
  .lb-prev { left: 16px; } .lb-next { right: 16px; }
  .lb-img { max-height: calc(100vh - 214px); }
  .lb-hint { display: none; }
  .qr-card { flex-direction: column; align-items: flex-start; }
  .voice { padding: 24px 22px 26px; }
  .team-sub { margin: 34px 0 16px; }
  .flip-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .flip-card { height: 118px; }
  .flip-front { font-size: 13px; padding: 12px 14px; }
}

/* ---------------- 资质翻转卡片（正面名称 · 点击翻面看证书/牌子照片） ---------------- */
.flip-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.flip-card {
  perspective: 1200px;
  height: 132px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flip-card .flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s var(--ease);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.flip-front {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  padding: 18px 16px;
  text-align: center;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}
.flip-front::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--brand);
}
.flip-card:nth-child(even) .flip-front::before { background: var(--purple); }
.flip-front i {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--brand-soft), var(--brand-bg));
  padding: 10px;
  overflow: hidden;
}
.flip-back img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.flip-back.flip-empty {
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  background: repeating-linear-gradient(45deg, #f7faf8, #f7faf8 12px, #edf2ee 12px, #edf2ee 24px);
}
.flip-back.flip-empty small { font-size: 11px; color: var(--brand-light); }
.flip-card.is-major .flip-front {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.flip-card.is-major .flip-front::before { background: var(--brand-mid); }
.flip-card.is-major .flip-front i { color: rgba(255,255,255,.78); }
.flip-card:focus-visible .flip-inner { outline: 2px solid var(--brand); outline-offset: 3px; }


/* ---------------- 移动端底部悬浮「预约试听 / 在线咨询」 ---------------- */
.mobile-cta {
  display: none;
}
@media (max-width: 760px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -6px 20px rgba(20, 38, 28, .1);
    border-top: 1px solid var(--line-soft);
  }
  .mobile-cta-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 10px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid rgba(0, 104, 56, .35);
    color: var(--brand);
    background: #fff;
    transition: transform .15s var(--ease), background .15s var(--ease);
  }
  .mobile-cta-btn:active { transform: scale(.97); }
  .mobile-cta-btn.is-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 104, 56, .28);
  }
  /* 底部悬浮条占位，避免遮挡页脚备案号 */
  body { padding-bottom: 76px; }
}

/* ---------------- 照片加载淡入（翻转卡 / 灯箱 / 作品图） ---------------- */
.work img, .flip-back img, .honor img, .admit-card img {
  opacity: 0;
  transition: opacity .5s ease;
}
.work img.is-loaded, .flip-back img.is-loaded, .honor img.is-loaded, .admit-card img.is-loaded {
  opacity: 1;
}

/* ---------------- 中式点睛：章节标题前的水墨短线 ---------------- */
.sec-head .sec-eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--brand-light);
}
.sec-head-center .sec-eyebrow::after { display: none; }

/* ---------------- 录取院校墙（首页成果区） ---------------- */
.school-wall { text-align: center; }
.school-wall-title {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .12em;
  margin-bottom: 18px;
}
.school-wall-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.school-wall-list span {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  border: 1px solid var(--line-soft);
}
.school-wall-list span.hl {
  background: var(--purple-bg);
  color: var(--purple-deep);
  font-weight: 500;
}

/* ---------------- 常见问题 FAQ ---------------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--brand-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--brand);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 22px 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ===== 手机 App 下载区（2026-09-27）=====
   平台差异是硬事实：安卓给安装包、苹果只能「添加到主屏幕」（无文件可下），
   所以两个按钮形态不同（下载 vs 展开步骤）。配色沿用青禾双色：安卓=绿、苹果=紫。 */
.appdl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.appdl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.appdl-card h3 { margin-bottom: 0; }
.appdl-card p { margin: 0; }
.appdl-card .btn { margin-top: auto; }
.appdl-badge {
  display: inline-block;
  padding: 3px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  border-radius: var(--r-pill);
}
.appdl-badge-android { background: var(--brand-bg); color: var(--brand-deep); }
.appdl-badge-ios { background: var(--purple-bg); color: var(--purple-deep); }
.appdl-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.appdl-meta li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.appdl-meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-light); /* 亮青绿只做图形，符合品牌规则 */
}
.appdl-steps { width: 100%; margin-top: 2px; background: rgba(31, 74, 52, .04); border-color: var(--line-soft); }
.card-purple .appdl-steps { background: rgba(90, 73, 184, .05); }
.appdl-steps summary { font-size: 14.5px; padding: 14px 18px; }
.appdl-ol { margin: 0; padding: 0 18px 16px 38px; }
.appdl-ol li { font-size: 13.8px; line-height: 1.9; color: var(--ink-2); margin-bottom: 5px; }

/* 下载按钮下方的「版本 + 更新说明」小框（2026-09-27）
   原先是一整段独立的「更新记录」区块，占掉一整屏、篇幅过大；
   现收敛为按钮下方的小字框。版本号与登录页**同源**
   （src/renderer/src/version.js 的 APP_VERSION，由 verify-portal 的断言钉住同步）。 */
.appdl-note {
  width: 100%;
  margin-top: -4px;                           /* 贴紧上方下载按钮（卡片 gap 14px − 4px = 10px）*/
  padding: 10px 13px;
  border: 1px solid rgba(0, 104, 56, .16);    /* 用品牌绿做边（不用中性灰）⇒ 与绿色下载按钮同色系、看着是一组 */
  border-radius: var(--r-sm);
  background: var(--brand-soft);              /* 极淡绿底，与白卡区分但不抢眼 */
}
.appdl-note-head { font-size: 12.5px; font-weight: 600; color: var(--brand-deep); }
.appdl-note-head strong { font-weight: 700; }
.appdl-note-body { margin-top: 4px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
@media (max-width: 820px) {
  .appdl-grid { grid-template-columns: 1fr; gap: 18px; }
}


/* ============================================================
   2026-09-27 联系方式模块与可读性修正（原「up-20260927」块）
   ------------------------------------------------------------
   一、页脚「联系方式模块」：招生老师（电话 + 企业微信二维码）+ 地址 + 目的地导航
   二、可读性修正：--muted 压深到 WCAG AA（原 4.42:1 → 差 0.08）
   三、移动端次级按钮抬到 44px 触控线（原 .btn-sm 实测 39px）
   四、师资头像底色统一（绿/紫交替改由角标承担，避免被读成「照片底不统一」）
   五、锚点偏移去重：html 的 scroll-padding-top 与 .sec 的 scroll-margin-top 原本叠加成 193px
   ============================================================ */

/* ---------- 一、页脚联系方式模块 ---------- */
.foot-contact {
  margin-top: 42px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 40px;
  align-items: start;
}
.fc-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-light); margin: 0 0 12px;
}
.fc-title {
  font-size: clamp(19px, 2.1vw, 23px); color: #fff; margin: 0 0 12px; line-height: 1.45;
}
.fc-desc {
  font-size: 13.8px; line-height: 1.9; color: rgba(255, 255, 255, .68); margin: 0 0 18px;
  max-width: 42ch;
}
.fc-addr {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .82); margin: 0 0 20px;
}
.fc-addr svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 4px; color: var(--brand-light); }
.fc-addr i { font-style: normal; color: rgba(255, 255, 255, .55); }
.fc-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; line-height: 1;
  color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .06);
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.fc-btn svg { width: 15px; height: 15px; }
.fc-btn:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .42); }
.fc-btn:active { transform: scale(.98); }
.fc-btn.is-primary {
  background: var(--brand-light); border-color: var(--brand-light); color: #06301F;
}
.fc-btn.is-primary:hover { background: #2AD9A4; border-color: #2AD9A4; }

.fc-people { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fc-person {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center;
  padding: 14px; border-radius: var(--r);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}
.fc-qr {
  width: 104px; height: 104px; border-radius: 9px; background: #fff;
  padding: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.fc-qr img { width: 100%; height: 100%; display: block; border-radius: 4px; }
.fc-info { min-width: 0; }
.fc-role {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-light); margin: 0 0 5px;
}
.fc-name { font-size: 15.5px; font-weight: 700; color: #fff; margin: 0 0 7px; }
.fc-tel {
  display: inline-block; font-family: var(--serif);
  font-size: 19px; font-weight: 700; letter-spacing: .02em;
  color: #9BEDCB; text-decoration: none; line-height: 1.25;
}
.fc-tel:hover { color: #C6F7E1; text-decoration: underline; }
.fc-hint { font-size: 11.5px; line-height: 1.65; color: rgba(255, 255, 255, .5); margin: 8px 0 0; }

/* ---------- 二、可读性：--muted 压深 ---------- */
:root { --muted: #5C6D63; }

/* ---------- 三、移动端次级按钮 44px ---------- */
@media (max-width: 900px) {
  .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .copy-btn { min-height: 44px; }
  .info-card .btn, .card .btn, .courses .btn { min-height: 44px; }
  /* 号码链接本身也是「点一下要拨号」的控件：155×32 在手指下太窄，一并抬到 44px */
  .tl-tel, .tqr-tel, .fc-tel { min-height: 44px; display: inline-flex; align-items: center; }
  .tl-tel { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .foot-contact { grid-template-columns: 1fr; gap: 30px; }
  .fc-people { grid-template-columns: 1fr; }
  .fc-person { grid-template-columns: 96px 1fr; }
  .fc-qr { width: 96px; height: 96px; }
  .fc-btn { min-height: 46px; }
}
@media (max-width: 460px) {
  .fc-person { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fc-hint { text-align: center; }
}

/* ---------- 四、师资头像底色统一（交替改由角标承担） ---------- */
.faculty:nth-child(even) .faculty-photo {
  background: transparent;  /* 2026-09-27b：与奇数位一致，统一透明底 */
}

/* ---------- 五、锚点偏移去重 ---------- */
.sec, .anchor { scroll-margin-top: 0; }

/* ---------- 联系页：电话清单 + 老师二维码卡 ---------- */
.tel-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.tel-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--brand-soft); border: 1px solid var(--line-soft);
}
.tl-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.tl-tel {
  font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--brand);
  text-decoration: none; letter-spacing: .01em;
}
.tl-tel:hover { text-decoration: underline; }
.tel-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }

.teacher-qr-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-bottom: 38px;
}
.tqr-card {
  text-align: center; padding: 24px 20px 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.tqr-img {
  width: 220px; height: 220px; max-width: 100%; margin: 0 auto 14px;
  border-radius: var(--r-sm); background: #fff; cursor: zoom-in;
}
.tqr-name { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.tqr-tel {
  display: inline-block; font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: var(--brand); text-decoration: none;
}
.tqr-tel:hover { text-decoration: underline; }
.tqr-tip { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 760px) {
  .teacher-qr-grid { grid-template-columns: 1fr; }
  .tqr-img { width: 200px; height: 200px; }
}

/* ---------- 六、下载页页头按钮（把「下载」提到首屏内） ---------- */
.pagehead-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 24px;
}
.pagehead-cta .btn { box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.pagehead-cta-tip { font-size: 13px; color: rgba(255, 255, 255, .62); }
@media (max-width: 760px) {
  .pagehead-cta { gap: 10px; }
  .pagehead-cta-tip { width: 100%; }
}

/* fix-20260927b 跑马灯两端一致 + 师资透明底 */

/* fix-20260927c 师资卡片透明底 */

/* fix-20260928 师资卡片网格改版 =====
   老师 2026-09-28：教师照片太大；网页端一行要放得下 4–5 位老师、手机端 2–3 位。
   设计意图：由「3 列大卡（手机 1 列）」改为高密度花名册节奏。
   信息层级不变（照片 → 姓名/职务 → 引导句 → 简介 → 展开履历），
   只让头像框与字号随列宽等比收敛 —— 一行放得下更多人，页面不用翻很久。
   ⚠️ 本块在 site.css 末尾，同权重下优先级最高；改这里才生效（见 PROJECT_NOTES §五十三）。 */

/* 1) 列数：手机 2 列 → 640+ 3 列 → 900+ 4 列 → 1200+ 5 列
      断点按「卡片最窄不低于 ~170px」反推（内容宽 = min(1280px, 92vw)），
      否则 480–600 段会掉到 139–176px，卡片里 12px 正文会挤成一片。
      行末不足一整行属正常（花名册网格），不做拉伸。 */
.faculty-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}
@media (min-width: 640px) {
  .faculty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .faculty-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .faculty-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 首页那组固定 4 张：保持 4 列，正好排满不留空位 */
@media (min-width: 900px) {
  .faculty-grid.has-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 2) 卡片：圆角随卡片收窄，悬停位移同步收敛（密集网格里 6px 会显得跳） */
.faculty { border-radius: clamp(10px, 1vw, 16px); }
.faculty:hover { transform: translateY(-4px); }

/* 3) 头像框：4/5 与源图（0.69–0.89）最贴，几乎不裁人物；只随卡片变窄变小 */
.faculty-photo { aspect-ratio: 4 / 5; }
.faculty-photo::before { width: 68%; height: clamp(12px, 1.3vw, 22px); }
.faculty-photo img { filter: drop-shadow(0 6px 12px rgba(20, 38, 28, .16)); }

/* 4) 职务标签：内缩、内距、字号随卡片收缩，窄卡里不再顶到边 */
.faculty-tag {
  left: clamp(8px, .9vw, 14px);
  bottom: clamp(8px, .9vw, 12px);
  padding: 3px clamp(8px, .9vw, 11px);
  font-size: clamp(10.5px, .85vw, 12px);
}

/* 5) 正文：内边距与字号流体缩放，窄卡里仍读得舒服（正文 ≥12px / 行高 1.8） */
.faculty-body {
  padding: clamp(12px, 1.25vw, 18px) clamp(12px, 1.35vw, 18px) clamp(14px, 1.5vw, 20px);
}
.faculty-name { margin-bottom: clamp(6px, .7vw, 10px); gap: clamp(6px, .8vw, 10px); }
.faculty-name b { font-size: clamp(16px, 1.3vw, 19px); letter-spacing: .04em; }
.faculty-name i { font-size: clamp(11px, .9vw, 12.5px); }
.faculty-lead { font-size: clamp(11.5px, .95vw, 12.5px); margin-bottom: clamp(6px, .7vw, 10px); }
/* 首页那种没有 .faculty-intro 的裸 <p> 也一起收敛 */
.faculty-body p { font-size: clamp(12px, 1vw, 13.5px); line-height: 1.8; }
.faculty-body p.faculty-intro {
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.8;
  text-wrap: pretty;
}
.faculty-more { margin-top: clamp(10px, 1vw, 12px); }
.faculty-list { margin-top: clamp(10px, 1vw, 14px); padding-top: clamp(10px, 1vw, 14px); }
.faculty-list li { font-size: clamp(12px, 1vw, 13.5px); }

/* 6) 「展开完整简介」：手机端保证 44px 触控高度，补键盘焦点样式（a11y） */
.faculty-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .faculty-toggle { min-height: 44px; }
}

/* 7) 分组小标题（管理团队 / 教学团队）间距随密度收敛 */
.team-sub { margin: clamp(30px, 3.4vw, 44px) 0 clamp(16px, 1.6vw, 20px); }

/* fix-20261005b 页脚尾部重排 =====
   老师 2026-10-05 第二轮：「邮箱符号太大，博物馆友情链接的图标也太大，
   底部悬挂的内容布置参考大公司的网站布置方式」。
   按企业官网通行做法重排（腾讯 / 阿里 / 谷歌 一类页脚的共同点：
   小字、同色系、少图标、左版权右法务）：
     ① 联系信息里的图标统一收到 14px —— 实测原来 17px 配 13.5px 正文是 1.26 倍字高，
        而信封是方框轮廓，视觉重量远大于同尺寸的细线图标，所以显得"太大"。
     ② 友情链接**不加任何图标/符号**（大公司页脚通行做法）。
        第一版试过用 ↗(U+2197) 排版符号，实测中文字体覆盖不一、且会被读成"斜杠"
        （「常州横山博物馆/」看着像网址路径），故去掉；外链语义由 sr-only 文字承载。
     ③ 底部收成「一条分隔线 + 两行」：上行友情链接、下行版权与备案号。
        原来是一条线 + 三栏 space-between（线多、三栏散），改为大公司通行的两栏制。
   ⚠️ 本块在 site.css 末尾，同权重下优先级最高；改这里才生效（见 PROJECT_NOTES §五十三）。 */

/* 1) 联系信息行的图标：统一 14px，与首行文字光学居中（13.5px 行盒中心 ≈ 12px） */
.fc-addr svg, .fc-mail svg { width: 14px; height: 14px; margin-top: 5px; }

/* 2) 邮箱行：与地址行同构，只是图标更小更安静；两行贴成一组 */
.fc-addr { margin-bottom: 8px; }
.fc-mail {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .78);
  margin: 0 0 20px;
}
.fc-mail a {
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .26);
  transition: color .18s var(--ease), border-bottom-color .18s var(--ease);
  word-break: break-all;                 /* 320px 窄屏下邮箱不撑破容器 */
}
.fc-mail a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .62); }
.fc-mail a:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 3px; }

/* 3) 页脚尾部：一条分隔线 + 两行（友情链接 / 版权与备案号） */
.foot-tail {
  margin: 42px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: grid;
  gap: 12px;
}

/* 4) 友情链接行：纯文字，没有任何图标与符号；外链语义交给 sr-only 文字 */
.foot-friend {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin: 0;
  font-size: 12.5px; line-height: 1.8;
}
.ff-label { color: rgba(255, 255, 255, .56); }
.ff-link {
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.ff-link:hover { color: #fff; }
.ff-link:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 3px; }

/* 5) 法律行：左版权、右备案号。去掉它自己的上内边距（间距交给 .foot-tail 的 gap），
      只保留 30px 触底留白。颜色沿用上一轮已修好的 .58（WCAG AA 5.72:1）。 */
.foot-bottom { padding: 0 0 30px; }
.foot-bottom, .foot-icp a { color: rgba(255, 255, 255, .58); }

/* 6) 窄屏：两行各自左对齐堆叠，友链与版权之间不留空档 */
@media (max-width: 760px) {
  .foot-tail { margin-top: 34px; padding-top: 18px; gap: 10px; }
  .foot-bottom { justify-content: flex-start; }
}

/* fix-20261005c 二维码换企业微信 =====
   老师 2026-10-05：「网站上的二维码全部换成公众号中使用的企业微信二维码，
   再增加一个招生咨询是老师 13585310608」。
   码的来源与核验见 PROJECT_NOTES §五十八（与公众号 _qrtest/src_*.png 逐像素相同，均解码为
   work.weixin.qq.com/u/... = 企业微信；站上原 qr-mao 解出的是 u.wechat.com = 个人微信）。
   布局：老师卡 2 张 → 3 张 ⇒ 卡片必须从「左码右字」改「上码下字」（竖卡）——
        3 列时每卡只有 ~200px，左码右字会把文字挤到 56px；竖卡与公众号推文的三列二维码一致。
   ⚠️ 本块在 site.css 末尾，同权重下优先级最高；改这里才生效（见 PROJECT_NOTES §五十三）。 */

/* 1) 老师卡改竖卡：二维码居中、文字居中
      ⚠️ 二维码显示尺寸必须 ≥120px：实测（按 CSS 尺寸 × DPR 截真图再解码）
         84px / 92px 显示在 **DPR=1 的普通显示器上扫不出来**（37 个模块只剩 2.3 像素/模块）；
         ≥120px 起三张全部可解。本块设为 140px 外框 → 去 12px 内边距 = **128px 有效**，
         既过 DPR1 门槛，手机上 DPR≥2 更是稳过。 */
.fc-person {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 16px 14px;
}
.fc-qr { width: 140px; height: 140px; margin: 0 auto; }
.fc-info { text-align: center; }
.fc-name { margin-bottom: 5px; }
.fc-hint { margin-top: 7px; }

/* 2) 三位老师：≥600px 三列（此时每卡 ≥175px，扣内边距仍容得下 140px 二维码）；更窄回落单列。
      原来打算 520px 起三列，实测 520 时每卡只有 148px、二维码会顶到边，故上移到 600。 */
.fc-people { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .fc-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* 3) ≤1099px 让联系模块自己单列：三张卡必须拿到整行宽度。
      不抬这个断点的话，761–1099 段卡片仍挤在右半栏 ⇒ 每卡只剩 ~110px，比二维码还窄。 */
@media (max-width: 1099px) {
  .foot-contact { grid-template-columns: 1fr; gap: 34px; }
}

/* 4) 联系页「三位老师」卡：≥760px 三列（原来两列，第三张会掉到第二行孤零零） */
@media (min-width: 760px) {
  .teacher-qr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 二维码用原生比例、不写死 220px 高：三列后卡片变窄，写死高度会被压扁 */
.tqr-img { width: min(220px, 100%); height: auto; aspect-ratio: 1 / 1; }