/* 全站颜色/字体/媒体token：唯一声明处（所有页面都加载本文件）。
   不要再在别的 css 里重复定义 :root 变量，也不要手写 --border/--paper 等值。 */
/* 阴影透明度注册为「可过渡的自定义属性」：智能收起的淡入/淡出直接在 --header-shadow-alpha 上做
   过渡（box-shadow 自身不参与过渡），与首页滚动渐变（--home-shadow-ramp，JS 内联随进度改、即时生效）
   完全解耦——两个变量相乘得出最终阴影透明度，各自独立变化。
   老浏览器不支持 @property 时退化为瞬时切换（取值仍正确、仅无动画），与 reduced-motion 收口一致；
   :root 里再声明一次同值变量，作为「不认注册属性」浏览器的兜底（两处同为 .16，勿只改一处）。 */
@property --header-shadow-alpha {
  syntax: '<number>';
  inherits: true;
  initial-value: .16;
}

:root {
  color-scheme: light;
  --red-950: #4d080b;
  --red-900: #681014;
  --red: #681014;
  --red-800: #86151a;
  --red-700: #a51c21;
  --red-600: #bc2529;
  --red-500: #d63a36;
  --gold: #e7bc65;
  --gold-bright: #f4d88e;
  --gold-hover: #ffe5a5;               /* 主按钮 hover 的亮金（此前 styles.css 硬编码 #ffe5a5） */
  --ink: #251b19;
  --muted: #746664;
  --paper: #f4efe5;
  --paper-deep: #e9dfcf;
  --white: #fffaf0;
  --border: rgba(92, 31, 29, 0.15);
  --media-shadow: 0 18px 45px rgba(65, 24, 20, .14);
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 等宽小标签字族：值必须保持 ui-monospace, monospace（全站这批 9–12px mono 文字
     改动前的原样）。曾拼入 SFMono/Menlo/Consolas 「更全的系统栈」，但在 Windows 等
     平台上回退目标会从「系统 monospace 泛型」变成明确字体（如 Consolas），不同等宽
     字体的 ascent/descent 不同，11px 小字号下字形基线即漂移约 1px（横幅日期“偏高”
     即此）——勿再扩充候选。 */
  --mono: ui-monospace, monospace;
  /* 品牌深红（印章/强调/链接）：此前在 post/archive/featured 里硬编码了 11 处 #9e171b，
     彼时 :root 最接近的是 #681014/#86151a/#a51c21，均不等于品牌色——现收口为 token */
  --seal-red: #9e171b;
  /* 台上线 token（rgba(104,16,20,α) = --red 的透明度家族）：此前约 40 处手写 */
  --wash: rgba(104, 16, 20, .06);         /* hover 洗色 / 淡底 */
  --line: rgba(104, 16, 20, .14);         /* 分隔线 / 面板边框 */
  --line-mid: rgba(104, 16, 20, .18);     /* 强调面板边框 */
  --line-strong: rgba(104, 16, 20, .24);  /* 输入框边框 */
  --line-faint: rgba(104, 16, 20, .08);   /* 微弱分隔 / 表格行线 */
  /* 焦点环（全站唯一值）：原 8 处硬编码相同的 outline */
  --focus-ring: 2px solid rgba(231, 188, 101, .5);
  /* 印章红的 α 变体（post 页分类章/引用底色，原硬编码） */
  --seal-red-30: rgba(158, 23, 27, .30);
  --seal-red-05: rgba(158, 23, 27, .055);
  /* 阴影档位（原逐处硬编码相同值） */
  --shadow-panel: 0 10px 26px rgba(70, 25, 20, .06);
  --shadow-float: 0 24px 70px rgba(70, 25, 20, .10);
  --shadow-card-hover: 0 8px 22px rgba(70, 25, 20, .06);
  /* 视频/播放器黑底 */
  --video-bg: #1d1716;
  /* 语义色 */
  --ok: #2e9e5b;
  --danger: #b3261e;
  /* 次级灰阶（原散落的暖灰文字，统为两档） */
  --ink-soft: #8a7771;
  --faint: #948580;
  --paper-lift: #efe5d5;  /* 卡片/面板纸面色（原 #eee4d4/#efe5d5/#efe5d6 三处近值合一） */
  --gold-dim: #bd9b5a;    /* 金褐点缀（meta 圆点、分隔线） */
  /* 品牌金/奶油/深红的 α 家族补充（此前 admin/archive/featured 等页手写，收口进 token） */
  --gold-wash: rgba(231, 188, 101, .14);    /* 金色淡底（提示条/强调段） */
  --gold-strong: rgba(231, 188, 101, .8);   /* 金色实心点缀（描边/角标） */
  --white-wash: rgba(255, 250, 240, .8);    /* 奶油淡底（悬停/浮层） */
  --white-soft: rgba(255, 250, 240, .72);   /* 奶油底 · 更透 */
  --red-wash: rgba(104, 16, 20, .1);        /* 深红淡底 */
  --red-line: rgba(104, 16, 20, .35);       /* 深红描边 · 强 */
  --head-wash: #f4e9e0;                     /* 表头底色（原 admin-logs 表格 th） */
  /* 横幅高度（桌面/移动，px）：只在此声明一次，.nav-shell 高度与 .mobile-nav 顶距都引用它。
     由 site-shell.js 按 /api/site-config 覆盖（横幅样式页可调）；此处为未配置/拉取失败时的默认值。
     注意与 site-shell.js 的 NEAR_TOP（距顶强制显示的滚动阈值）语义不同，只是值恰好同为 72。 */
  --header-height-desktop: 86px;
  --header-height-mobile: 72px;
  /* 文章阅读列宽（px）与「列宽上限表达式」：唯一声明（高级设置「显示排版参数」→
     site-shell.js 注入 --post-content-width 覆盖，此为其默认/拉取失败兜底）。
     消费端（post.css 渲染列 / admin.css 写作框与内容块）一律引用 --post-content-column
     或它内部的 --post-content-width，不要在各处再写 min(var(...)), 100%)。 */
  --post-content-width: 820px;
  --post-content-column: min(var(--post-content-width), 100%);
  /* 移动端智能收起的动画时长（ms），上滑/下滑位移与阴影各一组（淡入淡出只作用于阴影，横幅本体不全透明）：
     --header-animation-up = 收起时上滑位移动画（独立时长）；
     --header-animation-down = 展开时下滑位移动画（独立时长）；
     --header-fade-in = 展开时阴影淡入（与下滑同步开始，时长独立）；
     --header-fade-out-effective = 收起时阴影淡出的「生效」时长 = min(阴影淡出设置值, 上滑)——
                                   淡出设置大于上滑时按上滑计（整个上滑期间淡完），保证上滑一结束阴影即消失；
     --header-fade-out-delay = 上滑 − 生效时长（末点对齐的推迟）。
     注意：后两个变量是 site-shell.js 的计算结果，勿直接改——要改时长去「横幅样式」页改配置值。0 为瞬时。
     均可被 site-shell.js 按配置覆盖；prefers-reduced-motion 时被 CSS 收口为 transition:none。 */
  --header-animation-up: 220ms;
  --header-animation-down: 220ms;
  --header-fade-in: 220ms;
  --header-fade-out-effective: 220ms;
  --header-fade-out-delay: 0ms;
  /* 横幅「管理后台」激活圆点随登录态的位移时长（ms，0 为瞬时；横幅样式页「登录角标」可调，
     默认 200）。reduced-motion 时被 CSS 收口为 transition:none。 */
  --admin-dot-ms: 200ms;
  /* 阴影透明度：智能收起的淡入/淡出只改它（注册属性，见文件头 @property）；首页滚动渐变只改
     --home-shadow-ramp（0..1，JS 内联驱动）。最终阴影 = 0 10px 30px rgba(48,3,5, 两者相乘)。
     .16 与 @property 的 initial-value 同值（旧浏览器兜底），勿只改一处。 */
  --header-shadow-alpha: .16;
  /* 首页「阴影渐变」进度（0..1）：非首页恒 1（不参与渐变）；首页基态置 0，运行时被 site-shell.js
     按阴影渐变距离内联覆盖（与背景透明度渐变距离各自独立）。桌面/移动同用，
     阴影渐变距离在「横幅样式」页「首页滚动渐变」配置。 */
  --home-shadow-ramp: 1;
}

