/* ============================================================
   申翼 SHENWING 官网 · 站点样式
   档位：办公线 · 克制档（暖纸白铺场 / 墨色写字 / 办公红只做点睛 ≤10%）
   依据：《申翼办公线-VI手册-V1.0》第 2 章（色彩铁律 · 对比度门槛）、
         第 3 章（字级 Scale · 行高字距）、§5.2（1px 细线分隔优先于阴影）、
         第 9 章动效（单次转场 ≤360ms · office-standard 无回弹）。
   变量层：assets/css/tokens.css（自 brand-kits/office/tokens.css 原样复制，勿手改）
   ============================================================ */

/* ---------- 0. 公网安全字族层（覆盖 tokens.css 的字族别名） ----------
   为什么要覆盖：tokens.css 里 --font-office-text 首选「思源黑体」、
   --font-office-display 首选「演示斜黑体」。公网托管字体文件受再分发条款约束
   （手册 §3.5「禁止外发字体文件」；路线图 §2 W1「公网站点字体改子集化/系统栈」）。
   本站的处置：
     · 正文  → 走手册 §3.1 已写明的**回退栈**（思源黑体→鸿蒙黑体→Inter→Noto Sans SC），
               不自带中文字体文件，命中系统已装字体，0 KB 下载。
     · 拉丁/数字 → 自托管 Inter（SIL OFL，路线图 §1 决策 5 已裁决走开源），已子集化。
     · 大标题 → 自托管**子集化**的演示斜黑体（仅含站内标题实际用字，见 tools/生成标题字子集.py）。
   ---------------------------------------------------------------- */
:root {
  --font-text:
    "Inter", "思源黑体", "Source Han Sans SC", "鸿蒙黑体", "HarmonyOS Sans SC",
    "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-display:
    "演示斜黑体 Subset", "Inter", "思源黑体", "Source Han Sans SC",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-num: "Inter", "SF Mono", "JetBrains Mono", monospace;

  /* 版心与节奏 */
  --page-max: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 10vw, 148px);
  --header-h: 88px;
}
@media (max-width: 860px) { :root { --header-h: 64px; } }

/* ---------- 1. 基座 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* 本站只有浅色一档：克制档的底就是暖纸白，手册未定义暗色主题，
     且路线图 §6.1 已把「暗色主题」列入冻结项。显式声明可避免系统深色模式下
     浏览器把表单控件/滚动条自动翻深，与纸白底打架。 */
  color-scheme: light;
  scroll-behavior: smooth;
  /* 锚点跳转不被吸顶页眉遮挡 */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* 工程图纸底：暖纸白 + 96px 制图网格（墨色 3.5% 透明度，远看是纸的肌理，近看是图纸） */
  background-color: var(--color-brand-paper);
  background-image:
    linear-gradient(rgba(35,24,21,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,24,21,0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  color: var(--color-brand-ink);             /* 墨 #231815 —— 一切文字的默认颜色（§2.1） */
  font-family: var(--font-text);
  font-size: var(--size-16);
  line-height: var(--leading-normal);        /* 1.5 —— 无障碍下限（§3.4） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-bold); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--color-brand-ink); color: var(--color-brand-white); }

/* 焦点环：红 3px + 2px 偏移。红/纸白 3.69:1 ≥ 图形与 UI 边界门槛 3:1（§2.6） */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-brand-red-office);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-brand-ink); color: var(--color-brand-white);
  padding: 12px 20px; font-weight: var(--weight-bold);
  border-radius: 0 0 var(--radius-office-sm) 0;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 2. 版心与通用节奏 ---------- */
.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--paper { background: transparent; }   /* 透出 body 的图纸网格 */
.section--white { background: var(--color-brand-white); }
.section--ink   { background: var(--color-brand-ink); color: var(--color-brand-white); }
.section + .section { border-top: 1px solid var(--color-neutral-100); }
.section--ink + .section, .section + .section--ink { border-top: 0; }

.rule { height: 1px; background: var(--color-neutral-100); border: 0; margin: 0; }

/* 眉标：小号全大写 / 中文小标签。红只出现在前面那个 6px 方块（图形，不承载文字） */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--size-12); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-neutral-500);            /* 5.37:1 于白/纸白，正文 AA 通过（§2.3） */
  text-transform: uppercase;
  margin-bottom: var(--space-16);
}
.eyebrow::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: var(--color-brand-red-office);  /* 点睛：图形块，非文字 */
}
.section--ink .eyebrow { color: var(--color-neutral-300); }

