.page-news {
  --news-ink-soft: #4A554E;
  --news-rule-soft: #CFC9BA;
  --news-rule-dark: #24402F;
  background: var(--ink);
  color: var(--text-on-dark);
}

/* ---------- 首屏 ---------- */
.page-news .news-lead {
  padding-block: clamp(16px, 3vw, 28px) clamp(36px, 6vw, 72px);
}

.page-news .news-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
}

.page-news .news-lead__title {
  margin: 12px 0 0;
  max-width: 12ch;
  font-size: var(--fs-7);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.page-news .news-lead__lede {
  margin: 18px 0 0;
  max-width: 48ch;
  color: var(--grey);
}

.page-news .news-headlines {
  margin-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--news-rule-dark);
}

.page-news .news-headline {
  position: relative;
  padding: clamp(16px, 2.4vw, 24px) 0 clamp(16px, 2.4vw, 24px) 16px;
  border-bottom: 1px solid var(--news-rule-dark);
}

.page-news .news-headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 220ms var(--ease);
}

.page-news .news-headline:hover::before,
.page-news .news-headline:focus-within::before {
  transform: scaleY(1);
}

.page-news .news-headline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}

.page-news .news-headline__cat {
  color: var(--lime);
}

.page-news .news-headline__title {
  margin: 9px 0 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-news .news-headline--a .news-headline__title {
  font-size: var(--fs-6);
  max-width: 16ch;
}

.page-news .news-headline--b .news-headline__title {
  font-size: var(--fs-5);
  max-width: 20ch;
}

.page-news .news-headline--c .news-headline__title {
  font-size: var(--fs-4);
  max-width: 26ch;
}

.page-news .news-headline__note {
  margin: 9px 0 0;
  max-width: 54ch;
  font-size: var(--fs-3);
  line-height: 1.7;
  color: var(--grey);
}

.page-news .news-lead__figure {
  margin: 0;
}

.page-news .news-lead__figure .z9-figure__media {
  border: 1px solid var(--news-rule-dark);
}

@media (min-width: 900px) {
  .page-news .news-lead__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: start;
  }
}

/* ---------- 栏目与条目（纸奶油带） ---------- */
.page-news .news-archive {
  color: var(--text-dark);
}

.page-news .news-archive__head {
  max-width: 62ch;
}

.page-news .news-archive__lede {
  margin-top: 14px;
  color: var(--news-ink-soft);
}

.page-news .news-archive__fig {
  margin: clamp(22px, 3vw, 32px) 0 clamp(24px, 3.6vw, 38px);
}

.page-news .news-archive__fig .z9-figure__cap {
  color: var(--news-ink-soft);
}

.page-news .news-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--news-rule-soft);
}

.page-news .news-tabs__tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--news-rule-soft);
  border-bottom: 0;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 13px 18px;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .news-tabs__tab:hover {
  border-color: var(--ink);
}

.page-news .news-tabs__tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--lime);
}

.page-news .news-tabs__tab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.page-news .news-tabs__panel {
  padding-top: clamp(18px, 3vw, 28px);
}

.page-news .news-tabs__note {
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 3px solid var(--orange);
  max-width: 64ch;
  font-size: var(--fs-3);
  line-height: 1.7;
  color: var(--news-ink-soft);
}

.page-news .news-tabs__note a {
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-news .news-tabs__note a:hover {
  color: var(--orange);
}

.page-news .news-tabs__fig {
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.page-news .news-tabs__fig .z9-figure__cap {
  color: var(--news-ink-soft);
}

.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-rule-soft);
}

.page-news .news-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--news-rule-soft);
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 200ms var(--ease);
}

.page-news .news-item:hover::before,
.page-news .news-item:focus-within::before {
  transform: scaleY(1);
}

.page-news .news-item__idx {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--orange);
}

.page-news .news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--news-ink-soft);
}

.page-news .news-item__cat {
  background: var(--ink);
  color: var(--lime);
  padding: 4px 8px;
  letter-spacing: 0.08em;
}

.page-news .news-item__title {
  margin: 9px 0 0;
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.32;
  color: var(--text-dark);
}

.page-news .news-item__note {
  margin: 8px 0 0;
  max-width: 66ch;
  font-size: var(--fs-3);
  line-height: 1.72;
  color: var(--news-ink-soft);
}

