/* ==========================================================================
   911吃瓜爆料 · 漫画专题阅读站
   全站样式表
   --------------------------------------------------------------------------
   分组：base / layout / components / pages / responsive
   ========================================================================== */

/* ==========================================================================
   1. base —— 变量、重置、排版
   ========================================================================== */

:root {
  --ink: #16405c;
  --teal: #1f8a70;
  --paper: #f4f1e7;
  --white: #ffffff;
  --orange: #c2592b;
  --slate: #5b6b73;
  --line: #d9d3c4;
  --line-soft: #e6e1d4;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(22, 64, 92, 0.06);
  --shadow-hover: 0 6px 16px rgba(22, 64, 92, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --wrap: 1080px;
  --gap: 32px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.3;
}

p {
  margin: 0 0 12px;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ==========================================================================
   2. layout —— 骨架：body / header / nav / main / breadcrumb / footer
   ========================================================================== */

.site-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* --- 页头 --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  flex: none;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.brand:hover,
.brand:focus {
  color: var(--teal);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

.primary-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--teal);
  text-decoration: none;
}

.site-nav a.is-current {
  color: var(--teal);
  font-weight: 700;
  border-bottom-color: var(--teal);
}

/* --- 主体 --- */

.site-main {
  flex: 1 1 auto;
  width: 100%;
}

.inner-main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 56px;
}

/* --- 面包屑 --- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 20px 0 0;
  font-size: 14px;
  color: var(--slate);
}

.breadcrumb a {
  color: var(--slate);
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: var(--teal);
}

.breadcrumb-sep {
  color: var(--line);
}

.breadcrumb-current {
  color: var(--ink);
  font-weight: 600;
}

/* --- 页面标题区 --- */

.page-header {
  padding: 12px 0 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 28px;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

/* --- 页脚 --- */

.site-footer {
  background: var(--ink);
  color: #d8e2e8;
  margin-top: auto;
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 24px 32px;
}

.footer-summary {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.8;
  color: #c3d1d9;
  max-width: 760px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-col-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-size: 14px;
  color: #b8cbd6;
}

.footer-col a:hover,
.footer-col a:focus {
  color: #ffffff;
}

.footer-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #9fb3bf;
  max-width: 760px;
}

.footer-copy {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8ba0ac;
}

/* ==========================================================================
   3. components —— 复用组件：徽标、卡片、表格、提示条、步骤、FAQ
   ========================================================================== */

/* --- 通用 section 标题 --- */

.section {
  padding: 44px 0;
  border-bottom: 1px solid var(--line-soft);
}

.section-head {
  margin-bottom: 22px;
}

.section-head h2 {
  font-size: 22px;
  font-weight: 600;
}

.section-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 760px;
}

.section-note {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 720px;
}

.section-lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 760px;
}

.section-intro {
  margin: 8px 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 720px;
}

/* --- 路线 / 批次编号徽标 --- */

.route-no,
.route-badge,
.step-no,
.step-badge,
.badge-num,
.step-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--white);
  background: var(--teal);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}

/* --- 封面图容器 --- */

.cover,
.route-cover,
.pick-card-media,
.pick-feature-media,
.top-pick-media,
.group-figure,
.guide-figure,
.hero-media,
.page-hero-media,
.about-intro-figure {
  margin: 0;
}

.cover img,
.route-cover img,
.pick-card-media img,
.pick-feature-media img,
.top-pick-media img,
.group-figure img,
.guide-figure img,
.hero-media img,
.page-hero-media img,
.about-intro-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--line-soft);
}

.cover figcaption,
.route-cover figcaption,
.group-figure figcaption,
.guide-figure figcaption,
.hero-media figcaption,
.page-hero-media figcaption,
.about-intro-figure figcaption,
.pick-feature-media figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
}

/* --- 表格 --- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.update-table,
.catalog-table {
  min-width: 640px;
  font-size: 14px;
}

.update-table caption,
.catalog-table caption {
  caption-side: top;
  text-align: left;
  padding: 14px 16px 4px;
  font-size: 13px;
  color: var(--slate);
}

.update-table thead th,
.catalog-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef2ec;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.update-table tbody th,
.update-table tbody td,
.catalog-table tbody th,
.catalog-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--slate);
  vertical-align: top;
  text-align: left;
}

.update-table tbody th,
.catalog-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.update-table tbody tr:last-child th,
.update-table tbody tr:last-child td,
.catalog-table tbody tr:last-child th,
.catalog-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) {
  .update-table tbody tr:hover th,
  .update-table tbody tr:hover td,
  .catalog-table tbody tr:hover th,
  .catalog-table tbody tr:hover td {
    background: #f7faf7;
  }
}

/* --- 提示条 --- */

