/* 颜色/字体 token 统一声明在 site-shell.css（全站唯一），此处不再重复定义 */

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.hero {
  min-height: 820px;
  height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--white);
  background: var(--red-900);
  overflow: hidden;
}
.hero-bg, .hero-vignette, .hero-grid { position: absolute; inset: 0; }
.hero-bg {
  background-image: url("/assets/china-red-hero.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.012);
  animation: hero-breathe 12s ease-in-out infinite alternate;
}
.hero-vignette {
  background:
    linear-gradient(90deg, rgba(72,3,7,.84) 0%, rgba(88,6,8,.48) 38%, rgba(76,6,8,.05) 70%),
    linear-gradient(0deg, rgba(58,4,6,.65) 0%, transparent 35%),
    linear-gradient(180deg, rgba(58,4,6,.3) 0%, transparent 28%);
}
.hero-grid {
  opacity: .18;
  background-image: repeating-linear-gradient(112deg, transparent 0 78px, rgba(244,216,142,.18) 79px, transparent 80px 158px);
  background-size: auto;
  mask-image: linear-gradient(90deg, black, transparent 70%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 64px));
  margin: 38px auto 0;
}
.eyebrow { display: flex; align-items: center; gap: 13px; color: var(--gold-bright); font-size: 12px; letter-spacing: .32em; }
.eyebrow span { width: 44px; height: 1px; background: var(--gold); }
.hero h1 {
  margin: 24px 0 22px;
  max-width: 820px;
  font-family: var(--serif);
  font-size: clamp(62px, 6.8vw, 106px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .08em;
  text-shadow: 0 10px 38px rgba(57,0,3,.24);
}
.hero h1 em { color: var(--gold-bright); font-style: normal; }
.hero-lead { margin: 0; color: rgba(255,255,255,.76); font-family: var(--serif); font-size: 17px; line-height: 2; letter-spacing: .08em; }
.hero-actions { margin-top: 38px; display: flex; align-items: center; gap: 32px; }
.primary-button {
  min-width: 154px;
  height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--red-900);
  background: var(--gold-bright);
  font-size: 14px;
  font-weight: 600;
  transition: transform .25s, background .25s;
}
.primary-button:hover { transform: translateY(-3px); background: var(--gold-hover); }
.primary-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* 下划线式文本按钮（hero 按钮族第三员：primary 金底 / outline 描边 / text 下划线，§13）：
   hover 走金色提亮（与 primary 的 gold-hover 同语言；hero 红底上红色系不可见）。
   曾漏写 hover（与按钮族不一致，全站按钮悬停一致性审计，见开发笔记 §70）。 */
.text-button { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 13px; letter-spacing: .08em; transition: color .2s, border-bottom-color .2s; }
.text-button:hover { color: var(--gold-hover); border-bottom-color: rgba(255,229,165,.6); }
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: max(37px, calc((100vw - 1320px) / 2 + 5px));
  bottom: -2px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.45);
  font-size: 8px;
  letter-spacing: .24em;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: left bottom;
}
.scroll-cue i { display: block; width: 42px; height: 1px; background: rgba(255,255,255,.35); overflow: hidden; }
.scroll-cue i::after { content: ""; display: block; width: 40%; height: 100%; background: var(--gold); animation: scroll-line 2s infinite; }

