/*
Theme Name:   Beyiji Child
Theme URI:    https://beyiji.com/
Description:  beyiji.com 站点自定义子主题，基于 Astra。所有自定义样式写在本文件中，父主题升级不会覆盖。
Author:       Beyiji
Author URI:   https://beyiji.com/
Template:     astra
Version:      1.6.2
License:      GNU General Public License v2 or later
Text Domain:  beyiji-child
*/

/* ==========================================================================
   目 录
   --------------------------------------------------------------------------
   1. 设计令牌（Design Tokens）
   2. Astra 变量重映射
   3. 全局基础
   4. 排版系统
   5. 链接 · 按钮
   6. 表单控件
   7. 内容块（引用 / 表格 / 图片 / 列表）
   8. 装饰元素 · 通用组件
   9. 无障碍 · 动效偏好
  10. 页头（Header）
  11. 页脚（Footer）+ 回到顶部按钮
  12. 移动端菜单与页头降级
  13. 首页各段落
  14. 长文档版式（栏目页 / 法务页 / 新手路径）
  15. 本刊归档（/notes/）
  16. 文章页（/journal/{slug}/）
  17. 404 与搜索
   ========================================================================== */


/* ==========================================================================
   1. 设计令牌
   品牌：beyiji（别吉）—— 写给身体的温柔情书
   基调：暖、柔、克制。全站不使用纯黑(#000)与纯白(#fff)。
   ========================================================================== */

:root {
	/* --- 背景层 ------------------------------------------------------- */
	--c-bg:          #F7F2EE;  /* 页面底色：暖米白，替代纯白 */
	--c-surface:     #FDFAF7;  /* 卡片/浮层：比底色略亮，仍非纯白 */
	--c-surface-alt: #F1E9E3;  /* 次一级色块：浅暖灰粉 */
	--c-deep:        #3A2E28;  /* 深色区块：页脚、大色块，替代纯黑 */

	/* --- 文字层 ------------------------------------------------------- */
	--c-ink:       #2A211D;  /* 标题/主文字：暖调近黑 */
	--c-ink-body:  #4A3D36;  /* 正文：略浅，长文更耐读 */
	--c-ink-muted: #8A7A70;  /* 辅助文字：说明、日期、meta */
	--c-ink-on-deep: #EFE6DF; /* 深色区块上的文字 */

	/* --- 线条 --------------------------------------------------------- */
	--c-line:      #E5DAD2;  /* 分隔线 / 边框（暖灰） */
	--c-line-soft: #EFE7E0;  /* 更轻的分隔线 */

	/* --- 强调色 ------------------------------------------------------- */
	--c-accent:      #B8746A;  /* 玫瑰：链接、强调、主按钮 */
	--c-accent-deep: #9C5C53;  /* 悬停 / 加深态 */
	--c-accent-soft: #E9CFC9;  /* 浅底、标签背景 */
	--c-gold:        #C9A86A;  /* 金箔：装饰线、分隔符、细节描边 */

	/* --- 字体族 ------------------------------------------------------- */
	/* 标题：Cormorant Garamond（拉丁，自托管）→ 中文衬线回退 */
	--font-heading: 'Cormorant Garamond', 'Songti SC', 'Source Han Serif SC',
	                'Noto Serif CJK SC', 'Noto Serif SC', STSong, SimSun, serif;
	/* 正文：Inter（拉丁，自托管）→ 中文黑体回退 */
	--font-body:    'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
	                'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei',
	                system-ui, sans-serif;

	/* --- 字号（流式缩放，clamp 无需媒体查询） -------------------------- */
	--fs-display: clamp(3.25rem, 9vw, 7rem);      /* Hero 主标题 */
	--fs-h1:      clamp(2.35rem, 5.2vw, 3.9rem);
	--fs-h2:      clamp(1.9rem,  3.6vw, 2.7rem);
	--fs-h3:      clamp(1.4rem,  2.4vw, 1.8rem);
	--fs-h4:      clamp(1.15rem, 1.6vw, 1.35rem);
	--fs-body:    1.0625rem;   /* 17px —— 中文正文的可读起点 */
	--fs-small:   0.9375rem;   /* 15px */
	--fs-meta:    0.8125rem;   /* 13px */
	--fs-label:   0.75rem;     /* 12px —— 全大写小标签 */

	/* --- 行高 / 字距 -------------------------------------------------- */
	--lh-tight:  1.15;
	--lh-snug:   1.35;
	--lh-body:   1.85;   /* 中文长文的最佳舒适区 */
	--ls-label:  0.22em; /* 全大写小标签的呼吸感 */
	--ls-cjk:    0.02em; /* 中文轻微字距，避免拥挤 */

	/* --- 间距节奏（8px 基准） ----------------------------------------- */
	--s-1:  0.25rem;
	--s-2:  0.5rem;
	--s-3:  0.75rem;
	--s-4:  1rem;
	--s-5:  1.5rem;
	--s-6:  2rem;
	--s-7:  2.5rem;
	--s-8:  3rem;
	--s-9:  4rem;
	--s-10: 5rem;
	--s-11: 6.5rem;
	--s-12: 8rem;

	/* --- 圆角 / 阴影 / 过渡 ------------------------------------------- */
	--r-0: 2px;    /* 编辑风格的克制圆角 */
	--r-1: 4px;
	--r-pill: 999px;

	--shadow-soft:  0 18px 40px -24px rgba(58, 46, 40, 0.28);
	--shadow-lift:  0 26px 60px -30px rgba(58, 46, 40, 0.34);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:  0.42s;

	/* --- 版心与装订线 -------------------------------------------------- */
	/* 全站只有一条竖线。--w-content 是**内容列宽**，页头、页脚、首页各段、
	   归档、文章页全部对齐到它 —— 任何一段如果自己换一个宽度，读者就会
	   看到内容边缘比页头多出或少掉几十像素。
	   --gutter 是页面两侧的装订线。Astra 的 .ast-container 默认会让它在
	   窄屏自适应缩小（实测 390px 下只有 9.18px），而页脚用的是固定 20px，
	   两者会差 11px —— 所以这里把它钉死，页头、页脚、正文共用同一个值，
	   不去继承 Astra 的响应式值。 */
	--gutter:    20px;
	--w-content: 1200px;
	--w-narrow:  720px;
	--w-wide:    1560px;
}


/* ==========================================================================
   2. Astra 变量重映射
   --------------------------------------------------------------------------
   Astra 的主题色、背景、正文色全部通过 --ast-global-color-0..8 输出，
   组件（按钮、边框、页脚、移动菜单）都引用这些变量。
   在这里整体替换，等于一次性把全站从「冷蓝默认皮肤」换成「暖调品牌皮肤」。
   本文件在 Astra 内联样式之后加载，同特异度下后者胜出。
   ========================================================================== */

:root {
	--ast-global-color-0: #B8746A;  /* 强调色：链接 / 按钮（原 #046bd2 蓝） */
	--ast-global-color-1: #9C5C53;  /* 强调悬停（原 #045cb4） */
	--ast-global-color-2: #2A211D;  /* 标题色（原 #1e293b） */
	--ast-global-color-3: #4A3D36;  /* 正文色（原 #334155） */
	--ast-global-color-4: #F7F2EE;  /* 主背景（原 #FFFFFF 纯白） */
	--ast-global-color-5: #F1E9E3;  /* 次级背景（原 #F0F5FA） */
	--ast-global-color-6: #3A2E28;  /* 反色区块（原 #111111） */
	--ast-global-color-7: #E5DAD2;  /* 轻背景 / 边框（原 #D1D5DB） */
	--ast-global-color-8: #2A211D;  /* 深色（原 #111111） */

	/* 版心：Astra 默认 1200px，放宽一点，留给大图与留白 */
	--ast-normal-container-width: 1240px;
	/* ⚠️ 这个变量 Astra 4.14.0 **不消费**。它把窄容器写死在内联样式里：
	     @media (min-width:922px) {
	         .ast-narrow-container .site-content > .ast-container { max-width: 750px }
	     }
	   特异性 (0,3,0)，所以第 3 节那条 .ast-container 的 (0,2,0) 压不过它 ——
	   实测把这里改成 760 之后容器仍是 750。文章页真正的行宽控制在第 16.1 节。
	   这里保留声明，只是为了将来 Astra 改用变量时能自动生效。 */
	--ast-narrow-container-width: 760px;

	/* 阴影与代码块也去掉冷调 */
	--ast-code-block-background: #F1E9E3;
	--ast-shadow-style-guide: 0px 0px 4px 0 rgba(58, 46, 40, 0.18);
	--ast-search-border-color: var(--c-line);

	/* —— 接管「顶级区块组的默认内边距」（完整说明见第 13.0 节）——————
	   Astra 的内联动态样式里有一条特异性 (0,2,0) 的规则：
	     .entry-content > .wp-block-group,
	     .entry-content > .wp-block-cover, … {
	         padding: var(--wp--custom--ast-default-block-*-padding);
	     }
	   取值 3em / 1.5em。段落自身的 padding 全是 (0,1,0)，**永远压不过它** ——
	   实测首页五段与 /journal/ 的 .b-doc 算出来都是 51px / 25.5px
	   （3em × 17px、1.5em × 17px），本文件里写的 --s-12 / --gutter 一条都没生效。

	   与其在更低特异度上反复争夺，不如**改它的取值来源**：让「顶级区块组」
	   的默认内边距就等于本设计体系的段落节奏。这样 Astra 那条规则反过来
	   成了我们的实现，而且以后新增的段落自动继承同一套节奏，不必再补规则。

	   窄屏把纵向留白收到 --s-8 / --s-10：128px 的上边距在手机上太奢侈。 */
	--wp--custom--ast-default-block-top-padding: var(--s-12);
	--wp--custom--ast-default-block-bottom-padding: var(--s-12);
	--wp--custom--ast-default-block-left-padding: var(--gutter);
	--wp--custom--ast-default-block-right-padding: var(--gutter);
}

