/* ============================================================
   DAK Collectibles | Site Stylesheet  v5
   a division of DAK Industrial
   ------------------------------------------------------------
   本文件是设计系统唯一来源。转 WP 时 :root 整段直接搬进主题 style.css。

   版本史（每一次都是被真实反馈推翻后重做的）
   v1  纯平近黑 + 满屏 1px 细线 + 等宽数字
        用户：不要有 AI 和程序员的审美，要有雕像手办级别的审美
        诊断：那是代码编辑器的视觉语言；首屏无作品图；暗得没有光
   v2  暗底当舞台：全幅作品图 + 渐变纵深 + 背后辉光
        用户：整个调性也太暗了吧
   v3  底改中性炭，金色收敛为点缀
        用户：这个配色怎么看起来这么难受
        诊断：底暖 + 字暖 + 强调暖 = 三层全暖，只有明暗对比没有色温对比
   v4  Cold Luxury：冷银铬 + 烟雾灰 + 单一冷蓝
        问题：仍是近黑 #0C0E11，读起来是黑色，不是一种颜色
   v5  本版。见下方四条。

   v5 的四条决定
   1. 一套配色，取消明暗双主题
      用户明确要求：不需要白色和黑色，不需要换颜色。
      技能（design-taste-frontend 第 4.11 节 Page Theme Lock）也要求
      页面只有一个主题、板块不反转。切换按钮与亮色主题整块删除。

   2. 「房 + 光」：冷青板岩做房间，铜做射灯
      底从近黑抬到 #1C2326（H198 S15% L13%），是一种看得见的颜色，
      不是黑。四级表面差值拉到 1.11 / 1.25 / 1.55，分区靠明度不靠边框。
      强调色换成铜 #CE9068（H24 S51%），全站唯一暖色。
      依据：雕像照片本身就是「暗场 + 暖轮廓光」，界面用同一个逻辑，
      整页像是被同一盏灯照着。美术馆也是冷房间配暖射灯。

   3. 圆角全站为 0
      仪表 / 量具 / 档案馆的语言。软圆角是消费级 App 的语言。

   4. 版式家族取代「三列等分卡片」
      原版 13 处 .grid--3 三列等分卡，是 AI 生成页面最著名的破绽。
      现用五族：bento（不等宽拼块）/ ledger（索引行）/ specs（规格卡）/
      kv（定义对，无框线）/ film（不等宽图带）。

   v5 另修：图片容器比例与素材比例对齐，全站零裁切
      素材只有两种比例：作品图 2:3 竖幅，工艺/厂房图 3:2 横幅。
      容器也只允许这两种。此前 4:3 与 1:1 容器会裁掉竖幅作品的 50%、
      横幅的 33%，作品的头会被切掉。见第 15 节。
   ============================================================ */
/* ---------- 0. 字体（自托管，不引第三方 CDN）----------
   Geist + Geist Mono（SIL OFL，可商用自托管）。
   v3 用的是 Inter , ,  这是 AI 生成页面的头号默认字体，已换掉。
   自托管而非 <link> 到 Google Fonts：离线可用、无第三方请求、
   无 GDPR 层面的字体 CDN 问题、少两次 DNS 解析。 */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 遮罩 / 渐隐 / 图注底衬都要「同底色、不同透明度」，
     写成 RGB 分量才能拼进 rgba(var(--veil), .9)。 */
  --veil:       28, 35, 38;

  /* 表面：冷青板岩，四级。差值刻意拉开，分区靠明度而不靠边框。
     与底的对比 1.11 / 1.25 / 1.55，肉眼分得出层次。 */
  --ink:        #1C2326;
  --ink-1:      #232B2F;
  --ink-2:      #2B3439;
  --ink-3:      #374248;

  /* 文字：四级。括号内为对 --ink 的对比度
     （AA 正文下限 4.5，AAA 7.0）。--muted 只给非文字元素用。 */
  --paper:      #E6E9E7;   /* 13.0:1  主文字 */
  --paper-2:    #B0B7B5;   /*  7.8:1  次级  */
  --paper-3:    #8A918F;   /*  5.0:1  弱化  */
  --muted:      #6A716F;   /*  3.2:1  非文字专用 */

  /* 金属细线 / 分隔 / 边框的冷银 */
  --chrome:     #C7CFCC;

  /* 强调色：只有一个，语义唯一 = 可交互（链接 / hover / focus / 主按钮）。
     铜 H24 S51%，与被点名的黄铜族 H38 差 14 度；底是冷青板岩，
     组合属于「暖锈 + 冷灰」，不是「米色 + 黄铜 + 浓咖啡」。
     对底 5.9:1；作实心按钮时压深字 6.2:1。 */
  --accent:     #CE9068;
  --accent-lo:  #B87E52;
  --accent-wash:rgba(206, 144, 104, .12);

  --line:       rgba(230, 233, 231, .10);
  --line-mid:   rgba(230, 233, 231, .18);
  --line-strong:rgba(230, 233, 231, .32);

  /* 射灯：作品背后与板块角落的暖光。克制，只在首屏 / 内页头 / 结尾 CTA */
  --stage:      rgba(206, 144, 104, .10);
  --shade:      rgba(0, 0, 0, .55);

  /* 间距刻度：4px 基准，10 档。所有间距必须来自这里，
     组件里不允许出现裸 px 值。 */
  --u-1:  4px;
  --u-2:  8px;
  --u-3:  12px;
  --u-4:  16px;
  --u-5:  24px;
  --u-6:  32px;
  --u-7:  48px;
  --u-8:  64px;
  --u-9:  96px;
  --u-10: 128px;

  /* 段落节奏（流式，只有三档） */
  --band-tight: clamp(36px, 4.5vw, 64px);
  --band:       clamp(56px, 7.5vw, 108px);
  --band-loose: clamp(84px, 11vw, 152px);

  /* 字号刻度：9 档 */
  --t-micro: 10.5px;   /* 极小标签 */
  --t-xs:    12px;     /* 元信息 */
  --t-sm:    13.5px;   /* 卡片正文 */
  --t-base:  15px;
  --t-md:    17px;     /* 正文 */
  --t-lg:    20px;     /* 导语 */
  --t-xl:    clamp(23px, 2.1vw, 30px);   /* h3 */
  --t-2xl:   clamp(28px, 3.1vw, 42px);   /* 板块 h2 */
  --t-3xl:   clamp(29px, 3.8vw, 46px);   /* 内页 h1 */
  --t-4xl:   clamp(28px, 3vw, 44px);     /* 首页 H1：13 个词，必须收在两行，
                                            且行尾不能压到画面的亮部主体上，
                                            所以上限比内页标题还略小。 */

  /* 行高三档 */
  --lh-tight: 1.06;
  --lh-mid:   1.35;
  --lh-body:  1.65;

  /* 圆角：全站 0。不做软圆角，不做胶囊。 */
  --r: 0px;

  --gut:  clamp(20px, 4vw, 56px);
  --maxw: 1280px;
  --readw: 62ch;

  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* 常驻滚动条槽位。放大层打开时要锁滚动（body overflow:hidden），
     没有这一行，滚动条消失会让整页横向跳 7~8px , ,
     而它正好发生在半透明蒙层下面被看见，就是那种"说不清哪里别扭"的抖动。 */
  scrollbar-gutter: stable;
}
html:focus-within { scroll-padding-top: 96px; }