/* ---------- 3. 字级角色（§3.2 Scale：64/48/36/28/22/18/16/14/12） ---------- */
.t-display {                                   /* 首屏主标题 */
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);     /* -0.02em */
}
.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.8vw, 60px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: var(--leading-snug);            /* 1.25 */
  letter-spacing: var(--tracking-heading);
}
.t-h3 { font-size: var(--size-22); line-height: var(--leading-snug); }
.t-lead {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: var(--leading-loose);           /* 1.7 长段落松排 */
  color: var(--color-neutral-700);
  max-width: 46em;
}
.t-body { font-size: var(--size-16); line-height: var(--leading-loose); color: var(--color-neutral-700); max-width: 42em; }
.t-small { font-size: var(--size-14); line-height: var(--leading-normal); color: var(--color-neutral-600); }
.t-legal { font-size: var(--size-12); line-height: var(--leading-normal); color: var(--color-neutral-500); }
.section--ink .t-lead, .section--ink .t-body { color: var(--color-neutral-200); }
.section--ink .t-small { color: var(--color-neutral-300); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* 型号铭牌：等宽 + 字距，把型号当仪器铭牌处理 */
.plate {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;   /* 放进 flex column 容器时不被拉成整行宽 */
  font-family: var(--font-num); font-size: var(--size-12); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  padding: 6px 10px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-office-sm);
  color: var(--color-neutral-700);
  background: var(--color-brand-white);
}
.section--ink .plate { background: transparent; border-color: var(--color-neutral-600); color: var(--color-neutral-200); }

/* ---------- 4. 按钮 ----------
   为什么主按钮是墨底不是红底：红底白字实算 3.99:1，只过大字门槛，
   16px 按钮字属正文级——手册 §2.6「正文禁止，优先改墨字」。红留给点睛图形。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--target-comfort);           /* 48px */
  padding: 0 22px;
  font-family: inherit; font-size: var(--size-16); font-weight: var(--weight-bold);
  border-radius: var(--radius-office-sm);      /* 2px —— 克制档的形状签名 */
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--duration-fast) var(--easing-office-standard),
              color var(--duration-fast) var(--easing-office-standard),
              border-color var(--duration-fast) var(--easing-office-standard);
}
.btn--primary { background: var(--color-brand-ink); color: var(--color-brand-white); }
.btn--primary:hover { background: var(--color-neutral-700); }
.btn--ghost { background: transparent; color: var(--color-brand-ink); border-color: var(--color-neutral-300); }
.btn--ghost:hover { border-color: var(--color-brand-ink); background: var(--color-neutral-100); }
.section--ink .btn--primary { background: var(--color-brand-white); color: var(--color-brand-ink); }
.section--ink .btn--primary:hover { background: var(--color-neutral-200); }
.section--ink .btn--ghost { color: var(--color-brand-white); border-color: var(--color-neutral-600); }
.section--ink .btn--ghost:hover { border-color: var(--color-brand-white); background: var(--color-neutral-800); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* 文字链：默认下划线偏移，hover 时红色下划线点睛（线是图形，字仍是墨色） */
.link {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--color-neutral-300);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast) var(--easing-office-standard);
}
.link:hover { text-decoration-color: var(--color-brand-red-office); }
.section--ink .link { text-decoration-color: var(--color-neutral-600); }

