/* ==========================================================================
   Barry · Working Archive —— 全站样式
   设计系统：纸白 / 墨黑 / 中性灰 + 唯一强调色砖橙 #b03a0f
   无圆角、无阴影、无渐变、无毛玻璃。秩序来自 12 栏网格与统一的尺度；
   「混乱」只出现在被允许的地方：首屏桌面静物、一枚邮戳、作品格的错位。
   ========================================================================== */

/* ---------- 0. 设计变量 ---------- */
:root {
  /* 颜色：纸白是「白」的材质呈现，灰阶全部取自墨色，强调色只有一个 */
  --paper: #f4f1ea;
  --paper-2: #ebe7de;      /* 标本衬纸、图片占位 */
  --ink: #1a1916;
  --muted: #57534b;        /* 正文次级，对纸白 6.78:1 */
  --faint: #635e56;        /* 注释、元信息，对纸白 5.7:1，别再调浅 */
  --rule: #cdc7bb;         /* 细线 */
  --accent: #b03a0f;       /* 砖橙：序号、动作、一处收束色块 */
  --on-accent: #f4f1ea;

  /* 字体：系统衬线 + 系统无衬线 + 等宽，不引入 Web Font */
  --serif: 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* 字号阶梯：标签 12 → 正文 17 → 标题按 vw 收放，最小可读 12px */
  --fs-label: 12px;
  --fs-small: 14px;
  --fs-body: 17px;
  --fs-lead: clamp(18px, 1.25vw, 20px);
  --fs-h3: clamp(22px, 1.9vw, 28px);
  --fs-h2: clamp(36px, 4.4vw, 64px);
  --fs-display: clamp(40px, 5vw, 80px);

  /* 间距阶梯：8 的倍数 */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --section: clamp(96px, 10vw, 152px);

  /* 网格 */
  --max: 1440px;
  --pad: clamp(20px, 4.6vw, 72px);
  --gutter: clamp(16px, 1.8vw, 28px);
  --nav-h: 72px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 1. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--paper);
  /* 纸面纹理放在背景层，不叠在内容之上，不参与合成 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 var(--fs-body)/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body.menu-open, body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 400; text-wrap: pretty; }
ol, ul { list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html:lang(en) h1, html:lang(en) h2 { text-wrap: balance; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1200; background: var(--accent); color: var(--on-accent); padding: 12px 16px; font: var(--fs-small) var(--sans); }
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- 2. 通用部件 ---------- */

/* 标签：等宽大写，全站唯一的小字层级 */
.label, .folio, .inner-kicker, .eyebrow {
  font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }

/* 数字等宽：章节号、数据、页脚在并排与滚动时不左右抖动 */
.folio-no, .serial, .work-no, .index-row .number, .growth-facts strong, .case-facts strong, .site-footer, .hero-bottom, .film-label, .publish-stages b { font-variant-numeric: tabular-nums; }
.label-no, .folio-no, .serial { color: var(--accent); }

/* 页眉条（folio）：编号 + 栏目名 + 一句中文，压在一根墨线上 */
.folio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--ink);
}
.folio-name { color: var(--ink); }
.folio-note { margin-left: auto; text-transform: none; letter-spacing: .02em; font-family: var(--sans); }

.eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.eyebrow > span:not(.serial) { text-transform: none; letter-spacing: .02em; font-family: var(--sans); }

/* 标题里的 em：首屏和收束用砖橙，其他区块只用灰阶区分第二行 */
h1 em, h2 em { font-style: normal; }
h2 em { color: var(--muted); }
.hero h1 em, .home-contact h2 em, .contact-page h1 em { color: var(--accent); }

/* 按钮与文字链接 */
.button-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0 var(--sp-3);
  background: var(--accent);
  color: var(--on-accent);
  font: 500 16px/1 var(--sans);
  letter-spacing: .02em;
  transition: color .35s var(--ease);
}
/* 悬停：墨色从左向右扫入，箭头前移；按下时轻微下沉 */
.button-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.button-link:hover::before, .button-link:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.button-link span { font-size: 18px; transition: transform .45s var(--ease); }
.button-link:hover span { transform: translateX(4px); }
.button-link:active { transform: translateY(1px); }
.button-invert { background: var(--on-accent); color: var(--ink); }
.button-invert:hover, .button-invert:focus-visible { color: var(--on-accent); }

.quiet-link, .text-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
  font: 500 var(--fs-small)/1.3 var(--sans);
  transition: color .3s var(--ease);
}
/* 下划线：悬停时先向右收走，再从左重新画出 */
.quiet-link::after, .text-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform-origin: left; }
.quiet-link:hover::after, .text-arrow:hover::after { animation: redraw .6s var(--ease); }
@keyframes redraw { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.text-arrow span { color: var(--accent); transition: transform .4s var(--ease); }
.quiet-link:hover, .text-arrow:hover { color: var(--accent); }
.text-arrow:hover span { transform: translate(3px, -3px); }

/* 边注：一条砖橙竖线 + 斜体衬线，全站用法一致 */
.margin-note {
  padding-left: var(--sp-2);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink);
}

/* 标本（plate）：真实界面一律装进衬纸里，左上角挂「真实界面」标签 */
/* y2 Vox 测绘十字刻度：四角 1.5px 极细标尺，悬停变砖橙 */
.has-reticle {
  position: relative;
}
.has-reticle::before,
.has-reticle::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  z-index: 3;
  transition: border-color .25s var(--ease);
}
.has-reticle::before {
  top: -1px;
  left: -1px;
  border-top: 1.5px solid var(--rule);
  border-left: 1.5px solid var(--rule);
}
.has-reticle::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1.5px solid var(--rule);
  border-right: 1.5px solid var(--rule);
}
.has-reticle:hover::before,
.has-reticle:hover::after {
  border-color: var(--accent);
}

