/* ============================================================
   JusTangerine 官网 —— 全站样式（票 05）
   中英文共用**一份**：分开维护必然漂移，旧站英文版出现过三处中文残留就是证据。

   来源与偏离：
     · 视觉方向 = 票 15 选定的 C · 图像主导（原型 prototypes/15-site-direction/）
     · 内页构件 = 票 16（原型 prototypes/16-inner-pages/pages.css）
     · **原型里被票 18 判为越界的值一律不照抄**，按 18 的定值写在这里，
       每一处都在注释里点名。原型是记录，不改；这里是生产。
   ============================================================ */

:root {
  /* 官方橙 #E89B20 实测（WCAG 2.1）拆成三档，用途互不越界：
       on 奶油白 2.15 ✗ 不能当文字色 · 白字 on 橙 2.30 ✗ 橙底不能配白字
       深褐 on 橙 7.34 ✓ · 橙 on 近黑 7.88 ✓
     金色 --accent #c89968 已废弃（与橙同色相邻近，并存显脏且对比度更糟）。 */
  --brand:      #E89B20;  /* 展示色：背景块、图形、深底上的字、≥24px 粗体 */
  --brand-mid:  #c27f14;  /* 3.10 — 浅底上的大字 / UI 图形 */
  --brand-ink:  #996410;  /* 4.69 — 浅底上唯一可用的橙色正文与链接色 */

  --cream:  #f9f7f4;
  --paper:  #ffffff;
  --dark:   #1a1512;

  --ink:       #2c2c2c;
  --ink-deep:  #2c1810;
  --ink-soft:  #6b6259;
  --ink-faint: #9a9088;
  --rule:      #e4ded6;
  --rule-dark: #3a2f27;
  /* 票 18 表第 3 条：#a99e92 → #c9c0b6。深色带上的正文原值不足 4.5 */
  --ink-on-dark: #c9c0b6;

  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px; --s10: 144px;

  --gutter: clamp(20px, 5vw, 72px);
  /* 票 18 表第 1 条：展示字（Cormorant）不得低于 28px。低于此的位置一律改
     Instrument Sans —— **加字重救不了**（21px 从 400 提到 500，最细笔画 0.39px 纹丝不动）。
     凡出现这个变量的地方即为贴着下限的位置。 */
  --display-min: 28px;

  --font-sans: 'Instrument Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-sans);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }
.c-display { font-family: var(--font-display); font-weight: 300; letter-spacing: -.005em; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--ink-deep); padding: var(--s3) var(--s5);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ── 三态资产 ────────────────────────────────────────────────
   占位必须**难看**：它唯一的职责是让任何人打开页面第一眼就看见它。
   规格来自 docs/pending-assets.md §4.3，别美化。
   临时件（data-interim）正常显示、不露痕迹 —— 闸门只拦真空洞。
──────────────────────────────────────────────────────────── */
.ph {
  display: inline-block;
  padding: .1em .45em;
  border: 1px dashed var(--brand);
  border-radius: 3px;
  color: var(--brand-ink);
  background: rgba(232, 155, 32, .08);
  font-family: var(--font-sans);
  font-size: .9em;
  letter-spacing: 0;
  text-transform: none;
}
.ph::before { content: "⚠ "; }
.c-band--dark .ph, .c-end .ph, .nf .ph { color: var(--brand); }
/* 整页占位：正文该在的地方留一个可见的空 —— 不撑版式，也不假装有内容 */
.page-ph { padding: var(--s6) 0 var(--s9); }

/* ── 图像位 ────────────────────────────────────────────────
   图没到位时回落到抽象色场（票 19）：<img> 的 onerror 把自己摘掉，不出裂图；
   onload 加 .has-img 去掉色场。真图落盘后同一份 markup 自动变真图。
──────────────────────────────────────────────────────────── */
.slot {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(232,155,32,.28), transparent 60%),
    radial-gradient(90% 80% at 85% 80%, rgba(44,24,16,.30), transparent 62%),
    linear-gradient(155deg, #e8ded1 0%, #d9cdbd 45%, #c9bcab 100%);
}
.slot--dark {
  background:
    radial-gradient(110% 85% at 25% 20%, rgba(232,155,32,.35), transparent 58%),
    radial-gradient(100% 90% at 80% 85%, rgba(90,60,35,.55), transparent 60%),
    linear-gradient(160deg, #2a211a 0%, #1a1512 60%, #120e0c 100%);
}
.slot > img { width: 100%; height: 100%; object-fit: cover; }
.slot.has-img { background: var(--cream); }
/* Monsieur BARBIER 是唯一的去背图。留白已由 build-brand-images.py 烘进图里
   （画布色 = --cream），**这里再加 padding 会二次缩小**，故不加。 */
.slot--contain > img { object-fit: contain; }
.r-3x4 { aspect-ratio: 3/4; }

/* ── 导航 ──────────────────────────────────────────────────
   首页：浮在整屏 hero 上（白字透明底），滚动后落地为奶油白毛玻璃。
   内页：没有整屏 hero，所以一进页面就是「已落地」状态。
──────────────────────────────────────────────────────────── */
.c-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.c-nav .wrap { display: flex; align-items: center; gap: var(--s6); height: 76px; }
/* 官方字标是黑色单色稿：浅底用 --ink-deep（最接近原稿的黑），深底反白。
   不染品牌橙 —— 原先那个橙色文字 wordmark 是临时件的配色，不是品牌规范 */
.c-mark { color: #fff; margin-right: auto; transition: color .3s; line-height: 0; }
.c-mark-svg { display: block; height: 26px; width: auto; }
.c-panel { display: contents; }
.c-nav nav { display: flex; gap: var(--s6); }
.c-nav nav a {
  text-decoration: none; font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78); transition: color .3s; white-space: nowrap;
}
.c-nav nav a:hover { color: var(--brand); }
.c-lang { font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.55); transition: color .3s; white-space: nowrap; }
.c-lang a { text-decoration: none; }
.c-lang a[aria-current] { color: var(--brand); }

body.c-scrolled .c-nav { background: rgba(249,247,244,.95); backdrop-filter: blur(10px); border-bottom-color: var(--rule); }
body.c-scrolled .c-mark { color: var(--ink-deep); }
body.c-scrolled .c-nav nav a { color: var(--ink-soft); }
body.c-scrolled .c-nav nav a:hover { color: var(--brand-ink); }
body.c-scrolled .c-lang { color: var(--ink-faint); }
body.c-scrolled .c-lang a[aria-current] { color: var(--brand-ink); }

.page--inner .c-nav { position: sticky; background: rgba(249,247,244,.95); backdrop-filter: blur(10px); border-bottom-color: var(--rule); }
.page--inner .c-mark { color: var(--ink-deep); }
.page--inner .c-nav nav a { color: var(--ink-soft); }
.page--inner .c-nav nav a:hover,
.page--inner .c-nav nav a[aria-current] { color: var(--brand-ink); }
.page--inner .c-nav nav a[aria-current] { border-bottom: 1px solid var(--brand); padding-bottom: 3px; }
.page--inner .c-lang { color: var(--ink-faint); }
.page--inner .c-lang a[aria-current] { color: var(--brand-ink); }
.page--inner main { padding-top: 0; }

/* 汉堡按钮 —— 桌面端不存在（不是 visibility:hidden，是不占位） */
.c-burger { display: none; }

/* ── Hero ──────────────────────────────────────────────── */
.c-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; }
.c-hero .slot { position: absolute; inset: 0; }
.c-hero .scrim {
  position: absolute; inset: 0;
  /* 票 18 表第 5 条：中段 .45 → .62。顶部 .30 与底部 .86 **不动** ——
     保住「图像主导」的上半通透。材质亮度上限（H1 框内最亮 2% ≤ #d5d5d5）
     是按这一版暗层算的，两者必须同改。 */
  background: linear-gradient(to top, rgba(12,9,7,.86) 0%, rgba(12,9,7,.62) 45%, rgba(12,9,7,.30) 100%);
}
.c-hero .wrap { position: relative; padding-bottom: clamp(56px, 9vh, 110px); padding-top: 120px; }
.c-hero .eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brand); margin-bottom: var(--s5);
}
.c-hero h1 { font-size: clamp(38px, 6vw, 84px); line-height: 1.08; max-width: 16ch; color: #fff; }
.c-hero h1 em { font-style: italic; color: var(--brand); }
.c-rule { width: 56px; height: 2px; background: var(--brand); margin: var(--s6) 0; }
.c-hero .sub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; max-width: 44ch; color: rgba(255,255,255,.82); }
.c-hero .cue {
  margin-top: var(--s7); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 10px;
}
.c-hero .cue::after { content: ""; width: 40px; height: 1px; background: rgba(255,255,255,.35); }

