*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink:       #1A1917;
  --ink-muted: #5A5754;
  --ink-faint: #A09D99;
  --gray-bg:   #F4F4F2;
  --gray-2:    #ECEAE6;
  --border:    #E0DDD8;
  --accent:    #2563EB;
  --ff-d: 'Fraunces', Georgia, 'Songti SC', 'Noto Serif SC', serif;
  --ff-b: 'Outfit', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-b); color: var(--ink); line-height: 1.6; overflow-x: hidden;
  background: var(--gray-bg) url('../hero_bg.png') center top / cover fixed;
  min-height: 100vh; display: flex; flex-direction: column;
}
body::before { content:''; position:fixed; inset:0; z-index:-1; background:rgba(244,244,242,0.9); }
::selection { background:var(--accent); color:white; }

/* 语言切换：默认英文，html[lang=zh-CN] 时显示中文 */
html:not([lang="zh-CN"]) [data-lang="zh"] { display:none !important; }
html[lang="zh-CN"] [data-lang="en"] { display:none !important; }

/* NAV（和首页一致） */
nav {
  position:sticky; top:0; z-index:100; height:60px;
  background:rgba(255,255,255,0.95); backdrop-filter:blur(16px);
}
.nav-inner {
  max-width:1080px; margin:0 auto; padding:0 60px;
  height:60px; display:flex; align-items:center; justify-content:space-between;
}
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-img { height:32px; width:auto; }
.nav-logo-text { font-family:'Fraunces', Georgia, serif; font-size:1rem; font-weight:400; color:var(--ink); }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { font-size:0.78rem; font-weight:400; color:var(--ink-muted); text-decoration:none; letter-spacing:0.06em; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover, .nav-links a.on { color:var(--ink); }
.lang-btn {
  font-family:var(--ff-b); font-size:0.78rem; letter-spacing:0.04em; cursor:pointer;
  background:white; color:var(--ink); border:1px solid var(--border);
  padding:6px 14px; border-radius:100px; transition:border-color 0.2s;
}
.lang-btn:hover { border-color:var(--ink-muted); }

/* PAGE */
main { flex:1; width:100%; }
.wrap { max-width:760px; margin:0 auto; padding:56px 32px 72px; }
.kicker { font-size:0.76rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.back { display:inline-block; font-size:0.84rem; color:var(--ink-muted); text-decoration:none; margin-bottom:28px; }
.back:hover { color:var(--ink); }

/* BLOG LIST */
.list-title { font-family:var(--ff-d); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:600; letter-spacing:-0.02em; line-height:1.2; margin-bottom:10px; }
.list-desc { font-size:1rem; font-weight:300; color:var(--ink-muted); margin-bottom:36px; }
.post {
  display:block; text-decoration:none; color:inherit;
  background:rgba(255,255,255,0.8); border:1px solid var(--border); border-radius:14px;
  padding:26px 28px; margin-bottom:16px; transition:transform 0.2s, box-shadow 0.2s;
}
.post:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,0.08); }
.post-date { font-size:0.8rem; color:var(--ink-faint); margin-bottom:6px; display:block; }
.post-title { font-family:var(--ff-d); font-size:1.35rem; font-weight:500; line-height:1.3; margin-bottom:8px; }
.post-ex { font-size:0.95rem; font-weight:300; color:var(--ink-muted); line-height:1.7; }

/* ARTICLE */
.article {
  background:rgba(255,255,255,0.86); border:1px solid var(--border); border-radius:16px;
  padding:48px 56px;
}
.a-title { font-family:var(--ff-d); font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:600; letter-spacing:-0.02em; line-height:1.2; margin-bottom:14px; }
.a-meta { font-size:0.86rem; color:var(--ink-faint); margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.a-body p { font-size:1.02rem; font-weight:300; color:#2E2C2A; line-height:1.9; margin-bottom:20px; }
.a-body h2 { font-family:var(--ff-d); font-size:1.4rem; font-weight:600; letter-spacing:-0.01em; line-height:1.3; margin:44px 0 16px; scroll-margin-top:80px; }
.a-body a { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(37,99,235,0.25); word-break:break-all; }
.a-body a:hover { border-color:var(--accent); }
.a-body strong { font-weight:500; color:var(--ink); }
.a-body .lead { font-size:1.08rem; }
.a-body .sign { font-family:var(--ff-d); font-style:italic; font-size:1.1rem; color:var(--ink); margin-top:36px; }
html[lang="zh-CN"] .a-body p { font-size:1.04rem; line-height:2; }
html[lang="zh-CN"] .a-body .sign { font-style:normal; }

.fig { margin:28px 0 32px; }
.fig img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--border); }
.fig figcaption { font-size:0.86rem; color:var(--ink-muted); line-height:1.6; margin-top:10px; text-align:center; }
.fig.missing { display:none; }

.a-about { margin-top:44px; padding-top:24px; border-top:1px solid var(--border); font-size:0.92rem; font-weight:300; color:var(--ink-muted); line-height:1.9; }
.a-about b { font-weight:500; color:var(--ink); }
.a-about a { color:var(--accent); text-decoration:none; }

/* FOOTER（和首页一致） */
footer { background:var(--ink); }
.footer-inner { max-width:1080px; margin:0 auto; padding:22px 60px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.flogo { display:flex; align-items:center; gap:9px; }
.flogo img { height:24px; }
.flogo span { font-family:'Fraunces', Georgia, serif; font-size:0.88rem; font-weight:300; color:rgba(255,255,255,0.5); }
.fcopy { font-size:0.76rem; color:rgba(255,255,255,0.2); }

@media (max-width:900px) {
  .nav-inner, .footer-inner { padding-left:16px; padding-right:16px; }
  .nav-links { gap:16px; }
  .nav-links li.hide-m { display:none; }
  .wrap { padding:32px 16px 48px; }
  .article { padding:28px 20px; }
  .post { padding:20px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}