/* 证据微标：等宽小标签，标明产物状态 */
.work-badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .08em;
  color: var(--faint);
  margin-bottom: 6px;
  text-transform: uppercase;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.work-card:hover .work-badge {
  border-color: var(--accent);
  color: var(--accent);
}

.plate {
  position: relative;
  display: block;
  padding: clamp(8px, 1vw, 14px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.plate img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; background: var(--paper); }
.plate-tag {
  position: absolute;
  left: clamp(8px, 1vw, 14px);
  top: 0;
  transform: translateY(-50%);
  padding: 3px 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
a.plate, button.plate { transition: border-color .3s var(--ease), background-color .3s var(--ease); }
a.plate:hover, button.plate:hover { border-color: var(--accent); }
a.plate:hover .plate-tag, button.plate:hover .plate-tag { border-color: var(--accent); color: var(--accent); }

/* 主题视觉（首页图片）：不装衬纸，直接出血到栏宽；点击进入项目档案看真实界面 */
.art-link { position: relative; display: block; overflow: hidden; background: var(--paper-2); }
.art-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.art-link:hover img { transform: scale(1.03); }
.art-no { position: absolute; left: 0; top: 0; padding: 6px 10px; background: var(--paper); color: var(--muted); font: 500 var(--fs-label) var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* 图注：一行，左右两端 */
figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: 10px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* 区块的通用骨架 */
.section { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: var(--section) var(--pad) 0; }
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-4);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section-head .folio { grid-column: 1 / -1; }
.section-head h2 {
  grid-column: 1 / span 7;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.section-lead { grid-column: 9 / -1; display: grid; gap: var(--sp-2); padding-bottom: 6px; }
.section-lead p { color: var(--muted); font-size: var(--fs-body); line-height: 1.7; max-width: 34em; }
.section-lead .art-note { font: 13px/1.6 var(--sans); color: var(--faint); }

/* 出场动效：只在 JS 就绪后隐藏，失败时内容照常可见 */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 图片加载失败：保留占位，不塌陷 */
img.image-missing { min-height: 160px; background: var(--paper-2); color: transparent; }

/* ---------- 3. 顶栏 ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.wordmark { display: inline-flex; align-items: center; font: 400 30px/1 var(--serif); letter-spacing: -.04em; }
.wordmark-dot { color: var(--accent); }
.wordmark small {
  margin-left: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--rule);
  font: 500 11px/1.45 var(--mono);
  letter-spacing: .12em;
  color: var(--faint);
}
.main-nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); font: 500 var(--fs-small)/1 var(--sans); letter-spacing: .04em; }
.main-nav a { position: relative; padding: 14px 0; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
/* 语言：分段切换，墨色滑块跟随当前语言 */
.lang-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-right: -8px; border-bottom: 1px solid var(--rule); }
.lang-toggle button { position: relative; z-index: 1; min-width: 44px; min-height: 40px; padding: 0 8px; font: 500 var(--fs-label) var(--mono); letter-spacing: .06em; color: var(--faint); transition: color .35s var(--ease); }
.lang-toggle button[aria-pressed="true"] { color: var(--ink); }
.lang-thumb { position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--ink); transition: transform .45s var(--ease); }
.lang-toggle[data-active="en"] .lang-thumb { transform: translateX(100%); }
.lang-toggle button:not([aria-pressed="true"]):hover { color: var(--accent); }

/* 作品：链接 + 展开箭头 */
.nav-work { display: inline-flex; align-items: center; gap: 2px; }
.nav-caret { display: inline-grid; place-items: center; width: 28px; height: 44px; }
.nav-caret span { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease); }
.nav-caret[aria-expanded="true"] span { transform: translateY(2px) rotate(225deg); }
.nav-caret:hover { color: var(--accent); }

/* 作品下拉面板：贴着顶栏展开，九个项目三列排开 */
.work-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 99; background: var(--paper); border-bottom: 1px solid var(--ink); }
.work-panel:not([hidden]) { animation: panel-in .45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.work-panel-inner { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: var(--sp-4) var(--pad) var(--sp-3); display: grid; gap: var(--sp-3); }
.work-panel-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--rule); }
.work-panel-list a { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-1); padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); transition: padding .4s var(--ease); }
.work-panel-list b { font: 500 var(--fs-label)/1.9 var(--mono); color: var(--faint); }
.work-panel-list strong { display: block; font: 400 19px/1.3 var(--serif); }
.work-panel-list small { display: block; margin-top: 4px; font: 13px/1.45 var(--sans); color: var(--faint); }
.work-panel-list a:hover, .work-panel-list a:focus-visible { padding-left: var(--sp-1); }
.work-panel-list a:hover strong { color: var(--accent); }
.work-panel-all { justify-self: start; }

/* 智能顶栏：向下读时收起，向上滚时回来 */
.site-head { transition: transform .5s var(--ease), border-color .3s; }
.site-head.is-hidden { transform: translateY(-100%); }

.head-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.head-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.menu-toggle, .mobile-menu { display: none; }

/* ---------- 4. 首页 · 01 开场 ---------- */
.hero { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  min-height: clamp(520px, calc(100svh - var(--nav-h) - 208px), 664px);
  padding-block: var(--sp-6) var(--sp-5);
}
.hero-copy { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 2; }
.hero-kicker { margin-bottom: var(--sp-3); }

/* 双城实时现场连续叙事锚点：HCMC ↔ NYG */
.twin-datum {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: var(--sp-3);
  padding: 5px 12px;
  background: rgba(235, 231, 222, 0.7);
  border: 1px solid var(--rule);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .08em;
  color: var(--faint);
  max-width: 100%;
}
.datum-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.datum-beacon {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: datumPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes datumPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .3; transform: scale(.7); }
}
.datum-city {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .12em;
}
.datum-coords {
  color: var(--muted);
}
.datum-time {
  color: var(--ink);
  font-weight: 600;
  background: var(--paper);
  padding: 1px 4px;
  border: 1px solid var(--rule);
}
.datum-tz {
  font-size: 10px;
  color: var(--faint);
}
.datum-sep {
  color: var(--accent);
  font-weight: 600;
}
.datum-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--rule);
  color: var(--accent);
  font-size: 10px;
}
.datum-live-dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
}

