/* ============================================================================
   css/home.css — 新首页预览版样式（第 4 阶段设计升级）
   ----------------------------------------------------------------------------
   设计系统来源（不是凭感觉挑颜色）：
     主色 #813A89 等六个色值是从**学校自己的 logo.png 逐像素采样**得到的
     （非白非透明像素 22,912 个，按占比排序）。中文官网首页的主视觉也正是
     用这组紫作为底色，与采样结果一致。
     字体只用站点**已经加载**的三族（Noto Serif SC / Noto Sans SC /
     Playfair Display），不新增任何外部字体请求。

   隔离约定：所有规则都挂在 .hp- 命名空间下，本文件也只在 home-preview.html
   被引用，因此不会污染体育页、校历页或后台。

   刻意避免的 AI 模板特征（逐条对照）：
     · 不把每个模块都做成白色圆角卡片 → 数据带是整幅色场、能力是编辑式行列表、
       家长入口是无框链接行
     · 不使用紫粉渐变背景 → 紫色是**来自 logo 的平涂实色**
     · 不给每个标题加装饰性英文小标签 → 只在确属中英双语的场合保留英文
     · 不做"每块滚动进来都淡入上浮" → 动效只放在两个刻意安排的位置
     · 不用 Emoji 当图标 → 统一换成手写的单族描边 SVG（见 home-preview.js）
     · 不用大数字装饰代替内容 → 数据带每个数字都带真实来源说明
   ============================================================================ */

:root {
    /* ══════════════════════ 色彩 ══════════════════════
       方向：Luxury Editorial × Nature × Early Childhood。
       以暖白、浅石、墨为主，全站只用一个强调色（品牌紫），
       不靠高饱和色块堆品牌感 —— 这是参考模板最值得借鉴的一点：
       它整站只有墨褐 + 暖白 + 浅石三种底色，强调色几乎为零。 */
    --hp-ink: #2A1430;
    /* 墨：标题与深色模块 */
    --hp-ink-soft: #4A2E50;
    /* 正文 */
    --hp-muted: #6F5A74;
    /* 辅助文字（暖白底上 4.97:1） */
    --hp-faint: #715C78;
    /* 更淡的注脚（5.13:1，已按对比度下限调过） */
    --hp-cream: #FAF5FB;
    /* 暖白：页面前景底色 */
    --hp-stone: #EEE3F1;
    /* 浅石：交替模块底色 */
    --hp-forest: #4A2450;
    /* 深森林绿：用于深色收束模块 */
    --hp-line: #E3D6E8;
    --hp-line-soft: #EDE2F0;

    /* 品牌色：从 logo 采样，**只作强调**，不铺大面积 */
    --hp-plum: #813A89;
    --hp-plum-deep: #5E2864;
    --hp-teal: #813A89;
    --hp-teal-ink: #6E3A78;
    /* 小字可用的青（4.5:1） */
    --hp-gold: #BF9A3E;
    /* 降饱和的金，只作细分隔与徽标描边 */
    --hp-red: #DA393C;
    --hp-leaf: #96C03F;
    --hp-sky: #58B8E2;

    /* 兼容既有变量名 */
    --hp-bg: var(--hp-cream);
    --hp-bg-alt: var(--hp-stone);

    /* ══════════════════════ 字体 ══════════════════════
       展示：Cormorant（高对比优雅衬线，参考模板同款思路）→ 中文回落 Noto Serif SC
       正文：Outfit（干净几何无衬线）→ 中文回落 Noto Sans SC
       实测中英混排时西文用 Cormorant/Outfit，汉字自动落到 Noto 对应字族。 */
    --hp-display: 'Cormorant', 'Noto Serif SC', Georgia, serif;
    --hp-serif: 'Noto Serif SC', 'Songti SC', 'Cormorant', Georgia, serif;
    --hp-sans: 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ══════════════════════ 字体阶梯（6 级） ══════════════════════ */
    --hp-fs-micro: 12px;
    --hp-fs-small: 14px;
    --hp-fs-body: 16px;
    --hp-fs-lead: 19px;
    --hp-fs-h3: 23px;
    --hp-fs-h2: clamp(30px, 3.4vw, 46px);

    /* ══════════════════════ 版面尺度 ══════════════════════ */
    --hp-max: 1240px;
    --hp-narrow: 720px;
    --hp-gutter: 40px;
    --hp-sect: 104px;
    --hp-sect-roomy: calc(var(--hp-sect) * 1.42);
    --hp-sect-tight: calc(var(--hp-sect) * .78);

    /* 圆角：图片接近直角，只有胶囊是圆的 —— 与参考一致 */
    --hp-r-photo: 2px;
    --hp-r-block: 3px;
    --hp-r-pill: 999px;

    --hp-ray-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 12 L12 1.5'/%3E%3Cpath d='M12 12 L21 6.8'/%3E%3Cpath d='M12 12 L21 17.2'/%3E%3Cpath d='M12 12 L12 22.5'/%3E%3Cpath d='M12 12 L3 17.2'/%3E%3Cpath d='M12 12 L3 6.8'/%3E%3C/g%3E%3C/svg%3E");
}


