/* ============================================================
   荣昌陶现代国际艺术中心 · 全站样式
   设计依据：UI 设计需求说明书（陶土棕 #825F45 + 米白 #F8F5F0）
   文件作用：
     1) 全局基础（Reset + 设计令牌）
     2) 公共组件（顶部信息条 + 导航 + 页脚 + 页头）
     4) 通用区块（横幅、卡片网格、筛选、时间轴、表单、Lightbox）
     5) 各页面命名空间（.page-*）
     6) 响应式（PC/平板/手机）
============================================================ */

/* ============================================================
   1. Reset & 基础
      2. 清除页面上的<body class="index2"中的index2类名 2026-10-22 22：44
============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   0. 字体
   MyFont = 思源黑体 Source Han Sans K（1269KB，fsType=8 可编辑嵌入）
           覆盖 ASCII + 简体中文 + 繁体 + 日文 + 韩文
           仅 400 单字重；标题 font-weight:600 由浏览器合成
   ExtB   = SimSun-ExtB（16.6MB）
           ⚠ 仅含 ASCII + U+20000–U+2FFFF 扩展B区生僻字
           ⚠ 完全不含基本汉字区 U+4E00–U+9FFF
           ⚠ 所以只能放字体链最末兜底，绝不能排前面
   想要真衬线（宋体）标题：只需改 MyFont 的 url，变量名不用动
============================================================ */
@font-face {
  font-family: "MyFont";
  src: url("fonts/SourceHanSansK-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 生僻字兜底，体积大，仅当上面字体缺字时才下载 */
@font-face {
  font-family: "ExtB";
  src: url("fonts/simsunb.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. 设计令牌 :root（克制东方当代 · 大量留白）
   原则：
   · 陶土棕做点睛（hover/下划线/小标签），不占大色块
   · 米白三档营造纸-宣纸-淡米层次
   · 淡釉青升为可用次色（极小点缀）
   · 全站无大面积深色块
============================================================ */
:root {
  /* —— 品牌色（陶土棕·点睛用） —— */
  --primary: #9c7b5e; /* 主色：提亮的陶土棕（点睛） */
  --primary-deep: #7a5c42; /* 深陶土棕（hover/激活） */
  --primary-soft: #bfa088; /* 浅陶土棕（次要装饰） */
  --primary-wash: #e8ddd0; /* 极浅陶土（hover 底色） */

  /* —— 辅助色（淡釉青） —— */
  --accent: #a8b7b8; /* 淡釉青（极小点缀） */
  --accent-soft: #d4ded9; /* 极浅釉青 */

  /* —— 背景米白三档 —— */
  --bg: #faf7f1; /* 页面底色：纸白 */
  --bg-soft: #f2ede2; /* 板块底：宣纸白 */
  --bg-warm: #ede5d5; /* 强调底：淡米 */
  --panel: #fdfbf6; /* 卡片/输入框：白米 */
  --panel-tint: #f8f3e8; /* 米白偏暖（hover态） */

  /* —— 文字色（清晰层级） —— */
  --title: #4a3826; /* 标题：暖棕黑（不再过深） */
  --text-dark: #4a4a4a; /* 正文：炭灰（柔和） */
  --text: #7a7066; /* 辅助：暖灰（不再冷） */
  --text-muted: #a89f92; /* 弱化文字 */
  --text-on-primary: #ffffff; /* 主色上文字（极少用） */

  /* —— 分隔线（更柔和） —— */
  --line: #e4dbc8; /* 实线（更淡） */
  --line-light: #efe9d9; /* 浅线（板块内） */
  --line-dash: #dcd0bc; /* 虚线 */

  /* —— 阴影（极轻） —— */
  --shadow-sm: 0 1px 4px rgba(74, 56, 38, 0.04);
  --shadow-md: 0 2px 12px rgba(74, 56, 38, 0.06);
  --shadow-lg: 0 6px 24px rgba(74, 56, 38, 0.08);

  /* —— 字体 ——
     serif 用于标题（h1~h6 等），MyFont 是黑体而非宋体，
     想要真衬线外观就把 MyFont 的 url 换成宋体/思源宋体文件即可
     ExtB 必须放最后：仅当前面都缺字时才用到的扩展B区兜底 */
  --serif: "MyFont", "Songti SC", "SimSun", "ExtB", serif;
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;

  /* —— 布局 —— */
  --max: 1300px;
  --header-h: 88px;
  --info-h: 38px;

  /* —— 缓动 —— */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--serif);
  color: var(--title);
  font-weight: 600;
  line-height: 1.3;
}

p {
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover,
a:focus {
  color: var(--primary-deep);
  text-decoration: none;
}

a.primary-link {
  color: var(--primary);
}

/* ============================================================
   3. 公共工具
============================================================ */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.section {
  padding: 64px 0;
}

.section-sm {
  padding: 40px 0;
}

.section-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
  text-align: center;
  margin-bottom: 8px;
}

.section-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  margin-bottom: 36px;
}

.btn {
  display: inline-block;
  padding: 12px 32px;
  background: var(--primary);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  border-radius: 2px;
  transition:
    background 0.25s,
    transform 0.25s;
  cursor: pointer;
  border: none;
}

.btn:hover {
  background: var(--primary-deep);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

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

.crumb {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.0625rem;
  margin-bottom: 12px;
}

.crumb a {
  color: var(--text-muted);
}

.crumb a:hover {
  color: var(--primary);
}

.crumb .sep {
  margin: 0 8px;
  color: var(--line);
}
/* ============================================================
   4. 顶部信息条（所有页面共用）
============================================================ */
.info-bar {
  background: var(--bg-soft);
  color: var(--text);
  font-size: 0.76rem;
  height: var(--info-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-light);
}

.info-bar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

.info-bar a {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}

.info-bar a:hover {
  color: var(--primary);
}

.info-bar .ib-icon {
  width: 13px;
  height: 13px;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.info-bar a:hover .ib-icon {
  opacity: 1;
}

.info-bar .ib-lang {
  padding: 2px 8px;
  font-size: 0.75rem;
  letter-spacing: 0.0625rem;
  border-radius: 2px;
  transition:
    color 0.2s,
    background 0.2s;
  cursor: pointer;
}

.info-bar .ib-lang:hover {
  color: var(--primary);
  background: var(--primary-wash);
}

.info-bar .ib-lang.active {
  color: var(--primary);
  background: var(--primary-wash);
  font-weight: 600;
}
.ib-lang-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-bar .ib-sep {
  color: var(--line);
  margin: 0 -8px;
}

/* ============================================================
   5. 全站导航（所有页面共用）
============================================================ */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: -1px;
  z-index: 100;
}

/* PC 端默认隐藏汉堡按钮 */
.nav-toggle {
  display: none;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h);
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo img {
  height: 48px;
  width: auto;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-text .zh {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
}

.logo-text .en {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.0625rem;
  margin-top: 2px;
}

/* —— 桌面端导航（≥769px） —— */
@media (min-width: 769px) {
  .main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .main-nav > ul > li {
    position: relative;
  }

  .main-nav > ul > li > a {
    display: block;
    padding: 10px 22px;
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: bold;
    color: var(--title);
    letter-spacing: 0.1875rem;
    position: relative;
    transition: color 0.25s;
  }

  .main-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 6px;
    height: 1.5px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .main-nav > ul > li:hover > a,
  .main-nav > ul > li.active > a {
    color: var(--primary);
  }

  .main-nav > ul > li:hover > a::after,
  .main-nav > ul > li.active > a::after {
    transform: scaleX(1);
  }

  .main-nav ul ul {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 160px;
    background: var(--bg);
    border-top: 2px solid var(--primary);
    box-shadow: var(--shadow-md);
    padding: 8px 0;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition:
      opacity 0.25s,
      transform 0.25s,
      visibility 0.25s;
    z-index: 99;
  }

  .main-nav > ul > li:hover > ul,
  .main-nav > ul > li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .main-nav ul ul li a {
    display: block;
    padding: 8px 22px;
    font-size: 0.88rem;
    color: var(--text-dark);
    transition:
      color 0.2s,
      background 0.2s,
      padding-left 0.2s;
    white-space: nowrap;
  }

  .main-nav ul ul li a:hover {
    color: var(--primary);
    background: var(--bg-soft);
    padding-left: 28px;
  }
}

/* —— 移动端导航（≤768px） —— */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: row;
    height: auto;
    padding: 10px 10px !important;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    text-align: center;
  }
  .is-open .header-inner {
    flex-direction: column;
  }

  .is-open .header-inner .logo {
    margin: 90px auto 0px auto;
  }
  .is-open .logo img {
    height: 40px;
  }
  .logo-text {
    margin: 20px auto 10px auto;
    align-items: flex-start;
  }
  .is-open .logo-text .zh {
    margin: 3px auto 10px auto;
  }
  .logo-text .zh {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  .i18n_en .logo-text .zh {
    font-size: 0.6rem;
  }

  /* ===================== 移动端展开式菜单 ===================== */
  /* —— 汉堡按钮 —— */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 10003;
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--title);
    margin: 0 auto;
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* —— 菜单展开时 header 变深色 —— */
  .site-header.is-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    height: 100vh;
  }

  .site-header.is-open .info-bar {
    display: none;
  }

  /* —— 主导航展开 —— */
  .main-nav {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .main-nav.is-open {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0 0 20px;
  }

  .main-nav > ul > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 20px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
  }
  .main-nav > ul > li > a:hover {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
  }

  /* —— 展开箭头 —— */
  .main-nav > ul > li.has-sub > a::after {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .main-nav > ul > li.has-sub.open > a::after {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A96E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }

  /* —— 二级菜单 —— */
  .main-nav ul ul {
    display: none;
  }
  .main-nav ul ul.is-open {
    display: block;
    animation: navSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes navSlideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .main-nav ul ul a {
    display: block;
    padding: 12px 20px 12px 6px;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    transition: all 0.25s ease;
    margin-left: 5%;
    width: 95%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
  }
  .main-nav ul ul a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-left-color: var(--accent);
    padding-left: 42px;
  }
}

/* ============================================================
   6. 通用页头横幅（已移除，统一用 crumb）
============================================================ */

/* ============================================================
   7. 全站页脚（所有页面共用）
============================================================ */
.site-footer {
  background: var(--bg-soft);
  color: var(--text);
  padding: 56px 0 24px;
  font-size: 0.9rem;
  line-height: 1.9;
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  margin-bottom: 32px;
}

.footer-info {
  text-align: left;
}

.footer-info .ft-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  display: inline-block;
}

.footer-info p {
  color: var(--text);
  margin-bottom: 4px;
}

.footer-info a {
  color: var(--text);
  transition: color 0.2s;
}

.footer-info a:hover {
  color: var(--primary);
}

.footer-qr {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
}

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

.qr-item img {
  width: 130px;
  height: 130px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 6px;
  background: var(--panel);
  padding: 4px; 
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  will-change: transform; 
  transform-origin: center center;
}
.qr-item:hover img {
  transform: scale(1.2); 
}
.qr-item .qr-name {
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.0625rem;
}

.footer-bottom {
  border-top: 1px solid var(--line-light);
  padding-top: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-bottom a {
  color: var(--text-muted);
  margin: 0 8px;
  transition: color 0.2s;
}

.footer-bottom a:hover {
  color: var(--primary);
}

/* ============================================================
   8. 通用筛选标签（左侧/顶部）
============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
}

.filter-tab {
  display: inline-block;
  padding: 6px 18px;
  font-size: 0.88rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
  letter-spacing: 0.0625rem;
}

.filter-tab:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.filter-tab.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

/* ============================================================
   9. 通用卡片网格
============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

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

.card-grid.col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line-light);
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s,
    border-color 0.3s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line);
}

.card-img {
  position: relative;
  width: 100%;
  padding-top: 66%;
  overflow: hidden;
  background: var(--bg-soft);
}

.card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

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

.card-body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.card-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title);
  margin-bottom: 10px;
  line-height: 1.4;
}

.card-desc {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 14px;
  flex: 1;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  letter-spacing: 0.0625rem;
}

.card-meta .card-arrow {
  color: var(--primary);
  font-size: 0.9rem;
  transition: transform 0.25s;
}

.card:hover .card-arrow {
  transform: translateX(4px);
}

/* ============================================================
   10. 通用列表项（标题列表 + 右侧箭头）
============================================================ */
.link-list {
  border-top: 1px solid var(--line-light);
}

.link-list li {
  border-bottom: 1px solid var(--line-light);
}

.link-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 8px;
  color: var(--text-dark);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.0625rem;
  transition:
    padding-left 0.25s,
    color 0.25s;
}

.link-list a:hover {
  color: var(--primary);
  padding-left: 16px;
}

.link-list .ll-idx {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  width: 32px;
  flex-shrink: 0;
  letter-spacing: 0.125rem;
}

.link-list .ll-name {
  flex: 1;
}

.link-list .ll-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--sans);
  flex-shrink: 0;
}