@media (min-width: 760px) {
  .page-news .news-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    padding-block: 22px;
  }

  .page-news .news-tabs__tab {
    font-size: var(--fs-3);
    padding: 14px 22px;
  }
}

/* ---------- 赛季专题 ---------- */
.page-news .news-series__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
}

.page-news .news-series__lede {
  margin-top: 14px;
  max-width: 58ch;
  color: var(--grey);
}

.page-news .news-series__lede a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-series__index {
  margin-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

.page-news .news-serie {
  border-bottom: 1px solid var(--line);
}

.page-news .news-serie__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  color: var(--cream);
  transition: color 180ms var(--ease);
}

.page-news .news-serie__sum::-webkit-details-marker {
  display: none;
}

.page-news .news-serie__sum:hover {
  color: var(--lime);
}

.page-news .news-serie__sum:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-news .news-serie__no {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.page-news .news-serie__name {
  font-size: var(--fs-4);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-news .news-serie__slash {
  flex: 1 1 40px;
  min-width: 40px;
  height: 1px;
  align-self: center;
  background: repeating-linear-gradient(
    90deg,
    var(--news-rule-dark) 0 7px,
    transparent 7px 14px
  );
}

.page-news .news-serie__count {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  color: var(--grey);
}

.page-news .news-serie__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid var(--news-rule-dark);
}

.page-news .news-serie__list li {
  padding: 7px 0;
  font-size: var(--fs-3);
  line-height: 1.65;
  color: var(--text-on-dark);
  opacity: 0.86;
}

.page-news .news-series__fig {
  margin: 0;
}

.page-news .news-series__fig .z9-figure__media {
  border: 1px solid var(--news-rule-dark);
  background: var(--ink-3);
}

.page-news .news-series__fig .z9-figure__cap {
  color: var(--grey);
}

@media (min-width: 960px) {
  .page-news .news-series__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-news .news-series__fig {
    position: sticky;
    top: calc(var(--topbar-h) + 24px);
  }
}

/* ---------- 订阅与合作 ---------- */
.page-news .news-join {
  padding-block: clamp(44px, 6.5vw, 88px);
  border-top: 1px solid var(--line);
}

.page-news .news-join__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
}

.page-news .news-join__title {
  max-width: 16ch;
}

.page-news .news-join__lede {
  margin-top: 14px;
  max-width: 52ch;
  color: var(--grey);
}

.page-news .news-join__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

.page-news .news-join__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .news-join__item {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--news-rule-dark);
}

.page-news .news-join__item:last-child {
  border-bottom: 1px solid var(--news-rule-dark);
}

.page-news .news-join__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.page-news .news-join__v {
  margin: 0;
  max-width: 58ch;
  font-size: var(--fs-3);
  line-height: 1.72;
  color: var(--text-on-dark);
  opacity: 0.9;
}

