@charset "UTF-8";
/* ===
   启赋书院 · 全站设计系统 shared.css
   ----------------------------------------------------------------------------
   全站唯一样式表。所有页面只引这一份，不写行内样式、不加页面级 <style>。

   目录
01  RESET            清零与默认值
02  TOKENS           设计变量（色板 / 字级 / 间距 / 圆角 / 阴影 / 动效）
03  BASE             排版基础（中文行高、标题层级、链接、选区）
04  LAYOUT           容器、分区、栅格
05  NAV              顶部导航 + 移动端汉堡菜单
06  TYPOGRAPHY-UI    分区标题、眉标、正文块、引文
07  BUTTONS          主 / 次 / 购买 / 幽灵 / 文字链
08  CARDS            基础卡片、课程卡、资讯条、人物卡
09  ATOMS            标签、徽章、印章、彩色圆底图标、分隔线、列表
10  FORMS            表单控件（下一轮 contact.html 用）
11  PATTERNS         首屏（首页 + 内页）、地图示意图、CTA 带、步骤条
12  FOOTER           页脚
13  MOTION           滚动显现
14  RESPONSIVE       1280 / 1024 / 768 / 480 断点
15  A11Y-UTIL        无障碍工具类
16  PRINT            打印样式

   约定
· 只用 CSS 自定义属性取值，禁止在组件里写死颜色 / 尺寸
· 间距一律取 4 的倍数（--sp-* 语义变量优先）
· 中文正文行高 1.75，标题行高 1.35
· 衬线字体只用于标题层（h1-h3、引文、印章、数字序号） */


/* ===
   01  RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* 锚点跳转时给固定导航留出空间 */
  scroll-padding-top: 96px;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; border-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* 隐藏但保留可访问性 */
[hidden] { display: none !important; }


/* ===
   02  TOKENS
   —— 数值与微信小程序保持一致，是全站唯一色值来源 */
:root {
  /* ---- 主色：赭石（来自宣纸与墨迹之间的暖调） ---- */
  --ochre:        #B96E2C;
  --ochre-deep:   #96561F;
  --ochre-light:  #C0702E;
  --ochre-wash:   rgba(185, 110, 44, .12);   /* 浅底填充 */
  --ochre-wash-2: rgba(185, 110, 44, .18);   /* 浅底填充 · 深一档 */

  /* ---- 辅色：宣纸、沙、朱砂 ---- */
  --sand:         #F6EAD3;
  --sand-deep:    #EFDFC0;
  --cinnabar:     #B3402A;
  --cinnabar-wash: rgba(179, 64, 42, .12);

  /* ---- 中性：墨、纸、卡、线 ---- */
  --ink:          #2B2620;
  --ink-soft:     #443C31;
  --text2:        #6E6252;
  --text3:        #A89B82;
  --paper:        #FAF6ED;
  --paper-deep:   #F4EBD8;
  --card:         #FFFDF8;
  --line:         #E7DCC3;
  --line-soft:    rgba(231, 220, 195, .7);

  /* ---- 语义色（表单校验、提示条用） ---- */
  --ok:           #4F7A4A;
  --warn:         #B98A2C;
  --err:          var(--cinnabar);
  --info:         #4A6B7A;

  /* ---- 字体族：只用系统栈，零外部字体 ---- */
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- 字级（1440 基准；1280/768/480 断点内重设） ---- */
  --fs-display:  46px;   /* 首屏主口号，全站最大字 */
  --fs-h1:       42px;
  --fs-h2:       34px;   /* 分区标题 */
  --fs-h3:       23px;   /* 卡片标题 / 小节标题 */
  --fs-h4:       18px;   /* 小标题 */
  --fs-lead:     17px;   /* 导语 */
  --fs-body:     16px;   /* 正文 */
  --fs-sm:       14px;   /* 次要正文 / 按钮 */
  --fs-xs:       13px;   /* 说明文字 */
  --fs-2xs:      12px;   /* 眉标 / 脚注 */

  /* ---- 行高 ---- */
  --lh-tight:    1.35;   /* 标题 */
  --lh-snug:     1.55;   /* 短文本 */
  --lh-body:     1.75;   /* 中文正文 */
  --lh-loose:    1.95;   /* 长段落、引文 */

  /* ---- 字距 ---- */
  --ls-tight:    -.01em;
  --ls-normal:   0;
  --ls-wide:     .03em;   /* 中文小标题常用 */
  --ls-wider:    .08em;
  --ls-widest:   .14em;   /* 眉标、印章 */

  /* ---- 间距基数：4px ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* ---- 语义间距 ---- */
  --gap-grid:    var(--sp-6);    /* 卡片栅格间隙 */
  --gap-grid-sm: var(--sp-4);
  --pad-card:    var(--sp-7);    /* 卡片内边距 */
  --pad-section: var(--sp-12);   /* 分区上下留白 */
  --stack-sm:    var(--sp-3);    /* 段内小间隔 */
  --stack-md:    var(--sp-5);
  --stack-lg:    var(--sp-7);

  /* ---- 圆角 ---- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 999px;

  /* ---- 阴影 ---- */
  --sh-soft:  0 2px 8px rgba(120, 84, 40, .05);
  --sh-card:  0 4px 16px rgba(120, 84, 40, .08);
  --sh-raise: 0 10px 30px rgba(120, 84, 40, .11);
  --sh-btn:   0 6px 18px rgba(150, 86, 31, .22);
  --sh-btn-sm: 0 4px 12px rgba(150, 86, 31, .2);

  /* ---- 渐变 ---- */
  --grad-ochre: linear-gradient(145deg, var(--ochre-light), var(--ochre));
  --grad-ochre-deep: linear-gradient(145deg, var(--ochre), var(--ochre-deep));
  --grad-cinnabar: linear-gradient(145deg, #C24C34, var(--cinnabar));
  --grad-paper: linear-gradient(160deg, #FAF6ED 0%, #F4EAD6 46%, #EFE2C8 100%);

  /* ---- 墨韵底纹：所有卡片头部的装饰渐变统一用这两个 ----
     a = 上来的淡墨（主视觉右侧），b = 下方的浓墨（压住画面底部）
     全部是 radial-gradient，图片未加载时也能撑住层次 */
  --ink-wash-a: radial-gradient(58% 46% at 58% 60%, rgba(94, 84, 66, .22), rgba(94, 84, 66, 0) 70%);
  --ink-wash-b: radial-gradient(54% 48% at 52% 46%, rgba(60, 54, 42, .17), rgba(60, 54, 42, 0) 72%);

  /* ---- 动效 ---- */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.45, .05, .55, .95);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* ---- 容器与导航 ---- */
  --w-container: 1200px;
  --w-narrow:    760px;
  --w-prose:     680px;
  --h-nav:       84px;
  --pad-gutter:  40px;
  --z-nav:       100;
  --z-menu:      90;
}


/* ===
   03  BASE */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  /* 防止任何子元素撑破视口造成横向滚动 */
  overflow-x: hidden;
  /* 中文默认不做词内断行，长串不换行的内容用 overflow-wrap 兜底 */
  word-break: normal;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  /* 中英文混排：让浏览器在字距上给一点呼吸 */
  font-feature-settings: "kern" 1;
}

