/*
 * SPDX-License-Identifier: CC-BY-SA-4.0
 * 功能概述：独立博客的古典科学印刷样式；只由 blog.html 加载，不参与全站 main.scss。
 * 主要职责：以纸墨变量、EB Garamond、宋体、首字下沉、小型大写、印刷线和外侧边注复现参考项目；处理目录、表格、照片、公式与打印。
 * 代码库关系：服务 blog.html、blog-post.html、_pages/blog.html 和文章的 blog-prose 类；字体存放在 assets/fonts/blog。
 * 输入输出与副作用：输入为静态博客 HTML；所有页面选择器限定在 .vintage-blog 内，不读取深色主题状态；窄屏目录移到正文前。
 * 来源：Foad Sojoodi Farimani 的 vintage-latex，https://github.com/Foadsf/vintage-latex，CC BY-SA 4.0。
 * 改动：将示例 01、04、06 的纸墨配色、排版角色和印刷花饰适配为响应式网页，并加入中文宋体与可访问导航。
 */
@font-face {
  font-family: "Blog Garamond";
  src: url("../fonts/blog/EBGaramond.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Blog Garamond";
  src: url("../fonts/blog/EBGaramond-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Blog Song";
  src: url("../fonts/blog/NotoSerifSC-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Blog Song";
  src: url("../fonts/blog/NotoSerifSC-Semibold.ttf") format("truetype");
  font-weight: 600 800;
  font-display: swap;
}
.vintage-blog {
  --paper: #f4ebdd;
  --ink: #231f1a;
  --faded-ink: #665443;
  --rule: #9b8870;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Blog Garamond", "Blog Song", "Songti SC", "Noto Serif CJK SC", serif;
  font-size: 18px;
  line-height: 1.8;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  accent-color: var(--ink);
  scrollbar-color: var(--rule) var(--paper);
}
.vintage-blog *, .vintage-blog *::before, .vintage-blog *::after { box-sizing: border-box; }
.vintage-blog ::selection { color: var(--paper); background: var(--faded-ink); }
.vintage-blog a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.vintage-blog a:hover { color: var(--faded-ink); }
.vintage-blog :focus-visible { outline: 2px solid var(--faded-ink); outline-offset: 5px; }
.vintage-blog img { display: block; max-width: 100%; height: auto; }
.vintage-blog button, .vintage-blog summary { font: inherit; color: inherit; }
.vintage-blog .blog-skip-link { position: absolute; top: -5rem; left: 1rem; padding: .4rem 1rem; background: var(--paper); z-index: 1; }
.vintage-blog .blog-skip-link:focus { top: .5rem; }
.vintage-blog .blog-sheet { max-width: 1140px; margin: 0 auto; padding: 0 64px; }
.vintage-blog .blog-masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 26px 0 17px; border-bottom: 1px solid var(--rule); }
.vintage-blog .blog-masthead a { text-decoration: none; }
.vintage-blog .blog-home { font-size: 22px; white-space: nowrap; }
.vintage-blog .blog-masthead nav { display: flex; flex-wrap: wrap; gap: 8px 26px; font-variant-caps: small-caps; letter-spacing: .045em; }
.vintage-blog .blog-masthead [aria-current] { text-decoration: underline; text-underline-offset: .4em; }
.vintage-blog .blog-titleblock { padding: 48px 0 44px; max-width: 740px; text-align: center; }
.vintage-blog .blog-back { font-size: 13px; color: var(--faded-ink); text-decoration: none; }
.vintage-blog h1 { margin: 22px 0 10px; font-size: clamp(30px, 4vw, 44px); font-weight: 500; line-height: 1.5; letter-spacing: .08em; text-wrap: balance; }
.vintage-blog .blog-subtitle { margin: 8px 0 22px; font-size: 18px; letter-spacing: .025em; }
.vintage-blog .blog-ornament { display: block; width: 210px; height: 24px; margin: 22px auto; overflow: visible; }
.vintage-blog .blog-byline { margin: 16px 0 0; font-size: 16px; color: var(--faded-ink); }
.vintage-blog .blog-byline time { font-variant-numeric: lining-nums; font-size: 14px; }
.vintage-blog .blog-reading-layout { display: grid; grid-template-columns: minmax(0, 740px) minmax(150px, 1fr); gap: 48px; align-items: start; }
.vintage-blog .blog-margin { grid-column: 2; grid-row: 1; position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow-y: auto; padding-left: 20px; border-left: 1px solid var(--rule); }
.vintage-blog .blog-toc { font-size: 12px; line-height: 1.8; }
.vintage-blog .blog-toc summary { font-size: 13px; cursor: pointer; padding: 4px 0 12px; letter-spacing: .12em; }
.vintage-blog .blog-toc ol { list-style: none; margin: 0; padding: 0; }
.vintage-blog .blog-toc li { margin: 0 0 9px; }
.vintage-blog .blog-toc a { text-decoration: none; display: block; }
.vintage-blog .blog-toc a:hover { text-decoration: underline; }
.vintage-blog .blog-prose { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: break-word; }
.vintage-blog .blog-prose p { margin: 0 0 1.2em; text-align: justify; }
.vintage-blog .blog-prose > p + p { text-indent: 2em; }
.vintage-blog .blog-prose h2 { margin: 2.8em 0 1.3em; text-align: center; font-size: 21px; font-weight: 500; line-height: 1.8; letter-spacing: .1em; scroll-margin-top: 28px; text-wrap: balance; }
.vintage-blog .blog-prose h2 strong { font-weight: inherit; }
.vintage-blog .blog-prose h2:first-of-type { margin-top: 0; }
.vintage-blog .blog-prose h3, .vintage-blog .blog-prose h4 { margin: 2em 0 .9em; font-size: 19px; font-weight: 600; }
.vintage-blog .blog-prose strong { font-weight: 600; }
.vintage-blog .blog-prose .blog-opening::first-letter { float: left; font-size: 3.25em; line-height: 1.15; margin: .05em .12em 0 0; padding: 0 .06em; border: 1px solid var(--ink); }
.vintage-blog .blog-prose ul, .vintage-blog .blog-prose ol { padding-inline-start: 1.7em; margin: 1em 0 1.5em; }
.vintage-blog .blog-prose li { padding-left: .2em; margin-bottom: .55em; }
.vintage-blog .blog-prose hr { width: 42%; height: 1px; border: 0; background: var(--ink); margin: 3em auto; }
.vintage-blog .blog-prose figure { margin: 2em 0; }
.vintage-blog .blog-prose figure a { display: block; }
.vintage-blog .blog-prose figure img { filter: grayscale(1) sepia(.25) contrast(1.08); mix-blend-mode: multiply; }
.vintage-blog .blog-prose figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 10px; font-size: 13px; color: var(--faded-ink); }
.vintage-blog .blog-prose figcaption a { white-space: nowrap; }
.vintage-blog .blog-table { max-width: 100%; overflow-x: auto; margin: 2em 0; }
.vintage-blog .blog-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.8; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.vintage-blog .blog-prose th, .vintage-blog .blog-prose td { padding: 10px 14px; text-align: left; vertical-align: top; }
.vintage-blog .blog-prose th { font-weight: 600; border-bottom: 1px solid var(--rule); }
.vintage-blog .blog-prose caption { caption-side: bottom; font-size: 13px; text-align: center; color: var(--faded-ink); padding-top: 10px; }
.vintage-blog .blog-prose .blog-table-caption { margin-top: -1.4em; margin-bottom: 2em; text-align: center; text-indent: 0; font-size: 13px; color: var(--faded-ink); }
.vintage-blog .blog-source-index { margin-top: 3em; padding: 1em 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; }
.vintage-blog .blog-source-index summary { cursor: pointer; }
.vintage-blog .blog-prose .katex { font-size: 1em; }
.vintage-blog .blog-prose .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 8px 0; }
.vintage-blog .blog-prose pre { overflow-x: auto; padding: 1em; border-block: 1px solid var(--rule); font-size: 14px; }
.vintage-blog .blog-prose blockquote { margin: 2em 1.5em; font-style: italic; }
.vintage-blog .blog-endmark { max-width: 740px; padding-top: 40px; }
.vintage-blog .blog-post-navigation { max-width: 740px; display: grid; gap: 14px; font-size: 15px; }
.vintage-blog .blog-post-navigation:empty { display: none; }
.vintage-blog .blog-index-title { max-width: none; padding: 65px 0 58px; }
.vintage-blog .blog-index-title h1 { font-size: 54px; font-variant-caps: small-caps; letter-spacing: .1em; }
.vintage-blog .blog-index { max-width: 820px; margin: 0 auto; min-height: 240px; }
.vintage-blog .blog-year-group { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 28px; padding: 26px 0 38px; border-top: 1px solid var(--ink); }
.vintage-blog .blog-year { font-size: 24px; margin: 0; font-weight: 400; line-height: 1.7; }
.vintage-blog .blog-entry { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 22px; padding-bottom: 30px; }
.vintage-blog .blog-entry + .blog-entry { padding-top: 30px; border-top: 1px solid var(--rule); }
.vintage-blog .blog-entry time { font-size: 17px; padding-top: 5px; color: var(--faded-ink); }
.vintage-blog .blog-entry h3 { margin: 0 0 7px; font-size: 24px; font-weight: 500; line-height: 1.7; }
.vintage-blog .blog-entry h3 a { text-decoration: none; }
.vintage-blog .blog-entry h3 a:hover { text-decoration: underline; }
.vintage-blog .blog-entry-subtitle { margin: 0 0 18px; font-size: 16px; }
.vintage-blog .blog-entry-excerpt { margin: 0 0 18px; font-size: 16px; color: var(--faded-ink); }
.vintage-blog .blog-read-link { font-size: 14px; }
.vintage-blog .blog-empty { text-align: center; }
.vintage-blog .blog-footer { margin-top: 72px; padding: 0 0 44px; text-align: center; font-size: 14px; }
.vintage-blog .blog-footer > p { margin: 20px 0; }
.vintage-blog .blog-footer .blog-colophon { font-size: 13px; line-height: 1.6; color: var(--faded-ink); }
@media (max-width: 960px) {
  .vintage-blog .blog-sheet { padding-inline: 36px; }
  .vintage-blog .blog-reading-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 740px; margin: 0 auto; }
  .vintage-blog .blog-titleblock { margin: 0 auto; }
  .vintage-blog .blog-margin { position: static; grid-column: 1; grid-row: 1; max-height: none; overflow: visible; }
  .vintage-blog .blog-toc ol { columns: 2; column-gap: 28px; }
  .vintage-blog .blog-toc li { break-inside: avoid; }
  .vintage-blog .blog-prose { grid-row: 2; }
  .vintage-blog .blog-masthead nav { gap: 8px 18px; }
}
@media (max-width: 600px) {
  .vintage-blog { font-size: 16px; line-height: 1.95; }
  .vintage-blog .blog-sheet { padding-inline: 22px; }
  .vintage-blog .blog-masthead { display: block; padding: 18px 0 15px; }
  .vintage-blog .blog-home { font-size: 21px; }
  .vintage-blog .blog-masthead nav { margin-top: 12px; gap: 8px 22px; font-size: 16px; }
  .vintage-blog .blog-titleblock { padding: 34px 0; }
  .vintage-blog h1 { font-size: 29px; letter-spacing: .06em; margin-top: 20px; }
  .vintage-blog .blog-subtitle { font-size: 15px; }
  .vintage-blog .blog-byline { font-size: 15px; }
  .vintage-blog .blog-toc ol { columns: 1; }
  .vintage-blog .blog-prose h2 { font-size: 19px; letter-spacing: .04em; }
  .vintage-blog .blog-prose figure { margin: 1.6em 0; }
  .vintage-blog .blog-prose th, .vintage-blog .blog-prose td { padding: 8px; }
  .vintage-blog .blog-prose table { font-size: 14px; }
  .vintage-blog .blog-year-group { grid-template-columns: 1fr; gap: 16px; }
  .vintage-blog .blog-entry { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .vintage-blog .blog-entry h3 { font-size: 21px; }
  .vintage-blog .blog-entry-subtitle, .vintage-blog .blog-entry-excerpt { font-size: 15px; }
  .vintage-blog .blog-index-title { padding: 34px 0 40px; }
  .vintage-blog .blog-footer { margin-top: 42px; }
}
@media print {
  .vintage-blog { background: white; color: #231f1a; font-size: 11pt; }
  .vintage-blog .blog-sheet { max-width: none; padding: 0; }
  .vintage-blog .blog-masthead, .vintage-blog .blog-margin, .vintage-blog .blog-back, .vintage-blog .blog-footer, .vintage-blog .blog-post-navigation, .vintage-blog .blog-skip-link { display: none; }
  .vintage-blog .blog-reading-layout { display: block; }
  .vintage-blog .blog-titleblock { padding-top: 0; max-width: none; }
  .vintage-blog .blog-prose h2 { break-after: avoid; }
  .vintage-blog .blog-prose figure, .vintage-blog .blog-prose tr { break-inside: avoid; }
  .vintage-blog a { text-decoration: none; }
  .vintage-blog .blog-prose figcaption a { display: none; }
}