.page-home {
  --ph-card: #FCFAF3;
  --ph-tint: #EDF1EE;
  --ph-gap: 16px;
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
}

.page-home h1,
.page-home h2,
.page-home h3 {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0;
}

.page-home h2 { font-size: clamp(1.5rem, 4.2vw, 2.125rem); }
.page-home h3 { font-size: 1.0625rem; }
.page-home p { margin: 0; }

.page-home .mono,
.page-home .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.page-home .inline-link {
  color: var(--ink-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-home a:focus-visible,
.page-home summary:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 封面首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--h) + 36px) 0 52px;
  color: var(--paper);
  background: linear-gradient(168deg, var(--ink-900) 0%, #071A16 58%, var(--black) 100%);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(200, 162, 83, 0.07) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(200, 162, 83, 0.07) 0 1px, transparent 1px 72px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 76%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 76%);
}

.page-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.page-home .hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 6% 0%, rgba(30, 90, 75, 0.5), transparent 62%),
    linear-gradient(180deg, rgba(10, 33, 29, 0.5), rgba(10, 33, 29, 0.94));
}

.page-home .hero-inner {
  position: relative;
  z-index: 2;
}

.page-home .hero-crumb { margin-bottom: 26px; }
.page-home .hero-crumb .breadcrumb-list { color: rgba(246, 243, 234, 0.62); }
.page-home .hero-crumb .breadcrumb-current { color: var(--gold-300); }

.page-home .hero-eyebrow {
  color: var(--gold-300);
  margin-bottom: 14px;
}

.page-home .hero-copy h1 {
  font-size: clamp(1.9rem, 7vw, 3.5rem);
  max-width: 18em;
  color: var(--paper);
}

.page-home .hero-lede {
  margin-top: 18px;
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(246, 243, 234, 0.8);
}

.page-home .hero-deck {
  display: grid;
  gap: var(--ph-gap);
  margin-top: 34px;
  perspective: 900px;
}

.page-home .deck-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: rgba(18, 58, 50, 0.62);
  color: var(--paper);
  text-decoration: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

.page-home .deck-card:hover,
.page-home .deck-card:focus-visible {
  transform: rotateX(2deg) translateY(-2px);
  border-color: rgba(200, 162, 83, 0.7);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.page-home .deck-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-home .deck-title {
  font-size: 1.1875rem;
  color: var(--paper);
}

.page-home .deck-text {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(246, 243, 234, 0.74);
}

.page-home .deck-go {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--gold-300);
}

.page-home .hero-index {
  margin-top: 26px;
  font-size: 0.6875rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: rgba(246, 243, 234, 0.6);
}

/* ---------- 通用章节头 ---------- */
.page-home .sec-head {
  max-width: 620px;
  margin-bottom: 32px;
}

.page-home .sec-head h2 { margin-top: 10px; }

.page-home .sec-lede {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--slate-500);
  max-width: 40em;
}

.page-home .note {
  margin-top: 28px;
  padding-left: 16px;
  border-left: 2px solid var(--gold-500);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--slate-500);
  max-width: 44em;
}

/* ---------- 回放档案 ---------- */
.page-home .replay-sec {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.page-home .ph-figure {
  margin: 0 0 30px;
}

.page-home .ph-figure .figure-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-tint);
}

.page-home .ph-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .figure-caption {
  margin-top: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--slate-500);
}

.page-home .replay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.page-home .replay-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-card);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.page-home .replay-item:hover,
.page-home .replay-item:focus-within {
  border-color: var(--line-gold);
  box-shadow: var(--shadow-card);
}

.page-home .replay-link {
  display: grid;
  grid-template-columns: 12px 1fr;
  grid-template-areas:
    "node meta"
    "node name"
    "node badge";
  align-items: center;
  gap: 4px 10px;
  padding: 16px 16px 16px 14px;
  color: inherit;
  text-decoration: none;
}

.page-home .replay-node {
  grid-area: node;
  align-self: start;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--gold-500);
  transform: rotate(45deg);
}

.page-home .replay-meta {
  grid-area: meta;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--slate-500);
}

.page-home .replay-name {
  grid-area: name;
  font-size: 1rem;
  font-weight: 700;
}

