/* ==========================================================================
   LO-FI · 1-BIT PIXEL DESIGN SYSTEM
   --------------------------------------------------------------------------
   设计约束（不要再加别的）：
   1. 只有两种颜色：--ink 纯黑 #000 / --paper 纯白 #fff。
      需要"灰"的地方用抖动（.dither）或反白，不要用 #333 / #eee。
   2. 只有两种字号：12px 与 12px 的整数倍（24 / 36 / 48）。
      Fusion Pixel 是 12px 点阵字体，非整数倍会糊。
      所以：任何 font-size 必须写成 12 / 24 / 36 / 48。
   3. 边框只用 1px / 2px / 4px，阴影只用 4px 4px 0。
   4. 版面只有上栏。没有侧边栏。
   5. 全局不使用 Tailwind / daisyUI 类名。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */

:root {
  --ink: #000;
  --paper: #fff;

  --fs-xs: 12px;
  --fs-s: 12px;
  --fs-m: 24px;
  --fs-l: 36px;
  --fs-xl: 48px;

  --lh: 24px;
  --unit: 12px;
  --gutter: 24px;

  --b1: 1px;
  --b2: 2px;
  --b4: 4px;

  --shadow: 4px 4px 0 var(--ink);
  --shadow-press: 2px 2px 0 var(--ink);

  --measure: 720px;
  --bar-h: 48px;

  /* 中文像素字体：Fusion Pixel（缝合像素字体，OFL-1.1）
     自托管于 /fonts/fusion-pixel/，由 partial/head.ejs 引入 @font-face。
     字族名必须是下面这两个完整名字，写错就退到系统字体。 */
  --font: "Fusion Pixel 12px Proportional Simplified Chinese",
    "Fusion Pixel 12px Proportional Latin", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}
/* 👇 深色模式（1-bit 反色）：当 html 拥有 .dark-theme 类时生效 */
html.dark-theme {
  --ink: #fff;
  --paper: #000;
}

html.dark-theme img,
html.dark-theme .pixelated {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-s);
  line-height: var(--lh);
  /* 点阵字体不要抗锯齿，否则像素边缘会糊 */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: var(--b2) solid var(--ink);
  outline-offset: var(--b2);
}

a {
  color: var(--ink);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

/* 抖动：用纯黑/纯白白点模拟 50% 灰，保持 1-bit */
.dither {
  background-image: repeating-conic-gradient(
    var(--ink) 0% 25%,
    transparent 0% 50%
  );
  background-size: 4px 4px;
}

.pixelated {
  image-rendering: pixelated;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--unit) var(--gutter);
}

.skip:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   3. 上栏 —— 全站唯一的导航
   -------------------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--b2) solid var(--ink);
}

.bar__inner {
  display: flex;
  align-items: stretch;
  min-height: var(--bar-h);
  /* 与正文栏同宽同轴心：上栏是唯一导航，必须和正文对齐 */
  max-width: var(--measure);
  margin: 0 auto;
}

.bar__brand {
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 2px;
  border-right: var(--b2) solid var(--ink);
  white-space: nowrap;
}

.bar__brand:hover,
.bar__brand:focus {
  background: var(--ink);
  color: var(--paper);
}

.bar__nav {
  margin-left: auto;
  display: flex;
  align-items: stretch;
}

/* 上栏导航始终可见：不做折叠，窄屏改为换行铺开 */
.menu__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  display: flex;
  border-left: var(--b2) solid var(--ink);
}

.menu__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--gutter);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.menu__link:hover,
.menu__link:focus,
.menu__link[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 800px) {
  .bar__inner {
    flex-wrap: wrap;
  }

  .bar__brand {
    width: 100%;
    min-height: var(--bar-h);
    border-right: 0;
    border-bottom: var(--b2) solid var(--ink);
  }

  .bar__nav {
    margin-left: 0;
    width: 100%;
  }

  .menu__list {
    width: 100%;
    flex-wrap: wrap;
  }

  .menu__item {
    /* 不允许压缩：宁可换到第二行，也不要把两个字挤没 */
    flex: 1 0 auto;
  }

  .menu__link {
    width: 100%;
    height: auto;
    min-height: var(--bar-h);
    justify-content: center;
    padding: 12px var(--gutter);
  }
}

