/* ==========================================================================
   文化出海 · 广西文化云展馆（culture.html）
   古韵版式：绢本设色 + 宣纸肌理 + 竖排题名 + 朱砂印 + 界格留白。
   色源：石青 / 石绿 / 朱砂 / 藤黄 / 黛 / 赭石（传统矿物颜料）。
   与 PC 门户同源但刻意脱开「商业站」气质 —— 这一页是展馆，不是商品页。
   ========================================================================== */

:root {
  /* 矿物颜料 */
  --cu-paper: #F2E9D6;          /* 宣纸 */
  --cu-paper-2: #EADFC7;        /* 绢本 */
  --cu-paper-3: #FBF6EC;        /* 高光纸 */
  --cu-ink: #2A2520;            /* 墨 */
  --cu-ink-2: #4A4136;          /* 淡墨 */
  --cu-ink-3: #7A6E5C;          /* 更淡的墨 */
  --cu-cin: #9E3B2E;            /* 朱砂 */
  --cu-cin-2: #B8503F;
  --cu-azurite: #2C5B72;        /* 石青 */
  --cu-azurite-2: #3E7B94;
  --cu-malachite: #4A6B52;      /* 石绿 */
  --cu-gamboge: #B98A34;        /* 藤黄 */
  --cu-gamboge-2: #D8AE55;
  --cu-ochre: #8A5A32;          /* 赭石 */
  --cu-dai: #37485C;            /* 黛 */
  --cu-line: #CFC0A0;           /* 界格线 */
  --cu-line-2: #B9A781;
  --cu-line-3: #9C8A64;
}

/* ---------- 页面底：宣纸肌理 ---------- */
body[data-page="culture"] {
  background: var(--cu-paper);
  color: var(--cu-ink);
  position: relative;
}
body[data-page="culture"]::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(160, 140, 100, .045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(160, 140, 100, .035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 18% 12%, rgba(200, 176, 130, .16), transparent 46%),
    radial-gradient(circle at 82% 68%, rgba(186, 160, 112, .13), transparent 50%);
  opacity: .85;
}
body[data-page="culture"] main { position: relative; z-index: 1; }
body[data-page="culture"] .wrap { position: relative; z-index: 1; }

/* 章节：交替宣纸 / 绢本 */
body[data-page="culture"] .section { background: transparent; }
body[data-page="culture"] .section--soft {
  background:
    linear-gradient(180deg, rgba(234, 223, 199, .78), rgba(234, 223, 199, .78));
  box-shadow: inset 0 1px 0 rgba(160, 140, 100, .18), inset 0 -1px 0 rgba(160, 140, 100, .18);
}

/* ==========================================================================
   云展馆门头 · 全幅古画
   ========================================================================== */
.cu-hero {
  position: relative; overflow: hidden; color: var(--cu-ink);
  background: var(--cu-paper-2);
  padding: 0;
  border-bottom: 1px solid var(--cu-line-2);
}
/* 全幅古画底 */
.cu-hero__bg {
  position: absolute; inset: 0; overflow: hidden;
}
.cu-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  display: block;
}
/* 绢本罩染：把画压进纸里（左侧浓、右侧透） */
.cu-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(242, 233, 214, .97) 0%, rgba(242, 233, 214, .93) 30%,
                    rgba(242, 233, 214, .62) 52%, rgba(242, 233, 214, .18) 74%, rgba(242, 233, 214, .06) 100%),
    linear-gradient(180deg, rgba(226, 214, 188, .55) 0%, transparent 22%, transparent 74%, rgba(214, 200, 170, .6) 100%);
}
.cu-hero__bg--flip img { object-position: center 45%; }

.cu-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0 46px; align-items: center;
  padding: 84px 0 74px;
  min-height: 560px;
}
/* 左侧横排正文 */
.cu-hero__txt { grid-column: 1; grid-row: 1 / span 2; max-width: 620px; }

/* 右侧竖排引首 —— 中式版式的核心
   竖排阅读顺序：自右向左（竖排右起）。
   DOM 顺序 = main(主题) → seal(印)，用 row-reverse 让 main 落在最右列。 */
.cu-title {
  grid-column: 2; grid-row: 1;
  justify-self: end; align-self: center;
  display: flex; flex-direction: row-reverse; align-items: flex-start;
  gap: 14px;
  padding-right: 76px;          /* 让开右侧悬浮栏 */
}
.cu-title__main {
  writing-mode: vertical-rl; text-orientation: mixed;
  letter-spacing: .26em;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: 40px; font-weight: 700; line-height: 1.24;
  color: var(--cu-ink);
  max-height: 400px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.cu-title__main .grad, .cu-title__main .thin { color: var(--cu-cin); }
/* 朱砂印 */
.cu-title__seal {
  writing-mode: horizontal-tb; text-orientation: mixed;
  align-self: flex-start; margin-top: 2px;
  width: 54px; height: 54px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--cu-cin); color: #FBF6EC;
  font-family: "Songti SC", "STSong", serif;
  font-size: 12px; font-weight: 800; line-height: 1.2;
  letter-spacing: .02em; text-align: center;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(120, 45, 30, .32);
  opacity: .93;
  transform: rotate(-2deg);
}
.cu-title__seal span { display: block; }
/* 竖排小签：底部横向落款 */
/* 竖排小签：标题正下方的横向落款 */
.cu-title__sub {
  grid-column: 2; grid-row: 2;
  justify-self: end; align-self: start;
  writing-mode: horizontal-tb;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-size: 11.5px; letter-spacing: .04em; color: var(--cu-ink-3);
  max-width: 268px; padding: 10px 13px; margin-top: 16px;
  margin-right: 132px;
  border: 1px solid var(--cu-line-2);
  border-left: 3px solid var(--cu-cin);
  background: rgba(251, 246, 236, .82);
  box-shadow: 0 4px 18px rgba(90, 70, 40, .1);
}
.cu-title__sub b {
  font-family: "Songti SC", "STSong", serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: .16em; color: var(--cu-azurite);
}
.cu-title__sub span { color: var(--cu-ink-3); font-size: 11px; letter-spacing: .04em; }
.cu-title__sub em {
  font-style: normal; font-size: 11.5px; line-height: 1.8;
  letter-spacing: .04em; color: var(--cu-cin);
}

/* 引首（面包屑 + 英文题签） */
.cu-crumb {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--cu-ink-3); margin-bottom: 26px; letter-spacing: .06em;
}
.cu-crumb a { color: var(--cu-ink-2); text-decoration: none; border-bottom: 1px solid var(--cu-line-2); }
.cu-crumb a:hover { color: var(--cu-cin); border-color: var(--cu-cin); }
.cu-crumb i { font-style: normal; opacity: .5; }
.cu-hero__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .3em;
  color: var(--cu-azurite); margin-bottom: 18px;
  border: 1px solid var(--cu-line-2); padding: 4px 12px;
  background: rgba(251, 246, 236, .55);
}
.cu-hero__tag::before {
  content: ""; width: 6px; height: 6px; background: var(--cu-cin);
  transform: rotate(45deg);
}
.cu-hero__lead {
  margin: 0 0 26px; max-width: 560px;
  font-size: 15px; line-height: 2.05; color: var(--cu-ink-2);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
}
.cu-hero__lead b { color: var(--cu-cin); font-weight: 700; }
.cu-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* 古韵按钮：描边 + 印泥色实心 */
.cu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 2px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; cursor: pointer;
  transition: all .2s ease;
}
.cu-btn--solid { background: var(--cu-cin); color: #FBF6EC; border: 1px solid var(--cu-cin); }
.cu-btn--solid:hover { background: var(--cu-cin-2); border-color: var(--cu-cin-2); transform: translateY(-1px); }
.cu-btn--line { background: rgba(251, 246, 236, .6); color: var(--cu-ink); border: 1px solid var(--cu-line-3); }
.cu-btn--line:hover { border-color: var(--cu-cin); color: var(--cu-cin); background: rgba(251, 246, 236, .9); }

/* 题跋条（原数据牌 → 卷轴式） */
.cu-colophon {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--cu-line-2);
  border-bottom: 1px solid var(--cu-line-2);
  background: rgba(251, 246, 236, .48);
}
.cu-colophon div {
  flex: 1; min-width: 122px; padding: 11px 14px;
  border-right: 1px dashed var(--cu-line);
  display: flex; align-items: baseline; gap: 6px;
}
.cu-colophon div:last-child { border-right: 0; }
.cu-colophon b {
  font-family: "Songti SC", "STSong", serif;
  font-size: 22px; font-weight: 700; color: var(--cu-cin);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cu-colophon b i { font-style: normal; font-size: 11px; color: var(--cu-ink-3); margin-left: 1px; }
.cu-colophon span {
  font-size: 11.5px; color: var(--cu-ink-3); letter-spacing: .12em;
  font-family: "Songti SC", "STSong", serif;
}

/* ==========================================================================
   通用小节：界格题头
   ========================================================================== */
.cu-h { text-align: center; margin-bottom: 36px; }
.cu-h .sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .28em;
  color: var(--cu-azurite); margin-bottom: 12px;
}
.cu-h .sec-tag::before, .cu-h .sec-tag::after {
  content: ""; width: 26px; height: 1px; background: var(--cu-line-3);
}
.cu-h h2 {
  margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: .04em;
  color: var(--cu-ink);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
}
.cu-h h2 em { font-style: normal; color: var(--cu-cin); }
.cu-h p {
  margin: 0 auto; max-width: 720px; font-size: 14px; line-height: 2;
  color: var(--cu-ink-2);
}
.cu-h p b { color: var(--cu-cin); }