/* 只在首页生效 */
html.hp-root {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

.hp-body {
    margin: 0;
    padding: 0;
    background: var(--hp-bg);
    color: var(--hp-ink);
    font-family: var(--hp-sans);
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.hp-body *,
.hp-body *::before,
.hp-body *::after {
    box-sizing: border-box;
}

.hp-wrap {
    width: 100%;
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
}

.hp-wrap--narrow {
    max-width: var(--hp-narrow);
}

/* ── 键盘可达的跳转链接 ── */
.hp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10002;
    background: var(--hp-plum);
    color: #fff;
    padding: 12px 18px;
    text-decoration: none;
    font-weight: 700;
}

.hp-skip:focus {
    left: 0;
}

/* ── 锚点定位补偿 ──
   sticky 头部高度约 65px；不加这个偏移，点章节锚点或 scrollIntoView 时
   标题会被头部盖住（第一轮截图实测到）。 */
.hp-section,
.hp-hero,
.hp-stats,
.hp-feature {
    scroll-margin-top: 88px;
}

/* ── 全局可见焦点（无障碍硬性要求） ── */
.hp-body a:focus-visible,
.hp-body button:focus-visible {
    outline: 3px solid var(--hp-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── 待确认标记 ── */
.hp-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--hp-sans);
    font-size: var(--hp-fs-micro);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--hp-r-pill);
    background: #FDF6E7;
    color: #7A5410;
    border: 1px solid #E8CE96;
    white-space: nowrap;
    vertical-align: middle;
}

.hp-flag--inline {
    font-size: var(--hp-fs-micro);
    padding: 3px 7px;
}

.hp-pending {
    display: block;
    border-left: 2px solid var(--hp-gold);
    background: var(--hp-bg-alt);
    /* 原为暖米色 #F6EEF8 —— 与本设计系统"冷中性灰"的基调相冲，
       而且正是 frontend-design 点名的 AI 默认暖米底，已改为冷灰。 */
    padding: 16px 18px;
    color: #6B4E14;
    font-size: var(--hp-fs-body);
    line-height: 1.8;
}

.hp-pending__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--hp-serif);
    font-weight: 600;
    color: #7A5410;
    margin-bottom: 6px;
}

.hp-pending p {
    margin: 0 0 6px;
}


/* ══════════════════════ 英文模式：隐藏重复的第二行英文 ══════════════════════
   中文模式下这些是"中文主标 + 英文小字"的双语排印；英文模式下主标本身就是英文，
   这一行会变成同一句话出现两遍，因此按语言隐藏。 */
html[lang="en"] .hp-venue__cap-en,
html[lang="en"] .hp-stat__label-en,
html[lang="en"] .hp-stage__tag,
html[lang="en"] .hp-footer__name-en,
html[lang="en"] .hp-ability__domain--rail,
html[lang="en"] .hp-hero__title-en,
html[lang="en"] .hp-hero__video-slot {
    display: none;
}

/* 英文标题收一档并限宽：60px 的西文长句会折成更多行、整体更高，
   顶部因此落进主视觉更亮的区域（实测对比度掉到 2.68:1）。收小后行数更少、
   文字块更矮，整体下移进入遮罩更实的区间。 */
html[lang="en"] .hp-hero__title {
    font-size: clamp(28px, 4vw, 50px);
    max-width: 13em;
}

/* 英文模式换用西文衬线：Noto Serif SC 的拉丁字形偏中式，Playfair 更合英文标题 */
html[lang="en"] .hp-hero__title,
html[lang="en"] .hp-head__title,
html[lang="en"] .hp-about__lead,
html[lang="en"] .hp-feature__title,
html[lang="en"] .hp-stats__title,
html[lang="en"] .hp-stage__title,
html[lang="en"] .hp-ability__title,
html[lang="en"] .hp-news__title,
html[lang="en"] .hp-parent__title,
html[lang="en"] .hp-footer__h,
html[lang="en"] .hp-footer__name {
    font-family: var(--hp-display);
    letter-spacing: 0;
}

/* 页头 + 主导航样式已抽成共享组件：css/site-header.css（第 6 阶段导航统一）。
   首页、体育、校历、管理后台共用同一份实现，这里不再保留第二份。 */

/* ── 加载 / 失败状态 ── */
.hp-state {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 90px var(--hp-gutter);
    text-align: center;
    color: var(--hp-muted);
}

.hp-state__spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto 14px;
    border: 2px solid var(--hp-line);
    border-top-color: var(--hp-plum);
    border-radius: 50%;
    animation: hp-spin .9s linear infinite;
}

@keyframes hp-spin {
    to {
        transform: rotate(360deg);
    }
}

.hp-state--error .hp-state__spinner {
    display: none;
}

.hp-state__text {
    margin: 0;
}

.hp-state__detail {
    margin: 10px 0 0;
    font-size: 13px;
    color: #7A5410;
    word-break: break-all;
}

.hp-noscript {
    margin: 20px;
    padding: 16px 18px;
    border-left: 2px solid var(--hp-gold);
    background: var(--hp-bg-alt);
    color: #6B4E14;
}

/* ══════════════════════ 通用模块头 ══════════════════════ */
.hp-section {
    padding: var(--hp-sect) 0;
}

.hp-section--alt {
    background: var(--hp-bg-alt);
}

.hp-head {
    max-width: var(--hp-max);
    margin: 0 auto 52px;
    padding: 0 var(--hp-gutter);
}