/* --------------------------------------------------------------------------
   4. 版面骨架
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.main {
  padding: calc(var(--unit) * 3) 0 calc(var(--unit) * 6);
  min-height: 50vh;
}

.page-head {
  border-bottom: var(--b4) solid var(--ink);
  padding-bottom: var(--gutter);
  margin-bottom: calc(var(--unit) * 3);
}

.page-head__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.page-head__meta {
  margin: var(--unit) 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 首屏：全站唯一"花力气"的地方 */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--unit) * 3) var(--gutter);
  margin-bottom: calc(var(--unit) * 3);
}

.hero__name {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 48px;
  word-break: break-word;
}

.hero__desc {
  margin: var(--unit) 0 0;
  font-size: var(--fs-m);
  line-height: var(--lh);
  max-width: 36ch;
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
  margin-top: var(--gutter);
}

.hero__link {
  border: var(--b2) solid var(--paper);
  color: var(--paper);
  padding: var(--unit) var(--gutter);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero__link:hover,
.hero__link:focus {
  background: var(--paper);
  color: var(--ink);
}

/* hero 本身就是黑块，下沿不再加装饰条 */

/* --------------------------------------------------------------------------
   5. 首页文章列表
   -------------------------------------------------------------------------- */

.lede {
  margin: 0 0 var(--gutter);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.entry {
  border-bottom: var(--b2) solid var(--ink);
  padding-bottom: var(--gutter);
  margin-bottom: var(--gutter);
}

.entry:last-child {
  border-bottom: 0;
}

.entry__date {
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--unit);
}

.entry__title {
  margin: 0 0 var(--unit);
  font-size: var(--fs-m);
  line-height: var(--lh);
  font-weight: 700;
}

.entry__title a {
  border-bottom: var(--b2) solid transparent;
}

.entry__title a:hover,
.entry__title a:focus {
  background: var(--ink);
  color: var(--paper);
}

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
  margin: 0 0 var(--unit);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.entry__meta a {
  border-bottom: var(--b2) solid var(--ink);
}

.entry__meta a:hover,
.entry__meta a:focus {
  background: var(--ink);
  color: var(--paper);
}

.entry__excerpt {
  margin: 0 0 var(--unit);
}

.entry__excerpt > :last-child {
  margin-bottom: 0;
}

.entry__more {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: var(--b2) solid var(--ink);
}

.entry__more:hover,
.entry__more:focus {
  background: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   6. 分页
   -------------------------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  margin-top: calc(var(--unit) * 3);
  padding-top: var(--gutter);
  border-top: var(--b4) solid var(--ink);
}

.pager__info {
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.pager__links {
  display: flex;
  gap: var(--unit);
}

/* 通用像素按钮 */
.btn {
  display: inline-block;
  padding: var(--unit) var(--gutter);
  background: var(--paper);
  color: var(--ink);
  border: var(--b2) solid var(--ink);
  box-shadow: var(--shadow);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-press);
  transform: translate(2px, 2px);
}

/* --------------------------------------------------------------------------
   7. 文章页
   -------------------------------------------------------------------------- */

.article__title {
  margin: 0 0 var(--unit);
  font-size: var(--fs-l);
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 1px;
  word-break: break-word;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.article__meta a {
  border-bottom: var(--b2) solid var(--ink);
}

.article__meta a:hover,
.article__meta a:focus {
  background: var(--ink);
  color: var(--paper);
}

/* 目录：以前在侧边栏，现在折叠在正文上方 */
.tocbox {
  border: var(--b2) solid var(--ink);
  margin-bottom: calc(var(--unit) * 2);
}

.tocbox > summary {
  display: block;
  padding: var(--unit) var(--gutter);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.tocbox > summary::-webkit-details-marker {
  display: none;
}

.tocbox[open] > summary {
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--b2) solid var(--ink);
}

.tocbox__body {
  padding: var(--gutter);
}

.toc {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc ol {
  margin: 0;
  padding-left: var(--gutter);
  list-style: none;
}

.toc li {
  margin: 0;
}

.toc a {
  display: block;
  padding: 2px 0;
  border-bottom: var(--b2) solid transparent;
}

.toc a:hover,
.toc a:focus {
  background: var(--ink);
  color: var(--paper);
}

/* 许可 / 原文链接 */
.note {
  margin-top: calc(var(--unit) * 3);
  border: var(--b2) solid var(--ink);
  padding: var(--gutter);
}

.note__title {
  margin: 0 0 var(--unit);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.note__body {
  margin: 0;
}

.note__body a {
  border-bottom: var(--b2) solid var(--ink);
}

.note__link {
  display: block;
  margin-top: var(--unit);
  font-family: var(--font-code);
  font-size: var(--fs-xs);
  word-break: break-all;
}

/* 上一篇 / 下一篇 */
.postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--b4) solid var(--ink);
  margin-top: calc(var(--unit) * 3);
}

.postnav__item {
  display: block;
  padding: var(--gutter);
  border-bottom: var(--b2) solid var(--ink);
}

.postnav__item:first-child {
  border-right: var(--b2) solid var(--ink);
}

/* 只有一篇相邻文章时让它占满整行，不留空栅格 */
.postnav__item:only-child {
  grid-column: 1 / -1;
  border-right: 0;
}

.postnav__item:hover,
.postnav__item:focus {
  background: var(--ink);
  color: var(--paper);
}

.postnav__label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--unit);
}