.page-home .replay-badge {
  grid-area: badge;
  justify-self: start;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  color: var(--ink-900);
  background: var(--slate-200);
  border-radius: 2px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.page-home .replay-badge b {
  font-weight: 700;
  font-size: 0.8125rem;
}

.page-home .replay-link:hover .replay-badge,
.page-home .replay-link:focus-visible .replay-badge {
  background: var(--gold-300);
}

/* ---------- 客户端 ---------- */
.page-home .client-sec { background: var(--ph-tint); }

.page-home .client-layout {
  display: grid;
  gap: 32px;
}

.page-home .client-copy .btn { margin-top: 20px; }

.page-home .compare {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-card);
  overflow: hidden;
}

.page-home .compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

.page-home .compare-row:first-child { border-top: 0; }

.page-home .compare-head {
  background: var(--ink-700);
  color: var(--paper);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: none;
}

.page-home .compare-head .compare-key { color: rgba(246, 243, 234, 0.7); }
.page-home .compare-head .compare-cell { color: var(--gold-300); font-weight: 700; }

.page-home .compare-key {
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .compare-cell {
  color: var(--slate-500);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.page-home .compare-cell--off {
  position: relative;
  color: var(--cinnabar);
}

.page-home .compare-cell--off::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 2px;
  background: var(--cinnabar);
}

.page-home .compare-header-dot { display: none; }

.page-home .client-foot {
  margin-top: 26px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--slate-500);
}

/* ---------- 第 12 期 ---------- */
.page-home .issue-sec {
  background: var(--ink-900);
  color: var(--paper);
}

.page-home .issue-layout {
  display: grid;
  gap: 30px;
}

.page-home .issue-figure { margin: 0; }

.page-home .issue-figure .figure-frame {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-700);
}

.page-home .issue-figure .figure-caption {
  color: rgba(246, 243, 234, 0.6);
}

.page-home .issue-body .eyebrow { color: var(--gold-300); }

.page-home .issue-body h2 {
  margin-top: 10px;
  color: var(--paper);
}

.page-home .issue-lede {
  margin-top: 14px;
  max-width: 38em;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: rgba(246, 243, 234, 0.74);
}

.page-home .issue-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}

.page-home .issue-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
}

.page-home .issue-no {
  grid-row: span 2;
  font-size: 0.9375rem;
  color: var(--gold-500);
  padding-top: 2px;
}

.page-home .issue-text h3 {
  font-size: 1rem;
  color: var(--paper);
}

.page-home .issue-text p {
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: rgba(246, 243, 234, 0.66);
}

.page-home .issue-row .tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-gold);
  border-radius: 2px;
  color: var(--gold-300);
  background: transparent;
}

.page-home .issue-body .btn { margin-top: 26px; }

/* ---------- 三步起步 ---------- */
.page-home .start-sec { background: var(--paper); }

.page-home .steps {
  display: grid;
  gap: 14px;
}

.page-home .step-card {
  position: relative;
  padding: 22px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-card);
  box-shadow: var(--shadow-card);
}

.page-home .step-no {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold-500);
  margin-bottom: 12px;
}

.page-home .step-card h3 { color: var(--ink-900); }

.page-home .step-card > p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--slate-500);
}

.page-home .step-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.page-home .step-more summary {
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  list-style: none;
}

.page-home .step-more summary::-webkit-details-marker { display: none; }

.page-home .step-more summary::before {
  content: "+ ";
  font-family: var(--font-mono);
  color: var(--gold-500);
}

.page-home .step-more[open] summary::before { content: "− "; }

.page-home .step-more p {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--slate-500);
}

.page-home .start-sec .btn { margin-top: 26px; }

/* ---------- 信任条 ---------- */
.page-home .trust-bar {
  padding: 36px 0;
  background: var(--ink-700);
  color: var(--paper);
}

.page-home .trust-inner {
  display: grid;
  gap: 18px;
}

.page-home .trust-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line-light);
}