@media (max-width: 640px) {
	:root {
		--wp--custom--ast-default-block-top-padding: var(--s-8);
		--wp--custom--ast-default-block-bottom-padding: var(--s-10);
	}
}


/* ==========================================================================
   3. 全局基础
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* —— 把根字号钉在 16px：关掉 Astra 的「响应式字号」——
   Astra 会在 ≤921px / ≤544px 输出 html{font-size:91.2%}。
   根字号一变，本主题所有 rem 令牌跟着缩水，而它们是为 16px 标定的
   （见第 1 节 --fs-* 后面标注的 px 注释）：
     实测 921px 视口下  --fs-label 12px → 10.9px，--fs-body 17px → 15.5px，
     页头导航、页脚版权与语言切换全部降到 10.9px —— 触发线以下的文字不该比大屏更小。
   标题不需要 Astra 帮忙缩放：本主题的 --fs-display/--fs-h1..h4 已经是 clamp()。
   本文件加载在 astra-theme-css-inline-css 之后，同特异度（html）后者胜。 */
@media (max-width: 921px) {
	html { font-size: 100%; }
}

/* 覆盖 Astra 唯一一处硬编码字体栈（body,button,input,… 同特异度，本文件在后） */
body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink-body);
	letter-spacing: var(--ls-cjk);
}

body {
	background-color: var(--c-bg);
	/* 极淡的暖色氛围：顶部一层几乎看不见的玫瑰光晕 */
	background-image: radial-gradient(
		120% 60% at 50% 0%,
		rgba(184, 116, 106, 0.05) 0%,
		rgba(184, 116, 106, 0) 60%
	);
	background-repeat: no-repeat;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* —— 把页面底色从 Astra 手里收回来（本文件里最后一个「看不见的接缝」）——
   Astra 的内联动态样式里有一条
     .ast-separate-container { background-color: var(--ast-global-color-5); }
   特异性 (0,1,0)。上面那条 `body` 只有 (0,0,1)，**压不过它** ——
   于是整页底色实际是第 2 节映射过去的次级背景色 #F1E9E3(--c-surface-alt)，
   而 .b-arch / .b-doc 各自画的又是 --c-bg #F7F2EE。

   症状：1440px 下正文列（容器宽 1200，居中）是 #F7F2EE，
   容器两侧各 120px 的余白是 #F1E9E3 —— 读者看到「一块浅色板浮在深一档的底上」，
   左右各露一条竖边。文章页与归档页都有。

   body.ast-separate-container 是 (0,1,1)，比它高一档，
   **不依赖两者在 head 中的先后顺序**（虽然实测本文件也确实在后）。
   光晕 background-image 继承自上面那条 body 规则，不受影响。 */
body.ast-separate-container {
	background-color: var(--c-bg);
}

::selection {
	background: var(--c-accent-soft);
	color: var(--c-ink);
}

/* 让 Astra 的通用容器跟随我们的版心与装订线变量。
   外框 = 内容列宽 + 两侧装订线：Astra 是「外层留白 + 内层居中」的两层模型
   （见页脚那一段的说明），扣掉留白之后内层才等于 --w-content，
   页头内容才与页脚、正文落在同一条竖线上。 */
.ast-container,
.site-content .ast-container {
	max-width: calc(var(--w-content) + var(--gutter) * 2);
}

/* 装订线：这里**必须**写成带 ID 的选择器。
   Astra 的 inline 动态样式里有一条
     .ast-separate-container #content .ast-container { padding-left: .54em }
   特异性是 (1,2,0) —— 带一个 ID，所以任何纯类选择器都压不过它。
   它只在窄屏生效，会把装订线压到约 9px（0.54em × 17px 字号），
   而页脚用的是固定 20px，两者差 11px：窄屏下正文比页脚宽出一截。
   要压过带 ID 的规则只能也带 ID，于是：
     · #content.site-content .ast-container      —— 同特异性，靠加载顺序取胜
       （实测子主题样式表在 astra-theme-css-inline-css 之后：head 内位置
        84146 vs 3440），
     · body.ast-separate-container #content …    —— 再高一档，防止以后
       插件或主题改动加载顺序时这条静默失效。
   值取 --gutter 而不是写死 20px：与页头、页脚、正文共用同一个来源。 */
#content.site-content .ast-container,
body.ast-separate-container #content .ast-container {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* 全宽段落：把 .ast-container 的装订线用等量负外边距抵消掉，再由段落自己的
   内边距（第 2 节接管的那四个 Astra 变量）把正文推回同一列。

   ── 为什么必须抵消：段落虽然带 alignfull，但它在 .ast-container **里面**，
      容器那圈 --gutter 还是留着的。390px 下实测段落只有 20..370，
      比页头窄了两格；深色的 .b-signoff / .u-hero 于是被一圈米白描边框住，
      看起来像渲染错误而不像设计。
   ── 抵消之后（段落自带 padding: --s-12 --gutter）：
        1440px → 段落 100..1340，正文 120..1320  ← 与页头、页脚同一列
         390px → 段落   0..390 ，正文  20..370   ← 同上
   ── 为什么不写 margin-inline: calc(50% - 50vw)：
      100vw 含滚动条宽度（Windows Chrome 约 15px），桌面端会凭空多出
      横向溢出，把现在干净的 overflow-x: 0 弄坏。负边距只读 --gutter，
      与容器永远同源同值 —— 沿用页脚那次的老教训：别手抄第二份版心。 */
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-columns.alignfull {
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
}


/* ==========================================================================
   4. 排版系统
   --------------------------------------------------------------------------
   关于斜体（重要设计决策）：
   Cormorant Garamond 只提供拉丁字形，中文由系统衬线字体接管，
   而中文衬线字体没有真正的斜体 —— 浏览器会「伪斜」拉伸中文，非常难看。
   因此：
     · h1–h6 默认正体，font-synthesis: none 彻底禁掉浏览器伪斜体 / 伪粗体；
     · 需要斜体时，只加在拉丁文本上（.is-latin / .u-italic / :lang(en)）。
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-single-post .entry-title,
.site-title,
.widget-title {
	font-family: var(--font-heading);
	font-style: normal;
	font-weight: 500;
	color: var(--c-ink);
	line-height: var(--lh-tight);
	letter-spacing: 0.01em;
	/* 禁止浏览器合成斜体与粗体，保证 Cormorant 只以真实字重呈现 */
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
}

/* 斜体只允许出现在拉丁字形上，但「带斜体的元素」不都是标题 ——
   序号、副题、落款这些 <p> / <span> 同样会被要求斜体。中文一旦落进
   这些元素就会被浏览器伪斜，所以把 font-synthesis: none 补到它们身上。
   与标题那条同理：只关合成，不影响真实字重的选取。 */
.b-signoff__tagline,
.b-doc__subtitle,
.b-doc__toc li::before,
.b-doc h2 .b-num,
.b-entry__index,
.b-card__num,
.b-pathcard__index,
.b-article__signoff-line,
.b-nf__eyebrow {
	font-synthesis: none;
}

h1, .entry-title { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5 { font-size: var(--fs-body); font-weight: 500; }
h6 { font-size: var(--fs-small); font-weight: 500; }

/* 标题里的拉丁部分才用真斜体 —— 品牌气质的主要来源 */
.is-latin,
.u-italic,
h1:lang(en), h2:lang(en), h3:lang(en) {
	font-style: italic;
	font-weight: 400;
}

p,
li,
td,
th,
.ast-separate-container .ast-article-post .entry-content {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink-body);
}

p { margin: 0 0 var(--s-5); }

/* 首段轻微放大 —— 编辑杂志的经典手法 */
.entry-content > p:first-of-type:not(:last-child) {
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--c-ink);
}

strong, b { font-weight: 600; color: var(--c-ink); }
em, i    { font-style: italic; }

/* 全大写小标签：眉标 / 章节序号 / 导航 */
.u-label,
.ast-header-navigation .menu-item > .menu-link,
.u-eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}

/* 章节眉标：一条金色短线 + 大写拉丁小字 */
.u-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--c-gold);
	font-style: normal;
}
.u-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* 落地大标题 */
.u-display {
	font-size: var(--fs-display);
	line-height: 1.02;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0.005em;
}

/* 正文/meta 辅助文字 */
.u-meta,
.entry-meta,
.posted-on,
.ast-blog-single-meta {
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	color: var(--c-ink-muted);
	text-transform: uppercase;
}

/* 正文链接：细下划线 + 悬停变色，不用 Astra 的粗蓝线 */
.entry-content a:not(.wp-block-button__link):not(.ast-button) {
	color: var(--c-accent);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease);
}
.entry-content a:not(.wp-block-button__link):not(.ast-button):hover {
	color: var(--c-accent-deep);
	background-size: 0% 1px;
	background-position: 100% 100%;
}


