/*
================================================================================
  common.css - 全站公共样式 + CSS 变量定义

  ⚠️ 重要规则：所有 CSS 修改必须使用本文件中定义的变量
  ================================================================================

  CSS 变量系统（下方定义）：
  - 颜色系统   : --color-*
  - 字号阶梯   : --fs-sm, --fs-base, --fs-lg, --fs-xl, --fs-2xl, --fs-3xl, --fs-4xl
  - 间距系统   : --sp-1, --sp-2, --sp-3, --sp-4, --sp-5, --sp-6, --sp-8, --sp-10, --sp-12, --sp-14, --sp-16, --sp-20, --sp-24
  - 圆角系统   : --radius-sm, --radius-md, --radius-lg, --radius-full
  - 阴影系统   : --shadow-sm, --shadow-md, --shadow-lg
  - 字体系统   : --font-family

  禁止在任何 CSS 文件中硬编码：
  ✗ 颜色值：#333333, #C49A6C, rgba(...) 等
  ✗ 字号：14px, 16px, 24px 等
  ✗ 间距：8px, 16px, 20px 等
  ✗ 圆角：4px, 8px, 12px 等
  ✗ 阴影：0 4px 12px rgba(...) 等

  正确示例：
  ✓ color: var(--color-seal);
  ✓ font-size: var(--fs-2xl);
  ✓ padding: var(--sp-4);
  ✓ border-radius: var(--radius-md);
  ✓ box-shadow: var(--shadow-md);

  页头样式见 header.css，页脚样式见 footer.css，各页面样式见 page-*.css

================================================================================
*/
/* 在 CSS 中引入常规字重 */
@import url('//unpkg.com/harmonyos-sans-sc-webfont-splitted@1.1.0/dist/Regular.css');

