/* ===========================================================
   胜天国际中心 · 共享样式表 /assets/site.css
   底色：雪白米 / 主色：深靛蓝 / 材质：苔绿 · 陶土 · 金属铜
   =========================================================== */

/* ---------- 1. 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 148px;
}
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }

/* ---------- 2. 变量 ---------- */
:root {
  --c-snow: #F4F1EA;
  --c-rock: #33383D;
  --c-indigo: #16324F;
  --c-night: #0B1E32;
  --c-moss: #4F5D42;
  --c-clay: #A4522F;
  --c-copper: #B08A4F;
  --c-slate: #D8D4CB;
  --c-lungta-blue: #2E6FA8;
  --c-lungta-white: #FFFFFF;
  --c-lungta-red: #B23A2C;
  --c-lungta-green: #2F7A55;
  --c-lungta-yellow: #C79A1E;

  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 17px;
  --fs-4: 22px;
  --fs-5: 32px;
  --fs-6: 52px;
  --fs-7: 84px;
  --fs-display: clamp(2.75rem, 7vw, 6rem);
  --fs-section: clamp(1.75rem, 3.5vw, 3rem);

  --gutter: clamp(18px, 4vw, 56px);
  --shell-w: 1280px;
  --measure: 34em;

  --line-slate: 1px solid var(--c-slate);
  --line-copper: 1px solid var(--c-copper);
  --line-night: 1px solid rgba(244, 241, 234, 0.16);
  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* ---------- 3. 基础排版 ---------- */
body {
  background: var(--c-snow);
  color: var(--c-rock);
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-indigo);
}
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--c-copper); outline-offset: 2px; }
::selection { background: var(--c-copper); color: var(--c-night); }

.num, .mono, .footer-mail {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.vnote {
  writing-mode: vertical-rl;
  font-size: var(--fs-1);
  letter-spacing: 0.28em;
  color: var(--c-copper);
}
.is-hidden { display: none !important; }

/* ---------- 4. 版心与栅格 ---------- */
.shell {
  width: min(var(--shell-w), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--rail { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--rail { grid-template-columns: 1fr; }
  html { scroll-padding-top: 96px; }
}

/* ---------- 5. 跳转链接 ---------- */
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  transform: translateY(-200%);
  padding: 10px 18px;
  background: var(--c-indigo); color: var(--c-snow);
  font-size: var(--fs-2); letter-spacing: 0.08em;
  border-left: 3px solid var(--c-copper);
  transition: transform 0.18s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 6. 页头 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--c-snow);
}

/* 顶条：夜色靛底 + 铜色分隔 */
.top-strip {
  background: var(--c-night);
  color: var(--c-snow);
  border-bottom: var(--line-copper);
}
.top-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: var(--fs-1);
  letter-spacing: 0.06em;
}
.top-strip__season { display: inline-flex; align-items: center; gap: 9px; }
.top-strip__phone { display: inline-flex; align-items: baseline; gap: 9px; }
.top-strip__label { color: var(--c-copper); letter-spacing: 0.2em; }
.top-strip__phone .num { font-size: var(--fs-2); color: var(--c-lungta-white); }

/* 刊头：居中报头 + 左右侧栏 */
.masthead { border-bottom: var(--line-slate); background: var(--c-snow); }
.masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 20px 0 16px;
  transition: padding 0.18s var(--ease);
}
.masthead__left { display: flex; }
.masthead__right { display: flex; justify-content: flex-end; }
.masthead__brand { display: flex; justify-content: center; }
.masthead__season {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.22em; color: var(--c-moss);
}
.brand { display: inline-flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); }
.brand__name {
  font-size: var(--fs-6); font-weight: 900; line-height: 1;
  letter-spacing: -0.02em; color: var(--c-indigo);
  transition: font-size 0.18s var(--ease), color 0.18s var(--ease);
}
.brand:hover .brand__name { color: var(--c-clay); }
.brand__note {
  writing-mode: vertical-rl;
  font-size: 11px; line-height: 1.1;
  letter-spacing: 0.18em;
  color: var(--c-copper);
  border-left: 1px solid var(--c-copper);
  padding-left: 7px;
}