body {
  margin: 0;
  /* position:relative 是给 JS 插入的 1px 哨兵元素做定位基准用的 , ,
     粘性页头靠观察它来切换，而不是监听 scroll 事件。 */
  position: relative;
  background: var(--ink);
  color: var(--paper);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* 已取消主题切换，因此不需要 background / color 的过渡 */
}

/* 极细颗粒：压住大面积暗底在低色深屏上的色带。
   只挂在 fixed + pointer-events:none 的伪元素上 , ,
   挂在滚动容器上会持续重绘、拖垮移动端帧率。 */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .018;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .32s var(--ease); }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 3. 排版 ---------- */
h1, h2, h3, h4 {
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -.036em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.18; letter-spacing: -.022em; }
h4 { font-size: var(--t-base); letter-spacing: -.006em; font-weight: 500; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* 标签式小字：全站唯一的小号大写字样式。
   注意：这是「眉标」，全站有严格配额（每 3 个板块最多 1 个），
   不是每个板块都能加。 */
.eyebrow {
  font-size: var(--t-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--paper-3);
  font-weight: 500;
  margin: 0 0 var(--u-5);
}

.label {
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-3);
  font-weight: 500;
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--paper-2);
  max-width: var(--readw);
  letter-spacing: -.011em;
}
.body  { color: var(--paper-2); max-width: var(--readw); }
.small { font-size: var(--t-sm); line-height: 1.62; }
.muted { color: var(--paper-3); }
.mono  { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
strong, b { font-weight: 600; color: var(--paper); }
em { font-style: normal; }

/* 大句 , ,  全站最多用几次，用来放一句值得被引用的话 */
.pull {
  font-size: clamp(21px, 2.5vw, 34px);
  line-height: 1.24;
  letter-spacing: -.028em;
  color: var(--paper);
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}
.pull--wide { max-width: 38ch; }

/* ---------- 4. 布局 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 860px; }

section { position: relative; }
.band        { padding-block: var(--band); }
.band--tight { padding-block: var(--band-tight); }
.band--loose { padding-block: var(--band-loose); }

/* 分带用极缓的明暗过渡代替硬分隔线，页面才有纵深 */
.band--raise { background: linear-gradient(180deg, var(--ink), var(--ink-1) 55%, var(--ink)); }

/* 板块头 , ,  纵向堆叠。**不做「左大标题 + 右侧漂浮小段落」的分栏头**：
   那种模式让一个板块有两个中心，读者不知道该看哪个。
   标题在上，正文在下，正文限宽 62ch。 */
.head { display: grid; gap: var(--u-5); }
.head h2 { max-width: 24ch; }
.head__body { max-width: var(--readw); }
.head--center { justify-items: center; text-align: center; }
.head--center h2, .head--center .head__body { margin-inline: auto; }

/* 双栏：**只在右栏承载真实视觉/元素时使用**。
   右栏若只是段落文字，请改用 .head 纵向堆叠。 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.split--top { align-items: start; }
.split--text-lead { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split--media-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split__sticky { position: sticky; top: 112px; align-self: start; }

.stack   { display: grid; gap: var(--u-5); }
.stack-6 { display: grid; gap: var(--u-6); }
.stack-7 { display: grid; gap: var(--u-7); }

/* ---------- 5. 版式家族 A：bento（不等宽拼块）----------
   「三个一模一样的卡片横排」是 AI 生成页面最著名的破绽，全站已清零。
   这里用 12 栏网格 + 不等跨度做出节奏：每个板块的格子大小都不一样，
   图片格与文字格交替，不是清一色描边白卡。 */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--u-4);
}
.bento > * { min-width: 0; }
.sp-3  { grid-column: span 3; }
.sp-4  { grid-column: span 4; }
.sp-5  { grid-column: span 5; }
.sp-6  { grid-column: span 6; }
.sp-7  { grid-column: span 7; }
.sp-8  { grid-column: span 8; }
.sp-12 { grid-column: span 12; }

.bcell {
  display: flex;
  flex-direction: column;
  gap: var(--u-5);
  padding: var(--u-6);
  background: var(--ink-1);
  border: 1px solid var(--line);
  transition: border-color .45s var(--ease), background .45s var(--ease);
}
.bcell:hover { border-color: var(--line-mid); background: var(--ink-2); }
.bcell h3 { margin: 0; }
.bcell p { color: var(--paper-2); font-size: var(--t-sm); line-height: 1.62; }
.bcell .link-arrow { margin-top: auto; }

/* 带图格：图顶格、文字在下，无内边距 */
.bcell--media { padding: 0; gap: 0; }
.bcell--media .bcell__txt {
  padding: var(--u-6);
  display: flex; flex-direction: column; gap: var(--u-4); flex: 1;
}
/* 拼块里的图用**固定高度**而不是固定比例。
   固定比例会让「跨 7 栏」的格子比「跨 5 栏」的高，同一行的文字基线就对不齐；
   固定高度 + object-fit 让跨度不同的格子文字仍然齐平，
   横向的节奏（7/5/5/7/6/6）才读得出来。
   选择器写成 .bcell--media .frame（两级）而不是单加一个 .frame--h 类：
   .frame 定义在本文件更靠后的位置，同权重下后者会覆盖前者。 */