/* 章节分隔：手绘界格线 */
.cu-divider {
  height: 14px; margin: 0 auto 30px; width: min(320px, 80%);
  background:
    linear-gradient(var(--cu-line-2), var(--cu-line-2)) center 6px / 100% 1px no-repeat,
    radial-gradient(circle at center 6.5px, var(--cu-cin) 3px, transparent 3.5px) center / 8px 8px no-repeat;
  opacity: .8;
}

/* ==========================================================================
   方法论：寻根觅脉（四道工序 → 卷轴式）
   ========================================================================== */
/* 引图：稻田是最早的谱系图 */
.cu-mfig {
  position: relative; margin: 0 0 26px;
  border: 1px solid var(--cu-line);
  background: var(--cu-paper-3);
  overflow: hidden;
}
.cu-mfig img {
  display: block; width: 100%; height: 300px; object-fit: cover;
  object-position: 50% 46%;
  filter: saturate(.92) contrast(1.02);
}
.cu-mfig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 22px 13px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px; letter-spacing: .16em; color: var(--cu-paper-1);
  background: linear-gradient(180deg, transparent, rgba(28, 22, 16, .68) 46%);
  text-align: center;
}
@media (max-width: 720px) {
  .cu-mfig img { height: 190px; }
  .cu-mfig figcaption { font-size: 12px; letter-spacing: .1em; padding: 12px 14px 10px; }
}
.cu-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cu-step {
  position: relative; overflow: hidden;
  background: var(--cu-paper-3);
  border: 1px solid var(--cu-line);
  padding: 24px 20px 20px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cu-step::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--cu-line);
  pointer-events: none;
}
.cu-step::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--cu-cin), var(--cu-gamboge), var(--cu-azurite));
  opacity: .75;
}
.cu-step:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(90, 70, 40, .16); }
.cu-step__no {
  font-family: "Songti SC", serif; font-size: 34px; font-weight: 700;
  color: var(--cu-line-2); line-height: 1; margin-bottom: 4px;
}
.cu-step h3 {
  margin: 0 0 9px; font-size: 20px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", "STSong", serif; letter-spacing: .1em;
}
.cu-step p { margin: 0 0 13px; font-size: 13px; line-height: 1.95; color: var(--cu-ink-2); }
.cu-step__k { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-step__k span {
  font-size: 11px; font-weight: 700; color: var(--cu-azurite);
  background: rgba(44, 91, 114, .08); border: 1px solid rgba(44, 91, 114, .22);
  padding: 3px 9px; border-radius: 2px;
}

/* 纪律：朱批 */
.cu-rules { margin-top: 24px; display: grid; gap: 10px; }
.cu-rules div {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(251, 246, 236, .72);
  border: 1px solid var(--cu-line); border-left: 3px solid var(--cu-cin);
  padding: 13px 16px; font-size: 13px; line-height: 1.9; color: var(--cu-ink-2);
}
.cu-rules div::before {
  content: "朱"; flex: none; width: 22px; height: 22px; margin-top: 2px;
  background: var(--cu-cin); color: #FBF6EC;
  font-family: "Songti SC", serif; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   文化谱系：册页裱边
   ========================================================================== */
.cu-ltabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.cu-ltabs button {
  height: 34px; padding: 0 17px; border-radius: 2px;
  border: 1px solid var(--cu-line-2); background: var(--cu-paper-3);
  color: var(--cu-ink-2); font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: "Songti SC", "STSong", serif; letter-spacing: .08em;
  transition: all .18s ease;
}
.cu-ltabs button.on { background: var(--cu-cin); border-color: var(--cu-cin); color: #FBF6EC; }
.cu-ltabs button:hover:not(.on) { border-color: var(--cu-azurite); color: var(--cu-azurite); }

.cu-lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cu-lcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--cu-paper-3);
  border: 1px solid var(--cu-line);
  padding: 20px 18px 18px;
  box-shadow: 0 2px 0 rgba(160, 140, 100, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cu-lcard::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(207, 192, 160, .7);
  pointer-events: none;
}
.cu-lcard:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(90, 70, 40, .18); }
/* 右上角竖排小签 */
.cu-lcard__sign {
  position: absolute; top: 14px; right: 12px; z-index: 2;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: "Songti SC", serif; font-size: 11px; letter-spacing: .2em;
  color: var(--cu-ink-3);
  border-right: 1px solid var(--cu-line-2); padding-right: 5px;
}
.cu-lcard__top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cu-lcard__cat {
  font-size: 10.5px; font-weight: 800; color: #FBF6EC;
  background: var(--cu-azurite); padding: 2px 8px; border-radius: 2px;
  font-family: "Songti SC", serif; letter-spacing: .1em;
}
.cu-lcard__cat[data-c="根脉"] { background: var(--cu-ochre); }
.cu-lcard__cat[data-c="族群"] { background: var(--cu-malachite); }
.cu-lcard__cat[data-c="符号"] { background: #6B4A7A; }
.cu-lcard__cat[data-c="非遗"] { background: var(--cu-azurite-2); }
.cu-lcard__cat[data-c="物产"] { background: var(--cu-dai); }
.cu-lcard__cat[data-c="声音"] { background: var(--cu-cin); }
.cu-lcard h3 {
  margin: 0; font-size: 19px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", "STSong", serif; letter-spacing: .05em;
}
.cu-lcard__era { margin-left: auto; font-size: 11px; color: var(--cu-ink-3); font-family: "Songti SC", serif; }
.cu-lcard p { margin: 0; font-size: 13px; line-height: 1.95; color: var(--cu-ink-2); }
.cu-lcard__sym { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-lcard__sym span {
  font-size: 11px; font-weight: 700; color: var(--cu-ochre);
  background: rgba(138, 90, 50, .07); border: 1px solid rgba(138, 90, 50, .26);
  border-radius: 2px; padding: 2px 9px;
}
.cu-lcard__rel { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-lcard__rel span {
  font-size: 11px; font-weight: 700; color: var(--cu-azurite);
  background: rgba(44, 91, 114, .07); border: 1px solid rgba(44, 91, 114, .22);
  border-radius: 2px; padding: 2px 9px;
}
.cu-lcard__anchor {
  margin-top: auto; font-size: 12px; line-height: 1.85; color: var(--cu-ink-2);
  background: rgba(234, 223, 199, .55); border-left: 2px solid var(--cu-gamboge);
  padding: 9px 12px;
}
.cu-lcard__anchor b { color: var(--cu-ochre); }
.cu-lcard__stat {
  font-size: 12px; color: var(--cu-ink-3); line-height: 1.8;
  padding-top: 8px; border-top: 1px dashed var(--cu-line);
}

/* ==========================================================================
   四种文化形态：卷轴（四幅）
   ========================================================================== */
.cu-forms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cu-form {
  position: relative; overflow: hidden;
  background: var(--cu-paper-3);
  border: 1px solid var(--cu-line);
  padding: 26px 20px 22px;
  min-height: 300px; display: flex; flex-direction: column;
  box-shadow: 0 2px 0 rgba(160, 140, 100, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cu-form:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(90, 70, 40, .18); }
/* 顶部题签（代替深色渐变块） */
.cu-form__band {
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--cu-cin);
}
.cu-form:nth-child(2) .cu-form__band { background: var(--cu-azurite); }
.cu-form:nth-child(3) .cu-form__band { background: var(--cu-gamboge); }
.cu-form:nth-child(4) .cu-form__band { background: var(--cu-malachite); }
/* 卷轴左右轴杆 */
.cu-form::before, .cu-form::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px;
  background: linear-gradient(180deg, var(--cu-ochre), #6E4526);
  opacity: .9;
}
.cu-form::before { top: 0; }
.cu-form::after { bottom: 0; }
.cu-form__no {
  font-family: "Songti SC", serif; font-size: 12px; font-weight: 700;
  letter-spacing: .3em; color: var(--cu-ink-3); margin-bottom: 10px;
}
/* 形态插图（卷轴内的小画） */
.cu-form__fig {
  margin: 0 0 12px; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--cu-line); background: var(--cu-paper-2);
  position: relative;
}
.cu-form__fig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.9) contrast(1.03);
}
.cu-form__fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 22px rgba(120, 96, 60, .18);
}
.cu-form__glyph {
  font-family: "Songti SC", "STSong", serif;
  font-size: 52px; font-weight: 700; line-height: 1; margin: 4px 0 6px;
  color: var(--cu-cin);
}
.cu-form:nth-child(2) .cu-form__glyph { color: var(--cu-azurite); }
.cu-form:nth-child(3) .cu-form__glyph { color: var(--cu-gamboge); }
.cu-form:nth-child(4) .cu-form__glyph { color: var(--cu-malachite); }
.cu-form h3 {
  margin: 0 0 3px; font-size: 22px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", "STSong", serif; letter-spacing: .12em;
}
.cu-form__en { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--cu-ink-3); }
.cu-form p { margin: 14px 0 16px; font-size: 12.8px; line-height: 1.95; color: var(--cu-ink-2); }
.cu-form__out { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.cu-form__out span {
  font-size: 11px; font-weight: 700; color: var(--cu-ink-2);
  background: rgba(234, 223, 199, .7); border: 1px solid var(--cu-line);
  border-radius: 2px; padding: 2px 9px;
}

/* ==========================================================================
   文化表现物：带器物图的展签
   ========================================================================== */
.cu-arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cu-art {
  background: var(--cu-paper-3); border: 1px solid var(--cu-line);
  padding: 0 18px 18px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 2px 0 rgba(160, 140, 100, .12);
  overflow: hidden; position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cu-art:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(90, 70, 40, .18); }
.cu-art__fig {
  margin: 0 -18px 12px; position: relative; aspect-ratio: 16 / 10;
  overflow: hidden; background: var(--cu-paper-2);
  border-bottom: 1px solid var(--cu-line-2);
}
.cu-art__fig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.94) contrast(1.02);
  transition: transform .6s ease;
}
.cu-art:hover .cu-art__fig img { transform: scale(1.045); }
.cu-art__fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 34px rgba(120, 96, 60, .16);
}
.cu-art__fig figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  writing-mode: vertical-rl; text-orientation: upright;
  background: rgba(42, 37, 32, .58); color: var(--cu-paper-3);
  font-family: "Songti SC", serif; font-size: 11px; letter-spacing: .22em;
  padding: 8px 5px; border-top-right-radius: 3px;
}
.cu-art__hd { display: flex; align-items: center; gap: 9px; }
.cu-art__hd b {
  font-size: 18px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", "STSong", serif; letter-spacing: .06em;
}
.cu-art__hd span {
  margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--cu-cin);
  background: rgba(158, 59, 46, .08); border: 1px solid rgba(158, 59, 46, .24);
  border-radius: 2px; padding: 2px 8px;
}
.cu-art p { margin: 0; font-size: 12.8px; line-height: 1.9; color: var(--cu-ink-2); }
.cu-art dl { margin: 0; display: grid; gap: 7px; font-size: 12.3px; }
.cu-art dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--cu-ink-3);
}
.cu-art dd { margin: 0 0 4px; color: var(--cu-ink-2); line-height: 1.8; }
.cu-art__fit {
  margin-top: auto; font-size: 11.5px; font-weight: 700; color: var(--cu-ochre);
  background: rgba(138, 90, 50, .07); border: 1px solid rgba(138, 90, 50, .22);
  border-radius: 2px; padding: 6px 10px;
}