/* —— 小字注释 · 全站约定（唯一声明处）——
   所有说明性小字（页头/面板/折叠头/状态/空态等）统一为 --muted 12px/1.6；
   不再使用 --faint 或更大字号，颜色一律并入 --muted。
   新增说明文字请用 .fine-print，或把选择器并入本区块（一次声明，不在这之外再写颜色/字号）。
   例外：首页 .noscript-note（深色底上的白字提示，不适用灰字；保留其配色）。 */
.fine-print,
.description,
.admin-page-summary,
.auth-hint,
.first-run-note,
.register-note,
.key-meta,
.image-uploading,
.featured-head > div > span,
.featured-empty-note,
.featured-count,
.ai-prompt-title span,
.card-layout-head span,
.ai-prompt-guide p,
.ai-draft-actions,
.ai-prompt-actions,
.ai-candidate-position,
.archive-controls,
.archive-copy > span,
.archive-loading,
.post-loading,
.post-not-found {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

site-header, site-footer { display: contents; }
body.menu-open { overflow: hidden; }

/* 公开独立页的版式与文字档位：容器、页头和返回入口只在此处定义。 */
.public-page-main { width: min(1080px, 100%); min-height: calc(100vh - 130px); margin: 0 auto; padding: calc(var(--header-height-desktop) + 64px) 32px 64px; }
.public-page-back { display: inline-block; margin-bottom: 32px; color: var(--red-700); font-size: 12px; text-decoration: none; }
.public-page-back:hover { color: var(--red-900); }
.public-page-hero { max-width: 820px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.public-page-kicker { margin: 0 0 12px; color: var(--red-700); font: 10px/1 var(--mono); letter-spacing: .24em; }
.public-page-title { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(43px, 5vw, 64px); font-weight: 700; line-height: 1.3; letter-spacing: .08em; }
.public-page-lead { max-width: 640px; margin: 20px 0 0; color: var(--muted); font-family: var(--serif); font-size: 17px; line-height: 2; }
@media (max-width: 760px) {
  .public-page-main { padding: calc(var(--header-height-mobile) + 48px) 16px 48px; }
  .public-page-hero { padding-bottom: 32px; }
}

/* 跳至主要内容（全站唯一声明；各页不再各自定义） */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  color: var(--red-900);
  background: var(--white);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--white);
  background: rgba(91, 8, 12, .96);
  border-bottom: 0;
  box-shadow: 0 10px 30px rgba(48, 3, 5, calc(var(--header-shadow-alpha) * var(--home-shadow-ramp)));
  backdrop-filter: blur(16px);
}
.site-header a { color: inherit; text-decoration: none; }
/* 首页横幅与其他页面只差“渐变”这一处：滚动渐变（背景叠层 + 阴影）由 site-shell.js 内联驱动（唯一实现），
   这里只保留未滚动时的静态初态（与 JS progress=0 一致），不再定义 CSS 侧动态公式。
   阴影渐变走 --home-shadow-ramp：首页基态置 0（无滚动无阴影），运行时 JS 按进度内联覆盖——随进度
   联动，与智能收起的阴影淡入/淡出（只改 --header-shadow-alpha）相互独立，互不占用对方。 */