.bcell--media .frame {
  aspect-ratio: 3 / 2;      /* 与工艺 / 厂房素材一致，零裁切 */
  border-width: 0 0 1px 0;
  flex: none;
}
.bcell--media .frame img {
  width: 100%; height: 100%; object-fit: cover;
  /* 与 .obs 的打码工艺图同一套色调 , ,  两处**必须同值**，否则同一张打码图
     在 bento 卡和普通工艺图位里会呈现两种亮度。参数跟素材绑定，换图须重测。 */
  filter: saturate(.95) contrast(1.06);
}

/* 跳到主内容 , ,  键盘用户与屏幕阅读器用户的第一站 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--accent); color: #1A2225;
  padding: 12px 20px; font-size: var(--t-sm);
}
.skip:focus { left: var(--gut); top: 10px; }
.bcell--tint { background: linear-gradient(155deg, var(--ink-2), var(--ink-1)); }
.bcell--plain { background: transparent; border-color: transparent; padding-inline: 0; }
.bcell--plain:hover { background: transparent; border-color: transparent; }

/* ---------- 6. 版式家族 B：ledger（索引行）----------
   用于「一组同类条目」：能力六项、买家类型、我们不做的事。
   一栏索引号、一栏标题、一栏说明，靠对齐和留白分区。
   **没有卡片、没有描边、没有阴影** —— 这是最能拉开与「三列卡片」距离的一族。 */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 0.85fr) minmax(0, 1.45fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: baseline;
  padding-block: var(--u-6);
  border-bottom: 1px solid var(--line);
}
.ledger > li:first-child { border-top: 1px solid var(--line); }
.ledger__i {
  font-family: "Geist Mono", ui-monospace, Consolas, monospace;
  font-size: var(--t-xs); color: var(--paper-3); letter-spacing: .04em;
}
.ledger__t { font-size: var(--t-xl); letter-spacing: -.022em; line-height: 1.18; }
.ledger__d { color: var(--paper-2); font-size: var(--t-base); line-height: 1.62; }
.ledger__d p + p { margin-top: var(--u-4); }
.ledger--wide > li { grid-template-columns: 3.25rem minmax(0, 0.7fr) minmax(0, 1.6fr); }

/* ---------- 7. 版式家族 C：specs（规格卡）----------
   用于「一组短规格」。原版是「每行一条下划线」的长表格 , ,
   那是最省事的做法，已被换掉。这里一规格一卡，两列排布。 */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.spec {
  background: var(--ink-1);
  padding: var(--u-6);
  display: grid;
  gap: var(--u-3);
  align-content: start;
}
.spec__k { font-size: var(--t-base); font-weight: 500; color: var(--paper); }
.spec__v { font-size: var(--t-sm); color: var(--paper-2); line-height: 1.6; }

/* ---------- 8. 版式家族 D：kv（定义对，无框线）----------
   用于「标签 → 值」的短列表。全站原本有 10 处这种表格，
   每行一条下划线。现在改成无框线的定义对，靠列对齐分区。 */
.kv { display: grid; gap: var(--u-5); margin: 0; }
.kv__row {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--u-5);
  align-items: baseline;
}
.kv__k {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-3); font-weight: 500; padding-top: 3px;
}
.kv__v { color: var(--paper); font-size: var(--t-base); line-height: 1.58; }
.kv__v .sub { display: block; color: var(--paper-3); font-size: var(--t-sm); margin-top: var(--u-1); }

/* ---------- 9. 版式家族 E：film（不等宽图带）----------
   原来三张图是等分的三列，读起来像图库缩略图。
   现在 5:4:3 不等宽，有主次，像一本画册的跨页。 */
.film {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--u-4);
  align-items: end;
}
.film--even { grid-template-columns: 4fr 4fr 4fr; }

/* 比较表 , ,  只在真正需要横向对比时用（如 CPC vs GCC 两条认证路径）。
   只有表头一条分隔线，**不做逐行下划线**，分组之间才加一条。 */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.cmp caption { text-align: left; padding-bottom: var(--u-5); color: var(--paper-3); font-size: var(--t-sm); }
.cmp th, .cmp td {
  text-align: left; vertical-align: top; line-height: 1.55;
  padding: var(--u-5) var(--u-5) var(--u-5) 0;
}
.cmp thead th {
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-3); font-weight: 500; padding-bottom: var(--u-4);
}
.cmp td { color: var(--paper-2); }
.cmp td:first-child { color: var(--paper); }
.cmp tbody tr + tr td { padding-top: var(--u-6); }
.cmp tbody tr.group-start td { border-top: 1px solid var(--line); padding-top: var(--u-6); }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 10. 页头 ---------- */
.hdr {
  position: sticky; top: 0; z-index: 900;
  background: rgba(var(--veil), .72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--line); background: rgba(var(--veil), .92); }

/* 导航桌面端必须一行，高度上限 72px */
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--u-5); height: 72px;
}

/* 品牌锁定：徽章 + 细线 + 两行字
   ------------------------------------------------------------
   徽章是金色细线稿（圆环描边占直径 2.34%）。实测：
     · 在 --ink #1C2326 上对比 5.36:1
     · **44px 是「dak」字样还能辨认的最小尺寸**，再小就只剩一个金色徽章形状
       （34px 已经很软，28px 基本读不出字）
     · 在纯白上只有 2.98:1，偏弱，见 06-品牌资产/README.md
   所以尺寸按断点**显式**给，不用流体 clamp , ,
   logo 的渲染尺寸应当可预测，而不是随手算出来是多少就是多少。

   2026-09-29 换源：原 160×113 的图缩到 44px 时，源里只剩 3px 的描边信息，
   线靠抗锯齿「猜」出来，发虚。换成 1960×1960 后同样显示 44px，线条变实。
   **但 2.34% 这个比例没变** —— 16px 下照样读不出字，这是设计比例的下限，不是分辨率问题。

   中间那条 1px 竖线（--line-mid）承担「图形 / 文字」的分隔：
   用空隙硬分在 72px 高的页头里会显得松散，一条细线更紧，
   也更像这套设计原本的量具语言。窄屏时省掉它。

   注意：徽章与 UI 强调色不是同一个金。
   徽章 #BB8846（H34，品牌文件给定，不动）；强调铜 #CE9068（H24）。
   差 10 度，同属暖族，但一个是「品牌的金属」、一个是「可交互的信号」，
   本来就不该是同一个值。 */