/* ── 通栏明暗交替带 ──────────────────────────────────────── */
.c-band { padding: clamp(72px, 11vw, 150px) 0; }
.c-band--dark { background: var(--dark); color: #e9e2d9; }
.c-band--dark h2, .c-band--dark h3 { color: #fff; }
.c-band--dark p { color: var(--ink-on-dark); }
.c-band--flush-top { padding-top: 0; }
/* 紧跟在 .p-head 之后的浅色带：两者都带大内边距，叠起来是 240px 的空洞。
   深色带不需要（背景色本身就是分界），所以这条只给浅色的第一块。 */
.c-band--soft-top { padding-top: var(--s7); }
.c-band--tight { padding: clamp(56px, 7vw, 96px) 0; }
.c-band--strip { padding-bottom: clamp(48px, 7vw, 90px); }
.c-band-intro { max-width: 56ch; }
.c-h2 { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; }
.c-h2--narrow { max-width: 24ch; font-size: clamp(28px, 3.4vw, 44px); }
.c-h2--ink { color: var(--ink-deep); }
.c-h2--brand { font-size: clamp(30px, 3.6vw, 50px); }

.c-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
/* 票 21：4:5 编辑位取消，改放 01 定死口径的三个数字（同时满足展示字 ≥28px） */
.c-split-stats { display: flex; flex-direction: column; gap: var(--s7); }
.c-split-stats .c-fact { text-align: left; }
.c-split-stats .c-fact b { font-size: clamp(34px, 3.8vw, 54px); }
.c-split-stats .c-fact span { max-width: 30ch; }
.c-split h2 { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; color: var(--ink-deep); margin-bottom: var(--s5); }
.c-split p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); max-width: 48ch; }
.c-split p + p { margin-top: var(--s4); }

