/* ============================================================
   富坑村 · 我的家乡我的家 —— 徽派风格静态站点样式
   粉墙黛瓦意象：宣纸色底 / 墨色字 / 黛瓦灰 / 朱砂点缀
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  --paper: #faf8f3;        /* 宣纸底色 */
  --paper-deep: #f3eee2;   /* 略深纸色（交替章节底） */
  --ink: #2b2b2b;          /* 墨色正文 */
  --ink-soft: #5a5a5a;     /* 次级墨色 */
  --tile: #3d4650;         /* 黛瓦灰 */
  --tile-soft: #7d8892;    /* 远山灰 */
  --cinnabar: #a03a2a;     /* 朱砂红（点缀） */
  --line: #ddd6c6;         /* 细分隔线 */
  --maxw-prose: 42em;      /* 正文限宽 */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
    "STSong", "SimSun", "Georgia", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue",
    Arial, sans-serif;
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 抵消固定导航高度，锚点落点留白 */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

/* ============================================================
   顶部固定导航
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-brand-text {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  color: var(--ink);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* 移动端横向滚动而非换行 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  display: block;
  padding: 6px 14px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

.nav-links a.is-active {
  color: var(--ink);
  border-bottom-color: var(--tile);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  margin-top: 51px; /* 导航高度（10+30+10+边框） */
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--paper);
}

.hero-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 20px 64px;
  /* 文字落在近山上方，垫一层淡纸色提升可读性 */
  background: linear-gradient(
    to bottom,
    rgba(250, 248, 243, 0) 0%,
    rgba(250, 248, 243, 0.72) 38%,
    rgba(250, 248, 243, 0.92) 100%
  );
  width: 100%;
}

.hero-title {
  margin: 0;
  font-size: clamp(1.7rem, 4.5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.hero-dot { color: var(--cinnabar); margin: 0 0.15em; }

.hero-sub {
  margin: 14px 0 0;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.35em;
  /* 抵消 letter-spacing 末字尾随空隙，使居中真正对齐 */
  margin-right: -0.35em;
  color: var(--tile);
}

.hero-divider {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.hero-line {
  width: 44px;
  height: 1px;
  background: var(--tile-soft);
}
.hero-line:first-child { background: var(--cinnabar); }

/* 「去看电子版」悬浮按钮：毛玻璃 + 半透明宣纸底 + 朱砂细边 */
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* 触控目标 ≥44px */
  margin-top: 28px;
  padding: 8px 28px;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--ink);
  background: rgba(250, 248, 243, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(160, 58, 42, 0.45);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(61, 70, 80, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
}

/* 按钮文字独立包裹：负 margin 抵消 letter-spacing 尾随空隙，保证文字在胶囊内真正居中 */
.hero-cta-text { margin-right: -0.18em; }

.hero-cta:hover,
.hero-cta:focus-visible {
  color: var(--cinnabar);
  border-color: var(--cinnabar);
  transform: translateY(-2px); /* hover 微上浮 */
  box-shadow: 0 8px 22px rgba(61, 70, 80, 0.22);
}

.hero-cta:active { transform: translateY(0); }

/* ============================================================
   章节骨架
   ============================================================ */
.chapter {
  padding: 72px 24px 24px;
}

/* 页脚删除后，页尾（免责声明之后）保留呼吸留白 */
main {
  padding-bottom: 72px;
}

.chapter-alt {
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-bottom: 56px;
}

.chapter-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 48px;
  max-width: 960px;
}

.chapter-rule {
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: var(--line);
}

/* 印章式小徽记（第一章用，其余章节用「·」占位保持节奏） */
.chapter-seal {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.chapter-title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}

/* 中文标题：letter-spacing 的末字尾随空隙用负 margin 抵消，实现真居中 */
.chapter-zh {
  white-space: nowrap;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}

.chapter-en {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  margin-right: -0.3em; /* 抵消末字尾随空隙，与中文同轴居中 */
  color: var(--tile-soft);
  text-align: center;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ============================================================
   正文排版（书籍阅读体验）
   ============================================================ */
.prose {
  max-width: var(--maxw-prose);
  margin: 0 auto;
}

.prose h3 {
  margin: 44px 0 16px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--tile);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 小节标题前的朱砂短竖线 */
.prose h3::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--cinnabar);
  flex-shrink: 0;
}

.prose p {
  margin: 0 0 1.35em;
  text-align: justify;
  text-justify: inter-ideograph;
  /* 首行缩进（选用缩进而非段间距为主） */
  text-indent: 2em;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.95;
}

.prose p:last-child { margin-bottom: 0; }

.prose-book p {
  font-size: 0.98rem;
  color: #3a3a3a;
}

/* 阅读面板：固定高度可滚动，音频播放时由 JS 同步驱动 scrollTop */
.reading-panel {
  max-width: calc(var(--maxw-prose) + 56px);
  height: min(70vh, 640px);
  margin: 0 auto;
  padding: 8px 20px 20px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* 自定义细滚动条（Firefox） */
  scrollbar-width: thin;
  scrollbar-color: var(--tile-soft) transparent;
}

/* 自定义细滚动条（WebKit） */
.reading-panel::-webkit-scrollbar { width: 6px; }
.reading-panel::-webkit-scrollbar-track { background: transparent; }
.reading-panel::-webkit-scrollbar-thumb {
  background: var(--tile-soft);
  border-radius: 3px;
}
.reading-panel::-webkit-scrollbar-thumb:hover { background: var(--tile); }

/* ============================================================
   书籍信息卡
   ============================================================ */
.book-card {
  max-width: 640px;
  margin: 0 auto 56px;
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(61, 70, 80, 0.08);
}

.book-cover {
  width: 172px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  box-shadow: 3px 4px 0 rgba(61, 70, 80, 0.14);
  align-self: flex-start;
}

/* 真实书封面：随容器宽度自适应，固定 3:4 防加载抖动 */
.book-cover img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* 图片加载失败时退回的示意封面 */
.book-cover-fallback[hidden] { display: none; }

.book-cover-fallback svg {
  display: block;
  width: 100%;
  height: auto;
}

.book-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.book-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.book-tagline {
  margin: 8px 0 18px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--cinnabar);
}