/* ---------- 5. 页眉 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-brand-paper) 94%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-neutral-100);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--color-brand-paper); } }

.header-in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  min-height: var(--header-h);
}
/* 页眉主署名：Logo 横向锁定，宽 ≥120px（§1.4 数字最小尺寸） */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; min-height: var(--target-min); }
.brand img { width: 128px; height: auto; }
.brand .brand-sym { display: none; width: auto; height: 34px; }   /* 窄屏降级用 Symbol（§1.1 决策树） */

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  padding: 0 14px; font-size: var(--size-14); font-weight: var(--weight-medium);
  color: var(--color-neutral-600); text-decoration: none;
  border-radius: var(--radius-office-sm);
  transition: color var(--duration-fast) var(--easing-office-standard),
              background var(--duration-fast) var(--easing-office-standard);
}
.nav a:hover { color: var(--color-brand-ink); background: var(--color-neutral-100); }
.nav a[aria-current="page"] { color: var(--color-brand-ink); font-weight: var(--weight-bold); position: relative; }
.nav > .btn { display: none; }          /* 桌面态由页眉右侧 CTA 承担，避免同页两个同名按钮 */
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; background: var(--color-brand-red-office);   /* 点睛：当前页指示线 */
}
.header-cta { display: inline-flex; align-items: center; gap: var(--space-12); }
.header-cta .btn { min-height: 40px; font-size: var(--size-14); padding: 0 16px; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: var(--target-min); height: var(--target-min);
  background: transparent; border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-office-sm); cursor: pointer; color: var(--color-brand-ink);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 860px) {
  .brand img.brand-logo { display: none; }
  .brand .brand-sym { display: block; }
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-brand-white);
    border-bottom: 1px solid var(--color-neutral-100);
    padding: var(--space-8) var(--gutter) var(--space-24);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a { min-height: 56px; font-size: var(--size-18); padding: 0; border-radius: 0; border-bottom: 1px solid var(--color-neutral-100); }
  .nav a:hover { background: transparent; }
  .nav a[aria-current="page"]::after { left: 0; right: auto; width: 3px; top: 12px; bottom: 12px; height: auto; }
  /* 按钮态要盖过 .nav a 的颜色/内距（.nav a 的权重 0-1-1 高于 .btn 的 0-1-0，
     不显式提权的话墨底上会变成灰字，实测对比度只剩 1.6:1）。 */
  .nav > a.btn { display: inline-flex; margin-top: var(--space-16); border-bottom: 0; padding: 0 22px; }
  .nav > a.btn--primary { background: var(--color-brand-ink); color: var(--color-brand-white); }
  .nav > a.btn--primary:hover { background: var(--color-neutral-700); color: var(--color-brand-white); }
}

/* ---------- 6. 首屏 ---------- */
.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }
.hero .t-display { max-width: 14em; }
.hero-lead { margin-top: var(--space-24); }
.hero .btn-row { margin-top: var(--space-32); }

/* ---------- 7. 卡片与栅格 ---------- */
.grid { display: grid; gap: var(--space-24); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--color-brand-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-office-md);       /* 6px */
  padding: clamp(20px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: var(--space-12);
}
.card--flat { background: transparent; border: 0; border-top: 1px solid var(--color-neutral-200); border-radius: 0; padding: var(--space-24) 0 0; }
.card h3 { font-size: var(--size-22); line-height: var(--leading-snug); }
/* 四栏并排时列宽只剩 ~270px，22px 标题会把词拆行；降一档到 18px 才排得住 */
.grid--4 .card h3 { font-size: var(--size-18); }
.grid--4 .card { gap: var(--space-8); }
.section--ink .card { background: var(--color-neutral-800); border-color: var(--color-neutral-700); }
.section--ink .card--flat { background: transparent; border-color: var(--color-neutral-700); }

/* 序号：编号是图形化重音，用墨色数字 + 红细线 */
.card .idx {
  font-family: var(--font-num); font-size: var(--size-12); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-neutral-500);        /* 白/纸白底 5.37:1，手册 §2.3 认定的辅助文字上限 */
  padding-bottom: var(--space-8); border-bottom: 2px solid var(--color-brand-red-office);
  align-self: flex-start;
}
.section--ink .idx { color: var(--color-neutral-400); }   /* 深底反过来：#9A958C / #2A2420 = 5.0:1 */

/* ⚠️ 2026-08-21：产品页已暂时撤下（见 _未上线/README.md）。
   下面第 8、8b、9 节（产品图槽位 / 产品行式列表 / 产品线板块头）当前站内未使用，
   **别删** —— 产品页放回去时要原样用上。 */

/* ---------- 8. 产品图槽位 ----------
   契约：把图片放进 assets/img/products/ 并按文件名引用即可，无需改 CSS/JS。
   图未就位时（404）由 site.js 打上 is-empty，落到下面这个体面的占位版式。 */
.pshot {
  position: relative; background: var(--color-brand-white);
  border: 1px solid var(--color-neutral-200); border-radius: var(--radius-office-md);
  overflow: hidden; aspect-ratio: 1 / 1;
}
.pshot--wide { aspect-ratio: 4 / 3; }
.pshot > img { width: 100%; height: 100%; object-fit: contain; padding: clamp(16px, 4%, 40px); }
.pshot .ph { display: none; }
.pshot.is-empty > img { display: none; }   /* 只藏产品图本体，不连占位里的翼形符号一起藏 */
.pshot.is-empty .ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  position: absolute; inset: 0; padding: 24px; text-align: center;
  background:
    linear-gradient(var(--color-neutral-100) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--color-neutral-100) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--color-brand-white);
}
.pshot.is-empty .ph .ph-sym { width: auto; height: 40px; opacity: .9; }
.pshot.is-empty .ph .ph-model {
  font-family: var(--font-num); font-size: var(--size-12); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); color: var(--color-neutral-500);
}