/* 章节标记：取自 logo 的六射线星芒，仅作结构标记，不做装饰堆砌 */
.hp-head__title {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: .01em;
    color: var(--hp-ink);
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.hp-head__title::before {
    content: '';
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    background: currentColor;
    opacity: .9;
    -webkit-mask: var(--hp-ray-mask) center/contain no-repeat;
    mask: var(--hp-ray-mask) center/contain no-repeat;
    color: var(--hp-plum);
    transform: translateY(1px);
}

.hp-head__sub {
    margin: 16px 0 0;
    max-width: 60ch;
    color: var(--hp-muted);
    font-size: 17px;
    line-height: 1.85;
}

/* 六射线星芒遮罩（从 logo 的几何提炼，作为全站唯一的结构性图形母题） */
:root {
    --hp-ray-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 12 L12 1.5'/%3E%3Cpath d='M12 12 L21 6.8'/%3E%3Cpath d='M12 12 L21 17.2'/%3E%3Cpath d='M12 12 L12 22.5'/%3E%3Cpath d='M12 12 L3 17.2'/%3E%3Cpath d='M12 12 L3 6.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ══════════════════════ 1. 主视觉 ══════════════════════ */
.hp-hero {
    position: relative;
    min-height: clamp(540px, 76vh, 700px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--hp-plum-deep);
}

.hp-hero__media {
    position: absolute;
    inset: 0;
}

.hp-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 高度故意超过容器，让画幅下沿落到容器之外被裁掉。
       宣传片底部有烧录的中文字幕带（约占画面高度 8%）；只靠 object-fit:cover
       在宽幅主视觉里裁不干净，英文模式下这行中文字幕会明显露出来。
       做成 116% 高、顶部对齐后，字幕带整条被裁出画面。 */
    height: 116%;
    object-fit: cover;
    object-position: center 8%;
    display: block;
}

.hp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 品牌色场压在真实照片上：紫色取自 logo，与中文官网主视觉的做法一致 */
.hp-hero__scrim {
    position: absolute;
    inset: 0;
    /* 中性黑遮罩：只做"压暗保可读"，不给照片/视频上色。
       曾经用品牌紫压暗，结果整段视频都偏紫 —— 品牌感交给字体、星芒符号
       与金色主按钮，不要把滤镜加在真实画面上。 */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 22%, rgba(0, 0, 0, .58) 46%, rgba(0, 0, 0, .78) 74%, rgba(0, 0, 0, .90) 100%);
    /* 文字落位的 50–80% 区间需要更实一点：视频裁掉下沿后，这一带露出的是
       建筑与天空（偏亮），实测主标题最差只有 2.49:1。加深中段而不是整体压暗，
       画面顶部与右侧仍然保持原色原亮度。 */
}

.hp-hero__scrim2 {
    position: absolute;
    inset: 0;
    /* 只为左侧文字列补一点底，右侧完全留给画面本身 */
    background: linear-gradient(102deg, rgba(0, 0, 0, .40) 0%, rgba(0, 0, 0, 0) 58%);
}

.hp-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter) clamp(52px, 8vh, 92px);
    color: #fff;
}

.hp-hero__eyebrow {
    font-family: var(--hp-serif);
    font-size: 15px;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 20px;
}

.hp-hero__title {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: clamp(30px, 5vw, 60px);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: .01em;
    max-width: 17em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.hp-hero__title-en {
    display: block;
    width: 100%;
    margin-top: 16px;
    font-family: var(--hp-display);
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 700;
    font-style: italic;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .86);
    text-shadow: none;
}

.hp-hero__sub {
    margin: 20px 0 0;
    max-width: 46ch;
    font-size: clamp(15px, 1.4vw, 17.5px);
    line-height: 1.85;
    color: rgba(255, 255, 255, .9);
}

.hp-hero__actions {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hp-hero__video-slot {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .26);
    color: rgba(255, 255, 255, .92);
    font-size: var(--hp-fs-micro);
    line-height: 1.4;
    border-radius: var(--hp-r-pill);
    max-width: 100%;
    flex-wrap: nowrap;
    /* 这一条是有意为之：胶囊必须保持单行，否则窄容器会把中文竖排成一个方块 */
    white-space: nowrap;
}

.hp-hero__video-slot>svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 420px) {
    .hp-hero__video-slot {
        font-size: var(--hp-fs-micro);
        padding: 6px 12px;
    }
}

/* ── 按钮 ── */
.hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    min-height: 48px;
    /* 触摸目标 */
    font-family: var(--hp-sans);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--hp-r-pill);
    transition: background .18s, color .18s, border-color .18s;
    cursor: pointer;
}

.hp-btn__icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s;
}

.hp-btn:hover .hp-btn__icon {
    transform: translateX(3px);
}

.hp-btn--primary {
    background: var(--hp-gold);
    color: var(--hp-cream);
    border-color: var(--hp-gold);
}

.hp-btn--primary:hover {
    background: #F5B840;
    border-color: #F5B840;
}

.hp-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.hp-btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

.hp-btn--plum {
    background: var(--hp-plum);
    color: #fff;
    border-color: var(--hp-plum);
}

.hp-btn--plum:hover {
    background: var(--hp-plum-deep);
    border-color: var(--hp-plum-deep);
}

/* ══════════════════════ 2. 关于我们 ══════════════════════ */
.hp-about__grid {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(32px, 5vw, 74px);
    align-items: center;
}

.hp-about__media {
    position: relative;
}

.hp-about__img {
    width: 100%;
    display: block;
    border-radius: var(--hp-r-photo);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hp-about__credit {
    margin-top: 10px;
    font-size: var(--hp-fs-small);
    color: var(--hp-faint);
    display: flex;
    align-items: center;
    gap: 7px;
}

.hp-about__credit::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--hp-teal-ink);
    border-radius: 50%;
    flex: 0 0 auto;
}

.hp-about__lead {
    font-family: var(--hp-serif);
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 600;
    line-height: 1.72;
    color: var(--hp-ink);
    margin: 0 0 18px;
}

.hp-about__p {
    margin: 0 0 14px;
    color: var(--hp-ink-soft);
    max-width: 62ch;
}

.hp-about__pending {
    margin-top: 22px;
}

/* ══════════════════════ 3. 数据带（整幅色场，不是 4 张卡） ══════════════════════ */
.hp-stats {
    background: var(--hp-plum-deep);
    color: #fff;
    padding: 66px 0;
}