.hero h1 { font-size: var(--fs-display); line-height: 1.12; letter-spacing: -.02em; }
html:lang(en) .hero h1 { letter-spacing: -.03em; line-height: 1.04; }
.hero-intro { max-width: 30em; margin-top: var(--sp-4); font-size: var(--fs-lead); line-height: 1.75; color: var(--muted); }
.hero-fold-wrap { margin-top: var(--sp-2); }
.hero-fold-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  font: 500 var(--fs-label) var(--mono);
  letter-spacing: .12em;
  color: var(--accent);
  cursor: pointer;
  transition: color .2s var(--ease);
}
.hero-fold-btn:hover {
  color: var(--ink);
}
.hero-fold-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  transition: transform .25s var(--ease);
}
.hero-fold-btn[aria-expanded="true"] .hero-fold-icon {
  transform: rotate(180deg);
}
.hero-fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .38s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease;
}
.hero-fold.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.hero-fold__inner {
  overflow: hidden;
}
.hero-fold__note {
  max-width: 32em;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--accent);
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  background: rgba(235, 231, 222, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .hero-fold { transition: none; }
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); }

.hero-art { grid-column: 8 / -1; grid-row: 1; position: relative; }
.world-map { position: relative; aspect-ratio: 1000 / 979; transition: transform .8s var(--ease); }
.globe-image { width: 100%; mix-blend-mode: multiply; }
.hero-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.route-orbit { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 9; opacity: .75; }
.route-link { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 4 6; }
.route-stop { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.route-stop.is-home { fill: var(--accent); stroke: var(--paper); }
.route-plane { fill: var(--accent); }
.map-label {
  position: absolute;
  padding: 3px 6px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
/* 标签贴在航点左侧：香港 (81.2%, 41.4%)，胡志明市 (78.7%, 48.2%)，坐标即地球图像素 / 图宽高 */
.label-hkg { right: calc(18.8% + 12px); top: 41.4%; transform: translateY(-50%); }
.label-sgn { right: calc(21.3% + 12px); top: 48.2%; transform: translateY(-50%); }
.postmark {
  position: absolute;
  top: 2%;
  right: 0;
  display: grid;
  place-items: center;
  gap: 6px;
  width: 136px;
  padding: 16px 10px 12px;
  border: 1px solid var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  background: var(--paper);
  color: var(--accent);
  font: 500 10px/1.35 var(--mono);
  letter-spacing: .12em;
  text-align: center;
  transform: rotate(6deg);
}
.postmark b { font-weight: 500; font-size: 11px; padding-top: 6px; border-top: 1px solid var(--accent); }
.postmark small { font-size: 9px; letter-spacing: .14em; }

/* 桌面静物带：首页唯一的「混乱」，各件物品轻微旋转、层叠 */
.hero-scene {
  position: relative;
  isolation: isolate;
  height: clamp(300px, 34vw, 520px);
  overflow: hidden;
  background: var(--paper-2);
}
.scene-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.scene-object { position: absolute; z-index: 1; max-width: none; pointer-events: none; transform: rotate(var(--r, 0deg)); transform-origin: center bottom; }
.scene-cup { left: 1%; top: 10%; width: 11%; z-index: 2; --r: -3deg; }
.scene-laptop { left: 7%; top: 4%; width: 44%; z-index: 3; --r: -1deg; }
.scene-archive { left: 39%; top: 8%; width: 35%; z-index: 4; --r: -1deg; }
.scene-film { right: 10%; top: 3%; width: 19%; z-index: 5; --r: 2deg; }
.scene-passport { right: 5%; bottom: -4%; width: 25%; z-index: 6; --r: -5deg; }
.scene-paperwork { left: 24%; bottom: -10%; width: 40%; z-index: 7; --r: 2deg; }

.hero-bottom {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  font: 500 var(--fs-label) var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-bottom-rule { flex: 1; height: 1px; background: var(--rule); }
.hero-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); white-space: nowrap; }
.hero-bottom a:hover { color: var(--ink); }

/* ---------- 5. 首页 · 02 精选作品 ---------- */
/* 三行镜像节奏：6+3+3 / 4+4+4（中间下沉）/ 3+3+6 */
.work-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(48px, 5vw, 80px);
  align-items: start;
}
.work-card { position: relative; display: block; min-width: 0; }
.work-card:nth-child(1) { grid-column: 1 / span 6; }
.work-card:nth-child(2) { grid-column: 7 / span 3; }
.work-card:nth-child(3) { grid-column: 10 / span 3; }
.work-card:nth-child(4) { grid-column: 1 / span 4; }
.work-card:nth-child(5) { grid-column: 5 / span 4; margin-top: var(--sp-6); }
.work-card:nth-child(6) { grid-column: 9 / span 4; }
.work-card:nth-child(7) { grid-column: 1 / span 3; }
.work-card:nth-child(8) { grid-column: 4 / span 3; }
.work-card:nth-child(9) { grid-column: 7 / span 6; }
.work-card:nth-child(10) { grid-column: 1 / span 4; }
.work-card:nth-child(11) { grid-column: 5 / span 4; margin-top: var(--sp-6); }
.work-card:nth-child(12) { grid-column: 9 / span 4; }

.work-image { position: relative; display: block; overflow: hidden; background: var(--paper-2); }
.work-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.work-card:nth-child(1) .work-image img, .work-card:nth-child(9) .work-image img { aspect-ratio: 4 / 3; }
.work-card:nth-child(2) .work-image img, .work-card:nth-child(3) .work-image img, .work-card:nth-child(7) .work-image img, .work-card:nth-child(8) .work-image img { aspect-ratio: 2 / 3; }
.work-card:hover .work-image img { transform: scale(1.035); }

