/* ══ 自托管字体 ══════════════════════════════════════════════
   🔴 ⛔ 绝不回挂 fonts.googleapis.com —— 大陆不可达,而货源基本盘在中国。
   Jost   = 展示/标题(与 LOGO 同源,Victor 已拍板)
   Archivo= 正文 —— ⚠️ 特意不用 IBM Plex Sans:ViRi 用的就是 Plex,
            两站共用正文字体是它们看起来像亲兄弟的主因。VFE 要自己一套。
   JetBrains Mono = 数据/标签 —— 同理替掉 IBM Plex Mono。 */
@font-face{font-family:Jost;src:url(/assets/fonts/jost-400-latin.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-500-latin.woff2)format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-600-latin.woff2)format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin.woff2)format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-latin.woff2)format("woff2");
  font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-latin.woff2)format("woff2");
  font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin.woff2)format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap}

/* Victory Far East — design system
   方向 A「Ink & Steel」: 冷白底 + 深孔雀蓝 + 高对比衬线标题
   字体:标题 = Newsreader 300(Victor 2026-08-30 放行,与 ViRi 同款)
        正文 = Archivo · 数据/标签 = JetBrains Mono · Jost 只留给 logo 字标
   ⚠️ 全部自托管;⛔ 别改回集团共用的 IBM Plex —— 那会让本站和 ViRi 撞脸
   ⛔ 别手改生成出来的 .html —— 改这里,然后跑 build.py */

:root{
  /* ── 配色 v2(Victor 2026-08-30 定:navy 出局,「很老气」) ──────────
     🔴 依据仍然是 LOGO 本体 —— 标记里其实有**四个**取样色,不是两个:
        LIME #9CC048(翼/环) · NAVY var(--accent)(体) · OCEAN #0A6A97(冠羽) · SKY #1C89B7(亮面)
     深蓝只是其中之一。把主强调色换成**冠羽的 OCEAN**,既摘掉老气,又仍然出自标记本身。

     ⚠️ NAVY 没有从 LOGO 里删 —— 标记的鸟身还是那个蓝(那是画,不动)。
        变的是**界面不再拿 navy 当强调色**。一个 logo 含有 UI 不用的颜色,很正常。

     对比度实测(浅底 #F5F6F8 / 深底 #06202B),正文门槛 4.5、图形 3.0:
        OCEAN #0A6A97  浅底 5.51 ✅正文
        SKY   #1C89B7  浅底 3.66 ❌正文 / ✅大字与图形;深底 4.25 ✅
        LIME  #9CC048  浅底 1.93 ❌ —— ⛔ 只在深底用,浅底要绿就用 #5B7227(5.00)
     ⛔ 别把 SKY 拿去做正文链接,也别把 LIME 放到浅底 —— 这两条是硬的。 */
  --bg:#F5F3ED;             /* 🔴 暖纸白(Victor 2026-08-31 拍板「转」)。
                               冷灰白读成科技公司,暖纸白才是纸的公司 —— ViRi 的
                               系统成立一半靠这个温度。对比度已全套复验(见下)。 */
  --panel:#06202B;          /* 深墨蓝绿面板不动 —— 深色世界保持冷调,和强调色同族 */
  --panel-2:#0A2E3D;
  --surface:#FFFFFF;
  --surface-2:#F0EDE5;
  --ink:#1A1815;            /* 暖黑(15.97:1)。冷黑压在暖纸上会脏 */
  --ink-2:#4E4B42;          /* 7.86:1 */
  --ink-3:#877F70;          /* 3.57:1 —— 只用于小标签/辅助,⛔ 不做正文 */
  --rule:#DDD8CB;
  --rule-2:#E9E5DA;
  --accent:#0A6A97;         /* OCEAN 冠羽 = 主强调色(接替 navy) */
  --accent-2:#1C89B7;       /* SKY 亮面 = hover / 大字 / 图形,⛔ 不用于正文 */
  --lime:#9CC048;           /* ⛔ 深底专用 */
  --lime-ink:#5B7227;       /* 浅底上要绿就用这个 */
  --accent-deep:#07526F;    /* OCEAN 压深一档 —— 按钮 hover / 实心底(对应 ViRi 的 kraft-deep) */
  --bg-2:#ECE9E0;           /* 交替带底色(对应 ViRi 的 paper-2)。分节靠底色换,不靠横线堆 */
  --paper:#EFE9DC;          /* 动画里"纸"本身的颜色 */
  --measure:66ch;
  --shadow:0 1px 2px rgba(6,32,43,.05), 0 10px 30px rgba(6,32,43,.07);
}

*{box-sizing:border-box}
main{flex:1}
html{font-size:100%;   /* rem 锚在用户的浏览器字号设置上,⛔ 别写死 16px */
  -webkit-text-size-adjust:100%;
  /* sticky 导航高 70px —— 不给这个,锚点跳转和 scrollIntoView 会把目标顶到导航底下 */
  scroll-padding-top:84px}
body{
  min-height:100vh;display:flex;flex-direction:column;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- 导航 ---------- */
/* §12 半透明材质层,内容从下面滚过 —— ⛔ 不要退回不透明白条 + 1px 硬线。
   sticky 也是必须的:83 页的站,滚下去导航就没了是 wayfinding 问题。 */
.nav{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(12px) saturate(160%);
  border-bottom:1px solid var(--rule)}
@supports not (backdrop-filter: blur(1px)){ .nav{background:var(--bg)} }
@media (prefers-reduced-transparency:reduce){ .nav{background:var(--bg);backdrop-filter:none} }
/* 🔴 min-height 不是 height:用户把字号调大时,固定高会把导航切掉。
   §15「Scale layout with the text」—— 版面要跟着文字长,不是压住文字。 */
.nav .wrap{display:flex;align-items:center;gap:30px;min-height:70px;
  padding-top:10px;padding-bottom:10px}
/* 品牌区 = 标记 + Jost 横排字标。
   🔴 堆叠版是大尺寸(≥64px 居中场合)专用,导航这种小尺寸走横排 —— 别把堆叠版塞进导航,
      实测 30px 下堆叠字标会糊(2026-08-29 验证)。 */
.brand{display:inline-flex;align-items:center;text-decoration:none}
/* lockup 是一张 SVG,里面已经算好了字标基线咬标记底边 ——
   ⛔ 这里不要再加 align-items 之类的对齐,那正是之前把字标顶成垂直居中的原因。 */
.brand .blk{height:34px;width:auto;display:block}
@media (max-width:520px){ .brand .blk{height:27px} }
/* 🔴 margin-left:auto 把导航推到右上 —— 不给它就会紧贴 logo 挤在左边(Victor 08-30 指出) */
.nav-links{display:flex;gap:26px;font-size:0.875rem;letter-spacing:.01em;color:var(--ink-2);
  margin-left:auto}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--accent)}

