/* ============================================================
   刘铭的博客 · 牛皮纸质感博客
   ------------------------------------------------------------
   只有一种纸：不印任何线，靠纤维、色斑和压暗的边做纸感。
   纸色只此一档浅土黄，想微调只改下面这一段变量即可。
   ============================================================ */

:root {
  --paper:      #eddfbf;   /* 纸面主色 · 浅土黄 */
  --paper-hi:   #f5e9d0;   /* 纸面亮斑 */
  --paper-lo:   #dfcdaa;   /* 纸面暗部 */
  --desk:       #c9b28c;   /* 纸张之外的桌面 */
  --ink:        #3b3226;   /* 正文墨色，不用纯黑 */
  --ink-soft:   #6d5e48;   /* 次要文字 */
  --ink-faint:  #9c8b6e;   /* 日期、页码 */
  --rule:       rgba(94, 74, 45, .24);
  --rule-soft:  rgba(94, 74, 45, .13);
  --cinnabar:   #a53f2b;   /* 朱砂，只做点缀 */
  --sel:        rgba(165, 63, 43, .18);

  --serif: Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "NSimSun", serif;
  --mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --measure: 664px;   /* 正文行宽 */
  --sheet-w: 1120px;  /* 整张纸宽度 */

  --noise-opacity: .54;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sel); }

a { color: inherit; text-decoration: none; }

/* ---------- 纸张本体：色斑 + 纤维 + 压边，不印任何线 ---------- */

#sheet {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--sheet-w));
  min-height: 100vh;
  margin: 0 auto;
  padding: 76px 84px 96px;
  background-color: var(--paper);
  background-image:
    /* 纸浆厚薄不匀：尺寸用固定像素，保证每页纸色一致，不随页面长短变浅 */
    radial-gradient(ellipse 620px 460px at 220px 140px, var(--paper-hi) 0%, transparent 72%),
    radial-gradient(ellipse 560px 420px at calc(100% - 180px) 720px, var(--paper-lo) 0%, transparent 76%),
    radial-gradient(ellipse 380px 280px at 640px 340px, rgba(196, 158, 100, .07) 0%, transparent 78%),
    radial-gradient(ellipse 320px 240px at 300px 680px, rgba(255, 246, 220, .10) 0%, transparent 76%);
  box-shadow:
    0 0 0 1px rgba(90, 70, 40, .12),
    0 18px 60px rgba(72, 54, 28, .14),
    inset 0 0 78px rgba(120, 94, 55, .065);
}

/* 纤维颗粒（内联 SVG，无外部图片依赖）
   SVG 用 feColorMatrix 把噪点转成「透明底 + 稀疏深褐细点」，直接叠加即可。
   不用 mix-blend-mode：Chrome 分块合成时软光层会局部失效，出现硬边矩形。 */
#sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0,0,0,0,0.29,0,0,0,0,0.22,0,0,0,0,0.13,1,0,0,0,-0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(112deg, rgba(150, 120, 80, .055) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(3deg, rgba(150, 120, 80, .022) 0 1px, transparent 1px 9px);
  background-size: 180px 180px, auto, auto;
}

/* ---------- 版式骨架：左主栏 + 右窄栏 ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(120px, 1fr);
  column-gap: 76px;
  align-items: start;
}

.main { min-width: 0; }
.side { min-width: 0; }

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

.masthead { margin-bottom: 62px; }

.masthead .kicker {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

.masthead h1 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  margin: 0 0 14px;
}

.masthead .tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  letter-spacing: .06em;
}

.masthead .hr {
  margin-top: 30px;
  border: 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.masthead .hr::after {
  content: "❖";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 0 12px;
  background: var(--paper);
  color: var(--ink-faint);
  font-size: 12px;
}

/* ---------- 导航 ---------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  margin-bottom: 54px;
}
.nav a {
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 2px;
  transition: color .18s, border-color .18s;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--cinnabar);
  border-color: var(--cinnabar);
}

/* ---------- 区块小标题 ---------- */

.section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  margin: 0 0 30px;
  font-weight: 400;
}
.section-title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule-soft);
}

/* ---------- 文章列表（首页 / 归档共用） ---------- */

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

.post-list > li { margin-bottom: 48px; }

.post-list .meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.post-list .meta .dot { padding: 0 8px; opacity: .6; }
.post-list .meta .tag { font-family: var(--serif); letter-spacing: .1em; }

.post-list h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .03em;
  margin: 0 0 10px;
}
.post-list h2 a {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color .18s, border-color .18s;
}
.post-list h2 a:hover { color: var(--cinnabar); border-color: var(--cinnabar); }

.post-list .excerpt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.year-group { margin-bottom: 56px; }
.year-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin: 0 0 22px;
}

.archive-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--rule-soft);
  font-size: 16px;
}
.archive-row time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  flex: 0 0 78px;
}
.archive-row a:hover { color: var(--cinnabar); }
.archive-row .tag { margin-left: auto; font-size: 12px; color: var(--ink-faint); }