/* 标题层：衬线 + 紧行高 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  text-wrap: balance;           /* 支持则自动避免孤字，不支持则无副作用 */
}

h1 { font-family: var(--font-serif); font-size: var(--fs-h1); }
h2 { font-family: var(--font-serif); font-size: var(--fs-h2); }
h3 { font-family: var(--font-serif); font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--ls-normal); }
h5 { font-size: var(--fs-sm); letter-spacing: var(--ls-normal); }

p { text-wrap: pretty; }

/* 正文里最常见的行内强调 */
strong, b { font-weight: 600; color: var(--ink); }
em { font-style: normal; color: var(--ink); font-weight: 500; }
small { font-size: var(--fs-2xs); }

::selection {
  background: var(--ochre-wash-2);
  color: var(--ochre-deep);
}

/* 键盘可见焦点：鼠标点击不出现，Tab 一定出现 */
:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* 跳转到主内容（无障碍必备） */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-card);
  font-size: var(--fs-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }


/* ===
   04  LAYOUT */

/* 内容容器：最大 1200，两侧留白随屏宽收放 */
.container {
  width: 100%;
  max-width: calc(var(--w-container) + var(--pad-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-gutter);
}

.container--narrow {
  max-width: calc(var(--w-narrow) + var(--pad-gutter) * 2);
}

/* 分区：统一上下留白 */
.section {
  padding-block: var(--pad-section);
}
.section--tight { padding-block: var(--sp-10); }
.section--loose { padding-block: calc(var(--pad-section) + var(--sp-7)); }

/* 分区底色变体 */
.section--wash   { background: var(--paper-deep); }
.section--sand   { background: var(--sand); }
.section--card   { background: var(--card); border-block: 1px solid var(--line); }
.section--ink    { background: var(--ink); color: #EFE7D6; }
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: #FBF5E8; }
.section--ink .sec-sub { color: rgba(239, 231, 214, .72); }

/* 简易栅格：给需要自定义列数的区块用 */
.grid { display: grid; gap: var(--gap-grid); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 纵向堆叠：容器内的元素等距排列 */
.stack > * + * { margin-top: var(--stack-md); }
.stack--sm > * + * { margin-top: var(--stack-sm); }
.stack--lg > * + * { margin-top: var(--stack-lg); }


/* ===
   05  NAV
   —— 默认透明浮在页面上方，滚动后加 .is-solid 变实底 */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.site-nav.is-solid {
  background: rgba(255, 253, 248, .92);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(120, 84, 40, .03), 0 6px 20px rgba(120, 84, 40, .06);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: var(--h-nav);
}

/* ---- 品牌区 ---- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.brand-mark--text {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--r-md);
  background: var(--grad-ochre);
  color: #FFFCF5;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1px;
  box-shadow: 0 3px 9px rgba(150, 86, 31, .22);
}
.brand:hover .brand-mark { transform: translateY(-1px); }

.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-text b {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ochre-deep);
  line-height: 1.25;
}
.brand-text i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text3);
  letter-spacing: .02em;
  line-height: 1.3;
}

/* ---- 主导航 ---- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: auto;
}
.nav-menu a {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--text2);
  letter-spacing: var(--ls-wide);
  padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-menu a:hover { color: var(--ink); }

/* 当前页：文字加深 + 底部一条短赭线 */
.nav-menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: 1px;
  background: var(--ochre);
}

.nav-cta { flex: 0 0 auto; }

/* ---- 汉堡按钮：仅移动端出现 ---- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
/* 打开态变成 × */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- 移动端抽屉 ---- */
.nav-drawer {
  position: fixed;
  inset: var(--h-nav) 0 auto 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(120, 84, 40, .14);
  max-height: calc(100dvh - var(--h-nav));
  overflow-y: auto;
}
.nav-drawer.is-open { display: flex; }

.nav-drawer a {
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--fs-body);
  color: var(--ink-soft);
  letter-spacing: var(--ls-wide);
  border-bottom: 1px solid var(--line-soft);
}
.nav-drawer a[aria-current="page"] { color: var(--ochre-deep); font-weight: 600; }
.nav-drawer .btn { margin-top: var(--sp-5); }

/* 抽屉打开时锁滚动 */
body.is-locked { overflow: hidden; }


/* ===
   06  TYPOGRAPHY-UI */

/* ---- 眉标：标题上方的小字导引 ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  color: var(--text3);
  text-transform: none;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--dot::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cinnabar);
  opacity: 1;
}

/* ---- 分区标题组 ---- */
.sec-head {
  max-width: 720px;
  margin-bottom: var(--sp-8);
}
.sec-head h2 { margin-top: var(--sp-3); }

.sec-sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text2);
  max-width: 62ch;
}

/* 标题与右侧链接同一行 */
.sec-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-7);
  max-width: none;
  flex-wrap: wrap;
}
.sec-head--row > div { max-width: 660px; }
.sec-head--row .sec-sub { margin-bottom: 0; }

/* 小标题与下方内容之间的小间隔 */
.sub-head { margin-top: var(--sp-8); margin-bottom: var(--sp-5); }

/* ---- 正文块 ---- */
.prose { max-width: var(--w-prose); }
.prose p + p { margin-top: var(--sp-5); }
.prose p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--text2); }
.prose strong { color: var(--ink); }

/* ---- 引文 ---- */
.quote {
  position: relative;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--sand-deep);
  border-radius: 1px;
}
.quote p {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.7;
  letter-spacing: var(--ls-wide);
  color: var(--ink-soft);
}
.quote cite {
  display: block;
  margin-top: var(--sp-4);
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text3);
}

/* ---- 小标题（带左侧竖线） ---- */
.mini-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
}
.mini-head::before {
  content: "";
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--ochre);
  flex: 0 0 3px;
}