.hp-stats__inner {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
}

.hp-stats__title {
    margin: 0 0 34px;
    font-family: var(--hp-serif);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    color: #fff;
}

.hp-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.hp-stat {
    padding: 4px 30px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.hp-stat:first-child {
    border-left: 0;
    padding-left: 0;
}

.hp-stat__value {
    font-family: var(--hp-display);
    font-size: clamp(40px, 4.4vw, 56px);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.hp-stat__unit {
    font-family: var(--hp-sans);
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
}

.hp-stat__label {
    margin-top: 12px;
    font-size: var(--hp-fs-body);
    font-weight: 600;
    color: #fff;
}

.hp-stat__label-en {
    display: block;
    font-family: var(--hp-display);
    font-size: var(--hp-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    font-weight: 700;
    margin-top: 4px;
}

.hp-stat__source {
    margin-top: 12px;
    font-size: var(--hp-fs-micro);
    line-height: 1.65;
    color: rgba(255, 255, 255, .5);
}

/* ══════════════════════ 4. 教育阶段（大小有别，非 3 张同款卡） ══════════════════════ */
.hp-stages__grid {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.hp-stage {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.hp-stage__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--hp-r-photo);
    background: var(--hp-bg-alt);
    aspect-ratio: 4 / 3;
}

.hp-stages__grid .hp-stage:first-child .hp-stage__media {
    aspect-ratio: 16 / 11;
}

.hp-stage__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.hp-stage:hover .hp-stage__img {
    transform: scale(1.035);
}

.hp-stage__body {
    padding: 20px 0 0;
}

.hp-stage__tag {
    display: inline-block;
    font-family: var(--hp-display);
    font-size: var(--hp-fs-micro);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-plum);
    margin-bottom: 8px;
}

.hp-stage__title {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: var(--hp-fs-h3);
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-stages__grid .hp-stage:first-child .hp-stage__title {
    font-size: 26px;
}

.hp-stage__desc {
    margin: 9px 0 0;
    color: var(--hp-muted);
    font-size: var(--hp-fs-body);
    max-width: 46ch;
}

.hp-stage__meta {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--hp-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hp-stage__weeks {
    font-size: var(--hp-fs-small);
    font-weight: 600;
    color: var(--hp-teal-ink);
}

.hp-stage__more {
    font-size: var(--hp-fs-small);
    font-weight: 600;
    color: var(--hp-plum);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hp-stage__more svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-stages__note {
    max-width: var(--hp-max);
    margin: 30px auto 0;
    padding: 0 var(--hp-gutter);
}

/* ══════════════════════ 5. 四大能力（编辑式行列表，不是 4 张卡） ══════════════════════ */
.hp-abilities__list {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    border-top: 1px solid var(--hp-line);
}

.hp-ability {
    display: grid;
    grid-template-columns: 62px minmax(180px, 260px) minmax(0, 1fr) auto;
    gap: 26px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid var(--hp-line);
}

.hp-ability__mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--hp-line);
    color: var(--hp-plum);
    background: #fff;
}

.hp-ability__mark svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-ability__title {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: var(--hp-fs-h3);
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-ability__domain {
    display: block;
    margin-top: 5px;
    font-family: var(--hp-display);
    font-size: var(--hp-fs-micro);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hp-teal-ink);
}

.hp-ability__desc {
    margin: 0;
    color: var(--hp-ink-soft);
    font-size: var(--hp-fs-body);
    line-height: 1.85;
    max-width: 62ch;
    /* 右轨取走原先空着的那一列，正文行长仍受 62ch 约束 */
}

.hp-ability__domain--rail {
    display: block;
    margin: 4px 0 0;
    text-align: right;
    white-space: nowrap;
}

.hp-abilities__source {
    max-width: var(--hp-max);
    margin: 26px auto 0;
    padding: 0 var(--hp-gutter);
    font-size: var(--hp-fs-small);
    color: var(--hp-faint);
}

/* ══════════════════════ 6. 成长环境（编辑式图墙 + 节奏） ══════════════════════ */
.hp-campus__grid {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px 20px;
    align-items: start;
}

/* 三处主图用跨列建立主次（左上一块最大，右侧两块通栏），
   而不是给每张图都套同一种尺寸 —— 这是"图片叙事"与"图片排队"的区别 */
.hp-venue--lead {
    grid-column: span 2;
    grid-row: span 2;
}

.hp-venue--side {
    grid-column: span 2;
}

.hp-venue {
    margin: 0;
    text-decoration: none;
    color: inherit;
}

.hp-venue__media {
    overflow: hidden;
    border-radius: var(--hp-r-photo);
    background: var(--hp-bg-alt);
    aspect-ratio: 4 / 3;
}

.hp-venue--lead .hp-venue__media {
    aspect-ratio: 4 / 3;
}

.hp-venue--side .hp-venue__media {
    aspect-ratio: 16 / 9;
}

.hp-venue__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.hp-venue:hover .hp-venue__img {
    transform: scale(1.04);
}

/* 图注放在图下方（而不是 15 张都盖一层渐变遮罩） */
.hp-venue__cap {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.hp-venue__cap-en {
    font-family: var(--hp-display);
    font-size: var(--hp-fs-micro);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hp-faint);
    /* --hp-faint 已加深至 #75607B（4.87:1） */
}

.hp-venue--lead .hp-venue__cap,
.hp-venue--side .hp-venue__cap {
    font-family: var(--hp-serif);
    font-size: 18px;
}

/* ══════════════════════ 7. 校园生活（错落版式 + 占位位） ══════════════════════ */
.hp-life__grid {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.hp-life__item {
    margin: 0;
    min-width: 0;
    /* 1fr 的默认 min-width 是 auto，会被 nowrap 的长标签（如英文肖像标记）
       撑宽整列，导致手机端横向溢出。 */
}

.hp-campus__grid>* {
    min-width: 0;
}

.hp-life__item--wide {
    grid-column: span 2;
    grid-row: span 2;
    /* 头图跨 2 列 × 2 行：6 张图 = 2×2 + 5 = 9 格，3 列正好排满 3 行。
       原来只跨 2 列（7 格 / 3 列），最后一行会空出 2 格，看起来像"没内容"。 */
    display: flex;
    flex-direction: column;
}

.hp-life__media {
    overflow: hidden;
    border-radius: var(--hp-r-photo);
    background: var(--hp-bg-alt);
    aspect-ratio: 4 / 3;
}

.hp-life__item--wide .hp-life__media {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
}

.hp-life__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.hp-life__item:hover .hp-life__img {
    transform: scale(1.045);
}

.hp-life__cap {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-ink);
}

/* 整尺寸空占位框样式已移除：6 个 367×275 的空框纵向占 938px，
   是页面「一片空白」的主因，改为 .hp-pending 紧凑说明。 */

.hp-life__note {
    max-width: var(--hp-max);
    margin: 30px auto 0;
    padding: 0 var(--hp-gutter);
}

/* ══════════════════════ 8. 体育特色 ══════════════════════ */
.hp-feature {
    background: var(--hp-ink);
    color: #fff;
    padding: var(--hp-sect) 0;
}

.hp-feature__grid {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
}

.hp-feature__title {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: clamp(26px, 3.1vw, 38px);
    font-weight: 600;
    line-height: 1.36;
    color: #fff;
}

.hp-feature__p {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .8);
    font-size: 17px;
    line-height: 1.9;
    max-width: 52ch;
}

.hp-feature__actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hp-feature__media {
    overflow: hidden;
    border-radius: var(--hp-r-photo);
}

.hp-feature__img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ══════════════════════ 9. 新闻（克制的空状态） ══════════════════════ */
.hp-news__empty {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
    border-top: 1px solid var(--hp-line);
    padding-top: 34px;
}

.hp-news__icon {
    width: 34px;
    height: 34px;
    stroke: var(--hp-faint);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-news__title {
    margin: 0 0 10px;
    font-family: var(--hp-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--hp-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hp-news__body {
    margin: 0;
    max-width: 62ch;
    font-size: var(--hp-fs-body);
    line-height: 1.9;
    color: var(--hp-muted);
}

.hp-news__note {
    margin-top: 12px;
    font-size: var(--hp-fs-small);
    color: var(--hp-faint);
}

/* ══════════════════════ 10. 家长入口（无框链接行，不是 4 张卡） ══════════════════════ */
.hp-parents__list {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    border-top: 1px solid var(--hp-line);
}

.hp-parent {
    display: grid;
    grid-template-columns: 44px minmax(150px, 210px) 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--hp-line);
    text-decoration: none;
    color: inherit;
    transition: background .18s;
}

.hp-parent:hover,
.hp-parent:focus-visible {
    background: var(--hp-bg-alt);
}

.hp-parent__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--hp-line);
    color: var(--hp-plum);
    background: #fff;
}

.hp-parent__icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-parent__title {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: var(--hp-fs-lead);
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-parent__desc {
    margin: 0;
    font-size: var(--hp-fs-body);
    color: var(--hp-muted);
}

.hp-parent__action {
    font-size: var(--hp-fs-small);
    font-weight: 600;
    color: var(--hp-plum);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hp-parent__action svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s;
}

.hp-parent:hover .hp-parent__action svg {
    transform: translateX(3px);
}

.hp-parent--pending {
    cursor: default;
}

.hp-parent--pending:hover {
    background: transparent;
}

.hp-parent--pending .hp-parent__icon {
    color: #B8933F;
    border-style: dashed;
    border-color: #D9C79A;
}

.hp-parent--pending .hp-parent__action {
    color: #7A5410;
    /* 原 #9A7C3E 在白底上仅 3.94:1，改用与「待确认」徽标同一深琥珀 */
}

/* ══════════════════════ 页脚 ══════════════════════ */
.hp-footer {
    background: var(--hp-ink);
    color: rgba(255, 255, 255, .7);
    padding: 52px 0 22px;
    font-size: 14px;
}

.hp-footer__grid {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 46px;
}

/* 联系方式未确认时「联系我们」整列不渲染，栅格收成两列（不靠隐藏占位来凑三列） */
.hp-footer__grid--compact {
    grid-template-columns: 1.6fr 1fr;
}

.hp-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.hp-footer__logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--hp-r-block);
    padding: 5px;
}

.hp-footer__name {
    font-family: var(--hp-serif);
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
}

.hp-footer__name-en {
    display: block;
    font-family: var(--hp-display);
    font-size: var(--hp-fs-micro);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-weight: 700;
    margin-top: 2px;
}

.hp-footer__tagline {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .68);
    max-width: 40ch;
}

