/**
 * 组件层 · 可复用组件
 * ------------------------------------------------------------------
 * 原则：能用细线和留白解决的，就不要加背景色块。
 * 依赖：tokens.css
 */

/* ================= 按钮 ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  /* 触控高度 ≥44px */
  min-height: 44px;
  padding: var(--s-3) var(--s-8);
  font-size: var(--f-micro);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  border: var(--rule-w) solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/* 主按钮：实心黑 */
.btn--solid {
  background: var(--c-ink);
  color: var(--c-ink-inv);
  border-color: var(--c-ink);
}

.btn--solid:hover {
  background: #262626;
  border-color: #262626;
  color: var(--c-ink-inv);
  transform: translateY(-1px);
}

/* 次按钮：黑描边 */
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}

.btn--ghost:hover {
  background: var(--c-ink);
  color: var(--c-ink-inv);
}

/* 强调按钮：金描边 + 底边金色细线延展 */
.btn--gold {
  position: relative;
  background: transparent;
  color: var(--c-gold-deep);
  border-color: var(--c-gold);
  overflow: hidden;
}

.btn--gold::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--rule-w);
  width: 24px;
  background: var(--c-gold);
  transition: width var(--dur) var(--ease);
}

.btn--gold:hover {
  background: var(--c-gold-wash);
  color: var(--c-gold-deep);
}

.btn--gold:hover::after {
  width: 100%;
}

/* 纯文字链接按钮 */
.btn--text {
  min-height: 44px;
  padding: var(--s-2) 0;
  color: var(--c-ink);
  border-bottom: var(--hairline) solid var(--c-rule);
}

.btn--text:hover {
  color: var(--c-gold-deep);
  border-bottom-color: var(--c-gold);
}

/* 深色底上的按钮 */
.on-dark .btn--ghost {
  color: var(--c-on-dark);
  border-color: var(--c-on-dark-rule);
}

.on-dark .btn--ghost:hover {
  background: var(--c-on-dark);
  color: var(--c-ink);
  border-color: var(--c-on-dark);
}

/* 按钮内的箭头，悬停时右移 */
.btn .arrow {
  transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ================= 噪点层 ================= */
.noise-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-noise);
  pointer-events: none;
  opacity: var(--noise-opacity);
  /* 用两段极淡的 radial-gradient 拼出细密噪点，无需图片资源 */
  background-image:
    radial-gradient(circle at 17% 29%, rgba(0, 0, 0, 0.5) 0.5px, transparent 0.5px),
    radial-gradient(circle at 63% 71%, rgba(0, 0, 0, 0.4) 0.5px, transparent 0.5px),
    radial-gradient(circle at 41% 87%, rgba(0, 0, 0, 0.35) 0.5px, transparent 0.5px),
    radial-gradient(circle at 88% 13%, rgba(0, 0, 0, 0.45) 0.5px, transparent 0.5px);
  background-size:
    var(--noise-size) var(--noise-size),
    calc(var(--noise-size) * 1.3) calc(var(--noise-size) * 1.3),
    calc(var(--noise-size) * 0.8) calc(var(--noise-size) * 0.8),
    calc(var(--noise-size) * 1.6) calc(var(--noise-size) * 1.6);
  mix-blend-mode: multiply;
}

/* ================= 首屏微粒画布 ================= */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-noise);
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ================= 首屏内容 ================= */
.hero-brand {
  margin-bottom: var(--s-12);
}

.hero-brand svg,
.hero-brand img {
  height: clamp(40px, 6vw, 64px);
  width: auto;
  background: none;
}

.hero-title {
  max-width: 20em;
}

/* 手动断行：每行独立成块，行高由 h1 控制 */
.hero-line {
  display: block;
}

.hero-title .en {
  display: block;
  margin-top: var(--s-8);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: var(--w-base);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-16);
}

/* 滚动指示的箭头，上下缓慢浮动 */
.scroll-arrow {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--c-ink-3), transparent);
  animation: scroll-nudge 2.4s var(--ease) infinite;
}