/* ---------- HERO(深色动效面板) ---------- */
.stage{position:relative;background:var(--panel);overflow:hidden}
.stage canvas{display:block;width:100%;height:480px}
.stage .copy{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
}
.stage .copy .wrap{width:100%}
.stage .eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:0.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);margin:0 0 18px;
}
.stage h1{
  font-family:Jost,Archivo,system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.9375rem,4.7vw,3.5rem);line-height:1.08;letter-spacing:-.022em;
  margin:0 0 18px;color:#F2F7F8;max-width:15ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.stage h1 em{font-style:normal;color:var(--lime);font-weight:500}
.stage .lede{
  font-size:1rem;line-height:1.65;color:#A9C0C6;margin:0;max-width:44ch;
  text-shadow:0 1px 18px rgba(0,0,0,.6);
}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,26,31,.94) 0%,rgba(11,26,31,.80) 34%,
                                   rgba(11,26,31,.10) 62%,rgba(11,26,31,0) 100%);
}

/* ---------- 数字带 ---------- */
/* 🔴 这条数字带原来是整幅 flex,内容从视口边缘开始,和站上其它 .wrap 内容对不齐。
   用同一套量度(1220 + 32 padding)把它收进来。 */
.figs{background:var(--surface);border-bottom:1px solid var(--rule)}
.figs-in{max-width:1220px;margin:0 auto;padding:0 32px;display:flex}
@media(max-width:640px){.figs-in{padding:0 20px}}
.figs .fig{flex:1;padding:20px 0;border-right:1px solid var(--rule)}
.figs .fig:last-child{border-right:0}
.figs .inner{padding:0 30px}
.figs .fig:first-child .inner{padding-left:0}
.figs .n{
  font-family:Jost,Archivo,system-ui,sans-serif;font-weight:500;
  font-size:2.0625rem;line-height:1;letter-spacing:-.01em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.figs .l{
  font-family:"JetBrains Mono",monospace;font-size:0.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-top:6px;
}

/* ---------- 通用小节 ---------- */
section{padding:64px 0;border-bottom:1px solid var(--rule-2)}
section:last-of-type{border-bottom:0}
.kicker{
  font-family:"JetBrains Mono",monospace;font-size:0.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 14px;
}
/* 展示字体 = Jost,与 logo 同源(2026-08-29 Victor 定)。
   ⛔ 别改回 Instrument Serif —— 高对比老派衬线与平涂几何标记不是一个年代,
      Victor 原话「不简洁、不现代」。
   ⛔ 强调词不用斜体,只换色 —— 与字标同一条纪律。 */
/* 标题走 Newsreader 300 —— 低对比现代衬线,不是老派展示衬线。
   ⛔ 别换回 Instrument Serif:那个高对比老派衬线跟平涂几何标记不是一个年代。 */
h1,h2{
  font-family:Newsreader,Georgia,serif;font-weight:300;
  font-size:clamp(1.625rem,3.4vw,2.25rem);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 18px;text-wrap:balance;
}
h1{font-size:clamp(2.125rem,4.9vw,3.625rem);line-height:1.03;letter-spacing:-.026em}
h1 em,h2 em{font-style:italic;font-weight:400}
h3{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.4375rem;
  letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance}
p{margin:0 0 14px;max-width:var(--measure);color:var(--ink-2);line-height:1.75}
p.lead{font-size:1.125rem;color:var(--ink);max-width:58ch}
p:last-child{margin-bottom:0}

/* ---------- 品类卡 ---------- */
/* 首页系列卡:整块就是链接 —— 点哪儿都能进,卡里不再塞小字箭头 */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:0;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--surface)}
.cat{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;text-decoration:none;
  transition:background .15s ease,box-shadow .15s ease}
.cat .cat-th{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.cat .cat-th img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cat:hover .cat-th img{transform:scale(1.03)}
.cat .cat-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 24px}
.cat:hover{background:var(--surface-2)}
.cat:hover h3{color:var(--accent-2)}
.cat:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
/* 牌号数是这张卡上唯一带信息的数字 —— 让它当结构标记,别当脚注 */
.cat .count{font-family:"JetBrains Mono",monospace;font-size:0.7188rem;letter-spacing:.06em;
  color:var(--ink-3);display:block;margin-bottom:12px}
.cat .count b{font-family:Jost,Archivo,sans-serif;font-weight:500;font-size:1.625rem;
  letter-spacing:-.02em;color:var(--accent);display:inline-block;margin-right:6px;
  vertical-align:-3px;font-feature-settings:"tnum"}
.cat:hover .count b{color:var(--accent-2)}
.cat h3{font-size:1.1875rem;font-weight:600;margin-bottom:8px;color:var(--ink)}
.cat p{font-size:0.9062rem;margin-bottom:0;flex:1;color:var(--ink-2)}

/* ══ /grades/ 索引:左右交替的编辑式长条 ═══════════════════════
   ⛔ 别退回 8 个等大方块 —— 等大方块本身就是"没有设计",而且图小到说明不了问题。
   🔴 图承担的信息是「这种纸变成了什么」,所以必须给到能看清成品的尺寸。 */
.srows{border-top:1px solid var(--rule)}
.srow{max-width:1220px;margin:0 auto;padding:56px 32px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  border-bottom:1px solid var(--rule)}
.srow.alt .srow-img{order:2}
.srow:nth-child(even){background:var(--bg-2)}
@media(max-width:900px){
  .srow{grid-template-columns:1fr;gap:26px;padding:40px 20px}
  .srow.alt .srow-img{order:0}
}
.srow-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.srow-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.srow:hover .srow-img img{transform:scale(1.025)}
.srow-body .kicker{display:block;margin-bottom:12px}
.srow-body h2{margin:0 0 10px}
.srow-body h2 a{color:var(--ink);text-decoration:none}
.srow-body h2 a:hover{color:var(--accent)}
.srow-body .lead{font-size:0.9688rem;color:var(--ink-2);margin:0 0 20px;max-width:46ch}
/* 牌号直接列出来 —— 买家找的是牌号,别藏在一个「View grades →」后面 */
.slist{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 20px;
  border-top:1px solid var(--rule);padding-top:14px}