.c-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: var(--s5);
}
.c-band--dark .c-eyebrow, .nf .c-eyebrow { color: var(--brand); }
.c-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s6); text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-ink); border-bottom: 1px solid var(--brand); padding-bottom: 6px;
}
.c-band--dark .c-link { color: var(--brand); }
.c-link--flush { margin-top: 0; }
.c-link--tight { margin-top: var(--s4); }

.c-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: var(--s8); }
.c-cap .no { font-family: var(--font-display); font-size: 46px; font-weight: 300; color: var(--brand); line-height: 1; margin-bottom: var(--s4); }
/* 票 16 查出的第二处继承违例：variant-c.css 是 26px */
.c-cap h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--display-min); color: var(--ink-deep); margin-bottom: var(--s3); }
.c-band--dark .c-cap h3 { color: #fff; }
.c-cap p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* ── 品牌横向滚动带（首页）──────────────────────────────── */
.c-strip {
  display: flex; gap: var(--s5); overflow-x: auto;
  /* 左内边距对齐 .wrap 的内沿（而不是只用 --gutter）——否则第一张卡片与它上方的
     「Brands」标题差十几个像素，在这个尺度上读起来是错位不是有意的出血。
     右侧仍然出血：卡片继续越过 wrap 边缘，那是横向带该有的样子。 */
  padding: 0 max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))) var(--s5);
  scroll-snap-type: x mandatory;
  /* 没有这一行，mandatory 会在加载时把第一张卡片吸到**内容盒**起点，
     等于把 padding-left 滚掉（实测 scrollLeft = 64）——首张卡片贴死视口左缘，
     且往左再也滚不回来。scroll-padding 把吸附口推到 padding 边缘。 */
  scroll-padding-inline: max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter)));
  -webkit-overflow-scrolling: touch;
}
.c-strip::-webkit-scrollbar { height: 3px; }
.c-strip::-webkit-scrollbar-thumb { background: var(--brand-mid); }
.c-brand { flex: 0 0 clamp(240px, 26vw, 340px); scroll-snap-align: start; text-decoration: none; }
.c-brand .slot { margin-bottom: var(--s4); }
/* 票 18 表第 2 条：品牌带品牌名 25px → 28px */
.c-brand h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--display-min); color: var(--ink-deep); }
.c-brand .meta { margin-top: 6px; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.c-brand:hover h3 { color: var(--brand-ink); }
.c-strip-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); margin-bottom: var(--s7); flex-wrap: wrap; }
.c-strip-head h2 { font-size: clamp(28px, 3.6vw, 48px); color: var(--ink-deep); }