/* ---------- 8b. 产品列表（行式） ----------
   为什么不用卡片栅格：单条产品线目前只有 1 个在售型号，三栏栅格会空掉三分之二，
   看起来像没做完。行式版式从 1 条到 N 条都成立，新增 SKU 就是新增一行。 */
.plist { border-top: 2px solid var(--color-brand-ink); }
.prow {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: var(--space-32) 0;
  border-bottom: 1px solid var(--color-neutral-200);
}
.prow .pshot { aspect-ratio: 1 / 1; }
.prow .prow-body { display: flex; flex-direction: column; gap: 10px; }
.prow h3 { font-size: var(--size-28); line-height: var(--leading-snug); }
.prow .prow-go { flex: none; }
@media (max-width: 860px) {
  .prow { grid-template-columns: 1fr; gap: var(--space-20, 20px); padding: var(--space-24) 0; }
  .prow .pshot { max-width: 240px; }
  .prow .prow-go { align-self: start; }
}

/* ---------- 9. 产品线板块 ---------- */
.line-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; margin-bottom: var(--space-32); }
.line-mark { height: 30px; width: auto; }
.slogan {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
}

/* ---------- 10. 参数 / 清单表 ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: var(--size-14); }
.spec caption { text-align: left; font-size: var(--size-12); letter-spacing: var(--tracking-caps); color: var(--color-neutral-500); padding-bottom: var(--space-12); }
.spec th, .spec td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--color-neutral-200); vertical-align: top; }
.spec th { width: 34%; font-weight: var(--weight-medium); color: var(--color-neutral-600); background: var(--color-brand-paper); }
.spec tr:first-child th, .spec tr:first-child td { border-top: 2px solid var(--color-brand-ink); }
.table-scroll { overflow-x: auto; }

/* ---------- 10b. 二维码块 ----------
   二维码要能被扫到：留足静区、白底、别缩太小。180px 是手机扫码的舒适下限。 */
.qr-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px); align-items: center;
  background: var(--color-brand-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-office-md);
  padding: clamp(20px, 2.6vw, 32px);
}
.qr-shot {
  flex: none; width: 180px; height: 180px; padding: 8px;
  background: var(--color-brand-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-office-sm);
}
.qr-shot img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 560px) { .qr-card { grid-template-columns: 1fr; justify-items: start; } }

/* 图没就位就整块隐藏，不留半截空卡（由 site.js 打上 hidden） */
[hidden] { display: none !important; }

/* ---------- 11. 渠道 / 联系条目 ---------- */
.tile {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 108px; padding: var(--space-24);
  background: var(--color-brand-white);
  border: 1px solid var(--color-neutral-200); border-radius: var(--radius-office-md);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--easing-office-standard),
              transform var(--duration-fast) var(--easing-office-standard);
}
a.tile:hover { border-color: var(--color-brand-ink); }
@media (prefers-reduced-motion: no-preference) { a.tile:hover { transform: translateY(-2px); } }
.tile .k { font-size: var(--size-18); font-weight: var(--weight-bold); }
.tile .v { font-size: var(--size-14); color: var(--color-neutral-600); line-height: var(--leading-normal); }
.tile .go { margin-top: auto; font-size: var(--size-12); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--color-neutral-500); }
a.tile { position: relative; overflow: hidden; }
a.tile::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--color-brand-red-office);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--easing-office-standard);
}
a.tile:hover::after, a.tile:focus-visible::after { transform: scaleX(1); }
a.tile:hover .go { color: var(--color-brand-ink); }

/* ---------- 12. 要点列表 ---------- */
.bullets { display: grid; gap: var(--space-16); }
.bullets li {
  position: relative; padding-left: 26px;
  font-size: var(--size-16); line-height: var(--leading-loose);
  color: var(--color-neutral-700); max-width: 46em;
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--color-brand-ink);
}
.bullets--red li::before { background: var(--color-brand-red-office); }
.section--ink .bullets li { color: var(--color-neutral-200); }
.section--ink .bullets li::before { background: var(--color-brand-white); }