.page-news .news-join__v a {
  color: var(--lime-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-join__v a:hover {
  color: var(--orange);
}

@media (min-width: 900px) {
  .page-news .news-join__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-news .news-headline::before,
  .page-news .news-item::before,
  .page-news .news-serie__sum,
  .page-news .news-tabs__tab {
    transition: none;
  }

  .page-news .news-headline::before,
  .page-news .news-item::before {
    transform: scaleY(1);
    opacity: 0;
  }

  .page-news .news-headline:hover::before,
  .page-news .news-headline:focus-within::before,
  .page-news .news-item:hover::before,
  .page-news .news-item:focus-within::before {
    opacity: 1;
  }
}


<main id="main-content" class="page-news">
  <div class="z9-wrap">
    <nav class="z9-breadcrumb" aria-label="面包屑">
      <ol class="z9-breadcrumb__list">
        <li class="z9-breadcrumb__item"><a href="/">首页</a></li>
        <li class="z9-breadcrumb__item" aria-current="page">赛场专栏</li>
      </ol>
    </nav>
  </div>

  <section class="z9-section news-lead">
    <div class="z9-wrap">
      <div class="news-lead__grid">
        <div class="news-lead__main">
          <p class="z9-eyebrow">本轮速读 · 第 12 轮</p>
          <h1 class="news-lead__title">先把本轮三条战报读完</h1>
          <p class="z9-lede news-lead__lede">9体育赛场的赛场专栏在每个轮次结束后第一时间更新：一句结论顶在前面，历史交锋、积分走势和赛区里的细节跟在后面。你周末连看两场之前，先把该知道的读完。</p>

          <div class="news-headlines">
            <article class="news-headline news-headline--a" data-reveal>
              <p class="news-headline__meta">
                <span class="news-headline__cat">战报速读</span>
                <span class="news-headline__where">湖北 · 武汉</span>
              </p>
              <h2 class="news-headline__title">江城主场两球落后追成 2 比 2</h2>
              <p class="news-headline__note">下半场换人后连追两球，控球率从 44% 拉回 51%，本轮赛后一分钟内出结论。</p>
            </article>

            <article class="news-headline news-headline--b" data-reveal>
              <p class="news-headline__meta">
                <span class="news-headline__cat">数据观察</span>
                <span class="news-headline__where">湖北 · 光谷</span>
              </p>
              <h2 class="news-headline__title">光谷夜战控球率 63% 守住榜首</h2>
              <p class="news-headline__note">对手整场只射正一次，两分的领先优势原样带到下一轮。</p>
            </article>

            <article class="news-headline news-headline--c" data-reveal>
              <p class="news-headline__meta">
                <span class="news-headline__cat">赛区手记</span>
                <span class="news-headline__where">湖北 · 襄阳</span>
              </p>
              <h2 class="news-headline__title">襄阳客场补时一击，升到湖北赛区第三</h2>
              <p class="news-headline__note">第 90+3 分钟的角球混战，把近五轮状态推成四胜一平。</p>
            </article>
          </div>
        </div>

        <figure class="z9-figure z9-figure--tall news-lead__figure">
          <div class="z9-figure__media">
            <img src="{zhanqunpic:h:1200w:800}" width="800" height="1200" alt="夜场灯光下的看台一角，竖幅构图">
          </div>
          <figcaption class="z9-figure__cap">夜场灯亮起来，看台先热。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="z9-section z9-section--cream news-archive" id="lanmu">
    <div class="z9-wrap">
      <div class="news-archive__head">
        <p class="z9-eyebrow">栏目与条目</p>
        <h2 class="z9-h2">按栏目翻阅本轮与近轮</h2>
        <p class="z9-body news-archive__lede">四类内容的节奏不一样：短战报每轮赛后跟进，一次三条；数据观察每周成一篇长文；版本更新跟着客户端发版走；赛区手记按城市排期，一城一期。挑你关心的那一类直接看。</p>
      </div>

      <figure class="z9-figure z9-figure--wide news-archive__fig">
        <div class="z9-figure__media">
          <img src="{zhanqunpic:h:420w:1600}" width="1600" height="420" alt="草皮与白色边线的横向特写" loading="lazy" decoding="async">
        </div>
        <figcaption class="z9-figure__cap">边线以内是数据，边线以外是故事。</figcaption>
      </figure>

      <div class="z9-tabs news-tabs" data-tabs>
        <div class="z9-tabs__list news-tabs__list" role="tablist" aria-label="栏目分类">
          <button class="z9-tabs__tab news-tabs__tab" type="button" role="tab" data-tab="brief" id="news-tab-brief" aria-controls="news-panel-brief" aria-selected="true">战报速读</button>
          <button class="z9-tabs__tab news-tabs__tab" type="button" role="tab" data-tab="data" id="news-tab-data" aria-controls="news-panel-data" aria-selected="false">数据观察</button>
          <button class="z9-tabs__tab news-tabs__tab" type="button" role="tab" data-tab="version" id="news-tab-version" aria-controls="news-panel-version" aria-selected="false">版本更新</button>
          <button class="z9-tabs__tab news-tabs__tab" type="button" role="tab" data-tab="zone" id="news-tab-zone" aria-controls="news-panel-zone" aria-selected="false">赛区手记</button>
        </div>

        <div class="z9-tabs__panel news-tabs__panel" role="tabpanel" data-tab-panel="brief" id="news-panel-brief" aria-labelledby="news-tab-brief">
          <p class="news-tabs__note">每条控制在 20 字以内，每轮赛后更新一轮，全年大约 240 条。</p>
          <ol class="news-list">
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">01</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">战报速读</span><span class="news-item__time">本轮赛后</span></p>
                <h3 class="news-item__title">宜昌主场零封对手，控球率首破六成</h3>
                <p class="news-item__note">开季以来第一次把球权握过六成，对手全场两次射正都没能转化成威胁。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">02</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">战报速读</span><span class="news-item__time">上周末</span></p>
                <h3 class="news-item__title">襄阳客场补时角球，读秒改写比分</h3>
                <p class="news-item__note">全场唯一的角球得分出现在最后时刻，也把湖北赛区第三的位置换了主人。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">03</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">战报速读</span><span class="news-item__time">第 12 轮赛后</span></p>
                <h3 class="news-item__title">光谷夜战三球逆转，榜首优势剩两分</h3>
                <p class="news-item__note">上半场一球落后，下半场连着三次推进得手，积分榜顶端的差距被压到两分。</p>
              </div>
            </li>
          </ol>
        </div>

        <div class="z9-tabs__panel news-tabs__panel" role="tabpanel" data-tab-panel="data" id="news-panel-data" aria-labelledby="news-tab-data">
          <p class="news-tabs__note">每周一篇长文，一千字上下，配深底荧光线条的走势图；近五轮状态的算法说明可以到<a href="/offerings/">数据服务</a>看完整版。</p>
          <ol class="news-list">
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">01</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">历史交锋</span><span class="news-item__time">第 12 轮后</span></p>
                <h3 class="news-item__title">九季同城对阵，控球率是怎么一点点变的</h3>
                <p class="news-item__note">把两队九个赛季的交锋记录摊开，球权倾斜的拐点集中在最近三个赛季的中段。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">02</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">积分走势</span><span class="news-item__time">上周末</span></p>
                <h3 class="news-item__title">近五轮状态榜：领先一球的队伍怎么收尾</h3>
                <p class="news-item__note">四支球队在最后十五分钟丢分超过三次，防守换人时机比阵型更关键。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">03</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">积分走势</span><span class="news-item__time">本赛季至今</span></p>
                <h3 class="news-item__title">主场榜和客场榜之间，差在哪几分钟</h3>
                <p class="news-item__note">主场进球比客场早 11 分钟出现，客队的追分窗口大多落在下半场开局。</p>
              </div>
            </li>
          </ol>
        </div>

        <div class="z9-tabs__panel news-tabs__panel" role="tabpanel" data-tab-panel="version" id="news-panel-version" aria-labelledby="news-tab-version">
          <p class="news-tabs__note">跟着客户端发版更新，一季度一到两篇；使用上的疑问先到<a href="/answers/">帮助索引</a>按分类找。</p>
          <ol class="news-list">
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">01</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">版本更新</span><span class="news-item__time">本轮赛后</span></p>
                <h3 class="news-item__title">客户端 3.6 版：更新时间戳推到分钟级</h3>
                <p class="news-item__note">每轮赛后的推送里直接带上分钟数，看完战报就知道数据是什么时候落的。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">02</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">版本更新</span><span class="news-item__time">上周末</span></p>
                <h3 class="news-item__title">积分榜挂件支持横向滚动与键盘浏览</h3>
                <p class="news-item__note">嵌进赛区自有页面后，主场榜、客场榜和近五轮状态四种视图都能直接切。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">03</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">版本更新</span><span class="news-item__time">赛季第 12 轮后</span></p>
                <h3 class="news-item__title">球队档案把阵容与历史交锋并到同屏</h3>
                <p class="news-item__note">从赛区点进球队，再到档案页仍是三步，只是信息不用来回翻页了。</p>
              </div>
            </li>
          </ol>
        </div>

        <div class="z9-tabs__panel news-tabs__panel" role="tabpanel" data-tab-panel="zone" id="news-panel-zone" aria-labelledby="news-tab-zone">
          <p class="news-tabs__note">一城一期，按赛区排期更新；想让自家赛区出现在这里，可以走<a href="/cooperation/">合作联系</a>的共建通道。</p>

          <figure class="z9-figure z9-figure--wide news-tabs__fig">
            <div class="z9-figure__media">
              <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="球网与角旗的局部特写，暗调" loading="lazy" decoding="async">
            </div>
            <figcaption class="z9-figure__cap">客场角旗边的球网，赛区手记里常出现的一帧。</figcaption>
          </figure>

          <ol class="news-list">
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">01</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">赛区手记</span><span class="news-item__time">上周末</span></p>
                <h3 class="news-item__title">走进宜昌分站：边线外多出来的那排临时看台</h3>
                <p class="news-item__note">场地扩容之后，观众离边线近了六米，主队的中场逼抢声浪也高了一截。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">02</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">赛区手记</span><span class="news-item__time">本轮赛后</span></p>
                <h3 class="news-item__title">襄阳的角旗与夜风，主场气氛从哪来</h3>
                <p class="news-item__note">球场朝向决定了上半场的风，也决定了补时阶段定位球该往哪个角去。</p>
              </div>
            </li>
            <li class="news-item" data-reveal>
              <span class="news-item__idx" aria-hidden="true">03</span>
              <div class="news-item__body">
                <p class="news-item__meta"><span class="news-item__cat">赛区手记</span><span class="news-item__time">赛季第 12 轮后</span></p>
                <h3 class="news-item__title">武汉三个赛场之间，球迷怎么排一个周末</h3>
                <p class="news-item__note">两场比赛之间的空档够不够吃顿饭，路线和开球时间摆在一起就清楚了。</p>
              </div>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="z9-section z9-section--ink2 news-series" id="series">
    <div class="z9-wrap">
      <div class="news-series__grid">
        <div class="news-series__main">
          <p class="z9-eyebrow">赛季专题与连载</p>
          <h2 class="z9-h2">跟着专题读完一个赛季</h2>
          <p class="z9-body news-series__lede">单篇战报看完就过去了，专题能让你把一条线索跟到底。每期主题固定、期号连续，覆盖范围在标题旁边写明。编辑和数据团队怎么排一年的选题，可以翻<a href="/culture/">品牌文化</a>。</p>

          <div class="news-series__index">
            <details class="news-serie" open>
              <summary class="news-serie__sum">
                <span class="news-serie__no">专题 01</span>
                <span class="news-serie__name">历史交锋回溯</span>
                <span class="news-serie__slash" aria-hidden="true"></span>
                <span class="news-serie__count">已出 9 期</span>
              </summary>
              <ul class="news-serie__list">
                <li>第 01 期 · 同城对阵里的控球率变化</li>
                <li>第 02 期 · 主场先失球的九个赛季回看</li>
                <li>第 03 期 · 近五轮状态与交锋记录的错位</li>
              </ul>
            </details>

            <details class="news-serie">
              <summary class="news-serie__sum">
                <span class="news-serie__no">专题 02</span>
                <span class="news-serie__name">城市赛区巡礼</span>
                <span class="news-serie__slash" aria-hidden="true"></span>
                <span class="news-serie__count">覆盖 8 个分站</span>
              </summary>
              <ul class="news-serie__list">
                <li>武汉站 · 三个赛场之间的一日路线</li>
                <li>宜昌站 · 边线外临时看台的来历</li>
                <li>襄阳站 · 风向如何改写定位球</li>
              </ul>
            </details>

            <details class="news-serie">
              <summary class="news-serie__sum">
                <span class="news-serie__no">专题 03</span>
                <span class="news-serie__name">积分走势观察</span>
                <span class="news-serie__slash" aria-hidden="true"></span>
                <span class="news-serie__count">每轮更新</span>
              </summary>
              <ul class="news-serie__list">
                <li>第 12 轮后 · 榜首那两分是怎么攒下的</li>
                <li>上周末 · 近五轮状态榜中段的拉锯</li>
                <li>本轮赛后 · 主场榜与客场榜的分岔口</li>
              </ul>
            </details>
          </div>
        </div>

        <figure class="z9-figure news-series__fig">
          <div class="z9-figure__media">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="深底荧光线条的赛季积分走势示意图" loading="lazy" decoding="async">
          </div>
          <figcaption class="z9-figure__cap">积分走势观察栏目里的图，一贯是深底配荧光线条。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="z9-section news-join" id="join">
    <div class="z9-wrap">
      <div class="news-join__grid">
        <div class="news-join__main">
          <p class="z9-eyebrow">订阅与合作</p>
          <h2 class="z9-h2 news-join__title">把下一轮的战报留在手边</h2>
          <p class="z9-body news-join__lede">赛区主办方可以把积分榜挂件嵌进自己的赛事页，青训机构和球队运营方也能把档案页排进档案库。合作意向确认后 3 个工作日内，你会拿到数据接入方案与排期表。</p>
          <p class="news-join__actions">
            <a class="z9-btn z9-btn--signal" href="/cooperation/">谈赛区共建</a>
            <a class="z9-btn z9-btn--ghost" href="/offerings/">看数据能力</a>
          </p>
        </div>

        <ul class="news-join__list">
          <li class="news-join__item">
            <p class="news-join__k">邮件订阅</p>
            <p class="news-join__v">每轮赛后把三条短战报发到你的邮箱。写信到 contact@short-z9tiyu.com.cn，说明你关注的球队或赛区就行。</p>
          </li>
          <li class="news-join__item">
            <p class="news-join__k">赛区内容共建</p>
            <p class="news-join__v">已有 42 家业余联赛主办方与 17 家青训机构在共建栏目里出现，城市赛区可以按轮次排期手记与专题。</p>
          </li>
          <li class="news-join__item">
            <p class="news-join__k">规则与用法</p>
            <p class="news-join__v">积分怎么算、统计数据从哪来、客户端推送怎么设，去<a href="/answers/">帮助索引</a>按分类查更快。</p>
          </li>
          <li class="news-join__item">
            <p class="news-join__k">电话咨询</p>
            <p class="news-join__v">400-4618-4545，工作日 9:00–18:00 有人接听；赛事实时数据相关的咨询建议走邮件。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>
</main>

.page-news {
  --news-ink-soft: #4A554E;
  --news-rule-soft: #CFC9BA;
  --news-rule-dark: #24402F;
  background: var(--ink);
  color: var(--text-on-dark);
}

/* ---------- 首屏 ---------- */
.page-news .news-lead {
  padding-block: clamp(16px, 3vw, 28px) clamp(36px, 6vw, 72px);
}

.page-news .news-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
}

.page-news .news-lead__title {
  margin: 12px 0 0;
  max-width: 12ch;
  font-size: var(--fs-7);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.page-news .news-lead__lede {
  margin: 18px 0 0;
  max-width: 48ch;
  color: var(--grey);
}

.page-news .news-headlines {
  margin-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--news-rule-dark);
}

.page-news .news-headline {
  position: relative;
  padding: clamp(16px, 2.4vw, 24px) 0 clamp(16px, 2.4vw, 24px) 16px;
  border-bottom: 1px solid var(--news-rule-dark);
}

.page-news .news-headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 220ms var(--ease);
}