.section { padding: 120px max(32px, calc((100vw - 1320px) / 2)); }
.section-kicker { display: flex; align-items: center; gap: 13px; color: var(--red-700); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.section-kicker span { font-family: var(--mono); }
.section-kicker i { width: 35px; height: 1px; background: currentColor; opacity: .55; }
.section-kicker strong { font-weight: 600; }
.section-kicker.light { color: var(--gold-bright); }

.belief {
  position: relative;
  color: var(--white);
  background-color: var(--red-950);
  background-image: radial-gradient(rgba(244,216,142,.1) .7px, transparent .7px);
  background-size: 8px 8px;
}
.belief::before {
  content: "人间";
  position: absolute;
  right: 0;
  top: 30px;
  color: rgba(255,250,240,.04);
  font: 700 min(24vw, 330px)/1 var(--serif);
  letter-spacing: -.18em;
  pointer-events: none;
}
.belief-layout { position: relative; z-index: 1; margin-top: 54px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 10%; align-items: start; }
.belief-heading { position: relative; }
.belief-heading h2, .journal-head h2, .about-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(43px, 5vw, 74px); line-height: 1.3; letter-spacing: .05em; }
.belief-heading h2 { color: rgba(247,231,201,.93); }
.seal-note {
  position: absolute;
  left: -30px;
  top: -25px;
  width: 54px;
  height: 54px;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(244,216,142,.78);
  border: 2px solid rgba(244,216,142,.34);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .02em;
  transform: rotate(-6deg);
}
/* 字形墨迹在 CJK 行盒内略偏低（行盒几何对称、墨迹不对称），
   用文字块自身的平移校正——只移文字、不动边框（想动边框会抵消校正） */