/* ==========================================================================
   5. 链接 · 按钮
   ========================================================================== */

a { color: var(--c-accent); transition: color var(--dur) var(--ease); }
a:hover, a:focus { color: var(--c-accent-deep); }

/* 统一按钮形态：克制圆角、全大写拉丁、字距拉开 —— 对标 atelier 质感 */
.ast-button,
.ast-custom-button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: calc(var(--s-3) + 2px) var(--s-6);
	border-radius: var(--r-0);
	border: 1px solid var(--c-accent);
	background-color: var(--c-accent);
	color: #FBF6F2;                      /* 暖白，非纯白 */
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            transform var(--dur) var(--ease);
}
.ast-button:hover,
.ast-custom-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background-color: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
	color: #FBF6F2;
	transform: translateY(-1px);
}

/* 幽灵按钮：描边式，用于次级动作 */
.u-btn-ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--c-accent);
	color: var(--c-accent);
}
.u-btn-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--c-accent);
	color: #FBF6F2;
	border-color: var(--c-accent);
}

/* 深色背景上的按钮 */
.u-on-deep .ast-button,
.u-on-deep .wp-block-button__link {
	background-color: transparent;
	border-color: var(--c-gold);
	color: var(--c-gold);
}
.u-on-deep .ast-button:hover,
.u-on-deep .wp-block-button__link:hover {
	background-color: var(--c-gold);
	color: var(--c-deep);
	border-color: var(--c-gold);
}


/* ==========================================================================
   6. 表单控件
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], textarea, select {
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-0);
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: var(--c-ink);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--c-ink-muted); opacity: 1; }
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(184, 116, 106, 0.16);
}
label { font-size: var(--fs-meta); letter-spacing: 0.06em; color: var(--c-ink-muted); }


/* ==========================================================================
   7. 内容块
   ========================================================================== */

/* 引用：面料手册、品牌宣言常用 */
blockquote,
.wp-block-quote {
	position: relative;
	margin: var(--s-8) 0;
	padding: var(--s-3) 0 var(--s-3) var(--s-7);
	border-left: 1px solid var(--c-gold);
	background: transparent;
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.25rem, 2.1vw, 1.6rem);
	line-height: 1.6;
	color: var(--c-ink);
}
blockquote p, .wp-block-quote p { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
blockquote cite, .wp-block-quote cite {
	display: block;
	margin-top: var(--s-4);
	font-family: var(--font-body);
	font-style: normal;
	font-size: var(--fs-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-ink-muted);
}

/* 表格：面料对照表 / 尺码表 */
table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--s-7) 0;
	font-size: var(--fs-small);
	background: var(--c-surface);
}
th, td {
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--c-line-soft);
	text-align: left;
	vertical-align: top;
}
thead th {
	border-bottom: 1px solid var(--c-line);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
tbody tr:hover { background: var(--c-surface-alt); }

/* 图片：极淡暖调描边，避免纯白图片割裂底色 */
img { max-width: 100%; height: auto; }
.entry-content img,
.wp-block-image img {
	border-radius: var(--r-0);
}
.wp-block-image figcaption,
figcaption {
	margin-top: var(--s-3);
	font-size: var(--fs-meta);
	line-height: 1.6;
	color: var(--c-ink-muted);
	text-align: center;
}

/* 列表 */
.entry-content ul, .entry-content ol { padding-left: var(--s-6); }
.entry-content li { margin-bottom: var(--s-2); }
.entry-content ul li::marker { color: var(--c-gold); }
.entry-content ol li::marker { color: var(--c-accent); font-family: var(--font-heading); }

/* 分隔线 */
hr, .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--c-line);
	margin: var(--s-9) 0;
}
.wp-block-separator.is-style-dots::before { color: var(--c-gold); }


/* ==========================================================================
   8. 装饰元素 · 通用组件
   ========================================================================== */

/* 品牌装饰符 ✳︎ —— 用于导航、页脚、章节之间 */
.u-ornament {
	display: inline-block;
	color: var(--c-gold);
	font-size: 0.875em;
	line-height: 1;
	transform: translateY(-0.05em);
	transition: transform 0.9s var(--ease);
}
.u-ornament:hover { transform: translateY(-0.05em) rotate(90deg); }

/* 章节之间居中的装饰分隔 */
.u-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
	margin: var(--s-9) auto;
	max-width: 320px;
	color: var(--c-gold);
}
.u-divider::before,
.u-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-line);
}

/* 深色区块（页脚、宣言区） */
.u-on-deep {
	background-color: var(--c-deep);
	color: var(--c-ink-on-deep);
}
.u-on-deep h1, .u-on-deep h2, .u-on-deep h3, .u-on-deep h4 {
	color: var(--c-ink-on-deep);
}
.u-on-deep p, .u-on-deep li { color: rgba(239, 230, 223, 0.82); }
.u-on-deep a { color: var(--c-gold); }
.u-on-deep a:hover { color: #E2C48C; }

/* 数字/序号（章节编号 01 / 02 / 03） */
.u-index {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-style: italic;
	color: var(--c-gold);
	line-height: 1;
}

/* 卡片：Journal 列表、面料条目 */
.u-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-0);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}
.u-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
	border-color: var(--c-line);
}

/* 图片的轻微暖调处理，让不同来源的照片统一在品牌色温里 */
.u-warm-media img {
	filter: saturate(0.94) contrast(0.98) sepia(0.06);
	transition: filter var(--dur) var(--ease), transform 1.2s var(--ease);
}
.u-warm-media:hover img { filter: saturate(1) contrast(1) sepia(0); transform: scale(1.03); }

/* 全屏 Hero 容器（结构与 JS 在后续步骤接入） */
.u-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	overflow: hidden;
	background-color: var(--c-deep);
}
.u-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* 封面图与视频叠放在同一个绝对定位容器里。
   ── 为什么不用 <video poster>：
      poster 属性不支持 <picture> 的格式回退（WebP → JPEG）与响应式 srcset，
      而封面图是移动端的 LCP 元素，这两件事都要。
   ── 为什么视频从 opacity:0 开始：
      视频加载完成前先让封面图露出来，等能播了再淡入，
      避免出现「黑屏一闪」。JS 加上 .is-ready 才显示。 */
.u-hero__media > picture,
.u-hero__media > img,
.u-hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.u-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 封面图比视频略暖一点，两者切换时色温不跳 */
	filter: saturate(0.96) contrast(1.02);
}
.u-hero__video {
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s var(--ease);
	/* 让视频不受「暖调滤镜」影响，交给封面图承担统一的色温 */
	pointer-events: none;
}
.u-hero__video.is-ready { opacity: 1; }

/* 移动端 / 触屏：完全不加载视频，只留封面图（省 300KB+ 与一次媒体解码） */
@media (max-width: 900px), (hover: none) {
	.u-hero__video { display: none !important; }
}
.u-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(42, 33, 29, 0.42) 0%,
		rgba(42, 33, 29, 0.22) 45%,
		rgba(42, 33, 29, 0.58) 100%
	);
}
.u-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	padding: var(--s-8) var(--s-5);
	text-align: center;
	color: #FBF6F2;
}
.u-hero__inner h1,
.u-hero__inner h2,
.u-hero__inner p { color: #FBF6F2; }
.u-hero__inner .u-eyebrow { color: var(--c-gold); }

/* 向下滚动的提示箭头 */
.u-scroll-cue {
	display: inline-block;
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, rgba(251, 246, 242, 0.7), rgba(251, 246, 242, 0));
	animation: beyiji-cue 2.6s var(--ease) infinite;
}
@keyframes beyiji-cue {
	0%   { transform: scaleY(0.2); transform-origin: top; opacity: 0; }
	40%  { opacity: 1; }
	100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* 通用「渐入」类 —— 供后续步骤的滚动观察器使用 */
.u-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
	will-change: opacity, transform;
}
.u-reveal.is-visible { opacity: 1; transform: none; }


/* ==========================================================================
   9. 无障碍 · 动效偏好
   ========================================================================== */

/* 键盘焦点必须清晰可见 */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: var(--r-0);
}
/* 鼠标点击不显示焦点环 */
:focus:not(:focus-visible) { outline: none; }

/* 跳转到主内容（Astra 自带，仅调整配色） */
.ast-skip-link, .screen-reader-text:focus {
	background-color: var(--c-deep);
	color: var(--c-gold);
	border-radius: var(--r-0);
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.u-reveal { opacity: 1; transform: none; }
}

/* 打印：去掉装饰与深色底 */
@media print {
	.u-hero, .u-ornament, .u-divider, .ast-header-break-point { display: none !important; }
	body { background: #fff; color: #000; }
}


/* ==========================================================================
   10. 页头（Header）
   ========================================================================== */

/* --- 10.1 粘性页头 ---------------------------------------------------
   Astra 的 Sticky Header 是 Pro 功能（customizer 里整个 section 包在
   ASTRA_EXT_VER 判断内），免费版用纯 CSS 的 position: sticky 实现，
   效果一致、零依赖，且能自己控制毛玻璃。

   注意：Astra 给 body 设了 overflow-x: hidden。它会把 body 变成滚动容器，
   使内部元素的 sticky 失效（各浏览器行为不一致）。换成 overflow-x: clip ——
   同样防止横向溢出，但不创建滚动容器。 */
body {
	overflow-x: clip;
}

.site-header#masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(247, 242, 238, 0.86);
	-webkit-backdrop-filter: saturate(1.5) blur(14px);
	backdrop-filter: saturate(1.5) blur(14px);
	box-shadow: 0 1px 0 rgba(42, 33, 29, 0.06);
}