.link-list .ll-cue {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition:
    transform 0.25s,
    color 0.25s;
  flex-shrink: 0;
}

.link-list a:hover .ll-cue {
  color: var(--primary);
  transform: translateX(4px);
}

/* ============================================================
   11. 通用时间轴
============================================================ */
.timeline {
  position: relative;
  padding-left: 36px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--line);
}

.timeline-item {
  position: relative;
  margin-bottom: 36px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--bg);
  border: 2px solid var(--primary);
  border-radius: 50%;
  transition: background 0.25s;
}

.timeline-item.active::before,
.timeline-item:hover::before {
  background: var(--primary);
}

.timeline-stage {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.timeline-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title);
  margin-bottom: 6px;
  letter-spacing: 0.0625rem;
  cursor: pointer;
  transition: color 0.25s;
}

.timeline-title:hover {
  color: var(--primary);
}

.timeline-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ============================================================
   12. 通用表单
============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  margin-bottom: 18px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  color: var(--title);
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0.0625rem;
}

.form-label .req {
  color: #c0392b;
  margin-left: 2px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-dark);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(130, 95, 69, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.7;
}

.form-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

/* ============================================================
   13. Lightbox（图片点击放大）
============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0.25s;
  cursor: zoom-out;
  padding: 32px;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s var(--ease);
}

.lightbox.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* —— 任意图片可点击放大 —— */
.zoomable {
  cursor: zoom-in;
}

/* ============================================================
   14. 通用工具类
============================================================ */
.text-center {
  text-align: center;
}
.text-primary {
  color: var(--primary);
}
.mt-4 {
  margin-top: 16px;
}
.mt-8 {
  margin-top: 32px;
}
.mb-4 {
  margin-bottom: 16px;
}
.mb-8 {
  margin-bottom: 32px;
}
.divider {
  width: 48px;
  height: 1px;
  background: var(--primary);
  margin: 24px auto;
}

.divider-left {
  margin-left: 0;
  margin-right: auto;
}

/* ============================================================
   15. 首页 index2.html（整改后）
============================================================ */

/* —— 15.1 横幅轮播 —— */
.banner {
  position: relative;
  width: 100%;
  height: 510px;
  overflow: hidden;

  max-width: var(--max);
  margin: 0 auto;
}

.banner .swiper-slide {
  overflow: hidden;
}

.banner .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.banner .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-dots {
  position: absolute;
  right: 40px !important;
  bottom: 24px !important;
  left: auto !important;
  top: auto;
  width: auto !important;
  display: flex;
  gap: 6px;
  z-index: 5;
}

.banner-dots .swiper-pagination-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.82rem;
  border-radius: 2px;
  opacity: 1;
  backdrop-filter: blur(4px);
  transition: background 0.25s;
  margin: 0 !important;
  cursor: pointer;
  font-family: var(--sans);
}

.banner-dots .swiper-pagination-bullet:hover,
.banner-dots .swiper-pagination-bullet-active {
  background: var(--primary);
  color: #fff;
}

