:root{
  --bg:#14100F;
  --bg2:#1A1513;
  --paper:#F3EEE5;
  --paper2:#ECE3D6;
  --gold:#C8961E;
  --gold2:#B98A12;
  --text:#F7F4EE;
  --text2:rgba(247,244,238,.76);
  --dark-title:#191412;
  --dark-body:#3C3430;
  --dark-muted:#5A514C;
  --line:rgba(200,150,30,.24);
  --line-strong:rgba(200,150,30,.56);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans SC","PingFang SC",Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.7}
a{text-decoration:none;color:inherit}.page{background:radial-gradient(circle at 12% 18%,rgba(200,150,30,.08),transparent 25%),radial-gradient(circle at 88% 42%,rgba(247,244,238,.035),transparent 28%),linear-gradient(135deg,#120F0E 0%,#1A1513 48%,#12100F 100%);min-height:100vh}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,72px);background:rgba(15,13,12,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(200,150,30,.18);position:sticky;top:0;z-index:20}.logo{font-family:"Noto Serif SC",serif;font-size:18px;font-weight:700;letter-spacing:.05em}.nav-links{display:flex;gap:28px;align-items:center;color:rgba(247,244,238,.72);font-size:15px;font-weight:600}.nav-links a:hover{color:var(--text)}.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:8px 22px;border-radius:50px;font-size:15px;font-weight:700;line-height:1.4;white-space:nowrap}.nav-cta{border:1px solid rgba(247,244,238,.38);background:rgba(255,255,255,.04);color:var(--text)}.btn-primary{background:linear-gradient(135deg,#D5A812 0%,#B98A12 100%);color:#17100E;border:1px solid rgba(255,236,170,.34);box-shadow:0 8px 24px rgba(200,150,30,.18),inset 0 1px 0 rgba(255,255,255,.22)}.btn-outline{border:1px solid rgba(247,244,238,.38);background:rgba(255,255,255,.035);color:var(--text)}.hero{padding:88px clamp(20px,5vw,72px) 46px}.hero-inner{width:min(1180px,100%);margin:0 auto}.eyebrow{margin:0 0 18px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.hero h1{font-family:"Noto Serif SC",serif;font-size:clamp(38px,5vw,64px);line-height:1.18;font-weight:600;letter-spacing:-.035em;max-width:920px;margin:0}.hero p{max-width:820px;margin:24px 0 0;color:var(--text2);font-size:17px;line-height:1.9}.module{width:min(1180px,calc(100% - 40px));margin:0 auto 42px;padding:clamp(30px,5vw,64px);background:var(--paper);color:var(--dark-body);border:1px solid rgba(200,150,30,.16);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.18)}.module.small{padding:clamp(26px,4vw,42px)}.module-kicker{margin:0 0 14px;color:#9E7415;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.module-title{margin:0;font-family:"Noto Serif SC",serif;font-size:clamp(28px,3.4vw,44px);line-height:1.3;font-weight:600;color:var(--dark-title);letter-spacing:-.02em}.module-desc{margin:18px 0 0;color:var(--dark-body);font-size:16px;line-height:1.9;max-width:860px;font-weight:500}.line-card{background:transparent;border:1px solid var(--line);border-radius:16px;padding:28px;color:var(--dark-body);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease}.line-card:hover{transform:translateY(-3px);border-color:var(--line-strong);background:rgba(255,255,255,.14);box-shadow:0 16px 42px rgba(42,33,30,.055),inset 0 1px 0 rgba(255,255,255,.35)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}.article-list{display:grid;grid-template-columns:1fr;gap:20px;margin-top:34px}.article-card{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}.article-card h2{font-family:"Noto Serif SC",serif;color:var(--dark-title);font-size:28px;line-height:1.35;margin:0 0 14px}.article-card p{margin:0;color:var(--dark-body);font-size:15.5px;line-height:1.85}.meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}.tag{display:inline-flex;padding:5px 11px;border:1px solid rgba(200,150,30,.34);border-radius:999px;color:#7A5A13;font-size:12px;font-weight:700;line-height:1.2}.article-shell{width:min(980px,calc(100% - 40px));margin:0 auto 42px}.article{background:var(--paper);color:var(--dark-body);border:1px solid rgba(200,150,30,.16);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.18);padding:clamp(30px,5vw,68px)}.article h1{font-family:"Noto Serif SC",serif;color:var(--dark-title);font-size:clamp(34px,4.6vw,56px);line-height:1.22;font-weight:600;letter-spacing:-.035em;margin:0}.article .lead{font-size:18px;line-height:1.9;color:var(--dark-body);margin:24px 0 0}.article-body{margin-top:42px}.article-body h2{font-family:"Noto Serif SC",serif;color:var(--dark-title);font-size:28px;line-height:1.35;margin:44px 0 14px}.article-body h3{color:var(--dark-title);font-size:20px;margin:28px 0 10px}.article-body p{color:var(--dark-body);font-size:16px;line-height:2;margin:0 0 18px}.article-body ul{margin:0 0 22px;padding-left:1.3em}.article-body li{margin:8px 0;color:var(--dark-body);line-height:1.9}.note{border:1px solid var(--line);border-radius:16px;padding:24px;margin:32px 0;background:rgba(255,255,255,.1);color:var(--dark-body)}.note strong{color:var(--dark-title)}.toc{margin-top:32px}.toc ol{margin:0;padding-left:1.3em}.toc li{margin:8px 0}.cta{margin-top:44px;border-radius:18px;padding:30px;border:1px solid rgba(200,150,30,.30);background:#1B1513;color:var(--text)}.cta h2{color:var(--text);font-family:"Noto Serif SC",serif;margin:0 0 12px;font-size:26px}.cta p{color:var(--text2);margin:0 0 24px}.boundary{font-size:14px;line-height:1.85;color:var(--dark-muted);border-top:1px solid rgba(200,150,30,.24);padding-top:22px;margin-top:34px}.footer{padding:44px clamp(20px,5vw,72px);border-top:1px solid rgba(200,150,30,.18);color:var(--text2);font-size:14px}.footer-inner{width:min(1180px,100%);margin:0 auto}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}@media(max-width:860px){.nav-links{display:none}.grid,.article-card{grid-template-columns:1fr}.hero{padding-top:64px}.module,.article-shell{width:min(100% - 28px,1180px)}.article,.module{border-radius:18px}.line-card{padding:22px}.article h1{font-size:34px}.article-body h2{font-size:24px}.btn,.nav-cta{width:100%}.actions{flex-direction:column}.article-card .btn{width:fit-content}}


/* ================================================================
   Blog hotfix：导航、标题与文章视觉引导
   ================================================================ */
.nav {
  justify-content: space-between !important;
}

.nav .nav-cta {
  padding: 8px 22px !important;
  min-width: 0 !important;
  height: auto !important;
  border-radius: 50px !important;
}

.article h1 {
  font-size: clamp(42px, 5.2vw, 76px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.045em !important;
  max-width: 1180px !important;
}

.article .lead {
  font-size: clamp(20px, 2vw, 27px) !important;
  line-height: 1.8 !important;
  max-width: 1080px !important;
}

.article-visual {
  margin: 38px 0 34px;
  padding: 34px;
  border: 1px solid rgba(200,150,30,.30);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 20%, rgba(200,150,30,.14), transparent 26%),
    linear-gradient(135deg, rgba(20,16,15,.98), rgba(27,21,19,.94));
  color: #F7F4EE;
  box-shadow: 0 22px 60px rgba(20,16,15,.16);
  overflow: hidden;
  position: relative;
}

.article-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.035) 48%, transparent 58%),
    repeating-linear-gradient(-8deg, transparent 0 90px, rgba(255,255,255,.018) 91px, transparent 92px 180px);
  opacity: .65;
  pointer-events: none;
}