/* ── 事实带 ────────────────────────────────────────────── */
.c-fact b { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 4.4vw, 62px); line-height: 1; color: var(--brand-ink); }
.c-band--dark .c-fact b { color: var(--brand); }
.c-fact span { display: block; margin-top: var(--s3); font-size: 12px; letter-spacing: .08em; color: var(--ink-faint); line-height: 1.5; }

/* ── 首页履历带 ────────────────────────────────────────── */
.c-record { max-width: 760px; }
/* 票 18 第 3 条：clamp 下限 22px 低于 28px 下限，抬到 28px */
.c-record .lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(var(--display-min), 2.5vw, 32px); line-height: 1.45; color: var(--ink-deep); }
.c-band--dark .c-record .lead { color: #f2ece4; }
.c-years { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); margin-top: var(--s7); }
.c-year b { display: block; font-size: 12px; letter-spacing: .14em; color: var(--brand); margin-bottom: 5px; }
/* 票 18 表第 2 条：21px 的展示字改 Instrument Sans（不放大，会与其上 12px 的年份倒挂）。
   17px 是票 16 的落地值 —— 无衬线的 x-height 更大，同一光学重量对应更小的字号。 */
.c-year span { font-family: var(--font-sans); font-size: 17px; letter-spacing: .01em; color: #f2ece4; }

/* ── 首页收尾 CTA ──────────────────────────────────────── */
.c-end { position: relative; min-height: 68vh; display: flex; align-items: center; text-align: center; color: #fff; padding: var(--s9) 0; }
.c-end .slot { position: absolute; inset: 0; }
.c-end .scrim { position: absolute; inset: 0; background: rgba(12,9,7,.7); }
.c-end .wrap { position: relative; }
.c-end h2 { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.15; margin-bottom: var(--s5); }
.c-end-lead { color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.7; max-width: 46ch; margin: 0 auto; }
/* 展示字下限：原型是 clamp(22px, …)，低于 28px */
.c-end .mail {
  display: inline-block; margin-top: var(--s5);
  font-family: var(--font-display); font-size: clamp(var(--display-min), 2.6vw, 34px);
  color: var(--brand); text-decoration: none;
  border-bottom: 1px solid rgba(232,155,32,.5); padding-bottom: 6px;
}
.c-end .alt { margin-top: var(--s7); }
.c-end .c-qrs { justify-content: center; }
.c-end .c-qr { text-align: center; }
.c-end .c-qr-label, .c-end .c-qr figcaption { color: rgba(255,255,255,.6); }
.c-end .c-qr a { color: var(--brand); }
.c-end .c-qr img { border-color: transparent; }

/* ── 页脚 ──────────────────────────────────────────────── */
.c-foot { background: var(--cream); padding: var(--s8) 0 var(--s6); font-size: 13.5px; color: var(--ink-soft); }
.c-foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s7); }
.c-foot h4 { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s4); }
.c-foot li, .c-foot p { line-height: 1.85; }
.c-foot a { color: var(--brand-ink); }
.c-legal { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-faint); display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; align-items: center; }

/* ── 内页：面包屑 ──────────────────────────────────────────
   **只在品牌详情页出现**（票 16 Q7）。其余页没有真实层级，
   硬造 BreadcrumbList 是给检索器编一个不存在的结构。
──────────────────────────────────────────────────────────── */
.crumb { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); padding-top: var(--s7); }
.crumb a { color: var(--brand-ink); text-decoration: none; }
.crumb span { margin: 0 10px; color: var(--rule); }