@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ================= 关于我们 ================= */
.about-year {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.about-year .num {
  font-family: var(--f-mono);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: var(--w-base);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.about-year .cap {
  font-size: var(--f-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

/* 首字下沉，强化编辑感 */
.about-body > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.86;
  font-weight: var(--w-bold);
  padding-right: 0.1em;
  padding-top: 0.06em;
  color: var(--c-ink);
}

/* ================= 数字统计 ================= */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-8);
  margin-top: var(--s-16);
  padding-top: var(--s-8);
  border-top: var(--rule-w) solid var(--c-rule);
}

.stat .num {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--f-number);
  font-weight: var(--w-base);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.stat .cap {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ================= 业务矩阵 ================= */
.business-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--rule-w) solid var(--c-rule);
}

.business-item {
  position: relative;
  padding: var(--s-8) var(--s-6) var(--s-12);
  border-bottom: var(--rule-w) solid var(--c-rule);
  border-right: var(--rule-w) solid var(--c-rule);
  transition: background-color var(--dur-fast) var(--ease);
}

.business-item:nth-child(4n) {
  border-right: 0;
}

.business-item .no {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-gold);
  margin-bottom: var(--s-8);
}

.business-item .zh {
  display: block;
  font-size: var(--f-h3);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.business-item .en {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.business-item .d {
  display: block;
  margin-top: var(--s-6);
  font-size: var(--f-meta);
  line-height: var(--lh-meta);
  color: var(--c-ink-2);
}

/* 悬停：底边金色细线从左延展 */
.business-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: var(--rule-w);
  width: 0;
  background: var(--c-gold);
  transition: width var(--dur) var(--ease);
}

.business-item:hover {
  background: var(--c-bg-soft);
}

.business-item:hover::after {
  width: 100%;
}

/* ================= 艺人名单 ================= */
.artist-group + .artist-group {
  margin-top: var(--s-16);
}

.artist-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: var(--rule-w) solid var(--c-ink);
}

.artist-group-head .zh {
  font-size: var(--f-h3);
  font-weight: var(--w-bold);
}

.artist-group-head .en {
  font-size: var(--f-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.artist-group-head .count {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-gold);
}

/* 单行艺人：编号 / 中文名 / 英文名 / 小头像 */
.artist-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-bottom: var(--rule-w) solid var(--c-rule);
  transition: transform var(--dur-fast) var(--ease);
}

.artist-row .idx {
  flex-shrink: 0;
  width: 3em;
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-gold);
}

.artist-row .zh {
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: var(--w-bold);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--c-ink);
}

.artist-row .en {
  margin-left: auto;
  text-align: right;
  font-size: var(--f-micro);
  letter-spacing: var(--track-en-name);
  text-transform: uppercase;
  color: var(--c-ink-3);
  transition: color var(--dur-fast) var(--ease);
}

/*
 * 艺人头像：**常态可见**。
 * 原先设成 `opacity: 0` + 悬停才出现，两个问题：
 *   1. 触屏设备没有 hover，手机上永远看不到图；
 *   2. 访客第一眼会以为这一栏压根没有图。
 * 悬停不再负责「出现」，只负责「变色」。
 */
.artist-row .thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  object-fit: cover;
  /* 取景略微偏上：人像的脸通常在画面上半部。
     否则横版图在方形框里做居中裁切，很容易只剩一片肩膀或乐器。 */
  object-position: center 28%;
  background: var(--c-bg-soft);
  outline: var(--hairline) solid var(--c-rule);
  outline-offset: -1px;
  transition: outline-color var(--dur-fast) var(--ease);
}

.artist-row:hover {
  transform: translateX(8px);
}

.artist-row:hover .idx,
.artist-row:hover .en {
  color: var(--c-gold-deep);
}

.artist-row:hover .thumb {
  outline-color: var(--c-gold);
}

.artist-row:hover .zh {
  color: var(--c-ink);
}