.hp-footer__h {
    font-family: var(--hp-serif);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 16px;
}

.hp-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hp-footer__list a {
    /* 改为 block 级 flex：整行可点。原先 inline-flex 只有文字宽（英文 Admin 仅 42.5px），
       既是过小的点按目标，hover 区域也显得零碎。 */
    display: flex;
    align-items: center;
    padding: 10px 0;
    min-height: 44px;
    min-width: 44px;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s, border-color .18s;
}

.hp-footer__list a:hover,
.hp-footer__list a:focus-visible {
    color: #fff;
    border-bottom-color: var(--hp-gold);
}

.hp-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.hp-footer__contact>div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hp-footer__contact span {
    display: block;
    font-size: var(--hp-fs-small);
    color: rgba(255, 255, 255, .45);
    margin-bottom: 2px;
}

.hp-footer__bottom {
    max-width: var(--hp-max);
    margin: 44px auto 0;
    padding: 20px var(--hp-gutter) 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: var(--hp-fs-small);
    color: rgba(255, 255, 255, .5);
}

/* ══════════════════════ 动效：只放在两个刻意安排的位置 ══════════════════════
   1) 主视觉入场（一次）
   2) 章节标题出现时轻微上移
   其余内容不做滚动淡入 —— 避免"每块都淡入上浮"的模板感。 */