/* —— 15.2 双列活动分类 —— */
.highlights {
  padding: 40px 0 40px;
  /*   background: var(--bg-soft); */
}

.highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.hl-col {
  background: #fff;
  padding: 0px;
}

.hl-head {
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.hl-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hl-title {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--title);
  letter-spacing: 0.125rem;
  line-height: 1.2;
  margin: 0 0 4px 0;
}

.hl-sub {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.1875rem;
  margin: 0;
}

.hl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hl-list li {
  border-bottom: 1px solid var(--line-light);
}

.hl-list li:last-child {
  border-bottom: none;
}

.hl-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  margin: 0 -10px;
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  transition:
    background 0.25s,
    color 0.25s,
    padding-left 0.25s;
}

.hl-list li a:hover {
  color: var(--primary);
  padding-left: 16px;
}

.hl-list li .hl-idx {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.125rem;
  width: 24px;
  flex-shrink: 0;
}

.hl-list li .hl-name {
  flex: 1;
}

.hl-list li .hl-cue {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-muted);
  flex-shrink: 0;
  transition:
    transform 0.25s,
    color 0.25s;
}

.hl-list li a:hover .hl-cue {
  color: var(--primary);
  transform: translateX(4px);
}

/* ============================================================
   15.3 双列核心板块（4×2 tab 切换面板）—— 覆盖 15.2
============================================================ */
.highlights {
  padding: 40px 0 40px;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.375rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.375rem;
  margin: 0 0 6px;
}

.section-en {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.section-line {
  width: 36px;
  height: 1px;
  background: var(--primary);
  margin: 0 auto 16px;
}

.section-lede {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text);
  margin: 0;
}

/* —— 双列网格 —— */
.highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* —— 每列卡片容器 —— */
.hl-col {
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

/* —— Tab 切换栏（4 个） —— */
.hl-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}

.hl-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 8px;
  background: var(--bg-soft);
  color: var(--text-muted);
  border-right: 1px solid var(--line);
  font-family: var(--sans);
  transition:
    background 0.25s,
    color 0.25s;
  position: relative;
  cursor: pointer;
}

.hl-tab:last-child {
  border-right: none;
}

.hl-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s;
}

.hl-tab:hover {
  color: var(--title);
  background: var(--panel);
}

.hl-tab.active {
  color: var(--primary);
  background: var(--panel);
}

.hl-tab.active::after {
  width: 70%;
}

.hl-tab-num {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.0625rem;
  line-height: 1;
}

.hl-tab.active .hl-tab-num {
  color: var(--primary);
}

.hl-tab-name {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  text-align: center;
  line-height: 1.3;
}

/* —— Panel 容器 —— */
.hl-panes {
  position: relative;
  flex: 1;
}

.hl-pane {
  display: none;
  padding: 32px 32px 28px;
  animation: hlFadeIn 0.35s ease;
}

.hl-pane.active {
  display: block;
}

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

.hl-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.hl-pane-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hl-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.1875rem;
  padding: 6px 10px;
  /*  border: 1px solid var(--line);
  background: var(--bg-soft); */
  transition:
    color 0.25s,
    border-color 0.25s,
    background 0.25s,
    gap 0.25s;
}

.hl-more svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.hl-more:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--panel);
  gap: 8px;
}

/* —— 面板内的列表 —— */
.hl-pane .hl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hl-pane .hl-list li {
  border-bottom: 1px solid var(--line-light);
}

.hl-pane .hl-list li:last-child {
  border-bottom: none;
}

.hl-pane .hl-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 10px;
  margin: 0 -10px;
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  transition:
    background 0.25s,
    color 0.25s,
    padding-left 0.25s;
}

.hl-pane .hl-list li a:hover {
  color: var(--primary);
  padding-left: 16px;
}

.hl-pane .hl-list li .hl-idx {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.125rem;
  width: 24px;
  flex-shrink: 0;
}

.hl-pane .hl-list li .hl-name {
  flex: 1;
}

.hl-pane .hl-list li .hl-cue {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-muted);
  flex-shrink: 0;
  transition:
    transform 0.25s,
    color 0.25s;
}

.hl-pane .hl-list li a:hover .hl-cue {
  color: var(--primary);
  transform: translateX(4px);
}

/* ============================================================
   16. 改建进程页 renovation.html
============================================================ */
.page-renovation .rn-body {
  padding: 64px 0;
}

.page-renovation .rn-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
}

.page-renovation .rn-timeline-wrap {
  position: sticky;
  top: calc(var(--header-h) + var(--info-h) + 24px);
  align-self: start;
}

.page-renovation .rn-content .rn-stage-block {
  margin-bottom: 48px;
}

.page-renovation .rn-content .rn-stage-block:last-child {
  margin-bottom: 0;
}

.page-renovation .rn-stage-head {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
}

.page-renovation .rn-article-list {
  display: grid;
  gap: 18px;
}

.page-renovation .rn-article {
  background: var(--panel);
  border: 1px solid var(--line-light);
  padding: 24px;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  cursor: pointer;
}

.page-renovation .rn-article:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.page-renovation .rn-article-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title);
  margin-bottom: 8px;
  letter-spacing: 0.0625rem;
}

.page-renovation .rn-article-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.0625rem;
}

.page-renovation .rn-pending {
  background: var(--panel);
  border: 1px dashed var(--line);
  padding: 48px 32px;
  text-align: center;
  color: var(--text-muted);
}

.page-renovation .rn-pending h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--title);
  margin-bottom: 12px;
  letter-spacing: 0.125rem;
}

.page-renovation .rn-pending .pn-sub {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 16px;
}

.page-renovation .rn-pending .pn-en {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.125rem;
}

/* ============================================================
   17. 入驻页 residence.html + residence-apply.html
============================================================ */
.page-residence .rs-body {
  padding: 56px 0 80px;
}

.page-residence .rs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ============================================================
   17.1 入驻申请页（页头 / 流程 / 材料 / 联系）
============================================================ */
.page-residence .rs-body {
  padding: 32px 0 80px;
}

/* —— 页头：标题 + 引言 + 邮箱 CTA —— */
.page-residence .rs-apply-hero {
  text-align: center;
  max-width: 760px;
  margin: 16px auto 64px;
}

.page-residence .rs-apply-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.375rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.page-residence .rs-apply-title {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.375rem;
  margin: 0 0 8px;
}

.page-residence .rs-apply-en {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.3125rem;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.page-residence .rs-apply-line {
  width: 36px;
  height: 1px;
  background: var(--primary);
  margin: 0 auto 20px;
}

.page-residence .rs-apply-lede {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--text);
  margin: 0 auto 32px;
  max-width: 620px;
}

/* —— 邮箱主 CTA —— */
.page-residence .rs-apply-cta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  background: var(--primary);
  color: #fff;
  border-radius: 0;
  border: 1px solid var(--primary);
  transition:
    background 0.25s,
    transform 0.25s,
    box-shadow 0.25s;
  text-align: left;
}

.page-residence .rs-apply-cta:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(124, 92, 66, 0.35);
}

.page-residence .rs-apply-cta-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.page-residence .rs-apply-cta-icon svg {
  width: 22px;
  height: 22px;
}

.page-residence .rs-apply-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
}

.page-residence .rs-apply-cta-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.page-residence .rs-apply-cta-value {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.0625rem;
  color: #fff;
}

.page-residence .rs-apply-cta-arrow {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.25s;
}

.page-residence .rs-apply-cta:hover .rs-apply-cta-arrow {
  transform: translateX(4px);
}

/* —— 通用段落容器 —— */
.page-residence .rs-block {
  max-width: 960px;
  margin: 0 auto 80px;
}

.page-residence .rs-block-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.page-residence .rs-block-num {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.125rem;
  padding: 6px 12px;
  border: 1px solid var(--primary);
}

.page-residence .rs-block-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.25rem;
  margin: 0 0 4px;
}

.page-residence .rs-block-sub {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.1875rem;
  margin: 0;
}

/* —— 流程步骤：6 步网格（2 列 × 3 行） —— */
.page-residence .rs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-residence .rs-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  transition: background 0.25s;
}