/* ===
   07  BUTTONS
   —— 四态：主要（赭石渐变）/ 次要（描边）/ 购买（朱砂）/ 幽灵（纯文字） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  line-height: 1.5;
  white-space: nowrap;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform var(--dur-base) var(--ease-out);
}

/* 主要 */
.btn--primary {
  color: #FFFCF5;
  background: var(--grad-ochre-deep);
  box-shadow: var(--sh-btn-sm);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-btn);
}
.btn--primary:hover svg { transform: translateX(2px); }

/* 次要：描边，白底 */
.btn--secondary {
  color: var(--ink);
  background: rgba(255, 253, 248, .92);
  border-color: var(--line);
  box-shadow: var(--sh-soft);
}
.btn--secondary:hover {
  border-color: var(--ochre);
  color: var(--ochre-deep);
  transform: translateY(-1px);
  box-shadow: var(--sh-card);
}

/* 购买：朱砂，用于课程成交 */
.btn--buy {
  color: #FFF9F4;
  background: var(--grad-cinnabar);
  box-shadow: 0 6px 18px rgba(179, 64, 42, .24);
}
.btn--buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(179, 64, 42, .3);
}

/* 幽灵：无底色无边框 */
.btn--ghost {
  color: var(--text2);
  padding-inline: var(--sp-3);
}
.btn--ghost:hover { color: var(--ochre-deep); }
.btn--ghost:hover svg { transform: translateX(2px); }

/* 浅底：沙色底赭石字，用于深色区块 */
.btn--soft {
  color: var(--ochre-deep);
  background: var(--sand);
  font-weight: 600;
}
.btn--soft:hover { background: var(--sand-deep); transform: translateY(-1px); }

/* 尺寸 */
.btn--sm { padding: 9px 16px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn--sm svg { width: 13px; height: 13px; flex: 0 0 13px; }

.btn--lg { padding: 15px 30px; font-size: var(--fs-lead); border-radius: var(--r-lg); }
.btn--lg svg { width: 16px; height: 16px; flex: 0 0 16px; }

.btn--block { display: flex; width: 100%; }

/* ---- 文字链：底部细线，右侧箭头 ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--ochre-deep);
  letter-spacing: var(--ls-wide);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(185, 110, 44, .28);
  transition: border-color var(--dur-base) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.link-arrow svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.link-arrow:hover {
  border-bottom-color: var(--ochre);
  gap: 10px;
}


/* ===
   08  CARDS */

/* ---- 基础卡片 ---- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  box-shadow: var(--sh-soft);
}

/* 可点击卡片：hover 上浮 */
.card--link {
  display: flex;
  flex-direction: column;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.card--link:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 110, 44, .34);
  box-shadow: var(--sh-raise);
}
.card--link:focus-visible { outline-offset: 4px; }

/* 左侧强调条 */
.card--accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sp-7);
  bottom: var(--sp-7);
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--ochre);
  opacity: .8;
}

/* 无内边距版本（内部自己控制） */
.card--flush { padding: 0; overflow: hidden; }

/* ---- 三条课程线卡片 ---- */
.line-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-7);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-soft);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.line-card:hover {
  transform: translateY(-4px);
  border-color: rgba(185, 110, 44, .3);
  box-shadow: var(--sh-raise);
}
.line-card h3 { margin-top: var(--sp-1); }
.line-card > p {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}
.line-card .line-points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
}
.line-card .line-points li {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text2);
}
.line-card .line-points li svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-top: 3px;
  stroke: var(--ochre);
  stroke-width: 2.2;
  fill: none;
}
.line-card .line-foot { margin-top: auto; padding-top: var(--sp-2); }

/* ---- 课程 / 研学 卡（横向信息密度更高） ---- */
.course-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-soft);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.course-card:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 110, 44, .3);
  box-shadow: var(--sh-raise);
}

/* 卡头：渐变墨底 + 竖排书名，不用图片也有层次 */
.course-card .cc-top {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
  background: var(--grad-paper);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.course-card .cc-top::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -30%;
  width: 62%;
  height: 150%;
  background: var(--ink-wash-a);
}
.course-card .cc-top::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -18%;
  width: 52%;
  height: 76%;
  background: var(--ink-wash-b);
}
.course-card .cc-top > * { position: relative; }

/* 卡头书名：衬线 + 两行，是卡片里唯一的视觉重音 */
.course-card .cc-title {
  position: relative;
  margin-top: var(--sp-4);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
}
.course-card .cc-sub {
  position: relative;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text2);
  letter-spacing: var(--ls-wide);
}

.course-card .cc-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  flex: 1;
}
.course-card .cc-body p {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text2);
}
.course-card .cc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--text3);
  letter-spacing: var(--ls-wide);
}
.course-card .cc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.course-card .cc-meta span svg {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.course-card .cc-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

/* ---- 主推课程卡：横向编辑式版式，比普通卡多一档视觉权重 ---- */
.featured-course {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

/* 左：墨底书名区 */
.featured-course .fc-aside {
  position: relative;
  overflow: hidden;
  padding: var(--sp-9) var(--sp-8);
  background: var(--grad-paper);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}
.featured-course .fc-aside::before {
  content: "";
  position: absolute;
  right: -14%;
  top: -34%;
  width: 74%;
  height: 168%;
  background: var(--ink-wash-a);
}
.featured-course .fc-aside::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: -22%;
  width: 60%;
  height: 84%;
  background: var(--ink-wash-b);
}
.featured-course .fc-aside > * { position: relative; }

.featured-course .fc-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
}
.featured-course .fc-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text2);
  max-width: 34em;
}

/* 右：四条交付物 + 成交 */
.featured-course .fc-main {
  padding: var(--sp-9) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.featured-course .fc-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.featured-course .fc-features li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.featured-course .fc-features li svg {
  width: 15px;
  height: 15px;
  margin-top: 5px;
  stroke: var(--ochre);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.featured-course .fc-features b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.featured-course .fc-features span {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text2);
}
.featured-course .fc-foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}