/* 导航带 */
.nav-bar { border-bottom: var(--line-slate); background: var(--c-snow); position: relative; }
.nav-bar__inner { display: flex; align-items: center; justify-content: center; }
.nav-toggle {
  display: none;
  align-items: center; gap: 10px;
  font-size: var(--fs-2); font-weight: 700;
  letter-spacing: 0.2em; color: var(--c-indigo);
  padding: 14px 0;
}
.nav-toggle__bars {
  display: inline-block; width: 22px; height: 11px;
  border-top: 2px solid var(--c-copper);
  border-bottom: 2px solid var(--c-copper);
}
.nav { display: block; }
.nav__list {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(14px, 2.6vw, 38px);
  overflow-x: auto;
  scrollbar-width: thin;
}
.nav__item { flex: none; }
.nav__link {
  display: inline-block;
  padding: 13px 2px 12px;
  font-size: var(--fs-3); font-weight: 500;
  color: var(--c-rock);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav__link:hover { color: var(--c-indigo); border-bottom-color: var(--c-copper); }
.nav__link[aria-current="page"] {
  color: var(--c-indigo);
  font-weight: 700;
  border-bottom-color: var(--c-copper);
}

/* 折叠态：滚过一屏 */
[data-header].is-condensed .top-strip { display: none; }
[data-header].is-condensed .masthead__inner { padding: 9px 0; }
[data-header].is-condensed .brand__name { font-size: var(--fs-4); }
[data-header].is-condensed .brand__note { display: none; }
[data-header].is-condensed .masthead__season { display: none; }
[data-header].is-condensed .nav__link { padding: 11px 2px 10px; font-size: var(--fs-2); }

/* ---------- 7. 移动端导航 ---------- */
@media (max-width: 900px) {
  .nav-bar__inner { justify-content: flex-start; }
  .nav-toggle { display: inline-flex; }
  .nav[data-nav] { display: none; }
  .nav[data-nav][data-open] { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
    background: var(--c-snow);
    border-bottom: var(--line-copper);
    max-height: 72vh; overflow-y: auto;
  }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--gutter) 18px;
    overflow-x: visible;
  }
  .nav__link {
    width: 100%;
    padding: 14px 0;
    font-size: var(--fs-4);
    border-bottom: 1px solid var(--c-slate);
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--c-copper); }
  .nav__item:last-child .nav__link { border-bottom: 0; }
}

/* ---------- 8. 页脚 ---------- */
.site-footer {
  background: var(--c-night);
  color: var(--c-snow);
  border-top: var(--line-copper);
  padding-bottom: 26px;
  font-size: var(--fs-2);
}
.footer-brand {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 8px 18px;
  padding: 36px 0 20px;
}
.footer-brand__name {
  font-size: var(--fs-5); font-weight: 900; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--c-snow);
}
.footer-brand__note {
  font-size: var(--fs-1); letter-spacing: 0.26em; color: var(--c-copper);
}