/* ---------- 13. 常见问题（原生 details，无 JS 依赖） ---------- */
.faq { border-top: 2px solid var(--color-brand-ink); }
.faq details { border-bottom: 1px solid var(--color-neutral-200); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: var(--size-18); font-weight: var(--weight-medium);
  min-height: var(--target-min);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-num); font-size: 22px; color: var(--color-neutral-500); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 20px; font-size: var(--size-16); line-height: var(--leading-loose); color: var(--color-neutral-700); max-width: 46em; }

/* ---------- 14. 页脚 ---------- */
.site-footer { background: var(--color-brand-ink); color: var(--color-neutral-300); padding: clamp(48px, 6vw, 72px) 0 var(--space-32); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.site-footer .brand img { width: 132px; }
/* 页脚是墨底，不能吃浅底口径的 neutral-600（实测 1.97:1）；300 于 #231815 = 7.66:1 */
.site-footer .t-small { color: var(--color-neutral-300); }
.footer-col h2 { font-size: var(--size-12); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--color-neutral-400); margin-bottom: var(--space-16); }
.footer-col li + li { margin-top: 2px; }
.footer-col a { display: inline-flex; align-items: center; min-height: var(--target-min);  /* 44px 触达下限 */ font-size: var(--size-14); color: var(--color-neutral-300); text-decoration: none; }
.footer-col a:hover { color: var(--color-brand-white); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--space-24);
  border-top: 1px solid var(--color-neutral-700);
  display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24);
  align-items: center; justify-content: space-between;
  font-size: var(--size-12); color: var(--color-neutral-400); line-height: var(--leading-normal);
}
.footer-bottom a { color: var(--color-neutral-400); text-decoration: none; }
.footer-bottom a:hover { color: var(--color-brand-white); text-decoration: underline; text-underline-offset: 3px; }
/* 备案号：单独一行、页面最下方。对比度 #BDB9B1 / #231815 = 7.66:1（实算，AA 通过）——
   手册 §2.3 的「400 及更浅灰阶禁作文字」是浅底口径，深底上反过来是越浅越清楚，
   此处按 WCAG 实算取值，并已在项目 README 登记为「深色面对比度补测」。 */
.beian {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-neutral-800);
  text-align: center;
  font-size: var(--size-12);
  line-height: var(--leading-normal);
}
.beian a {
  color: var(--color-neutral-300);
  text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: var(--target-min); padding: 0 8px;
}
.beian a:hover { color: var(--color-brand-white); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 15. 入场动效（§9.5：单次 ≤360ms · 无回弹 · 一屏一个动点） ----------
   为什么用 .js 作前置：初始隐藏态只在脚本确实跑起来时才生效。
   JS 被禁、脚本 404、爬虫不执行 JS——任何一种情况下内容都保持可见，
   而不是留下一片 opacity:0 的空白。失效方向永远朝「看得见」倒。 */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--duration-slow) var(--easing-office-standard),
                transform var(--duration-slow) var(--easing-office-standard);
  }
}

/* ---------- 16. 打印 ---------- */
@media print {
  .site-header, .nav-toggle, .btn-row, .skip { display: none !important; }
  body { background: #fff; }
  .section { padding: 24px 0; }
}

/* ---------- 17. 工具类 ----------
   为什么不用行内 style：全站 CSP 走严格档（style-src 'self'，不开 'unsafe-inline'），
   行内 style 属性会被浏览器直接丢弃。把这些间距/排布收成类，既能过 CSP，
   也让「改一处间距」不用满 HTML 找。 */
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: var(--space-24); }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: var(--space-48); }

.measure-sm { max-width: 24em; }
.measure-md { max-width: 860px; }

/* 卡片底部对齐的收尾行：把链接推到卡片最下沿，多卡并排时基线一致 */
.card-foot { margin-top: auto; padding-top: var(--space-16); }

/* 左文右钮的收尾条（首页/产品页/详情页的转场区共用） */
.split {
  display: flex; flex-wrap: wrap; gap: var(--space-24);
  align-items: center; justify-content: space-between;
}

.items-center { align-items: center; }
.items-start { align-items: start; }
.gap-lg { gap: clamp(32px, 5vw, 64px); }
.gap-24 { gap: var(--space-24); }

/* 图文卡：图片贴边、正文另起一块 */
.card--media { padding: 0; overflow: hidden; }
.card--media .pshot { border: 0; border-radius: 0; border-bottom: 1px solid var(--color-neutral-200); }
.card--media .card-body { padding: var(--space-24); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card--split { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-24); }

/* ============================================================
   18. 工程图纸方向（2026-08-24 定稿）
   把「参数精确」做成视觉母题：规格图首屏、横向规格条、描边序号、
   细线渠道行。红仍只做点睛；对比度全部沿用已实算组合。
   ============================================================ */