/* ---- 资讯条目（列表式） ---- */
.news-list {
  border-top: 1px solid var(--line);
}
.news-item {
  display: grid;
  /* 140px：中文日期「2026 年 10 月 21 日」一行放得下。
     原来 108px 会让日期折成两行，列表看着参差不齐。 */
  grid-template-columns: 140px 1fr auto;
  align-items: baseline;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-2);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.news-item:hover {
  background: rgba(246, 234, 211, .42);
  padding-left: var(--sp-4);
}
.news-item time {
  font-size: var(--fs-2xs);
  color: var(--text3);
  letter-spacing: var(--ls-wider);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.news-item h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--ink-soft);
}
.news-item:hover h3 { color: var(--ink); }
.news-item .news-tag {
  font-size: var(--fs-2xs);
  color: var(--text3);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

/* ---- 人物卡 ---- */
.person {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: var(--sp-10);
  align-items: start;
}
.person-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--grad-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--text3);
}
/* 待补照片的占位斜纹：只在没有真实照片时出现 */
.person-photo:not(.has-photo)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(231, 220, 195, .5) 0 1px,
    transparent 1px 10px
  );
  pointer-events: none;
}
.person-photo span {
  position: relative;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  color: var(--text3);
  background: rgba(250, 246, 237, .8);
  padding: 3px 8px;
  border-radius: var(--r-xs);
}
.person-photo svg {
  position: relative;
  width: 26px;
  height: 26px;
  stroke: var(--text3);
  stroke-width: 1.4;
  fill: none;
  opacity: .6;
}

.person-photo.has-photo {
  background: #111;
  color: transparent;
}
.person-photo.has-photo img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* 教育路径：竖向时间线 */
.path-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.path-item {
  position: relative;
  padding-left: var(--sp-7);
}
.path-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ochre);
}
.path-item::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: calc(-1 * var(--sp-5) + 2px);
  width: 1px;
  background: var(--line);
}
.path-item:last-child::after { display: none; }
.path-item b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.path-item span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text3);
  letter-spacing: var(--ls-wide);
}


/* ===
   09  ATOMS */

/* ---- 标签 ---- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  line-height: 1.6;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.tag--ochre    { color: var(--ochre-deep); background: var(--ochre-wash); }
.tag--cinnabar { color: var(--cinnabar); background: var(--cinnabar-wash); }
.tag--ink      { color: var(--ink-soft); background: rgba(43, 38, 32, .07); }
.tag--line     { color: var(--text2); background: transparent; border: 1px solid var(--line); }
/* 招生中：左侧一个实心点 */
.tag--live { color: var(--cinnabar); background: var(--cinnabar-wash); }
.tag--live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cinnabar);
  flex: 0 0 5px;
}

/* ---- 彩色圆底图标 ---- */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
}
.ico svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--ochre    { background: var(--ochre-wash); }
.ico--ochre svg    { stroke: var(--ochre); }
.ico--ink      { background: rgba(43, 38, 32, .09); }
.ico--ink svg      { stroke: var(--ink); }
.ico--cinnabar { background: var(--cinnabar-wash); }
.ico--cinnabar svg { stroke: var(--cinnabar); }
.ico--sand     { background: var(--sand); }
.ico--sand svg     { stroke: var(--ochre-deep); }

.ico--sm { width: 34px; height: 34px; flex-basis: 34px; }
.ico--sm svg { width: 16px; height: 16px; }

.ico--lg { width: 56px; height: 56px; flex-basis: 56px; }
.ico--lg svg { width: 26px; height: 26px; }

/* 方底图标（用于卡片角落） */
.ico--square { border-radius: var(--r-md); }

/* ---- 印章 ---- */
.seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  border-radius: var(--r-sm);
  background: var(--cinnabar);
  transform: rotate(-5deg);
  box-shadow: 0 6px 16px rgba(120, 30, 18, .26), inset 0 0 0 1px rgba(255, 252, 245, .14);
  position: relative;
}
.seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 4px;
  border: 2px solid rgba(250, 246, 237, .34);
}
.seal b {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  color: #FAF6ED;
  letter-spacing: .04em;
  writing-mode: vertical-rl;
  line-height: 1;
  text-indent: .04em;
}
.seal--sm { width: 62px; height: 62px; flex-basis: 62px; }
.seal--sm b { font-size: 19px; }
.seal--sm::before { inset: 5px; }

/* ---- 分隔线 ---- */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}
.rule--short { width: 40px; height: 2px; background: var(--ochre); border-radius: 1px; opacity: .75; }
.rule--space { margin-block: var(--sp-8); }

/* ---- 定义列表：地址 / 电话 / 时间 ---- */
.def-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.def-list > div { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-3); align-items: start; }
.def-list dt {
  font-size: var(--fs-xs);
  color: var(--text3);
  letter-spacing: var(--ls-wider);
  padding-top: 2px;
}
.def-list dd {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

/* ---- 待补标记：凡未确认内容都用它，上线前搜 "待补" 即可清点 ---- */
.todo-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--text3);
  background: rgba(168, 155, 130, .13);
  border: 1px dashed rgba(168, 155, 130, .5);
  border-radius: var(--r-xs);
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---- 要点列表（勾） ---- */
.ticks { display: flex; flex-direction: column; gap: var(--sp-3); }
.ticks li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}
.ticks li svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 4px;
  stroke: var(--ochre);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ticks li b { color: var(--ink); font-weight: 600; }
.ticks--tight { gap: var(--sp-2); }

/* ---- 带序号的要点（方法论的步骤） ---- */
.steps { display: flex; flex-direction: column; gap: var(--sp-5); }
.steps li { display: flex; gap: var(--sp-4); }
.steps li .n {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--sand);
  color: var(--ochre-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.steps li b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.steps li p {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text2);
}

/* ---- 一句提示（横带） ---- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ochre-wash);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--ochre-deep);
}
.notice svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; stroke: currentColor; stroke-width: 1.8; fill: none; }


/* ===
   10  FORMS */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field > label,
.field-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text2);
}
.field > label .req { color: var(--cinnabar); margin-left: 2px; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--text3); }

.input:hover,
.select:hover,
.textarea:hover { border-color: rgba(185, 110, 44, .4); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px var(--ochre-wash);
}

.textarea { min-height: 112px; resize: vertical; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6252' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}

.field-hint { font-size: var(--fs-2xs); color: var(--text3); line-height: var(--lh-snug); }

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--err); }
.field.is-invalid .field-hint { color: var(--err); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.form-grid .field--full { grid-column: 1 / -1; }


/* ===
   11  PATTERNS */

/* ---
   11.1 首页首屏
   结构：nav → hero（水墨横幅 + 文案 + 双 CTA）→ 三大承诺 → 继续滚动提示 */
.hero-home {
  position: relative;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  /* nav 是 sticky，hero 从导航下方开始，用负 margin 让横幅贴住导航 */
  margin-top: calc(-1 * var(--h-nav));
  padding-top: calc(var(--h-nav) + var(--sp-6));
}

/* 水墨横幅 */
.hero-banner {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(120, 84, 40, .09);
  background: var(--grad-paper);
  min-height: 460px;
}

/* CSS 墨韵兜底：图片没加载时也不是纯色块 */
.hero-banner::before {
  content: "";
  position: absolute;
  right: -6%;
  top: -18%;
  width: 62%;
  height: 120%;
  background: var(--ink-wash-a);
  pointer-events: none;
}
.hero-banner::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: -10%;
  width: 56%;
  height: 70%;
  background: var(--ink-wash-b);
  pointer-events: none;
}