.hp-hero__inner>* {
    opacity: 0;
    transform: translateY(16px);
    animation: hp-hero-in .85s cubic-bezier(.2, .7, .3, 1) forwards;
}

.hp-hero__inner>*:nth-child(1) {
    animation-delay: .05s;
}

.hp-hero__inner>*:nth-child(2) {
    animation-delay: .14s;
}

.hp-hero__inner>*:nth-child(3) {
    animation-delay: .23s;
}

.hp-hero__inner>*:nth-child(4) {
    animation-delay: .32s;
}

.hp-hero__inner>*:nth-child(5) {
    animation-delay: .41s;
}

@keyframes hp-hero-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.hp-head {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .65s ease, transform .65s ease;
}

.hp-head.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.hp-root {
        scroll-behavior: auto;
    }

    .hp-hero__inner>* {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hp-head {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hp-stage__img,
    .hp-venue__img,
    .hp-life__img,
    .hp-btn__icon,
    .hp-parent__action svg {
        transition: none;
    }
}

/* ══════════════════════ 第二轮：间距层级 ══════════════════════ */
/* 上一版 10 个章节一律 128px 上下留白，节奏完全一样。
   改成三档：开章宽松、常规、章内紧凑，并全部按 --hp-sect 缩放以适配移动端。 */
:root {
    --hp-sect-roomy: calc(var(--hp-sect) * 1.5);
    --hp-sect-tight: calc(var(--hp-sect) * .85);
}

/* 关于我们：紧跟主视觉，上留白略收，读起来像正文而不是新章 */
[data-module="about"] {
    padding-top: calc(var(--hp-sect) * 1.18);
    padding-bottom: var(--hp-sect);
}

/* 成长环境 / 校园生活：同一组"看见学校"的内容，用常规间距 */
[data-module="campus"],
[data-module="life"] {
    padding-top: var(--hp-sect);
    padding-bottom: var(--hp-sect);
}

/* 体育专章：开章用宽松间距形成章节感，章内后续模块收紧 */
[data-module="sports"] {
    padding-top: var(--hp-sect-roomy);
    padding-bottom: var(--hp-sect-tight);
}

[data-module="highlights"],
[data-module="stages"] {
    padding-top: var(--hp-sect-tight);
    padding-bottom: var(--hp-sect-tight);
}

[data-module="abilities"] {
    padding-top: var(--hp-sect-tight);
    padding-bottom: var(--hp-sect);
}

/* ══════════════════════ 第二轮：课程分组（纯排版卡）══════════════════════ */
/* 课程分组不是地点，不配场馆照片：去掉 3 处跨模块重复，也让体育场馆不再
   被当成"课程主题"的门面。改为以细线与字号建立层级的排版卡。 */
.hp-stages__grid--type {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 40px;
}

.hp-stage--type .hp-stage__body {
    padding: 22px 0 0;
    border-top: 1px solid var(--hp-line);
    transition: border-color .2s;
}

.hp-stage--type:hover .hp-stage__body {
    border-top-color: var(--hp-ink);
}

.hp-stage--type .hp-stage__title {
    font-size: var(--hp-fs-h3);
}

/* 首张卡在带图版本里是 26px 大标题；纯排版版本不需要这种不对称 */
.hp-stages__grid--type .hp-stage:first-child .hp-stage__title {
    font-size: var(--hp-fs-h3);
}

/* 儿童肖像授权已获批准，此前的降级与标注样式已移除。 */

/* ══════════════════════ 编辑式视觉升级（参考 Palmora 的结构逻辑） ══════════════════════
   借鉴的是：单一强调色 + 暖白/浅石交替底 + 摄影主导 + 标题压在下半部 +
   「胶囊 + 独立圆形箭头」的 CTA 组合 + 大留白。
   没有复用其代码、素材、品牌标识或页面结构。 */

/* ── 首屏：摄影主导 + 下半部压字 ── */
.hp-hero {
    /* 视频源只有 856×482：首屏越高，放大倍数越大、画面越糊。
       控制在 820px 以内把放大率压到约 1.7×，兼顾沉浸感与清晰度。 */
    min-height: clamp(600px, 88vh, 820px);
    /* 把首屏顶到页头底下，让透明页头真正压在画面上 */
    margin-top: calc(-1 * var(--hp-header-h, 68px));
    background: var(--hp-ink);
}

/* 参考模板顶部画面是暗的；我们的校园视频顶部偏亮，加一道只覆盖顶部 160px 的
   中性黑渐变，保证白色页头文字始终可读，同时不压暗画面主体。 */
.hp-hero__topshelter {
    position: absolute;
    inset: 0 0 auto 0;
    height: 170px;
    background: linear-gradient(180deg, rgba(12, 10, 8, .58) 0%, rgba(12, 10, 8, 0) 100%);
    pointer-events: none;
}

.hp-hero__scrim {
    background:
        linear-gradient(180deg, rgba(12, 10, 8, 0) 0%, rgba(12, 10, 8, .10) 34%, rgba(12, 10, 8, .54) 68%, rgba(12, 10, 8, .86) 100%);
}

.hp-hero__scrim2 {
    background: linear-gradient(96deg, rgba(12, 10, 8, .52) 0%, rgba(12, 10, 8, 0) 62%);
}

.hp-hero__inner {
    padding-bottom: clamp(46px, 6.5vh, 84px);
    padding-top: calc(var(--hp-header-h, 68px) + 40px);
}

.hp-hero__head {
    max-width: 16em;
}

.hp-hero__title {
    font-family: var(--hp-display);
    font-size: clamp(34px, 4.3vw, 60px);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -.005em;
    color: #fff;
    text-shadow: 0 2px 34px rgba(0, 0, 0, .45);
}

.hp-hero__title-en {
    margin-top: 18px;
    font-family: var(--hp-display);
    font-size: clamp(16px, 1.5vw, 21px);
    font-style: italic;
    font-weight: 400;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .84);
}