/* 登录时让开 WordPress 管理工具栏 */
body.admin-bar .site-header#masthead { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header#masthead { top: 46px; }
}

/* --- 10.2 站点标识 --------------------------------------------------- */

.site-branding .site-title,
.site-title a,
.site-title a:visited {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 2.4vw, 2.2rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--c-ink);
	text-decoration: none;
}
.site-title a:hover,
.site-title a:focus { color: var(--c-accent); }

/* 站名右侧的金箔装饰符。
   用 CSS 伪元素生成，不写进 HTML —— 避免它被当作标题文字进搜索结果。 */
.site-title::after {
	content: "✳︎";
	display: inline-block;
	margin-left: 0.28em;
	color: var(--c-gold);
	font-size: 0.42em;
	line-height: 1;
	vertical-align: super;
	transition: transform 1s var(--ease);
}
.site-branding:hover .site-title::after { transform: rotate(90deg); }

/* 副标题（写给身体的温柔情书） */
.site-description {
	margin-top: 0.35em;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.14em;
	color: var(--c-ink-muted);
}
.ast-logo-title-inline .site-description { margin-top: 0.15em; }

/* --- 10.3 主导航 -----------------------------------------------------
   五个栏目名统一转成大写并拉开字距，是「安静奢华」最直接的表达。
   （全小写规则只约束品牌名 beyiji，不约束栏目名。） */
.main-header-menu > .menu-item > .menu-link,
.ast-header-navigation .menu-link {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-ink-body);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-thickness: 1px;
}

/* 下拉子菜单 */
.main-header-menu .sub-menu {
	background-color: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	box-shadow: var(--shadow-soft);
}
.main-header-menu .sub-menu .menu-link {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--c-ink-body);
}

/* --- 10.4 语言切换器（由 functions.php 注入导航） ---------------------- */

.beyiji-lang-wrap > .beyiji-lang {
	display: inline-flex;
	align-items: center;
	padding-left: var(--s-4);
}
.beyiji-lang__link {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--c-ink-muted);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.beyiji-lang__link:hover { color: var(--c-accent); }
.beyiji-lang__link.is-current { color: var(--c-ink); }
/* 非首个语言前加一条极细的斜杠分隔 */
.beyiji-lang__link + .beyiji-lang__link::before {
	content: "/";
	padding: 0 0.45em;
	color: var(--c-line);
	font-weight: 400;
}

/* --- 10.5 Header CTA（持续下划线的文字链） ---------------------------- */

.beyiji-cta-wrap > .beyiji-header-cta {
	display: inline-block;
	margin-left: var(--s-4);
	padding-bottom: 0.25em;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--c-accent);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.beyiji-cta-wrap > .beyiji-header-cta:hover,
.beyiji-cta-wrap > .beyiji-header-cta:focus {
	color: var(--c-accent-deep);
	border-bottom-color: var(--c-accent-deep);
}

/* 窄屏下 Header CTA 收进抽屉，不再挤占导航行 */
@media (max-width: 921px) {
	.beyiji-cta-wrap > .beyiji-header-cta { margin-left: 0; }
}


/* ==========================================================================
   11. 页脚（Footer）
   --------------------------------------------------------------------------
   结构（两者都在 <footer id="colophon"> 内）：
     .beyiji-footer > .beyiji-footer__inner   四栏主体，本主题输出
     .site-below-footer-wrap                  版权条，Astra 的 copyright 组件

   —— 为什么选择器要写到 [data-section="…"] 这么长 ——
   Astra 把 Builder 行的样式作为**内联** <style> 输出
   （id=astra-theme-css-inline-css），其中有一条是：

     .site-below-footer-wrap[data-section="section-below-footer-builder"] {
       background-color: var(--ast-global-color-4);   ← 本站重映射为 #F7F2EE
       min-height: 60px;
       border-top-width: 1px;
     }

   注意：上面这段是**注释里的代码样例**，里面不能再出现注释定界符 ——
   CSS 注释不支持嵌套，内层的结束定界符会把外层注释提前闭合，
   余下内容会被解析器当成样式吞掉。
   本节第一版就踩了这个坑：变量声明块被吃掉，--b-foot-* 全部解析失败，
   页脚悄悄退回到「页头 120 / 页脚 0」的错位状态。

   特异度 0,2,0。子主题 style.css 里若只写 .site-below-footer-wrap（0,1,0），
   特异度更低就会输 —— 版权条底色于是变成奶油色，而条内被染成深色的文字区
   就成了一个孤零零的方块（改之前线上实测 bg = rgb(247,242,238) 即奶油色）。
   这里把特异度提到 0,3,0：与加载顺序无关，稳定胜出。

   —— 对齐规则（数值由无头 Chrome 实测反推）——
   Astra 把页头内容约束成「外层左右各 20px 留白 + 内层 max-width 1200px 居中」：
     视口 1440 → 内容起点 x=120
     视口 1240 → 内容起点 x=20
   页脚必须用同一套模型，否则页脚栏比页头右移 4 像素
   （改之前实测：页头 120 / 页脚 124）。两个宽度写成变量，不留魔数。
   ========================================================================== */

.site-footer#colophon {
	/* 页脚区域的公共度量。挂在 #colophon 上，下面两部分都能继承到。 */
	--b-foot-gutter: var(--gutter);      /* 与页头、正文共用同一条装订线 */
	--b-foot-width: var(--w-content);    /* 与页头、正文共用同一个版心 */
	--b-foot-hairline: rgba(239, 230, 223, 0.12);
	--b-foot-dim: rgba(239, 230, 223, 0.62);   /* 见 11.2 里的对比度说明 */

	background-color: var(--c-deep);
	color: var(--c-ink-on-deep);
}

/* --- 11.1 四栏主体 ------------------------------------------------------ */

/* 左右留白放在外层，内层只负责 1200px 居中 —— 与 Astra 的容器模型一致。
   两层合起来的起点才是 x=120（1440 视口），单层做不到：
   单层写 max-width:1200px + padding:24px 会让起点变成 x=144。 */
.beyiji-footer { padding-inline: var(--b-foot-gutter); }

.beyiji-footer__inner {
	max-width: var(--b-foot-width);
	margin-inline: auto;
	padding-block: var(--s-10) var(--s-9);
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--s-8) var(--s-6);
}

/* --- 品牌栏 --- */
.beyiji-footer__name {
	margin: 0 0 var(--s-3);
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 2.4vw, 2.15rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--c-ink-on-deep);
}
.beyiji-footer__name .u-ornament {
	margin-left: 0.3em;
	font-size: 0.45em;
	vertical-align: super;
}
.beyiji-footer__tagline {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.9;
	letter-spacing: 0.08em;
	color: rgba(239, 230, 223, 0.6);
}

/* --- 栏目 --- */
.beyiji-footer__title {
	margin: 0 0 var(--s-4);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-gold);
}
.beyiji-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.beyiji-footer__list li { margin-bottom: var(--s-3); }
.beyiji-footer__list a {
	font-size: 0.875rem;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: rgba(239, 230, 223, 0.78);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.beyiji-footer__list a:hover,
.beyiji-footer__list a:focus { color: var(--c-gold); }

/* --- 11.2 版权条 -------------------------------------------------------- */

/* 深色只在 #colophon 一处定义，这里让底色透上来。
   改之前是两层各染一次色，于是出现了「深色方块压在奶油色条上」。 */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
	background-color: transparent;
	border-top: 1px solid var(--b-foot-hairline);
	/* Astra 内联样式给了 min-height:60px、上下各 20px 内边距，行内又给了
	   min-height:60px。一行文字因此被撑成 177px 高的空条（实测）。
	   这里全部归零，高度交给内容自己决定。 */
	min-height: 0;
	padding-block: 0;
	/* Astra 没给这条加左右留白，800px 视口下版权文字会紧贴屏幕边缘（实测 x=0）。 */
	padding-inline: var(--b-foot-gutter);
}

/* 版权行与四栏、与页头共用同一条左右基线 */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
	max-width: var(--b-foot-width);
	min-height: 0;
	margin-inline: auto;
}

/* 版权条 DOM 里有两个同名的 .ast-footer-copyright，一定要分清楚：
     <div class="… ast-footer-copyright" data-section="section-footer-builder">   ← 外层（flex 容器）
       <div class="ast-footer-copyright"><p>…</p></div>                             ← 内层
       <span class="beyiji-lang">…</span>                                           ← 语言切换（见 functions.php 第 5 节）
     </div>
   所以：内边距挂在**外层**（挂内层会和外层叠成两倍高度），
   内层只负责让 <p> 不带外边距。 */
.site-footer .ast-builder-layout-element.ast-footer-copyright {
	display: flex;
	align-items: baseline;      /* 版权与语言切换压在同一条基线上 */
	justify-content: space-between;
	flex-wrap: wrap;            /* 一行放不下时自动折成两行 */
	gap: var(--s-3) var(--s-5);
	background-color: transparent;
	padding-block: var(--s-5) var(--s-6);
	/* 0.5 的透明度叠在 #3A2E28 上只有 3.9:1，12px 正文达不到 AA 的 4.5:1；
	   0.62 约 5.1:1。 */
	color: var(--b-foot-dim);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.site-footer .ast-footer-copyright {
	background-color: transparent;
	border-top: 0;
}

/* Astra 基础样式表里有一条
     .ast-footer-copyright, .ast-footer-social-wrap, .site-footer-focus-item { width: 100% }
   它同时命中外层与内层。内层一旦 width:100% 就独吞整行，
   把语言切换挤到第二行、并回到左边（实测 x=120，而不是右端 1272）。
   内层只需要「内容宽度」，留白交给外层的 space-between。 */
.site-footer .ast-builder-layout-element.ast-footer-copyright > .ast-footer-copyright {
	width: auto;
}

.site-footer .ast-footer-copyright p {
	margin: 0;
	line-height: 1.6;
	/* 本主题有一条全局的 p 规则：
	   font-size: var(--fs-body); color: var(--c-ink-body);
	   它是**直接命中** <p> 的，优先级高于「从 .ast-footer-copyright 继承」。
	   不显式写 inherit，页脚版权就会变成 17px 的深色正文（实测）。
	   这里让 <p> 回到父级的字号与颜色。 */
	font-size: inherit;
	color: inherit;
}

.site-footer .ast-footer-copyright a { color: rgba(239, 230, 223, 0.72); }

/* 版权行的年份用等宽数字，左右不随数字宽度抖动 */
.site-footer .beyiji-copy {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* --- 11.3 页脚里的语言切换 ----------------------------------------------
   复用页头的 .beyiji-lang 标记，但页头那套颜色是为浅底设计的
   （--c-ink-muted），深底上必须换一套，否则等于深字叠深底。 */
.site-footer .beyiji-lang { white-space: nowrap; }
.site-footer .beyiji-lang__link { color: var(--b-foot-dim); }
.site-footer .beyiji-lang__link:hover,
.site-footer .beyiji-lang__link:focus { color: var(--c-gold); }
.site-footer .beyiji-lang__link.is-current { color: var(--c-gold); }
.site-footer .beyiji-lang__link + .beyiji-lang__link::before { color: rgba(239, 230, 223, 0.35); }

/* --- 11.4 回到顶部按钮 --------------------------------------------------
   Astra 给的是 #ast-scroll-top { width/height:2.1em; line-height:2.1;
   color:#fff; background: var(--ast-global-color-0) }，而本主题把
   --ast-global-color-0 重映射成了强调色 —— 于是这颗按钮成了全站唯一
   没走设计令牌的色块（实测 bg = rgb(184,116,106)，与页脚的暖白文字撞色）。
   这里按「深底 + 金色箭头」重绘，并放大到 44px 满足最小点按尺寸。
   高度改了 line-height 就必须跟着改，否则箭头会贴在顶边。 */
#ast-scroll-top.ast-scroll-top-icon {
	width: 44px;
	height: 44px;
	line-height: 44px;
	background-color: var(--c-deep);
	color: var(--c-gold);
	border-radius: 2px;
	box-shadow: 0 8px 20px -10px rgba(58, 46, 40, 0.55);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}
#ast-scroll-top.ast-scroll-top-icon:hover,
#ast-scroll-top.ast-scroll-top-icon:focus {
	background-color: var(--c-gold);
	color: var(--c-deep);
	box-shadow: 0 10px 24px -10px rgba(58, 46, 40, 0.6);
}
/* 箭头是内联 SVG，跟随 color 走（Astra 只设了 color，没管 fill） */
#ast-scroll-top.ast-scroll-top-icon svg,
#ast-scroll-top.ast-scroll-top-icon svg path { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	#ast-scroll-top.ast-scroll-top-icon { transition: none; }
}

@media (max-width: 921px) {
	.beyiji-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--s-7) var(--s-5);
		padding-block: var(--s-9) var(--s-8);
	}
}
@media (max-width: 560px) {
	.beyiji-footer__inner { grid-template-columns: 1fr; gap: var(--s-6); }
	/* 窄屏折成两行，各自左对齐，避免语言切换飘到奇怪的位置 */
	.site-footer .ast-builder-layout-element.ast-footer-copyright {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
	}
}


/* ==========================================================================
   12. 移动端菜单与页头降级
   ========================================================================== */

/* 抽屉里的菜单项与桌面端同款字距，但字号放大以便点按 */
.ast-mobile-header-content .main-header-menu .menu-link,
.ast-mobile-popup-content .main-header-menu .menu-link {
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	padding-top: 0.85em;
	padding-bottom: 0.85em;
}
.ast-mobile-header-content .beyiji-header-cta,
.ast-mobile-popup-content .beyiji-header-cta {
	margin-top: var(--s-3);
	margin-left: 0;
}

/* 移动端抽屉的语言切换器独占一行 */
.ast-mobile-header-content .beyiji-lang-wrap > .beyiji-lang,
.ast-mobile-popup-content .beyiji-lang-wrap > .beyiji-lang {
	padding-left: 0;
	padding-top: var(--s-4);
}

/* 移动端页头底色与桌面端一致 */
.ast-mobile-header-wrap .ast-primary-header-bar,
#ast-mobile-header .ast-mobile-header-wrap {
	background-color: rgba(247, 242, 238, 0.9);
}



/* ==========================================================================
   13. 首页各段落
   --------------------------------------------------------------------------
   首页共 6 段，页脚由 Astra 承担，其余 5 段写在这里：
     13.1 Hero       全屏 + 鼠标擦除视频（交互脚本在 functions.php 的 wp_footer）
     13.2 共用骨架   各段顶部的小标题行
     13.3 宣言       一句品牌主张，窄栏居中
     13.4 四个入口   纯文字、不放图（少 4 个请求）
     13.5 最新文章   核心 Query 区块
     13.6 品牌落款   深色收束段

   页面是**普通页面 + 区块内容**（不是 page-builder 版式）：
   段落虽然带 alignfull，却仍然活在 .ast-container 里面，因此
     · 横向：装订线由容器给，段落要先用负边距抵消再自己补回来（第 3 节）；
     · 纵向与自身内边距：由第 2 节接管的 Astra 变量给。
   结果：**本节的 .b-* 规则里不再写 padding** —— 写了也是死代码，
   只会让下一个人以为改这里能生效。真正生效的地方是第 2 节那四个变量。
   规则不变：**留白归段落，__inner 只负责收宽度**。
   ========================================================================== */

/* --- 13.1 Hero ------------------------------------------------------- */

.u-hero__inner .u-eyebrow { margin-bottom: var(--s-5); }

.u-hero__title {
	margin: 0 0 var(--s-5);
	font-family: var(--font-heading);
	font-size: var(--fs-display);
	font-weight: 500;
	line-height: var(--lh-tight);
	letter-spacing: 0.01em;
}
/* 只给拉丁字形开斜体：Cormorant 没有中文字形，中文斜体会被浏览器伪斜 */
.u-hero__title .u-italic { font-style: italic; }

.u-hero__lede {
	max-width: 32ch;
	margin: 0 auto;
	font-size: var(--fs-small);
	line-height: 1.9;
	letter-spacing: var(--ls-cjk);
	color: rgba(251, 246, 242, 0.84);
}

/* 向下滚动的提示，贴在 Hero 底部 */
.u-hero__cue {
	position: absolute;
	left: 50%;
	bottom: var(--s-8);
	transform: translateX(-50%);
	z-index: 2;
}

/* 移动端：Hero 高度收到 78svh，避免地址栏让满屏高度反复跳动 */
@media (max-width: 900px) {
	.u-hero { min-height: 78svh; }
	.u-hero__cue { bottom: var(--s-6); }
}

/* --- 13.2 各段共用的「小标题」骨架 ----------------------------------- */

/* WordPress 会给 is-layout-flow 容器的子元素自动加 margin-block-start
   （--wp--style--block-gap，默认 24px）。我们的段落节奏全部是手写的
   margin-bottom，两者叠加会让间距翻倍。这里显式清零上边距，
   把节奏控制权完全交回给本文件。

   优先级说明：WP 的规则写在 :where() 里（特异度为 0），
   所以这里任意一条带类名的规则都能盖住它。 */
.u-hero > * + *,
.u-hero__inner > * + *,
.b-manifesto__inner > * + *,
.b-entries__inner > * + *,
.b-latest__inner > * + *,
.b-signoff__inner > * + * {
	margin-block-start: 0;
}
.b-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-5);
	margin-bottom: var(--s-8);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--c-line);
}
.b-head__label {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
.b-head__more {
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.b-head__more:hover,
.b-head__more:focus { color: var(--c-accent-deep); border-bottom-color: currentColor; }

/* --- 13.3 宣言 ------------------------------------------------------- */

/* padding 见第 2 节的 --wp--custom--ast-default-block-*-padding 接管：
   这里写 (0,1,0) 的 padding 会被 Astra 的 (0,2,0) 规则盖掉，是死代码。 */
.b-manifesto {
	background-color: var(--c-bg);
}
.b-manifesto__inner {
	max-width: var(--w-narrow);
	margin: 0 auto;
	text-align: center;
}
.b-manifesto__statement {
	margin: 0 0 var(--s-6);
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-snug);
	color: var(--c-ink);
}
.b-manifesto__body {
	margin: 0 auto;
	max-width: 46ch;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-body);
}

/* --- 13.4 四个入口（纯文字） ----------------------------------------- */

