/* =========================================================
   Matison Workforce — 公司官网共享样式
   设计语言：米色杂志风（与 promote/official 宣传册一致）
   ========================================================= */

:root {
  --bg: #ede8e0; --bg-2: #e2dbd1; --ink: #1a1a1a; --ink-2: #5a5a5a;
  --accent: #8a8178; --line: #b8b0a4;
  --f-serif: "Playfair Display", "Noto Serif SC", Georgia, serif;
  --f-sans: "Jost", "Noto Sans SC", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 72px; } /* sticky header 高度，锚点跳转不被遮住 */
body { background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-weight: 300; line-height: 1.8; }
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 48px; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- header / nav ---------- */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgba(237, 232, 224, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.mast { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; gap: 24px; }
/* 页头品牌：图形标 + Playfair 字标并置。
   图形标只给 height，宽度由 SVG 比例自适应（width:auto 覆盖 HTML 的 width 属性）；
   视觉重心比字标略低，故用 margin-bottom 微调基线对齐。 */
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; }
.brand-mark { height: 21px; width: auto; margin-bottom: 2px; transition: transform 0.25s ease; }
.brand:hover .brand-mark { transform: translateY(-1px); }
.brand-wm { display: inline-block; }
.brand .dot { color: var(--accent); }
nav.primary { display: flex; align-items: center; gap: 34px; }
nav.primary a {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: 4px 0;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
nav.primary a:hover { color: var(--ink); }
nav.primary a.active { color: var(--ink); border-bottom-color: var(--ink); }
nav.primary a.nav-cta {
  color: var(--bg); background: var(--ink); padding: 10px 22px; border-bottom: none;
}
nav.primary a.nav-cta:hover { background: #000; color: var(--bg); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); padding: 9px 14px; cursor: pointer; }

/* ---------- hero（首页第一屏） ---------- */
.kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; color: var(--accent); text-transform: uppercase; margin-bottom: 40px; }
h1 { font-family: var(--f-serif); font-weight: 600; font-size: 56px; line-height: 1.32; margin-bottom: 30px; }
h1 em, h2 em, .page-hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.home-hero .sub { font-size: 14px; letter-spacing: 0.3em; color: var(--ink-2); margin-bottom: 46px; }
.divider { width: 60px; height: 1px; background: var(--ink); margin: 0 auto 46px; }
/* text-wrap: balance —— 窄视口折行时两行长度均分，避免第二行只剩一两个孤字 */
.home-hero p.value { font-family: var(--f-serif); font-size: 18px; max-width: 640px; margin: 0 auto; color: var(--ink-2); text-wrap: balance; }
.home-hero p.value strong { color: var(--ink); font-weight: 600; }
/* .nb 把「可运行、可训练、可审计、」锁成整体，折行只能发生在它前后 */
.home-hero p.value .nb { white-space: nowrap; }
.hero-actions { margin-top: 52px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* ---------- 内页页头 ---------- */
.page-hero { padding: 84px 0 64px; text-align: center; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: 44px; margin-bottom: 22px; }
.page-hero .lede { max-width: 640px; margin: 0 auto; font-size: 15.5px; color: var(--ink-2); }

/* ---------- stats band ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 46px 24px 40px; border-right: 1px dashed var(--line); text-align: center; }
.stat:last-child { border-right: none; }
.stat .label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 16px; min-height: 44px; }
.stat .label .src { font-size: 11px; color: var(--accent); }
.stat .value { font-family: var(--f-sans); font-weight: 500; font-size: 40px; line-height: 1; }
.stat .value .unit { font-size: 15px; font-weight: 300; color: var(--ink-2); margin-left: 2px; }
.stat .delta { font-family: var(--f-mono); font-size: 11px; margin-top: 14px; color: var(--accent); display: block; }
.stats .foot { font-family: var(--f-mono); font-size: 10.5px; color: var(--accent); padding: 4px 0 22px; text-align: center; }

/* ---------- generic section ---------- */
.section { padding: 88px 0; }
.section.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { text-align: center; margin-bottom: 20px; }
.sec-no { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--accent); display: block; margin-bottom: 14px; }
h2 { font-family: var(--f-serif); font-weight: 600; font-size: 36px; line-height: 1.35; text-align: center; }
h2 em { font-style: italic; font-weight: 400; }
.section .lede { max-width: 620px; margin: 0 auto 52px; font-size: 15.5px; color: var(--ink-2); text-align: center; }
.section .lede strong, .note strong { color: var(--ink); font-weight: 500; }
.note { max-width: 620px; margin: 48px auto 0; font-size: 15.5px; color: var(--ink-2); text-align: center; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { border: 1px solid var(--line); padding: 34px 32px 36px; background: var(--bg); }
.section.alt .card { background: var(--bg); }
.card .no { font-family: var(--f-serif); font-style: italic; font-size: 26px; color: var(--accent); margin-bottom: 16px; }
.card h3 { font-family: var(--f-serif); font-weight: 600; font-size: 19px; line-height: 1.5; margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--ink-2); }

/* ---------- steps (FDE) ---------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.step { border-left: 2px solid var(--line); padding: 6px 0 6px 24px; }
.step .n { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); }
.step h4 { font-family: var(--f-serif); font-weight: 600; font-size: 18px; margin: 6px 0 8px; }
.step p { font-size: 14px; color: var(--ink-2); }
.step .out { font-family: var(--f-mono); font-size: 11px; color: var(--accent); margin-top: 10px; display: block; }

/* ---------- comparison table ---------- */
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 auto; }
table.cmp caption { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; text-align: left; padding-bottom: 12px; }
table.cmp th, table.cmp td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; font-weight: 400; }
table.cmp td.lbl { color: var(--ink); }
table.cmp td.was { color: var(--ink-2); }
table.cmp td.now { font-weight: 500; }