/* —— 首屏规格图：翼形符号 + VI 手册真实规格标注（净空 0.5H / 最小尺寸）——
     纯装饰（aria-hidden），品牌名由页眉标志承载。 */
.specsheet { position: relative; width: 100%; max-width: 560px; aspect-ratio: 600 / 560; margin-left: auto; }
.specsheet > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.specsheet > img { position: absolute; left: 26.7%; top: 31.8%; width: 46.6%; height: auto; }
@media (max-width: 960px) { .specsheet { margin: 0 auto; max-width: 440px; } }

/* —— 横向规格条：首屏下沿的一行事实（原竖排事实卡的新形态）—— */
.specstrip { display: flex; border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); }
.specstrip { justify-content: space-between; }
.specstrip .cell {
  flex: 0 1 auto; min-width: 0; padding: 22px 0;
  display: flex; align-items: baseline; gap: 12px;
}
.specstrip .cell + .cell { border-left: 1px solid var(--color-neutral-200); padding-left: clamp(16px, 2.2vw, 32px); }
.specstrip .k { flex: none; font-size: var(--size-12); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--color-neutral-500); }
.specstrip .v { font-size: var(--size-14); font-weight: var(--weight-medium); color: var(--color-brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .specstrip { flex-direction: column; }
  .specstrip .cell + .cell { border-left: 0; border-top: 1px solid var(--color-neutral-200); padding-left: 0; }
  .specstrip .cell { padding: 14px 0; }
  .specstrip .v { white-space: normal; }
}

/* —— 描边序号版块：左列图纸序号 + 右列内容 —— */
.numsec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); }
.num-index {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 120px); line-height: 1;
  color: var(--color-neutral-100);
  -webkit-text-stroke: 1.5px var(--color-neutral-300);
  user-select: none;
}
@media (max-width: 860px) {
  .numsec { grid-template-columns: 1fr; gap: var(--space-16); }
  .num-index { font-size: 56px; }
}

/* 版块内的两线卡：去卡片壳，改顶部墨色粗线（图纸表格的读法） */
.numsec .card {
  background: transparent; border: 0; border-radius: 0;
  border-top: 2px solid var(--color-brand-ink);
  padding: 26px 0 0;
}

/* —— 渠道：细线行代替卡片（一行一个平台，整行可点）—— */
.chanlist { display: flex; flex-direction: column; }
.chanrow {
  display: flex; align-items: center; gap: var(--space-24);
  padding: 24px 0; min-height: var(--target-comfort);
  border-top: 1px solid var(--color-neutral-200);
  text-decoration: none; color: inherit;
  transition: background var(--duration-fast) var(--easing-office-standard);
}
.chanlist .chanrow:last-of-type { border-bottom: 1px solid var(--color-neutral-200); }
.chanrow:hover { background: var(--color-brand-white); }
.chanrow .i { flex: none; width: 2.4em; font-family: var(--font-num); font-size: var(--size-12); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--color-neutral-500); }
.chanrow .k { font-size: var(--size-18); font-weight: var(--weight-bold); color: var(--color-brand-ink); }
.chanrow .v { font-size: var(--size-14); color: var(--color-neutral-500); }
.chanrow .go-arrow { margin-left: auto; flex: none; color: var(--color-brand-ink); transition: transform var(--duration-fast) var(--easing-office-standard); }
@media (prefers-reduced-motion: no-preference) { .chanrow:hover .go-arrow { transform: translateX(4px); } }
@media (max-width: 640px) {
  .chanrow { flex-wrap: wrap; gap: 8px var(--space-16); padding: 18px 0; }
  .chanrow .v { width: 100%; padding-left: calc(2.4em + var(--space-16)); margin-top: -4px; }
  .chanrow .go-arrow { position: absolute; right: 0; }
  .chanrow { position: relative; }
}

/* —— 品牌总览页：标志 + 文案横排 —— */
.brandrow { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: var(--space-24); }
.brandrow > img { width: 100%; max-width: 212px; height: auto; }
@media (max-width: 720px) { .brandrow { grid-template-columns: 1fr; } .brandrow > img { max-width: 168px; } }

/* —— 达芬奇蒙暖黄主场的内衬（结构挂 site.css，颜色在 dv.css）—— */
.dv-stage-in { display: flex; flex-direction: column; gap: var(--space-24); padding: clamp(36px, 5vw, 64px); }
.dv-stage-in > img { width: 220px; height: auto; }