/* 待补充的艺人多加一个标注 */
.artist-row[data-pending="true"] .zh::after {
  content: "待补充";
  display: inline-block;
  margin-left: var(--s-3);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: var(--w-base);
  letter-spacing: var(--track-micro);
  color: var(--c-warn);
  border: var(--rule-w) solid currentColor;
  vertical-align: middle;
}

/* ================= 向阳花 LIVE ================= */
.live-festivals {
  display: flex;
  gap: var(--s-12);
  overflow-x: auto;
  padding-bottom: var(--s-6);
  /* 只在右侧渐隐，暗示还能往右滑。
     左侧不加渐隐：初始 scrollLeft 为 0 时渐隐会把第一条的左边切掉，看起来像 bug。 */
  mask-image: linear-gradient(to right, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
  scrollbar-width: none;
  cursor: grab;
}

.live-festivals::-webkit-scrollbar {
  display: none;
}

.live-festivals.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.festival {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-right: var(--s-12);
  border-right: var(--rule-w) solid var(--c-rule);
}

.festival .zh {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--c-ink);
}

.festival .en {
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
}

/* ================= 演出主办矩阵 ================= */
.promoter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(32px, 5vh, 56px);
  border-top: var(--rule-w) solid var(--c-rule);
}

.promoter {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-6) var(--s-8) 0;
  border-bottom: var(--rule-w) solid var(--c-rule);
  border-right: var(--rule-w) solid var(--c-rule);
}

.promoter:last-child {
  border-right: 0;
}

.promoter .role {
  font-size: var(--f-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

/* 品牌介绍由公司提供，未提供时整段不渲染。
   所以卡片可能只有「角色 + 品牌名 + 英文名」，靠 name 的上边距撑住层次，
   不能依赖 .desc 的存在来分隔。 */
.promoter .name {
  margin-top: var(--s-2);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: var(--w-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.promoter .name-alt {
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.promoter .desc {
  margin-top: var(--s-2);
  font-size: var(--f-meta);
  line-height: 1.75;
  color: var(--c-ink-2);
}

/* 自有演出企划 IP */
.promoter-series {
  margin-top: var(--s-10);
}

.series-row {
  display: grid;
  grid-template-columns: 180px 260px 1fr;
  gap: var(--s-6);
  align-items: baseline;
  padding-block: var(--s-6);
  border-bottom: var(--rule-w) solid var(--c-rule);
}

.series-row .meta2 {
  font-size: var(--f-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

.series-row .name {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.series-row .desc {
  font-size: var(--f-meta);
  line-height: 1.75;
  color: var(--c-ink-2);
}

@media (max-width: 1024px) {
  .promoter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .promoter:nth-child(2n) {
    border-right: 0;
  }

  .series-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

@media (max-width: 640px) {
  .promoter-grid {
    grid-template-columns: 1fr;
  }

  .promoter,
  .promoter:last-child {
    border-right: 0;
  }
}

/* ================= 版权总量 ================= */
.copyright-total {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.copyright-total .num {
  font-family: var(--f-mono);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: var(--w-base);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.copyright-total .cap {
  font-size: var(--f-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

.copyright-total .note {
  padding-top: var(--s-4);
  border-top: var(--rule-w) solid var(--c-rule);
  font-size: var(--f-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ================= 曲库合作艺人墙 ================= */
.catalogue-artists {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--rule-w) solid var(--c-rule);
}

.catalogue-artists li {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4) var(--s-6) 0;
  border-bottom: var(--rule-w) solid var(--c-rule);
  border-right: var(--rule-w) solid var(--c-rule);
  transition: transform var(--dur-fast) var(--ease);
}

.catalogue-artists li:nth-child(4n) {
  border-right: 0;
}

.catalogue-artists .zh {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--c-ink);
  padding-left: var(--s-4);
}

.catalogue-artists .en {
  padding-left: var(--s-4);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.catalogue-artists li:hover {
  transform: translateY(-2px);
}

.catalogue-artists li:hover .zh,
.catalogue-artists li:hover .en {
  color: var(--c-gold-deep);
}

@media (max-width: 1024px) {
  .catalogue-artists {
    grid-template-columns: repeat(2, 1fr);
  }

  .catalogue-artists li:nth-child(4n) {
    border-right: var(--rule-w) solid var(--c-rule);
  }

  .catalogue-artists li:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .catalogue-artists {
    grid-template-columns: 1fr;
  }

  .catalogue-artists li,
  .catalogue-artists li:nth-child(4n) {
    border-right: 0;
  }
}

/* ================= 版权案例 ================= */
.copyright-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8) var(--s-6);
}

.work {
  display: block;
  position: relative;
}

.work .cover {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg-soft);
}

.work .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-tone);
  transition:
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

/* 悬停：图片微放大并恢复一点色彩，金色描边浮现 */
.work::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--rule-w) solid transparent;
  transition: border-color var(--dur) var(--ease);
  pointer-events: none;
}

.work:hover::after {
  border-color: var(--c-gold);
}

.work:hover .cover img {
  transform: scale(1.04);
  filter: var(--img-tone-hover);
}

.work .t {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--f-body);
  font-weight: var(--w-bold);
  line-height: 1.45;
  color: var(--c-ink);
}

.work .a {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
  /* 专辑名过长时截断，避免把网格撑歪 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work .a .alb {
  color: var(--c-ink-3);
  opacity: 0.7;
}

.work:hover .a {
  color: var(--c-gold-deep);
}

.work .type {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.92);
}

/* ================= 新闻列表 ================= */
.news-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-8);
  padding-block: var(--s-8);
  border-bottom: var(--rule-w) solid var(--c-rule);
  align-items: start;
}

.news-item:first-child {
  border-top: var(--rule-w) solid var(--c-rule);
}

.news-item .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}

.news-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-tone);
  transition: transform var(--dur) var(--ease);
}

.news-item:hover .thumb img {
  transform: scale(1.03);
}

.news-item .date {
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-gold);
}

.news-item h3 {
  margin-top: var(--s-3);
  font-size: var(--f-h3);
  font-weight: var(--w-bold);
  line-height: 1.35;
  color: var(--c-ink);
}

.news-item:hover h3 {
  border-bottom: var(--hairline) solid var(--c-gold);
  display: inline;
}

.news-item .sum {
  margin-top: var(--s-3);
  font-size: var(--f-meta);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================= 演出日程 ================= */
.show-month {
  margin-top: var(--s-12);
}

.show-month-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-w) solid var(--c-ink);
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink);
}

