/* ============================================================
 *  岭南建筑数字探索 - 样式系统 (style.css)
 *  严格对应 HTML 页面呈现顺序 | 总行数: ~5545
 *
 *  项目结构：
 *    01首页与简介.html → intro + define + layout(含archInteractive)
 *    03 技术装饰.html   → gables + ornaments(三雕二塑)
 *    04 传承发展.html   → protection(含时间轴) + ending
 *
 *  章节索引（2026-05-01 重整）：
 *  ┌────┬──────────────────────────────────────────┬────────┐
 *  │ #  │ 模块名称                                │ 行号   │
 *  ├────┼──────────────────────────────────────────┼────────┤
 *  │ 01 │ 全局重置与基础(:root变量/reset)          │ L82    │
 *  │ 02 │ 封面预加载页面 #introOverlay             │ L138   │
 *  │ 03 │ 英雄区 .hero-section / GSAP隐藏态        │ L380   │
 *  │ 04 │ 导航栏 .nav-container                    │ L381   │
 *  │ 05 │ 主内容+GSAP滚动显现初始态                │ L535   │
 *  │ 06 │ 通用章节容器 .section                    │ L572   │
 *  │ 07 │ 浮动装饰/SVG分割线等通用组件             │ L748   │
 *  │ 08 │ 各章节头部 .section-header               │ L761   │
 *  │ 09 │ 基础简介定义 #define (数据卡片/气候动画) │ L816   │
 *  │ 10 │ 形制构造 #layout (平面图区域)            │ L1100+ │
 *  │ 11 │ 保护传承 #protection (挑战/成就卡片)     │ L1397  │
 *  │ 12 │ 地图分布 #map-distribution (ECharts容器) │ L1745  │
 *  │ 13 │ 风格特征项 .feature-item                 │ L1636  │
 *  │ 14 │ 式样构成 #gables (山墙横向滚动)         │ L2086  │
 *  │ 15 │ 屋脊装饰 .ridge-example                  │ L~2400 │
 *  │ 16 │ 展览馆-技艺纹饰 #ornaments              │ L2482  │
 *  │ 17 │ 三雕雕刻 .carving-gallery               │ L~2700 │
 *  │ 18 │ 符号图鉴 .symbol-gallery                │ L~2800 │
 *  │ 19 │ 总结结尾 #ending (引用/CTA)             │ L3039  │
 *  │ 20 │ 页脚 #siteFooter                         │ L3284  │
 *  │ 21 │ 页脚信息弹窗 #footerPopup                │ L3366  │
 *  │ 22 │ 建筑图形交互模块 archInteractive         │ L3564  │
 *  │ 23 │ 堆叠卡片网格 card-grid                   │ L4069  │
 *  │ 24 │ 卡片展开详情(原地展开)                   │ L4462  │
 *  │ 25 │ 04页面-时间轴 timeline                   │ L4790  │
 *  │ 26 │ 时间轴展开/收起模式                      │ L5231  │
 *  │ 27 │ 响应式设计 @media queries                │ L3470  │
 *  │ 28 │ 打印样式 @media print                    │ L3544  │
 *  └────┴──────────────────────────────────────────┴────────┘
 * ============================================================ */

        :root {
            /* 主色调 - 中国古典配色 */
            --bg-color: #ede4cc;
            --color-primary-light: #ede4cc;
            --color-primary-dark: #1A1814;
            --color-secondary: #6B5B4E;
            --color-cinnabar: #1A1814;
            /* 金色强调 */
            --color-gold: #ecdfb2;
            --color-earth: #8B7355;
            --color-ink: #2D2926;

            /* 功能色 */
            --color-gray-dark: #5A5A5A;

            --color-highlight: var(--color-cinnabar);

            --font-serif: 'Noto Serif SC', 'SimSun', 'STSong', serif;
            --font-sans: 'Noto Sans SC', 'PingFang SC', 'SimSun', sans-serif;
            --font-calligraphy: 'Huiwen-MinchoGBK', var(--font-serif);
            /* 徽文书法字体 - 大标题/导航/按钮 */

            --font-size-xs: 0.75rem;
            --font-size-sm: 0.875rem;
            --font-size-base: 1rem;
            --font-size-lg: 1.125rem;
            --font-size-xl: 1.25rem;
            --font-size-2xl: 1.5rem;
            --font-size-3xl: 1.875rem;
            --font-size-4xl: 2.25rem;
            --font-size-5xl: 3rem;

            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2rem;
            --spacing-xl: 3rem;
            --spacing-2xl: 4rem;
            --spacing-3xl: 6rem;

            --radius-sm: 2px;
            --radius-md: 4px;
            --radius-lg: 8px;
            --radius-full: 9999px;

            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.04);

            /* 古风纸质感专用变量 */
            --ink-light: rgba(26, 24, 20, 0.04);
            --ink-medium: rgba(26, 24, 20, 0.08);
            --cinnabar-fade: rgba(178, 58, 58, 0.12);
            --gold-fade: rgba(201, 162, 39, 0.10);
            --paper-light: #f5f0e6;
            --frame-thin: 1px solid rgba(139, 115, 85, 0.22);
            --shadow-wash: 0 2px 12px rgba(26, 24, 20, 0.05);
            --shadow-inset-paper: inset 0 0 30px rgba(139, 115, 85, 0.08);

            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
            --transition-smooth: 800ms cubic-bezier(0.65, 0, 0.35, 1);

            --max-width: 1200px;
            --header-height: 4rem;
            /* 页脚专用色 */
            --color-parchment: #f5f0e8;
        }

        /* ====== [第1章] 全局重置与基础 ====== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            /* 避免与 GSAP ScrollTo 的平滑滚动叠加导致“抽搐/抖动” */
            scroll-behavior: auto;
        }

        body {
            font-family: var(--font-serif);
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--color-primary-dark);
            background-color: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
            overflow-x: hidden;
            overflow-y: hidden;
            /* 封面页时隐藏滚动条 */
        }

        /* 全站统一底色（章节可能会覆盖自己的渐变底，这里提供基础兜底） */
        .main-content,
        .section {
            background-color: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
        }

        body.intro-complete {
            overflow-y: auto;
            /* 封面完成后恢复滚动 */
        }

        /* 跳转到主要内容（可访问性） */
        .skip-link {
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 10003;
            padding: 10px 12px;
            background: rgba(26, 24, 20, 0.92);
            color: #fff;
            text-decoration: none;
            border: 1px solid rgba(201, 162, 39, 0.45);
            transform: translateY(-160%);
            transition: transform var(--transition-base);
        }

        .skip-link:focus {
            transform: translateY(0);
            outline: none;
        }

        /* ====== [第2章] 封面预加载页面 - #introOverlay ====== */
        .intro-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
            overflow: hidden;
            background-color: #ede4cc;
        }

        .intro-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-lg);
        }

        /* 主标题 - 完全参考 test.html 样式 */
        .intro-title {
            position: relative;
            z-index: 10;
            margin-bottom: var(--spacing-3xl);
        }

        .intro-title .hero-title {
            font-size: clamp(2rem, 10vw, 5rem);
            letter-spacing: 1rem;
            font-weight: 300;
            line-height: 1.2;
            border-left: 2px solid var(--color-primary-dark);
            padding-left: 20px;
            color: var(--color-primary-dark);
            font-family: "Source Han Serif SC", "思源宋体", serif;
        }

        .intro-title .hero-subtitle {
            display: block;
            text-align: center;
            font-size: 0.875rem;
            letter-spacing: 0.2em;
            color: #5A5A5A;
            margin-top: var(--spacing-lg);
            opacity: 1 !important;
        }

        .hero-subtitle {
            font-size: var(--font-size-xl);
            letter-spacing: 0.3em;
            color: var(--color-secondary);
            margin-top: var(--spacing-sm);
            padding-left: 20px;
        }

        /* Loading 和按钮容器 - 统一位置 */
        .intro-action-area {
            position: relative;
            width: 200px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: var(--spacing-2xl);
        }

        /* Loading 指示器 - 显示在按钮位置 */
        .intro-loader {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .loader-ring {
            width: 2.5rem;
            height: 2.5rem;
            margin-bottom: 0.8rem;
            overflow: visible;
        }

        .loader-circle {
            fill: none;
            stroke: var(--color-primary-dark);
            stroke-width: 2;
            stroke-dasharray: 70;
            stroke-dashoffset: 70;
            transform-origin: center;
            animation: loader-rotate 1s ease-in-out infinite;
        }

        @keyframes loader-rotate {
            0% {
                transform: rotate(0deg);
                stroke-dashoffset: 70;
            }

            50% {
                transform: rotate(180deg);
                stroke-dashoffset: 0;
            }

            100% {
                transform: rotate(360deg);
                stroke-dashoffset: 70;
            }
        }

        .loader-text {

            font-size: var(--font-size-xs);
            color: var(--color-secondary);
            letter-spacing: 0.3em;
            font-weight: 500;
            opacity: 0.6;
        }

        /* ====== 统一按钮样式 ====== */
        .btn-primary,
        .intro-start-btn,
        .explore-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-xl);
            background: transparent;
            color: var(--color-primary-dark);
            border: 1.5px solid #8B7355;
            border-radius: var(--radius-full);
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-base);
            letter-spacing: 0.05em;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all var(--transition-smooth);
        }

        .btn-primary::before,
        .intro-start-btn::before,
        .explore-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: #6B5B4E;
            transition: width var(--transition-smooth);
            z-index: -1;
        }

        .btn-primary:hover,
        .intro-start-btn:hover,
        .explore-button:hover {
            color: white;
            border-color: transparent;
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(107, 91, 78, 0.3);
        }

        .btn-primary:hover::before,
        .intro-start-btn:hover::before,
        .explore-button:hover::before {
            width: 100%;
        }

        .btn-primary:hover .btn-arrow,
        .intro-start-btn:hover .btn-arrow,
        .explore-button:hover .btn-arrow,
        .explore-button:hover svg {
            transform: translateX(8px);
        }

        /* 开始按钮特殊定位 */
        .intro-start-btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 60px;
            opacity: 0;
            transform: scale(0.9);
        }

        .btn-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--transition-bounce);
        }

        .btn-shimmer {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: transparent;
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 100%;
            }
        }

        /* 底部提示 */
        .intro-footer {
            position: absolute;
            bottom: var(--spacing-2xl);
            left: 50%;
            transform: translateX(-50%);
        }

        .intro-hint {
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
            letter-spacing: 0.15em;
            opacity: 0.5;
        }

        /* 过渡遮罩 - 移除，使用缓动视差切换替代 */
        .intro-curtain {
            display: none;
        }

        /* 页面已加载完成后的隐藏状态 */
        .intro-overlay.hidden {
            display: none;
        }

        /* ====== [第4章] 导航栏 .nav-container ====== */
        .nav-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(178, 58, 58, 0.08);
            z-index: 1000;
            transition: transform 0.35s ease, opacity 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
            /* 封面页时隐藏 */
            opacity: 0;
            pointer-events: none;
            transform: translateY(-100%);
            will-change: transform;
            /* 强制创建新的堆叠上下文 */
        }

        /* 进入主页面后，导航栏滑入显示 */
        body.intro-complete .nav-container {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }

        /* 下滑时隐藏导航（提高优先级，确保覆盖 body.intro-complete） */
        body.intro-complete.nav-scrolling-down .nav-container {
            transform: translateY(-100%);
            box-shadow: none;
            background: rgba(250, 248, 245, 0);
            border-bottom-color: transparent;
        }

        .nav-content {
            max-width: var(--max-width);
            height: 100%;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            text-decoration: none;
            color: var(--color-ink);
            transition: color var(--transition-fast);
        }

        .logo:hover {
            color: var(--color-cinnabar);
        }

        .logo-svg {
            width: 2rem;
            height: 2rem;
        }

        .logo-text {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            font-weight: 600;
            letter-spacing: 0.15em;
            color: var(--color-cinnabar);
        }

        /* 导航进度条 */
        .nav-progress-wrap {
            flex: 1;
            max-width: 200px;
            height: 3px;
            background: rgba(178, 58, 58, 0.15);
            border-radius: var(--radius-full);
            margin: 0 var(--spacing-xl);
            overflow: hidden;
        }

        .nav-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--color-cinnabar), var(--color-gold));
            border-radius: var(--radius-full);
            transition: width 0.15s linear;
        }

        /* 导航菜单 */
        .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-md);
        }

        .nav-link {
            position: relative;
            text-decoration: none;
            color: var(--color-secondary);
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-sm);
            font-weight: 500;
            padding: var(--spacing-xs) var(--spacing-sm);
            transition: all var(--transition-fast);
            letter-spacing: 0.05em;
        }

        .nav-link span {
            position: relative;
            display: inline-block;
            padding: 0.35rem 0;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--color-cinnabar), var(--color-gold));
            transition: width var(--transition-smooth);
            border-radius: 1px;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--color-cinnabar);
        }


        /* 移动端菜单 */
        .nav-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--color-ink);
            font-size: 1.5rem;
            cursor: pointer;
            padding: var(--spacing-xs);
        }

        /* ====== [第5章] 主内容区 + GSAP滚动显现初始隐藏态 ======*/
        .main-content {
            margin-top: var(--header-height);
        }

        /* ====== 通用GSAP滚动显现初始态（RevealonScroll） ======*/
        .gsap-fade-up {
            opacity: 0;
            transform: translate3d(0, 36px, 0);
        }

        .gsap-scale-in {
            opacity: 0;
            transform: translate3d(0, 18px, 0) scale(0.96);
        }

        .gsap-nav-item {
            opacity: 0;
            transform: translate3d(0, -10px, 0);
        }

        /* ====== [第3章] 英雄区 .hero-section / GSAP初始隐藏态 ====== */