.page-news .news-headline:hover::before,
.page-news .news-headline:focus-within::before {
  transform: scaleY(1);
}

.page-news .news-headline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}

.page-news .news-headline__cat {
  color: var(--lime);
}

.page-news .news-headline__title {
  margin: 9px 0 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-news .news-headline--a .news-headline__title {
  font-size: var(--fs-6);
  max-width: 16ch;
}

.page-news .news-headline--b .news-headline__title {
  font-size: var(--fs-5);
  max-width: 20ch;
}

.page-news .news-headline--c .news-headline__title {
  font-size: var(--fs-4);
  max-width: 26ch;
}

.page-news .news-headline__note {
  margin: 9px 0 0;
  max-width: 54ch;
  font-size: var(--fs-3);
  line-height: 1.7;
  color: var(--grey);
}

.page-news .news-lead__figure {
  margin: 0;
}

.page-news .news-lead__figure .z9-figure__media {
  border: 1px solid var(--news-rule-dark);
}

@media (min-width: 900px) {
  .page-news .news-lead__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: start;
  }
}

/* ---------- 栏目与条目（纸奶油带） ---------- */
.page-news .news-archive {
  color: var(--text-dark);
}

.page-news .news-archive__head {
  max-width: 62ch;
}

.page-news .news-archive__lede {
  margin-top: 14px;
  color: var(--news-ink-soft);
}