.postnav__title {
  display: block;
  font-size: var(--fs-m);
  line-height: var(--lh);
  font-weight: 700;
}

.postnav__item--next {
  text-align: right;
}

@media (max-width: 600px) {
  .postnav {
    grid-template-columns: 1fr;
  }

  .postnav__item:first-child {
    border-right: 0;
  }

  .postnav__item--next {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   8. 归档 / 分类 / 标签
   -------------------------------------------------------------------------- */

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.year {
  margin: calc(var(--unit) * 2) 0 var(--unit);
  font-size: var(--fs-l);
  font-weight: 700;
  letter-spacing: 4px;
  border-bottom: var(--b4) solid var(--ink);
}

.year:first-child {
  margin-top: 0;
}

.archive__item {
  display: flex;
  gap: var(--gutter);
  align-items: baseline;
  padding: var(--unit) 0;
  border-bottom: var(--b1) solid var(--ink);
}

.archive__date {
  flex: none;
  font-family: var(--font-code);
  font-size: var(--fs-xs);
}

.archive__title {
  margin: 0;
  font-size: var(--fs-m);
  line-height: var(--lh);
  font-weight: 700;
}

.archive__title a:hover,
.archive__title a:focus {
  background: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   9. 正文排版（.prose）
   -------------------------------------------------------------------------- */

.prose {
  margin: 0;
}

/* 长链接 / 长英文串不要撑破版面 */
.prose :where(p, li, blockquote, td, th, a, h2, h3, h4) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  scroll-margin-top: calc(var(--bar-h) + var(--unit) * 2);
}

.prose h2 {
  font-size: var(--fs-m);
  line-height: var(--lh);
  margin: calc(var(--unit) * 3) 0 var(--unit);
  padding-top: var(--unit);
  border-top: var(--b4) solid var(--ink);
}

.prose h3 {
  font-size: var(--fs-m);
  line-height: var(--lh);
  margin: calc(var(--unit) * 2) 0 var(--unit);
}

.prose h4,
.prose h5,
.prose h6 {
  font-size: var(--fs-xs);
  margin: calc(var(--unit) * 2) 0 var(--unit);
}

.prose p {
  margin: 0 0 var(--lh);
}

.prose a {
  border-bottom: var(--b2) solid var(--ink);
}

.prose a:hover,
.prose a:focus {
  background: var(--ink);
  color: var(--paper);
}

.prose strong {
  font-weight: 700;
}

.prose ul,
.prose ol {
  margin: 0 0 var(--lh);
  padding-left: var(--gutter);
}

.prose ul {
  list-style: square;
}

.prose li {
  margin: 0 0 6px;
}

.prose li::marker {
  color: var(--ink);
}

.prose blockquote {
  margin: 0 0 var(--lh);
  padding: var(--unit) var(--gutter);
  border-left: var(--b4) solid var(--ink);
}

.prose blockquote > :last-child {
  margin-bottom: 0;
}

.prose hr {
  height: var(--b2);
  margin: calc(var(--unit) * 2) 0;
  border: 0;
  background: var(--ink);
}

.prose img {
  display: block;
  margin: var(--lh) auto;
  border: var(--b2) solid var(--ink);
}

.prose figure {
  margin: var(--lh) 0;
}

.prose figcaption {
  font-size: var(--fs-xs);
  text-align: center;
  margin-top: var(--unit);
}

.prose table {
  width: 100%;
  margin: 0 0 var(--lh);
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.prose th,
.prose td {
  border: var(--b2) solid var(--ink);
  padding: 6px var(--unit);
  text-align: left;
}

.prose th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 行内代码：反白，不做灰色底 */
.prose code {
  font-family: var(--font-code);
  font-size: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 0 4px;
}

/* 代码块：黑底白字 */
.prose pre,
figure.highlight {
  margin: 0 0 var(--lh);
  background: var(--ink);
  color: var(--paper);
  border: var(--b2) solid var(--ink);
  overflow-x: auto;
}

.prose pre {
  padding: var(--unit);
}

.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  display: block;
  line-height: 18px;
}

/* Hexo highlight.js 输出：figure.highlight > table.gutter + table.code */
figure.highlight {
  /* figure 本身由 JS 插入 .code-header，因此用 flex 纵向排 */
  display: flex;
  flex-direction: column;
}

figure.highlight table,
figure.highlight tbody,
figure.highlight tr {
  display: block;
  border-collapse: collapse;
}

figure.highlight table {
  margin: 0;
  width: auto;
}

figure.highlight td {
  padding: 0;
  border: 0;
  vertical-align: top;
}

figure.highlight pre {
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: var(--unit);
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 18px;
}

figure.highlight .gutter {
  display: none; /* 行号在极简版面里是噪音 */
}

figure.highlight .line {
  display: block;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--unit);
  padding: 0 var(--unit);
  min-height: var(--unit);
  background: var(--paper);
  color: var(--ink);
  border-bottom: var(--b2) solid var(--ink);
  font-family: var(--font-code);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.code-header button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: var(--b2) solid var(--ink);
}

.code-header button:hover,
.code-header button:focus {
  background: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   10. 搜索弹窗
   -------------------------------------------------------------------------- */

dialog.dlg {
  width: min(var(--measure), calc(100% - 32px));
  max-height: calc(100vh - 64px);
  margin: auto;
  padding: 0;
  border: var(--b4) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-s);
}

dialog.dlg::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  background-image: repeating-conic-gradient(
    var(--ink) 0% 25%,
    transparent 0% 50%
  );
  background-size: 4px 4px;
}

.dlg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--unit);
  padding: var(--unit) var(--gutter);
  border-bottom: var(--b2) solid var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.dlg__body {
  padding: var(--gutter);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.dlg__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--unit) var(--gutter);
  border-top: var(--b2) solid var(--ink);
}

.field {
  width: 100%;
  padding: var(--unit);
  border: var(--b2) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-s);
}

.field::placeholder {
  color: var(--ink);
  opacity: 0.6;
}

.results {
  margin: var(--gutter) 0 0;
  padding: 0;
  list-style: none;
}

.results li {
  border-bottom: var(--b1) solid var(--ink);
}

.results li:last-child {
  border-bottom: 0;
}

.results a {
  display: block;
  padding: var(--unit) 0;
}

.results a:hover,
.results a:focus {
  background: var(--ink);
  color: var(--paper);
}

.results__title {
  display: block;
  font-size: var(--fs-m);
  line-height: var(--lh);
  font-weight: 700;
  margin-bottom: 4px;
}

.results__snippet {
  display: block;
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.results__empty {
  padding: var(--gutter) 0;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. 页脚
   -------------------------------------------------------------------------- */

.foot {
  border-top: var(--b4) solid var(--ink);
  padding: calc(var(--unit) * 2) 0;
  font-size: var(--fs-xs);
  letter-spacing: 2px;
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit) var(--gutter);
  align-items: baseline;
  justify-content: space-between;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}

.foot__links a {
  border-bottom: var(--b2) solid var(--ink);
}

.foot__links a:hover,
.foot__links a:focus {
  background: var(--ink);
  color: var(--paper);
}

.foot__copy {
  margin: 0;
}

/* 独立页面底部的次级导航 */
.page-more {
  margin: calc(var(--unit) * 4) 0 0;
  padding-top: var(--gutter);
  border-top: var(--b2) solid var(--ink);
  display: flex;
  gap: var(--gutter);
}

.page-more a {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: var(--b2) solid var(--ink);
}

.page-more a:hover,
.page-more a:focus {
  background: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   12. PJAX 过渡
   -------------------------------------------------------------------------- */

.fade-in,
.fade-in-up {
  animation: fade-in 160ms steps(4, end) both;
}

.pjax-loading {
  opacity: 0.35;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-up {
    animation: none;
  }
}
/* 关于页：右上角悬浮图片 */
.about-photo {
  float: right;
  width: 420px;
  height: auto;
  margin: 0 0 var(--gutter) var(--gutter);
  border: var(--b2) solid var(--ink);
  image-rendering: pixelated;
}

/* 窄屏：图片不再浮动，居中放在文字上方 */
@media (max-width: 600px) {
  .about-photo {
    float: none;
    display: block;
    max-width: 360px;
    margin: 0 auto var(--gutter);
  }
}
/* 深色模式下，带有 no-invert 类的图片保持原色 */
html.dark-theme .no-invert {
  filter: none;
}