.show-month-head .n {
  margin-left: auto;
  color: var(--c-ink-3);
}

.show-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--s-6);
  align-items: center;
  padding-block: var(--s-6);
  border-bottom: var(--rule-w) solid var(--c-rule);
}

.show-row .date {
  font-family: var(--f-mono);
  font-size: var(--f-body);
  letter-spacing: 0.04em;
  color: var(--c-gold-deep);
}

.show-row .date .wd {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.show-row .what .t {
  font-size: var(--f-body);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}

.show-row .what .p {
  margin-top: var(--s-1);
  font-size: var(--f-meta);
  letter-spacing: 0.04em;
  color: var(--c-ink-3);
}

/* 状态标签：细边框，颜色区分 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  border: var(--rule-w) solid currentColor;
  white-space: nowrap;
}

.tag--onsale { color: var(--c-ok); }
.tag--soon { color: var(--c-warn); }
.tag--ended { color: var(--c-mute); }

/* 已结束的场次整体弱化 */
.show-row.is-ended .what .t,
.show-row.is-ended .date {
  color: var(--c-ink-3);
  opacity: 0.75;
}

/* ================= 商城 / 二维码 ================= */
.qr-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.qr-frame {
  width: 140px;
  height: 140px;
  padding: var(--s-2);
  border: var(--rule-w) solid var(--c-gold);
  background: var(--c-bg);
}

.qr-frame img,
.qr-frame canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: none;
}

/* 无二维码图时的占位（保持版面不塌） */
.qr-frame .qr-pending {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
  background: var(--c-bg-soft);
}

.qr-block .cap {
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink);
}

