/* ============================================================
内页 · 纸面设计（第 47 轮）
============================================================
首页第 44–46 轮已经整页换成 pcba-hero-demo 那套「印刷编辑感」：
纸底 #E2E2E2 / 墨 #0C0C0C / 亮绿 #42A646 / 铜 #B8642F / 细分隔线。
内页（22 个）沿用各自的 markup 和文案，**不重写内容**，只做两件事：
① 把 style.css 那一层深色令牌整体翻成纸面（本文件第 1 节）
② 逐组件修「翻完仍然不对」的地方（第 2 节起）
结构上动刀的地方只有一处：内页页头那张压着深纱的照片（.page-media）
去掉，改成一整块纸 + 大字 + 细分隔线 —— 和首页新首屏的语言一致。
加载顺序：style.css → header-home.css → paper-pages.css
（header-home.css 是首页那次写的，只作用于 header.site，内页直接复用。）
⚠️ 本文件**只管内页**。首页不引 style.css，也就不会吃到这里。
⚠️ 令牌是整层翻的，改一个值 22 个页面一起变 —— 这正是要的；
要按页改的东西写到第 2 节之后，别塞进 :root。
============================================================ */
/* ============================================================
1 · 令牌层：深色 → 纸面
------------------------------------------------------------
色值和首页 demo 那张表逐字对齐：
paper #E2E2E2 paper-2 #D7D7D7 panel #F2F2F2
ink #0C0C0C body #3D3D3D muted #686868
accent #42A646 deep #2A6E30 bright #69DD6E copper #B8642F
============================================================ */
:root{
/* 原生控件（select 弹层 / 滚动条 / date picker）跟着走浅色。
深色那一版写在 style.css 的 :root 里，这里必须显式改回来。 */
color-scheme:light;
/* ---- 底与面 ---- */
--bg:#E2E2E2; /* 页面底 · 纸 */
--band:#D7D7D7; /* 色带（section.alt）· 比纸暗一档 */
--tint-50:#EFEFEF; /* 带上的卡 */
--tint-100:#D7D7D7; /* 带底 = --band（style.css 里是转发，这里同步） */
--tint-200:#CBCBCB; /* 表头 / 标签带 */
--paper:#F2F2F2; /* 卡面 */
--paper-2:#E9E9E9;
/* ---- 字 ----
⚠️ --mute 没照抄 demo 的 #686868：它压在色带 #D7D7D7 上只有 3.87:1，
小字过不了 AA。压到 #5A5A5A 后：纸底 5.32 / 卡面 6.16 / 色带 4.79。
（--ink-2 8.38 / --ink 15.1，都宽裕。） */
--ink:#0C0C0C;
--ink-2:#3D3D3D;
--mute:#5A5A5A;
/* ---- 线 ---- */
--line:rgba(12,12,12,.13);
--line-2:rgba(12,12,12,.22);
--line-3:rgba(12,12,12,.32);
/* ---- 绿：纸底上的一套（深底那套在 style.css，页脚/深带仍吃它） ----
⚠️ --jade-600 原来是「深底上的亮绿字」#67DDA6，压在纸上几乎看不见；
这里换成 #2A6E30（纸上 4.9:1）。同理 --jade-300 只留给深块用。 */
--jade-600:#2A6E30;
--jade-500:#379A3B;
--jade-400:#42A646;
--jade-300:#69DD6E;
--jade-200:rgba(42,110,48,.28);
--jade-100:rgba(66,166,70,.12);
/* 那颗报价按钮的底（.btn.primary / nav.main a.cta） */
--green-500:#42A646;
--green-600:#379A3B;
/* 第 53 轮加：**要配白字**的绿。同一色相压暗两档。
#42A646 配白只有 3.10:1、#379A3B 3.58:1，15px 的字都过不了 AA；
压到这里是 5.1:1。目前只给收尾报价带那颗按钮用（见第 7 节）。 */
--green-700:#2F7D35;
--enig:#B8642F; /* 沉金 → 纸面上的铜色，首页 demo 的 --copper */
/* 第 52 轮：铜色**做文字**时用的深一档。
--enig 压在纸面上只有 3.83:1、压在色带上 3.31:1 —— 当线/当角标没问题，
当 11.5px 的小字（指南编号、眉标）过不了 AA。同一个色相压暗两档到这里：
纸面 5.9:1 / 色带 5.1:1。**只给文字用，线和角标继续吃 --enig。** */
--enig-ink:#93481A;
--accent-ring:rgba(66,166,70,.40);
/* ---- 警示 ---- */
--red-600:#B3261E;
--red-100:rgba(179,38,30,.10);
--red-200:rgba(179,38,30,.30);
/* ---- 投影：纸面上只留极轻的一层，卡片靠细线立住 ---- */
--sh-1:0 1px 2px rgba(12,12,12,.04);
--sh-2:0 2px 8px -2px rgba(12,12,12,.10);
--sh-3:0 18px 40px -18px rgba(12,12,12,.32);
}
/* ============================================================
2 · 纸纹与底
============================================================ */
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink)}
/* 纸纹：和首页同一张噪点，mix-blend-mode 让它在纸上做"纤维"而不是灰雾 */
body::after{
content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.42;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
}
/* ============================================================
3 · 内页页头
------------------------------------------------------------
原设计：右侧一张工厂照 + 一道深色渐变纱，文字压在上面。
第 47 轮：照片整块去掉，回到"眉标 · 大标题 · 导语 · 要点条"四层。
第 50 轮：**照片请回来了**（用户："每个页面都没有……背景图，不像之前显得高级"），
但不套旧那层深纱 —— 改成"绿铜双色调 + 左边化进纸面"，见第 13 节。
============================================================ */
.page-head{
background:transparent;
border-bottom:1px solid var(--line);
/* ⚠️ 不要在这里写 padding-top。
≥1021px 时 style.css 末尾那条「页头叠加档」给了 margin-top:-84 +
padding-top:84+56，文字才正好落在页头下沿；<1021px 时页头在文档流里，
基础 padding 本来就够。这里再补一份 --header-h，窄屏就会多出一大块空白
（390px 下实测多 84px）。 */
}
/* 第 50 轮起照片重新上页头 —— 具体样式在第 13 节（文件末尾）。
这里**不要**再写 display:none，它会和第 13 节同权重、靠先后决胜负。 */
/* 走线底纹留着（它是 7% 的深蓝细线，纸上正好像制图底稿），
但不要铺满：只在标题右侧露一点。 */
.page-head::before{
opacity:.85;
-webkit-mask-image:radial-gradient(60% 110% at 88% 30%,#000 0%,transparent 70%);
mask-image:radial-gradient(60% 110% at 88% 30%,#000 0%,transparent 70%);
}
.page-head h1{
font-size:clamp(34px,4.6vw,58px);
line-height:1.04;
letter-spacing:-.032em;
font-weight:700;
margin:var(--s-3) 0 var(--s-5);
}
.page-head .lead{color:var(--ink-2);font-size:var(--fs-md);line-height:1.62}
/* 页头那排要点（.reads）：从"深底上的小药丸"改成"细线表格行" */
.page-head .reads{gap:0;border-top:1px solid var(--line-2)}
.page-head .reads li{
border:0;border-bottom:1px solid var(--line);
border-radius:0;background:transparent;
padding:10px 0;
}
.page-head .reads .k,
.page-head .reads .v{color:var(--ink)}
.page-head .reads .k{color:var(--mute)}
/* 日期 / 阅读时长那行 */
.updated{color:var(--mute)}
/* 窄屏：页头要点条从两列收成一列，否则 mono 小标签会挤成三行 */
@media(max-width:700px){
/* ⚠️ .page-head.article .reads 在 style.css 里是 (0,3,1)，比 .page-head .reads
高一档，两条都得写出来才压得住（媒体查询不加特异性）。 */
.page-head .reads,
.page-head.article .reads{grid-template-columns:1fr;max-width:none;margin-left:0}
}
/* ============================================================
4 · 版块与分隔
------------------------------------------------------------
纸面设计的节奏靠"细线 + 一点点底色差"，不靠卡片投影。
============================================================ */
section.alt{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wrap{}
/* 章节标题：和首页一致，收紧字距、加粗 */
h2{letter-spacing:-.022em}
h3{letter-spacing:-.012em}
.eyebrow{color:var(--jade-600)}
.eyebrow::before{background:var(--jade-400);width:22px;flex-basis:22px}
/* ============================================================
5 · 答问块 / 卡片 / 列表
============================================================ */
.answer{
background:var(--paper);
box-shadow:none;
border:1px solid var(--line);
border-left:3px solid var(--jade-400);
border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.card{
background:var(--paper);
box-shadow:none;
border:1px solid var(--line);
border-radius:var(--r-md);
}
section.alt .card{background:var(--paper)}
.card:hover{background:#F7F7F7;box-shadow:none;transform:none;border-color:var(--line-2)}
.card::before{background:var(--jade-400)}
/* 卡片标题那条下划线：原来是 currentColor（纯黑、1px 贴字），
一整屏卡片读起来像 48 个超链接。压到 30% 墨色，悬停再回到绿。 */
.card h3 a{text-decoration-color:rgba(12,12,12,.30)}
.card h3 a:hover{text-decoration-color:var(--jade-400);text-decoration-thickness:2px}
/* ---- 折叠问答：从"一叠白卡"改成"细线手风琴" ----
demo 那套的分隔全靠线，卡片只留给需要抬起来的东西。 */
.faq details{
background:transparent;border:0;border-bottom:1px solid var(--line);
border-radius:0;margin-bottom:0;box-shadow:none;
}
.faq details:hover{background:rgba(12,12,12,.03)}
.faq details[open]{background:transparent;box-shadow:none}
.faq summary{padding:16px 2px;background:transparent}
.faq summary:hover{background:transparent;color:var(--jade-600)}
.faq details[open] summary{background:transparent;border-bottom:1px solid var(--line)}
.faq .a{padding:16px 2px 20px}
/* ============================================================
6 · 按钮
------------------------------------------------------------
纸面上那颗绿按钮和首页 demo 的 .btn-primary 一致：
圆角 10、绿底白字、一层柔和的绿影，不要 style.css 那道沉金底边。
============================================================ */
.btn{border-radius:10px;font-weight:600;letter-spacing:.01em}
.btn.primary{
background:var(--green-500);color:#fff;
box-shadow:0 10px 26px rgba(66,166,70,.24);
}
.btn.primary:hover{background:#4CB950;color:#fff;box-shadow:0 16px 34px rgba(66,166,70,.32)}
.btn.solid:hover{background:var(--tint-200);color:var(--ink)}
/* ============================================================
7 · 收尾报价带（每页最后一节，17 个页面各一处）
------------------------------------------------------------
纸面上一个灰按钮没有分量。这节改成**墨块**，和首页 demo 的
深色收尾段一致：白字 + 绿按钮。
markup 侧给那一节加 class="cta-band"（转换脚本统一加）。
按钮底原来是亮绿 --jade-300 #69DD6E 配墨字。用户 2026-10-21 要「绿底白字」——
直接换白字不行：白压 #69DD6E 只有 1.7:1，糊成一片。改法是**把绿压深一档**
（--green-700 #2F7D35 配白 5.1:1），白字就成立了，按钮在墨底上也仍是最亮的一块。
============================================================ */
section.cta-band{
/* 比页脚（--deep-900）抬一档，两块墨才分得开 */
background:#151515;
border-top:1px solid var(--line);
border-bottom:1px solid rgba(255,255,255,.12); /* 和下面同色的页脚之间留一条线 */
padding-block:var(--s-12);
color:var(--on-dark);
/* 这一节的次按钮是 markup 上的内联 style="color:var(--ink)"（还带一条
var(--line-2) 的边框）。内联样式压不过选择器，但**变量**会就地生效 ——
把这两个令牌在这里改成浅色，22 个页面的内联样式就跟着亮了，
不用逐页改内联。 */
--ink:#EDEDED;
--line-2:rgba(241,241,241,.32);
}
section.cta-band h2{color:var(--on-dark);letter-spacing:-.022em}
/* 墨底上的 和 section.sheet 一样要换成亮绿，--jade-600 压上去是块黑 */
section.cta-band h2 em{color:var(--jade-300)}
section.cta-band .lead,
section.cta-band p{color:var(--on-dark-3)}
/* 第 55 轮修：.answer 的纸底在墨色收尾带里会变成「白底白字」——
这一节把 --ink 改成了 #EDEDED，而 .answer strong 用的正是 --ink。
两块文章页的收尾带都踩了这个坑（文字一直在，只是读不出来）。 */
section.cta-band .answer{
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.16);
border-left-color:var(--jade-400);
color:var(--on-dark-3);
box-shadow:none;
}
section.cta-band .answer strong,
section.cta-band .answer b{color:var(--on-dark)}
section.cta-band .btn.solid{
background:var(--green-700);
color:#fff;
border-color:transparent;
/* 墨底上不要投影：不管是 0 10px 26px 还是收到 -16px，深底上都读成一圈脏光。
按钮本身就是这一屏最亮的东西，不需要再托一把。 */
box-shadow:none;
}
/* 悬停往深走：绿已经压到配白字的临界，再往亮提白字就掉到 4.5:1 以下了 */
section.cta-band .btn.solid:hover{
background:#28702E;
color:#fff;
}
/* 选中色：style.css 里写死的是旧板绿 rgba(35,149,92,.55)，纸上偏脏 */
::selection{background:rgba(66,166,70,.28);color:var(--ink)}
/* ============================================================
8 · 图片与图注
============================================================ */
.figure-lead img,
.gallery img{border:1px solid var(--line)}
figcaption{color:var(--mute)}
/* ============================================================
9 · 两栏对照表（.verdict）
------------------------------------------------------------
style.css 里那四行是**深底时代**的色值：绿 rgba(35,149,92,·)、红 rgba(142,50,37,·)，
压到纸上是一层发灰的薄荷 / 陶土，和新配色的绿不是一个色相。这里按纸面重给：
绿用 #42A646、红用 #B3261E，透明度压到 .09–.15（纸底上再高就糊了）。
============================================================ */
table.verdict td:first-child{background:rgba(66,166,70,.12)}
table.verdict td:last-child{background:rgba(179,38,30,.07)}
table.verdict tbody tr:nth-child(even) td:first-child{background:rgba(66,166,70,.18)}
table.verdict tbody tr:nth-child(even) td:last-child{background:rgba(179,38,30,.12)}
table.verdict td:first-child,
table.verdict td:last-child{border-color:transparent}
/* ============================================================
10 · 尺寸面板（capabilities.html 的 .sizepanel）
------------------------------------------------------------
第 34 轮它是照着一张**深绿底参考稿**做的：--deep-900 整块墨、左上角一道绿光、
尺寸线是 .30 的白。那是深色时代的「这一页的高光」。整站翻到纸上之后，
它变成页面正中间唯一一块没换过来的墨 —— 上下都是纸，中间一块黑砖。
这一节把它换回纸面，但**保留它作为「技术图版」的身份**：
· 面改成 --paper + 细线框（和 .card 同一档），绿光去掉
· 两栏之间加一条竖细线 —— 制图稿的分栏语言，比单纯拉开间距更像"图版"
· 尺寸线从白改成墨（--dim-line .30 → 墨 .30），标签墨色 mono
⚠️ 事实载体不变：两个尺寸、两条限制、拆面板那句话仍全在 DOM 文本里，
两张照片仍是 alt="" 的示意位。这一节只动颜色和分隔，不动内容。
============================================================ */
.sizepanel{
--dim-line:rgba(12,12,12,.30);
/* 不做成"第五张卡"：这一页上头已经排了四张表，全是 #F2F2F2 圆角面。
再给一块同款面，整页就只剩一种东西了。改成**上下细线的图版** ——
首页首屏那排数字（24+ / 40.39M / 6+ / 1pc）用的就是这套：不靠面色，
靠线和大字立住。 */
background:transparent;
border:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
border-radius:0;
padding:var(--s-9) 0;
color:var(--ink-2);
}
/* 左上角那道绿光：深底上的"打光"，纸上只有一团脏 */
.sizepanel::before{display:none}
.sizepanel .eyebrow{color:var(--jade-600)}
.sizepanel .eyebrow::before{background:var(--jade-400)}
.sizepanel h3{color:var(--ink)}
.sizepanel p{color:var(--ink-2)}
/* 板型三枚小牌：纸上用细线圈，不要实心底 */
.sizepanel .sz-types b{color:var(--ink);border-color:var(--line-2)}
.sz-frame{background:rgba(12,12,12,.05)}
.sz-dim{color:var(--mute)}
.sizepanel .size-note{border-top-color:var(--line);color:var(--ink-2)}
.sizepanel .size-note svg{stroke:var(--jade-600)}
.sizepanel figcaption{color:var(--mute)}
.sizepanel figcaption b{color:var(--ink)}
/* 两栏之间一条竖细线。只在两栏并排时出现 —— 收成一列之后它会被当成
某个区块的左边缘，反而多一道莫名其妙的杠。 */
@media(min-width:901px){
.sizegrid{gap:0}
.sizecol{padding-right:var(--s-9)}
.sizecol + .sizecol{
border-left:1px solid var(--line);
padding-left:var(--s-9);
padding-right:0;
}
}
/* ============================================================
11 · 把首页那套语言搬进内页（第 48 轮）
------------------------------------------------------------
用户 2026-10-21：「我的其他页面没有首页的这种设计感，很生硬」。
对。前一轮只做了「翻令牌 + 修组件」—— 颜色统一了，但版式还是老站那套：
每个版块都是 小节标题 + 一段灰字 + 一叠直角卡片，全站同一个节拍。
首页之所以有设计感，靠的是下面这五件东西，内页一件都没有：
① 眉标前面那颗**铜色小方块**（不是一道绿短线）
② 大标题的**末句压绿**（``）
③ 每个版块右上角的**描边幽灵数字** 01/02/03
④ 隔几屏来一块**墨色图版**（网格底纹 + 反向表格）
⑤ 数字用小字标 + 大字值的**横条**（首页首屏那排 24+ / 40.39M / 6+ / 1pc）
这一节把 ①②③⑤ 做成 CSS，22 个页面自动吃到；
④ 做成一个可以按页挂的类 `section.sheet`（哪一节该当"图版"是排版判断，
不能全站统一，所以留成显式开关）。
⚠️ `` 里的绿不是装饰，是"这句是重点"的信号 —— 一屏最多一处，
别整段都包进去。
============================================================ */
/* ---- 11.1 眉标：一道绿短线 → 首页那颗铜色小方块 ------------------ */
.eyebrow{color:var(--ink-2)}
.eyebrow::before{
width:8px;height:8px;flex:0 0 8px;border-radius:1px;
background:var(--enig);
box-shadow:0 0 0 3px rgba(184,100,47,.14);
}
/* 墨色图版上要反过来用亮绿，铜色压在黑上没有对比 */
section.sheet .eyebrow{color:#B9B9B9}
section.sheet .eyebrow::before{
background:var(--jade-300);box-shadow:0 0 0 3px rgba(105,221,110,.16);
}
/* 表格的小标题（caption）也是同一种"等宽小字"，一页能出现四五个，
挂上同一颗铜方块才成一套语言 —— 否则铜色全站只剩页头那一颗。 */
caption::before{
content:"";display:inline-block;
width:6px;height:6px;border-radius:1px;vertical-align:1px;
margin-right:9px;background:var(--enig);
box-shadow:0 0 0 3px rgba(184,100,47,.14);
}
section.sheet caption::before{
background:var(--jade-300);box-shadow:0 0 0 3px rgba(105,221,110,.16);
}
/* ---- 11.2 标题：字号提上去，末句压绿 ------------------------------ */
/* style.css 的 h2 是 --fs-2xl（≈32px），首页的 .sec-head h2 是 31→48。
内页正文比首页长，取中间偏上一档，别照抄首屏那个尺度。 */
section h2{
font-size:clamp(30px,3.4vw,44px);line-height:1.06;letter-spacing:-.035em;
font-weight:740;margin-bottom:var(--s-4);
}
/* 版块第一个元素不要带 margin-top —— section 自己的 padding 已经给了呼吸，
再叠一个 --s-9 就是凭空多出 56px（这一条治的就是"每个版块开头一截空的"）。 */
section > .wrap > :first-child{margin-top:0}
h1 em,h2 em,h3 em{font-style:normal;color:var(--jade-600);font-weight:inherit}
section.sheet h2 em{color:var(--jade-300)}
/* ---- 11.3 章节编号：右上角一枚描边幽灵数字 ------------------------ */
/* 用 CSS 计数器，不用给 22 个页面的每节手写 data-n —— 页数一多就会漏。
只数"正文章节"：页头（.page-head）和收尾报价带（.cta-band）不占号。
⚠️ 数字要挂在 上，不能默认全站生效。
首页那几个 data-n 是**人挑过位置**的（版块右上角正好空着）；而内页里
不少版块开头就是一张通栏图（.figure-lead）或一个网格，数字会被压在图下面
露出半截。所以按页开：每转完一页、看过它的版块位置，再给 body 加 has-nums。 */
body{counter-reset:ch}
/* .nonum 是**关数字不关计数**：章节照样 +1，只是不画那个数字。
要放在主选择器的 :not() 里 —— 另写一条 section.nonum 权重 (0,1,2)
打不过这里的 (0,2,2)，写了也不生效。 */
body > section:not(.page-head):not(.cta-band){
counter-increment:ch;position:relative;
}
body.has-nums > section:not(.page-head):not(.cta-band):not(.nonum)::after{
content:counter(ch,decimal-leading-zero);
/* 挂在 section 上而不是 .wrap 上：数字要落在版块的上内边距里（和标题同一水平线
偏上），挂在 .wrap 上就会掉到标题下面去。右边距要自己补版心外的空白 ——
首页 .band[data-n] 用的也是这一条式子。 */
position:absolute;top:clamp(28px,3.6vw,60px);
right:max(var(--s-6),calc((100vw - var(--max)) / 2 + var(--s-6)));
font-size:clamp(54px,6.4vw,96px);font-weight:750;letter-spacing:-.06em;line-height:.8;
color:transparent;-webkit-text-stroke:1px rgba(12,12,12,.17);
pointer-events:none;user-select:none;z-index:0;
}
/* 墨底上用亮色描边。纸面上那条是 rgba(12,12,12,.17)，压在 #0C0C0C 上等于没有。
实测：纸面数字 206 / 底 242（差 36）；墨面用 .18 白描边能到 59 / 底 11（差 48），
读起来是一个重量。
⚠️ 选择器必须和上面那条通用规则**一样长**才压得住：通用规则是 (0,4,2)
（body.has-nums + section + 三个 :not），写成 section.sheet 是 (0,2,1)，
写成 body.has-nums > section.sheet:not(.cta-band) 是 (0,3,2) —— 都不够。
第一版就是栽在这上面：rule 明明写着，浏览器算出来的还是纸上那条约色。 */
body.has-nums > section.sheet:not(.page-head):not(.cta-band):not(.nonum)::after{
-webkit-text-stroke:1px rgba(241,241,241,.18);
}
@media(max-width:760px){
body.has-nums > section:not(.page-head):not(.cta-band):not(.nonum)::after{
font-size:42px;top:20px;right:var(--s-5);
}
/* 42px 上同样 1px 的白描边，在墨底基本看不见（电脑上是 96px，笔画占比大得多）。
窄屏墨面单独加浓。 */
body.has-nums > section.sheet:not(.page-head):not(.cta-band):not(.nonum)::after{
-webkit-text-stroke:1px rgba(241,241,241,.34);
}
}
/* ---- 11.4 墨色图版 section.sheet ---------------------------------- */
/* 首页 #02 那块「BARE BOARD」：近黑的底 + 一层 56px 网格 + 表格反向。
做法和整站翻纸面同一个套路 —— **局部翻转令牌**，让子组件自己跟着变，
而不是给表格、卡片、说明各写一遍深色版本。 */
section.sheet{
position:relative;overflow:hidden;
background:#0C0C0C;
border-top:1px solid rgba(241,241,241,.12);
border-bottom:1px solid rgba(241,241,241,.12);
color:#C7C7C7;
/* 内页的 section 是 --s-13（88px），图版按首页给 66→108。
这条故意盖掉 style.css 的 section.tight（48px）—— 墨块四周收得太紧，
幽灵数字就顶到标题上了。 */
padding-block:clamp(66px,8vw,108px);
--ink:#F1F1F1;--ink-2:#C7C7C7;--mute:#9A9A9A;
--line:rgba(241,241,241,.14);--line-2:rgba(241,241,241,.26);--line-3:rgba(241,241,241,.36);
--paper:#161616;--paper-2:#1B1B1B;
--tint-50:#1A1A1A;--tint-100:#222222;--tint-200:#2B2B2B;
--jade-600:#69DD6E;--jade-500:#69DD6E;--jade-400:#69DD6E;--jade-300:#69DD6E;
--jade-200:rgba(105,221,110,.30);--jade-100:rgba(105,221,110,.12);
--green-500:#69DD6E;--green-600:#69DD6E;
--sh-1:none;--sh-2:none;--sh-3:none;
}
/* 网格底纹。右侧满、左侧淡出 —— 和首页 .sheet-bg 同一条 mask。 */
section.sheet::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(241,241,241,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(241,241,241,.05) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 100%);
mask-image:linear-gradient(90deg,transparent,#000 40%,#000 100%);
}
section.sheet > .wrap{position:relative;z-index:1}
/* 图版上的正文 / 小字跟着令牌走，但 .sub 是写死的灰 */
section.sheet .sub{color:#A8A8A8}
section.sheet .sub b,section.sheet .sub strong{color:#EDEDED}
/* ---- 11.5 页头读数：右栏竖排盒子 → 首页那排「大字值 + 小标签」 ---- */
/* 原来 .reads 是贴在页头右侧的一列小盒子，标题一长右边就空一大片。
首页那排数字用的是**竖线分隔的横条**，这里照搬；值在前、标签在后。 */
.page-head:not(.article) .head-grid{grid-template-columns:1fr;gap:0}
.page-head:not(.article) .head-copy{max-width:none}
.page-head:not(.article) .reads{
max-width:none;margin:var(--s-7) 0 0;
/* ⚠️ flex-direction 必须显式写回来：style.css 的 .reads 是 column，
这里只改 display 的话它照样竖着排（第一版就是这样）。 */
display:flex;flex-direction:row;flex-wrap:wrap;gap:0;
border-top:1px solid var(--line-2);
}
.page-head:not(.article) .reads li{
flex:1 1 0;min-width:140px;
display:flex;flex-direction:column-reverse;align-items:flex-start;gap:7px;
padding:15px 22px 6px 0;
background:transparent;border:0;border-radius:0;
box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.page-head:not(.article) .reads li + li{
border-left:1px solid var(--line);
padding-left:22px;
}
.page-head:not(.article) .reads .v{
font-size:clamp(16px,1.55vw,21px);font-weight:650;line-height:1.25;
letter-spacing:-.012em;white-space:normal;
}
.page-head:not(.article) .reads .k{
font-size:10.5px;letter-spacing:.14em;white-space:nowrap;
}
/* 页头标题再放一档。内页 h1 不是首屏标语，不追首页那个 108px。 */
.page-head h1{font-size:clamp(36px,4.9vw,62px)}
/* ============================================================
12 · 照片带 section.photo-band（第 49 轮）
------------------------------------------------------------
用户 2026-10-21：「每个页面都没有……背景图……不像我之前那样有背景图显得高级」。
对：整站换成纸面之后，22 个内页从头到尾是一张灰纸 —— 第 47 轮还把页头
那张压纱的工厂照（.page-media）删了，全站就只剩首页那块 poster-band 有照片。
这一节把首页 poster-band 的那层「照片处理」抽成可复用的类：
照片 → 去饱和 + 提对比 → 绿钢双色调（color 混合）→ 左侧压黑渐变
三件事都是为了让**文字能压在照片上**，不是给照片加滤镜好看。
用法（markup 侧加三样东西）：
...
⚠️ **必须用 ![]()
，不能用 CSS 的 --photo:url(...)**：自定义属性里的 url()
是相对**样式表**解析的，`assets/img/x.jpg` 会变成 `assets/assets/img/x.jpg`，
照片静默 404，页面上只剩一层绿灰渐变 —— 第一版就是这么翻车的。
⚠️ 只给"内容短"的版块用 —— 照片压不住表格和长段落。
内页里合规的就只有每页最后一节（收尾报价带）。
⚠️ 图片一律用 hero-factory / hero-smt-line 这类 2400×1000 的横图；
667×667 的方图铺满会糊。每页换一张和该页主题相关的。
============================================================ */
section.photo-band{
position:relative;overflow:hidden;isolation:isolate;
background:#0C0C0C;
color:#EDEDED;
/* 收尾带上的内联 style 靠这两个令牌变亮（见第 7 节） */
--ink:#EDEDED;
--line-2:rgba(241,241,241,.32);
}
/* 照片层。负 z-index + isolation:isolate 留在本节里，不漏到相邻版块。
object-position 压在 44%：这类厂房横图的机器都在中线偏下。 */
section.photo-band > .pb-photo{
position:absolute;inset:0;z-index:-3;
width:100%;height:100%;object-fit:cover;object-position:center 42%;
filter:saturate(.9) contrast(1.14) brightness(.95);
}
/* 双色调：一层纯色渐变走 color 混合 —— **换色相、留明度**，机器地面灯管的
明暗全在，颜色归到站的绿钢色系。直接叠半透明绿只是把照片压暗，
右半边会变成一团灰绿（第一版的样子）。 */
section.photo-band::before{
content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
/* 比首页那条蓝钢（#3E545B→#2F4249）更绿：内页收尾带只有三百多高，
蓝钢在这个尺寸上读起来就是"黑白照片"，和上面的绿按钮不成一套。 */
background:linear-gradient(100deg,#1B7A4C 0%,#25564A 46%,#123A31 100%);
mix-blend-mode:color;
}
/* 压黑层：左边到 34% 是纯黑（文字区），50% 之后快速放开，74% 起照片原样。
底部再加一层暗角，和下面同色的页脚接得住。 */
section.photo-band::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
linear-gradient(97deg,
rgba(12,12,12,.98) 0%,
rgba(12,12,12,.97) 30%,
rgba(12,12,12,.93) 46%,
rgba(12,12,12,.66) 58%,
rgba(12,12,12,.26) 72%,
rgba(12,12,12,.04) 86%,
transparent 100%),
linear-gradient(0deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,.10) 18%,transparent 38%);
}
section.photo-band > .wrap{position:relative;z-index:1}
@media(max-width:900px){
/* 窄屏照片只剩一条缝，左黑右图的渐变没有意义 —— 改成上下两层：
上黑下暗，照片在中间露一条。 */
section.photo-band::after{
background:
linear-gradient(180deg,rgba(12,12,12,.94) 0%,rgba(12,12,12,.86) 50%,rgba(12,12,12,.74) 100%),
linear-gradient(0deg,rgba(8,8,8,.35),transparent 40%);
}
section.photo-band > .pb-photo{object-position:center 34%}
}
/* ============================================================
13 · 页头实拍 .page-media 回到纸上（第 50 轮）
------------------------------------------------------------
第 47 轮把这张照片整块 display:none 了，理由是"纸面要留白"。
用户 2026-10-21 反馈的正是这个：「每个页面都没有……背景图……
不像我之前那样有背景图显得高级」。所以第 50 轮请回来。
但**不能直接取消隐藏**：style.css 里那套是给深色页头配的 ——
`.page-media::after` 的渐变在 26% 处就到 rgba(11,13,15,.94)，
压在浅纸（--band #D7D7D7）上会是一条突兀的黑纱。这一节重写为：
照片（去饱和）→ color 混合上绿铜 → 左侧化进纸面 · 底部化进纸面
和首页 poster-band / 第 12 节 photo-band 是同一套"双色调"逻辑，
只不过那边底下是墨，这边底下是纸。**明度必须留住**（筛掉 `color`
混合换成半透明色块，右半边会当场塌成一团灰）。
⚠️ `.page-media` 是 position:absolute + z-index:1，自成一个层叠上下文，
::before 的 mix-blend-mode 只会混它自己那张 ![]()
，漏不到页面上。
⚠️ 纸色是 **--band (#D7D7D7)** 不是 --bg：页头是 ，
`.page-head{background:transparent}` 让色带透上来。写错成 #E2E2E2
会在页头底部留一条比周围亮一档的横带。
⚠️ object-position 各页写在 img 的内联 style 上，内联优先级更高，
这里不设 —— 设了也不生效，别白写。
============================================================ */
.page-head .page-media{
display:block;
position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
-webkit-mask-image:none;
mask-image:none; /* 旧的"左透右实"遮罩交给下面的 ::after */
}
/* 正文列收到 600px —— 首页 hero 也是这个切法（左标题 / 右实物照）。
不收的话 24ch 的大标题会一路压到 73%，照片只能露出最右一窄条。 */
.page-head:not(.article) .head-copy{max-width:660px}
.page-head:not(.article) h1,
.page-head:not(.article) .lead{max-width:100%}
/* 先把照片本身压到接近单色（.45）：双色调要的是明暗关系，
原片的饱和度留着会顶掉绿铜，右边变成花屏。 */
.page-head .page-media img{
width:100%;height:100%;object-fit:cover;
opacity:1;
filter:saturate(1.1) contrast(1.12) brightness(.9);
}
/* ::before 留给第 14 节的走线底纹。这里原来有一块停用的双色调层，
虽然是 display:none，但它和 14 节同选择器同权重 —— 14 节没写 display，
那条 none 就照样生效，线一条都画不出来。已整块删除，别再加回来。 */
/* 化进纸面：左边是标题区（必须几乎实心 --band），72% 之后照片才敢露全。
底部那条横的是给 .reads 让位 —— 要点条是横贯版心的一行，
右端会压到照片上。 */
.page-head .page-media::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,
#D7D7D7 0%,
#D7D7D7 58%,
rgba(215,215,215,.97) 62%,
rgba(215,215,215,.80) 68%,
rgba(215,215,215,.45) 76%,
rgba(215,215,215,.10) 86%,
transparent 93%),
linear-gradient(0deg,
#D7D7D7 0%,
rgba(215,215,215,.94) 5%,
rgba(215,215,215,.42) 13%,
transparent 27%);
}
/* 要点条：照片退到下面时这里已经变回纸，但窄一点的视口上仍可能压到。
直接铺纸色兜底 —— 底本来就是纸，不铺看不出来，铺了也不会破坏什么。 */
.page-head .reads{background:var(--band)}
/* 长文页那条 2×2 读数带横跨 880 版心，右两格会落在照片上
（AOI / Electrical test 在深绿板底上直接看不见）。纸色铺底就解决了 ——
底本来就是纸，不铺也看不出差别。 */
/* 窄屏：侧面那条缝没有意义 —— 照片改成页头顶上的一条横带，
下面是文字。页头补一份等于那条带子的上内边距，眉标才不会被压住。
⚠️ 高度用 min(46vw,240px) 两处必须一致，改一处就得改另一处。 */
@media(max-width:900px){
.page-head{padding-top:calc(min(46vw,240px) + var(--s-6))}
.page-head .page-media{
top:0;bottom:auto;left:0;right:0;
height:min(46vw,240px);
}
.page-head .page-media img{object-position:center 45%}
.page-head .page-media::after{
background:
linear-gradient(180deg,
rgba(215,215,215,.10) 0%,
rgba(215,215,215,.34) 58%,
#D7D7D7 100%);
}
}
/* 长文页（.article）：版心只有 880px，正文左右各留 ~140-280px。
页头照片只在**版心之外**那一溜露出来 —— 所以纸色要一路撑到
calc(50% + 330px)，正好压在版心右缘之外，长导语下面不会垫照片。
⚠️ 用 px 而不是百分比：版心是固定 1140/880 居中，百分比会随视口变化，
1920 宽屏上照片会整块糊到正文底下。 */
.page-head.article .page-media::after{
background:
linear-gradient(90deg,
#D7D7D7 0%,
#D7D7D7 calc(50% + 250px),
rgba(215,215,215,.86) calc(50% + 292px),
rgba(215,215,215,.45) calc(50% + 360px),
rgba(215,215,215,.10) calc(50% + 430px),
transparent calc(50% + 490px)),
linear-gradient(0deg,
#D7D7D7 0%,
rgba(215,215,215,.94) 5%,
rgba(215,215,215,.42) 13%,
transparent 27%);
}
/* ============================================================
14 · 图纸层：照片和小板块的「工程图」细节（第 51 轮）
------------------------------------------------------------
用户 2026-10-21：「可以给这些背景照片加上一些创意，再在每一个小板块
也可以用一些设计去丰富创意」。
这是个 PCB 站的站，最贴切的"创意"不是再叠一层滤镜，而是把**制图**那套
语言搬上来。全部纯 CSS，不改一个字的内容，21 个内页同时生效：
① 页头照片压一层走线底纹（soft-light，纸面上看不见）
② 图版对位角：.figure-lead / .sz-frame 四角各一小段铜色细线
③ 规格表：隔行微变色 + 悬停时左缘一道铜色刻度
④ 小节标题上方一道 32px 铜色短线 —— 制图稿的"模块引线"
⚠️ 全是 1px / 2% 量级的东西。这一层的作用是"近看才发现"，不是"一眼看到"。
再往上加粗就会变成装饰噪音，和纸面设计的分寸感打架。
============================================================ */
/* ---------- ① 页头照片上的走线底纹 ----------
第一版用白色 soft-light，在有雾的厂房照上等于没画 —— 亮度差太小。
改成**墨色走线 + 铜色焊盘**，alpha 直接烘进 SVG（线条 .55 / 焊盘 1），
外层 opacity 统一压到 .32：线约 .18、盘约 .32，照片上看得见但不抢字。
左边半个屏幕本来就被 ③ 的纸色渐变压住了，所以线条只在照片那边露出来。 */
.page-head .page-media::before{
content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230C0C0C' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M0 34h36l16 16h44'/%3E%3Cpath d='M0 104h28l18-18h34l14 14h46'/%3E%3Cpath d='M70 0v26'/%3E%3Cpath d='M70 140v-28'/%3E%3Cpath d='M108 70h32'/%3E%3Cpath d='M0 70h20'/%3E%3C/g%3E%3Cg fill='%23B8642F'%3E%3Ccircle cx='52' cy='50' r='2.4'/%3E%3Ccircle cx='46' cy='86' r='2.4'/%3E%3Ccircle cx='108' cy='70' r='2.4'/%3E%3Ccircle cx='20' cy='70' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
background-size:140px 140px;
opacity:.32;
mix-blend-mode:normal;
}
/* 窄屏那张照片是顶部一条横带（高 ≤240px），走线按 90px 排，否则一条线都露不全 */
@media(max-width:900px){
.page-head .page-media::before{background-size:90px 90px;opacity:.30}
}
/* ---------- ② 图版对位角 ----------
inset 取 7px 而不是 0：贴着图边走会被照片自己的暗边吃掉，看着像描边；
往里收一点，才读得成"对位角"。八条 1px 线拼四个 L 角 —— 一个伪元素只有
一层 background-image，所以是"八层渐变"而不是两个角各一个伪元素。
⚠️ .figure-lead 和 .sz-frame 要分开写，不能共用一条：
.sz-frame 只包住图（img 撑满），四角没问题；
.figure-lead 是 ，图下面还挂着 figcaption，四角画在 figure 上
下面那一对会掉到说明文字底下 —— 看着像误画的线。所以它只标**上沿**
一对角，正好卡在照片顶端。 */
.figure-lead,
.sz-frame{position:relative}
.figure-lead::before{
content:"";position:absolute;
top:7px;left:7px;right:7px;height:20px;
pointer-events:none;
--mc:var(--enig);
background-image:
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc)),
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc));
background-size:
20px 1px,1px 20px,
20px 1px,1px 20px;
background-position:
left top,left top,
right top,right top;
background-repeat:no-repeat;
opacity:.9;
}
.sz-frame::after{
content:"";position:absolute;inset:7px;pointer-events:none;
--mc:var(--enig);
background-image:
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc)),
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc)),
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc)),
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc));
background-size:
20px 1px,1px 20px,
20px 1px,1px 20px,
20px 1px,1px 20px,
20px 1px,1px 20px;
background-position:
left top,left top,
right top,right top,
left bottom,left bottom,
right bottom,right bottom;
background-repeat:no-repeat;
opacity:.9;
}
/* ---------- ③ 规格表 ----------
表本身是一摞白行 + 发丝线，扫读时容易串行。加两件事：
隔行 2.5% 的墨、悬停时左缘一道铜色刻度（不改变行高）。 */
/* ⚠️ style.css 1452 行的斑马纹是画在 **td** 上的（`tbody tr:nth-child(even) td`），
往 tr 上铺底色会被 td 整个盖住 —— 第一版就是这么写的，渲出来一行都没变。
悬停也得落在 td 上，同理。 */
table.spec tbody tr td{transition:background .16s ease,box-shadow .16s ease}
table.spec tbody tr:hover td{background:rgba(66,166,70,.08)}
table.spec tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--enig)}
table.spec td:last-child{font-variant-numeric:tabular-nums}
/* ---------- ⑤ 小板块的对位角：卡片 / 结论框 / 尺寸面板 ----------
和第 ② 节同一套记号，只画**右上角**一个 L —— 小板块本来就有圆角和边框，
四角全画就成了双层描边。往里收 6px 是躲开 12px 圆角。
⚠️ .card 的 ::before 是那条绿色顶条，别抢；只能用 ::after。 */
.card,
.answer,
.sizepanel,
.shotrow figure{position:relative}
.card::after,
.answer::after,
.sizepanel::after,
.shotrow figure::after{
content:"";position:absolute;top:6px;right:6px;
width:11px;height:11px;pointer-events:none;
background-image:
linear-gradient(var(--enig),var(--enig)),
linear-gradient(var(--enig),var(--enig));
background-size:11px 1px,1px 11px;
background-position:right top,right top;
background-repeat:no-repeat;
opacity:.42;
transition:opacity .16s ease;
}
.card:hover::after,
.shotrow figure:hover::after{opacity:1}
/* .shotrow 的图自己有 1px 边和圆角，记号落在 figure 上（图在 figure 最上方，
所以 top 对齐，bottom 不能给 —— 那会掉到 figcaption 上） */
/* ---------- ④ 小节标题上的铜色引线 ----------
制图稿里每个模块开头都有一条引线，用来"起一个段落"。
⚠️ 选择器写的是 `section h2` 而不是 `section > .wrap > h2`：
有一半页面的 h2 还包了一层（faq 页在 .faq 里、几页在 .sec-head /
.res-head 里、contact 在 .reveal 里），写成直接子元素会漏掉 15 处，
faq 整页的小节标题上方都是空的。 */
section h2{position:relative}
section h2::before{
content:"";position:absolute;
top:calc(-1 * var(--s-4));left:1px;
width:32px;height:2px;background:var(--enig);
opacity:.85;
}
/* 墨底上换成亮绿 —— 铜 #B8642F 压在 #0C0C0C 上几乎看不见。
三处都为墨底：墨色图版 / 结尾 CTA 墨块 / 带照片的 CTA 带。 */
section.sheet h2::before,
section.cta-band h2::before,
section.photo-band h2::before{background:var(--jade-300)}
/* 窄屏留白更紧，引线和上一段会撞，收短 */
@media(max-width:700px){
section h2::before{top:calc(-1 * var(--s-3));width:24px}
}
/* ⚠️ faq 页的 h2 是 flex 布局，它的 ::before 是分组编号「01/02」
（style.css 1745 行）。上面那条规则会把这个编号盒子变成 32×2 的铜条，
编号本身溢到线下面去 —— 必须就地还原。 */
.faq-layout .faq > h2::before{
position:static;top:auto;left:auto;
width:auto;height:auto;background:none;opacity:1;
}
/* ============================================================
15 · 索引页：指南目录 + 博客（第 52 轮）
------------------------------------------------------------
用户 2026-10-21：「把后面的页面优化一下，加一些 UI 设计」，
范围先定 guides.html 和 blog.html 两页 —— 这两页原来是"一格格同样的卡"
和"一张卡 + 一大片空白"，是全站最薄的。
这一节只服务于这两页（别页没有 .idx-* / .g-* / .post 这些类），
所以放在 paper-pages.css 末尾而不是再开一个文件：两页本来就加载它。
四件事：
① 指南按主题分组（编号 01–11），配一条吸顶跳转条 —— 不用再一路滚着找
② 卡片重做：左上编号 + 发丝线、底部一条 meta 带（读时长 / 箭头）
③ 博客那篇文章从"一张卡"改成左右分栏的图版卡
④ .rv 滚动渐显 + 卡片悬停细节
⚠️ 这一层是**加**，不是翻：第 47 轮那套令牌一个没动。
============================================================ */
/* ---------- 15.1 栏目导语 ---------- */
.idx-lead{max-width:var(--measure);margin:0 0 var(--s-8)}
.idx-lead h2{margin:0 0 var(--s-4);max-width:24ch}
.idx-lead p{margin:0;color:var(--ink-2);font-size:var(--fs-md);line-height:1.62}
/* ---------- 15.2 吸顶跳转条 ----------
四个分组各一格，格与格之间一条竖线 —— 和内页那些 .reads 数字条同一套语言。
吸顶时机：页头是 sticky（不是 fixed），所以 top 直接吃 --header-h。
⚠️ ≤1020px 页头是两行，--header-h 那 84px 不成立（页头实际更高）。
那一档干脆不吸顶：跳转条退回普通块，免得被页头切掉一半。
这一档本来也不需要它 —— 手机上一屏只有一两个分组。 */
.idx-jump{
position:sticky;top:var(--header-h);z-index:30;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
margin:0 0 var(--s-9);
background:rgba(226,226,226,.94);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-top:1px solid var(--line-2);
border-bottom:1px solid var(--line-2);
}
.idx-jump a{
position:relative;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
padding:14px 18px 14px 0;
border-right:1px solid var(--line);
text-decoration:none;color:var(--ink);
}
.idx-jump a:last-child{border-right:0;padding-right:0}
.idx-jump .n{
font:600 var(--fs-2xs)/1 var(--font-mono);letter-spacing:var(--ls-label);
color:var(--enig-ink);
}
.idx-jump .t{font-size:var(--fs-sm);font-weight:600;letter-spacing:-.005em}
.idx-jump .c{
font:500 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.06em;
color:var(--mute);
}
/* 悬停时格底压一道铜线。高度只有 2px，靠 transform 从左往右长出来 */
.idx-jump a::after{
content:"";position:absolute;left:0;right:18px;bottom:-1px;height:2px;
background:var(--enig);transform:scaleX(0);transform-origin:left;
transition:transform var(--dur-3) var(--ease-out);
}
.idx-jump a:last-child::after{right:0}
.idx-jump a:hover::after,
.idx-jump a:focus-visible::after{transform:scaleX(1)}
.idx-jump a:hover .t{color:var(--jade-600)}
@media(max-width:1020px){
.idx-jump{position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(max-width:720px){
.idx-jump{grid-template-columns:repeat(2,minmax(0,1fr))}
.idx-jump a{padding:12px 12px 12px 0}
.idx-jump a:nth-child(2){border-right:0}
.idx-jump a:nth-child(n+3){border-top:1px solid var(--line)}
}
/* ---------- 15.3 分组头 ----------
编号占一列固定宽，标题和导语对齐在第二列 —— 11 张卡片分四组，
靠的就是这道左边对齐的编号。 */
/* 锚点落位：html 上那条 scroll-padding-top 已经让了 --header-h + --s-5（104px），
这里再补 40 —— 跳转条自己占 53px，加起来 144，正好是「页头 + 跳转条 + 一圈白」。 */
.g-group{scroll-margin-top:40px}
.g-group + .g-group{margin-top:var(--s-12)}
.g-head{
display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--s-4);
align-items:baseline;
margin-bottom:var(--s-6);padding-bottom:var(--s-4);
border-bottom:1px solid var(--line-2);
}
.g-head .n{
font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.12em;
color:var(--enig-ink);
}
.g-head h3{
margin:0 0 6px;
font-size:clamp(21px,2.1vw,27px);line-height:1.2;letter-spacing:var(--ls-heading);
}
.g-head p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);max-width:64ch}
/* ---------- 15.4 指南卡 ----------
整张卡是一根 ：点哪儿都进得去，也就不需要给标题单独做悬停下划线。
底部那条 meta 带是**出血**的（负 margin 顶到卡片边上），
这样它读起来像卡片的一道底沿，而不是正文里多出来的一行。 */
.g-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.g-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-card{
position:relative;display:flex;flex-direction:column;gap:var(--s-3);
padding:var(--s-6) var(--s-6) 0;
background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-md);
text-decoration:none;color:var(--ink);
transition:border-color var(--dur-2) var(--ease),
transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease);
}
.g-card:hover{
border-color:var(--line-3);transform:translateY(-2px);box-shadow:var(--sh-2);
}
.g-card:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
/* 顶上一行：编号 + 一道拖到右边的发丝线 */
.g-card .k{
display:flex;align-items:center;gap:10px;
font:600 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
color:var(--enig-ink);
}
.g-card .k::after{content:"";flex:1;height:1px;background:var(--line)}
.g-card h4{
margin:0;
font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.012em;
color:var(--ink);
}
.g-card p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.62}
/* margin-top:auto —— 网格会把同一行的卡拉成等高，光靠 --s-5 的固定间距，
矮的那张底下会空出一截白边，两道底沿对不齐。auto 把 meta 始终压在卡底。 */
.g-meta{
display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
margin:auto calc(-1 * var(--s-6)) 0;
padding:13px var(--s-6);
border-top:1px solid var(--line);
border-radius:0 0 var(--r-md) var(--r-md);
background:rgba(12,12,12,.022);
font:500 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.10em;text-transform:uppercase;
color:var(--mute);
}
.g-meta .go{
font-family:var(--font-sans);font-size:15px;line-height:1;color:var(--enig-ink);
transition:transform var(--dur-2) var(--ease-out);
}
.g-card:hover .g-meta .go{transform:translateX(4px)}
/* ---------- 15.5 应用笔记那张横版卡 ----------
第四组只有一篇，用 2 列卡会空一半。改成图在左、字在右的横版，
一张卡占满整行 —— 空出来的那一半正好给照片。 */
.g-card.feature{
grid-column:1 / -1;
display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);grid-template-rows:1fr auto;
padding:0;overflow:hidden;
}
/* ⚠️ 图片是**绝对定位**的，不参与行高计算 —— 第一版让它 height:100%，
百分数在"行高由内容决定"的网格里解析不出来，退回图片自身比例：
一张 565×586 的竖图把整张横版卡撑到 410px 高，右边文字只占一半，
下面空出一大块纸。现在卡高由文字 + min-height 决定，图只负责铺满。 */
.g-card.feature .fx-media{
grid-row:1 / span 2;position:relative;overflow:hidden;background:#14251A;min-height:260px;
}
.g-card.feature .fx-media img{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--ease-out);
}
.g-card.feature:hover .fx-media img{transform:scale(1.035)}
/* 图版四角那套对位角（第 51 轮的记号），深色照片上换成亮绿 */
.g-card.feature .fx-media::after{
content:"";position:absolute;inset:10px;pointer-events:none;
--mc:var(--jade-300);
background-image:
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc)),
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc));
background-size:18px 1px,1px 18px,18px 1px,1px 18px;
background-position:left top,left top,right bottom,right bottom;
background-repeat:no-repeat;opacity:.55;
}
.g-card.feature .fx-tag{
position:absolute;left:14px;bottom:14px;z-index:2;
padding:7px 9px;border-radius:var(--r-xs);
background:rgba(12,12,12,.74);color:#F2F2F2;
font:500 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
}
.g-card.feature .fx{padding:var(--s-6) var(--s-7) var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.g-card.feature .fx h4{font-size:clamp(20px,2vw,25px)}
.g-card.feature .g-meta{margin:0;border-radius:0;padding:13px var(--s-7)}
@media(max-width:860px){
.g-card.feature{grid-template-columns:1fr;grid-template-rows:auto auto auto}
.g-card.feature .fx-media{grid-row:auto;height:210px;min-height:0}
.g-card.feature .fx{padding:var(--s-5) var(--s-5) var(--s-4)}
.g-card.feature .g-meta{padding:13px var(--s-5)}
}
@media(max-width:1000px){
.g-cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
.g-cards,.g-cards.c3{grid-template-columns:1fr}
.g-head{grid-template-columns:1fr;gap:var(--s-2)}
.g-group + .g-group{margin-top:var(--s-11)}
}
/* 15.6 / 15.7 已删除（第 54 轮）：`.post` 那张横版卡和 `.hub` 只服务 blog.html，
博客页改成期刊版式后这两组类一个页面都不用了。新样式见文件末尾第 17 节。 */
/* ---------- 15.8 滚动渐显 ----------
⚠️ 只在 有 .anim 时隐藏内容（那一句是页头里同步加的）。
没有 JS / JS 挂了，页面就是静态的，不会白屏。
延迟用 --i 排，卡片一张接一张，间隔 55ms。 */
.anim .rv{opacity:0;transform:translateY(16px)}
.anim .rv.in{
opacity:1;transform:none;
transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
transition-delay:calc(var(--i,0) * 55ms);
}
@media(prefers-reduced-motion:reduce){
.anim .rv,.anim .rv.in{opacity:1;transform:none;transition:none}
.g-card.feature:hover .fx-media img,
.g-card:hover{transform:none}
.rules a:hover .go{transform:none}
}
/* ============================================================
16 · Company 四页：about / who-we-are-for / exhibitions / contact（第 53 轮）
------------------------------------------------------------
用户 2026-10-21：「可以换然后按计划改，并且可以在有设计感一些」。
第 52 轮把 guides + blog 做完之后，公司那四页还是 47 轮翻完令牌的样子：
一页里五六个版块全是「标题 + 灰字 + 一叠通用卡片」，节拍完全一样。
这一节不加新文案、不动事实，只换**排法**。四个页面各有一个主招式：
about 数据页图框 · 七步编号栅格 · 六行工序单 · 证书矩阵 · 拼版照片
who-we-are-for 把「适合 / 不适合」做成一条条对齐的对照栅格
exhibitions 竖向时间轴 + 2×2 主图拼版
contact 字段改划线式 · 三步时间轴 · 扫码卡
规矩和前面几节一样：
· 只用 1px 线、纸色差和铜色，不再加投影和色块
· 铜色只做线和小记号；**当文字时一律用 --enig-ink**（AA 那一档）
· 文案逐字未改，改的只是 DOM 的包裹方式
============================================================ */
/* ---------- 16.1 数据页图框（about · 公司事实） ----------
十行事实原来就是一张通用表：灰扑扑的表头带、等权行、斑马纹。
套一层细线图框、把 caption 提成图框上的标签带，左列改等宽小字 ——
同一张表，读起来变成「一页规格书」。 */
.plate{
margin-top:var(--s-6);
border:1px solid var(--line-2);border-radius:var(--r-md);
background:var(--paper);overflow:hidden;
}
.plate table{
border:0;border-radius:0;background:transparent;margin:0;
}
/* 标签带：铺满图框顶部的一条纸灰带。caption 本身是 table 的第一个格子，
给它负边距是唯一不用改结构就能通栏的办法 —— 图框已经 overflow:hidden。 */
.plate caption{
padding:var(--s-3) var(--s-6);
background:rgba(12,12,12,.045);
border-bottom:1px solid var(--line);
color:var(--ink-2);
}
.plate table td{padding:14px var(--s-6)}
/* 左列：等宽小字，右缘一道竖线当「字段名 / 值」的分界。
⚠️ 基础样式里 `td:first-child` 是 --ink + 500（最深、最粗的那一档），
这里必须整条压回去，否则标签比它自己的值还抢眼。 */
table.facts td:first-child{
width:31%;
color:var(--mute);font-weight:500;
font-family:var(--font-mono);font-size:var(--fs-2xs);
letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1.5;
border-right:1px solid var(--line);
vertical-align:middle;
}
table.facts td:last-child{font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2)}
table.facts td .n{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* 斑马纹关掉：这张表已经有一列竖线分栏，再叠一层底色就是三道节奏 */
table.facts tbody tr:nth-child(even) td{background:transparent}
@media(max-width:700px){
.plate caption{padding:10px var(--s-4)}
.plate table td{padding:11px var(--s-4)}
/* 窄屏左列压到 38%，等宽小字再窄就一个字一行 */
table.facts td:first-child{width:38%;font-size:10.5px}
}
/* ---------- 16.2 七步编号栅格（about · one-stop 的 .process） ----------
原来是竖排时间线：一条竖线 + 圆圈数字 + 54px 左缩进，七步在 740px 里
拉成一千多像素高，滚到第四步已经忘了第一步。
改成两列栅格：编号在左当铜色刻度，标题和说明占右列两行。
行与行之间只留一道发丝线 —— 和第 11 节「用线不用卡」同一个分寸。 */
.chain{
counter-reset:chain;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:var(--s-9);
margin:var(--s-7) 0 0;padding:0;
max-width:none;
}
.chain li{
counter-increment:chain;
display:grid;grid-template-columns:46px minmax(0,1fr);
gap:0 var(--s-4);
margin:0;padding:var(--s-5) 0 var(--s-5);
border-left:0;border-top:0;border-bottom:1px solid var(--line);
font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);
}
/* ⚠️ 选择器必须写到 .process.chain 这一档（0,2,2）：
style.css 有一条 `section.alt .process li::before{box-shadow:0 0 0 4px var(--paper)}`
是 (0,2,3)，`.chain li::before` 只有 (0,1,2)、`.process.chain li::before`
也只有 (0,2,2) —— 都压不住，必须补一个 `section`（变成 (0,2,3)，靠后取胜）——
表现是编号后面跟一块白色的长方块（那个「4px 纸色光圈」被拉成两行高）。 */
section .process.chain li::before{
content:counter(chain,decimal-leading-zero);
position:static;display:block;grid-column:1;grid-row:1 / span 2;
width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
justify-self:start;
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
line-height:1.7;letter-spacing:.08em;
color:var(--enig-ink);
}
.chain b,
.chain .d{grid-column:2}
.chain b{
grid-row:1;
font-size:15px;font-weight:650;line-height:1.35;
letter-spacing:-.01em;margin-bottom:4px;
}
.chain .d{grid-row:2}
/* 七步在双列里是 4 + 3，最后一条会单吊在左列、右边留一个空格。
让它通栏收口（这张清单固定七条，所以直接写死最后一条）。 */
.chain li:last-child{grid-column:1 / -1;padding-bottom:var(--s-5)}
.chain li:last-child .d{max-width:62ch}
@media(max-width:840px){
.chain{grid-template-columns:1fr;margin-top:var(--s-6)}
}
/* ---------- 16.3 六行工序单（about · 订单怎么走） ----------
表格→编号行：编号 / 阶段名 / 说明三列。阶段名单独成列以后能竖着扫，
不用读完整段才知道自己在第几步。
⚠️ 版心只有 1140，三列里说明列必须 minmax(0,1fr)，否则长句会把
阶段名列顶宽、整行溢出（和 1042 行那条同一个坑）。 */
.run-label{
margin:var(--s-7) 0 0;
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mute);
}
.run{
list-style:none;counter-reset:run;
margin:var(--s-3) 0 0;padding:0;
border-top:1px solid var(--line-2);
}
.run li{
counter-increment:run;
display:grid;grid-template-columns:52px minmax(0,196px) minmax(0,1fr);
gap:var(--s-5);align-items:baseline;
padding:var(--s-5) 0;border-bottom:1px solid var(--line);
}
.run li::before{
content:counter(run,decimal-leading-zero);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:.1em;line-height:1.9;
color:var(--enig-ink);
}
.run b{
font-size:var(--fs-md);font-weight:650;letter-spacing:-.012em;
color:var(--ink);line-height:1.3;
}
.run p{margin:0;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
.run p .n{font-weight:600;color:var(--ink)}
.run li:hover b{color:var(--jade-600)}
@media(max-width:820px){
.run li{grid-template-columns:40px minmax(0,1fr);gap:2px var(--s-3)}
.run b{grid-column:2}
.run p{grid-column:2}
.run li::before{grid-row:1 / span 2}
}
/* ---------- 16.4 证书矩阵（about · 四项认证） ----------
四张同款白卡换成 2×2 的细线栅格：不铺卡面，靠内外两道线分格，
每格标题上方一枚铜色序号。这一页已经有 .plate 和 .run 两种「线」，
证书这块再给卡片就会把前两块的设计压回去。 */
.certs{
counter-reset:cert;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
margin-top:var(--s-6);
border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);
}
.cert{
counter-increment:cert;
padding:var(--s-6) var(--s-6) var(--s-5);
border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
transition:background var(--dur-2) var(--ease);
}
.cert:hover{background:rgba(66,166,70,.05)}
.cert h3{
margin:0 0 var(--s-3);
font-size:clamp(19px,2vw,23px);line-height:1.2;letter-spacing:-.02em;
}
.cert h3::before{
content:counter(cert,decimal-leading-zero);
display:block;margin-bottom:var(--s-3);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
letter-spacing:.12em;color:var(--enig-ink);
}
.cert p{margin:0;font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2)}
.cert:hover h3{color:var(--jade-600)}
@media(max-width:760px){
.certs{grid-template-columns:1fr}
}
/* ---------- 16.5 勾选清单（about 的两处 .docs） ----------
.docs 默认的记号是「▸」。这两处列的是「我们会交给你的东西」，
用勾比用三角更像一个承诺。 */
.checklist li::before{content:"✓";color:var(--jade-600);font-weight:700}
/* ---------- 16.6 拼版照片（about · On the ground） ----------
两块 .split（文 / 图交替）加一张跑在下面的竖图，三块各自为战。
改成一块 12 栏拼版：文字和照片交错压半栏，最后那张厂房竖图单独起一版 ——
图在左、说明放到 24px 当引文读。
⚠️ .g-fig 的图是 1400×2488 的竖构图。用 max-height 卡住高度后
object-fit:cover 会左右裁，别改成 height:auto —— 那会撑出 790px。 */
.ground{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
gap:var(--s-6) var(--s-7);
margin-top:var(--s-6);align-items:start;
}
.ground .g-txt h3{margin:0 0 var(--s-3);font-size:clamp(20px,2vw,25px);letter-spacing:-.02em}
/* 拼版里的正文走「引文」档 18px，不用界面尺寸 --fs-sm(14.5px)。
⚠️ 2026-10-21 用户指着这一段说"小字体改大一点"：这一栏挨着大图和 25px 小标题，
14.5px 贴着左边、右边一大片留白，读着发虚；16px 只加了一档，看着还是小。 */
.ground .g-txt p{margin:0 0 var(--s-4);color:var(--ink-2);font-size:var(--fs-md);line-height:1.68}
.ground .g-txt p:last-child{margin-bottom:0}
.g-a{grid-column:1 / 6}
.g-b{grid-column:6 / 13}
.g-c{grid-column:1 / 8}
.g-d{grid-column:8 / 13}
.g-photo{
position:relative;margin:0;overflow:hidden;
border:1px solid var(--line);border-radius:var(--r-md);background:#12251A;
}
/* ⚠️ 不要写 height:100%。栅格行高是 auto，百分比高度解析不出来，浏览器
会退回图片的固有比例 —— 实测那张 1920×1281 的办公室照被排成 4:3 的竖块，
和旁边 16/10 的展会照差了一大截。让 aspect-ratio 单独定高度。 */
.g-photo img{
display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
transition:transform .7s var(--ease-out);
}
.g-photo:hover img{transform:scale(1.03)}
.g-fig{
grid-column:1 / 13;
display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
gap:var(--s-9);align-items:center;
margin:var(--s-8) 0 0;padding-top:var(--s-7);
border-top:1px solid var(--line-2);
}
.g-fig img{
display:block;width:100%;max-height:560px;object-fit:cover;
object-position:center 62%;
border:1px solid var(--line);border-radius:var(--r-md);
}
.g-fig figcaption{
margin:0;max-width:30ch;
padding-top:var(--s-5);border-top:1px solid var(--line-2);
font-size:clamp(18px,1.9vw,24px);line-height:1.45;
letter-spacing:-.015em;color:var(--ink-2);
}
@media(max-width:900px){
.ground{grid-template-columns:1fr;gap:var(--s-5)}
.g-a,.g-b,.g-c,.g-d,.g-fig{grid-column:1 / -1}
.g-b{order:-1}
.g-fig{grid-template-columns:1fr;gap:var(--s-5);margin-top:var(--s-7)}
.g-fig img{max-height:none;object-position:center top}
}
/* ---------- 16.7 对照栅格（who-we-are-for · .verdict） ----------
整页的论点就在这张表上，原来是一张绿 / 红两列染色的表格 ——
染色一重，六对句子读起来像六个警告框。
改成两列栅格：每一对占同一条行（左右自动对齐）、共用一枚铜色序号，
底色压到 5% 那样只在余光里区分，两列表头各带一颗色点。 */
.fit{
counter-reset:fit;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
margin-top:var(--s-6);
border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);
}
.fit-col{
display:flex;align-items:center;gap:10px;
padding:var(--s-4) var(--s-6);
border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
background:rgba(12,12,12,.03);
}
.fit-col h3{margin:0;font-size:var(--fs-sm);font-weight:650;letter-spacing:-.005em}
.fit-col::before{
content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;
background:var(--jade-400);
}
.fit-no.fit-col::before{background:var(--red-600)}
.fit-cell{
position:relative;
padding:var(--s-5) var(--s-6) var(--s-5) calc(var(--s-6) + 18px);
border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2);
}
.fit-yes.fit-cell{background:rgba(66,166,70,.055)}
.fit-no.fit-cell{background:rgba(179,38,30,.04)}
.fit-cell b{color:var(--ink);font-weight:600}
/* 序号只从左栏加：一加一加会把同一对编成 01 / 03 / 05。
右栏不 increment，读到的自然还是同一个数。 */
.fit-yes.fit-cell{counter-increment:fit}
.fit-cell::before{
content:counter(fit,decimal-leading-zero);
position:absolute;left:var(--s-5);top:calc(var(--s-5) + 2px);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
letter-spacing:.08em;color:var(--mute);
}
/* 窄屏：两列收成一列。两列表头（.fit-col）在这里藏起来 ——
下面每一格右上角都补了一枚小标签，比两行翻来覆去的表头更好认。 */
@media(max-width:900px){
.fit{grid-template-columns:1fr}
.fit-col{display:none}
/* 收成一列后，序号和小标签改成压在正文上方的一行 —— 必须补回那段上内边距，
否则两个绝对定位的记号会直接盖在第一行字上（窄屏实测就是这样）。 */
.fit-cell{padding:calc(var(--s-5) + 21px) var(--s-6) var(--s-5)}
.fit-cell::before{top:var(--s-5);left:var(--s-6)}
.fit-cell::after{
position:absolute;right:var(--s-6);top:var(--s-5);
font-family:var(--font-mono);font-size:10px;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
.fit-yes.fit-cell::after{content:"Strong fit"}
.fit-no.fit-cell::after{content:"Better elsewhere"}
}
/* ---------- 16.8 展会时间轴 + 主图拼版（exhibitions） ----------
六条 .docs 卡片 → 一条竖向时间轴：左列年份当大号等宽字、月份当小标签，
右列城市和布展说明，中间一道发丝线串起六个节点，最新一条的节点是实心铜色。
⚠️ 竖线画在 li 的 border-left 上，节点是 li::before。六条 li 上下相接，
线自然连成一条；不用伪元素画长线，也就不会在最后一条尾巴多出一截。 */
.shows{list-style:none;margin:var(--s-6) 0 0;padding:0}
.shows li{
display:grid;grid-template-columns:92px minmax(0,1fr);
column-gap:var(--s-6);
position:relative;
padding:var(--s-5) 0 var(--s-5) var(--s-7);
border-left:1px solid var(--line-2);
}
.shows li::before{
content:"";position:absolute;left:-5px;top:calc(var(--s-5) + 5px);
width:9px;height:9px;border-radius:50%;
background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--enig);
}
.shows li:first-child::before{
background:var(--enig);box-shadow:0 0 0 4px rgba(184,100,47,.16);
}
.shows li:last-child{padding-bottom:0}
.shows .when{display:flex;flex-direction:column;gap:4px;padding-top:1px}
.shows .yr{
font-family:var(--font-mono);font-size:clamp(19px,1.8vw,23px);font-weight:600;
line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.shows .mo{
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
}
.shows .what b{
display:block;margin-bottom:5px;
font-size:var(--fs-md);font-weight:650;letter-spacing:-.012em;color:var(--ink);
}
.shows .what p{margin:0;font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2)}
@media(max-width:700px){
.shows li{
grid-template-columns:1fr;row-gap:8px;
padding-left:var(--s-5);
}
.shows .when{flex-direction:row;align-items:baseline;gap:10px}
.shows .yr{font-size:18px}
}
/* ---- 展会照片：2×2 主图 + 五张配对 ----
第一张占 2×2，其余五张围排。dense 让后面的小图去填主图旁边的空位，
否则 3 栏里 2 跨的主图会在右下角留下一块空格。 */
.plates{
counter-reset:plate;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
grid-auto-flow:dense;gap:var(--s-4);
margin-top:var(--s-5);
}
.plates figure{
counter-increment:plate;
position:relative;display:flex;flex-direction:column;
margin:0;overflow:hidden;
background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-md);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
transform var(--dur-2) var(--ease-out);
}
.plates figure:hover{
border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px);
}
.plates figure:first-child{grid-column:span 2;grid-row:span 2}
/* 主图之外的四张**不拉伸**：默认 align-self 是 stretch，同一行里图注长短
不一时，短的那张会把自己撑到行高，图注下面空出一块白。 */
.plates figure:not(:first-child){align-self:start}
.plates img{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
transition:transform .7s var(--ease-out);
}
.plates figure:first-child img{flex:1 1 auto;aspect-ratio:auto;min-height:260px}
.plates figure:hover img{transform:scale(1.03)}
/* 右上角那枚「01 / 06」记号。压在照片上，所以要垫一层墨 —— 照片亮起来
以后白字会糊掉。 */
.plates figure::after{
content:counter(plate,decimal-leading-zero);
position:absolute;top:10px;right:10px;z-index:2;
padding:4px 6px;border-radius:3px;
background:rgba(12,12,12,.62);color:#F2F2F2;
font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.1em;
}
.plates figcaption{
padding:11px var(--s-4) 13px;
border-top:1px solid var(--line);
font-size:var(--fs-2xs);line-height:1.5;color:var(--mute);
}
.plates figcaption b{
display:block;margin-bottom:3px;
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
@media(max-width:900px){
.plates{grid-template-columns:repeat(2,minmax(0,1fr))}
.plates figure:first-child{grid-column:span 2;grid-row:auto}
.plates figure:first-child img{aspect-ratio:16/10;min-height:0;flex:0 0 auto}
}
@media(max-width:600px){
.plates{grid-template-columns:1fr}
.plates figure:first-child{grid-column:auto}
}
/* ---------- 16.9 询价表单：字段改成划线式（contact） ----------
表单原来是 11px 内边距的灰框输入，十八个框排下来像一张后台表单。
改成「字段名 + 一道下划线」：等宽小标签压在线上，输入区没有边框，
聚焦时那条线变绿并微微加厚。文字域保持同样的线，但用极浅的纸灰衬底，
因为它是多行的、需要一点边界。
⚠️ 只作用于 form.inquiry（全站只有 contact 一页有）。别写成全局 .field，
文章页里没有表单，但别的页以后加表单时会连带改掉。 */
.inquiry .field label{
font-size:10.5px;letter-spacing:.12em;color:var(--mute);
margin-bottom:7px;
}
.inquiry .field input,
.inquiry .field select,
.inquiry .field textarea{
border:0;border-bottom:1px solid var(--line-2);border-radius:0;
background:transparent;
padding:9px 0 10px;
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.inquiry .field input:hover,
.inquiry .field select:hover,
.inquiry .field textarea:hover{border-bottom-color:var(--line-3)}
.inquiry .field input:focus,
.inquiry .field select:focus,
.inquiry .field textarea:focus{
outline:none;border-bottom-color:var(--jade-500);
box-shadow:0 1px 0 0 var(--jade-500);
}
.inquiry .field textarea{
min-height:104px;
border:1px solid var(--line);border-radius:var(--r-sm);
padding:10px 12px;
background:rgba(12,12,12,.018);
}
.inquiry .field textarea:focus{border-color:var(--jade-500);box-shadow:0 0 0 3px var(--accent-ring)}
/* 文件选择器是浏览器原生控件（这一版 Chrome 在中文系统上画的是「选择文件」
那种灰按钮）。划线式的输入框旁边出现一个实心方按钮太跳，改成同一套
细线小按钮。`::-webkit-file-upload-button` 是 Chrome/Edge 的旧写法，
新写法是 `::file-selector-button`，两条都留着。 */
.inquiry .field input[type=file]{
padding:8px 0 10px;font-size:var(--fs-2xs);color:var(--mute);
}
.inquiry .field input[type=file]::file-selector-button,
.inquiry .field input[type=file]::-webkit-file-upload-button{
margin-right:10px;padding:7px 12px;
border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--paper-2);color:var(--ink);
font:inherit;font-size:12px;cursor:pointer;
transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.inquiry .field input[type=file]:hover::file-selector-button{
border-color:var(--line-3);background:#E4E4E4;
}
/* 原生文件控件选完就删不掉 —— 浏览器不给清除入口，再点一次只能覆盖。
带上 data-file-field 以后由 assets/file-field.js 接管：它给外层加 .is-live，
原生 input 缩成 1px 隐形（**仍可聚焦**），换成自己的按钮 + 可逐条删除的列表。
⚠️ 默认态（没有 .is-live）必须还是原生控件的样子：脚本挂了也能选文件。 */
.file-field{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0 2px}
.file-pick,.file-count,.file-list{display:none}
.file-field.is-live .file-input{
position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
.file-field.is-live .file-pick{
display:inline-flex;align-items:center;
padding:8px 14px;
border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--paper-2);color:var(--ink);
font-size:13px;font-weight:600;letter-spacing:0;
cursor:pointer;
transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.file-field.is-live .file-pick:hover{border-color:var(--line-3);background:#E4E4E4}
.file-field.is-live .file-pick:focus-visible{outline:2px solid var(--jade-500);outline-offset:3px}
/* 原生 input 隐形但仍在 Tab 序列里 —— 焦点环画在它身上看不见，挪到按钮上 */
.file-field.is-live .file-input:focus-visible + .file-pick{outline:2px solid var(--jade-500);outline-offset:3px}
.file-field.is-live .file-count{
display:inline;
font-family:var(--font-mono);font-size:var(--fs-xs);
letter-spacing:.03em;color:var(--mute);
}
.file-field.is-live .file-count.has-files{color:var(--ink-2);font-weight:500}
.file-field.is-live .file-list{
display:grid;flex-basis:100%;
margin:10px 0 0;padding:0;list-style:none;
}
/* 空清单不画线：没选文件时那条上边线会孤零零挂在说明文字上面 */
.file-field.is-live .file-list:not(:empty){border-top:1px solid var(--line)}
/* 选中的文件是这个控件里最该读清的东西 —— 用正文 16px + 墨色，
不跟着表单一律走 --fs-sm 的灰。大小退成同行的次要读数（13px 等宽）。 */
.file-list li{
display:grid;grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;gap:14px;
padding:10px 0;border-bottom:1px solid var(--line);
font-size:var(--fs-base);color:var(--ink);
}
.file-name{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:500;letter-spacing:-.005em;
}
.file-size{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--mute);letter-spacing:.02em}
.file-x{
display:grid;place-items:center;
width:26px;height:26px;padding:0;
border:1px solid transparent;border-radius:50%;
background:transparent;color:var(--ink-2);
font-size:17px;line-height:1;cursor:pointer;
transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.file-x:hover{background:rgba(179,38,30,.09);border-color:rgba(179,38,30,.28);color:#B3261E}
.file-x:focus-visible{outline:2px solid var(--jade-500);outline-offset:2px}
/* 窄屏：一行放不下「文件名 + 大小 + ×」，文件名截成 "BOM Rev C - ..." 读不出是哪个。
改成名字占满整行、大小退到第二行，× 靠右跨两行。 */
@media(max-width:560px){
.file-list li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;column-gap:10px}
/* 名字保持单行省略、不硬折 —— 硬折会把 HongRong_gerber_v3.zip 断成 "...v3.z / ip"。
大小让出整行以后名字已经宽了一倍，只有特别长的才截。 */
.file-name{grid-column:1;grid-row:1}
.file-size{grid-column:1;grid-row:2}
.file-x{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* ---------- 16.10 三步时间轴（contact · What happens next） ----------
和 exhibitions 那条时间轴同一套记号，只是更短、更紧：左侧竖线 +
铜色序号节点。外面那层 .card 留着（它是侧栏里唯一抬起来的东西）。 */
.next{list-style:none;counter-reset:nx;margin:0;padding:0}
.next li{
counter-increment:nx;position:relative;
margin:0 0 var(--s-4);padding:0 0 0 var(--s-7);
border-left:1px solid var(--line-2);
font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);
}
.next li:last-child{margin-bottom:0;padding-bottom:2px}
.next li::before{
content:counter(nx,decimal-leading-zero);
position:absolute;left:-1px;top:0;transform:translateX(-50%);
display:grid;place-items:center;
width:22px;height:22px;border-radius:50%;
background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-3);
font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:0;
color:var(--enig-ink);
}
.next li:last-child::before{box-shadow:inset 0 0 0 1px var(--enig)}
.next b{color:var(--ink);font-weight:600}
/* ---------- 16.11 联系渠道表（contact · Direct contact） ---------- */
table.channels td{padding:11px 0;vertical-align:baseline}
table.channels td:first-child{
width:34%;
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mute);
}
table.channels td:last-child{font-weight:500}
table.channels a{color:var(--ink);text-decoration-color:rgba(12,12,12,.28)}
table.channels tr:hover a{color:var(--jade-600);text-decoration-color:currentColor}
/* ---------- 16.12 扫码卡（contact · 两张二维码） ----------
两张裸图 → 两张「扫码卡」：白底、细边框、底部一行等宽小字。
二维码本来就该印在白纸上，白底卡片比直接贴在纸灰上更像一张实体卡。
⚠️ .qr 的 max-width:184px 在 style.css 里，这里只管外框。 */
.scan{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:flex-start;margin-top:var(--s-4)}
.scan figure{
margin:0;padding:9px 9px 8px;
display:flex;flex-direction:column;gap:8px;
background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);
box-shadow:var(--sh-1);
}
.scan img{display:block;border-radius:2px}
/* 侧栏只有 ~330px 内宽。.qr 的 184px 上限是正文用的，这里收到 132 才并得下两张 */
.scan .qr{max-width:132px}
.scan figcaption{
font-family:var(--font-mono);font-size:10px;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
padding-left:2px;
}
/* ---------- 16.13 三条「发之前」清单（contact · .promises.num） ---------- */
.promises.num li::before{
content:counter(pr,decimal-leading-zero);
color:var(--enig-ink);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:.08em;
}
.promises.num{counter-reset:pr}
.promises.num li{counter-increment:pr}
/* ============================================================
17 · 博客：一期工程期刊（第 54 轮）
------------------------------------------------------------
用户 2026-10-22：「帮我把宏荣独立站的博客页面单独设计一下」。
第 52 轮给 blog 做的是「一张大卡 + 三张指南卡」—— 语法还是索引页的：
一个条目，下面是相关推荐。只有一篇文章时，整页读起来像"列表还没长出来"。
这一节把它改成**一期工程期刊**，四样东西：
① 页头一条期刊版头（Field notes · Issue 01 · October 2026）
② 正文左右分栏：左栏 meta + 本篇目录（吸顶），右栏图版 + 大标题 + 导语 + 引文
③ 一段「这些笔记是什么」的三栏编辑体，讲清博客和指南的分工
④ 延伸阅读从卡片改成编号行列表（卡片留给 guides.html 的目录页）
分寸和其它节一致：纸色、1px 线、铜色只做线和小记号（当文字用 --enig-ink）。
⚠️ 这一节只服务 blog.html —— 其余 22 页没有 .mast / .note / .policy / .rules
这些类，加了也不会被吃到。
============================================================ */
/* ---------- 17.1 期刊版头 ---------- */
.mast{
display:flex;align-items:center;gap:14px;
/* 版头收在纸色那一半里（页头照片从 58% 之后才露）。不收的话 1024 宽
正落在照片上，"OCTOBER 2026" 会陷进绿色板图里看不清。 */
max-width:min(640px,54vw);
margin:0 0 var(--s-7);
padding-bottom:13px;
border-bottom:1px solid var(--line-2);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
color:var(--mute);
}
/* 版头左端一小段铜线 —— 和首页眉标、内页 h2 的引线同一个记号 */
.mast-brand{
display:inline-flex;align-items:center;gap:9px;flex:none;
color:var(--enig-ink);font-weight:600;letter-spacing:.18em;
}
.mast-brand::before{content:"";width:20px;height:1px;background:var(--enig)}
.mast-line{flex:1;height:1px;background:var(--line)}
.mast-issue{font-weight:600;color:var(--ink);letter-spacing:.12em;flex:none}
.mast-date{flex:none}
@media(max-width:900px){
/* ≤900 照片退成页头上面一条横带，文字整片落在纸上 —— 版头可以放满 */
.mast{max-width:none}
}
@media(max-width:700px){
.mast{flex-wrap:wrap;gap:6px 14px}
.mast-line{display:none}
.mast-issue{margin-left:auto}
}
/* ≤364：版头在这一档开始折行，而默认的折法很难看 —— 期号被 margin-left:auto
顶到第一行最右，日期掉到第二行最左，中间空出一大块，像是没排完。
这里改成**刻意的两段式**：眉标独占第一行，期号 · 日期 并成第二行。
⚠️ 断点必须写 364，不要往上挪到 400：375（iPhone SE / mini）一行本来
放得下，提前折等于把好好的版面弄坏 —— 修一个坏一个。
实测边界：365 仍是单行，362 已经折行（2026-10-22 逐档截图扫的）。
改了 .mast 的字号、字距或版心宽度，这条边界要重新扫。 */
@media(max-width:364px){
.mast{flex-wrap:wrap;gap:5px 0}
.mast-brand{flex:1 0 100%}
.mast-issue{margin-left:0}
.mast-issue::after{content:"\00b7";margin:0 7px;font-weight:400;color:var(--mute)}
}
/* ---------- 17.2 正文分栏 ----------
左栏 248px 是「一期的事实」，右边是「这一篇的内容」。
左栏吸顶 —— 读到导语、引文那一段时，目录还在手边。 */
.note{
display:grid;grid-template-columns:minmax(0,248px) minmax(0,1fr);
gap:clamp(32px,5.4vw,84px);
align-items:start;
}
.note-rail{position:sticky;top:calc(var(--header-h) + var(--s-6));min-width:0}
.rail-k{
display:flex;align-items:center;gap:10px;
margin:0 0 var(--s-3);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:.14em;text-transform:uppercase;line-height:1;
color:var(--mute);
}
.rail-k::after{content:"";flex:1;height:1px;background:var(--line)}
.rail-facts{margin:0 0 var(--s-7);border-top:1px solid var(--line)}
.rail-facts > div{
display:flex;flex-direction:column;gap:4px;
padding:10px 0;border-bottom:1px solid var(--line);
}
.rail-facts dt{
font-family:var(--font-mono);font-size:10.5px;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--mute);
}
.rail-facts dd{margin:0;font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--ink)}
/* 本篇目录：编号 + 小节名。刻意做成纯文本 —— 五个小节都在同一篇文章里，
做成五个指向同一页的链接只会多出五个重复入口。 */
.rail-in ol{
list-style:none;counter-reset:rail;margin:0;padding:0;
border-top:1px solid var(--line);
}
.rail-in li{
counter-increment:rail;
display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 10px;
padding:11px 0;border-bottom:1px solid var(--line);
font-size:var(--fs-xs);line-height:1.45;color:var(--ink-2);
}
.rail-in li::before{
content:counter(rail,decimal-leading-zero);
font-family:var(--font-mono);font-size:10.5px;font-weight:600;
letter-spacing:.08em;line-height:1.75;color:var(--enig-ink);
}
/* ---------- 17.3 右栏：图版 + 标题 ----------
产品照是**白底实物图**，不是场景照。这里不裁满，改成"印在纸上的图版"：
白底画框 + 等比 contain + 四角对位角 —— 和实拍满版是两种语言，
一眼能看出这是本页的主角图，不是又一张背景照。 */
.note-main{min-width:0}
.note-fig{margin:var(--s-7) 0 0}
.nf-frame{
position:relative;overflow:hidden;
background:#fff;
border:1px solid var(--line-2);border-radius:var(--r-md);
}
/* 源图 750×580（4:3 差一点点）。画框也取 4:3、铺满：
产品照自己已经有一圈白边，再叠 padding 会变成一大块空白色块；
用 cover 只裁掉 3% 的高度，板子和散热片都还在画面里。 */
.nf-frame img{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
}
/* 四角对位角（第 51 轮的记号）。画框是白纸，用铜色 */
.nf-frame::after{
content:"";position:absolute;inset:11px;pointer-events:none;
--mc:var(--enig);
background-image:
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc)),
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc));
background-size:18px 1px,1px 18px,18px 1px,1px 18px;
background-position:left top,left top,right bottom,right bottom;
background-repeat:no-repeat;opacity:.6;
}
.note-fig figcaption{
display:flex;gap:12px;margin-top:12px;
font-size:var(--fs-xs);line-height:1.55;color:var(--mute);
}
.note-fig .cap-k{
flex:none;padding-top:1px;
font-family:var(--font-mono);font-size:10.5px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--enig-ink);
}
.note-kicker{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin:0 0 var(--s-3);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
letter-spacing:.12em;text-transform:uppercase;line-height:1;
color:var(--enig-ink);
}
.note-kicker .dot{width:3px;height:3px;border-radius:50%;background:var(--line-3)}
.note-kicker .s{color:var(--mute);letter-spacing:.08em}
/* ⚠️ 第 14 节给 `section h2` 统一加了铜色引线，这条 h2 在 section 里，
不还原的话标题顶上会多一道线（和 52 轮 .post-body h2 同一个坑）。 */
.note-main h2{
margin:0;max-width:21ch;
font-size:clamp(31px,3.9vw,50px);line-height:1.04;
letter-spacing:-.032em;font-weight:700;
}
.note-main h2::before{content:none}
.note-main h2 a{color:var(--ink);text-decoration:none}
.note-main h2 a:hover{
text-decoration:underline;text-decoration-color:rgba(184,100,47,.6);
text-decoration-thickness:2px;text-underline-offset:.12em;
}
.note-dek{
margin:var(--s-5) 0 0;max-width:50ch;
font-size:var(--fs-md);line-height:1.62;color:var(--ink-2);
}
/* 引文：只引原文里的句子（逐字），不另写一句"广告式"的引言 */
.note-quote{
margin:var(--s-7) 0 0;padding:2px 0 2px var(--s-6);
border-left:2px solid var(--enig);
}
.note-quote p{
margin:0;max-width:36ch;
font-size:clamp(19px,1.9vw,23px);font-style:italic;
line-height:1.45;letter-spacing:-.012em;color:var(--ink);
}
.note-quote cite{
display:block;margin-top:var(--s-3);
font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);
letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--mute);
}
/* 绿底白字。用 --green-700 不用 --green-500：白压 #42A646 只有 3.10:1，
14.5px 的字过不了 AA（第 53 轮给收尾带按钮定的那一档）。 */
.note-go{
display:inline-flex;align-items:center;gap:12px;margin-top:var(--s-7);
padding:13px 20px;border-radius:10px;
background:var(--green-700);color:#fff;
font-size:var(--fs-sm);font-weight:600;text-decoration:none;
box-shadow:0 10px 26px rgba(47,125,53,.22);
transition:background var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease),
transform var(--dur-2) var(--ease-out);
}
.note-go:hover{
background:#28702E;color:#fff;
box-shadow:0 16px 34px rgba(47,125,53,.30);transform:translateY(-1px);
}
.note-go .ar{transition:transform var(--dur-2) var(--ease-out)}
.note-go:hover .ar{transform:translateX(4px)}
/* ---------- 17.4 这些笔记是什么 ----------
只有一篇文章时，页面靠这一块撑住"立场"：博客和指南为什么是两个栏目。
三栏、内部分隔线、编号在铜色 —— 不铺卡片。 */
.policy-head{max-width:64ch;margin:0 0 var(--s-8)}
.policy-head h2{margin:0 0 var(--s-3)}
.policy-head .lead{margin:0;color:var(--ink-2);max-width:62ch}
.policy{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--line-2);
}
.policy > div{padding:var(--s-6) var(--s-6) var(--s-2) 0}
.policy > div + div{border-left:1px solid var(--line);padding-left:var(--s-6)}
.policy .n{
display:block;margin-bottom:var(--s-4);
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:.14em;line-height:1;color:var(--enig-ink);
}
.policy h3{
margin:0 0 var(--s-3);
font-size:var(--fs-lg);line-height:1.2;letter-spacing:-.018em;
}
.policy p{margin:0;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
/* ---------- 17.5 延伸阅读：编号行 ----------
整行是一根 。编号 / 标题+说明 / 读时长+箭头 三列，
行与行之间只有一道发丝线 —— 读起来像书末的参考文献，不像又一组卡片。 */
.further-head{max-width:64ch;margin:0 0 var(--s-7)}
.further-head h2{margin:0 0 var(--s-3)}
.further-head .lead{margin:0;color:var(--ink-2);max-width:62ch}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.rules li{border-bottom:1px solid var(--line)}
.rules a{
display:grid;grid-template-columns:92px minmax(0,1fr) 100px;
gap:var(--s-5);align-items:start;
padding:var(--s-5) var(--s-4) var(--s-5) var(--s-3);
text-decoration:none;color:var(--ink);
transition:background var(--dur-2) var(--ease);
}
.rules a:hover{background:rgba(12,12,12,.03)}
.rules a:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px}
.rules .n{
padding-top:4px;
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--enig-ink);
}
.rules .txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.rules .t{font-size:var(--fs-md);font-weight:650;line-height:1.3;letter-spacing:-.014em}
.rules .d{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.rules .m{
display:flex;align-items:center;justify-content:flex-end;gap:10px;
padding-top:4px;
font-family:var(--font-mono);font-size:var(--fs-2xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
}
.rules .go{
font-family:var(--font-sans);font-size:15px;line-height:1;
color:var(--enig-ink);transition:transform var(--dur-2) var(--ease-out);
}
.rules a:hover .t{color:var(--jade-600)}
.rules a:hover .go{transform:translateX(4px)}
/* ---------- 17.6 同期的其它笔记 ----------
一期里第一篇按上面的整版排，剩下的收在它下面 —— 一期只有一篇时
这一块不出现在 HTML 里，所以样式留着也不会多出一道空线。 */
.note-back{
margin-top:clamp(52px,6.4vw,96px);
padding-top:var(--s-7);
border-top:1px solid var(--line-2);
}
.note-back .further-head{margin-bottom:var(--s-5)}
.note-back .further-head h2{
margin:var(--s-2) 0 0;
font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.022em;
}
/* ---------- 17.7 同期笔记：图片行 ----------
第 56 轮从纯编号行改成「缩略图 + 标题 + 阅读时长」的一整行链接：
一期的头篇靠大图版撑场面，其余几篇靠这一行缩略图接住版面，
不然往下就只剩文字了。整行可点，图只做很小的推近。 */
.issue-row{
display:grid;
grid-template-columns:clamp(190px,20vw,250px) minmax(0,1fr) auto;
grid-template-areas:"fig txt go";
gap:clamp(20px,2.6vw,40px);
align-items:center;
padding:var(--s-4) 0;
text-decoration:none;color:var(--ink);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.ir-fig{
grid-area:fig;position:relative;display:block;overflow:hidden;
aspect-ratio:4/3;
background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
}
.ir-fig img{
display:block;width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-3) var(--ease-out);
}
.ir-n{
position:absolute;left:10px;bottom:10px;z-index:1;
padding:4px 8px;border-radius:6px;
background:rgba(12,12,12,.78);color:#fff;
font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
}
.ir-txt{grid-area:txt;display:flex;flex-direction:column;gap:8px;min-width:0}
.ir-k{
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--enig-ink);
}
.ir-t{
font-size:clamp(20px,2.1vw,27px);font-weight:650;
line-height:1.22;letter-spacing:-.02em;
transition:color var(--dur-2) var(--ease);
}
.ir-d{font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2);max-width:62ch}
.ir-go{
grid-area:go;display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
.ir-go .ar{
font-family:var(--font-sans);font-size:15px;line-height:1;
color:var(--enig-ink);transition:transform var(--dur-2) var(--ease-out);
}
.issue-row:hover .ir-fig img{transform:scale(1.045)}
.issue-row:hover .ir-t{color:var(--jade-600)}
.issue-row:hover .ir-go .ar{transform:translateX(4px)}
.issue-row:focus-visible{outline:2px solid var(--accent-ring);outline-offset:4px}
/* ---------- 17.8 从产线上来：三张图版 ----------
文字段中间插一条全宽的三图版带，给长页面一个视觉停顿。
图都是站上别处用过的自家实拍，图注只描述画面里有什么。 */
.plate-strip{
margin-top:clamp(56px,7vw,104px);
padding-top:var(--s-7);
border-top:1px solid var(--line-2);
}
.ps-head{
display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);
gap:var(--s-6);align-items:end;margin-bottom:var(--s-6);
}
.ps-head p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);max-width:58ch}
.ps-grid{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(14px,2.2vw,30px);
}
.ps-grid figure{margin:0}
.ps-grid li{overflow:hidden;border-radius:var(--r-md)}
.ps-grid img{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease);
}
.ps-grid li:hover img{transform:scale(1.03);border-color:var(--enig)}
.ps-grid figcaption{
display:flex;gap:10px;margin-top:10px;
font-size:var(--fs-xs);line-height:1.5;color:var(--mute);
}
.ps-grid figcaption span{
flex:none;padding-top:1px;
font-family:var(--font-mono);font-size:10.5px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--enig-ink);
}
/* ---------- 17.9 产线图版（宽幅实拍） ----------
三张板子特写之前先垫一张车间宽幅 —— 讲"这些板从哪儿出来"。
它和三张板不是一套语言：板子是白底实物图（画框 + 对位角），
车间是满版实拍（压彩度 + 图版号 + 白线对位角），一眼能分开。
源图 2400×1000（2.4:1），**按原比例铺**，不裁 —— 页头那张 698 宽的
图已经被迫 cover 过一次，宽幅图版不能再犯。 */
.works-plate{margin:0 0 clamp(24px,3.2vw,44px)}
.wp-frame{
position:relative;overflow:hidden;
border:1px solid var(--line-2);border-radius:var(--r-md);background:#111;
}
.wp-frame img{
display:block;width:100%;aspect-ratio:24/10;object-fit:cover;
/* 彩度压到 86%：车间的荧光灯绿偏和纸面打架，压一点就落回同一套色里。
指针进来放回原色 —— 图是真的，不靠滤镜撑门面。 */
filter:saturate(.86) contrast(1.04);
transition:filter var(--dur-3) var(--ease),transform 620ms var(--ease-out);
}
.works-plate:hover .wp-frame img{filter:none;transform:scale(1.012)}
/* 白线对位角：白底图版（.nf-frame）用铜线，深底实拍反过来用白线 */
.wp-frame::after{
content:"";position:absolute;inset:12px;pointer-events:none;
--mc:rgba(255,255,255,.62);
background-image:
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc)),
linear-gradient(var(--mc),var(--mc)),linear-gradient(var(--mc),var(--mc));
background-size:22px 1px,1px 22px,22px 1px,1px 22px;
background-position:left top,left top,right bottom,right bottom;
background-repeat:no-repeat;
}
/* 图版号不再压在画框里 —— 第一版做了个左下角的黑药丸「PLATE 03」，
图注左边又写着一次 PLATE 03，同一张图上出现两遍。图注那一列是
04/05/06 三张共用的记号，留着列、去掉药丸。 */
.works-plate figcaption{
display:flex;gap:12px;margin-top:11px;max-width:82ch;
font-size:var(--fs-xs);line-height:1.55;color:var(--mute);
}
.works-plate figcaption span{
flex:none;padding-top:1px;
font-family:var(--font-mono);font-size:10.5px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--enig-ink);
}
/* ---------- 17.10 窄屏 ----------
≤1000：分栏塌成一列。正文先上、meta 后上（图和大标题是第一眼要看的）；
meta 改成左边事实 / 右边目录两栏，免得占掉一整屏。
≤720 ：行列表的读时长并到标题右边。 */
@media(max-width:1000px){
.note{grid-template-columns:1fr;gap:var(--s-8)}
.note-main{order:1}
/* meta 变成正文后面的一条**横向信息带**：四格事实 + 两列目录。
第一版写成「左事实 / 右目录」的两栏，900px 下左栏只有一串竖排标签、
右栏空掉一半，看着像两截没排完的表格。 */
.note-rail{
order:2;position:static;display:block;
padding-top:var(--s-6);border-top:1px solid var(--line-2);
}
.rail-facts{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:var(--s-6);margin-bottom:var(--s-7);
border-top:0;
}
.rail-facts > div{
padding:11px 0 0;border-bottom:0;border-top:1px solid var(--line);
}
.rail-in ol{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:var(--s-9);
}
.policy{grid-template-columns:1fr}
.policy > div{padding:var(--s-5) 0}
.policy > div + div{border-left:0;border-top:1px solid var(--line);padding-left:0}
/* 同期笔记：图左、文右，「读这篇」落到文字下面一行 */
.issue-row{
grid-template-columns:clamp(150px,24vw,190px) minmax(0,1fr);
grid-template-areas:"fig txt" "fig go";
gap:var(--s-4) var(--s-5);
}
.ir-go{justify-self:start;margin-top:-2px}
.ps-head{grid-template-columns:1fr;gap:var(--s-3);align-items:start}
}
@media(max-width:720px){
/* 手机上缩略图并排会把标题挤成四行、图只剩一小块 —— 改为整行竖排：
图 16:9 通栏，文字和图注在下面，读起来还是一篇的样子。 */
.issue-row{
grid-template-columns:1fr;
grid-template-areas:"fig" "txt" "go";
gap:var(--s-4);
padding:var(--s-4) 0 var(--s-5);
}
.ir-fig{aspect-ratio:16/9}
.ir-go{justify-self:start;margin-top:0}
.rail-facts{grid-template-columns:1fr 1fr;column-gap:var(--s-5)}
.rail-in ol{grid-template-columns:1fr}
.note-main h2{font-size:clamp(28px,7.4vw,36px)}
.note-fig figcaption{flex-direction:column;gap:5px}
.rules a{grid-template-columns:minmax(0,1fr) auto;gap:8px var(--s-4);padding:var(--s-5) 0}
.rules .n{grid-column:1 / -1;padding-top:0}
.rules .txt{grid-column:1;grid-row:2}
.rules .m{grid-column:2;grid-row:2;padding-top:9px}
/* 同期笔记：竖排版的标题降一档，说明收到小字（列宽规则见上面那段 ≤720） */
.ir-t{font-size:19px;line-height:1.24}
.ir-d{font-size:var(--fs-xs);line-height:1.55}
/* 三图版：第 56 轮是整列竖排（三张各 16:9，加起来一屏半）。
第 57 轮改成**两列 + 第三张横跨**——桌面是 3 列，手机上 2+1 是同一张版
按比例收，不是把一整张版拆成三截往下摞。 */
.ps-grid{grid-template-columns:1fr 1fr;gap:var(--s-4)}
.ps-grid img{aspect-ratio:4/3}
.ps-grid li:nth-child(3){grid-column:1 / -1}
.ps-grid li:nth-child(3) img{aspect-ratio:16/9}
.ps-grid figcaption,.works-plate figcaption{flex-direction:column;gap:4px}
/* ---- 第 57 轮：手机按比例缩，不再逐级跳档 ----
桌面的节奏是「88px 版块留白 + 16px 正文」。手机上如果沿用同一批固定像素，
字缩下去了、留白没缩，整页反而比桌面还松 —— 390 宽一屏装不下导语加一张图。
这里把版块留白和段落字号换成跟着视口连续变的 clamp：
320 / 390 / 430 是同一张版的三次等比缩放，不是三次跳档。 */
.note-sec,.policy-sec,.further-sec{padding-block:clamp(38px,9.6vw,56px)}
/* ⚠️ 页头（.blog-head）的上下留白别动。手机上照片退成页头最上面一条横带，
版头 .mast 和眉标就压在这条带的下沿附近；把 padding-top 从 56 收到 34，
整行「FIELD NOTES — ISSUE 01 OCTOBER 2026」会骑到照片上，浅灰字陷进
板图里看不清（第 57 轮实测踩过一次，已回退）。 */
.note-main p,.policy p{font-size:clamp(14.5px,3.95vw,16px);line-height:1.62}
.ps-head p,.ps-grid figcaption,.works-plate figcaption{
font-size:clamp(12px,3.3vw,13px);line-height:1.55;
}
/* 宽幅图版：16:10 而不是桌面那个 2.4:1 —— 手机上 2.4:1 只剩 150px 高，
车间照里的机器全糊成一排白盒子；16:10 还看得出是条产线。 */
.works-plate .wp-frame img{aspect-ratio:16/10}
.wp-frame::after{inset:8px;background-size:16px 1px,1px 16px,16px 1px,1px 16px}
}