.brand { display: flex; align-items: center; gap: var(--u-4); }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__rule { width: 1px; height: 28px; flex: none; background: var(--line-mid); }
.brand__txt { display: flex; flex-direction: column; gap: 2px; }
.brand__name {
  font-size: var(--t-base); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--paper); white-space: nowrap;
}
.brand__sub {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-3);
  white-space: nowrap;
}
/* 页脚：同一套锁定，尺寸收一档（38px 仍能读出字样） */
.brand--ftr { gap: var(--u-3); }
.brand--ftr .brand__mark { width: 38px; height: 38px; }
.brand--ftr .brand__rule { height: 26px; }

.nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); }
.nav a {
  font-size: var(--t-sm); color: var(--paper-2); position: relative;
  padding-block: 6px; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  opacity: 0; transform: scaleX(.4); transform-origin: left;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current="page"]::after { opacity: .5; transform: none; }

.hdr__tools { display: flex; align-items: center; gap: var(--u-4); }
.burger { display: none; background: none; border: 0; padding: 8px; color: var(--paper); cursor: pointer; }
.burger span { display: block; width: 22px; height: 1px; background: currentColor; margin: 5px 0; }

/* ---------- 11. 按钮与链接 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--u-3);
  font-family: inherit; font-size: var(--t-sm); letter-spacing: .05em;
  padding: 15px 28px; border: 1px solid var(--line-strong); border-radius: 0;
  color: var(--paper); background: transparent; cursor: pointer;
  transition: background .38s var(--ease), border-color .38s var(--ease),
              color .38s var(--ease), transform .38s var(--ease);
  white-space: nowrap;   /* CTA 在桌面端禁止换行 */
  max-width: 100%;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
/* 主按钮用纸白（--paper），不用强调色。
   理由：a) 深底照片上的浅色实心按钮是陈列 / 画廊的通行做法，比暖底按钮更像
            「展签」而不是「SaaS 的 Get started」。
         b) 强调铜只留给「可交互的文字」与 hover ， ， 链接、focus、hover，
            语义保持唯一，不掺进按钮底色这种「品牌色」用法。
   对比度：--paper #E6E9E7 上压 --ink #1C2326 ≈ 13.0:1，远超 AAA。
   hover 换成铜底 + 深字 ≈ 6.2:1，仍过 AA。 */
.btn--solid {
  background: var(--paper); color: var(--ink); border-color: var(--paper); font-weight: 600;
}
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #1A2225; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--u-4); align-items: center; margin-top: var(--u-6); }

/* 文本链接 , ,  链接感靠一条常驻细下划线承担，不用箭头图标。
   下划线用 currentColor，换底色时自动跟随。 */
.link-arrow {
  display: inline-block;
  position: relative;
  font-size: var(--t-sm);
  color: var(--accent);
  padding-bottom: 5px;
  width: fit-content;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  opacity: .40; transition: opacity .38s var(--ease);
}
.link-arrow:hover::after { opacity: .9; }

/* 正文内联链接：同样用下划线，不用颜色，避免整段泛蓝 */
.body a, .lede a, .small a, .spec__v a, .kv__v a, li a.inline-link {
  color: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.body a:hover, .lede a:hover, .small a:hover, .spec__v a:hover, .kv__v a:hover {
  color: var(--accent); border-color: var(--accent);
}
/* 外链：↗ 有真实功能含义（即将离开本站），保留 */
a[target="_blank"]::after { content: " \2197"; font-size: .9em; opacity: .7; }
a[target="_blank"].no-mark::after { content: ""; }

/* ---------- 12. 首屏 ----------
   内容压在左下，作品图铺满并偏右 , ,  不对称构图。
   高度用 svh（不是 vh）：移动端地址栏收起/展开时不会跳。 */
.hero {
  position: relative;
  min-height: 660px;
  min-height: min(88svh, 800px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 44%;
}
/* 双层定向遮罩：横向从左压实保文字可读，纵向从底渐隐融入下一段。
   ------------------------------------------------------------
   这里能压得这么轻，前提是首屏换成了 hero-wide.jpg , ,
   那张图把雕像群整体右移、左侧补出一片纯暗区（见 _build/make_hero.py），
   所以文案压在天然暗区上，不需要靠加深遮罩去换可读性。
   第一版用的是原始 3:2 图，文案正落在航天员的白甲上，只能把遮罩压到
   .95 才够，代价是整张图也死了 , ,  用户已经说过两次「太暗」。 */
/* 双层定向遮罩：横向从左压实保文字可读，纵向从底渐隐融入下一段。
   ------------------------------------------------------------
   能压得这么轻，前提是首屏用的是 hero-wide.jpg , ,
   那张图把雕像群整体右移、左侧补出一片纯暗区（见 _build/make_hero.py）。

   v5 调整：左侧压实区从 24% 推到 36%。原因是标题第二行行尾会落在骑士
   身上（骑士在画面 21%-38% 之间）。与其移动画面（会切掉最左的骑士），
   不如把这一段压暗 , ,  这恰好就是舞台的逻辑：前景压暗、主体受光。
   于是 46% 之后迅速放开，龙与航天员保持全亮度。 */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(94deg,
      rgba(var(--veil), .96) 0%,
      rgba(var(--veil), .93) 20%,
      rgba(var(--veil), .88) 36%,
      rgba(var(--veil), .70) 46%,
      rgba(var(--veil), .34) 57%,
      rgba(var(--veil), .10) 70%,
      rgba(var(--veil), .04) 84%,
      rgba(var(--veil), .04) 100%),
    linear-gradient(0deg,
      var(--ink) 0%,
      rgba(var(--veil), .46) 11%,
      rgba(var(--veil), .18) 24%,
      transparent 40%);
}
/* 首屏内容：不居中、不浮在中间。压在左下角，顶部留白由 min-height 承担。 */
.hero__body {
  position: relative; z-index: 2;
  padding-block: var(--u-8) var(--u-8);
}
.hero h1 { max-width: 32ch; }
.hero__sub {
  margin-top: var(--u-5);
  max-width: 52ch;
  font-size: var(--t-base);
  color: var(--paper-2);
  line-height: 1.62;
  text-wrap: pretty;   /* 避免末行只剩一个词 */
}

/* 内页小首屏 */
.phead { padding-block: clamp(56px, 7vw, 112px) var(--band-tight); position: relative; overflow: hidden; }
.phead::after {
  content: ""; position: absolute; top: -34%; right: -10%;
  width: 70vw; height: 66vh;
  background: radial-gradient(ellipse at 50% 50%, var(--stage) 0%, transparent 68%);
  pointer-events: none;
}
.phead > * { position: relative; z-index: 1; }
.phead h1 { max-width: 26ch; font-size: var(--t-3xl); }
.phead .lede { margin-top: var(--u-5); }

.crumbs {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-3); margin-bottom: var(--u-6);
  display: flex; gap: var(--u-3); align-items: center;
}
.crumbs a:hover { color: var(--accent); }
.crumbs span { opacity: .5; }