/* ── 内页页首（排版型）──────────────────────────────────── */
.p-head { padding: var(--s7) 0 clamp(48px, 7vw, 96px); }
.crumb + .p-head { padding-top: var(--s5); }
.p-head h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 6.4vw, 88px); line-height: 1.05;
  color: var(--ink-deep); max-width: 18ch; letter-spacing: -.005em;
}
.p-head h1 em { font-style: italic; color: var(--brand-ink); }
.p-head .lead, .lead-block p {
  margin-top: var(--s6); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7;
  color: var(--ink-soft); max-width: 56ch;
}
.p-meta { margin-top: var(--s5); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.p-meta b { color: var(--ink-soft); font-weight: 500; }

/* ── 事实条 ────────────────────────────────────────────────
   一行 2–4 个「值 + 标签」。**无值的字段整个不渲染，不留可见占位**：
   skuCount 六个品牌全 null，所以这条上永远看不到 SKU 数那一格。
──────────────────────────────────────────────────────────── */
.rail { display: flex; flex-wrap: wrap; gap: var(--s7); padding: var(--s6) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rail--loose { margin-top: var(--s6); }
.rail-item b { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(var(--display-min), 3vw, 40px); line-height: 1.1; color: var(--brand-ink); }
.rail-item span { display: block; margin-top: var(--s2); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }

/* ── 正文散文 ──────────────────────────────────────────── */
.prose { max-width: 60ch; }
.prose--wide { max-width: 64ch; }
.prose p { font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); }
.prose p + p { margin-top: var(--s5); }
.prose h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.2; color: var(--ink-deep); margin-bottom: var(--s5); }
.prose h2:not(:first-child) { margin-top: var(--s7); }
.prose h2 + p { margin-top: 0; }
.prose strong { font-weight: 600; color: var(--ink-deep); }

/* 品牌详情页的图文对开：图**固定在 340px 一档，不许放大** ——
   六张原图 3:4 裁切后最短板 820px，2 倍图下这就是它的上限（票 16 Q1）。 */
.b-body { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.b-body .slot { position: sticky; top: 104px; }

/* 代表产品：只有名字（04 决定不建「产品」数据类型 —— 无规格、无价、无图）。
   卡片式版式在这里必然露出三个空槽，所以是一列名字。 */
.sig { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); margin-top: var(--s5); }
.sig li { font-family: var(--font-display); font-weight: 400; font-size: var(--display-min); color: var(--ink-deep); line-height: 1.3; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; padding: var(--s7) 0; border-top: 1px solid var(--rule); }
.pager a { text-decoration: none; display: block; }
.pager .dir { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.pager .nm { display: block; font-family: var(--font-display); font-size: var(--display-min); color: var(--ink-deep); }
.pager a:hover .nm { color: var(--brand-ink); }
.pager .to-right { text-align: right; }
.pager .to-index { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }

/* ── 品牌索引 ──────────────────────────────────────────────
   **3 列是素材定的，不能改 2 列**：单元格约 397px，2 倍需 794px，
   derived/ 的 800 档刚好压线（票 16 Q1 的同源约束）。
──────────────────────────────────────────────────────────── */
.b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 56px) var(--s5); }
.b-grid .c-brand { flex: none; }
.b-grid .blurb { margin-top: var(--s3); font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* ── 履历年表 ──────────────────────────────────────────── */
.tl-group + .tl-group { margin-top: clamp(56px, 8vw, 110px); }
.tl-head { border-top: 2px solid var(--brand); padding-top: var(--s5); margin-bottom: var(--s7); }
.tl-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; color: var(--ink-deep); }
.tl-head .say { margin-top: var(--s4); font-size: 16px; line-height: 1.75; color: var(--ink-soft); max-width: 62ch; }
.c-band--dark .tl-head .say { color: var(--ink-on-dark); }