/* 底部一行：说明在左，入口在右（参考模板的构图） */
.hp-hero__foot {
    margin-top: clamp(34px, 5vh, 62px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}

.hp-hero__foot-l {
    max-width: 42ch;
}

.hp-hero__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

.hp-hero__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* 点按目标 ≥44px */
    margin-top: 4px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    padding-bottom: 2px;
    transition: border-color .2s, opacity .2s;
}

.hp-hero__link:hover {
    border-bottom-color: #fff;
}

.hp-hero__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* ── CTA：白胶囊 + 独立圆形箭头 ── */
.hp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 32px;
    border-radius: var(--hp-r-pill);
    background: #fff;
    color: var(--hp-ink);
    font-family: var(--hp-sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .22s ease, background .22s ease;
}

.hp-pill:hover {
    transform: translateY(-2px);
    background: var(--hp-cream);
}

.hp-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

.hp-circle__icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-circle:hover {
    background: #fff;
    color: var(--hp-ink);
    border-color: #fff;
    transform: translateY(-2px) translateX(2px);
}

/* ── 章节标题：更大的编辑式比例 + 小字眉标 ── */
.hp-head {
    max-width: var(--hp-max);
    margin: 0 auto clamp(34px, 4vw, 56px);
}

.hp-head__title {
    font-family: var(--hp-display);
    font-size: var(--hp-fs-h2);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.005em;
    color: var(--hp-ink);
}

.hp-head__title::before {
    width: 13px;
    height: 13px;
    opacity: .5;
}

.hp-head__sub {
    margin-top: 18px;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.8;
    color: var(--hp-muted);
}

/* ── 主体文字与按钮：跟随新字族 ── */
body {
    font-family: var(--hp-sans);
    background: var(--hp-cream);
    color: var(--hp-ink-soft);
}

.hp-btn {
    font-family: var(--hp-sans);
    font-size: 15px;
    letter-spacing: .01em;
}

.hp-btn--primary {
    background: var(--hp-ink);
    color: var(--hp-cream);
    border-color: var(--hp-ink);
}

.hp-btn--primary:hover {
    background: var(--hp-forest);
    border-color: var(--hp-forest);
}

.hp-btn--ghost {
    color: var(--hp-ink);
    border-color: var(--hp-line);
}

.hp-btn--ghost:hover {
    background: var(--hp-stone);
    border-color: var(--hp-ink-soft);
}

/* ── 数据带：从「巨大的数字色块」改为编辑式信息条 ── */
.hp-stats {
    background: var(--hp-stone);
    color: var(--hp-ink);
    padding: var(--hp-sect-tight) 0;
}

.hp-stats__title {
    font-family: var(--hp-display);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 500;
    color: var(--hp-ink);
}

.hp-stat {
    border-left: 1px solid var(--hp-line);
    padding: 2px 28px;
}

.hp-stat__value {
    font-family: var(--hp-display);
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 500;
    color: var(--hp-ink);
}

.hp-stat__unit {
    font-size: 15px;
    color: var(--hp-muted);
}

.hp-stat__label {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--hp-ink);
}

.hp-stat__label-en {
    color: var(--hp-faint);
}

.hp-stat__source {
    margin-top: 10px;
    color: var(--hp-faint);
    font-size: var(--hp-fs-micro);
    line-height: 1.6;
}

/* ── 深色模块：墨/森林绿取代原来的品牌紫大色块 ── */
.hp-feature {
    background: var(--hp-forest);
    color: var(--hp-cream);
}

.hp-feature__title {
    font-family: var(--hp-display);
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 500;
    color: #fff;
}

.hp-feature__p {
    color: rgba(250, 245, 251, .82);
}

/* ── 页脚：墨色 ── */
.hp-footer {
    background: var(--hp-ink);
    color: rgba(250, 245, 251, .72);
}

.hp-footer__name,
.hp-footer__h {
    color: var(--hp-cream);
    font-family: var(--hp-display);
    font-weight: 500;
}

.hp-footer__name {
    font-size: 20px;
}

/* ── 图注与卡片标题跟随展示字体 ── */
.hp-venue--lead .hp-venue__cap,
.hp-venue--side .hp-venue__cap {
    font-family: var(--hp-display);
    font-weight: 500;
}

.hp-about__lead {
    font-family: var(--hp-display);
    font-weight: 500;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.6;
}

.hp-stage__title,
.hp-ability__title,
.hp-news__title,
.hp-parent__title {
    font-family: var(--hp-display);
    font-weight: 500;
}