/* ==========================================================================
   桂品双轴：左源右流，两轴对读
   ========================================================================== */
.cu-gp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cu-gpc {
  background: var(--cu-paper-3); border: 1px solid var(--cu-line);
  box-shadow: 0 2px 0 rgba(160, 140, 100, .12); overflow: hidden;
}
.cu-gpc__hd {
  display: flex; align-items: center; gap: 10px; padding: 15px 20px;
  background: linear-gradient(180deg, var(--cu-paper-2), var(--cu-paper-2));
  border-bottom: 1px solid var(--cu-line-2);
}
.cu-gpc__hd b {
  font-size: 18px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", "STSong", serif; letter-spacing: .1em;
}
.cu-gpc__hd span { font-size: 11px; color: var(--cu-ink-3); letter-spacing: .1em; }
.cu-gpc__hd em {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--cu-ochre); letter-spacing: .12em;
}
.cu-gpc__body { display: grid; grid-template-columns: 1fr 1fr; }
.cu-gpc__side { padding: 16px 18px 18px; }
.cu-gpc__side + .cu-gpc__side { border-left: 1px dashed var(--cu-line-2); background: rgba(234, 223, 199, .42); }
.cu-gpc__side h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 11px;
  font-size: 13px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", serif; letter-spacing: .08em;
}
.cu-gpc__side h4 i {
  flex: none; width: 21px; height: 21px; font-style: normal; font-size: 12px;
  font-weight: 800; color: #FBF6EC; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; font-family: "Songti SC", serif;
}
.cu-gpc__side--from h4 i { background: var(--cu-ochre); }
.cu-gpc__side--to h4 i { background: var(--cu-azurite); }
.cu-gpc__side dl { margin: 0; display: grid; gap: 9px; }
.cu-gpc__side dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--cu-ink-3);
}
.cu-gpc__side dd { margin: 1px 0 0; font-size: 12.3px; line-height: 1.8; color: var(--cu-ink-2); }

/* ==========================================================================
   出海路径：六道手记
   ========================================================================== */
.cu-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cu-path {
  position: relative; background: var(--cu-paper-3); border: 1px solid var(--cu-line);
  padding: 20px; box-shadow: 0 2px 0 rgba(160, 140, 100, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cu-path:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(90, 70, 40, .16); }
.cu-path__no {
  font-family: "Songti SC", serif; font-size: 26px; font-weight: 700;
  color: var(--cu-line-2); line-height: 1;
}
.cu-path h3 {
  margin: 8px 0 7px; font-size: 17px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", serif; letter-spacing: .08em;
}
.cu-path p { margin: 0 0 12px; font-size: 12.8px; line-height: 1.9; color: var(--cu-ink-2); }
.cu-path__out {
  font-size: 11.5px; font-weight: 700; color: var(--cu-azurite);
  background: rgba(44, 91, 114, .07); border: 1px solid rgba(44, 91, 114, .22);
  border-radius: 2px; padding: 4px 11px; display: inline-block;
}

/* ==========================================================================
   文化身份证：契纸
   ========================================================================== */
.cu-id {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 30px; align-items: center;
  background: var(--cu-paper-3); border: 1px solid var(--cu-line);
  padding: 30px 32px; box-shadow: 0 6px 24px rgba(90, 70, 40, .13);
  position: relative;
}
.cu-id::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--cu-line);
  pointer-events: none;
}
.cu-id h3 {
  margin: 0 0 11px; font-size: 24px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", serif; letter-spacing: .1em;
}
.cu-id p { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--cu-ink-2); }
.cu-id__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cu-id__fields div {
  background: rgba(234, 223, 199, .5); border: 1px solid var(--cu-line);
  padding: 12px 14px;
}
.cu-id__fields b {
  display: block; font-size: 14px; font-weight: 700; color: var(--cu-cin);
  margin-bottom: 4px; font-family: "Songti SC", serif; letter-spacing: .06em;
}
.cu-id__fields span { font-size: 11.5px; color: var(--cu-ink-3); line-height: 1.7; }

/* ==========================================================================
   尾部：题跋条（不是商业 CTA）
   ========================================================================== */
.cu-cta {
  position: relative; overflow: hidden;
  text-align: center; padding: 44px 30px;
  background: var(--cu-paper-2); border: 1px solid var(--cu-line-2);
  box-shadow: inset 0 0 0 6px var(--cu-paper), inset 0 0 0 7px var(--cu-line-2);
}
.cu-cta h3 {
  margin: 0 0 12px; font-size: 26px; font-weight: 700; color: var(--cu-ink);
  font-family: "Songti SC", "STSong", serif; letter-spacing: .12em;
}
.cu-cta p { margin: 0 0 24px; font-size: 14px; line-height: 1.95; color: var(--cu-ink-2); }
.cu-cta__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1100px) {
  .cu-hero__inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; padding: 64px 0 56px; }
  .cu-hero__txt { grid-column: 1; grid-row: 1; }
  .cu-title { grid-column: 1; grid-row: 2; justify-self: start; padding-right: 0; }
  .cu-title__sub { grid-column: 1; grid-row: 3; justify-self: start; margin-right: 0; }
  .cu-title__main { font-size: 32px; max-height: 300px; }
  .cu-lgrid, .cu-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-steps, .cu-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-gp { grid-template-columns: 1fr; }
  .cu-id { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cu-hero__inner { padding: 34px 0 34px; gap: 18px; }
  .cu-hero__bg img { object-position: 62% 38%; }
  .cu-hero__bg::after {
    background:
      linear-gradient(180deg, rgba(242, 233, 214, .96) 0%, rgba(242, 233, 214, .90) 34%,
                      rgba(242, 233, 214, .50) 62%, rgba(242, 233, 214, .18) 100%),
      linear-gradient(90deg, rgba(226, 214, 188, .4), transparent 40%);
  }
  .cu-title { gap: 10px; }
  .cu-title__main { font-size: 26px; max-height: 220px; letter-spacing: .2em; }
  .cu-title__sub { font-size: 11px; max-width: 100%; padding: 10px 12px; }
  .cu-title__sub b { font-size: 12.5px; }
  .cu-title__seal { width: 44px; height: 44px; font-size: 11px; }
  .cu-hero__lead { font-size: 13.5px; line-height: 1.95; }
  .cu-colophon div { min-width: 50%; padding: 10px 12px; }
  .cu-colophon b { font-size: 21px; }
  .cu-lgrid, .cu-arts, .cu-steps, .cu-forms, .cu-paths { grid-template-columns: 1fr; }
  .cu-gpc__body { grid-template-columns: 1fr; }
  .cu-gpc__side + .cu-gpc__side { border-left: 0; border-top: 1px dashed var(--cu-line-2); }
  .cu-id__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-h h2 { font-size: 23px; }
  .cu-lcard__sign { display: none; }
}