/* 引入粗体 */
@import url('//unpkg.com/harmonyos-sans-sc-webfont-splitted@1.1.0/dist/Bold.css');
/* ========== CSS 变量 ========== */
:root {
    --color-bg-cream: #F5F0E8;
    --color-bg-cream-deep: #F3F2F1;   /* 页面背景：灰白（body 背景 / YUNNAN 专题白色竖线等均依赖此变量） */
    --color-bg-white: #FFFFFF;
    --color-bg-dark: #2c2826;
    --color-text-main:#2a2a2a;
    --color-text-dark: #333333;
    --color-text-body: #666666;
    --color-text-muted: #999999;
    --color-seal: #C5995C;
    --color-secondary: #A25A47;
    --color-seal-deep: #A0784C;
    --color-accent: #D4B89A;
    --color-border: #e8e1d6;
    --color-divider: #A8A8A8;
    --color-slot: #E5E5E5;
    --color-about-bg: rgb(248, 248, 248);
    /*--font-family: "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;*/
    --font-family: 'HarmonyOS Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --container-w: 1200px;

    /* about 页专用版心（不与其他页共享 .container） */
    --container-wide-w: 1545px;   /* 居左宽版心（品牌引言/展厅/关于我们） */
    --container-about-w: 1365px;  /* 居中窄版心（品牌定位/价值理念/品牌愿景） */

    /* 商品详情页相关推荐 */
    --goods-recommend-image-width-desktop: clamp(480px, 37.3vw, 716px);
    --goods-recommend-image-width-tablet: min(72vw, 720px);
    --goods-recommend-image-width-mobile: calc(100vw - var(--sp-8));
    --goods-recommend-slide-ratio: 716 / 452;
    --goods-recommend-side-peek-desktop: clamp(var(--sp-6), calc(8.8889vw - 10.6667px), 240px);
    --goods-recommend-side-peek-tablet: clamp(var(--sp-4), 4vw, var(--sp-6));
    --goods-recommend-side-peek-mobile: var(--sp-4);
    --goods-recommend-nav-offset-desktop: calc(28.5vw + var(--sp-16));

    /* 全局字体 */
    font-family: var(--font-family);
    --container-px: 20px;          /* 桌面无内边距，沿用现状 */
    --header-h: 56px;

    /* ===== 字号阶梯 ===== */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 48px;
    --fs-hero: clamp(48px, 5vw, 64px);

    /* ===== 字重 ===== */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ===== 行高 ===== */
    --lh-tight: 1.25;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;
    --lh-loose: 2.0;
    --lh-hero: 3.0;

    /* ===== 间距（4px 基准） ===== */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-9: 36px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-14: 56px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;
    --sp-30: 120px;

    /* ===== 圆角 ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* ===== 阴影 ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ========== 重置 ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--color-text-dark);
    background: var(--color-bg-cream-deep);
    line-height: var(--lh-normal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

ul,ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

/* ========== 通用「了解更多 / 更多资讯」链接 ==========
   首页各区块的「了解更多」类文字链接统一基类。
   各 section 类名（.philosophy-more / .yunnan-more / .sf-nav-more /
   .product-more / .charity-more / .footer-more）只保留布局属性，
   视觉由本类统一提供，改一处即可全站同步。 */
.more-link {
    display: inline-block;
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    letter-spacing: 1px;
    color: var(--color-text-dark);
    text-decoration: underline;
    transition: color 0.3s;
}

.more-link:hover {
    color: var(--color-secondary);
}

button {
    border: none;
    outline: none;
    font-family: inherit;
}

/* ========== 容器（版心分层） ========== */
/* 默认层：标准桌面 1200–1599px，版心 1200px */
.container {
    width: 100%;
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

/* 大屏：1600–1919px，版心 1440px */
@media (min-width: 1600px) {
    :root { --container-w: 1440px; --container-px: 0;}
}

/* 超宽屏：1920px 及以上，版心 1720px */
@media (min-width: 1920px) {
    :root { --container-w: 1720px; --container-px: 0; }
}

/* 平板：版心满宽 + 两侧留白 */
@media (max-width: 1199px) {
    :root { --container-w: 100%; --container-px: 24px; }
}

/* 手机：缩小留白 */
@media (max-width: 767px) {
    :root { --container-w: 100%; --container-px: 16px; }
}

/* ========== 印章图标 ========== */
.seal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-seal);
    color: #fff;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* ========== Page Banner（内页用） ========== */
.page-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 837;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to bottom, rgba(30, 40, 60, 0.35), rgba(20, 25, 35, 0.5)); */
    background: url('../images/index/banner-overlay.png') no-repeat top center;
    background-size: 100% auto;
}

.page-banner-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.content-right {
    text-align: right;
}

.content-center{
    text-align: center;
}

/* 顶部小标题：暖琥珀、字距宽 */
.page-banner-caption {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--color-seal);
    letter-spacing: 6px;
    margin-bottom: var(--sp-4);
}

.page-banner-en {
    font-size: var(--fs-base);
    letter-spacing: 4px;
    margin-bottom: var(--sp-6);
    opacity: 0.8;
    text-transform: uppercase;
    font-style: italic;
}

.page-banner-label{
    font-size: var(--fs-lg);
    color: var(--color-seal);
    margin-bottom: 0;
    letter-spacing: 1px;
}

.page-banner-title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-medium);
    letter-spacing: 4px;
    line-height: var(--lh-normal);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.page-banner-subtitle {
    font-size: var(--fs-hero);
    font-weight: var(--fw-medium);
    letter-spacing: 4px;
    line-height: var(--lh-normal);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.page-banner-desc {
    font-size: var(--fs-xl);
    letter-spacing: 4px;
    margin-top: var(--sp-6);
}

.page-banner-cta {
    display: inline-block;
    margin-top: var(--sp-6);
    font-size: var(--fs-base);
    color: #F8F3E8;
    letter-spacing: 2px;
    transition: opacity 0.3s;
    text-decoration: underline;
}

.page-banner-cta:hover {
    opacity: 0.7;
}

/* ========== Section Header ========== */
.section-header {
    text-align: center;
    margin-bottom: var(--sp-10);
}

.section-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    color: var(--color-text-dark);
    letter-spacing: 6px;
    position: relative;
    display: inline-block;
    padding: 0 50px;
}

