@charset "UTF-8";
/* ============================================================
TF3 Fieldnotes — v3 打磨层（2026-09-29）
加载顺序：style.css → refresh.css → polish.css（本文件最后）
⇒ 想回退到上一版外观：在 build.mjs / build-zh.mjs 里删掉
polish.css 的 与复制项即可，其余文件无需改动。
本层做三件事：① 修缺陷 ② 提质感 ③ 统一深浅两套主题。
============================================================ */
/* ---------- 1. 字体栈：补齐 Windows / 安卓下的衬线与中文 ---------- */
:root{
--serif:'Iowan Old Style','Palatino Linotype','Sitka Text','Book Antiqua',Cambria,'Songti SC','Noto Serif SC','Source Han Serif SC',Georgia,serif;
--sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Microsoft YaHei',Arial,sans-serif;
--mono:ui-monospace,'Cascadia Mono',Consolas,'SFMono-Regular',Menlo,monospace;
}
h1,h2,h3,.herocopy h1,.foot .brand,.factstrip a,.article-end strong{font-family:var(--serif)}
body{font-family:var(--sans);font-synthesis-weight:none}
/* ---------- 2. 修缺陷 A：hero 是「固定深色区」，不随主题反转 ---------- */
/* refresh.css 把 .herocopy h1 设成了 var(--ink)，浅色主题下变成近黑色叠在
深色照片上 → 几乎不可读。hero 内部的文字必须锁定为亮色。 */
.hero,.hero .herocopy,.hero .departure{color:#fff}
.hero .herocopy h1,
html[data-theme=light] .hero .herocopy h1{color:#fff;text-shadow:0 2px 26px rgba(6,14,20,.55)}
.hero .herocopy h1 span,
html[data-theme=light] .hero .herocopy h1 span{color:#ff6a42;text-shadow:0 2px 22px rgba(6,14,20,.45)}
.hero .hero-description,
html[data-theme=light] .hero .hero-description{color:#fff;text-shadow:0 1px 18px rgba(6,14,20,.5)}
.hero .hero-detail,
html[data-theme=light] .hero .hero-detail{color:#dde5ea}
.hero .departure span,
html[data-theme=light] .hero .departure span{color:#e3e9ee}
.hero .departure strong,
html[data-theme=light] .hero .departure strong{color:#fff}
html[data-theme=light] .hero .textlink{color:#fff}
.hero .image-credit,
html[data-theme=light] .hero .image-credit{color:#e7ecef;opacity:.85}
.hero .eyebrow,
html[data-theme=light] .hero .eyebrow{color:#f7bb80}
.hero .image-credit:hover{color:#fff;opacity:1}
/* hero 的遮罩加强层次（深色底不随主题变化） */
.hero:after{background:
linear-gradient(90deg,rgba(8,17,25,.9) 0%,rgba(8,17,25,.7) 30%,rgba(8,17,25,.14) 66%),
linear-gradient(0deg,rgba(8,17,25,.82) 0%,rgba(8,17,25,.28) 34%,transparent 58%)}
/* 极缓的开场位移（可访问性：尊重 reduced-motion） */
@media (prefers-reduced-motion:no-preference){
@keyframes heroSettle{from{transform:scale(1.055)}to{transform:scale(1)}}
.hero-scene{animation:heroSettle 18s cubic-bezier(.22,.61,.36,1) both}
}
/* ---------- 3. 修缺陷 B：移动端 hero（文字压图 / 断行粘连 / 高度） ---------- */
@media (max-width:700px){
/* style.css 把图截成 280px 顶部条、正文从 240px 起 → 文字正好压在图上。
改为整幅铺满 + 纵向渐变，文字落在暗区，气质也更像刊物封面。 */
.hero{min-height:0}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-position:64% 34%}
.hero:after{background:linear-gradient(180deg,
rgba(8,17,25,.62) 0%,rgba(8,17,25,.2) 26%,
rgba(8,17,25,.86) 60%,rgba(11,13,11,.97) 100%)}
.hero-content{min-height:0;justify-content:flex-end;padding-top:150px;padding-bottom:34px}
.herocopy{max-width:100%}
/* 修 style.css 的 br{display:none} 造成 "players.A" 两行粘连 */
.herocopy>p.hero-description br{display:inline}
.herocopy>p.hero-description{font-size:19px;line-height:1.45}
.herocopy h1{font-size:clamp(38px,12vw,52px)}
/* 版本条：手机上并排太挤会折成碎行，改为两行左对齐 */
.editionbar .wrap{flex-direction:column;align-items:flex-start;gap:5px;padding-top:11px;padding-bottom:11px}
.editionbar{letter-spacing:1.2px;font-size:10px}
.editionbar span:last-child{letter-spacing:.6px;opacity:.8}
/* 顶栏压缩：原 96px + 换行控件 + 换行导航 ≈ 210px，占掉首屏 */
header .wrap.nav{min-height:0;gap:10px;padding-top:10px;padding-bottom:10px}
.brand{font-size:14px}
.brandmark{width:30px;height:30px;font-size:21px}
header nav a{font-size:13px}
.nav nav{gap:8px}
.site-preferences{font-size:11px}
.language-menu summary{min-height:34px;padding:7px 10px;gap:7px}
.theme-preferences span{padding:6px 7px}
/* hero 里的日期块在窄屏改为左对齐块 */
.departure{position:static;text-align:left;margin-top:22px;border-left:2px solid var(--blade);padding-left:12px;border-top:0}
.hero .actions{gap:14px;flex-wrap:wrap}
/* 图片署名不再压在照片上，落到 hero 内容流末尾 */
.hero .image-credit{position:static;display:block;margin:14px 0 0;font-size:9px;opacity:.7}
/* 顶栏第二轮压缩：把三行压到约 150px，给首屏留出画面 */
header .wrap.nav{gap:6px;padding-top:8px;padding-bottom:8px}
.brand{font-size:13.5px;gap:6px}
.brand span:not(.brandmark){font-size:10px;letter-spacing:1.4px;margin-left:3px}
.brandmark{width:28px;height:28px;font-size:19px;border-radius:7px}
.language-menu summary{padding:6px 9px;font-size:11px;min-height:32px;gap:6px}
.theme-preferences{padding:2px}
.theme-preferences span{padding:5px 6px;font-size:9.5px;letter-spacing:.2px}
header nav a{font-size:12.5px}
.nav nav{gap:6px;justify-content:space-between;padding-top:2px}
.navsearch{display:none}
}
/* 结果计数与分区标题的层次 */
#result-count{font-size:13px;letter-spacing:.02em;color:var(--muted);margin:14px 0 18px}
.sectionhead span{font-size:12px;color:var(--muted);letter-spacing:.03em}
/* ---------- 4. 卡片：图片缓推 + 统一比例 ---------- */
.cardart{display:block;overflow:hidden;position:relative}
.cardart img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:640/220;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .cardart img{transform:scale(1.045)}
.art-index{backdrop-filter:blur(4px)}
.card{transition:transform .2s cubic-bezier(.22,.61,.36,1),border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px)}
.card h3 a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s}
.card:hover h3 a{background-size:100% 1px}
.cardmeta{align-items:center}
.card:hover .cardmeta span:last-child{transform:translateX(3px);transition:transform .2s}
/* ---------- 5. 正文排版精修 ---------- */
.prose{font-size:17.5px;line-height:1.88}
.prose p{margin:0 0 1.15em}
.prose h2{margin:2.1em 0 .7em;position:relative;padding-top:.35em}
.prose h2:before{content:'';position:absolute;top:0;left:0;width:34px;height:2px;background:var(--blade)}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.2em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--blade)}
.prose blockquote{margin:1.6em 0;padding:6px 0 6px 20px;border-left:3px solid var(--bronze);font-family:var(--serif);font-size:1.06em;color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:700}
.prose hr{margin:2.4em 0}
/* 英文页首字下沉（中文不用）。v4 修正：加 :not(.reading-tool) —— 部分文章
（如 cargo-and-warehouses）正文里第一个 section 就是判断表模块，旧选择器
把首字下沉落到了判断表的引言上，真正的开篇段落反而没有。 */
html[lang=en] .prose>section:first-of-type:not(.reading-tool)>p:first-of-type::first-letter{
float:left;font-family:var(--serif);font-size:3.1em;line-height:.86;
padding:.06em .12em 0 0;color:var(--blade);font-weight:600}
/* 锚点定位不被 sticky 顶栏遮住 */
section[id],h2[id],h3[id]{scroll-margin-top:104px}
html{scroll-padding-top:104px}
/* ---------- 6. 来源盒 / 表格 / 目录 ---------- */
.sourcebox{position:relative;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 55%,transparent)}
.sourcebox .eyebrow{letter-spacing:1.6px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{width:100%;border-collapse:collapse}
th{font-weight:600;letter-spacing:.02em}
.toc a{display:block;padding:5px 0;border-left:2px solid transparent;padding-left:11px;margin-left:-13px;transition:border-color .2s,color .2s}
.toc a:hover{border-left-color:var(--blade)}
.page-scene img{transition:filter .3s}
.page-scene:hover img{filter:saturate(1.06)}
/* ---------- 7. 页脚层次 ---------- */
footer{padding-top:8px}
.foot{gap:34px}
.foot>div{display:flex;flex-direction:column;gap:8px}
.foot small{line-height:1.7}
.foot a{transition:color .2s,transform .2s;width:fit-content}
.foot a:hover{transform:translateX(2px)}
/* ---------- 8. 已弃用：滚动进入动画（保留决策痕迹，勿重新启用） ----------
2026-09-29 初版曾用 `animation-timeline:view()` + `opacity:.01` 做卡片滚动
上浮。实测**全页渲染时首屏外的卡片整片不可见**（全页截图确认为空白），
且会让抓取/无交互场景拿到「不可见内容」。对本站（正在解决收录问题）
属净负收益 ⇒ 直接移除。若日后要重做，**禁止使用 opacity 起始值**，
只能做纯 transform，并确保未触发时元素依然完全可见。
-------------------------------------------------------------------- */
/* ---------- 9. 统一细节：焦点、表单、选择、滚动条 ---------- */
.button{transition:background .2s,box-shadow .2s,transform .12s}
.button:hover{box-shadow:0 10px 30px -8px color-mix(in srgb,var(--blade) 55%,transparent)}
.searchbar input:focus-visible{outline:2px solid var(--blade);outline-offset:3px}
.filters button{transition:border-color .18s,color .18s,background .18s}
.searchbar{display:flex;gap:10px;align-items:center}
#result-count{opacity:.85}
/* ---------- 10. 打印 ---------- */
@media print{
header,.editionbar,.hero-scene,.hero:after,.ad-slot,.ad-banner,footer,.toc,.actions,.filters,.searchbar{display:none!important}
body{background:#fff;color:#000;font-size:11pt}
.hero{min-height:0;background:none;color:#000}
.herocopy h1,.hero .hero-description,.hero .hero-detail{color:#000!important;text-shadow:none!important}
.inner-page{background:none!important}
.inner-page .articlepage,.inner-page .library,.inner-page .infopage{background:none!important;padding:0}
.sourcebox,.diagram,.card{border-color:#bbb!important;background:none!important;box-shadow:none!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}
/* ---------- 11. 修缺陷 C：筛选按钮选中态「红底红字」 ----------
style.css 给选中项设了 background:#c34a2e，refresh.css 又把 color 改成
var(--blade)（同一个红）⇒ 红底红字，选中项文字实际不可见。统一为红底白字。
-------------------------------------------------------------------- */
.filters button[aria-pressed=true],
html[data-theme=light] .filters button[aria-pressed=true]{
background:var(--blade);border-color:var(--blade);color:#fff;font-weight:600}
.filters button[aria-pressed=true]:hover{filter:brightness(1.08);color:#fff}
.topiclinks a[aria-current],
html[data-theme=light] .topiclinks a[aria-current]{background:color-mix(in srgb,var(--blade) 16%,transparent);color:var(--blade);border-color:var(--blade);font-weight:600}
/* ---------- 12. 长文可读性：正文字色从 muted 提亮（保留标题层次） ---------- */
.prose p,.prose li,.dek{color:color-mix(in srgb,var(--ink) 87%,var(--paper))}
html[data-theme=light] .prose p,html[data-theme=light] .prose li{color:color-mix(in srgb,var(--ink) 92%,var(--paper))}
.card p,.factstrip p{color:color-mix(in srgb,var(--ink) 62%,var(--paper))}
html[data-theme=light] .card p,html[data-theme=light] .factstrip p{color:color-mix(in srgb,var(--ink) 76%,var(--paper))}
.sourcebox small,.articlemeta{color:color-mix(in srgb,var(--ink) 55%,var(--paper))}
/* ---------- 13. 正文小标题统一为衬线 ----------
style.css 里 `.prose h2{font-family:Arial}` 特异性(0,2,0) 压过了 refresh.css
的 `h2{font-family:var(--serif)}`(0,0,1) ⇒ h2 是无衬线、h1/h3 是衬线，割裂。
统一为衬线；h2 的辨识度由上方红色短横线承担。表格与图注保持无衬线（数据可读性）。
-------------------------------------------------------------------- */
.prose h2,.prose h3,.prose h4{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
/* ---------- 14. 修缺陷 D：内页背景照片大面积透出 ----------
style.css 的遮罩渐变只覆盖 850px，其下只剩 `var(--page-scene)` 原图
⇒ 内容区四周露出清晰照片（浅色主题尤其突兀）。改为渐变铺满整页高度，
顶部保留氛围、向下收成纯色底。
-------------------------------------------------------------------- */
.inner-page{
background-image:
linear-gradient(rgba(9,12,16,.80) 0,rgba(9,12,16,.955) 480px,rgba(9,12,16,.972) 100%),
var(--page-scene);
background-size:100% 100%,auto 1000px;
background-position:center top;
background-repeat:no-repeat;
background-attachment:scroll;
}
/* 浅色主题下内页背景改为纯纸色：浅底上的照片残影会显得"脏"（右侧仍可见
一块城市影），而每页顶部的 .page-scene 大图已经承担了视觉。 */
html[data-theme=light] .inner-page{background-image:none;background-color:var(--paper)}
/* ============================================================
v4 —— 2026-09-29 晚 · 第二轮（Codex 多语言重构之后）
------------------------------------------------------------
背景：Codex 本轮把站扩到多语言（现已收敛为 en + de），
并新增了三个「看得见但没样式」的模块。v4 只解决两类事：
① 实测出来的对齐/可读性缺陷（每条都有测量值）
② 给 Codex 新增的模块补上应有的视觉身份
============================================================ */
/* ---------- 15. 修缺陷 E：全站四种内容左边缘，互不对齐 ----------
1440 视口实测（Playwright getBoundingClientRect）：
顶栏 / 页脚 ...... 130px（.wrap.nav 用 min(1180px,100%-56px)）
首页 / 主题页 ...... 100px（.wrap 用 min(1240px,100%-80px)）
文章页内层 ........ 128px（.inner-page .articlepage 左右各 28px padding）
信息页 h1 ......... 256px ／ 正文 340px（infopage 居中 1000 再居中 760）
⇒ 同一屏里内容和顶栏错开 30px、文章页错开 2px、信息页错开 84px。
统一到顶栏/页脚既有的 1180 度量，断点与 refresh.css 的顶栏一致。
-------------------------------------------------------------------- */
.wrap{width:min(1180px,calc(100% - 56px))}
@media (max-width:1000px){.wrap{width:calc(100% - 40px)}}
@media (max-width:650px){.wrap{width:calc(100% - 32px)}}
/* 文章页内层去掉 28px 缩进 → 与顶栏同一条左边缘 */
.inner-page .articlepage{padding-left:0;padding-right:0}
/* ---------- 16. 修缺陷 F：信息页 h1 与正文错开 84px ----------
根因：style.css 里
.inner-page .infopage{max-width:1000px;padding:1px 36px 60px}
.inner-page .infopage .prose{max-width:760px;margin:0 auto}
卡片内容盒 928px，正文 760px 又在其中居中 ⇒ 正文被推到左 340，
而 h1/eyebrow/page-scene 在左 256，差 84px。
解法：卡片直接收成「760 正文 + 2×36 内边距 = 832」，正文填满内容盒，
h1 与正文共用同一条左边缘（340），且阅读列宽 760 完全不变。
-------------------------------------------------------------------- */
.inner-page .infopage{max-width:832px}
/* ---------- 17. 修缺陷 G：语言菜单「当前语言」看起来像禁用 ----------
style.css：.language-options a[aria-current]{background:var(--mint);color:var(--orange)}
而暗色主题 --mint:#191D18（近黑）、--orange:#CE4B3E ⇒ 近黑底 + 暗红字，
对比度约 3.5:1 且观感像灰掉；浅色主题 --mint:#F4F2EC 对 --paper:#FBFAF6
几乎无差 ⇒ 两个主题的选中态都表达不清。改为「底色轻染 + 左侧 3px 红条 +
正文色加粗」，两个主题对比度均 >10:1，✓ 号保留品牌红。
-------------------------------------------------------------------- */
.language-menu .language-options a:hover,
html[data-theme=light] .language-menu .language-options a:hover{
background:color-mix(in srgb,var(--blade) 10%,transparent);color:var(--blade)}
.language-menu .language-options a[aria-current],
html[data-theme=light] .language-menu .language-options a[aria-current]{
background:color-mix(in srgb,var(--blade) 14%,transparent);
color:var(--ink);font-weight:700;
box-shadow:inset 3px 0 0 var(--blade)}
.language-menu .language-options a[aria-current] span{color:var(--blade)}
/* ---------- 18. 补样式：.content-update（正文顶部的「核对日期」声明，26 页）
Codex 新加的内容边界声明，之前完全无样式 ⇒ 混在正文里看不出是声明。
做成一条 bronze 细条：不喊、但一眼能认出「这是元信息，不是正文」。
注意：只用图形（左边框/底色），不注入任何文字，否则会污染五语页面。
-------------------------------------------------------------------- */
.prose>p.content-update{
font-family:var(--sans);font-size:13.5px;line-height:1.65;
color:color-mix(in srgb,var(--ink) 74%,var(--paper));
background:color-mix(in srgb,var(--bronze) 9%,transparent);
border-left:2px solid color-mix(in srgb,var(--bronze) 62%,transparent);
border-radius:0 7px 7px 0;
padding:12px 16px;margin:20px 0 24px}
.prose>p.content-update:first-child{margin-top:0}
/* ---------- 19. 补样式：.reading-tool（判断表模块，20 页）
这是 Codex 本轮给「线路/城市/货仓/道路」四篇补的核心价值（三列判断表），
之前只是裸 section + table。做成有边界的卡片，与 .sourcebox 区分开：
sourcebox＝左侧色条，reading-tool＝整块描边 + 暖色底。
-------------------------------------------------------------------- */
.prose>.reading-tool{
margin:36px 0;padding:26px 26px 24px;
background:color-mix(in srgb,var(--bronze) 6%,var(--paper));
border:1px solid color-mix(in srgb,var(--bronze) 28%,transparent);
border-radius:var(--radius)}
.prose>.reading-tool>h2:first-child{margin-top:0}
.prose>.reading-tool>.tablewrap{margin-bottom:0}
/* ---------- 20. 补样式：.topic-reading-path（主题页选读顺序，20 页）
之前等同普通段落，读者看不出「这是给你的阅读顺序」。做成 callout。
-------------------------------------------------------------------- */
.topicintro>p.topic-reading-path{
margin:24px 0 0;padding:15px 18px;max-width:80ch;
font-size:15px;line-height:1.75;
color:color-mix(in srgb,var(--ink) 84%,var(--paper));
background:color-mix(in srgb,var(--bronze) 8%,transparent);
border-left:3px solid var(--bronze);border-radius:0 8px 8px 0}
/* ---------- 21. 数据表（全站 .tablewrap 共用，40 处表格）----------
只做「更好读」，不改变信息：表头加粗字距 + bronze 下划线区分层级，
单元格顶对齐（多行时不再垂直居中错位），首列加粗当行标签，斑马纹极淡。
⚠️ 不动 text-transform —— 表头在 de/fr 里是成句的，全大写会变成喊话。
-------------------------------------------------------------------- */
.tablewrap table{font-size:13.5px;line-height:1.65}
.tablewrap th{
font-size:11.5px;font-weight:700;letter-spacing:.045em;vertical-align:bottom;
padding:13px 16px;border-bottom:1px solid color-mix(in srgb,var(--bronze) 46%,transparent)}
.tablewrap td{padding:14px 16px;vertical-align:top}
.tablewrap tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
.tablewrap th:first-child,.tablewrap td:first-child{width:26%}
.tablewrap tbody td:first-child{font-weight:600;color:var(--ink)}
html[data-theme=light] .tablewrap tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
/* ---------- 22. 修缺陷 H：侧栏目录被 sticky 顶栏压住 ----------
.toc{position:sticky;top:30px}，而 header 是 sticky 且实测高 79px（桌面）
/ 98px（手机）⇒ 目录吸顶后前 49px 落在顶栏底下，第一项被遮住。
与 v3 里已定的 104px 锚点偏移保持一致。
-------------------------------------------------------------------- */
@media (min-width:701px){.toc{top:104px}}
/* ---------- 23. 修缺陷 I：广告同意卡又窄又居中，像坏掉 ----------
现状：refresh.css 给了 .ad-banner{margin:34px 0} 抹掉了原来的 auto 居中，
首页上它是 的直接子元素 ⇒ 贴在视口最左边（实测 390 宽下 left=0）；
且 .ad-banner-choice 用 align-items:center + text-align:center，
300px 里塞三行说明文字，非常局促。
⚠️ 不改 .ad-banner-stage 的 300px 与 iframe 尺寸（供应商位固定），
只重排同意卡、居中首页那一个、并让按钮有按钮样。
-------------------------------------------------------------------- */
.ad-banner{text-align:left;background:color-mix(in srgb,var(--mint) 55%,transparent)}
main:not(.wrap)>.ad-banner{margin-inline:auto;width:min(326px,100%)}
.ad-banner>span{
font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;
color:color-mix(in srgb,var(--muted) 88%,var(--paper))}
.ad-banner-choice{align-items:flex-start;text-align:left;gap:9px;padding:14px 8px}
.ad-banner-choice>p{font-size:12.5px;line-height:1.62;color:color-mix(in srgb,var(--ink) 76%,var(--paper))}
.ad-banner-choice>a{
font-size:11.5px;font-weight:600;color:var(--blade);width:fit-content;
text-decoration:underline;text-underline-offset:3px}
.ad-banner-choice>button[data-load-banner]{
width:100%;text-align:center;padding:11px 14px;border-radius:9px;
background:var(--blade);border:1px solid var(--blade);color:#fff;
font-size:13px;font-weight:600}
.ad-banner-choice>button[data-load-banner]:hover{
background:color-mix(in srgb,var(--blade) 84%,#000);border-color:color-mix(in srgb,var(--blade) 84%,#000);color:#fff;filter:none}
.ad-banner>[data-remove-banner]{
width:100%;margin-top:10px;padding:9px;border-radius:9px;
background:transparent;border:1px solid var(--line);color:var(--muted);font-size:12px}
.ad-banner>[data-remove-banner]:hover{color:var(--ink);border-color:var(--blade)}
/* ---------- 24. 修缺陷 J：首字下沉落错位置 ----------
见上方 §5 已就地修正（给 v3 的选择器补 :not(.reading-tool)）。
这里额外兜底：万一以后判断表不是第一个 section，也别让下沉字母漏进卡片。
-------------------------------------------------------------------- */
html[lang=en] .prose>.reading-tool>p:first-of-type::first-letter,
html[lang=en] .prose>p.content-update::first-letter{
float:none;font-size:inherit;line-height:inherit;padding:0;
color:inherit;font-weight:inherit}
/* ---------- 25. 长标题（德语尤长）不出现孤字行 ---------- */
.articleintro h1,.topicintro h1,.infopage h1,.card h3,.prose h2,.related h2{text-wrap:balance}
/* ---------- 26. 补齐 art-0 占位色（style.css 只定义了 art-1/2/3）---------- */
.cardart.art-0{background:#22303a;color:#cfd9e0}
html[data-theme=light] .cardart.art-0{background:#dfe4e0;color:#33474f}
/* ---------- 27. v4 的移动端收口 ---------- */
@media (max-width:700px){
.prose>.reading-tool{margin:28px 0;padding:18px 16px 16px}
.prose>p.content-update{padding:11px 13px;font-size:12.5px}
.topicintro>p.topic-reading-path{padding:13px 15px;font-size:14px}
.tablewrap th:first-child,.tablewrap td:first-child{width:auto}
.tablewrap th,.tablewrap td{padding:12px 13px}
.inner-page .infopage{max-width:none}
}
@media print{
.prose>.reading-tool{background:none!important;border-color:#bbb!important}
.prose>p.content-update{background:none!important;border-left-color:#888!important}
}
/* ============================================================
v5 —— 2026-09-29 夜 · 第三轮：首屏定调 + 背景去「照片铺满」
------------------------------------------------------------
窝主原话：「需要让用户一点进来就感觉出来对网站的感觉。还有网站
的背景不要用城墙，感觉有点 low，改完之后给我看一眼预览」。
动笔前核实（结论已落档）：
· 逐个打开 assets/ 全部 25 个文件（4 张 webp 主图 + 19 张 jpg
截图 + favicon.svg + world.svg）→ 站内不存在任何城墙/城堡素材；
· 拉线上首页 HTML → 亦无 svg / world.svg / castle / wall 命中；
· world.svg 全站零引用（README 说它是「首页原创插画」，已过期）。
⇒ 把「背景」按「满幅照片当背景」处理，两处一起改：
① 内页：不再透出 --page-scene。v3 §14 当初只把渐变铺满、照片仍从
顶部透出（切成一宽条），而下方 .page-scene 大图是**同一张**
⇒ 同一页两次曝光，这正是廉价感的来源；
② 首页：照片从「铺满全屏的底」降级为「右侧画框里的配图」，文字
改坐在纯色刊头板上 —— 首屏读起来像一份刊物，而不是游戏官网。
⚠️ 不动 DOM、不注入文字、不改 text-transform（多语言三条红线）。
⚠️ 只改视觉：所有规则都能靠删掉本文件回退。
============================================================ */
/* ---------- 28. 内页背景：照片带 → 纯渐变设计底（替换 v3 §14）----------
深/浅两套都是「品牌红自右上晕染 + 铜金自左上轻晕 + 顶部微提亮」，
全部是渐变，不含任何图片或纹理 ⇒ 结构上不可能再出现照片感。
浅色主题原本另有一条 style.css 规则把照片带一起改掉，需并列覆盖。
-------------------------------------------------------------------- */
.inner-page{
background-color:var(--paper);
background-image:
radial-gradient(112% 46% at 84% -10%,color-mix(in srgb,var(--blade) 20%,transparent),transparent 66%),
radial-gradient(80% 40% at 2% -6%,color-mix(in srgb,var(--bronze) 13%,transparent),transparent 62%),
linear-gradient(180deg,color-mix(in srgb,var(--mint) 92%,var(--paper)),var(--paper) 660px);
background-size:100% 780px,100% 660px,100% 100%;
background-position:center top;
background-repeat:no-repeat;
background-attachment:scroll;
}
html[data-theme=light] .inner-page{
background-image:
radial-gradient(112% 46% at 84% -10%,color-mix(in srgb,var(--blade) 11%,transparent),transparent 66%),
radial-gradient(80% 40% at 2% -6%,color-mix(in srgb,var(--bronze) 16%,transparent),transparent 62%),
linear-gradient(180deg,color-mix(in srgb,var(--mint) 94%,var(--paper)),var(--paper) 660px);
}
/* ---------- 29. 内页顶部大图：从「钉在卡里的方框」改成有身份的版面元素 ----
去掉 style.css 的 1px 硬边框，换成圆角 + 柔和投影 + 与主题同步的图注条。
照片本身不洗色、不过滤 —— 保留官方素材的原色。
⚠️ 阴影只用「纯黑 + 负 spread」，且不要用 0 0 0 1px 的浅色环：
实测（A/B：临时给 .page-scene 加 box-shadow:none）深色主题下画框左侧
会出现一条 25px 宽的浅光带（x105→128 由 #131612 渐亮到 #21241F，
而页面底色只有 #131612），左边缘扫描因此多出 113–121 一段。
改用深色投影后该带消失，深色页左边缘只剩 130（= .wrap）。
-------------------------------------------------------------------- */
.page-scene{
border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
border-radius:var(--radius);
background:color-mix(in srgb,var(--mint) 72%,var(--paper));
box-shadow:0 26px 52px -20px rgba(0,0,0,.9);
}
html[data-theme=light] .page-scene{
border:1px solid var(--line);
box-shadow:0 16px 38px -16px rgba(28,24,18,.24);
}
.page-scene figcaption{
font-family:var(--sans);font-size:11px;letter-spacing:.055em;
background:color-mix(in srgb,var(--mint) 84%,var(--paper));
color:color-mix(in srgb,var(--ink) 88%,var(--paper))}
.page-scene figcaption span{color:var(--muted);letter-spacing:0}
/* ---------- 30. 首页首屏：把「一张照片铺满」改成「左刊头 / 右画框」----------
实测现状（style.css 第 6 行）：.hero-scene 被定位成 inset:0 满幅底图，
.hero:after 再压两层暗罩，标题直接压在照片上 ⇒ 首屏是「海报」，不是
「刊物」。改成杂志式对开：左半纯色刊头板承载全部文字，右半照片作为
画框配图，二者之间用一块柔化的纸色坡度衔接（避免刀切感）。
桌面 ≥901px 生效；≤900px 维持满幅照片（见 §33）。
-------------------------------------------------------------------- */
@media (min-width:901px){
.hero{background:var(--paper);min-height:0}
.hero>.hero-scene{
inset:0 0 0 auto;width:54%;height:100%;
object-position:62% center;
filter:saturate(1.06) contrast(1.03)}
.hero:after{
background:linear-gradient(90deg,
var(--paper) 0,var(--paper) 45.5%,transparent 49%)}
.hero-content{min-height:620px;justify-content:center;padding-top:56px;padding-bottom:64px}
/* 30-1 文字色收回主题色。
v3 §2 的「强制白字」是给深色照片写的；刊头板在浅色主题下是浅纸色，
白字会直接看不见。选择器覆盖 plain / light，
压过 v3 §2 的 `html[data-theme=light] .hero .herocopy h1`。 */
.hero,.hero .herocopy{color:var(--ink)}
.hero .herocopy{max-width:min(620px,calc(51vw - 64px))}
.hero .herocopy h1,
html[data-theme=light] .hero .herocopy h1{
font-size:clamp(52px,5.6vw,88px);line-height:.98;letter-spacing:-.035em;
font-weight:600;margin:20px 0 24px;text-shadow:none;color:var(--ink)}
.hero .herocopy h1 span,
html[data-theme=light] .hero .herocopy h1 span{color:var(--blade);text-shadow:none}
.hero .eyebrow,
html[data-theme=light] .hero .eyebrow{color:var(--bronze)}
/* 一句话定位提成「引文」：加左侧品牌细杠，与正文区分开 */
.hero .hero-description,
html[data-theme=light] .hero .hero-description{
font-size:22px;font-weight:600;line-height:1.42;color:var(--ink);text-shadow:none;
padding-left:17px;
border-left:2px solid color-mix(in srgb,var(--blade) 62%,transparent)}
.hero .hero-detail,
html[data-theme=light] .hero .hero-detail{
font-size:14.5px;line-height:1.75;color:var(--muted);max-width:44ch;text-shadow:none}
.hero .button{font-size:15px;padding:16px 26px;gap:18px}
.hero .textlink,html[data-theme=light] .hero .textlink{color:var(--ink)}
/* 30-2 发售信息做成照片上的玻璃牌（照片侧文字仍锁定亮色）*/
.hero .departure{
right:28px;bottom:58px;padding:16px 20px 15px;gap:6px;
background:color-mix(in srgb,#0a0e12 72%,transparent);
border:1px solid color-mix(in srgb,#fff 18%,transparent);
border-radius:12px;backdrop-filter:blur(9px)}
.hero .departure strong{font-size:22px;color:#fff}
.hero .departure span,
html[data-theme=light] .hero .departure span{color:#dfe6ec}
.hero .image-credit{right:30px;bottom:22px}
}
/* ---------- 31. 三个入口从「静态信息条」改成「看得出能点」----------
它们本来就是首屏的下一步动作，但观感与普通段落无异。加 hover 底色 +
下缘品牌色生长线 + 箭头位移，不新增任何文字（多语言安全）。
-------------------------------------------------------------------- */
.factstrip>div{position:relative;transition:background .2s}
.factstrip>div:after{
content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
background:var(--blade);transform:scaleX(0);transform-origin:left;
transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.factstrip>div:hover{background:color-mix(in srgb,var(--blade) 7%,transparent)}
.factstrip>div:hover:after{transform:scaleX(1)}
.factstrip span{color:var(--bronze);font-weight:700}
.factstrip a{font-size:15px;line-height:1.35}
.factstrip b{transition:transform .22s ease}
.factstrip>div:hover b{transform:translate(3px,-3px)}
/* ---------- 32. 卡片与图书区的质感收口 ---------- */
.card{border-radius:var(--radius)}
.cardart img{filter:saturate(1.05) contrast(1.02)}
.card:hover .cardart img{filter:saturate(1.12) contrast(1.03)}
.searchbar{border-radius:var(--radius)}
.filters button{transition:background .18s,color .18s,border-color .18s}
/* ---------- 33. ≤900px 收口 ------------------------------------------
≤900px 时 §30 整块规则不生效 ⇒ .hero-scene 自动回到 style.css 的
inset:0 满幅定位、文字回到 v3 §2 的亮色，无需再声明。这里只留收尾。
⚠️ 不要再给 .hero-description 加 padding-left —— 左侧品牌细杠只在
≥901px 存在，窄屏加内缩会白推 14px、与 h1 错开（v5 首版踩过）。
-------------------------------------------------------------------- */
@media (max-width:700px){
.page-scene{border-radius:10px;box-shadow:0 18px 38px -16px rgba(0,0,0,.85)}
.factstrip>div:after{bottom:0}
.factstrip a{font-size:13px}
}
@media print{
.hero>.hero-scene{display:none!important}
.hero{background:none!important;color:#000!important}
.inner-page{background-image:none!important}
}
/* ---------- 34. 主题页顶部大图归位到同一条左边缘（v4 §15 的漏网）----------
像素扫描实测（1440 视口，05-主题页-浅色.png）：主题页的 .page-scene 是
的直接子元素，style.css 给它自己的
.inner-page main>.page-scene{width:min(1240px,calc(100% - 80px))}
（特异性 0,2,1）—— 既不继承 .wrap 的 1180，也没被 v4 §15 覆盖
⇒ 实测左 100 / 右 1340，比同页 h1、卡片、搜索框的 130..1310 两侧各宽出
30px。改成与 .wrap 同度量后整页只有一条左边缘。
注意：特异性必须写成 .inner-page main>.page-scene 才能压过上面那条。
⚠️ 文章页 / 信息页的同名元素是 .articlepage>.page-scene 与
.infopage>.page-scene，本来就跟卡片同宽，不受此条影响。
-------------------------------------------------------------------- */
.inner-page main>.page-scene{width:min(1180px,calc(100% - 56px))}
/* ============================================================
v6 —— 2026-09-29 深夜 · 第三轮（背景：纯色 → 图片）
------------------------------------------------------------
窝主原话：「背景不能放一个适合的图片吗？最好不要用纯色，
特别是比较浅的纯色」。
⇒ 直接否定 v5 §28 的「纯渐变设计底」，并点名浅色主题的苍白。
------------------------------------------------------------
动笔前实测（本轮，非推断）：
· assets/ 四张 webp 中 tf3-industry / tf3-network / tf3-history
在 *.mjs *.css *.js *.html 里 grep 结果全部 0 命中 ⇒ 从未被引用，
可安全用作底图，不会与任何页面的 --page-scene 撞图；
· body 与 html 的 ::before / ::after 在三份 CSS 里 0 命中（未占用）；
· 亮度实测（PIL ImageStat，分三条横带取均值的加权亮度）：
tf3-industry.webp (1920x600) top 151 / mid 107 / bot 71
tf3-network.webp (1920x600) top 114 / mid 95 / bot 83
tf3-history.webp (1920x600) top 167 / mid 116 / bot 100
⇒ industry 是唯一天然「上亮下暗」的一张，正好对上「顶部有天光、
越往下越沉」的版面需求，选它当内页底图；
· 浅色「一片近白」的大头不在 .inner-page 的底色，而在两个上游：
style.css:31 html[data-theme=light] .inner-page .articlepage,
.infopage,.library{background:#faf9f5f5} ← alpha .96 近白
refresh.css:25 html[data-theme=light] .card,.factstrip,
.manifesto,.searchbar,#empty{background:#FFFEF9} ← 近白
⇒ 光换背景、不改这些面，等于把图藏在白卡片底下，等于白做。
· 深色主题的机制：style.css:11-26 是 @media (prefers-color-scheme:dark)
内的一批裸选择器（:root / body / header ... 均为 0,0,1）；浅色则是
html[data-theme=light] 前缀（refresh.css:154 的 body 为 0,1,1）
⇒ body 必须写两条，否则浅色那条压不过。
------------------------------------------------------------
本轮六节（A-E 一起动，让「纸 + 图 + 织理」贯到最里层）：
§35 主题变量 — 浅色新增暖纸三色（只加新变量，不覆盖上游）
§36 body 全站底 — 斜向细纹 + 品牌色微晕（不放大图，兼容 404.html）
§37 .inner-page — tf3-industry.webp 打底 + 渐隐 + 斜细纹（取代 §28）
§38 浅色内页面 — #faf9f5f5 → 暖纸（微透，让底纹透上来）
§39 浅色内容面 — #FFFEF9 / #fffefa → 暖纸（卡片/信息条/搜索框/表格）
§40 首屏刊头板 — 浅色改暖米 + 织理；深色加织理 + 品牌色微晕
✅ 底图与首页首屏的 tf3-hero.webp、与各页 .page-scene 的截图都不同
⇒ 顺带修掉 v5 §28 注释里点出的「同一页两次曝光同一张照片」的老问题。
⚠️ 不动 DOM、不注入文字、不改 --page-scene 映射（多语言三条红线）。
⚠️ 全部写在文末 ⇒ 同为 (0,1,0) / (0,2,0) 时靠源码顺序即压过 §28 / §30。
⚠️ 回退 = 删本节（§35-§40）即可，其余一律不变。
============================================================ */
/* ---------- 35. 浅色新增「暖纸三色」变量 ----------
只新增 --tfg-* 三个，不改上游任何既有变量。
-------------------------------------------------------------------- */
html[data-theme=light]{
--tfg-deep:#F0E7D6; /* 页面底：明显偏暖的米，不是白 */
--tfg-warm:#FAF5EA; /* 内容面：暖纸（卡片 / 正文卡） */
--tfg-weave:#6E5A38; /* 织理与细纹的色源 */
}
/* ---------- 36. 全站底（body）：斜细纹 + 品牌色微晕 ----------
为什么 body 不放大图：它覆盖全部 100 个 HTML（含 404.html 与各语言首页），
大图会与 §37 的内页底图叠加，也会在首页首屏之外露出来抢视觉。
⇒ body 只负责「纸的织理」，画面交给 §37 与 §40。
⚠️ 必须写两条：上游 refresh.css:154 的浅色 body 是
html[data-theme=light] body (0,1,1)，普通 body (0,0,1) 压不过它。
⚠️ 显式写 background-attachment:scroll —— 上游两层都用 fixed，
不动它的话这两层会变成视口固定，长页滚动时观感与时隐时现不一致。
-------------------------------------------------------------------- */
body{
background-color:var(--paper);
background-image:
repeating-linear-gradient(118deg,
color-mix(in srgb,var(--bronze) 6%,transparent) 0 1px,transparent 1px 7px),
radial-gradient(58% 460px at 88% -110px,color-mix(in srgb,var(--blade) 7%,transparent),transparent 70%),
radial-gradient(52% 540px at -6% 280px,color-mix(in srgb,var(--bronze) 8%,transparent),transparent 72%);
background-size:100% 100%,auto,auto;
background-position:0 0,center top,left top;
background-repeat:repeat,no-repeat,no-repeat;
background-attachment:scroll;
}
html[data-theme=light] body{
background-color:var(--tfg-deep);
background-image:
repeating-linear-gradient(118deg,
color-mix(in srgb,var(--tfg-weave) 7%,transparent) 0 1px,transparent 1px 7px),
radial-gradient(58% 460px at 88% -110px,color-mix(in srgb,var(--blade) 6%,transparent),transparent 70%),
radial-gradient(52% 540px at -6% 280px,color-mix(in srgb,var(--tfg-weave) 8%,transparent),transparent 72%);
background-size:100% 100%,auto,auto;
background-position:0 0,center top,left top;
background-repeat:repeat,no-repeat,no-repeat;
background-attachment:scroll;
}
/* ---------- 37. 内页背景：纯渐变 → 图片底（取代 v5 §28）----------
三层，从下到上：照片 → 渐隐遮罩 → 斜细纹。
遮罩是「顶部留天光、向下收敛到页面底色」，所以照片只在页面上部可见，
并与页面底色无缝衔接（正是 v5 §28 注释里那个「同一页两次曝光」的反面）。
⚠️ 底图固定 tf3-industry.webp，不依赖 --page-scene：每页自己的截图
留给顶部 .page-scene 大图，这样背景与页面内容永不撞图。
⚠️ background-size 第三项写 100% auto（不裁切）而非固定高度：
1920x600 的图在 1440 视口下 full-width 后高 450px，横向完整、
亮度均匀；若改成固定高度就会横向裁掉约三成，正中会显出一块暗斑。
-------------------------------------------------------------------- */
.inner-page{
background-color:#0C0E0C;
background-image:
repeating-linear-gradient(118deg,
color-mix(in srgb,var(--bronze) 7%,transparent) 0 1px,transparent 1px 9px),
linear-gradient(180deg,
rgba(11,13,11,.55) 0,
rgba(11,13,11,.62) 170px,
rgba(11,13,11,.74) 380px,
rgba(11,13,11,.87) 620px,
rgba(11,13,11,.94) 900px,
rgba(11,13,11,.98) 1200px,
#0B0D0B 1500px),
url('/assets/tf3-industry.webp');
background-size:100% 100%,100% 1500px,auto 620px;
background-position:0 0,center top,center top;
background-repeat:repeat,no-repeat,no-repeat;
background-attachment:scroll;
}
html[data-theme=light] .inner-page{
background-color:var(--tfg-deep);
background-image:
repeating-linear-gradient(118deg,
color-mix(in srgb,var(--tfg-weave) 6%,transparent) 0 1px,transparent 1px 9px),
linear-gradient(180deg,
rgba(242,231,212,.50) 0,
rgba(242,231,212,.56) 170px,
rgba(241,233,218,.635) 380px,
rgba(242,235,221,.815) 620px,
rgba(243,236,222,.915) 900px,
rgba(244,238,226,.972) 1200px,
#F0E7D6 1500px),
url('/assets/tf3-industry.webp');
}
/* ---------- 38. 浅色内页的三块内容面：近白 → 暖纸（微透）----------
style.css:31 给它们 #faf9f5f5（alpha .96 的近白）⇒ 浅色主题下一条
1180px 宽的白板几乎占满屏幕，这才是「浅色纯色」观感的主因。
改成暖纸、并把 alpha 降到 .92 ⇒ 底图与织理能透上来一线，纸感成立。
⚠️ 特异性必须写到 html[data-theme=light] .inner-page .articlepage
(0,2,1) 才压得过 style.css:31 那一条（同为 0,2,1，靠源码顺序取胜）。
-------------------------------------------------------------------- */
html[data-theme=light] .inner-page .articlepage,
html[data-theme=light] .inner-page .infopage,
html[data-theme=light] .inner-page .library{
background:color-mix(in srgb,var(--tfg-warm) 92%,transparent);
}
/* ---------- 39. 浅色其余近白面：统一到暖纸 ----------
上游 refresh.css:25 一条把五类面都设成 #FFFEF9（近白），style.css:32
另有一条 #fffefa，style.css:39 的筛选按钮是 #fffefa。同选择器 + 源码
后置即可覆盖。只改背景，不动边框与选中态。
⚠️ .filters button[aria-pressed=true]（0,3,1 深红底白字）必须保持 ——
它特异性更高，不受本条影响。
-------------------------------------------------------------------- */
html[data-theme=light] .card,
html[data-theme=light] .factstrip,
html[data-theme=light] .manifesto,
html[data-theme=light] .searchbar,
html[data-theme=light] #empty,
html[data-theme=light] .filters button{
background:var(--tfg-warm);
}
html[data-theme=light] th{background:color-mix(in srgb,var(--tfg-weave) 11%,var(--tfg-warm))}
html[data-theme=light] td{background:var(--tfg-warm)}
/* ---------- 40. 首屏刊头板：不再是一块纯色（仅 ≥901px）----------
浅色：§30 的 var(--paper) 是 #FBFAF6 近白 → 改成暖米 #F2E7D2；同时把
.hero:after 的左侧板换成暖米渐变，并叠一层纵向织理。
深色：近黑的板加极淡织理 + 品牌色微晕，让「纸」有纹理而不是死黑。
⚠️ 必须写在自己的 @media (min-width:901px) 里且源码在 §30 之后，
才能压过 §30 的 .hero{background:var(--paper)} 与 .hero:after。
⚠️ 只改颜色与纹理：不动 §30 的对开几何、不动文字色与字号。
⚠️ :after 在 .hero-content 之下（z-index:1 在 content 上），纹理不会盖字。
-------------------------------------------------------------------- */
@media (min-width:901px){
.hero{background:var(--paper)}
.hero:after{
background:
repeating-linear-gradient(118deg,
color-mix(in srgb,var(--bronze) 7%,transparent) 0 1px,transparent 1px 8px),
radial-gradient(64% 78% at 6% 26%,color-mix(in srgb,var(--blade) 10%,transparent),transparent 72%),
linear-gradient(90deg,var(--paper) 0,var(--paper) 45.5%,transparent 49%);
}
html[data-theme=light] .hero{background:#F2E7D2}
html[data-theme=light] .hero:after{
background:
repeating-linear-gradient(118deg,
color-mix(in srgb,var(--tfg-weave) 8%,transparent) 0 1px,transparent 1px 8px),
radial-gradient(64% 78% at 6% 26%,color-mix(in srgb,var(--blade) 8%,transparent),transparent 72%),
linear-gradient(90deg,#F2E7D2 0,#F2E7D2 45.5%,rgba(242,231,210,0) 49%);
}
}
/* ---------- 40-1. 打印：底图与织理一律不打印 ----------
§33 的 @media print 已清 .inner-page 与 .hero 背景；这里补 body 与 :after。
-------------------------------------------------------------------- */
@media print{
body{background-image:none!important;background-color:#fff!important}
.hero:after{background:none!important}
}
/* ============================================================
v7 —— 2026-09-30 凌晨 · 第四轮（对齐收敛 + 冷暖统一 + 署名条）
------------------------------------------------------------
窝主原话：「根据 codex 已经修改的基础上，你再美化一下网站页面
和 UI，特别是背景，要给人一种找对网站的感觉」。
⚠️ 关于「背景」：v6（上方 §35-§40）已完成「纯渐变 → 图片底」，
本节不重复；只收 v6 的尾。
------------------------------------------------------------
动笔前实测（Playwright chromium，1440×900，浅/深双主题，
首页 / 主题页 / 文章页 / 信息页 各一，路由均 http=200）：
· 主题页 `div.wrap.topicintro` **没有背景**（未进入背景盒清单
⇒ computed background-color 为透明）⇒ h1 与页面描述直接压在
.page-scene 的灰白工业图上（浅色下 --muted #5E5A50 压中灰底，
对比不足）；且它与下方 .library 面板（同色 @ .92）之间留着
style.css:18 的 25px margin-top ⇒ 全宽一条横向硬边。
· 左边缘错位：首页 `.library` 内层 `div.sectionhead` L=130，
主题页同一元素 **L=158**（差 28px）；卡片宽 380 → 361。
根因 = style.css:18 `.inner-page .library{... padding:28px ...}`
—— 首页 body 是 .home-page，不受该条约束 ⇒ 同一模块两页错 28。
⚠️ v5「左边缘终检收到 130」漏掉它：只扫了 main > * 一层，而
section 本身确实在 130，错位发生在 section **内部**（skill §8.4）。
· 冷暖混搭：v6 §38/§39 把内容面全部暖化，但浅色主题的
header / footer 仍是 refresh.css:23 的 #F1EFE8（R-B=+9）、
editionbar 是 #EAE7DF（+11）；而页面底 --tfg-deep #F0E7D6
（+26）、内容面 --tfg-warm #FAF5EA（+16）⇒ 页眉页脚比正文冷一档。
------------------------------------------------------------
本轮四节：
§41 主题页 intro 面板化 —— 与 .library 连成一片，消硬边
§42 .library 内层左边缘 —— 158 → 130，与首页一致（卡片 361→380）
§43 浅色 chrome 转暖 —— header / footer / editionbar 与纸同温
§44 署名条 —— .articlemeta 加发线 + 品牌色分隔点
✅ 全部写在文末 ⇒ 选择器同特异性时靠源码顺序压过上游。
⚠️ 不动 DOM、不注入文字、不做 text-transform、不改 --page-scene 映射。
⚠️ 回退 = 删本节（§41-§44）即可，其余一律不变。
============================================================ */
/* ---------- 41. 主题页 intro 面板化（消 y845 硬边 + 保可读）----------
给 .wrap.topicintro 一块与 .library **完全同色**的面，并把 .library
的 margin-top 归零 ⇒ 两者拼成一块连续的板，页顶大图与正文之间不再
出现全宽横缝。深色沿用上游 #101419eb 的同值 rgba(16,20,25,.92)。
⚠️ 左右 padding 必须为 0：与 .articlepage 一样，内容贴板口 = 130。
-------------------------------------------------------------------- */
.inner-page .wrap.topicintro{
background:rgba(16,20,25,.92);
padding:30px 0 6px;
}
html[data-theme=light] .inner-page .wrap.topicintro{
background:color-mix(in srgb,var(--tfg-warm) 92%,transparent);
}
.inner-page .library{margin-top:0}
/* ---------- 42. .library 内层左边缘 158 → 130（与首页一致）----------
style.css:18 的 padding:28px 只作用于 .inner-page；首页（.home-page）
不受约束 ⇒ 同一块 Guide library 在首页 L130、主题页 L158，三列卡片
也被挤成 361（首页 380）。只把左右 padding 归零，上下保留。
验收判据：主题页 div.sectionhead / form.searchbar / div.grid 的
getBoundingClientRect().left 必须全部等于 130（= .wrap 的度量）。
-------------------------------------------------------------------- */
.inner-page .library{padding-left:0;padding-right:0}
/* ---------- 43. 浅色 chrome 转暖（与纸同温）----------
refresh.css:23 给浅色 header/footer #F1EFE8（R-B=+9）、:24 给
editionbar #EAE7DF（+11）；而 v6 把页面底与内容面暖到 +26 / +16
⇒ 页眉页脚相对正文明显偏冷，是「廉价感」的直接来源之一。
这里把它们提到同一色温档（+19 ～ +24）。只改背景与描边，不动
高度、粘性、模糊与任何布局属性。
⚠️ 选择器与上游同为 (0,1,1)，源码后置即胜出，不需要 !important。
-------------------------------------------------------------------- */
html[data-theme=light] header,
html[data-theme=light] footer{background:#F3ECDE;border-color:#E5DCC7}
html[data-theme=light] .editionbar{background:#EDE4D2;color:#6B6252}
/* ---------- 44. 署名条（.articlemeta）----------
正文上方那行「TF3 Fieldnotes editorial desk · Sources checked
YYYY-MM-DD · N min read」是本站最直接的「真编辑、有核实日期」信号
（正是「找对网站」的那一下），原样式只是 11px --muted 的一行小字。
加一条发线 + 品牌色分隔点，把它读成「署名条」而不是脚注。
⚠️ 只改视觉：不加字、不动 DOM；分隔点就是文档里原有的 •。
-------------------------------------------------------------------- */
.articlemeta{
border-top:1px solid var(--line);
margin-top:18px;padding-top:13px;
font-size:11.5px;letter-spacing:.015em;
}
.articlemeta span{margin:0 9px;color:var(--blade);font-size:9px;vertical-align:middle}