/* ============================================================
   RGMG Website — styles.css
   Dark single theme
   Colours: v11 design-draft palette (user rollback 2026-09-07 —
   the Doc 6 #D3AF37/#2D0F35 attempt read too bright; see git
   commit 2f9def9 for that variant, 5bba29f for full v11).
   Typography: Doc 6 §2 — Arial throughout, system stack.
   Breakpoints: ≤1180 (tablet) · ≤720 (mobile)
   ============================================================ */

/* ---------- fonts: Doc 6 §2 — Arial throughout, system stack, zero external requests ---------- */

:root {
  --bg:       #2A1124;   /* base surface */
  --band:     #3D1A35;   /* elevated surface (band / numbers) */
  --s4:       #2E1428;   /* Global Campus surface */
  --deep:     #1F0A1C;   /* deepest surface (manifesto / footer) */
  --ink:      #F7F4EF;   /* headings / body on dark */
  --slate:    #B0AAB8;   /* secondary text */
  --gold:     #DFC28F;   /* champagne gold accents */
  --cream:    #F7F4EF;   /* constant light text on dark surfaces */
  --lavender: #B0AAB8;   /* constant muted text */
  --hairline: #4A2A44;   /* dividers */
  --white-12: rgba(255, 255, 255, 0.12);

  --font-title: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body:  Arial, "Helvetica Neue", Helvetica, sans-serif;

  --pad-x: clamp(24px, 8.33vw, 120px);
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.eyebrow {
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow.gold { color: var(--gold); }

/* ---------- reveal animation (fade in + rise 12px) ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- arrow links ---------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1.4 var(--font-body);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
}
.arrow-link .arrow { display: inline-block; font-size: 14px; font-weight: 400; transition: transform 0.2s ease; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  z-index: 20;
}
/* ══ 2026-09-28 Review3 #4：首页导航改成**透明浮层**压在 hero 上 ══
   客户 09:17 原话「…with the **menu** and text overlaid」；参考站 kenno.com 实测做法：
   `<header>` position:fixed + 背景 rgba(0,0,0,0) + z-index 40，视频 100vh 铺在其后。
   用 body.is-home 限定 ⇒ **只影响首页**，其它页导航仍是 relative + 实底。
   滚过 hero 后由 JS 加 .is-solid 恢复实底，否则导航文字会与正文叠在一起看不清。 */
body.is-home .site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.25s ease, border-bottom-color 0.25s ease;
}
body.is-home .site-nav.is-solid {
  background: var(--bg);
  border-bottom-color: var(--hairline);
}
.nav-inner {
  display: flex;
  align-items: center;
  padding-top: 26px;
  padding-bottom: 26px;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: 56px; }
.brand-logo { width: 46px; height: auto; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-text strong { font: 700 13px/1 var(--font-body); color: var(--cream); letter-spacing: 0.5px; }
.brand-text small { font: 400 9px/1 var(--font-body); color: var(--lavender); letter-spacing: 1px; }

/* 2026-09-18 V1 反馈 #5：右上角 Partner Access 移除后，由导航自身靠右（原靠 .partner-btn 的 margin-left:auto 撑开）。 */
.nav-menu { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-menu a { position: relative; display: inline-block; font: 500 11px/1 var(--font-body); color: var(--cream); }
/* 当前页（2026-09-14）：金色 + 底部短线。
   不再用 font-weight —— 加粗会让整行宽度变化、文字抖动（hover 也曾因此改掉）。
   短线用绝对定位，不占布局，所以不会推挤其它菜单项。 */
.nav-menu a.active { color: var(--gold); }
.nav-menu a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 1px;
}
/* hover: colour shift only — a weight change makes the row jitter */
.nav-menu a:hover { color: var(--gold); }

.partner-btn {
  margin-left: auto;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  font: 600 10px/1 var(--font-body);
  color: var(--ink);
  letter-spacing: 0.5px;
  transition: background 0.2s ease, color 0.2s ease;
}
.partner-btn:hover { background: var(--ink); color: var(--bg); }

.nav-toggle { display: none; }

/* ============================================================
   HERO
   ============================================================ */
/* 2026-09-28 Review3 #4：hero 改为**满屏媒体区**（对齐客户参考站 kenno.com ——
   实测其 hero section 为 min-h-screen、视频 object-fit:cover 铺满 100vh）。
   做法：.hero 去掉上下内边距并改块级，让媒体铺满视口；下面的分隔线与页脚行各自补内边距。 */
.hero {
  background: var(--bg);
  padding: 0;
  display: block;
  position: relative;
}
.hero-media { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  /* 2026-09-28 Review4：原为「单向、只压底部」（to top：底 0.88 → 顶 0.06）→ 两个毛病：
     ① 顶部（导航那一条）几乎没有保护，视频亮帧时导航字发飘；
     ② 最黑的是**最底边**，而口号与它下面那行副文恰在稍上方（≈底部 20–50px），压不住；
        同时底边留 12% 视频透色 → 与下一模块的纯 --bg 之间露出一条带视频色相的暗带（接缝）。
     改成上下双向：顶部为导航压暗、底部收在同色上（100% 不透明 → 接缝不再露色），中段留清给画面。 */
  background: linear-gradient(to bottom,
    rgba(42, 17, 36, 0.74) 0%,
    rgba(42, 17, 36, 0.20) 20%,
    rgba(42, 17, 36, 0.10) 46%,
    rgba(42, 17, 36, 0.52) 74%,
    rgba(42, 17, 36, 0.88) 94%,
    rgba(42, 17, 36, 1) 100%);
}
/* 🔴 2026-09-28 Review4：成片**底部烧入了英文字幕**（每段画面都有，实测字幕带 ≈ 底部 135px，
   见 `%TEMP%\rgmg-frames\video_bottom_strip.jpg`）→ 口号原来 bottom:72px 正好压在字幕上，
   两者叠在一起。把口号整体上移，给字幕留出净空（口号下沿不再进入字幕带）。 */
.hero-slogan {
  position: absolute;
  left: max(72px, var(--pad-x)); bottom: 33vh;
  display: flex; flex-direction: column;
  font: 300 56px/64px var(--font-title);
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45);
}
.hero-slogan .gold-italic { font-style: italic; color: var(--gold); }

/* hero 改块级后这两行不再有 .hero 的 padding 兜底，各自补上内边距 */
.hero-hairline { height: 1px; background: var(--hairline); margin: 44px var(--pad-x) 0; }
.hero-foot { display: flex; flex-direction: column; gap: 16px; padding: 32px var(--pad-x) 32px; }
/* 2026-09-18 V1 反馈 #6：删掉 “Scroll” 提示（左格），只剩 “Adcote Schools · Est. 1907”，
   改为靠右对齐以保持原有视觉位置。 */
.hero-scroll-row {
  display: flex;
  justify-content: flex-end;
  font: 500 10px/1.4 var(--font-body);
}
.est-line { color: var(--gold); }

/* ============================================================
   SECTIONS (shared)
   ============================================================ */
.section { background: var(--bg); display: flex; flex-direction: column; }
/* 🔴 2026-09-28 Review4：各 .section-* 上写的 `gap` 一直是**空转**的 ——
   那些 section 的直接子元素只有一个 .container，flex gap 只在「≥2 个子元素」之间生效，
   所以模块内部相邻两块（S2 的正文行 vs 三格条、S5 的数字 vs 脚注…）其实是 0 间距，
   表现为「文字/按钮直接顶到下一块的边框上」。把 gap 下沉到 .container 这一层即可全站生效，
   数值沿用各 section 自己声明的 gap（含 ≤720 的覆盖）。 */
.section > .container { display: flex; flex-direction: column; gap: inherit; }

/* ---------- S2 network ---------- */
.section-network { padding: 112px 0; gap: 72px; }
.network-row { display: flex; gap: 64px; }
.network-left { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.statement { font: 300 46px/54px var(--font-title); color: var(--ink); }
.network-right { flex: 1; display: flex; flex-direction: column; gap: 28px; }
/* 2026-09-28 Review4 N-1②：这枚「Learn more」按钮直接复用站点现成的 .partner-btn
   （与询盘表单的 Submit 同一个类），只补它在本区块的两个上下文差异：
   .partner-btn 原是为导航栏写的（靠 margin-left:auto 贴右），而 .network-right 是
   flex 列（子元素默认 stretch 会被拉满整行）→ 归零外边距 + 收成自身宽度。 */
.network-right .partner-btn { margin-left: 0; display: inline-block; align-self: flex-start; }
.lead { font: 400 19px/32px var(--font-body); color: var(--ink); }

.audience-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.audience-cell {
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 28px;
}
.audience-cell:first-child { padding-left: 0; }
.audience-cell:last-child { padding-right: 0; }
.audience-cell + .audience-cell { border-left: 1px solid var(--hairline); }
.cell-no { font: 600 11px/1 var(--font-body); color: var(--gold); }
.cell-title { font: 600 13px/1.4 var(--font-body); color: var(--ink); letter-spacing: 0.5px; text-transform: uppercase; }
.cell-desc { font: 400 13px/20px var(--font-body); color: var(--slate); }
.cell-arrow { font-size: 13px; color: var(--ink); transition: transform 0.2s ease; }
.audience-cell:hover .cell-arrow { transform: translateX(4px); }

/* ---------- S3 band ---------- */
.band { background: var(--band); padding: 72px 0; }
.band-inner { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.band-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.band-left .eyebrow { color: var(--cream); }
.band-title { font: 300 58px/62px var(--font-title); color: var(--cream); }
.band-intro { flex: 0 0 320px; font: 400 15px/24px var(--font-body); color: var(--cream); }

/* ---------- S3.5 schools ---------- */
.section-schools { padding: 96px 0; }
.uk-row { display: flex; gap: 56px; margin-bottom: 72px; }
.uk-text { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.uk-name { font: 300 36px/42px var(--font-title); color: var(--ink); }
.uk-desc { font: 400 15px/25px var(--font-body); color: var(--slate); }
.uk-media { flex: 1; height: 460px; overflow: hidden; }
.uk-media img { width: 100%; height: 100%; object-fit: cover; }

.school-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.school-card { display: flex; flex-direction: column; gap: 16px; }
.school-card:nth-child(even) { padding-top: 44px; }
.card-media { height: 190px; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.school-card:hover .card-media img { transform: scale(1.03); }
.card-meta { font: 600 10px/1 var(--font-body); color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.card-name { font: 600 19px/25px var(--font-body); color: var(--ink); }
.card-desc { font: 400 13px/20px var(--font-body); color: var(--slate); }
.card-link { font: 600 11px/1 var(--font-body); color: var(--ink); letter-spacing: 1.2px; text-transform: uppercase; }
.card-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.card-link:hover .arrow { transform: translateX(4px); }

/* ---------- S4 global campus ---------- */
.section-campus { background: var(--s4); padding: 104px 0; gap: 72px; }
.gc-row { display: flex; gap: 64px; }
.gc-text { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.gc-title { font: 300 50px/56px var(--font-title); color: var(--ink); }
.gc-para { font: 400 16px/27px var(--font-body); color: var(--ink); }
.gc-media { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.gc-media img { width: 100%; height: 380px; object-fit: cover; }
.gc-caption { font: italic 400 10px/1.5 var(--font-body); color: var(--slate); }

.principles { margin-top: 0; }
.principle-row { display: flex; gap: 24px; padding: 26px 0; }
.principle-row + .principle-row { border-top: 1px solid var(--hairline); }
.principle-name { width: 320px; flex-shrink: 0; font: 700 22px/1.3 var(--font-body); color: var(--ink); }
.principle-desc { flex: 1; font: 400 14px/22px var(--font-body); color: var(--ink); }

/* ---------- S5 numbers ---------- */
.section-numbers { background: var(--band); padding: 96px 0; gap: 56px; }
/* R6-4（客户 2026-10-12 反馈「四个数字块要对齐」）：
   1) 1fr → minmax(0,1fr)：长数字（如 5,000+）不再把列撑歪；
   2) 数字加 tabular-nums + lining-nums：四个数字的位数宽度一致，标点对齐；
   3) 字号 72→60 / 行高 76→64 / 列距 48→44 / 块内间距 14→12：整体收口。
   ⚠️ 只改样式，绝不动 .stat-number 的 DOM —— 计数动画与内容断言都挂在它上面。 */
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; align-items: start; }
.stat { display: flex; flex-direction: column; gap: 12px; }
.stat-line { width: 28px; height: 3px; background: var(--gold); }
.stat-number {
  font: 300 60px/64px var(--font-title);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.stat-number.pending { opacity: 0.5; }  /* pending verification */
.stat-label { font: 500 12px/19px var(--font-body); color: var(--ink); }
.stats-footnote { font: italic 400 11px/1.5 var(--font-body); color: var(--slate); }

/* ---------- S6 leadership ---------- */
.section-leadership { padding: 112px 0; gap: 64px; }
.leadership-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.leadership-header > div { display: flex; flex-direction: column; gap: 20px; }
.leadership-title { font: 300 48px/54px var(--font-title); color: var(--ink); }
.leadership-para { max-width: 360px; font: 400 15px/25px var(--font-body); color: var(--slate); }

.leadership-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.leader-card { display: flex; flex-direction: column; gap: 16px; }
.leader-card:nth-child(2) { padding-top: 48px; }
.leader-card:nth-child(3) { padding-top: 96px; }
.leader-photo { height: 400px; overflow: hidden; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  color: var(--slate);
  font: 400 12px/1.6 var(--font-body);
  text-align: center;
  padding: 16px;
}
.leader-name { font: 700 22px/1.3 var(--font-body); color: var(--ink); }
.leader-role { font: 600 10px/1 var(--font-body); color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.leader-bio { font: 400 13px/21px var(--font-body); color: var(--slate); }
.leadership-caption { font: italic 400 11px/1.5 var(--font-body); color: var(--slate); }

/* ---------- S7 manifesto ---------- */
.manifesto {
  background: var(--deep);
  padding: 136px var(--pad-x);
  display: flex; flex-direction: column; gap: 36px;
}
.manifesto-lines { display: flex; flex-direction: column; }
.manifesto-lines .line { font: 300 80px/86px var(--font-title); color: var(--cream); }
.manifesto-lines .dim { color: var(--lavender); }
.manifesto-lines .gold-italic { font-style: italic; color: var(--gold); }

/* ---------- coming soon ---------- */
.coming-soon {
  min-height: calc(100vh - 93px);
  background: var(--deep);
  display: flex; align-items: center;
}
.coming-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 24px; padding: 96px 0;
}
.coming-mark {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--cream);
  font: 700 34px/1 var(--font-body);
}
.coming-eyebrow {
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold);
}
.coming-title { font: 300 52px/60px var(--font-title); color: var(--cream); }
.coming-title .gold-italic { font-style: italic; color: var(--gold); }
.coming-note { max-width: 420px; font: 400 15px/25px var(--font-body); color: var(--lavender); }
.coming-back { font: 600 12px/1 var(--font-body); color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.coming-back:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--deep);
  border-top: 1px solid var(--white-12);
  padding: 72px 0 40px;
}
.footer-top {
  display: grid;
  /* 页脚分组数由后台决定（≥1）→ 用 auto-fit 自适应列数，别写死 3 列
     （原先固定 `380px 1fr 1fr 1fr`，多一个分组就会错位） */
  grid-template-columns: 380px repeat(auto-fit, minmax(120px, 1fr));
  gap: 64px;
}
.footer-left { display: flex; flex-direction: column; gap: 24px; }
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-brand strong { font: 700 15px/1 var(--font-body); color: var(--cream); letter-spacing: 0.5px; }
.footer-brand small { font: 400 10px/1 var(--font-body); color: var(--lavender); letter-spacing: 1px; }
.footer-address { display: flex; flex-direction: column; gap: 8px; }
.footer-address p { font: 400 13px/21px var(--font-body); color: var(--lavender); }

.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col-header { font: 600 10px/1 var(--font-body); color: var(--cream); letter-spacing: 1px; text-transform: uppercase; }
.footer-col ul { display: flex; flex-direction: column; }
.footer-col li a {
  display: inline-block;
  font: 400 13px/26px var(--font-body);
  color: var(--lavender);
}
.footer-col li a:hover { color: var(--cream); }

/* 外链标记（顶部导航与页脚共用）—— 用真实元素而不是 ::after：
   `.nav-menu a.active::after` 已被当前页底线占用，伪元素会互相覆盖 */
.ext-i { font-size: 0.85em; opacity: 0.7; margin-left: 3px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--white-12);
  font: 400 11px/1.5 var(--font-body);
  color: var(--lavender);
}
.footer-tagline { font-size: 10px; font-weight: 500; }

/* ============================================================
   RESPONSIVE — tablet ≤1180
   ============================================================ */
@media (max-width: 1180px) {
  :root { --pad-x: 40px; }

  .hero-media { height: 100vh; height: 100svh; }   /* 2026-09-28：hero 满屏（平板也满屏） */
  .hero-slogan { font-size: 44px; line-height: 52px; left: 40px; bottom: 33vh; }   /* 避开成片烧入的字幕带 */

  .network-row { flex-direction: column; gap: 40px; }
  .network-left { width: auto; }
  .statement { font-size: 38px; line-height: 46px; }

  .uk-row { flex-direction: column; gap: 40px; }
  .uk-text { width: auto; }
  .uk-media { height: 380px; width: 100%; }

  .school-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .school-card:nth-child(even) { padding-top: 0; }

  .gc-row { flex-direction: column-reverse; gap: 40px; }
  .gc-text { width: auto; }
  .gc-media img { height: 320px; }

  .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }

  .leadership-row { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .leader-card:nth-child(2), .leader-card:nth-child(3) { padding-top: 0; }
  .leader-photo { height: 340px; }

  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer-left { grid-column: 1 / -1; }
}

/* ============================================================
   NAV COLLAPSE — ≤1000 (2026-09-14)

   桌面导航实测需要约 985px 才放得下（品牌 168 + 间距 56 + 菜单 465 +
   按钮 130 ≈ 819，再加两侧 --pad-x）；夹在 720–985 之间时
   「Global Campus / Our Schools / News & Insights」会被挤成两行。
   因此把折叠断点从 720 提到 1000：平板与小笔记本一律走折叠菜单。
   （JS 只切换 .site-nav.open，不依赖具体断点，无需改动。）
   ============================================================ */
@media (max-width: 1000px) {
  .nav-menu, .partner-btn { display: none; }
  .brand { margin-right: auto; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
  }
  .nav-toggle span { width: 22px; height: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
  .site-nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* 展开：菜单与 Partner Access 都回到文档流纵向排列（菜单独占一行，按钮自然排到其下）。
     ⚠️ 原实现两者都用 position:absolute + 同一个 top:100% 起点，只靠 margin-top:16px 错开，
     结果 Partner Access 按钮正压在菜单第一行（About）上 —— 2026-09-16 修复（⚠️ P1 挂账 §5.2）。 */
  .site-nav.open .nav-inner { flex-wrap: wrap; }
  /* 换行顺序：第一行 = 品牌 + 关闭按钮（保持右上角），第二行 = 菜单，第三行 = Partner Access。
     不加 order 的话，HTML 里的 nav-toggle 排在菜单之后，会被一起挤到下面去。 */
  .site-nav.open .nav-inner > .brand { order: 1; }
  .site-nav.open .nav-toggle { order: 2; }
  .site-nav.open .nav-menu {
    order: 3;
    display: flex;
    position: static;
    flex: 1 0 100%;            /* 独占整行 → 后面的按钮被挤到下一行 */
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 8px var(--pad-x) 4px;
  }
  .site-nav.open .nav-menu a { padding: 12px 0; font-size: 14px; width: 100%; border-bottom: 1px solid var(--hairline); }
  /* 折叠菜单里短线要贴到行底：桌面版的 -7px 会正好压到分隔线上 */
  .site-nav.open .nav-menu a.active::after { left: 0; right: auto; width: 26px; bottom: 0; }
  .site-nav.open .partner-btn {
    order: 4;
    display: inline-block;
    position: static;
    flex: 1 0 100%;
    margin: 14px var(--pad-x) 20px;
    text-align: center;
  }
}

/* ============================================================
   RESPONSIVE — mobile ≤720
   ============================================================ */
@media (max-width: 720px) {
  :root { --pad-x: 20px; }

  .hero { padding: 0; }                             /* 2026-09-28：hero 满屏，内边距交给子元素 */
  .hero-media { height: 100vh; height: 100svh; }    /* svh 避免移动端地址栏把 100vh 撑高 */
  /* 2026-09-30：新版成片（hero-20260930）手机端适配 ——
     ① 竖屏 cover 只保留中间约 26% 宽，把裁切焦点略左移以对准画面主体；
     ② 成片底部已无烧入字幕，但中段画面明暗交错，加深遮罩保证标语可读。 */
  .hero-media .hero-video { object-position: 45% center; }
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(42, 17, 36, 0.80) 0%,
      rgba(42, 17, 36, 0.32) 18%,
      rgba(42, 17, 36, 0.24) 48%,
      rgba(42, 17, 36, 0.64) 76%,
      rgba(42, 17, 36, 0.92) 95%,
      rgba(42, 17, 36, 1) 100%);
  }
  .hero-slogan { left: 24px; bottom: 142px; font-size: 30px; line-height: 38px; }   /* 避开成片烧入的字幕带 */
  .hero-hairline { margin: 28px var(--pad-x) 0; }
  .hero-foot { padding: 24px var(--pad-x) 24px; }

  .section-network, .section-schools, .section-campus, .section-numbers,
  .section-leadership { padding-top: 64px; padding-bottom: 64px; }
  .section-network, .section-campus, .section-leadership { gap: 48px; }

  .statement { font-size: 30px; line-height: 38px; }
  .lead { font-size: 16px; line-height: 27px; }

  .audience-strip { grid-template-columns: 1fr; }
  .audience-cell { padding: 24px 0 !important; }
  .audience-cell + .audience-cell { border-left: 0; border-top: 1px solid var(--hairline); }

  .band-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .band { padding-top: 56px; padding-bottom: 56px; }
  .band-title { font-size: 36px; line-height: 42px; }

  .section-schools { padding-top: 64px; padding-bottom: 64px; }
  .uk-row { margin-bottom: 48px; gap: 32px; }
  .uk-name { font-size: 28px; line-height: 34px; }
  .uk-media { height: 260px; }

  .school-grid { grid-template-columns: 1fr; }
  .card-media { height: 220px; }

  .gc-title { font-size: 32px; line-height: 40px; }
  .gc-media img { height: 240px; }

  .principle-row { flex-direction: column; gap: 8px; }
  .principle-name { width: auto; }

  .stats-row { grid-template-columns: 1fr; gap: 40px; }
  .stat-number { font-size: 56px; line-height: 60px; }

  .leadership-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .leadership-title { font-size: 34px; line-height: 40px; }
  .leadership-row { grid-template-columns: 1fr; }
  .leader-photo { height: 320px; }

  .manifesto { padding-top: 80px; padding-bottom: 80px; }
  .manifesto-lines .line { font-size: clamp(34px, 9vw, 56px); line-height: 1.15; }

  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  .coming-title { font-size: 32px; line-height: 40px; }
}

/* ============================================================
   SUBPAGES — shared components for About / Global Campus /
   Our Schools / Recognition / News & Insights / Contact
   (appended only; existing rules above are untouched)
   ============================================================ */

/* generic content section for subpages */
.page-section { padding: 96px 0; }

/* operating framework grid — Global Campus */
.framework-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
}
.framework-cell {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.framework-no { font: 600 11px/1 var(--font-body); color: var(--gold); }
.framework-name { font: 600 19px/25px var(--font-body); color: var(--ink); }
.framework-desc { font: 400 13px/20px var(--font-body); color: var(--slate); }

/* accreditation grid — Recognition */
.accred-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.accred-cell {
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  font: 300 34px/40px var(--font-title);
  color: var(--ink);
  letter-spacing: 0.5px;
}

/* pending-confirmation blocks */
.pending-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pending-block {
  min-height: 200px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
}
.pending-block .eyebrow { color: var(--cream); }
.pending-note { max-width: 320px; font: 400 13px/21px var(--font-body); color: var(--slate); }

/* contact form — static layout, submission wired up later */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}
.field { display: flex; flex-direction: column; gap: 10px; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}
.field input, .field select, .field textarea {
  font: 400 14px/1.5 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 12px 14px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { min-height: 140px; resize: vertical; }
.form-actions { margin-top: 40px; }
/* 2026-09-17：表单接线后按钮由 <a> 改为 <button>，补上 button 的默认样式重置 */
.form-actions .partner-btn { margin-left: 0; display: inline-block; background: transparent; cursor: pointer; }

/* honeypot 反垃圾字段：真人不可见。
   刻意用「移出视口」而不是 display:none —— 部分爬虫会跳过 display:none 的字段。 */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 表单反馈（端点 302 回本页 ?sent=1 / ?err=<code>#enquiry 后显示） */
.form-note {
  margin-top: 22px;
  padding: 12px 16px;
  font: 400 14px/1.6 var(--font-body);
  border-left: 2px solid var(--gold);
}
.form-note.ok  { color: var(--ink); background: rgba(223, 194, 143, 0.16); }
.form-note.err { color: #B3261E; background: rgba(179, 38, 30, 0.08); border-left-color: #B3261E; }

/* band sub-line — Global Campus page head second slogan (same style as band-title) */
.band-sub { font-size: clamp(36px, 4.9vw, 58px); line-height: 1.1; color: var(--ink); margin-top: 10px; }

/* awards list — Recognition (GHQ-confirmed entries) */
.awards-list {
  margin-top: 32px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.awards-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  font: 400 14px/22px var(--font-body);
  color: var(--ink);
}
.awards-list + .pending-block { margin-top: 56px; }

/* accreditation logo cards — Recognition (white tiles on dark) */
.accred-logo {
  background: #fff;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.accred-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* academic results — five-up stat variant */
.results-head { margin-top: 56px; }
.results-row { grid-template-columns: repeat(5, 1fr); gap: 32px; margin-top: 32px; }

/* --- subpages responsive --- */
@media (max-width: 1180px) {
  .framework-grid { grid-template-columns: repeat(2, 1fr); }
  .accred-grid { grid-template-columns: repeat(2, 1fr); }
  .pending-grid { grid-template-columns: 1fr; }
  .results-row { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}
@media (max-width: 720px) {
  .page-section { padding: 64px 0; }
  .framework-grid { grid-template-columns: 1fr; gap: 40px; }
  .accred-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .accred-cell { font-size: 28px; line-height: 34px; }
  .accred-logo { height: 88px; padding: 12px; }
  .results-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .form-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* news article layout — one PHP file per post under news/ (see news/README.md) */
.news-article { max-width: 680px; margin: 0 auto; padding: 88px 0 96px; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
.news-article .eyebrow { display: block; margin-bottom: 20px; }
.news-article h1 { font: 300 44px/52px var(--font-title); color: var(--ink); margin-bottom: 32px; }
.news-article p { font-size: 16px; line-height: 29px; font-weight: 400; color: var(--ink); }
.news-article p + p { margin-top: 20px; }
.news-article img { margin: 22px 0; max-width: 100%; height: auto !important; border-radius: 6px; }
.news-article mark { background: rgba(223,194,143,.32); color: inherit; padding: 0 4px; border-radius: 3px; }
.news-article video { display: block; max-width: 100%; margin: 22px 0; border-radius: 6px; background: #000; }
.news-article audio { display: block; width: 100%; margin: 20px 0; }
.news-article iframe { display: block; max-width: 100%; margin: 22px 0; }
/* 图片浮动环绕：窄屏自动回落为整行（响应式安全兜底） */
@media (max-width: 720px) {
  .news-article img[style*="float"] { float: none !important; width: 100% !important; margin: 12px 0 !important; }
  .news-article iframe { aspect-ratio: 4 / 3 !important; }
}
.news-article pre { overflow-x: auto; padding: 14px 16px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--hairline); font-size: 13.5px; }
.news-article code { font-size: .95em; }
.news-article :not(pre) > code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }
.news-article table { max-width: 100% !important; }
.news-article section, .news-article div, .news-article p { max-width: 100%; }
/* 带底色的块（公众号深/浅色卡片）：淡描边让卡片轮廓清晰 */
.news-article [style*="background-color"] { border-radius: 6px; }
.news-article .gc-caption { margin-top: 8px; }
.news-article .coming-back { margin-top: 40px; }
@media (max-width: 720px) {
  .news-article { padding: 56px 0 64px; }
  .news-article h1 { font-size: 32px; line-height: 40px; margin-bottom: 24px; }
}

/* ============================================================
   ARTICLE PAGE — CMS-generated posts (2026-09-14, P0-2)

   分层结构（缩放必须分层，否则卡片会被一起放大）：
     .article-shell   外距（对齐 .container 的左右留白）
       └ .article-wrap
         └ .article-card   淡紫卡片：宽度自适应 + 内边距 —— **不缩放**
           └ .news-article 内容层：JS 按内容宽等比 zoom（≤ --article-zoom-max）
         .article-pager    上下篇：卡片**外**、不缩放（避免与正文比例不一致）

   三个可调参数集中在 :root（改这一处即可，JS 读同名常量）：
     --article-max      卡片最大宽（680 → 1120）
     --article-base     公众号正文基准宽（677，原文比例基准）
     --article-zoom-max 缩放上限（1.45；1.0 = 关闭缩放）
   ============================================================ */

:root {
  --article-max: 1120px;
  --article-base: 677px;
  --article-zoom-max: 1.45;
  --article-card-bg: #3A1B33;   /* A 案淡紫（与 --band:#3D1A35 同族） */
}

.article-shell { padding: 64px 0 96px; }
.article-wrap  { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.article-card {
  width: min(var(--article-max), 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  background: var(--article-card-bg);
  border: 1px solid var(--white-12);
  border-radius: 14px;
  /* 内容层 zoom 后高度由内容决定；overflow 保证圆角裁切干净 */
  overflow: hidden;
}
/* 文章头（日期 + 标题）—— **位于 zoom 层之外**，字号就是设计稿尺寸，不随正文等比放大。
   ⚠️ 曾与正文同层，被 1.45 倍 zoom 一起放大（44px → 视觉 64px），首屏被标题占满。 */
.article-card > .article-head { margin: 0 0 6px; }
.article-head .eyebrow { display: block; margin-bottom: 20px; }
.article-head h1 {
  font: 300 44px/52px var(--font-title);
  color: var(--ink);
  margin-bottom: 34px;
}

/* 卡片内的正文层：取消旧的居中窄栏与纵向内边距（宽度/缩放由 JS 接管） */
.article-card > .news-article {
  max-width: 720px;      /* 无 JS 降级：仍是一条可读的窄栏（不会拉成 1000px 长行） */
  margin: 0 auto;
  padding: 0;
}
.article-card > .news-article > :first-child { margin-top: 0; }

/* 封面图（cover 字段有值时） */
.news-article .article-cover { margin: 0 0 32px; }
.news-article .article-cover img { width: 100%; height: auto; border-radius: 8px; }

/* 目录（仅当正文含 ≥2 个 h2/h3/h4 时渲染） */
.news-article .article-toc {
  margin: 0 0 34px;
  padding: 18px 20px 16px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}
.news-article .article-toc-title {
  margin: 0 0 12px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.news-article .article-toc ol { list-style: none; }
.news-article .article-toc li { font: 400 14px/24px var(--font-body); }
.news-article .article-toc li.toc-3 { padding-left: 22px; font-size: 13px; }
.news-article .article-toc li.toc-4 { padding-left: 44px; font-size: 13px; }
.news-article .article-toc a { color: var(--slate); }
.news-article .article-toc a:hover { color: var(--gold); }

/* 上下篇导航（卡片外，正常比例） */
.article-pager {
  width: min(var(--article-max), 100%);
  margin: 24px auto 0;
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.article-pager a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  background: var(--band);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.article-pager a:hover { border-color: var(--gold); }
.article-pager .pg-label {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
}
.article-pager .pg-title {
  font: 400 15px/22px var(--font-title);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-pager .pg-next { text-align: right; align-items: flex-end; }
.article-pager .pg-empty { flex: 1 1 0; }

@media (max-width: 720px) {
  /* 窄屏：卡片内边距收窄（clamp 下限 28px 在 375 宽时过肥），上下篇改单列 */
  .article-shell { padding: 36px 0 64px; }
  .article-card { padding: 22px 18px; border-radius: 12px; }
  .article-head h1 { font-size: 30px; line-height: 38px; margin-bottom: 22px; }
  .article-head .eyebrow { margin-bottom: 14px; }
  .article-pager { flex-direction: column; gap: 12px; }
  .article-pager .pg-next { text-align: left; align-items: flex-start; }
  .article-pager .pg-empty { display: none; }
}

/* 打印：zoom 会被带进打印、卡片底色也浪费墨 —— 打印时一律还原为单栏黑字 */
@media print {
  .site-nav, .site-footer, .article-pager, .article-toc, .coming-back { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .article-shell { padding: 0 !important; }
  .article-wrap  { max-width: none; padding: 0 !important; }
  .article-card {
    width: 100% !important; max-width: none; margin: 0; padding: 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important;
  }
  /* zoom 与宽度补偿都必须复位，否则打印出来是放大的窄条 */
  .article-card > .news-article { zoom: 1 !important; width: auto !important; max-width: none !important; }
  .news-article, .news-article * { color: #111 !important; }
  .article-head, .article-head * { color: #111 !important; }
  .news-article mark { background: #ffe9a8 !important; }
  .news-article a { text-decoration: underline; }
  .news-article img, .news-article video, .news-article iframe { max-width: 100% !important; }
}

/* news list — index page */
.news-list { border-top: 1px solid var(--hairline); }
.news-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 40px 0;
  border-bottom: 1px solid var(--hairline);
}
.news-date { font: 600 10px/1 var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.news-item-title a { font: 300 28px/36px var(--font-title); color: var(--ink); }
.news-item-title a:hover { color: var(--gold); }
.news-item-excerpt { max-width: 640px; font: 400 14px/23px var(--font-body); color: var(--slate); }
@media (max-width: 720px) {
  .news-item { padding: 32px 0; }
  .news-item-title a { font-size: 22px; line-height: 30px; }
}

/* ============================================================
   MOTION — SPEC §4 additions (restrained; both reduced-motion aware)
   ============================================================ */

/* image entrance: 1.02 -> 1.00 ease-out (independent `scale` property,
   so hover transforms on .card-media img stay untouched) */
.reveal img { scale: 1.02; transition: scale 0.9s ease-out; }
.reveal.visible img { scale: 1; }

/* scroll parallax: hero only (opt-in via data-parallax). No CSS headroom:
   the source (1200x640) is taller-ratioed than the frame (2.25), so cover
   leaves ~128px of vertical surplus; main.js clamps the shift to the real
   per-breakpoint surplus computed from naturalWidth/Height, so the image
   never exposes an edge and never crops beyond the cover baseline. */
@media (prefers-reduced-motion: reduce) {
  .reveal img { scale: 1; transition: none; }
}
@media print {
  .reveal img { scale: 1; }
}

/* ============================================================
   RESPONSIVE FIXES — mobile/platform correctness
   ============================================================ */

/* ≤720: band intro kept a 320px flex-basis (column axis) — let it size to content */
@media (max-width: 720px) {
  .band-intro { flex: 0 0 auto; }

  /* iOS Safari auto-zooms inputs under 16px on focus */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* mobile browsers: dynamic viewport height for the coming-soon centring */
@supports (height: 100svh) {
  .coming-soon { min-height: calc(100svh - 93px); }
}

/* ============================================================
   RESPONSIVE v2 — integrated pass (0907):
   fluid type via clamp (smooths the 1180/720 jumps) ·
   768-900 mid-band · leadership single-column stagger ·
   touch targets on coarse pointers.
   Later declarations win: these override the matching rules in
   the ≤1180 / ≤720 blocks above without touching them.
   ============================================================ */

/* --- fluid type scale (vw mid-points tuned to the v11 ladder) --- */
.hero-slogan      { font-size: clamp(30px, 4.7vw, 56px); line-height: 1.15; }
.statement        { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.16; }
.band-title       { font-size: clamp(36px, 4.9vw, 58px); line-height: 1.1; }
.uk-name          { font-size: clamp(28px, 3.1vw, 36px); line-height: 1.2; }
.gc-title         { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.12; }
.stat-number      { font-size: clamp(48px, 4.2vw, 60px); line-height: 1.067; }  /* R6-4：原 clamp(56px,6.1vw,72px) 把字号锁死在 72px，压住了基础规则的 60px */
.leadership-title { font-size: clamp(34px, 4.1vw, 48px); line-height: 1.12; }
.coming-title     { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.15; }

/* --- 768-900 mid-band: keep the band headline on one line longer,
       stack the leadership header before it gets tight --- */
@media (max-width: 900px) {
  .band-intro { flex: 0 0 auto; }
  .leadership-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* （原 `.nav-menu { gap: 18px }` 已删：导航折叠断点提到 1000 后，≤900 时导航本就隐藏） */
  /* 页头 band 在 900 以下也放不下：左栏被右侧文案挤到只剩百来像素，
     eyebrow 折成四行并顶到文案上（1000 时仍正常，实测断点在 900-1000 之间）→ 改上下堆叠 */
  .band-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* --- leadership, tablet: single column with alternating offset
       (replaces the 2+1 orphan row; keeps the staggered editorial feel).
       Portraits render full-height and uncropped: the photo box locks to
       the source ratio (384x400) with a max width, so object-fit: cover
       never trims head or shoulders on wide single-column cards. --- */
@media (max-width: 1180px) {
  .leadership-row { grid-template-columns: 1fr; row-gap: 56px; }
  .leader-card { width: 86%; }
  .leader-card:nth-child(even) { margin-left: auto; }
  .leader-photo { width: 100%; max-width: 420px; height: auto; aspect-ratio: 384 / 400; }
}
@media (max-width: 720px) {
  .leader-card { width: 100%; }
  .leader-card:nth-child(even) { margin-left: 0; }
}

/* --- touch targets: roomier hit areas on coarse pointers only --- */
@media (hover: none) and (pointer: coarse) {
  .nav-menu a { padding: 10px 0; }
  .footer-col li a { padding: 6px 0; }
}

/* --- brand assets (0908: real logo, white background removed to alpha) --- */
.footer-logo { width: 34px; height: auto; display: block; }

/* --- uncropped school cards below 1180: the 190px fixed height turned
       into a wide letterbox on 2-col/1-col layouts (29-49% vertical crop).
       Lock the card media to the source ratio (282x190) instead. --- */
@media (max-width: 1180px) {
  .card-media { height: auto; aspect-ratio: 282 / 190; }
}

/* --- Global Campus network photo: full-width block locked to the **source**
      ratio so the people in it are never cropped ---
      ⚠️ 2026-09-24 修正：这里原先写死 696/380（两代前那张源图的比例），
         而 #9 换上的新图是 1919×1280（比例 1.4988）→ 比例失配，上下被裁 18%。
         图片位比例必须跟着**当前源图**走，否则每次换图都会裁切。 */
.uk-media.gc-photo { height: auto; aspect-ratio: 1919 / 1280; }
.uk-media.gc-photo img { width: 100%; height: 100%; }

/* --- below 1180 the UK feature photo and the home corridor photo leave
      their designed 764/460 and 696/380 frames and go full-width — lock
      them to source ratio too, or cover trims 15-33% vertically --- */
@media (max-width: 1180px) {
  .uk-media { height: auto; aspect-ratio: 764 / 460; }
  .gc-media img { height: auto; aspect-ratio: 1919 / 1280; }
}

/* --- CMS 0911：新闻列表封面 + 栏目标签、文章封面、正文表格 --- */
.news-item.has-cover { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.news-item-cover { display: block; border-radius: 8px; overflow: hidden; }
.news-item-cover img { display: block; width: 100%; height: 170px; object-fit: cover; }
.news-item-main { min-width: 0; }
.article-cover { margin: 28px 0; }
.article-cover img { width: 100%; border-radius: 10px; display: block; }
.news-article .tbl-wrap { overflow-x: auto; margin: 26px 0; }
.news-article img.inline-img { max-width: 100%; height: auto; border-radius: 6px; vertical-align: middle; margin: 4px 2px; }
.news-article table { width: 100%; border-collapse: collapse; font: 400 15px/1.6 var(--font-body); }
.news-article th, .news-article td { border: 1px solid var(--hairline); padding: 10px 14px; text-align: left; }
.news-article thead th { background: rgba(255, 255, 255, .06); font-weight: 600; }
@media (max-width: 720px) {
  .news-item.has-cover { grid-template-columns: 1fr; gap: 16px; }
  .news-item-cover img { height: auto; }
}

/* --- CMS 0911：样式融合块（公众号粘贴映射——保留排版层次，用网站设计语言渲染） --- */
.news-article .ta-c { text-align: center; }
.news-article .ta-r { text-align: right; }
.news-article .indent { padding-left: 2.2em; border-left: 3px solid var(--gold); margin: 22px 0; }
.news-article .card-block { background: var(--band); border: 1px solid var(--hairline); border-radius: 10px; padding: 16px 20px; margin: 26px 0; }
.news-article .note-sm { font-size: 13.5px; color: var(--slate); line-height: 1.8; }
.news-article .ta-c figure { margin-left: auto; margin-right: auto; }
.news-article .ta-c figure img { display: block; margin: 0 auto; }
/* 同意勾选（2026-09-18 合规项 C）：必填的同意 + 可选的订阅，两行同款样式 */
.consent-block { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; }
.consent-line { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 12.5px/19px var(--font-body); color: var(--slate); }
.consent-line input[type="checkbox"] { flex: 0 0 auto; width: 14px; height: 14px; margin: 3px 0 0; accent-color: var(--gold); cursor: pointer; }
.consent-line a { color: var(--gold); border-bottom: 1px solid rgba(223, 194, 143, 0.45); }
.consent-line a:hover { border-bottom-color: var(--gold); }

.news-article .card-block > :first-child { margin-top: 0; }
.news-article .card-block > :last-child { margin-bottom: 0; }

/* ============================================================
   S3.6 · SCHOOL DETAIL SECTIONS（2026-09-18，落实 V1 反馈 #9）
   schools.php 每校一块：标题行 + 指标卡 + 正文 + 大图 + 画廊占位 + 奖项
   ============================================================ */
/* 页内校际跳转 */
.sd-jump { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-bottom: 8px; }
.sd-jump a {
  font: 600 11px/1 var(--font-body); color: var(--slate);
  letter-spacing: 0.6px; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sd-jump a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.school-detail { scroll-margin-top: 96px; }               /* 锚点跳转别被吸顶导航压住 */
.school-detail + .school-detail { border-top: 1px solid var(--hairline); }

.sd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.sd-name { margin-top: 12px; font: 300 36px/44px var(--font-title); color: var(--ink); }

.sd-body { display: flex; align-items: flex-start; gap: 56px; margin-bottom: 44px; }
.sd-prose { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.sd-prose p { font: 400 15px/26px var(--font-body); color: var(--slate); }

/* 指标卡：横线分隔的 dt/dd 两列（不用表格，窄屏自动堆成一块） */
.sd-facts { width: 300px; flex-shrink: 0; padding: 22px 24px; background: var(--band); border: 1px solid var(--hairline); }
.sd-facts-title {
  display: block; margin-bottom: 14px;
  font: 600 10px/1 var(--font-body); color: var(--gold); letter-spacing: 1px; text-transform: uppercase;
}
.sd-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; }
.sd-facts dt { font: 400 12px/18px var(--font-body); color: var(--slate); }
.sd-facts dd { font: 600 12px/18px var(--font-body); color: var(--ink); text-align: right; }

/* 2026-09-24 客户反馈：区首大图**不要裁切** —— 100% 铺满、高度自适应（按原图比例）。
   ⚠️ 这张图同时被两层约束：本规则（764/460）与通用 `.sd-shot`（4/3 + overflow:hidden
   + img{height:100%;object-fit:cover}）→ 两层都要盖掉，只改一层看不出效果。 */
/* 2026-09-24（负责人）：相册本身已是「大图 + 缩略图条」，区首再放一张大图属重复 → 整块隐藏。
   用 CSS 隐藏而非删 HTML/字段：① 后台「从文件回填」不会把它写回来 ② 完全可逆（删掉这行即恢复）。
   注：下面三条 .sd-feature 子元素规则随之成为死代码，保留以便随时还原。 */
.sd-feature { display: none; }
.sd-feature .sd-shot { aspect-ratio: auto; overflow: visible; border: 0; background: none; }
.sd-feature .sd-shot picture { display: block; width: 100%; height: auto; }
.sd-feature .sd-shot img { width: 100%; height: auto; object-fit: fill; display: block; }

.sd-gallery-wrap { margin-bottom: 44px; }
.sd-gallery-note { display: block; margin-bottom: 14px; font: italic 400 11px/1.5 var(--font-body); color: var(--slate); }
/* 每校照片数量不等（6–8 张）→ 用 auto-fill，避免固定 5 列时最后一行落单 */
/* ═══════════════════════════════════════════════════════════════════════════
   校区照片滑动区块（2026-09-22 · 客户需求 S2；规格见 rgmg/docs/方案/V2.1-修改方案-修订版）
   逐张吸附（scroll-snap-stop: always）· 箭头 / 圆点 / 计数 · 移动端一屏 1.2 张 ·
   单张区块隐藏箭头圆点并把卡片放宽 —— 看起来是刻意设计，而不是"坏掉了"
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-slider { margin: 0 0 40px; }
.sd-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.sd-slider-title { font: 300 22px/30px var(--font-title); color: var(--ink); }
.sd-slider-count { flex: 0 0 auto; font: 600 11px/1 var(--font-body); letter-spacing: 1px; color: var(--slate); font-variant-numeric: tabular-nums; }
.sd-slider-viewport { position: relative; }
.sd-slider-track {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px; margin: -4px;                     /* 给卡片的 focus 外框留出空间 */
}
.sd-slider-track::-webkit-scrollbar { display: none; }
.sd-slider-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 2026-09-24（负责人要求）：校区相册由「一屏 3 张小卡横滑」改为「大图 + 缩略图条」——
   每张卡片占满轨道宽度 ⇒ 一次只显示一张 = 页面上的"大图"，下方缩略图条由 JS 生成与之联动。 */
.sd-slide { flex: 0 0 100%; width: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.sd-slide .sd-shot { display: block; aspect-ratio: 3 / 2; }
.sd-slide .sd-shot picture { display: block; width: 100%; height: 100%; }
.sd-slide .sd-shot img { width: 100%; height: 100%; object-fit: cover; }

/* 单张：仍是全宽大图；用不上的控件去掉 */
.sd-slider[data-count="1"] .sd-slide { width: 100%; }
.sd-slider[data-count="1"] .sd-slider-arrow,
.sd-slider[data-count="1"] .sd-slider-dots,
.sd-slider[data-count="1"] .sd-gv-thumbs { display: none; }

/* ── 页面上的缩略图条（2026-09-24 新增，由 JS 生成）────────────────────────
   与灯箱内的缩略图条同构、同尺寸，保证"点开前后是同一个东西"；
   圆点（.sd-slider-dots）由它取代，故隐藏。 */
.sd-gv-thumbs {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.sd-gv-thumbs::-webkit-scrollbar { display: none; }
.sd-gv-thumbs button {
  flex: 1 1 0; max-width: 132px; height: 72px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 4px; background: none; opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.sd-gv-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-gv-thumbs button:hover { opacity: 1; }
.sd-gv-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--gold); }
.sd-gv-thumbs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* ⚠️ 必须带 .sd-slider 前缀：本文件里圆点的通用规则排在更后面，同特异性时后者胜出
   （首测踩到：缩略图条下面仍露出一排圆点）。 */
.sd-slider .sd-slider-dots { display: none; }

/* 左右箭头 */
.sd-slider-arrow {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0;
  border: 1px solid rgba(223, 194, 143, 0.45); border-radius: 50%;
  background: rgba(11, 17, 24, 0.5); cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
/* 2026-09-24：原先 -20px 让箭头骑在容器边缘 20px 处，被祖先的 overflow 裁掉一半
   （截图里只剩半个圆，看着像控件坏了）→ 内移到 10px，完整浮在图片之上 */
.sd-slider-arrow.is-prev { left: 10px; }
.sd-slider-arrow.is-next { right: 10px; }
.sd-slider-arrow::before { display: block; font: 400 20px/1 var(--font-body); color: #fff; }
.sd-slider-arrow.is-prev::before { content: '\2039'; }
.sd-slider-arrow.is-next::before { content: '\203a'; }
.sd-slider-arrow:hover { background: rgba(11, 17, 24, 0.82); border-color: var(--gold); }
.sd-slider-arrow:hover::before { color: var(--gold); }
.sd-slider-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sd-slider-arrow[disabled] { opacity: 0.26; cursor: default; }
.sd-slider-arrow[disabled]:hover { background: rgba(11, 17, 24, 0.5); border-color: rgba(223, 194, 143, 0.45); }
.sd-slider-arrow[disabled]:hover::before { color: #fff; }

/* 圆点 */
.sd-slider-dots { display: flex; align-items: center; gap: 7px; margin-top: 15px; }
/* 整行放得下时 JS 会给控件加 hidden —— 这些元素有 display 规则，必须显式覆盖 */
.sd-slider-dots[hidden], .sd-slider-arrow[hidden], .sd-slider-count[hidden] { display: none; }
.sd-slider-dots button {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(20, 28, 38, 0.2); transition: width 0.22s ease, background 0.22s ease;
}
.sd-slider-dots button:hover { background: rgba(20, 28, 38, 0.4); }
.sd-slider-dots button[aria-current="true"] { width: 22px; background: var(--gold); }
.sd-slider-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 720px) {
  .sd-slide { width: 100%; }                      /* 大图模式：一屏一张 */
  .sd-slider-arrow { display: none; }             /* 触摸设备用原生横滑 + 下方缩略图条 */
  .sd-slider-title { font: 300 19px/26px var(--font-title); }
  .sd-slider[data-count="1"] .sd-slide { width: 100%; }
  .sd-gv-thumbs button { height: 54px; }          /* 移动端缩略图矮一些，别挤占大图 */
}

@media (prefers-reduced-motion: reduce) {
  .sd-slider-dots button, .sd-slider-arrow { transition: none; }
}

.sd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sd-shot { aspect-ratio: 4 / 3; overflow: hidden; background: var(--band); border: 1px solid var(--hairline); }
.sd-shot img { width: 100%; height: 100%; object-fit: cover; }
/* 待供图占位：虚线金框 + 编号 + 目标尺寸（素材到位后换成带 img 的 .sd-shot） */
.sd-shot.is-empty {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: rgba(223, 194, 143, 0.35);
  background: rgba(255, 255, 255, 0.02);
}
.sd-shot.is-empty span { display: flex; flex-direction: column; gap: 5px; text-align: center; font: 600 10px/1.4 var(--font-body); color: var(--gold); letter-spacing: 0.6px; }
.sd-shot.is-empty em { font: 400 9px/1 var(--font-body); font-style: normal; color: var(--slate); letter-spacing: 0; }

.sd-awards { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   校区独立页（2026-09-18 第二轮：Schools 概览页 + 每校一页 + 逐校切换）
   ============================================================ */
.sd-switch { margin: 34px 0 0; }
.sd-switch a { white-space: nowrap; }
.sd-switch a.is-current { color: var(--gold); border-bottom-color: var(--gold); }

.sd-toolbar { display: flex; justify-content: flex-end; margin: 0 0 28px; }

/* 网格里的照片：现在是 <button>（点击开灯箱），要清掉按钮默认样式 */
.sd-shot { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.sd-shot picture { display: block; width: 100%; height: 100%; }
.sd-shot img { transition: transform 0.5s ease; }
.sd-shot:hover img { transform: scale(1.03); }

/* 上一所 / 下一所。
   2026-09-28 Review4：这块是**独立于 section 的裸 container**（school-nav.php 直出），
   原来只有 margin-top: 10px → 底边完全贴住页脚（实测「NEXT SCHOOL」距页脚仅 11px）。
   补上底部留白，与全站 96px/64px 的节奏一致。 */
.sd-prevnext {
  display: flex; justify-content: space-between; gap: 24px;
  margin: 10px 0 64px; padding-top: 26px; border-top: 1px solid var(--hairline);
}
.sd-pn { display: flex; align-items: center; gap: 14px; max-width: 46%; }
.sd-pn .dir { font-size: 16px; color: var(--gold); }
.sd-pn .txt { display: flex; flex-direction: column; gap: 5px; font: 600 13px/18px var(--font-body); color: var(--ink); }
.sd-pn em { font: 600 10px/1 var(--font-body); font-style: normal; color: var(--slate); letter-spacing: 1px; text-transform: uppercase; }
.sd-pn.next { flex-direction: row-reverse; text-align: right; }
.sd-pn.next .txt { align-items: flex-end; }
.sd-pn:hover .txt { color: var(--gold); }

/* 图片灯箱（自研，无依赖；绑定在 js/main.js 末尾）
   2026-09-24 客户反馈：大图与缩略图条"看着是两块"（实测中间隔了 273px 空白）→
   改为**竖向一列**（大图 + 缩略图条同属一个流），缩略图条紧贴大图下方；
   点缩略图即换上方大图，整体像一个"带胶片条的查看器"。 */
.sd-lightbox {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  /* 2026-09-24（负责人）：大图偏小 —— 原先 padding-top 66px + 图高预留 250px 太保守：
     计数条是绝对定位（不占流，只需避让一点），底部胶片条约 84px，其余都是白丢的高度。 */
  /* 图幅上限 = 视口高 −（顶部计数条避让 56 + 胶片条约 96 + 间距与下内边距 18） */
  padding: 56px 3vw 14px; background: rgba(12, 9, 22, 0.94);
}
.sd-lightbox[hidden] { display: none; }
.sd-lightbox img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
/* ── 2026-09-24 第 2 版（按负责人给的参考构图重排）─────────────────────────
   参考图里：大图约 590px 宽、下面图条约 620px 宽 —— 两者**等宽、紧贴、合成一个紧凑块**。
   而第 1 版是「大图撑满 1324px + 一条 396px 小缩略图居中」，比例不成对，看着仍是两块。
   这里把两者统一到同一个宽度变量 ↓ */
/* 大图与胶片条统一宽度：两者等宽、紧贴，合成一个紧凑块 */
/* ⚠️ 必须带 .sd-lightbox 前缀：下面的通用规则里有 `width:100%` / `min-width:100%`，
   同特异性时后者胜出，会把这两条盖掉（首次实测就踩到，量出来仍是 1325px） */
.sd-lightbox .sd-lb-stage { width: min(1100px, 80vw); max-width: 100%; }
.sd-lightbox .sd-lb-thumbs { width: min(1100px, 80vw); min-width: 0; max-width: 100%; }
/* 2026-09-24 客户反馈：右上角四个按钮挤在一起、点着不方便 →
   关闭钮由"绝对定位 + 自己 40px"改为**弹性行内项**，与 − / ⟲ / + 排成同一排、同尺寸同间距 */
.sd-lb-close {
  width: 34px; height: 34px; padding: 0;
  font-size: 18px; line-height: 1; color: var(--cream);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%; cursor: pointer;
}
.sd-lb-close:hover { border-color: var(--gold); color: var(--gold); }

/* 2026-09-22 灯箱升级：计数条 / 左右换图 / 缩略图条 / 触摸友好
   舞台层 pointer-events:none、图片 auto —— 这样"点大图以外的空白"命中 box 本体即可关闭，
   同时左右 26% 热区仍按 clientX 判定换图 */
.sd-lb-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  /* 2026-09-24：去掉 space-between —— 三个项（计数 / 工具条 / 关闭）会被抻开；
     改为 flex-start + 工具条的 margin-left:auto，把四个按钮聚成整齐一排 */
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px;
}
.sd-lb-count { font: 600 12px/1 var(--font-body); letter-spacing: 1px; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
/* 舞台高度与图幅上限取同一个值（口径见 .sd-lightbox） */
.sd-lb-stage { display: flex; align-items: center; justify-content: center; width: 100%; max-height: calc(100vh - 170px); min-height: 0; pointer-events: none; }
.sd-lb-stage img { pointer-events: auto; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.sd-lb-nav {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); cursor: pointer;
}
.sd-lb-nav::before { display: block; font: 400 20px/1 var(--font-body); color: var(--cream); }
.sd-lb-nav.is-prev { left: 18px; }
.sd-lb-nav.is-next { right: 18px; }
.sd-lb-nav.is-prev::before { content: '\2039'; }
.sd-lb-nav.is-next::before { content: '\203a'; }
.sd-lb-nav:hover { border-color: var(--gold); }
.sd-lb-nav:hover::before { color: var(--gold); }
.sd-lb-nav[disabled] { opacity: 0.25; cursor: default; }
.sd-lb-nav:focus-visible, .sd-lb-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 缩略图条：不再是底部绝对定位（那样和大图隔着 273px 空白），
   改为紧贴大图下方的 flex 项 + 半透明底 + 圆角 ⇒ 与大图连成"一个带胶片条的查看器"；
   图多时**横向滚动**（不换行，避免把大图挤小）。 */
.sd-lb-thumbs {
  z-index: 2;
  /* 宽对齐大图（不再是一条居中的小条）：min-width 100% ⇒ 至少与图同宽，
     图少时也不会缩成小条；图多时按内容变宽、横向滚动 */
  min-width: 100%; width: max-content; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* 缩略图改固定尺寸后，条内居中（与大图居中一致；图少时两侧留白对称，不会左偏） */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 0 0;
  scrollbar-width: none;
}
.sd-lb-thumbs::-webkit-scrollbar { display: none; }
.sd-lb-thumbs[hidden] { display: none; }
/* 缩略图随"与大图对齐"后的条宽放大（参考构图里每张约占条宽 1/10），且不被压缩 */
.sd-lb-thumbs button {
  /* 2026-09-24（负责人反馈"缩略图怎么还几个版本"）：根因是**条宽跟着大图宽度走**
     （每张照片比例不同 → 大图宽度不同）⇒ 等分的缩略图在 90px 与 78px 之间跳。
     现在**条宽固定**（见 .sd-lightbox .sd-lb-thumbs），这里恢复等分 ⇒
     既铺满整条、尺寸又在换图时恒定；单张上限 132px 免得两三张时被拉成巨条。 */
  flex: 1 1 0; max-width: 132px; height: 72px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; background: none; opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.sd-lb-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-lb-thumbs button:hover { opacity: 1; }
.sd-lb-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--gold); }
.sd-lb-thumbs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 拖动卡片时不要拖动图片本身、也不要选中文字 */
.sd-slide .sd-shot img { -webkit-user-drag: none; user-select: none; }
.sd-slider-track { touch-action: pan-x pan-y; }

@media (max-width: 720px) {
  .sd-lb-nav { display: none; }                  /* 触摸设备用横滑/下滑 */
  /* 2026-09-24：缩略图条已改为流内元素（不再绝对定位），移动端只需收紧内边距 */
  .sd-lb-thumbs { padding: 6px 8px; gap: 6px; }
  .sd-lb-thumbs button { width: 44px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-lb-thumbs button { transition: none; }
}

/* 概览页卡片（比首页卡片更大：1 图 + 校名 + 指标行 + 简介首段 + 查看详情） */
.school-grid-solo { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.school-grid-solo .school-card:nth-child(even) { padding-top: 0; }
.sc-media { display: block; aspect-ratio: 282 / 190; overflow: hidden; }
.sc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.school-card:hover .sc-media img { transform: scale(1.03); }
.sc-body { display: flex; flex-direction: column; gap: 10px; }
.sc-facts { font: 600 11px/1.6 var(--font-body); color: var(--ink); letter-spacing: 0.3px; }
.sc-intro { font: 400 13px/20px var(--font-body); color: var(--slate); }

@media (max-width: 1180px) {
  .sd-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .sd-toolbar { justify-content: flex-start; }
  .sd-prevnext { flex-direction: column; gap: 16px; }
  .sd-pn, .sd-pn.next { max-width: 100%; flex-direction: row; text-align: left; }
  .sd-pn.next .txt { align-items: flex-start; }
}

/* ============================================================
   LEGAL PAGES（2026-09-18：Privacy Policy / Terms of Use / Cookie Notice）
   ============================================================ */
/* 2026-09-28 Review4：法务三页原先自成一套「小号 + 窄栏」排版（正文 14px/24px、内容区仅 ~580px），
   与全站 16px/27px 的正文节奏、1200px 内容区不一致，看上去像没接上站点的样式。
   这里把容器放回全站网格、只给正文限一个易读行长，并把字号/标题字体对齐站点基线。 */
.legal-wrap { max-width: none; }
.legal-body { max-width: 880px; }
.legal-meta { margin-bottom: 26px; font: italic 400 12px/1.6 var(--font-body); color: var(--slate); }
.legal-note {
  margin-bottom: 34px; padding: 14px 18px;
  border-left: 2px solid var(--gold); background: rgba(223, 194, 143, 0.07);
  font: 400 13px/21px var(--font-body); color: var(--ink);
}
.legal-body h2 { margin: 38px 0 12px; font: 300 28px/34px var(--font-title); color: var(--ink); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-bottom: 16px; font: 400 16px/27px var(--font-body); color: var(--slate); }
.legal-body ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.legal-body li { margin-bottom: 11px; font: 400 16px/27px var(--font-body); color: var(--slate); }
.legal-body li::marker { color: var(--gold); }
.legal-body strong { font-weight: 600; color: var(--ink); }
/* 待法务确认的 [方括号占位符]：醒目标记但保留原文 */
.legal-todo { padding: 0 3px; color: var(--gold); background: rgba(223, 194, 143, 0.10); border-bottom: 1px dashed var(--gold); }
/* Cookie Notice 的 cookies 分类表（窄屏横向滚动，不挤压列） */
.legal-table-wrap { margin-bottom: 22px; overflow-x: auto; }
.legal-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; font: 400 13px/21px var(--font-body); color: var(--slate); }
.legal-table th { font: 600 10px/1.4 var(--font-body); color: var(--ink); letter-spacing: 0.8px; text-transform: uppercase; }
.legal-body a { color: var(--gold); border-bottom: 1px solid rgba(223, 194, 143, 0.45); }
.legal-body a:hover { border-bottom-color: var(--gold); }

/* ---------- 上述新块的响应式 ---------- */
@media (max-width: 1180px) {
  .sd-body { flex-direction: column; gap: 32px; }
  .sd-facts { width: auto; align-self: stretch; }
  .sd-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .sd-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sd-name { font-size: 28px; line-height: 34px; }
  .sd-gallery { grid-template-columns: repeat(2, 1fr); }
  .sd-facts { padding: 18px 18px; }
}


/* ═══ 首页校区卡片：2 + 3 网格（2026-09-22 · 客户需求 H1） ═══
   第一行 UK / Shanghai 各占半宽，第二行其余三所各占 1/3；
   图片统一 16:9 + cover（源图宽幅，3:2 会多裁掉约 25% 宽度），卡片内部等高对齐。 */
.h1-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 24px; }
.h1-cards > .school-card { grid-column: span 2; display: flex; flex-direction: column; }
.h1-cards > .school-card.is-half { grid-column: span 3; }
/* 🔴 2026-09-23 Review3 #3a/#3b：这里必须显式写 `height: auto`。
   否则上面通用的 `.card-media { height: 190px }`（styles.css:233）会压过 aspect-ratio
   —— CSS 里 height 优先于 aspect-ratio —— 实测半宽卡被挤成 3.06:1（应 16:9）、
   1/3 卡成 1.99:1，图片上下被裁掉一大截（客户 #3「pictures not alligned /
   adjust into the frame」的根因，也是 UK 石砌主楼、Shanghai 钟楼"进不了框"的原因）。 */
.h1-cards .card-media { height: auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--band); }
.h1-cards .card-media picture { display: block; width: 100%; height: 100%; }
.h1-cards .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h1-cards .card-desc { flex: 1 1 auto; }              /* 简介占满剩余高度 → 链接行底部对齐 */
.h1-cards .card-link { margin-top: 12px; }

@media (max-width: 1180px) {
  .h1-cards { grid-template-columns: repeat(2, 1fr); }
  .h1-cards > .school-card, .h1-cards > .school-card.is-half { grid-column: span 1; }
}
@media (max-width: 620px) {
  .h1-cards { grid-template-columns: 1fr; gap: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
   Review 3 · 第 2 批（2026-09-23）—— 只追加，不改上方既有规则
   ═══════════════════════════════════════════════════════════════ */

/* #5「Remove the space on top」：原 = hero 底距 88 + gap 44 + 脚注区 + S2 上距 112 ≈ 275px。
   脚注区（`Adcote Schools · Est. 1907` 那行）已在 index.php 删除，这里把两端留白一并收拢。 */
.hero { padding-bottom: 32px; }
.section-network { padding-top: 48px; gap: 96px; }   /* 同条「标题下加留白」：72 → 96px */

/* #6 前半「No space under Group Leadership」：标题区与三张人像卡之间 64 → 96px */
.section-leadership { gap: 96px; }

/* #11「Too much space between sections」：Global Campus 四个区块间距压缩。
   🔴 只作用于本页专属类 .gc-section —— 全站共用的 .page-section（96px）不动，
      否则 About / Schools / Recognition / Contact 会一起变。 */
.gc-section { padding: 64px 0; }
.gc-section + .gc-section { padding-top: 0; }        /* 相邻区块不再叠双倍留白 */
@media (max-width: 720px) {
  .gc-section { padding: 44px 0; }
  .gc-section + .gc-section { padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Review 3 · 第 4 批（#10，2026-09-23）：灯箱缩放
   客户原话「Can not zoom in the picture」—— 此前灯箱只有开场 FLIP 的 scale，
   没有 pinch / 滚轮 / 双击 / 按钮中的任何一种。这里补 UI 侧样式。
   ═══════════════════════════════════════════════════════════════ */

/* 缩放图层：宽度跟随舞台（100%），高度由图片决定 —— 这样 img 的 max-width:100%
   才有正确的参照（若 pan 宽度为 auto 会与图片互相依赖）。 */
.sd-lb-pan { width: 100%; display: flex; align-items: center; justify-content: center; will-change: transform; }
.sd-lb-pan img { pointer-events: auto; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; display: block; touch-action: none; }

/* 缩放工具条：− / ⟲ / + 三钮，与关闭钮 ✕ 同排（靠 margin-left:auto 推到右侧） */
.sd-lb-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sd-lb-zoom {
  width: 34px; height: 34px; padding: 0; line-height: 1;
  font: 400 17px/1 var(--font-body); color: var(--cream);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%; cursor: pointer;
}
.sd-lb-zoom:hover { border-color: var(--gold); color: var(--gold); }
.sd-lb-zoom:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 轮播进行中：播放按钮常亮金框，一眼可辨"正在播放" */
.sd-lb-play[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(223, 194, 143, 0.12); }
@media (max-width: 720px) { .sd-lb-zoom, .sd-lb-close { width: 40px; height: 40px; } }

/* 放大后：舞台接管指针（拖动平移）并裁剪溢出 → 不再"点空白关闭"（用 ✕ / Esc） */
.sd-lightbox.is-zoomed .sd-lb-stage { pointer-events: auto; overflow: hidden; cursor: grab; }
.sd-lightbox.is-panning .sd-lb-stage { cursor: grabbing; }

/* ── Review 3 · #4：hero 视频背景（开关启用后才存在）──────────────────────
   与 hero 图同样的铺满方式；不播放时（移动端低电量策略等）由 poster 顶上。 */
.hero-media .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }