/* 纸墨朱覆盖层：最后加载，只改视觉，不改结构与脚本钩子。
   统一用 html[data-theme] body 前缀，确保特异性高于 immersive.css 的历次配色层。
   纸（light，默认）与墨（dark）两套主题共用同一组规则，颜色全部走变量。 */

/* ---------- 1. 变量 ---------- */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --paper: #F2EDE4;
  --ink-c: #1F1C18;
  --zhu: #B0412A;
  --zhu-hover: #8F3320;
  --ochre: #9A7B50;          /* 装饰：线条、色块 */
  --ochre-text: #7A603D;     /* 小字：纸底对比 ≥ 4.5 */
  --ink: #F2EDE4;            /* 页面底色（沿用原变量名） */
  --surface: #F7F3EC;
  --surface-raised: #E9E2D6;
  --text: #1F1C18;
  --muted: #6B6358;
  --gold: #B0412A;
  --gold-bright: #8F3320;
  --signal: #B0412A;
  --signal-bright: #8F3320;
  --on-accent: #F2EDE4;
  --line: rgba(31,28,24,.18);
  --line-soft: rgba(31,28,24,.1);
  --block-bg: #1F1C18;       /* 墨色色块：报告聚焦、页脚 */
  --on-block-accent: #E58A73; /* 两种主题下都为深底的色块里，小字链接 / 标签的朱色（对 #1F1C18、#2A2621 均 ≥ 5.9） */
  --orbit-gold-rgb: 122,98,64;
  --orbit-glint-rgb: 176,65,42;
  --orbit-core-rgb: 233,226,214;
  --orbit-fade-rgb: 242,237,228;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSong", "SimSun", serif;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  scrollbar-color: var(--ochre) var(--ink);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --zhu: #D9694F;
  --zhu-hover: #E58A73;
  --ochre: #B8986A;
  --ochre-text: #C4A678;
  --ink: #1F1C18;
  --surface: #26221D;
  --surface-raised: #2F2A24;
  --text: #F2EDE4;
  --muted: #B5AC9F;
  --gold: #D9694F;
  --gold-bright: #E58A73;
  --signal: #D9694F;
  --signal-bright: #E58A73;
  --on-accent: #1F1C18;
  --line: rgba(242,237,228,.17);
  --line-soft: rgba(242,237,228,.1);
  --block-bg: #2A2621;
  --orbit-gold-rgb: 184,152,106;
  --orbit-glint-rgb: 217,105,79;
  --orbit-core-rgb: 47,42,36;
  --orbit-fade-rgb: 31,28,24;
  scrollbar-color: var(--ochre) var(--ink);
}

/* ---------- 2. 底色、去渐变、去光晕 ---------- */
html[data-theme] body { color: var(--text); background: var(--ink); }
html[data-theme] body::before { opacity: .02; }
html[data-theme] body ::selection { background: var(--zhu); color: var(--on-accent); }
html[data-theme] body .reading-progress span { background: var(--zhu); box-shadow: none; }
html[data-theme] body :is(.hero, .market-section, .section, .word-ribbon) { color: var(--text); background: var(--ink); }
html[data-theme] body :is(.hero, .market-section)::before,
html[data-theme] body :is(.market-workbench, .project-card)::after,
html[data-theme] body :is(.web-case, .template-scene)::before,
html[data-theme] body .orbit-aura { background: none; box-shadow: none; }
html[data-theme] body .market-section::after { content: none; }
html[data-theme] body :is(.market-section, .websites, .template-gallery, .projects, .pathway, .opc-section, .lab)::before { background: var(--line-soft); }
html[data-theme] body .section[data-scene-active] .section-heading h2,
html[data-theme] body .hero h1 { text-shadow: none; }
html[data-theme] body :is(.market-workbench, .image-preview, .project-card, .template-feature, .opc-incubation-base, .section-rail, .site-header, .site-header.scrolled, .site-header nav.primary-navigation, .web-case, .lab-card, .pathway-card) { box-shadow: none; }
html[data-theme] body :is(.project-card, .template-feature, .web-case, .lab-card):hover { box-shadow: none; }
html[data-theme] body ::-webkit-scrollbar-track { background: var(--ink); }
html[data-theme] body ::-webkit-scrollbar-thumb { border-color: var(--ink); background: var(--ochre); }