.page-residence .rs-step:hover {
  background: var(--bg-soft);
}

.page-residence .rs-step-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--line);
  letter-spacing: 0.125rem;
  transition: color 0.25s;
}

.page-residence .rs-step:hover .rs-step-num {
  color: var(--primary);
}

.page-residence .rs-step-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.page-residence .rs-step-icon svg {
  width: 22px;
  height: 22px;
}

.page-residence .rs-step-body h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
  margin: 0 0 8px;
}

.page-residence .rs-step-body p {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--text);
  margin: 0;
}

.page-residence .rs-step-body a {
  color: var(--primary);
  border-bottom: 1px solid var(--primary-soft);
}

.page-residence .rs-step-body a:hover {
  color: var(--primary-deep);
  border-bottom-color: var(--primary-deep);
}

/* —— 申请材料清单：4 卡片网格 —— */
.page-residence .rs-mat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-residence .rs-mat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  min-height: 180px;
  transition: background 0.25s;
}

.page-residence .rs-mat-card:hover {
  background: var(--bg-soft);
}

.page-residence .rs-mat-card .rs-mat-num {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.125rem;
  line-height: 1;
}

.page-residence .rs-mat-card h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
  margin: 0;
}

.page-residence .rs-mat-card p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
  flex: 1;
}

.page-residence .rs-mat-tag {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1875rem;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 3px 10px;
  margin-top: 4px;
}

/* —— 联系方式：2×2 信息卡片网格 —— */
.page-residence .rs-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-residence .rs-info-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  transition: background 0.25s;
}

.page-residence .rs-info-card:hover {
  background: var(--bg-soft);
}

.page-residence .rs-info-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.page-residence .rs-info-card--primary .rs-info-icon {
  color: var(--primary);
  border-color: var(--primary);
}

.page-residence .rs-info-icon svg {
  width: 20px;
  height: 20px;
}

.page-residence .rs-info-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
}

.page-residence .rs-info-value {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--title);
  letter-spacing: 0.0625rem;
  line-height: 1.5;
}

.page-residence .rs-info-value[href^="mailto:"] {
  color: var(--primary);
  border-bottom: 1px solid var(--primary-soft);
  padding-bottom: 2px;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.page-residence .rs-info-value[href^="mailto:"]:hover {
  color: var(--primary-deep);
  border-bottom-color: var(--primary-deep);
}

/* ============================================================
   18. 艺术家页 artists.html + artist-detail.html
============================================================ */
.page-artists .ar-body {
  padding: 56px 0;
}

.page-artists .ar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.page-artists .ar-card {
  background: var(--panel);
  border: 1px solid var(--line-light);
  text-align: center;
  padding: 24px 16px;
  text-decoration: none;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
  color: inherit;
  cursor: pointer;
}

.page-artists .ar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.page-artists .ar-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-soft);
  margin-bottom: 16px;
}

.page-artists .ar-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-artists .ar-card-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
  margin-bottom: 4px;
}

.page-artists .ar-card-nat {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.125rem;
}

.page-artists .ar-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* —— 艺术家详情页（左侧锚点导航 + 右侧三区块：简介/驻留/过往作品） —— */

/* 艺术家头部 */
.ad-head {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  padding: 8px 0 32px;
  border-bottom: 1px solid #ece6dc;
  margin-bottom: 8px;
}
.ad-portrait-wrap {
  flex: 0 0 210px;
  width: 210px;
  aspect-ratio: 15 / 16;
  border-radius: 4px;
  overflow: hidden;
  background: #f3ede2;
  border: 1px solid #ece6dc;
}
.ad-portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ad-head-info {
  flex: 1;
  padding-top: 8px;
}
.ad-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ad-pill {
  background: #825f45;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 30px;
  letter-spacing: 0.04em;
}
.ad-country {
  font-size: 13px;
  color: #998877;
}
.ad-name {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: #2a1d12;
  letter-spacing: 0.2rem;
  margin-bottom: 4px;
  line-height: 1.2;
}
.ad-en-name {
  font-size: 0.75rem;
  color: #998877;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ad-bio {
  font-size: 14px;
  color: #5b4636;
  line-height: 1.9;
}

/* 简介正文：两栏文字 */
.ad-info-layout {
  display: grid;
  /*  grid-template-columns: 1fr 1.5fr; */
  gap: 48px;
  padding: 24px 0 0;
}
.ad-info-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a1d12;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid #825f45;
}
.ad-info-block p {
  font-size: 14px;
  color: #4a3a2d;
  line-height: 2.1;
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 2px solid #d8cfc1;
}
.ad-info-block p:first-child {
  border-left-color: #825f45;
  font-weight: 500;
}

/* 驻留/过往作品：图片网格 */
.ad-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 4px;
}
.ad-work-item {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #f3ede2;
}
.ad-work-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.ad-work-item:hover img {
  transform: scale(1.04);
}
.ad-work-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(42, 29, 18, 0.88), transparent);
  color: #fff;
  padding: 40px 14px 14px;
}
.ad-work-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.ad-work-year {
  font-size: 12px;
  opacity: 0.75;
}
.ad-empty-tip {
  font-size: 1rem;
  color: #998877;
  text-align: center;
  padding: 60px 0;
  letter-spacing: 0.05em;
  grid-column: 1 / -1;
}

/* 返回行 */
.ad-back-row {
  padding: 40px 0 16px;
}
.ad-back-row .detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  border: 1px solid #825f45;
  color: #825f45;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.25s;
}
.ad-back-row .detail-back:hover {
  background: #825f45;
  color: #fff;
}

/* page-content 内各 section 的 h2 样式（复用 about 风格） */
.page-content section h2 {
  font-size: 24px;
  font-weight: 600;
  color: #2a1d12;
  padding: 28px 0 4px;
  margin-bottom: 0;
  border-top: 1px solid #ece6dc;
}
.page-content section h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background: #825f45;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 2px;
}
.page-content section:first-of-type h2 {
  border-top: none;
  padding-top: 4px;
}

@media (max-width: 900px) {
  .ad-head {
    flex-direction: column;
    gap: 20px;
  }
  .ad-portrait-wrap {
    width: 100%;
    flex: 0 0 auto;
    margin: auto;
  }
  .ad-name {
    font-size: 1.7rem;
  }
  .ad-info-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ad-works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .ad-works-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   19. 活动页 events.html + event-detail.html
============================================================ */
.page-events .ev-body {
  padding: 56px 0;
}

.page-events .ev-list .ev-item {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-light);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    padding-left 0.25s,
    background 0.25s;
}

.page-events .ev-list .ev-item:hover {
  padding-left: 12px;
}

.page-events .ev-list .ev-item:hover .ev-title {
  color: var(--primary);
}

.page-events .ev-list .ev-cover {
  width: 200px;
  height: 130px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line-light);
  flex-shrink: 0;
}

.page-events .ev-list .ev-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.page-events .ev-list .ev-item:hover .ev-cover img {
  transform: scale(1.05);
}

.page-events .ev-list .ev-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-events .ev-list .ev-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  margin-bottom: 6px;
  align-self: flex-start;
}

.page-events .ev-list .ev-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.0625rem;
  margin-bottom: 8px;
  transition: color 0.25s;
}

.page-events .ev-list .ev-summary {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
}

.page-events .ev-list .ev-date {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.0625rem;
  white-space: nowrap;
}

.page-events .ev-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
}

/* —— 活动详情页 —— */
.page-event-detail .ed-hero {
  width: 100%;
  height: 460px;
  overflow: hidden;
  background: var(--bg-soft);
}

.page-event-detail .ed-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-event-detail .ed-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 24px;
}

.page-event-detail .ed-meta {
  display: flex;
  gap: 24px;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.0625rem;
  margin-bottom: 16px;
}

.page-event-detail .ed-meta .ed-cat {
  color: var(--primary);
  font-weight: 600;
}

.page-event-detail .ed-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.125rem;
  margin-bottom: 24px;
  line-height: 1.4;
}

.page-event-detail .ed-content {
  font-size: 1rem;
  line-height: 2;
  color: var(--text);
}