.work-caption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--ink);
}
.work-no { font: 500 var(--fs-label)/1.9 var(--mono); color: var(--faint); }
.work-caption strong { display: block; word-break: keep-all; overflow-wrap: break-word; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -.01em; }
.work-caption small { display: block; margin-top: 6px; font: 13px/1.5 var(--sans); color: var(--faint); }
.work-caption i { font: normal 18px/1.4 var(--sans); color: var(--accent); transition: transform .4s var(--ease); }
.work-card:hover .work-caption i { transform: translate(3px, -3px); }
.work-card:hover strong { color: var(--accent); }

.archive-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  margin-top: clamp(64px, 7vw, 104px);
  border-block: 1px solid var(--ink);
  font: 400 var(--fs-h3) var(--serif);
  transition: color .3s var(--ease), padding .5s var(--ease);
}
.archive-link b { font: normal 22px var(--sans); color: var(--accent); }
.archive-link:hover { color: var(--accent); padding-inline: var(--sp-2); }

/* ---------- 6. 首页 · 03 品牌增长 ---------- */
.growth-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  align-items: start;
}
.growth-shot { grid-column: 1 / span 7; }
.growth-story { grid-column: 9 / -1; display: grid; gap: var(--sp-4); padding-top: var(--sp-1); }
.growth-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--ink); }
.growth-facts div { padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; }
.growth-facts div + div { padding-left: var(--sp-2); border-left: 1px solid var(--rule); }
.growth-facts strong { display: block; font: 400 clamp(32px, 3vw, 44px)/1 var(--serif); letter-spacing: -.03em; color: var(--accent); white-space: nowrap; }
.growth-facts .slash { color: var(--rule); padding: 0 2px; }
.growth-facts .unit { font: 500 12px var(--mono); margin-left: 4px; color: var(--faint); letter-spacing: 0; }
.growth-facts span:not(.slash):not(.unit) { display: block; margin-top: var(--sp-1); font: 13px/1.4 var(--sans); color: var(--faint); }
.growth-copy { color: var(--muted); }
.featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.featured .film-art img { aspect-ratio: 21 / 9; }
.publish-stages { display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: none; }
.publish-stages li { position: relative; display: grid; gap: 6px; padding-top: var(--sp-2); border-top: 1px solid var(--rule); font: 13px/1.4 var(--sans); }
.publish-stages li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--accent); }
.publish-stages b { font: 500 11px var(--mono); color: var(--accent); letter-spacing: .08em; }

.film-strip { margin-top: clamp(80px, 9vw, 136px); }
.film-label {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--ink);
}
.film-label > span:nth-child(2) { font: 400 var(--fs-lead) var(--serif); color: var(--ink); text-transform: none; letter-spacing: 0; }
.film-label > span:last-child { text-align: right; }
.film-art img { aspect-ratio: 21 / 8; object-position: center 50%; }

/* ---------- 7. 首页 · 04 产品标本 ---------- */
.specimens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 48px) var(--gutter);
  align-items: start;
}
.specimen:nth-child(2) { margin-top: var(--sp-7); }

/* 05 产品区：两列 + 居中第三项，避免与 04 的三列同构 */
@media (min-width: 901px) {
  .specimens--pair { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(56px, 5vw, 88px); }
  .specimens--pair .specimen:nth-child(1) { grid-column: 1 / span 6; margin-top: 0; }
  .specimens--pair .specimen:nth-child(2) { grid-column: 7 / span 6; margin-top: 0; }
  .specimens--pair .specimen:nth-child(3) { grid-column: 4 / span 6; margin-top: 0; }
}
.specimen h3 { margin-top: var(--sp-3); font-size: var(--fs-h3); line-height: 1.2; }
.specimen-sub { margin-top: 6px; font: 500 var(--fs-label) var(--mono); letter-spacing: .06em; color: var(--faint); }
.specimen > p:not([class]) { margin-top: var(--sp-2); color: var(--muted); font-size: 16px; max-width: 34em; text-wrap: pretty; }
.specimen-note { margin-top: var(--sp-2); padding-top: var(--sp-1); border-top: 1px solid var(--rule); font: 13px var(--sans); color: var(--accent); }
.specimen-note::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--accent); vertical-align: 1px; }

/* 纯代码活体母题：实时报数与合规状态条 */
.specimen-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--sp-2) 0 4px;
  padding: 4px 8px;
  background: rgba(235, 231, 222, 0.6);
  border-left: 2px solid var(--accent);
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .06em;
  color: var(--faint);
}
.specimen-live .live-val {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}
.specimen-live .live-pulse {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: datumPulse 1.8s infinite;
}

/* 航线测绘十字准星与文字标签 */
.route-reticle { stroke: var(--paper); stroke-width: 1.5; fill: none; opacity: .85; }
.route-reticle.is-home { stroke: var(--accent); stroke-width: 1.8; }
.route-telemetry { fill: var(--paper); font: 500 11px/1 var(--mono); letter-spacing: .12em; }
.telemetry-text { fill: var(--accent); font: 600 11px/1 var(--mono); }


