.page-home {
  --home-line: rgba(13, 13, 14, 0.14);
  --home-line-dark: rgba(248, 246, 242, 0.18);
  --home-rail-gap: clamp(1rem, 3vw, 1.75rem);
  --home-block: clamp(4rem, 10vw, 8rem);
  display: block;
}

/* ---------- 首屏拼贴 ---------- */

.page-home .home-hero {
  padding-top: clamp(1.5rem, 5vw, 3.5rem);
}

.page-home .home-hero__inner {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}

.page-home .home-hero__coord {
  margin: 0;
  font-family: var(--font-mono);
}

.page-home .home-hero__title {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(2.35rem, 9.6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 15ch;
}

.page-home .home-hero__title em {
  font-style: normal;
  border-bottom: 0.07em solid var(--gold);
}

.page-home .home-hero__lede {
  margin: clamp(1.1rem, 3vw, 1.6rem) 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 2.2vw, 1.0625rem);
  line-height: 1.8;
  color: var(--ink);
}

.page-home .home-hero__actions {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-home .home-hero__btn {
  flex: 0 0 auto;
}

.page-home .home-hero__anchor {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--home-line);
  box-shadow: 0 1px 0 var(--sand);
}

.page-home .home-hero__anchor-kicker {
  margin: 0 0 0.85rem;
}

.page-home .home-hero__anchor-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sand);
}

.page-home .home-hero__anchor-title {
  margin: 1.1rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-home .home-hero__anchor-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-home .home-hero__stage {
  margin: clamp(2rem, 6vw, 4rem) 0 0;
  padding: 0;
}

.page-home .home-hero__stage img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(210px, 42vw, 500px);
  object-fit: cover;
  background: var(--night);
}

.page-home .home-hero__cap {
  margin-top: 0.7rem;
  padding: 0 var(--shell-pad);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--gray);
}

@media (min-width: 900px) {
  .page-home .home-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .page-home .home-hero__anchor {
    margin-top: clamp(2rem, 5vw, 4rem);
  }
}

/* ---------- 当季卷轴 ---------- */

.page-home .home-reel {
  margin-top: var(--home-block);
}

.page-home .home-reel__head {
  display: grid;
  gap: 0.6rem;
}