.section-title::before,
.section-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: var(--color-border);
}

.section-title::before { left: 0; }
.section-title::after { right: 0; }

.section-subtitle {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    margin-top: var(--sp-2);
}

/* ========== image-text-block ========== */
.itb-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
}

.itb-layout--reverse {
    direction: rtl;
}

.itb-layout--reverse > * {
    direction: ltr;
}

.itb-image {
    overflow: hidden;
}

.itb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.itb-image:hover img {
    transform: scale(1.03);
}

.itb-title {

    font-size: var(--fs-2xl);
    font-weight: var(--fw-medium);
    color: var(--color-text-dark);
    margin-bottom: var(--sp-2);
    letter-spacing: 2px;
}

.itb-subtitle {
    font-size: var(--fs-base);
    color: var(--color-accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
}

.itb-body p {

    font-size: var(--fs-base);
    color: var(--color-text-body);
    line-height: var(--lh-loose);
    margin-bottom: var(--sp-2);
}

.itb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.itb-tag {
    display: inline-block;
    padding: 4px 14px;
    font-size: var(--fs-base);

    color: var(--color-seal);
    border: 1px solid var(--color-seal);
    letter-spacing: 1px;
    transition: all 0.3s;
}

.itb-tag:hover {
    background: var(--color-seal);
    color: #fff;
}

/* ========== 通用箭头按钮 ========== */
.nav-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    color: var(--color-text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.nav-arrow:hover:not(:disabled) {
    background: var(--color-seal);
    color: #fff;
    border-color: var(--color-seal);
}

.nav-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========== 响应式：手机 ========== */
@media (max-width: 768px) {
    .page-banner-caption {
        font-size: var(--fs-sm);
        letter-spacing: 4px;
        margin-bottom: var(--sp-6);
    }

    .page-banner-title,
    .page-banner-subtitle,
    .about-banner-title,
    .about-banner-subtitle {
        font-size: var(--fs-3xl);
        letter-spacing: 3px;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .page-banner-desc {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    /* 窄屏：banner 内容统一居中，避免右对齐贴边溢出 */
    .content-right {
        text-align: center;
    }

    .page-banner-en {
        font-size: var(--fs-xs);
        letter-spacing: 2px;
        margin-bottom: var(--sp-4);
    }

    .page-banner-label {
        font-size: var(--fs-sm);
        letter-spacing: 1px;
        margin-bottom: var(--sp-4);
    }

    .page-banner-desc {
        font-size: var(--fs-sm);
        letter-spacing: 3px;
        margin-top: var(--sp-4);
    }

    .page-banner-cta {
        font-size: var(--fs-sm);
        margin-top: var(--sp-4);
    }

    .section-title {
        font-size: var(--fs-xl);
        letter-spacing: 4px;
        padding: 0 var(--sp-8);
    }

    .itb-layout,
    .itb-layout--reverse {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        direction: ltr;
    }
}

/* ===== 窄屏（≤480px）：banner 内容进一步缩放 ===== */
@media (max-width: 480px) {
    .page-banner-caption {
        font-size: var(--fs-xs);
        letter-spacing: 2px;
        margin-bottom: var(--sp-4);
    }

    .page-banner-title,
    .page-banner-subtitle {
        font-size: var(--fs-2xl);
        letter-spacing: 2px;
    }

    .page-banner-en {
        letter-spacing: 1px;
    }

    .page-banner-desc {
        font-size: var(--fs-xs);
        letter-spacing: 2px;
    }
}

/* ========== recommend-section 推荐阅读区 ========== */
.recommend-section {
    padding: var(--sp-20) 0 var(--sp-24);
}

.recommend-header {
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-4);
}

.recommend-title {

    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--color-text-dark);
    text-align: left;
    padding: 0;
    position: static;
}

.recommend-title::before,
.recommend-title::after {
    content: none;
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
    margin-bottom: var(--sp-12);
}

.recommend-card {
    display: block;
    background: var(--color-bg-white);
    overflow: hidden;
    transition: transform 0.3s;
    padding: var(--sp-2);
}

.recommend-card:hover {
    transform: translateY(-4px);
}

.recommend-card-img {
    aspect-ratio: 528 / 317;
    overflow: hidden;
}

.recommend-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.recommend-card:hover .recommend-card-img img {
    transform: scale(1.05);
}

.recommend-card-body {
    padding: var(--sp-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.recommend-card-cat {

    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
}

.recommend-card-title {

    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--color-text-dark);
    line-height: var(--lh-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recommend-card-link {
    font-size: var(--fs-base);
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.3s;
    text-decoration: underline;
}

.recommend-card-link span{
  display: inline-block;
  margin-left: var(--sp-2);
  text-decoration: none;
}

.recommend-card-link:hover {
    color: var(--color-secondary);
}

.recommend-card-excerpt {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-normal);
}

.recommend-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
}

/* ========== Pagination 分页（全站公共） ========== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: var(--sp-8);
    margin-top: var(--sp-24);
}

/* 页码数字容器（主分页 + 各页 ES 分页共用同一布局，避免数字按钮纵向堆叠） */
#pagination-pages,
#artisanEsPages,
#storyEsPages,
#goodsSearchPages {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* 定位修饰：居右 */
.pagination--end {
    justify-content: flex-end;
}

/* 基础按钮 — 共享属性 */
.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.25s, background 0.25s;
}

/* 数字按钮 — 圆形、无边框 */
.pagination-num {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    font-size: var(--fs-base);
    color: var(--color-text-main);
}

.pagination-num:hover {
    color: var(--color-secondary);
}

.pagination-num.active {
    background: var(--color-secondary);
    color: #fff;
    font-weight: var(--fw-bold);
}

/* 上一页 / 下一页 — 纯文字链接风格 */
.pagination-prev,
.pagination-next {
    gap: var(--sp-1);
    padding: 0 var(--sp-2);
    font-size: var(--fs-base);
    color: var(--color-text-main);
    white-space: nowrap;
    font-weight: var(--fw-medium);
}

.pagination-prev:hover:not(:disabled),
.pagination-next:hover:not(:disabled) {
    color: var(--color-secondary);
}

.pagination-prev:disabled,
.pagination-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* 省略号 */
.pagination-dots {
    font-size: var(--fs-base);
    color: var(--color-text-main);
    padding: 0 2px;
}

/* ========== recommend 响应式 ========== */
@media (max-width: 1024px) {
    .recommend-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-6);
    }
}