.page-home .trust-key {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-home .trust-val {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(246, 243, 234, 0.86);
}

.page-home .trust-btn {
  justify-self: start;
  align-self: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .hero { padding: calc(var(--h) + 48px) 0 62px; }
  .page-home .hero-lede { font-size: 1.0625rem; }
  .page-home .hero-deck { grid-template-columns: 1fr 1fr; }
  .page-home .deck-card--play { grid-column: span 2; }
  .page-home .replay-list { grid-template-columns: 1fr 1fr; }
  .page-home .steps { grid-template-columns: 1fr 1fr; }
  .page-home .trust-inner { grid-template-columns: 1fr 1fr; }
  .page-home .issue-row { grid-template-columns: 40px 1fr auto; align-items: start; }
  .page-home .issue-row .tag { grid-column: 3; margin-top: 2px; }
  .page-home .issue-no { grid-row: span 1; }
}

@media (min-width: 1024px) {
  .page-home .hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
  }
  .page-home .hero-deck {
    grid-template-columns: 1.7fr 1fr;
    grid-template-areas:
      "play replay"
      "play client";
    gap: 18px;
  }
  .page-home .deck-card--play { grid-area: play; grid-column: auto; justify-content: flex-end; padding: 30px 26px; }
  .page-home .deck-card--replay { grid-area: replay; }
  .page-home .deck-card--client { grid-area: client; }
  .page-home .deck-card--play .deck-title { font-size: 1.5rem; }
  .page-home .hero-index { text-align: right; }

  .page-home .replay-list { grid-template-columns: repeat(3, 1fr); }
  .page-home .ph-figure { margin-bottom: 34px; }

  .page-home .client-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "copy figure"
      "compare compare";
    gap: 34px 40px;
    align-items: start;
  }
  .page-home .client-copy { grid-area: copy; }
  .page-home .client-figure { grid-area: figure; margin: 0; }
  .page-home .compare { grid-area: compare; }

  .page-home .issue-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
  }
  .page-home .issue-figure { position: sticky; top: calc(var(--h) + 24px); }

  .page-home .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .page-home .trust-inner {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: center;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .deck-card,
  .page-home .replay-item,
  .page-home .replay-badge {
    transition-duration: 120ms;
  }
  .page-home .deck-card:hover,
  .page-home .deck-card:focus-visible {
    transform: none;
  }
}