.page-news .news-archive__fig {
  margin: clamp(22px, 3vw, 32px) 0 clamp(24px, 3.6vw, 38px);
}

.page-news .news-archive__fig .z9-figure__cap {
  color: var(--news-ink-soft);
}

.page-news .news-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--news-rule-soft);
}

.page-news .news-tabs__tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--news-rule-soft);
  border-bottom: 0;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 13px 18px;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .news-tabs__tab:hover {
  border-color: var(--ink);
}

.page-news .news-tabs__tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--lime);
}

.page-news .news-tabs__tab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.page-news .news-tabs__panel {
  padding-top: clamp(18px, 3vw, 28px);
}

.page-news .news-tabs__note {
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 3px solid var(--orange);
  max-width: 64ch;
  font-size: var(--fs-3);
  line-height: 1.7;
  color: var(--news-ink-soft);
}

.page-news .news-tabs__note a {
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-news .news-tabs__note a:hover {
  color: var(--orange);
}

.page-news .news-tabs__fig {
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.page-news .news-tabs__fig .z9-figure__cap {
  color: var(--news-ink-soft);
}

.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-rule-soft);
}

.page-news .news-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--news-rule-soft);
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 200ms var(--ease);
}

.page-news .news-item:hover::before,
.page-news .news-item:focus-within::before {
  transform: scaleY(1);
}