.page-event-detail .ed-content p {
  margin-bottom: 16px;
}

.page-event-detail .ed-back {
  display: inline-block;
  margin-top: 32px;
  font-size: 0.88rem;
  color: var(--primary);
}

.page-event-detail .ed-back:hover {
  color: var(--primary-deep);
}

/* ============================================================
   20. 关于中心 about.html / rongchang-pottery.html / contact.html
============================================================ */

/* —— 20.1 中心简介 —— */
.page-about .ab-intro {
  padding: 64px 0;
}

.page-about .ab-hero-img {
  width: 100%;
  height: 460px;
  overflow: hidden;
  background: var(--bg-soft);
  margin-bottom: 48px;
  border: 1px solid var(--line-light);
}

.page-about .ab-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about .ab-content {
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2;
  color: var(--text);
}

.page-about .ab-content p {
  margin-bottom: 18px;
}

.page-about .ab-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 48px 0;
}

.page-about .ab-gallery .ab-gallery-item {
  position: relative;
  padding-top: 75%;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line-light);
  cursor: zoom-in;
}

.page-about .ab-gallery .ab-gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.page-about .ab-gallery .ab-gallery-item:hover img {
  transform: scale(1.05);
}

/* —— 20.2 荣昌陶文化 —— */
.page-pottery .pt-body {
  padding: 64px 0;
}

.page-pottery .pt-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2;
  color: var(--text);
}

.page-pottery .pt-content p {
  margin-bottom: 18px;
}

/* —— 四大名陶 装饰区（淡釉青点缀） —— */
.page-pottery .pt-four-pots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 36px 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.page-pottery .pt-pot {
  padding: 26px 20px;
  text-align: center;
  border-right: 1px solid var(--line-light);
  transition: background 0.25s;
}

.page-pottery .pt-pot:last-child {
  border-right: none;
}

.page-pottery .pt-pot:hover {
  background: var(--bg-soft);
}

.page-pottery .pt-pot-bar {
  display: block;
  width: 24px;
  height: 3px;
  margin: 0 auto 14px;
  background: var(--primary);
}

.page-pottery .pt-pot-bar--rc {
  background: var(--primary);
} /* 荣昌 · 陶土棕 */
.page-pottery .pt-pot-bar--yx {
  background: #8b6f47;
} /* 宜兴 · 紫棕 */
.page-pottery .pt-pot-bar--js {
  background: #6e5b43;
} /* 建水 · 暗棕 */
.page-pottery .pt-pot-bar--nx {
  background: var(--accent);
} /* 钦州 · 淡釉青（点缀） */

.page-pottery .pt-pot h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.1875rem;
  margin: 0 0 4px;
}

.page-pottery .pt-pot p {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.1875rem;
  margin: 0;
}

.page-pottery .pt-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}

.page-pottery .pt-imgs img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border: 1px solid var(--line-light);
}

/* —— 20.3 联系我们 —— */
.ct-body {
  padding: 56px 0 80px;
}

.ct-head {
  text-align: center;
  max-width: 720px;
  margin: 8px auto 56px;
}

.ct-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.375rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ct-title {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.375rem;
  margin: 0 0 8px;
}

.ct-en {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.3125rem;
  text-transform: uppercase;
  margin: 0;
}

.ct-lede {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--text);
  margin: 16px auto 0;
  max-width: 600px;
}

/* —— 卡片网格（默认双列） —— */
.ct-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 32px;
  align-items: start;
}

/* —— 单列变体（去除表单后） —— */
.ct-grid.ct-grid-single {
  margin: 40px auto;
}

.ct-info {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 40px 44px;
}

.ct-info h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.25rem;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
}

.ct-info dl {
  margin: 0;
}

.ct-info dt {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.1875rem;
  margin-bottom: 4px;
  margin-top: 18px;
  font-weight: 500;
}

.ct-info dt:first-child {
  margin-top: 0;
}

.ct-info dd {
  font-size: 0.98rem;
  color: var(--text-dark);
  margin-bottom: 4px;
  line-height: 1.7;
}

.ct-info dd a {
  color: var(--text-dark);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.ct-info dd a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* —— 关注我们（关注二维码） —— */
.ct-qr-intro {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.9;
  margin: 0 0 24px;
}

.ct-qr-row {
  display: flex;
  gap: 18px;
  justify-content: flex-start;
}

.ct-qr-item {
  text-align: center;
}

.ct-qr-item img {
  width: 196px;
  height: 196px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-soft);
  padding: 4px;
  margin-bottom: 6px;
}

.ct-qr-item .ct-qr-name {
  font-size: 0.76rem;
  color: var(--text-muted);
  letter-spacing: 0.0625rem;
}

/* —— 20.4 资料下载 —— */
.page-download .dl-body {
  padding: 64px 0;
}

.page-download .dl-list {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--line-light);
}

.page-download .dl-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-light);
  align-items: center;
  transition: padding-left 0.25s;
}

.page-download .dl-item:hover {
  padding-left: 12px;
}

.page-download .dl-icon {
  width: 56px;
  height: 72px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-family: var(--sans);
  font-weight: 0.4;
}

.page-download .dl-icon .dl-size {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.page-download .dl-icon .dl-type {
  font-size: 0.72rem;
  letter-spacing: 0.0625rem;
}

.page-download .dl-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: 0.0625rem;
  margin-bottom: 6px;
}

.page-download .dl-desc {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.7;
}

.page-download .dl-btn {
  padding: 8px 20px;
  font-size: 0.85rem;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  letter-spacing: 0.0625rem;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}

.page-download .dl-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* ============================================================
   21. 响应式
============================================================ */
@media (max-width: 1024px) {
  .banner {
    height: 460px;
  }
  .highlights-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hl-tab-name {
    font-size: 0.7rem;
  }

  .hl-pane {
    padding: 24px 20px 20px;
  }

  .hl-pane-head {
    flex-direction: row;
    gap: 12px;
  }

  .hl-more span {
    display: none;
  }

  .hl-more {
    padding: 6px 8px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-info {
    text-align: center;
  }
  .footer-qr {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .card-grid,
  .card-grid.col-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid.col-4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-residence .rs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-artists .ar-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-event-detail .ed-hero {
    height: 340px;
  }

  .ad-hero {
    grid-template-columns: 280px 1fr;
    gap: 32px;
  }

  .page-events .ev-list .ev-item {
    grid-template-columns: 160px 1fr auto;
  }

  .page-events .ev-list .ev-cover {
    width: 160px;
    height: 100px;
  }

  .ct-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ct-qr-row {
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
  }
  .ct-qr-item img {
    width: 290px;
    height: 290px;
  }
  .page-renovation .rn-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .page-renovation .rn-timeline-wrap {
    position: static;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .page-about .ab-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }

  .section {
    padding: 40px 0;
  }

  .banner {
    height: 280px;
  }

  .highlights {
    padding: 48px 0;
  }

  .page-banner {
    height: 200px;
  }

  .page-banner-title {
    font-size: 1.6rem;
    letter-spacing: 0.125rem;
  }

  .page-banner-en {
    font-size: 0.72rem;
    letter-spacing: 0.25rem;
  }

  .page-banner.compact {
    height: 160px;
  }

  .card-grid,
  .card-grid.col-2,
  .card-grid.col-3,
  .card-grid.col-4 {
    grid-template-columns: 1fr;
  }

  .page-residence .rs-grid {
    grid-template-columns: 1fr;
  }

  .page-residence .rs-steps,
  .page-residence .rs-mat-grid,
  .page-residence .rs-info-grid {
    grid-template-columns: 1fr;
  }

  .page-residence .rs-apply-cta {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 24px 20px;
  }

  .page-residence .rs-apply-cta-text {
    min-width: 0;
  }

  .page-residence .rs-apply-cta-arrow {
    display: none;
  }

  .page-residence .rs-block-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-artists .ar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ad-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }

  .ad-hero-img {
    max-width: 280px;
    margin: 0 auto;
  }

  .ad-hero-name {
    font-size: 1.8rem;
  }

  .ad-work-grid {
    grid-template-columns: 1fr;
  }

  .page-events .ev-list .ev-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-events .ev-list .ev-cover {
    width: 100%;
    height: 180px;
  }

  .page-events .ev-list .ev-date {
    order: -1;
  }

  .page-event-detail .ed-hero {
    height: 240px;
  }

  .page-event-detail .ed-title {
    font-size: 1.5rem;
  }

  .page-event-detail .ed-meta {
    flex-direction: column;
    gap: 6px;
  }

  .ct-info {
    padding: 24px 20px;
  }

  .page-pottery .pt-imgs {
    grid-template-columns: 1fr;
  }

  .page-about .ab-gallery {
    grid-template-columns: 1fr;
  }

  .page-download .dl-item {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .page-download .dl-btn {
    grid-column: 2 / -1;
    justify-self: flex-start;
  }

  .page-download .dl-icon {
    width: 48px;
    height: 60px;
  }

  .info-bar {
    height: auto;
    padding: 6px 0;
  }

  .info-bar .container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-size: 0.72rem;
  }

  .banner-dots {
    right: 16px;
    bottom: 12px;
  }

  .banner-dots .swiper-pagination-bullet {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }

  .qr-item img {
    width: 112px;
    height: 112px;
  }
}

/* ============================================================
   导航高亮（layout.js 注入时用）
============================================================ */
.main-nav .current > a {
  color: var(--primary);
  font-weight: 600;
}
.main-nav .current > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 2px;
  background: var(--primary);
}