/* ---------- 8. 首页 · 05 晚霞预报 ---------- */
.systems-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  align-items: start;
}
.sunset-proof { grid-column: 1 / span 8; position: relative; }
.sunset-proof img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 45%; }
.sun-route { position: absolute; left: 0; right: 0; top: 0; width: 100%; aspect-ratio: 2 / 1; height: auto; pointer-events: none; }
.sun-route path { fill: none; stroke: var(--paper); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
.sun-route circle { fill: var(--accent); stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.system-side { grid-column: 9 / -1; display: grid; gap: var(--sp-4); }
.answer-legend { display: grid; border-top: 1px solid var(--ink); }
.answer-legend li { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; border-bottom: 1px solid var(--rule); font: 15px var(--sans); }
.answer-legend i { width: 12px; height: 12px; flex: none; border: 1.5px solid var(--ink); }
.answer-legend li:nth-child(1) i { background: var(--accent); border-color: var(--accent); }
.answer-legend li:nth-child(2) i { background: var(--ink); }
.answer-legend b { font-weight: 400; }

/* ---------- 9. 首页 · 06 工作方法 ---------- */
/* 左图右步骤；步骤左侧一根竖轴随滚动填充砖橙 */
.method-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  align-items: start;
}
.method-photo { grid-column: 1 / span 6; grid-row: 1 / span 3; position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.method-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.method-note { grid-column: 8 / -1; }
.method-steps { grid-column: 8 / -1; position: relative; display: grid; padding-left: var(--sp-4); }
.method-axis { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.method-axis span { display: block; width: 2px; height: 100%; margin-left: -.5px; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.method-steps article { display: grid; gap: var(--sp-2); padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.method-steps article:first-of-type { padding-top: 0; }
.method-steps b { font: 500 var(--fs-label) var(--mono); color: var(--accent); letter-spacing: .1em; }
.method-steps h3 { font-size: var(--fs-h3); line-height: 1.25; }
.method-steps p { color: var(--muted); font-size: 16px; max-width: 28em; }
.method-more { grid-column: 8 / -1; justify-self: start; }

/* ---------- 10. 首页 · 07 收束 ---------- */
.home-contact { margin-top: var(--section); background: var(--accent); color: var(--on-accent); }
.home-contact-inner {
  max-width: calc(var(--max) + var(--pad) * 2);
  margin: 0 auto;
  padding: clamp(80px, 9vw, 136px) var(--pad);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  align-items: end;
}
.home-contact .folio { grid-column: 1 / -1; border-color: currentColor; color: inherit; }
.home-contact .folio-no, .home-contact .folio-name, .home-contact .folio-note { color: inherit; }
.home-contact h2 { grid-column: 1 / span 8; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.08; letter-spacing: -.02em; }
.home-contact h2 em { color: inherit; }
.home-contact-action { grid-column: 9 / -1; display: grid; gap: var(--sp-3); justify-items: start; }
.home-contact-action p { font-size: var(--fs-lead); line-height: 1.6; }

/* ---------- 11. 页脚 ---------- */
.site-footer {
  max-width: calc(var(--max) + var(--pad) * 2);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--pad);
  font: 500 var(--fs-label) var(--mono);
  letter-spacing: .08em;
  color: var(--faint);
}
.site-footer .wordmark { font-size: 26px; color: var(--ink); }
.site-footer > a:last-child { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.home-contact + .site-footer, main + .site-footer { border-top: 1px solid var(--rule); }
.footer-links { display: flex; align-items: center; gap: var(--sp-2); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--faint); transition: color .3s var(--ease); }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent); }
body[data-page="home"] .site-footer { border-top: 0; }

/* ---------- 12. 内页通用 ---------- */
/* 404：左文右图，沿用内页骨架 */
.not-found-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  align-items: center;
  margin: clamp(48px, 6vw, 88px) 0 clamp(48px, 5vw, 72px);
}
.not-found-copy { grid-column: 1 / span 6; display: grid; gap: var(--sp-4); align-content: start; }
.not-found-copy h1 { font-size: var(--fs-display); }
.not-found-lead { max-width: 34em; color: var(--muted); font-size: var(--fs-lead); line-height: 1.65; }
.not-found-art { grid-column: 8 / -1; }
.not-found-art img { width: 100%; height: auto; }

.inner-page { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: var(--sp-6) var(--pad) var(--section); }
.inner-kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ink);
}
.inner-kicker b { font-weight: 500; color: var(--accent); }
.page-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-3);
  align-items: end;
  margin: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
}
.page-head .inner-title { grid-column: 1 / span 7; }
.page-head .inner-lead { grid-column: 9 / -1; }
.inner-title { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.02em; }
.inner-lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); max-width: 32em; }

/* 作品索引 */
.index-page-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.index-page-layout > div:first-child { grid-column: 1 / span 7; }
.index-filters { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); margin-bottom: var(--sp-2); }
.index-filters button {
  min-height: 44px;
  font: 500 var(--fs-label) var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  position: relative;
  transition: color .3s;
}
.index-filters button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.index-filters button:hover { color: var(--ink); }
.index-filters sup { margin-left: 4px; font-size: 10px; color: var(--accent); vertical-align: super; }
.index-filters button.active { color: var(--ink); }
.index-filters button.active::after { transform: scaleX(1); }
.index-list { border-top: 1px solid var(--ink); }
.index-row a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.1fr) minmax(0, 1fr) 24px;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding .5s var(--ease), background-color .3s;
}
.index-row .number { font: 500 var(--fs-label) var(--mono); color: var(--faint); letter-spacing: .08em; }
.index-row strong { display: block; font: 400 var(--fs-h3)/1.25 var(--serif); }
.index-row small { display: block; margin-top: 6px; font: 13px var(--sans); color: var(--faint); }
.index-row .summary { font-size: 15px; line-height: 1.6; color: var(--muted); }
.index-row .arrow { color: var(--accent); font-family: var(--sans); text-align: right; transition: transform .4s var(--ease); }
.index-row a:hover, .index-row a:focus-visible { padding-left: var(--sp-2); }
.index-row a:hover strong { color: var(--accent); }
.index-row a:hover .arrow { transform: translate(3px, -3px); }
.index-preview { grid-column: 9 / -1; position: sticky; top: calc(var(--nav-h) + var(--sp-4)); margin-top: 60px; }
.index-preview figcaption { flex-direction: column; gap: 6px; }
.index-preview figcaption span:last-child { text-transform: none; font: 13px/1.6 var(--sans); letter-spacing: 0; }