/* ---------- case ---------- */
.case { padding: 82px 0; border-top: 1px solid var(--line); }
.case-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--accent); text-transform: uppercase; margin-bottom: 16px; }
.case h3 { font-family: var(--f-serif); font-weight: 600; font-size: 28px; line-height: 1.4; margin-bottom: 8px; }
.case .meta { font-size: 13px; color: var(--ink-2); margin-bottom: 34px; letter-spacing: 0.04em; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; margin-bottom: 40px; }
.case-block h5 { font-family: var(--f-serif); font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.case-block p { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.case-block ul { list-style: none; }
.case-block li { font-size: 13.5px; color: var(--ink-2); padding-left: 18px; position: relative; margin-bottom: 8px; line-height: 1.65; }
.case-block li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.modules { font-size: 13px; }
.modules div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.modules div span:first-child { flex: 0 0 96px; color: var(--ink); }
.modules div span:last-child { color: var(--ink-2); }

.industry-head { text-align: center; padding: 70px 0 10px; }
.industry-head .ind-no { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--accent); }
.industry-head h2 { font-size: 30px; margin-top: 10px; }

/* ---------- 案例预览卡（首页） ---------- */
.case-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-preview {
  border: 1px solid var(--line); background: var(--bg); padding: 30px 28px 32px;
  text-decoration: none; display: flex; flex-direction: column;
  transition: background 0.2s, transform 0.2s;
}
.case-preview:hover { background: var(--bg-2); transform: translateY(-3px); }
.case-preview .cp-tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; }
.case-preview h3 { font-family: var(--f-serif); font-weight: 600; font-size: 17px; line-height: 1.5; margin-bottom: 12px; }
.case-preview .cp-metric { font-family: var(--f-sans); font-weight: 500; font-size: 32px; line-height: 1.1; margin-top: auto; }
.case-preview .cp-metric .unit { font-size: 14px; font-weight: 300; color: var(--ink-2); margin-left: 2px; }
.case-preview .cp-note { font-family: var(--f-mono); font-size: 10.5px; color: var(--accent); margin-top: 10px; }
.case-preview .cp-more { font-family: var(--f-serif); font-style: italic; font-size: 14px; color: var(--ink); margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }

/* ---------- CTA ---------- */
.cta { border-top: 1px solid var(--line); padding: 88px 0 96px; text-align: center; }
.cta h2 { margin-bottom: 22px; }
.cta p { color: var(--ink-2); max-width: 600px; margin: 0 auto 22px; }
.cta ul { list-style: none; max-width: 560px; margin: 0 auto 38px; text-align: left; }
.cta li { font-size: 14px; color: var(--ink-2); padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid var(--line); }
.cta li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); font-size: 20px; line-height: 1; }
.btn {
  display: inline-block; font-family: var(--f-sans); font-weight: 400; font-size: 13.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--bg); background: var(--ink);
  padding: 17px 46px; text-decoration: none; transition: background 0.2s;
}
.btn:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 16px 45px; }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- contact card ---------- */
.contact-card { max-width: 560px; margin: 64px auto 0; border: 1px solid var(--line); background: var(--bg-2); padding: 44px 40px 40px; position: relative; }
.contact-card::before { content: "CONTACT"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 18px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.38em; color: var(--accent); }
.contact-card .cc-lead { font-family: var(--f-serif); font-size: 16px; color: var(--ink-2); margin-bottom: 30px; text-align: center; }
.contact-card .cc-lead em { color: var(--ink); }
.contact-card .cc-grid { display: flex; justify-content: center; align-items: stretch; }
.contact-card .cc-item { padding: 0 36px; text-align: center; }
.contact-card .cc-item + .cc-item { border-left: 1px solid var(--line); }
.cc-label, .hc-label { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.contact-card a, .hero-contact a { font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.2s; }
.contact-card a:hover, .hero-contact a:hover { border-bottom-color: var(--ink); }
.contact-card .cc-note { margin-top: 28px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--accent); text-align: center; }

.hero-contact { margin-top: 56px; display: flex; justify-content: center; align-items: stretch; }
.hero-contact .hc-item { padding: 4px 40px; text-align: center; }
.hero-contact .hc-item + .hc-item { border-left: 1px solid var(--line); }