.home-page .site-header {
  background: linear-gradient(180deg, rgba(58,4,6,.42), rgba(58,4,6,.12) 72%, transparent);
  --home-shadow-ramp: 0;
  border-bottom: 0;
  backdrop-filter: none;
}
/* 滚动到底后：不透明底色 + 毛玻璃，与其他页面横幅完全一致（JS 负责 0.96 实底与阴影进度，
   不再单独声明 box-shadow——阴影统一走 .site-header 的乘积公式）。 */
.home-page .site-header.scrolled {
  backdrop-filter: blur(16px);
}
.nav-shell {
  width: min(1320px, calc(100% - 64px));
  height: var(--header-height-desktop);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-seal {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid rgba(243, 211, 134, .85);
  border-radius: 2px;
}
.brand-seal::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(243, 211, 134, .4); border-radius: 1px; }
.brand-star { color: var(--gold-bright); font: 10px/1 var(--serif); letter-spacing: .08em; transform: translateY(-1px); }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font: 21px/1 var(--serif); letter-spacing: .18em; }
.brand-copy small { color: rgba(255,255,255,.56); font-size: 8px; letter-spacing: .22em; }
.desktop-nav { display: flex; align-items: center; gap: 48px; font-size: 14px; }
/* 导航链接与「管理后台」入口盒子必须同为 22px 高（line-height: 22px）：两处 active 圆点
   都用「自己盒底 − 13px」定位（下方同一规则），盒高不同则圆点错位（此前链接行高 normal
   ≈18px、入口 22px，圆点相差 2px，用户反馈「点的高度不一致」）。
   行高 22px 不影响文字位置——half-leading 数学居中，字形中心仍 = 盒中心（见下方注释）。 */