/* ── 标题排版修正 ──
   原样式把标题设为 display:flex（为让「待确认」标记与大标题并排），
   结果文字节点成了可无限压缩的 flex item，中文被压成很窄的一列、
   拆成 4–5 行。改为常规块级排版，标记用 inline-flex + 基线对齐参与同一行。 */
.hp-hero__title,
.hp-head__title {
    display: block;
    max-width: none;
}

.hp-hero__title .hp-flag,
.hp-head__title .hp-flag {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 12px;
    transform: translateY(-.06em);
}

.hp-hero__head {
    /* 注意：em 在这里是**容器自身**字号（16px），不是标题的 60px。
       原先写 13.5em 只得到 216px 宽，标题被压成竖排。改用绝对宽度。 */
    max-width: min(760px, 58vw);
}

.hp-head__title {
    max-width: 900px;
}

/* ══════════════════════ 响应式 ══════════════════════ */
/* ══════════════════════ 成长环境：主图必须撑满它跨的两行 ══════════════════════
   主图 .hp-venue--lead 跨 2 列 × 2 行，但左列只有它一张，而右列是两张竖叠的
   16:9 侧图 —— 侧图合计高度大于主图自身高度，网格 align-items:start 又不会拉伸，
   于是主图说明文字下方空出约 278px 的白。这里让主图铺满整个跨区，
   图片用 object-fit:cover 裁切填充，空白归零。仅在 4 列布局（>1100px）成立；
   更窄的断点主图只跨 1 行，不存在这个问题。 */
@media (min-width: 1101px) {
    .hp-venue--lead {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .hp-venue--lead .hp-venue__media {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }
}

@media (max-width: 1100px) {
    :root {
        --hp-sect: 54px;
    }

    .hp-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 0;
    }

    .hp-stat:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .hp-stages__grid {
        grid-template-columns: 1fr 1fr;
    }

    .hp-stages__grid .hp-stage:first-child {
        grid-column: span 2;
    }

    .hp-campus__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hp-venue--lead,
    .hp-venue--side {
        grid-column: span 3;
        grid-row: auto;
    }
}

@media (max-width: 900px) {
    :root {
        --hp-sect: 46px;
        --hp-gutter: 22px;
    }

    .hp-about__grid,
    .hp-feature__grid,
    .hp-campus__feature {
        grid-template-columns: 1fr;
    }

    .hp-about__media {
        order: -1;
    }

    .hp-stages__grid {
        grid-template-columns: 1fr;
    }

    .hp-stages__grid .hp-stage:first-child {
        grid-column: auto;
    }

    .hp-ability {
        grid-template-columns: 46px 1fr;
        gap: 16px 18px;
    }

    .hp-ability__domain--rail {
        display: none;
    }

    .hp-ability__desc {
        grid-column: 2;
    }

    .hp-parent {
        grid-template-columns: 42px 1fr;
        gap: 14px 16px;
        align-items: start;
    }

    .hp-parent__desc,
    .hp-parent__action {
        grid-column: 2;
    }

    .hp-life__grid {
        grid-template-columns: 1fr 1fr;
    }

    .hp-life__item--wide {
        grid-column: span 2;
        grid-row: auto;
    }

    /* 2 列布局下：头图占 2 列，末图也占 2 列，5 张普通图 + 这 2 个跨列
       = 2 + 2 + 4 = 8 格，正好 4 行排满，末行不留空洞。 */
    .hp-life__grid>.hp-life__item:last-child {
        grid-column: span 2;
    }

    .hp-campus__grid {
        grid-template-columns: 1fr 1fr;
    }

    .hp-venue--lead,
    .hp-venue--side {
        grid-column: span 2;
    }

    .hp-news__empty {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hp-footer__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

}

@media (max-width: 560px) {
    :root {
        --hp-gutter: 18px;
        --hp-sect: 40px;
    }

    /* 手机端微字号提一档：12px 在 390 宽屏上偏小（实测 33 处） */
    :root {
        --hp-fs-micro: 13px;
    }

    /* 数据带保持单列（4 个数字竖排更好读） */
    .hp-stats__grid {
        grid-template-columns: 1fr;
    }

    /* 图集改 2 列：原来全部 1 列堆叠，成长环境在手机上高达 5048px，
       占整页三分之一。2 列后约 1900px，一屏能看到更多校园。 */
    .hp-campus__grid,
    .hp-life__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* 主图/侧图仍占满整行，保持主次关系 */
    .hp-venue--lead,
    .hp-venue--side {
        grid-column: span 2;
        grid-row: auto;
    }

    /* 生活图集：头图与末图各占 2 列 → 6 张 = 2+1+1+1+1+2 = 8 格，正好 4 行排满 */
    .hp-life__item--wide,
    .hp-life__grid>.hp-life__item:last-child {
        grid-column: span 2;
        grid-row: auto;
    }

    /* 2 列时图注字号降一档并改为上下排，避免中英挤在一行 */
    .hp-campus__grid .hp-venue__cap {
        font-size: 14px;
        margin-top: 7px;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .hp-venue--lead .hp-venue__cap,
    .hp-venue--side .hp-venue__cap {
        font-size: 16px;
    }

    .hp-life__grid .hp-life__cap {
        font-size: 14px;
        margin-top: 7px;
    }

    .hp-stat {
        padding: 0;
        border-left: 0;
    }

    .hp-stat+.hp-stat {
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .hp-hero {
        min-height: 68vh;
    }

    .hp-hero__title {
        gap: 10px;
    }

    .hp-ability {
        grid-template-columns: 1fr;
    }

    .hp-ability__desc {
        grid-column: auto;
    }

    .hp-parent {
        grid-template-columns: 1fr;
    }

    .hp-parent__desc,
    .hp-parent__action {
        grid-column: auto;
    }

}