/* 文字颜色归一：替换 site.css / upgrade.css 中偏绿的灰（两套主题都生效）。 */
html[data-theme] body :is(.site-header nav a, .hero-kicker, .hero-description, .hero-beliefs, .orbit-label, .orbit-ui p, .scroll-cue, .visual-caption, .case-industry, .case-points, .project-body > p, .shipping-node span, .report-heading > p, .report-numbers span, .weight-legend > span, .weight-panel > p, .report-features span, .path-steps button, .path-steps small, .path-panel > p, .lab-card p, .footer-top > p, .footer-bottom, .footer-note, .lab-note, .noscript-note, .dialog-note, .network-explainer, .network-explainer > span, .network-relation-description, .market-note, .method-note, .evidence-kicker, .opc-step p, #filter-count, #dialog-description, #network-description, #network-relations button, #network-relations a, #market-summary, #market-evidence, .muted-line, .market-intro > p, #market-panel > p, .opc-heading > p, .opc-evidence p, .section-intro, .template-story > p, .template-note, .opc-base-intro > p, .opc-base-panels p, .opc-base-heading, .project-card p, .web-case p, .template-feature p) { color: var(--muted); }
html[data-theme] body :is(.case-lead, .path-deliverables, #dialog-points, .section-heading h2, #market-panel h3, #network-title, .hero-network #network-title, .opc-base-intro h3, .opc-base-panels h4, .case-copy h3, .project-body h3, .lab-card h3, .template-story h3) { color: var(--text); }
html[data-theme] body .section-heading h2 .muted-line,
html[data-theme] body .market-intro h2 .muted-line,
html[data-theme] body .opc-heading h2 .muted-line { color: var(--muted); }

/* ---------- 3. 字体：标题宋体、字距归零 ---------- */
html[data-theme] body :is(.hero h1, .section-heading h2, .market-intro h2, .report-heading h2, .opc-heading h2, .template-story h3, .case-copy h3, .lab-card h3, #market-panel h3, .opc-base-intro h3, .dialog-content h2, .report-numbers strong, .footer-top > p, .evidence-value, .regional-name) {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .01em;
}
html[data-theme] body .hero h1 { max-width: none; font-size: clamp(44px, 4.6vw, 72px); line-height: 1.25; }
html[data-theme] body .hero h1 em { color: var(--zhu); }
html[data-theme] body :is(.section-heading h2, .opc-heading h2, .report-heading h2) { font-size: clamp(32px, 4vw, 56px); line-height: 1.3; }
html[data-theme] body .market-intro h2 { max-width: 9em; font-size: clamp(32px, 4vw, 56px); line-height: 1.3; }
html[data-theme] body #market-panel h3 { font-size: clamp(24px, 2.4vw, 32px); }
html[data-theme] body :is(.section-kicker, .hero-position, .market-intro .section-kicker, .section-heading .section-kicker, .section[data-scene-active] .section-heading .section-kicker, .opc-base-intro .section-kicker) { color: var(--ochre-text); letter-spacing: .08em; }

/* ---------- 4. 品牌：顶栏 Logo、GOODCHENG、页脚 ---------- */
html[data-theme] body .site-header,
html[data-theme] body .site-header.scrolled { color: var(--text); background: var(--ink); border-bottom-color: var(--line-soft); backdrop-filter: none; }
html[data-theme] body .site-header.scrolled { border-bottom-color: var(--line); }
html[data-theme] body .site-header .brand { display: flex; align-items: center; gap: 4px; letter-spacing: 0; }
html[data-theme] body .site-header .brand::after { content: none; }
html[data-theme] body .brand-logo { display: block; width: auto; height: 46px; }
html[data-theme="light"] body .brand-logo-ink,
html[data-theme="dark"] body .brand-logo-paper { display: none; }
html[data-theme] body .site-header .brand-en { display: block; margin: 2px 0 0; color: var(--ochre-text); font: 500 9px/1 "Segoe UI", Arial, sans-serif; letter-spacing: .24em; }
html[data-theme] body .motion-led { background: var(--zhu); box-shadow: none; }
html[data-theme] body .theme-switch { background: transparent; border-color: var(--line); }
html[data-theme] body .theme-switch button[aria-pressed="true"] { color: var(--ink); background: var(--text); }
html[data-theme] body .theme-switch button:hover:not([aria-pressed="true"]) { color: var(--zhu); background: transparent; }
html[data-theme] body .motion-toggle { border-color: var(--line); color: var(--text); }

@media (min-width: 901px) {
  html[data-theme] body .site-header nav.primary-navigation { padding: 0; border-color: transparent; border-radius: 0; background: transparent; }
  html[data-theme] body .site-header nav.primary-navigation a { color: var(--muted); background: transparent; border-radius: 0; box-shadow: none; transform: none; }
  html[data-theme] body .site-header nav.primary-navigation a::before { color: var(--ochre-text); }
  html[data-theme] body .site-header nav.primary-navigation a:is(:hover, :focus-visible, .active) { color: var(--text); background: transparent; box-shadow: none; }
  html[data-theme] body .site-header nav.primary-navigation a:is(:hover, :focus-visible, .active)::before { color: var(--zhu); }
  html[data-theme] body .site-header nav.primary-navigation a::after { background: var(--zhu); }
  html[data-theme] body .site-header nav.primary-navigation a.active::before { content: "0" counter(nav-index); position: static; width: auto; height: auto; border-radius: 0; background: none; opacity: 1; }
}
@media (max-width: 900px) {
  html[data-theme] body .brand-logo { height: 40px; }
  html[data-theme] body .site-header nav a.active { color: var(--text); }
}

/* ---------- 5. 通用组件 ---------- */
html[data-theme] body :is(.button:not(.outline), .button.primary) { color: var(--ink); background: var(--text); border-color: var(--text); border-radius: 2px; }
html[data-theme] body :is(.button:not(.outline), .button.primary):is(:hover, :focus-visible) { color: var(--on-accent); background: var(--zhu); border-color: var(--zhu); }
html[data-theme] body .button.outline { color: var(--text); border-color: var(--text); border-radius: 2px; }
html[data-theme] body .button.outline:hover { color: var(--zhu); border-color: var(--zhu); background: transparent; }
html[data-theme] body :is(.text-link, .project-bottom > a, .report-download, .lab-link, #market-action, .opc-evidence a, .opc-base-panels .text-link, .template-cta) { color: var(--text); border-color: var(--line); }
html[data-theme] body :is(.text-link, .project-bottom > a, .lab-link, #market-action, .opc-evidence a):is(:hover, :focus-visible) { color: var(--zhu); }
html[data-theme] body :focus-visible { outline-color: var(--zhu); }

/* 状态章：朱砂实线 = 真实成果；赭石虚线 = 计划。 */
html[data-theme] body .status-pill { color: var(--zhu); border: 1px solid var(--zhu); border-radius: 2px; background: transparent; }
html[data-theme] body .status-pill.planned,
html[data-theme] body #path-status.planned { color: var(--ochre-text); border: 1px dashed var(--ochre); }
html[data-theme] body .media-label { color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: 2px; box-shadow: none; }

/* ---------- 6. 首屏与产品关联图 ---------- */
html[data-theme] body .hero-beliefs > span::before,
html[data-theme] body .hero .scroll-line { background: var(--zhu); }
html[data-theme] body .hero-kicker > span { background: var(--zhu); }
html[data-theme] body .hero-network .orbit-label-top { color: var(--ochre-text); letter-spacing: .2em; }
html[data-theme] body .hero-network #orbit-canvas { opacity: .38; }
html[data-theme] body .hero-network #product-network { filter: none; }
html[data-theme] body #network-links :is(path, line) { stroke: color-mix(in srgb, var(--text) 22%, transparent); }
html[data-theme] body #network-links :is(.is-related, .is-active, .is-selected, .is-highlight) { stroke: var(--zhu); }
html[data-theme] body .hero-network .network-node { color: var(--text); background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 32%, transparent); border-radius: 2px; box-shadow: none; backdrop-filter: none; }
html[data-theme] body .hero-network .network-node .node-mark { color: var(--ochre-text); }
html[data-theme] body .hero-network .network-node .node-planned { color: var(--muted); }
html[data-theme] body .hero-network .network-node:has(.node-planned) { color: var(--muted); border-style: dashed; border-color: var(--ochre); background: var(--ink); }
html[data-theme] body .hero-network .network-node:is(:hover, :focus-visible) { color: var(--zhu); background: var(--surface); border-color: var(--zhu); box-shadow: none; }
html[data-theme] body .hero-network .network-node.is-related { background: var(--surface-raised); }
html[data-theme] body .hero-network .network-node:is(.is-selected, [aria-pressed="true"]),
html[data-theme] body .hero-network .network-node:is(.is-selected, [aria-pressed="true"]):is(:hover, :focus-visible) { color: var(--on-accent); background: var(--zhu); border: 1px solid var(--zhu); box-shadow: none; }
html[data-theme] body .hero-network .network-node:is(.is-selected, [aria-pressed="true"]) :is(.node-name, .node-mark, .node-planned) { color: var(--on-accent); opacity: 1; }
html[data-theme] body .hero-network #network-detail { background: transparent; border-top-color: var(--line); }
html[data-theme] body .orbit-modes { background: transparent; border-color: var(--line); }
html[data-theme] body .orbit-modes button { color: var(--muted); }
html[data-theme] body .orbit-modes button[aria-pressed="true"] { color: var(--ink); background: var(--text); }
html[data-theme] body #network-relations :is(button, a) { border-color: var(--line); background: transparent; }
html[data-theme] body #network-relations :is(button, a):hover { color: var(--zhu); border-color: var(--zhu); }
@media (max-width: 680px) {
  html[data-theme] body .hero-network .orbit-stage { height: 380px; min-height: 380px; }
  html[data-theme] body .hero-network #orbit-canvas { display: none; }
  html[data-theme] body .network-detail { background: var(--surface); border-color: var(--line); }
}

/* ---------- 7. 中文字带 ---------- */
html[data-theme] body .word-ribbon { border-block: 1px solid var(--line); background: var(--ink); }
html[data-theme] body .word-ribbon .ribbon-group span { color: var(--text); font-family: var(--serif); letter-spacing: .12em; }
html[data-theme] body .word-ribbon .ribbon-group b { color: var(--zhu); font-size: .55em; }
html[data-theme] body .word-ribbon > div { animation-duration: 54s; }
html[data-theme] body .word-ribbon > button { color: var(--text); background: var(--ink); border-left: 1px solid var(--line); opacity: 1; }
html[data-theme] body .word-ribbon > button:is(:hover, :focus-visible) { color: var(--zhu); }

/* ---------- 8. 市场分析工作台 ---------- */
html[data-theme] body .market-workbench { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
html[data-theme] body .market-controls-row,
html[data-theme] body .market-tabs button { border-color: var(--line-soft); }
html[data-theme] body .market-tabs button { color: var(--muted); background: transparent; }
html[data-theme] body .market-tabs button small { color: var(--ochre-text); opacity: 1; }
html[data-theme] body .market-tabs button:hover { color: var(--text); background: transparent; box-shadow: none; }
html[data-theme] body .market-tabs button:is([aria-selected="true"], [aria-pressed="true"], .is-active) { color: var(--text); background: var(--ink); box-shadow: inset 0 2px var(--zhu); }
html[data-theme] body #market-autoplay { color: var(--muted); background: transparent; border-color: var(--line-soft); }
html[data-theme] body #market-autoplay span { color: var(--zhu); }
html[data-theme] body #market-autoplay::after { background: var(--zhu); }
html[data-theme] body #market-evidence li { color: var(--text); background: var(--ink); border: 1px solid var(--line-soft); border-radius: 2px; }
html[data-theme] body #market-evidence li:hover { background: var(--ink); border-color: var(--zhu); }
html[data-theme] body #market-evidence li::before { background: var(--zhu); }
html[data-theme] body .method-note { color: var(--muted); }

/* ---------- 9. 独立站案例（含 Xincheng） ---------- */
html[data-theme] body .web-case { background: transparent; border-color: var(--line-soft); }
html[data-theme] body .web-case:hover { border-color: var(--line); }
html[data-theme] body .image-preview { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
html[data-theme] body .preview-affordance { color: var(--text); background: var(--ink); border-color: var(--line); border-radius: 2px; box-shadow: none; }
html[data-theme] body .image-preview:hover .preview-affordance { border-color: var(--zhu); color: var(--zhu); }
html[data-theme] body .visual-caption { letter-spacing: .1em; }
html[data-theme] body .case-points li::before { background: var(--zhu); }

/* ---------- 10. 交互报告模板（预览图保持原样，只换外框与文案区） ---------- */
html[data-theme] body .template-feature { color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
html[data-theme] body .template-feature:is(:hover, :focus-visible) { border-color: var(--text); }
html[data-theme] body .template-story h3 span { color: var(--ochre-text); }
html[data-theme] body .template-features li { border-color: var(--line-soft); }
html[data-theme] body .template-features b { color: var(--zhu); }

/* ---------- 11. 产品作品（含区域看板占位卡） ---------- */
html[data-theme] body .filters button { color: var(--muted); border-color: var(--line); border-radius: 2px; }
html[data-theme] body .filters button[aria-pressed="true"] { color: var(--ink); background: var(--text); border-color: var(--text); }
html[data-theme] body .project-card,
html[data-theme] body .section[data-scene-active] .project-card { color: var(--text); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 3px; }
html[data-theme] body .project-card:hover { border-color: var(--text); }
html[data-theme] body :is(.project-media, .shipping-art) { background: var(--surface-raised); border-color: var(--line-soft); }
html[data-theme] body .project-tag { color: var(--ochre-text); }
html[data-theme] body .round-button { color: var(--text); border-color: var(--line); }
html[data-theme] body .round-button:is(:hover, :focus-visible) { color: var(--on-accent); background: var(--zhu); border-color: var(--zhu); }
html[data-theme] body .shipping-orbit,
html[data-theme] body .shipping-orbit::after { border-color: var(--line); }
html[data-theme] body .shipping-orbit::before { background: var(--line); }
html[data-theme] body .shipping-node { color: var(--text); background: var(--ink); border-color: var(--line); box-shadow: none; }
html[data-theme] body .shipping-core { color: var(--on-accent); background: var(--zhu); border-color: var(--zhu); box-shadow: none; }
html[data-theme] body .shipping-core::before,
html[data-theme] body .shipping-core::after { background: var(--line); }

.regional-art { position: relative; display: flex; align-items: center; justify-content: center; gap: .4em; aspect-ratio: 1236 / 780; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: var(--surface-raised); }
.regional-art::before { content: ""; position: absolute; inset: 18px; border: 1px dashed var(--ochre); pointer-events: none; }
.regional-name { color: var(--text); font-size: clamp(34px, 4vw, 56px); line-height: 1; }
.regional-plus { color: var(--zhu); font-size: clamp(22px, 2.4vw, 32px); }
.project-regional .project-bottom > a { border-bottom: 1px dashed var(--ochre); }

/* ---------- 12. 报告聚焦：全宽墨色色块 ---------- */
html[data-theme] body .report-focus {
  --text: #F2EDE4; --muted: #B5AC9F; --line: rgba(242,237,228,.18); --line-soft: rgba(242,237,228,.1);
  --zhu: #D9694F; --ochre-text: #C4A678; --ink: var(--block-bg);
  --on-accent: #1F1C18; /* 块内朱色为亮朱 #D9694F，按钮 hover 用墨字（纸字仅 2.96） */
  color: var(--text);
  background: var(--block-bg);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--block-bg);
  clip-path: inset(0 -100vmax);
}
html[data-theme] body .report-focus::before { content: none; }
html[data-theme] body .report-focus .report-heading h2 { color: var(--text); }
html[data-theme] body .report-focus .status-pill { color: var(--zhu); border-color: var(--zhu); }
html[data-theme="dark"] body .report-focus .status-pill { color: var(--on-block-accent); border-color: var(--on-block-accent); }
html[data-theme] body .report-focus :is(.button:not(.outline), .button.primary) { color: #1F1C18; background: #F2EDE4; border-color: #F2EDE4; }
html[data-theme] body .report-focus :is(.button:not(.outline), .button.primary):is(:hover, :focus-visible) { color: var(--on-accent); background: var(--zhu); border-color: var(--zhu); }
html[data-theme] body .report-numbers strong { color: var(--text); font-weight: 600; }
html[data-theme] body .weight-panel h3 { color: var(--text); }
html[data-theme] body .weight-track span:nth-child(1), html[data-theme] body .weight-legend > span:nth-child(1) i { background: var(--zhu); }
html[data-theme] body .weight-track span:nth-child(2), html[data-theme] body .weight-legend > span:nth-child(2) i { background: #B8986A; }
html[data-theme] body .weight-track span:nth-child(3), html[data-theme] body .weight-legend > span:nth-child(3) i { background: #6B6358; }
html[data-theme] body .report-features span { border-color: var(--line); border-radius: 2px; }

/* ---------- 13. 外贸环节（已并入 AI 计划） ---------- */
html[data-theme] body .path-steps button { color: var(--muted); background: transparent; border-color: var(--line-soft); }
html[data-theme] body .path-steps button > span { color: var(--ochre-text); }
html[data-theme] body .path-steps button:hover { color: var(--text); background: transparent; }
html[data-theme] body .path-steps button[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: inset 0 2px var(--zhu); }
html[data-theme] body .path-panel { background: var(--surface); border-color: var(--line-soft); }
html[data-theme] body .path-number { color: color-mix(in srgb, var(--text) 5%, transparent); font-family: var(--serif); }
html[data-theme] body .path-deliverables span::before { background: var(--zhu); }

/* ---------- 14. OPC：计划，统一用虚线与赭石，不与成果同权 ---------- */
html[data-theme] body .evidence-value { color: var(--text); font-size: clamp(24px, 2.4vw, 32px); }
html[data-theme] body .opc-evidence { border-color: var(--line-soft); }
html[data-theme] body .opc-evidence a { font-size: 11px; }
html[data-theme] body .opc-step { border-top: 1px dashed var(--ochre); }
html[data-theme] body .opc-step > span { color: var(--ochre-text); }
html[data-theme] body .opc-incubation-base { color: var(--text); background: var(--surface); border: 1px dashed var(--ochre); border-radius: 3px; }
html[data-theme] body .opc-base-intro h3 span { color: var(--muted); }
html[data-theme] body .opc-plan-label { color: var(--ochre-text); border: 1px dashed var(--ochre); border-radius: 2px; }
html[data-theme] body .opc-plan-label i { background: var(--ochre); box-shadow: none; }
html[data-theme] body .opc-base-workbench { color: var(--text); background: var(--ink); border-color: var(--line-soft); border-radius: 2px; }
html[data-theme] body .opc-base-heading span:first-child { color: var(--ochre-text); font: 500 11px/1.5 var(--serif); letter-spacing: .1em; }
html[data-theme] body .opc-base-tabs { border-color: var(--line-soft); }
html[data-theme] body .opc-base-tabs button { color: var(--muted); background: transparent; border-color: transparent; }
html[data-theme] body .opc-base-tabs button span { color: var(--ochre-text); }
html[data-theme] body .opc-base-tabs button[aria-selected="true"] { color: var(--text); background: transparent; border-bottom-color: var(--ochre); }
html[data-theme] body .opc-base-panels article { color: var(--text); background: var(--ink); border-color: var(--line-soft); }
html[data-theme] body .opc-panel-index { color: var(--ochre-text); font-family: var(--serif); }
html[data-theme] body .opc-capabilities span { color: var(--text); background: transparent; border-color: var(--line); border-radius: 2px; }

/* ---------- 15. 游戏实验室：插画保留，整体降一级 ---------- */
html[data-theme] body .lab .section-heading h2 { font-size: clamp(28px, 3.2vw, 44px); }
html[data-theme] body .lab-card { color: var(--text); background: transparent; border-color: var(--line-soft); }
html[data-theme] body .lab-art { border-color: var(--line); border-radius: 2px; }
html[data-theme] body .lab-card:hover .lab-art { border-color: var(--text); }
html[data-theme] body .lab-genre { color: var(--ochre-text); }

/* ---------- 16. 页脚：全宽墨色色块 ---------- */
html[data-theme] body .site-footer {
  --text: #F2EDE4; --muted: #B5AC9F; --line: rgba(242,237,228,.18);
  color: var(--text);
  background: var(--block-bg);
  border-top: 0;
  box-shadow: 0 0 0 100vmax var(--block-bg);
  clip-path: inset(0 -100vmax -100vmax);
}
html[data-theme] body .footer-wordmark { align-items: center; gap: 6px; }
html[data-theme] body .footer-logo { display: block; width: auto; height: clamp(64px, 8vw, 112px); }
html[data-theme] body .footer-wordmark > span { color: var(--muted); font-family: var(--serif); font-size: clamp(26px, 3.4vw, 44px); font-weight: 500; letter-spacing: .02em; }
html[data-theme] body .footer-wordmark svg { stroke: #D9694F; }
html[data-theme] body .footer-bottom > a { color: var(--text); }
html[data-theme] body .footer-bottom > a:is(:hover, :focus-visible) { color: var(--on-block-accent); }

/* ---------- 17. 章节侧栏：桌面保留；窄屏隐藏（顶部已有横向导航，避免遮挡正文） ---------- */
@media (min-width: 1280px) {
  html[data-theme] body .section-rail { color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: 3px; backdrop-filter: none; }
  html[data-theme] body .section-rail a { color: var(--muted); border-radius: 2px; }
  html[data-theme] body .section-rail a:is(:hover, :focus-visible, .is-active) { color: var(--zhu); background: transparent; }
  html[data-theme] body .section-rail a.is-active::before { background: var(--zhu); box-shadow: none; }
  html[data-theme] body .section-rail::after { background: var(--zhu); box-shadow: none; }
  html[data-theme] body #rail-percent { color: var(--ochre-text); }
  html[data-theme] body :is(#rail-prev, #rail-next) { color: var(--text); border-color: var(--line); }
}
@media (max-width: 1279px) {
  html[data-theme] body .section-rail { display: none; }
}

/* ---------- 18. 案例弹窗 ---------- */
html[data-theme] body .project-dialog { color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: 3px; box-shadow: none; }
html[data-theme] body .project-dialog::backdrop { background: rgba(31,28,24,.62); backdrop-filter: none; }
html[data-theme] body .dialog-image-wrap { background: var(--surface-raised); }
html[data-theme] body .dialog-close { color: var(--text); background: var(--ink); border-color: var(--line); }
html[data-theme] body .dialog-close:is(:hover, :focus-visible) { color: var(--on-accent); background: var(--zhu); }
html[data-theme] body #dialog-points li::before { background: var(--zhu); }

/* ---------- 19. 动效：聚光光斑已在第 2 节移除；尊重系统减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .word-ribbon > div { animation: none; }
}

/* 页脚说明中的计划入口：保留静态链接，样式与说明文字一致。 */
html[data-theme] body .footer-note a { color: var(--text); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }
html[data-theme] body .footer-note a:is(:hover, :focus-visible) { color: var(--on-block-accent); }

/* ======================================================================
   第二阶段 · 质感：字距行距、编号、状态章、装裱、留白
   ====================================================================== */
/* 中文标题：标点挤压（palt）+ 均衡换行，宋体略收字距显得更紧致。 */
html[data-theme] body :is(.hero h1, .section-heading h2, .market-intro h2, .report-heading h2, .opc-heading h2, .template-story h3, .case-copy h3, #market-panel h3, .opc-base-intro h3) {
  font-feature-settings: "palt" 1, "kern" 1;
  letter-spacing: -.012em;
  text-wrap: balance;
}
html[data-theme] body :is(.section-intro, .case-copy > p, .project-body > p, .market-intro > p, .opc-heading > p, .template-story > p, .hero-description) { letter-spacing: .02em; line-height: 1.95; text-wrap: pretty; }
html[data-theme] body .section { padding-block: clamp(96px, 11vw, 168px); }
html[data-theme] body .section-heading { margin-bottom: clamp(48px, 5vw, 76px); }
html[data-theme] body :is(.section-heading h2, .opc-heading h2) { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.2; }

/* 小标题：前置一段朱砂短线，取代原来的纯文字标签。 */
html[data-theme] body :is(.section-kicker, .hero-position) { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; }
html[data-theme] body :is(.section-heading, .market-intro, .opc-heading) > .section-kicker::before { content: ""; width: 22px; height: 1px; background: var(--zhu); }

/* 编号：统一宋体等宽数字，作为细节而不是装饰。 */
html[data-theme] body .site-header nav.primary-navigation a::before { font-family: var(--serif); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .06em; }
html[data-theme] body :is(.market-tabs button small, .path-steps button > span, .opc-step > span, .template-features b, .node-mark, .opc-base-tabs button span) { font-family: var(--serif); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .06em; }
html[data-theme] body .report-numbers strong { font-family: var(--serif); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }

/* 状态章：外框 + 内细线的双线印章；计划仍为单线虚框。 */
html[data-theme] body .status-pill:not(.planned) { padding: 5px 10px 4px; font-size: 11px; letter-spacing: .14em; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px color-mix(in srgb, var(--zhu) 55%, transparent); }
html[data-theme] body .report-focus .status-pill:not(.planned) { box-shadow: inset 0 0 0 2px var(--block-bg), inset 0 0 0 3px color-mix(in srgb, var(--zhu) 55%, transparent); }
html[data-theme] body :is(.status-pill.planned, #path-status.planned) { padding: 5px 10px 4px; font-size: 11px; letter-spacing: .14em; }

/* 案例截图装裱：纸色衬边 + 细框，像装在卡纸里的作品照片。 */
html[data-theme] body .web-case .image-preview { padding: 10px; background: var(--surface); }
html[data-theme] body .web-case .image-preview img { border: 1px solid var(--line-soft); }
html[data-theme] body .visual-caption { margin-top: 14px; font-size: 10px; letter-spacing: .16em; }

/* 分隔线：章节顶线改为通栏发丝线。 */
html[data-theme] body :is(.market-section, .websites, .template-gallery, .projects, .pathway, .opc-section, .lab)::before { height: 1px; opacity: .9; }
html[data-theme] body :is(.web-case, .template-features li, .report-numbers) { border-color: var(--line-soft); }

/* ======================================================================
   第二阶段 · 全屏：首屏、独立站案例、报告聚焦做成满屏场景
   ====================================================================== */
html[data-theme] body .hero { min-height: max(100svh, 760px); }
html[data-theme] body .hero h1 { font-size: clamp(48px, 5.4vw, 92px); line-height: 1.16; }
html[data-theme] body .hero-description { font-size: clamp(16px, 1.2vw, 19px); }

@media (min-width: 1101px) {
  html[data-theme] body .web-case { min-height: min(100svh, 1000px); padding-block: clamp(72px, 10vh, 128px); grid-template-columns: minmax(0, 1.6fr) minmax(0, .78fr); gap: clamp(48px, 5vw, 96px); }
  html[data-theme] body .web-case-reverse { grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr); margin-top: 0; }
  html[data-theme] body .case-copy h3 { font-size: clamp(36px, 3.4vw, 54px); line-height: 1.15; }
  html[data-theme] body .case-lead { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.6; }
  html[data-theme] body .report-focus { min-height: 100svh; align-content: center; padding-block: clamp(96px, 14vh, 168px); margin-block: 0; }
  /* 报告标题第二行“找到它的依据。”（7 字）按标题列宽封顶字号，保证一行排下，不留“据。”；不支持容器单位时退回较小的 vw 字号 */
  html[data-theme] body .report-heading { container-type: inline-size; }
  html[data-theme] body .report-heading h2 { font-size: clamp(44px, 4.6vw, 72px); font-size: min(clamp(44px, 5.4vw, 84px), 13.8cqi); line-height: 1.12; }
  html[data-theme] body .report-numbers strong { font-size: clamp(64px, 6.4vw, 108px); line-height: 1; }
}

/* ======================================================================
   第二阶段 · 手机 390：顶栏更薄、留白更紧、案例图出血到屏幕边
   ====================================================================== */
@media (max-width: 900px) {
  html[data-theme] body .site-header { min-height: 100px; transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .3s; }
  html[data-theme] body .site-header .brand,
  html[data-theme] body .site-header .header-controls { min-height: 56px; }
  html[data-theme] body .site-header nav { min-height: 44px; border-top: 1px solid var(--line-soft); }
  html[data-theme] body .brand-logo { height: 36px; }
  html[data-theme] body .site-header.mx-header-hide { transform: translateY(-100%); }
  html[data-theme] body .hero { padding-top: calc(132px + env(safe-area-inset-top, 0px)); }
  html[data-theme] body section[id], html[data-theme] body footer { scroll-margin-top: 112px; }
}
@media (max-width: 680px) {
  html[data-theme] body .section { padding-block: 72px; }
  html[data-theme] body .section-heading { margin-bottom: 36px; }
  html[data-theme] body .hero { min-height: 0; padding-bottom: 56px; }
  html[data-theme] body .hero h1 { font-size: clamp(38px, 11vw, 50px); line-height: 1.2; }
  html[data-theme] body .hero-description { font-size: 15px; line-height: 1.9; }
  html[data-theme] body .hero-description br { display: none; }
  html[data-theme] body :is(.section-heading h2, .opc-heading h2, .market-intro h2, .report-heading h2) { font-size: clamp(29px, 8.4vw, 38px); line-height: 1.25; }
  html[data-theme] body .section-intro { font-size: 14px; }
  /* 案例截图出血到屏幕两侧，小屏也有满屏展示感。 */
  html[data-theme] body .web-case .case-visual { margin-inline: calc(var(--gutter) * -1); }
  html[data-theme] body .web-case .image-preview { padding: 0; border-inline: 0; border-radius: 0; }
  html[data-theme] body .web-case .image-preview img { border: 0; }
  html[data-theme] body .visual-caption { padding-inline: var(--gutter); }
  html[data-theme] body .case-copy h3 { font-size: 30px; }
  html[data-theme] body .case-lead { font-family: var(--serif); font-size: 19px; }
  html[data-theme] body .report-focus { padding-block: 64px; }
  html[data-theme] body .report-numbers strong { font-size: clamp(40px, 12vw, 52px); }
  html[data-theme] body .template-story h3 { font-size: 24px; }
  html[data-theme] body .template-story h3 span { font-size: 19px; }
  html[data-theme] body .project-body h3 { font-size: 22px; }
  html[data-theme] body .regional-name { font-size: 34px; }
  html[data-theme] body .footer-logo { height: 60px; }
  html[data-theme] body .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
  html[data-theme] body .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  html[data-theme] body .footer-wordmark svg { margin-left: 14px; }
  html[data-theme] body .status-pill:not(.planned) { letter-spacing: .1em; }
}