/* ══ 样式总入口 ═════════════════════════════════════════════
   layout.ejs 的 head 只引这一个文件，其余样式表在这里汇总。

   为什么要单独起一个文件，而不是在 layout.styl 顶部 @import：

   Stylus 的 @import 是【在哪里写就在哪里内联】。写在 layout.styl
   顶部的话，被引入的 8 个文件会全部排在 layout.styl 自己那些规则的
   【前面】，等于把 layout.styl 整个挪到了最后 —— 连带 responsive.styl
   里的媒体查询也被顶到它前面去了。

   媒体查询本身不加权重，覆盖全靠源码顺序。顺序一乱，
   @media (max-width: 768px) 里的 .leftBar { width: 100% }
   就会被后面 layout.styl 的 .leftBar { width: 30% } 盖掉，
   表现是【电脑端正常、手机端样式全乱】。

   所以本文件自己【一条规则都不写】，只负责排列顺序。
   ──────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout {
  height: 100vh;
  width: 100%;
  display: flex;
}
.leftBar {
  height: inherit;
  position: relative;
  overflow: hidden;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.leftBar::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(rgba(30,23,21,0.58) /* 壁纸压暗层 */, rgba(30,23,21,0.58) /* 壁纸压暗层 */), url("/images/background.jpg");
  filter: blur(3px);
  z-index: -1;
}
.leftBarScroll {
  flex: 1 /* 占满导航以上的剩余高度 */;
  min-height: 0 /* flex 子项的默认最小高是内容高，不写这行它不肯收缩，也就滚不起来 */;
  width: 100%;
  position: relative /* 头像 .leftBarAvatar 靠这层定位，跟着内容一起滚 */;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.leftBarScroll::-webkit-scrollbar {
  width: 6px;
}
.leftBarScroll::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(245,241,238,0.22);
}
.leftBarAvatar {
  border-radius: 50%;
  transform: translate(-50%, -45%);
  top: 0;
  left: 50%;
  position: absolute;
  background-image: url("/images/avatar.jpg");
  background-size: cover;
  background-position: center;
  width: 100px;
  height: 100px;
  border: 3px solid rgba(245,241,238,0.9);
  box-shadow: 0 0 0 4px rgba(179,18,63,0.55) /* 酒红柔光 */, 0 10px 30px rgba(16,10,9,0.5);
}
.rightPage {
  flex: 1;
  position: relative;
/* 这一层不再滚，只负责两件事：
       给 ::before 当定位锚点、把溢出裁掉。 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rightPageInner {
  flex: 1;
  min-height: 0 /* 关键：不加的话 flex 子项不肯收缩，整个滚不动 */;
  padding: 2rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.rightPage::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: top;
  background-image: url("/images/articlepic11.webp");
  filter: blur(6px);
  z-index: -1;
}
.userDetail {
  margin: 50px 20px 0;
  padding: 16px 12px;
  border-radius: 12px;
  background-color: rgba(46,36,33,0.5) /* 卡片底：暖褐半透明 */;
/* saturate() 让卡片"透"出壁纸的红棕调，配色融进背景的关键就是它 */
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  text-align: center;
  box-shadow: 0 8px 28px rgba(16,10,9,0.35);
  transition: transform 1s, box-shadow 0.4s;
}
.userDetail:hover {
  transform: translateY(8px);
  box-shadow: 0 14px 34px rgba(179,18,63,0.55) /* 酒红柔光 */;
}
.userDetail p {
  line-height: 1.7;
}
.userDetail p:first-of-type {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(179,18,63,0.55) /* 酒红柔光 */, 0 2px 6px rgba(16,10,9,0.7);
}
.userDetail p:not(:first-of-type) {
  font-size: 15px;
  color: rgba(245,241,238,0.74) /* 次要文字 */;
}
.leftNar {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background-color: rgba(30,23,21,0.42) /* 导航栏底衬 */;
  margin-top: auto;
}
.navItem {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: rgba(245,241,238,0.74) /* 次要文字 */;
  font-size: 20px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s, color 0.3s, border-color 0.3s;
}
.navItem:hover {
  background-color: rgba(179,18,63,0.3);
  border-left-color: #b3123f /* 主强调：领带的酒红 */;
  transform: translateX(6px);
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
}
.navItem.active {
  background-color: rgba(179,18,63,0.45);
  border-left-color: #d99846 /* 次强调：齿轮数字的琥珀金 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-weight: 700;
}
.sideStat {
  align-self: stretch;
  display: flex;
  margin: 20px;
  padding: 14px 0;
  border-radius: 12px;
  background-color: rgba(46,36,33,0.5) /* 卡片底：暖褐半透明 */;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  box-shadow: 0 8px 24px rgba(16,10,9,0.28);
}
.statItem {
  flex: 1 /* 三等分，自动平分宽度 */;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  transition: transform 0.2s;
}
.statItem:hover {
  transform: translateY(-3px);
}
.statItem:not(:last-child) {
  border-right: 1px solid rgba(245,241,238,0.22) /* 描边 */;
}
.statNum {
  font-size: 22px;
  font-weight: 900;
  color: #d99846 /* 次强调：齿轮数字的琥珀金 */ /* 数字用琥珀金，呼应齿轮上那串数字 */;
  text-shadow: 0 0 12px rgba(217,152,70,0.5);
}
.statLabel {
  font-size: 12px;
  opacity: 0.8;
}
.category {
  width: 80%;
  padding: 14px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  background-color: rgba(179,18,63,0.2);
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  border-radius: 12px;
}
.categoryItem {
  cursor: pointer;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  color: rgba(245,241,238,0.74) /* 次要文字 */;
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s, color 0.3s;
}
.categoryItem:hover {
  background-color: rgba(179,18,63,0.35);
  transform: translateX(6px);
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
}
.categoryItem.active {
  background-color: rgba(179,18,63,0.5);
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-weight: 700;
}
.socialBar {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 16px 0;
}
.socialItem {
  position: relative /* 给二维码当定位锚点 */;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 /* <button> 自带内边距，不清掉图标会偏 */;
  border-radius: 50%;
  background-color: rgba(46,36,33,0.5) /* 卡片底：暖褐半透明 */;
  border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-family: inherit /* <button> 默认不继承字体 */;
  font-size: 18px /* 上面那条 font-size 现在只对二维码按钮里的
                                      文字有意义了，图标本身靠下面 .socialIcon */;
  text-decoration: none;
  transition: background-color 0.25s, transform 0.25s;
}
.socialIcon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
.socialItem:hover {
  background-color: rgba(179,18,63,0.45);
  transform: translateY(-3px);
}
.socialWechat {
  cursor: pointer /* 它能被聚焦，给个手势提示 */;
}
.socialWechat:focus {
  background-color: rgba(179,18,63,0.45);
}
.wechatQr {
  position: absolute;
  bottom: 52px /* 弹在按钮上方 */;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  width: 140px;
  opacity: 0;
  pointer-events: none /* 隐藏时别挡着鼠标 */;
  border-radius: 8px;
  transition: opacity 0.25s, transform 0.25s;
}
.socialWechat:hover .wechatQr,
.socialWechat:focus .wechatQr {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.postList {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.postItem {
  padding: 24px;
  border-radius: 12px;
  background-color: #faf7f5;
  border-left: 4px solid #b3123f /* 主强调：领带的酒红 */;
  box-shadow: 0 6px 20px rgba(30,23,21,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.postItem:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(179,18,63,0.18);
}
.postExcerpt {
  font-size: 15px;
  line-height: 1.8;
  color: #4a423e;
  margin-bottom: 14px;
}
.readMore {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #b3123f /* 主强调：领带的酒红 */;
  text-decoration: none;
}
.readMore:hover {
  text-decoration: underline;
}
.post {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 40px /* 必须加，不然文字贴着卡片边 */;
  border-radius: 16px;
  background-color: rgba(250,247,245,0.92) /* 跟 .pageCard / .postItem 同一个色号 */;
  border: 1px solid rgba(255,255,255,0.5) /* 一圈浅色高光边，毛玻璃质感 */;
  box-shadow: 0 10px 40px rgba(30,23,21,0.12);
}
.postHeader {
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(30,23,21,0.1);
}
.post .postTitle {
  font-size: 30px;
  margin-bottom: 12px;
}
.postContent {
  font-size: 16px;
  line-height: 1.9;
  color: #3d3733;
}
.postContent p,
.postContent ul,
.postContent ol,
.postContent blockquote,
.postContent pre {
  margin-bottom: 1.2em;
}
.postContent ul,
.postContent ol {
  padding-left: 2.2em /* 列表缩进也被 * 重置清掉了。
                              标号放大后占位变宽（见下），1.6em 会让两位数的
                              有序标号顶到正文文字上，所以比原来多留 0.6em。 */;
}
.postContent ul > li::marker,
.postContent ol > li::marker {
  color: #b3123f /* 主强调：领带的酒红 */;
  font-size: 1.25em;
  font-weight: 600;
}
.postContent > p,
.postContent > details > p {
  text-indent: 2em;
}
.postContent > p:has(> img:only-child),
.postContent > details > p:has(> img:only-child) {
  text-indent: 0;
  text-align: center;
}
.postContent h1 {
  font-size: 24px;
  line-height: 1.4;
  margin: 2.2em 0 0.9em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(179,18,63,0.18);
}
.postContent h2 {
  font-size: 20px;
  margin: 2em 0 0.8em;
  padding-left: 12px;
  border-left: 4px solid #b3123f /* 主强调：领带的酒红 */;
}
.postContent h3 {
  font-size: 17px;
  margin: 1.8em 0 0.7em;
  padding-left: 10px;
  border-left: 3px solid #d99846 /* 次强调：齿轮数字的琥珀金 */ /* 比 h2 细一档，用次强调色 */;
}
.postContent h4 {
  font-size: 16px;
  margin: 1.6em 0 0.6em;
  color: #b3123f /* 主强调：领带的酒红 */;
}
.postContent h5 {
  font-size: 15px;
  margin: 1.4em 0 0.5em;
  color: #6b625c;
}
.postContent h6 {
  font-size: 14px;
  margin: 1.4em 0 0.5em;
  letter-spacing: 0.06em;
  color: #8a817c;
}
.postContent h1,
.postContent h2,
.postContent h3,
.postContent h4,
.postContent h5,
.postContent h6 {
  scroll-margin-top: 20px;
}
.postContent a {
  color: #b3123f /* 主强调：领带的酒红 */;
}
.postContent img {
  max-width: 100% /* 不加的话大图会撑破容器 */;
  border-radius: 8px;
}
.postContent blockquote {
  padding: 12px 16px;
  border-left: 4px solid #d99846 /* 次强调：齿轮数字的琥珀金 */;
  background-color: rgba(217,152,70,0.08);
  color: #6b625c;
}
.postContent pre {
  padding: 16px;
  border-radius: 8px;
  background-color: #2b2422;
  color: #f5f1ee;
  overflow-x: auto /* 长代码行别撑破布局 */;
  font-size: 14px;
}
.postContent :not(pre) > code {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(179,18,63,0.1);
  color: #b3123f /* 主强调：领带的酒红 */;
  font-size: 0.9em;
}
.postContent figure.highlight {
  margin: 0 0 1.2em;
  border-radius: 8px;
  background-color: #2b2422;
  overflow-x: auto /* 横向滚动放在最外层，行号和代码一起滚 */;
}
.postContent figure.highlight td.gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 14px 12px 14px 16px;
  background-color: #2b2422 /* 必须不透明，否则下面的代码会透出来 */;
  border-right: 1px solid rgba(245,241,238,0.1);
  color: rgba(245,241,238,0.3);
  text-align: right;
  user-select: none /* 选中复制时别把行号一起带走 */;
}
.postContent figure.highlight td.code {
  padding: 14px 16px;
}
.postContent figure.highlight table {
  margin: 0;
  border: none;
  border-collapse: collapse;
  width: auto;
}
.postContent figure.highlight pre {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  overflow: visible;
  font-size: 14px;
  line-height: 1.65;
  color: #f5f1ee;
}
.postContent figure.highlight .comment,
.postContent figure.highlight .quote {
  color: #8a817c;
  font-style: italic;
}
.postContent figure.highlight .keyword,
.postContent figure.highlight .selector-tag,
.postContent figure.highlight .literal,
.postContent figure.highlight .doctag,
.postContent figure.highlight .meta-keyword {
  color: #e0708f;
}
.postContent figure.highlight .string,
.postContent figure.highlight .regexp,
.postContent figure.highlight .meta-string,
.postContent figure.highlight .addition {
  color: #d99846;
}
.postContent figure.highlight .number,
.postContent figure.highlight .built_in,
.postContent figure.highlight .type,
.postContent figure.highlight .symbol,
.postContent figure.highlight .class {
  color: #7fb3d5;
}
.postContent figure.highlight .title,
.postContent figure.highlight .function,
.postContent figure.highlight .section,
.postContent figure.highlight .name {
  color: #8fbf9f;
}
.postContent figure.highlight .params,
.postContent figure.highlight .variable,
.postContent figure.highlight .template-variable,
.postContent figure.highlight .attr,
.postContent figure.highlight .attribute {
  color: #b9a3d6;
}
.postContent figure.highlight .tag,
.postContent figure.highlight .selector-id,
.postContent figure.highlight .selector-class,
.postContent figure.highlight .selector-attr,
.postContent figure.highlight .selector-pseudo {
  color: #e0708f;
}
.postContent figure.highlight .deletion {
  color: #e0708f;
}
.postContent figure.highlight .emphasis {
  font-style: italic;
}
.postContent figure.highlight .strong {
  font-weight: 600;
}
.postContent > table {
  width: 100%;
  margin-bottom: 1.2em;
  border-collapse: collapse;
  font-size: 0.94em;
}
.postContent > table th,
.postContent > table td {
  padding: 8px 12px;
  border: 1px solid rgba(30,23,21,0.12);
  text-align: left;
}
.postContent > table thead th {
  background-color: rgba(179,18,63,0.07);
  color: #241d1b;
  font-weight: 600;
}
.postContent > table tbody tr:nth-child(even) {
  background-color: rgba(30,23,21,0.025);
}
.postContent > table th[align="center"],
.postContent > table td[align="center"] {
  text-align: center;
}
.postContent > table th[align="right"],
.postContent > table td[align="right"] {
  text-align: right;
}
.postContent hr {
  margin: 2.4em 0;
  border: none;
  border-top: 1px solid rgba(30,23,21,0.14);
}
.postContent li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.6em;
}
.postContent input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: baseline;
  accent-color: #b3123f /* 主强调：领带的酒红 */;
}
.postContent strong {
  color: inherit;
  font-weight: 600 /* 靠字重区分，不再靠加深颜色 */;
}
.postContent del {
  color: inherit;
  opacity: 0.55;
}
.postContent details {
  margin-bottom: 1.2em;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: rgba(217,152,70,0.08);
  border: 1px solid rgba(217,152,70,0.22);
}
.postContent summary {
  cursor: pointer;
  color: #b3123f /* 主强调：领带的酒红 */;
  font-weight: 600;
}
.postContent details > :last-child {
  margin-bottom: 0 /* 展开后最后一段别在框底多顶出一截 */;
}
.postNav {
  display: flex;
  gap: 16px;
  max-width: 800px;
  margin: 40px auto 0;
}
.postNavItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 12px;
  background-color: #faf7f5;
  border: 1px solid rgba(30,23,21,0.08);
  text-decoration: none;
  transition: border-color 0.25s;
}
.postNavItem:hover {
  border-color: #b3123f /* 主强调：领带的酒红 */;
}
.postNavLabel {
  font-size: 12px;
  color: #8a817c;
}
.postNavTitle {
  font-size: 15px;
  color: #241d1b;
}
.postNavNext {
  text-align: right;
}
.archiveTree {
  padding-left: 8px;
}
.treeYear {
  margin-bottom: 36px;
}
.treeYearTitle {
  font-size: 24px;
  color: #b3123f /* 主强调：领带的酒红 */;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(179,18,63,0.25);
}
.treeMonth {
  margin: 0 0 20px 20px /* 缩进一层，层级不用解释也看得出来 */;
  padding-left: 18px;
  border-left: 2px solid rgba(179,18,63,0.18);
}
.treeMonthTitle {
  font-size: 16px;
  color: #8a817c;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.treeList {
  list-style: none /* 全局 * 重置没管圆点，得手动干掉 */;
}
.treeItem {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}
.treeDay {
  font-size: 13px;
  color: #a89f99;
  font-variant-numeric: tabular-nums /* 数字等宽，"1日"和"15日"才对得齐 */;
  flex-shrink: 0;
}
.treeLink {
  font-size: 15px;
  color: #3d3733;
  text-decoration: none;
  transition: color 0.2s;
}
.treeLink:hover {
  color: #b3123f /* 主强调：领带的酒红 */;
}
.pageCard {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 36px;
  border-radius: 16px;
  background-color: rgba(250,247,245,0.92);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 10px 40px rgba(30,23,21,0.12);
}
.listHeader {
  margin-bottom: 28px;
  padding-left: 16px;
  border-left: 5px solid #b3123f /* 主强调：领带的酒红 */;
}
.listTitle {
  font-size: 28px;
  color: #241d1b;
}
.emptyState {
  padding: 80px 20px;
  text-align: center;
  color: #8a817c;
  font-size: 15px;
  line-height: 2;
}
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}
.pager a {
  padding: 8px 18px;
  border-radius: 8px;
  background-color: #b3123f /* 主强调：领带的酒红 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.25s;
}
.pager a:hover {
  opacity: 0.82;
}
.pager span {
  font-size: 14px;
  color: #8a817c;
}
.tagCloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tagCloudItem {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px /* 大圆角胶囊 —— 跟分类的小方角拉开距离 */;
  background-color: rgba(179,18,63,0.1);
  border: 1px solid rgba(179,18,63,0.25);
  color: #b3123f /* 主强调：领带的酒红 */;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.25s, transform 0.2s;
}
.tagCloudItem:hover {
  background-color: rgba(179,18,63,0.22);
  transform: translateY(-2px);
}
.tagCloudCount {
  font-size: 12px;
  opacity: 0.6;
}
.postTitle {
  font-size: 22px;
  margin-bottom: 8px;
}
.postTitle a {
  color: #241d1b;
  text-decoration: none;
  transition: color 0.25s;
}
.postTitle a:hover {
  color: #b3123f /* 主强调：领带的酒红 */;
}
.postMeta {
  font-size: 13px;
  color: #8a817c;
  margin-bottom: 12px;
}
.metaLink {
  display: inline-block;
  padding: 2px 9px;
  margin-right: 4px;
  border-radius: 4px;
  border-left: 3px solid #d99846 /* 次强调：齿轮数字的琥珀金 */;
  background-color: rgba(217,152,70,0.14);
  color: #a8722c /* 琥珀压深。crisAmber 太浅，压在浅底上读不清 */;
  font-size: 12px;
  text-decoration: none;
  transition: background-color 0.25s;
}
.metaLink:hover {
  background-color: rgba(217,152,70,0.3);
}
.postTags {
  display: flex;
  flex-wrap: wrap /* 标签多了自动换行，不写会挤成一行 */;
  gap: 8px;
  margin-top: 14px;
}
.postTag {
  padding: 3px 10px;
  border-radius: 20px;
  background-color: rgba(179,18,63,0.1);
  border: 1px solid rgba(179,18,63,0.25);
  color: #b3123f /* 主强调：领带的酒红 */;
  font-size: 12px;
  text-decoration: none;
  transition: background-color 0.25s;
}
.postTag:hover {
  background-color: rgba(179,18,63,0.22);
}
.notFound {
  text-align: center /* 整块居中，跟其它页的左对齐区分开 */;
  padding: 80px 36px;
}
.notFoundCode {
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 4px;
  color: #b3123f /* 主强调：领带的酒红 */;
  text-shadow: 0 0 40px rgba(179,18,63,0.55) /* 酒红柔光 */, 0 4px 12px rgba(30,23,21,0.18);
}
.notFoundTitle {
  font-size: 24px;
  color: #241d1b;
  margin: 18px 0 10px;
}
.notFoundDesc {
  font-size: 15px;
  line-height: 1.9;
  color: #8a817c;
}
.notFoundLinks {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.notFoundBtn {
  padding: 10px 24px;
  border-radius: 8px;
  background-color: #b3123f /* 主强调：领带的酒红 */;
  color: #f5f1ee /* 主文字：衬衫的暖白 */;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.25s, background-color 0.25s;
}
.notFoundBtn:hover {
  opacity: 0.82;
}
.notFoundBtnGhost {
  background-color: transparent;
  border: 1px solid rgba(179,18,63,0.35);
  color: #b3123f /* 主强调：领带的酒红 */;
}
.notFoundBtnGhost:hover {
  background-color: rgba(179,18,63,0.1);
  opacity: 1;
}
html {
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 1024px) {
  .leftBar {
    width: 32%;
  }
  .rightPageInner {
    padding: 1.5rem;
  }
  .post {
    padding: 36px 28px;
  }
  .pageCard {
    padding: 32px 26px;
  }
  .userDetail {
    margin: 40px 14px 0;
  }
  .category {
    width: 88%;
  }
}
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .leftBar {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    overflow: visible /* 放二维码往下弹，理由见下面的 .wechatQr */;
  }
  .leftBar::before {
    inset: 0;
  }
  .leftBar br {
    display: none;
  }
  .leftBarAvatar {
    position: static;
    transform: none;
    float: left;
    width: 76px;
    height: 76px;
    margin: 2px 22px 4px 0 /* 右边这 22px 就是头像和名字之间的距离，想让文字再往右就调它 */;
  }
  .userDetail {
    width: 100%;
    max-width: 420px;
    overflow: hidden /* 包住浮动头像。缺这行卡片高度算不到它，头像会溢出卡片外 */;
    margin: 14px auto 0;
    padding: 12px;
    text-align: left;
  }
  .userDetail p:first-of-type {
    font-size: 20px;
  }
  .userDetail p:not(:first-of-type) {
    font-size: 14px;
  }
  .socialBar {
    margin: 14px 0 0;
  }
  .wechatQr {
    top: 52px /* 弹在按钮下方（桌面端的 bottom: 52px 要抵掉） */;
    bottom: auto;
    width: 130px;
    z-index: 10 /* .rightPage 是排在后面的定位元素，
                                  不加这行二维码会被右栏整个盖住 */;
  }
  .category {
    width: 100%;
    max-width: 420px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px auto;
    padding: 0;
    background-color: transparent;
    border: none;
  }
  .categoryItem {
    padding: 8px 14px;
    font-size: 14px;
    background-color: rgba(179,18,63,0.28);
    border: 1px solid rgba(245,241,238,0.22) /* 描边 */;
  }
  .leftNar {
    flex-direction: row;
    gap: 4px;
    padding: 8px 10px;
    margin-top: 0;
  }
  .navItem {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    font-size: 16px;
    letter-spacing: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .navItem:hover {
    transform: none;
    border-bottom-color: #b3123f /* 主强调：领带的酒红 */;
  }
  .navItem.active {
    border-left-color: transparent;
    border-bottom-color: #d99846 /* 次强调：齿轮数字的琥珀金 */;
  }
  .rightPage {
    flex: 1 0 auto;
    width: 100%;
  }
  .rightPage::before {
    filter: blur(3px) /* 手机 GPU 上 6px 模糊很吃性能，砍一半看不出差别 */;
  }
  .rightPageInner {
    padding: 16px 14px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) /* 避开 iPhone 底部横条 */;
    overflow: visible;
  }
  .post {
    max-width: 100%;
    padding: 24px 18px;
    border-radius: 12px;
  }
  .post .postTitle {
    font-size: 22px;
  }
  .postHeader {
    padding-bottom: 12px;
    margin-bottom: 20px;
  }
  .postContent {
    font-size: 15px;
    line-height: 1.85;
  }
  .postContent h1 {
    font-size: 21px;
    margin: 1.8em 0 0.8em;
  }
  .postContent h2 {
    font-size: 18px;
    margin: 1.6em 0 0.7em;
    padding-left: 10px;
    border-left-width: 3px;
  }
  .postContent h3 {
    font-size: 16px;
    padding-left: 8px;
    border-left-width: 2px;
  }
  .postContent h4 {
    font-size: 15px;
  }
  .postContent h5 {
    font-size: 14px;
  }
  .postContent blockquote {
    padding: 10px 12px;
  }
  .postContent figure.highlight {
    border-radius: 6px;
  }
  .postContent figure.highlight pre {
    font-size: 12.5px;
  }
  .postContent figure.highlight td.gutter {
    padding: 12px 8px 12px 12px;
  }
  .postContent figure.highlight td.code {
    padding: 12px;
  }
  .postContent > table {
    display: block;
    overflow-x: auto;
  }
  .postContent img {
    border-radius: 6px;
  }
  .postNav {
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    margin-top: 20px;
  }
  .postNavItem {
    padding: 12px 14px;
  }
  .postNavNext {
    text-align: left;
  }
  .postList {
    gap: 16px;
  }
  .postItem {
    padding: 18px 16px;
    border-left-width: 3px;
  }
  .postTitle {
    font-size: 19px;
  }
  .postExcerpt {
    font-size: 14px;
    line-height: 1.75;
  }
  .postMeta {
    font-size: 12px;
  }
  .readMore {
    font-size: 13px;
  }
  .pageCard {
    max-width: 100%;
    padding: 24px 16px;
    border-radius: 12px;
  }
  .listHeader {
    padding-left: 12px;
    border-left-width: 4px;
    margin-bottom: 20px;
  }
  .listTitle {
    font-size: 24px;
  }
  .emptyState {
    padding: 48px 12px;
    font-size: 14px;
  }
  .pager {
    gap: 12px;
    margin-top: 24px;
  }
  .pager a {
    padding: 8px 14px;
    font-size: 13px;
  }
  .archiveTree {
    padding-left: 0;
  }
  .treeYear {
    margin-bottom: 26px;
  }
  .treeYearTitle {
    font-size: 20px;
  }
  .treeMonth {
    margin: 0 0 16px 8px;
    padding-left: 10px;
  }
  .treeItem {
    flex-wrap: wrap /* 标题长了一行放不下，让日期和标题换行而不是溢出 */;
    gap: 8px;
    padding: 5px 0;
  }
  .treeDay {
    font-size: 12px;
  }
  .treeLink {
    font-size: 14px;
  }
  .tagCloud {
    gap: 8px;
  }
  .tagCloudItem {
    padding: 5px 12px;
    font-size: 13px;
  }
  .notFound {
    padding: 56px 18px;
  }
  .notFoundCode {
    font-size: 64px;
    letter-spacing: 2px;
  }
  .notFoundTitle {
    font-size: 20px;
    margin: 14px 0 8px;
  }
  .notFoundDesc {
    font-size: 14px;
  }
}
@media (max-width: 420px) {
  .rightPageInner {
    padding: 12px 10px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
  .post {
    padding: 20px 14px;
  }
  .post .postTitle {
    font-size: 20px;
  }
  .postContent {
    font-size: 14.5px;
  }
  .postContent h1 {
    font-size: 19px;
  }
  .postContent h2 {
    font-size: 17px;
  }
  .postContent figure.highlight pre {
    font-size: 11.5px;
  }
  .postContent figure.highlight td.gutter {
    padding: 10px 6px 10px 10px;
  }
  .postContent figure.highlight td.code {
    padding: 10px;
  }
  .navItem {
    font-size: 13px;
    padding: 9px 2px;
  }
  .categoryItem {
    padding: 7px 10px;
    font-size: 13px;
  }
  .pageCard {
    padding: 20px 13px;
  }
  .listTitle {
    font-size: 21px;
  }
  .postItem {
    padding: 16px 13px;
  }
  .postTitle {
    font-size: 18px;
  }
  .notFound {
    padding: 40px 14px;
  }
  .notFoundCode {
    font-size: 52px;
  }
  .notFoundLinks {
    gap: 10px;
    margin-top: 22px;
  }
  .notFoundBtn {
    padding: 9px 18px;
    font-size: 13px;
  }
}
@media (hover: none) {
  .userDetail:hover {
    transform: none;
  }
  .postItem:hover {
    transform: none;
  }
  .socialItem:hover {
    transform: none;
  }
  .tagCloudItem:hover {
    transform: none;
  }
  .statItem:hover {
    transform: none;
  }
  .navItem:hover {
    transform: none;
  }
  .navItem:not(.active):hover {
    background-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  .categoryItem:hover {
    transform: none;
  }
  .categoryItem:not(.active):hover {
    background-color: rgba(179,18,63,0.28);
  }
}
/* 顺序照抄原来 layout.ejs 里那 10 个 <link> 的先后。
   加新样式表就插在 responsive 之前。 */