* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  line-height: 1.8;
  color: #333;
  background: #fafafa;
}

.site-header,
main,
.site-footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header {
  padding-top: 48px;
  padding-bottom: 8px;
}

.site-header h1 {
  margin: 0 0 8px;
  font-size: 24px;
}

.site-header h1 a {
  color: #222;
  text-decoration: none;
}

nav a {
  margin-right: 16px;
  color: #555;
  text-decoration: none;
  font-size: 15px;
}

nav a:hover { color: #000; }

main {
  padding-top: 16px;
  padding-bottom: 40px;
}

.intro {
  color: #888;
  font-size: 15px;
  margin-bottom: 32px;
}

.post {
  margin-bottom: 36px;
}

.post h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.post h3 a {
  color: #222;
  text-decoration: none;
}

.post h3 a:hover { text-decoration: underline; }

.date {
  margin: 0 0 10px;
  color: #aaa;
  font-size: 13px;
}

.post p {
  margin: 0;
}

.site-footer {
  padding-bottom: 48px;
  color: #bbb;
  font-size: 13px;
}

/* 页脚：© 一行，备案号另起一行 */
.site-footer p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
}

.site-footer .jicpb {
  color: #749ae3;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer .jicpb:hover {
  color: #4d7fd0;
  text-decoration: underline;
}

/* ---- 正文页 ---- */
.post-full h2 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.5;
}

.post-full .date {
  margin-bottom: 18px;
}

.post-full p {
  margin: 0 0 16px;
}

.back {
  font-size: 14px;
  margin-top: 8px;
}

.back a {
  color: #555;
  text-decoration: none;
}

.back a:hover {
  text-decoration: underline;
}


/* ══ 页面切换动画（纯 CSS，零 JS）══════════════════════════════════
   用浏览器原生的跨文档 View Transitions：站内跳转时旧页淡出、新页上浮淡入，
   页头作为共享元素保持稳定不闪。

   支持：Chrome / Edge 126+、Safari / iOS 18.2+。
   不支持：多数移动端浏览器（UC / QQ / 百度 / 三星）、iOS < 18.2 —— 这些走普通
   跳转、没有切换动画。原因：纯 CSS 在没有 VT 的前提下，做不到「旧页淡出 →
   新页淡入」，那种效果必须由 JS 在跳转前拦住导航才能实现。

   遵守 prefers-reduced-motion。 */


@view-transition {
  navigation: auto;
}

/* 页头在两页之间保持稳定，不参与整体淡入淡出 */
.site-header {
  view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: vt-out 150ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: vt-in 260ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* 这里原本放了一份 main 的入场淡入，作为不支持 VT 时的兜底，已移除：
     1. 它是「元素 UI 动画」，不是「页面切换动画」，是两回事
     2. 它和 VT 的交叉淡入叠加，就是 PC 端"两次动画"的来源
   结论：纯 CSS 只能做到 VT 本身。真正意义上的「旧页淡出 → 新页淡入」在不支持
   跨文档 VT 的浏览器（多数移动端浏览器、iOS < 18.2）上做不到，只能引入 JS。 */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}


/* ── 页头 RSS 按钮（nav 里「关于」右侧）──────────────────────── */
nav a.rss {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 0;
  padding: 2px 10px 2px 8px;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.7;
  color: #8a8a8a;
  text-decoration: none;
  vertical-align: 1px;
  transition: color 0.15s, border-color 0.15s;
}

nav a.rss:hover {
  color: #333;
  border-color: #bbb;
}

nav a.rss::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='19' r='2.6'/%3E%3Cpath d='M3.6 10.2A10.2 10.2 0 0 1 13.8 20.4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M3.6 3.6A16.8 16.8 0 0 1 20.4 20.4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='19' r='2.6'/%3E%3Cpath d='M3.6 10.2A10.2 10.2 0 0 1 13.8 20.4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M3.6 3.6A16.8 16.8 0 0 1 20.4 20.4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* ══ 页面切换（JS 兜底路径）══════════════════════════════════════
   这两条只对 assets/pt.js 打过类的页面生效，而 pt.js 在支持跨文档
   View Transitions 的浏览器上第一行就退出 —— 所以那批浏览器永远不命中，
   不会和 @view-transition 叠加。

   html 也铺上底色：body 淡到透明时露出的是同色背景，不会闪白。 */
html {
  background: #fafafa;
}

html.pt-out body {
  opacity: 0;
  transition: opacity 160ms ease-out;
}

html.pt-in body {
  animation: pt-in 260ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes pt-in {
  from { opacity: 0; }
}