/* home.css · 首页（重构 P4）—— 只使用 shell.css 的设计令牌 */

/* ---------- 通用小件 ---------- */
.page-home main { display: block; }
.hm-label {
  margin: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-subtle); font-weight: 500;
}
.num { font-variant-numeric: tabular-nums lining-nums; }
.hm-title {
  margin: var(--sp-3) 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: .01em; color: var(--text);
  text-wrap: balance;
}
.hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--sp-5);
  border: 1px solid var(--border-strong); border-radius: var(--r-1);
  color: var(--text); text-decoration: none; font-size: var(--fs-small); font-weight: 600; letter-spacing: .1em;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.hm-btn:hover { border-color: var(--primary); color: var(--primary); }
.hm-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.hm-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.hm-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); text-decoration: none; font-size: var(--fs-small); letter-spacing: .04em;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 3px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hm-link span { transition: transform var(--dur-base) var(--ease-out); }
.hm-link:hover { color: var(--primary); border-color: var(--primary); }
.hm-link:hover span { transform: translateX(4px); }
.hm-caption { margin: var(--sp-4) 0 0; font-size: var(--fs-caption); color: var(--text-subtle); }
.hm-empty { margin: 0; padding: var(--sp-6); border: 1px dashed var(--border-strong); color: var(--text-muted); }
.hm-empty a { color: var(--primary); }

/* ---------- 首屏 ---------- */
.hm-hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hm-hero-figure { position: absolute; inset: 0; margin: 0; z-index: -1; }
.hm-hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 42%;
  animation: hm-settle 1.8s var(--ease-out) both;
}
.hm-hero-figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 26%, transparent 62%),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 78%, transparent) 0%, transparent 58%),
    linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, transparent 18%);
}
.hm-hero-text {
  width: 100%; max-width: var(--content); margin: 0 auto;
  padding: calc(var(--header-h) + var(--sp-8)) var(--gutter) var(--sp-10);
}
.hm-kicker { margin: 0 0 var(--sp-4); font-size: var(--fs-label); letter-spacing: .22em; color: var(--primary); }
.hm-hero-title {
  margin: 0; max-width: 11em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem); line-height: 1.12; letter-spacing: .02em; color: var(--text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hm-line { display: block; animation: hm-rise var(--dur-slow) var(--ease-out) both; }
.hm-line + .hm-line { animation-delay: 120ms; }
.hm-lede {
  margin: var(--sp-5) 0 0; max-width: 34em;
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.8; color: var(--text-muted);
  animation: hm-rise var(--dur-slow) var(--ease-out) 220ms both;
}
.hm-hero .hm-actions { animation: hm-rise var(--dur-slow) var(--ease-out) 320ms both; }
.hm-plaque {
  position: absolute; right: var(--gutter); bottom: var(--sp-10);
  display: flex; flex-direction: column; gap: 2px;
  max-width: 280px; padding-left: var(--sp-3);
  border-left: 1px solid var(--primary);
  font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.6;
}
.hm-plaque-title { font-family: var(--font-display); font-size: var(--fs-small); color: var(--text); }
@keyframes hm-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 首页顶栏：首屏时透明，滚动后恢复实色 */
.page-home .gn-header:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(10, 9, 7, .62), rgba(10, 9, 7, 0)); }
html:not(.gn-menu-open) .page-home .gn-header:not(.is-scrolled) .gn-top,
.page-home .gn-header:not(.is-scrolled) .gn-logo-en { color: rgba(239, 232, 219, .82); }

/* ---------- 区块骨架 ---------- */
.hm-section {
  max-width: var(--content); margin: 0 auto;
  padding: var(--sp-10) var(--gutter);
}
.hm-section + .hm-section { border-top: 1px solid var(--border); }
.hm-head { margin-bottom: var(--sp-7); }
.hm-head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); }

