/* ==========================================================================
   晨光中学官网 · 全站样式表
   说明：本文件所有规则都写了中文注释，建议从上往下阅读。
   阅读顺序：变量 → 基础设置 → 通用组件 → 页头 → 首页 → 内页 → 页脚 → 响应式
   ========================================================================== */

/* ==========================================================================
   01. 设计变量
   把颜色、字体、尺寸集中写在这里，以后改配色只需要改这一小段。
   ========================================================================== */
:root {
  /* 深墨绿：页头、深色区块和按钮的主色 */
  --green-950: #081f1a;
  /* 次深绿：页面大标题区和深色卡片 */
  --green-900: #102f29;
  /* 标准深绿：导航、图标和强调文字 */
  --green-800: #173d35;
  /* 稍亮的绿色：鼠标悬停状态 */
  --green-700: #24564a;
  /* 很浅的绿色：浅色背景和标签 */
  --green-100: #dfe9e3;
  /* 暖金色：按钮、线条和重点装饰 */
  --gold-500: #c6a25d;
  /* 明亮金色：深色背景上的文字与按钮 */
  --gold-400: #d7b873;
  /* 浅金色：深色背景上的辅助文字 */
  --gold-200: #ecdbba;
  /* 米白色：网站大部分浅色背景 */
  --paper: #f6f3ec;
  /* 稍深的米色：分隔区块的背景 */
  --paper-deep: #eee9de;
  /* 纯白色：卡片和页头背景 */
  --white: #ffffff;
  /* 主文字颜色：正文和标题 */
  --ink: #202a24;
  /* 次要文字颜色：说明、日期和辅助信息 */
  --muted: #67726a;
  /* 浅灰边框：卡片、表格和分隔线 */
  --line: #ded8cc;
  /* 深色区块里的半透明边框 */
  --line-light: rgba(255, 255, 255, 0.16);
  /* 正文使用的无衬线中文字体栈 */
  --font-sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", Arial, sans-serif;
  /* 标题使用的衬线字体栈，营造稳重、书卷气 */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, serif;
  /* 英文标签和数字使用的字体栈 */
  --font-en: Georgia, "Times New Roman", "Songti SC", serif;
  /* 页面内容最大宽度 */
  --content-width: 1240px;
  /* 标准圆角：网站整体使用小圆角，保持克制 */
  --radius: 2px;
  /* 深色卡片使用的大圆角 */
  --radius-lg: 4px;
  /* 统一缓动曲线：让少量过渡更自然 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   02. 基础重置
   浏览器默认样式各不相同，先统一盒模型、边距和字体。
   ========================================================================== */

/* 让所有元素的宽高包含内边距和边框，计算尺寸更直观 */
*,
*::before,
*::after {
  /* 使用 border-box 盒模型 */
  box-sizing: border-box;
}

/* 页面根元素：设置平滑滚动，并防止手机横屏时字体被自动放大 */
html {
  /* 点击锚点链接时平滑滚动 */
  scroll-behavior: smooth;
  /* 阻止 iOS 自动调整文字大小 */
  -webkit-text-size-adjust: 100%;
}

/* 跳转到主要内容时，为固定页头预留空间 */
#main-content {
  /* 锚点定位时在主要内容上方留出页头高度 */
  scroll-margin-top: 118px;
}

/* 页面主体：统一字体、颜色和行高 */
body {
  /* 清除浏览器默认的外边距 */
  margin: 0;
  /* 使用正文字体栈 */
  font-family: var(--font-sans);
  /* 设置基础字号 */
  font-size: 16px;
  /* 中文正文使用较宽松的行高，阅读更舒服 */
  line-height: 1.75;
  /* 使用主文字颜色 */
  color: var(--ink);
  /* 使用米白背景 */
  background: var(--white);
  /* 让中文字体边缘更细腻 */
  -webkit-font-smoothing: antialiased;
  /* 避免长英文或网址撑破布局 */
  overflow-wrap: break-word;
}

/* 图片和 SVG 默认按块级元素显示，避免图片下方出现空隙 */
img,
svg {
  /* 去掉行内元素底部的空白 */
  display: block;
  /* 图片最宽不超过父容器 */
  max-width: 100%;
}

/* 图片保持原始比例 */
img {
  /* 让浏览器按比例缩放图片 */
  height: auto;
}

/* 链接默认继承父元素颜色，并去掉下划线 */
a {
  /* 使用父元素的颜色 */
  color: inherit;
  /* 去掉默认下划线，需要时再单独添加 */
  text-decoration: none;
}

/* 按钮继承页面字体，并去掉默认样式 */
button {
  /* 继承父元素的字体设置 */
  font: inherit;
  /* 继承父元素的文字颜色 */
  color: inherit;
  /* 去掉浏览器默认背景 */
  background: none;
  /* 去掉浏览器默认边框 */
  border: 0;
  /* 鼠标移上去显示手型，提示可以点击 */
  cursor: pointer;
}

/* 可展开内容的标题默认是手型 */
summary {
  /* 提示此处可以点击展开 */
  cursor: pointer;
}

/* 标题和段落清除默认边距，间距统一由组件控制 */
h1,
h2,
h3,
h4,
p,
blockquote,
figure {
  /* 去掉浏览器默认外边距 */
  margin: 0;
}

/* 列表去掉默认项目符号和内边距 */
ul,
ol {
  /* 去掉项目符号 */
  list-style: none;
  /* 去掉左侧默认缩进 */
  margin: 0;
  /* 去掉左侧默认内边距 */
  padding: 0;
}

/* 引用内容默认不倾斜 */
blockquote {
  /* 中文引用保持正体 */
  font-style: normal;
}

/* 表格使用合并边框 */
table {
  /* 合并相邻单元格的边框 */
  border-collapse: collapse;
  /* 表格宽度占满容器 */
  width: 100%;
}

/* 描述列表的说明内容：清除浏览器默认的左缩进 */
dd {
  /* 去掉默认的 40px 左边距 */
  margin: 0;
}

/* 鼠标选中文字时使用浅金色 */
::selection {
  /* 选中文字的背景色 */
  background: var(--gold-200);
  /* 选中文字的颜色 */
  color: var(--green-950);
}

/* 所有元素使用键盘聚焦时，显示清晰的金色轮廓 */
:focus-visible {
  /* 金色外轮廓 */
  outline: 3px solid var(--gold-500);
  /* 轮廓与元素保持 3px 距离 */
  outline-offset: 3px;
}

/* 被 JavaScript 隐藏的元素必须真正不占位置 */
[hidden] {
  /* 强制隐藏，优先级高于普通类名 */
  display: none !important;
}

/* ==========================================================================
   03. 通用布局与工具类
   ========================================================================== */

/* 页面主容器：限制最大宽度并居中 */
.container {
  /* 宽度占满父容器 */
  width: 100%;
  /* 最大宽度由变量控制 */
  max-width: var(--content-width);
  /* 左右自动外边距实现居中 */
  margin: 0 auto;
  /* 左右留白，避免内容贴边 */
  padding: 0 40px;
}

/* 更窄的容器：适合阅读型长文章 */
.container--narrow {
  /* 缩小最大宽度 */
  max-width: 900px;
}

/* 标准上下留白区块 */
.section {
  /* 上下各留出大块呼吸空间 */
  padding: 104px 0;
}

/* 米色背景区块 */
.section--paper {
  /* 使用米色背景区分层级 */
  background: var(--paper);
}

/* 深绿色背景区块 */
.section--green {
  /* 使用深绿背景 */
  background: var(--green-900);
  /* 深色背景使用白色文字 */
  color: var(--white);
}

/* 上下留白稍小的区块 */
.section--tight {
  /* 缩小上下间距 */
  padding: 76px 0;
}

/* 仅供屏幕阅读器阅读的文字：视觉上隐藏，但仍可被读屏软件读到 */
.visually-hidden {
  /* 绝对定位，把元素移出正常排版 */
  position: absolute;
  /* 宽度缩到最小 */
  width: 1px;
  /* 高度缩到最小 */
  height: 1px;
  /* 内边距归零 */
  padding: 0;
  /* 外边距设为负值，避免占用空间 */
  margin: -1px;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 去掉裁剪边框 */
  clip: rect(0, 0, 0, 0);
  /* 兼容旧浏览器的裁剪方式 */
  clip-path: inset(50%);
  /* 不换行，防止出现额外空白 */
  white-space: nowrap;
  /* 去掉边框 */
  border: 0;
}

/* 跳到主要内容的链接：平时隐藏，键盘聚焦时出现 */
.skip-link {
  /* 固定在视口左上角 */
  position: fixed;
  /* 距离顶部 12px */
  top: 12px;
  /* 距离左侧 12px */
  left: 12px;
  /* 提升层级，保证显示在页面之上 */
  z-index: 999;
  /* 把元素向上移出屏幕 */
  transform: translateY(-160%);
  /* 内边距让按钮更易点击 */
  padding: 10px 18px;
  /* 深绿色背景 */
  background: var(--green-950);
  /* 白色文字 */
  color: var(--white);
  /* 小字号 */
  font-size: 14px;
  /* 加上金色边框 */
  border: 1px solid var(--gold-500);
  /* 过渡动画 */
  transition: transform 0.2s var(--ease);
}

/* 键盘聚焦到跳转链接时，把它滑回屏幕内 */
.skip-link:focus {
  /* 回到正常位置 */
  transform: translateY(0);
}

/* 英文小标签：常用于“ABOUT CHENGUANG”这类栏目标签 */
.eyebrow {
  /* 使用弹性布局，让短线与文字同排 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 短线和文字之间留 12px */
  gap: 12px;
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 字号偏小 */
  font-size: 12px;
  /* 加粗一点，提升可读性 */
  font-weight: 600;
  /* 字母之间拉开距离 */
  letter-spacing: 0.18em;
  /* 英文标签统一大写 */
  text-transform: uppercase;
  /* 使用深金色，白底上也能看清 */
  color: #94743a;
  /* 与标题之间留出间距 */
  margin-bottom: 14px;
}

/* 英文标签前面的短横线 */
.eyebrow::before {
  /* 伪元素必须设置内容才会显示 */
  content: "";
  /* 短线宽度 */
  width: 28px;
  /* 短线高度 */
  height: 1px;
  /* 短线使用当前文字颜色 */
  background: currentColor;
  /* 让短线不参与缩放 */
  flex: 0 0 auto;
}

/* 深色背景上的英文小标签 */
.eyebrow--light {
  /* 使用浅金色 */
  color: var(--gold-200);
}

/* 不需要前面短线的标签 */
.eyebrow--plain::before {
  /* 不显示短线 */
  display: none;
}