.hero-banner-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 66%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: .92;
  /* 图片是低分辨率素材，用一点柔化避免锯齿 */
  filter: saturate(.9) contrast(.98);
}

/* 左侧宣纸蒙版：让文案落在干净的底色上 */
.hero-banner-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #FAF6ED 0%,
    rgba(250, 246, 237, .98) 26%,
    rgba(250, 246, 237, .8) 44%,
    rgba(250, 246, 237, .2) 64%,
    rgba(250, 246, 237, 0) 82%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 620px;
  padding: var(--sp-10) var(--sp-6) var(--sp-10) var(--sp-10);
}

.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 15px 7px 12px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--ochre-deep);
  background: rgba(246, 234, 211, .94);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.loc-chip svg { width: 13px; height: 13px; flex: 0 0 13px; stroke: var(--ochre); stroke-width: 1.8; fill: none; }

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 1.34;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  margin-top: var(--sp-6);
}
.hero-title i {
  font-style: normal;
  color: var(--text3);
  font-weight: 400;
  font-size: .58em;
  vertical-align: .14em;
  padding: 0 .1em;
  opacity: .8;
}

.hero-lead {
  margin-top: var(--sp-5);
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text2);
}
.hero-lead em { color: var(--ink); font-weight: 500; }

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-7);
}

/* 印章：压在横幅右下 */
.hero-seal {
  position: absolute;
  right: var(--sp-9);
  bottom: var(--sp-10);
  z-index: 2;
}

/* 横幅下沿的"正在招生"条 */
.hero-course {
  position: absolute;
  left: var(--sp-9);
  right: calc(var(--sp-9) + 110px);
  bottom: var(--sp-6);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 253, 248, .93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(120, 84, 40, .1);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.hero-course:hover {
  border-color: rgba(185, 110, 44, .45);
  box-shadow: 0 6px 20px rgba(120, 84, 40, .14);
}
.hero-course .hc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-course .hc-txt b {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--ls-wide);
  line-height: 1.55;
}
.hero-course .hc-txt span {
  font-size: 11.5px;
  color: var(--text3);
  letter-spacing: var(--ls-wide);
  line-height: 1.5;
}
.hero-course .hc-go {
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-course .hc-go svg { width: 13px; height: 13px; stroke: var(--ochre-deep); stroke-width: 2; fill: none; }

/* 三大承诺 */
.promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.promise {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
}
.promise-txt b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  line-height: 1.4;
}
.promise-txt span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  color: var(--text3);
  letter-spacing: var(--ls-wide);
  line-height: 1.5;
}

/* 继续滚动提示 */
.scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-block: var(--sp-2);
}
.scroll-hint .bar {
  position: relative;
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(185, 110, 44, .04), rgba(185, 110, 44, .48));
  overflow: hidden;
}
.scroll-hint .bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 2px;
  background: var(--ochre);
  animation: hint-drop 2.4s var(--ease-in-out) infinite;
}
@keyframes hint-drop {
  0%   { top: -8px; opacity: 0; }
  35%  { opacity: .9; }
  100% { top: 26px; opacity: 0; }
}
.scroll-hint span {
  font-size: var(--fs-2xs);
  color: var(--text3);
  letter-spacing: var(--ls-wider);
}

/* ---
   11.2 内页首屏（courses / about / teachers / news / contact 复用） */
.page-hero {
  margin-top: calc(-1 * var(--h-nav));
  padding-top: calc(var(--h-nav) + var(--sp-11));
  padding-bottom: var(--sp-10);
  background: linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero h1 { margin-top: var(--sp-4); }
.page-hero .page-lead {
  margin-top: var(--sp-5);
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text2);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text3);
  letter-spacing: var(--ls-wide);
}
.breadcrumb a:hover { color: var(--ochre-deep); }
.breadcrumb svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; opacity: .6; }

/* ---
   11.3 地图示意图（纯 CSS，不引任何第三方地图脚本） */
.map-sketch {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    /* 街区网格 */
    repeating-linear-gradient(0deg, rgba(231, 220, 195, .55) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(231, 220, 195, .55) 0 1px, transparent 1px 42px),
    var(--paper-deep);
}
/* 主干道 */
.map-sketch::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: 54%;
  height: 14px;
  background: rgba(255, 253, 248, .92);
  border-block: 1px solid var(--line);
  transform: rotate(-4deg);
}
.map-sketch::after {
  content: "";
  position: absolute;
  top: -5%;
  bottom: -5%;
  left: 62%;
  width: 12px;
  background: rgba(255, 253, 248, .92);
  border-inline: 1px solid var(--line);
  transform: rotate(3deg);
}
/* 路名 */
.map-label {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  color: var(--text3);
  background: rgba(250, 246, 237, .86);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}
.map-label--east { left: 63.5%; top: 22%; transform: rotate(90deg); transform-origin: left top; }
.map-label--south { left: 12%; top: 60%; transform: rotate(-4deg); }

/* 位置钉 */
.map-pin {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.map-pin .pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cinnabar);
  border: 3px solid var(--card);
  box-shadow: 0 2px 8px rgba(179, 64, 42, .4);
}
.map-pin .pin-halo {
  position: absolute;
  top: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cinnabar);
  opacity: .22;
  animation: pin-pulse 3s var(--ease-in-out) infinite;
}
@keyframes pin-pulse {
  0%, 100% { transform: scale(1); opacity: .22; }
  50%      { transform: scale(2.1); opacity: 0; }
}
.map-pin .pin-tip {
  margin-top: var(--sp-2);
  padding: 5px 11px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-card);
  white-space: nowrap;
}

/* ---
   11.4 收尾 CTA 带 */
.cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-9) var(--sp-10);
  background: var(--grad-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}
.cta-band::before {
  content: "";
  position: absolute;
  right: -4%;
  top: -60%;
  width: 46%;
  height: 220%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(94, 84, 66, .13), rgba(94, 84, 66, 0) 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: var(--fs-h3); }
.cta-band p {
  margin-top: var(--sp-3);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}
.cta-band .cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }

/* ---
   11.5 业务线横带（六大业务） */