/* ---------- 联系页 ---------- */
.contact-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-panel { border: 1px solid var(--line); background: var(--bg); padding: 40px 36px; }
.contact-panel h3 { font-family: var(--f-serif); font-weight: 600; font-size: 20px; margin-bottom: 20px; }
.contact-panel .row { padding: 16px 0; border-bottom: 1px dashed var(--line); }
.contact-panel .row:last-child { border-bottom: none; }
.contact-panel .row a { font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.contact-panel .row a:hover { border-bottom-color: var(--ink); }
.contact-panel .row .plain { font-size: 14px; color: var(--ink-2); }
.prep-list { list-style: none; }
.prep-list li { font-size: 14px; color: var(--ink-2); padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid var(--line); }
.prep-list li:last-child { border-bottom: none; }
.prep-list li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); font-size: 20px; line-height: 1; }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; }
/* 页脚品牌：完整 lockup 图（图形标 + MATISON AI 字标）。
   文字版留在 .sr-only 里，供读屏与无图降级；高度与原字标行等重，页脚栅格不变。 */
.foot-brand { margin-bottom: 16px; }
.foot-brand img { height: 52px; width: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.foot-grid p { font-size: 13px; color: var(--ink-2); max-width: 340px; }
.foot-col h6 { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin-bottom: 16px; }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 9px; }
.foot-col a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.foot-col a:hover { color: var(--ink); }
.foot-base { border-top: 1px solid var(--line); padding: 22px 0 30px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--accent); }
.foot-base .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  nav.primary {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--bg);
    border-bottom: 1px solid var(--line); padding: 8px 24px 20px;
  }
  nav.primary.open { display: flex; }
  nav.primary a { width: 100%; text-align: center; padding: 14px 0; border-bottom: 1px dashed var(--line); }
  nav.primary a.active { border-bottom: 1px dashed var(--line); color: var(--ink); }
  nav.primary a.nav-cta { margin-top: 14px; padding: 13px 0; }
  .nav-toggle { display: block; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 24px; }
  h1 { font-size: 38px; }
  .page-hero h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .stats .grid { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px dashed var(--line); }
  .cards, .cards.three, .steps, .case-grid, .case-previews, .contact-page-grid { grid-template-columns: 1fr; }
  .hero-contact, .contact-card .cc-grid { flex-direction: column; gap: 24px; }
  .hero-contact .hc-item + .hc-item, .contact-card .cc-item + .cc-item { border-left: none; border-top: 1px solid var(--line); padding-top: 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  table.cmp { display: block; overflow-x: auto; }
  .foot-brand img { height: 46px; }
}

/* 窄屏页头：图形标 + 字标 + Menu 三者同行，需要收一档字号与间距。 */
@media (max-width: 420px) {
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { height: 18px; }
}

/* =========================================================
   科技感微交互（数字滚动 / 打字机 / 墨线自绘）
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .tw { clip-path: inset(0 100% 0 0); }
  .tw.go { animation: tw-reveal 0.9s steps(20, end) forwards; }
  @keyframes tw-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
  .divider { transform: scaleX(0); transform-origin: center; transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.3, 1) 0.15s; }
  .divider.lined { transform: scaleX(1); }
  .step { position: relative; }
  .step::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 0; background: var(--ink); }
  .step.draw::before { height: 100%; transition: height 0.7s ease 0.1s; }
}

/* =========================================================
   首页三屏骨架（Phase 5A · 仅 index.html 使用）
   Hero(米白) → Team Space(深黑) → Selected Outcomes(米白) → Footer
   不用 position: fixed、不锁 body 滚动、不用 scroll-snap；
   高度用 svh，避免移动端地址栏引起 100vh 溢出。
   ========================================================= */
/* --header-h 必须 ≥ header.site 的实测高度，否则 .home-screen 会比视口高、
   打开首页时 Hero 底边被切出画面。实测 80.8px（20px×2 内边距 + 品牌行高 + 1px 描边），
   取 84px 留一点字体加载的余量。 */
:root { --header-h: 84px; }

.home-screen { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }

/* ---------- 第一屏：Hero（米白） ---------- */
.home-hero { text-align: center; padding: 72px 0 80px; background: var(--bg); }

/* ---------- 第二屏：Team Space（章节桥 + 中性象牙灰实时舞台） ---------- */
/* 页面米白不直接切到硬边舞台：先用一段编辑式章节桥过渡，再进舞台。
   舞台四周留 clamp(24px,3vw,48px) 呼吸位，只用极细描边，
   不做明显圆角、卡片阴影或玻璃拟态。 */
.home-team { min-height: auto; background: var(--bg); padding: 0; justify-content: flex-start; }

/* 章节桥 */
.team-bridge { padding: 104px 0 88px; text-align: center; background: var(--bg); }
.tb-no { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--accent); display: block; margin-bottom: 34px; }
.tb-lead { font-family: var(--f-serif); font-weight: 400; font-size: 30px; line-height: 1.62; letter-spacing: 0.02em; color: var(--ink); }
.tb-rule { width: 60px; height: 1px; background: var(--line); margin: 40px auto 34px; }
.tb-note { max-width: 560px; margin: 0 auto; font-size: 14.5px; line-height: 2.05; color: var(--ink-2); }