@media (max-width: 768px) {
    .recommend-section {
        padding: 50px 0 60px;
    }

    .recommend-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}

/* ========== article-body 正文渲染 ========== */
.article-body {
    padding: var(--sp-12) 0 var(--sp-16);
}

.article-body-inner {
    max-width: 820px;
    margin: 0 auto;
    font-size: var(--fs-base);
    color: var(--color-text-dark);
    line-height: var(--lh-loose);
    letter-spacing: 0.5px;
}

.article-body-inner > p {
    margin-bottom: var(--sp-6);
    text-align: justify;
}

/* UEditorPlus 编辑器内图片默认居中显示，前台保持一致；
   排除用户显式设置左/右浮动或 align 属性的图片 */
.article-body-inner img:not([style*="float"]):not([align]) {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.ab-figure {
    margin: var(--sp-10) 0;
    width: 100%;
}

.ab-figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s;
}

.ab-figure:hover img {
    transform: scale(1.01);
}

.ab-figure figcaption {
    margin-top: var(--sp-2);
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    text-align: center;
    letter-spacing: 1px;

}

/* 图片组：按数量自适应 1 / 2 / 3+ 张 */
.ab-image-group {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-10) 0;
    /* 默认（3 张及以上）3 列，多出的自动换行 */
    grid-template-columns: repeat(3, 1fr);
}