/* ==========================================================================
   云展馆门头 · 立体化（3D 展墙 + 立轴题名 + 鼠标视差）
   把平面古画卷成"嵌在墙里的立体展面"：竖排题名挂在一块有厚度的立轴上，
   朱砂印凸起、题跋条变成卷轴木牌；鼠标移动产生视差纵深。
   ========================================================================== */
.cu-hero {
  --mx: 0; --my: 0;
  perspective: 1700px;
  perspective-origin: 58% 42%;
}
/* 立体画框：在画与内容之间叠一圈"墙龛"框，制造嵌墙纵深感 */
.cu-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow:
    inset 0 0 0 13px rgba(244, 224, 196, 0),
    inset 0 0 0 14px rgba(42, 37, 32, .55),
    inset 0 0 0 26px rgba(185, 138, 52, .34),
    inset 0 0 0 29px rgba(42, 37, 32, .42),
    inset 0 0 84px rgba(20, 14, 8, .5);
}
/* 古画作为嵌在墙里的展面：随鼠标轻微移动（视差） */
.cu-hero__bg {
  transform: translate3d(calc(var(--mx) * -20px), calc(var(--my) * -14px), -40px) scale(1.09);
  transition: transform .25s ease-out;
  will-change: transform;
}
.cu-hero__inner { perspective: 1400px; transform-style: preserve-3d; }

/* 立轴题名：挂在一块有厚度的绢/木立轴上 */
.cu-title {
  transform-style: preserve-3d;
  padding-top: 22px; padding-bottom: 18px; padding-left: 14px; padding-right: 76px;
  background: linear-gradient(135deg, rgba(251, 246, 236, .97), rgba(234, 223, 199, .93));
  border: 1px solid var(--cu-line-2);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 18px 40px rgba(40, 26, 12, .28),
    0 4px 10px rgba(40, 26, 12, .22);
  animation: cuTitleFloat 8s ease-in-out infinite;
}
@keyframes cuTitleFloat {
  0%, 100% { transform: rotateY(calc(-6deg + var(--mx) * 4deg)) rotateX(calc(2deg - var(--my) * 2deg)) translateZ(20px); }
  50%      { transform: rotateY(calc(-3deg + var(--mx) * 4deg)) rotateX(calc(3deg - var(--my) * 2deg)) translateZ(40px); }
}
.cu-hero:hover .cu-title {
  animation: none;
  transform: rotateY(calc(var(--mx) * 5deg)) rotateX(calc(-1deg - var(--my) * 2deg)) translateZ(52px);
  transition: transform .5s ease;
}
.cu-title__main {
  text-shadow:
    0 1px 0 #fff,
    0 2px 1px rgba(120, 90, 50, .35),
    0 5px 8px rgba(40, 26, 12, .22);
}
/* 朱砂印凸起（bevel） */
.cu-title__seal {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 -2px 0 rgba(0, 0, 0, .22) inset,
    0 6px 14px rgba(120, 45, 30, .5);
  border: 1px solid rgba(244, 220, 200, .55);
}
.cu-title__sub {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 10px 24px rgba(40, 26, 12, .2);
}
/* 题跋条 → 卷轴木牌（两端轴头） */
.cu-colophon { position: relative; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 30px rgba(40, 26, 12, .22); }
.cu-colophon::before, .cu-colophon::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; width: 9px;
  background: linear-gradient(90deg, #8a5a32, #6e4526);
  border-radius: 3px; box-shadow: 0 4px 10px rgba(40, 26, 12, .3);
}
.cu-colophon::before { left: -5px; }
.cu-colophon::after { right: -5px; }

/* ---------- 文化谱系 → 立体展墙 ---------- */
.cu-lgrid { perspective: 1200px; }
.cu-lcard {
  transform-style: preserve-3d;
  box-shadow: 0 10px 26px rgba(90, 70, 40, .14), 0 2px 0 rgba(160, 140, 100, .12);
}
.cu-lcard:hover {
  transform: translateY(-10px) rotateX(4deg) translateZ(10px);
  box-shadow: 0 26px 52px rgba(60, 40, 20, .26);
}
/* 入场显隐：门控于 .cu-anim（仅当 JS 注入才隐藏；JS 失效则全可见，零风险） */
.cu-lgrid.cu-anim .cu-lcard {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease, box-shadow .2s ease;
}
.cu-lgrid.cu-anim .cu-lcard.in { opacity: 1; transform: none; }
.cu-lgrid.cu-anim .cu-lcard.in:hover {
  transform: translateY(-10px) rotateX(4deg) translateZ(10px);
  box-shadow: 0 26px 52px rgba(60, 40, 20, .26);
}

/* ---------- 立体化 · 响应式收敛 ---------- */
@media (max-width: 1100px) {
  .cu-title { padding-right: 0; animation: none;
    transform: rotateY(-4deg) rotateX(2deg) translateZ(12px); }
  .cu-hero__bg { transform: scale(1.06); }
  .cu-lgrid { perspective: none; }
}
@media (max-width: 720px) {
  .cu-title { transform: none; box-shadow: 0 8px 22px rgba(40, 26, 12, .2); }
  .cu-lcard:hover { transform: translateY(-6px); }
  .cu-lgrid.cu-anim .cu-lcard.in:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cu-title { animation: none; transform: rotateY(-4deg) rotateX(2deg) translateZ(14px); }
  .cu-hero__bg { transform: scale(1.06); }
  .cu-hero:hover .cu-title { transform: rotateY(-2deg) rotateX(1deg) translateZ(20px); }
}


/* ---------- 画卷 · 左右卷轴（轴杆 + 铜轴头） ---------- */
.cu-roller {
  position: absolute; top: 26px; bottom: 26px; width: 15px; z-index: 3;
  pointer-events: none; border-radius: 8px;
  background: linear-gradient(90deg,
      rgba(30, 18, 8, .55) 0%, #6e4526 20%, #9a6a3c 46%, #b07c46 55%,
      #7c5028 82%, rgba(30, 18, 8, .55) 100%);
  box-shadow:
    0 0 0 1px rgba(42, 28, 14, .55),
    0 12px 26px rgba(30, 20, 10, .42),
    inset 0 1px 0 rgba(255, 232, 196, .40),
    inset 0 -3px 6px rgba(0, 0, 0, .35);
}
.cu-roller::before, .cu-roller::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 21px; height: 12px; border-radius: 4px;
  background: linear-gradient(180deg, #e0bd77, #b68a3e 55%, #866228);
  box-shadow: 0 2px 5px rgba(30, 20, 10, .5), inset 0 1px 0 rgba(255, 244, 208, .7);
}
.cu-roller::before { top: -8px; }
.cu-roller::after { bottom: -8px; }
.cu-roller--l { left: 12px; }
.cu-roller--r { right: 12px; }
@media (max-width: 720px) {
  .cu-roller { top: 14px; bottom: 14px; width: 11px; }
  .cu-roller::before, .cu-roller::after { width: 16px; height: 10px; }
  .cu-roller--l { left: 8px; }
  .cu-roller--r { right: 8px; }
}


/* ==========================================================================
   做旧立轴：把竖排题名做成「泛黄绢本 + 霉斑水渍 + 上下木轴」的旧画卷
   ========================================================================== */
.cu-title {
  background:
    radial-gradient(circle at 20% 13%, rgba(122,84,44,.16) 0 2.2px, transparent 3.4px),
    radial-gradient(circle at 69% 24%, rgba(122,84,44,.13) 0 3px, transparent 4.2px),
    radial-gradient(circle at 33% 58%, rgba(110,72,36,.11) 0 2px, transparent 3.2px),
    radial-gradient(circle at 81% 75%, rgba(122,84,44,.14) 0 2.6px, transparent 3.8px),
    radial-gradient(circle at 47% 87%, rgba(110,72,36,.10) 0 1.8px, transparent 3px),
    radial-gradient(60% 46% at 26% 20%, rgba(150,110,60,.12), transparent 70%),
    radial-gradient(70% 50% at 79% 66%, rgba(140,100,54,.12), transparent 72%),
    radial-gradient(ellipse at 50% 50%, rgba(92,62,30,0) 46%, rgba(92,62,30,.22) 100%),
    repeating-linear-gradient(92deg, rgba(120,90,50,.035) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #f3e8cd 0%, #ead9b4 52%, #dcc596 100%);
  border-color: rgba(148,112,62,.58);
  box-shadow:
    inset 0 0 30px rgba(120,80,40,.24),
    inset 0 0 0 1px rgba(255,252,240,.30),
    0 18px 42px rgba(40,26,12,.30),
    0 4px 10px rgba(40,26,12,.22);
}
/* 天杆 / 地杆（立轴两端木轴） */
.cu-title::before, .cu-title::after {
  content: ""; position: absolute; left: -5px; right: -5px; height: 9px; border-radius: 5px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, #956440, #6e4526 58%, #573a1f);
  box-shadow: 0 2px 6px rgba(30,20,10,.42), inset 0 1px 0 rgba(255,226,182,.45);
}
.cu-title::before { top: -7px; }
.cu-title::after { bottom: -7px; height: 11px; }
/* 题名主字用更「旧墨」的质感 */
.cu-title__main { color: #37302a; }

/* ==========================================================================
   云上藏品 · 3D 全息（展厅卡片）
   ========================================================================== */
.cu-nft__bar {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin: 0 0 22px; padding: 11px 16px;
  border: 1px solid var(--cu-line-2);
  background: linear-gradient(90deg, rgba(47,93,124,.08), rgba(185,138,52,.08));
}
.cu-nft__bar span { font-size: 12px; letter-spacing: .03em; color: var(--cu-ink-2); display: inline-flex; align-items: center; gap: 7px; }
.cu-nft__bar span::before { content: ""; width: 5px; height: 5px; background: var(--cu-azurite); transform: rotate(45deg); flex: none; }
.cu-nft__pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 30px; }
.cu-nftpt { border: 1px solid var(--cu-line-2); background: rgba(251,246,236,.72); padding: 15px 17px; border-left: 3px solid var(--cu-cin); }
.cu-nftpt__k { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--cu-cin); }
.cu-nftpt b { display: block; margin: 5px 0 5px; font-size: 16px; color: var(--cu-ink); font-family: "Songti SC", "STSong", serif; }
.cu-nftpt p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--cu-ink-3); }