/* ============================================================
   页面公共 Banner（page-banner）— 单页/列表页头部
============================================================ */
.page-banner {
  background: linear-gradient(135deg, #7a3b22 0%, #3a1e14 100%);
  color: #fff;
  padding: 96px 0 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255, 255, 255, 0.08),
    transparent 60%
  );
  pointer-events: none;
}
.page-banner .eyebrow {
  letter-spacing: 0.4em;
  font-size: 12px;
  opacity: 0.65;
  margin-bottom: 18px;
  position: relative;
}
.page-banner h1 {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  position: relative;
}
.page-banner p {
  font-size: 1rem;
  opacity: 0.85;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
  position: relative;
}
.page-banner.compact {
  padding: 64px 0 48px;
}
.page-banner.compact h1 {
  font-size: 32px;
}

/* ============================================================
   面包屑 crumb
============================================================ */
.crumb {
  font-size: 13px;
  color: #998877;
  margin: 24px 0 16px;
}
.crumb a {
  color: #998877;
  text-decoration: none;
  transition: color 0.2s;
}
.crumb a:hover {
  color: var(--primary);
}
.crumb .sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* ============================================================
   页面布局：左侧锚点导航 + 右侧内容（.page-layout）
   用于 about / renovation / rongchang-pottery / residence-apply / literature
============================================================ */
.page-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding: 20px 0 60px;
  align-items: start;
}
.page-layout .side-nav {
  position: sticky;
  top: 100px;
  padding: 24px 0;
  border-left: 2px solid #ece6dc;
}
.page-layout .side-nav a {
  display: block;
  padding: 10px 0 10px 20px;
  color: #5b4636;
  font-size: 14px;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: all 0.2s;
  line-height: 1.6;
}
.page-layout .side-nav a:hover,
.page-layout .side-nav a.active {
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 500;
  background: linear-gradient(to right, rgba(130, 95, 69, 0.04), transparent);
}
.page-layout .page-content {
  max-width: 100%;
}
.page-layout .page-content section {
  padding: 32px 0;
}
.page-layout .page-content section:last-child {
  border-bottom: none;
}
.page-layout .page-content h2 {
  font-size: 26px;
  font-weight: 600;
  color: #2a1d12;
  margin-bottom: 20px;
  padding-bottom: 12px;
  position: relative;
}
.page-layout .page-content h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--primary);
  margin-right: 12px;
  vertical-align: middle;
  border-radius: 2px;
}
.page-layout .page-content p {
  font-size: 1rem;
  line-height: 1.95;
  color: #4a3a2d;
  margin-bottom: 16px;
}
.page-layout .page-content .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--primary);
  margin-bottom: 8px;
  font-weight: 500;
}

/* ============================================================
   列表页通用（page-list）
   用于 events.html / artists.html / appreciation.html / literature.html
============================================================ */
.page-list {
  padding: 20px 0 60px;
}
.page-list .filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ece6dc;
}
.page-list .upmargintpadding {
  margin-bottom: 1rem !important;
  padding-bottom: 20px !important;
}

.page-list .filters a {
  padding: 8px 20px;
  border: 1px solid #d8cfc1;
  border-radius: 30px;
  font-size: 14px;
  color: #5b4636;
  text-decoration: none;
  transition: all 0.2s;
}
.page-list .filters a.active,
.page-list .filters a:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.page-list .filter-tab-title {
  border-radius: 50rem;
}
/* 卡片网格（新闻/资讯） */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 28px;
}
.card {
  background: #fff;
  border: 1px solid #ece6dc;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(58, 30, 20, 0.08);
  border-color: transparent;
}
.card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/2;
  background: #f3ede2;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.yishujia .card-img{
  aspect-ratio: 4/4;}
.card:hover .card-img img {
  transform: scale(1.05);
}
.card-body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: #998877;
}
.card-tag {
  background: #f3ede2;
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed #ece6dc;
  font-size: 12px;
  color: #998877;
}
.card-arrow {
  color: var(--primary);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* 作品展示网格（CSS Grid 瀑布流效果） */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}
.work-card {
  display: block;
  break-inside: avoid;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  border: 1px solid #ece6dc;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(130, 95, 69, 0.15);
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(130, 95, 69, 0.15);
}
.work-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.work-card:hover img {
  transform: scale(1.05);
}
.work-card .work-info {
  position: relative;
  padding: 16px 18px 18px;
  background: #fff;
  border-top: 1px solid #ece6dc;
}
.work-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #2a1d12;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.work-info p {
  font-size: 12px;
  color: #8b7b6b;
  letter-spacing: 0.03em;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
.pagination li {
  border-radius: 4px;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ece6dc;
  border-radius: 4px;
  color: #5b4636;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}
.pagination :hover,
.pagination .active span {
  background: var(--primary);
  color: #fff !important;
  border-color: var(--primary);
}
.pagination .disabled {
  opacity: 0.4;
  pointer-events: none;
  background-color: #dddddd;
  color: #fff;
}

/* ============================================================
   详情页（page-detail）— 简约大气排版
   用于 event-detail / artist-detail
============================================================ */

.detail-hero {
  margin: 0 0 48px;
  text-align: center;
}
.detail-meta {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
  color: #998877;
}
.detail-meta .pill {
  background: #f3ede2;
  color: var(--primary);
  padding: 4px 14px;
  border-radius: 30px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.detail-title {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.4;
  color: #2a1d12;
  margin: 0 auto 16px;
  max-width: 90%;
  text-align: center;
  letter-spacing: 0.02em;
}
.detail-en {
  font-size: 13px;
  color: #998877;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.detail-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 48px;
  background: #f3ede2;
}
.detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-content {
  font-size: 16px;
  line-height: 2;
  color: #3a2d20;
}
.detail-content p {
  text-indent: 2em;
}
.detail-content p:first-child {
  font-size: 17px;
  color: #2a1d12;
  font-weight: 500;
}
.detail-content h2 {
  font-size: 22px;
  font-weight: 600;
  color: #2a1d12;
  margin: 40px 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--primary);
}
.detail-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2a1d12;
  margin: 32px 0 12px;
}
.detail-content blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  background: #f8f5f0;
  border-left: 3px solid var(--primary);
  color: #5b4636;
  font-style: normal;
  border-radius: 0 4px 4px 0;
}
.detail-content img {
  max-width: 100%;
  border-radius: 4px;
  margin: 24px auto;
}

.detail-share {
  display: flex;
  gap: 12px;
  color: #998877;
  font-size: 13px;
  align-items: center;
}