.desktop-nav a { position: relative; color: rgba(255,255,255,.72); line-height: 22px; transition: color .2s; }
.desktop-nav a:hover, .desktop-nav a.active { color: #fff; }
.desktop-nav a.active::after, .site-header a.admin-entry.active::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }
.nav-action { display: flex; align-items: center; gap: 18px; }
/* 横幅 11px 小字（日期 / 管理入口）的垂直对齐：字形中心与字体无关。
   原理：line-height 明显大于字形盒时，浏览器按 half-leading 把字形在行盒内数学居中，
   字形中心恒等于行盒中心（不再依赖字体 ascent/descent——换字体/回退字体都不漂）。
   于是盒高 = 行高 = 22px，flex 以盒中心对齐导航中线——字形中心 = 盒中心 = 导航中线，
   两处小字（日期/管理入口）中心严格重合（亚像素），任何平台一致。
   注意：不要改回 height:1em / line-height:1——那会退回「字形随字体基线浮动的 1px 漂移」。
   日期字族与入口一致（不设 font-family，随 .site-header 继承默认 --sans）：此前用
   var(--mono)（ui-monospace），等宽字族不含 CJK，「周日」等汉字会回退到系统宋体，
   与旁边「管理后台」的默认字体不一致（用户裁定：撤销 mono）。
   （translateY(1px) 下移微调亦已按用户裁定取消；演变历史见开发笔记 §68。） */
.today { display: inline-flex; align-items: center; height: 22px; color: rgba(255,255,255,.88); font-size: 11px; line-height: 22px; letter-spacing: .08em; }
.site-header a.admin-entry { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 22px; color: rgba(255,255,255,.72); font-size: 11px; line-height: 22px; letter-spacing: .1em; transition: color .2s; }
.site-header a.admin-entry:hover, .site-header a.admin-entry.active { color: #fff; }
/* 「已登录」角标（管理员已登录时横幅显示，全站唯一实现）：自绘小金框对勾 SVG（11px，
   边长=旁边 11px 文字的字高；金框与对勾都走 currentColor 两档金——默认中金 var(--gold)，
   悬停（未选中）与选中为亮金 var(--gold-bright)，同下方 .admin-entry 文字的状态模式）。
   作为「管理后台」超链接 <a> 的子元素（点在图标上 = 点整个入口，整块跳 /admin.html），
   绝对定位在链接左侧 9px 处、不占布局宽度——导航链接与日期的位置不随登录态变化
   （占宽时 nav-action 被撑大，space-between 下中间导航会左右移动，用户反馈过
   「首页/这里/…偏左」）。垂直用 top:50% + translateY(-50%) 精确居中于导航中线
   （translateY(-50%) 是居中手段，不是视觉微调）。
   已知窄带边界（用户裁定不兜底，保持简单）：≤310px 图标会贴品牌字、
   761–790px 桌面窗口会贴近「文章列表」（重叠 ≤4px），均属罕见/过渡尺寸。 */
.admin-logged-in { position: absolute; right: calc(100% + 9px); top: 50%; transform: translateY(-50%); display: inline-block; width: 11px; height: 11px; color: var(--gold); transition: color .2s; }
/* 对勾与「管理后台」文字同一套状态模式（见上方 .admin-entry 规则）：
   未选中 = 中金（--gold），悬停（未选中）= 选中 = 亮金（--gold-bright），选中时悬停不变色。
   间隙命中区（::before）同样归属锚点，悬停间隙也会触发对勾高亮。 */
.site-header a.admin-entry:not(.active):hover .admin-logged-in,
.site-header a.admin-entry.active .admin-logged-in { color: var(--gold-bright); }
/* 合并单元的命中区：对勾绝对定位在链接盒左侧（11px 图标 + 9px 间隙 = 20px），
   图标是链接子元素（悬停/点击会冒泡到链接），但「图标与文字之间 9px 间隙」不属于任何元素
   ——悬停不高亮、点击无反应。用 ::before 补上「链接左缘往外 20px」的命中区，
   使图标/间隙/文字整块悬停高亮、整块可点（仅登录态有图标时才需要）。 */
.site-header a.admin-entry.logged-in::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 20px; }
/* 激活圆点随登录态位移：对勾（11px）+ 9px 间距 → 合并宽度中心比「四个字居中」左移 10px；
   .logged-in 由 site-shell.js 随角标同增删。位移走 left 过渡，时长 --admin-dot-ms
   （横幅样式页「登录角标·角标圆点动画」，默认 200ms；0 = 瞬时；reduced-motion 见文末）。 */