.more-link {
  display: inline-block;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.more-link:hover { color: var(--cinnabar); border-color: var(--cinnabar); }

/* ---------- 文章页 ---------- */

article.post { margin-top: 4px; }

.post-head { margin-bottom: 46px; }

.post-head .meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.post-head h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .04em;
  margin: 0 0 18px;
}
.post-head .summary {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--cinnabar);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.85;
}

/* 正文：像一页手写的纸，首行缩进，不用卡片 */
.prose { font-size: 17.5px; line-height: 1.98; }
.prose p { margin: 0 0 1.15em; text-indent: 2em; }
.prose > p:first-child { text-indent: 0; }
.prose > p:first-child::first-letter {
  font-size: 1.2em;
  color: var(--ink);
}
.prose h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 2.4em 0 1em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.prose h3 { font-size: 18px; font-weight: 600; margin: 2em 0 .8em; letter-spacing: .04em; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a { border-bottom: 1px solid var(--cinnabar); color: var(--cinnabar); padding-bottom: 1px; }
.prose a:hover { background: var(--sel); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 2.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--cinnabar); }

.prose blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--cinnabar);
  color: var(--ink-soft);
  font-size: 16.5px;
}
.prose blockquote p { margin: 0; text-indent: 0; }

.prose code {
  font-family: var(--mono);
  font-size: .86em;
  background: rgba(120, 94, 55, .10);
  padding: 1px 5px;
  border-radius: 2px;
}
.prose pre {
  margin: 1.8em 0;
  padding: 18px 22px;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--cinnabar);
  background: rgba(120, 94, 55, .06);
  overflow-x: auto;
  line-height: 1.7;
}
.prose pre code { background: none; padding: 0; font-size: 13.5px; }

.prose .dots {
  border: 0;
  text-align: center;
  margin: 2.6em 0;
  color: var(--ink-faint);
  letter-spacing: .6em;
  font-size: 13px;
}
.prose .dots::before { content: "· · ·"; }

.prose img { max-width: 100%; height: auto; display: block; margin: 1.8em 0; }

/* 文章页脚 */
.post-foot {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-soft);
}
.post-foot .adjacent { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post-foot a:hover { color: var(--cinnabar); }
.post-foot .back { display: block; margin-top: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); }

/* ---------- 右窄栏：竖排站名 + 右下工具 ---------- */

.side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 760px;
}

.vertical-mark {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 19px;
  letter-spacing: .42em;
  line-height: 2.1;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
  color: var(--ink);
  white-space: nowrap;
}
.vertical-mark .verse {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .34em;
  line-height: 1.95;
  color: var(--ink);
}

.side-bottom { margin-top: auto; text-align: right; }

.side-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  font-size: 14px;
  letter-spacing: .1em;
  margin-bottom: 34px;
}
.side-nav a { border-bottom: 1px solid var(--rule-soft); padding-bottom: 1px; }
.side-nav a:hover { color: var(--cinnabar); border-color: var(--cinnabar); }

/* ---------- 页脚 ---------- */

.sheet-foot {
  margin-top: 96px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--ink-faint);
}
.sheet-foot a:hover { color: var(--cinnabar); }

/* ---------- 搜索 ---------- */

.search-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(43, 33, 20, .42);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
}
.search-panel[data-open="true"] { display: flex; }
.search-box {
  width: min(100%, 620px);
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 60px rgba(40, 28, 12, .28);
  padding: 22px 26px 20px;
}
.search-box input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  padding: 6px 0 12px;
  outline: none;
}
.search-box input::placeholder { color: var(--ink-faint); }
.search-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint); margin: 10px 0 16px; }
.search-results { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.search-results li { border-bottom: 1px dotted var(--rule-soft); padding: 11px 0; }
.search-results a { display: block; font-size: 16px; }
.search-results a:hover { color: var(--cinnabar); }
.search-results small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }
.search-results .empty { color: var(--ink-faint); font-size: 14px; border: 0; }

/* ---------- 移动端 ---------- */

@media (max-width: 860px) {
  #sheet { padding: 40px 26px 64px; }
  .layout { grid-template-columns: 1fr; gap: 0; }
  /* 窄屏不显示竖排诗文：这一栏只剩这句装饰字，完整导航已在页头 */
  .side { display: none; }
  .masthead { margin-bottom: 38px; }
  .masthead h1 { font-size: 32px; }
  .nav { margin-bottom: 40px; gap: 18px; }
  .post-head h1 { font-size: 26px; }
  .prose { font-size: 16.5px; line-height: 1.9; }
  .prose p { text-indent: 1.6em; }
  .sheet-foot { margin-top: 64px; }
}

@media (max-width: 480px) {
  #sheet { padding: 30px 20px 52px; }
  body { font-size: 16px; }
  .archive-row { flex-wrap: wrap; gap: 8px; }
  .archive-row time { flex-basis: 100%; }
}

/* ---------- 无障碍 / 打印 ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  #sheet { width: 100%; padding: 0; box-shadow: none; background: #fff; }
  #sheet::before, .side, .nav, .search-panel, .sheet-foot, .post-foot { display: none !important; }
  .layout { display: block; }
  .prose a { color: #000; border: 0; }
}