.biz-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
}
.biz-strip .biz-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.biz-strip .biz-head b {
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  color: var(--ink);
}
.biz-strip .biz-head span { font-size: var(--fs-2xs); color: var(--text3); letter-spacing: var(--ls-wide); }
.biz-item { display: flex; gap: var(--sp-2); align-items: flex-start; }
.biz-item i {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: 8px;
  background: var(--ochre);
  opacity: .75;
}
.biz-item:nth-child(3n) i { background: var(--cinnabar); }
.biz-item:nth-child(4n) i { background: rgba(43, 38, 32, .55); }
.biz-item span {
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--text2);
  letter-spacing: var(--ls-normal);
}

/* ---
   11.6 差异化 2×2 块 */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.diff-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-7);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.diff-item:hover {
  border-color: rgba(185, 110, 44, .32);
  box-shadow: var(--sh-card);
}
.diff-item h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
}
.diff-item p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}
.diff-item p + p { margin-top: var(--sp-3); }


/* ===
   12  FOOTER */
.site-footer {
  background: var(--ink);
  color: rgba(239, 231, 214, .78);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-7);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(239, 231, 214, .14);
}

.footer-brand .brand { margin-bottom: var(--sp-4); }
.footer-brand .brand-text b { color: #F3E7CC; }
.footer-brand .brand-text i { color: rgba(239, 231, 214, .5); }
.footer-brand .footer-motto {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  color: rgba(239, 231, 214, .68);
  margin-bottom: var(--sp-4);
}
.footer-brand p {
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: rgba(239, 231, 214, .5);
  max-width: 30em;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  color: rgba(239, 231, 214, .45);
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a {
  font-size: var(--fs-xs);
  color: rgba(239, 231, 214, .78);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: #F3E7CC; }

.footer-col address { font-style: normal; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col address span { display: flex; gap: var(--sp-2); align-items: flex-start; }
.footer-col address svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 4px;
  stroke: rgba(239, 231, 214, .42);
  stroke-width: 1.8;
  fill: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-6);
  font-size: var(--fs-2xs);
  color: rgba(239, 231, 214, .42);
  letter-spacing: var(--ls-wide);
}
.footer-bottom .legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; }
.footer-bottom a:hover { color: rgba(239, 231, 214, .8); }
/* 备案号位置：上线前把「待填」换成真实号码，并指向工信部备案系统 */
.footer-bottom .icp { display: inline-flex; align-items: center; gap: 6px; }


/* ===
   13  MOTION —— 滚动显现
   · 默认可见；只有 JS 正常运行时 <html> 才加 .js-reveal，此时未进入视口的元素才隐藏
   · 这样 JS 失效或爬虫渲染时内容依然完整可见 */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}


/* ===
   14  RESPONSIVE
   —— 基准 1440；依次收 1280 / 1024 / 768 / 480 */

/* ---- 1280：容器与字级小幅收水 ---- */
@media (max-width: 1280px) {
  :root {
    --fs-display: 42px;
    --fs-h1: 38px;
    --fs-h2: 31px;
    --fs-h3: 21px;
    --pad-gutter: 32px;
    --pad-section: var(--sp-11);
    --h-nav: 80px;
  }
  .hero-inner { padding: var(--sp-9) var(--sp-6) var(--sp-9) var(--sp-8); max-width: 560px; }
  .hero-banner { min-height: 430px; }
  .person { grid-template-columns: 210px 1fr; gap: var(--sp-8); }
  .biz-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 1024：导航开始收紧，栅格降列 ---- */
@media (max-width: 1024px) {
  :root {
    --fs-display: 38px;
    --fs-h1: 34px;
    --fs-h2: 29px;
    --gap-grid: var(--sp-5);
    --pad-card: var(--sp-6);
  }
  .nav-menu { gap: var(--sp-5); }
  .nav-menu a { font-size: var(--fs-xs); }
  .brand-text i { display: none; }

  .hero-banner { min-height: 400px; }
  .hero-banner-img { width: 74%; opacity: .85; }
  .hero-inner { max-width: 520px; }
  .hero-title { white-space: normal; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .diff-grid { gap: var(--sp-4); }
  .diff-item { padding: var(--sp-6); grid-template-columns: 44px 1fr; }
  .ico--lg { width: 44px; height: 44px; flex-basis: 44px; }
  .ico--lg svg { width: 21px; height: 21px; }
}

/* ---- 768：平板竖屏 / 手机横屏 —— 导航折叠为汉堡 ---- */
@media (max-width: 768px) {
  :root {
    --fs-display: 32px;
    --fs-h1: 30px;
    --fs-h2: 25px;
    --fs-h3: 19px;
    --fs-h4: 17px;
    --fs-lead: 16px;
    --fs-body: 15.5px;
    --pad-gutter: 24px;
    --pad-section: var(--sp-10);
    --h-nav: 64px;
    --gap-grid: var(--sp-4);
    --pad-card: var(--sp-5);
  }
  html { scroll-padding-top: 76px; }

  /* 导航 */
  .nav-inner { gap: var(--sp-4); }
  .nav-menu { display: none; }
  .nav-cta { display: none; }          /* 移动端 CTA 收进抽屉 */
  .nav-toggle { display: flex; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .brand-text b { font-size: 17px; }

  /* 首屏 */
  .hero-home { padding-top: calc(var(--h-nav) + var(--sp-4)); padding-bottom: var(--sp-4); }
  .hero-banner { min-height: 0; border-radius: var(--r-lg); }
  .hero-banner-img { width: 100%; opacity: .5; }
  .hero-banner-mask {
    background: linear-gradient(
      180deg,
      rgba(250, 246, 237, .94) 0%,
      rgba(250, 246, 237, .9) 52%,
      rgba(250, 246, 237, .96) 100%
    );
  }
  .hero-inner {
    max-width: none;
    padding: var(--sp-7) var(--sp-5) var(--sp-8);
  }
  .hero-title { margin-top: var(--sp-5); letter-spacing: .02em; }
  .hero-lead { margin-top: var(--sp-4); font-size: var(--fs-body); }
  .hero-cta { margin-top: var(--sp-6); gap: var(--sp-3); }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-seal { display: none; }
  /* 招生条改为静态块，落在文案下方 */
  .hero-course {
    position: static;
    margin-top: var(--sp-6);
    left: auto; right: auto; bottom: auto;
  }
  .promises { grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
  .promise { padding: var(--sp-3) var(--sp-4); }
  .scroll-hint { margin-top: var(--sp-5); }

  /* 布局 */
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: var(--sp-6); }
  .sec-head--row { align-items: flex-start; }
  .sec-sub { font-size: var(--fs-sm); }

  /* 卡片 */
  .line-card { padding: var(--sp-6) var(--sp-5); gap: var(--sp-3); }
  .news-item { grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) 0; }
  .news-item time { grid-column: 1 / -1; }
  .news-item:hover { padding-left: 0; }

  /* 人物 */
  .person { grid-template-columns: 1fr; gap: var(--sp-6); }
  .person-photo { max-width: 200px; aspect-ratio: 1 / 1; }

  /* 业务横带 */
  .biz-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); padding: var(--sp-4) var(--sp-5); }

  /* 收尾带 */
  .cta-band { padding: var(--sp-7) var(--sp-6); flex-direction: column; align-items: flex-start; }
  .cta-band .cta-actions { width: 100%; }
  .cta-band .cta-actions .btn { flex: 1 1 auto; }

  /* 内页首屏 */
  .page-hero { padding-top: calc(var(--h-nav) + var(--sp-8)); padding-bottom: var(--sp-7); }

  /* 表单 */
  .form-grid { grid-template-columns: 1fr; }

  /* 页脚 */
  .site-footer { padding-top: var(--sp-8); }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-7); padding-bottom: var(--sp-7); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- 480：小屏手机 ---- */