.cu-nft__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cu-nftc {
  border: 1px solid var(--cu-line-2); border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #fbf6ec, #efe4ca);
  box-shadow: 0 10px 26px rgba(90,70,40,.14);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cu-nftc:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(40,26,12,.28); }
.cu-nftc__stage {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #1e2c46 0%, #0c1320 72%);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .12s ease-out;
}
.cu-nftc__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.06) contrast(1.02); transition: transform .4s ease, filter .3s ease; }
.cu-nftc:hover .cu-nftc__img { transform: scale(1.06); filter: saturate(1.16) brightness(1.05); }
.cu-nftc__hologram {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .40; mix-blend-mode: soft-light;
  background: conic-gradient(from 0deg, rgba(120,200,255,.6), rgba(255,150,220,.55), rgba(150,255,205,.55), rgba(255,235,150,.55), rgba(120,200,255,.6));
  transition: opacity .3s ease;
}
.cu-nftc:hover .cu-nftc__hologram { opacity: .64; }
.cu-nftc__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s ease; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,8%), rgba(185,235,255,.35), transparent 44%);
}
.cu-nftc:hover .cu-nftc__stage::after { opacity: 1; }
.cu-nftc__spin {
  position: absolute; left: 50%; bottom: 7%; width: 64%; aspect-ratio: 1 / 1; transform: translateX(-50%); z-index: 1; pointer-events: none;
  border-radius: 50%; border: 1px solid rgba(140,210,255,.38);
  box-shadow: 0 0 26px rgba(120,200,255,.35) inset, 0 0 18px rgba(120,200,255,.22);
  animation: cuNftSpin 14s linear infinite;
}
@keyframes cuNftSpin { to { transform: translateX(-50%) rotate(360deg); } }
.cu-nftc__badge {
  position: absolute; left: 10px; top: 10px; z-index: 4; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #eaf6ff;
  background: rgba(18,28,46,.72); border: 1px solid rgba(120,200,255,.55); padding: 3px 8px; border-radius: 3px;
}
.cu-nftc__edition {
  position: absolute; right: 10px; top: 10px; z-index: 4; font-size: 10px; font-weight: 800; color: #0d1420;
  background: linear-gradient(180deg, #ffe08a, #e6b246); padding: 3px 8px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.cu-nftc__body { padding: 14px 15px 16px; }
.cu-nftc__cat { font-size: 11px; letter-spacing: .1em; color: var(--cu-azurite); font-weight: 700; }
.cu-nftc__body h3 { margin: 4px 0 5px; font-size: 17px; color: var(--cu-ink); font-family: "Songti SC", "STSong", serif; letter-spacing: .02em; }
.cu-nftc__issuer { font-size: 11.5px; color: var(--cu-ink-3); margin-bottom: 10px; }
.cu-nftc__chain { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 8px 0; margin-bottom: 10px; border-top: 1px dashed var(--cu-line-2); border-bottom: 1px dashed var(--cu-line-2); }
.cu-nftc__chain span { font-size: 11px; color: var(--cu-ink-2); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.cu-nftc__chain i { font-style: normal; color: var(--cu-ink-3); margin-right: 4px; font-family: inherit; }
.cu-nftc__rights { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cu-nftc__rights span { font-size: 10.5px; color: var(--cu-cin); border: 1px solid rgba(158,59,46,.32); padding: 2px 8px; border-radius: 999px; background: rgba(158,59,46,.05); }
.cu-nftc__btn { display: block; text-align: center; height: 36px; line-height: 36px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #FBF6EC; background: linear-gradient(180deg, #2f5d7c, #24495f); border-radius: 3px; text-decoration: none; transition: background .2s ease; }
.cu-nftc__btn:hover { background: linear-gradient(180deg, #3a7098, #2a546e); }
.cu-nft__note { margin: 18px 0 0; font-size: 11.5px; color: var(--cu-ink-3); letter-spacing: .02em; }

@media (max-width: 1100px) {
  .cu-nft__grid { grid-template-columns: repeat(3, 1fr); }
  .cu-nft__pts { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cu-nft__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cu-nftc__spin { animation: none; }
  .cu-nftc__stage { transition: none; }
}

/* ==========================================================================
   云展馆 · 轮询图框 + 沉浸展厅（云上藏品）
   ========================================================================== */
.cu-vault { display: grid; grid-template-columns: 1.18fr .82fr; gap: 30px; align-items: stretch; margin-bottom: 6px; }
.cu-vault__stage {
  position: relative; aspect-ratio: 4 / 3; padding: 14px;
  background: linear-gradient(180deg, #efe6d2, #e2d3b4);
  border: 1px solid #cbb98f; border-radius: 4px;
  box-shadow: 0 24px 54px rgba(40, 26, 12, .26), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.cu-vault__viewport { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: radial-gradient(circle at 50% 35%, #24324c, #0a0f17 78%); }
.cu-vault__track { display: flex; height: 100%; transition: transform .72s cubic-bezier(.5, .05, .2, 1); }
.cu-vault__slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; margin: 0; }
.cu-vault__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); }
.cu-vault__holo { position: absolute; inset: 0; pointer-events: none; opacity: .30; mix-blend-mode: soft-light;
  background: conic-gradient(from 0deg, rgba(120,200,255,.6), rgba(255,150,220,.5), rgba(150,255,205,.5), rgba(255,235,150,.5), rgba(120,200,255,.6)); }
.cu-vault__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(233,220,190,.5); background: rgba(18,26,40,.5); color: #f6efe0; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.cu-vault__nav:hover { background: rgba(30,42,64,.85); }
.cu-vault__nav--prev { left: 24px; }
.cu-vault__nav--next { right: 24px; }
.cu-vault__cap { position: absolute; left: 14px; right: 14px; bottom: 46px; z-index: 4; padding: 14px 16px 10px; color: #f6efe0;
  background: linear-gradient(0deg, rgba(8,12,20,.86), rgba(8,12,20,0)); pointer-events: none; }
.cu-vault__cap-cat { display: inline-block; font-size: 11px; letter-spacing: .16em; color: #e6c88a; margin-bottom: 4px; }
.cu-vault__cap b { display: block; font-size: 20px; font-family: "Songti SC", "STSong", serif; letter-spacing: .04em; }
.cu-vault__cap-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.cu-vault__cap-meta i { font-style: normal; font-size: 11.5px; color: rgba(240,232,214,.82); }
.cu-vault__dots { position: absolute; left: 0; right: 0; bottom: 15px; z-index: 5; display: flex; justify-content: center; gap: 7px; }
.cu-vault__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(240,232,214,.6); background: transparent; padding: 0; cursor: pointer; transition: all .2s ease; }
.cu-vault__dot.on { background: #e6c88a; border-color: #e6c88a; width: 20px; border-radius: 4px; }
.cu-vault__side { display: flex; flex-direction: column; justify-content: center; padding: 28px 32px; border: 1px solid var(--cu-line-2);
  background: linear-gradient(160deg, rgba(251,246,236,.92), rgba(238,228,205,.72)); }
.cu-vault__kicker { font-size: 10.5px; letter-spacing: .26em; color: var(--cu-azurite); font-weight: 700; }
.cu-vault__side h3 { margin: 8px 0 6px; font-size: 30px; color: var(--cu-ink); font-family: "Songti SC", "STSong", serif; letter-spacing: .04em; }
.cu-vault__desc { margin: 0 0 16px; font-size: 14px; color: var(--cu-ink-2); letter-spacing: .06em; }
.cu-vault__pts { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.cu-vault__pt { position: relative; border-left: 3px solid var(--cu-cin); padding-left: 12px; }
.cu-vault__pt b { font-size: 15px; color: var(--cu-ink); font-family: "Songti SC", "STSong", serif; }
.cu-vault__pt-k { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: .14em; color: var(--cu-cin); font-weight: 800; vertical-align: middle; }
.cu-vault__pt p { margin: 3px 0 0; font-size: 12px; line-height: 1.6; color: var(--cu-ink-3); }
.cu-vault__bar { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-bottom: 18px; }
.cu-vault__bar span { font-size: 11px; color: var(--cu-ink-3); display: inline-flex; align-items: center; gap: 6px; }
.cu-vault__bar span::before { content: ""; width: 4px; height: 4px; background: var(--cu-azurite); transform: rotate(45deg); flex: none; }
.cu-vault__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; color: #2a1d0d; background: linear-gradient(180deg, #f3d489, #d8a63f); border-radius: 3px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(184,138,52,.32); transition: transform .2s ease, box-shadow .2s ease; }
.cu-vault__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(184,138,52,.42); }
.cu-vault__cta i { font-style: normal; transition: transform .2s ease; }
.cu-vault__cta:hover i { transform: translateX(4px); }

/* 沉浸展厅（点击进入后展示全部藏品） */
body.cu-gallery-open { overflow: hidden; }
.cu-gallery { position: fixed; inset: 0; z-index: 1200; }
.cu-gallery__veil { position: absolute; inset: 0; background: rgba(8,11,17,.8); }
.cu-gallery__panel { position: absolute; inset: 3% 4%; overflow-y: auto; padding: 36px 40px 46px;
  background: radial-gradient(120% 120% at 50% 0%, #1b2436 0%, #0b0f17 70%); border: 1px solid rgba(190,160,100,.28); border-radius: 6px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.cu-gallery__x { position: absolute; right: 18px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(233,220,190,.4);
  background: rgba(255,255,255,.06); color: #f3ead6; font-size: 22px; line-height: 1; cursor: pointer; }
.cu-gallery__hd { text-align: center; margin-bottom: 28px; }
.cu-gallery__kicker { font-size: 11px; letter-spacing: .3em; color: #d8b56a; }
.cu-gallery__hd h3 { margin: 10px 0 8px; font-size: 34px; color: #f6efe0; font-family: "Songti SC", "STSong", serif; letter-spacing: .08em; }
.cu-gallery__hd p { margin: 0; font-size: 14px; color: rgba(240,232,214,.72); letter-spacing: .06em; }
.cu-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cu-gallery__note { margin: 26px 0 0; text-align: center; font-size: 11.5px; color: rgba(240,232,214,.5); }
.cu-gallery .cu-nftc { background: rgba(255,255,255,.04); border-color: rgba(190,160,100,.28); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.cu-gallery .cu-nftc__body h3 { color: #f6efe0; }
.cu-gallery .cu-nftc__cat { color: #e0c98a; }
.cu-gallery .cu-nftc__issuer { color: rgba(240,232,214,.6); }
.cu-gallery .cu-nftc__chain { border-color: rgba(255,255,255,.14); }
.cu-gallery .cu-nftc__chain span { color: rgba(240,232,214,.7); }
.cu-gallery .cu-nftc__rights span { color: #e8a99a; border-color: rgba(232,169,154,.34); background: rgba(232,169,154,.06); }
.cu-nftc__btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.cu-nftc__btn.on { background: linear-gradient(180deg, #3c8a5e, #2b6a46); }
@media (max-width: 1100px) {
  .cu-vault { grid-template-columns: 1fr; gap: 22px; }
  .cu-vault__stage { aspect-ratio: 16 / 11; }
  .cu-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cu-gallery__panel { inset: 0; border-radius: 0; padding: 28px 16px 40px; }
  .cu-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cu-vault__side { padding: 22px 18px; }
  .cu-vault__side h3 { font-size: 24px; }
}

/* ==========================================================================
   瘦金风题名 + 做旧印章 + 壮文落款（UI-CU-XIAOWEI-20261101k）
   瘦金体真迹字库（方正瘦金书）为商业授权字体；此处用 SIL OFL 免费商用、
   气质最接近的站酷小薇体子集（12 字，3.3KB woff2）替代。
   ========================================================================== */
@font-face {
  font-family: "CU XiaoWei";
  src: url("../fonts/cu-xiaowei.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* 题名主字：瘦金风细劲字形（单一字重，取消合成加粗才不糊笔画） */
.cu-title__main {
  font-family: "CU XiaoWei", "Songti SC", "STSong", "KaiTi", serif;
  font-weight: 400; letter-spacing: .3em;
}
/* 朱砂印升级「盖印」质感：朱砂斑驳 + 四角油墨侵蚀 */
.cu-title__seal {
  font-weight: 400;
  font-family: "CU XiaoWei", "Songti SC", serif;
  border-radius: 2px; opacity: .92;
  background:
    radial-gradient(circle at 24% 28%, rgba(251,246,236,.26) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 70% 16%, rgba(251,246,236,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 62%, rgba(251,246,236,.2) 0 1.2px, transparent 2.1px),
    radial-gradient(circle at 82% 74%, rgba(251,246,236,.24) 0 1.1px, transparent 2px),
    radial-gradient(circle at 14% 80%, rgba(251,246,236,.18) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 60% 40%, rgba(251,246,236,.16) 0 .9px, transparent 1.8px),
    linear-gradient(160deg, #A8432E 0%, #8F2F22 78%);
  box-shadow: 0 2px 8px rgba(120,45,30,.28), inset 0 0 6px rgba(60,12,8,.4);
}
.cu-title__seal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 2px; opacity: .8;
  background:
    radial-gradient(circle at 4% 10%, rgba(251,246,236,.9) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 96% 8%, rgba(251,246,236,.8) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 98% 92%, rgba(251,246,236,.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 6% 94%, rgba(251,246,236,.7) 0 1.1px, transparent 2px);
}
/* 壮文落款（新壮文 Sawcuengh：广西壮族文化），竖排拉丁如书脊 */
.cu-title__zhuang {
  writing-mode: vertical-rl; text-orientation: mixed;
  align-self: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  letter-spacing: .32em;
  color: rgba(87, 62, 34, .62);
}
@media (max-width: 720px) { .cu-title__zhuang { display: none; } }

/* ==========================================================================
   现代设计变体（仅 hub / gx 两页，body.cu-modern；云展馆 culture.html 不含此类，保持古韵）
   目标：去宣纸肌理、去裱边/卷轴/竖排/朱砂，改用无衬线 + 白卡 + 圆角 + 青绿主色。
   ========================================================================== */
body.cu-modern { background: #f4f7f9; color: #1f2a33; }
body.cu-modern::before { display: none; }                 /* 去除宣纸肌理 */
body.cu-modern main, body.cu-modern .wrap { position: relative; z-index: auto; }
body.cu-modern .section { background: transparent; }
body.cu-modern .section--soft {
  background: #eef2f5; box-shadow: none;
}
/* 章节标题：无衬线 + 青绿主色 */
body.cu-modern .cu-h h2 {
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-weight: 800;
  color: #16242e; font-size: 30px; letter-spacing: .01em;
}
body.cu-modern .cu-h h2 em { color: #0E7C86; font-style: normal; }
body.cu-modern .cu-h .sec-tag {
  font-family: "Noto Sans SC", sans-serif; letter-spacing: .18em; color: #0E7C86;
}
body.cu-modern .cu-h .sec-tag::before,
body.cu-modern .cu-h .sec-tag::after { background: rgba(14,124,134,.4); }
body.cu-modern .cu-h p { color: #5a6b76; font-family: "Noto Sans SC", sans-serif; }
body.cu-modern .cu-h p b { color: #0E7C86; }
/* 分隔线：现代细线 */
body.cu-modern .cu-divider {
  height: 1px; opacity: 1;
  background: linear-gradient(90deg, transparent, #cfd8de 18%, #cfd8de 82%, transparent);
}
body.cu-modern .cu-divider::after { display: none; }

/* 地标卡：扁平现代白卡 */
body.cu-modern .cu-lcard {
  background: #fff; border: 1px solid #e4eaee; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(20,40,55,.06); padding: 22px 20px 20px;
}
body.cu-modern .cu-lcard::before { display: none; }
body.cu-modern .cu-lcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,40,55,.12); }
body.cu-modern .cu-lcard__top { margin-bottom: 11px; }
body.cu-modern .cu-lcard h3 { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-weight: 700; }
body.cu-modern .cu-lcard p { color: #54616b; }
body.cu-modern .cu-lcard__cat {
  background: #0E7C86; font-family: "Noto Sans SC", sans-serif; letter-spacing: .06em;
}
body.cu-modern .cu-lcard__anchor {
  background: #f3f7f9; border-left: 2px solid #0E7C86; color: #48555e;
}
body.cu-modern .cu-lcard__anchor b { color: #0E7C86; }

/* 产品 / 文化表现物卡：扁平现代白卡 */
body.cu-modern .cu-art {
  background: #fff; border: 1px solid #e4eaee; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(20,40,55,.06); padding: 0 18px 18px;
}
body.cu-modern .cu-art:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,40,55,.12); }
body.cu-modern .cu-art__fig {
  border-radius: 10px 10px 0 0; margin: 0 -18px 14px; border-bottom: 1px solid #eef2f5;
}
body.cu-modern .cu-art__fig::after { display: none; }
body.cu-modern .cu-art__fig figcaption {
  writing-mode: horizontal-tb; text-orientation: initial;
  left: auto; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(12,22,30,.82), rgba(12,22,30,0));
  border-top-right-radius: 0; border-bottom-right-radius: 10px;
  font-family: "Noto Sans SC", sans-serif; letter-spacing: .05em; padding: 6px 11px;
}
body.cu-modern .cu-art__hd b { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; letter-spacing: .02em; }
body.cu-modern .cu-art__hd span {
  background: rgba(14,124,134,.1); color: #0E7C86; border-color: rgba(14,124,134,.3);
}
body.cu-modern .cu-art p { color: #54616b; }
body.cu-modern .cu-art dt { color: #8a9aa4; }
body.cu-modern .cu-art dd { color: #48555e; }
body.cu-modern .cu-art__fit {
  background: #f3f7f9; color: #0E7C86; border-color: #dbe7ea;
}

/* 方法论步骤：扁平现代 */
body.cu-modern .cu-step {
  background: #fff; border: 1px solid #e4eaee; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(20,40,55,.06);
}
body.cu-modern .cu-step::before { display: none; }
body.cu-modern .cu-step::after { border-radius: 12px 12px 0 0; opacity: .9; }
body.cu-modern .cu-step:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,40,55,.12); }
body.cu-modern .cu-step__no { font-family: "Noto Sans SC", sans-serif; color: #cdd8de; }
body.cu-modern .cu-step h3 { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; letter-spacing: .02em; }
body.cu-modern .cu-step p { color: #54616b; }
body.cu-modern .cu-step__k span {
  background: rgba(14,124,134,.08); color: #0E7C86; border-color: rgba(14,124,134,.22); border-radius: 6px;
}

/* 省域馆卡片：现代 */
body.cu-modern .cu-prov {
  background: #fff; border: 1px solid #e4eaee; border-radius: 14px;
  box-shadow: 0 4px 16px rgba(20,40,55,.06);
}
body.cu-modern .cu-prov::before { display: none; }
body.cu-modern .cu-prov:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,40,55,.12); }
body.cu-modern .cu-prov__g { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; color: #cfd8de; }
body.cu-modern .cu-prov__n { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; letter-spacing: .1em; color: #16242e; }
body.cu-modern .cu-prov__m { color: #7a8a94; font-family: "Noto Sans SC", sans-serif; min-height: 40px; }
body.cu-modern .cu-prov--on { border-color: #0E7C86; box-shadow: 0 8px 24px rgba(14,124,134,.16); }
body.cu-modern .cu-prov--on .cu-prov__g,
body.cu-modern .cu-prov--on .cu-prov__n { color: #0E7C86; }
body.cu-modern .cu-prov--on .cu-prov__badge { background: #0E7C86; color: #fff; }
body.cu-modern .cu-prov--off .cu-prov__badge {
  background: rgba(14,124,134,.08); color: #0E7C86; border-color: rgba(14,124,134,.24);
}
body.cu-modern .cu-prov--off .cu-prov__g { color: #cfd8de; }
body.cu-modern .cu-prov__badge { border-radius: 999px; }

/* 品牌要素卡 */
body.cu-modern .gx-brand__c {
  background: #fff; border: 1px solid #e4eaee; border-left: 3px solid #0E7C86; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(20,40,55,.06);
}
body.cu-modern .gx-brand__c:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,40,55,.12); }
body.cu-modern .gx-brand__c b { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; color: #16242e; letter-spacing: .04em; }
body.cu-modern .gx-brand__c span { color: #0E7C86; }
body.cu-modern .gx-brand__c p { color: #54616b; }
body.cu-modern .gx-biznote { color: #7a8a94; font-family: "Noto Sans SC", sans-serif; }
body.cu-modern .gx-biznote b { color: #0E7C86; }

/* 引图说明 */
body.cu-modern .cu-mfig { border-radius: 12px; border: 1px solid #e4eaee; }
body.cu-modern .cu-mfig img { filter: none; }
body.cu-modern .cu-mfig figcaption {
  font-family: "Noto Sans SC", sans-serif; letter-spacing: .08em; color: #fff;
}

/* 尾部 CTA：现代渐变卡 */
body.cu-modern .cu-cta {
  background: linear-gradient(135deg, #0E7C86 0%, #135a8a 100%);
  border: none; border-radius: 16px; color: #fff;
  box-shadow: 0 20px 44px rgba(14,90,120,.28);
}
body.cu-modern .cu-cta::before { display: none; }
body.cu-modern .cu-cta h3 { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; color: #fff; letter-spacing: .02em; }
body.cu-modern .cu-cta p { color: rgba(255,255,255,.88); font-family: "Noto Sans SC", sans-serif; }

/* 按钮：现代圆角胶囊 */
body.cu-modern .cu-btn {
  border-radius: 999px; font-family: "Noto Sans SC", sans-serif; height: 42px; letter-spacing: .04em;
}
body.cu-modern .cu-btn--solid { background: #0E7C86; border-color: #0E7C86; }
body.cu-modern .cu-btn--solid:hover { background: #0c6b74; border-color: #0c6b74; }
body.cu-modern .cu-btn--line { background: rgba(255,255,255,.92); color: #16242e; border-color: #dbe7ea; }
body.cu-modern .cu-btn--line:hover { border-color: #0E7C86; color: #0E7C86; }

/* 通用文字：去衬线 */
body.cu-modern .cu-crumb,
body.cu-modern .cu-crumb a { font-family: "Noto Sans SC", sans-serif; color: #7a8a94; }
body.cu-modern .cu-crumb a { border-color: #cdd8de; }
body.cu-modern .cu-crumb a:hover { color: #0E7C86; border-color: #0E7C86; }
body.cu-modern .hub-intro p { font-family: "Noto Sans SC", sans-serif; color: #5a6b76; }
body.cu-modern .hub-intro b { color: #0E7C86; }
body.cu-modern .hub-note { color: #8a9aa4; font-family: "Noto Sans SC", sans-serif; }
body.cu-modern .cu-hero__tag { font-family: "Noto Sans SC", sans-serif; }

/* 响应式 */
@media (max-width: 720px) {
  body.cu-modern .cu-h h2 { font-size: 23px; }
  body.cu-modern .cu-cta { padding: 34px 22px; border-radius: 14px; }
}

/* ==========================================================================
   文化出海 · 现代组件（广西文化出海页 / 全国图谱页共用）
   ========================================================================== */

/* ---------- 文化体系 · 5 支柱 ---------- */
.sys-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.sys-pillar {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid #e4eaee; border-radius: 14px;
  padding: 22px 18px 18px; text-decoration: none; color: inherit; overflow: hidden;
  box-shadow: 0 4px 16px rgba(20,40,55,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sys-pillar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #0E7C86, #135a8a); }
.sys-pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14,90,120,.16); border-color: #bfe0e4; }
.sys-pillar__no { font-size: 12px; font-weight: 800; color: #0E7C86; letter-spacing: .12em; }
.sys-pillar b { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 19px; font-weight: 800; color: #16242e; }
.sys-pillar__d { font-size: 12.5px; color: #6b7a84; line-height: 1.7; }
.sys-pillar i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: #B8C4CC; margin-top: 4px; }
@media (max-width: 1100px) { .sys-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .sys-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .sys-pillar { padding: 16px 14px; } .sys-pillar b { font-size: 16px; } }

/* ---------- 戏曲 · 戏票卡 ---------- */
.opera-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.opera-ticket {
  position: relative; background: #fff; border: 1px solid #e4eaee; border-radius: 12px;
  padding: 20px 20px 18px; box-shadow: 0 4px 16px rgba(20,40,55,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.opera-ticket::before { content: ""; position: absolute; left: 14px; right: 14px; top: 56px; border-top: 1px dashed #d5dfe4; }
.opera-ticket::after { content: ""; position: absolute; left: 0; top: 48px; width: 13px; height: 16px;
  border-radius: 0 8px 8px 0; background: #eef2f5; box-shadow: inset -1px 0 0 #e4eaee; }
.opera-ticket:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,40,55,.12); }
.opera-ticket__no { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #0E7C86; }
.opera-ticket h3 { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 22px; font-weight: 800; color: #16242e; margin: 2px 0 0; }
.opera-ticket p { font-size: 13px; line-height: 1.9; color: #54616b; margin: 14px 0 12px; }
.opera-ticket dl { margin: 0; }
.opera-ticket dt { font-size: 11px; font-weight: 800; color: #8a9aa4; letter-spacing: .08em; margin-top: 8px; }
.opera-ticket dd { margin: 2px 0 0; font-size: 12.5px; color: #48555e; line-height: 1.7; }
.opera-ticket__tag { display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 700; color: #0E7C86;
  background: rgba(14,124,134,.08); border: 1px solid rgba(14,124,134,.22); border-radius: 999px; padding: 4px 11px; }
@media (max-width: 1100px) { .opera-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  { .opera-grid { grid-template-columns: 1fr; } }

/* ---------- 商业合作模式 ---------- */
.coop-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.coop-card {
  position: relative; background: #fff; border: 1px solid #e4eaee; border-radius: 14px;
  padding: 26px 20px 20px; overflow: hidden; box-shadow: 0 4px 16px rgba(20,40,55,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.coop-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #0E7C86, #135a8a); }
.coop-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14,90,120,.16); }
.coop-card__ic { font-size: 25px; line-height: 1; margin-bottom: 10px; }
.coop-card h3 { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 18px; font-weight: 800; color: #16242e; margin: 0 0 8px; }
.coop-card p { font-size: 13px; line-height: 1.9; color: #54616b; margin: 0; }
.coop-card__k { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.coop-card__k span { font-size: 11px; font-weight: 700; color: #0E7C86; background: rgba(14,124,134,.08);
  border: 1px solid rgba(14,124,134,.22); border-radius: 6px; padding: 3px 9px; }
@media (max-width: 1100px) { .coop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  { .coop-grid { grid-template-columns: 1fr; } }

.coop-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, #0E7C86, #135a8a); border-radius: 14px; padding: 22px 26px; color: #fff;
  box-shadow: 0 16px 36px rgba(14,90,120,.24); }
.coop-cta b { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 18px; }
.coop-cta em { display: block; font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 4px; }
.coop-cta__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.coop-cta .cu-btn--solid { background: #fff; border-color: #fff; color: #0E5A66; }
.coop-cta .cu-btn--solid:hover { background: #eaf6f0; border-color: #eaf6f0; color: #0E5A66; }
.coop-cta .cu-btn--line { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.coop-cta .cu-btn--line:hover { border-color: #fff; color: #fff; }

/* ---------- 全国文化一盘棋 · 棋盘 ---------- */
.qa-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.qa-stats div { flex: 1; min-width: 120px; background: #fff; border: 1px solid #e4eaee; border-radius: 12px;
  padding: 14px 18px; box-shadow: 0 4px 16px rgba(20,40,55,.06); }
.qa-stats b { display: block; font-size: 26px; font-weight: 900; color: #0E7C86; line-height: 1; font-variant-numeric: tabular-nums; }
.qa-stats span { font-size: 12px; color: #7a8a94; }
.qa-board {
  position: relative; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px;
  border: 1px solid #e0e8ec; border-radius: 16px; padding: 16px;
  background-color: #eef2f5;
  background-image:
    linear-gradient(180deg, rgba(14,124,134,.045), transparent 42%),
    repeating-linear-gradient(0deg, rgba(14,124,134,.06) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(14,124,134,.06) 0 1px, transparent 1px 44px);
}
.qa-tile {
  position: relative; background: #fff; border: 1px solid #e4eaee; border-radius: 10px;
  padding: 10px 9px 9px; text-decoration: none; color: inherit; min-height: 86px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.qa-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14,90,120,.14); border-color: #bfe0e4; z-index: 2; }
.qa-tile__g { font-size: 15px; font-weight: 900; color: #cfd8de; line-height: 1; }
.qa-tile__n { font-size: 12.5px; font-weight: 800; color: #16242e; margin-top: 2px; }
.qa-tile__d { font-size: 10.5px; color: #8a9aa4; line-height: 1.5; margin-top: 3px; }
.qa-tile__g2 { position: absolute; right: 8px; bottom: 6px; font-size: 9.5px; font-weight: 800; color: #0E7C86; letter-spacing: .04em; opacity: .85; }
.qa-tile--on { border-color: #0E7C86; box-shadow: 0 6px 18px rgba(14,124,134,.18); }
.qa-tile--on .qa-tile__g, .qa-tile--on .qa-tile__n, .qa-tile--on .qa-tile__g2 { color: #0E7C86; }
@media (max-width: 1100px) { .qa-board { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 720px)  { .qa-board { grid-template-columns: repeat(3, minmax(0,1fr)); padding: 10px; gap: 6px; }
  .qa-tile { min-height: 76px; padding: 8px; } .qa-tile__d { display: none; } }

/* ---------- 省域入口卡片：缩小（hub 专用，让出空间给「全国一盘棋」） ---------- */
body.cu-modern .cu-prov { padding: 15px 9px 13px; }
body.cu-modern .cu-prov__g { font-size: 29px; margin-bottom: 4px; }
body.cu-modern .cu-prov__n { font-size: 14.5px; letter-spacing: .1em; }
body.cu-modern .cu-prov__m { font-size: 10.5px; line-height: 1.55; min-height: 30px; margin-top: 5px; }
body.cu-modern .cu-prov__badge { font-size: 10px; padding: 2px 9px; margin-top: 8px; }

/* ---------- 省馆切换器（20261103a）：广西馆=文化出海首页，一键切换各省馆 ---------- */
.prov-switch { position: relative; display: inline-block; margin: 0 0 20px; z-index: 30; }
.prov-switch__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.42);
  color: #fff; padding: 9px 16px 9px 10px; border-radius: 999px;
  font: 700 14px/1 "Noto Sans SC","Microsoft YaHei",sans-serif; letter-spacing: .04em;
  cursor: pointer; backdrop-filter: blur(4px); transition: .18s ease;
}
.prov-switch__btn:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.7); }
.prov-switch__flag {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #0E7C86; color: #fff; font-size: 13px; font-weight: 900;
}
.prov-switch__caret { font-size: 11px; opacity: .85; transform: translateY(-1px); }
.prov-switch__panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  width: min(660px, 92vw); background: #fff; border: 1px solid #e2ecee; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10,40,40,.25); padding: 18px 18px 14px;
  max-height: min(72vh, 540px); overflow: auto;
}
.prov-switch__ph { font-size: 12px; color: #0E7C86; font-weight: 800; letter-spacing: .08em; margin-bottom: 12px; }
.prov-switch__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.prov-chip {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px;
  border: 1px solid #e2ecee; border-radius: 10px; background: #f7fafb;
  color: #16383c; text-decoration: none; font-size: 13px; font-weight: 700;
  transition: .15s ease;
}
.prov-chip b { font-size: 15px; color: #0E7C86; line-height: 1.15; }
.prov-chip:hover { background: #eaf6f4; border-color: #0E7C86; transform: translateY(-2px); }
.prov-chip--on { background: #0E7C86; border-color: #0E7C86; color: #fff; }
.prov-chip--on b { color: #fff; }
.prov-chip__on { font-size: 10px; color: #FFE7A8; font-weight: 800; letter-spacing: .06em; }
.prov-chip__go { font-size: 10.5px; color: #7a9a98; font-weight: 600; }
.prov-switch__all {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #dfe9ea;
  color: #0E7C86; font-weight: 800; font-size: 13px; text-decoration: none;
}
.prov-switch__all:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .prov-switch__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .prov-switch__panel { width: 94vw; left: -4vw; }
}

/* ---------- 省馆模板页 hero（culture-prov.html：青绿渐变，无实景图） ---------- */
.cu-hero--prov .cu-hero__bg {
  background: linear-gradient(120deg, #0E7C86 0%, #0b5f66 55%, #0a3b40 100%);
  transform: none;
}
.cu-hero--prov .cu-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 82% 0%, rgba(255,231,168,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,30,28,.20) 0%, rgba(8,30,28,.46) 100%);
}
.cu-hero--prov .cu-hero__inner { display: block; padding: 98px 0 78px; min-height: auto; }
.cu-hero--prov .cu-hero__txt { max-width: 820px; grid: initial; }
.cu-hero--prov .cu-crumb, .cu-hero--prov .cu-crumb a { color: rgba(255,255,255,.86); }
.cu-hero--prov .cu-crumb i { opacity: .5; }
.cu-hero--prov .cu-hero__tag { color: #EAF6F0; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.cu-hero--prov .cu-hero__lead { color: #EAF6F0; font-family: "Noto Sans SC","Microsoft YaHei",sans-serif; }
.cu-hero--prov .cu-hero__lead strong { color: #FFE7A8; font-weight: 700; }
.cu-hero--prov .gx-hero__title { color: #fff; }
.cu-hero--prov .gx-hero__tags span { color: #EAF6F0; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); }
.cu-hero--prov .gx-hero__stats { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.10); }
.cu-hero--prov .gx-hero__stats div { border-color: rgba(255,255,255,.26); }
.cu-hero--prov .gx-hero__stats b { color: #FFE7A8; }
.cu-hero--prov .gx-hero__stats b i, .cu-hero--prov .gx-hero__stats span { color: #EAF6F0; }
@media (max-width: 720px) {
  .cu-hero--prov .cu-hero__inner { padding: 62px 0 52px; }
  .cu-hero--prov .gx-hero__title { font-size: 30px; }
  .cu-hero--prov .gx-hero__stats div { min-width: 50%; }
}