*        .gsap-scroll-hint {
            opacity: 0;
            transform: translate3d(0, 22px, 0);
        }

        .hero-title-main,
        .hero-subtitle-en {
            opacity: 0;
        }

        /* ====== [第6章] 通用章节容器 .section ====== */
        .section {
            min-height: 100vh;
            padding: var(--spacing-3xl) var(--spacing-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .section-content {
            max-width: var(--max-width);
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* ====== 封面章节 - 视差动画 ====== */
        .hero-section {
            min-height: 100vh;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* 视差背景层 - 参考视差动画参考 */
        .parallax-layer {
            position: absolute;
            left: 0;
            bottom: -15%;
            width: 100%;
            height: auto;
            min-height: 120vh;
            object-fit: cover;
            object-position: center bottom;
            pointer-events: none;
            will-change: transform;
        }

        .parallax-back {
            z-index: 1;
            opacity: 0;
            transform: translateY(150px);
        }

        .parallax-mid {
            z-index: 2;
            opacity: 0;
            transform: translateY(150px);
        }

        .parallax-front {
            z-index: 3;
            opacity: 0;
            transform: translateY(180px);
        }

        /* 标题区域 - 居中定位 */
        .hero-title-wrap {
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            text-align: center;
        }

        .hero-subtitle-en {
            font-size: var(--font-size-sm);
            font-weight: 400;
            letter-spacing: 0.8em;
            color: var(--color-secondary);
            margin-bottom: var(--spacing-md);
        }

        /* 进入主页面后，确保副标题可见（安全兜底） */
        body.intro-complete .hero-subtitle-en {
            opacity: 1 !important;
        }

        .hero-title-main {
            font-family: var(--font-calligraphy);
            font-size: clamp(2rem, 10vw, 5rem);
            line-height: 1.3;
            color: var(--color-primary-dark);
            border-left: 2px solid var(--color-primary-dark);
            padding-left: 20px;
            text-align: left;
        }

        /* 描述信息区 */
        .hero-info-wrap {
            width: 100%;
            max-width: 600px;
            position: absolute;
            bottom: 22%;
            z-index: 20;
            text-align: center;
            padding: 0 var(--spacing-xl);
        }

        .hero-desc {
            font-size: var(--font-size-sm);
            line-height: 2;
            color: rgba(26, 24, 20, 0.7);
            letter-spacing: 0.05em;
            opacity: 0;
        }

        /* 滚动指示器 */
        .scroll-indicator {
            position: absolute;
            bottom: var(--spacing-2xl);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-sm);
            color: var(--color-secondary);
            opacity: 0;
            z-index: 21;
            /* 高于标题(z:20)和视差层(z:1~3) */
        }

        .scroll-line {
            width: 1px;
            height: 60px;
            background: linear-gradient(to bottom, var(--color-secondary), transparent);
            position: relative;
            overflow: hidden;
        }

        .scroll-line::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background: var(--color-highlight);
            animation: scrollPulse 2s ease-in-out infinite;
        }

        @keyframes scrollPulse {
            0% {
                transform: translateY(-20px);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: translateY(60px);
                opacity: 0;
            }
        }

        .scroll-indicator span {
            font-size: var(--font-size-xs);
            letter-spacing: 0.2em;
            color: var(--color-earth);
        }

        /* ====== [第7章] 浮动装饰/SVG分割线等通用组件 ====== */
        .floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* ====== [第8章] 各章节头部样式 - .section-header ====== */
        .section-header {
            text-align: center;
            margin-bottom: var(--spacing-3xl);
        }

        .section-title {
            font-family: var(--font-calligraphy);
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 600;
            color: var(--color-ink);
            margin-bottom: var(--spacing-sm);
            line-height: 1.4;
            letter-spacing: 0.02em;
        }

        .title-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
        }

        .title-word.highlight {
            color: var(--color-cinnabar);
        }

        .title-en {

            font-size: var(--font-size-sm);
            color: var(--color-earth);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            margin-bottom: var(--spacing-md);
            opacity: 0;
        }

        .section-subtitle {
            font-size: var(--font-size-xl);
            color: var(--color-secondary);
            opacity: 0;
            font-weight: 300;
            letter-spacing: 0.05em;
        }

        .section-divider {
            display: flex;
            justify-content: center;
            margin-top: var(--spacing-lg);
        }

        .divider-path {
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
        }

        /* ====== [第9章] 基础简介定义 #define（HTML第2部分）======
   包含：define-intro / core-data-grid / extra-carvings / symbol-intro */
        .define-section {
            background: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
        }

        /* 定义章节放开宽度限制，允许图标区自然展开 */
        .define-section .section-content {
            max-width: 1600px;
        }

        /* 主布局随内容自然撑开 */
        .define-section .main-layout {
            min-width: 100%;
        }

        .define-intro {
            text-align: center;
            max-width: 1000px;
            margin: 80px auto 30px;
            opacity: 0;
            transform: translateY(40px);
        }

        .define-intro p {
            font-size: var(--font-size-xl);
            color: var(--color-gray-dark);
            line-height: 1.8;
        }

        .define-academic {
            margin-top: var(--spacing-md);
            font-size: var(--font-size-base) !important;
            color: var(--color-secondary) !important;
            padding: 10px 20px 30px;
            border-left: 3px solid var(--color-earth);
        }

        /* 核心数据网格 */
        .core-data-grid {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-3xl);
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.4s ease;
            position: relative;
        }

        .core-data-grid.has-climate-expanded {
            overflow-x: visible;
            justify-content: center;
            align-items: flex-start;
        }

        /* 气候分组容器 */
        .climate-group {
            position: relative;
            cursor: pointer;
            padding: var(--spacing-md);
            border: none;
            border-left: 2px solid var(--color-earth);
            background: transparent;
            transition:
                flex          0.6s cubic-bezier(0.22, 1, 0.36, 1),
                min-width      0.5s cubic-bezier(0.22, 1, 0.36, 1),
                min-height     0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
                padding        0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
                box-shadow     0.4s ease 0.15s,
                background     0.5s ease 0.1s,
                opacity        0.35s ease,
                transform       0.35s cubic-bezier(0.22, 1, 0.36, 1),
                z-index        0s;
            z-index: 1;
            flex: 1;
            width: 580px;
            min-height: 440px;
            will-change: flex, min-width, padding, transform;
        }

        .climate-group:not(.expanded):not(.collapsed):hover {
            box-shadow: var(--shadow-md);
        }

        .group-label {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--color-cinnabar);
            text-align: center;
            margin-bottom: var(--spacing-md);
            letter-spacing: 2px;
            position: relative;
        }

        .group-label::after {
            content: '';
            display: block;
            width: 40px;
            height: 2px;
            background: var(--color-cinnabar);
            margin: 8px auto 0;
            transition: width 0.3s ease;
        }

        .climate-group:hover .group-label::after,
        .climate-group.expanded .group-label::after {
            width: 80px;
        }

        .group-cards {
            display: flex;
            gap: var(--spacing-md);
            flex-wrap: wrap;
        }

        /* 展开状态 - 占2/3宽度 */
        .climate-group.expanded {
            flex: 5!important;
            min-width: unset;
            z-index: 10;
            box-shadow: var(--shadow-wash);
            background: rgba(247, 244, 238, 0.6);
            padding: var(--spacing-sm) var(--spacing-lg);
            display: flex;
            flex-direction: column;
            min-height: 580px;
        }

        .climate-group.expanded .group-label {
            font-size: var(--font-size-base);
            margin-bottom: 4px;
        }

        .climate-group.expanded .group-label::after {
            width: 50px;
        }

        .climate-group.expanded .group-cards {
            justify-content: center;
            gap: var(--spacing-md);
            flex-wrap: nowrap;
            flex-shrink: 0;
            display: flex;
            flex-direction: row;
        }

        /* 展开后 core-data-card 横排均分 */
        .climate-group.expanded .group-cards > .core-data-card {
            max-width: none;
            width: 0;
            flex: 1 1 0%;
            min-height: 140px;
        }

        /* 展开时顶部的文字阐述 */
        .climate-intro-text {
            display: none; /* 收起时隐藏 */
        }
        .climate-group.expanded .climate-intro-text {
            display: block;
            background: linear-gradient(135deg, rgba(139,69,19,0.03), rgba(218,165,32,0.04));
            border: 1px solid rgba(139, 115, 85, 0.12);
            border-radius: var(--radius-md);
            padding: 10px 16px;
            margin-bottom: var(--spacing-sm);
        }
        .climate-intro-text p {
            font-size: var(--font-size-sm);
            line-height: 1.8;
            color: var(--color-primary-dark);
        }
        .climate-intro-text strong {
            color: var(--color-cinnabar);
        }

        /* 展开状态下气候交互模块：紧凑双行布局 */
        .climate-group.expanded .group-cards > .climate-interactive-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .climate-group.expanded .interactive-stats {
            background: linear-gradient(135deg, rgba(139,69,19,0.03), rgba(218,165,32,0.04));
            border: 1px solid rgba(139, 69, 19, 0.12);
            border-radius: var(--radius-md);
            padding: 10px 16px;
            margin-bottom: 8px;
            flex-shrink: 0;
        }
        .climate-group.expanded .stats-title {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-sm);
            color: var(--color-cinnabar);
            text-align: center;
            letter-spacing: 2px;
            margin-bottom: 6px;
        }
        .climate-group.expanded .month-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            justify-content: center;
            margin-bottom: 8px;
        }
        .climate-group.expanded .month-btn {
            padding: 4px 11px;
            border: 1px solid rgba(139, 69, 19, 0.25);
            background: transparent;
            cursor: pointer;
            font-size: 0.78rem;
            color: var(--color-secondary);
            transition: all 0.25s ease;
            border-radius: var(--radius-sm);
            font-family: var(--font-sans);
        }
        .climate-group.expanded .month-btn:hover { border-color: var(--color-cinnabar); color: var(--color-cinnabar); }
        .climate-group.expanded .month-btn.active {
            background: rgba(139, 69, 19, 0.1);
            border-color: var(--color-cinnabar);
            color: var(--color-cinnabar);
            font-weight: 500;
        }

        /* 数据卡片横排一行 */
        .climate-group.expanded .selected-data-display {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .climate-group.expanded .data-card {
            background: #fff;
            border-radius: var(--radius-sm);
            padding: 10px 8px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(139, 69, 19, 0.08);
        }
        .climate-group.expanded .data-card::before {
            content: '';
            position: absolute; top: 0; left: 0; width: 100%; height: 2px;
        }
        .climate-group.expanded .data-card.precip::before { background: linear-gradient(90deg, transparent, #5a8ab0, transparent); }
        .climate-group.expanded .data-card.temp::before { background: linear-gradient(90deg, transparent, #b07858, transparent); }
        .climate-group.expanded .data-card.humid::before { background: linear-gradient(90deg, transparent, #5a9a78, transparent); }
        .climate-group.expanded .data-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .climate-group.expanded .data-card-value {
            font-size: 1.45rem;
            font-weight: 600;
            color: var(--color-ink);
            line-height: 1.2;
        }
        .climate-group.expanded .data-card-label {
            font-size: 0.75rem;
            color: var(--color-secondary);
            margin-top: 3px;
        }

        /* 图表区域：固定高度，填满空间 */
        .climate-group.expanded .climate-section {
            display: grid;
            grid-template-columns: 1.35fr 1fr;
            gap: 10px;
        }
        .climate-group.expanded .climate-chart-card {
            background: #fff;
            border: 1px solid rgba(139, 69, 19, 0.1);
            border-radius: var(--radius-md);
            padding: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        .climate-group.expanded .climate-chart-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, transparent, rgba(139,69,19,0.4), transparent);
        }
        .climate-group.expanded .climate-chart-title {
            font-family: var(--font-serif);
            font-size: 0.82rem;
            color: var(--color-secondary);
            margin-bottom: 4px;
            text-align: center;
            letter-spacing: 1px;
            flex-shrink: 0;
        }
        .climate-group.expanded .chart-wrapper {
            height: 240px;
            position: relative;
        }

        /* 展开后 core-data-card 通用缩小样式（被上方 .group-cards > 规则覆盖布局属性） */
        .climate-group.expanded .core-data-card {
            padding: var(--spacing-md) var(--spacing-sm);
            overflow: hidden;
        }

        .climate-group.expanded .core-data-card .data-icon {
            width: 28px; height: 28px;
            margin: 0 auto 2px;
            font-size: 0.85rem;
        }

        .climate-group.expanded .core-data-card h4 { font-size: 10px; }
        .climate-group.expanded .core-data-card .data-value { font-size: 1.15rem; }
        .climate-group.expanded .core-data-card .data-value span { font-size: 11px; }
        .climate-group.expanded .core-data-card .data-desc {
            font-size: 11px;
            line-height: 1.3;
            word-break: break-all;
        }

        /* 条形图卡片 - 紧凑布局 */
        .core-data-card.chart-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: var(--spacing-sm) var(--spacing-xs);
        }

        .core-data-card.chart-card h4 {
            font-family: var(--font-serif);
            font-size: 11px;
            color: var(--color-secondary);
            margin-bottom: 4px;
            text-align: center;
        }

        .mini-chart {
            width: 100%;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mini-chart svg {
            width: 100%;
            height: auto;
            max-height: 110px;
        }

        .chart-unit {
            font-size: 9px;
            color: #aaa;
            margin-top: 2px;
            text-align: center;
        }

        /* 收缩状态 - 占1/3宽度（平滑过渡） */
        .climate-group.collapsed {
            flex: 1 !important;
            opacity: 0.35;
            transform: scale(0.97);
            pointer-events: auto;
            cursor: pointer;
            filter: saturate(0.6);
        }

        .climate-group:not(.expanded):not(.collapsed):hover {
            box-shadow: var(--shadow-md);
        }

        /* ========== 气候动画区域（可平滑过渡显示）========== */
        .climate-animation {
            max-height: 0;
            margin: 0;
            padding: 0 var(--spacing-md);
            opacity: 0;
            overflow: hidden;
            visibility: hidden;
            background: rgba(240, 248, 255, 0.7);
            border: 1px solid rgba(74, 144, 164, 0);
            border-radius: 4px;
            text-align: center;
            transition:
                max-height    0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                margin-top    0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
                padding       0.35s ease 0.25s,
                opacity       0.4s ease 0.3s,
                visibility     0s linear 0.5s,
                border-color  0.35s ease 0.25s;
        }

        .climate-group.expanded .climate-animation {
            max-height: 600px;
            margin-top: var(--spacing-lg);
            padding: var(--spacing-md);
            opacity: 1;
            visibility: visible;
            border-color: rgba(74, 144, 164, 0.2);
            transition:
                max-height    0.65s cubic-bezier(0.22, 1, 0.36, 1),
                margin-top    0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
                padding       0.4s ease 0.12s,
                opacity       0.5s ease 0.08s,
                visibility     0s,
                border-color  0.4s ease 0.12s;
        }

        /* 展开后：动图左 + 介绍/按钮右 的双栏布局 */
        .animation-layout-row {
            display: flex;
            gap: var(--spacing-md);
            align-items: stretch;
        }
        .animation-gif-side {
            flex: 1;
            min-width: 0;
        }
        .animation-gif-side .video-player img {
            width: 100%;
            height: auto;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(139, 115, 85, 0.15);
        }
        .animation-info-side {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-xs) 0;
        }
        .game-intro-text p {
            font-size: var(--font-size-sm);
            line-height: 1.7;
            color: var(--color-secondary);
        }
        .game-intro-text strong {
            color: var(--color-cinnabar);
        }
        .rain-btn-large {
            font-size: var(--font-size-base) !important;
            padding: 12px 28px !important;
            letter-spacing: 2px !important;
            border-radius: var(--radius-md) !important;
        }
        .rain-btn-large a {
            color: inherit;
            text-decoration: none;
        }

        /* 夏日炎炎展开后：卡片占1/3，动画区(图+文字)占2/3 */
        .climate-group.heat-group.expanded .group-cards {
            flex: 1 1 33%;
            overflow: hidden;
        }
        .climate-group.heat-group.expanded .climate-animation {
            flex: 2 1 66%;
            max-height: 800px;
            margin-top: var(--spacing-sm);
        }
        .climate-group.heat-group.expanded .animation-layout-row {
            height: 100%;
            display: flex;
            gap: var(--spacing-md);
        }
        .climate-group.heat-group.expanded .animation-gif-side {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
        }
        .climate-group.heat-group.expanded .animation-gif-side img {
            width: 100%;
            height: auto;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(139, 115, 85, 0.15);
            cursor: zoom-in;
        }

        @media (max-width: 640px) {
            .animation-layout-row {
                flex-direction: column;
            }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animation-title {
            font-family: var(--font-serif);
            font-size: var(--font-size-sm);
            color: #3d6b82;
            margin-bottom: var(--spacing-sm);
            letter-spacing: 1px;
        }

        /* ========== 交互式月度气候数据（Chart.js）- 紧凑版 ========== */
        .group-cards > .climate-interactive-wrap {
            width: 100%;
        }
        .climate-animation .climate-interactive-wrap {
            animation: fadeInUp 0.4s ease both;
        }
        .interactive-stats {
            background: linear-gradient(135deg, rgba(139,69,19,0.03), rgba(218,165,32,0.04));
            border: 1px solid rgba(139, 69, 19, 0.12);
            border-radius: var(--radius-md);
            padding: var(--spacing-sm) var(--spacing-md);
            margin-bottom: var(--spacing-sm);
        }
        .stats-title {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-sm);
            color: var(--color-cinnabar);
            text-align: center;
            letter-spacing: 2px;
            margin-bottom: 6px;
        }
        .month-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            margin-bottom: 8px;
        }
        .month-btn {
            padding: 3px 9px;
            border: 1px solid rgba(139, 69, 19, 0.25);
            background: transparent;
            cursor: pointer;
            font-size: 0.72rem;
            color: var(--color-secondary);
            transition: all 0.25s ease;
            border-radius: var(--radius-sm);
            font-family: var(--font-sans);
        }
        .month-btn:hover { border-color: var(--color-cinnabar); color: var(--color-cinnabar); }
        .month-btn.active {
            background: rgba(139, 69, 19, 0.1);
            border-color: var(--color-cinnabar);
            color: var(--color-cinnabar);
            font-weight: 500;
        }
        .selected-data-display {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }
        .data-card {
            background: #fff;
            border-radius: var(--radius-sm);
            padding: 10px 6px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(139, 69, 19, 0.08);
        }
        .data-card::before {
            content: '';
            position: absolute; top: 0; left: 0; width: 100%; height: 2px;
        }
        .data-card.precip::before { background: linear-gradient(90deg, transparent, #5a8ab0, transparent); }
        .data-card.temp::before { background: linear-gradient(90deg, transparent, #b07858, transparent); }
        .data-card.humid::before { background: linear-gradient(90deg, transparent, #5a9a78, transparent); }
        .data-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .data-card-value {
            font-size: 1.35rem;
            font-weight: 600;
            color: var(--color-ink);
            line-height: 1.2;
        }
        .data-card-label {
            font-size: 0.7rem;
            color: var(--color-secondary);
            margin-top: 2px;
        }

        /* 图表区域 - 紧凑布局 */
        .climate-section {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: var(--spacing-sm);
        }
        .climate-chart-card {
            background: #fff;
            border: 1px solid rgba(139, 69, 19, 0.1);
            border-radius: var(--radius-md);
            padding: var(--spacing-sm);
            position: relative;
        }
        .climate-chart-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, transparent, rgba(139,69,19,0.4), transparent);
        }
        .climate-chart-title {
            font-family: var(--font-serif);
            font-size: 0.78rem;
            color: var(--color-secondary);
            margin-bottom: 4px;
            text-align: center;
            letter-spacing: 1px;
        }
        .chart-wrapper { position: relative; }
        /* 收起状态固定高度 */
        .climate-group:not(.expanded) .chart-wrapper { height: 120px; }

        /* 收起状态下的气候交互模块：更紧凑以适配小尺寸 */
        .climate-group:not(.expanded) .group-cards > .climate-interactive-wrap {
            overflow-y: auto;
            max-height: 400px;
        }
        .climate-group:not(.expanded) .interactive-stats {
            padding: 6px 10px;
        }
        .climate-group:not(.expanded) .stats-title {
            font-size: 0.78rem;
            margin-bottom: 4px;
        }
        .climate-group:not(.expanded) .month-selector {
            gap: 3px;
            margin-bottom: 5px;
        }
        .climate-group:not(.expanded) .month-btn {
            padding: 2px 7px;
            font-size: 0.68rem;
        }
        .climate-group:not(.expanded) .selected-data-display {
            gap: 4px;
        }
        .climate-group:not(.expanded) .data-card {
            padding: 8px 4px;
        }
        .climate-group:not(.expanded) .data-card-value {
            font-size: 1.15rem;
        }
        .climate-group:not(.expanded) .data-card-label {
            font-size: 0.65rem;
        }
        .climate-group:not(.expanded) .climate-section {
            gap: 4px;
        }
        .climate-group:not(.expanded) .climate-chart-card {
            padding: 6px;
        }
        .climate-group:not(.expanded) .climate-chart-title {
            font-size: 0.7rem;
            margin-bottom: 2px;
        }
        .climate-group:not(.expanded) .chart-wrapper {
            height: 120px;
        }

        /* 气候数据响应式 */
        @media (max-width: 768px) {
            .climate-group.expanded .climate-section { grid-template-columns: 1fr; }
            .selected-data-display { grid-template-columns: repeat(3, 1fr); gap: 5px; }
            .month-selector { gap: 3px; }
            .month-btn { padding: 3px 7px; font-size: 0.68rem; }
            .data-card-value { font-size: 1.15rem; }
            .chart-wrapper { height: 150px; }
            .climate-group.expanded .chart-wrapper { height: 180px; }
            .animation-layout-row { flex-direction: column; }
        }
        @media (max-width: 480px) {
            .selected-data-display { grid-template-columns: 1fr; gap: 4px; }
            .data-card { padding: 8px 6px; }
            .data-card-value { font-size: 1.3rem; }
            .chart-wrapper { height: 120px; }
            .animation-layout-row { flex-direction: column; }
        }

        .roof-svg { width: 100%; max-width: 380px; height: auto; }
        .vent-svg { width: 100%; max-width: 400px; height: auto; }

        /* ===== 视频播放器（适配气候动画卡片） ===== */
        .video-player {
            position: relative;
            width: 100%;
            max-width: 420px;
            aspect-ratio: 16 / 9;
            margin: var(--spacing-sm) auto 0;
            border-radius: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #2a3a4a, #1a2530);
            border-left: 3px solid rgba(201,162,39,0.5);
        }
        .video-player video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: none;
            outline: none;
        }
        .video-poster {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            background:
                linear-gradient(135deg, rgba(42,58,74,0.85), rgba(26,37,48,0.92)),
                repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139,115,85,0.04) 10px, rgba(139,115,85,0.04) 20px);
            cursor: pointer;
            transition: opacity 0.35s ease;
        }
        .video-poster.hidden { opacity: 0; pointer-events: none; }
        .poster-bg-svg {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            z-index: 0;
        }
        .video-play-btn {
            position: relative; z-index: 1;
            width: 56px; height: 56px;
            border-radius: 50%;
            border: 2px solid rgba(236,223,178,0.6);
            background: rgba(26,24,20,0.55);
            color: var(--color-gold);
            font-size: 1.15rem;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
            backdrop-filter: blur(8px);
        }
        .video-play-btn:hover {
            background: var(--color-cinnabar);
            border-color: var(--color-cinnabar);
            color: #fff;
            transform: scale(1.12);
            box-shadow: 0 6px 24px rgba(178,58,58,0.35);
        }
        .video-play-btn i { margin-left: 3px; }
        .video-poster-text {
            position: relative; z-index: 1;
            margin-top: var(--spacing-sm);
            font-family: var(--font-serif);
            font-size: var(--font-size-xs);
            color: rgba(236,223,178,0.7);
            letter-spacing: 0.08em;
        }

        .animation-hint {
            font-size: 11px;
            color: #888;
            margin-top: 6px;
        }

        /* 雨滴动画 */
        .rain-drop {
            fill: #5ba3c9;
            opacity: 0;
        }
        @keyframes rainFall {
            0% { transform: translateY(-10px); opacity: 0; }
            20% { opacity: 0.75; }
            80% { opacity: 0.6; }
            100% { transform: translateY(85px); opacity: 0; }
        }
        .rain-drop.animating {
            animation: rainFall linear infinite;
        }

        /* 屋面水流 */
        .roof-water-line {
            stroke: #6ab4d9;
            stroke-width: 2;
            stroke-linecap: round;
            fill: none;
            opacity: 0;
        }
        @keyframes roofFlowLeft {
            0% { stroke-dashoffset: 60; opacity: 0; }
            20% { opacity: 0.7; }
            100% { stroke-dashoffset: 0; opacity: 0.4; }
        }
        @keyframes roofFlowRight {
            0% { stroke-dashoffset: -60; opacity: 0; }
            20% { opacity: 0.7; }
            100% { stroke-dashoffset: 0; opacity: 0.4; }
        }

        /* 落水管水流 */
        .drain-pipe-fill {
            fill: #6ab4d9;
            opacity: 0;
        }
        @keyframes pipeFlowDown {
            0% { transform: translateY(-90px); opacity: 0; }
            30% { opacity: 0.65; }
            100% { transform: translateY(0); opacity: 0.2; }
        }
        .drain-pipe-fill.animating {
            animation: pipeFlowDown linear infinite;
        }

        /* 水池涟漪 */
        .water-ripple {
            fill: none;
            stroke: #6ab4d9;
            stroke-width: 1.5;
            opacity: 0;
        }
        @keyframes rippleOut {
            0% { r: 4; opacity: 0.8; stroke-width: 2; }
            100% { r: 18; opacity: 0; stroke-width: 0.5; }
        }
        .water-ripple.animating {
            animation: rippleOut ease-out infinite;
        }

        /* 控制按钮通用 */
        .rain-controls, .vent-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
        .rain-btn, .vent-btn {
            padding: 5px 16px;
            border: 1px solid rgba(178, 58, 58, 0.25);
            background: #fff;
            color: #666;
            font-family: var(--font-serif);
            font-size: 12px;
            cursor: pointer;
            border-radius: 3px;
            transition: all 0.25s ease;
        }
        .rain-btn:hover, .vent-btn:hover {
            
            color: var(--color-cinnabar);
        }
        .rain-btn.active, .vent-btn.active {
            background: var(--color-cinnabar);
            color: #fff;
            
        }

        /* ===== 天井通风动画 ===== */
        /* 冷风粒子（蓝色，从两侧冷巷进入） */
        .air-particle-cold {
            fill: #4a9ec9;
            opacity: 0;
        }
        @keyframes coldAirInLeft {
            0% { transform: translateX(0); opacity: 0; }
            15% { opacity: 0.7; }
            70% { opacity: 0.45; }
            100% { transform: translateX(160px) translateY(40px); opacity: 0; }
        }
        @keyframes coldAirInRight {
            0% { transform: translateX(0); opacity: 0; }
            15% { opacity: 0.7; }
            70% { opacity: 0.45; }
            100% { transform: translateX(-160px) translateY(40px); opacity: 0; }
        }

        /* 热气粒子（橙红色，从天井向上排出） */
        .air-particle-hot {
            fill: #d4764a;
            opacity: 0;
        }
        @keyframes hotAirUp {
            0% { transform: translateY(0); opacity: 0; }
            15% { opacity: 0.7; }
            70% { opacity: 0.35; }
            100% { transform: translateY(-70px); opacity: 0; }
        }

        /* 横向对流粒子（绿色，室内循环） */
        .air-particle-cross {
            fill: #5cb885;
            opacity: 0;
        }
        @keyframes crossVentLtoR {
            0% { transform: translate(0, 0); opacity: 0; }
            15% { opacity: 0.55; }
            70% { opacity: 0.3; }
            100% { transform: translate(140px, -30px); opacity: 0; }
        }
        @keyframes crossVentRtoL {
            0% { transform: translate(0, 0); opacity: 0; }
            15% { opacity: 0.55; }
            70% { opacity: 0.3; }
            100% { transform: translate(-140px, -30px); opacity: 0; }
        }

        .core-data-card {
            flex: 0 0 auto;
            max-width: 400px;
            max-height: 180px;
            padding: var(--spacing-xl);
            border-radius: 0;
            border: none;
            background: transparent;
            text-align: center;
            transition: all var(--transition-bounce);
        }

        .core-data-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-wash);
            background: linear-gradient(to bottom, rgba(61,122,140,0.04), transparent);
        }

        .core-data-card .data-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto var(--spacing-sm);
            background: linear-gradient(135deg, var(--color-earth), var(--color-gold));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.25rem;
        }

        .core-data-card h4 {
            font-family: var(--font-serif);
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
            margin-bottom: var(--spacing-xs);
        }

        .core-data-card .data-value {
            font-family: var(--font-serif);
            font-size: var(--font-size-3xl);
            font-weight: 700;
            color: var(--color-cinnabar);
            line-height: 1.2;
        }

        .core-data-card .data-value span {
            font-size: var(--font-size-xl);
            font-weight: 400;
        }

        .core-data-card .data-desc {
            font-size: var(--font-size-sm);
            color: var(--color-gray-dark);
            margin-top: var(--spacing-xs);
        }

        /* 小标签 */
        .tag-sm {
            background: rgba(61, 122, 140, 0.1);
            color: var(--color-earth);
            padding: 0.2rem 0.5rem;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            display: inline-block;
        }

        /* 石雕嵌瓷等补充 */
        .extra-carvings {
            background: transparent;
            padding: var(--spacing-2xl);
            border-radius: 0;
            margin-bottom: var(--spacing-3xl);
            border: none;
            opacity: 0;
            transform: translateY(30px);
        }

        .extra-carvings h3 {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-lg);
            text-align: center;
        }

        .extra-carvings h3 i {
            color: var(--color-cinnabar);
            margin-right: var(--spacing-sm);
        }

        .extra-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-lg);
        }

        .extra-item {
            padding: var(--spacing-lg);

            border-radius: 0;
            border-left: 3px solid var(--color-gold);
        }

        .extra-item h4 {
            font-family: var(--font-serif);
            color: var(--color-cinnabar);
            margin-bottom: var(--spacing-sm);
            font-size: var(--font-size-base);
        }

        .extra-item p {
            color: var(--color-secondary);
            font-size: var(--font-size-sm);
            line-height: 1.6;
        }

        /* 寓意图案说明 */
        .symbol-intro {
            font-size: var(--font-size-base);
            color: var(--color-secondary);
            text-align: center;
            margin-bottom: var(--spacing-lg);
            opacity: 0;
        }

        /* ====== [第11章] 保护传承章节 #protection ====== */
        .protection-section {
            background: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
            color: var(--color-primary-dark);
        }

        .protection-section .section-title,
        .protection-section .title-en,
        .protection-section .section-subtitle {
            color: var(--color-primary-dark);
        }

        .protection-intro {
            text-align: center;
            max-width: 800px;
            margin: 0 auto var(--spacing-3xl);
            opacity: 0;
            transform: translateY(30px);
        }

        .protection-intro p {
            font-size: var(--font-size-xl);
            color: var(--color-secondary);
            line-height: 1.8;
        }

        /* 挑战卡片 — 古风：单侧竖线+墨染hover */
        .challenge-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--spacing-lg);
        }

        .challenge-card {
            padding: var(--spacing-xl);
            border-radius: 0;
            border: none;
            border-left: 3px solid var(--color-earth);
            background: transparent;
            text-align: center;
            opacity: 0;
            position: relative;
        }

        .challenge-card:hover {
            background: linear-gradient(90deg, rgba(61,122,140,0.05), transparent);
            border-left-color: var(--color-cinnabar);
        }

        .challenge-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto var(--spacing-md);
            background: linear-gradient(135deg, var(--color-gold), var(--color-cinnabar));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

        .challenge-card h4 {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-sm);
        }

        .challenge-card p {
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
            line-height: 1.6;
        }

        /* 保护成就 */
        .achievement-section {
            margin-bottom: var(--spacing-3xl);
        }

        .achievement-section h3 {
            font-family: var(--font-serif);
            font-size: var(--font-size-2xl);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-xl);
            text-align: center;
        }

        .achievement-section h3 i {
            color: var(--color-gold);
            margin-right: var(--spacing-sm);
        }

        .achievement-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-lg);
        }

        .achievement-card {
            padding: var(--spacing-xl);
            border-radius: 0;
            text-align: center;
            border: none;
            border-left: 3px solid var(--color-earth);
            background: transparent;
            opacity: 0;
        }

        .achievement-card:hover {
            background: linear-gradient(90deg, rgba(201,162,39,0.05), transparent);
            border-left-color: var(--color-gold);
        }

        .achievement-stat {
            font-family: var(--font-serif);
            font-size: var(--font-size-4xl);
            font-weight: 700;
            color: var(--color-gold);
            line-height: 1;
        }

        .achievement-unit {
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
            margin: var(--spacing-xs) 0 var(--spacing-sm);
        }

        .achievement-desc {
            font-size: var(--font-size-sm);
            color: var(--color-gray-dark);
        }

        /* 活化案例 */
        .cases-section {
            margin-bottom: var(--spacing-3xl);
        }

        .cases-section h3 {
            font-family: var(--font-serif);
            font-size: var(--font-size-2xl);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-xl);
            text-align: center;
        }

        .cases-section h3 i {
            color: var(--color-gold);
            margin-right: var(--spacing-sm);
        }

        .case-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-lg);
        }

        .case-item {
            padding: var(--spacing-lg);
            border-radius: 0;
            border-left: 3px solid var(--color-gold);
            background: transparent;
            opacity: 0;
        }

        .case-item:hover {
            background: linear-gradient(90deg, rgba(61,122,140,0.05), transparent);
            border-left-color: var(--color-cinnabar);
        }

        .case-item h4 {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-sm);
        }

        .case-item p {
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
            line-height: 1.6;
        }

        /* 保护引用 — 古风：无框，仅用引号装饰 */
        .protection-quote {
            padding: var(--spacing-xl);
            border-radius: 0;
            text-align: center;
            margin-top: var(--spacing-2xl);
            opacity: 0;
            transform: translateY(30px);
            border: none;
            position: relative;
            background: transparent;
        }
        /* 引文上下装饰线（似古籍批注）*/
        .protection-quote::before,
        .protection-quote::after {
            content: '';
            display: block;
            width: 60px;
            height: 2px;
            margin: var(--spacing-md) auto;
            background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
        }
        .protection-quote::after { margin-top: var(--spacing-md); }

        .protection-quote p {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            font-style: italic;
            color: var(--color-primary-dark);
            quotes: "「" "」";
        }

        .protection-quote p::before {
            content: open-quote;
            color: var(--color-gold);
        }

        .protection-quote p::after {
            content: close-quote;
            color: var(--color-gold);
        }

        /* ====== [第13章] 风格特征项 .feature-item ====== */
        .feature-item {
            text-align: center;
            padding: var(--spacing-xl);
            border-radius: 0;
            border: none;
            background: transparent;
            transition: all var(--transition-bounce);
            opacity: 0;
            transform: translateY(40px);
            cursor: pointer;
        }

        .feature-item:hover {
            transform: translateY(-4px);
            box-shadow: none;
            background: linear-gradient(to bottom, rgba(201,162,39,0.05), transparent);
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto var(--spacing-md);
            background: linear-gradient(135deg, var(--color-highlight), var(--color-gold));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            transition: transform var(--transition-bounce);
        }

        .feature-item:hover .feature-icon {
            transform: scale(1.08);
        }

        .feature-item h4 {
            font-family: var(--font-serif);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-xs);
        }

        .feature-item p {
            font-size: var(--font-size-sm);
            color: var(--color-gray-dark);
        }

        /* ====== 空间布局章节 ====== */
        .layout-section {
            background: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
            color: var(--color-primary-dark);
        }

        .parallax-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 150%;
            background: transparent;
            pointer-events: none;
            will-change: transform;
            transform: translate3d(0, 0, 0);
        }

        /* ====== Firewatch风格：通用视差与滚动显现（兜底） ====== */
        .bg-shape,
        .float-item,
        .parallax-bg,
        .section-header,
        .hero-text {
            will-change: transform;
            transform: translate3d(0, 0, 0);
        }

        /* 通用 Reveal on Scroll（不与GSAP类冲突：仅对 .reveal 生效） */
        .reveal {
            opacity: 0;
            transform: translate3d(0, 24px, 0);
            transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal.is-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

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

            .reveal,
            .reveal.is-visible {
                transition: none !important;
                ;
                opacity: 1 !important;
            }
        }

        .layout-section .section-title,
        .layout-section .title-en,
        .layout-section .section-subtitle {
            color: var(--color-primary-dark);
        }

        /* ====== [第12章] 地图分布 #map-distribution（HTML第3部分）======
   ⚠️ 排序标注：CSS中地图章节位于 layout(形制构造)之后，
   但HTML实际顺序是 map-distribution 在 layout 之前
   此处map的CSS位置偏后，建议后续调至layout章节之前
   包含：map-wrapper / map-card / stats-card / city-ranking-card / city-list / 响应式 */
        .map-section {
            background: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
        }

        .map-wrapper {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 24px;
            margin-top: var(--spacing-xl);
        }

        .map-main-container {
            min-height: 500px;
        }

        .map-card {
            background: rgba(237, 228, 204, 0.85);
            backdrop-filter: none;
            border-radius: 0;
            padding: 24px;
            border: none;
            box-shadow: var(--shadow-inset-paper);
            height: 100%;
        }

        .map-chart {
            width: 100%;
            height: 480px;
        }

        .map-legend {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 16px;
            padding: 12px;
            background: rgba(247, 244, 238, 0.6);
            border-radius: 0;
        }

        .legend-title {
            color: var(--color-secondary);
            font-size: var(--font-size-sm);
        }

        .legend-bar {
            width: 120px;
            height: 12px;
            background: linear-gradient(90deg, #E8DED4, #C9A227, #B23A3A, #8B2D2D, #1A1814);
            border-radius: 3px;
        }

        .legend-labels {
            display: flex;
            justify-content: space-between;
            width: 120px;
            font-size: 0.7rem;
            color: var(--color-secondary);
            margin-top: 3px;
        }

        .map-tip {
            text-align: center;
            color: var(--color-secondary);
            margin-top: 16px;
            font-size: var(--font-size-sm);
        }

        .map-review-number {
            text-align: center;
            color: var(--color-secondary);
            margin-top: 6px;
            font-size: 0.65rem;
            opacity: 0.7;
            letter-spacing: 0.5px;
        }

        .map-sidebar {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .stats-card {
            border-radius: 0;
            padding: 20px;
            border: none;
            background: transparent;
            box-shadow: none;
        }

        .stats-card-title {
            font-family: var(--font-serif);
            font-size: var(--font-size-base);
            color: var(--color-cinnabar);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stats-card-title i {
            color: var(--color-gold);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .stat-item {
            text-align: center;
            padding: 12px;
            background: transparent;
            border-radius: 0;
            border-bottom: 1px dotted var(--color-earth);
        }

        .stat-value {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            color: var(--color-cinnabar);
            line-height: 1.2;
        }

        .stat-label {
            font-size: var(--font-size-xs);
            color: var(--color-secondary);
            margin-top: 4px;
        }

        .city-ranking-card {
            border-radius: 0;
            padding: 20px;
            border: none;
            background: transparent;
            box-shadow: none;
            flex: 1;
            max-height: 420px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .city-list {
            overflow-y: auto;
            flex: 1;
            padding-right: 4px;
        }

        .city-list::-webkit-scrollbar {
            width: 4px;
        }

        .city-list::-webkit-scrollbar-track {
            background: rgba(178, 58, 58, 0.05);
            border-radius: 2px;
        }

        .city-list::-webkit-scrollbar-thumb {
            background: rgba(178, 58, 58, 0.2);
            border-radius: 2px;
        }

        .city-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background: rgba(247, 244, 238, 0.5);
            border-radius: 0;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .city-item:hover {
            background: rgba(178, 58, 58, 0.1);
            border-color: rgba(178, 58, 58, 0.2);
            transform: translateX(5px);
        }

        .city-rank {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.75rem;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .rank-1 {
            background: linear-gradient(135deg, #C9A227, #D4AF37);
            color: #1A1814;
        }

        .rank-2 {
            background: linear-gradient(135deg, #8B7355, #A8A8A8);
            color: #1A1814;
        }

        .rank-3 {
            background: linear-gradient(135deg, #8B5A2B, #CD7F32);
            color: #fff;
        }

        .rank-default {
            background: rgba(178, 58, 58, 0.15);
            color: var(--color-cinnabar);
        }

        .city-info {
            flex: 1;
            min-width: 0;
        }

        .city-name {
            font-weight: 600;
            font-size: var(--font-size-sm);
            color: var(--color-ink);
        }

        .city-desc {
            font-size: 0.7rem;
            color: var(--color-secondary);
        }

        .city-count {
            font-weight: 700;
            color: var(--color-cinnabar);
            font-size: var(--font-size-sm);
            margin-left: 8px;
        }

        /* 地图相关动画 */
        .gsap-map-wrapper {
            opacity: 0;
            transform: translateY(30px);
        }

        .gsap-stats-card {
            opacity: 0;
            transform: translateX(30px);
        }

        .gsap-city-ranking {
            opacity: 0;
            transform: translateX(30px);
        }

        /* 响应式地图 */
        @media (max-width: 1024px) {
            .map-wrapper {
                grid-template-columns: 1fr;
            }

            .map-sidebar {
                flex-direction: row;
                flex-wrap: wrap;
            }

            .stats-card,
            .city-ranking-card {
                flex: 1;
                min-width: 280px;
            }

            .city-ranking-card {
                max-height: 300px;
            }
        }

        @media (max-width: 768px) {
            .map-chart {
                height: 350px;
            }

            .map-sidebar {
                flex-direction: column;
            }
        }

        /* 布局卡片 - 当前HTML使用arch-interactive-section替代，保留layout-case供未来使用 */

        /* 案例卡片 */
        .layout-case {
            grid-column: 1 / -1;
            border: 1px solid rgba(198, 93, 59, 0.3);
            border-radius: 0;
            padding: var(--spacing-xl);
            opacity: 0;
            transform: translateY(40px);
        }

        .layout-case h3 {
            color: var(--color-highlight);
            margin-bottom: var(--spacing-md);
            font-size: var(--font-size-2xl);
        }

        .case-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-md);
        }

        .case-header h3 {
            margin-bottom: 0;
        }

        .case-badge {
            background: linear-gradient(135deg, var(--color-highlight), #B8860B);
            color: white;
            padding: 6px 16px;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-sm);
            font-weight: 600;
            letter-spacing: 0.08em;
        }

        .case-tags {
            display: flex;
            gap: var(--spacing-xs);
            flex-wrap: wrap;
            margin-top: var(--spacing-md);
        }

        .tag {
            background: linear-gradient(135deg, var(--color-highlight), var(--color-gold));
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-full);
            font-size: var(--font-size-sm);
        }

        /* ====== [第17章] 式样构成 - 山墙横向滚动 #gables ====== */
        .gables-section {
            background: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
        }

        /* 横向滚动区域 - 复刻 test.html */
        .gables-horizontal-section {
            height: 100vh;
            width: 100%;
            position: relative;
        }

        .gables-horizontal-wrapper {
            display:flex;
            width: 518vw;
            height: 100vh;
        }

        .gable-panel {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            background:#f6f1e1;
        }

        /* 山墙面板大标题 - 固定在视口右上角，不挤占容器 */
        .gable-panel-title {
            position: fixed;
            top: 8vh;
            right: 6vw;
            z-index: 5;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            pointer-events: none;
            transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
        }
        .gable-panel-title.fade-out {
            opacity: 0;
            transform: translateY(-16px) scale(0.96);
            visibility: hidden;
        }
        .gable-panel-title .gable-title-main {
            font-family: 'Huiwen-MinchoGBK', 'Noto Serif SC', serif;
            font-size: clamp(2.2rem, 4.5vw, 4rem);
            font-weight: 700;
            color: var(--color-earth, #8B7355);
            letter-spacing: 0.25em;
            writing-mode: vertical-rl;
            text-orientation: upright;
            line-height: 1.3;
            text-shadow: 0 2px 12px rgba(139,115,85,0.12);
        }
        .gable-panel-title  {
            font-family: 'Noto Serif SC', serif;
            font-size: clamp(0.65rem, 1vw, 0.85rem);
            color: #a89a80;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            margin-top: 12px;
            writing-mode: vertical-rl;
            opacity: 0.7;
        }
        .gable-title-sub{
           height: 200px;
           font-family: 'Noto Serif SC', serif;
            font-size: clamp(0.65rem, 1vw, 0.85rem);
            color: #554d3e;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            margin-top: 12px;
            writing-mode: vertical-rl;
            opacity: 1;
        }
        /* 定位锚点容器 - 与gable-panel同尺寸 */
        .gable-dingwei {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* ====== 山墙图片介绍文本框（点击切换显示/隐藏）====== */
        .gable-info-trigger {
            transition: filter 0.3s ease, transform 0.3s ease;
        }
        .gable-info-trigger:hover {
            filter: brightness(1.02) drop-shadow(0 2px 8px rgba(0,0,0,0.15));
            transform: scale(1.02);
        }
        .gable-info-trigger.active {
            filter: brightness(1.05) drop-shadow(0 4px 12px rgba(10, 51, 61, 0.25));
            outline-offset: 3px;
        }

        /* 文本框：默认隐藏，absolute定位不占文档流 */
        .gable-info-box {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 10;
            padding: 16px 20px;
            max-width: 680px;
            height: auto;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
            transform: translateY(12px) scale(0.95);

            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .gable-info-box.visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }

        .gable-info-box h5 {
            font-family: 'Noto Serif SC', serif;
            font-size: 2rem;
            font-weight: 700;
            color:var(--color-earth);
            margin: 0;
            letter-spacing: 0.08em;
            writing-mode: vertical-rl;
            flex-shrink: 0;
            padding-top: 2px;
        }

        /* 右侧内容容器：包裹所有文本和子级展开，不受竖排影响 */
        .gable-info-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        .gable-info-box p {
            font-size: 0.85rem;
            line-height: 1.75;
            color: #4a4538;
            margin: 0;
        }

        /* ====== 山墙信息框 - 摘要文字 ====== */
        .gable-info-summary {
            font-size: 0.82rem;
            line-height: 1.7;
            color: #5c5648;
            border-left: 3px solid var(--color-earth);
            padding-left: 10px;
            margin-bottom: 12px !important;
        }

        /* ====== 子级展开系统 ====== */
        .gable-sub-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 6px;
        }

        .gable-sub-item {
            background: rgba(255,255,255,0.55);
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(139,115,85,0.12);
            transition: all 0.25s ease;
        }
        .gable-sub-item:hover {
            border-color: rgba(139,115,85,0.28);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .gable-sub-item.expanded {
            border-color: rgba(139,115,85,0.35);
            box-shadow: 0 3px 12px rgba(0,0,0,0.08);
        }

        /* 子项标题栏 */
        .gable-sub-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 13px;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s ease;
        }
        .gable-sub-header:hover {
            background: rgba(139,115,85,0.07);
        }
        .gable-sub-header > i:first-child {
            font-size: 0.78rem;
            color: var(--color-earth);
            width: 18px;
            text-align: center;
        }
        .gable-sub-header span {
            flex: 1;
            font-family: 'Noto Serif SC', serif;
            font-size: 0.84rem;
            font-weight: 600;
            color: #3d382f;
            letter-spacing: 0.04em;
        }

        /* 箭头旋转动画 */
        .sub-arrow {
            font-size: 0.65rem !important;
            color: #999;
            transition: transform 0.3s cubic-bezier(.4,0,.2,1);
        }
        .gable-sub-item.expanded .sub-arrow {
            transform: rotate(180deg);
        }

        /* 子项内容区（可折叠） */
        .gable-sub-body {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
            padding: 0 13px;
        }
        .gable-sub-item.expanded .gable-sub-body {
            max-height: 300px;
            opacity: 1;
            padding: 0 13px 11px 13px;
        }

        /* 标签组 */
        .sub-tag-group {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 7px;
        }
        .sub-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.72rem;
            padding: 3px 9px;
            background: linear-gradient(135deg, #ede4cc, #e8dcc0);
            border-radius: 20px;
            color: #5c5040;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }
        .sub-tag:hover {
            transform: scale(1.05);
        }
        .sub-tag i {
            font-size: 0.62rem;
            color: var(--color-earth);
        }
        .sub-tag.rank-gold {
            background: linear-gradient(135deg, #d4a853, #c49a47);
            color: #fff;
        }
        .sub-tag.rank-gold i { color: #fff; }

        .gable-sub-body p {
            font-size: 0.78rem;
            line-height: 1.7;
            color: #5c5648;
            margin: 0;
        }
        .gable-sub-body strong {
            color: var(--color-earth);
            font-weight: 600;
        }



        /* 寓意图案面板内容靠上排列，为详情下拉留出空间 */
        .gable-panel:has(.symbol-grid) {
            align-items: flex-start;
            padding-top: 30vh;
        }


        .gable-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 320px;
            padding: 0 var(--spacing-xl);
        }

        .gable-title {
            font-size: 2rem;
            font-weight: 400;
            letter-spacing: 0.1em;
            margin-bottom: var(--spacing-xs);
            color: var(--color-primary-dark);
        }

        .gable-title-en {
            font-size: 0.875rem;
            color: var(--color-gray-dark);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: var(--spacing-lg);
        }

        .gable-desc {
            margin-top: var(--spacing-lg);
            font-size: var(--font-size-base);
            text-align: center;
            color: var(--color-gray-dark);
            max-width: 300px;
            line-height: 1.8;
        }

        .gable-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-wash);
        }

        .gable-visual {
            background: linear-gradient(135deg, rgba(61, 122, 140, 0.08) 0%, rgba(178, 58, 58, 0.05) 100%);
            padding: var(--spacing-xl);
            display: flex;
            justify-content: center;
        }

        .gable-svg {
            width: 100%;
            max-width: 200px;
            height: auto;
        }

        .gable-path,
        .gable-curve {
            stroke-dasharray: 500;
            stroke-dashoffset: 500;
            transition: stroke-dashoffset 1.5s ease;
        }

        .gable-card:hover .gable-path,
        .gable-card:hover .gable-curve {
            stroke-dashoffset: 0;
        }

        /* 屋脊装饰 */


        .ridge-examples {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-md);
        }

        .ridge-example {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            height: 200px;
            opacity: 0;
            transform: translateY(30px);
        }

        .ridge-example img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: sepia(0.2);
            transition: all var(--transition-smooth);
        }

        .ridge-example:hover img {
            filter: sepia(0);
            transform: scale(1.15);
        }

        .example-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: var(--spacing-sm);
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: white;
            font-size: var(--font-size-sm);
            text-align: center;
            transform: translateY(100%);
            transition: transform var(--transition-smooth);
        }

        .ridge-example:hover .example-caption {
            transform: translateY(0);
        }

        /* ====== [第16章] 展览馆-技艺纹饰展厅 #ornaments ====== */
        .ornaments-section {
            background: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
        }

        /* ── 展厅容器 ── */
        .museum-gallery {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: var(--spacing-2xl) var(--spacing-lg);
        }

        /* ── 序厅导言 ── */
        .gallery-intro {
            text-align: center;
            margin-bottom: var(--spacing-3xl);
        }

        .gallery-hall-mark {
            display: inline-block;
            font-family: var(--font-sans);
            font-size: var(--font-size-xs);
            letter-spacing: 0.3em;
            color: var(--color-cinnabar);
            border: 1px solid rgba(178, 58, 58, 0.3);
            padding: 0.3rem 1rem;
            margin-bottom: var(--spacing-lg);
            text-transform: uppercase;
        }

        .gallery-lead {
            max-width: 720px;
            margin: var(--spacing-lg) auto 0;
            font-size: var(--font-size-base);
            line-height: 1.9;
            color: var(--color-secondary);
        }

        /* ── 展区单元 ── */
        .exhibition-zone {
            margin-bottom: var(--spacing-3xl);
            padding-bottom: var(--spacing-3xl);
            border-bottom: 1px solid rgba(139, 115, 85, 0.15);
        }

        .exhibition-zone:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .zone-label {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-xl);
        }

        .zone-number {
            font-family: var(--font-calligraphy);
            font-size: clamp(2rem, 4vw, 3rem);
            color: var(--color-gold);
            opacity: 0.7;
            line-height: 1;
            min-width: 3rem;
        }

        .zone-text h3 {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            color: var(--color-primary-dark);
            font-weight: 600;
            margin-bottom: 0.2rem;
        }

        .zone-text p {
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
            font-style: italic;
        }

        .zone--special {
            background: linear-gradient(135deg, rgba(201, 162, 39, 0.04), rgba(139, 115, 85, 0.04));
            border-radius: 0;
            padding: var(--spacing-2xl);
            border: none;
        }

        /* ── 展品卡片（兼容旧 .carving-types 网格布局）── */
        .carving-types {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-xl);
            margin-bottom: var(--spacing-3xl);
        }

        .exhibit-card,
        .carving-card {
            background: #f9f5ed;
            border-radius: 0;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-smooth);
            opacity: 0;
            transform: translateY(30px);
            border: 1px solid rgba(139, 115, 85, 0.1);
        }

        .carving-card:nth-child(even) {
            transform: translateY(30px); /* 统一方向，不再左右交错 */
        }

        .exhibit-card:hover,
        .carving-card:hover {
            transform: translateY(-8px) !important;
            box-shadow: var(--shadow-wash);
            border-color: var(--color-gold);
        }

        .exhibit-visual,
        .carving-image {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .exhibit-visual img,
        .carving-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: sepia(0.08);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .exhibit-card:hover .exhibit-visual img,
        .carving-card:hover .carving-image img {
            transform: scale(1.08);
            filter: sepia(0);
        }

        /* 标签角标（兼容旧 .carving-overlay / .carving-badge） */
        .carving-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            align-items: flex-end;
            padding: var(--spacing-md);
            background: linear-gradient(transparent 50%, rgba(26, 24, 20, 0.55));
        }

        .exhibit-tag,
        .carving-badge {
            background: linear-gradient(135deg, var(--color-cinnabar), #8B4513);
            color: #fff;
            padding: 0.3rem 0.85rem;
            border-radius: var(--radius-full);
            font-family: var(--font-sans);
            font-size: var(--font-size-xs);
            letter-spacing: 0.1em;
        }

        /* 展品信息区 */
        .exhibit-info,
        .carving-content {
            padding: var(--spacing-lg);
        }

        .exhibit-info h4,
        .carving-content h3 {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            color: var(--color-ink);
            margin-bottom: var(--spacing-sm);
            font-weight: 600;
            border-bottom: 2px solid var(--color-gold);
            padding-bottom: 0.5rem;
            display: inline-block;
        }

        .exhibit-info h4 small,
        .carving-content h3 small {
            font-weight: 400;
            font-size: 0.75em;
            color: var(--color-secondary);
            margin-left: 0.5rem;
            font-style: italic;
        }

        .exhibit-desc,
        .carving-content p {
            color: var(--color-secondary);
            line-height: 1.8;
            margin-bottom: var(--spacing-md);
            font-size: var(--font-size-sm);
        }

        /* 元信息条 */
        .exhibit-meta,
        .carving-meta {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
            font-size: var(--font-size-xs);
            color: var(--color-earth);
        }

        .exhibit-meta span,
        .carving-meta span {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.15rem 0.5rem;
            background: rgba(139, 115, 85, 0.06);
            border-radius: var(--radius-sm);
        }

        /* 关键词标签（兼容旧 .carving-patterns / .pattern-tag） */
        .carving-patterns,
        .exhibit-keywords {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-xs);
        }

        .exhibit-keywords li,
        .pattern-tag {
            list-style: none;
            background: linear-gradient(135deg, rgba(178, 58, 58, 0.07), rgba(178, 58, 58, 0.03));
            color: var(--color-cinnabar);
            padding: 0.28rem 0.65rem;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            transition: all var(--transition-fast);
            border: 1px solid transparent;
            cursor: default;
        }

        .exhibit-keywords li:hover,
        .pattern-tag:hover {
            background: var(--color-cinnabar);
            color: white;
            border-color: var(--color-cinnabar);
            transform: translateY(-1px);
        }

        /* ── 实物影像墙（兼容旧 .ridge-* 类）── */
        .artifact-wall,
        .ridge-decoration {
            margin-bottom: var(--spacing-2xl);
        }

        .ridge-examples {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--spacing-md);
        }

        .ridge-example {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            height: 200px;
            opacity: 0;
            transform: translateY(30px);
            border: 2px solid transparent;
            transition: border-color var(--transition-base);
        }

        .ridge-example:hover {
            border-color: var(--color-gold);
        }

        .ridge-example img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: sepia(0.12);
            transition: all 0.7s ease;
        }

        .ridge-example:hover img {
            filter: sepia(0);
            transform: scale(1.08);
        }

        .example-caption {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            padding: var(--spacing-sm);
            background: linear-gradient(transparent, rgba(26, 24, 20, 0.88));
            color: #fff;
            font-size: var(--font-size-sm);
            text-align: center;
            transform: translateY(100%);
            transition: transform var(--transition-base);
            letter-spacing: 0.05em;
        }

        .ridge-example:hover .example-caption {
            transform: translateY(0);
        }

        /* ── 特别展区说明卡片（兼容旧 .extra-* 类）── */
        .special-exhibits,
        .extra-carvings {
            background: transparent;
            padding: 0;
            border-radius: 0;
            margin: 0;
            border: none;
            opacity: 0;
            transform: translateY(20px);
        }

        .special-exhibits h3,
        .extra-carvings h3 {
            display: none; /* 隐藏旧标题，由 zone-label 替代 */
        }

        .extra-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: var(--spacing-lg);
        }

        .special-card,
        .extra-item {
            padding: var(--spacing-lg);
            border-radius: 0;
            border-left: 3px solid var(--color-gold);
            background: linear-gradient(90deg, rgba(201, 162, 39, 0.03), transparent);
            transition: all var(--transition-base);
        }

        .special-card:hover,
        .extra-item:hover {
            border-left-color: var(--color-cinnabar);
            background: linear-gradient(90deg, rgba(178, 58, 58, 0.05), transparent);
            transform: translateX(4px);
        }

        .card-icon {
            color: var(--color-gold);
            margin-right: 0.4rem;
            font-size: 0.85em;
        }

        .special-card h4,
        .extra-item h4 {
            font-family: var(--font-serif);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-sm);
            font-size: var(--font-size-base);
        }

        .special-card em,
        .extra-item h4 em {
            font-weight: 400;
            font-style: normal;
            font-size: 0.82em;
            color: var(--color-secondary);
            margin-left: 0.35rem;
        }

        .special-card p,
        .extra-item p {
            color: var(--color-secondary);
            font-size: var(--font-size-sm);
            line-height: 1.7;
        }

        /* 寓意图案 — 古风纸质感：无容器边框，墨染交互 */
        .symbol-gallery {
            padding: var(--spacing-2xl);
            border-radius: 0;
            color: var(--color-primary-dark);
            opacity: 0;
            transform: translateY(40px);
            border: none;
            background: transparent;
        }

        .symbol-gallery h3 {
            font-family: var(--font-serif);
            font-size: var(--font-size-2xl);
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .symbol-gallery h3 i {
            margin-right: var(--spacing-sm);
        }

        /* 符号网格：横向flex布局 + 溢出可见确保hover展开不裁切 */
        .symbol-grid {
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: var(--spacing-md);
            overflow: visible;
            padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-2xl); /* 底部留足空间给详情面板 */
        }

        /* 【古风改造】墨点底纹 + 朱砂下划线交互 */
        .symbol-item {
            text-align: center;
            padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md);
            background: transparent;
            border-radius: 0;
            transition: background var(--transition-base), 
                        transform var(--transition-bounce), 
                        border-color var(--transition-base),
                        box-shadow var(--transition-bounce),
                        z-index 0s;
            cursor: pointer;
            opacity: 0;
            transform: scale(0.8);
            border: none;
            border-bottom: 2px dotted var(--color-cinnabar);
            flex-shrink: 0;
            min-width: 90px;
            position: relative;
            z-index: 1;
        }

        /* hover时：从底部向上墨染 + 下划线变实线 */
        .symbol-item:hover,
        .symbol-item:focus-within {
            background: linear-gradient(to top, rgba(201,162,39,0.07), transparent 70%);
            transform: translateY(-4px);
            z-index: 50 !important;
            box-shadow: none;
            border-bottom-style: solid;
            border-bottom-color: var(--color-gold);
        }

        /* 展开态不使用scale，避免绝对定位子元素被缩放偏移 */
        .symbol-item:has(details[open]) {
            background: linear-gradient(to top, rgba(178,58,58,0.08), transparent 70%);
            transform: translateY(-4px);
            z-index: 50 !important;
            box-shadow: none;
            border-bottom-style: solid;
            border-bottom-color: var(--color-cinnabar);
        }

        /* ====== 纯CSS点击展开：details/summary 内嵌描述 ======
           details绝对定位于卡片下方，宽度继承父容器 */
        .symbol-item details {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 200;
            margin-top: var(--spacing-sm);
            display: block;
            width: 100%;
        }

        /* summary作为隐式触发器 */
        .symbol-item summary {
            list-style: none;
            cursor: pointer;
            background: transparent;
            outline: none;
            padding: var(--spacing-xs) var(--spacing-sm);
            display: inline-block;
            font-size: var(--font-size-xs);
            color: var(--color-highlight);
            opacity: 0.7;
            border: 1px solid rgba(201, 162, 39, 0.25);
            border-radius: 2px;
            transition: opacity 0.2s, color 0.2s;
            line-height: 1;
        }
        .symbol-item summary::-webkit-details-marker { display: none; }
        .symbol-item summary:hover { opacity: 1; color: var(--color-gold); }
        .symbol-item:focus-within > summary { opacity: 1; box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.4); }
        /* 收起态提示文字 */
        .symbol-item:not(details[open]) summary::after { content: ' 点击查看'; }
        /* 展开态提示文字 */
        .symbol-item details[open] summary::after { content: ' 点击收起'; }

        /* 描述面板 — 宣纸卷轴效果，宽度与纹样卡片等宽，文字自动换行 */
        .symbol-item details .symbol-detail {
            display: none;
            letter-spacing: 0.05em;
            font-size: var(--font-size-sm);
            color: var(--color-primary-dark);
            background: var(--paper-light);
            max-height: 400px;
            padding: var(--spacing-md);
            border-radius: 0;
            width: 100%;
            box-sizing: border-box;
            word-break: break-word;
            border: 1px solid #d4c4a8;
            box-shadow:
                inset 0 0 20px rgba(139,115,85,0.06),
                2px 2px 8px rgba(0,0,0,0.08);
            position: relative;
            writing-mode: vertical-rl;
            text-align: left;
        }

        /* 展开时动画滑入 */
        .symbol-item details[open] .symbol-detail {
            display: block;
            animation: symbolDetailExpand 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        @keyframes symbolDetailExpand {
            from { opacity: 0; transform: translateY(-10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* 详情标题样式（竖排中文） */
        .symbol-detail strong {
            color: var(--color-gold);
            display: block;
            font-family: var(--font-serif);
            font-size: var(--font-size-base);
            letter-spacing: 0.5em;
            margin-bottom: 1.2em;
        }

        .symbol-icon {
            font-family: var(--font-serif);
            font-size: var(--font-size-2xl);
            margin-bottom: var(--spacing-xs);
        }

        .symbol-item span {
            display: block;
            font-size: var(--font-size-sm);
            opacity: 0.9;
            color: var(--color-secondary);
        }

        /* ====== [第19章] 总结结尾章节 #ending（HTML第8部分）======
   包含：ending-section / quote-block(引用) / ending-cards(卡片) / closing-cta
   / section-indicator(圆点导航) / back-to-top(回到顶部) */
        .ending-section {
            background: #ede4cc;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
            min-height: 80vh;
        }

        .quote-block {
            position: relative;
            max-width: 900px;
            margin: 0 auto var(--spacing-3xl);
            padding: var(--spacing-2xl);
            opacity: 0;
            transform: translateY(40px);
        }

        .quote-start,
        .quote-end {
            position: absolute;
            color: var(--color-secondary);
            opacity: 0.3;
        }

        .quote-start {
            top: 0;
            left: 0;
        }

        .quote-end {
            bottom: 0;
            right: 0;
        }

        .quote-block blockquote {
            position: relative;
            padding: var(--spacing-xl);
        }

        .quote-block p {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            font-style: italic;
            line-height: 1.9;
            color: var(--color-primary-dark);
            text-align: center;
            quotes: "「" "」" "『" "』";
        }

        .quote-block p::before {
            content: open-quote;
            color: var(--color-highlight);
            font-size: 2em;
            line-height: 0;
            vertical-align: -0.4em;
            margin-right: 0.25em;
        }

        .quote-block p::after {
            content: close-quote;
            color: var(--color-highlight);
            font-size: 2em;
            line-height: 0;
            vertical-align: -0.6em;
            margin-left: 0.25em;
        }

        /* 结尾卡片 */
        .ending-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-3xl);
        }

        .ending-card {
            padding: var(--spacing-xl);
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            text-align: center;
            transition: all var(--transition-bounce);
            opacity: 0;
            transform: translateY(30px);
            border: none;
        }

        /* 右侧圆点章节导航 - 参考 test.html 侧边栏 */
        .section-indicator {
            position: fixed;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 16px;
            opacity: 0;
            transition: opacity var(--transition-base);
            pointer-events: none;
        }

        .section-indicator.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .indicator-item {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            cursor: pointer;
        }

        .indicator-dot {
            width: 8px;
            height: 8px;
            border: 1px solid var(--color-primary-dark);
            border-radius: 50%;
            flex-shrink: 0;
            transition: background var(--transition-base), transform var(--transition-base);
        }

        .indicator-item:hover .indicator-dot {
            background: var(--color-primary-dark);
            transform: scale(1.2);
        }

        .indicator-item.active .indicator-dot {
            background: var(--color-primary-dark);
            transform: scale(1.5);
        }

        .indicator-label {
            font-size: var(--font-size-xs);
            font-family: var(--font-sans);
            color: var(--color-secondary);
            letter-spacing: 0.1em;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(5px);
            transition: opacity var(--transition-base), transform var(--transition-base);
            pointer-events: none;
        }

        .indicator-item:hover .indicator-label,
        .indicator-item.active .indicator-label {
            opacity: 1;
            transform: translateX(0);
        }

        .indicator-item.active .indicator-label {
            color: var(--color-ink);
            font-weight: 500;
        }

        .back-to-top {
            position: fixed;
            right: 18px;
            bottom: 18px;
            width: 48px;
            height: 48px;
            padding: 0;
            background: rgba(223, 208, 179, 0.92);
            color: #fff;
            border: 1px solid rgba(201, 162, 39, 0.45);
            box-shadow: 0 14px 36px rgba(26, 24, 20, 0.22);
            cursor: pointer;
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
            transition: opacity var(--transition-base), transform var(--transition-base);
            overflow: hidden;
        }

        .back-to-top.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .back-to-top-progress {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0%;
            background: linear-gradient(180deg, rgba(201, 162, 39, 0.0), rgba(201, 162, 39, 0.35));
        }

        .back-to-top-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .ending-card:hover {
            transform: translateY(-8px) scale(1.03);
            box-shadow: var(--shadow-xl);
            border-color: rgba(178, 58, 58, 0.15);
        }

        .ending-card i {
            font-size: 2.5rem;
            color: var(--color-cinnabar);
            margin-bottom: var(--spacing-md);
            transition: transform var(--transition-bounce);
        }

        .ending-card:hover i {
            transform: scale(1.2) rotate(10deg);
        }

        .ending-card h4 {
            font-family: var(--font-serif);
            color: var(--color-ink);
            margin-bottom: var(--spacing-sm);
            font-weight: 600;
        }

        .ending-card p {
            color: var(--color-secondary);
            font-size: var(--font-size-sm);
            line-height: 1.6;
        }

        /* 结尾CTA */
        .closing-cta {
            text-align: center;
            opacity: 0;
            transform: translateY(30px);
        }

        .closing-cta>p {
            font-family: var(--font-serif);
            font-size: var(--font-size-xl);
            color: var(--color-secondary);
            margin-bottom: var(--spacing-xl);
        }

        /* 探索按钮样式已合并到 .btn-primary 统一样式中 */

        /* ====== [第24章] 页脚 #siteFooter ====== */
        .footer {
            background-color: var(--color-ink);
            color: var(--color-parchment);
            padding: var(--spacing-2xl) var(--spacing-lg);
        }

        .footer-content {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-xl);
            text-align: center;
        }

        .footer-info p {
            color: rgba(245, 240, 232, 0.7);
            font-size: var(--font-size-sm);
            line-height: 1.6;
        }

        .footer-links {
            display: flex;
            gap: var(--spacing-xl);
        }

        .footer-link {
            color: rgba(245, 240, 232, 0.8);
            text-decoration: none;
            font-size: var(--font-size-sm);
            transition: color var(--transition-fast);
            position: relative;
        }

        .footer-link:hover {
            color: var(--color-parchment);
        }

        .footer-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--color-cinnabar);
            transition: width var(--transition-smooth);
        }

        .footer-link:hover::after {
            width: 100%;
        }

        /* 页脚点击提示 */
        .footer-hint {
            font-size: var(--font-size-xs);
            color: rgba(245, 240, 232, 0.4);
            margin-top: 8px;
            letter-spacing: 0.1em;
        }

        .footer-hint i {
            margin-right: 4px;
            animation: footerPulse 2s ease-in-out infinite;
        }

        @keyframes footerPulse {

            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        /* ====== [第25章] 页脚信息弹窗 #footerPopup ====== */
        .footer-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 24, 20, 0.6);
            backdrop-filter: blur(8px);
            z-index: 20000;
            justify-content: center;
            align-items: center;
            animation: footerPopupFadeIn 0.25s ease-out;
        }

        .footer-popup.active {
            display: flex;
        }

        @keyframes footerPopupFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .footer-popup-content {
            background: #ede4cc;
            border: 1px solid rgba(201, 162, 39, 0.2);
            padding: 36px 40px;
            border-radius: 6px;
            max-width: 480px;
            width: 90%;
            position: relative;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
            animation: footerPopupSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes footerPopupSlideUp {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.96);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .footer-popup-content h3 {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-2xl);
            color: var(--color-primary-dark);
            letter-spacing: 4px;
            margin-bottom: 16px;
            padding-right: 28px;
            border-bottom: 2px solid var(--color-cinnabar);
            padding-bottom: 12px;
        }

        .footer-popup-content p,
        .footer-popup-content ul {
            color: var(--color-secondary);
            line-height: 1.9;
            font-size: var(--font-size-base);
        }

        .footer-popup-content p+p,
        .footer-popup-content ul {
            margin-top: 10px;
        }

        .footer-popup-content li {
            margin-bottom: 5px;
            list-style-position: inside;
        }

        .footer-popup-content strong {
            color: var(--color-cinnabar);
        }

        .footer-popup-close {
            position: absolute;
            top: 14px;
            right: 18px;
            font-size: 26px;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--color-secondary);
            transition: color 0.15s ease;
            line-height: 1;
            padding: 4px;
        }

        .footer-popup-close:hover {
            color: var(--color-cinnabar);
        }

        /* ====== [第27章] 响应式设计 @media queries ====== */
        @media (max-width: 768px) {
            :root {
                --header-height: 3.5rem;
                --spacing-xl: 2rem;
                --spacing-2xl: 3rem;
                --spacing-3xl: 4rem;
            }

            .section-indicator {
                display: none;
            }

            .nav-content {
                padding: 0 var(--spacing-md);
            }

            .nav-progress-wrap {
                display: none;
            }

            .nav-menu {
                position: fixed;
                top: var(--header-height);
                left: 0;
                width: 100%;
                background: rgba(250, 248, 245, 0.98);
                backdrop-filter: blur(20px);
                flex-direction: column;
                padding: var(--spacing-lg);
                gap: var(--spacing-md);
                transform: translateY(-100%);
                opacity: 0;
                visibility: hidden;
                transition: all var(--transition-base);
                box-shadow: var(--shadow-md);
            }

            .nav-menu.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }

            .nav-toggle {
                display: block;
            }

            .section {
                padding: var(--spacing-2xl) var(--spacing-md);
            }

            .hero-title {
                font-size: clamp(2rem, 10vw, 4rem);
            }

            .gables-horizontal-wrapper,
            .carving-types,
            .style-features,
            .ending-cards {
                grid-template-columns: 1fr;
            }

            .symbol-grid {
                gap: var(--spacing-sm);
                padding: var(--spacing-md) var(--spacing-sm);
            }

            .footer-links {
                flex-direction: column;
                gap: var(--spacing-md);
            }
        }

        /* ====== [第28章] 打印样式 @media print ====== */
        @media print {

            .fixed-bg,
            .nav-container,
            .scroll-indicator,
            .explore-button,
            .footer {
                display: none;
            }

            body {
                color: black;
            }

            .main-content {
                margin-top: 0;
            }
        }

        /* ====== [第22章] 建筑图形交互模块 - 形制构造区域平面图/演变流程/弹窗/提示框 ======
   对应 HTML: .arch-interactive-section / .evolution-flow / .plan-container / #archModal / #archTooltip */
        .arch-interactive-section {
            background: transparent;
            border-radius: 0;
            padding: var(--spacing-2xl);
            border: none;
            margin-top: var(--spacing-2xl);
        }

        .arch-interactive-header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .arch-interactive-title {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-2xl);
            color: var(--color-primary-dark);
            letter-spacing: 0.1em;
            margin-bottom: var(--spacing-sm);
        }

        .arch-interactive-subtitle {
            font-size: var(--font-size-base);
            color: var(--color-secondary);
            font-weight: 300;
            letter-spacing: 0.05em;
        }

        /* 演变流程 */
        .evolution-flow {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            padding: 25px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 0;
            margin-bottom: var(--spacing-xl);
            flex-wrap: wrap;
            border: 1px solid rgba(139, 115, 85, 0.1);
        }

        .evolution-item {
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-base);
            padding: 15px;
            border-radius: 4px;
        }

        .evolution-item:hover {
            background: rgba(26, 24, 20, 0.06);
            transform: translateY(-3px);
        }

        .evolution-item.active {
            background: rgba(26, 24, 20, 0.08);
            box-shadow: 0 4px 15px rgba(26, 24, 20, 0.12);
        }

        .evolution-svg {
            width: 160px;
            height: 70px;
        }

        .evolution-label {
            font-size: var(--font-size-sm);
            color: var(--color-primary-dark);
            margin-top: 8px;
            letter-spacing: 2px;
            font-family: var(--font-serif);
        }

        .evolution-arrow {
            font-size: 22px;
            color: var(--color-secondary);
            animation: archPulse 1.5s infinite;
        }

        @keyframes archPulse {

            0%,
            100% {
                opacity: 0.5;
            }

            50% {
                opacity: 1;
            }
        }

        /* 建筑平面图网格 */
        .arch-plans-grid {
            display: grid;
            grid-template-columns: 1fr 1.3fr 1fr;
            gap: var(--spacing-lg);
            align-items: start;
        }

        .plan-section {
            text-align: center;
        }

        .section-label {
            font-size: var(--font-size-base);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-md);
            letter-spacing: 4px;
            font-weight: 600;
            font-family: var(--font-calligraphy);
        }

        .plan-container {
            background: #fff;
            border: 2px solid var(--color-primary-dark);
            border-radius: 6px;
            padding: 16px;
            cursor: pointer;
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
        }

        .plan-container:hover {
            box-shadow: 0 8px 28px rgba(26, 24, 20, 0.18);
            transform: translateY(-5px);
            
        }

        .plan-container::after {
            content: '点击查看详情';
            position: absolute;
            bottom: 8px;
            right: 10px;
            font-size: 11px;
            color: var(--color-cinnabar);
            opacity: 0;
            transition: opacity var(--transition-base);
            font-family: var(--font-sans);
        }

        .plan-container:hover::after {
            opacity: 1;
        }

        .plan-svg {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 中间区域 */
        .center-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .center-plan {
            background: #fff;
            border: 2px solid var(--color-primary-dark);
            border-radius: 6px;
            padding: 16px;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .center-plan:hover {
            box-shadow: 0 8px 28px rgba(26, 24, 20, 0.18);
            
        }

        .center-label {
            font-size: var(--font-size-sm);
            color: var(--color-primary-dark);
            margin-bottom: 12px;
            letter-spacing: 3px;
            font-weight: 600;
            font-family: var(--font-calligraphy);
        }

        .center-svg {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 提示框 */
        .arch-tooltip {
            position: fixed;
            background: rgba(26, 24, 20, 0.94);
            backdrop-filter: blur(10px);
            color: #ede4cc;
            padding: 14px 18px;
            border-radius: 6px;
            font-size: 13px;
            line-height: 1.7;
            max-width: 280px;
            pointer-events: none;
            opacity: 0;
            transition: opacity var(--transition-base);
            z-index: 10000;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(201, 162, 39, 0.2);
            font-family: var(--font-sans);
        }

        .arch-tooltip.visible {
            opacity: 1;
        }

        .arch-tooltip strong {
            color: #ecdfb2;
        }

        .arch-tooltip ul {
            margin-top: 10px;
            padding-left: 18px;
        }

        .arch-tooltip li {
            line-height: 1.6;
        }

        /* 弹窗 */
        .arch-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 24, 20, 0.75);
            backdrop-filter: blur(5px);
            z-index: 20000;
            justify-content: center;
            align-items: center;
        }

        .arch-modal-content {
            background: #ede4cc;
            padding: 40px;
            border-radius: 6px;
            max-width: 580px;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(201, 162, 39, 0.15);
        }

        .arch-modal-close {
            position: absolute;
            top: 14px;
            right: 20px;
            font-size: 28px;
            cursor: pointer;
            color: var(--color-secondary);
            transition: color var(--transition-fast);
            line-height: 1;
        }

        .arch-modal-close:hover {
            color: var(--color-cinnabar);
        }

        .arch-modal-title {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-2xl);
            color: var(--color-primary-dark);
            margin-bottom: var(--spacing-md);
            letter-spacing: 4px;
            padding-right: 36px;
        }

        .arch-modal-text {
            font-size: var(--font-size-sm);
            line-height: 2;
            color: var(--color-gray-dark);
            font-family: var(--font-sans);
        }

        .arch-modal-text p {
            margin-bottom: 10px;
        }

        .arch-modal-text ul {
            margin-top: 12px;
            padding-left: 22px;
        }

        .arch-modal-text li {
            margin-bottom: 6px;
        }

        .arch-modal-text strong {
            color: var(--color-primary-dark);
        }

        /* 响应式 */
        @media (max-width: 1024px) {
            .arch-plans-grid {
                grid-template-columns: 1fr;
            }

            .evolution-flow {
                flex-wrap: wrap;
            }

            .evolution-arrow {
                display: none;
            }

            .center-section {
                order: -1;
            }

            .arch-interactive-section {
                padding: var(--spacing-lg);
            }
        }

        @media (max-width: 600px) {
            .evolution-svg {
                width: 120px;
                height: 55px;
            }

            .arch-modal-content {
                padding: var(--spacing-xl);
                margin: var(--spacing-md);
            }
        }
                .logo {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-2xl);
            color: var(--color-cinnabar);
            font-weight: 700;
            letter-spacing: 0.05em;
        }
        /******************************
        *****************************
        *介绍岭南建筑三种样式的功能
        ****************************
        ***************************
       *******************************/
        /* ====== 主布局：左右分栏 ====== */
        .main-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: var(--spacing-lg);
            align-items: start;
            margin-top: 6em;
        }

        /* ====== 左侧：图标区 ====== */
        .storytelling-wrapper {
            width: 100%;
            min-width: 0;
            overflow: visible;
        }

        .icons-showcase {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xl);
            width: 100%;
        }

        .icon-row {
            display: flex;
            gap: var(--spacing-lg);
            position: relative;
            align-items: flex-start;
            width: 100%;
        }

        .icon-wrapper {
            text-align: center;
            cursor: pointer;
            transition: transform var(--transition-slow);
            flex-shrink: 0;
        }

        .icon-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-slow);
            position: relative;
            opacity: 0;
            transform: scale(0.5) rotate(-180deg);
        }

        .icon-circle img {
            width: 10vw;
            height: auto;
            object-fit: contain;
            transition: all var(--transition-slow);
            filter: drop-shadow(0 2px 6px rgba(139, 69, 19, 0.15));
        }

        .icon-circle.visible {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .icon-circle.active img {
            filter: drop-shadow(0 4px 12px rgba(180, 80, 20, 0.35));
            transform: scale(1.16) translateY(-2px);
        }

        .icon-wrapper:hover .icon-circle img {
            transform: scale(1.12) translateY(-2px);
            filter: drop-shadow(0 6px 16px rgba(139, 69, 19, 0.3));
        }

        .icon-wrapper:hover .icon-circle.active img {
            transform: scale(1.18) translateY(-3px);
            filter: drop-shadow(0 8px 20px rgba(180, 80, 20, 0.4));
        }

        .icon-label {
            margin-top: var(--spacing-sm);
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-xl);
            color: var(--color-cinnabar);
            opacity: 0;
            transform: translateY(10px);
            transition: all var(--transition-slow);
        }

        .icon-label.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ====== 图标右侧横向内容区 ====== */
        .icon-content {
            display: flex;
            gap: var(--spacing-lg);
            flex: 1 1 auto;
            min-width: 0;
            max-height: 0;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
            align-items: flex-start;
        }

        .icon-content.visible {
            max-height: none;
            opacity: 1;
            padding-top: var(--spacing-xs);
            flex: 1 1 auto;
        }

        .content-text {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
            max-width: 40%;
            flex: 1;
        }

        .content-title {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-xl);
            color: var(--color-cinnabar);
            font-weight: 600;
        }

        .content-subtitle {
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
        }

        .content-desc {
            font-size: var(--font-size-sm);
            color: var(--color-gray-dark);
            line-height: 1.7;
        }

        .content-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 4px;
        }

        .building-tag {
            background: rgba(139, 69, 19, 0.1);
            color: var(--color-cinnabar);
            padding: 4px 10px;
            border-radius: var(--radius-full);
            font-size: var(--font-size-xs);
            transition: all var(--transition-fast);
        }

        .building-tag:hover {
            background: var(--color-cinnabar);
            color: white;
        }

        /* ====== 卡片2x2网格（堆叠效果） ====== */
        .card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            width: 260px;
            flex-shrink: 0;
            position: relative;
            overflow: visible;
            transition: all 0.3s ease;
        }

        .grid-card {
            width: 100%;
            height: 90px;
            border-radius: var(--radius-lg);
            overflow: visible;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
            border: 2px solid rgba(139, 69, 19, 0.1);
            opacity: 0;
            transform: translateY(12px) scale(0.92);
            position: relative;
            z-index: 1;
        }

        .grid-card.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* 底部行（第3、4张卡片）堆叠在后面微微露出 */
        .grid-card:nth-child(3),
        .grid-card:nth-child(4) {
            margin-top: -70px;
            z-index: 0;
            transform: translateY(15px) scale(0.9);
        }

        .grid-card:nth-child(3).visible,
        .grid-card:nth-child(4).visible {
            opacity: 0.55;
            transform: translateY(0) scale(0.92);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            filter: brightness(0.92);
        }

        /* 堆叠底部行悬停时展开浮起 */
        .grid-card:nth-child(3):hover,
        .grid-card:nth-child(4):hover {
            opacity: 1;
            transform: translateY(-6px) scale(1.05);
            box-shadow: 0 10px 24px rgba(139, 69, 19, 0.25);
            
            z-index: 3;
            filter: brightness(1);
        }

        /* 顶部行悬停 */
        .grid-card:nth-child(1):hover,
        .grid-card:nth-child(2):hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 20px rgba(139, 69, 19, 0.25);
            
            z-index: 2;
        }

        .grid-card.active {
            box-shadow: 0 6px 18px rgba(139, 69, 19, 0.3);
            z-index: 4;
        }

        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* 渐变色占位背景 */
        .card-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-family: var(--font-calligraphy);
            color: white;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }


        .card-placeholder .card-name {
            font-size: 0.7rem;
            font-weight: 600;
        }

        /* 民居系列配色 */
        .card-bg-minju-1 { background: linear-gradient(135deg, #8B4513, #A0522D); }
        .card-bg-minju-2 { background: linear-gradient(135deg, #6B3410, #8B5A2B); }
        .card-bg-minju-3 { background: linear-gradient(135deg, #7B3F00, #9B6030); }
        .card-bg-minju-4 { background: linear-gradient(135deg, #5C3317, #7B4B2A); }

        /* 园林系列配色 */
        .card-bg-yuanlin-1 { background: linear-gradient(135deg, #DAA520, #B8860B); }
        .card-bg-yuanlin-2 { background: linear-gradient(135deg, #C4961A, #A07808); }
        .card-bg-yuanlin-3 { background: linear-gradient(135deg, #B8940F, #9A7B0A); }
        .card-bg-yuanlin-4 { background: linear-gradient(135deg, #CC9E15, #AA8210); }

        /* 会馆书院系列配色 */
        .card-bg-hg-1 { background: linear-gradient(135deg, #8B7355, #6B5340); }
        .card-bg-hg-2 { background: linear-gradient(135deg, #7A6248, #5D4A38); }
        .card-bg-hg-3 { background: linear-gradient(135deg, #9B8365, #7A6B55); }
        .card-bg-hg-4 { background: linear-gradient(135deg, #6E5B47, #544435); }

        /* ====== 右侧固定区域 ====== */
        .right-panel {
            position: sticky;
            top: var(--spacing-lg);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
        }

        /* ====== 环形图区域 ====== */
        .donut-section {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .donut-section-title {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-xl);
            color: var(--color-cinnabar);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .badge {
            background: var(--color-cinnabar);
            color: white;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            font-weight: 500;
            font-family: var(--font-sans);
        }

        /* 环形图 */
        .donut-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) 0;
        }

        .donut-chart-container {
            position: relative;
            width: 280px;
            height: 280px;
            flex-shrink: 0;
        }

        /* 环形图中心内容 */
        .donut-center-group {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
            z-index: 2;
        }

        .donut-center-img {
            width: 52px;
            height: 52px;
            object-fit: contain;
            margin-bottom: 6px;
            display: block;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        .donut-section:hover .donut-center-img {
            transform: scale(1.15) rotate(5deg);
            filter: drop-shadow(0 4px 10px rgba(139, 69, 19, 0.3));
        }

        .donut-center-value {
            font-family: var(--font-calligraphy);
            color: var(--color-cinnabar);
            font-weight: 700;
            line-height: 1.2;
            transition: all 0.3s ease;
        }

        .donut-center-label {
            font-size: var(--font-size-sm);
            color: var(--color-secondary);
            margin-top: 4px;
        }

        .donut-center-icon {
            font-size: 3rem;
            margin-bottom: 6px;
            display: block;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
        }

        /* 环形图图例（环形图下方） */
        .donut-legend {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-xs);
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            flex-direction: column;
            align-items: right;
            gap: 4px;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-base);
            opacity: 0.6;
            border: 1px solid transparent;
            font-size: 12px;
            line-height: 19px;
            color: #2D2926;
            width: 90px;
            height: 42px;
        }

        .legend-item:hover {
            opacity: 0.85;
            background: rgba(139, 69, 19, 0.05);
        }

        .legend-item.active {
            opacity: 1;
            background: rgba(139, 69, 19, 0.08);
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .legend-item.active .legend-color {
            transform: scale(1.15);
        }

        .legend-color.minju { background: #8B4513; }
        .legend-color.yuanlin { background: #DAA520; }
        .legend-color.hg { background: #8B7355; }

        .legend-text {
            font-size: var(--font-size-sm);
            color: var(--color-ink);
        }

        .legend-value {
            font-family: var(--font-calligraphy);
            font-weight: 600;
            color: var(--color-cinnabar);
            margin-left: auto;
        }

        /* 数据来源科普卡片 */
        .data-source-note {
            background: linear-gradient(135deg, rgba(139,69,19,0.04), rgba(218,165,32,0.04));
            border: 1px solid rgba(139, 69, 19, 0.15);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            font-size: var(--font-size-xs);
            line-height: 1.7;
            color: var(--color-secondary);
        }
        .data-source-note .data-source-title {
            font-weight: 600;
            color: var(--color-ink);
            margin-bottom: var(--spacing-xs);
            padding-bottom: var(--spacing-xs);
            border-bottom: 1px dashed rgba(139, 69, 19, 0.2);
        }
        .data-source-note .data-source-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }
        .data-source-note .data-source-list li {
            position: relative;
            padding-left: 14px;
        }
        .data-source-note .data-source-list li::before {
            content: '·';
            position: absolute;
            left: 2px;
            color: var(--color-cinnabar);
            font-weight: bold;
            font-size: 1.1em;
        }
        .data-source-note .data-source-list strong {
            color: var(--color-cinnabar);
        }

        /* 统计数据 */
        .stats-section {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-md);
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-2xl);
            color: var(--color-cinnabar);
            font-weight: 700;
        }

        .stat-label {
            font-size: var(--font-size-sm);
            color: var(--color-gray-dark);
            margin-top: 2px;
        }

        /* ====== 下方内容区 ====== */
        .main-content {
            margin-top: var(--spacing-2xl);
        }

        /* 地图区域 */
        .map-section {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .map-container {
            height: 320px;
            position: relative;
            overflow: hidden;
        }

        .map-visual {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .map-svg {
            width: 90%;
            height: 90%;
            opacity: 0.7;
        }

        .map-point {
            fill: var(--color-cinnabar);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .map-point:hover {
            r: 8;
            filter: drop-shadow(0 0 8px rgba(139, 69, 19, 0.6));
        }

        .map-label {
            font-size: 10px;
            fill: var(--color-ink);
            pointer-events: none;
        }

        /* 特色说明 */
        .features-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-lg);
            margin-top: var(--spacing-xl);
        }

        .feature-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .feature-title {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-xl);
            color: var(--color-cinnabar);
        }

        .feature-desc {
            font-size: var(--font-size-sm);
            color: var(--color-gray-dark);
            line-height: 1.7;
        }


        /* 自定义滚动条 */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: rgba(107, 91, 78, 0.1); }
        ::-webkit-scrollbar-thumb { background: var(--color-earth); border-radius: var(--radius-full); }
        ::-webkit-scrollbar-thumb:hover { background: var(--color-cinnabar); }

        /* ====== 卡片原地展开详情 ====== */
        .card-grid.has-expanded {
            z-index: 10;
            width: 360px;
            grid-template-columns: 1fr;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 展开时，其他卡片隐藏不占位 */
        .card-grid.has-expanded .grid-card:not(.expanded) {
            display: none;
        }

        /* 展开卡片：在文档流中撑开父容器 */
        .grid-card.expanded {
            position: relative;
            width: 100%;
            z-index: 10;
            opacity: 1 !important;
            filter: none !important;
            margin-top: 0 !important;
            height: auto;
            display: flex;
            flex-direction: column;
            cursor: default;
            animation: cardExpandIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        @keyframes cardExpandIn {
            0% {
                transform: scale(0.88) translateY(6px);
                opacity: 0;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            }
            60% {
                opacity: 0.5;
            }
            100% {
                transform: scale(1) translateY(0);
                opacity: 1;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            }
        }

        /* 收起动画 */
        .grid-card.collapsing {
            animation: cardCollapseOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes cardCollapseOut {
            0% {
                transform: scale(1) translateY(0);
                opacity: 1;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            }
            100% {
                transform: scale(0.88) translateY(6px);
                opacity: 0;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            }
        }


        /* 展开时占位区域变大作为主展示 */
        .grid-card.expanded .card-placeholder {
            height: 210px;
            gap: 6px;
        }

        .grid-card.expanded .card-placeholder .card-icon {
            font-size: 2.6rem;
        }

        .grid-card.expanded .card-placeholder .card-name {
            font-size: 1rem;
        }

        /* 详情内容区：默认隐藏在底部，hover时上浮出现 */
        .card-detail {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px 12px;
            background: linear-gradient(transparent, rgba(97, 90, 77, 0.88) 35%);
            color: white;
            flex-direction: column;
            gap: 2px;
            transform: translateY(20px);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
            backdrop-filter: blur(2px);
        }

        .grid-card.expanded .card-detail {
            display: flex;
        }

        .grid-card.expanded:hover .card-detail {
            transform: translateY(0);
            opacity: 1;
        }

        .grid-card.expanded .card-detail-name {
            color: white;
            font-size: var(--font-size-sm);
        }

        .grid-card.expanded .card-detail-type {
            color: rgba(255,255,255,0.65);
        }

        .grid-card.expanded .card-detail-desc {
            color: rgba(255,255,255,0.85);
        }

        .card-detail-name {
            font-family: var(--font-calligraphy);
            font-size: var(--font-size-sm);
            color: var(--color-cinnabar);
            font-weight: 700;
        }

        .card-detail-type {
            font-size: 0.65rem;
            color: var(--color-secondary);
            margin-bottom: 2px;
        }

        .card-detail-desc {
            font-size: 0.68rem;
            color: var(--color-gray-dark);
            line-height: 1.6;
        }


        .grid-card.expanded  {
            opacity: 1;
        }

        .card-detail-close:hover {
            background: rgba(139, 69, 19, 0.7);
            transform: scale(1.15);
        }

        /* ========== 轮播悬浮箭头指示 ========== */
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 80px;
            color:#d3b981;
            font-size: 42px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .card-grid.has-expanded .carousel-nav {
            opacity: 1;
            visibility: visible;
        }

        .carousel-nav:hover {
            transform: translateY(-50%) scale(1.1);
            border-color: transparent;
        }

        .carousel-nav:active {
            transform: translateY(-50%) scale(0.95);
        }

        .carousel-nav.prev {
            left: -16px;
        }

        .carousel-nav.next {
            right: -16px;
        }

        /* 箭头图标微调 */
        .carousel-nav i {
            line-height: 1;
        }

        /* 轮播进度指示器（小圆点） */
        .carousel-dots {
            position: absolute;
            bottom: -28px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 7px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .card-grid.has-expanded .carousel-dots {
            opacity: 1;
            visibility: visible;
        }

        .carousel-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(139, 69, 19, 0.25);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0;
        }

        .carousel-dot.active {
            background: rgba(214.79, 193.77, 157.47, 0.42);
            transform: scale(1.25);
            box-shadow: 0 2px 8px rgba(180, 56, 36, 0.4);
        }

        .carousel-dot:hover:not(.active) {
            background: rgba(139, 69, 19, 0.55);
            transform: scale(1.1);
        }

        /* building-tag 可点击提示 */
        .building-tag {
            cursor: pointer;
        }

        .building-tag:hover {
            transform: translateY(-1px);
        }

        /* ========== 滚动叙事系统 (Scroll Storytelling) ========== */
        
        /* 完整视图按钮 - 位于图标展示区下方左侧 */
        .step-complete-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px;
            margin-top: var(--spacing-sm);
            background: transparent;
            color: var(--color-cinnabar);
            border: 1.5px solid var(--color-cinnabar);
            border-radius: 2px;
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.06em;
            white-space: nowrap;
            opacity: 1 !important;
        }

        .step-complete-btn:hover {
            color: white;
            background: var(--color-cinnabar);
        }

        .step-complete-btn:active {
            transform: scale(0.97);
        }

        /* 滚动提示动画 */
        .scroll-prompt {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: var(--color-secondary);
            font-size: 13px;
            letter-spacing: 0.15em;
            z-index: 400;
            opacity: 0;
            animation: promptPulse 2s ease-in-out infinite;
            pointer-events: none;
        }

        .scroll-prompt.visible {
            opacity: 0.7;
        }

        @keyframes promptPulse {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(8px); }
        }

        .scroll-prompt-arrow {
            width: 22px;
            height: 22px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            margin-top: 2px;
        }


        /* 锁定滚动时的遮罩提示 */
        .scroll-lock-hint {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            background: rgba(44, 36, 22, 0.75);
            color: #f5f0e6;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 12px;
            z-index: 450;
            opacity: 0;
            transition: all 0.3s ease;
            backdrop-filter: blur(8px);
            pointer-events: none;
        }

        .scroll-lock-hint.show {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }
/************岭南建筑基础介绍组件end**************/


        /******************************
        *****************************
        * 时间轴相关样式 
        ****************************
        ***************************
       *******************************/

        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 页面顶部标题区 */
        .page-header {
            text-align: center;
            padding: 80px 20px 40px;
            background: linear-gradient(180deg, rgba(26,24,20,0.06) 0%, transparent 100%);
        }
        
        .page-header h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 900;
            background: linear-gradient(135deg, var(--color-earth) 0%, var(--color-ink) 50%, var(--color-earth) 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            line-height: 1.2;
            margin-bottom: 1rem;
        }
        
        .page-header p {
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: var(--color-secondary);
            font-weight: 300;
            letter-spacing: 0.2em;
        }
        
        /* 时间轴容器 */
        .timeline-wrapper {
            position: relative;
            max-width: 1400px;
            margin: 0 auto;
            padding: 100px 20px;
        }
        
        /* 中央时间轴*/
        .timeline-spine {
            position: absolute;
            left: 50%;
            top: 80px;
            bottom: 400px;   
            width: 2px;
            background: linear-gradient(to bottom, 
                var(--color-earth) 0%, 
                var(--color-secondary) 40%, 
                var(--color-ink) 85%, 
                transparent 100%);
            transform: translateX(-50%);
            box-shadow: 0 0 20px rgba(139, 115, 85, 0.2);
        }
        
        /* 时间节点 */
        .timeline-item {
            position: relative;
            margin-bottom: 120px;
            display: flex;
            align-items: flex-start;
            opacity: 0;
            transform: translateY(50px);
        }
        
        .timeline-item.visible {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .timeline-item:nth-child(odd) {
            flex-direction: row-reverse;
        }
        
        /* 节点标记 */
        .timeline-marker {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: var(--bg-color);
            border: 3px solid var(--color-earth);
            border-radius: 50%;
            z-index: 10;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 0 4px rgba(139, 115, 85, 0.15);
        }
        
        .timeline-marker:hover {
            transform: translateX(-50%) scale(1.5);
            border-color: var(--color-primary-dark);
            box-shadow: 0 0 30px rgba(139, 115, 85, 0.4);
        }
        
        .timeline-marker.active {
            background: var(--color-earth);
            transform: translateX(-50%) scale(1.3);
            box-shadow: 0 0 40px rgba(139, 115, 85, 0.5);
        }
        
        .timeline-marker.disaster {
            border-color: var(--color-ink);
            box-shadow: 0 0 0 4px rgba(45, 41, 38, 0.15);
        }
        
        .timeline-marker.disaster:hover {
            box-shadow: 0 0 30px rgba(45, 41, 38, 0.4);
        }
        
        .timeline-marker.protection {
            border-color: var(--color-secondary);
            box-shadow: 0 0 0 4px rgba(107, 91, 78, 0.15);
        }
        
        /* 内容卡片 - 纸张风格 */
        .timeline-card {
            width: 42%;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(139, 115, 85, 0.15);
            border-radius: 24px;
            padding: 40px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        
        .timeline-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(139, 115, 85, 0.08) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.5s;
        }
        
        .timeline-card:hover::before {
            opacity: 1;
        }
        
        .timeline-card:hover {
            transform: translateY(-10px);
            border-color: rgba(139, 115, 85, 0.3);
            box-shadow: 0 30px 60px rgba(26, 24, 20, 0.12);
        }
        
        .timeline-item:nth-child(odd) .timeline-card:hover {
            transform: translateY(-10px) translateX(-5px);
        }
        
        .timeline-item:nth-child(even) .timeline-card:hover {
            transform: translateY(-10px) translateX(5px);
        }
        
        /* 年份显示 */
        .year-display {
            font-size: 4rem;
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 1px rgba(139, 115, 85, 0.25);
            position: absolute;
            top: -20px;
            right: 20px;
            font-family: 'Noto Serif SC', serif;
            transition: all 0.5s;
        }
        
        .timeline-card:hover .year-display {
            -webkit-text-stroke: 1px rgba(139, 115, 85, 0.6);
            color: rgba(139, 115, 85, 0.08);
        }
        
        .year-text {
            font-size: 0.9rem;
            color: var(--color-earth);
            font-weight: 600;
            letter-spacing: 0.2em;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .year-text::before {
            content: '';
            width: 30px;
            height: 1px;
            background: var(--color-earth);
        }
        
        /* 标签 */
        .event-tags {
            display: flex;
            gap: 8px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .event-tag {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
            border: 1px solid;
            transition: all 0.3s;
        }
        
        .tag-repair {
            color: var(--color-earth);
            border-color: rgba(139, 115, 85, 0.3);
            background: rgba(139, 115, 85, 0.08);
        }
        
        .tag-disaster {
            color: var(--color-ink);
            border-color: rgba(45, 41, 38, 0.25);
            background: rgba(45, 41, 38, 0.06);
        }
        
        .tag-protection {
            color: var(--color-secondary);
            border-color: rgba(107, 91, 78, 0.3);
            background: rgba(107, 91, 78, 0.08);
        }
        
        /* 详情面板 - 手风琴效果 */
        .detail-wrapper {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 0;
        }
        
        .detail-wrapper.expanded {
            max-height: 600px;
            margin-top: 24px;
        }
        
        .detail-content {
            padding: 24px;
            background: rgba(26, 24, 20, 0.06);
            border-radius: 16px;
            border-left: 3px solid var(--color-earth);
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }
        
        .detail-item {
            padding: 16px;
            background: rgba(26, 24, 20, 0.03);
            border-radius: 12px;
            border: 1px solid rgba(139, 115, 85, 0.1);
        }
        
        .detail-label {
            font-size: 0.75rem;
            color: var(--color-gray-dark);
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        .detail-value {
            font-size: 1.1rem;
            color: var(--color-ink);
            font-weight: 500;
        }
        
        /* 数据仪表盘区域 */
        .data-dashboard {
            background: linear-gradient(180deg, rgba(26, 24, 20, 0.04) 0%, rgba(139, 115, 85, 0.06) 100%);
            padding: 100px 20px;
            position: relative;
        }

        .dashboard-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 60px;
            background: linear-gradient(135deg, var(--color-earth), var(--color-ink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .chart-container {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(139, 115, 85, 0.12);
            border-radius: 24px;
            padding: 30px;
            transition: all 0.4s;
        }
        
        .chart-container:hover {
            border-color: rgba(139, 115, 85, 0.25);
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(26, 24, 20, 0.1);
        }
        
        /* 统计卡片 */
        .stats-bar {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 60px;
            flex-wrap: wrap;
        }
        
        .stat-card {
            background: linear-gradient(135deg, rgba(139, 115, 85, 0.08), rgba(107, 91, 78, 0.06));
            border: 1px solid rgba(139, 115, 85, 0.15);
            border-radius: 20px;
            padding: 30px 40px;
            text-align: center;
            min-width: 180px;
            transition: all 0.4s;
            position: relative;
            overflow: hidden;
            filter: blur(1px);
            backdrop-filter: blur(4px);
        }
        
        .stat-card::after {
            content: '';
            position: absolute;
            left: 0;
            top: -100%;
            width: 100%;
            height: 120%;
            background: linear-gradient(
                180deg,
                transparent 0%,
                transparent 15%,
                rgba(236, 223, 178, 0.18) 35%,
                rgba(236, 223, 178, 0.32) 50%,
                rgba(236, 223, 178, 0.18) 65%,
                transparent 85%,
                transparent 100%
            );
            filter: blur(2px);
            backdrop-filter: blur(8px);
            transition: top 0.8s ease-in-out;
        }
        
        .stat-card:hover::after {
            top: 100%;
        }
        
        .stat-card:hover {
            transform: translateY(-10px);
            border-color: rgba(139, 115, 85, 0.3);
            box-shadow: 0 20px 40px rgba(139, 115, 85, 0.1);
            filter: blur(0px);
            backdrop-filter: blur(0px);
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 900;
            color: var(--color-earth);
            line-height: 1;
            margin-bottom: 8px;
        }

        .stat-label {
            color: var(--color-secondary);
            font-size: 0.9rem;
        }
        
        /* 响应式 */
        @media (max-width: 968px) {
            .timeline-spine {
                left: 30px;
            }
            
            .timeline-item,
            .timeline-item:nth-child(odd) {
                flex-direction: column;
                padding-left: 80px;
            }
            
            .timeline-card {
                width: 100%;
            }
            
            .timeline-marker {
                left: 30px;
            }
            
            .year-display {
                font-size: 3rem;
                top: -10px;
            }
            
            .charts-grid {
                grid-template-columns: 1fr;
            }

            /* 移动端展开模式禁用 */
            .timeline-wrapper.expanded-mode {
                display: block;
            }
        }


/* ========== 卡片展开/收起模式样式 ========== */


/* --- 容器层 --- */
.timeline-wrapper.expanded-mode {
    display: flex;
    flex-direction: column;
    position: relative;
}

/*
 * spine 双锚位：
 * 默认 left 1/6（奇数项/右开）
 * 加 .spine-right 类 → left 5/6（偶数项/左开）
 */
.timeline-wrapper.expanded-mode .timeline-spine {
    left: calc(100% / 6);
    z-index: 8;   /* 高于遮罩(5)，低于卡片(15) */
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}
.timeline-wrapper.expanded-mode.spine-right .timeline-spine {
    left: calc((100% / 6) * 5);
}

/* --- 每个 item：块级流，撑满宽度 --- */
.timeline-wrapper.expanded-mode .timeline-item {
    display: block !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    position: relative;
    min-height: 44px;
    transition: all 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- marker 绝对定位，跟随 spine 位置 --- */
.timeline-wrapper.expanded-mode .timeline-marker {
    position: absolute !important;
    top: 10px;
    transform: translateX(-50%);
    z-index: 12;  /* 高于 spine(8) 和遮罩(5)，低于卡片(15) */
    cursor: pointer !important;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;

    /* 默认跟随 spine-left (16.67%) */
    left: calc(100% / 6) !important;
}
/* spine-right 时所有 marker 同步移动 */
.timeline-wrapper.expanded-mode.spine-right .timeline-marker {
    left: calc((100% / 6) * 5) !important;
}

/* --- 卡片：绝对定位，在 spine/marker 上方 --- */
.timeline-wrapper.expanded-mode .timeline-card {
    position: absolute !important;
    top: 0;
    z-index: 15;   /* 最高层：卡片 > marker > spine > 遮罩 */
    max-width: 960px;
    padding: 42px 48px;
    box-shadow: 0 24px 72px rgba(26, 24, 20, 0.14);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 22px;
    transition: opacity 0.35s ease,
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

/* ========== 收起状态的 item ==========
 * marker 正常大小清晰排列在当前 spine 位置上，可点击切换
 */
.timeline-wrapper.expanded-mode .timeline-item:not(.item-active) {
    opacity: 1;
    margin-bottom: 8px;
    min-height: 50px;
}
.timeline-wrapper.expanded-mode .timeline-item:not(.item-active) .timeline-marker {
    width: 14px; height: 14px;
    border-width: 2px;
    background: var(--bg-color);
    border-color: var(--color-earth);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.12);
    opacity: 0.85;
}
.timeline-wrapper.expanded-mode .timeline-item:not(.item-active) .timeline-marker:hover {
    transform: translateX(-50%) scale(1.4) !important;
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 16px rgba(139, 115, 85, 0.35);
}
.timeline-wrapper.expanded-mode .timeline-item:not(.item-active) .timeline-card {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute !important;
    transform: translateY(8px);
}

/* ========== 激活状态 ========== */
.timeline-wrapper.expanded-mode .timeline-item.item-active {
    margin-bottom: 80px;
    min-height: auto;
    opacity: 1 !important;
    ;
}

.timeline-wrapper.expanded-mode .timeline-item.item-active .timeline-marker {
    top: 36px;
    width: 22px; height: 22px;
    border-width: 3px;
    background: var(--color-earth);
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 45px rgba(139, 115, 85, 0.5) !important;
    transform: translateX(-50%) scale(1.5) !important;
}

/*
 * 卡片入场动画 + 内部滚动支持
 * 切换时先从轻微上浮+透明渐入，避免突然弹出
 */
.timeline-wrapper.expanded-mode .timeline-item.item-active .timeline-card {
    animation: cardEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    /* 内部滚动：卡片内容超出时允许纵向滚动，不影响页面滚动 */
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* 视口高度减去上下留白 */
    overscroll-behavior-y: contain; /* 防止滚动穿透到父级 */
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

/* 自定义滚动条样式 — 岭南风格 */
.timeline-wrapper.expanded-mode .timeline-item.item-active .timeline-card::-webkit-scrollbar {
    width: 5px;
}
.timeline-wrapper.expanded-mode .timeline-item.item-active .timeline-card::-webkit-scrollbar-track {
    background: transparent;
}
.timeline-wrapper.expanded-mode .timeline-item.item-active .timeline-card::-webkit-scrollbar-thumb {
    background: rgba(139, 115, 85, 0.3);
    border-radius: 10px;
}
.timeline-wrapper.expanded-mode .timeline-item.item-active .timeline-card::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 115, 85, 0.5);
}
@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---- 奇数项（第1,3,5...）：spine 在左侧 1/6，卡片向右展开 ---- */
.timeline-wrapper.expanded-mode .timeline-item.item-active:nth-child(odd) .timeline-card {
    left: calc((100% / 6) + 28px);
    right: 32px;
    width: auto !important;
}

/* ---- 偶数项（第2,4,6...）：spine 在右侧 5/6，卡片向左展开 ---- */
.timeline-wrapper.expanded-mode .timeline-item.item-active:nth-child(even) .timeline-card {
    left: 32px;
    right: calc((100% / 6) + 28px);  /* spine 在右侧 5/6，卡片占其左侧 */
    width: auto !important;
}

/* 详情面板自动展开 — 不再限制高度，由外层卡片滚动控制 */
.timeline-wrapper.expanded-mode .timeline-item.item-active .detail-wrapper {
    max-height: none; /* 移除800px限制，内容完整显示 */
    margin-top: 24px;
    transition: opacity 0.4s ease, margin-top 0.35s ease, transform 0.3s ease;
    animation: detailSlideIn 0.4s ease 0.15s both;
}
@keyframes detailSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.timeline-wrapper.expanded-mode .year-display { font-size: 3rem; top: -12px; right: 16px; }

/* --- 点击遮罩层 --- */
.expand-overlay-hint {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0; cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s;
    background: rgba(237, 228, 204, 0.08);
}
.expand-overlay-hint.visible { opacity: 1; pointer-events: auto; }

/* --- 滚动提示（展开模式进入时短暂显示）--- */
.scroll-hint {
    position: fixed;
    right: 40px; bottom: 50%;
    transform: translateY(50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease 0.8s;
}
.scroll-hint.show { opacity: 0.55; }
.scroll-hint span {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--color-earth);
    writing-mode: vertical-lr;
    text-orientation: mixed;
}
.scroll-hint svg {
    width: 18px; height: 28px;
    animation: scrollBounce 1.6s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ========== 页面浮动导航按钮（下一页/回到开头） ========== */
.page-nav-float {
position: fixed;
right: 32px;
bottom: 48px;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
.page-nav-float.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.page-nav-float a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #CD853F 100%);
color: #fff;
text-decoration: none;
box-shadow: 0 4px 20px rgba(139, 69, 19, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        background 0.3s ease;
position: relative;
overflow: hidden;
}
.page-nav-float a::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
}
.page-nav-float a:hover {
transform: scale(1.12) translateY(-2px);
box-shadow: 0 8px 30px rgba(139, 69, 19, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.page-nav-float a:hover::before { opacity: 1; }
.page-nav-float a:active {
transform: scale(0.95);
box-shadow: 0 2px 10px rgba(139, 69, 19, 0.3);
}
.page-nav-float a i {
font-size: 22px;
line-height: 1;
z-index: 1;
}
.page-nav-float a .nav-label {
font-size: 9px;
letter-spacing: 0.08em;
font-family: 'Noto Sans SC', sans-serif;
font-weight: 500;
opacity: 0.9;
z-index: 1;
}
/* 浮动呼吸动画 */
@keyframes floatNavPulse {
0%, 100% { box-shadow: 0 4px 20px rgba(139, 69, 19, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
50% { box-shadow: 0 6px 28px rgba(139, 69, 19, 0.5), 0 3px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}
.page-nav-float.visible a {
animation: floatNavPulse 2.5s ease-in-out infinite;
}
.page-nav-float.visible a:hover {
animation: none;
}