.slist a{display:block;padding:5px 8px;margin:0 -8px;border-radius:5px;
  font-size:0.875rem;color:var(--ink-2);text-decoration:none}
.slist a:hover{background:var(--surface);color:var(--accent)}

/* ---------- 牌号表 ---------- */
.grades{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.grades li{
  font-size:0.875rem;padding:7px 14px;border-radius:20px;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink-2);
}

/* ---------- 服务 ---------- */
/* 🔴 和 .cats 用同一套发丝网格 —— ⛔ 别给它圆角和阴影:
   同一页上两种卡片语言(一种发丝格、一种带阴影的圆角卡)读起来就是不一致。 */
/* Services 卡:发丝网格家族(同 .group/.cats)。
   🔴 列数写死 4/2/1 而不用 auto-fit —— 不写死就修不干净每行末列的边线。 */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--rule);background:var(--surface);margin-top:26px}
.svc{padding:24px 26px 26px;border-right:1px solid var(--rule)}
.svc:nth-child(4n){border-right:0}
.svc .shead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.svc .num{font-family:"JetBrains Mono",monospace;font-size:0.6875rem;letter-spacing:.1em;
  color:var(--accent);flex:0 0 auto}
.svc h3{font-size:1.1875rem;margin:0}
.svc p{font-size:0.9062rem;line-height:1.65;color:var(--ink-2);margin:0}
@media(max-width:1080px){
  .svcs{grid-template-columns:1fr 1fr}
  .svc:nth-child(4n){border-right:1px solid var(--rule)}
  .svc:nth-child(2n){border-right:0}
  .svc:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media(max-width:640px){
  .svcs{grid-template-columns:1fr}
  .svc{border-right:0 !important;border-bottom:1px solid var(--rule)}
  .svc:last-child{border-bottom:0}
}

/* ---------- 集团 ---------- */
/* 🔴 260px 的下限在 1220 栅格上只排得下 4 列,而货源国是 5 个 —— 第 5 个落单一行
   (Victor 08-30 指出 mills 页排版不对齐)。收到 200px 让 5 个排成一行。
   ⛔ 也别再用 border-radius:10px:同页的其它网格都是直角发丝格,圆角在这里是异类。 */
.group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
       border:1px solid var(--rule);overflow:hidden;background:var(--surface);margin-top:26px}
.group .co{padding:24px 26px;border-right:1px solid var(--rule);
       border-bottom:1px solid var(--rule)}
.group .co:last-child{border-right:0}
.group .loc{font-family:"JetBrains Mono",monospace;font-size:0.6562rem;letter-spacing:.14em;
            text-transform:uppercase;color:var(--accent-2);margin-bottom:9px}
.group .co h3{font-size:1rem;margin-bottom:6px}
.group .co p{font-size:0.875rem;margin:0}