/* ---------- 13. 短答案块 ----------
   生成式引擎（AI 搜索）最缺的是「能整段抄走的定义句」。
   这一块专门提供它：一句自足的事实陈述，不依赖上下文。 */
.answers {
  border-left: 2px solid var(--accent);
  padding: var(--u-6) 0 var(--u-6) var(--u-6);
  background: linear-gradient(90deg, var(--accent-wash), transparent 72%);
}
.answers__t {
  font-size: var(--t-md); line-height: 1.6; color: var(--paper);
  max-width: 74ch; margin: 0;
}
.answers__t + .answers__t { margin-top: var(--u-4); }
.answers__n {
  display: block; margin-top: var(--u-5);
  font-size: var(--t-xs); color: var(--paper-3); letter-spacing: .04em;
}

/* ---------- 14. 问答（FAQ）----------
   同时服务两类读者：真实买家（快速答疑）和 AI 引擎（问答对最容易被整段引用）。
   用 details/summary 原生折叠：无 JS 也能用，且内容在 HTML 里，
   不依赖脚本渲染 , ,  抓取器看得到全文。 */
.faq { border-top: 1px solid var(--line); }
.faq > details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--u-5); align-items: baseline;
  padding-block: var(--u-6);
  font-size: var(--t-lg); letter-spacing: -.014em; color: var(--paper);
  transition: color .32s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: "+";
  font-family: "Geist Mono", monospace; font-size: var(--t-md);
  color: var(--paper-3); transition: transform .35s var(--ease), color .32s var(--ease);
}
.faq details[open] summary::after { content: "\2212"; color: var(--accent); }
.faq__a {
  padding-bottom: var(--u-6);
  max-width: 74ch;
  color: var(--paper-2);
  font-size: var(--t-base);
  line-height: 1.68;
}
.faq__a p + p { margin-top: var(--u-4); }

/* ---------- 15. 图片与打码工艺图 ---------- */
.frame {
  position: relative; overflow: hidden;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 0;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
/* 容器比例只有四种，与素材严格对齐。
   ------------------------------------------------------------
   素材盘点（assets/img）：
     概念作品图 work-*.jpg                 2:3 竖幅  (0.666)
     实拍作品图 collection-*.jpg           1:1 方幅  (1.000)
     工艺/厂房  process-* facility-*.jpg   3:2 横幅  (1.500)
     厂区外景  facility-04-exterior.jpg    3:1 全景条 (3.000)  ← 唯一一张，见下
   此前定义了五种比例，其中 4:3 与 1:1 会把竖幅作品的高度裁掉 50%、
   横幅宽度裁掉 33% , ,  雕像的头就是这样被切没的（用户三次指出）。
   版式变化改由**跨度**（跨几栏）承担，不再由比例承担。

   1:1 是实拍素材的原始比例（棚拍方图，中心构图、暗场背景），
   容器照原比例走 , ,  这批图一张都不能裁，主体占满画幅。
   实拍方图另有天然优势：暗场底色与 --ink 同族，进容器几乎无缝。

   ⚠️ 上面四条里，**前三条是「素材的原始比例」，第四条不是**。
   第 4 条是「版式占位折算出来的比例」，性质不同，单独写在下面。 */
.frame--tall { aspect-ratio: 2 / 3; }   /* 概念作品图 */
.frame--sq   { aspect-ratio: 1 / 1; }   /* 实拍作品图 */
.frame--land { aspect-ratio: 3 / 2; }   /* 工艺图 / 厂房图 */

/* 全景条 , ,  About 页厂区外景专用，目前只有 facility-04-exterior 一张。
   ------------------------------------------------------------
   3:1 **不是**素材的原始比例（源图是 3:2），而是「原双图并排」那个占位的折算值：
   左栏宽 L 时，两个 sp-6（各 (L−16)/2 宽、3:2 高）并排，
   整块为 L × (L−16)/3，比例 3L/(L−16) —— 在 3.10 ~ 3.13 之间随视口浮动
   （L=465.8 → 3.107，L=393.8 → 3.127），没有哪个固定值能同时精确相等。
   取整 3:1 后，1440 视口渲染高 155.3px 对原占位 149.9px，差 5.4px，肉眼不可辨，
   但在 CSS 里换来一个干净的比例。

   ⇒ 这条规则**天生绑定那一个占位**（About 页左栏、<p class="lede"> 下方）。
   搬到别处用之前先问一句：那个图位的比例是**素材**决定的，还是**版式**决定的？
   全站其余图位都是前者，只此一处是后者。
   素材侧的处理见 _build/make_facility04.py（纯裁切，明令禁止调色）。 */
.frame--pano { aspect-ratio: 3 / 1; }

/* 打码工艺图 , ,  「遮挡」在这里被做成了设计语言，不是临时占位。
   工艺过程全部保密是硬约束。常规做法（干脆不放图）会让页面显空、
   也没说服力；把遮挡本身做成视觉元素，同时拿到三样东西：
     ① 可信度，看得出产线真实存在，只是看不清细节
     ② 说服力，不是口头承诺，是当场演示给你看
     ③ 记忆点，采购会记住「连自己产线都打码的那家」
   因此这些图位**最终也应保留抽象形态**，换成高清产线照反而违规。 */
.obs { position: relative; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); }
/* ⚠️ 这里**不要**再加 `brightness()` 提亮。2026-10-01 换过一版素材后实测：
   旧素材偏暗（38–63），当时靠 `brightness(1.12)` 补到 54；
   新素材本身就亮（107–185），同一句 1.12 直接把照片推到 150+，
   `process-02` 的四边更是到了 193 , ,  窗户过曝发白、细节全丢。
   ⇒ **滤镜参数是跟素材绑定的**，换图必须重测，不能沿用。 */