/* 项目档案页 */
.case-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  align-items: end;
  margin: clamp(48px, 6vw, 88px) 0 clamp(48px, 5vw, 72px);
}
.case-header > div { grid-column: 1 / span 6; display: grid; gap: var(--sp-3); }
.case-header .inner-title { font-size: clamp(40px, 5vw, 76px); }
.case-visual { grid-column: 7 / -1; }
/* 真实画面按原始比例展示，不裁切证据 */
.case-visual img { width: 100%; height: auto; border: 1px solid var(--rule); background: var(--paper-2); }
.case-gallery .plate img { aspect-ratio: auto; height: auto; object-fit: initial; }
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--ink); }
.case-facts div { display: grid; gap: 6px; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
.case-facts div + div { padding-left: var(--sp-3); border-left: 1px solid var(--rule); }
.case-facts small { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--accent); }
.case-facts strong { font: 400 var(--fs-lead)/1.4 var(--serif); }
.case-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-7);
  margin-top: clamp(64px, 7vw, 112px);
  align-items: start;
}
.case-toc { grid-column: 1 / span 2; position: sticky; top: calc(var(--nav-h) + var(--sp-4)); display: grid; border-top: 1px solid var(--ink); }
.case-toc a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); font: 13px var(--sans); color: var(--muted); }
.case-toc a:hover { color: var(--accent); }
.case-story { grid-column: 4 / span 6; }
.case-story h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.2; margin: var(--sp-6) 0 var(--sp-3); }
.case-story h2:first-child { margin-top: 0; }
.case-story p { font-size: 18px; line-height: 1.85; color: var(--ink); max-width: 36em; }
.case-story .case-note { margin-top: var(--sp-5); padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left: 2px solid var(--accent); font-size: var(--fs-lead); }
.case-content > .case-note { grid-column: 10 / -1; display: grid; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--ink); font-size: 15px; }
.case-content > .case-note b { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: var(--sp-2); }
.case-content > .case-note b:first-child { margin-top: 0; }
.case-content > .case-note p { color: var(--ink); }
.case-content > .case-note .text-arrow { margin-top: var(--sp-2); justify-self: start; }
.case-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--gutter); }
.case-gallery .plate { grid-column: span 6; }
.case-gallery .plate:only-child { grid-column: 4 / span 6; }
.case-gallery button { cursor: zoom-in; text-align: left; }
.case-footer-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--section); border-top: 1px solid var(--ink); }
.case-footer-nav a { display: grid; gap: 6px; padding: var(--sp-3) 0; font: 400 var(--fs-h3)/1.3 var(--serif); }
.case-footer-nav a:last-child { text-align: right; border-left: 1px solid var(--rule); }
.case-footer-nav span { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.case-footer-nav a:hover { color: var(--accent); }

/* 关于 */
.about-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  align-items: end;
  margin: clamp(48px, 6vw, 88px) 0 var(--section);
}
.about-copy { grid-column: 1 / span 6; display: grid; gap: var(--sp-4); }
.about-copy h1 { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -.02em; }
.about-copy h1 em { color: var(--muted); }
.about-copy > p:not([class]) { font-size: var(--fs-lead); line-height: 1.75; color: var(--muted); max-width: 30em; }
.about-image { grid-column: 8 / -1; }
.about-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--ink); }
.about-grid article { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-3) var(--sp-4) 0 0; }
.about-grid b { font: 500 var(--fs-label) var(--mono); letter-spacing: .1em; color: var(--accent); }
.about-grid h2 { font-size: var(--fs-h3); line-height: 1.25; }
.about-grid p { color: var(--muted); font-size: 16px; max-width: 26em; }
.capability-list { margin-top: var(--section); }
.capability-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.capability-row b { font: 500 var(--fs-label) var(--mono); color: var(--accent); }
.capability-row h3 { font-size: var(--fs-h3); line-height: 1.25; }
.capability-row p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.capability-row .row-arrow { display: none; }

/* 联系 */
.contact-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-6);
  align-items: start;
}
.contact-page-copy { grid-column: 1 / span 7; }
.contact-label { margin-top: clamp(48px, 6vw, 88px); }
.contact-page h1 { margin-top: var(--sp-4); font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.02em; }
.contact-page .inner-lead { margin-top: var(--sp-4); }
.contact-topics-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-6); border-top: 1px solid var(--ink); }
.contact-topics-list span { padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); font: 500 var(--fs-label) var(--mono); letter-spacing: .08em; color: var(--muted); }
.contact-topics-list span:nth-child(odd) { padding-right: var(--sp-2); }
.contact-topics-list span:nth-child(even) { padding-left: var(--sp-2); border-left: 1px solid var(--rule); }
.contact-details { grid-column: 9 / -1; display: grid; gap: var(--sp-4); padding-top: clamp(48px, 6vw, 88px); }
.contact-details dl { border-top: 1px solid var(--ink); }
.contact-details dl > div { display: grid; gap: 4px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.contact-details dt { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.contact-details dd { font-size: var(--fs-lead); overflow-wrap: anywhere; }
.contact-details dd a { display: inline-flex; min-height: 36px; align-items: center; }
.contact-details dd a:hover { color: var(--accent); }
.contact-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 13. 移动菜单与灯箱 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--pad) var(--pad);
  background: var(--ink);
  color: var(--on-accent);
}
.lightbox[hidden] { display: none; }
.lightbox-top { display: flex; justify-content: space-between; align-items: center; font: 500 var(--fs-label) var(--mono); letter-spacing: .08em; }
.lightbox-top button { width: 48px; height: 48px; font: 28px/1 var(--sans); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }

/* ---------- 14. 平板 ≤1100 ---------- */
@media (max-width: 1100px) {
  :root { --fs-body: 16px; }
  .section-head h2 { grid-column: 1 / span 8; }
  .section-lead { grid-column: 9 / -1; }
  .hero-copy { grid-column: 1 / span 7; }
  .hero-art { grid-column: 8 / -1; }
  .postmark { width: 116px; padding: 12px 8px 10px; font-size: 9px; }
  .work-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .work-card:nth-child(1) { grid-column: 1 / -1; }
  .work-card:nth-child(n) .work-image img { aspect-ratio: 4 / 3; }
  .work-card:nth-child(1) .work-image img { aspect-ratio: 16 / 9; }
  .growth-shot { grid-column: 1 / span 7; }
  .growth-story { grid-column: 8 / -1; }
  .sunset-proof { grid-column: 1 / -1; }
  .system-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: start; }
  .system-side .margin-note { grid-column: 1 / -1; }
  .case-toc { display: none; }
  .case-story { grid-column: 1 / span 8; }
  .case-content > .case-note { grid-column: 9 / -1; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .case-facts div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ---------- 14b. 窄平板 ≤900 ---------- */
@media (max-width: 900px) {
  .growth-shot, .growth-story { grid-column: 1 / -1; }
  .growth-story { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: start; }
  .growth-story .margin-note, .growth-story .growth-facts { grid-column: 1 / -1; }
  .specimens { grid-template-columns: 1fr; gap: var(--sp-6); }
  .specimen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--gutter); align-content: start; }
  .specimen:nth-child(2) { margin-top: 0; }
  .specimen .art-link { grid-row: 1 / span 5; }
  .specimen h3 { margin-top: 0; }
  .method-photo { grid-column: 1 / span 5; }
  .method-note, .method-steps, .method-more { grid-column: 7 / -1; }
}