.page-news .news-item__idx {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--orange);
}

.page-news .news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--news-ink-soft);
}

.page-news .news-item__cat {
  background: var(--ink);
  color: var(--lime);
  padding: 4px 8px;
  letter-spacing: 0.08em;
}

.page-news .news-item__title {
  margin: 9px 0 0;
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.32;
  color: var(--text-dark);
}

.page-news .news-item__note {
  margin: 8px 0 0;
  max-width: 66ch;
  font-size: var(--fs-3);
  line-height: 1.72;
  color: var(--news-ink-soft);
}

@media (min-width: 760px) {
  .page-news .news-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    padding-block: 22px;
  }

  .page-news .news-tabs__tab {
    font-size: var(--fs-3);
    padding: 14px 22px;
  }
}

/* ---------- 赛季专题 ---------- */
.page-news .news-series__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
}

.page-news .news-series__lede {
  margin-top: 14px;
  max-width: 58ch;
  color: var(--grey);
}

.page-news .news-series__lede a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-series__index {
  margin-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

.page-news .news-serie {
  border-bottom: 1px solid var(--line);
}

.page-news .news-serie__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  color: var(--cream);
  transition: color 180ms var(--ease);
}

.page-news .news-serie__sum::-webkit-details-marker {
  display: none;
}