/* 舞台外壳：高度接近一屏，不占满、不吞滚动 */
.home-team-root {
  position: relative; flex: none;
  height: min(84svh, 900px); min-height: 520px;
  margin: 0 clamp(24px, 3vw, 48px) clamp(56px, 6vw, 96px);
  overflow: hidden;
  /* 成栈：把 .ts-vignette 的 multiply 关在舞台内部，不让它去乘页面底色
     （舞台未绘完 / 移动端 contain 留边时，backdrop 就不是画布了）。 */
  isolation: isolate;
  background: #d5d1ca;                       /* = LOOKDEV.stage.background，加载期不露白 */
  border: 1px solid rgba(26, 26, 26, 0.13);  /* 极细描边，无圆角无阴影 */
  font-family: var(--f-mono); font-weight: 300;
}
.ts-stage { position: absolute; inset: 0; }
.ts-stage canvas { display: block; width: 100%; height: 100%; }

/* 左上角压暗叠加（2026-08-14 定版，值来自 _bg-topleft-preview.html）。
   舞台顶点色只能给出「沿剖面 + 左右对称」的明暗，压不出一个偏向左上角的
   区域；这一层补的就是那个角，让标题坐得住。
   multiply + 纯黑半透 ⇒ 结果 = 底色 ×(1-α)，与预览页 canvas 的
   k = 1 - 0.05·weight 完全同式，因此预览所见即所得。
   形状 = 以左上角为心、半轴 32%×60% 的椭圆，α = 0.05·(1-smoothstep(d))；
   下面 8 个色标是这条 smoothstep 的分段线性拟合，最大偏差 <0.2 个码值。
   角上最深处 α=0.05 ≈ 压掉 13 个码值，出了椭圆完全归零、不碰画面其余部分。
   z-index 1：压在实时舞台与兜底图之上，标题 / 提示 / 履历轨（z=2）之下。 */
.ts-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: multiply;
  background: radial-gradient(ellipse 32% 60% at 0% 0%,
    rgba(0, 0, 0, 0.0500)   0%,
    rgba(0, 0, 0, 0.0470)  15%,
    rgba(0, 0, 0, 0.0392)  30%,
    rgba(0, 0, 0, 0.0287)  45%,
    rgba(0, 0, 0, 0.0176)  60%,
    rgba(0, 0, 0, 0.0078)  75%,
    rgba(0, 0, 0, 0.0014)  90%,
    rgba(0, 0, 0, 0)      100%);
}

/* 静态 fallback：始终 contain，五个人必须全在画面内（不用 5A 的 cover 中心裁切） */
.ts-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; background: #d5d1ca;
  transition: opacity 0.8s ease;
}
.ts-fallback.hide { opacity: 0; pointer-events: none; }