/* 通用按钮 */
.button {
  /* 使用行内弹性布局，方便图标和文字对齐 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 图标和文字之间留 10px */
  gap: 10px;
  /* 最小高度让按钮更好点击 */
  min-height: 48px;
  /* 左右内边距 */
  padding: 0 26px;
  /* 小圆角 */
  border-radius: var(--radius);
  /* 透明边框占位，避免悬停时抖动 */
  border: 1px solid transparent;
  /* 按钮文字字号 */
  font-size: 15px;
  /* 按钮文字加粗 */
  font-weight: 600;
  /* 轻微拉开字距 */
  letter-spacing: 0.04em;
  /* 让宽高变化更平滑 */
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* 金色实心按钮 */
.button--gold {
  /* 金色背景 */
  background: var(--gold-400);
  /* 深绿色文字，对比度足够 */
  color: var(--green-950);
}

/* 金色按钮悬停状态 */
.button--gold:hover {
  /* 悬停时颜色稍微变亮 */
  background: #e4cb94;
}

/* 绿色实心按钮 */
.button--green {
  /* 深绿色背景 */
  background: var(--green-800);
  /* 白色文字 */
  color: var(--white);
}

/* 绿色按钮悬停状态 */
.button--green:hover {
  /* 悬停时换成更深一点的绿色 */
  background: var(--green-950);
}

/* 浅色描边按钮：用于深色背景 */
.button--light {
  /* 透明背景，露出底图 */
  background: rgba(255, 255, 255, 0.04);
  /* 白色文字 */
  color: var(--white);
  /* 半透明白色边框 */
  border-color: rgba(255, 255, 255, 0.44);
}

/* 浅色描边按钮悬停状态 */
.button--light:hover {
  /* 悬停时背景变亮 */
  background: rgba(255, 255, 255, 0.12);
  /* 边框变实 */
  border-color: var(--white);
}

/* 小号按钮：用于页头等紧凑位置 */
.button--small {
  /* 最小高度降低 */
  min-height: 40px;
  /* 左右内边距缩小 */
  padding: 0 18px;
  /* 字号缩小 */
  font-size: 14px;
}

/* 文字链接：用下划线强调可点击 */
.text-link {
  /* 行内弹性布局，让箭头与文字同排 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 文字和箭头之间留 8px */
  gap: 8px;
  /* 底部留出内边距，给下划线空间 */
  padding-bottom: 4px;
  /* 使用深绿色 */
  color: var(--green-800);
  /* 字体稍加粗 */
  font-weight: 600;
  /* 底部细线 */
  border-bottom: 1px solid currentColor;
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 文字链接悬停状态 */
.text-link:hover {
  /* 悬停时变成深金色 */
  color: #8d6d33;
}

/* 文字链接中的箭头 */
.text-link span {
  /* 箭头默认向右 */
  transition: transform 0.2s var(--ease);
}

/* 悬停时箭头向右移动 4px */
.text-link:hover span {
  /* 轻微移动，作为点击提示 */
  transform: translateX(4px);
}

/* 通用栏目标题区：左侧标题，右侧“更多”链接 */
.section-head {
  /* 弹性布局，左右分布 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 底部对齐 */
  align-items: flex-end;
  /* 元素之间留出间距 */
  gap: 32px;
  /* 标题区下方留白 */
  margin-bottom: 42px;
}

/* 栏目标题 */
.section-head h2 {
  /* 使用衬线标题字体 */
  font-family: var(--font-display);
  /* 标题字号随屏幕略微变化 */
  font-size: clamp(34px, 3.5vw, 46px);
  /* 行高收紧，标题更紧凑 */
  line-height: 1.24;
  /* 去掉默认字重，使用 700 */
  font-weight: 700;
  /* 字距稍微收紧 */
  letter-spacing: -0.01em;
  /* 使用深墨绿 */
  color: var(--green-950);
}

/* 栏目标题区的补充说明文字 */
.section-head__note {
  /* 限制最大宽度 */
  max-width: 440px;
  /* 使用次要文字颜色 */
  color: var(--muted);
  /* 字号略小 */
  font-size: 15px;
  /* 与上方的标签留出空间 */
  margin-top: 10px;
}

/* ==========================================================================
   04. 顶部信息条与网站页头
   ========================================================================== */

/* 页面最顶部的深色信息条 */
.topbar {
  /* 深墨绿背景 */
  background: var(--green-950);
  /* 使用浅色文字 */
  color: rgba(255, 255, 255, 0.68);
  /* 小号字体 */
  font-size: 12px;
  /* 字距稍微拉开 */
  letter-spacing: 0.03em;
}

/* 信息条内部布局 */
.topbar__inner {
  /* 弹性布局，左右分布 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;
  /* 固定高度 */
  height: 34px;
}

/* 信息条左侧的校训文字 */
.topbar__motto {
  /* 金色点缀 */
  color: var(--gold-200);
  /* 字距稍微拉开 */
  letter-spacing: 0.08em;
}

/* 信息条右侧的电话和时间 */
.topbar__meta {
  /* 弹性布局 */
  display: flex;
  /* 元素之间留 24px */
  gap: 24px;
  /* 垂直居中 */
  align-items: center;
}

/* 信息条中的电话链接 */
.topbar__meta a {
  /* 默认使用浅色 */
  color: rgba(255, 255, 255, 0.78);
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 信息条链接悬停状态 */
.topbar__meta a:hover {
  /* 悬停时变成金色 */
  color: var(--gold-200);
}

/* 网站页头：向下滚动时固定在页面顶部 */
.site-header {
  /* 粘性定位：滚动到顶部后固定 */
  position: sticky;
  /* 固定在视口顶部 */
  top: 0;
  /* 保证页头盖在页面内容上方 */
  z-index: 100;
  /* 白色背景 */
  background: var(--white);
  /* 底部一条浅色分隔线 */
  border-bottom: 1px solid var(--line);
}

/* 页头主行 */
.header__inner {
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 两端对齐 */
  justify-content: space-between;
  /* 固定高度 */
  height: 84px;
  /* 元素之间留出间距 */
  gap: 32px;
}

/* 校徽与校名组合链接 */
.brand {
  /* 行内弹性布局 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 校徽和校名之间留 12px */
  gap: 12px;
  /* 防止在窄屏被压缩 */
  flex: 0 0 auto;
}

/* 方形校徽 */
.brand__mark {
  /* 使用弹性布局居中文字 */
  display: inline-flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 正方形宽度 */
  width: 44px;
  /* 正方形高度 */
  height: 44px;
  /* 深绿色背景 */
  background: var(--green-800);
  /* 浅金色文字 */
  color: var(--gold-200);
  /* 校徽使用衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 25px;
  /* 加粗 */
  font-weight: 700;
  /* 内部金色细边框 */
  box-shadow: inset 0 0 0 1px rgba(215, 184, 115, 0.55);
}

/* 校名文字块 */
.brand__text {
  /* 垂直排列中文校名和英文校名 */
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
  /* 行高收紧 */
  line-height: 1.2;
}

/* 中文校名 */
.brand__text strong {
  /* 使用衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 22px;
  /* 加粗 */
  font-weight: 700;
  /* 字距稍微拉开 */
  letter-spacing: 0.08em;
  /* 使用深墨绿 */
  color: var(--green-950);
}

/* 英文校名 */
.brand__text small {
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 小字号 */
  font-size: 8px;
  /* 拉开字母间距 */
  letter-spacing: 0.16em;
  /* 使用次要文字颜色 */
  color: var(--muted);
  /* 英文校名与上方留一点距离 */
  margin-top: 2px;
}

/* 主导航区域 */
.site-nav {
  /* 弹性布局，让导航和按钮同排 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 导航和招生按钮之间留 30px */
  gap: 30px;
  /* 自动占满剩余空间，把导航推到右侧 */
  margin-left: auto;
}

/* 导航链接列表 */
.site-nav__list {
  /* 水平排列 */
  display: flex;
  /* 链接之间留 30px */
  gap: 30px;
  /* 垂直居中 */
  align-items: center;
}

/* 导航链接 */
.site-nav__link {
  /* 相对定位，给下划线伪元素定位 */
  position: relative;
  /* 上下留出内边距，增大点击范围 */
  padding: 31px 0;
  /* 字号 */
  font-size: 15px;
  /* 字体稍加粗 */
  font-weight: 500;
  /* 使用主文字颜色 */
  color: var(--ink);
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 导航链接底部的金色提示线 */
.site-nav__link::after {
  /* 伪元素必须设置内容 */
  content: "";
  /* 绝对定位 */
  position: absolute;
  /* 左侧与链接对齐 */
  left: 0;
  /* 底部对齐 */
  bottom: 20px;
  /* 初始宽度为 0 */
  width: 100%;
  /* 细线高度 */
  height: 2px;
  /* 金色背景 */
  background: var(--gold-500);
  /* 默认横向缩放到 0，相当于隐藏 */
  transform: scaleX(0);
  /* 以左侧为原点缩放 */
  transform-origin: left;
  /* 变换过渡 */
  transition: transform 0.2s var(--ease);
}

/* 鼠标悬停时显示提示线 */
.site-nav__link:hover::after {
  /* 横向展开到完整宽度 */
  transform: scaleX(1);
}

/* 当前所在页面的导航链接 */
.site-nav__link.is-active {
  /* 当前页面使用深绿色 */
  color: var(--green-800);
}

/* 当前页面的导航提示线始终显示 */
.site-nav__link.is-active::after {
  /* 展开完整宽度 */
  transform: scaleX(1);
}

/* 页头里的招生咨询按钮 */
.header__cta {
  /* 防止按钮在窄屏被压缩 */
  flex: 0 0 auto;
}

/* 手机端菜单按钮：桌面端默认隐藏 */
.nav-toggle {
  /* 默认不显示 */
  display: none;
  /* 固定大小 */
  width: 42px;
  /* 固定高度 */
  height: 42px;
  /* 垂直排列三条横线 */
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 三条线之间留 5px */
  gap: 5px;
  /* 浅色背景 */
  background: var(--paper);
  /* 小圆角 */
  border-radius: var(--radius);
}

/* 菜单按钮里的横线 */
.nav-toggle__line {
  /* 横线宽度 */
  width: 18px;
  /* 横线高度 */
  height: 1.5px;
  /* 深绿色横线 */
  background: var(--green-800);
  /* 变换过渡，为打开状态的动画做准备 */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 菜单打开后，第一条横线旋转成斜线 */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  /* 向下移动并旋转 45 度 */
  transform: translateY(6.5px) rotate(45deg);
}

/* 菜单打开后，第二条横线隐藏 */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  /* 完全透明 */
  opacity: 0;
}

/* 菜单打开后，第三条横线旋转成另一条斜线 */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  /* 向上移动并反向旋转 */
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ==========================================================================
   05. 首页 · 全屏轮播
   ========================================================================== */

/* 轮播外框 */
.hero {
  /* 相对定位，给轮播控件提供定位基准 */
  position: relative;
  /* 深色背景，图片加载前也不会闪白 */
  background: var(--green-950);
  /* 白色文字 */
  color: var(--white);
}

/* 轮播内容高度：随视口高度变化，但限制在合理范围 */
.hero__slides {
  /* 相对定位，每张幻灯片都叠放在这里 */
  position: relative;
  /* 最小高度 620px，最大 760px，中间跟随视口 */
  height: clamp(620px, calc(100svh - 118px), 760px);
  /* 超出部分裁掉 */
  overflow: hidden;
}

/* 单张幻灯片 */
.hero__slide {
  /* 绝对定位，叠满整个轮播区域 */
  position: absolute;
  /* 上下左右都贴边 */
  inset: 0;
  /* 默认透明 */
  opacity: 0;
  /* 默认不可见，避免隐藏内容被点击 */
  visibility: hidden;
  /* 透明度和可见性过渡，形成简单的淡入淡出 */
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

/* 当前显示的幻灯片 */
.hero__slide.is-active {
  /* 完全不透明 */
  opacity: 1;
  /* 可见 */
  visibility: visible;
  /* 放到其他幻灯片上方 */
  z-index: 1;
}

/* 幻灯片背景图片 */
.hero__image {
  /* 绝对定位铺满 */
  position: absolute;
  /* 上下左右贴边 */
  inset: 0;
  /* 宽度铺满 */
  width: 100%;
  /* 高度铺满 */
  height: 100%;
  /* 按比例裁切，不拉伸图片 */
  object-fit: cover;
  /* 图片位置稍微偏上，保留人物和建筑 */
  object-position: center 45%;
}

/* 图片上方的遮罩层：保证白色文字清晰可读 */
.hero__shade {
  /* 绝对定位铺满 */
  position: absolute;
  /* 上下左右贴边 */
  inset: 0;
  /* 左侧深、右侧浅的渐变，再叠加底部渐暗 */
  background:
    linear-gradient(90deg, rgba(4, 22, 18, 0.9) 0%, rgba(4, 22, 18, 0.58) 46%, rgba(4, 22, 18, 0.08) 100%),
    linear-gradient(0deg, rgba(4, 22, 18, 0.74) 0%, rgba(4, 22, 18, 0) 42%);
}

/* 幻灯片文字内容容器 */
.hero__content {
  /* 相对定位，保证内容在遮罩层之上 */
  position: relative;
  /* 层级高于遮罩 */
  z-index: 2;
  /* 高度占满轮播区域 */
  height: 100%;
  /* 弹性布局，便于垂直居中 */
  display: flex;
  /* 纵向排列 */
  flex-direction: column;
  /* 垂直居中 */
  justify-content: center;
  /* 顶部留白，避开固定页头 */
  padding-top: 24px;
  /* 底部留白，避开轮播控制条 */
  padding-bottom: 116px;
}

/* 幻灯片文字块 */
.hero__copy {
  /* 限制文字最大宽度，避免长行难读 */
  max-width: 660px;
}

/* 轮播主标题 */
.hero__title {
  /* 使用衬线字体 */
  font-family: var(--font-display);
  /* 字号随屏幕宽度变化 */
  font-size: clamp(42px, 5.2vw, 68px);
  /* 行高收紧，标题更有气势 */
  line-height: 1.18;
  /* 标题加粗 */
  font-weight: 700;
  /* 字距稍微收紧 */
  letter-spacing: 0.01em;
  /* 标题上下留白 */
  margin: 7px 0 22px;
  /* 文字阴影，进一步提升可读性 */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
}

/* 标题中的金色强调文字 */
.hero__title em {
  /* 去掉默认斜体 */
  font-style: normal;
  /* 使用浅金色 */
  color: var(--gold-200);
}

/* 轮播中的说明文字 */
.hero__lead {
  /* 限制宽度 */
  max-width: 530px;
  /* 字号 */
  font-size: 17px;
  /* 行高 */
  line-height: 1.85;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.82);
}

/* 轮播按钮组 */
.hero__actions {
  /* 弹性布局 */
  display: flex;
  /* 按钮之间留 12px */
  gap: 12px;
  /* 与说明文字留出间距 */
  margin-top: 34px;
  /* 允许换行，窄屏时更灵活 */
  flex-wrap: wrap;
}

/* 轮播底部控制条 */
.hero__controls {
  /* 绝对定位 */
  position: absolute;
  /* 左右居中 */
  left: 50%;
  /* 距离底部 28px */
  bottom: 28px;
  /* 用位移修正自身宽度，实现真正居中 */
  transform: translateX(-50%);
  /* 层级高于幻灯片 */
  z-index: 5;
  /* 弹性布局，左右分布 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;
  /* 元素之间留出间距 */
  gap: 24px;
}

/* 轮播指示点容器 */
.hero__dots {
  /* 水平排列 */
  display: flex;
  /* 指示点之间留 8px */
  gap: 8px;
  /* 垂直居中 */
  align-items: center;
}

/* 单个轮播指示按钮 */
.hero__dot {
  /* 相对定位，给内部线条定位 */
  position: relative;
  /* 宽度 */
  width: 46px;
  /* 高度足够好点击 */
  height: 42px;
  /* 去掉内边距 */
  padding: 0;
  /* 透明背景 */
  background: transparent;
}

/* 指示按钮内部的线段 */
.hero__dot::before {
  /* 伪元素必须设置内容 */
  content: "";
  /* 绝对定位 */
  position: absolute;
  /* 水平居中 */
  left: 50%;
  /* 垂直居中 */
  top: 50%;
  /* 宽度占满按钮 */
  width: 100%;
  /* 线条高度 */
  height: 2px;
  /* 半透明白色 */
  background: rgba(255, 255, 255, 0.32);
  /* 以中心为原点，方便缩放 */
  transform: translate(-50%, -50%);
  /* 背景色过渡 */
  transition: background-color 0.2s ease;
}

/* 当前指示点 */
.hero__dot.is-active::before {
  /* 当前项使用金色 */
  background: var(--gold-400);
}

/* 指示点悬停状态 */
.hero__dot:hover::before {
  /* 悬停时线条变白 */
  background: rgba(255, 255, 255, 0.75);
}

/* 轮播右侧的按钮与计数区域 */
.hero__arrows {
  /* 水平排列 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素之间留 10px */
  gap: 10px;
}

/* 轮播上一张/下一张按钮 */
.hero__arrow {
  /* 弹性布局居中箭头 */
  display: inline-flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 宽度 */
  width: 42px;
  /* 高度 */
  height: 42px;
  /* 透明背景 */
  background: transparent;
  /* 半透明白色边框 */
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* 白色文字 */
  color: var(--white);
  /* 小圆角 */
  border-radius: var(--radius);
  /* 背景和边框过渡 */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 轮播箭头按钮悬停状态 */
.hero__arrow:hover {
  /* 悬停时出现浅色背景 */
  background: rgba(255, 255, 255, 0.12);
  /* 边框变白 */
  border-color: var(--white);
}

/* 轮播序号 */
.hero__count {
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 字号 */
  font-size: 13px;
  /* 字距稍微拉开 */
  letter-spacing: 0.12em;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.76);
  /* 左右留一点空间 */
  padding: 0 6px;
}

/* 轮播暂停/播放按钮 */
.hero__pause {
  /* 最小高度，保证手机上也好点击 */
  min-height: 42px;
  /* 透明背景 */
  background: transparent;
  /* 半透明白色文字 */
  color: rgba(255, 255, 255, 0.7);
  /* 小字号 */
  font-size: 12px;
  /* 字距稍微拉开 */
  letter-spacing: 0.1em;
  /* 右侧留出内边距 */
  padding: 8px 10px;
  /* 与下一项之间留出间距 */
  margin-right: 4px;
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 暂停按钮悬停状态 */
.hero__pause:hover {
  /* 悬停时变成白色 */
  color: var(--white);
}

/* ==========================================================================
   06. 首页 · 快捷入口
   ========================================================================== */

/* 快捷入口整条区域 */
.quick-links {
  /* 深绿色背景 */
  background: var(--green-800);
  /* 顶部金色细线，与轮播形成分隔 */
  border-top: 3px solid var(--gold-500);
  /* 白色文字 */
  color: var(--white);
}

/* 快捷入口四列网格 */
.quick-links__grid {
  /* 网格布局 */
  display: grid;
  /* 平均分成四列 */
  grid-template-columns: repeat(4, 1fr);
}

/* 单个快捷入口链接 */
.quick-link {
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素之间留 16px */
  gap: 16px;
  /* 上下内边距 */
  padding: 24px 24px;
  /* 左侧细分隔线 */
  border-left: 1px solid var(--line-light);
  /* 背景色过渡 */
  transition: background-color 0.2s ease;
}

/* 第一个快捷入口不需要左侧分隔线 */
.quick-link:first-child {
  /* 去掉左边框 */
  border-left: 0;
}

/* 快捷入口悬停状态 */
.quick-link:hover {
  /* 背景略微变亮 */
  background: var(--green-700);
}

/* 快捷入口编号 */
.quick-link__index {
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 小字号 */
  font-size: 12px;
  /* 浅金色 */
  color: var(--gold-200);
  /* 不参与压缩 */
  flex: 0 0 auto;
}

/* 快捷入口文字块 */
.quick-link__label {
  /* 纵向排列主标题和副标题 */
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
  /* 行高收紧 */
  line-height: 1.4;
}

/* 快捷入口主标题 */
.quick-link__label strong {
  /* 字号 */
  font-size: 16px;
  /* 加粗 */
  font-weight: 600;
}

/* 快捷入口副标题 */
.quick-link__label small {
  /* 小字号 */
  font-size: 11px;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.55);
  /* 与主标题留一点间距 */
  margin-top: 2px;
}

/* 快捷入口右侧箭头 */
.quick-link__arrow {
  /* 自动推到最右侧 */
  margin-left: auto;
  /* 浅金色 */
  color: var(--gold-200);
  /* 过渡 */
  transition: transform 0.2s var(--ease);
}

/* 悬停时箭头右移 */
.quick-link:hover .quick-link__arrow {
  /* 向右移动 4px */
  transform: translateX(4px);
}

/* ==========================================================================
   07. 首页 · 学校简介
   ========================================================================== */

/* 简介区块的图文两栏 */
.split {
  /* 两栏网格 */
  display: grid;
  /* 左侧略窄，右侧略宽 */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  /* 两栏间距随屏幕缩放 */
  gap: clamp(48px, 7vw, 100px);
  /* 两栏垂直居中对齐 */
  align-items: center;
}

/* 简介图片区域 */
.intro__media {
  /* 相对定位，给装饰边框和徽章定位 */
  position: relative;
  /* 右侧和底部留出装饰空间 */
  padding: 0 18px 18px 0;
}

/* 图片后方的金色装饰边框 */
.intro__media::before {
  /* 伪元素必须设置内容 */
  content: "";
  /* 绝对定位 */
  position: absolute;
  /* 向右、向下偏移，形成叠框效果 */
  inset: 20px -2px -2px 20px;
  /* 1px 金色边框 */
  border: 1px solid var(--gold-500);
  /* 放在图片下方 */
  z-index: 0;
}

/* 简介图片 */
.intro__media img {
  /* 相对定位，压在装饰边框上方 */
  position: relative;
  /* 层级高于装饰边框 */
  z-index: 1;
  /* 宽度占满 */
  width: 100%;
  /* 使用竖版比例，适合人物照片 */
  aspect-ratio: 4 / 4.7;
  /* 裁切填充，不拉伸 */
  object-fit: cover;
  /* 人物位置稍微偏上 */
  object-position: center 35%;
}

/* 图片上的年份徽章 */
.intro__badge {
  /* 绝对定位 */
  position: absolute;
  /* 放到图片左下角 */
  left: -24px;
  /* 距离底部 44px */
  bottom: 44px;
  /* 层级最高 */
  z-index: 2;
  /* 深绿色背景 */
  background: var(--green-800);
  /* 白色文字 */
  color: var(--white);
  /* 内边距 */
  padding: 18px 22px;
  /* 左侧金色边线 */
  border-left: 3px solid var(--gold-400);
}

/* 徽章中的大数字 */
.intro__badge strong {
  /* 使用衬线字体 */
  font-family: var(--font-en);
  /* 大字号 */
  font-size: 38px;
  /* 行高收紧 */
  line-height: 1;
  /* 金色文字 */
  color: var(--gold-200);
  /* 块级显示，独占一行 */
  display: block;
}

/* 徽章中的说明文字 */
.intro__badge span {
  /* 小字号 */
  font-size: 12px;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.7);
  /* 与数字留出间距 */
  margin-top: 4px;
  /* 块级显示 */
  display: block;
}

/* 简介文字标题 */
.intro__body h2 {
  /* 衬线标题字体 */
  font-family: var(--font-display);
  /* 字号随屏幕变化 */
  font-size: clamp(34px, 3.8vw, 50px);
  /* 行高 */
  line-height: 1.35;
  /* 加粗 */
  font-weight: 700;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 简介导语 */
.intro__lead {
  /* 字号略大 */
  font-size: 19px;
  /* 行高宽松 */
  line-height: 1.85;
  /* 使用主文字颜色 */
  color: var(--ink);
  /* 与标题留出间距 */
  margin-top: 24px;
}

/* 简介正文 */
.intro__body > p:not(.eyebrow):not(.intro__lead) {
  /* 字号 */
  font-size: 15px;
  /* 行高 */
  line-height: 1.9;
  /* 使用次要文字颜色 */
  color: var(--muted);
  /* 与上一段留出间距 */
  margin-top: 14px;
}

/* 数据统计区域 */
.stats {
  /* 三列网格 */
  display: grid;
  /* 平均三列 */
  grid-template-columns: repeat(3, 1fr);
  /* 列间距 */
  gap: 16px;
  /* 上方留白 */
  margin-top: 32px;
  /* 顶部内边距，配合顶部细线 */
  padding-top: 26px;
  /* 顶部一条浅色分隔线 */
  border-top: 1px solid var(--line);
}

/* 单项数据 */
.stat {
  /* 纵向排列数字和标签 */
  display: flex;
  /* 反向排列：HTML 中先写名称再写数值，视觉上让数字在上、名称在下 */
  flex-direction: column-reverse;
}

/* 数据数字 */
.stat__number {
  /* 使用衬线字体 */
  font-family: var(--font-en);
  /* 字号 */
  font-size: 30px;
  /* 行高 */
  line-height: 1.2;
  /* 金色 */
  color: var(--green-800);
}

/* 数据数字后的单位 */
.stat__number small {
  /* 小字号 */
  font-size: 13px;
  /* 使用正文字体 */
  font-family: var(--font-sans);
  /* 深金色 */
  color: #8e6d34;
  /* 与数字留一点距离 */
  margin-left: 2px;
}

/* 数据标签 */
.stat__label {
  /* 小字号 */
  font-size: 12px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与数字留出间距 */
  margin-top: 4px;
}

/* 简介中的按钮和链接 */
.intro__actions {
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素之间留 24px */
  gap: 24px;
  /* 与统计数据留出间距 */
  margin-top: 32px;
}

/* ==========================================================================
   08. 首页 · 新闻与招生
   ========================================================================== */

/* 新闻与招生两栏布局 */
.editorial-grid {
  /* 左侧新闻较宽，右侧招生卡片较窄 */
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  /* 两栏间距 */
  gap: 72px;
  /* 网格布局 */
  display: grid;
  /* 顶部对齐 */
  align-items: start;
}

/* 首页新闻列表 */
.news-list {
  /* 顶部细线，作为列表起点 */
  border-top: 1px solid var(--line);
}

/* 单条新闻 */
.news-list__item {
  /* 底部细线，作为条目分隔 */
  border-bottom: 1px solid var(--line);
}

/* 新闻条目链接 */
.news-list__link {
  /* 三列网格：日期、内容、箭头 */
  display: grid;
  /* 日期固定宽度，内容自适应，箭头固定 */
  grid-template-columns: 80px minmax(0, 1fr) 22px;
  /* 列间距 */
  gap: 24px;
  /* 上下内边距 */
  padding: 22px 0;
  /* 垂直居中对齐 */
  align-items: start;
}

/* 有缩略图的新闻条目链接 */
.news-list__link--thumb {
  /* 四列：日期、内容、缩略图、箭头 */
  grid-template-columns: 80px minmax(0, 1fr) 96px 22px;
  /* 列间距稍微缩小 */
  gap: 20px;
  /* 垂直居中，让缩略图与文字块对齐 */
  align-items: center;
}

/* 首页新闻缩略图 */
.news-list__thumb {
  /* 块级显示 */
  display: block;
  /* 宽度占满网格单元 */
  width: 100%;
  /* 隐藏图片溢出 */
  overflow: hidden;
  /* 浅色背景 */
  background: var(--paper);
}

/* 缩略图图片 */
.news-list__thumb img {
  /* 宽度占满 */
  width: 100%;
  /* 固定横向比例 */
  aspect-ratio: 4 / 3;
  /* 裁切填充 */
  object-fit: cover;
  /* 悬停时的过渡 */
  transition: transform 0.3s var(--ease);
}

/* 悬停时缩略图轻微放大 */
.news-list__link:hover .news-list__thumb img {
  /* 放大一点点，保持克制 */
  transform: scale(1.03);
}

/* 新闻日期 */
.news-list__date {
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 字号 */
  font-size: 13px;
  /* 字距 */
  letter-spacing: 0.04em;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 顶部稍微下移，与标题第一行对齐 */
  padding-top: 4px;
}

/* 新闻内容区 */
.news-list__body {
  /* 让内部元素垂直排列 */
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
  /* 标签和标题之间留 8px */
  gap: 8px;
}

/* 新闻分类标签 */
.tag {
  /* 行内块，便于设置内边距 */
  display: inline-block;
  /* 小字号 */
  font-size: 11px;
  /* 行高 */
  line-height: 1.7;
  /* 左右内边距 */
  padding: 1px 8px;
  /* 浅绿色背景 */
  background: var(--green-100);
  /* 深绿色文字 */
  color: var(--green-800);
  /* 小圆角 */
  border-radius: 2px;
  /* 字距稍微拉开 */
  letter-spacing: 0.06em;
  /* 宽度自适应内容 */
  width: fit-content;
}

/* 通知公告类型的标签 */
.tag--notice {
  /* 浅金色背景 */
  background: #f3e8d2;
  /* 深金色文字，保证对比度 */
  color: #795d2b;
}

/* 新闻标题 */
.news-list__title {
  /* 字号 */
  font-size: 19px;
  /* 行高 */
  line-height: 1.5;
  /* 字重 */
  font-weight: 600;
  /* 深墨绿色 */
  color: var(--ink);
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 新闻链接悬停时标题变色 */
.news-list__link:hover .news-list__title {
  /* 悬停时变成深绿色 */
  color: var(--green-700);
}

/* 新闻摘要 */
.news-list__excerpt {
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.7;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 最多显示一行，超出用省略号 */
  display: -webkit-box;
  /* 限制行数需要浏览器前缀 */
  -webkit-line-clamp: 1;
  /* 纵向排列 */
  -webkit-box-orient: vertical;
  /* 超出隐藏 */
  overflow: hidden;
}

/* 首页新闻列表为空时的提示 */
.news-list__empty {
  /* 上下内边距 */
  padding: 28px 0;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 字号 */
  font-size: 14px;
}

/* 新闻条目右侧箭头 */
.news-list__arrow {
  /* 金色 */
  color: var(--gold-500);
  /* 字号 */
  font-size: 18px;
  /* 与标题第一行对齐 */
  padding-top: 8px;
  /* 过渡 */
  transition: transform 0.2s var(--ease);
}

/* 悬停时箭头右移 */
.news-list__link:hover .news-list__arrow {
  /* 向右移动 3px */
  transform: translateX(3px);
}

/* 招生卡片 */
.admission-panel {
  /* 相对定位，给装饰圆环定位 */
  position: relative;
  /* 深绿色背景 */
  background: var(--green-900);
  /* 白色文字 */
  color: var(--white);
  /* 内边距 */
  padding: 42px 38px;
  /* 顶部金色粗线 */
  border-top: 4px solid var(--gold-500);
  /* 隐藏装饰圆环超出的部分 */
  overflow: hidden;
}

/* 招生卡片上的装饰圆环 */
.admission-panel::before {
  /* 伪元素必须设置内容 */
  content: "";
  /* 绝对定位 */
  position: absolute;
  /* 放到右下角 */
  right: -90px;
  /* 向下偏移 */
  bottom: -110px;
  /* 圆形直径 */
  width: 260px;
  /* 圆形直径 */
  height: 260px;
  /* 透明背景 */
  background: transparent;
  /* 半透明金色细边框 */
  border: 1px solid rgba(215, 184, 115, 0.32);
  /* 变成圆形 */
  border-radius: 50%;
}

/* 招生卡片内的文字层级要高于装饰 */
.admission-panel > * {
  /* 相对定位 */
  position: relative;
  /* 层级高于装饰圆环 */
  z-index: 1;
}

/* 招生卡片标题 */
.admission-panel h2 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 38px;
  /* 行高 */
  line-height: 1.35;
  /* 加粗 */
  font-weight: 700;
  /* 与上方标签留出间距 */
  margin-top: 8px;
}

/* 招生卡片说明文字 */
.admission-panel > p:not(.eyebrow) {
  /* 字号 */
  font-size: 14px;
  /* 行高 */
  line-height: 1.8;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.7);
  /* 与标题留出间距 */
  margin-top: 16px;
}

/* 招生卡片中的按钮 */
.admission-panel .button {
  /* 与上方文字留出间距 */
  margin-top: 28px;
  /* 宽度占满卡片 */
  width: 100%;
}

/* 招生卡片底部信息 */
.admission-panel__meta {
  /* 顶部留白 */
  margin-top: 30px;
  /* 顶部内边距 */
  padding-top: 18px;
  /* 顶部半透明分隔线 */
  border-top: 1px solid var(--line-light);
  /* 两列布局 */
  display: grid;
  /* 标签和电话两列 */
  grid-template-columns: 1fr auto;
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 12px;
}

/* 底部信息标签 */
.admission-panel__meta span {
  /* 小字号 */
  font-size: 11px;
  /* 浅金色 */
  color: var(--gold-200);
  /* 拉开字距 */
  letter-spacing: 0.08em;
}

/* 底部信息中的电话 */
.admission-panel__meta a {
  /* 英文字体 */
  font-family: var(--font-en);
  /* 字号 */
  font-size: 16px;
  /* 白色 */
  color: var(--white);
}

/* ==========================================================================
   09. 首页 · 校训横幅
   ========================================================================== */

/* 校训横幅 */
.motto-band {
  /* 白色背景 */
  background: var(--white);
  /* 上下留白 */
  padding: 58px 0;
  /* 顶部和底部细线 */
  border-top: 1px solid var(--line);
  /* 只用顶部线即可，底部由页脚承担 */
  border-bottom: 0;
}

/* 校训横幅内部布局 */
.motto-band__inner {
  /* 三列布局：标签、校训、英文 */
  display: grid;
  /* 标签和英文宽度固定，校训占剩余空间 */
  grid-template-columns: 100px minmax(0, 1fr) auto;
  /* 垂直居中 */
  align-items: center;
  /* 列间距 */
  gap: 32px;
}

/* 校训标签 */
.motto-band__label {
  /* 小字号 */
  font-size: 12px;
  /* 深金色 */
  color: #8e6d34;
  /* 拉开字距 */
  letter-spacing: 0.28em;
  /* 使用英文字体 */
  font-family: var(--font-en);
}

/* 校训正文 */
.motto-band__text {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: clamp(26px, 3vw, 38px);
  /* 字距稍微拉开 */
  letter-spacing: 0.08em;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 校训英文 */
.motto-band__en {
  /* 英文字体 */
  font-family: var(--font-en);
  /* 小字号 */
  font-size: 11px;
  /* 浅灰色 */
  color: var(--muted);
  /* 拉开字距 */
  letter-spacing: 0.16em;
}

/* ==========================================================================
   10. 内页通用页头
   ========================================================================== */

/* 内页深色页头 */
.page-hero {
  /* 相对定位，给背景装饰和英文大字定位 */
  position: relative;
  /* 深绿色背景 */
  background: var(--green-900);
  /* 白色文字 */
  color: var(--white);
  /* 上下内边距 */
  padding: 72px 0 68px;
  /* 隐藏超出容器的装饰 */
  overflow: hidden;
}

/* 页头上的细网格纹理 */
.page-hero::before {
  /* 伪元素必须设置内容 */
  content: "";
  /* 绝对定位铺满 */
  position: absolute;
  /* 上下左右贴边 */
  inset: 0;
  /* 两组重复线性渐变叠出细网格 */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  /* 网格大小 */
  background-size: 72px 72px;
  /* 让装饰不抢文字 */
  opacity: 0.8;
}

/* 页头右侧的巨大英文水印 */
.page-hero::after {
  /* 读取 HTML 上 data-en 属性的内容 */
  content: attr(data-en);
  /* 绝对定位 */
  position: absolute;
  /* 右侧与内容容器对齐 */
  right: max(24px, calc((100vw - var(--content-width)) / 2 + 40px));
  /* 底部贴近边缘 */
  bottom: -30px;
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 大字号，随视口缩放 */
  font-size: clamp(90px, 13vw, 190px);
  /* 加粗 */
  font-weight: 700;
  /* 行高收紧 */
  line-height: 1;
  /* 白色但透明度极低，只作为纹理 */
  color: rgba(255, 255, 255, 0.045);
  /* 不响应鼠标，避免挡住链接 */
  pointer-events: none;
  /* 不换行 */
  white-space: nowrap;
}

/* 页头内容容器 */
.page-hero__inner {
  /* 相对定位，保证在装饰上方 */
  position: relative;
  /* 层级高于装饰 */
  z-index: 1;
  /* 弹性布局 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 底部对齐 */
  align-items: flex-end;
  /* 元素间距 */
  gap: 40px;
}

/* 页头文字块 */
.page-hero__content {
  /* 限制最大宽度，保证阅读性 */
  max-width: 760px;
}

/* 面包屑导航 */
.breadcrumb {
  /* 底部留白 */
  margin-bottom: 30px;
}

/* 面包屑列表 */
.breadcrumb ol {
  /* 水平排列 */
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
  /* 元素间距 */
  gap: 8px;
  /* 小字号 */
  font-size: 12px;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.52);
}

/* 面包屑的各层级 */
.breadcrumb li {
  /* 水平排列 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 8px;
}

/* 相邻层级之间的斜杠 */
.breadcrumb li + li::before {
  /* 插入斜杠 */
  content: "/";
  /* 斜杠颜色更淡 */
  color: rgba(255, 255, 255, 0.28);
}

/* 面包屑链接 */
.breadcrumb a {
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 面包屑链接悬停状态 */
.breadcrumb a:hover {
  /* 悬停时变成浅金色 */
  color: var(--gold-200);
}

/* 当前面包屑层级 */
.breadcrumb [aria-current="page"] {
  /* 使用浅金色 */
  color: var(--gold-200);
}

/* 页头主标题 */
.page-hero h1 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号随屏幕变化 */
  font-size: clamp(44px, 5vw, 62px);
  /* 行高 */
  line-height: 1.2;
  /* 加粗 */
  font-weight: 700;
  /* 字距稍微拉开 */
  letter-spacing: 0.02em;
}

/* 页头说明文字 */
.page-hero__lead {
  /* 限制宽度 */
  max-width: 620px;
  /* 字号 */
  font-size: 16px;
  /* 行高 */
  line-height: 1.9;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.7);
  /* 与标题留出间距 */
  margin-top: 18px;
}

/* 页头右侧的编号与装饰线 */
.page-hero__index {
  /* 不参与压缩 */
  flex: 0 0 auto;
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 小字号 */
  font-size: 12px;
  /* 拉开字距 */
  letter-spacing: 0.18em;
  /* 浅金色 */
  color: var(--gold-200);
  /* 左侧留出空间 */
  padding-left: 22px;
  /* 左侧一条半透明细线 */
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

/* 内页主体区块 */
.page-section {
  /* 上下留白 */
  padding: 88px 0 104px;
}

/* ==========================================================================
   11. 学校概况页
   ========================================================================== */

/* 学校简介图文区域 */
.about-grid {
  /* 两栏网格 */
  display: grid;
  /* 图片略窄，文字略宽 */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  /* 列间距 */
  gap: 72px;
  /* 顶部对齐 */
  align-items: start;
}

/* 通用图片框架 */
.media-frame {
  /* 相对定位，给图注定位 */
  position: relative;
  /* 去掉 figure 默认外边距 */
  margin: 0;
}

/* 图片框架中的图片 */
.media-frame img {
  /* 宽度占满 */
  width: 100%;
  /* 横向比例 */
  aspect-ratio: 4 / 3;
  /* 裁切填充 */
  object-fit: cover;
}

/* 图片框架的图注 */
.media-frame figcaption {
  /* 与图片留出间距 */
  margin-top: 12px;
  /* 小字号 */
  font-size: 12px;
  /* 次要文字颜色 */
  color: var(--muted);
}

/* 竖版图片框架 */
.media-frame--tall img {
  /* 使用竖版比例 */
  aspect-ratio: 4 / 4.8;
  /* 人物位置偏上 */
  object-position: center 35%;
}

/* 图片框架上的金色装饰线 */
.media-frame--line::after {
  /* 伪元素必须设置内容 */
  content: "";
  /* 绝对定位 */
  position: absolute;
  /* 放到图片左侧 */
  left: -14px;
  /* 从图片上方开始 */
  top: 22px;
  /* 到图片下方结束 */
  bottom: 42px;
  /* 金色细线 */
  width: 1px;
  background: var(--gold-500);
}

/* 长文章排版 */
.prose h2 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: clamp(30px, 3vw, 38px);
  /* 行高 */
  line-height: 1.4;
  /* 加粗 */
  font-weight: 700;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 长文章小标题 */
.prose h3 {
  /* 字号 */
  font-size: 20px;
  /* 行高 */
  line-height: 1.5;
  /* 加粗 */
  font-weight: 600;
  /* 深墨绿色 */
  color: var(--green-800);
  /* 与上一段留出间距 */
  margin-top: 30px;
}

/* 长文章段落 */
.prose p {
  /* 字号 */
  font-size: 15px;
  /* 行高 */
  line-height: 1.95;
  /* 使用主文字颜色 */
  color: #4f5a53;
  /* 段落之间留出间距 */
  margin-top: 16px;
}

/* 长文章中的第一段紧跟标题，不需要额外顶部间距 */
.prose h2 + p,
.prose h3 + p {
  /* 清除顶部间距 */
  margin-top: 12px;
}

/* 长文章中的强调文字 */
.prose strong {
  /* 深绿色 */
  color: var(--green-800);
  /* 加粗 */
  font-weight: 600;
}

/* 文章内的大号引言 */
.quote-large {
  /* 左侧金色竖线 */
  border-left: 3px solid var(--gold-500);
  /* 左侧内边距 */
  padding: 4px 0 4px 22px;
  /* 与上下内容留出间距 */
  margin: 28px 0;
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 20px;
  /* 行高 */
  line-height: 1.8;
  /* 深绿色 */
  color: var(--green-800);
}

/* 办学理念三栏 */
.value-grid {
  /* 三列网格 */
  display: grid;
  /* 平均三列 */
  grid-template-columns: repeat(3, 1fr);
  /* 列间距 */
  gap: 20px;
}

/* 单个理念卡片 */
.value-card {
  /* 米色背景 */
  background: var(--paper);
  /* 内边距 */
  padding: 32px 28px;
  /* 顶部金色细线 */
  border-top: 2px solid var(--gold-500);
}

/* 理念卡片编号 */
.value-card__number {
  /* 英文字体 */
  font-family: var(--font-en);
  /* 小字号 */
  font-size: 12px;
  /* 深金色 */
  color: #8e6d34;
  /* 拉开字距 */
  letter-spacing: 0.14em;
}

/* 理念卡片标题 */
.value-card h3 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 25px;
  /* 行高 */
  line-height: 1.4;
  /* 与编号留出间距 */
  margin-top: 14px;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 理念卡片正文 */
.value-card p {
  /* 字号 */
  font-size: 14px;
  /* 行高 */
  line-height: 1.85;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与标题留出间距 */
  margin-top: 10px;
}

/* 校长寄语区块 */
.principal-section {
  /* 米色背景 */
  background: var(--paper);
}

/* 校长寄语内部布局 */
.principal__inner {
  /* 两栏：左侧标签，右侧引言 */
  display: grid;
  /* 标签固定宽度，右侧自适应 */
  grid-template-columns: 210px minmax(0, 1fr);
  /* 列间距 */
  gap: 64px;
  /* 顶部对齐 */
  align-items: start;
}

/* 左侧信息栏 */
.principal__aside {
  /* 顶部对齐 */
  padding-top: 8px;
}

/* 方形印章 */
.principal__seal {
  /* 固定宽高 */
  width: 100px;
  /* 固定宽高 */
  height: 100px;
  /* 弹性布局居中文字 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 透明背景 */
  background: transparent;
  /* 金色边框 */
  border: 1px solid var(--gold-500);
  /* 使用衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 19px;
  /* 行高 */
  line-height: 1.45;
  /* 文字居中 */
  text-align: center;
  /* 深绿色 */
  color: var(--green-800);
  /* 字距 */
  letter-spacing: 0.12em;
  /* 与上方标签留出间距 */
  margin-top: 24px;
}

/* 校长寄语引言 */
.principal__quote {
  /* 相对定位，给引号装饰定位 */
  position: relative;
  /* 左侧内边距 */
  padding-left: 34px;
  /* 左侧金色细线 */
  border-left: 1px solid var(--gold-500);
}

/* 校长寄语正文 */
.principal__quote p {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: clamp(21px, 2.3vw, 28px);
  /* 行高宽松 */
  line-height: 1.9;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 校长寄语正文第二段 */
.principal__quote p + p {
  /* 与上一段留出间距 */
  margin-top: 18px;
}

/* 校长签名区 */
.principal__signature {
  /* 与正文留出间距 */
  margin-top: 30px;
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 16px;
}

/* 校长姓名 */
.principal__signature strong {
  /* 字号 */
  font-size: 16px;
  /* 深绿色 */
  color: var(--green-800);
}

/* 校长职务 */
.principal__signature span {
  /* 小字号 */
  font-size: 12px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 左侧分隔线 */
  border-left: 1px solid var(--line);
  /* 左侧内边距 */
  padding-left: 16px;
}

/* 荣誉卡片网格 */
.honor-grid {
  /* 三列网格 */
  display: grid;
  /* 平均三列 */
  grid-template-columns: repeat(3, 1fr);
  /* 间距 */
  gap: 20px;
}

/* 单个荣誉卡片 */
.honor-card {
  /* 白色背景 */
  background: var(--white);
  /* 内边距 */
  padding: 28px;
  /* 浅色边框 */
  border: 1px solid var(--line);
  /* 顶部金色边线 */
  border-top: 3px solid var(--gold-500);
  /* 最小高度让三行卡片整齐 */
  min-height: 180px;
  /* 纵向排列内容 */
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
}

/* 荣誉卡片年份 */
.honor-card__year {
  /* 英文字体 */
  font-family: var(--font-en);
  /* 小字号 */
  font-size: 12px;
  /* 深金色 */
  color: #8e6d34;
  /* 拉开字距 */
  letter-spacing: 0.12em;
}

/* 荣誉卡片标题 */
.honor-card h3 {
  /* 字号 */
  font-size: 18px;
  /* 行高 */
  line-height: 1.6;
  /* 加粗 */
  font-weight: 600;
  /* 深墨绿色 */
  color: var(--green-950);
  /* 与年份留出间距 */
  margin-top: 12px;
}

/* 荣誉卡片说明 */
.honor-card p {
  /* 小字号 */
  font-size: 12px;
  /* 行高 */
  line-height: 1.75;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 自动推到卡片底部 */
  margin-top: auto;
  /* 与标题留出间距 */
  padding-top: 16px;
}

/* 荣誉区下方的小字说明 */
.honors-note {
  /* 小字号 */
  font-size: 12px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与网格留出间距 */
  margin-top: 20px;
}

/* ==========================================================================
   12. 校园新闻页
   ========================================================================== */

/* 新闻筛选工具条 */
.news-toolbar {
  /* 弹性布局 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 24px;
  /* 底部内边距 */
  padding-bottom: 22px;
  /* 底部细线 */
  border-bottom: 1px solid var(--line);
  /* 与列表留出间距 */
  margin-bottom: 30px;
}

/* 筛选按钮组 */
.filter-list {
  /* 水平排列 */
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
  /* 按钮间距 */
  gap: 8px;
}

/* 单个筛选按钮 */
.filter-button {
  /* 最小高度，保证点击区域足够大 */
  min-height: 40px;
  /* 上下左右内边距 */
  padding: 8px 18px;
  /* 浅色边框 */
  border: 1px solid var(--line);
  /* 白色背景 */
  background: var(--white);
  /* 小字号 */
  font-size: 13px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 小圆角 */
  border-radius: var(--radius);
  /* 颜色过渡 */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 筛选按钮悬停状态 */
.filter-button:hover {
  /* 悬停时边框变深 */
  border-color: var(--green-700);
  /* 文字变深绿 */
  color: var(--green-800);
}

/* 当前选中的筛选按钮 */
.filter-button.is-active {
  /* 深绿色背景 */
  background: var(--green-800);
  /* 白色文字 */
  color: var(--white);
  /* 边框同色 */
  border-color: var(--green-800);
}

/* 筛选结果数量 */
.news-count {
  /* 小字号 */
  font-size: 12px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 不参与压缩 */
  flex: 0 0 auto;
}

/* 新闻完整列表 */
.news-archive {
  /* 纵向排列卡片 */
  display: grid;
  /* 卡片之间留出间距 */
  gap: 16px;
}

/* 新闻卡片 */
.news-card {
  /* 锚点跳转时在卡片上方留出固定页头的空间 */
  scroll-margin-top: 130px;
  /* 两列：日期和正文（没有封面时的默认布局） */
  display: grid;
  /* 日期固定宽度，正文自适应 */
  grid-template-columns: 104px minmax(0, 1fr);
  /* 列间距 */
  gap: 32px;
  /* 内边距 */
  padding: 32px 36px;
  /* 白色背景 */
  background: var(--white);
  /* 浅色边框 */
  border: 1px solid var(--line);
  /* 边框和阴影过渡 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 有封面的新闻卡片 */
.news-card--has-cover {
  /* 三列：日期、正文、封面 */
  grid-template-columns: 104px minmax(0, 1fr) 190px;
  /* 封面较高时垂直居中 */
  align-items: center;
}

/* 新闻卡片悬停状态 */
.news-card:hover {
  /* 边框变深 */
  border-color: #c9c1b2;
  /* 轻微阴影 */
  box-shadow: 0 10px 30px rgba(8, 31, 26, 0.05);
}

/* 新闻卡片封面链接 */
.news-card__media {
  /* 块级显示 */
  display: block;
  /* 隐藏图片溢出 */
  overflow: hidden;
  /* 浅色背景 */
  background: var(--paper);
  /* 自身在网格中拉伸 */
  align-self: stretch;
  /* 最小高度 */
  min-height: 140px;
}

/* 新闻卡片封面图片 */
.news-card__media img {
  /* 宽度占满 */
  width: 100%;
  /* 高度占满 */
  height: 100%;
  /* 最小高度 */
  min-height: 140px;
  /* 裁切填充 */
  object-fit: cover;
  /* 图片过渡 */
  transition: transform 0.4s var(--ease);
}

/* 悬停时封面图轻微放大 */
.news-card:hover .news-card__media img {
  /* 放大一点点 */
  transform: scale(1.03);
}

/* 新闻卡片日期块 */
.news-card__date {
  /* 纵向排列 */
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
  /* 左侧金色细线 */
  border-left: 2px solid var(--gold-500);
  /* 左侧内边距 */
  padding-left: 16px;
}

/* 新闻日期中的“日” */
.news-card__day {
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 字号 */
  font-size: 40px;
  /* 行高 */
  line-height: 1;
  /* 深绿色 */
  color: var(--green-800);
}

/* 新闻日期中的“年、月” */
.news-card__month {
  /* 小字号 */
  font-size: 11px;
  /* 字距 */
  letter-spacing: 0.06em;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与日号留出间距 */
  margin-top: 8px;
}

/* 新闻卡片正文 */
.news-card__body {
  /* 顶部对齐 */
  align-self: start;
}

/* 新闻卡片的标签与日期行 */
.news-card__meta {
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 12px;
  /* 底部留白 */
  margin-bottom: 10px;
}

/* 新闻卡片中的时间文字 */
.news-card__meta time {
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
}

/* 新闻卡片标题 */
.news-card h2 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: clamp(21px, 2.2vw, 26px);
  /* 行高 */
  line-height: 1.5;
  /* 加粗 */
  font-weight: 700;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 新闻卡片标题链接 */
.news-card h2 a {
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 新闻卡片标题悬停状态 */
.news-card h2 a:hover {
  /* 悬停时变成深绿色 */
  color: var(--green-700);
}

/* 新闻卡片摘要 */
.news-card__summary {
  /* 字号 */
  font-size: 14px;
  /* 行高 */
  line-height: 1.85;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与标题留出间距 */
  margin-top: 8px;
}

/* 新闻卡片的“阅读全文”链接 */
.news-card__more {
  /* 行内弹性布局 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 6px;
  /* 上方留白 */
  margin-top: 14px;
  /* 小字号 */
  font-size: 12px;
  /* 深绿色 */
  color: var(--green-800);
  /* 底部细线 */
  border-bottom: 1px solid currentColor;
  /* 底部内边距 */
  padding-bottom: 2px;
  /* 宽度自适应内容 */
  width: fit-content;
}

/* 阅读全文链接悬停状态 */
.news-card__more:hover {
  /* 深金色 */
  color: #8d6d33;
}

/* 可展开内容的通用样式 */
.disclosure {
  /* 与上方摘要留出间距 */
  margin-top: 18px;
  /* 顶部虚线分隔 */
  border-top: 1px dashed var(--line);
}

/* 可展开内容的标题行 */
.disclosure summary {
  /* 弹性布局，文字和图标分列两端 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;
  /* 上方内边距 */
  padding-top: 14px;
  /* 小字号 */
  font-size: 12px;
  /* 深绿色 */
  color: var(--green-800);
  /* 加粗 */
  font-weight: 600;
  /* 去掉默认的三角标记 */
  list-style: none;
}

/* 兼容 WebKit 内核浏览器，去掉默认三角 */
.disclosure summary::-webkit-details-marker {
  /* 隐藏默认标记 */
  display: none;
}

/* 收起状态显示的文字 */
.disclosure__close {
  /* 默认隐藏 */
  display: none;
}

/* 展开状态下的图标 */
.disclosure__icon {
  /* 字号稍大 */
  font-size: 18px;
  /* 行高 */
  line-height: 1;
  /* 金色 */
  color: var(--gold-500);
  /* 旋转过渡 */
  transition: transform 0.2s ease;
}

/* 展开后隐藏“阅读全文” */
details[open] > summary .disclosure__open {
  /* 隐藏展开提示 */
  display: none;
}

/* 展开后显示“收起全文” */
details[open] > summary .disclosure__close {
  /* 显示收起提示 */
  display: inline;
}

/* 展开后让加号旋转成叉号 */
details[open] > summary .disclosure__icon {
  /* 旋转 45 度 */
  transform: rotate(45deg);
}

/* 展开后的正文 */
.article-body {
  /* 上方内边距 */
  padding-top: 20px;
  /* 字号 */
  font-size: 14px;
  /* 行高 */
  line-height: 1.95;
  /* 使用主文字颜色 */
  color: #4f5a53;
}

/* 文章正文中的小标题 */
.article-body h3 {
  /* 字号 */
  font-size: 16px;
  /* 深绿色 */
  color: var(--green-800);
  /* 与上一段留出间距 */
  margin: 18px 0 6px;
}

/* 文章正文中的段落 */
.article-body p + p {
  /* 段落之间留出间距 */
  margin-top: 10px;
}

/* 文章正文中的列表 */
.article-body ul {
  /* 上方留白 */
  margin-top: 10px;
  /* 左侧缩进 */
  padding-left: 20px;
  /* 恢复项目符号 */
  list-style: disc;
}

/* 文章列表中的条目 */
.article-body li {
  /* 条目之间留出间距 */
  margin-top: 4px;
}

/* ==========================================================================
   12.1 新闻详情页
   ========================================================================== */

/* 详情页头部的分类与日期行 */
.story-meta {
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 允许换行 */
  flex-wrap: wrap;
  /* 元素间距 */
  gap: 12px;
  /* 与摘要留出间距 */
  margin: 16px 0 18px;
}

/* 详情页日期 */
.story-meta time {
  /* 小字号 */
  font-size: 12px;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.62);
}

/* 详情页封面 */
.story-cover {
  /* 去掉 figure 默认外边距 */
  margin: 0 0 36px;
  /* 浅色背景 */
  background: var(--paper);
  /* 隐藏超出图片 */
  overflow: hidden;
}

/* 详情页封面图片 */
.story-cover img {
  /* 宽度占满 */
  width: 100%;
  /* 最大高度，避免竖图过高 */
  max-height: 620px;
  /* 按比例裁切 */
  object-fit: cover;
}

/* 详情页正文 */
.story-body {
  /* 字号比列表摘要更大 */
  font-size: 16px;
  /* 行高宽松 */
  line-height: 2;
}

/* 详情页正文段落 */
.story-body p {
  /* 字号 */
  font-size: 16px;
  /* 行高 */
  line-height: 2;
  /* 段落之间留出间距 */
  margin-top: 18px;
}

/* 详情页小标题 */
.story-body h3 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 24px;
  /* 行高 */
  line-height: 1.5;
  /* 上方留白 */
  margin-top: 36px;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 详情页列表 */
.story-body ul {
  /* 字号 */
  font-size: 16px;
  /* 行高 */
  line-height: 2;
  /* 上方留白 */
  margin-top: 14px;
}

/* 详情页图集 */
.story-gallery {
  /* 上方留白 */
  margin-top: 48px;
  /* 顶部细线 */
  border-top: 1px solid var(--line);
  /* 顶部内边距 */
  padding-top: 26px;
}

/* 图集标题行 */
.story-gallery__head {
  /* 弹性布局 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 底部对齐 */
  align-items: baseline;
  /* 元素间距 */
  gap: 16px;
  /* 底部留白 */
  margin-bottom: 18px;
}

/* 图集标题 */
.story-gallery__head h2 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 25px;
  /* 行高 */
  line-height: 1.4;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 图集数量 */
.story-gallery__head span {
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 字距 */
  letter-spacing: 0.08em;
}

/* 图集网格 */
.story-gallery__grid {
  /* 两列网格 */
  display: grid;
  /* 两列等宽 */
  grid-template-columns: repeat(2, 1fr);
  /* 间距 */
  gap: 12px;
}

/* 单张图集图片 */
.story-gallery__item {
  /* 去掉 figure 默认边距 */
  margin: 0;
  /* 浅色背景 */
  background: var(--paper);
  /* 隐藏溢出 */
  overflow: hidden;
}

/* 图集图片 */
.story-gallery__item img {
  /* 宽度占满 */
  width: 100%;
  /* 横向比例 */
  aspect-ratio: 4 / 3;
  /* 裁切填充 */
  object-fit: cover;
  /* 过渡 */
  transition: transform 0.4s var(--ease);
}

/* 悬停时图集图片轻微放大 */
.story-gallery__item:hover img {
  /* 放大 2% */
  transform: scale(1.02);
}

/* 详情页底部新闻导航 */
.story-pager {
  /* 三列：上一篇、返回、下一篇 */
  display: grid;
  /* 两侧自适应，中间按钮固定内容宽度 */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 24px;
  /* 上方留白 */
  margin-top: 48px;
  /* 顶部内边距 */
  padding-top: 24px;
  /* 顶部细线 */
  border-top: 1px solid var(--line);
}

/* 上一篇/下一篇链接 */
.story-pager__link {
  /* 纵向排列 */
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
  /* 元素间距 */
  gap: 4px;
  /* 主文字颜色 */
  color: var(--green-950);
}

/* 上一篇/下一篇小标签 */
.story-pager__link span {
  /* 小字号 */
  font-size: 10px;
  /* 深金色 */
  color: #8d6d33;
  /* 字距 */
  letter-spacing: 0.12em;
}

/* 上一篇/下一篇标题 */
.story-pager__link strong {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 16px;
  /* 行高 */
  line-height: 1.5;
  /* 正常字重 */
  font-weight: 600;
  /* 最多两行 */
  display: -webkit-box;
  /* 行数限制 */
  -webkit-line-clamp: 2;
  /* 纵向排列 */
  -webkit-box-orient: vertical;
  /* 隐藏超出部分 */
  overflow: hidden;
}

/* 下一篇右对齐 */
.story-pager__link--next {
  /* 右对齐 */
  text-align: right;
  /* 元素靠右 */
  align-items: flex-end;
}

/* 没有上一篇/下一篇时的占位 */
.story-pager__link--empty {
  /* 保持不可见，但仍然占住网格位置 */
  visibility: hidden;
}

/* 返回新闻列表按钮 */
.story-pager__back {
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 下方细线 */
  border-bottom: 1px solid var(--line);
  /* 下方内边距 */
  padding-bottom: 2px;
  /* 不换行 */
  white-space: nowrap;
}

/* 返回按钮悬停状态 */
.story-pager__back:hover {
  /* 深绿色 */
  color: var(--green-700);
}

/* 没有筛选结果时的提示 */
.empty-state {
  /* 内边距 */
  padding: 64px 24px;
  /* 居中文字 */
  text-align: center;
  /* 浅色边框 */
  border: 1px dashed var(--line);
  /* 次要文字颜色 */
  color: var(--muted);
  /* 米色背景 */
  background: var(--paper);
}

/* ==========================================================================
   13. 招生信息页
   ========================================================================== */

/* 招生概览三栏 */
.overview-grid {
  /* 三列网格 */
  display: grid;
  /* 平均三列 */
  grid-template-columns: repeat(3, 1fr);
  /* 间距 */
  gap: 20px;
}

/* 招生概览卡片 */
.info-card {
  /* 米色背景 */
  background: var(--paper);
  /* 内边距 */
  padding: 30px;
  /* 顶部深绿色粗线 */
  border-top: 3px solid var(--green-800);
}

/* 招生概览卡片标签 */
.info-card__label {
  /* 小字号 */
  font-size: 11px;
  /* 深金色 */
  color: #8e6d34;
  /* 拉开字距 */
  letter-spacing: 0.14em;
  /* 使用英文字体 */
  font-family: var(--font-en);
}

/* 招生概览卡片主信息 */
.info-card strong {
  /* 块级显示 */
  display: block;
  /* 字号 */
  font-size: 21px;
  /* 行高 */
  line-height: 1.5;
  /* 深墨绿色 */
  color: var(--green-950);
  /* 与标签留出间距 */
  margin-top: 10px;
}

/* 招生概览卡片说明 */
.info-card p {
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.8;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与主信息留出间距 */
  margin-top: 6px;
}

/* 招生页主体两栏：左侧文章，右侧侧边栏 */
.admissions-layout {
  /* 与上方概览卡片留出间距 */
  margin-top: 56px;
  /* 两列网格 */
  display: grid;
  /* 左侧自适应，右侧固定宽度 */
  grid-template-columns: minmax(0, 1fr) 320px;
  /* 列间距 */
  gap: 64px;
  /* 顶部对齐 */
  align-items: start;
}

/* 招生页左侧内容：允许在网格中收缩，避免宽表格撑破页面 */
.admissions-main {
  /* 网格子项默认不会小于内容宽度，这里显式允许收缩 */
  min-width: 0;
}

/* 右侧侧边栏的粘性容器 */
.admissions-aside__sticky {
  /* 粘性定位 */
  position: sticky;
  /* 距离顶部 120px，避开固定页头 */
  top: 120px;
}

/* 侧边栏卡片 */
.aside-card {
  /* 米色背景 */
  background: var(--paper);
  /* 内边距 */
  padding: 30px;
  /* 底部留白 */
  margin-bottom: 20px;
  /* 顶部金色细线 */
  border-top: 2px solid var(--gold-500);
}

/* 侧边栏卡片标题 */
.aside-card h2 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 23px;
  /* 行高 */
  line-height: 1.4;
  /* 深墨绿色 */
  color: var(--green-950);
  /* 与正文留出间距 */
  margin-bottom: 14px;
}

/* 侧边栏普通文字 */
.aside-card p {
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.85;
  /* 次要文字颜色 */
  color: var(--muted);
}

/* 侧边栏卡片中的按钮 */
.aside-card .button {
  /* 宽度占满卡片 */
  width: 100%;
  /* 与上方文字留出间距 */
  margin-top: 18px;
}

/* 侧边栏中的大号电话 */
.aside-phone {
  /* 块级显示 */
  display: block;
  /* 英文字体 */
  font-family: var(--font-en);
  /* 字号 */
  font-size: 25px;
  /* 深绿色 */
  color: var(--green-800);
  /* 与上方文字留出间距 */
  margin-top: 14px;
}

/* 侧边栏电话下方的小字 */
.aside-note {
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与电话留出间距 */
  margin-top: 4px;
}

/* 年份归档列表 */
.archive-list {
  /* 顶部细线 */
  border-top: 1px solid var(--line);
}

/* 单个归档项 */
.archive-list li {
  /* 底部细线 */
  border-bottom: 1px solid var(--line);
}

/* 归档链接 */
.archive-link {
  /* 弹性布局 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;
  /* 上下内边距 */
  padding: 12px 0;
  /* 字号 */
  font-size: 14px;
  /* 深墨绿色 */
  color: var(--green-950);
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 归档链接悬停状态 */
.archive-link:hover {
  /* 悬停时变成深绿色 */
  color: var(--green-700);
}

/* 归档项右侧的数量 */
.archive-link span {
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
}

/* 单个年份的招生区块 */
.year-block {
  /* 与下一个年份留出大间距 */
  margin-bottom: 64px;
  /* 锚点跳转时上方留出空间，避免被固定页头挡住 */
  scroll-margin-top: 130px;
}

/* 最后一个年份区块不需要底部间距 */
.year-block:last-child {
  /* 清除底部间距 */
  margin-bottom: 0;
}

/* 年份标题行 */
.year-heading {
  /* 弹性布局 */
  display: flex;
  /* 底部基线对齐 */
  align-items: baseline;
  /* 元素间距 */
  gap: 18px;
  /* 底部内边距 */
  padding-bottom: 14px;
  /* 底部深绿色粗线 */
  border-bottom: 2px solid var(--green-800);
  /* 与文章列表留出间距 */
  margin-bottom: 22px;
}

/* 年份数字 */
.year-heading__number {
  /* 英文字体 */
  font-family: var(--font-en);
  /* 大字号 */
  font-size: 52px;
  /* 数字保持纤细优雅，不跟随标题默认加粗 */
  font-weight: 400;
  /* 行高 */
  line-height: 1;
  /* 深绿色 */
  color: var(--green-800);
}

/* 年份说明 */
.year-heading__label {
  /* 小字号 */
  font-size: 12px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 拉开字距 */
  letter-spacing: 0.08em;
}

/* 招生文章卡片 */
.notice-card {
  /* 允许卡片在窄屏中收缩 */
  min-width: 0;
  /* 白色背景 */
  background: var(--white);
  /* 内边距 */
  padding: 30px 32px;
  /* 浅色边框 */
  border: 1px solid var(--line);
  /* 与下一张卡片留出间距 */
  margin-bottom: 14px;
}

/* 招生文章卡片顶部信息 */
.notice-card__meta {
  /* 弹性布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 元素间距 */
  gap: 12px;
  /* 底部留白 */
  margin-bottom: 10px;
}

/* 招生文章卡片时间 */
.notice-card__meta time {
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
}

/* 招生文章标题 */
.notice-card h3 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 24px;
  /* 行高 */
  line-height: 1.5;
  /* 加粗 */
  font-weight: 700;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 招生文章摘要 */
.notice-card__summary {
  /* 字号 */
  font-size: 14px;
  /* 行高 */
  line-height: 1.85;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与标题留出间距 */
  margin-top: 7px;
}

/* 收费标准表格的外层，窄屏可横向滚动 */
.table-wrap {
  /* 宽度不超过父容器 */
  width: 100%;
  /* 最大宽度与父容器一致 */
  max-width: 100%;
  /* 只在这个小区域内横向滚动，不撑破整个页面 */
  overflow-x: auto;
  /* 让手机上的横向滚动更顺滑 */
  -webkit-overflow-scrolling: touch;
  /* 上方留白 */
  margin-top: 18px;
}

/* 收费表格 */
.fee-table {
  /* 表格最小宽度，避免窄屏文字挤成一团 */
  min-width: 520px;
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.7;
}

/* 表头单元格 */
.fee-table th {
  /* 米色背景 */
  background: var(--paper);
  /* 深绿色文字 */
  color: var(--green-800);
  /* 加粗 */
  font-weight: 600;
  /* 文字居中 */
  text-align: left;
  /* 内边距 */
  padding: 12px 14px;
  /* 浅色边框 */
  border: 1px solid var(--line);
}

/* 表格数据单元格 */
.fee-table td {
  /* 内边距 */
  padding: 12px 14px;
  /* 浅色边框 */
  border: 1px solid var(--line);
  /* 主文字颜色 */
  color: #4f5a53;
}

/* 表格下方的备注 */
.table-note {
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与表格留出间距 */
  margin-top: 10px;
}

/* 报名流程列表 */
.steps-list {
  /* 顶部留白 */
  margin-top: 18px;
  /* 计数器重置 */
  counter-reset: step;
}

/* 流程中的单个步骤 */
.steps-list li {
  /* 相对定位，给序号定位 */
  position: relative;
  /* 左侧留出序号空间 */
  padding-left: 38px;
  /* 与上一步留出间距 */
  margin-top: 14px;
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.7;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 计数器递增 */
  counter-increment: step;
}

/* 流程步骤前的圆形序号 */
.steps-list li::before {
  /* 显示计数器数字 */
  content: counter(step);
  /* 绝对定位 */
  position: absolute;
  /* 左侧贴边 */
  left: 0;
  /* 顶部对齐 */
  top: 0;
  /* 圆形宽度 */
  width: 24px;
  /* 圆形高度 */
  height: 24px;
  /* 深绿色背景 */
  background: var(--green-800);
  /* 浅金色文字 */
  color: var(--gold-200);
  /* 使用英文字体 */
  font-family: var(--font-en);
  /* 小字号 */
  font-size: 11px;
  /* 水平居中 */
  text-align: center;
  /* 垂直居中 */
  line-height: 24px;
  /* 变成圆形 */
  border-radius: 50%;
}

/* ==========================================================================
   14. 联系我们页
   ========================================================================== */

/* 联系方式四栏 */
.contact-cards {
  /* 四列网格 */
  display: grid;
  /* 平均四列 */
  grid-template-columns: repeat(4, 1fr);
  /* 间距 */
  gap: 16px;
}

/* 单个联系方式卡片 */
.contact-card {
  /* 白色背景 */
  background: var(--white);
  /* 浅色边框 */
  border: 1px solid var(--line);
  /* 顶部金色细线 */
  border-top: 3px solid var(--gold-500);
  /* 内边距 */
  padding: 26px 24px;
  /* 最小高度，保证四张卡片高度一致 */
  min-height: 170px;
  /* 纵向排列内容 */
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
}

/* 联系方式卡片的小标签 */
.contact-card__label {
  /* 小字号 */
  font-size: 11px;
  /* 深金色 */
  color: #8e6d34;
  /* 拉开字距 */
  letter-spacing: 0.14em;
  /* 英文字体 */
  font-family: var(--font-en);
}

/* 联系方式卡片的主内容 */
.contact-card strong {
  /* 块级显示 */
  display: block;
  /* 字号 */
  font-size: 17px;
  /* 行高 */
  line-height: 1.65;
  /* 深墨绿色 */
  color: var(--green-950);
  /* 与标签留出间距 */
  margin-top: 12px;
}

/* 联系方式卡片的补充说明 */
.contact-card p {
  /* 小字号 */
  font-size: 12px;
  /* 行高 */
  line-height: 1.75;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 自动推到底部 */
  margin-top: auto;
  /* 与主内容留出间距 */
  padding-top: 10px;
}

/* 地图和交通区块的锚点跳转：顶部留出页头高度 */
#map,
#transport {
  /* 防止固定页头遮住跳转后的目标 */
  scroll-margin-top: 120px;
}

/* 地图与到访信息两栏 */
.contact-layout {
  /* 两列网格 */
  display: grid;
  /* 地图较宽，信息较窄 */
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  /* 列间距 */
  gap: 28px;
  /* 顶部对齐 */
  align-items: stretch;
}

/* 地图面板 */
.map-panel {
  /* 白色背景 */
  background: var(--white);
  /* 浅色边框 */
  border: 1px solid var(--line);
  /* 内边距，形成相框效果 */
  padding: 12px;
}

/* 地图图片 */
.map-panel img {
  /* 宽度占满 */
  width: 100%;
  /* 固定比例 */
  aspect-ratio: 14 / 9;
  /* 裁切填充 */
  object-fit: cover;
  /* 浅色背景，等待图片加载时也有底色 */
  background: var(--paper);
}

/* 地图图注 */
.map-panel figcaption {
  /* 顶部内边距 */
  padding: 10px 4px 2px;
  /* 小字号 */
  font-size: 11px;
  /* 次要文字颜色 */
  color: var(--muted);
}

/* 到访信息面板 */
.visit-panel {
  /* 深绿色背景 */
  background: var(--green-800);
  /* 白色文字 */
  color: var(--white);
  /* 内边距 */
  padding: 38px 34px;
}

/* 到访信息标题 */
.visit-panel h2 {
  /* 衬线字体 */
  font-family: var(--font-display);
  /* 字号 */
  font-size: 28px;
  /* 行高 */
  line-height: 1.4;
  /* 与列表留出间距 */
  margin-bottom: 18px;
}

/* 到访信息列表 */
.visit-list {
  /* 顶部半透明细线 */
  border-top: 1px solid var(--line-light);
}

/* 单条到访信息 */
.visit-item {
  /* 顶部内边距 */
  padding-top: 14px;
  /* 底部内边距 */
  padding-bottom: 14px;
  /* 底部半透明细线 */
  border-bottom: 1px solid var(--line-light);
}

/* 到访信息标签 */
.visit-item__label {
  /* 小字号 */
  font-size: 10px;
  /* 浅金色 */
  color: var(--gold-200);
  /* 拉开字距 */
  letter-spacing: 0.14em;
  /* 英文字体 */
  font-family: var(--font-en);
}

/* 到访信息内容 */
.visit-item strong {
  /* 块级显示 */
  display: block;
  /* 字号 */
  font-size: 16px;
  /* 行高 */
  line-height: 1.7;
  /* 与标签留出间距 */
  margin-top: 4px;
}

/* 到访信息中的链接 */
.visit-item a {
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 到访信息链接悬停状态 */
.visit-item a:hover {
  /* 悬停时变成浅金色 */
  color: var(--gold-200);
}

/* 交通方式三栏 */
.transport-grid {
  /* 三列网格 */
  display: grid;
  /* 平均三列 */
  grid-template-columns: repeat(3, 1fr);
  /* 间距 */
  gap: 16px;
}

/* 单个交通方式 */
.transport-item {
  /* 米色背景 */
  background: var(--paper);
  /* 左侧金色细线 */
  border-left: 2px solid var(--gold-500);
  /* 内边距 */
  padding: 24px 26px;
}

/* 交通方式标题 */
.transport-item h3 {
  /* 字号 */
  font-size: 16px;
  /* 深墨绿色 */
  color: var(--green-950);
}

/* 交通方式说明 */
.transport-item p {
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.8;
  /* 次要文字颜色 */
  color: var(--muted);
  /* 与标题留出间距 */
  margin-top: 6px;
}

/* ==========================================================================
   15. 网站页脚
   ========================================================================== */

/* 页脚整体 */
.site-footer {
  /* 最深墨绿背景 */
  background: var(--green-950);
  /* 白色文字 */
  color: var(--white);
  /* 顶部金色细线 */
  border-top: 3px solid var(--gold-500);
}

/* 页脚主体 */
.footer__main {
  /* 四列网格 */
  display: grid;
  /* 品牌列宽，其余列窄 */
  grid-template-columns: 1.5fr 0.7fr 0.7fr 1fr;
  /* 列间距 */
  gap: 56px;
  /* 上下内边距 */
  padding: 64px 0 48px;
}

/* 页脚校徽文字使用白色 */
.footer__brand .brand__text strong {
  /* 白色校名 */
  color: var(--white);
}

/* 页脚英文校名颜色 */
.footer__brand .brand__text small {
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.45);
}

/* 页脚品牌说明 */
.footer__about {
  /* 限制宽度 */
  max-width: 320px;
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.9;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.56);
  /* 与校徽留出间距 */
  margin-top: 18px;
}

/* 页脚栏目标题 */
.footer__title {
  /* 小字号 */
  font-size: 11px;
  /* 浅金色 */
  color: var(--gold-200);
  /* 拉开字距 */
  letter-spacing: 0.16em;
  /* 英文字体 */
  font-family: var(--font-en);
  /* 底部留白 */
  margin-bottom: 16px;
}

/* 页脚链接列表 */
.footer__links li + li {
  /* 链接之间留出间距 */
  margin-top: 8px;
}

/* 页脚链接 */
.footer__links a {
  /* 小字号 */
  font-size: 13px;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.62);
  /* 颜色过渡 */
  transition: color 0.2s ease;
}

/* 页脚链接悬停状态 */
.footer__links a:hover {
  /* 悬停时变成浅金色 */
  color: var(--gold-200);
}

/* 页脚联系方式文字 */
.footer__contact p {
  /* 小字号 */
  font-size: 13px;
  /* 行高 */
  line-height: 1.9;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.62);
}

/* 页脚联系方式中的电话链接 */
.footer__contact a {
  /* 浅金色 */
  color: var(--gold-200);
}

/* 页脚联系方式的第一行 */
.footer__contact p + p {
  /* 段落之间留出间距 */
  margin-top: 8px;
}

/* 页脚底部 */
.footer__bottom {
  /* 弹性布局 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;
  /* 允许换行 */
  flex-wrap: wrap;
  /* 元素间距 */
  gap: 12px;
  /* 上下内边距 */
  padding: 20px 0 24px;
  /* 顶部半透明细线 */
  border-top: 1px solid var(--line-light);
}

/* 页脚版权和说明文字 */
.footer__bottom p {
  /* 小字号 */
  font-size: 11px;
  /* 行高 */
  line-height: 1.7;
  /* 半透明白色 */
  color: rgba(255, 255, 255, 0.42);
}

/* 回到顶部链接 */
.footer__top-link {
  /* 小字号 */
  font-size: 11px;
  /* 浅金色 */
  color: var(--gold-200);
  /* 字距 */
  letter-spacing: 0.08em;
}

/* ==========================================================================
   16. 响应式布局：平板与手机
   ========================================================================== */

/* 屏幕宽度不超过 1100px 时启用以下规则 */
@media (max-width: 1100px) {
  /* 稍微缩小页头导航间距 */
  .site-nav {
    /* 导航和按钮之间留 20px */
    gap: 20px;
  }

  /* 导航链接间距缩小 */
  .site-nav__list {
    /* 链接之间留 20px */
    gap: 20px;
  }

  /* 招生卡片内边距缩小 */
  .admission-panel {
    /* 缩小内边距 */
    padding: 36px 30px;
  }

  /* 新闻与招生两栏间距缩小 */
  .editorial-grid {
    /* 间距改为 48px */
    gap: 48px;
  }

  /* 招生页右侧栏变窄 */
  .admissions-layout {
    /* 右侧栏宽度改为 280px */
    grid-template-columns: minmax(0, 1fr) 280px;
    /* 间距缩小 */
    gap: 40px;
  }

  /* 页脚四栏间距缩小 */
  .footer__main {
    /* 间距改为 36px */
    gap: 36px;
  }
}

/* 屏幕宽度不超过 980px 时，页头切换为手机菜单 */
@media (max-width: 980px) {
  /* 显示手机菜单按钮 */
  .nav-toggle {
    /* 使用弹性布局显示 */
    display: flex;
  }

  /* 主导航改为下拉面板 */
  .site-nav {
    /* 绝对定位，挂在页头下方 */
    position: absolute;
    /* 顶部与页头底部对齐 */
    top: 100%;
    /* 左右各留 20px */
    left: 20px;
    /* 右侧同样留 20px */
    right: 20px;
    /* 默认不显示 */
    display: none;
    /* 纵向排列 */
    flex-direction: column;
    /* 顶部对齐 */
    align-items: stretch;
    /* 间距归零 */
    gap: 0;
    /* 白色背景 */
    background: var(--white);
    /* 浅色边框 */
    border: 1px solid var(--line);
    /* 底部阴影，让面板浮起来 */
    box-shadow: 0 18px 40px rgba(8, 31, 26, 0.12);
    /* 内边距 */
    padding: 12px 16px 18px;
  }

  /* 菜单打开时显示导航 */
  .site-nav.is-open {
    /* 以块级元素显示 */
    display: flex;
  }

  /* 导航列表改为纵向 */
  .site-nav__list {
    /* 纵向排列 */
    flex-direction: column;
    /* 顶部对齐 */
    align-items: stretch;
    /* 间距归零 */
    gap: 0;
  }

  /* 手机导航链接占满整行 */
  .site-nav__link {
    /* 块级显示 */
    display: block;
    /* 上下内边距 */
    padding: 12px 4px;
    /* 底部细分隔线 */
    border-bottom: 1px solid var(--line);
  }

  /* 手机导航不需要底部提示线 */
  .site-nav__link::after {
    /* 隐藏提示线 */
    display: none;
  }

  /* 手机导航中的招生按钮 */
  .header__cta {
    /* 宽度占满 */
    width: 100%;
    /* 顶部留出间距 */
    margin-top: 14px;
  }

  /* 页头主行高度稍微降低 */
  .header__inner {
    /* 高度改为 76px */
    height: 76px;
  }

  /* 轮播高度跟随新的页头高度 */
  .hero__slides {
    /* 高度跟随视口，并扣除页头高度 */
    height: clamp(590px, calc(100svh - 110px), 720px);
  }

  /* 两栏图文改为单栏 */
  .split {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 行间距 */
    gap: 56px;
  }

  /* 简介图片限制最大宽度并居中 */
  .intro__media {
    /* 最大宽度 */
    max-width: 620px;
    /* 左右自动居中 */
    margin: 0 auto;
    /* 占满整行 */
    width: 100%;
  }

  /* 新闻与招生改为单栏 */
  .editorial-grid {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 行间距 */
    gap: 44px;
  }

  /* 招生卡片在单栏下限制宽度 */
  .admission-panel {
    /* 最大宽度 */
    max-width: 560px;
  }

  /* 关于页图文改为单栏 */
  .about-grid {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 行间距 */
    gap: 48px;
  }

  /* 关于页图片限制宽度 */
  .about-grid .media-frame {
    /* 最大宽度 */
    max-width: 620px;
  }

  /* 校长寄语改为单栏 */
  .principal__inner {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 行间距 */
    gap: 32px;
  }

  /* 校长印章在单栏下不再留大上边距 */
  .principal__seal {
    /* 上边距缩小 */
    margin-top: 14px;
  }

  /* 荣誉卡片改为两列 */
  .honor-grid {
    /* 两列布局 */
    grid-template-columns: repeat(2, 1fr);
  }

  /* 招生页改为单栏 */
  .admissions-layout {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 行间距 */
    gap: 44px;
  }

  /* 侧边栏取消粘性定位 */
  .admissions-aside__sticky {
    /* 恢复普通定位 */
    position: static;
  }

  /* 联系页地图和信息改为单栏 */
  .contact-layout {
    /* 单列布局 */
    grid-template-columns: 1fr;
  }

  /* 联系卡片改为两列 */
  .contact-cards {
    /* 两列布局 */
    grid-template-columns: repeat(2, 1fr);
  }

  /* 页脚改为两列 */
  .footer__main {
    /* 两列布局 */
    grid-template-columns: 1fr 1fr;
    /* 行间距 */
    row-gap: 40px;
  }
}

/* 屏幕宽度不超过 760px 时，进一步压缩间距 */
@media (max-width: 760px) {
  /* 隐藏顶部信息条，节省手机屏幕空间 */
  .topbar {
    /* 不显示 */
    display: none;
  }

  /* 容器左右留白缩小 */
  .container {
    /* 手机端左右留 20px */
    padding: 0 20px;
  }

  /* 页头高度缩小 */
  .header__inner {
    /* 高度改为 70px */
    height: 70px;
  }

  /* 手机端校徽稍微缩小 */
  .brand__mark {
    /* 宽度 */
    width: 40px;
    /* 高度 */
    height: 40px;
    /* 字号 */
    font-size: 23px;
  }

  /* 手机端中文校名缩小 */
  .brand__text strong {
    /* 字号 */
    font-size: 19px;
  }

  /* 手机端英文校名缩小 */
  .brand__text small {
    /* 字号 */
    font-size: 7px;
  }

  /* 轮播高度适配手机 */
  .hero__slides {
    /* 使用视口高度，并设置最小高度 */
    height: clamp(560px, 82svh, 680px);
  }

  /* 轮播文字区底部留白增加，避开控制条 */
  .hero__content {
    /* 底部留白 */
    padding-bottom: 130px;
  }

  /* 轮播标题字号缩小 */
  .hero__title {
    /* 使用更小的字号 */
    font-size: clamp(36px, 10vw, 48px);
  }

  /* 轮播说明文字字号缩小 */
  .hero__lead {
    /* 字号 */
    font-size: 15px;
  }

  /* 轮播按钮在窄屏允许换行 */
  .hero__actions {
    /* 顶部间距 */
    margin-top: 26px;
  }

  /* 轮播控制条左右贴边 */
  .hero__controls {
    /* 宽度改为容器宽度 */
    width: calc(100% - 40px);
  }

  /* 轮播指示线缩短 */
  .hero__dot {
    /* 宽度缩小 */
    width: 32px;
  }

  /* 轮播箭头稍微缩小 */
  .hero__arrow {
    /* 宽度 */
    width: 38px;
    /* 高度 */
    height: 38px;
  }

  /* 快捷入口改为两列 */
  .quick-links__grid {
    /* 两列布局 */
    grid-template-columns: repeat(2, 1fr);
  }

  /* 快捷入口添加顶部边框，形成网格 */
  .quick-link {
    /* 顶部细线 */
    border-top: 1px solid var(--line-light);
    /* 内边距缩小 */
    padding: 20px;
  }

  /* 第一行前两个不需要顶部线 */
  .quick-link:nth-child(-n + 2) {
    /* 去掉顶部线 */
    border-top: 0;
  }

  /* 第二列的快捷入口保留左边框 */
  .quick-link:nth-child(odd) {
    /* 去掉左侧边框 */
    border-left: 0;
  }

  /* 区块上下留白缩小 */
  .section {
    /* 改为 72px */
    padding: 72px 0;
  }

  /* 小区块留白缩小 */
  .section--tight {
    /* 改为 56px */
    padding: 56px 0;
  }

  /* 栏目标题区改为纵向排列 */
  .section-head {
    /* 纵向排列 */
    flex-direction: column;
    /* 左对齐 */
    align-items: flex-start;
    /* 行间距 */
    gap: 14px;
    /* 底部间距缩小 */
    margin-bottom: 30px;
  }

  /* 栏目标题字号缩小 */
  .section-head h2 {
    /* 字号 */
    font-size: 32px;
  }

  /* 简介标题字号缩小 */
  .intro__body h2 {
    /* 字号 */
    font-size: 34px;
  }

  /* 简介徽章调整位置 */
  .intro__badge {
    /* 左侧内移，避免超出屏幕 */
    left: 14px;
    /* 底部位置 */
    bottom: 28px;
    /* 内边距缩小 */
    padding: 14px 18px;
  }

  /* 数据数字字号缩小 */
  .stat__number {
    /* 字号 */
    font-size: 26px;
  }

  /* 新闻卡片改为单列 */
  .news-card {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 行间距 */
    gap: 16px;
    /* 内边距缩小 */
    padding: 24px;
  }

  /* 新闻日期块改为横向 */
  .news-card__date {
    /* 横向排列 */
    flex-direction: row;
    /* 垂直居中 */
    align-items: baseline;
    /* 元素间距 */
    gap: 8px;
  }

  /* 手机端日号缩小 */
  .news-card__day {
    /* 字号 */
    font-size: 30px;
  }

  /* 手机端月份与日号同一行 */
  .news-card__month {
    /* 上边距归零 */
    margin-top: 0;
  }

  /* 手机端新闻封面改为横向大图 */
  .news-card__media {
    /* 固定宽高比 */
    aspect-ratio: 16 / 9;
    /* 取消最小高度 */
    min-height: 0;
  }

  /* 手机端封面图片 */
  .news-card__media img {
    /* 高度跟随容器 */
    height: 100%;
    /* 取消最小高度 */
    min-height: 0;
  }

  /* 手机端有图的首页新闻改为三列 */
  .news-list__link--thumb {
    /* 内容、缩略图、箭头 */
    grid-template-columns: minmax(0, 1fr) 84px 18px;
    /* 列间距 */
    gap: 14px;
    /* 垂直居中 */
    align-items: center;
  }

  /* 手机端隐藏首页新闻的独立日期列 */
  .news-list__link--thumb .news-list__date {
    /* 不显示 */
    display: none;
  }

  /* 手机端详情页封面 */
  .story-cover {
    /* 底部间距缩小 */
    margin-bottom: 26px;
  }

  /* 手机端封面图片不再限制最大高度 */
  .story-cover img {
    /* 使用横向比例 */
    aspect-ratio: 16 / 10;
    /* 取消最大高度 */
    max-height: none;
  }

  /* 手机端正文 */
  .story-body,
  .story-body p,
  .story-body ul {
    /* 字号缩小 */
    font-size: 15px;
    /* 行高稍微收紧 */
    line-height: 1.95;
  }

  /* 手机端正文小标题 */
  .story-body h3 {
    /* 字号 */
    font-size: 21px;
    /* 上边距缩小 */
    margin-top: 28px;
  }

  /* 手机端图集改为单列 */
  .story-gallery__grid {
    /* 单列布局 */
    grid-template-columns: 1fr;
  }

  /* 手机端新闻导航改为纵向 */
  .story-pager {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 元素间距 */
    gap: 16px;
  }

  /* 手机端返回按钮排在最前面 */
  .story-pager__back {
    /* 放到第一行 */
    grid-row: 1;
    /* 左对齐 */
    justify-self: start;
  }

  /* 手机端下一篇左对齐 */
  .story-pager__link--next {
    /* 左对齐 */
    text-align: left;
    /* 元素靠左 */
    align-items: flex-start;
  }

  /* 手机端隐藏空占位，避免多余间距 */
  .story-pager__link--empty {
    /* 不占据网格位置 */
    display: none;
  }

  /* 新闻工具条改为纵向 */
  .news-toolbar {
    /* 纵向排列 */
    flex-direction: column;
    /* 左对齐 */
    align-items: flex-start;
    /* 行间距 */
    gap: 14px;
  }

  /* 内页页头留白缩小 */
  .page-hero {
    /* 上下内边距 */
    padding: 50px 0;
  }

  /* 内页页头标题缩小 */
  .page-hero h1 {
    /* 字号 */
    font-size: 40px;
  }

  /* 页头右侧编号隐藏 */
  .page-hero__index {
    /* 不显示 */
    display: none;
  }

  /* 内页主体留白缩小 */
  .page-section {
    /* 上下内边距 */
    padding: 60px 0 72px;
  }

  /* 办学理念三栏改为单栏 */
  .value-grid {
    /* 单列布局 */
    grid-template-columns: 1fr;
  }

  /* 荣誉卡片改为单列 */
  .honor-grid {
    /* 单列布局 */
    grid-template-columns: 1fr;
  }

  /* 招生概览改为单列 */
  .overview-grid {
    /* 单列布局 */
    grid-template-columns: 1fr;
  }

  /* 联系方式改为单列 */
  .contact-cards {
    /* 单列布局 */
    grid-template-columns: 1fr;
  }

  /* 联系卡片最小高度取消 */
  .contact-card {
    /* 自动高度 */
    min-height: 0;
  }

  /* 交通方式改为单列 */
  .transport-grid {
    /* 单列布局 */
    grid-template-columns: 1fr;
  }

  /* 校训横幅内部改为纵向 */
  .motto-band__inner {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 行间距 */
    gap: 10px;
  }

  /* 校训英文在水印下方对齐 */
  .motto-band__en {
    /* 顶部留出间距 */
    margin-top: 4px;
  }

  /* 页脚两列改为单列 */
  .footer__main {
    /* 单列布局 */
    grid-template-columns: 1fr;
    /* 上下内边距缩小 */
    padding: 48px 0 36px;
  }

  /* 页脚品牌说明限制宽度 */
  .footer__about {
    /* 最大宽度 */
    max-width: 100%;
  }

  /* 页脚底部改为纵向 */
  .footer__bottom {
    /* 纵向排列 */
    flex-direction: column;
    /* 左对齐 */
    align-items: flex-start;
  }

  /* 校长寄语的左侧内边距缩小 */
  .principal__quote {
    /* 左侧内边距 */
    padding-left: 22px;
  }

  /* 招生文章卡片内边距缩小 */
  .notice-card {
    /* 内边距 */
    padding: 24px;
  }

  /* 年份数字缩小 */
  .year-heading__number {
    /* 字号 */
    font-size: 42px;
  }
}

/* 屏幕宽度不超过 520px 时，做最后的细节调整 */
@media (max-width: 520px) {
  /* 轮播按钮改为纵向排列，避免挤压 */
  .hero__actions {
    /* 纵向排列 */
    flex-direction: column;
    /* 左对齐 */
    align-items: flex-start;
  }

  /* 轮播中的按钮占满可用宽度 */
  .hero__actions .button {
    /* 宽度占满 */
    width: 100%;
  }

  /* 轮播控制条间距缩小 */
  .hero__controls {
    /* 元素间距 */
    gap: 12px;
  }

  /* 轮播指示点进一步缩短 */
  .hero__dot {
    /* 宽度 */
    width: 24px;
  }

  /* 轮播序号隐藏，给按钮留空间 */
  .hero__count {
    /* 不显示 */
    display: none;
  }

  /* 暂停按钮字号缩小 */
  .hero__pause {
    /* 字号 */
    font-size: 11px;
    /* 内边距缩小 */
    padding: 8px 6px;
  }

  /* 数据统计保持三列但缩小间距 */
  .stats {
    /* 列间距 */
    gap: 10px;
  }

  /* 数据标签换行 */
  .stat__label {
    /* 字号 */
    font-size: 11px;
  }

  /* 简介操作区改为纵向 */
  .intro__actions {
    /* 纵向排列 */
    flex-direction: column;
    /* 左对齐 */
    align-items: flex-start;
    /* 行间距 */
    gap: 16px;
  }

  /* 新闻列表日期列变窄 */
  .news-list__link {
    /* 两列布局：内容与箭头 */
    grid-template-columns: minmax(0, 1fr) 18px;
    /* 列间距 */
    gap: 12px;
  }

  /* 首页新闻日期移入内容上方，隐藏独立日期列 */
  .news-list__date {
    /* 不显示独立日期列 */
    display: none;
  }

  /* 超窄屏的首页新闻有图条目 */
  .news-list__link--thumb {
    /* 只保留内容和箭头两列 */
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  /* 超窄屏隐藏首页新闻缩略图，保证标题有足够宽度 */
  .news-list__link--thumb .news-list__thumb {
    /* 不显示 */
    display: none;
  }

  /* 内页页头标题进一步缩小 */
  .page-hero h1 {
    /* 字号 */
    font-size: 35px;
  }

  /* 页头说明文字字号缩小 */
  .page-hero__lead {
    /* 字号 */
    font-size: 14px;
  }

  /* 面包屑与标题之间留白缩小 */
  .breadcrumb {
    /* 底部留白 */
    margin-bottom: 20px;
  }

  /* 校长寄语正文缩小 */
  .principal__quote p {
    /* 字号 */
    font-size: 20px;
  }

  /* 到访面板内边距缩小 */
  .visit-panel {
    /* 内边距 */
    padding: 30px 24px;
  }

  /* 侧边栏卡片内边距缩小 */
  .aside-card {
    /* 内边距 */
    padding: 24px;
  }

  /* 年份标题允许换行 */
  .year-heading {
    /* 允许换行 */
    flex-wrap: wrap;
    /* 行间距 */
    gap: 8px 14px;
  }
}

/* 当系统开启“减少动态效果”时，关闭所有动画和过渡 */
@media (prefers-reduced-motion: reduce) {
  /* 关闭平滑滚动 */
  html {
    /* 立即跳到锚点位置 */
    scroll-behavior: auto;
  }

  /* 所有元素的动画和过渡几乎立即结束 */
  *,
  *::before,
  *::after {
    /* 动画时长缩到极短 */
    animation-duration: 0.01ms !important;
    /* 动画重复次数设为一次 */
    animation-iteration-count: 1 !important;
    /* 过渡时长缩到极短 */
    transition-duration: 0.01ms !important;
    /* 锚点滚动也立即完成 */
    scroll-behavior: auto !important;
  }

  /* 轮播切换不淡入淡出 */
  .hero__slide {
    /* 去掉过渡 */
    transition: none;
  }
}