@charset "GBK";
/* 共享色彩和排版，首页与正文保持同一视觉语言。 */
@font-face {
	font-family: "Instrument";
	src: url("fonts/instrument-serif.woff2") format("woff2"), url("fonts/instrument-serif.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "Oswald";
	src: url("fonts/oswald-200.woff2") format("woff2");
	font-weight: 200;
	font-display: swap;
}
@font-face {
	font-family: "Oswald";
	src: url("fonts/oswald-300.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Volio Serif";
	src: url("fonts/noto-serif-sc.woff2") format("woff2"), url("fonts/noto-serif-sc.ttf") format("truetype");
	font-display: swap;
}
:root {
	/* 原版浅灰绿纸底与深松绿墨色，排版采用 Hermes 式窄体标题与等宽标签。 */
	--paper: #e8eee8;
	--ink: #173f35;
	--muted: #5c7168;
	--line: #bfcdc2;
	--wash: #dce5da;
	--deep: #173f35;
	--accent: #d9e99c;
	--serif: "Volio Serif", "Songti SC", "SimSun", serif;
	--sans: "Microsoft YaHei", "PingFang SC", sans-serif;
	--display: "Oswald", "PingFang SC", "Microsoft YaHei Light", "Microsoft YaHei", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, Consolas, "Microsoft YaHei", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; width: 100%; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
::selection { background: var(--ink); color: var(--paper); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.wrap { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: -100px; padding: 12px; background: var(--ink); color: white; }
.skip-link:focus { top: 10px; }
.site-header { height: 104px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font: 62px/.8 "Instrument", serif; letter-spacing: -3px; }
.brand-dot { color: #819347; }
.site-header nav { display: flex; gap: 42px; font-size: 14px; }
.site-header nav a { padding: 14px 0; position: relative; }
.site-header nav a:hover::after, .site-header nav .active::after { content: ""; position: absolute; width: 5px; height: 5px; background: currentColor; border-radius: 50%; bottom: 0; left: calc(50% - 2px); }
.header-note { font-size: 12px; display: flex; gap: 24px; align-items: center; }
.header-note span { font-size: 22px; }
.hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; min-height: 730px; align-items: center; padding-block: 42px 52px; }
.hero-copy { position: relative; z-index: 1; padding-top: 12px; }
.intro-label { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 1px; margin-bottom: 30px; }
.little-star { font-size: 25px; line-height: 1; }
.hero h1 { font: 400 clamp(46px, 6.1vw, 87px)/1.23 var(--serif); letter-spacing: -4px; white-space: nowrap; }
.hero-description { color: var(--muted); font-size: 14px; line-height: 2.1; margin-top: 30px; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 35px; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 38px; background: var(--ink); color: var(--paper); padding: 18px 23px; font-size: 13px; transition: background .2s; }
.button:hover { background: #2d5949; }
.button span { font-size: 20px; line-height: 1; }
.text-link { font-size: 12px; padding-block: 6px; border-bottom: 1px solid var(--muted); }
.text-link:hover { color: #667d30; }
.hero-footnote { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); margin-top: 69px; }
.status-dot { width: 5px; height: 5px; background: #7b8e4b; border-radius: 50%; }
.tiny-domain { margin-left: 24px; font: 15px "Instrument", serif; }
.hero-art { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero-art img { height: 590px; object-fit: contain; mix-blend-mode: multiply; }
.hero-art figcaption { display: flex; justify-content: space-between; margin: 3px 25px 0; font-size: 10px; color: var(--muted); }
.journal { padding-top: 45px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; }
.small-label { font-size: 11px; letter-spacing: .7px; }
.section-heading h2 { font: 34px/1.5 var(--serif); margin-top: 10px; }
.section-note { font-size: 11px; color: var(--muted); padding-bottom: 8px; }
.featured-post { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--wash); position: relative; overflow: hidden; }
/* 精选文章收紧间距，以真实封面平衡文字。 */
.feature-copy { padding: 30px 36px; }
.meta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 10px; color: var(--muted); }
.tag { border: 1px solid var(--line); color: var(--ink); padding: 5px 9px; font-size: 10px; }
.feature-copy h3 { font: 38px/1.3 var(--serif); margin: 16px 0 12px; }
.feature-copy p { color: var(--muted); font-size: 12px; line-height: 2; max-width: 360px; }
.read-link { display: inline-flex; align-items: center; gap: 20px; font-size: 12px; margin-top: 20px; }
.read-link span { transition: transform .2s; }
.featured-post:hover .read-link span { transform: translate(3px,-3px); }
.feature-art { position: relative; min-height: 280px; overflow: hidden; }
.feature-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.editorial-note { display: grid; grid-template-columns: 200px 1fr auto; gap: 30px; padding: 34px 0; border-bottom: 1px solid var(--line); align-items: center; font-size: 12px; }
.editorial-note>span { color: var(--muted); font-size: 11px; }
.editorial-note p { line-height: 2; }
.editorial-note a { font-size: 11px; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.about-section { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-block: 94px; }
.about-section h2 { font: 39px/1.65 var(--serif); margin-top: 17px; }
.about-copy { max-width: 440px; padding-top: 10px; }
.about-copy p { font-size: 13px; color: var(--muted); line-height: 2.2; margin-bottom: 18px; }
.closing { width: 90%; margin-inline: auto; padding-bottom: clamp(120px, 12vw, 240px); }
.closing-art { position: relative; aspect-ratio: 3/1; background: var(--ink); overflow: hidden; border-radius: 6px 6px 0 0; }
/* 按用户截图采用九成页面宽度与三比一横幅，图片保持比例裁切。 */
.closing-art>img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 45px; border-top: 1px solid var(--line); }
.site-footer .wordmark { font-size: 48px; }
.site-footer>span { font-size: 10px; color: var(--muted); }
/* 文章正文独立控制行宽，目录在大屏保持可见。 */
.article-heading { padding: 32px 0 45px; border-bottom: 1px solid var(--line); }
.back-link { display: inline-flex; gap: 14px; align-items: center; font-size: 11px; color: var(--muted); }
.article-title-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 80px; margin-top: 20px; padding-inline: 8%; }
.article-title-grid h1 { font: 400 clamp(40px, 4.7vw, 68px)/1.4 var(--serif); letter-spacing: -2px; margin-top: 22px; }
.article-deck { font-size: 14px; line-height: 2; color: var(--muted); margin-top: 20px; }
.author-line { display: flex; gap: 12px; align-items: center; margin-top: 28px; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--wash); border: 1px solid var(--line); font: 25px "Instrument", serif; flex: 0 0 auto; }
.author-line strong { display: block; font-size: 12px; margin-bottom: 6px; font-weight: 400; }
.author-line div>span { display: block; font-size: 10px; color: var(--muted); }
.article-cover img { height: 380px; object-fit: contain; mix-blend-mode: multiply; }
.article-cover figcaption { text-align: center; font-size: 10px; color: var(--muted); }
.reading-layout { display: grid; grid-template-columns: 190px minmax(0,700px); justify-content: center; gap: 75px; padding-block: 64px 85px; }
.toc { position: sticky; top: 45px; }
.toc nav { display: flex; flex-direction: column; gap: 20px; padding-left: 16px; border-left: 1px solid var(--line); margin-top: 25px; }
.toc nav a { font-size: 11px; line-height: 1.8; color: var(--muted); }
.toc nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.back-to-top { font-size: 10px; margin-top: 32px; display: inline-block; color: var(--muted); }
.prose { font-size: 15px; line-height: 2.15; color: #314c41; }
.prose>p { margin-bottom: 24px; }
.prose .lead { font-size: 18px; color: var(--ink); line-height: 2; }
.prose h2 { font: 29px/1.5 var(--serif); margin: 58px 0 24px; color: var(--ink); }
.prose blockquote { margin: 35px 0; padding: 9px 0 9px 28px; border-left: 2px solid #79935b; font: 24px/1.9 var(--serif); color: var(--ink); }
.article-callout { padding: 25px 30px; background: var(--wash); margin: 28px 0; }
.article-callout ol { padding-left: 20px; margin: 16px 0 0; font-size: 13px; }
.article-callout li { padding-left: 4px; margin: 8px 0; }
.article-callout strong { font-weight: 500; color: var(--ink); }
.code-block { background: #18382f; color: #dce8d9; margin: 28px 0; border-radius: 6px; overflow: hidden; }
.code-caption { display: flex; justify-content: space-between; border-bottom: 1px solid #3b544a; padding: 10px 20px; font-size: 10px; color: #a6b8aa; }
.code-block pre { margin: 0; padding: 23px 20px; overflow-x: auto; font: 12px/1.9 Consolas, monospace; }
.table-scroll { overflow-x: auto; margin: 30px 0; }
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
caption { text-align: left; font-size: 11px; color: var(--muted); margin-bottom: 12px; }
th { background: var(--wash); font-weight: 500; }
th, td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ending { color: var(--ink); }
.article-end { display: flex; flex-direction: column; align-items: center; color: var(--muted); gap: 13px; margin: 45px 0; font-size: 10px; }
.article-end>span:first-child { font-size: 30px; }
.author-card { display: flex; align-items: center; gap: 18px; padding-top: 25px; border-top: 1px solid var(--line); }
.author-card strong { font-size: 13px; font-weight: 500; }
.author-card p { font-size: 11px; color: var(--muted); }
.author-card>a { margin-left: auto; font-size: 11px; white-space: nowrap; }
@media (min-width: 1500px) {
	.hero { min-height: 800px; }
	.hero-art img { height: 660px; }
}
@media (max-width: 1000px) {
	.wrap { width: calc(100% - 64px); }
	.hero { min-height: 620px; }
	.hero-art img { height: 490px; }
	.hero h1 { font-size: 58px; letter-spacing: -3px; }
	.hero-description { font-size: 12px; }
	.hero-footnote { margin-top: 42px; }
	.feature-copy { padding: 25px; }
	.editorial-note { grid-template-columns: 140px 1fr; }
	.editorial-note a { grid-column: 2; justify-self: start; }
	.about-section { gap: 40px; }
	.about-section h2 { font-size: 30px; }
	.article-title-grid { gap: 30px; padding-inline: 2%; }
	.reading-layout { grid-template-columns: 150px minmax(0,1fr); gap: 35px; }
}
@media (max-width: 680px) {
	.wrap { width: calc(100% - 40px); }
	.site-header { height: 81px; }
	.wordmark { font-size: 49px; }
	.site-header nav { gap: 24px; font-size: 12px; }
	.header-note { display: none; }
	.hero { grid-template-columns: 1fr; gap: 0; padding-top: 40px; padding-bottom: 30px; }
	.hero-copy { padding-top: 0; }
	.intro-label { font-size: 10px; margin-bottom: 24px; }
	.hero h1 { font-size: clamp(43px,12vw,70px); letter-spacing: -2px; }
	.hero-description { margin-top: 23px; font-size: 12px; }
	.hero-actions { margin-top: 26px; gap: 25px; }
	.button { padding: 15px 19px; gap: 28px; font-size: 12px; }
	.hero-footnote { margin-top: 30px; }
	.hero-art img { height: 390px; margin-top: 16px; }
	.hero-art figcaption { margin: 0 6px; font-size: 9px; }
	.journal { padding-top: 30px; }
	.section-heading { margin-bottom: 23px; }
	.section-heading h2 { font-size: 29px; }
	.section-note { display: none; }
	.small-label { font-size: 10px; }
	.featured-post { grid-template-columns: 1fr; }
	.feature-copy h3 { font-size: 35px; }
	.meta { font-size: 9px; gap: 10px; }
	.feature-art { order: -1; min-height: 0; height: 220px; }
	.editorial-note { grid-template-columns: 1fr; gap: 15px; padding-block: 25px; }
	.editorial-note a { grid-column: 1; }
	.editorial-note p { font-size: 11px; }
	.about-section { grid-template-columns: 1fr; gap: 24px; padding-block: 52px; }
	.about-section h2 { font-size: 30px; margin-top: 12px; }
	.about-copy { padding: 0; }
	.about-copy p { font-size: 12px; }
	.closing { padding-bottom: 88px; }
	.closing-art { padding: 0; }
	.closing-art>img { height: 100%; object-position: center; }
	.site-footer { flex-wrap: wrap; gap: 22px; padding-block: 22px 30px; }
	.site-footer .wordmark { font-size: 43px; }
	.site-footer>span { font-size: 9px; }
	.site-footer>span:last-child { width: 100%; }
	.article-heading { padding-top: 25px; }
	.article-title-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; padding: 0; }
	.article-title-grid h1 { font-size: 44px; margin-top: 20px; }
	.article-deck { font-size: 13px; }
	.article-cover img { height: 300px; }
	.reading-layout { grid-template-columns: 1fr; gap: 35px; padding-block: 30px 50px; }
	.toc { position: static; }
	.toc nav { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; margin-top: 15px; }
	.toc nav a { font-size: 10px; }
	.back-to-top { display: none; }
	.prose { font-size: 14px; line-height: 2.1; }
	.prose .lead { font-size: 16px; }
	.prose h2 { font-size: 24px; margin-top: 40px; }
	.prose blockquote { font-size: 20px; padding-left: 18px; margin-inline: 0; }
	.article-callout { padding: 20px; }
	.article-callout ol { font-size: 12px; }
	.author-card { gap: 10px; flex-wrap: wrap; }
	.author-card>a { margin-left: 48px; }
	.author-card p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* 插画区采用三列两行，窄屏改为单列。 */
.facets { padding-block: 64px 72px; border-bottom: 1px solid var(--line); }
.facets .section-heading { margin-bottom: 42px; }
.facet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
.facet-card { min-width: 0; display: flex; flex-direction: column; }
.facet-card h3 { font: 34px/1.5 var(--serif); margin-bottom: 15px; }
.facet-card p { font-size: 14px; line-height: 1.9; min-height: 54px; margin-bottom: 25px; color: var(--muted); }
.facet-card img { aspect-ratio: 1; object-fit: cover; margin-top: auto; border-radius: 4px 4px 0 0; }
@media (max-width: 1000px) {
	.facet-grid { gap: 44px 24px; }
	.facet-card h3 { font-size: 27px; }
	.facet-card p { font-size: 12px; min-height: 69px; }
}
@media (max-width: 680px) {
	.facets { padding-block: 38px 44px; }
	.facets .section-heading { margin-bottom: 28px; }
	.facet-grid { grid-template-columns: 1fr; gap: 38px; }
	.facet-card h3 { font-size: 29px; margin-bottom: 10px; }
	.facet-card p { min-height: 0; margin-bottom: 18px; }
}

/* 关于区域用完整图文组合填充，避免标题下方空置。 */
.about-section { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; padding-block: 64px; }
.about-section h2 { font-size: 34px; line-height: 1.5; }
.about-art { position: relative; height: 390px; overflow: clip; view-timeline: --study block; }
.about-art img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.about-copy { padding-top: 22px; }
@media (min-width: 1800px) {
	.wrap { width: min(1560px, calc(100% - 160px)); }
	.feature-copy { padding: 36px 44px; }
	.feature-copy h3 { font-size: 44px; }
	.about-art { height: 430px; }
}
@media (max-width: 1000px) {
	.about-section { gap: 30px; }
	.about-section h2 { font-size: 29px; }
	.about-art { height: 360px; }
}
@media (max-width: 680px) {
	.about-section { grid-template-columns: 1fr; gap: 25px; padding-block: 40px; }
	.about-art { height: auto; aspect-ratio: 1.6; }
	.about-copy { padding-top: 18px; }
}

/* 文章仅保留日期与阅读时长，不展示个人署名。 */
.article-meta { font-size: 11px; line-height: 1.8; color: var(--muted); margin-top: 25px; }

/* Hermes 式美术风格：窄体细笔画大标题、等宽大写标签、半像素细线框、实心与半透明双按钮。 */
.wordmark { font: 300 40px/.9 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.site-header { border-bottom-width: .5px; }
.site-header nav, .header-note, .intro-label, .small-label, .section-note, .meta, .tag, .button, .text-link, .read-link, .hero-footnote, .hero-art figcaption, .editorial-note>span, .editorial-note a, .back-link, .article-meta, .toc nav a, .back-to-top, .code-caption, caption, .article-end, .article-cover figcaption, .site-footer>span { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.site-header nav { gap: 56px; font-size: 13px; }
.tiny-domain { font: 13px var(--mono); letter-spacing: .06em; }
.hero h1 { font: 300 clamp(52px, 7vw, 104px)/1.08 var(--display); letter-spacing: -.02em; }
.section-heading h2, .feature-copy h3, .facet-card h3, .about-section h2, .article-title-grid h1, .prose h2, .prose blockquote { font-family: var(--display); font-weight: 300; letter-spacing: -.01em; }
.section-heading h2 { font-size: 44px; line-height: 1.2; }
.feature-copy h3 { font-size: 46px; line-height: 1.15; }
.facet-card h3 { font-size: 36px; line-height: 1.2; }
.about-section h2 { font-size: 42px; line-height: 1.3; }
.article-title-grid h1 { line-height: 1.2; letter-spacing: -.01em; }
.button { background: var(--ink); color: var(--paper); font-weight: 500; padding: 17px 22px; }
.hero-actions { gap: 4px; }
.hero-actions .text-link { display: inline-flex; align-items: center; padding: 17px 22px; font-size: 13px; background: rgba(23, 63, 53, .08); border: 0; transition: background .2s; }
.hero-actions .text-link:hover { color: var(--ink); background: rgba(23, 63, 53, .15); }
.featured-post { box-shadow: inset 0 0 0 .5px var(--line); }
.tag { color: var(--ink); }
.article-callout { box-shadow: inset 0 0 0 .5px var(--line); }
.code-caption>span:first-child::before { content: "\25CF \25CF \25CF"; margin-right: 14px; letter-spacing: 2px; color: #3b544a; }
@media (max-width: 1000px) {
	.hero h1 { font-size: 64px; letter-spacing: -.02em; }
	.section-heading h2 { font-size: 38px; }
	.facet-card h3 { font-size: 30px; }
	.about-section h2 { font-size: 34px; }
}
@media (max-width: 680px) {
	.wordmark { font-size: 32px; }
	.site-header nav { gap: 22px; font-size: 11px; }
	.hero h1 { font-size: clamp(46px, 13vw, 72px); }
	.section-heading h2 { font-size: 34px; }
	.feature-copy h3 { font-size: 38px; }
	.facet-card h3 { font-size: 32px; }
	.about-section h2 { font-size: 32px; }
	.hero-actions .text-link, .button { padding: 15px 18px; font-size: 12px; }
}

.button:hover { background: #2d5949; }