/* p-article.css — 驭火观察的 12 篇文章、隐私与数据说明、内容与编辑说明（v2，2026-10-09）。 全站组件在 fyro.css；正文的基础样式是 fyro.css 的 .prose，这里只补文章的版式。不放 orb；文章头背后是字符粒子（glyphs.js，10-20 起替换点阵）。 文章模板（12 篇同一个写法；隐私、编辑说明只用文章头和正文，没有分类、关于本文和相关服务）：
文章头 首屏背后的字符粒子

原标题
原样分行

导语

日期 · 更新于 · 分类 · 驭火LAB

正文：直属的 h2 自动编号（01 02 …，读屏不读）；h3、ul、ol；blockquote 是指令示例； .table-wrap 表格（.is-wide 在宽屏上放宽到约 1000px，.table-form 是待填的记录表）； {{> fig-…}}、{{> vid-…}} 图示和视频，放宽到约 1000px，图注对齐正文； .article-box > p.box-label + ul.checklist / ul / ol / p：检查卡、模板、示例（一张纸片，标签栏 + 细线分行）； .article-box.sample-doc：样张（报头、标题、小标题、报送栏）； section.article-refs：参考依据；{{> article-note}}：关于本文（印 + 一段话）
v0.26 第 5 段之七（10-29）起文末不再接页尾的留言表单（partials/cta.html，Leon「页底不用重复 CTA」）：相关服务这一条通栏下面就是页脚。 */ .article { --read: 720px; --wide: min(1000px, 100vw - var(--gutter) * 2); } .article .shell-narrow { max-width: calc(var(--read) + var(--gutter) * 2); } /* ---------- 文章头：标题、导语、署名行 ---------- */ .article-head { position: relative; isolation: isolate; padding-top: clamp(48px, 7vw, 96px); } .article-head h1 { font-family: var(--head); font-size: clamp(28px, 3.2vw + 16px, 48px); font-weight: var(--w-title); line-height: 1.3; letter-spacing: var(--track-title); color: var(--ink); text-wrap: balance; } .article-lead { margin-top: 22px; font-size: clamp(16.5px, 0.4vw + 15px, 19px); line-height: 1.9; color: var(--ink-soft); text-wrap: pretty; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 13px; line-height: 1.8; letter-spacing: 0.04em; color: var(--muted); } .article-meta .sep { color: rgb(var(--ink-rgb) / 0.3); } .article-meta a { color: var(--ink-2); transition: color 160ms ease-out, border-color 160ms ease-out; } /* 栏目名是不链的小签（v0.26，10-29：锦囊总页 /insights/ 跳回首页，原来链到总页的 #judgement 等）；字色同署名，悬停不变 */ .article-cat { padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-hi); color: var(--ink-2); } .article-by { display: inline-flex; align-items: center; gap: 6px; } .article-by img { width: 20px; height: 20px; mix-blend-mode: multiply; } @media (hover: hover) and (pointer: fine) { .article-meta a:hover { color: var(--cinnabar-text); } } /* ---------- 正文 ---------- */ .article-main { padding-block: clamp(36px, 4.5vw, 56px) clamp(72px, 8vw, 112px); } .article-prose { counter-reset: art-ch; font-size: 17px; line-height: 1.9; } .article-prose :is(p, li, td, th) { text-wrap: pretty; } .article-prose :is(h2, h3) { text-wrap: balance; } .article-prose strong { color: var(--ink); } /* 章：直属的 h2 编号（01 02 …），编号后面一道细线拉到栏宽 */ .article-prose > h2 { counter-increment: art-ch; margin-top: 2.6em; font-size: clamp(23px, 0.8vw + 18px, 28px); line-height: 1.42; } .article-prose > h2::before { content: counter(art-ch, decimal-leading-zero); content: counter(art-ch, decimal-leading-zero) / ""; display: block; margin-bottom: 14px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; color: var(--accent-text-sm); background: linear-gradient(var(--line-2), var(--line-2)) 30px 50% / 100% 1px no-repeat; } .article-prose > h3 { margin-top: 2em; font-size: 18.5px; } .article-prose > :is(h2, h3) + * { margin-top: 0.75em; } /* 列表：圆点、编号对齐 17px 的正文 */ .article-prose ul > li::before { top: 0.82em; } .article-prose ol > li::before { top: 0.3em; } /* 指令示例：一张贴着朱红边的便笺 */ .article-prose blockquote { margin-block: 1.6em; padding: 16px 22px; border: 1px solid var(--line); border-left: 2px solid var(--cinnabar); border-radius: 0 14px 14px 0; background: rgb(255 255 255 / 0.55); font-size: 16px; line-height: 1.9; color: var(--ink-2); } .article-prose blockquote > * + * { margin-top: 0.6em; } .article-prose > blockquote { margin-top: 1.4em; } /* ---------- 表格：白纸卡片；窄屏横向滚动，左右边缘的淡阴影提示还有内容 ---------- */ .article-prose > .table-wrap { margin-block: 1.6em 1.8em; } .article-prose .table-wrap { background: linear-gradient(90deg, var(--sheet) 35%, rgb(255 255 255 / 0)) left / 32px 100% no-repeat local, linear-gradient(270deg, var(--sheet) 35%, rgb(255 255 255 / 0)) right / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgb(var(--ink-rgb) / 0.14), rgb(var(--ink-rgb) / 0)) left / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(var(--ink-rgb) / 0.14), rgb(var(--ink-rgb) / 0)) right / 14px 100% no-repeat scroll, var(--sheet); } .article-prose .table-wrap table { font-size: 15px; line-height: 1.75; } .article-prose .table-wrap thead th { font-size: 13.5px; letter-spacing: 0.04em; white-space: nowrap; } .article-prose .table-wrap :is(td, th) { min-width: 5.2em; } .article-prose .table-wrap tbody th { border-bottom-color: var(--line); white-space: nowrap; } .article-prose .table-wrap.is-wide table { min-width: 620px; } .article-prose .table-form td { height: 3.1em; } @media (hover: hover) and (pointer: fine) { .article-prose .table-wrap tbody tr:hover > * { background-color: rgb(var(--ink-rgb) / 0.025); } } @media (min-width: 1100px) { .article-prose > .table-wrap.is-wide { margin-inline: calc((100% - var(--wide)) / 2); } } /* ---------- 图示和视频：放宽到约 1000px（电脑上还按一屏放得下的高度收窄），图注对齐正文 ---------- */ .article-prose > .fig { --ar: 2; margin-block: 2.4em 2.6em; } @media (min-width: 1024px) { .article-prose > .fig { --fig-w: min(var(--wide), (100vh - 280px) * var(--ar) + 60px); margin-inline: calc((100% - var(--fig-w)) / 2); } } /* 各图的宽高比（宽图 viewBox 宽 760；视频 16:9），没列的按 2 */ #fig-pilot-funnel { --ar: 1.681; } #fig-meeting-steps, #fig-materials { --ar: 1.743; } #fig-kb-permissions { --ar: 2.184; } #fig-report-materials { --ar: 1.959; } #fig-report-data { --ar: 1.759; } #fig-model-retest { --ar: 2.754; } #fig-fade-gaps { --ar: 1.508; } #fig-training-brief { --ar: 1.557; } #vid-review { --ar: 1.778; } .article-prose > .fig .fig-frame { border-color: var(--line); border-radius: 16px; box-shadow: var(--sheet-shadow); } .article-prose > .fig figcaption { max-width: var(--read); margin: 14px auto 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); } .article-prose > .fig figcaption b { display: inline-block; margin-right: 10px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.7; letter-spacing: 0.06em; color: var(--ink-2); vertical-align: 1px; } /* ---------- 检查卡、模板、示例：一张纸片，上面一条标签栏，条目之间细线 ---------- */ .article-box { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); box-shadow: var(--sheet-shadow); } .article-prose > .article-box { margin-block: 1.8em 2em; } .article-box > .box-label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--sheet-hi), rgb(var(--paper-rgb) / 0.9)); font-size: 13.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.06em; color: var(--ink-2); } .article-box > .box-label::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cinnabar); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.12); } .article-box > :not(.box-label) { margin-inline: 22px; } .article-box > .box-label + * { margin-top: 6px; } .article-box > :not(.box-label) + :not(.box-label) { margin-top: 0.7em; } .article-box > :last-child { margin-bottom: 14px; } .article-box > .box-label + p { margin-top: 16px; } .article-box > p:last-child { margin-bottom: 18px; } .article-box > :is(ul, ol) { gap: 0; } .article-box > :is(ul, ol) > li { padding-block: 11px; } .article-box > :is(ul, ol) > li + li { border-top: 1px solid var(--line); } .article-box > ul:not(.checklist) > li::before { top: calc(11px + 0.82em); } .article-box > ol > li::before { top: calc(11px + 0.3em); } .article-box :is(p, li) { font-size: 16px; } /* 勾选清单：方框，可以打印出来逐项勾（放在纸片里，或者直接在正文里） */ .article-prose .checklist { gap: 0; } .article-prose .checklist > li { padding: 11px 0 11px 30px; } .article-prose .checklist > li + li { border-top: 1px solid var(--line); } .article-prose .checklist > li::before { left: 1px; top: calc(11px + 0.4em); width: 15px; height: 15px; border: 1.5px solid rgb(var(--ink-rgb) / 0.55); border-radius: 4px; background: var(--sheet-hi); box-shadow: inset 0 1px 2px rgb(var(--shadow-rgb) / 0.08); } .article-prose > .checklist { border-block: 1px solid var(--line-2); } /* 样张：一页文件。报头朱红、下面一道朱红线，标题居中，报送栏在一道细线下 */ .sample-doc { background: var(--sheet-hi); } .sample-doc > :not(.box-label) { margin-inline: clamp(18px, 5vw, 52px); } .sample-doc p { font-size: 15.5px; line-height: 1.95; } .sample-doc .sample-masthead { margin-top: 30px; padding-bottom: 12px; border-bottom: 2px solid var(--cinnabar); text-align: center; font-size: 15px; letter-spacing: 0.08em; color: var(--accent-text-sm); } .sample-doc .sample-title { margin-top: 22px; text-align: center; font-size: 18px; letter-spacing: var(--track-tight); } .sample-doc .sample-title + p { margin-top: 18px; } .sample-doc .sample-h { margin-top: 1.5em; } .sample-doc .sample-h + p { margin-top: 0.4em; } .sample-doc .sample-foot { margin-top: 1.6em; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 14.5px; color: var(--ink-soft); } .sample-doc > .sample-foot:last-child { margin-bottom: 30px; } /* 说明页（隐私、编辑说明）里的定义列表：左边小标，右边说明，细线分行 */ .article-prose dl { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); border-top: 1px solid var(--line-2); } .article-prose dl > div { display: contents; } .article-prose dt, .article-prose dd { padding-block: 12px; border-bottom: 1px solid var(--line); } .article-prose dt { padding-right: 16px; font-weight: 600; color: var(--ink); } /* ---------- 文末：参考依据、关于本文 ---------- */ .article-prose > .article-refs { margin-top: 3.2em; padding-top: 20px; border-top: 1px solid var(--line-2); } .article-refs h2 { margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.6; letter-spacing: 0.14em; color: var(--muted); } .article-refs h2 + ol { margin-top: 12px; } .article-refs li { font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); } .article-prose .article-refs ol > li::before { top: 0.4em; } .article-refs a { margin-left: 2px; white-space: nowrap; } .article-refs a .arrow { display: inline-block; margin-left: 3px; font-size: 12px; transition: translate 200ms var(--ease); } @media (hover: hover) and (pointer: fine) { .article-refs a:hover .arrow { translate: 2px -2px; } } .article-prose > .article-note { margin-top: 2.8em; } .article-prose > .article-refs + .article-note { margin-top: 1.8em; } .article-note { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 18px; align-items: start; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 0.5); } .article-note-seal { width: 46px; height: 46px; margin-top: 2px; rotate: -6deg; mix-blend-mode: multiply; opacity: 0.92; } .article-note-body { min-width: 0; } .article-note p { font-size: 15px; line-height: 1.85; color: var(--ink-soft); } .article-note .article-note-label { margin-bottom: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); } .article-syndication { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .article-note .article-syndication-label { font-size: 12.5px; color: var(--muted); } .article-syndication ul { display: flex; flex-wrap: wrap; gap: 6px; } .article-prose .article-syndication li { padding: 0; } .article-prose .article-syndication li::before { display: none; } .article-prose .article-syndication a { display: inline-block; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-hi); font-size: 13px; line-height: 1.75; text-decoration: none; } /* ---------- 相关服务：深一层纸色的通栏，卡片 ---------- v0.26 第 5 段之七（10-29）页尾表单拿掉以后，这一条通栏下面直接是页脚：底色从 --paper-tint（就是页脚的底色，两块连成一片）换成别的页隔开一节用的 --band（.sec-tint 同色）； 底边那条线也去掉（页脚自己有上边线，两条挨着像一道粗线）。 */ .article-related { padding-block: clamp(56px, 7vw, 88px); background: var(--band); box-shadow: inset 0 1px 0 var(--line); } .article-related .shell { max-width: calc(1000px + var(--gutter) * 2); } .article-related h2 { font-family: var(--head); font-size: clamp(24px, 1.2vw + 18px, 30px); font-weight: var(--w-title); line-height: 1.3; letter-spacing: var(--track-title); color: var(--ink); } .related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 26px; } .related-list .card p { margin-top: 0; font-size: 14.5px; line-height: 1.88; color: var(--ink-2); text-wrap: pretty; } .related-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 160ms ease-out, color 160ms ease-out; } @media (hover: hover) and (pointer: fine) { .related-list a:hover { color: var(--cinnabar-text); text-decoration-color: currentColor; } } @media (max-width: 639px) { .related-list .card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; } .related-list .card-icon { margin-bottom: 0; } } /* ---------- 手机 ---------- */ @media (max-width: 700px) { /* 署名行有更新日期时，在更新日期之后换行，行尾不留「·」 */ .article-meta .updated + .sep { flex-basis: 100%; height: 0; overflow: hidden; } .article-prose { font-size: 16.5px; line-height: 1.88; } .article-prose > h2 { margin-top: 2.4em; } .article-prose > h3 { font-size: 17.5px; } .article-prose blockquote { padding: 14px 16px; font-size: 15.5px; } .article-prose .table-wrap table { font-size: 14.5px; } .article-prose .table-wrap :is(td, th) { padding: 10px 10px; } .article-prose .table-wrap:not(.is-wide) tbody th { white-space: normal; } .article-box > :not(.box-label) { margin-inline: 16px; } .article-box > .box-label { padding-inline: 16px; } .article-box :is(p, li) { font-size: 15.5px; } .sample-doc p { font-size: 15px; } .article-prose > .fig figcaption { font-size: 13px; } .article-note { grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; padding: 16px; } .article-note-seal { width: 38px; height: 38px; } .article-prose dl { grid-template-columns: 5.2em minmax(0, 1fr); } } @media print { .article-related { display: none; } .article-prose > .fig, .article-prose > .table-wrap.is-wide { margin-inline: 0; } }