.seal-note > span { display: block; transform: translateY(-2px); }
.belief-copy { padding-top: 8px; }
.belief-copy p { color: rgba(255,250,240,.68); font-size: 15px; line-height: 2.1; text-align: justify; }
.belief-copy .lead-paragraph { margin-top: 0; color: var(--white); font-family: var(--serif); font-size: 21px; line-height: 1.85; }
.belief-signature { margin-top: 32px; padding-top: 25px; display: flex; gap: 15px; align-items: center; border-top: 1px solid rgba(244,216,142,.25); }
.star-mark { width: 39px; height: 39px; display: grid; place-items: center; color: var(--red-900); background: var(--gold-bright); border-radius: 2px; font-family: var(--serif); font-size: 16px; transform: rotate(-2deg); }
.belief-signature div { display: flex; flex-direction: column; gap: 5px; }
.belief-signature strong { color: var(--gold-bright); font-family: var(--serif); letter-spacing: .14em; }
.belief-signature small { color: rgba(255,250,240,.5); font-size: 11px; }
.faith-declaration {
  margin-top: 72px;
  padding: 31px 34px;
  display: grid;
  grid-template-columns: auto minmax(260px, .8fr) 1fr;
  align-items: center;
  gap: 28px;
  color: var(--ink);
  /* 红色区块里唯一的大面积浅色焦点：不用纯白，改成有纸张温度的金米色。 */
  background: linear-gradient(105deg, #efe0c2 0%, #f5ead5 58%, #e9d5ae 100%);
  border: 1px solid rgba(231,188,101,.62);
  box-shadow: 0 18px 36px -24px rgba(20,0,2,.58);
}
.faith-star { width: 52px; height: 52px; display: grid; place-items: center; color: var(--red-700); border: 1px solid var(--red-line); font-size: 22px; }
.faith-declaration div { display: flex; flex-direction: column; gap: 8px; }
.faith-declaration small { color: var(--red-700); font: 9px/1 var(--mono); letter-spacing: .24em; }
.faith-declaration strong { font: 700 20px/1.65 var(--serif); letter-spacing: .04em; }
.faith-declaration p { margin: 0; padding-left: 28px; color: var(--muted); border-left: 1px solid var(--border); font-size: 13px; line-height: 1.9; }
.journal {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}
.journal::before { content: ""; position: absolute; inset: 0; opacity: .32; background: repeating-linear-gradient(135deg, transparent 0 60px, rgba(104,16,20,.07) 61px, transparent 62px 122px); }
.journal-head, .journal-more { position: relative; z-index: 1; }
/* 「查看文章列表」与轮播卡片之间补一点间距（卡片下方的大间距由轮播页自身
   padding 承担，见 featured.css 轮播页模板注释；这里只加小余量） */
.journal-more { margin-top: 12px; color: var(--red-700); }
.journal-more a { transition: color .2s; }
.journal-more a:hover { color: var(--red-900); }
.journal-head { display: flex; align-items: end; justify-content: space-between; gap: 80px; }
.journal-head h2 { margin-top: 32px; }
.journal-head > p { width: min(380px, 100%); margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 2; }
.about { min-height: 650px; display: grid; grid-template-columns: 1fr .9fr; gap: 10%; align-items: center; position: relative; background: var(--paper); overflow: hidden; }
.about-orbit { position: absolute; width: 600px; height: 600px; border: 1px solid rgba(146,29,29,.08); border-radius: 50%; right: -220px; top: 25px; }
.about-orbit::before, .about-orbit::after { content: ""; position: absolute; border: 1px solid rgba(146,29,29,.07); border-radius: 50%; }
.about-orbit::before { inset: 70px; }
.about-orbit::after { inset: 150px; }
.about-copy, .about-quote { position: relative; z-index: 1; }
.about-copy h2 { margin-top: 32px; }
.about-copy > p { max-width: 590px; margin: 30px 0; color: var(--muted); font-size: 14px; line-height: 2; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.outline-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid rgba(134,21,26,.45); color: var(--red-800); font-size: 13px; transition: color .2s, background .2s; }
.outline-button:hover { color: white; background: var(--red-800); }
.about-quote { padding: 50px 0 50px 54px; border-left: 1px solid rgba(134,21,26,.24); }
.quote-mark { position: absolute; top: -20px; left: 30px; color: rgba(134,21,26,.12); font: 150px/1 var(--serif); }
.about-quote p { position: relative; margin: 0; color: var(--red-900); font: 700 clamp(24px, 2.4vw, 35px)/1.8 var(--serif); letter-spacing: .05em; }
.about-quote footer { margin-top: 28px; color: var(--faint); font-size: 12px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes hero-breathe { from { transform: scale(1.012); } to { transform: scale(1.045); } }
@keyframes scroll-line { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

@media (max-width: 1050px) {
  .desktop-nav { gap: 28px; }
  .belief-layout { grid-template-columns: 1fr; gap: 45px; }
  .belief-copy { max-width: 720px; }
  .about { grid-template-columns: 1fr; gap: 70px; }
  .about-quote { max-width: 700px; }
}

@media (max-width: 760px) {
  .hero { min-height: 700px; }
  .hero-bg { background-position: 62% center; }
  .hero-vignette { background: linear-gradient(90deg, rgba(72,3,7,.86), rgba(84,5,8,.3)), linear-gradient(0deg, rgba(58,4,6,.7), transparent 40%); }
  .hero-content { width: calc(100% - 42px); margin-top: 10px; }
  .hero h1 { font-size: clamp(54px, 16vw, 82px); letter-spacing: .02em; }
  .hero-lead { font-size: 14px; }
  .hero-actions { gap: 21px; }
  .text-button { font-size: 12px; }
  .scroll-cue { display: none; }
  .section { padding: 85px 21px; }
  /* 避免“人间”大字水印伸出右侧，使移动端页面比视口宽、产生横向白边/自动缩小 */
  .belief::before { right: 0; }
  .belief-heading { padding-left: 10px; }
  .seal-note { left: -4px; top: -48px; }
  .belief-heading h2, .journal-head h2, .about-copy h2 { font-size: 39px; }
  .faith-declaration { margin-top: 52px; padding: 28px 24px; grid-template-columns: auto 1fr; }
  .faith-declaration p { grid-column: 1 / -1; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .journal-head { align-items: start; flex-direction: column; gap: 28px; }
  .about { gap: 40px; }
  .about-quote { padding: 35px 0 35px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
.noscript-note {
  position: relative;
  z-index: 1;
  color: var(--muted);
}
.long-quote {
  padding-top: 42px;
  padding-bottom: 42px;
}
.long-quote p {
  max-width: 650px;
  font-size: clamp(20px, 2.05vw, 29px);
  line-height: 1.9;
  letter-spacing: .025em;
}
.long-quote footer {
  max-width: 620px;
  line-height: 1.9;
}
.long-quote footer a {
  color: var(--red-700);
  border-bottom: 1px solid rgba(165, 28, 33, .35) /* red-700 的 α 变体，仅此一处 */;
}