.visual-main,
.visual-grid {
  position: relative;
  z-index: 1;
}

.visual-main span {
  display: block;
  margin-bottom: 10px;
  color: #C8961E;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.visual-main strong {
  display: block;
  font-family: "Noto Serif SC", serif;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.visual-grid div {
  padding: 14px 16px;
  border: 1px solid rgba(200,150,30,.32);
  border-radius: 14px;
  color: rgba(247,244,238,.84);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: rgba(255,255,255,.035);
}

.module-desc {
  max-width: 980px !important;
}

@media (max-width: 768px) {
  .nav {
    height: 68px !important;
    padding: 0 20px !important;
  }

  .logo {
    font-size: 16px !important;
  }

  .article h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .article .lead {
    font-size: 18px !important;
  }

  .article-visual {
    padding: 24px 20px;
    margin: 28px 0;
  }

  .visual-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ================================================================
   Blog title final fix：文章标题克制化
   这个规则放在最后，专门压住之前的大标题样式。
   ================================================================ */
.article h1,
.article-shell .article h1,
main.article-shell article.article h1 {
  font-size: clamp(34px, 4.2vw, 56px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.035em !important;
  max-width: 1080px !important;
  margin-top: 18px !important;
  margin-bottom: 28px !important;
}

.article .lead,
.article-shell .article .lead,
main.article-shell article.article .lead {
  font-size: clamp(18px, 1.65vw, 23px) !important;
  line-height: 1.8 !important;
  max-width: 980px !important;
  margin-bottom: 28px !important;
}

.article .meta {
  margin-bottom: 22px !important;
}

.article-visual {
  margin-top: 30px !important;
}

@media (max-width: 768px) {
  .article h1,
  .article-shell .article h1,
  main.article-shell article.article h1 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.26 !important;
    margin-bottom: 22px !important;
  }

  .article .lead,
  .article-shell .article .lead,
  main.article-shell article.article .lead {
    font-size: 17px !important;
    line-height: 1.8 !important;
  }
}


/* ================================================================
   Blog title final fix v2：标题拆行 + 第二行不换行
   ================================================================ */
.article h1.article-title,
.article-shell .article h1.article-title,
main.article-shell article.article h1.article-title {
  display: block !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.035em !important;
  max-width: 1180px !important;
  margin-top: 18px !important;
  margin-bottom: 26px !important;
}

.article-title span {
  display: block !important;
}

.article-title .title-nowrap {
  white-space: nowrap !important;
}

.article .lead,
.article-shell .article .lead,
main.article-shell article.article .lead {
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.8 !important;
  max-width: 980px !important;
}

@media (max-width: 900px) {
  .article-title .title-nowrap {
    white-space: normal !important;
  }
}

@media (max-width: 768px) {
  .article h1.article-title,
  .article-shell .article h1.article-title,
  main.article-shell article.article h1.article-title {
    font-size: clamp(28px, 7.2vw, 38px) !important;
    line-height: 1.26 !important;
  }
}


/* ================================================================
   Article visual card final fix：导读卡字体缩小 + 关键词锚点
   ================================================================ */
.visual-main strong {
  font-size: clamp(24px, 2.45vw, 34px) !important;
  line-height: 1.36 !important;
  letter-spacing: -0.02em !important;
}

.article-visual {
  padding: 30px 34px !important;
}

.visual-grid a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(200,150,30,.32) !important;
  border-radius: 14px !important;
  color: rgba(247,244,238,.88) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  background: rgba(255,255,255,.035) !important;
  transition: transform .24s ease, border-color .24s ease, background .24s ease, color .24s ease !important;
}

.visual-grid a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(200,150,30,.62) !important;
  background: rgba(200,150,30,.12) !important;
  color: #F7F4EE !important;
}

.article-body h2 {
  scroll-margin-top: 96px;
}

@media (max-width: 768px) {
  .visual-main strong {
    font-size: clamp(22px, 6.2vw, 30px) !important;
  }

  .article-visual {
    padding: 24px 20px !important;
  }

  .visual-grid a {
    font-size: 13px !important;
    padding: 12px 10px !important;
  }
}


/* ================================================================
   Blog article cover image
   ================================================================ */
.article-cover {
  margin: 32px 0 30px;
  border: 1px solid rgba(200,150,30,.26);
  border-radius: 22px;
  overflow: hidden;
  background: #1A1513;
  box-shadow: 0 24px 60px rgba(42,33,30,.10);
}

.article-cover img {
  width: 100%;
  height: clamp(260px, 38vw, 460px);
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.02);
}

.article h1.compact-title,
.article-shell .article h1.compact-title,
main.article-shell article.article h1.compact-title {
  font-size: clamp(30px, 3.1vw, 46px) !important;
  line-height: 1.24 !important;
  max-width: 1080px !important;
}

@media (max-width: 768px) {
  .article-cover {
    border-radius: 16px;
    margin: 24px 0;
  }

  .article-cover img {
    height: 220px;
  }

  .article h1.compact-title,
  .article-shell .article h1.compact-title,
  main.article-shell article.article h1.compact-title {
    font-size: clamp(28px, 7.2vw, 38px) !important;
    line-height: 1.28 !important;
  }
}