.tip-bar {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--white);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.tip-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tip-item {
  padding: 12px 16px;
  background: var(--white);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

/* --- 步骤列表 --- */

.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-title {
  font-size: 17px;
  font-weight: 600;
}

.step-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
  flex: 1 1 auto;
}

.step-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

/* --- 侧栏块 --- */

.side-block,
.sidebar-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.side-block h2,
.sidebar-block h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.side-list,
.term-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.side-list li,
.term-list li {
  padding-left: 14px;
  position: relative;
}

.side-list li::before,
.term-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.term-list strong {
  color: var(--ink);
}

/* --- 锚点导航 --- */

.anchor-nav {
  margin-top: 14px;
}

.anchor-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.anchor-nav a {
  font-size: 14px;
  color: var(--teal);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.anchor-nav a:hover,
.anchor-nav a:focus {
  border-bottom-color: var(--teal);
  text-decoration: none;
}

/* --- 页面标题区（内页通用） --- */

.page-hero {
  padding: 24px 0 20px;
}

.page-lead,
.page-hero-lead,
.page-hero-summary,
.page-summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
  max-width: 760px;
}

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.page-hero-note {
  font-size: 14px;
  color: var(--slate);
}

/* --- 延伸入口（通用） --- */

.next-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.next-links li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.next-links a {
  font-weight: 600;
}

/* ==========================================================================
   4. pages —— 各页面专属模块
   ========================================================================== */

/* ------------------------------------------------------------------
   4.1 首页 index.html
   ------------------------------------------------------------------ */

.home-main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 56px;
}

/* --- 首屏需求选择区 --- */

.hero {
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--line-soft);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 40px;
  align-items: start;
}

.hero-text {
  min-width: 0;
}

.hero-eyebrow {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.hero-text h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

.hero-lead {
  margin: 12px 0 22px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--slate);
  max-width: 560px;
}

.need-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.need-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
}

.need-text {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--ink);
}

.need-link {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

.hero-media {
  min-width: 0;
}

.hero-media img {
  aspect-ratio: 4 / 3;
}

/* --- 按题材找漫画 --- */

.route-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.route-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  min-width: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.route-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.route-name {
  font-size: 17px;
  font-weight: 600;
}

.route-fit {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.route-covers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.route-covers .cover img {
  aspect-ratio: 3 / 4;
}

.route-entry {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

@media (hover: hover) {
  .route-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }
}

/* --- 跟着更新追更 --- */

.section-updates .table-scroll {
  box-shadow: var(--shadow);
}

/* --- 挑下一部 --- */

.top-pick {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.top-pick-media {
  min-width: 0;
}

.top-pick-media img {
  aspect-ratio: 3 / 4;
}

.top-pick-body {
  min-width: 0;
}

.pick-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--orange);
  border-radius: var(--radius-sm);
}

.pick-name {
  font-size: 20px;
  font-weight: 600;
}

.pick-tags {
  margin: 8px 0 12px;
  font-size: 14px;
  color: var(--slate);
}

.pick-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.pick-reasons li {
  padding-left: 14px;
  position: relative;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.pick-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.pick-fit,
.pick-time {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.pick-entry {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

.sub-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sub-pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sub-pick .cover img {
  aspect-ratio: 16 / 9;
}

.sub-pick-name {
  font-size: 17px;
  font-weight: 600;
}

.sub-pick-tags {
  margin: 0;
  font-size: 14px;
  color: var(--slate);
}

.sub-pick-why {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

@media (hover: hover) {
  .sub-pick:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }
}

/* --- 四步开始阅读 --- */

.section-steps .step-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --- 帮助与说明入口 --- */

.help-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.help-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  min-width: 0;
}

.help-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}

.help-col p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.help-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

/* ------------------------------------------------------------------
   4.2 漫画目录 catalog.html
   ------------------------------------------------------------------ */

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 300px);
  gap: var(--gap);
  align-items: start;
}

.content-col {
  min-width: 0;
}

.side-col {
  min-width: 0;
}

.catalog-group {
  padding: 0 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
}

.catalog-group:last-of-type {
  border-bottom: 0;
}

.catalog-group h2 {
  font-size: 22px;
  font-weight: 600;
}

.catalog-group .section-note {
  margin-top: 8px;
}

.group-figure {
  margin-bottom: 18px;
}

.group-figure img {
  aspect-ratio: 16 / 9;
}

.tag-index h2 {
  font-size: 22px;
  font-weight: 600;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink);
}

.tag-pill:hover,
.tag-pill:focus {
  border-color: var(--teal);
  color: var(--teal);
  text-decoration: none;
}

/* ------------------------------------------------------------------
   4.3 题材路线 genre-routes.html
   ------------------------------------------------------------------ */

.route-overview {
  padding: 8px 0 32px;
}

.route-overview h2 {
  font-size: 22px;
  font-weight: 600;
}

.route-overview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.route-overview-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px 8px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink);
}