.page-news .news-serie__sum:hover {
  color: var(--lime);
}

.page-news .news-serie__sum:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-news .news-serie__no {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.page-news .news-serie__name {
  font-size: var(--fs-4);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-news .news-serie__slash {
  flex: 1 1 40px;
  min-width: 40px;
  height: 1px;
  align-self: center;
  background: repeating-linear-gradient(
    90deg,
    var(--news-rule-dark) 0 7px,
    transparent 7px 14px
  );
}

.page-news .news-serie__count {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  color: var(--grey);
}

.page-news .news-serie__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid var(--news-rule-dark);
}

.page-news .news-serie__list li {
  padding: 7px 0;
  font-size: var(--fs-3);
  line-height: 1.65;
  color: var(--text-on-dark);
  opacity: 0.86;
}

.page-news .news-series__fig {
  margin: 0;
}

.page-news .news-series__fig .z9-figure__media {
  border: 1px solid var(--news-rule-dark);
  background: var(--ink-3);
}

.page-news .news-series__fig .z9-figure__cap {
  color: var(--grey);
}

@media (min-width: 960px) {
  .page-news .news-series__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-news .news-series__fig {
    position: sticky;
    top: calc(var(--topbar-h) + 24px);
  }
}

/* ---------- 订阅与合作 ---------- */
.page-news .news-join {
  padding-block: clamp(44px, 6.5vw, 88px);
  border-top: 1px solid var(--line);
}

.page-news .news-join__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
}

.page-news .news-join__title {
  max-width: 16ch;
}

.page-news .news-join__lede {
  margin-top: 14px;
  max-width: 52ch;
  color: var(--grey);
}

.page-news .news-join__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

.page-news .news-join__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .news-join__item {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--news-rule-dark);
}

.page-news .news-join__item:last-child {
  border-bottom: 1px solid var(--news-rule-dark);
}

.page-news .news-join__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.page-news .news-join__v {
  margin: 0;
  max-width: 58ch;
  font-size: var(--fs-3);
  line-height: 1.72;
  color: var(--text-on-dark);
  opacity: 0.9;
}

.page-news .news-join__v a {
  color: var(--lime-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-join__v a:hover {
  color: var(--orange);
}

@media (min-width: 900px) {
  .page-news .news-join__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-news .news-headline::before,
  .page-news .news-item::before,
  .page-news .news-serie__sum,
  .page-news .news-tabs__tab {
    transition: none;
  }

  .page-news .news-headline::before,
  .page-news .news-item::before {
    transform: scaleY(1);
    opacity: 0;
  }

  .page-news .news-headline:hover::before,
  .page-news .news-headline:focus-within::before,
  .page-news .news-item:hover::before,
  .page-news .news-item:focus-within::before {
    opacity: 1;
  }
}