.obs img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.06); }
.obs__mask {
  position: absolute; inset: 0;
  /* 色值取自站点调性：浅格≈--paper-3 压暗一档，深格≈--ink-3 提亮一档。
     为什么不是深色：初版用 rgba(24,30,33) 深格 + rgba(49,58,63) 浅格，压在本就偏暗的
     车间照上，实测**中心区亮度 44.6 比四边区 48.1 还低** , ,  遮罩比它盖住的照片更暗，
     于是整张卡成一个黑洞，读起来像「图挂了」（设计说明 §四 早已预警此风险）。
     为什么不用半透明（0.5 左右透出下层）：**会把在制产品的轮廓透出来**，
     违反「不出现产线 / 在制项目」的硬约束（实测雕像形态清晰可见）。遮挡必须不透明。

     ⚠️ 遮罩亮度同样**跟素材绑定**：素材换亮后，原先的 138/96 格子白得糊进背景，
     故整体收回一档（130/88），让「处理过」的块面在浅色照片上仍读得出来。 */
  background-image:
    repeating-conic-gradient(rgba(130, 137, 136, .96) 0% 25%, rgba(88, 97, 99, .96) 0% 50%);
  background-size: 26px 26px;
  /* 椭圆只遮中间，四边留出真实照片 , ,  「刻意遮的」这个观感靠三点：
       a) 照片边缘看得见  b) 遮挡边界是软的  c) 每张图旁有说明文字
     第一版椭圆放到 64%x60%，结果把小图整个盖死，变成一块纯马赛克，
     读起来像"图没加载出来"。收到 40%x44% 后两侧各留约 10% 的真实画面，
     块面也加大对比，才读得出是「处理过」而不是「没加载」。 */
  -webkit-mask-image: radial-gradient(ellipse 40% 44% at 50% 46%, #000 0 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 44% at 50% 46%, #000 0 56%, transparent 100%);
}
.obswrap { margin: 0; display: grid; gap: var(--u-3); }
/* 说明文字在图**外**下方 , ,  禁止把标签叠在图上 */
.obs__cap {
  font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper-3);
}

/* 拼块里的打码图底衬 */
.frame .obs__mask { position: absolute; inset: 0; }

/* 作品图位（Portfolio 不规则网格）*/
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--u-4);
}
.mosaic > * { min-width: 0; }
.work { display: block; position: relative; overflow: hidden; background: var(--ink-1); border: 1px solid var(--line); }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.work:hover img { transform: scale(1.045); }
/* 可点击放大。光标形状是这里唯一的提示，不另加放大镜图标 , ,
   hover 时图注已经浮出，再叠一个图标会喧宾夺主。 */
.work[data-zoom] { cursor: zoom-in; }
.work__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--u-5) var(--u-5);
  background: linear-gradient(0deg, rgba(var(--veil), .92), transparent);
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.work:hover .work__cap, .work:focus-visible .work__cap { opacity: 1; transform: none; }

/* ---------- 作品图放大层（点击展开 / 再点收起）----------
   素材上限 900px，所以放大层**不把图撑到满屏** , ,
   max-width 停在 min(94vw, 900px)，即原始像素附近。
   继续放大只会糊、并不会更清楚（与「越放越大越好」的直觉相反），
   因此宁可给出真实分辨率，也不给一个虚高的尺寸。

   收起方式：点图、点黑底、点提示、按 Esc 都能收起 ,
   也就是要的「再点一下缩小」。所以图片上**不阻止冒泡**。
   屏幕底纹（body::before，z-index 9999）仍叠在最上层，
   但它 pointer-events:none：既不挡点击，颗粒质感也与全站一致。 */
.lb {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(var(--veil), .955);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
  cursor: zoom-out;
}
.lb.is-on { opacity: 1; visibility: visible; }
.lb__img {
  max-width: min(94vw, 900px);
  max-height: 84svh;
  width: auto; height: auto;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .62);
}
/* 提示行沿用 .obs__cap 那套微排版，保持一致 */
.lb__hint {
  position: absolute; left: 0; right: 0; bottom: clamp(10px, 2.4vw, 28px);
  margin: 0; text-align: center;
  font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper-3);
}

/* 窄屏必须另给一套尺寸 , ,
   ------------------------------------------------------------
   实测：390px 视口下，网格里的卡片宽 348px（单列已占满屏），
   而放大层受 94vw 限制只有 367px —— **只放大了 5%，等于没放大**。
   病根是「宽屏的约束条件在窄屏不成立」：
   宽屏卡片只占 12 栏里的 4 栏（约三分之一宽），94vw 远大于它；
   窄屏卡片塌成单列、本身就有视口那么宽，94vw 就再也放大不动了。

   所以窄屏改成**按可用高度定尺寸**（方图宽=高）：
   390x844 的机器上得到约 726px 见方，是网格里的 2.1 倍，真正的放大。
   代价是图会略宽于视口，可左右拖动 —— 比"点开看不出变化"强得多。

   配套两点：
   · margin:auto（而不是靠 justify-content 居中）—— 溢出时 auto 退化为 0，
     保证四个方向都滚得到；纯居中会让溢出部分永远滚不出来。
   · 提示行隐藏 —— 它是 absolute，在滚动容器里会被一起拖走；
     而手机上「点空白处关闭」本来就是通用直觉，不需要教。 */
@media (max-width: 700px) {
  .lb { overflow: auto; -webkit-overflow-scrolling: touch; }
  .lb__img {
    max-width: none; max-height: none;
    height: 86svh; width: auto;
    margin: auto;
  }
  .lb__hint { display: none; }
}

/* ---------- 16. 声明块 / 规则牌 / 数据 ---------- */
.claim {
  position: relative;
  border: 1px solid var(--line-mid);
  border-left: 2px solid var(--chrome);
  padding: clamp(26px, 3vw, 48px);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
}
.claim h2, .claim h3 { margin-bottom: var(--u-4); }
.claim .kicker {
  font-size: clamp(16px, 1.6vw, 21px); color: var(--paper);
  letter-spacing: -.016em; margin-top: var(--u-6); line-height: 1.4; max-width: 46ch;
}