.qr-block .hint {
  font-size: var(--f-micro);
  color: var(--c-ink-3);
}

/* ================= 联系信息列表 ================= */
.contact-list {
  border-top: var(--rule-w) solid var(--c-rule);
}

.contact-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-6);
  align-items: baseline;
  padding-block: var(--s-6);
  border-bottom: var(--rule-w) solid var(--c-rule);
}

.contact-row .k {
  font-size: var(--f-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

.contact-row .v {
  font-size: var(--f-body);
  color: var(--c-ink);
  word-break: break-word;
}

.contact-row .v a {
  border-bottom: var(--hairline) solid var(--c-rule);
}

.contact-row .v a:hover {
  border-bottom-color: var(--c-gold);
}

/* 号码后的限定说明（如「仅商务洽谈」）——小字、弱色，不抢主信息 */
.contact-row .note {
  margin-left: var(--s-3);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-ink-3);
}

@media (max-width: 640px) {
  .contact-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* ================= 音乐试听 ================= */
.player {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: var(--rule-w) solid var(--c-gold-line);
}

.player .label {
  display: block;
  margin-bottom: var(--s-6);
  color: var(--c-gold);
}

.player iframe {
  display: block;
  width: 100%;
  max-width: 720px;
  border: 0;
  background: var(--c-bg-soft);
}

/* ================= 提示条 ================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-8);
  z-index: var(--z-toast);
  transform: translateX(-50%) translateY(12px);
  padding: var(--s-3) var(--s-6);
  background: var(--c-ink);
  color: var(--c-ink-inv);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast--error {
  background: var(--c-error);
}

/* ================= 加载骨架 ================= */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-bg-soft) 25%,
    #F1EFEB 37%,
    var(--c-bg-soft) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ================= 空状态与错误态 ================= */
.empty-state {
  padding: var(--s-16) 0;
  border-top: var(--rule-w) solid var(--c-rule);
  border-bottom: var(--rule-w) solid var(--c-rule);
  text-align: center;
}

.empty-state .t {
  font-size: var(--f-meta);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ================= 面包屑 / 页头（子页面） ================= */
.page-head {
  padding-top: calc(var(--header-h) + clamp(56px, 10vh, 120px));
  padding-bottom: clamp(40px, 6vh, 72px);
  border-bottom: var(--rule-w) solid var(--c-rule);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.breadcrumb a:hover {
  color: var(--c-gold-deep);
}

.breadcrumb .sep {
  color: var(--c-rule);
}

/* ================= 分页 ================= */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-16);
  padding-top: var(--s-8);
  border-top: var(--rule-w) solid var(--c-rule);
}

.pager button {
  min-width: 44px;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: var(--f-meta);
  color: var(--c-ink-2);
  border: var(--rule-w) solid var(--c-rule);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pager button:hover:not(:disabled) {
  border-color: var(--c-gold);
  color: var(--c-gold-deep);
}

.pager button.is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ink-inv);
}

.pager button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ================= 艺人详情 ================= */

/*
 * 左列 = 名字 + 定位语 + 小传，右列 = 竖版照片。
 * 小传必须在**左列内部**：放到 hero 外面时，左列只有名字和一句话，
 * 而右列照片按 3:4 撑到近 700px 高，左列中间就会空出一大片。
 */
.artist-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}

.artist-intro {
  min-width: 0;
}

/*
 * 没有小传的艺人（资料未到的两位）：
 * 左列只剩「分组 + 名字 + 英文名」，与右侧 3:4 竖图并排会在左列留下大片空白。
 * 垂直居中后空白在上下均分，读起来是刻意的留白，而不是排版坏了。
 */
.artist-hero--solo {
  align-items: center;
}

.artist-portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-bg-soft);
}

.artist-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-tone);
}