@media (max-width: 480px) {
  :root {
    --fs-display: 27px;
    --fs-h1: 26px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --pad-gutter: 18px;
    --pad-section: var(--sp-9);
    --sp-11: 56px;
    --sp-12: 64px;
  }

  .hero-title { letter-spacing: .01em; line-height: 1.4; }
  .hero-inner { padding: var(--sp-6) var(--sp-4) var(--sp-7); }
  .loc-chip { font-size: 11px; padding: 6px 12px 6px 10px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-course { padding: var(--sp-3); gap: var(--sp-2); }
  .hero-course .hc-txt b { font-size: var(--fs-2xs); }

  .btn--lg { padding: 14px 20px; font-size: var(--fs-sm); }
  .btn { padding: 11px 18px; }

  .diff-item { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5); }
  .card { padding: var(--sp-5); }
  .line-card { padding: var(--sp-5) var(--sp-4); }
  .biz-strip { grid-template-columns: 1fr; }
  .cta-band { padding: var(--sp-6) var(--sp-4); }
  .quote { padding-left: var(--sp-4); }
  .quote p { font-size: var(--fs-h4); }
  .seal { width: 68px; height: 68px; flex-basis: 68px; }
  .seal b { font-size: 21px; }
  .def-list > div { grid-template-columns: 64px 1fr; }
  .map-sketch { aspect-ratio: 4 / 3; }
}

/* ---- 超小屏兜底 ---- */
@media (max-width: 360px) {
  :root { --fs-display: 24px; --fs-h2: 20px; --pad-gutter: 16px; }
}


/* ===
   15  A11Y / UTIL */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-c2 { color: var(--text2); }
.text-c3 { color: var(--text3); }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mt-0 { margin-top: 0; }

/* 栅格顶对齐（默认 stretch，人物 + 地图这类混排要 top） */
.grid--top { align-items: start; }

/* 区块下方的脚注小字：坐标、备案、待补说明等 */
.foot-note {
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--text3);
  letter-spacing: var(--ls-wide);
}

/* SVG 图标精灵容器：不占布局，但仍留在 DOM 里供 <use> 引用 */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 尊重系统的减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* 显现类元素一律直接可见，不做位移动画 */
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .scroll-hint .bar::after { display: none; }
  .map-pin .pin-halo { display: none; }
}

/* 高对比度模式下保证边框可见 */
@media (forced-colors: active) {
  .card,
  .line-card,
  .course-card,
  .promise,
  .diff-item { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
}


/* ===
   16  PRINT —— 只保留内容，去掉导航、装饰、阴影 */
@media print {
  @page { margin: 16mm; }

  :root {
    --paper: #fff; --card: #fff; --ink: #000;
    --text2: #333; --text3: #555; --line: #bbb;
  }

  html { scroll-padding-top: 0; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.6; }

  .site-nav, .nav-drawer, .nav-toggle, .scroll-hint, .site-footer,
  .skip-link, .cta-band .cta-actions, .hero-course .hc-go,
  .hero-banner-img, .hero-banner-mask, .map-pin .pin-halo { display: none !important; }

  .hero-home, .page-hero { margin-top: 0; padding-top: 0; background: none; }
  .section, .section--tight, .section--loose { padding-block: 14pt; }

  .hero-banner, .course-card, .line-card, .featured-course, .card,
  .promise, .diff-item, .cta-band, .map-sketch {
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
  }
  .hero-banner::before, .hero-banner::after,
  .featured-course .fc-aside::before, .featured-course .fc-aside::after,
  .course-card .cc-top::before, .course-card .cc-top::after { display: none !important; }
  .hero-inner { padding: 0; max-width: none; }

  /* 深色区块反白改成白底黑字 */
  .section--ink, .site-footer { background: #fff !important; color: #000 !important; }
  .section--ink h2, .section--ink h3, .section--ink h4 { color: #000 !important; }

  /* 印章降为描边 */
  .seal { background: #fff !important; border: 2px solid #000; }
  .seal b { color: #000 !important; }
  .seal::before { border-color: rgba(0, 0, 0, .3); }

  /* 避免卡片被截断 */
  .card, .line-card, .course-card, .featured-course, .diff-item,
  .person, .news-item { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* 链接补出可读信息 */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="#"]::after, a[href^="tel"]::after, a[href^="mailto"]::after { content: ""; }

  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}


/* ===
   17  CONTACT PAGE —— 联系我们 / 预约诊断
   图标尺度约定（本页统一）：
     · 列表旁线标：16×16
     · 圆底小图标：圆 32 / 图 15
     · 按钮内箭头：沿用全局 .btn svg（15）/ .btn--lg svg（16）
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-8);
  align-items: start;
}

.contact-card,
.side-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-7);
}

/* 卡片内标题不要用全站 h2（34px），收成卡片标题尺度 */
.contact-card > h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: .03em;
  font-weight: 600;
}

.side-card > h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: .03em;
  font-weight: 600;
}

.contact-card .card-lead {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-6);
  color: var(--text2);
  line-height: var(--lh-loose);
  max-width: 48ch;
  font-size: var(--fs-sm);
}

.diag-steps {
  display: grid;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-7);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.diag-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.diag-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ochre-deep);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.diag-steps strong {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
  font-size: var(--fs-sm);
}

.diag-steps span {
  color: var(--text2);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.form-note {
  font-size: var(--fs-2xs);
  color: var(--text3);
  line-height: var(--lh-snug);
}

.notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--sand);
  color: var(--ochre-deep);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.notice--ok {
  background: #F3F8EE;
  color: #3F6B2C;
  border-color: #D5E6C5;
}

.notice--err {
  background: #FBF0EC;
  color: var(--cinnabar);
  border-color: #F0D2C7;
}

.form-success {
  display: none;
  text-align: left;
}

.form-success.is-visible { display: block; }
.contact-form.is-hidden { display: none; }

.form-success h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  letter-spacing: .03em;
  margin-bottom: var(--sp-3);
}