/* 加载状态：浅色舞台上用深色文字 */
.ts-loading {
  position: absolute; inset: 0; z-index: 3; background: #ede8e0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
.ts-loading.hide { opacity: 0; pointer-events: none; }
.ts-loading .box { font-size: 11px; letter-spacing: 0.24em; color: rgba(26, 24, 21, 0.62); min-width: 280px; }
.ts-loading .head { color: #1a1815; margin-bottom: 18px; }
.ts-loading .note { font-size: 10px; color: rgba(26, 24, 21, 0.34); margin-top: 18px; letter-spacing: 0.18em; }
.ts-loading-row { display: flex; justify-content: space-between; gap: 40px; line-height: 2.1; }
.ts-loading-row .ok { color: #4d6b3d; }
.ts-loading-row .bad { color: #a4483f; }

/* 左上角舞台标题：字体同页头 .brand 字标（Playfair 600 · 0.05em）。
   颜色 #76726c：原先取的是地面 MATISON 花体字呼吸中间档的实测屏显色 #a4a099，
   与左上角背景（约 #bdbab4）只差 20 来个码值，标题在浅色角落里立不住。
   2026-08-14 定版压深到 #76726c——色相沿原来那条中性暖灰线不变，只降明度，
   与加深后的左上角背景拉开约 60 个码值，同时不至于黑得像正文墨色。
   规线 rgba(26,24,21,0.28) 不动：它本来就比字重，跟着压会喧宾夺主。
   字号为 B-3 档：1680 视口下 ≈49px，随视口等比缩放；规线/间距用 em 跟随字号。
   选中人物时加 .recede 淡出让位（同 mvp 页 overlay 体例），返回全景淡回。 */
.ts-title {
  position: absolute; top: 40px; left: 46px; z-index: 2; pointer-events: none;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(28px, 2.95vw, 50px); line-height: 1.26; letter-spacing: 0.05em;
  color: #76726c;
  transition: opacity 0.5s ease;
}
.ts-title .rule { display: block; width: 1.26em; height: 1px; margin-top: 0.45em; background: rgba(26, 24, 21, 0.28); }
.ts-title.recede { opacity: 0; }

/* 右下角操作提示（2026-08-14 定版，选型见 _hint-br-preview.html 的方案 D）。
   原先左下角是一行 10px 全大写英文 CLICK AN ENGINEER：它只说得清「能点」，
   说不清点开之后能拖、能切人、怎么退，三件事都得靠用户自己撞出来。改成三行
   中文，自上而下按「点开 → 在里面能做什么 → 怎么切/怎么退」的顺序排。
   字体走 var(--f-sans)（Jost + 思源黑）：拉丁与数字落 Jost，汉字落思源黑。
   舞台外壳 .home-team-root 强制了等宽体，这里必须显式改回来。
   字号用 vw 而不是定值，同 .ts-title 的体例：选型是在 1678px 参考画幅上定的
   （15.5px），而真实舞台宽 = 视口 - 2×clamp(24,3vw,48)，1440 视口下只有
   1354px。定值 15.5px 在那里会占到舞台宽的 22%，比定稿时看到的 18.2% 明显胖。
   0.89vw 正是 15.5/1678 这个比例换算到视口口径的结果（实测校准过），
   于是任何视口下提示块都稳定占舞台宽的 18.2%。
   上限 15.5px：约在 1740 视口封顶，不让宽屏上越长越大（同 .ts-title 封顶体例）。
   位置在右下角而不是左下角：左下是地面 MATISON 花体字标的收尾，右下是空地。
   代价是与右侧履历轨（452px）同侧 —— 所以沿用 .show 的显隐节奏，只在全景
   状态出现，选中人物随即淡出，两者不会打架。 */
.ts-hint {
  position: absolute; right: 50px; bottom: 36px; z-index: 2; pointer-events: none;
  margin: 0; padding: 0; list-style: none; text-align: right;
  font-family: var(--f-sans); font-weight: 300;
  font-size: clamp(11px, 0.89vw, 15.5px); line-height: 2.3; letter-spacing: 0.17em;
  color: rgba(26, 24, 21, 0.62);
  opacity: 0; transition: opacity 0.6s ease;
}
.ts-hint.show { opacity: 1; }
.ts-status {
  position: absolute; left: 32px; bottom: 26px; z-index: 4; max-width: 60%;
  font-size: 10px; letter-spacing: 0.2em; line-height: 1.9; color: rgba(26, 24, 21, 0.5);
}
.ts-status[hidden] { display: none; }

/* 右侧履历信息轨：absolute 于 section 内（独立预览页是 fixed，首页不能沿用） */
/* 宽度 452px 由「核心竞争力每条必须单行」反推:最长一条需 371px 内容宽,
   加 72px 左右内边距 = 443px,取 452 留 9px 余量。这个数还被 computeFocus()
   用来算聚焦机位的横移量 —— 改宽度等于改五个人的定帧,必须重新看图。 */
.ts-hud {
  position: absolute; top: 0; right: 0; bottom: 0; width: 452px; z-index: 2;
  padding: 44px 40px 32px 32px; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: linear-gradient(to left, rgba(240, 237, 231, 0.94), rgba(240, 237, 231, 0.72) 62%, rgba(240, 237, 231, 0));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border-left: 1px solid rgba(26, 26, 26, 0.10);
  color: rgba(26, 24, 21, 0.72);
  opacity: 0; transform: translateX(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; overflow-y: auto; overscroll-behavior: contain;
}
.ts-hud.show { opacity: 1; transform: none; pointer-events: auto; }
.ts-hud::-webkit-scrollbar { width: 0; }
.ts-hud .hud-code { font-size: 10px; letter-spacing: 0.34em; color: rgba(26, 24, 21, 0.42); }
/* 人名行:人名大字 + 职位小字基线对齐同一行。展示名一律单词,双词名会把
   职位挤到下一行(见 team-space-config.js 的说明)。 */
.ts-hud .hud-namerow { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin: 16px 0 14px; }
.ts-hud .hud-name { font-family: var(--f-serif); font-weight: 600; font-size: 32px; line-height: 1.1; letter-spacing: 0.03em; text-align: left; color: var(--ink); margin: 0; }
.ts-hud .hud-role { font-size: 11px; letter-spacing: 0.2em; line-height: 1.4; color: rgba(26, 24, 21, 0.66); white-space: nowrap; }
/* 头衔四行:紧跟人名、不加小标题 —— 它读起来是名字的延续。 */
.ts-hud .hud-titles { list-style: none; margin: 0; padding: 0; }
.ts-hud .hud-titles li { font-size: 10px; letter-spacing: 0.2em; line-height: 2; color: rgba(26, 24, 21, 0.58); }
.ts-hud .hud-rule { height: 1px; background: rgba(26, 26, 26, 0.14); margin: 20px 0; }
.ts-hud .hud-label { font-size: 9.5px; letter-spacing: 0.34em; color: rgba(26, 24, 21, 0.38); margin-bottom: 12px; }
/* 核心竞争力:比头衔深一档、破折号起头,与上面那组浅灰短行拉开层级。
   悬挂缩进只在万一折行时起作用 —— 正常情况下每条都是单行(面板宽度即由此反推)。 */
.ts-hud .hud-strengths { list-style: none; margin: 0; padding: 0; }
.ts-hud .hud-strengths li { font-size: 11px; letter-spacing: 0.1em; line-height: 1.85; color: rgba(26, 24, 21, 0.82); padding-left: 11px; text-indent: -11px; }
.ts-hud .hud-strengths li + li { margin-top: 5px; }
.ts-hud .hud-strengths li::before { content: "— "; color: rgba(26, 24, 21, 0.3); }
.ts-hud .hud-bio { margin: 0; font-size: 11px; line-height: 1.9; letter-spacing: 0.055em; color: rgba(26, 24, 21, 0.58); }
.ts-hud .hud-flag { margin-top: 16px; font-size: 9px; letter-spacing: 0.28em; color: rgba(26, 24, 21, 0.34); }
.ts-hud .hud-flag[hidden] { display: none; }
.ts-hud .hud-foot { margin-top: auto; padding-top: 34px; }
.ts-hud .hud-nav { display: flex; gap: 8px; margin-bottom: 20px; }
.ts-hud .hud-nav button {
  flex: 1; appearance: none; background: none; cursor: pointer;
  border: 1px solid rgba(26, 26, 26, 0.18); border-radius: 0;
  padding: 8px 0; font: inherit; font-size: 9.5px; letter-spacing: 0.16em;
  color: rgba(26, 24, 21, 0.55);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.ts-hud .hud-nav button:hover:not(:disabled) { color: var(--ink); border-color: rgba(26, 26, 26, 0.45); }
.ts-hud .hud-nav button.active { color: #f0ede7; background: rgba(26, 24, 21, 0.82); border-color: rgba(26, 24, 21, 0.82); }
.ts-hud .hud-nav button:disabled { opacity: 0.4; cursor: default; }
.ts-hud .hud-back {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: 0.28em;
  color: rgba(26, 24, 21, 0.6); transition: color 0.25s;
}
.ts-hud .hud-back:hover { color: var(--ink); }
.ts-hud :focus-visible { outline: 1px solid rgba(26, 24, 21, 0.55); outline-offset: 3px; }

@media (max-width: 1180px) {
  /* 窄屏下 452px 会吃掉近四成舞台,退到 400px;代价是最长的一两条核心竞争力
     会折行(悬挂缩进接住)。桌面宽屏才是「每条单行」的目标画幅。 */
  .ts-hud { width: 400px; padding: 34px 28px 26px 22px; }
  .ts-hud .hud-name { font-size: 27px; }
  /* .ts-hint 不用在这里收：它的 0.89vw 已经跟着舞台一起缩，比例恒定。 */
}

/* ---------- 第三屏：Selected Outcomes + CTA（米白） ---------- */
.home-outcomes { text-align: center; padding: 88px 0 92px; background: var(--bg); border-top: 1px solid var(--line); }
.home-outcomes .sec-head { margin-bottom: 24px; }
.home-outcomes .lede { max-width: 620px; margin: 0 auto 60px; font-size: 15.5px; color: var(--ink-2); }
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outcome-item { padding: 44px 24px 40px; border-right: 1px dashed var(--line); }
.outcome-item:last-child { border-right: none; }
.oi-metric { font-family: var(--f-sans); font-weight: 500; font-size: 46px; line-height: 1; }
.oi-metric .unit { font-size: 17px; font-weight: 300; color: var(--ink-2); margin-left: 2px; }
.oi-label { font-size: 13px; color: var(--ink-2); margin-top: 16px; line-height: 1.7; }
.oi-src { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--accent); margin-top: 12px; }
.outcome-foot { font-family: var(--f-mono); font-size: 10.5px; color: var(--accent); margin-top: 22px; }

@media (max-width: 760px) {
  /* 移动端允许内容自然增高，不为强制一屏裁切文字 */
  .home-screen { min-height: 0; }
  .home-hero { padding: 64px 0 68px; }

  /* 第二屏移动端：本轮不做实时三维（不下载 GLB、不初始化 Three.js）。
     专用静态构图 —— 按原图 16:9 铺满宽度并整幅 contain，
     五个人全部可见，不沿用 5A 的中心裁切。 */
  .team-bridge { padding: 72px 0 56px; }
  .tb-lead { font-size: 23px; line-height: 1.66; }
  .tb-rule { margin: 30px auto 26px; }
  .tb-note { font-size: 13.5px; line-height: 1.95; }
  .home-team-root {
    height: auto; min-height: 0; aspect-ratio: 1680 / 945;
    margin: 0 20px clamp(44px, 9vw, 64px);
  }
  .ts-fallback { position: relative; height: auto; }
  .ts-hud, .ts-loading, .ts-hint, .ts-title { display: none; }
  .ts-status { position: static; max-width: none; padding: 10px 2px 0; }

  .home-outcomes { padding: 72px 0 76px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-item { border-right: none; border-bottom: 1px dashed var(--line); padding: 34px 12px 30px; }
  .outcome-item:last-child { border-bottom: none; }
  .oi-metric { font-size: 40px; }
}

/* ---------- 第二屏 · 移动端履历卡（≤760px，由 loader 动态挂载） ----------
   桌面端履历在 .ts-hud（实时三维内）；移动端不初始化三维（Phase 5B），
   静帧全景之下渲染五人切换条 + 履历卡，文案与桌面 HUD 同源。
   字体规格镜像 .ts-hud 各区块，落在纸面底色上、字号按触屏放大半档。
   桌面宽度下整块隐藏：旋屏/拖宽进入桌面端时三维接管，本区自动退场。 */
.ts-mobile { display: none; }

@media (max-width: 760px) {
  .home-team-root[data-ts-mobile="on"] { margin-bottom: 18px; }
  .ts-mobile { display: block; margin: 0 20px clamp(44px, 9vw, 64px); font-family: var(--f-mono); font-weight: 300; }

  /* 切换条：横向滚动不折行，视觉同 .nav-toggle / 页头导航的等宽体语言 */
  .tsm-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
  .tsm-tabs::-webkit-scrollbar { display: none; }
  .tsm-tab {
    flex: none; background: none; border: 1px solid var(--line);
    font-family: var(--f-mono); font-weight: 300; font-size: 10.5px; letter-spacing: 0.16em;
    color: var(--ink-2); padding: 10px 14px; cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
  }
  .tsm-tab .no { color: var(--accent); margin-right: 7px; transition: color 0.2s; }
  .tsm-tab.active { color: var(--bg); background: var(--ink); border-color: var(--ink); }
  .tsm-tab.active .no { color: rgba(237, 232, 224, 0.55); }

  /* 履历卡：区块自上而下 = 编号 / 人名行 / 头衔 / 分隔线 / 竞争力 / 分隔线 / 正文 */
  .tsm-card { border: 1px solid var(--line); margin-top: 14px; padding: 26px 22px 30px; }
  .tsm-code { font-size: 10px; letter-spacing: 0.34em; color: rgba(26, 24, 21, 0.42); }
  .tsm-namerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
  .tsm-name { font-family: var(--f-serif); font-weight: 600; font-size: 27px; line-height: 1.1; letter-spacing: 0.03em; color: var(--ink); margin: 0; }
  .tsm-role { font-size: 11px; letter-spacing: 0.2em; color: rgba(26, 24, 21, 0.66); white-space: nowrap; }
  /* 头衔：紧跟人名不加小标题（同 HUD 体例）。字距比 HUD 收一档，
     换来最长头衔在 320px 内容宽下也尽量单行；折行由 line-height 接住。 */
  .tsm-titles { list-style: none; margin: 14px 0 0; padding: 0; }
  .tsm-titles li { font-size: 10.5px; letter-spacing: 0.12em; line-height: 1.95; color: rgba(26, 24, 21, 0.58); }
  .tsm-rule { height: 1px; background: rgba(26, 26, 26, 0.14); margin: 20px 0; }
  .tsm-label { font-size: 9.5px; letter-spacing: 0.34em; color: rgba(26, 24, 21, 0.38); margin-bottom: 12px; }
  .tsm-strengths { list-style: none; margin: 0; padding: 0; }
  .tsm-strengths li { font-size: 11.5px; letter-spacing: 0.08em; line-height: 1.85; color: rgba(26, 24, 21, 0.82); padding-left: 12px; text-indent: -12px; }
  .tsm-strengths li + li { margin-top: 6px; }
  .tsm-strengths li::before { content: "— "; color: rgba(26, 24, 21, 0.3); }
  .tsm-bio { margin: 0; font-size: 12px; line-height: 2; letter-spacing: 0.05em; color: rgba(26, 24, 21, 0.6); }
  .tsm-flag { margin-top: 16px; font-size: 9px; letter-spacing: 0.28em; color: rgba(26, 24, 21, 0.34); }
}

/* 切换履历时卡片内容轻推入场；系统关动效则直接切换 */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .tsm-body.in { animation: tsm-in 0.35s ease both; }
  @keyframes tsm-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
  }
}

/* =========================================================
   首页第一屏 · 入场编排 + 活字轮换（Phase 6 · 仅 index.html）
   定稿前在实验页里比过三个方案（活字轮换 / 呼吸纸面 / 终端信号条），
   选定活字轮换后实验页已删除，落地实现就是本段 + main.js 的 hero 模块。

   两个开关都由 index.html <head> 的内联脚本负责：
     armed —— 只有允许动效时才加，隐藏初态才生效；
     go    —— DOMContentLoaded 触发编排，另有 2s 兜底撤销 armed。
   放在 <head> 而不是 main.js，是因为一旦 main.js 加载失败，
   隐藏初态会把整个首屏文字永久藏起来——这是不能接受的失败模式。

   动效只用 transform / opacity / clip-path，不触发布局回流，
   也不与第二屏 GLB 的加载抢带宽（无新增请求、无 canvas）。
   ========================================================= */

/* ---------- 入场编排：六个元素拆成 ~1.6s 时间轴 ---------- */
.armed .home-hero [data-seq] { opacity: 0; }
.armed .home-hero.go [data-seq] { animation: seq-rise 0.9s cubic-bezier(0.22, 0.9, 0.28, 1) forwards; }
@keyframes seq-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.armed .home-hero.go .sub          { animation-delay: 0.78s; }
.armed .home-hero.go p.value       { animation-delay: 1.12s; }
.armed .home-hero.go .hero-actions { animation-delay: 1.32s; }

/* kicker 用打字机而非上浮，沿用站内既有的 mono 小标签语言。
   注意：main.js 的通用 .tw 观察器已把 .home-hero 内的 kicker 排除，
   否则两套动画会互相打架。 */
.armed .home-hero.go .kicker { animation: seq-type 1s steps(24, end) 0.15s forwards; }
@keyframes seq-type {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 -2% 0 0); }
}

/* h1 逐行「压印」：外层遮罩 + 内层从下推出，像印刷落版，不是整块淡入。
   padding/margin 的 0.14em 是给 Playfair 的降部留的，否则被遮罩切掉。 */
h1 .ln { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
h1 .ln > i { display: block; font-style: normal; }
.armed .home-hero h1 .ln > i { transform: translateY(115%); }
.armed .home-hero.go h1 .ln > i { animation: seq-press 1.05s cubic-bezier(0.16, 0.9, 0.24, 1) forwards; }
.armed .home-hero.go h1 .ln:nth-child(1) > i { animation-delay: 0.34s; }
.armed .home-hero.go h1 .ln:nth-child(2) > i { animation-delay: 0.48s; }
@keyframes seq-press { from { transform: translateY(115%); } to { transform: none; } }

/* sub：字距从松收紧，像镜头合焦 */
.armed .home-hero.go .sub { animation-name: seq-track; animation-duration: 1.1s; }
@keyframes seq-track {
  from { opacity: 0; letter-spacing: 0.62em; }
  to   { opacity: 1; letter-spacing: 0.3em; }
}

/* divider 复用既有的墨线自绘，只是改由入场时序驱动（同样已从 main.js 的观察器排除） */
.armed .home-hero .divider { transform: scaleX(0); transform-origin: center; }
.armed .home-hero.go .divider { animation: seq-rule 0.85s cubic-bezier(0.25, 0.8, 0.3, 1) 0.98s forwards; }
@keyframes seq-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 本文件上方那条通用规则（no-preference 段）会把 hero 的 divider 也压成 scaleX(0)，
   而它现在不再由 main.js 加 .lined。一旦 armed 被 2s 兜底撤销，必须能自己站回来，
   否则首屏会缺一条分隔线。 */
html:not(.armed) .home-hero .divider { transform: none; }

/* ---------- 指针视差(--px/--py) 与 滚动交接(--sy/--so) ----------
   两者合成到同一个 transform，避免互相覆盖；变量由 main.js 写入。 */
.home-hero { position: relative; overflow: hidden; }
.hero-inner {
  --px: 0px; --py: 0px; --sy: 0px; --so: 1;
  transform: translate3d(var(--px), calc(var(--py) + var(--sy)), 0);
  opacity: var(--so);
}

/* ---------- 下滚钩子已移除：第一屏到第二屏只留空白，靠 hero 上浮淡出 + 章节桥标题交接 ---------- */

/* ---------- 活字轮换：h1 的 em 每 4s 由墨帘擦过换词 ----------
   静止时仍是完整一句话，语义不受损。
   宽度由 main.js 量好后过渡，否则居中标题会左右抽搐。 */
.swap { position: relative; display: inline-block; vertical-align: baseline; white-space: nowrap; }
.swap .swap-w { display: inline-block; transition: width 0.52s cubic-bezier(0.3, 0.8, 0.3, 1); }
/* 收起态必须是显式值：从 inset(0 100% 0 0) 过渡到 none 是不会有动画的 */
.swap .swap-t { display: inline-block; white-space: nowrap; clip-path: inset(0 -2% 0 0); transition: clip-path 0.42s cubic-bezier(0.5, 0, 0.2, 1); }
.swap.wipe-out .swap-t { clip-path: inset(0 0 0 100%); }
.swap.wipe-in  .swap-t { clip-path: inset(0 100% 0 0); transition: none; }
/* 槽位暗示：词下方一道极淡短墨线 */
.swap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.14em;
  height: 1px; background: var(--line); opacity: 0.55;
}
/* 墨帘本体：一道细墨条扫过换词的位置 */
.swap-curtain {
  position: absolute; top: -0.06em; bottom: -0.06em; left: 0; width: 2px;
  background: var(--ink); opacity: 0; pointer-events: none;
}
.swap.sweeping .swap-curtain { animation: swap-sweep 0.84s cubic-bezier(0.5, 0, 0.2, 1); }
@keyframes swap-sweep {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 0.55; }
  50%  { left: 100%; opacity: 0.55; }
  88%  { left: 0;    opacity: 0.35; }
  100% { left: 0;    opacity: 0; }
}