/* padding 见第 2 节的 Astra 变量接管（同 .b-manifesto 的说明）。 */
.b-entries {
	background-color: var(--c-surface-alt);
}
/* 横向留白放在段落层（.b-entries）而不是 __inner 上 ——
   两者都写会让内容再内缩 24px，与页头差出整整一格。
   规则是：段落负责留白，__inner 只负责收宽度。 */
.b-entries__inner {
	max-width: var(--w-content);
	margin: 0 auto;
}

/* 用 1px 的 gap + 底色做分隔线 —— 比分给每个格子写 border 更好维护，
   也不会在响应式换行时出现缺边或多边。 */
.b-entries__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background-color: var(--c-line);
	border: 1px solid var(--c-line);
}

.b-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-8) var(--s-6) var(--s-7);
	background-color: var(--c-surface);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease);
}
.b-entry:hover,
.b-entry:focus { background-color: var(--c-bg); }

.b-entry__index {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	color: var(--c-gold);
}
.b-entry__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-ink);
}
.b-entry__desc {
	margin: 0;
	font-size: var(--fs-meta);
	line-height: 1.75;
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-muted);
}
/* 悬停时右下角浮出的小箭头 */
.b-entry__arrow {
	margin-top: auto;
	font-size: var(--fs-meta);
	color: var(--c-accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.b-entry:hover .b-entry__arrow,
.b-entry:focus .b-entry__arrow { opacity: 1; transform: none; }

@media (max-width: 1024px) {
	.b-entries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.b-entries__grid { grid-template-columns: 1fr; }
	.b-entry { padding: var(--s-7) var(--s-5); }
}

/* --- 13.5 最新文章 --------------------------------------------------- */

/* padding 见第 2 节的 Astra 变量接管（同 .b-manifesto 的说明）。 */
.b-latest {
	background-color: var(--c-bg);
}
.b-latest__inner {
	max-width: var(--w-content);
	margin: 0 auto;
}

/* 核心 Query 区块渲染出来的列表 */
.b-latest .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) {
	.b-latest .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.b-latest .wp-block-post-template { grid-template-columns: 1fr; }
}

.b-latest .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line);
}
.b-latest .wp-block-post-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: var(--lh-snug);
}
.b-latest .wp-block-post-title a { color: var(--c-ink); text-decoration: none; }
.b-latest .wp-block-post-title a:hover,
.b-latest .wp-block-post-title a:focus { color: var(--c-accent); }
.b-latest .wp-block-post-date,
.b-latest .wp-block-post-terms {
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	color: var(--c-ink-muted);
}
.b-latest .wp-block-post-excerpt p {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.8;
	color: var(--c-ink-body);
}

/* 还没有文章时的空状态 —— 语气与品牌一致，不留一个空白段落 */
.b-latest .wp-block-query-no-results {
	padding: var(--s-9) 0;
	text-align: center;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-cjk);
}

/* --- 13.6 品牌落款 --------------------------------------------------- */

/* padding 见第 2 节的 Astra 变量接管（同 .b-manifesto 的说明）。 */
.b-signoff {
	background-color: var(--c-deep);
	text-align: center;
}
.b-signoff__inner {
	max-width: var(--w-narrow);
	margin: 0 auto;
}
.b-signoff__name {
	margin: 0 0 var(--s-4);
	font-family: var(--font-heading);
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: 1;
	color: var(--c-ink-on-deep);
}
.b-signoff__tagline {
	margin: 0 0 var(--s-8);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-style: italic;
	line-height: var(--lh-snug);
	color: var(--c-gold);
}
.b-signoff__link {
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: rgba(239, 230, 223, 0.82);
	text-decoration: none;
	border-bottom: 1px solid rgba(239, 230, 223, 0.28);
	padding-bottom: 2px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-signoff__link:hover,
.b-signoff__link:focus { color: var(--c-gold); border-color: var(--c-gold); }


/* ==========================================================================
   14. 长文档版式（栏目页 / 法务页 / 新手路径）
   --------------------------------------------------------------------------
   栏目页按「综述页」的体例写：定义与范围 → 分类体系 → 核心结论 →
   常见误解 → 编写说明与后续。所以版式要能承载：
     · 阅读宽度收敛（中文 40 字上下的最佳行长）
     · 带编号的章节与可跳转目录
     · 定义框 / 编者注 / 对照表三类结构化组件
     · 结论的编号列表与参考说明
   14.1 骨架  14.2 页头  14.3 目录  14.4 章节  14.5 结构化组件
   14.6 结论列表  14.7 表格  14.8 编写说明  14.9 版式收尾
   ========================================================================== */

/* --- 14.1 骨架 ------------------------------------------------------- */

/* ⚠️ 这里的 padding 是**兜底值**，两条真实路径都会盖掉它，别指望它生效：
     ① /journal/ 这类页面里 .b-doc 是顶级区块组 → Astra 的
        `.entry-content > .wp-block-group` (0,2,0) 接管内边距（详见第 2 节）；
     ② 文章页 .b-doc 挂在 <main id="primary"> 上 → §15.0 的
        `.b-fullbleed .site-content #primary` (1,2,0) 接管（实测就是它给的 80/128）。
   留着是为了万一将来 .b-doc 被放到一个既非区块组、又不在 #primary 上的位置。
   底色同理：§15.0 已让 #primary 透明，页面画布只由 <body> 画一次。 */
.b-doc {
	padding: var(--s-10) var(--gutter) var(--s-12);
	background-color: var(--c-bg);
}
/* 760px ≈ 中文 44 字/行。注意文章页的父容器（Astra narrow，760px）扣掉
   装订线后正好 720px，所以这里实际算出来是 720 —— 与设计文档 4.4 一致；
   760 这个上限只在窄容器不存在时才起作用（例如将来做全宽落地页）。 */
.b-doc__inner {
	max-width: 760px;
	margin: 0 auto;
}

/* --- 14.2 页头 ------------------------------------------------------- */

.b-doc__head {
	margin-bottom: var(--s-9);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid var(--c-line);
}
/* 栏目眉标：与 .b-head__label 同一套语汇 */
.b-doc__eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
.b-doc__title {
	margin: var(--s-4) 0 var(--s-2);
	font-family: var(--font-heading);
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-ink);
}
/* 拉丁副题：给中英混排一个呼吸位。
   中文副题（英文页）不能伪斜 —— 所以斜体只在 .is-latin 上生效。 */
.b-doc__subtitle {
	margin: 0 0 var(--s-5);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: 1;
	color: var(--c-accent);
}
.b-doc__subtitle.is-latin { font-style: italic; }
.b-doc__lede {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-body);
}
.b-doc__meta {
	margin: 0;
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	color: var(--c-ink-muted);
}

/* --- 14.3 目录 ------------------------------------------------------- */

.b-doc__toc {
	margin-bottom: var(--s-10);
	padding: var(--s-6) var(--s-6) var(--s-5);
	background-color: var(--c-surface);
	border: 1px solid var(--c-line-soft);
}
.b-doc__toc-title {
	margin: 0 0 var(--s-4);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
.b-doc__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}
.b-doc__toc li {
	counter-increment: toc;
	margin-bottom: var(--s-2);
	font-size: var(--fs-small);
}
.b-doc__toc li::before {
	content: counter(toc, decimal-leading-zero);
	margin-right: var(--s-3);
	font-family: var(--font-heading);
	font-style: italic;
	color: var(--c-gold);
}
.b-doc__toc a {
	color: var(--c-ink-body);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-doc__toc a:hover,
.b-doc__toc a:focus { color: var(--c-accent); border-bottom-color: var(--c-line); }

/* --- 14.4 章节 ------------------------------------------------------- */

.b-doc__section { margin-bottom: var(--s-11); }
.b-doc__section:last-of-type { margin-bottom: var(--s-9); }

.b-doc h2 {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	margin: 0 0 var(--s-6);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-line-soft);
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh-snug);
	color: var(--c-ink);
}
/* 章节序号：§ 1 —— 用衬线斜体，作视觉锚点 */
.b-doc h2 .b-num {
	flex: none;
	font-family: var(--font-heading);
	font-size: 0.62em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--c-gold);
	white-space: nowrap;
}
.b-doc h3 {
	margin: var(--s-8) 0 var(--s-4);
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-snug);
	color: var(--c-ink);
}
/* 正文段落：中文行高 1.85，是长文最舒适的位置 */
.b-doc p {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-body);
}
.b-doc p:last-child { margin-bottom: 0; }
.b-doc a {
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line);
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.b-doc a:hover,
.b-doc a:focus { color: var(--c-accent-deep); border-bottom-color: currentColor; }
.b-doc strong { color: var(--c-ink); font-weight: 600; }

/* --- 14.5 结构化组件：定义框 / 编者注 -------------------------------- */

.b-def {
	margin: 0 0 var(--s-6);
	padding: var(--s-5) var(--s-6);
	background-color: var(--c-surface);
	border-left: 2px solid var(--c-accent);
}
.b-def__label,
.b-note__label {
	display: block;
	margin-bottom: var(--s-2);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-accent);
}
.b-def p { margin: 0; }
.b-def p + p { margin-top: var(--s-3); }

.b-note {
	margin: 0 0 var(--s-6);
	padding: var(--s-5) var(--s-6);
	background-color: var(--c-surface-alt);
}
.b-note__label { color: var(--c-ink-muted); }
.b-note p { font-size: var(--fs-small); line-height: 1.8; }
.b-note ul {
	margin: var(--s-3) 0 0;
	padding-left: var(--s-5);
	font-size: var(--fs-small);
	line-height: 1.8;
	color: var(--c-ink-body);
}
.b-note li { margin-bottom: var(--s-2); }
.b-note li:last-child { margin-bottom: 0; }