<main id="main-content" class="page-home">

  <section class="hero" aria-labelledby="hero-title">
    <img class="hero-bg" src="{zhanqunpic:h:1080w:1920}" width="1920" height="1080" alt="深墨绿牌桌上散落的抽象几何牌面特写，边缘泛着暖金光，画面干净没有真人">
    <div class="hero-wash" aria-hidden="true"></div>
    <div class="container hero-inner">
      <nav class="breadcrumb hero-crumb" aria-label="页面位置">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item breadcrumb-current">首页</li>
        </ol>
      </nav>

      <div class="hero-copy">
        <p class="eyebrow eyebrow--gold hero-eyebrow"><span class="mono">HUAYUE</span> · 对局 · 回放 · 客户端</p>
        <h1 id="hero-title">华悦棋牌，把每一局的来路与时长摊在桌面上</h1>
        <p class="hero-lede">翻一场旧局、找一份顺手的客户端、弄明白这一局到底打了多久，都可以从这里开始。华悦棋牌从 2016 年做到现在，把牌局整理成能按局数和时长翻检的档案，您想看的那一场，多半已经归档在里面。</p>
      </div>

      <div class="hero-deck">
        <a class="deck-card deck-card--play" href="/support/">
          <span class="deck-kicker mono">01 / 对局</span>
          <h2 class="deck-title">先看清这一局打了多久</h2>
          <p class="deck-text">单局、单日、整期三种范围任选，局数写在场次标题旁，时长标签落在同一块版面上，一眼对齐。</p>
          <span class="deck-go">查对局时长 <span aria-hidden="true">→</span></span>
        </a>
        <a class="deck-card deck-card--replay" href="/articles/">
          <span class="deck-kicker mono">02 / 回放</span>
          <h2 class="deck-title">按局数挑回放</h2>
          <p class="deck-text">四大类玩法、三十八个牌局分类，已经归档十二万六千四百条，可按局数区间与时长区间缩小范围。</p>
          <span class="deck-go">进内容专栏 <span aria-hidden="true">→</span></span>
        </a>
        <a class="deck-card deck-card--client" href="/app-download/">
          <span class="deck-kicker mono">03 / 客户端</span>
          <h2 class="deck-title">两个版本，各有分量</h2>
          <p class="deck-text">标准版装下完整回放检索，轻量版留下对局记录与时长标签，按手上设备挑一个就行。</p>
          <span class="deck-go">选版本下载 <span aria-hidden="true">→</span></span>
        </a>
      </div>

      <p class="hero-index mono">第 12 期 · 每两周更新 · 日均新增回放约 300 条 · 检索平均 0.4 秒出结果</p>
    </div>
  </section>

  <section class="section replay-sec" id="replays" aria-labelledby="replay-title">
    <div class="container">
      <div class="sec-head" data-reveal>
        <p class="eyebrow">回放档案</p>
        <h2 id="replay-title">刚归档的六条回放，局数与时长标在同一行</h2>
        <p class="sec-lede">玩法、局数、时长三样并排写，翻起来不用来回比对。单局平均 6 分 40 秒，拿这个基准估一下，很快能判断一场值不值得翻完整。</p>
      </div>

      <figure class="figure ph-figure" data-reveal>
        <div class="figure-frame">
          <img class="figure-img" loading="lazy" decoding="async" src="{zhanqunpic:h:480w:1200}" width="1200" height="480" alt="横向时间轴串联多个回放条目，每个节点旁标注局数与时长标签的示意图形">
        </div>
        <figcaption class="figure-caption">回放条目沿时间轴排开，节点旁的等宽数字就是这一场的局数与时长。</figcaption>
      </figure>

      <ol class="replay-list">
        <li class="replay-item" data-reveal>
          <a class="replay-link" href="/articles/">
            <span class="replay-node" aria-hidden="true"></span>
            <span class="replay-meta mono">分类 03 · 掼蛋类</span>
            <span class="replay-name">周末场 · 六人轮转</span>
            <span class="replay-badge mono"><b>18</b> 局 · <b>2:00</b></span>
          </a>
        </li>
        <li class="replay-item" data-reveal>
          <a class="replay-link" href="/articles/">
            <span class="replay-node" aria-hidden="true"></span>
            <span class="replay-meta mono">分类 12 · 双扣类</span>
            <span class="replay-name">晚场 · 四人对抗</span>
            <span class="replay-badge mono"><b>9</b> 局 · <b>1:00</b></span>
          </a>
        </li>
        <li class="replay-item" data-reveal>
          <a class="replay-link" href="/articles/">
            <span class="replay-node" aria-hidden="true"></span>
            <span class="replay-meta mono">分类 27 · 升级类</span>
            <span class="replay-name">客座局 · 三人续桌</span>
            <span class="replay-badge mono"><b>24</b> 局 · <b>2:40</b></span>
          </a>
        </li>
        <li class="replay-item" data-reveal>
          <a class="replay-link" href="/articles/">
            <span class="replay-node" aria-hidden="true"></span>
            <span class="replay-meta mono">分类 05 · 掼蛋类</span>
            <span class="replay-name">快局 · 双人复盘</span>
            <span class="replay-badge mono"><b>6</b> 局 · <b>0:40</b></span>
          </a>
        </li>
        <li class="replay-item" data-reveal>
          <a class="replay-link" href="/articles/">
            <span class="replay-node" aria-hidden="true"></span>
            <span class="replay-meta mono">分类 31 · 争上游类</span>
            <span class="replay-name">午间场 · 五人轮转</span>
            <span class="replay-badge mono"><b>15</b> 局 · <b>1:40</b></span>
          </a>
        </li>
        <li class="replay-item" data-reveal>
          <a class="replay-link" href="/articles/">
            <span class="replay-node" aria-hidden="true"></span>
            <span class="replay-meta mono">分类 19 · 双扣类</span>
            <span class="replay-name">夜场 · 四人固定</span>
            <span class="replay-badge mono"><b>21</b> 局 · <b>2:20</b></span>
          </a>
        </li>
      </ol>

      <p class="note">想按局数区间或时长区间再筛一轮，内容专栏里能直接切分；回放检索从发起到出结果平均 0.4 秒。</p>
    </div>
  </section>

  <section class="section client-sec" id="clients" aria-labelledby="client-title">
    <div class="container">
      <div class="client-layout">
        <div class="client-copy" data-reveal>
          <p class="eyebrow">客户端</p>
          <h2 id="client-title">两个版本，按手边的设备挑一个</h2>
          <p class="sec-lede">标准版把完整的回放播放与检索都装了进去；轻量版轻在体积，对局记录和时长标签照样看得到。桌面与移动端一共五类环境，逐项支持情况摊在下面这张对照里。</p>
          <a class="btn btn-outline" href="/app-download/">打开完整适配清单</a>
        </div>

        <figure class="figure ph-figure client-figure" data-reveal>
          <div class="figure-frame">
            <img class="figure-img" loading="lazy" decoding="async" src="{zhanqunpic:h:840w:1400}" width="1400" height="840" alt="标准版与轻量版客户端界面并排示意，深墨绿底色配暖金标签，突出回放检索区与时长标签区">
          </div>
          <figcaption class="figure-caption">左侧标准版保留完整检索栏，右侧轻量版只留记录列表与时长标签。</figcaption>
        </figure>

        <div class="compare" data-reveal>
          <div class="compare-row compare-head">
            <span class="compare-key">对照项</span>
            <span class="compare-cell">标准版</span>
            <span class="compare-cell">轻量版</span>
          </div>
          <div class="compare-row compare-row--diff">
            <span class="compare-key">回放播放与检索</span>
            <span class="compare-cell">完整支持</span>
            <span class="compare-cell compare-cell--off">仅记录浏览</span>
          </div>
          <div class="compare-row">
            <span class="compare-key">对局记录与局数</span>
            <span class="compare-cell">支持</span>
            <span class="compare-cell">支持</span>
          </div>
          <div class="compare-row">
            <span class="compare-key">时长标签查看</span>
            <span class="compare-cell">支持</span>
            <span class="compare-cell">支持</span>
          </div>
          <div class="compare-row">
            <span class="compare-key">适配环境</span>
            <span class="compare-cell">五类全覆盖</span>
            <span class="compare-cell">移动端为主</span>
          </div>
          <div class="compare-row">
            <span class="compare-key">功能更新节奏</span>
            <span class="compare-cell">每 6 周同步</span>
            <span class="compare-cell">每 6 周同步</span>
          </div>
        </div>
      </div>

      <p class="client-foot">从 2016 年的第一版到现在的第三代界面，中间改过什么、为什么改，都记在<a class="inline-link" href="/history/">品牌历程</a>里。</p>
    </div>
  </section>

  <section class="section issue-sec" id="issue-12" aria-labelledby="issue-title">
    <div class="container">
      <div class="issue-layout">
        <figure class="figure ph-figure issue-figure" data-reveal>
          <div class="figure-frame figure-frame--pattern">
            <img class="figure-img" loading="lazy" decoding="async" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="第 12 期专栏封面，几何牌阵拼出期号数字，暖金线条与青灰分层构成抽象构图">
          </div>
          <figcaption class="figure-caption">第 12 期 · 四个栏目各出一篇</figcaption>
        </figure>

        <div class="issue-body" data-reveal>
          <p class="eyebrow eyebrow--gold">内容专栏 · 本期</p>
          <h2 id="issue-title">这一期，四个栏目各挑了一条先看</h2>
          <p class="issue-lede">每两周出一期，写的是牌桌上的具体选择、客户端每次改动的前因后果，以及新手第一周该按什么顺序看。</p>

          <ol class="issue-list">
            <li class="issue-row">
              <span class="issue-no mono">01</span>
              <div class="issue-text">
                <h3>六人轮转里的一次弃守判断</h3>
                <p>把第 2 局到第 6 局的取舍摊开，看什么时候收手比硬撑更划算。</p>
              </div>
              <span class="tag tag--slate">对局复盘</span>
            </li>
            <li class="issue-row">
              <span class="issue-no mono">02</span>
              <div class="issue-text">
                <h3>时长标签为什么换了展示位置</h3>
                <p>本轮改动把局数与时长挪到列表首行，翻场次时少点一次。</p>
              </div>
              <span class="tag tag--slate">版本说明</span>
            </li>
            <li class="issue-row">
              <span class="issue-no mono">03</span>
              <div class="issue-text">
                <h3>三十八个分类是怎么长出来的</h3>
                <p>四人局与六人局的分支关系画成图谱，找玩法不用再靠猜分类名。</p>
              </div>
              <span class="tag tag--slate">玩法图谱</span>
            </li>
            <li class="issue-row">
              <span class="issue-no mono">04</span>
              <div class="issue-text">
                <h3>第一周该按什么顺序看三篇</h3>
                <p>从装好客户端到翻完第一场回放，一般四分钟走完。</p>
              </div>
              <span class="tag tag--slate">新手指引</span>
            </li>
          </ol>

          <a class="btn btn-gold" href="/articles/">翻往期目录</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--tight start-sec" id="start" aria-labelledby="start-title">
    <div class="container">
      <div class="sec-head sec-head--start" data-reveal>
        <p class="eyebrow">起步</p>
        <h2 id="start-title">第一次来，按这三步走完</h2>
        <p class="sec-lede">不用先看懂全部功能，按顺序点下去，第一场回放的时长很快就能看到。</p>
      </div>

      <div class="steps">
        <article class="step-card" data-reveal>
          <span class="step-no mono" aria-hidden="true">01</span>
          <h3>选择查看范围</h3>
          <p>单局、单日还是整期，先把范围定下来。</p>
          <details class="step-more">
            <summary>补一句</summary>
            <p>单局看临场判断，单日看整晚节奏，整期看这一阶段的走向。</p>
          </details>
        </article>
        <article class="step-card" data-reveal>
          <span class="step-no mono" aria-hidden="true">02</span>
          <h3>核对局数</h3>
          <p>场次标题旁的数字，就是这一场打了几局。</p>
          <details class="step-more">
            <summary>补一句</summary>
            <p>长局和短局分数差别不小，分开看更容易判断时间花在哪。</p>
          </details>
        </article>
        <article class="step-card" data-reveal>
          <span class="step-no mono" aria-hidden="true">03</span>
          <h3>确认时长标签</h3>
          <p>标签按单局平均 6 分 40 秒折算，长局会多出几分钟。</p>
          <details class="step-more">
            <summary>补一句</summary>
            <p>移动端与桌面端看到的位置一致，换了设备也不用重新找。</p>
          </details>
        </article>
      </div>

      <a class="btn btn-outline" href="/support/">看完整查看流程</a>
    </div>
  </section>

  <section class="trust-bar" aria-label="服务与联系信息">
    <div class="container trust-inner">
      <div class="trust-cell">
        <span class="trust-key mono">客服时段</span>
        <span class="trust-val">工作日 9:00-18:00 在线回复</span>
      </div>
      <div class="trust-cell">
        <span class="trust-key mono">首次回复</span>
        <span class="trust-val">平均 3 小时 20 分</span>
      </div>
      <div class="trust-cell">
        <span class="trust-key mono">更新节奏</span>
        <span class="trust-val">每两周一期，已到第 12 期</span>
      </div>
      <div class="trust-cell">
        <span class="trust-key mono">备案</span>
        <span class="trust-val">渝ICP备89479341号-2</span>
      </div>
      <a class="btn btn-ghost btn-sm trust-btn" href="/find-us/">联系客服</a>
    </div>
  </section>