.tl-item { display: grid; grid-template-columns: 130px 1fr; gap: var(--s5); padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.c-band--dark .tl-item { border-top-color: var(--rule-dark); }
.tl-year { font-size: 12.5px; font-weight: 600; letter-spacing: .13em; color: var(--brand-ink); padding-top: 8px; }
.c-band--dark .tl-year { color: var(--brand); }
.tl-item h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(var(--display-min), 2.6vw, 34px); color: var(--ink-deep); line-height: 1.2; }
.tl-item p { margin-top: var(--s3); font-size: 16px; line-height: 1.75; color: var(--ink-soft); max-width: 56ch; }
.c-band--dark .tl-item p { color: var(--ink-on-dark); }

/* relationship / status 两个轴票 13 未填 —— **有值才渲染**，无值不留占位 */
.tag { display: inline-block; margin-top: var(--s4); margin-right: var(--s3); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--brand-mid); color: var(--brand-ink); border-radius: 2px; }
.c-band--dark .tag { border-color: rgba(232,155,32,.5); color: var(--brand); }
.tag--gmv { border-style: dashed; }

/* ── 渠道网络 ──────────────────────────────────────────────
   分层，不是统一卡片网格：有数字的与只有名字的不做成同一种构件，
   否则会诱导读者以为每家背后都有数据（票 16 Q5）。
──────────────────────────────────────────────────────────── */
.pt-lead { max-width: 60ch; margin-top: var(--s5); }
.pt-lead p { font-size: 17px; line-height: 1.8; }
.pt-lead p + p { margin-top: var(--s4); }
.pt-note { margin-top: var(--s5); font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); max-width: 60ch; }
/* 六格 3×2，不是一排五个：门店数与流量指标不是同一类东西，
   硬排一行会让门店数读成第六个流量指标 */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7) var(--s6); margin-top: var(--s7); }
.metrics .c-fact b { font-size: clamp(30px, 3.2vw, 46px); }
.metrics .c-fact span { max-width: 18ch; }