/* --- 14.6 结论编号列表 ----------------------------------------------- */

.b-findings {
	margin: 0 0 var(--s-6);
	padding: 0;
	list-style: none;
	counter-reset: finding;
}
.b-findings > li {
	position: relative;
	counter-increment: finding;
	margin-bottom: var(--s-6);
	padding-left: var(--s-8);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-body);
}
.b-findings > li:last-child { margin-bottom: 0; }
.b-findings > li::before {
	content: counter(finding, decimal-leading-zero);
	position: absolute;
	top: 0.15em;
	left: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-style: italic;
	line-height: 1;
	color: var(--c-gold);
}
.b-findings > li b,
.b-findings > li strong { color: var(--c-ink); font-weight: 600; }

/* --- 14.7 对照表 ----------------------------------------------------- */

.b-table-wrap {
	margin: 0 0 var(--s-6);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.b-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: var(--fs-small);
}
.b-table caption {
	caption-side: top;
	margin-bottom: var(--s-3);
	text-align: left;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
.b-table th,
.b-table td {
	padding: var(--s-4) var(--s-4);
	text-align: left;
	vertical-align: top;
	line-height: 1.72;
	letter-spacing: var(--ls-cjk);
	border-bottom: 1px solid var(--c-line-soft);
}
.b-table thead th {
	padding-top: 0;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
	border-bottom: 1px solid var(--c-line);
}
.b-table tbody tr:last-child td { border-bottom: 0; }
.b-table td:first-child { color: var(--c-ink); }
.b-table th:not(:last-child),
.b-table td:not(:last-child) { padding-right: var(--s-6); }

/* --- 14.8 编写说明 / 参考 -------------------------------------------- */

.b-doc__refs {
	margin-top: var(--s-9);
	padding-top: var(--s-6);
	border-top: 1px solid var(--c-line);
}
.b-doc__refs-title {
	margin: 0 0 var(--s-4);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
.b-doc__refs ol,
.b-doc__refs ul {
	margin: 0;
	padding-left: var(--s-5);
	font-size: var(--fs-meta);
	line-height: 1.9;
	color: var(--c-ink-muted);
}
.b-doc__refs li { margin-bottom: var(--s-2); }
.b-doc__refs li:last-child { margin-bottom: 0; }

/* --- 14.9 版式收尾 --------------------------------------------------- */

/* 章节内的首个元素不要重复上边距 */
.b-doc__section > *:first-child { margin-top: 0; }

/* 抵消 WP 区块间距（:where(.is-layout-flow) > * + * 的 24px）。
   §14 里每个元素类型都写了自己的上下边距，这里只需把默认间距归零。
   h2 / h3 / p / .b-def / .b-note / .b-table-wrap 的显式边距优先。 */
.b-doc__inner > * + *,
.b-doc__head > * + *,
.b-doc__toc > * + *,
.b-doc__section > * + *,
.b-doc__refs > * + *,
.b-def > * + *,
.b-note > * + * {
	margin-block-start: 0;
}
/* 章节首块不能贴上一条分隔线 */
.b-doc__section > h2:first-child { margin-top: 0; }

@media (max-width: 640px) {
	.b-doc { padding: var(--s-8) var(--gutter) var(--s-10); }
	.b-doc__toc { padding: var(--s-5); }
	.b-def,
	.b-note { padding: var(--s-5); }
	.b-doc h2 { flex-direction: column; gap: var(--s-2); }
	.b-findings > li { padding-left: var(--s-7); }
}

/* 打印：长文档要能好好印出来 */
@media print {
	.b-doc__toc { display: none; }
	.b-doc h2 { page-break-after: avoid; }
	.b-def, .b-note, .b-table { page-break-inside: avoid; }
}


/* ==========================================================================
   15. 本刊归档（/notes/）
   --------------------------------------------------------------------------
   设计文档 4.2 节的四段：页头 → 新手路径卡 → 文章三列网格 → 栏目快捷入口。

   模板是子主题的 home.php（page_for_posts 的渲染入口）。
   卡片不显示日期（设计决定），只给分类与阅读时间；分类链指向上位 Hub 页
   而不是分类归档，理由见 functions.php 的 beyiji_child_category_hub()。

   15.0 全宽版式  15.1 骨架  15.2 页头  15.3 路径卡
   15.4 网格与卡片  15.5 栏目入口  15.6 分页与空状态
   ========================================================================== */

/* --- 15.0 全宽版式 --------------------------------------------------- */

/* 关键：**不要**去中和 .ast-container 的宽度与内边距。
 *
 * 第 2 节已经把它设成 calc(--w-content + 40px)，配上 Astra 自己的左右各
 * 20px 内边距，内层正好等于 --w-content(1200px)，页头的内容就从 x=120 开始。
 * 正文只要用同一个容器，两端自然重合。
 *
 * 上一版曾经把容器改成 max-width:100% 并补一份自己的 24px padding —— 桌面端
 * 两个错误恰好抵消（看起来是对齐的），窄屏就露馅了：Astra 的装订线在
 * 390px 下会自适应缩到 9.18px，而固定 24px 的正文比页头多缩进 15px。
 * 教训与页脚那次一样：**别再手抄一份版心**，认准同一个来源。
 *
 * 唯一必须覆盖的是 Astra 给 #primary 的左右内边距 —— 它是带 ID 的选择器，
 * 特异度永远高过 .b-arch / .b-doc / .b-nf 这类单类规则；不清掉就等于
 * 在容器留白之外再加一层，正文立刻比页头窄。这里横向归零，
 * 纵向则统一给出整页留白（三种自定义版式的根元素都是 <main id="primary">）。
 *
 * `background-color: transparent` 同样是必须的：.b-arch / .b-doc 各自画了一
 * 层 --c-bg，只覆盖容器那 1200px，容器外的余白仍是 <body> 的底色。两层只要
 * 有一丝色差就会在 x=120 / x=1320 处裂出两条竖边（本主题确实有过这么一版）。
 * 第 3 节已经让 body 与 .b-arch/.b-doc 同色，这里再让 #primary 让路 ——
 * 画布只由 <body> 画一次，连带那层顶部玫瑰光晕也能连续地铺满整页。
 */
.b-fullbleed .site-content #primary {
	padding: var(--s-10) 0 var(--s-12);
	background-color: transparent;
}

/* --- 15.1 骨架 ------------------------------------------------------- */

/* 整页留白由 15.0 的 #primary 规则给出（那里解释了为什么不能写在这里） */
.b-arch {
	background-color: var(--c-bg);
}
.b-arch__inner {
	max-width: var(--w-content);
	margin: 0 auto;
}

/* --- 15.2 页头 ------------------------------------------------------- */

.b-arch__head {
	max-width: var(--w-narrow);
	margin-bottom: var(--s-9);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid var(--c-line);
}
.b-arch__eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
.b-arch__title {
	margin: var(--s-4) 0 var(--s-2);
	font-family: var(--font-heading);
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-ink);
}
.b-arch__subtitle {
	margin: 0 0 var(--s-5);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: 1;
	color: var(--c-accent);
}
.b-arch__subtitle.is-latin { font-style: italic; }
.b-arch__lede {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-body);
}
.b-arch__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-3) var(--s-6);
	margin: 0;
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	color: var(--c-ink-muted);
}
.b-arch__back {
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-arch__back:hover,
.b-arch__back:focus { color: var(--c-accent-deep); border-bottom-color: currentColor; }

/* 归档列表段落之间的统一节奏 */
.b-arch__path { margin-bottom: var(--s-10); }
.b-arch__list { margin-bottom: var(--s-12); }

/* --- 15.3 新手路径卡 ------------------------------------------------- */

.b-pathcard {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-5) var(--s-6);
	padding: var(--s-6);
	padding-left: var(--s-5);
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-left: 2px solid var(--c-accent);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}
.b-pathcard:hover,
.b-pathcard:focus {
	background-color: var(--c-bg);
	box-shadow: var(--shadow-soft);
}
.b-pathcard__index {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	color: var(--c-gold);
}
.b-pathcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	min-width: 0;
}
.b-pathcard__label {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-muted);
}
.b-pathcard__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-ink);
}
.b-pathcard__desc {
	max-width: 62ch;
	font-size: var(--fs-meta);
	line-height: 1.8;
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-muted);
}
.b-pathcard__cta {
	font-size: var(--fs-h3);
	line-height: 1;
	color: var(--c-accent);
	transition: transform var(--dur) var(--ease);
}
.b-pathcard:hover .b-pathcard__cta,
.b-pathcard:focus .b-pathcard__cta { transform: translateX(6px); }

/* --- 15.4 网格与卡片 ------------------------------------------------- */

/* 用「上边一条极细线 + 大列间距」而不是「背景透色的 1px 栅格」——
   后者在最后一行不满时，空格子会露出底色形成色块。文章数量是变的，
   所以选前者：任何数量、任何列数都成立。 */
.b-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-8) var(--s-6);
}
.b-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line);
	transition: border-color var(--dur) var(--ease);
}
.b-card:hover { border-top-color: var(--c-accent); }