</main>

.page-home {
  --ph-card: #FCFAF3;
  --ph-tint: #EDF1EE;
  --ph-gap: 16px;
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
}

.page-home h1,
.page-home h2,
.page-home h3 {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0;
}

.page-home h2 { font-size: clamp(1.5rem, 4.2vw, 2.125rem); }
.page-home h3 { font-size: 1.0625rem; }
.page-home p { margin: 0; }

.page-home .mono,
.page-home .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.page-home .inline-link {
  color: var(--ink-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-home a:focus-visible,
.page-home summary:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 封面首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--h) + 36px) 0 52px;
  color: var(--paper);
  background: linear-gradient(168deg, var(--ink-900) 0%, #071A16 58%, var(--black) 100%);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(200, 162, 83, 0.07) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(200, 162, 83, 0.07) 0 1px, transparent 1px 72px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 76%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 76%);
}

.page-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.page-home .hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 6% 0%, rgba(30, 90, 75, 0.5), transparent 62%),
    linear-gradient(180deg, rgba(10, 33, 29, 0.5), rgba(10, 33, 29, 0.94));
}

.page-home .hero-inner {
  position: relative;
  z-index: 2;
}

.page-home .hero-crumb { margin-bottom: 26px; }
.page-home .hero-crumb .breadcrumb-list { color: rgba(246, 243, 234, 0.62); }
.page-home .hero-crumb .breadcrumb-current { color: var(--gold-300); }