/* ================================================================
   Shared blog article refinements: cover, compact title, visual links
   ================================================================ */
.article-cover {
  margin: 32px 0 30px;
  border: 1px solid rgba(200,150,30,.26);
  border-radius: 22px;
  overflow: hidden;
  background: #1A1513;
  box-shadow: 0 24px 60px rgba(42,33,30,.10);
}

.article-cover img {
  width: 100%;
  height: clamp(260px, 38vw, 460px);
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.02);
}

.article h1.compact-title,
.article-shell .article h1.compact-title,
main.article-shell article.article h1.compact-title,
.article h1.article-title,
.article-shell .article h1.article-title,
main.article-shell article.article h1.article-title {
  font-size: clamp(30px, 3.1vw, 46px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.035em !important;
  max-width: 1080px !important;
  margin-top: 18px !important;
  margin-bottom: 26px !important;
}

.article-title span {
  display: block !important;
}

.article-title .title-nowrap {
  white-space: nowrap !important;
}

.visual-main strong {
  font-size: clamp(24px, 2.45vw, 34px) !important;
  line-height: 1.36 !important;
  letter-spacing: -0.02em !important;
}

.article-visual {
  padding: 30px 34px !important;
}

.visual-grid a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(200,150,30,.32) !important;
  border-radius: 14px !important;
  color: rgba(247,244,238,.88) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  background: rgba(255,255,255,.035) !important;
  transition: transform .24s ease, border-color .24s ease, background .24s ease, color .24s ease !important;
}

.visual-grid a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(200,150,30,.62) !important;
  background: rgba(200,150,30,.12) !important;
  color: #F7F4EE !important;
}

.article-body h2 {
  scroll-margin-top: 96px;
}

@media (max-width: 900px) {
  .article-title .title-nowrap {
    white-space: normal !important;
  }
}

@media (max-width: 768px) {
  .article-cover {
    border-radius: 16px;
    margin: 24px 0;
  }

  .article-cover img {
    height: 220px;
  }

  .article h1.compact-title,
  .article-shell .article h1.compact-title,
  main.article-shell article.article h1.compact-title,
  .article h1.article-title,
  .article-shell .article h1.article-title,
  main.article-shell article.article h1.article-title {
    font-size: clamp(28px, 7.2vw, 38px) !important;
    line-height: 1.28 !important;
  }

  .visual-main strong {
    font-size: clamp(22px, 6.2vw, 30px) !important;
  }

  .article-visual {
    padding: 24px 20px !important;
  }

  .visual-grid a {
    font-size: 13px !important;
    padding: 12px 10px !important;
  }
}
/* CSS-generated cover when no photo is provided */
.css-cover {
  height: clamp(260px, 38vw, 460px);
  position: relative;
  background:
    radial-gradient(circle at 18% 28%, rgba(200,150,30,.18), transparent 24%),
    radial-gradient(circle at 82% 72%, rgba(247,244,238,.055), transparent 25%),
    linear-gradient(135deg, #14100F 0%, #1A1513 52%, #120F0E 100%);
}

.css-cover::before,
.css-cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.css-cover::before {
  inset: 36px;
  border: 1px solid rgba(200,150,30,.28);
  border-radius: 18px;
}

.css-cover::after {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.035) 46%, transparent 58%),
    repeating-linear-gradient(-8deg, transparent 0 100px, rgba(255,255,255,.018) 101px, transparent 102px 200px);
  opacity: .7;
}

.cover-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cover-content span {
  color: #C8961E;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cover-content strong {
  font-family: "Noto Serif SC", serif;
  color: #F7F4EE;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 780px;
}