/* ---------- 15. 手机 ≤760 ---------- */
@media (max-width: 760px) {
  :root {
    --nav-h: 60px;
    --pad: 20px;
    --gutter: 16px;
    --fs-display: clamp(30px, 8.6vw, 44px);
    --fs-h2: clamp(30px, 8.2vw, 40px);
    --fs-h3: 22px;
    --section: 88px;
  }
  .wordmark { font-size: 26px; }
  .wordmark small { display: none; }
  .main-nav { display: none; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-left: var(--sp-2);
    font: 500 var(--fs-label) var(--mono);
    letter-spacing: .1em;
    position: relative;
    z-index: 102;
  }
  .menu-lines { position: relative; display: block; width: 20px; height: 10px; }
  .menu-lines span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), top .4s var(--ease); }
  .menu-lines span:first-child { top: 0; }
  .menu-lines span:last-child { top: 8.5px; }
  .menu-toggle b { font-weight: 500; margin-left: 0; }
  .menu-toggle[aria-expanded="true"] .menu-lines span:first-child { top: 4.25px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines span:last-child { top: 4.25px; transform: rotate(-45deg); }
  .work-panel, .nav-caret { display: none !important; }
  .mobile-menu:not([hidden]) {
    position: fixed;
    inset: var(--nav-h) 0 0;
    z-index: 101;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: var(--sp-4) var(--pad) calc(var(--sp-4) + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--ink);
    animation: menu-in .5s var(--ease);
  }
  @keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  .mobile-menu-links { display: grid; align-content: start; border-top: 1px solid var(--rule); }
  .mobile-menu-links a { display: flex; align-items: baseline; gap: var(--sp-2); min-height: 80px; padding-top: 20px; border-bottom: 1px solid var(--rule); font: 400 40px/1 var(--serif); animation: link-in .6s var(--ease) both; }
  .mobile-menu-links a:nth-child(2) { animation-delay: .06s; }
  .mobile-menu-links a:nth-child(3) { animation-delay: .12s; }
  @keyframes link-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .mobile-menu-links i { font: normal 500 var(--fs-label) var(--mono); color: var(--accent); }
  .mobile-menu-links a[aria-current="page"] span { color: var(--accent); }
  .mobile-menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ink); font: 14px var(--sans); }
  .mobile-menu-foot > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
  .folio-note { margin-left: 0; flex-basis: 100%; }
  .section-head { row-gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .section-head h2, .section-lead { grid-column: 1 / -1; }

  .hero-grid { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: var(--sp-5) var(--sp-4); }
  .twin-datum {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 10px;
    width: 100%;
    margin-bottom: var(--sp-2);
    box-sizing: border-box;
  }
  .twin-datum .datum-coords, .twin-datum .datum-tz { display: none; }
  .twin-datum .datum-status {
    width: 100%;
    margin: 0;
    padding: 4px 0 0;
    border-left: 0;
    border-top: 1px dashed var(--rule);
    justify-content: flex-start;
  }
  .hero-kicker { margin-bottom: var(--sp-3); }
  .hero-art { order: -1; width: 82%; align-self: flex-end; margin: 0 -8px var(--sp-2) 0; }
  .postmark { top: 0; left: -24%; right: auto; width: 104px; font-size: 8px; transform: rotate(-6deg); }
  .postmark b { font-size: 9px; }
  .postmark small { display: none; }
  .hero-intro { margin-top: var(--sp-3); }
  .hero-actions { margin-top: var(--sp-4); }
  .hero-scene { height: 62vw; min-height: 220px; }
  .scene-cup { display: none; }
  .scene-laptop { left: -2%; width: 52%; }
  .scene-archive { left: 38%; width: 40%; }
  .scene-film { right: 2%; width: 24%; }
  .scene-passport { right: -2%; width: 32%; }
  .scene-paperwork { left: 14%; width: 52%; }
  .hero-bottom { gap: var(--sp-2); }
  .hero-bottom > span:first-child, .hero-bottom-rule { display: none; }

  .work-mosaic { row-gap: var(--sp-5); }
  .work-card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .work-card:nth-child(n) .work-image img { aspect-ratio: 3 / 2; }

  .growth-shot, .growth-story { grid-column: 1 / -1; }
  .film-label { grid-template-columns: 1fr auto; }
  .film-label > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .film-art img { aspect-ratio: 3 / 2; }

  .specimen { display: block; }
  .specimen h3 { margin-top: var(--sp-3); }

  /* 移动端小字地板：功能信息 12px 起，11px 只留给装饰邮戳与地图标签 */
  .work-caption small, .specimen-sub, .specimen-note, .folio-note, .hero-bottom,
  .section-lead .art-note, .publish-stages b, .case-facts small, figcaption,
  .work-panel-list small, .index-row small { font-size: 12px; }
  .growth-story { grid-template-columns: 1fr; }

  .system-side { grid-template-columns: 1fr; }
  .sunset-proof img, .sun-route { aspect-ratio: 4 / 3; }

  .method-photo, .method-note, .method-steps, .method-more { grid-column: 1 / -1; grid-row: auto; position: static; }
  .method-photo img { aspect-ratio: 4 / 3; }
  .method-steps { padding-left: var(--sp-3); }

  .home-contact h2, .home-contact-action { grid-column: 1 / -1; }

  .site-footer { display: grid; justify-items: start; }
  .footer-links { flex-wrap: wrap; row-gap: 0; }

  .inner-page { padding-top: var(--sp-4); }
  .page-head .inner-title, .page-head .inner-lead { grid-column: 1 / -1; }
  .index-page-layout > div:first-child { grid-column: 1 / -1; }
  .index-preview { display: none; }
  .index-row a { grid-template-columns: 36px minmax(0, 1fr) 20px; row-gap: var(--sp-1); }
  .index-row .summary { grid-column: 2 / 3; grid-row: 2; }
  .index-row .arrow { grid-column: 3; grid-row: 1; }

  .case-header > div, .case-visual { grid-column: 1 / -1; }
  .case-header .inner-title { font-size: var(--fs-display); }
  .case-facts { grid-template-columns: 1fr; }
  .case-facts div:nth-child(n) { padding-left: 0; border-left: 0; }
  .case-facts div + div { border-top: 1px solid var(--rule); }
  .case-content { row-gap: var(--sp-6); }
  .case-story, .case-content > .case-note { grid-column: 1 / -1; }
  .case-story p { font-size: 17px; }
  .case-gallery .plate:nth-child(n) { grid-column: 1 / -1; }
  .case-footer-nav a { font-size: 18px; }

  .about-copy, .about-image { grid-column: 1 / -1; }
  .not-found-copy, .not-found-art { grid-column: 1 / -1; }
  .not-found-art { order: -1; width: 52%; justify-self: end; margin-top: var(--sp-2); }
  .not-found .featured-actions { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .not-found .featured-actions .button-link { justify-content: space-between; }
  .about-image img { aspect-ratio: 4 / 3; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid article { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
  .capability-row { grid-template-columns: 36px minmax(0, 1fr); row-gap: var(--sp-1); }
  .capability-row p { grid-column: 2; }
  .capability-row .row-arrow { display: none; }

  .contact-page-copy, .contact-details { grid-column: 1 / -1; }
  .contact-details { padding-top: 0; }
  .contact-topics-list { grid-template-columns: 1fr; }
  .contact-topics-list span:nth-child(n) { padding: var(--sp-2) 0; border-left: 0; }
}

@media (max-width: 380px) {
  .wordmark { font-size: 24px; }
  .hero-art { width: 92%; }
  .postmark { display: none; }
}

/* ---------- 15b. 原生 View Transitions 纸卷展读 ---------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 240ms cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 280ms cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-in;
}
@keyframes vt-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.996); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: scale(1.004); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- 16. 减少动态：保留淡入，去掉位移与循环 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .route-plane { display: none; }
  .world-map { transform: none !important; }
}

/* ---------- 17. 开场片：首页首访播一次，4.4s 后交给页面本身 ----------
   交接原理：片尾最后 0.27s 已经是纯纸面（与 body 同色、同 160px 纸纹），
   视频淡出时下面就是页面自己的纸白，所以看不见切换点。
   改片尾底色、给它加遮罩或渐变，都会把这层无缝破掉。 */
html.intro-on body { overflow: hidden; }
html.intro-on .site-head,
html.intro-on .hero { opacity: 0; }
html.intro-on .site-head { transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s; }
html.intro-on .hero { transition: opacity .5s var(--ease); }
html.intro-on.intro-out .site-head,
html.intro-on.intro-out .hero { opacity: 1; }

.site-intro {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.site-intro[hidden] { display: none; }
.site-intro__video { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .34s linear; }
.site-intro.is-out .site-intro__video { opacity: 0; }
.site-intro__skip {
  position: absolute; right: var(--pad); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  padding: 9px 14px;
  background: var(--paper); border: 1px solid var(--rule); color: var(--faint);
  font: 500 var(--fs-label) var(--mono); letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; animation: intro-skip-in .5s var(--ease) 1.4s forwards;
}
.site-intro__skip:hover { color: var(--ink); border-color: var(--ink); }
@keyframes intro-skip-in { to { opacity: 1; } }

/* ---------- 18. 打印：完整内容，黑白 ---------- */
@media print {
  @page { margin: 16mm; }
  :root { --paper: #fff; --paper-2: #fff; --accent: #000; --on-accent: #000; }
  body { background: #fff; color: #000; font-size: 11pt; overflow: visible; }
  .site-head, .skip-link, .mobile-menu, .menu-toggle, .lightbox, .hero-bottom, .head-progress, .work-panel { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .section, .inner-page, .hero { padding-top: 24px; }
  .hero-grid { min-height: 0; }
  .hero-scene { height: 360px; break-inside: avoid; }
  .work-card, .specimen, .plate, figure, .case-facts, .index-row { break-inside: avoid; }
  .home-contact { background: #fff; color: #000; border-top: 2px solid #000; }
  .button-link { border: 1px solid #000; background: #fff; color: #000; }
  .index-preview, .case-toc { position: static; }
  .work-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .work-card:nth-child(n) .work-image img { aspect-ratio: 3 / 2; }
  .specimens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .specimen { display: block; }
  .specimen:nth-child(2) { margin-top: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}