/* 作品详情页 */
.work-pill {
  background: linear-gradient(135deg, #825f45, #6d4f3a);
  color: #fff !important;
}

/* 作品详情英雄区 */
.work-detail-hero {
  margin-bottom: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line-light);
}
.work-detail-cover {
  width: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}
.work-detail-hero:hover .work-detail-cover {
  transform: scale(1.02);
}

/* 作品信息文字 */
.work-detail-desc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 20px;
  text-align: center;
}
.work-detail-desc p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.8;
}
.work-detail-desc strong {
  color: var(--primary);
  font-weight: 600;
}

/* 作品描述 */
.work-detail-intro {
  background: linear-gradient(135deg, #faf6f0 0%, #f5f0e8 100%);
  border-left: 4px solid var(--primary);
  padding: 20px 24px;
  margin-bottom: 32px;
  border-radius: 0 8px 8px 0;
}
.work-detail-intro p {
  font-size: 1.05rem;
  color: var(--text-dark);
  line-height: 1.9;
  margin: 0;
  font-weight: 500;
}

/* 作品正文 */
.work-detail-body {
  margin: 0 auto;
}
.work-detail-body p {
  font-size: 1rem;
  color: var(--text-dark);
  line-height: 2;
  margin-bottom: 20px;
  text-indent: 2em;
}

/* 响应式 */
@media (max-width: 600px) {
  .work-detail-hero {
    margin-bottom: 24px;
    border-radius: 4px;
  }
  .work-detail-cover {
    max-height: 300px;
  }
  .work-detail-desc {
    padding: 14px 16px;
  }
  .work-detail-desc p {
    font-size: 0.82rem;
  }
  .work-detail-intro {
    padding: 16px 18px;
  }
  .work-detail-intro p {
    font-size: 0.98rem;
  }
}

/* 详情页底部 */
.detail-foot {
  margin: 60px auto;
  padding-top: 32px;
  border-top: 1px solid var(--line-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-tag {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg-soft);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--line-light);
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 30px;
  text-decoration: none;
  font-size: 0.88rem;
  font-family: var(--sans);
  transition: all 0.25s;
  flex-shrink: 0;
}
.detail-back:hover {
  background: var(--primary);
  color: #fff;
}

/* 响应式 */
@media (max-width: 600px) {
  .detail-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .detail-back {
    width: 100%;
    justify-content: center;
  }
}
.loadmore {
  text-align: center;
  font-size: 1rem;
  margin: 30px 0px;
}
/* ============================================================
   响应式
============================================================ */
@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page-layout .side-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 0 0 8px;
    border-left: none;
    border-bottom: 2px solid #ece6dc;
  }
  .page-layout .side-nav a {
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-left: 0;
    margin-bottom: -2px;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .page-layout .side-nav a:hover,
  .page-layout .side-nav a.active {
    border-left: none;
    border-bottom-color: var(--primary);
    background: none;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-title {
    font-size: 28px;
  }
}
@media (max-width: 600px) {
  .work-grid {
    grid-template-columns: 1fr;

    padding: 40px 16px 60px;
  }
  .detail-title {
    font-size: 24px;
  }
  .detail-meta {
    flex-direction: column;
    gap: 8px;
  }
  .page-banner h1 {
    font-size: 28px;
  }
  .page-banner {
    padding: 64px 0 48px;
  }

  /* —— 艺术家详情 · 简介两栏文字布局 —— */
  .ad-info-layout {
    display: grid;
    /*    grid-template-columns: 1fr 1.5fr; */
    gap: 56px;
    padding: 8px 0;
  }
  .ad-info-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: #2a1d12;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #825f45;
    display: block;
  }
  .ad-info-block p {
    font-size: 14px;
    color: #4a3a2d;
    line-height: 2.15;
    margin-bottom: 10px;
    padding-left: 12px;
    border-left: 2px solid #d8cfc1;
  }
  .ad-info-block p:first-child {
    border-left-color: #825f45;
    font-weight: 500;
  }
  .ad-empty-tip {
    font-size: 1rem;
    color: #998877;
    text-align: center;
    padding: 80px 0;
    letter-spacing: 0.05em;
  }

  @media (max-width: 900px) {
    .ad-info-layout {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }
}
/* ============================================================
   新闻列表页 newslist.html
============================================================ */
.nl-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 50px;
}

.nl-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-light);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.25s;
}

.nl-item:first-child {
  border-top: 1px solid var(--line-light);
}

.nl-item:hover {
  padding-left: 10px;
}

.nl-item:hover .nl-title {
  color: var(--primary);
}

/* 图片 */
.nl-cover {
  width: 160px;
  height: 110px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line-light);
  flex-shrink: 0;
}

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

.nl-item:hover .nl-cover img {
  transform: scale(1.06);
}

/* 右侧文字区 */
.nl-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.nl-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: #998877;
}

.nl-cat {
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1em;
}

.nl-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #2a1d12;
  line-height: 1.4;
  margin: 0;
  transition: color 0.2s;
}

.nl-desc {
  font-size: 0.88rem;
  color: #6b5b4f;
  line-height: 1.75;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 无图片时：紧凑单行标题 */
.nl-item.no-cover {
  grid-template-columns: 1fr;
  padding-left: 16px;
  border-left: 3px solid transparent;
}

.nl-item.no-cover:hover {
  padding-left: 24px;
  border-left-color: var(--primary);
}

.nl-item.no-cover .nl-title {
  font-size: 1rem;
}

/* 分页 */
.pagination {
  margin-top: 48px;
  justify-content: center;
}

/* 分类导航小圆点 */
.nl-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nl-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8b89a;
  flex-shrink: 0;
  transition:
    background 0.2s,
    transform 0.2s;
}

.nl-nav-item.active .nl-nav-dot,
.nl-nav-item:hover .nl-nav-dot {
  background: var(--primary);
  transform: scale(1.4);
}

/* ============================================================
   响应式：新闻列表
============================================================ */
@media (max-width: 900px) {
  .nl-item {
    grid-template-columns: 160px 1fr;
    gap: 16px;
  }
  .nl-cover {
    width: 160px;
    height: 110px;
  }
  .nl-title {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  .nl-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .nl-cover {
    width: 100%;
    height: 180px;
  }
}

/* ──── 搜索组件 ──── */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

/* 分类下拉 */
.search-cat {
  position: relative;
}

.search-cat-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 12px;
  height: 26px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 20px 0 0 20px;
  color: var(--primary);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
  user-select: none;
}
.search-cat-btn:hover {
  background: rgb(255, 255, 255);
  color: var(--primary-deep);
}
.search-cat-btn svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.2s;
}
.search-cat.open .search-cat-btn svg {
  transform: rotate(180deg);
}

.search-cat-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 90px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  z-index: 9999;
}
.search-cat.open .search-cat-dropdown {
  display: block;
  animation: catFadeIn 0.15s ease;
}
@keyframes catFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-cat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 0.8rem;
  color: #444;
  cursor: pointer;
  transition: background 0.15s;
}
.search-cat-item:hover {
  background: #f5f0e8;
}
.search-cat-item.active {
  background: #f0e8d8;
  color: #8b5e3c;
  font-weight: 500;
}
.search-cat-item .sci-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
}
.search-cat-item.active .sci-dot {
  background: #8b5e3c;
}

/* 搜索输入框 */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.search-input {
  width: 100%;
  height: 26px;
  padding: 0 36px 0 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
  border-radius: 0 20px 20px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.search-input:focus {
  border-color: var(--primary);
  background: #fff;
}

.search-icon-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}
.search-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.search-icon-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  transition: stroke 0.2s;
}
.search-icon-btn:hover svg {
  stroke: var(--primary-deep);
}

/* 搜索结果下拉 */
.search-result-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 380px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 9999;
}
.search-result-panel.open {
  display: block;
}

.search-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid #f0ebe3;
}
.search-result-header span {
  font-size: 0.72rem;
  color: #aaa;
}
.search-result-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.search-result-close:hover {
  opacity: 0.8;
}
.search-result-close svg {
  width: 12px;
  height: 12px;
  stroke: #888;
  stroke-width: 2;
  fill: none;
}