.ab-image-group--1 {
    grid-template-columns: 1fr;
}

.ab-image-group--2 {
    grid-template-columns: repeat(2, 1fr);
}

.ab-group-item {
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.ab-group-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.ab-group-item:hover img {
    transform: scale(1.05);
}

/* ========== article-body / search-bar 响应式 ========== */
@media (max-width: 768px) {
    .article-body {
        padding: 32px 0 40px;
    }

    .article-body-inner {
        font-size: var(--fs-sm);
        line-height: 2;
    }

    .ab-image-group {
        grid-template-columns: 1fr 1fr;
    }

    .ab-image-group--1 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ab-image-group {
        grid-template-columns: 1fr;
    }

    .search-bar-btn {
        padding: var(--sp-2) 24px;
        letter-spacing: 2px;
    }
}

/* ========== photo-row 横排图集 ========== */
.photo-row {
    display: grid;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    grid-template-columns: repeat(3, 1fr);
}

.photo-row--1 {
    grid-template-columns: 1fr;
}

.photo-row--2 {
    grid-template-columns: repeat(2, 1fr);
}

.photo-row-item {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.photo-row-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.photo-row-item:hover img {
    transform: scale(1.05);
}

.photo-row-desc {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.photo-row-desc p {

    font-size: var(--fs-base);
    color: var(--color-text-body);
    line-height: var(--lh-loose);
    letter-spacing: 1px;
}

/* ========== feature-banner 背景图+文案区块 ========== */
.feature-banner-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--container-w);
    margin: 0 auto;
}

.feature-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.feature-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 50, 0.45);
}

.feature-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 var(--sp-6);
}

.feature-banner-title {

    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    letter-spacing: 6px;
    margin-bottom: var(--sp-3);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.feature-banner-subtitle {

    font-size: var(--fs-base);
    letter-spacing: 4px;
    opacity: 0.9;
}

/* ========== photo-row / feature-banner 响应式 ========== */
@media (max-width: 768px) {
    .photo-row {
        grid-template-columns: 1fr;
    }

    .feature-banner-title {
        font-size: var(--fs-2xl);
        letter-spacing: 3px;
    }

    .feature-banner-subtitle {
        font-size: var(--fs-sm);
    }
}

/* ========== quote-block 引言区 ========== */
/* --- center 居中变体（artisan / story） --- */
.quote-block--center {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.quote-block--center .quote-mark {

    font-size: var(--fs-hero);
    color: var(--color-border);
    line-height: 1;
    margin-bottom: var(--sp-3);
}

.quote-block--center .quote-text {

    font-size: var(--fs-base);
    color: var(--color-text-dark);
    line-height: var(--lh-loose);
    letter-spacing: 2px;
    margin-bottom: var(--sp-2);
}

.quote-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}

.quote-divider::before,
.quote-divider::after {
    content: '';
    width: 50px;
    height: 1px;
    background: var(--color-border);
    margin: 0 14px;
}

.quote-author {

    font-size: var(--fs-base);
    color: var(--color-text-muted);
    letter-spacing: 2px;
}

/* --- split 左右分栏变体（about） --- */
.quote-block--split {
    display: grid;
    grid-template-columns: 0.42fr 0.58fr;
    gap: 60px;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
}

.quote-decor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
}