.b-card__meta {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	margin: 0;
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	color: var(--c-ink-muted);
}
.b-card__num {
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	color: var(--c-gold);
}
.b-card__cat {
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.b-card__cat:hover,
a.b-card__cat:focus { color: var(--c-accent-deep); border-bottom-color: currentColor; }
/* 阅读时间靠右，与分类分列两端 */
.b-card__read { margin-left: auto; }

.b-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: var(--lh-snug);
}
.b-card__title a {
	color: var(--c-ink);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.b-card__title a:hover,
.b-card__title a:focus { color: var(--c-accent); }

/* 摘要固定三行，让同一行的卡片底部齐平 */
.b-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.8;
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-body);
}

/* --- 15.5 栏目快捷入口 ----------------------------------------------- */

.b-sections {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.b-sections__item { display: flex; }
.b-sections__link {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	width: 100%;
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-line);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease);
}
.b-sections__link:hover,
.b-sections__link:focus { border-top-color: var(--c-accent); }
.b-sections__name {
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-ink);
}
.b-sections__desc {
	font-size: var(--fs-meta);
	line-height: 1.7;
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-muted);
}

/* --- 15.6 分页与空状态 ----------------------------------------------- */

.b-pag { margin-top: var(--s-10); }
.b-pag__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.b-pag__item {
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
}
.b-pag__item .page-numbers {
	display: inline-block;
	padding: var(--s-2) var(--s-3);
	color: var(--c-ink-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-pag__item .page-numbers:hover,
.b-pag__item .page-numbers:focus { color: var(--c-accent); border-bottom-color: var(--c-line); }
.b-pag__item .page-numbers.current {
	color: var(--c-ink);
	border-bottom-color: var(--c-accent);
}
.b-pag__item .page-numbers.dots { color: var(--c-line); }

.b-empty {
	padding: var(--s-9) 0;
	border-top: 1px solid var(--c-line);
	text-align: center;
}
.b-empty__title {
	margin: 0 0 var(--s-3);
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-snug);
	color: var(--c-ink);
}
.b-empty__body {
	max-width: 36ch;
	margin: 0 auto;
	font-size: var(--fs-small);
	line-height: 1.85;
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-muted);
}

@media (max-width: 1024px) {
	.b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.b-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.b-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
	.b-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.b-pathcard {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--s-4);
		padding: var(--s-5);
	}
	.b-pathcard__index { display: none; }
	/* 窄屏收一点上下留白；横向仍为 0，由容器统一负责 */
	.b-fullbleed .site-content #primary {
		padding: var(--s-8) 0 var(--s-10);
	}
}


/* ==========================================================================
   16. 文章页（/journal/{slug}/）
   --------------------------------------------------------------------------
   模板是子主题的 single.php，正文容器直接挂 .b-doc，所以第 14 节那整套
   长文档组件（.b-def 定义框 / .b-note 编者注 / .b-table 对照表 /
   .b-findings 结论列表 / 带 § 序号的章节标题）在文章里开箱可用 ——
   文章 markup 与栏目页完全同构，不需要第二套排版规则。

   16.1 骨架  16.2 面包屑  16.3 页头  16.4 正文  16.5 落款  16.6 相关阅读
   ========================================================================== */

/* --- 16.1 骨架 ------------------------------------------------------- */

/* 行宽：设计文档 4.4 要 720px 的正文列。
   Astra 把窄容器写死成 750px（见第 2 节 --ast-narrow-container-width 的说明），
   扣掉两侧 20px 装订线只剩 710px 正文，而 .b-doc__inner 的 max-width: 760px
   因为父级只有 710 而**永远够不着** —— 是一条隐性失效的声明。
   要压过 `.ast-narrow-container .site-content > .ast-container` (0,3,0)，
   选择器必须带上 ID：下面这条是 (1,3,0)。
   760 = --w-narrow(720) + 两侧装订线，760 - 40 = 720，正好落在设计值上。
   <body> 只有在文章页才带 .ast-narrow-container，所以归档页的 1200px 不受影响。 */
.ast-narrow-container #content.site-content > .ast-container {
	max-width: calc(var(--w-narrow) + var(--gutter) * 2);
}

/* 整页留白的真实来源（实测，别照抄旧注释）：
     · 纵向 80px / 128px —— §15.0 的 `.b-fullbleed .site-content #primary`，
       特异度 (1,2,0)，把 .b-doc 自己的 padding 整条盖掉（含左右 --gutter）；
     · 横向 0 —— 同上。**这是对的**：容器已经有 20px 装订线，
       .b-doc 那份 --gutter 再叠上来会让正文比页头窄 40px。
     · 底色 —— §15.0 让 #primary 透明，画布只由 <body> 的 --c-bg 画一次，
       连带顶部那层玫瑰光晕能连成一片（曾经 #primary 自己画 --c-bg，
       容器外露出的 body 底色深一档，正文列左右各裂一条竖边）。
   「相关阅读」的间距由 16.6 的 margin-top 负责；页面底部不贴住页脚靠的是
   #primary 的 padding-bottom，所以「没有相关文章」时也不会塌。 */

/* --- 16.2 面包屑 ----------------------------------------------------- */

.b-crumbs { margin-bottom: var(--s-6); }
.b-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	color: var(--c-ink-muted);
}
.b-crumbs__item { display: inline-flex; align-items: baseline; }
.b-crumbs__item + .b-crumbs__item::before {
	content: '›';
	margin-right: var(--s-2);
	color: var(--c-line);
}
.b-crumbs__item a {
	color: var(--c-ink-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-crumbs__item a:hover,
.b-crumbs__item a:focus { color: var(--c-accent); border-bottom-color: var(--c-line); }
.b-crumbs__item span[aria-current="page"] { color: var(--c-ink-body); }

/* --- 16.3 页头 ------------------------------------------------------- */

.b-article__title { margin-top: var(--s-4); }
.b-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-3);
}
.b-article__hub {
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-article__hub:hover,
.b-article__hub:focus { color: var(--c-accent-deep); border-bottom-color: currentColor; }
.b-article__sep { color: var(--c-line); }

.b-article__thumb { margin: 0 0 var(--s-8); }
.b-article__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-0);
}

/* --- 16.4 正文 ------------------------------------------------------- */

/* 正文自己就是容器（没有 is-layout-flow），所以 WP 那套
   「:where(.is-layout-flow) > * + * 加 24px」不会进来。但万一以后
   有人在正文里包一层 group 区块，这条能兜住，让节奏始终由本文件说了算。 */
.b-article__body > * + * { margin-block-start: 0; }
.b-article__body > *:first-child { margin-top: 0; }

/* --- 16.5 品牌落款 --------------------------------------------------- */

.b-article__signoff {
	margin-top: var(--s-10);
	padding-top: var(--s-7);
	border-top: 1px solid var(--c-line);
	text-align: center;
}
.b-article__signoff-name {
	margin: 0 0 var(--s-2);
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1;
	color: var(--c-ink);
}
.b-article__signoff-line {
	margin: 0 0 var(--s-5);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: var(--lh-snug);
	color: var(--c-gold);
}
/* 斜体只在英文落款上生效：中文落款会被浏览器伪斜（见第 4 节的说明） */
.b-article__signoff-line.is-latin { font-style: italic; }
.b-article__signoff-mail {
	margin: 0;
	font-size: var(--fs-meta);
	letter-spacing: 0.06em;
	color: var(--c-ink-muted);
}
.b-article__signoff-mail a {
	color: var(--c-ink-body);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-article__signoff-mail a:hover,
.b-article__signoff-mail a:focus { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.b-article__signoff-hint { display: block; margin-top: var(--s-3); }

/* --- 16.6 相关阅读 --------------------------------------------------- */

.b-related {
	margin-top: var(--s-11);
	padding-top: var(--s-10);
	border-top: 1px solid var(--c-line);
}
.b-related__inner {
	max-width: var(--w-content);
	margin: 0 auto;
}


/* ==========================================================================
   17. 404 与搜索
   --------------------------------------------------------------------------
   模板是子主题的 404.php；搜索结果页走 index.php 的 is_search() 分支，
   与其它归档共用同一套版式。
   ========================================================================== */

.b-nf {
	display: flex;
	align-items: center;
	min-height: 58svh;
	background-color: var(--c-bg);
}
.b-nf__inner {
	max-width: var(--w-narrow);
	margin: 0 auto;
	text-align: center;
}
.b-nf__eyebrow {
	margin: 0 0 var(--s-4);
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	color: var(--c-gold);
}
.b-nf__title {
	margin: 0 0 var(--s-5);
	font-family: var(--font-heading);
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-ink);
}
.b-nf__body {
	max-width: 38ch;
	margin: 0 auto var(--s-7);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-cjk);
	color: var(--c-ink-body);
}
.b-nf__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3) var(--s-6);
	margin: 0 0 var(--s-8);
	padding: 0;
	list-style: none;
}
.b-nf__links a {
	font-size: var(--fs-small);
	letter-spacing: 0.06em;
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line);
	padding-bottom: 2px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-nf__links a:hover,
.b-nf__links a:focus { color: var(--c-accent-deep); border-bottom-color: currentColor; }

/* 站内搜索：只补布局，控件外观沿用第 6 节（表单控件）的全局设定 */
.b-nf__search { max-width: 24rem; margin: 0 auto; }
.b-nf__search .search-form {
	display: flex;
	gap: var(--s-3);
	align-items: stretch;
}
.b-nf__search .search-field {
	flex: 1 1 auto;
	min-width: 0;
}
.b-nf__search .search-submit { flex: 0 0 auto; }