.page-home .home-reel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-reel__intro {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-home .home-reel__seasons {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-home .home-reel__season {
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  padding: 0.42rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .home-reel__season[data-season-btn="spring"][aria-pressed="true"] {
  background: var(--spring);
  border-color: var(--spring);
  color: var(--ink);
}

.page-home .home-reel__season[data-season-btn="summer"][aria-pressed="true"] {
  background: var(--summer);
  border-color: var(--summer);
  color: var(--ink);
}

.page-home .home-reel__season[data-season-btn="autumn"][aria-pressed="true"] {
  background: var(--autumn);
  border-color: var(--autumn);
  color: var(--paper);
}

.page-home .home-reel__season[data-season-btn="winter"][aria-pressed="true"] {
  background: var(--winter);
  border-color: var(--winter);
  color: var(--ink);
}

.page-home .home-reel__banner {
  margin: clamp(1.75rem, 5vw, 2.75rem) 0 0;
  padding: 0;
  position: relative;
}

.page-home .home-reel__banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(180px, 34vw, 380px);
  object-fit: cover;
  background: var(--night-2);
}

.page-home .home-reel__rail {
  display: flex;
  gap: var(--home-rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--shell-pad);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: 1rem var(--shell-pad) 1.6rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-home .home-reel__rail::-webkit-scrollbar {
  height: 3px;
}

.page-home .home-reel__rail::-webkit-scrollbar-thumb {
  background: var(--gold);
}

.page-home .home-reel__rail:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.page-home .home-entry {
  flex: 0 0 min(78vw, 330px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}

.page-home .home-entry[data-season="spring"] { border-top-color: var(--spring); }
.page-home .home-entry[data-season="summer"] { border-top-color: var(--summer); }
.page-home .home-entry[data-season="autumn"] { border-top-color: var(--autumn); }
.page-home .home-entry[data-season="winter"] { border-top-color: var(--winter); }

.page-home .home-entry__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.page-home .home-entry__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-home .home-entry__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

/* ---------- 导航与分类 ---------- */

.page-home .home-nav {
  margin-top: var(--home-block);
  background: var(--night);
  color: var(--paper);
  padding: clamp(3rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%);
}

.page-home .home-nav__inner {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.page-home .home-nav__title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.page-home .home-nav__lede {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(248, 246, 242, 0.78);
}

.page-home .home-nav__list {
  counter-reset: navstep;
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.page-home .home-nav__list li {
  counter-increment: navstep;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--home-line-dark);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(248, 246, 242, 0.86);
}

.page-home .home-nav__list li::before {
  content: counter(navstep, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  padding-top: 0.25rem;
}

.page-home .home-nav__cta {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: inline-block;
  color: var(--paper);
  border-color: rgba(248, 246, 242, 0.4);
}

.page-home .home-nav__panel {
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--night-2);
  border: 1px solid var(--home-line-dark);
  color: var(--paper);
}

.page-home .home-nav__panel-note {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(248, 246, 242, 0.8);
}

.page-home .home-nav__tags {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.page-home .home-nav__tags li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--home-line-dark);
  font-size: 0.9375rem;
  color: rgba(248, 246, 242, 0.9);
}

.page-home .home-nav__tags li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .home-nav__tag-name {
  letter-spacing: 0.02em;
}

.page-home .home-nav__panel-foot {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gold);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}

@media (min-width: 900px) {
  .page-home .home-nav__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* ---------- 迁移助手 ---------- */

.page-home .home-move {
  margin-top: var(--home-block);
}

.page-home .home-move__inner {
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
  align-items: start;
}

.page-home .home-move__title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.7rem, 5.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-move__lede {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-home .home-move__steps {
  list-style: none;
  counter-reset: movestep;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  padding: 0 0 0 0.5rem;
  display: grid;
  gap: 1.35rem;
}

.page-home .home-move__steps li {
  counter-increment: movestep;
  position: relative;
  padding-left: 1.35rem;
  border-left: 2px solid var(--gold);
}

.page-home .home-move__steps li::before {
  content: "";
  position: absolute;
  left: -0.42rem;
  top: 0.5rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--gold);
  transform: rotate(45deg);
}

.page-home .home-move__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.page-home .home-move__step-title::before {
  content: counter(movestep) ". ";
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.page-home .home-move__steps p {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-home .home-move__figure {
  margin: 0;
  padding: 0;
}

.page-home .home-move__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: var(--night);
}

.page-home .home-move__cap {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--gray);
}

@media (min-width: 900px) {
  .page-home .home-move__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

/* ---------- 内容节奏 ---------- */

.page-home .home-rhythm {
  margin-top: var(--home-block);
  padding: clamp(2.75rem, 7vw, 5rem) 0;
  background: var(--sand);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}

.page-home .home-rhythm__lead {
  max-width: 52ch;
}

.page-home .home-rhythm__title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.7rem, 5.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-rhythm__text {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
}

.page-home .home-rhythm__stats {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

.page-home .home-rhythm__stat {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(13, 13, 14, 0.28);
}

.page-home .home-rhythm__stat dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: rgba(13, 13, 14, 0.62);
}

.page-home .home-rhythm__stat dd {
  margin: 0.45rem 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.page-home .home-rhythm__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-home .home-rhythm__unit {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--gray);
}

@media (min-width: 760px) {
  .page-home .home-rhythm__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 收尾 CTA ---------- */

.page-home .home-cta {
  margin-top: var(--home-block);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.page-home .home-cta__inner {
  padding-top: clamp(1.5rem, 5vw, 3rem);
  border-top: 1px solid var(--home-line);
}

.page-home .home-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.7rem, 5.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-cta__text {
  margin: 1rem 0 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-home .home-cta__links {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-reel__season {
    transition: none;
  }
}
</main>
<<<END>>>

等等，我输出了 `</main>` 后又加了 `<<<END>>>`，这不符合要求。必须严格按标记顺序：MAIN_HTML 到 </main> 结束，然后 PAGE_CSS，然后结束。不要额外的 END 标记。

重新输出正确格式。另外 PAGE_CSS 里不能包含 `</main>`。上面我误把 `</main>` 放进了 MAIN_HTML 但后面又跟了 `<<<END>>>`，需要修正。

重新输出。
<main id="main-content" class="page-home">

  <section class="home-hero" aria-labelledby="home-hero-title">
    <div class="hh-wrap home-hero__inner">
      <div class="home-hero__lead">
        <p class="hh-index hh-index--gold home-hero__coord">38.4872°N 106.2309°E · 宁夏银川</p>
        <h1 id="home-hero-title" class="home-hero__title">从西北坐标出发，<em>合乐在线</em>的日常入口</h1>
        <p class="home-hero__lede">安卓端打开就能用，分类标签跟着赛季自动归拢，想找的内容分门别类摆在您面前。换一台设备登录，三行提示会把您熟悉的检索路径接过去，不必从头摸索。</p>
        <div class="home-hero__actions">
          <a class="hh-btn home-hero__btn" href="/projects/">了解平台功能</a>
          <a class="hh-btn hh-btn--ghost" href="/news/">查看更新动态</a>
        </div>
      </div>

      <aside class="home-hero__anchor hh-panel hh-cut" aria-labelledby="home-anchor-title">
        <p class="hh-index home-hero__anchor-kicker">安卓端 · 首屏右上角</p>
        <img class="home-hero__anchor-img" src="{zhanqunpic:h:400w:600}" width="600" height="400" alt="安卓端合乐在线界面右上角导航栏展开，赛季分类标签依次排列" decoding="async">
        <h2 id="home-anchor-title" class="home-hero__anchor-title">导航就落在拇指够得到的地方</h2>
        <p class="home-hero__anchor-text">一点即展开全站分类，不必层层返回去找入口，单手操作也顺手。</p>
      </aside>
    </div>

    <figure class="home-hero__stage">
      <img src="{zhanqunpic:h:1080w:1920}" width="1920" height="1080" alt="贺兰山抽象轮廓与设备界面剪影叠加的插画，采用沙漠金与夜空深蓝配色">
      <figcaption class="home-hero__cap">贺兰山 · 沙坡头 · 银川平原 —— 一条从西北生长出来的内容线索</figcaption>
    </figure>
  </section>

  <section class="home-reel" aria-labelledby="home-reel-title">
    <div class="hh-wrap home-reel__head">
      <p class="hh-index">第 1187 期 · 春季</p>
      <h2 id="home-reel-title" class="home-reel__title">当季合乐主页栏目</h2>
      <p class="home-reel__intro">每个赛季换一批条目，当季内容固定在首页第二屏，打开就能接着上回看到的地方往下翻。</p>
      <div class="home-reel__seasons" role="group" aria-label="按赛季查看条目">
        <button type="button" class="hh-chip hh-chip--spring home-reel__season" data-season-btn="spring" aria-pressed="true">春季</button>
        <button type="button" class="hh-chip hh-chip--summer home-reel__season" data-season-btn="summer" aria-pressed="false">夏季</button>
        <button type="button" class="hh-chip hh-chip--autumn home-reel__season" data-season-btn="autumn" aria-pressed="false">秋季</button>
        <button type="button" class="hh-chip hh-chip--winter home-reel__season" data-season-btn="winter" aria-pressed="false">冬季</button>
      </div>
    </div>

    <figure class="home-reel__banner">
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="当季内容横向卷轴示意，条目标签按春绿夏橙秋红冬银依次排列" loading="lazy" decoding="async">
    </figure>

    <div class="home-reel__rail" role="region" aria-label="当季条目横向列表" tabindex="0">
      <article class="home-entry" data-season="spring">
        <p class="home-entry__meta"><span class="hh-chip hh-chip--spring">春季</span><span class="hh-index">花期参考</span></p>
        <h3 class="home-entry__title">贺兰山东麓早春步道与花期清单</h3>
        <p class="home-entry__text">每年三月起，沿山步道的开放状态和花期时点整理成一份可随身查阅的清单，出发前扫一眼就够。</p>
      </article>

      <article class="home-entry" data-season="spring">
        <p class="home-entry__meta"><span class="hh-chip hh-chip--spring">春季</span><span class="hh-index">出行备忘</span></p>
        <h3 class="home-entry__title">沙坡头春风季出行备忘</h3>
        <p class="home-entry__text">风况、日照时长和景区接驳节奏集中在一页，带老人小孩出门的家庭可以按它安排当天的行程。</p>
      </article>

      <article class="home-entry" data-season="summer">
        <p class="home-entry__meta"><span class="hh-chip hh-chip--summer">夏季</span><span class="hh-index">夜间开放</span></p>
        <h3 class="home-entry__title">城市夏夜场馆开放时刻</h3>
        <p class="home-entry__text">图书馆、文化馆与城市公园的夜间时段按周更新，下班后想找个安静地方的人可以先看这里。</p>
      </article>

      <article class="home-entry" data-season="summer">
        <p class="home-entry__meta"><span class="hh-chip hh-chip--summer">夏季</span><span class="hh-index">短途路线</span></p>
        <h3 class="home-entry__title">黄河岸线夏日短途路线</h3>
        <p class="home-entry__text">把沿线可停留的点位串成半日与一日两种走法，适合周末临时起意、不想做太多功课的人。</p>
      </article>

      <article class="home-entry" data-season="autumn">
        <p class="home-entry__meta"><span class="hh-chip hh-chip--autumn">秋季</span><span class="hh-index">影像专题</span></p>
        <h3 class="home-entry__title">秋日黄河岸线影像记录</h3>
        <p class="home-entry__text">连续记录同一段河岸的色彩变化，摄影爱好者可以照着时间线选点，也能把自己的机位分享出来。</p>
      </article>

      <article class="home-entry" data-season="winter">
        <p class="home-entry__meta"><span class="hh-chip hh-chip--winter">冬季</span><span class="hh-index">室内去处</span></p>
        <h3 class="home-entry__title">冬季室内活动去处整理</h3>
        <p class="home-entry__text">天冷之后的室内展览、手作工坊和亲子空间汇总在一起，周末不必临时上网到处搜。</p>
      </article>
    </div>
  </section>

  <section class="home-nav" aria-labelledby="home-nav-title">
    <div class="hh-wrap home-nav__inner">
      <div class="home-nav__text">
        <p class="hh-index hh-index--gold">导航与分类</p>
        <h2 id="home-nav-title" class="home-nav__title">分类标签自己会排队</h2>
        <p class="home-nav__lede">您不需要先想清楚要找的东西叫什么。安卓端首屏右上角的导航一点开，八个内容大类平铺在眼前，当季条目永远排在前面。</p>
        <ul class="home-nav__list">
          <li>一次展开全部大类，城市人文、季节活动、出行参考等栏目按使用频率排列，常看的靠前。</li>
          <li>赛季标签按当前季节优先排序，往季条目自动归档到对应分组，翻旧内容也有清晰去处。</li>
          <li>同一栏目下的条目保留期号与赛季归属，回看时能对上时间，不会越翻越乱。</li>
        </ul>
        <a class="hh-btn hh-btn--ghost home-nav__cta" href="/help/">操作上有疑问</a>
      </div>

      <div class="home-nav__panel hh-panel hh-panel--dark hh-cut">
        <p class="hh-index">当季优先展示</p>
        <p class="home-nav__panel-note">赛季一轮换，标签顺序随之调整，您常去的那一屏会自己更新。</p>
        <ul class="home-nav__tags">
          <li><span class="hh-chip hh-chip--spring">春季</span><span class="home-nav__tag-name">花期与步道</span></li>
          <li><span class="hh-chip hh-chip--summer">夏季</span><span class="home-nav__tag-name">夜间时段</span></li>
          <li><span class="hh-chip hh-chip--autumn">秋季</span><span class="home-nav__tag-name">影像记录</span></li>
          <li><span class="hh-chip hh-chip--winter">冬季</span><span class="home-nav__tag-name">室内去处</span></li>
        </ul>
        <p class="home-nav__panel-foot">八个内容大类全年常设，赛季只决定谁先出场。</p>
      </div>
    </div>
  </section>

  <section class="home-move" aria-labelledby="home-move-title">
    <div class="hh-wrap home-move__inner">
      <div class="home-move__text">
        <p class="hh-index">换设备不用重新学</p>
        <h2 id="home-move-title" class="home-move__title">三行提示，把您习惯的找法搬过去</h2>
        <p class="home-move__lede">手机换成平板、安卓换成移动网页，登录之后系统会把两端的浏览与检索记录比一遍，能带走的都带走。</p>
        <ol class="home-move__steps">
          <li>
            <h3 class="home-move__step-title">先看清单</h3>
            <p>对话框列出可迁移的栏目范围，您一眼就知道哪些内容会跟过来。</p>
          </li>
          <li>
            <h3 class="home-move__step-title">再确认搬移</h3>
            <p>确认之后，常看栏目与赛季标签随账号同步到新设备，检索习惯不用重来。</p>
          </li>
          <li>
            <h3 class="home-move__step-title">最后收尾</h3>
            <p>个别记录无法带走时，提示会说明原因并给出替代的查找建议，跟着点即可。</p>
          </li>
        </ol>
      </div>

      <figure class="home-move__figure">
        <img src="{zhanqunpic:h:500w:800}" width="800" height="500" alt="跨设备登录时弹出的三行提示卡片，沙漠金边框配夜空深蓝底色" loading="lazy" decoding="async">
        <figcaption class="home-move__cap">迁移提示按行展开，读完再决定，不会打断您手头正在看的内容。</figcaption>
      </figure>
    </div>
  </section>

  <section class="home-rhythm" aria-labelledby="home-rhythm-title">
    <div class="hh-wrap home-rhythm__inner">
      <div class="home-rhythm__lead">
        <p class="hh-index">内容节奏</p>
        <h2 id="home-rhythm-title" class="home-rhythm__title">每月 5 号，主页栏目准时换一批</h2>
        <p class="home-rhythm__text">不用猜什么时候有新东西。固定节奏让您养成固定的访问习惯，当季条目也始终守在首页第二屏，打开就到。</p>
      </div>

      <dl class="home-rhythm__stats">
        <div class="home-rhythm__stat">
          <dt>更新频率</dt>
          <dd><span class="home-rhythm__num">每月5号</span></dd>
        </div>
        <div class="home-rhythm__stat">
          <dt>累计赛季条目</dt>
          <dd><span class="home-rhythm__num">1200+</span><span class="home-rhythm__unit">期</span></dd>
        </div>
        <div class="home-rhythm__stat">
          <dt>用户覆盖</dt>
          <dd><span class="home-rhythm__num">34</span><span class="home-rhythm__unit">个省级行政区</span></dd>
        </div>
        <div class="home-rhythm__stat">
          <dt>内容合作机构</dt>
          <dd><span class="home-rhythm__num">12</span><span class="home-rhythm__unit">家</span></dd>
        </div>
      </dl>
    </div>
  </section>

  <section class="home-cta" aria-labelledby="home-cta-title">
    <div class="hh-wrap home-cta__inner">
      <h2 id="home-cta-title" class="home-cta__title">想合作，或者先问个问题？</h2>
      <p class="home-cta__text">不管是地方文化机构的内容共创、功能上的反馈，还是某个赛季栏目该怎么用，都可以直接找我们。工作日 9:00–18:00 有人在。</p>
      <div class="home-cta__links">
        <a class="hh-btn" href="/inquiry/">联系咨询</a>
        <a class="hh-btn hh-btn--ghost" href="/who-we-are/">认识我们</a>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-line: rgba(13, 13, 14, 0.14);
  --home-line-dark: rgba(248, 246, 242, 0.18);
  --home-rail-gap: clamp(1rem, 3vw, 1.75rem);
  --home-block: clamp(4rem, 10vw, 8rem);
  display: block;
}

/* ---------- 首屏拼贴 ---------- */

.page-home .home-hero {
  padding-top: clamp(1.5rem, 5vw, 3.5rem);
}

.page-home .home-hero__inner {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}

.page-home .home-hero__coord {
  margin: 0;
  font-family: var(--font-mono);
}

.page-home .home-hero__title {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(2.35rem, 9.6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 15ch;
}

.page-home .home-hero__title em {
  font-style: normal;
  border-bottom: 0.07em solid var(--gold);
}

.page-home .home-hero__lede {
  margin: clamp(1.1rem, 3vw, 1.6rem) 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 2.2vw, 1.0625rem);
  line-height: 1.8;
  color: var(--ink);
}

.page-home .home-hero__actions {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-home .home-hero__btn {
  flex: 0 0 auto;
}

.page-home .home-hero__anchor {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--home-line);
  box-shadow: 0 1px 0 var(--sand);
}

.page-home .home-hero__anchor-kicker {
  margin: 0 0 0.85rem;
}

.page-home .home-hero__anchor-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sand);
}

.page-home .home-hero__anchor-title {
  margin: 1.1rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-home .home-hero__anchor-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-home .home-hero__stage {
  margin: clamp(2rem, 6vw, 4rem) 0 0;
  padding: 0;
}

.page-home .home-hero__stage img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(210px, 42vw, 500px);
  object-fit: cover;
  background: var(--night);
}

.page-home .home-hero__cap {
  margin-top: 0.7rem;
  padding: 0 var(--shell-pad);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--gray);
}

@media (min-width: 900px) {
  .page-home .home-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .page-home .home-hero__anchor {
    margin-top: clamp(2rem, 5vw, 4rem);
  }
}

/* ---------- 当季卷轴 ---------- */

.page-home .home-reel {
  margin-top: var(--home-block);
}

.page-home .home-reel__head {
  display: grid;
  gap: 0.6rem;
}

.page-home .home-reel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-reel__intro {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-home .home-reel__seasons {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-home .home-reel__season {
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  padding: 0.42rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-home .home-reel__season[data-season-btn="spring"][aria-pressed="true"] {
  background: var(--spring);
  border-color: var(--spring);
  color: var(--ink);
}

.page-home .home-reel__season[data-season-btn="summer"][aria-pressed="true"] {
  background: var(--summer);
  border-color: var(--summer);
  color: var(--ink);
}

.page-home .home-reel__season[data-season-btn="autumn"][aria-pressed="true"] {
  background: var(--autumn);
  border-color: var(--autumn);
  color: var(--paper);
}

.page-home .home-reel__season[data-season-btn="winter"][aria-pressed="true"] {
  background: var(--winter);
  border-color: var(--winter);
  color: var(--ink);
}

.page-home .home-reel__banner {
  margin: clamp(1.75rem, 5vw, 2.75rem) 0 0;
  padding: 0;
}

.page-home .home-reel__banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(180px, 34vw, 380px);
  object-fit: cover;
  background: var(--night-2);
}

.page-home .home-reel__rail {
  display: flex;
  gap: var(--home-rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--shell-pad);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: 1rem var(--shell-pad) 1.6rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-home .home-reel__rail::-webkit-scrollbar {
  height: 3px;
}

.page-home .home-reel__rail::-webkit-scrollbar-thumb {
  background: var(--gold);
}

.page-home .home-reel__rail:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.page-home .home-entry {
  flex: 0 0 min(78vw, 330px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}

.page-home .home-entry[data-season="spring"] { border-top-color: var(--spring); }
.page-home .home-entry[data-season="summer"] { border-top-color: var(--summer); }
.page-home .home-entry[data-season="autumn"] { border-top-color: var(--autumn); }
.page-home .home-entry[data-season="winter"] { border-top-color: var(--winter); }

.page-home .home-entry__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.page-home .home-entry__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-home .home-entry__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

/* ---------- 导航与分类 ---------- */

.page-home .home-nav {
  margin-top: var(--home-block);
  background: var(--night);
  color: var(--paper);
  padding: clamp(3rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%);
}

.page-home .home-nav__inner {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.page-home .home-nav__title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.page-home .home-nav__lede {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(248, 246, 242, 0.78);
}

.page-home .home-nav__list {
  counter-reset: navstep;
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.page-home .home-nav__list li {
  counter-increment: navstep;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--home-line-dark);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(248, 246, 242, 0.86);
}

.page-home .home-nav__list li::before {
  content: counter(navstep, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  padding-top: 0.25rem;
}

.page-home .home-nav__cta {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: inline-block;
  color: var(--paper);
  border-color: rgba(248, 246, 242, 0.4);
}

.page-home .home-nav__panel {
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--night-2);
  border: 1px solid var(--home-line-dark);
  color: var(--paper);
}

.page-home .home-nav__panel-note {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(248, 246, 242, 0.8);
}

.page-home .home-nav__tags {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.page-home .home-nav__tags li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--home-line-dark);
  font-size: 0.9375rem;
  color: rgba(248, 246, 242, 0.9);
}

.page-home .home-nav__tags li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .home-nav__tag-name {
  letter-spacing: 0.02em;
}

.page-home .home-nav__panel-foot {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gold);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}

@media (min-width: 900px) {
  .page-home .home-nav__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* ---------- 迁移助手 ---------- */

.page-home .home-move {
  margin-top: var(--home-block);
}

.page-home .home-move__inner {
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
  align-items: start;
}

.page-home .home-move__title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.7rem, 5.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-move__lede {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-home .home-move__steps {
  list-style: none;
  counter-reset: movestep;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  padding: 0 0 0 0.5rem;
  display: grid;
  gap: 1.35rem;
}

.page-home .home-move__steps li {
  counter-increment: movestep;
  position: relative;
  padding-left: 1.35rem;
  border-left: 2px solid var(--gold);
}

.page-home .home-move__steps li::before {
  content: "";
  position: absolute;
  left: -0.42rem;
  top: 0.5rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--gold);
  transform: rotate(45deg);
}

.page-home .home-move__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.page-home .home-move__step-title::before {
  content: counter(movestep) ". ";
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.page-home .home-move__steps p {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
}

.page-home .home-move__figure {
  margin: 0;
  padding: 0;
}

.page-home .home-move__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: var(--night);
}

.page-home .home-move__cap {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--gray);
}

@media (min-width: 900px) {
  .page-home .home-move__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

/* ---------- 内容节奏 ---------- */

.page-home .home-rhythm {
  margin-top: var(--home-block);
  padding: clamp(2.75rem, 7vw, 5rem) 0;
  background: var(--sand);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}

.page-home .home-rhythm__lead {
  max-width: 52ch;
}

.page-home .home-rhythm__title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.7rem, 5.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-rhythm__text {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
}

.page-home .home-rhythm__stats {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

.page-home .home-rhythm__stat {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(13, 13, 14, 0.28);
}

.page-home .home-rhythm__stat dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: rgba(13, 13, 14, 0.62);
}

.page-home .home-rhythm__stat dd {
  margin: 0.45rem 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.page-home .home-rhythm__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-home .home-rhythm__unit {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--gray);
}

@media (min-width: 760px) {
  .page-home .home-rhythm__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 收尾 CTA ---------- */

.page-home .home-cta {
  margin-top: var(--home-block);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.page-home .home-cta__inner {
  padding-top: clamp(1.5rem, 5vw, 3rem);
  border-top: 1px solid var(--home-line);
}

.page-home .home-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(1.7rem, 5.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.page-home .home-cta__text {
  margin: 1rem 0 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
}

.page-home .home-cta__links {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-reel__season {
    transition: none;
  }
}