.quote-pinyin {

    font-size: var(--fs-base);
    letter-spacing: 4px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.quote-decor-img {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-decor-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 无图时的纯 CSS 兜底：双圆叠加 + 引号 */
.quote-decor-fallback {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 90px;

    font-size: var(--fs-hero);
    line-height: 1;
    color: var(--color-seal);
}

.quote-decor-fallback::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8px;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: #d7d2ca;
    z-index: -1;
}

.quote-decor-fallback::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 6px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-seal);
    opacity: 0.85;
    z-index: -1;
}

.quote-content .quote-line {

    font-size: var(--fs-base);
    color: var(--color-text-body);
    line-height: var(--lh-loose);
    letter-spacing: 0.5px;
}

.quote-content .quote-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}

.quote-content .quote-label .label-en {

    font-size: var(--fs-base);
    letter-spacing: 3px;
    color: var(--color-seal);
    text-transform: uppercase;
}

.quote-content .quote-label .label-sep,
.quote-content .quote-label .label-cn {
    color: var(--color-seal);
    font-size: var(--fs-base);
    letter-spacing: 1px;
}

.quote-content .quote-label .label-cn {

}

@media (max-width: 768px) {
    .quote-block--center .quote-text {
        font-size: var(--fs-base);
    }

    .quote-block--split {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }

    .quote-content .quote-line {
        font-size: var(--fs-sm);
    }
}

/* ==========================================================
   原子工具类（Utility Classes）
   命名：{属性缩写}-{值}
   ========================================================== */

/* ===== 字号 ===== */
.fs-sm  { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-lg  { font-size: var(--fs-lg); }
.fs-xl  { font-size: var(--fs-xl); }
.fs-2xl { font-size: var(--fs-2xl); }
.fs-3xl { font-size: var(--fs-3xl); }
.fs-hero { font-size: var(--fs-hero); }

/* ===== 字重 ===== */
.fw-normal   { font-weight: var(--fw-normal); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

/* ===== 行高 ===== */
.lh-tight   { line-height: var(--lh-tight); }
.lh-normal  { line-height: var(--lh-normal); }
.lh-relaxed { line-height: var(--lh-relaxed); }
.lh-loose   { line-height: var(--lh-loose); }

/* ===== 文字颜色 ===== */
.text-dark   { color: var(--color-text-dark); }
.text-body   { color: var(--color-text-body); }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-seal); }
.text-white  { color: #fff; }

/* ===== 文字对齐 ===== */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ===== 字体 ===== */
.font-body  { font-family: var(--font-family); }

/* ===== 背景色 ===== */
.bg-cream { background-color: var(--color-bg-cream); }
.bg-white { background-color: var(--color-bg-white); }
.bg-dark  { background-color: var(--color-bg-dark); }

/* ===== 圆角 ===== */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ===== 阴影 ===== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ===== Flex 布局快捷 ===== */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }

/* ===== Padding（4px 基准） ===== */
.p-0  { padding: 0; }
.p-1  { padding: var(--sp-1); }
.p-2  { padding: var(--sp-2); }
.p-3  { padding: var(--sp-3); }
.p-4  { padding: var(--sp-4); }
.p-5  { padding: var(--sp-5); }
.p-6  { padding: var(--sp-6); }
.p-8  { padding: var(--sp-8); }
.p-10 { padding: var(--sp-10); }
.p-12 { padding: var(--sp-12); }
.p-16 { padding: var(--sp-16); }
.p-20 { padding: var(--sp-20); }

.pt-0  { padding-top: 0; }
.pt-2  { padding-top: var(--sp-2); }
.pt-4  { padding-top: var(--sp-4); }
.pt-6  { padding-top: var(--sp-6); }
.pt-8  { padding-top: var(--sp-8); }
.pt-10 { padding-top: var(--sp-10); }
.pt-12 { padding-top: var(--sp-12); }
.pt-16 { padding-top: var(--sp-16); }
.pt-20 { padding-top: var(--sp-20); }