.footer-quick {
  display: flex; flex-wrap: wrap;
  border-top: var(--line-night);
  border-bottom: var(--line-night);
}
.footer-quick__cell {
  flex: 1 1 220px;
  padding: 15px 22px;
  font-size: var(--fs-2);
  letter-spacing: 0.06em;
  color: var(--c-copper);
}
.footer-quick__cell:first-child { padding-left: 0; }
.footer-quick__cell + .footer-quick__cell { border-left: var(--line-night); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(176, 138, 79, 0.32);
  border-bottom: var(--line-night);
}
.footer-col { background: var(--c-night); padding: 26px 22px 30px; }
.footer-col:first-child { padding-left: 0; }
.footer-col:last-child { padding-right: 0; }
.footer-col__title {
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.26em; color: var(--c-copper);
  padding-bottom: 9px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(176, 138, 79, 0.5);
}
.footer-list { display: flex; flex-direction: column; gap: 9px; }
.footer-list li { line-height: 1.65; }
.footer-list--contact li { display: flex; align-items: baseline; gap: 10px; }
.footer-key {
  flex: none; min-width: 2.9em;
  font-size: var(--fs-1); letter-spacing: 0.16em; color: var(--c-copper);
}
.footer-mail { overflow-wrap: anywhere; word-break: break-word; }
.footer-list__note {
  display: block !important;
  margin-top: 6px;
  font-size: var(--fs-1);
  line-height: 1.75;
  color: rgba(244, 241, 234, 0.6);
}
.footer-link {
  color: rgba(244, 241, 234, 0.9);
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.footer-link:hover { color: var(--c-lungta-white); border-bottom-color: var(--c-copper); }
.footer-link--strong { color: var(--c-copper); letter-spacing: 0.12em; }

.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
  color: rgba(244, 241, 234, 0.58);
}
.footer-base__legal { color: var(--c-copper); }

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col:first-child { padding-left: 22px; }
  .footer-col:last-child { padding-right: 22px; }
  .footer-quick__cell:first-child { padding-left: 22px; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col, .footer-col:first-child, .footer-col:last-child { padding: 22px 16px; }
  .footer-quick__cell { flex: 1 1 100%; padding: 12px 16px; }
  .footer-quick__cell + .footer-quick__cell {
    border-left: 0; border-top: var(--line-night);
  }
  .footer-brand { padding: 28px 0 16px; }
}

/* ---------- 9. 状态点（经幡五色降维） ---------- */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  flex: none;
  background: var(--c-slate);
}
.status-dot--live,
.status-dot--green { background: var(--c-lungta-green); box-shadow: 0 0 0 3px rgba(47, 122, 85, 0.22); }
.status-dot--blue { background: var(--c-lungta-blue); }
.status-dot--red { background: var(--c-lungta-red); }
.status-dot--yellow { background: var(--c-lungta-yellow); }
.status-dot--white { background: var(--c-lungta-white); }

/* ---------- 10. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.1em;
  border: 1px solid var(--c-indigo);
  background: transparent; color: var(--c-indigo);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn--primary { background: var(--c-indigo); border-color: var(--c-indigo); color: var(--c-snow); }
.btn--primary:hover { background: var(--c-night); border-color: var(--c-night); }
.btn--line { border-color: var(--c-copper); color: var(--c-indigo); }
.btn--line:hover { background: var(--c-copper); border-color: var(--c-copper); color: var(--c-night); }
.btn--moss { background: var(--c-moss); border-color: var(--c-moss); color: var(--c-snow); }
.btn--moss:hover { background: #3D4A33; border-color: #3D4A33; }
.btn--clay { background: var(--c-clay); border-color: var(--c-clay); color: var(--c-lungta-white); }
.btn--clay:hover { background: #8C4426; border-color: #8C4426; }

/* ---------- 11. 筛选按钮组 ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 0;
  border-top: var(--line-slate);
  border-bottom: var(--line-slate);
}
.filter-btn {
  padding: 7px 14px;
  font-size: var(--fs-2); letter-spacing: 0.06em;
  color: var(--c-rock);
  border: 1px solid var(--c-slate);
  background: transparent;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.filter-btn:hover { border-color: var(--c-copper); color: var(--c-indigo); }
.filter-btn[aria-pressed="true"] {
  background: var(--c-indigo);
  border-color: var(--c-indigo);
  color: var(--c-snow);
}

/* ---------- 12. 区块与文字组件 ---------- */
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section--tight { padding: clamp(32px, 4vw, 56px) 0; }
.section--night { background: var(--c-night); color: var(--c-snow); }
.section--night h1, .section--night h2, .section--night h3, .section--night .section-title { color: var(--c-snow); }
.section--indigo { background: var(--c-indigo); color: var(--c-snow); }
.section--indigo h1, .section--indigo h2, .section--indigo h3, .section--indigo .section-title { color: var(--c-snow); }
.section--moss { background: var(--c-moss); color: var(--c-snow); }
.section--moss h1, .section--moss h2, .section--moss h3, .section--moss .section-title { color: var(--c-snow); }
.section--slate { background: var(--c-slate); }

.section-title {
  font-size: var(--fs-section);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-indigo);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.3em; color: var(--c-copper);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--c-copper); }