.page-home .hero-eyebrow {
  color: var(--gold-300);
  margin-bottom: 14px;
}

.page-home .hero-copy h1 {
  font-size: clamp(1.9rem, 7vw, 3.5rem);
  max-width: 18em;
  color: var(--paper);
}

.page-home .hero-lede {
  margin-top: 18px;
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(246, 243, 234, 0.8);
}

.page-home .hero-deck {
  display: grid;
  gap: var(--ph-gap);
  margin-top: 34px;
  perspective: 900px;
}

.page-home .deck-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: rgba(18, 58, 50, 0.62);
  color: var(--paper);
  text-decoration: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

.page-home .deck-card:hover,
.page-home .deck-card:focus-visible {
  transform: rotateX(2deg) translateY(-2px);
  border-color: rgba(200, 162, 83, 0.7);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.page-home .deck-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-home .deck-title {
  font-size: 1.1875rem;
  color: var(--paper);
}

.page-home .deck-text {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(246, 243, 234, 0.74);
}

.page-home .deck-go {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--gold-300);
}

.page-home .hero-index {
  margin-top: 26px;
  font-size: 0.6875rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: rgba(246, 243, 234, 0.6);
}

/* ---------- 通用章节头 ---------- */
.page-home .sec-head {
  max-width: 620px;
  margin-bottom: 32px;
}