.pb-0  { padding-bottom: 0; }
.pb-2  { padding-bottom: var(--sp-2); }
.pb-4  { padding-bottom: var(--sp-4); }
.pb-6  { padding-bottom: var(--sp-6); }
.pb-8  { padding-bottom: var(--sp-8); }
.pb-10 { padding-bottom: var(--sp-10); }
.pb-12 { padding-bottom: var(--sp-12); }
.pb-16 { padding-bottom: var(--sp-16); }
.pb-20 { padding-bottom: var(--sp-20); }

/* ===== Margin（4px 基准） ===== */
.m-0  { margin: 0; }
.m-1  { margin: var(--sp-1); }
.m-2  { margin: var(--sp-2); }
.m-3  { margin: var(--sp-3); }
.m-4  { margin: var(--sp-4); }
.m-5  { margin: var(--sp-5); }
.m-6  { margin: var(--sp-6); }
.m-8  { margin: var(--sp-8); }
.m-10 { margin: var(--sp-10); }
.m-12 { margin: var(--sp-12); }
.m-16 { margin: var(--sp-16); }
.m-20 { margin: var(--sp-20); }

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--sp-2); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }
.mt-20 { margin-top: var(--sp-20); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-10 { margin-bottom: var(--sp-10); }
.mb-12 { margin-bottom: var(--sp-12); }
.mb-16 { margin-bottom: var(--sp-16); }
.mb-20 { margin-bottom: var(--sp-20); }

/* ===== 通用 Section 间距 ===== */
.section       { padding: var(--sp-20) 0; }
.section--sm   { padding: var(--sp-12) 0; }
.section--lg   { padding: var(--sp-24) 0; }

/* ===== 按钮基础类 ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2) 28px;

    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: 1px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    line-height: var(--lh-tight);
}

.btn--primary {
    background: var(--color-seal);
    color: #fff;
}
.btn--primary:hover { background: var(--color-seal-deep); }

.btn--outline {
    background: transparent;
    color: var(--color-seal);
    border: 1px solid var(--color-seal);
}
.btn--outline:hover {
    background: var(--color-seal);
    color: #fff;
}

.btn--text {
    background: transparent;
    color: var(--color-seal);
    padding: 0;
    border: none;
    letter-spacing: 2px;
}
.btn--text:hover { opacity: 0.7; }

/* ===== 工具类响应式 ===== */
@media (max-width: 768px) {
    .section       { padding: var(--sp-12) 0; }
    .section--sm   { padding: var(--sp-8) 0; }
    .section--lg   { padding: var(--sp-16) 0; }

    .fs-hero { font-size: clamp(28px, 8vw, 48px); }
    .fs-3xl  { font-size: var(--fs-2xl); }
    .fs-2xl  { font-size: 22px; }
}

/* ==========================================================
   Design System — 语义 Typography 类
   底层全部映射到现有 Design Token，不新增 Token 变量
   ========================================================== */

/* ===== 正文 ===== */
.text-body-lg {

    font-size: var(--fs-lg);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relaxed);
    letter-spacing: 0.5px;
}

.text-body-md {

    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    letter-spacing: 0.5px;
}

.text-body-sm {

    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    letter-spacing: 0.5px;
}

/* ===== 标题 ===== */
.heading-xl {

    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: 2px;
}

.heading-l {

    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: 2px;
}

.heading-m {

    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: 1px;
}

.heading-s {

    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: 1px;
}

/* ===== 特殊标题 ===== */
.display-xl {

    font-size: var(--fs-hero);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.display-l {

    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: 8px;
}

/* ===== 辅助文字 ===== */
.caption {

    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    letter-spacing: 1px;
}

.label {

    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    letter-spacing: 2px;
}

/* ===== 按钮尺寸 ===== */
.btn-lg {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: 2px;
    padding: 12px 32px;
}

.btn-md {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: 1px;
    padding: var(--sp-2) 24px;
}

.btn-sm {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: 1px;
    padding: 8px 18px;
}