/* ---------- 三个展厅 ---------- */
.hm-hall-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-5); }
.hm-hall {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 460px; padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hm-hall:hover { border-color: var(--primary); }
.hm-hall-media { display: block; margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-3); aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.hm-hall-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.hm-hall:hover .hm-hall-media img { transform: scale(1.04); }
.hm-hall-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.hm-hall--business .hm-hall-name { font-size: var(--fs-h1); line-height: 1.05; margin-top: var(--sp-6); }
.hm-hall-desc { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.75; max-width: 30em; }
.hm-hall-stats { display: flex; gap: var(--sp-6); margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-small); }
.hm-hall-stats b { display: block; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; color: var(--text); font-weight: 700; margin-bottom: 6px; }
.hm-hall-specimen {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: auto;
  border-top: 1px solid var(--border);
}
.hm-hall-specimen span {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; margin-right: var(--sp-4);
  font-family: var(--font-latin); font-style: italic; font-size: 1.0625rem; color: var(--text-subtle);
  border-right: 1px solid var(--border);
}
.hm-hall-specimen span:last-child { border-right: 0; }
.hm-hall-go { margin-top: auto; font-size: var(--fs-small); letter-spacing: .06em; color: var(--primary); }
.hm-hall--business .hm-hall-go { margin-top: var(--sp-3); }

/* ---------- 本期策展 ---------- */
.hm-section.hm-feature {
  max-width: none; padding-left: 0; padding-right: 0;
  background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.hm-feature + .hm-section { border-top: 0; }
.hm-feature-inner {
  max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: var(--sp-9); align-items: start;
}
.hm-feature-body { margin: var(--sp-5) 0 0; max-width: 36em; color: var(--text-muted); line-height: 1.85; }
.hm-feature-label {
  margin: 0; border: 1px solid var(--border-strong); background: var(--surface);
}
.hm-feature-label > div { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.hm-feature-label > div:last-child { border-bottom: 0; }
.hm-feature-label dt { font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--text-subtle); text-transform: uppercase; }
.hm-feature-label dd { margin: 4px 0 0; color: var(--text); }
.hm-feature-label a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.hm-feature-label a:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* ---------- 机制目录 ---------- */
.hm-cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
.hm-cat { border-top: 1px solid var(--border-strong); padding-top: var(--sp-4); }
.hm-cat-name { margin: var(--sp-3) 0 2px; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--text); }
.hm-cat-count { margin: 0 0 var(--sp-4); font-size: var(--fs-caption); color: var(--text-subtle); }
.hm-cat-tags { list-style: none; margin: 0; padding: 0; }
.hm-cat-tags a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2);
  padding: 9px 0; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}
.hm-cat-tags a:hover { color: var(--primary); padding-left: 4px; }
.hm-tag-en { font-family: var(--font-latin); font-style: italic; font-size: var(--fs-caption); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cat-more a { justify-content: flex-start; color: var(--text-muted); border-bottom: 0; }

/* ---------- 创业雷达 ---------- */
.hm-radar-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.hm-radar-item a {
  height: 100%; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out);
}
.hm-radar-item a:hover { border-color: var(--primary); }
.hm-radar-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: var(--lh-snug); }
.hm-radar-note { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.7; }
.hm-radar-growth { margin-top: auto; font-size: var(--fs-caption); letter-spacing: .08em; color: var(--text-subtle); }
.hm-radar-growth[data-growth="up"] { color: var(--primary); }