.ch-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s7) clamp(32px, 6vw, 90px); }
.ch-list h3 { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.ch-h3--spaced { margin-top: var(--s7); }
.ch-list ul { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.ch-list li { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
/* 展会走一行、不占第四列（票 26）—— 一条记录撑不起一列，
   而它证明的是行业在场不是铺货面 */
.ch-events { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-soft); }
.ch-events b { font-weight: 500; color: var(--ink-deep); }

/* ── 三大业务 ──────────────────────────────────────────── */
.sv { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.sv-no { font-family: var(--font-display); font-weight: 300; font-size: clamp(56px, 7vw, 96px); line-height: .9; color: var(--brand); }
.sv h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; color: var(--ink-deep); margin-top: var(--s4); }
/* 深色带上的板块标题：不写这一条它就是深褐压近黑，实测在 /services/ 的 02 板块上不可读。
   .c-band--dark h2 的通用规则被 .sv h2 的更高特异性盖掉了 —— 这是把原型拆成
   构件时最容易掉的一类：原型里每个构件自带深色态，拆开后要逐个接回去。 */
.c-band--dark .sv h2 { color: #fff; }
.sv-caps li { font-size: 16px; line-height: 1.7; color: var(--ink-soft); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.c-band--dark .sv-caps li { color: var(--ink-on-dark); border-bottom-color: var(--rule-dark); }
.sv-mech { margin-top: var(--s5); font-size: 16px; line-height: 1.8; color: var(--ink-soft); max-width: 52ch; }
.c-band--dark .sv-mech { color: var(--ink-on-dark); }

/* ── FAQ ───────────────────────────────────────────────────
   08 定「首句即答案」，版式要**强化**它：首句独立成栏、比正文大一号、
   左边一条橙线；其余答案降为次级。检索器抓的是首句，人扫的也是首句。
──────────────────────────────────────────────────────────── */
.faq-item { padding: clamp(36px, 4.5vw, 64px) 0; border-top: 1px solid var(--rule); scroll-margin-top: 100px; }
.faq-item h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(var(--display-min), 2.8vw, 36px); line-height: 1.25; color: var(--ink-deep); max-width: 30ch; }
.faq-a { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: var(--s5); }
.faq-first { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; color: var(--ink-deep); border-left: 2px solid var(--brand); padding-left: var(--s5); }
.faq-rest { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); }
.faq-cta { margin-top: var(--s5); display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); text-decoration: none; border-bottom: 1px solid var(--brand); padding-bottom: 5px; }
.faq-rev { margin-top: var(--s7); font-size: 12px; letter-spacing: .08em; color: var(--ink-faint); }

/* ── 联系 ──────────────────────────────────────────────────
   无表单。读者卡住的从来不是没有输入框，是不知道第一封信要写什么。
──────────────────────────────────────────────────────────── */
.ct { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.ct-mail { display: inline-block; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); color: var(--brand-ink); text-decoration: none; border-bottom: 1px solid var(--brand); padding-bottom: 8px; }
.ct-ask { margin-top: var(--s8); }
.ct-ask li { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--rule); font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.ct-ask .n { font-family: var(--font-display); font-size: var(--display-min); color: var(--brand); line-height: 1; }
.ct-after { margin-top: var(--s6); font-size: 15px; line-height: 1.75; color: var(--ink-soft); max-width: 52ch; }
.ct-side dt { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s3); }
.ct-side dd { margin: 0 0 var(--s6); font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.ct-side dd a { color: var(--brand-ink); }
/* 即时联系二维码（partials/im-qrs.njk）：联系页侧栏 + 首页尾屏共用，深底的配色覆盖在 .c-end 那组 */
.c-qrs { display: flex; gap: var(--s5); flex-wrap: wrap; }
.c-qr-label { display: block; font-size: 12.5px; color: var(--ink-faint); margin-bottom: var(--s3); }
/* 二维码自带的白边已裁掉，留白由这里补回 —— 扫码需要静区，深底上也必须是白底 */
.c-qr { margin: 0; width: 148px; scroll-margin-top: 100px; }
.c-qr img { display: block; width: 100%; height: auto; background: #fff; padding: 10px; border: 1px solid var(--rule); }
.c-qr figcaption { margin-top: var(--s3); font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }

/* ── 404 ───────────────────────────────────────────────── */
.nf { min-height: 72vh; display: flex; align-items: center; background: var(--dark); color: #fff; padding: var(--s9) 0; }
.nf h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6vw, 80px); line-height: 1.1; color: #fff; }
.nf .code { font-size: 12px; font-weight: 600; letter-spacing: .22em; color: var(--brand); margin-bottom: var(--s5); }
.nf p { margin-top: var(--s5); font-size: 17px; line-height: 1.75; color: var(--ink-on-dark); max-width: 46ch; }
.nf .outs { margin-top: var(--s7); display: flex; gap: var(--s6); flex-wrap: wrap; }
.nf .outs a { color: var(--brand); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(232,155,32,.5); padding-bottom: 6px; }

/* ── 中文侧的排版调整 ──────────────────────────────────────
   **字族不在这里换** —— 中文字体已经在全站字族栈里（Instrument Sans /
   Cormorant 排在前面吃拉丁，Noto Sans SC / Noto Serif SC 兜汉字），
   所以中英共用一份栈、按码位分工。这里只调中文需要的字号、行距与字距。
   票 18 定：标题宋体 500 一档 + 正文黑体 400 一档，层级用字号与颜色拉，不用字重。
──────────────────────────────────────────────────────────── */
.lang-zh .p-head h1 { font-size: clamp(32px, 4.6vw, 62px); line-height: 1.25; letter-spacing: .01em; max-width: 22ch; }
.lang-zh .c-hero h1 { font-size: clamp(32px, 5vw, 68px); line-height: 1.25; max-width: 20ch; }
.lang-zh .p-head .lead, .lang-zh .lead-block p, .lang-zh .prose p,
.lang-zh .ch-list li, .lang-zh .tl-item p { line-height: 1.9; }
/* 中文没有 uppercase / 大字距的排版传统，小标签一律回落到正常字距 */
.lang-zh .c-eyebrow, .lang-zh .p-meta, .lang-zh .ch-list h3, .lang-zh .c-fact span,
.lang-zh .rail-item span, .lang-zh .ct-side dt, .lang-zh .c-foot h4, .lang-zh .crumb,
.lang-zh .c-brand .meta, .lang-zh .pager .dir, .lang-zh .tl-year, .lang-zh .tag,
.lang-zh .c-nav nav a, .lang-zh .c-link, .lang-zh .faq-cta, .lang-zh .nf .outs a,
.lang-zh .c-hero .eyebrow, .lang-zh .c-hero .cue, .lang-zh .pager .to-index {
  text-transform: none; letter-spacing: .04em;
}
.lang-zh .c-eyebrow, .lang-zh .p-meta, .lang-zh .ch-list h3,
.lang-zh .c-fact span, .lang-zh .rail-item span, .lang-zh .ct-side dt { font-size: 12.5px; }

/* ── 响应式 ────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .b-body, .faq-a, .ct, .sv { grid-template-columns: 1fr; }
  .b-body .slot { position: static; max-width: 340px; }
  .b-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-list { grid-template-columns: 1fr; }
}

/* ≤900px：导航收进抽屉。
   原型在这个断点直接 display:none 掉导航链接且**无替代入口**（首页只犯一次，
   内页 14 页每页都犯）—— 票 16 把它留成「必须有人认领的缺口」，
   用户 2026-09-08 选定抽屉式汉堡菜单，这里是它的落地。 */
@media (max-width: 900px) {
  .c-split, .c-caps, .metrics { grid-template-columns: 1fr; }
  .c-foot .cols { grid-template-columns: 1fr; }
  .c-nav .wrap { gap: var(--s4); }

  /* ⚠ 抽屉是 position:fixed，而 backdrop-filter 会让 .c-nav 成为固定定位的
     **包含块** —— 带着它，抽屉会被困在 76px 高的导航条里（实测 rect 375×160）。
     移动端去掉毛玻璃：抽屉本来就用不透明的奶油白盖住整屏，模糊无处可见，
     顺带省掉一层移动端最贵的合成。 */
  .c-nav,
  .page--inner .c-nav,
  body.c-scrolled .c-nav { backdrop-filter: none; }

  /* 抽屉是 .c-nav 的子元素，z-index 55 在导航自己的层叠上下文里 ——
     wordmark 与汉堡按钮是 z-auto 的兄弟，会被抽屉盖住（实测：打开后整条导航消失，
     连关闭按钮都点不到）。把这两件抬到抽屉之上。 */
  .c-mark, .c-burger { position: relative; z-index: 56; }

  .c-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; margin-right: -10px;
    background: none; border: 0; cursor: pointer;
  }
  .c-burger-bar { display: block; height: 1.5px; background: #fff; transition: transform .25s, opacity .2s, background .3s; }
  body.c-scrolled .c-burger-bar, .page--inner .c-burger-bar { background: var(--ink-deep); }
  body.nav-open .c-burger-bar { background: var(--ink-deep); }
  body.nav-open .c-burger-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
  body.nav-open .c-burger-bar:last-child { transform: translateY(-3.25px) rotate(-45deg); }

  .c-panel {
    display: flex; flex-direction: column; justify-content: center; gap: var(--s7);
    position: fixed; inset: 0; z-index: 55;
    padding: 96px var(--gutter) var(--s8);
    background: var(--cream);
    /* 关着的时候必须真的不可达 —— 只做视觉隐藏，Tab 会掉进抽屉里 */
    visibility: hidden; opacity: 0;
    transition: opacity .25s, visibility .25s;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .c-panel { visibility: visible; opacity: 1; }
  .c-panel nav { flex-direction: column; gap: var(--s5); }
  .c-nav nav a,
  body.c-scrolled .c-nav nav a { font-size: 15px; letter-spacing: .1em; color: var(--ink-deep); }
  .c-nav nav a[aria-current] { color: var(--brand-ink); }
  .c-lang, body.c-scrolled .c-lang { font-size: 14px; color: var(--ink-faint); }
  .c-panel .c-lang { padding-top: var(--s5); border-top: 1px solid var(--rule); }
}

@media (max-width: 640px) {
  .b-grid { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: var(--s3); }
  .rail { gap: var(--s6); }
  .c-hero .wrap { padding-top: 96px; }
  .pager { gap: var(--s6); }
}