.search-result-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px 0;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  cursor: pointer;
}
.search-result-item:hover {
  background: #faf5ee;
}

.sri-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f0ebe3;
}
.sri-icon svg {
  width: 18px;
  height: 18px;
  stroke: #9c7b5e;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sri-icon.team {
  background: #e8f2e8;
}
.sri-icon.team svg {
  stroke: #5a8a5a;
}
.sri-icon.works {
  background: #f2ece0;
}
.sri-icon.works svg {
  stroke: #8b6f47;
}
.sri-icon.news {
  background: #e8eef4;
}
.sri-icon.news svg {
  stroke: #5a7a8b;
}

.sri-body {
  flex: 1;
  min-width: 0;
}
.sri-title {
  font-size: 0.85rem;
  color: #2c1a0e;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sri-title em {
  color: #9c7b5e;
  font-style: normal;
  font-weight: 700;
  background: #f5e8d0;
  border-radius: 2px;
  padding: 0 1px;
}
.sri-meta {
  font-size: 0.72rem;
  color: #a89f92;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sri-tag {
  font-size: 0.65rem;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  font-weight: 500;
}
.sri-tag.team {
  background: #5a8a5a;
}
.sri-tag.works {
  background: #8b6f47;
}
.sri-tag.news {
  background: #5a7a8b;
}

.search-empty {
  padding: 32px 16px;
  text-align: center;
}
.search-empty svg {
  width: 36px;
  height: 36px;
  stroke: #ccc;
  fill: none;
  stroke-width: 1.2;
  margin-bottom: 10px;
}
.search-empty p {
  font-size: 0.8rem;
  color: #bbb;
}
.search-empty.hidden {
  display: none;
}

/* 搜索页 */
.sh-form-wrap {
  max-width: 680px;
  margin: 0 auto 32px;
}

.sh-form {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #d4c5b2;
  border-radius: 40px;
  padding: 6px 6px 6px 0;
  box-shadow: 0 4px 20px rgba(130, 95, 69, 0.1);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.sh-form:focus-within {
  border-color: #825f45;
  box-shadow: 0 4px 24px rgba(130, 95, 69, 0.18);
}

/* 下拉分类 */
.sh-cat {
  position: relative;
}
.sh-cat-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 40px;
  border: none;
  border-right: 1px solid #e0d4c6;
  color: #825f45;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 30px 0 0 30px;
  white-space: nowrap;
  user-select: none;
  transition: background 0.2s;
}
.sh-cat-btn:hover {
  background: rgba(130, 95, 69, 0.12);
}
.sh-cat-btn svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  transition: transform 0.2s;
}
.sh-cat.open .sh-cat-btn svg {
  transform: rotate(180deg);
}

.sh-cat-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 999;
}
.sh-cat.open .sh-cat-dropdown {
  display: block;
}

.sh-cat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 0.85rem;
  color: #444;
  cursor: pointer;
  transition: background 0.15s;
}
.sh-cat-item:hover {
  background: #f5f0e8;
}
.sh-cat-item.active {
  background: #f0e8d8;
  color: #8b5e3c;
  font-weight: 500;
}
.sh-cat-item .sci-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
}
.sh-cat-item.active .sci-dot {
  background: #8b5e3c;
}

/* 搜索输入 */
.sh-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: #3d2a1a;
  background: none;
  font-family: inherit;
  min-width: 0;
}
.sh-input::placeholder {
  color: #b0a090;
}

.sh-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #825f45;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 2px;
  transition: background 0.2s;
}
.sh-btn:hover {
  background: #6d4f3a;
}
.sh-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* 搜索关键词显示 */
.sh-keyword-bar {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 16px;
  background: #faf6f0;
  border-radius: 8px;
  border-left: 3px solid #825f45;
}
.sh-kw-label {
  font-size: 0.82rem;
  color: #888;
}
.sh-kw-value {
  font-size: 0.9rem;
  color: #3d2a1a;
  font-weight: 600;
}

/* 搜索关键词显示区域（search.html 页面用） */
.search-keyword {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #faf6f0 0%, #f5f0e8 100%);
  border-radius: 24px;
  border: 1px solid #e8ddd0;
  box-shadow: 0 2px 8px rgba(130, 95, 69, 0.06);
  align-self: flex-start;
  transition:
    box-shadow 0.25s,
    border-color 0.25s;
}
.search-keyword:hover {
  border-color: #d4c5b2;
  box-shadow: 0 4px 12px rgba(130, 95, 69, 0.1);
}
.search-keyword-text {
  font-size: 0.82rem;
  color: #888;
  letter-spacing: 0.0625rem;
  white-space: nowrap;
}
.search-keyword-value {
  font-size: 0.92rem;
  color: #825f45;
  font-weight: 600;
  letter-spacing: 0.03125rem;
  padding: 4px 14px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e0d4c6;
  box-shadow: 0 1px 3px rgba(130, 95, 69, 0.08);
}

/* 搜索结果 */
.sh-result-meta {
  font-size: 0.82rem;
  color: #aaa;
  padding: 0 4px 14px;
  border-bottom: 1px solid #ede8e2;
  margin-bottom: 16px;
}

.sh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  color: #ccc;
}
.sh-empty svg {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}
.sh-empty p {
  font-size: 0.9rem;
}

/* 结果区域 */
.search-result-area {
  margin: 0 auto;
}

.search-result-meta {
  font-size: 0.85rem;
  color: #999;
  padding: 0 4px 16px;
  border-bottom: 1px solid #e8e0d8;
  margin-bottom: 16px;
}

.search-result-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-result-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.sp-result-item:hover {
  box-shadow: 0 4px 16px rgba(130, 95, 69, 0.15);
  transform: translateY(-2px);
}

.sp-ri-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f0ebe3;
}
.sp-ri-icon svg {
  width: 20px;
  height: 20px;
  stroke: #9c7b5e;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sp-ri-icon.team {
  background: #e8f2e8;
}
.sp-ri-icon.team svg {
  stroke: #5a8a5a;
}
.sp-ri-icon.works {
  background: #f2ece0;
}
.sp-ri-icon.works svg {
  stroke: #8b6f47;
}
.sp-ri-icon.news {
  background: #e8eef4;
}
.sp-ri-icon.news svg {
  stroke: #5a7a8b;
}

.sp-ri-body {
  flex: 1;
  min-width: 0;
}

.sp-ri-title {
  font-size: 1rem;
  color: #2c1a0e;
  font-weight: 600;
  margin-bottom: 4px;
}
.sp-ri-title em {
  color: #9c7b5e;
  font-style: normal;
  background: #f5e8d0;
  border-radius: 3px;
  padding: 0 2px;
}

.sp-ri-desc {
  font-size: 0.82rem;
  color: #777;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-ri-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sp-ri-tags span {
  font-size: 0.7rem;
  color: #8b6f47;
  background: #f5ede0;
  padding: 2px 8px;
  border-radius: 10px;
}

.sp-ri-tag {
  font-size: 0.72rem;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
  font-weight: 500;
}
.sp-ri-tag.team {
  background: #5a8a5a;
}
.sp-ri-tag.works {
  background: #8b6f47;
}
.sp-ri-tag.news {
  background: #5a7a8b;
}

/* 空状态 */
.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #ccc;
}
.search-empty-state svg {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
}
.search-empty-state p {
  font-size: 0.95rem;
}

/* 响应式 */
@media (max-width: 600px) {
  .search-page-title {
    font-size: 1.4rem;
  }
  .search-page-input {
    font-size: 0.85rem;
  }
  .sp-result-item {
    padding: 14px;
  }
  .sp-ri-icon {
    width: 36px;
    height: 36px;
  }
  .sp-ri-title {
    font-size: 0.9rem;
  }

  /* 搜索关键词响应式 */
  .search-keyword {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    margin-top: 12px;
  }
  .search-keyword-text {
    font-size: 0.75rem;
  }
  .search-keyword-value {
    font-size: 0.85rem;
    padding: 3px 10px;
  }
}