/* ---------- 关于 ---------- */
.hm-about-inner { max-width: 44rem; }
.hm-about-body { margin: var(--sp-5) 0 var(--sp-6); color: var(--text-muted); line-height: 1.9; font-size: clamp(1rem, .96rem + .25vw, 1.125rem); }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
  .hm-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-radar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .hm-hero { display: block; min-height: 0; }
  .hm-hero-figure { position: relative; inset: auto; z-index: 0; height: min(68vh, 560px); }
  .hm-hero-img { object-position: 60% 45%; }
  .hm-hero-figure::after {
    background:
      linear-gradient(to top, var(--bg) 0%, transparent 34%),
      linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, transparent 22%);
  }
  .hm-hero-text { padding-top: 0; margin-top: calc(var(--sp-8) * -1); position: relative; padding-bottom: var(--sp-8); }
  .hm-plaque { top: calc(var(--header-h) + var(--sp-3)); bottom: auto; right: var(--gutter); max-width: 62%; font-size: var(--fs-label); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
  .hm-plaque .hm-label { display: none; }
  .hm-hall-grid { grid-template-columns: 1fr; }
  .hm-hall { min-height: 0; }
  .hm-hall--business .hm-hall-name { margin-top: var(--sp-3); }
  .hm-feature-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hm-section { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
}
@media (max-width: 599px) {
  .hm-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-radar-list { grid-template-columns: 1fr; }
  .hm-actions { gap: var(--sp-4); }
  .hm-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-img, .hm-line, .hm-lede, .hm-hero .hm-actions { animation: none; }
}

/* ---------- 404 ---------- */
.nf-main { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; padding-top: var(--header-h); }
.nf { width: 100%; }
.nf-title { font-size: var(--fs-h1); max-width: 12em; }
.nf-body { margin: var(--sp-5) 0 0; max-width: 34em; color: var(--text-muted); line-height: 1.85; }
button.hm-btn { background: transparent; font: inherit; font-size: var(--fs-small); font-weight: 600; letter-spacing: .1em; cursor: pointer; }

/* ---------- 关于页 ---------- */
.ab-hero { padding-top: calc(var(--header-h) + var(--sp-9)); }
.ab-title { font-size: var(--fs-h1); max-width: 14em; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); margin-top: var(--sp-8); align-items: start; }
.ab-figure { margin: 0; }
.ab-figure img { width: 100%; height: auto; border: 1px solid var(--border); background: var(--surface); }
.ab-body p { margin: 0 0 var(--sp-4); color: var(--text-muted); line-height: 1.9; max-width: 36em; }
.ab-body .ab-lead, .ab-lead { color: var(--text); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.8; }
.ab-tags { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ab-tags li { padding: 4px var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-1); font-size: var(--fs-caption); color: var(--text-muted); letter-spacing: .06em; }
.ab-list { margin: 0; border-top: 1px solid var(--border); }
.ab-list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: 1px solid var(--border); }
.ab-list dt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--text); }
.ab-list dd { margin: 0; color: var(--text-muted); line-height: 1.85; }
.ab-list dd a { margin-left: var(--sp-2); color: var(--primary); text-decoration: none; white-space: nowrap; }
.ab-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.ab-rules li { border-top: 1px solid var(--border-strong); padding-top: var(--sp-4); }
.ab-rules .num { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--primary); }
.ab-rules p { margin: var(--sp-3) 0 0; color: var(--text-muted); line-height: 1.85; }
.ab-rules b { color: var(--text); }
.ab-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.ab-contact p { margin: 0 0 var(--sp-4); }
@media (max-width: 899px) {
  .ab-grid, .ab-contact { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ab-list > div { grid-template-columns: 1fr; gap: var(--sp-2); }
  .ab-rules { grid-template-columns: 1fr; }
}

/* ---------- 商业首页 /finance ---------- */
.fi-hero { padding-top: calc(var(--header-h) + var(--sp-9)); padding-bottom: var(--sp-7); }
.fi-title { font-size: var(--fs-h1); max-width: 14em; }
.fi-lede { margin: var(--sp-5) 0 0; max-width: 38em; color: var(--text-muted); line-height: 1.85; font-size: clamp(1rem, .96rem + .25vw, 1.125rem); }
.hm-section.fi-dir { padding-top: 0; border-top: 0; }
.fi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.fi-col { border-top: 1px solid var(--border-strong); padding-top: var(--sp-4); }
.fi-col-title { margin: var(--sp-2) 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text); }
.fi-item { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); text-decoration: none; transition: padding var(--dur-fast) var(--ease-out); }
.fi-item b { display: block; color: var(--text); font-weight: 600; }
.fi-item span { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--text-muted); }
.fi-item:hover { padding-left: 4px; }
.fi-item:hover b { color: var(--primary); }
.fi-live { border-top: 1px solid var(--border); padding-top: var(--sp-8); }
@media (max-width: 899px) { .fi-grid { grid-template-columns: 1fr; } }