.book-info {
  margin: 0;
  border-top: 1px solid var(--line);
}

.book-info > div {
  display: flex;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.92rem;
}

.book-info dt {
  width: 5em;
  flex-shrink: 0;
  color: var(--ink-soft);
  letter-spacing: 0.25em;
}

.book-info dd {
  margin: 0;
  color: var(--ink);
}

/* ============================================================
   有声简介
   ============================================================ */
.audio-card {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(61, 70, 80, 0.08);
  text-align: left;
}

.audio-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.audio-body { min-width: 0; flex: 1; }

.audio-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.audio-note {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

.audio-card audio {
  width: 100%;
  height: 40px;
}

/* 有声版控制区：男/女声切换 chips + 跟随滚动开关 */
.audio-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
}

.voice-chips {
  display: flex;
  gap: 8px;
}

.voice-chip {
  min-height: 36px;
  /* 左内边距补偿 letter-spacing 末字尾随空隙，保证胶囊内文字居中 */
  padding: 4px 18px 4px calc(18px + 0.15em);
  font-family: var(--font-serif);
  font-size: 0.88rem;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease,
    background 0.2s ease;
}

.voice-chip:hover,
.voice-chip:focus-visible {
  color: var(--cinnabar);
  border-color: var(--cinnabar);
}

/* 当前选中态：朱砂描边 + 淡朱砂底 */
.voice-chip.is-active {
  color: var(--cinnabar);
  border-color: var(--cinnabar);
  background: rgba(160, 58, 42, 0.07);
  font-weight: 700;
}

.follow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.follow-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cinnabar);
  cursor: pointer;
}

/* ============================================================
   声明（页脚上方独立小节）
   ============================================================ */
.chapter-disclaimer {
  /* 页尾留白统一由 main 的 padding-bottom 承担 */
  padding-bottom: 0;
}

.disclaimer-text {
  max-width: var(--maxw-prose);
  margin: 0 auto;
  padding: 18px 22px;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px dashed var(--line);
  text-align: justify;
}

/* ============================================================
   响应式（<768px）
   ============================================================ */
@media (max-width: 768px) {
  html { scroll-padding-top: 64px; }

  .site-nav {
    padding: 8px 14px;
  }

  .nav-brand-text {
    /* 移动端同样显示「富坑村」，仅适当缩小字号 */
    font-size: 0.95rem;
  }

  .nav-links a {
    padding: 6px 10px;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }

  .hero {
    margin-top: 47px;
    min-height: 52vh;
  }

  .hero-text { padding: 32px 16px 44px; }

  .chapter { padding: 52px 18px 16px; }
  .chapter-alt { padding-bottom: 40px; }

  /* 正文：移动端保持 42em 限宽自然失效，改用全宽 + 更小字号 */
  .prose p {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  /* 书籍信息卡：单列堆叠 */
  .book-card {
    flex-direction: column;
    align-items: center;
    padding: 22px 18px;
    gap: 20px;
  }

  .book-cover { width: 150px; }

  .book-meta { width: 100%; text-align: left; }

  .audio-card {
    flex-direction: column;
    text-align: center;
    padding: 24px 18px;
    gap: 14px;
  }

  .audio-icon { width: 52px; height: 52px; }

  /* 新增控件响应式：阅读面板收窄高度，控制区居中换行 */
  .reading-panel {
    height: min(60vh, 560px);
    padding: 4px 14px 16px;
  }

  .audio-controls {
    justify-content: center;
  }

  /* 音频卡移动端文字居中：抵消 letter-spacing 末字尾随空隙 */
  .audio-title { margin-right: -0.1em; }

  .voice-chip { padding: 4px 15px 4px calc(15px + 0.15em); }

  .hero-cta {
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    padding: 8px 22px;
  }

  .hero-cta-text { margin-right: -0.12em; }
}

/* 极小屏（<380px）微调 */
@media (max-width: 380px) {
  .hero-title { letter-spacing: 0.04em; }
  .book-cover { width: 130px; }
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-links a { transition: none; }
  .hero-cta { transition: none; }
  .voice-chip { transition: none; }
}