.route-overview-list a:hover,
.route-overview-list a:focus {
  border-color: var(--teal);
  color: var(--teal);
  text-decoration: none;
}

.route-group {
  padding: 0 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
}

.route-group:last-of-type {
  border-bottom: 0;
}

.route-group .route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 28px;
  padding: 24px;
  transition: none;
}

.route-text {
  min-width: 0;
}

.route-text h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 12px 0 8px;
}

.route-audience {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

.route-desc {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.route-subtitle {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.route-sequence {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: route-step;
}

.route-sequence li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.route-sequence li::before {
  counter-increment: route-step;
  content: counter(route-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  border-radius: 50%;
}

.route-sequence strong {
  color: var(--ink);
}

.route-link {
  margin: 14px 0 0;
  font-size: 14px;
}

.route-link a {
  font-weight: 600;
}

.route-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.route-cover {
  min-width: 0;
}

.route-cover img {
  aspect-ratio: 3 / 4;
}

.cross-read {
  padding: 8px 0 40px;
}

.cross-read h2 {
  font-size: 22px;
  font-weight: 600;
}

.cross-read-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 20px 0 24px;
}

.cross-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  min-width: 0;
}

.cross-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.cross-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.cross-read-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}

.cross-read-links a {
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------------
   4.4 最近更新 updates.html
   ------------------------------------------------------------------ */

.page-hero-text {
  min-width: 0;
}

.page-hero .route-badge {
  margin-bottom: 12px;
}

.page-hero-media {
  margin-top: 20px;
}

.page-hero-media img {
  aspect-ratio: 21 / 9;
}

.page-content {
  min-width: 0;
}

.page-sidebar {
  min-width: 0;
}

.batch-section {
  padding: 0 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
}

.batch-section:last-of-type {
  border-bottom: 0;
}

.batch-section .section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.batch-section .section-head h2 {
  font-size: 22px;
  font-weight: 600;
}

.tips-section {
  padding: 0 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
}

.tips-section h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

.next-step {
  padding: 0 0 8px;
}

.next-step h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.entry-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.entry-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.entry-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.entry-card:hover,
.entry-card:focus {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

/* ------------------------------------------------------------------
   4.5 追更榜单 ranking.html
   ------------------------------------------------------------------ */

.rank-main,
.rank-second,
.rank-special,
.rank-rule,
.next-steps {
  padding: 32px 0;
  border-bottom: 1px solid var(--line-soft);
}

.rank-main h2,
.rank-second h2,
.rank-special h2,
.rank-rule h2,
.next-steps h2 {
  font-size: 22px;
  font-weight: 600;
}

.pick-feature {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 20px;
}

.pick-feature-media {
  min-width: 0;
}

.pick-feature-media img {
  aspect-ratio: 3 / 4;
}

.pick-feature-body {
  min-width: 0;
}

.pick-feature-body h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.pick-reason {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.pick-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.pick-points li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.pick-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.pick-audience,
.pick-time {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.pick-links {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.pick-links a {
  font-size: 14px;
  font-weight: 600;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.pick-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pick-card-media {
  min-width: 0;
}

.pick-card-media img {
  aspect-ratio: 3 / 4;
}

.pick-card h3 {
  font-size: 16px;
  font-weight: 600;
}

.pick-card .pick-tags {
  margin: 0;
  font-size: 13px;
  color: var(--slate);
}

.pick-card-reason {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

@media (hover: hover) {
  .pick-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }
}

.special-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.special-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  min-width: 0;
}

.special-col h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.special-col-note {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.special-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.special-col li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.special-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.rank-rule p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
  max-width: 800px;
}

.rule-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.rule-points li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.rule-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.next-steps {
  border-bottom: 0;
}

.next-steps p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
  max-width: 800px;
}

.next-links a {
  font-weight: 600;
}

/* ------------------------------------------------------------------
   4.6 阅读指南 reading-guide.html
   ------------------------------------------------------------------ */

.section-badge {
  margin: 0 0 12px;
}

.page-layout.sidebar-left {
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}

.page-aside {
  min-width: 0;
}

.aside-nav {
  position: sticky;
  top: 84px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.aside-nav-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

.aside-nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aside-nav a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--slate);
  border-left: 2px solid transparent;
  padding-left: 10px;
}

.aside-nav a:hover,
.aside-nav a:focus {
  color: var(--teal);
  border-left-color: var(--teal);
  text-decoration: none;
}

.guide-steps,
.guide-faq,
.guide-fix,
.guide-next {
  padding: 0 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
}

.guide-next {
  border-bottom: 0;
}

.guide-steps h2,
.guide-faq h2,
.guide-fix h2,
.guide-next h2 {
  font-size: 22px;
  font-weight: 600;
}

.guide-figure {
  margin-bottom: 20px;
}

.guide-figure img {
  aspect-ratio: 16 / 9;
}

.guide-steps .step-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.step-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.step-item .step-badge {
  align-self: flex-start;
}

.step-item h3 {
  font-size: 17px;
  font-weight: 600;
}

.step-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
  flex: 1 1 auto;
}

.step-item .step-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-item summary {
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 44px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover {
  color: var(--teal);
}

.faq-item p {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
}

.fix-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.fix-list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.fix-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* ------------------------------------------------------------------
   4.7 站点说明 about.html
   ------------------------------------------------------------------ */

.content-main {
  min-width: 0;
}

.content-side {
  min-width: 0;
}

.section-about-intro h2,
.section-boundaries h2,
.section-correction h2,
.section-next-links h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

.about-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 28px;
  margin-top: 18px;
}

.about-intro-text {
  min-width: 0;
}

.about-intro-text h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.about-intro-text h3:not(:first-child) {
  margin-top: 16px;
}

.about-intro-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.about-intro-figure {
  min-width: 0;
}

.about-intro-figure img {
  aspect-ratio: 4 / 3;
}

.boundary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.boundary-list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.boundary-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.correction-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.correction-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.correction-steps .step-num {
  flex: none;
}

.correction-steps .step-body {
  min-width: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.next-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.next-link-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  min-width: 0;
}

.next-link-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.next-link-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.next-link-card a {
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------------
   4.8 404.html
   ------------------------------------------------------------------ */

.error-main {
  display: flex;
  justify-content: center;
  padding: 64px 24px 80px;
}

.error-inner {
  max-width: 640px;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}

.error-code {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.error-inner h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}

.error-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 20px;
}

.error-hint-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.error-hint-list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.error-hint-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 20px;
}

.btn-home,
.btn-guide {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
}

.btn-home {
  background: var(--teal);
  color: var(--white);
}

.btn-home:hover,
.btn-home:focus {
  background: #176f5a;
  color: var(--white);
  text-decoration: none;
}

.btn-guide {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn-guide:hover,
.btn-guide:focus {
  border-color: var(--teal);
  color: var(--teal);
  text-decoration: none;
}

.error-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

/* ==========================================================================
   5. responsive —— 900px / 640px 断点
   ========================================================================== */

@media (max-width: 900px) {
  /* --- 移动导航 --- */

  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-left: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(22, 64, 92, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.16s ease;
  }

  .primary-nav.is-open {
    max-height: 420px;
    overflow-y: auto;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px 24px 20px;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: 12px;
  }

  .site-nav a.is-current {
    border-bottom-color: transparent;
    border-left-color: var(--teal);
  }

  /* --- 布局 --- */

  .page-layout,
  .page-layout.sidebar-left {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .aside-nav {
    position: static;
  }

  .page-aside {
    order: 2;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .hero-media {
    order: 2;
  }

  .route-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-steps .step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-group .route-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .pick-feature {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  }

  .pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .special-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .next-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .header-inner {
    padding: 0 16px;
  }

  .inner-main,
  .home-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-inner {
    padding: 32px 16px 24px;
  }

  .page-title,
  .hero-text h1,
  .error-inner h1 {
    font-size: 26px;
  }

  .section-head h2,
  .catalog-group h2,
  .tag-index h2,
  .route-overview h2,
  .route-text h2,
  .batch-section .section-head h2,
  .tips-section h2,
  .next-step h2,
  .rank-main h2,
  .rank-second h2,
  .rank-special h2,
  .rank-rule h2,
  .next-steps h2,
  .guide-steps h2,
  .guide-faq h2,
  .guide-fix h2,
  .guide-next h2,
  .section-about-intro h2,
  .section-boundaries h2,
  .section-correction h2,
  .section-next-links h2 {
    font-size: 20px;
  }

  .hero {
    padding: 24px 0 28px;
  }

  .route-cards,
  .sub-picks,
  .help-columns,
  .section-steps .step-list,
  .guide-steps .step-list,
  .pick-grid,
  .special-columns,
  .next-link-grid,
  .cross-read-grid,
  .entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-covers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-pick,
  .pick-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
  }

  .top-pick-media img,
  .pick-feature-media img {
    aspect-ratio: 4 / 3;
  }

  .route-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .anchor-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 16px;
  }

  .anchor-nav a {
    white-space: nowrap;
  }

  .error-main {
    padding: 40px 16px 56px;
  }

  .error-inner {
    padding: 24px 20px;
  }

  .need-list li {
    align-items: flex-start;
  }

  .correction-steps li {
    flex-direction: column;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .route-card,
  .sub-pick,
  .pick-card,
  .entry-card,
  .primary-nav {
    transition: none;
  }

  .route-card:hover,
  .sub-pick:hover,
  .pick-card:hover,
  .entry-card:hover {
    transform: none;
  }
}