.artist-name {
  font-size: var(--f-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
  line-height: 1.06;
}

.artist-name-en {
  margin-top: var(--s-4);
  font-size: var(--f-meta);
  letter-spacing: var(--track-en-name);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.artist-tagline {
  margin-top: var(--s-8);
  font-size: var(--f-lede);
  line-height: var(--lh-lede);
  color: var(--c-ink-2);
}

/* 艺人简介：每段包在 div 里以便逐段做进场动画，所以段落间距要单独给 */
.artist-bio > div + div {
  margin-top: var(--s-6);
}

/* 小传属于 hero 左列的一部分（紧接名字 / 定位语之下），
   不再单独占一整行 —— 否则左列会空出一大片，照片却撑满整个高度。 */
.artist-bio {
  margin-top: clamp(32px, 5vh, 56px);
}

/* 作品清单 */
.work-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  margin-top: var(--s-16);
  padding-top: var(--s-8);
  border-top: var(--rule-w) solid var(--c-rule);
}

.work-lists h4 {
  font-size: var(--f-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--s-6);
}

.work-lists li {
  padding-block: var(--s-3);
  border-bottom: var(--rule-w) solid var(--c-rule-soft);
  font-size: var(--f-meta);
  letter-spacing: var(--track-meta);
  color: var(--c-ink-2);
}

/* 上一位 / 下一位 */
.artist-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  margin-top: var(--s-24);
  padding-top: var(--s-8);
  border-top: var(--rule-w) solid var(--c-rule);
}

.artist-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.artist-nav .k {
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.artist-nav .v {
  font-size: var(--f-h3);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}

.artist-nav a:hover .v {
  color: var(--c-gold-deep);
}

/* ================= 新闻详情 ================= */
.article {
  max-width: 46em;
  /* 详情页把面包屑也放在这里，需要单独控制上边距 */
  margin-top: var(--s-4);
}

/* 详情页的日期：与列表页的 .news-item .date 一致的金色等宽小字 */
.article .date {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-gold);
}

.article-title {
  margin-top: var(--s-4);
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: var(--w-bold);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  max-width: 22em;
}

.article-cover {
  margin-top: clamp(32px, 5vh, 56px);
}

/* 正文底部动作区（试听 / 返回） */
.article-action {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: var(--rule-w) solid var(--c-rule);
}

/* 详情页顶部页头不需要下细线（正文自带分隔） */
.page-head--plain {
  border-bottom: 0;
}

.article-body {
  margin-top: var(--s-12);
}

.article-body p {
  color: var(--c-ink-2);
  line-height: 2;
}

.article-body p + p {
  margin-top: var(--s-6);
}

.article-cover {
  margin-bottom: var(--s-12);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= 响应式 ================= */

@media (max-width: 1024px) {
  .business-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .business-item:nth-child(4n) {
    border-right: var(--rule-w) solid var(--c-rule);
  }

  .business-item:nth-child(2n) {
    border-right: 0;
  }

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

  /*
   * 单列时改成 flex + `display: contents`：
   * 让左列「散开」，照片得以插到定位语和正文之间。
   * 不这么做的话，DOM 顺序是「名字 → 小传 → 照片」，
   * 手机上要滚过整段小传才看得到艺人的脸。
   * 目标顺序：名字 / 定位语 → 照片 → 小传
   */
  .artist-hero {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
  }

  .artist-intro {
    display: contents;
  }

  .artist-bio {
    order: 1; /* 排到最后；其余项都是默认的 0，保持原有先后 */
    margin-top: 0;
  }

  .article-cover {
    margin-top: var(--s-12);
  }
}

@media (max-width: 768px) {
  .news-item {
    grid-template-columns: 1fr;
  }

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

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

  .show-row {
    grid-template-columns: 72px 1fr;
    row-gap: var(--s-3);
  }

  .show-row .tag {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .business-list {
    grid-template-columns: 1fr;
  }

  .business-item {
    border-right: 0;
    padding-inline: 0;
  }

  .business-item:nth-child(4n) {
    border-right: 0;
  }

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

  .artist-row {
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-4);
  }

  .artist-row .en {
    width: 100%;
    margin-left: 0;
    text-align: left;
    padding-left: 3em;
  }

  .artist-row .thumb {
    display: none;
  }

  .artist-row:hover {
    transform: none;
  }
}