.page-home .sec-head h2 { margin-top: 10px; }

.page-home .sec-lede {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--slate-500);
  max-width: 40em;
}

.page-home .note {
  margin-top: 28px;
  padding-left: 16px;
  border-left: 2px solid var(--gold-500);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--slate-500);
  max-width: 44em;
}

/* ---------- 回放档案 ---------- */
.page-home .replay-sec {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.page-home .ph-figure {
  margin: 0 0 30px;
}

.page-home .ph-figure .figure-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-tint);
}

.page-home .ph-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .figure-caption {
  margin-top: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--slate-500);
}

.page-home .replay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.page-home .replay-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-card);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.page-home .replay-item:hover,
.page-home .replay-item:focus-within {
  border-color: var(--line-gold);
  box-shadow: var(--shadow-card);
}

.page-home .replay-link {
  display: grid;
  grid-template-columns: 12px 1fr;
  grid-template-areas:
    "node meta"
    "node name"
    "node badge";
  align-items: center;
  gap: 4px 10px;
  padding: 16px 16px 16px 14px;
  color: inherit;
  text-decoration: none;
}

.page-home .replay-node {
  grid-area: node;
  align-self: start;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--gold-500);
  transform: rotate(45deg);
}

.page-home .replay-meta {
  grid-area: meta;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--slate-500);
}

.page-home .replay-name {
  grid-area: name;
  font-size: 1rem;
  font-weight: 700;
}

.page-home .replay-badge {
  grid-area: badge;
  justify-self: start;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  color: var(--ink-900);
  background: var(--slate-200);
  border-radius: 2px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.page-home .replay-badge b {
  font-weight: 700;
  font-size: 0.8125rem;
}

.page-home .replay-link:hover .replay-badge,
.page-home .replay-link:focus-visible .replay-badge {
  background: var(--gold-300);
}

/* ---------- 客户端 ---------- */
.page-home .client-sec { background: var(--ph-tint); }

.page-home .client-layout {
  display: grid;
  gap: 32px;
}

.page-home .client-copy .btn { margin-top: 20px; }

.page-home .compare {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-card);
  overflow: hidden;
}

.page-home .compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

.page-home .compare-row:first-child { border-top: 0; }

.page-home .compare-head {
  background: var(--ink-700);
  color: var(--paper);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

.page-home .compare-head .compare-key { color: rgba(246, 243, 234, 0.7); }
.page-home .compare-head .compare-cell { color: var(--gold-300); font-weight: 700; }

.page-home .compare-key {
  font-weight: 600;
  color: var(--ink-900);
}

.page-home .compare-cell {
  color: var(--slate-500);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.page-home .compare-cell--off {
  position: relative;
  color: var(--cinnabar);
}

.page-home .compare-cell--off::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 2px;
  background: var(--cinnabar);
}

.page-home .client-foot {
  margin-top: 26px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--slate-500);
}

/* ---------- 第 12 期 ---------- */
.page-home .issue-sec {
  background: var(--ink-900);
  color: var(--paper);
}

.page-home .issue-layout {
  display: grid;
  gap: 30px;
}

.page-home .issue-figure { margin: 0; }

.page-home .issue-figure .figure-frame {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-700);
}

.page-home .issue-figure .figure-caption {
  color: rgba(246, 243, 234, 0.6);
}

.page-home .issue-body .eyebrow { color: var(--gold-300); }