/* ---------- CTA ---------- */
.cta{display:inline-block;font-size:0.9062rem;font-weight:500;padding:12px 24px;
     border-radius:6px;background:var(--accent);color:#fff;margin-top:8px}
.cta:hover{background:var(--accent-2);color:#fff}

/* ---------- 页脚 ---------- */
footer{background:var(--panel);color:#8FA5AC;padding:44px 0;font-size:0.875rem}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:#A9C0C6}
footer a:hover{color:var(--lime)}
footer .legal{font-family:"JetBrains Mono",monospace;font-size:0.7188rem;letter-spacing:.04em}

/* ---------- 响应式 ---------- */
@media (max-width:820px){
  .wrap{padding:0 22px}
  .stage canvas{height:400px}
  .scrim{background:linear-gradient(180deg,rgba(11,26,31,.55) 0%,rgba(11,26,31,.92) 72%)}
  .nav-links{gap:16px;font-size:0.7812rem}
  .figs{flex-wrap:wrap}
  .figs .fig{flex:1 1 45%;border-bottom:1px solid var(--rule)}
  .figs .inner{padding:0 22px}
  .cat,.group .co{border-right:0;border-bottom:1px solid var(--rule)}
  .cat:last-child,.group .co:last-child{border-bottom:0}
  section{padding:46px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ⛔ 「造纸旅程」CSS 已随功能整段删除(2026-08-31 Victor 拍板砍)。别加回来。 */

/* ---------- 团队:肖像卡 ---------- */
/* 🔴 贸易台锁 3 列:5 人折成 3+2(Victor 定的两排:Victor/Ricky/Jo + Grace/Jane)。
   auto-fill 在宽屏会排成 4+1,把 Jane 落单 —— ⛔ 别改回 auto-fill。
   Kulim 组 4 人用 .people-4 排一行。 */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.people-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.people,.people-4{grid-template-columns:repeat(2,1fr)}}
.person{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
        overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
/* 卡头:88px 小方照 + 身份块并排。照片是"证件位"不是"海报位"。 */
/* 🔴 顶对齐:职务折行数不同时,垂直居中会让照片上下漂,一排四张脸参差
   (Victor 08-31 指出"照片都不齐")。⛔ 别改回 center。 */
.person .phead{display:flex;gap:16px;align-items:flex-start;padding:18px 20px 0}
.person .pid{padding-top:2px;min-width:0}
/* 🔴 对齐靠"固定行位":职务一律留 2 行、名字一律留 2 行的位置 ——
   否则折行数不同,名字/地区/bio 全被推得高高低低(Victor 08-31 抓到)。
   ⛔ 别删这些 min-height:删了在窄列马上复发。 */
.person .role{line-height:1.5;min-height:3em}
.person h3{line-height:1.2;min-height:2.4em;display:flex;align-items:flex-end}
.person .place{line-height:1.4;min-height:1.4em}
.person .shot{position:relative;width:88px;flex:0 0 88px;aspect-ratio:1/1;
  border-radius:10px;background:var(--surface-2);overflow:hidden}
.person .shot img{width:100%;height:100%;object-fit:cover;display:block}
.person .pid{min-width:0}
.person .role{font-family:"JetBrains Mono",monospace;font-size:0.625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin:0 0 4px}
.person h3{font-size:1.25rem;margin:0 0 3px}
.person .place{font-family:"JetBrains Mono",monospace;font-size:0.6875rem;
  color:var(--ink-3);margin:0}
.person .body{padding:14px 20px 20px;display:flex;flex-direction:column;flex:1}
.person .bio{font-size:0.875rem;line-height:1.6;color:var(--ink-2);margin:0 0 10px;flex:1}
.person .mail{font-family:"JetBrains Mono",monospace;font-size:0.75rem;color:var(--accent);
  text-decoration:none}
.person .mail:hover{text-decoration:underline}

/* ---------- 系列页 视频 hero ---------- */
.vhero{position:relative;background:var(--panel);overflow:hidden;min-height:340px;display:flex;align-items:center}
.vhero video,.vhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vhero.flat{min-height:230px}
.vscrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,32,43,.93) 0%,rgba(6,32,43,.78) 40%,rgba(6,32,43,.25) 100%)}
.vcopy{position:relative;width:100%;padding:52px 0}
.vhero .kicker{color:var(--lime)}
.vhero h1{color:#F3F7F9;margin-bottom:12px}
.vhero .lead{color:rgba(206,222,232,.9);max-width:52ch}
/* 窄屏:文字铺满宽度,横向渐变的浅端会压到正文 → 换成均匀压深 */
@media (max-width:760px){
  .vscrim{background:linear-gradient(180deg,rgba(6,32,43,.86) 0%,rgba(6,32,43,.76) 100%)}
}
@media (prefers-reduced-motion:reduce){ .vhero video{display:none} }

/* ---------- 牌号列表 ---------- */
.glist{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;background:var(--surface);margin-top:18px}
.grow{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:18px;align-items:baseline;
  padding:15px 22px;border-bottom:1px solid var(--rule-2);text-decoration:none}
.grow:last-child{border-bottom:0}
.grow:hover{background:var(--surface-2)}
.gn{font-weight:600;font-size:0.9375rem;color:var(--ink)}
.gd{font-size:0.875rem;color:var(--ink-2)}
.ga{color:var(--accent-2);font-size:0.9375rem}
h2.sec{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.5rem;
  margin:34px 0 10px;letter-spacing:-.012em}
@media (max-width:700px){
  .grow{grid-template-columns:1fr auto;gap:4px 12px}
  .gd{grid-column:1/-1}
}

/* ══ 牌号页:正文 / 用途 / 属性表 / 规格条 ══════════════════════ */
.gtop{padding-bottom:0}
.gbody{max-width:74ch}
.gbody p{margin-bottom:14px}
.gbody h2.sec:first-child{margin-top:0}

.applist{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.applist li{font-size:0.875rem;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--rule-2);border-radius:999px;padding:6px 14px}

/* 宽表在自己的容器里横滚,⛔ 别让 body 横滚 */
.tblwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;margin-top:16px;
  background:var(--surface)}
.ptbl{width:100%;border-collapse:collapse;font-size:0.9062rem;min-width:520px}
.ptbl thead th{text-align:left;font-family:"JetBrains Mono",monospace;font-size:0.6562rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  padding:12px 18px;border-bottom:1px solid var(--rule);white-space:nowrap}
.ptbl tbody th{text-align:left;font-weight:600;color:var(--ink);padding:12px 18px;
  border-bottom:1px solid var(--rule-2);vertical-align:top;width:34%}
.ptbl tbody td{color:var(--ink-2);padding:12px 18px;border-bottom:1px solid var(--rule-2);
  vertical-align:top}
.ptbl tbody tr:last-child th,.ptbl tbody tr:last-child td{border-bottom:0}
.ptbl .meth{font-family:"JetBrains Mono",monospace;font-size:0.7812rem;color:var(--ink-3);
  white-space:nowrap;width:1%}
.note{font-size:0.8125rem;color:var(--ink-3);margin-top:12px;max-width:62ch}

.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin:16px 0 18px;
  background:var(--surface)}
.spec .sp{padding:16px 18px;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.spec dt{font-family:"JetBrains Mono",monospace;font-size:0.6562rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.spec dd{font-size:0.9062rem;color:var(--ink);margin:0}

/* ⛔ 这里原本有个 .cutedge「切口」装饰线,已删。
   理由:切口母题在「Inside the sheet」那个 3D 切面里已经是字面意义的存在,
   再到处画装饰性堆叠线只是把同一个想法稀释成花边 —— 出门前摘掉一件配饰。
   要表达层次就用真的层次,别用线条暗示。 */

/* Services = 一单的真实顺序,画成流程而不是四张平卡 */
/* ⛔ 这里原有 .svc::before 的 2px 渐变装饰条,已删 —— 就是它在卡左侧
   留下一道若隐若现的蓝线(Victor 08-31「不精致」)。和删 .cutedge 同一条纪律:
   要层次用真层次,不用线条暗示。 */

/* ══ 签名元素:Inside the sheet ═══════════════════════════════════
   纯 CSS 3D。每一层是真的有厚度的板 —— 顶面 + 切口侧壁,
   侧壁高度 = 该层厚度,所以「切口」母题在这里是字面意义上的。
   ⛔ 不要给它加第二种动效;全站的大胆额度都花在这一个地方。 */
.xsec{background:var(--panel);color:#E7EEF3;position:relative;overflow:hidden}
.xsec .wrap{position:relative;z-index:1}
.xsec .kicker{color:var(--lime)}
.xsec h2{color:#F3F7F9}
.xsec .xs-lede{color:rgba(206,222,232,.86);max-width:56ch;margin-bottom:26px}

.xs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.xs-tab{font-family:"JetBrains Mono",monospace;font-size:0.7188rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(206,222,232,.7);background:transparent;
  border:1px solid rgba(206,222,232,.22);border-radius:999px;padding:8px 16px;
  cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.xs-tab:hover{color:#F3F7F9;border-color:rgba(206,222,232,.45)}
.xs-tab.is-on{color:var(--panel);background:var(--lime);border-color:var(--lime)}
.xs-tab:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.xs-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
  margin-top:22px}

.xs-stage{position:relative;height:400px;perspective:1400px;perspective-origin:50% 42%;
  cursor:grab;touch-action:none}
.xs-stage.is-dragging{cursor:grabbing}
.xs-stage:focus-visible{outline:2px solid var(--lime);outline-offset:6px;border-radius:12px}

.xs-stack{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,62deg)) rotateZ(var(--rz,-30deg));display:none}
.xs-stack.is-on{display:block}

.xs-ply{position:absolute;left:50%;top:50%;width:420px;height:290px;margin:-145px 0 0 -210px;
  transform-style:preserve-3d;transform:translateZ(var(--z));border:0;padding:0;
  background:transparent;cursor:pointer;
  transition:transform .34s cubic-bezier(.22,.7,.3,1),opacity .2s}
.xs-face{position:absolute;inset:0;background:var(--c);
  box-shadow:0 0 0 1px rgba(6,32,43,.16) inset;transition:filter .2s}
/* 切口:两面侧壁,高度就是这一层的厚度 */
/* 🔴 侧壁 = 纸的切口:细密的纤维横纹,不是实心色块 —— 实心色块读起来是木板
   (Victor 08-31)。纹距 3px,只有 6% 深,近看是纸边,远看不脏。 */
.xs-side{position:absolute;left:0;width:100%;height:var(--t);
  background:repeating-linear-gradient(to bottom,
    var(--c) 0, var(--c) 2px, rgba(60,48,30,.09) 2px, rgba(60,48,30,.09) 3px);
  filter:brightness(.86);top:100%;transform-origin:50% 0;transform:rotateX(-90deg);
  box-shadow:0 0 0 1px rgba(6,32,43,.10) inset}
.xs-side.r{background:repeating-linear-gradient(to right,
    var(--c) 0, var(--c) 2px, rgba(60,48,30,.09) 2px, rgba(60,48,30,.09) 3px);
  left:100%;top:0;width:var(--t);height:100%;
  transform-origin:0 50%;transform:rotateY(90deg);filter:brightness(.72)}

/* ⛔ 别用 opacity 做减弱 —— 一透明整叠板就变成玻璃片,材质读没了。
   压暗+去饱和,板还是板。 */
.xsec.has-active .xs-face,
.xsec.has-active .xs-side{filter:brightness(.5) saturate(.55)}
.xs-ply.is-on{transform:translateZ(calc(var(--z) + 30px))}
/* 🔴 拖拽中冻结抽层:转动时指针扫过各层会连环触发 hover 抽出,和旋转叠在一起
   就是"跳"。手一松(is-dragging 摘掉)抽层立刻恢复。 */
.xs-stage.is-dragging .xs-ply{transition:none}
.xs-stage.is-dragging .xs-ply.is-on{transform:translateZ(var(--z))}
.xsec.has-active .xs-ply.is-on .xs-face{filter:brightness(1.04)}
.xsec.has-active .xs-ply.is-on .xs-side{filter:brightness(.84)}
.xsec.has-active .xs-ply.is-on .xs-side.r{filter:brightness(.74)}
.xs-ply:focus-visible .xs-face{box-shadow:0 0 0 2px var(--lime) inset}

.xs-side-panel{align-self:center}
.xs-note{display:none;font-size:0.9062rem;color:rgba(206,222,232,.8);margin:0 0 18px;
  max-width:44ch}
.xs-note.is-on{display:block}
.xs-readout{min-height:78px;border-top:1px solid rgba(206,222,232,.18);padding-top:16px;
  font-size:0.875rem;color:rgba(206,222,232,.66)}
.xs-readout b{display:block;font-family:Jost,Archivo,sans-serif;font-weight:500;font-size:1.1875rem;
  color:#F3F7F9;letter-spacing:-.01em;margin-bottom:4px}
.xs-readout span{display:block;color:rgba(206,222,232,.75)}
.xs-hint{font-family:"JetBrains Mono",monospace;font-size:0.6562rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(206,222,232,.42);margin-top:18px}
.xs-open{display:inline-block;margin-top:16px;font-size:0.9062rem;color:var(--lime)}
.xs-open:hover{color:#B7D96A}

@media (max-width:900px){
  .xs-grid{grid-template-columns:1fr;gap:8px}
  .xs-stage{height:320px;perspective:1000px}
  .xs-ply{width:300px;height:210px;margin:-105px 0 0 -150px}
}
@media (prefers-reduced-motion:reduce){
  .xs-ply{transition:none}
}

/* ══ Mills & Markets 的地球 ═════════════════════════════════════
   🔴 它值得存在的唯一理由是载真数据:亮点=真发过货的国家,
      方块=真货源国,选中会说出我们真往那儿发过什么。
      ⛔ 别把它退化成随便转的蓝球。 */
.globe{background:var(--panel);color:#E7EEF3;padding:76px 0 84px}
.globe .kicker{color:var(--lime)}
.globe h2{color:#F3F7F9;max-width:20ch}
.gl-lede{color:rgba(206,222,232,.82);max-width:58ch;margin:12px 0 30px}

.gl-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.gl-stage{position:relative}
.gl-canvas{width:100%;height:440px;display:block;cursor:grab;touch-action:none;
  border-radius:12px}
.gl-canvas.is-dragging{cursor:grabbing}
.gl-canvas:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.gl-readout{margin-top:14px;font-size:0.875rem;color:rgba(206,222,232,.66);min-height:48px;
  border-top:1px solid rgba(206,222,232,.18);padding-top:14px}
.gl-readout b{display:block;font-family:Jost,Archivo,sans-serif;font-weight:500;font-size:1.1875rem;
  color:#F3F7F9;letter-spacing:-.01em;margin-bottom:3px}
.gl-readout span{display:block;color:var(--lime)}

.gl-group{margin-bottom:18px}
.gl-reg{font-family:"JetBrains Mono",monospace;font-size:0.6562rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(206,222,232,.45);margin:0 0 8px}
.gl-chips{display:flex;flex-wrap:wrap;gap:6px}
.gl-market{font-size:0.8438rem;color:rgba(206,222,232,.82);background:transparent;
  border:1px solid rgba(206,222,232,.18);border-radius:999px;padding:5px 12px;
  cursor:pointer;font-family:inherit;transition:color .14s,border-color .14s,background .14s}
.gl-market:hover{color:#0B1620;background:rgba(206,222,232,.9);border-color:transparent}
.gl-market.is-on{color:var(--panel);background:var(--lime);border-color:var(--lime)}
.gl-market:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.gl-hint{font-family:"JetBrains Mono",monospace;font-size:0.6562rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(206,222,232,.4);margin-top:26px}

@media (max-width:900px){
  .gl-grid{grid-template-columns:1fr;gap:26px}
  .gl-canvas{height:330px}
}

/* ══ §1 按下即反馈 ═══════════════════════════════════════════════
   apple-design §1:「Respond on pointer-down, not on release.
   等到 click 才给反馈 feels dead.」—— 这是整套手感的地基,不是装饰。
   ⛔ 别把这些 :active 删掉换成只有 :hover:触摸设备根本没有 hover。
   100ms 是刻意的:再慢就跟不上手指,再快会闪。 */
.cat, .grow, .slist a, .gl-market, .xs-tab, .cta, .xs-ply, .nav-links a{
  -webkit-tap-highlight-color:transparent;
}
/* ⛔ .xs-ply 不进这组:它自己的 transform 过渡是 340ms 的抽层动画,
   被这里的 100ms 盖掉后,46px 的抽出变成弹跳(Victor 08-31:「跳动很厉害」)。
   它的按下反馈走 :active 亮度,不走 transform。 */
.cat, .grow, .slist a, .gl-market, .xs-tab, .cta{
  transition:background .15s ease, color .15s ease, transform 100ms ease-out;
}
/* 整块卡片:压下去一点点就够,幅度大了像按钮不像卡片 */
.cat:active{transform:scale(.994);background:var(--surface-2)}
.grow:active{background:var(--surface-2);transform:scale(.997)}
.slist a:active{background:var(--surface-2);color:var(--accent-2)}
.cta:active{transform:scale(.97)}
/* 深色面板上的芯片:按下用亮度变化,深色底上 scale 不明显 */
.xs-tab:active{transform:scale(.96);background:rgba(206,222,232,.16)}
.gl-market:active{transform:scale(.95);background:rgba(206,222,232,.28);color:#0B1620}
.gl-market.is-on:active{background:var(--lime);color:var(--panel)}
/* 3D 里的单层:按下压回去一点,读作"被按住了" */
.xs-ply:active .xs-face{filter:brightness(.94)}
.nav-links a:active{color:var(--accent-2)}

/* §10 触摸目标:市场芯片原来约 35px,低于 44px 建议。
   ⚠️ 不靠加 padding 撑大(会把 42 个芯片挤到换行失控),用透明外扩点击区。 */
.gl-market{position:relative}
.gl-market::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}

@media (prefers-reduced-motion:reduce){
  .cat, .grow, .slist a, .gl-market, .xs-tab, .cta{transition:background .15s ease, color .15s ease}
  .cat:active, .grow:active, .cta:active, .xs-tab:active, .gl-market:active{transform:none}
}


/* ══ 分节节奏(照 ViRi 的系统) ═══════════════════════════════════
   分节靠**底色交替**和留白,不靠堆横线。band-2 是交替带。 */
section{padding:64px 0}
section > .wrap{max-width:1220px}
.band-2{background:var(--bg-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.sechead{max-width:var(--measure);margin-bottom:44px}
.sechead .kicker{display:block;margin-bottom:14px}
.sechead h2{margin:0}
.sechead .lead{margin:14px 0 0}

/* 按钮:mono 小字 + 大字距大写 —— ViRi 那套的辨识点之一 */
.btn{display:inline-block;padding:14px 24px;font-family:"JetBrains Mono",monospace;
  font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform 100ms ease-out}
.btn-solid{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.btn-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 导航右侧的询价按钮(ViRi 的 .quote) */
.nav-cta{margin-left:26px;border:1px solid var(--ink);padding:9px 17px;font-size:0.75rem;
  letter-spacing:.1em;text-transform:uppercase;font-family:"JetBrains Mono",monospace;
  text-decoration:none;white-space:nowrap;color:var(--ink);
  transition:background .2s,color .2s,transform 100ms ease-out}
.nav-cta:hover{background:var(--ink);color:var(--bg)}
.nav-cta:active{transform:scale(.96)}
.nav-cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ══ Hero:实心卡片压在影像上(照 ViRi 的结构) ═══════════════════
   ⛔ 不要退回「文字浮在半透明遮罩上」—— 那是模板答案,也是之前显得散的原因。
   卡片是**实心**的:它把文字从影像里切出来,读起来是"压上去"而不是"飘着"。 */
.hero{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:stretch;
  border-bottom:1px solid var(--rule);background:var(--panel)}
@media(max-width:900px){.hero{min-height:auto}}
.hero-media{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;
  /* Ken Burns 微动(ViRi 同款):26s 从 1.02 推到 1.12,照片是活的但不打扰 */
  animation:heroKb 26s ease-out both}
@keyframes heroKb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){ .hero-media{animation:none;transform:none} }
.hero-veil{position:absolute;inset:0;
  /* 左侧压暗托卡片,底部压暗托数字带,右端放开让照片呼吸。
     暖照片配**暖**暗角 —— 拿深青压金光会浑。 */
  background:
    linear-gradient(0deg, rgba(20,15,8,.55) 0%, rgba(20,15,8,0) 26%),
    linear-gradient(100deg, rgba(20,15,8,.82) 0%, rgba(20,15,8,.60) 42%,
      rgba(20,15,8,.16) 72%, rgba(20,15,8,0) 100%)}
/* width:100% 是承重的:.wrap 是 .hero 的 flex 子项,不给宽度会缩到卡片宽,
   然后它自己的 margin:0 auto 把卡片推到屏幕中间。ViRi 那边注释里写过这条。 */
.hero .wrap{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;padding-top:74px;padding-bottom:0}
.hero-card{background:var(--bg);max-width:600px;padding:44px 44px 40px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6)}
@media(max-width:900px){.hero-card{max-width:none;padding:32px 24px 30px;margin:34px 0 0}}
.hero-card .kicker{display:block;margin-bottom:16px}
.hero h1{margin:0 0 20px}
.hero .lede{font-size:1.0312rem;line-height:1.62;color:var(--ink-2);max-width:46ch;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* 🔴 align-self:stretch 是承重的:.wrap 是 flex column 且 align-items:flex-start,
   不显式拉伸的话这条数字带会缩到内容宽,挤在左边一小块。 */
.hero-stats{position:relative;z-index:2;margin-top:auto;align-self:stretch;display:grid;
  grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(245,246,248,.22)}
@media(max-width:760px){.hero-stats{grid-template-columns:1fr 1fr}}
.hstat{padding:20px 10px 24px}
.hstat b{display:block;font-family:Newsreader,Georgia,serif;font-weight:300;font-size:2.125rem;
  line-height:1;color:#F2F7F8;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hstat span{display:block;margin-top:7px;font-family:"JetBrains Mono",monospace;font-size:0.5938rem;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(245,246,248,.62);line-height:1.5}
@media(max-width:760px){.hstat b{font-size:1.625rem}}

/* 牌号页头:两栏(照 ViRi 产品页)。右栏是「At a glance」—— 买家最先要看的几项 */
.gtop{border-bottom:1px solid var(--rule);padding:0}
.gtop .wrap{padding:52px 32px 58px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px}
@media(max-width:900px){.gtop .wrap{grid-template-columns:1fr;gap:32px}}
.gtop h1{font-size:clamp(1.875rem,4.4vw,3.125rem);line-height:1.05;letter-spacing:-.025em;margin:16px 0 18px}
.gtop .lead{font-size:1.0312rem;color:var(--ink-2);max-width:50ch;margin:0}
.glance{align-self:start}
.glance-h{font-family:"JetBrains Mono",monospace;font-size:0.6562rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.glance .spec{grid-template-columns:1fr;margin:0}
.glance .spec .sp{border-right:0}
.glance .spec .sp:last-child{border-bottom:0}

/* 🔴 移动端导航:ViRi 那套是「≤900px 隐藏链接 + 汉堡面板」,我们没有汉堡,
   所以改成换行。⛔ 别只搬 height:70px 的不换行布局却不搬它的移动端处理 ——
   实测那样在 390px 上会把页面撑到 702px,整站横向滚动。 */
@media(max-width:900px){
  .nav .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:10px 18px}
  .nav-links{flex-wrap:wrap;gap:14px 18px}
  .nav-cta{margin-left:auto}
}
@media(max-width:560px){
  /* Contact 已经在导航链接里,小屏上这个按钮是重复的 */
  .nav-cta{display:none}
  .nav-links{gap:12px 16px;font-size:0.875rem}
}

/* §1 交替长条的按下反馈 —— ⛔ 做新组件时别忘了这层:
   .srow-img 和标题是 /grades/ 上最大的两个点击目标,按下去没反应就是"死的"。 */
.srow-img, .srow-body h2 a{-webkit-tap-highlight-color:transparent}
.srow-img{transition:transform 100ms ease-out}
.srow-img:active{transform:scale(.995)}
.srow-body h2 a{transition:color .15s ease}
.srow-body h2 a:active{color:var(--accent-deep)}
.srow-img:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* §15 密集信息区收紧行距 —— 正文 1.75 是对的,但数据表跟正文同一个行距就太散。
   skill 原话:「tighten it for dense, information-heavy UI」。 */
.ptbl th,.ptbl td,.glance dd,.glance dt{line-height:1.45}
.ptbl td,.glance dd{letter-spacing:.004em}   /* 小字给一点正字距,14.5px 在 0 上发糊 */

/* §14 高对比偏好 —— 之前只处理了减弱动效和减弱透明,这条缺着 */
@media (prefers-contrast:more){
  :root{--ink-2:#243645;--ink-3:#3E5566;--rule:#9FB0BC;--rule-2:#B8C6D0}
  .nav{background:var(--bg);backdrop-filter:none;border-bottom-color:var(--ink)}
  .btn-ghost,.nav-cta,.applist li{border-color:var(--ink)}
  .hero-veil{background:linear-gradient(100deg,rgba(6,32,43,.97) 0%,rgba(6,32,43,.92) 55%,rgba(6,32,43,.65) 100%)}
}

@media (prefers-reduced-motion:reduce){
  .cat .cat-th img{transition:none}
  .cat:hover .cat-th img{transform:none}
  .srow-img,.srow-img img{transition:none}
  .srow:hover .srow-img img{transform:none}
  .srow-img:active{transform:none}
}

/* §16 wayfinding:在这个分区里(但不是这一页)—— 比当前页弱一档,但要看得见 */
.nav-links a.in-section{color:var(--accent);opacity:.72}

/* 牌号页面包屑:Grades / 系列 / 牌号 —— 68 页的目录,一级面包屑不够回答"我在哪" */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:"JetBrains Mono",monospace;font-size:0.6875rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:14px}
.crumb a{color:var(--accent);text-decoration:none}
.crumb a:hover{color:var(--accent-deep);text-decoration:underline}
.crumb a:active{color:var(--accent-deep)}
.crumb span{color:var(--ink-3);opacity:.6}
.crumb b{color:var(--ink-3);font-weight:400}

/* §11 给合成器提示 —— 只给真的会动的东西,⛔ 别全站乱撒 */
.xs-stack,.srow-img img,.gl-canvas{will-change:transform}

/* ══ 楞型选择器(containerboard 系列页) ═══════════════════════════
   🔴 它回答的是买瓦楞时真正要做的决定:用哪个楞型。
   ⛔ 别做成又一个可旋转的层叠块 —— 首页那个切面已经讲过"板是一叠层"了,
      这里讲的是"同一种板,楞型不同,能干的事不同",是深一层不是重复。 */
.flutes{background:var(--bg-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.fl-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:900px){.fl-grid{grid-template-columns:1fr;gap:28px}}
.fl-stage{background:var(--surface);border:1px solid var(--rule);padding:18px}
.fl-canvas{width:100%;height:270px;display:block}
@media(max-width:900px){.fl-canvas{height:200px}}

.fl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.fl-tab{font-family:"JetBrains Mono",monospace;font-size:0.75rem;letter-spacing:.1em;
  padding:9px 16px;border:1px solid var(--rule);background:var(--surface);
  color:var(--ink-2);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform 100ms ease-out}
.fl-tab:hover{border-color:var(--ink-3);color:var(--ink)}
.fl-tab:active{transform:scale(.96)}
.fl-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fl-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.fl-readout{min-height:6.5rem}
.fl-readout b{display:block;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:1.4375rem;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.fl-readout span{display:block;font-size:0.9375rem;line-height:1.6;color:var(--ink-2);
  max-width:44ch}
.flutes .note{margin-top:18px}

@media (prefers-reduced-motion:reduce){ .fl-tab:active{transform:none} }

/* ══ 克重↔厚度探针(Grey Board 牌号页) ═══════════════════════════
   🔴 它回答的是灰板买家真正的问题:同样克重,不同档位厚多少 —— 那就是 bulk。
   光看表看不出来,三块板并排画到同一比例才看得出。 */
.caliper{background:var(--bg-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.cal-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
@media(max-width:900px){.cal-grid{grid-template-columns:1fr;gap:26px}}
.cal-stage{background:var(--surface);border:1px solid var(--rule);padding:16px}
.cal-canvas{width:100%;height:300px;display:block}
@media(max-width:900px){.cal-canvas{height:240px}}

.cal-gs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.cal-g{font-family:"JetBrains Mono",monospace;font-size:0.75rem;letter-spacing:.06em;
  padding:9px 15px;border:1px solid var(--rule);background:var(--surface);
  color:var(--ink-2);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform 100ms ease-out}
.cal-g:hover{border-color:var(--ink-3);color:var(--ink)}
.cal-g:active{transform:scale(.96)}
.cal-g.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cal-g:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.cal-readout{min-height:7rem}
.cal-readout b{display:block;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:1.4375rem;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.cal-readout span{display:block;font-size:0.9375rem;line-height:1.6;color:var(--ink-2);
  max-width:44ch}
.caliper .ptbl th i{font-style:normal;color:var(--ink-3);font-weight:400}
.caliper .ptbl td.na{color:var(--ink-3)}
.caliper .ptbl td.pb{font-family:"JetBrains Mono",monospace;font-size:0.8125rem;
  white-space:nowrap}
.caliper .ptbl tbody th{width:auto}

@media (prefers-reduced-motion:reduce){ .cal-g:active{transform:none} }

/* 团队:两组分组标 + 无照片的首字母格 + 照片统一灰度(ViRi 同款处理) */
.tgroup{font-family:"JetBrains Mono",monospace;font-size:0.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:34px 0 16px;
  border-bottom:1px solid var(--rule);padding-bottom:10px}
.person .shot img{filter:grayscale(1) contrast(1.04);
  transition:filter .3s ease}
.person:hover .shot img{filter:grayscale(0) contrast(1)}
/* 🔴 首字母格 = "还没有照片"的诚实写法。⛔ 别用 AI 生成真人脸。 */
/* 照片版的渐变遮罩别压到首字母格上 */
.person .shot.mono::after{content:none}
.person .shot.mono{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;background:var(--bg-2);border:1px solid var(--rule)}
.person .shot.mono span{font-family:Newsreader,Georgia,serif;font-weight:300;
  font-size:1.5rem;letter-spacing:.04em;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){ .person .shot img{transition:none} }

/* ══ 订单流水带 ═══════════════════════════════════════════════════
   🔴 让 2,564 可信的不是数字,是一条条具体记录(品类·吨数·目的国,真实抽自
   订单档案)。⛔ 客户名/纸厂名在抽取层就剥掉了,别加回来。 */
.ledger{background:var(--panel);padding:34px 0 30px;border-top:1px solid var(--rule)}
.lg-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.ledger .kicker{color:var(--lime);margin:0}
.lg-line{color:rgba(206,222,232,.85);font-size:0.9375rem;margin:0}
.lg-line b{color:#F3F7F9;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:1.25rem;letter-spacing:-.01em}
.lg-note{font-family:"JetBrains Mono",monospace;font-size:0.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(206,222,232,.5)}
.lg-belt{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* ⛔ 不给 will-change:回收式轨道层宽只有一屏多,不需要;之前整卷方案 + will-change
   分配了 14 万 px 的纹理,截屏直接白屏。 */
.lg-track{display:inline-flex;gap:34px;white-space:nowrap;padding:6px 0}
.lg-item{font-family:"JetBrains Mono",monospace;font-size:0.8125rem;color:rgba(206,222,232,.75)}
.lg-item b{color:#F3F7F9;font-weight:600}
.lg-item i{font-style:normal;color:var(--lime)}
.lg-track.is-static{white-space:normal;display:flex;flex-wrap:wrap;gap:10px 28px;
  max-width:1220px;margin:0 auto;padding:6px 32px}

/* hero 数字带 4 项 */
.hero-stats{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.hero-stats{grid-template-columns:1fr 1fr}}

/* Where we buy:13 国一张网格。桌面 5 列 → 远东五国正好占第一行;
   13+跨2格的收尾细胞 = 5/5/(3+2) 三行填满,无空洞。
   ⛔ 别退回"五国大卡+药丸"的两级待遇(Victor 08-31 指出不合理)。 */
.group-src{grid-template-columns:repeat(5,1fr)}
.group-src .co:nth-child(5n){border-right:0}
.group-src .co-note{grid-column:span 2;border-right:0;display:flex;align-items:flex-end;
  background:var(--surface-2)}
.group-src .co-note p{font-size:0.8438rem;color:var(--ink-3);margin:0;line-height:1.6}
.group-src .co-note a{color:var(--accent)}
@media(max-width:1080px){
  .group-src{grid-template-columns:1fr 1fr}
  .group-src .co:nth-child(5n){border-right:1px solid var(--rule)}
  .group-src .co:nth-child(2n){border-right:0}
  .group-src .co-note{grid-column:span 2}
}
@media(max-width:640px){
  .group-src{grid-template-columns:1fr}
  .group-src .co{border-right:0 !important}
  .group-src .co-note{grid-column:auto}
}

/* 联系卡联系区:电话/邮箱/网站各一行,行高一致三卡对齐。
   ⛔ 别挤回一行 —— 分隔点在窄卡上悬空折行,就是"随便"的来源。 */
.co .cmeta{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-2);
  display:flex;flex-direction:column;gap:4px}
.co .cmeta a,.co .cmeta span{font-family:"JetBrains Mono",monospace;font-size:0.75rem;
  line-height:1.7;color:var(--accent);text-decoration:none;width:fit-content}
.co .cmeta span{color:var(--ink-3)}
.co .cmeta a:hover{text-decoration:underline}

/* 牌号页 FAQ:details 原生手风琴,零 JS */
.faq details{border-bottom:1px solid var(--rule-2);padding:2px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:0.9688rem;color:var(--ink);
  padding:12px 0;list-style-position:outside}
.faq summary:hover{color:var(--accent)}
.faq details p{font-size:0.9375rem;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
.faq details[open] summary{color:var(--accent)}

/* 集团卡:ViRi/TGR 整卡链去官网(Victor 08-31,照 ViRi 站做法)。
   域名亮出来 —— 让人知道点了去哪,不是暗门。 */
a.co-link{display:block;text-decoration:none;color:inherit;
  transition:background .15s ease,transform 100ms ease-out}
a.co-link:hover{background:var(--surface-2)}
a.co-link:hover h3{color:var(--accent)}
a.co-link:active{transform:scale(.995)}
a.co-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.co-site{display:block;margin-top:10px;font-family:"JetBrains Mono",monospace;
  font-size:0.75rem;color:var(--accent)}
a.co-link:hover .co-site{text-decoration:underline}
@media (prefers-reduced-motion:reduce){ a.co-link:active{transform:none} }