/* 现场规则牌 , ,  模仿车间门牌 */
.plate {
  display: inline-flex; flex-direction: column; gap: var(--u-2);
  border: 1px solid var(--line-strong);
  padding: var(--u-5) var(--u-6);
  background: rgba(var(--veil), .35);
}
.plate__t { font-size: var(--t-sm); letter-spacing: .22em; color: var(--paper); font-weight: 500; }
.plate__d { font-size: var(--t-xs); color: var(--paper-3); letter-spacing: .02em; line-height: 1.6; }

.badge {
  display: inline-block;
  font-size: var(--t-micro); letter-spacing: .15em; text-transform: uppercase;
  color: var(--paper-2); border: 1px solid var(--line-mid);
  padding: 9px 14px;
}
.note {
  font-size: var(--t-sm); color: var(--paper-3);
  border-left: 1px solid var(--line-mid); padding-left: var(--u-5); line-height: 1.62;
  max-width: var(--readw);
}

/* 数据条 , ,  首屏下方的事实块（原先是 hero 底部的装饰文字条，已按规则移除） */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border-block: 1px solid var(--line);
}
.fact { background: var(--ink); padding: var(--u-6) var(--u-5); display: grid; gap: var(--u-2); }
.fact__n { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.032em; line-height: 1; color: var(--paper); }
.fact__l { font-size: var(--t-micro); letter-spacing: .15em; text-transform: uppercase; color: var(--paper-3); }

/* ---------- 17. 步骤条 ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px); align-items: baseline;
  padding-block: var(--u-6);
  border-bottom: 1px solid var(--line);
}
.steps > li:first-child { border-top: 1px solid var(--line); }
.steps__n { font-family: "Geist Mono", monospace; font-size: var(--t-xs); color: var(--paper-3); }
.steps__t { font-size: var(--t-xl); letter-spacing: -.022em; }
.steps__d { color: var(--paper-2); font-size: var(--t-base); margin-top: var(--u-2); display: block; }
.steps__who {
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-3); white-space: nowrap; padding-top: 6px;
}
.steps > li.is-us { background: linear-gradient(90deg, var(--accent-wash), transparent 62%); }
.steps > li.is-us .steps__n, .steps > li.is-us .steps__who { color: var(--accent); }

/* ---------- 18. 表单 ---------- */
.form { display: grid; gap: var(--u-6); }
.field { display: grid; gap: var(--u-3); }
.field > label {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-2);
}
.field input, .field textarea, .field select {
  width: 100%; background: var(--ink-1);
  border: 1px solid var(--line-mid); border-radius: 0;
  color: var(--paper); font-family: inherit; font-size: var(--t-base);
  padding: 14px 16px;
  transition: border-color .32s var(--ease), background .32s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: var(--ink-2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--paper-3); }
.field select option { background: var(--ink-2); color: var(--paper); }
.field__hint { font-size: var(--t-xs); color: var(--paper-3); line-height: 1.62; }

/* 询盘分流 , ,  选到「季节性 / 花园装饰」时当场提示去集团官网。
   这是不漏单的关键一环：B2B 的转化动作就是询盘。 */
.route {
  display: none;
  border: 1px solid var(--accent-lo);
  background: var(--accent-wash);
  padding: var(--u-5) var(--u-6);
  font-size: var(--t-sm); line-height: 1.65; color: var(--paper-2);
}
.route.is-on { display: block; }
.route a { color: var(--accent); border-bottom: 1px solid currentColor; }
.route a::after { content: ""; }

/* ---------- 19. 文章列表 ---------- */
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.posts > li { border-bottom: 1px solid var(--line); }
.posts a {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--u-6); align-items: baseline;
  padding-block: var(--u-5);
  transition: background .45s var(--ease), padding-left .45s var(--ease);
}
.posts a:hover { background: var(--ink-1); padding-left: var(--u-4); }
.posts__tag { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-3); }
.posts__t { font-size: var(--t-md); letter-spacing: -.014em; transition: color .32s var(--ease); }
.posts a:hover .posts__t { color: var(--accent); }

/* ---------- 20. 结尾 CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  padding-block: var(--band-loose);
  border-top: 1px solid var(--line);
  /* 区块高度必须够 , ,  右侧那尊作品按高度适配，区块矮 = 作品小 = 看不见。
     第一版只给 440–580px，实测作品缩到 364px 宽、几乎融进底色。 */
  min-height: clamp(500px, 46vw, 700px);
  display: flex; flex-direction: column; justify-content: center;
}
/* 作品背后的一束冷光，让雕像从底色里立起来（否则深色机体在深底上读不出来） */
.cta::after {
  content: ""; position: absolute; right: -8%; bottom: -22%;
  width: 64%; height: 124%;
  background: radial-gradient(ellipse at 50% 50%, rgba(111, 168, 196, .15), transparent 62%);
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { max-width: 24ch; }

/* 右侧装饰性作品
   ------------------------------------------------------------
   原来是 `width: 42%` + `bottom: 0`。CTA 用的作品图全是 2:3 竖幅，
   42% 宽在 1440 下等于 605px 宽 → 908px 高，而区块只有约 520px 高，
   于是上半截被 overflow 裁掉 , ,  头就没了（用户当场指出）。

   改成按**高度**适配：整尊从底座到头完整可见，贴右缘、左缘渐隐进底色。
   配合上面的区块高度与背光，作品才既有存在感又完整。 */
.cta__img {
  position: absolute; right: 0; bottom: 0;
  height: 100%; width: auto;
  /* 不透明度要够高才看得见。走过两次弯路：
       .42 → 作品被裁掉头（原问题）
       .52 + 区块矮 → 缩到 364px 宽、几乎融进底色（改完更糟）
     作品图本身已经带了一圈很重的暗角（_grade.py 烘焙进去的），
     四角接近 (9,9,10)，与页面底色 (12,14,17) 几乎相同 ,
     所以矩形边界本来就看不出来，不需要靠降透明度去融边。 */
  opacity: .9; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}
/* 作品朝向向左（镜像）
   ------------------------------------------------------------
   CTA 里文案在左、作品贴右缘，所以作品朝左才对 , ,
   视线被人物动作带向「Start a production inquiry」按钮。
   素材朝向是现成的、不由我们决定，用 cta(..., flip=True) 逐页开。

   ⚠️ transform 作用在 <img> 上，而 mask 挂在同一个元素 ,
   两者会一起翻转。所以这里把渐变方向写成 270deg：
   翻转之后屏幕上仍然是「左缘渐隐」，与未翻转的页面保持同一套融边逻辑。 */
.cta__img--flip {
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 16%, #000 100%);
}
/* 窄屏收起装饰作品 , ,  同时把为它预留的高度一起去掉，
   否则会留下一大片只有文字的空白 */
@media (max-width: 1180px) {
  .cta { min-height: auto; }
  .cta__img { display: none; }
}

/* ---------- 21. 页脚 ---------- */
.ftr { border-top: 1px solid var(--line); padding-block: var(--band) var(--u-7); background: var(--ink-1); }
.ftr__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--u-7);
}
/* 页脚栏目标题用 h2 , ,  不能跳级。
   页脚正文里最后一级标题通常是板块的 h2，这里再出现 h4 就是 h2 -> h4 跳级，
   屏幕阅读器与 Lighthouse 都会报。所以用 h2 并把字号压回小号大写。 */