.lede {
  font-size: var(--fs-4);
  line-height: 1.6;
  color: var(--c-rock);
  max-width: 30em;
}
.rule { height: 1px; background: var(--c-slate); border: 0; margin: 0; }
.rule--copper { background: var(--c-copper); }

.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-indigo);
}
.stat__unit { font-size: var(--fs-2); letter-spacing: 0.18em; color: var(--c-moss); }
.stat__label { font-size: var(--fs-2); color: var(--c-rock); }

/* ---------- 13. 表格 ---------- */
.data-table { width: 100%; font-size: var(--fs-2); }
.data-table caption {
  text-align: left; padding-bottom: 10px;
  font-size: var(--fs-1); letter-spacing: 0.22em; color: var(--c-moss);
}
.data-table th, .data-table td {
  padding: 12px 14px;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--c-slate);
}
.data-table thead th {
  background: var(--c-indigo);
  color: var(--c-snow);
  font-weight: 700; letter-spacing: 0.08em;
  border-bottom-color: var(--c-indigo);
}
.data-table tbody tr:nth-child(even) { background: rgba(216, 212, 203, 0.45); }

/* ---------- 14. 面包屑 ---------- */
.breadcrumb { padding: 14px 0; border-bottom: var(--line-slate); }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: var(--fs-1); letter-spacing: 0.12em; color: var(--c-moss);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb__item + .breadcrumb__item::before { content: "／"; color: var(--c-copper); }
.breadcrumb__link { border-bottom: 1px solid transparent; transition: color 0.18s var(--ease), border-color 0.18s var(--ease); }
.breadcrumb__link:hover { color: var(--c-indigo); border-bottom-color: var(--c-copper); }

/* ---------- 15. 长文容器 ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-5); margin-top: 2em; }
.prose h3 { font-size: var(--fs-4); margin-top: 1.6em; }
.prose ul li { position: relative; padding-left: 1.5em; }
.prose ul li + li { margin-top: 0.5em; }
.prose ul li::before {
  content: ""; position: absolute;
  left: 0; top: 0.95em; width: 9px; height: 1px;
  background: var(--c-copper);
}
.prose blockquote {
  border-left: 2px solid var(--c-clay);
  padding: 4px 0 4px 1.2em;
  color: var(--c-moss);
}
.prose a { border-bottom: 1px solid var(--c-copper); }

/* ---------- 16. 图片容器 ---------- */
.img-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-slate);
  aspect-ratio: 4 / 3;
}
.img-frame > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04);
}
.img-frame--3x2 { aspect-ratio: 3 / 2; }
.img-frame--16x9 { aspect-ratio: 16 / 9; }
.img-frame--1x1 { aspect-ratio: 1 / 1; }
.img-frame--4x5 { aspect-ratio: 4 / 5; }
.img-frame__caption {
  margin: 10px 0 0;
  font-size: var(--fs-1); letter-spacing: 0.1em;
  color: var(--c-moss);
}
.img-frame__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--c-night); color: var(--c-snow);
  font-size: var(--fs-1); letter-spacing: 0.18em;
  padding: 6px 13px;
}

/* ---------- 17. 进入视口动效 ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-rule] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s ease-out;
}
.js [data-rule].is-in { transform: scaleX(1); }

/* ---------- 18. 窄屏细调 ---------- */
@media (max-width: 900px) {
  .masthead__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand brand"
      "season cta";
    row-gap: 10px;
    padding: 16px 0 14px;
  }
  .masthead__brand { grid-area: brand; justify-content: flex-start; }
  .masthead__left { grid-area: season; }
  .masthead__right { grid-area: cta; }
  .brand__name { font-size: var(--fs-5); }
  .brand__note { display: none; }
  [data-header].is-condensed .brand__name { font-size: var(--fs-4); }
}

@media (max-width: 640px) {
  .top-strip__season { font-size: 11px; letter-spacing: 0.02em; }
  .top-strip__label { display: none; }
  .top-strip__phone .num { font-size: var(--fs-1); }
  .btn { padding: 9px 14px; font-size: var(--fs-1); }
  .lede { font-size: var(--fs-3); }
}

/* ---------- 19. 尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-rule] { opacity: 1; transform: none; }
}