.page-home .issue-body h2 {
  margin-top: 10px;
  color: var(--paper);
}

.page-home .issue-lede {
  margin-top: 14px;
  max-width: 38em;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: rgba(246, 243, 234, 0.74);
}

.page-home .issue-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}

.page-home .issue-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
}

.page-home .issue-no {
  grid-row: span 2;
  font-size: 0.9375rem;
  color: var(--gold-500);
  padding-top: 2px;
}

.page-home .issue-text h3 {
  font-size: 1rem;
  color: var(--paper);
}

.page-home .issue-text p {
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: rgba(246, 243, 234, 0.66);
}

.page-home .issue-row .tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-gold);
  border-radius: 2px;
  color: var(--gold-300);
  background: transparent;
}

.page-home .issue-body .btn { margin-top: 26px; }

/* ---------- 三步起步 ---------- */
.page-home .start-sec { background: var(--paper); }

.page-home .steps {
  display: grid;
  gap: 14px;
}

.page-home .step-card {
  position: relative;
  padding: 22px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ph-card);
  box-shadow: var(--shadow-card);
}

.page-home .step-no {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold-500);
  margin-bottom: 12px;
}

.page-home .step-card h3 { color: var(--ink-900); }

.page-home .step-card > p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--slate-500);
}

.page-home .step-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.page-home .step-more summary {
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  list-style: none;
}

.page-home .step-more summary::-webkit-details-marker { display: none; }

.page-home .step-more summary::before {
  content: "+ ";
  font-family: var(--font-mono);
  color: var(--gold-500);
}

.page-home .step-more[open] summary::before { content: "− "; }

.page-home .step-more p {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--slate-500);
}

.page-home .start-sec .btn { margin-top: 26px; }

/* ---------- 信任条 ---------- */
.page-home .trust-bar {
  padding: 36px 0;
  background: var(--ink-700);
  color: var(--paper);
}

.page-home .trust-inner {
  display: grid;
  gap: 18px;
}

.page-home .trust-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line-light);
}

.page-home .trust-key {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-home .trust-val {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(246, 243, 234, 0.86);
}

.page-home .trust-btn {
  justify-self: start;
  align-self: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .hero { padding: calc(var(--h) + 48px) 0 62px; }
  .page-home .hero-lede { font-size: 1.0625rem; }
  .page-home .hero-deck { grid-template-columns: 1fr 1fr; }
  .page-home .deck-card--play { grid-column: span 2; }
  .page-home .replay-list { grid-template-columns: 1fr 1fr; }
  .page-home .steps { grid-template-columns: 1fr 1fr; }
  .page-home .trust-inner { grid-template-columns: 1fr 1fr; }
  .page-home .issue-row { grid-template-columns: 40px 1fr auto; align-items: start; }
  .page-home .issue-row .tag { grid-column: 3; margin-top: 2px; }
  .page-home .issue-no { grid-row: span 1; }
}

@media (min-width: 1024px) {
  .page-home .hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
  }
  .page-home .hero-deck {
    grid-template-columns: 1.7fr 1fr;
    grid-template-areas:
      "play replay"
      "play client";
    gap: 18px;
  }
  .page-home .deck-card--play { grid-area: play; grid-column: auto; justify-content: flex-end; padding: 30px 26px; }
  .page-home .deck-card--replay { grid-area: replay; }
  .page-home .deck-card--client { grid-area: client; }
  .page-home .deck-card--play .deck-title { font-size: 1.5rem; }
  .page-home .hero-index { text-align: right; }

  .page-home .replay-list { grid-template-columns: repeat(3, 1fr); }
  .page-home .ph-figure { margin-bottom: 34px; }

  .page-home .client-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "copy figure"
      "compare compare";
    gap: 34px 40px;
    align-items: start;
  }
  .page-home .client-copy { grid-area: copy; }
  .page-home .client-figure { grid-area: figure; margin: 0; }
  .page-home .compare { grid-area: compare; }

  .page-home .issue-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
  }
  .page-home .issue-figure { position: sticky; top: calc(var(--h) + 24px); }

  .page-home .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .page-home .trust-inner {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: center;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .deck-card,
  .page-home .replay-item,
  .page-home .replay-badge {
    transition-duration: 120ms;
  }
  .page-home .deck-card:hover,
  .page-home .deck-card:focus-visible {
    transform: none;
  }
}