.ftr h2 {
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-3); margin-bottom: var(--u-5); font-weight: 500;
  line-height: 1.4;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--u-3); }
.ftr li a { font-size: var(--t-sm); color: var(--paper-2); }
.ftr li a:hover { color: var(--accent); }
.ftr__brand { display: flex; flex-direction: column; gap: var(--u-2); }
.ftr__note { font-size: var(--t-sm); color: var(--paper-3); margin-top: var(--u-4); max-width: 42ch; line-height: 1.62; }

/* 跨站引导 , ,  **只在页脚**，且只有一处。
   主导航不放：导航承载定位表达，放进「季节性 / 花园」会让 IP 方
   第一眼觉得「他们主业是季节性装饰、收藏品是顺带」。
   页脚是公司信息层（关联站点、法务、联系方式都在这），放这里天然合理。 */
.ftr__cross {
  display: inline-block; font-size: var(--t-xs); color: var(--paper-2);
  border-bottom: 1px solid var(--line-mid); padding-bottom: 3px; width: fit-content;
}
.ftr__cross:hover { color: var(--accent); border-color: var(--accent); }

.ftr__bot {
  margin-top: var(--u-8); padding-top: var(--u-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--u-3) var(--u-6); justify-content: space-between;
  font-size: var(--t-xs); color: var(--paper-3);
}

/* ---------- 22. 动画 ----------
   默认必须可见 , ,  否则 JS 一旦加载失败，整页内容全部隐形。
   只在 <html> 带上 .js（由内联脚本注入）时才隐藏等待显现。 */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .07s; }
.js .reveal[data-d="2"] { transition-delay: .14s; }
.js .reveal[data-d="3"] { transition-delay: .21s; }
.js .reveal[data-d="4"] { transition-delay: .28s; }
.js .reveal[data-d="5"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 23. 响应式 ---------- */
@media (max-width: 1180px) {
  .sp-3, .sp-4 { grid-column: span 6; }
  .sp-5, .sp-7 { grid-column: span 12; }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 页头加徽章后横向更紧。实测 961px 处只差几像素就会挤，
     把两列之间的间隙收一档（24 -> 16），并让徽章跟着降一档尺寸。 */
  .hdr__in { gap: var(--u-4); }
  .brand__mark { width: 38px; height: 38px; }
}

@media (max-width: 1024px) {
  .brand__mark { width: 34px; height: 34px; }
  .brand__rule { height: 24px; }
  .hdr__in { gap: var(--u-3); }
}

@media (max-width: 960px) {
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column;
    align-items: flex-start; gap: 0;
    background: var(--ink-1); border-bottom: 1px solid var(--line);
    padding: var(--u-2) var(--gut) var(--u-7);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .32s var(--ease), transform .32s var(--ease);
    max-height: calc(100svh - 72px); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding-block: var(--u-5); width: 100%; border-bottom: 1px solid var(--line); font-size: var(--t-md); }
  .nav a::after { display: none; }
  .burger { display: block; }

  /* 高变化版式在 <960px 一律塌成单列 */
  .split, .split--text-lead, .split--media-lead { grid-template-columns: minmax(0, 1fr); gap: var(--u-7); }
  .split__sticky { position: static; }
  .sp-3, .sp-4, .sp-5, .sp-6, .sp-7, .sp-8 { grid-column: span 12; }
  .bento, .mosaic { gap: var(--u-3); }
  .film, .film--even { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > li, .ledger--wide > li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--u-5); }
  .ledger__d { grid-column: 2; margin-top: var(--u-3); }
  .steps > li { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .steps__who { grid-column: 2; padding-top: var(--u-3); }
  .posts a { grid-template-columns: minmax(0, 1fr); gap: var(--u-2); }
  .kv__row { grid-template-columns: minmax(0, 1fr); gap: var(--u-2); }

  /* 首屏在窄屏改成「作品横幅 + 下方实底色文案」两层，不再把文字压在图上。
     ------------------------------------------------------------
     原因：窄屏时 cover 的可见窗口正好落在龙身上（整张图最亮的地方），
     标题和副文案压在一片亮鳞上，加浓遮罩只会把作品一起弄死。
     把「图」和「字」在版式上分开，两件事同时成立：作品完整、文字清晰。 */
  .hero { flex-direction: column; align-items: stretch; min-height: auto; }
  .hero__media { position: relative; inset: auto; height: 46svh; min-height: 300px; }
  .hero__media img { object-position: 62% 40%; }
  .hero__veil {
    inset: 0 0 auto 0;
    height: 46svh; min-height: 300px;
    background: linear-gradient(0deg,
      var(--ink) 0%, rgba(var(--veil), .34) 30%, transparent 68%);
  }
  .hero__body { padding-block: var(--u-8) var(--u-8); }
  .cta__img { display: none; }
}

@media (max-width: 620px) {
  .ftr__grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .obs__mask { background-size: 15px 15px; }
  .hdr__in { height: 64px; }
  .nav { inset: 64px 0 auto 0; max-height: calc(100svh - 64px); }
  /* 手机宽度下省掉锁定里的细线、徽章再降一档：品牌块本身是定宽的
     （副行是 nowrap 的 "A division of DAK Industrial"），不省的话 360px 处会溢出。
     细线承担的是分隔功能，窄屏上留白已经够分，去掉不损识别。 */
  .brand__rule { display: none; }
  .brand__mark { width: 30px; height: 30px; }
  .brand--ftr .brand__mark { width: 34px; height: 34px; }
}