.site-header a.admin-entry.active::after { transition: left var(--admin-dot-ms, 200ms) ease; }
.site-header a.admin-entry.logged-in.active::after { left: calc(50% - 10px); }
.menu-button { display: none; font: inherit; border-radius: 3px; }
.site-header .menu-button:hover { background: transparent; }
.mobile-nav { display: none; }
/* 站脚样式随组件（site-footer 在全部公开内容页与游戏页渲染，后台各页无脚注）：
   site-shell.css 全站加载，脚注样式不再放在 styles.css */
.site-footer { min-height: 130px; padding: 32px max(32px, calc((100vw - 1320px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 30px; color: rgba(255,255,255,.6); background: var(--red-950); font-size: 11px; }
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-star { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid rgba(231,188,101,.5); border-radius: 2px; font-family: var(--serif); text-decoration: none; transition: color .2s, border-color .2s, transform .2s; }
.footer-star:hover, .footer-star:focus-visible { color: var(--gold-hover); border-color: var(--gold-strong); transform: rotate(-3deg) translateY(-2px); }
.footer-star:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.footer-brand div { display: flex; flex-direction: column; gap: 4px; }
.footer-brand strong { color: white; font: 700 17px/1 var(--serif); letter-spacing: .15em; }
.footer-brand small { font-size: 9px; }
.site-footer > p { color: var(--gold); letter-spacing: .35em; }

/* 列表页「聚焦返回」高亮（list-focus.js 共用，文章管理/归档页同一套动画，§44）：
   唯一声明处，其它页面 css 不得重复定义 post-flash */
.highlight { animation: post-flash 2.4s ease-out; }
@keyframes post-flash {
  from { background: rgba(231, 188, 101, .36); }
  to { background: transparent; }
}

/* 分页按钮共用基础样式（全站唯一：admin / admin-logs / archive 共用；
   各页 css 只保留容器布局差异） */
/* —— 分页按钮唯一来源（全站：文章管理 / 网站日志 / 归档 的完整分页 + 各页内联分页）——
    按钮与省略号类名由 pagination.js 统一生成（.pagination-button / .pagination-gap），
    所有页面共用此处样式；admin.css 不再各自声明（内联分页此前在 admin.css 另写一份，
    已并入此处，§62）。按钮默认淡红描边；hover 淡红洗色；当前页（深红实底）hover 变深红
    （--red-800），绝不洗白（§61）。 */
.pagination-button { padding: 7px 11px; color: var(--red); background: transparent; border: 1px solid var(--red); border-radius: 3px; cursor: pointer; font-size: 11px; }
.pagination-button:hover { background: var(--wash); }
.pagination-button:disabled { cursor: not-allowed; opacity: .5; }
.pagination-button.current { color: var(--white); background: var(--red); border-color: var(--red); }
.pagination-button.current:hover { background: var(--red-800); border-color: var(--red-800); }
.pagination-gap { padding: 0 4px; }

@media (max-width: 760px) {
  .nav-shell { width: calc(100% - 34px); height: var(--header-height-mobile); }
  .today, .desktop-nav { display: none; }
  .brand-copy small { display: block; white-space: nowrap; }
  .site-header a.admin-entry { font-size: 10px; }
  /* 移动端智能收起横幅（仅 site-shell.js 在开启「smart」时切换 .scroll-hidden）：
     下滚收起、上滚即显。用 translateY 上滑/下滑——沿 -100% 收起、回落 0 展开，收起态不拦截点击。
     桌面端不套用——类可能在窄屏加到宽屏后仍残留，但该规则只在 ≤760px 作用。
     注意：给 .site-header 设 transform 会使它成为 fixed 后代（.mobile-nav）的包含块，但菜单只能在
     横幅显示（未设 transform）时打开，故对菜单定位无影响。
     阴影的淡入淡出只作用于横幅底部的 box-shadow（透明度 = --header-shadow-alpha × --home-shadow-ramp），
     横幅本体不透明；淡入淡出过渡直接做在注册变量 --header-shadow-alpha 上（box-shadow 不做过渡）：
     —— 展开方向（去掉 .scroll-hidden → 基态过渡）：下滑（--header-animation-down）与阴影淡入
        （--header-fade-in）同步开始，时长各自独立；
     —— 收起方向（加 .scroll-hidden → 收起态过渡）：上滑（--header-animation-up）与阴影淡出末点对齐——
        淡出生效时长 min(淡出, 上滑)（--header-fade-out-effective）、推迟 = 上滑 − 生效时长
        （--header-fade-out-delay），上滑一结束阴影即完全消失，视口顶部不再残留阴影。
     首页滚动渐变与此解耦：JS 只改 --home-shadow-ramp（随滚动进度、无过渡），
     与这里的淡入/淡出（只改 --header-shadow-alpha、走过渡）互不干扰。 */
  .site-header { transition: transform var(--header-animation-down) ease, --header-shadow-alpha var(--header-fade-in) ease; }
  .site-header.scroll-hidden { transform: translateY(-100%); --header-shadow-alpha: 0; pointer-events: none; transition: transform var(--header-animation-up) ease, --header-shadow-alpha var(--header-fade-out-effective) ease var(--header-fade-out-delay); }
  .menu-button { width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 0; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.28); cursor: pointer; }
  .menu-button span { width: 18px; height: 1px; background: currentColor; transition: transform .25s; }
  .menu-button.open span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button.open span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav { position: fixed; inset: var(--header-height-mobile) 0 auto; height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; color: #fff; background: rgba(77,8,11,.97); overflow: hidden; opacity: 0; transition: height .35s, opacity .25s; }
  /* 展开高度用 dvh（动态视口高）实时跟随当前可见视口：浏览器自动隐藏地址栏/底部工具栏时
     视口变高，菜单随之铺满，不再在底部留出隐藏 chrome 高度的那条白条。
     先写 svh（稳定小视口）作旧浏览器兜底，再由支持 dvh 的浏览器覆盖。 */
  .mobile-nav.open { height: calc(100svh - var(--header-height-mobile)); height: calc(100dvh - var(--header-height-mobile)); opacity: 1; }
  .mobile-nav a { font: 700 26px/1 var(--serif); letter-spacing: .16em; }
  .site-footer { padding-block: 42px; align-items: flex-start; flex-direction: column; }
  .site-footer > p { order: -1; }
}

/* 系统「减少动态效果」：横幅收起/展开不做位移/阴影过渡（瞬时切换），尊重敏感用户。
   首页基态无过渡（渐变随进度即时联动），无需单独列 .home-page .site-header。 */
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header.scroll-hidden { transition: none; }
  /* 登录角标圆点位移同样瞬时（尊重系统「减少动态效果」） */
  .site-header a.admin-entry.active::after { transition: none; }
}