.form-success p {
  color: var(--text2);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

.contact-ways {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

.contact-way {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
}

.contact-way .btn { margin-left: auto; }

.icon-bubble {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--sand);
  color: var(--ochre-deep);
  flex: 0 0 32px;
}

.icon-bubble svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  display: block;
}

.contact-way b {
  display: block;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.contact-way span,
.contact-way a {
  color: var(--text2);
  font-size: var(--fs-sm);
}

.side-card + .side-card { margin-top: var(--sp-5); }

.side-card .meta-list {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.side-card .meta-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-3);
  align-items: start;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.side-card .meta-list svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  stroke: var(--ochre);
  stroke-width: 1.8;
  fill: none;
  display: block;
}

.promise-mini {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.promise-mini .item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line-soft);
}

.promise-mini .item b {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
  font-size: var(--fs-sm);
}

.promise-mini .item span {
  color: var(--text2);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}

.qr-block {
  display: flex;
  gap: var(--sp-5);
  align-items: stretch;
  margin: var(--sp-5) 0;
  flex-wrap: wrap;
}

.qr-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
  box-shadow: var(--shadow-card);
}

.qr-img--sm {
  width: 120px;
  height: 120px;
  padding: 6px;
}

.qr-side {
  margin-top: 10px;
  display: grid;
  gap: 10px;
  justify-items: start;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .qr-block { flex-direction: column; align-items: flex-start; }
  .contact-card,
  .side-card { padding: var(--sp-5); }
}

.notice--spaced { margin-bottom: var(--sp-5); }
.form-note--map { margin-top: var(--sp-4); }
.contact-ways--inline { margin: 0; flex: 1; min-width: 220px; }
.page-hero .eyebrow { margin-bottom: 0; }
.page-hero h1 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.28;
  max-width: 16em;
}


/* ===
   18  INNER PAGES extras */

.split-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--sp-8);
  align-items: start;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
}
.card.pad { padding: var(--pad-card); }
.card.pad h3 { margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.card.pad p { color: var(--text2); font-size: var(--fs-sm); line-height: var(--lh-body); }
.card.pad .meta { color: var(--text3); font-size: var(--fs-2xs); margin-bottom: var(--sp-2); }

.prose {
  color: var(--text2);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  max-width: 62ch;
  margin-top: var(--sp-4);
}
.prose + .prose { margin-top: var(--sp-4); }

.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.biz-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.biz-card b {
  display: block;
  color: var(--ochre);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  margin-bottom: var(--sp-3);
}
.biz-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}
.biz-card p {
  color: var(--text2);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.line-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.line-detail .lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  color: var(--ink);
}
.line-detail h2 { margin-top: var(--sp-4); }

.step-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.step-cards li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.step-cards b { display:block; color: var(--ink); margin-bottom: 2px; }
.step-cards span { color: var(--text2); font-size: var(--fs-sm); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--sp-4);
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--ink);
  letter-spacing: .02em;
}
.stat span { color: var(--text3); font-size: var(--fs-xs); }

.narrow { max-width: 820px; }
.news-list--page { gap: var(--sp-5); display: grid; }
.news-item--static {
  display: grid;
  /* ⚠️ 必须显式重写列模板：.news-item 是「日期 / 标题 / 栏目」三列，
     这里是四块内容（日期 / 标题 / 栏目 / 摘要），沿用三列会把摘要挤进 108px 的第一列。
     用 grid-areas 排成「日期…栏目 / 标题 / 摘要」三行。 */
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "date  tag"
    "title title"
    "body  body";
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
}
.news-item--static time { grid-area: date; }
.news-item--static .news-tag { grid-area: tag; justify-self: end; }
.news-item--static h2 { grid-area: title; }
.news-item--static h2 {
  font-size: var(--fs-h4);
  line-height: 1.45;
}
.news-item--static p {
  grid-area: body;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.teacher-slot .person-photo {
  width: 100%;
  max-width: none;
  margin-bottom: var(--sp-4);
  aspect-ratio: 4 / 3;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.gallery-item {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.gallery-item--wide { grid-column: 1 / -1; }
.gallery-item--wide img { aspect-ratio: 21 / 9; }
.gallery-item figcaption {
  padding: 10px 14px 14px;
  font-size: var(--fs-2xs);
  color: var(--text3);
}
.pending-frame {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--text3);
  background:
    repeating-linear-gradient(-45deg, rgba(231,220,195,.45) 0 1px, transparent 1px 10px),
    var(--paper-deep);
}
.pending-frame svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.5; fill: none; opacity: .7; }
.pending-frame span { font-size: var(--fs-2xs); letter-spacing: .08em; }

.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

@media (max-width: 1024px) {
  .biz-grid, .grid-3, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item--wide { grid-column: span 2; }
}
@media (max-width: 768px) {
  .split-2, .line-detail { grid-template-columns: 1fr; }
  .biz-grid, .grid-3, .gallery-grid, .stat-row { grid-template-columns: 1fr; }
  .gallery-item--wide { grid-column: auto; }
}

.featured-course .fc-aside img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.featured-course .fc-aside.has-img::before,
.featured-course .fc-aside.has-img::after { opacity: .18; }

.footer-brand .brand-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  background: rgba(255,253,248,.96);
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
}

/* ==========================================================================
   19 · 后台内容渲染的补充样式（render.js 用）
   —— 师资可能不止一位，区块之间要留出间距
   —— 空区块靠 hidden 收起来，别留一条空白带
   ========================================================================== */
.person + .person { margin-top: var(--sp-9); }

[data-course-extra][hidden],
section[hidden] { display: none !important; }

/* 后台新加课程用的「适合 / 周期」小字 */
.line-detail .meta + .meta { margin-top: 2px; }

@media (max-width: 768px) {
  .person + .person { margin-top: var(--sp-7); }
}