.page-news {
  --news-side: 268px;
  --news-gap: clamp(20px, 3vw, 44px);
  display: block;
  overflow-x: clip;
}

.page-news .news-h2 {
  margin: 8px 0 0;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--bo-cream);
}

/* ---------- 页头 ---------- */
.page-news .news-head {
  padding: clamp(22px, 3.6vw, 42px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 2px solid var(--bo-line-1);
}

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

@media (min-width: 940px) {
  .page-news .news-head__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: end;
  }
}

.page-news h1 {
  margin: 12px 0 0;
  font-size: clamp(31px, 5.8vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 900;
  color: var(--bo-cream);
  overflow-wrap: anywhere;
}

.page-news .news-lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--bo-text-dim);
}

.page-news .news-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--bo-line-1);
  border: 2px solid var(--bo-line-1);
}

.page-news .news-facts > li {
  background: var(--bo-layer);
  padding: 15px 15px 13px;
}

.page-news .news-facts__v {
  display: block;
  font-family: var(--bo-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bo-lime);
}

.page-news .news-facts__u {
  font-size: 0.56em;
  margin-left: 2px;
  letter-spacing: 0.06em;
  color: var(--bo-text-dim);
}

.page-news .news-facts__k {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--bo-text-faint);
}

/* ---------- 四条内容线 ---------- */
.page-news .news-columns {
  padding: clamp(34px, 5vw, 64px) 0;
}

.page-news .news-columns__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(20px, 3vw, 34px);
}

@media (min-width: 700px) {
  .page-news .news-columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.page-news .news-col {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  box-shadow: var(--bo-shadow-hard-sm);
  padding: 18px 16px 20px;
  transition: transform 0.25s var(--bo-ease), border-color 0.25s var(--bo-ease);
}

.page-news .news-col:hover {
  transform: translateY(-4px);
  border-color: var(--bo-orange);
}

.page-news .news-col__no {
  margin: 0;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-orange);
}

.page-news .news-col__title {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--bo-cream);
}

.page-news .news-col__text {
  margin: 10px 0 0;
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--bo-text-dim);
}

.page-news .news-col__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bo-line-1);
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--bo-ice);
}

/* ---------- 主体：窄栏 + 长列表 ---------- */
.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  padding-top: clamp(18px, 3vw, 36px);
}

@media (min-width: 980px) {
  .page-news .news-layout {
    grid-template-columns: var(--news-side) minmax(0, 1fr);
    align-items: start;
  }
}

.page-news .news-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

@media (min-width: 980px) {
  .page-news .news-side {
    position: sticky;
    top: 96px;
  }
}

.page-news .news-side__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-text-faint);
}

.page-news .news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 980px) {
  .page-news .news-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .page-news .news-filters .bo-chip {
    text-align: left;
  }
}

.page-news .news-side__block {
  border: 1px solid var(--bo-line-1);
  border-left: 3px solid var(--bo-moss);
  background: var(--bo-deep);
  padding: 15px 16px 16px;
}

.page-news .news-side__title {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-text-faint);
}

.page-news .news-side__link {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--bo-line-2);
  font-size: 14px;
  line-height: 1.6;
  color: var(--bo-ice);
  text-decoration: none;
  transition: color 0.2s var(--bo-ease), padding-left 0.2s var(--bo-ease);
}

.page-news .news-side__link:first-of-type {
  border-top: 0;
  padding-top: 6px;
}

.page-news .news-side__link:hover,
.page-news .news-side__link:focus-visible {
  color: var(--bo-lime);
  padding-left: 6px;
}

/* ---------- 列表条目 ---------- */
.page-news .news-stream {
  display: block;
  min-width: 0;
}

.page-news .news-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--bo-line-1);
  transition: padding-left 0.28s var(--bo-ease);
}

@media (min-width: 640px) {
  .page-news .news-item {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 16px;
  }
}

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

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

.page-news .news-item:hover,
.page-news .news-item:focus-within {
  padding-left: 14px;
}

.page-news .news-item__no {
  font-family: var(--bo-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--bo-text-faint);
  padding-top: 3px;
}

.page-news .news-item__body {
  min-width: 0;
}

.page-news .news-item__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  color: var(--bo-text-faint);
}

.page-news .news-item__stage {
  color: var(--bo-text-dim);
}

.page-news .news-item__read {
  color: var(--bo-ice);
}

.page-news .news-item__title {
  margin: 0;
  font-size: clamp(18.5px, 2.1vw, 25px);
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bo-cream);
}

.page-news .news-item__sum {
  margin: 9px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--bo-text-dim);
}

/* ---------- 列表中的配图 ---------- */
.page-news .news-figure {
  margin: 22px 0;
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  padding: 9px;
  box-shadow: var(--bo-shadow-hard-sm);
}

.page-news .news-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .news-figure__cap {
  margin: 10px 2px 2px;
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--bo-text-faint);
}

/* ---------- 专题横滑带 ---------- */
.page-news .news-feature {
  margin: 26px 0;
  padding: clamp(20px, 3vw, 30px) clamp(14px, 2vw, 22px);
  border: 2px solid var(--bo-line-1);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(79, 122, 82, 0.12) 0 10px,
      rgba(6, 18, 31, 0) 10px 22px
    ),
    var(--bo-deep);
}

.page-news .news-feature__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}

.page-news .news-feature__hint {
  margin: 0;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--bo-text-faint);
}

.page-news .news-feature__rail {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--bo-rock) transparent;
  outline-offset: 4px;
}

.page-news .news-feature__rail::-webkit-scrollbar {
  height: 6px;
}

.page-news .news-feature__rail::-webkit-scrollbar-thumb {
  background: var(--bo-rock);
}

.page-news .news-topic {
  flex: 0 0 min(296px, 76vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--bo-layer);
  border: 2px solid var(--bo-line-1);
  padding: 16px 15px 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform 0.25s var(--bo-ease), border-color 0.25s var(--bo-ease);
}

.page-news .news-topic:hover {
  transform: translateY(-4px);
  border-color: var(--bo-lime);
}

.page-news .news-topic__no {
  margin: 0;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-orange);
}

.page-news .news-topic__title {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.36;
  font-weight: 800;
  color: var(--bo-cream);
}

.page-news .news-topic__text {
  margin: 9px 0 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--bo-text-dim);
}

.page-news .news-topic__foot {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--bo-line-1);
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--bo-lime);
}

/* ---------- 更新节奏 ---------- */
.page-news .news-rhythm {
  padding: clamp(38px, 6vw, 78px) 0;
  border-top: 2px solid var(--bo-line-1);
}

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

@media (min-width: 940px) {
  .page-news .news-rhythm__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
  }
}

.page-news .news-rhythm__lede {
  margin: 16px 0 22px;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--bo-text-dim);
}

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

.page-news .news-rhythm__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bo-line-1);
  font-size: 15px;
  line-height: 1.78;
  color: var(--bo-text-dim);
}

@media (min-width: 640px) {
  .page-news .news-rhythm__list li {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
}

.page-news .news-rhythm__list b {
  font-family: var(--bo-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--bo-lime);
}

.page-news .news-rhythm__figure {
  margin: 0;
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  padding: 9px;
  box-shadow: var(--bo-shadow-hard-sm);
}

.page-news .news-rhythm__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- 收尾入口 ---------- */
.page-news .news-start {
  padding: 0 0 clamp(40px, 6vw, 72px);
}

.page-news .news-start__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: clamp(22px, 3vw, 34px);
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  box-shadow: var(--bo-shadow-hard);
}

@media (min-width: 880px) {
  .page-news .news-start__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
  }
}

.page-news .news-start__text {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--bo-text-dim);
}

.page-news .news-start__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-news .news-start__actions .bo-btn {
  white-space: nowrap;
}

/* ---------- 焦点与降级 ---------- */
.page-news a:focus-visible,
.page-news button:focus-visible,
.page-news [data-rail]:focus-visible {
  outline: 2px solid var(--bo-ice);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .page-news .news-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-news .news-item:hover,
  .page-news .news-item:focus-within {
    padding-left: 10px;
  }
  .page-news .news-start__actions .bo-btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item,
  .page-news .news-col,
  .page-news .news-topic,
  .page-news .news-side__link {
    transition: border-color 0.2s linear, color 0.2s linear;
  }
  .page-news .news-item:hover,
  .page-news .news-item:focus-within {
    padding-left: 0;
  }
  .page-news .news-col:hover,
  .page-news .news-topic:hover {
    transform: none;
  }
  .page-news .news-item::before {
    transition: none;
  }
}
<<<END>>>

等等，我应该再检查一下有没有问题。`data-rail` 元素设置 `tabindex="0"` 没问题。`bo-rail` 和 `bo-rail__item` 是共享类，但我用 `news-feature__rail` 覆盖了 `display: flex` —— 这没问题，因为我是有作用域地覆盖。

还有一个问题：`.page-news .news-feature__rail` 设置了 `display:flex`，但 `bo-rail` 可能本身也有 `display: flex` —— 不管哪种情况都没问题。

另外 `overflow-x: clip` —— 比较新的属性，在现代浏览器里能用。行。

没问题，现在可以输出了。
<main id="main-content" class="page-news">

  <div class="bo-shell">
    <nav class="bo-crumbs" aria-label="面包屑导航">
      <span class="bo-crumbs__item"><a class="bo-crumbs__link" href="/">赛场首页</a></span>
      <span class="bo-crumbs__item bo-crumbs__current" aria-current="page">赛场观察</span>
    </nav>
  </div>

  <header class="news-head">
    <div class="bo-shell">
      <div class="news-head__grid">
        <div>
          <p class="bo-kicker">赛场观察</p>
          <h1>阵容怎么变、射门打在哪、版本动了什么，一条一条翻得到</h1>
          <p class="news-lede">
            半岛赛场把赛季里发生的事分成四类持续记下来：开赛前十分钟定下的首发名单、终场后的十二项技术统计、平台每一次改动的来龙去脉，以及服务与入口的变动通知。追一支队的轮次、核对一场比赛的射门分布、或者回看某个功能是怎么长出来的，从这里往下翻就行。
          </p>
        </div>
        <ul class="news-facts">
          <li>
            <span class="news-facts__v">46</span>
            <span class="news-facts__k">阵容速报 · 每周条数</span>
          </li>
          <li>
            <span class="news-facts__v">25<span class="news-facts__u">分钟</span></span>
            <span class="news-facts__k">战报复盘 · 赛后上线</span>
          </li>
          <li>
            <span class="news-facts__v">V4.0</span>
            <span class="news-facts__k">当前数据版本</span>
          </li>
          <li>
            <span class="news-facts__v">06</span>
            <span class="news-facts__k">版本迭代 · 已记录</span>
          </li>
        </ul>
      </div>
    </div>
  </header>

  <section class="news-columns" id="columns" aria-labelledby="columns-title">
    <div class="bo-shell">
      <div class="bo-section__head">
        <p class="bo-kicker">四条内容线</p>
        <h2 id="columns-title" class="news-h2">什么内容归哪一栏，什么时候去看</h2>
      </div>
      <div class="news-columns__grid">

        <article class="news-col" data-reveal>
          <p class="news-col__no">栏目 01</p>
          <h3 class="news-col__title">阵容速报</h3>
          <p class="news-col__text">
            记的是开赛前十分钟名单落定的过程，以及替补席上临时发生的调整。哪一步慢了一拍、哪一处记录被复核拦下来，都写在里面。
          </p>
          <p class="news-col__foot">比赛日每 30 分钟刷新</p>
        </article>

        <article class="news-col" data-reveal>
          <p class="news-col__no">栏目 02</p>
          <h3 class="news-col__title">战报复盘</h3>
          <p class="news-col__text">
            每场比赛的十二项技术统计里，射门单独占一行。复盘除了列数字，还会把关键回合串起来，讲清楚这些数字是从哪些回合里长出来的。
          </p>
          <p class="news-col__foot">终场后 25 分钟内上线</p>
        </article>

        <article class="news-col" data-reveal>
          <p class="news-col__no">栏目 03</p>
          <h3 class="news-col__title">数据版本记</h3>
          <p class="news-col__text">
            赛程筛选维度怎么从 6 个扩到 8 个、阵容卡翻转为什么改成两段式、窄窗排版做了哪些取舍——每次改动逐条留档，附带影响到的页面。
          </p>
          <p class="news-col__foot">随版本发布同步更新</p>
        </article>

        <article class="news-col" data-reveal>
          <p class="news-col__no">栏目 04</p>
          <h3 class="news-col__title">平台公告</h3>
          <p class="news-col__text">
            入口地址变更、场地分栏铺开进度、纠错通道的处理结果，一次说清一件事，告诉你改动之后该从哪儿进去。
          </p>
          <p class="news-col__foot">变动发生即发布</p>
        </article>

      </div>
    </div>
  </section>

  <div class="bo-shell">
    <div class="news-layout">

      <aside class="news-side" aria-label="内容筛选">
        <p class="news-side__label">按栏目 / 赛季阶段筛</p>
        <div class="bo-chips news-filters" data-chip-group>
          <button class="bo-chip" type="button" data-chip="all" aria-pressed="true">全部</button>
          <button class="bo-chip" type="button" data-chip="阵容速报" aria-pressed="false">阵容速报</button>
          <button class="bo-chip" type="button" data-chip="战报复盘" aria-pressed="false">战报复盘</button>
          <button class="bo-chip" type="button" data-chip="数据版本记" aria-pressed="false">数据版本记</button>
          <button class="bo-chip" type="button" data-chip="平台公告" aria-pressed="false">平台公告</button>
          <button class="bo-chip" type="button" data-chip="季前准备期" aria-pressed="false">季前准备期</button>
          <button class="bo-chip" type="button" data-chip="赛季前半程" aria-pressed="false">赛季前半程</button>
          <button class="bo-chip" type="button" data-chip="赛季中段" aria-pressed="false">赛季中段</button>
          <button class="bo-chip" type="button" data-chip="赛季冲刺段" aria-pressed="false">赛季冲刺段</button>
        </div>

        <div class="news-side__block">
          <p class="news-side__title">想直接上手</p>
          <a class="news-side__link" href="/help/">按步骤查一场比赛的阵容与统计</a>
          <a class="news-side__link" href="/business/">看赛程、阵容、战报的数据服务说明</a>
          <a class="news-side__link" href="/overview/">了解现场记录与校验是怎么做的</a>
        </div>
      </aside>

      <div class="news-stream" id="stream">

        <article class="news-item" data-filter-item="阵容速报 季前准备期" data-reveal>
          <div class="news-item__no" aria-hidden="true">01</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--orange">阵容速报</span><span class="news-item__stage">季前准备期</span><span class="news-item__read">4 分钟</span></p>
            <h3 class="news-item__title">开赛前十分钟名单落定，这一轮的三处首发调整是这样确认的</h3>
            <p class="news-item__sum">主队替补席的一次临时调整，从现场记录员发出到阵容卡刷新用了不到两分钟。这条把确认链条拆开写，讲清楚哪个环节最容易卡住。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="战报复盘 季前准备期" data-reveal>
          <div class="news-item__no" aria-hidden="true">02</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--lime">战报复盘</span><span class="news-item__stage">季前准备期</span><span class="news-item__read">5 分钟</span></p>
            <h3 class="news-item__title">射门单独成行之后，一场 19 次出手的比赛该怎么读</h3>
            <p class="news-item__sum">十二项技术统计里只有射门独占一行。这条复盘把两侧的出手位置、射正比例和关键回合并排放，让数字和画面能对上。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="数据版本记 季前准备期" data-reveal>
          <div class="news-item__no" aria-hidden="true">03</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--ice">数据版本记</span><span class="news-item__stage">季前准备期</span><span class="news-item__read">6 分钟</span></p>
            <h3 class="news-item__title">赛程筛选从 6 个维度扩到 8 个，多出来的两个放在哪一栏</h3>
            <p class="news-item__sum">新增赛事与状态两个维度之后，轮次和场地为什么仍然排在最前面，分栏高度和折叠顺序做了哪些配合。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="平台公告 赛季前半程" data-reveal>
          <div class="news-item__no" aria-hidden="true">04</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--moss">平台公告</span><span class="news-item__stage">赛季前半程</span><span class="news-item__read">3 分钟</span></p>
            <h3 class="news-item__title">场地分栏试点收尾，8 座城市的主场页面已全部切换</h3>
            <p class="news-item__sum">从单场地试用到赛区铺开，页面结构动了哪些地方，原先习惯从旧入口进来的读者改从哪个位置点进去。</p>
          </div>
        </article>

        <figure class="news-figure" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="战报页面的局部视图，比分与统计表并排排列，射门统计单独占一行并被高亮显示" decoding="async">
          <figcaption class="news-figure__cap">战报页面局部 · 射门统计单独成行，与比分同屏对照</figcaption>
        </figure>

        <article class="news-item" data-filter-item="阵容速报 赛季前半程" data-reveal>
          <div class="news-item__no" aria-hidden="true">05</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--orange">阵容速报</span><span class="news-item__stage">赛季前半程</span><span class="news-item__read">4 分钟</span></p>
            <h3 class="news-item__title">换人信息两分钟同步到阵容卡，中间要经过几个人</h3>
            <p class="news-item__sum">现场采集、编辑校验、入库分发，三段链路里最花时间的其实是第二段。这条用一场比赛的实例把三段的时间都标了出来。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="战报复盘 赛季前半程" data-reveal>
          <div class="news-item__no" aria-hidden="true">06</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--lime">战报复盘</span><span class="news-item__stage">赛季前半程</span><span class="news-item__read">5 分钟</span></p>
            <h3 class="news-item__title">一周六场横向对比，历史场次是这样逐场翻出来的</h3>
            <p class="news-item__sum">横向滑动带支持键盘左右键逐个切换，六场比赛的射门、控球和角球变化可以并排看，找出哪一场是真正的分水岭。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="数据版本记 赛季前半程" data-reveal>
          <div class="news-item__no" aria-hidden="true">07</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--ice">数据版本记</span><span class="news-item__stage">赛季前半程</span><span class="news-item__read">5 分钟</span></p>
            <h3 class="news-item__title">阵容卡翻转的两次迭代，420 毫秒里发生了什么</h3>
            <p class="news-item__sum">两段式翻转在第二次迭代里被拆成更短的节奏，同时补上了动效偏好关闭时直接切换内容的处理。</p>
          </div>
        </article>

        <section class="news-feature" id="topics" aria-labelledby="topics-title" data-reveal>
          <div class="news-feature__head">
            <p class="bo-kicker">专题系列</p>
            <h2 id="topics-title" class="news-h2">沿着一条线索，把整季看完</h2>
            <p class="news-feature__hint">左右方向键或横向滑动浏览</p>
          </div>
          <div class="bo-rail news-feature__rail" data-rail tabindex="0" aria-label="专题系列，可用左右方向键浏览">
            <article class="news-topic bo-rail__item">
              <p class="news-topic__no">专题 01</p>
              <h3 class="news-topic__title">射门行的整季观察</h3>
              <p class="news-topic__text">从热身赛追到冲刺段，把每场的出手位置与射正比例排成一条线，看不同比赛类型之间的节奏差异。</p>
              <p class="news-topic__foot">已收 9 篇</p>
            </article>
            <article class="news-topic bo-rail__item">
              <p class="news-topic__no">专题 02</p>
              <h3 class="news-topic__title">场地分栏上线过程</h3>
              <p class="news-topic__text">从 8 座城市的主场页面起步，记录每一次结构调整与入口变更，以及读者适应新位置用了多久。</p>
              <p class="news-topic__foot">已收 5 篇</p>
            </article>
            <article class="news-topic bo-rail__item">
              <p class="news-topic__no">专题 03</p>
              <h3 class="news-topic__title">数据版本迭代记录</h3>
              <p class="news-topic__text">V4.0 之后的每一次改动，逐条说明改了什么、影响哪些页面，桌面端与网页端分开写。</p>
              <p class="news-topic__foot">已收 6 篇</p>
            </article>
            <article class="news-topic bo-rail__item">
              <p class="news-topic__no">专题 04</p>
              <h3 class="news-topic__title">纠错案例复盘</h3>
              <p class="news-topic__text">挑出有代表性的读者提交，讲清楚核对现场记录之后是更正、补充说明还是维持原样。</p>
              <p class="news-topic__foot">已收 4 篇</p>
            </article>
          </div>
        </section>

        <article class="news-item" data-filter-item="平台公告 赛季中段" data-reveal>
          <div class="news-item__no" aria-hidden="true">08</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--moss">平台公告</span><span class="news-item__stage">赛季中段</span><span class="news-item__read">3 分钟</span></p>
            <h3 class="news-item__title">纠错通道收到的一类典型提交，以及它的处理路径</h3>
            <p class="news-item__sum">读者指出某个换人时间与现场记录不符，提交后一个工作日内进入复核队列，这条把复核时会看哪几项写了出来。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="阵容速报 赛季中段" data-reveal>
          <div class="news-item__no" aria-hidden="true">09</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--orange">阵容速报</span><span class="news-item__stage">赛季中段</span><span class="news-item__read">4 分钟</span></p>
            <h3 class="news-item__title">赛程密集期的一天两赛，首发确认是怎么排的</h3>
            <p class="news-item__sum">同一支队伍 24 小时内连打两场，两套阵容卡的更新顺序、标记方式与回看入口都在这条里说明。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="战报复盘 赛季中段" data-reveal>
          <div class="news-item__no" aria-hidden="true">10</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--lime">战报复盘</span><span class="news-item__stage">赛季中段</span><span class="news-item__read">5 分钟</span></p>
            <h3 class="news-item__title">十二项技术统计先看哪三项，取数编辑的常用顺序</h3>
            <p class="news-item__sum">射门、控球、传球成功率通常先看，剩下九项按比赛类型决定优先级。这条给出了三种典型比赛的取数顺序。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="阵容速报 赛季中段" data-reveal>
          <div class="news-item__no" aria-hidden="true">11</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--orange">阵容速报</span><span class="news-item__stage">赛季中段</span><span class="news-item__read">4 分钟</span></p>
            <h3 class="news-item__title">客场作战的阵容确认，现场记录员分几个点位</h3>
            <p class="news-item__sum">63 名现场记录员覆盖 28 座主要比赛城市，客场的名单确认依靠主场所在城市与随队两路记录交叉完成。</p>
          </div>
        </article>

        <figure class="news-figure" data-reveal>
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="手绘战术板示意图，用虚线箭头标出换人之后的站位调整与跑动路线" loading="lazy" decoding="async">
          <figcaption class="news-figure__cap">站位示意 · 虚线箭头标出换人后的跑动覆盖变化</figcaption>
        </figure>

        <article class="news-item" data-filter-item="数据版本记 赛季冲刺段" data-reveal>
          <div class="news-item__no" aria-hidden="true">12</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--ice">数据版本记</span><span class="news-item__stage">赛季冲刺段</span><span class="news-item__read">6 分钟</span></p>
            <h3 class="news-item__title">桌面端窗口从 1280 到 2560 像素，排版做了哪些取舍</h3>
            <p class="news-item__sum">窄窗时索引栏收起为顶部胶囊，宽窗时左右比例固定，数据卡宽度跟着栅格走。这条把三种窗口宽度的实际表现写了出来。</p>
          </div>
        </article>

        <figure class="news-figure" data-reveal>
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="更新日志式排版特写，等宽数字版本号与改动条目逐行排列在深色底上" loading="lazy" decoding="async">
          <figcaption class="news-figure__cap">版本记录 · 等宽数字对齐的改动条目</figcaption>
        </figure>

        <article class="news-item" data-filter-item="平台公告 赛季冲刺段" data-reveal>
          <div class="news-item__no" aria-hidden="true">13</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--moss">平台公告</span><span class="news-item__stage">赛季冲刺段</span><span class="news-item__read">3 分钟</span></p>
            <h3 class="news-item__title">PC 端帮助文档补齐到 127 篇，注册与登录分类新增最多</h3>
            <p class="news-item__sum">四类文档里，注册与登录的动作步骤被拆得更细，一步一个动作，照着点就能走完全程。</p>
          </div>
        </article>

        <article class="news-item" data-filter-item="战报复盘 赛季冲刺段" data-reveal>
          <div class="news-item__no" aria-hidden="true">14</div>
          <div class="news-item__body">
            <p class="news-item__tags"><span class="bo-tag bo-tag--lime">战报复盘</span><span class="news-item__stage">赛季冲刺段</span><span class="news-item__read">5 分钟</span></p>
            <h3 class="news-item__title">收官阶段的射门统计，三类常见走势</h3>
            <p class="news-item__sum">单场出手在 8 次以内、10 到 15 次、20 次以上，对应的比分分布差别明显。这条按三档分开整理，方便对照取数。</p>
          </div>
        </article>

      </div>
    </div>
  </div>

  <section class="news-rhythm" id="rhythm" aria-labelledby="rhythm-title">
    <div class="bo-shell">
      <div class="news-rhythm__grid">
        <div>
          <p class="bo-kicker">更新节奏</p>
          <h2 id="rhythm-title" class="news-h2">什么时候回来，能看到新东西</h2>
          <p class="news-rhythm__lede">
            赛季进行中，编辑团队按固定的时间点推内容，不用你反复刷新碰运气。比赛日盯着阵容速报，终场之后半小时内看战报复盘，功能有改动时翻数据版本记。
          </p>
          <ul class="news-rhythm__list">
            <li><b>阵容速报</b><span>比赛日每 30 分钟刷新一次，赛季中平均每周发布 46 条。</span></li>
            <li><b>战报复盘</b><span>每场比赛终场后 25 分钟内上线，含十二项技术统计与关键回合说明。</span></li>
            <li><b>数据版本记</b><span>随每次版本发布同步更新，桌面端与网页端分开记录。</span></li>
            <li><b>平台公告</b><span>入口地址或服务状态发生变化时即时发布，一次讲清一件事。</span></li>
          </ul>
        </div>
        <figure class="news-rhythm__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="编辑工位的多屏监看场景，屏幕上同时显示赛程列表与技术统计表，冷色光源" loading="lazy" decoding="async">
          <figcaption class="news-figure__cap">编辑台 · 赛程与统计表同屏核对</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="news-start" id="start" aria-labelledby="start-title">
    <div class="bo-shell">
      <div class="news-start__box">
        <div>
          <p class="bo-kicker">从读到用</p>
          <h2 id="start-title" class="news-h2">看完这一条，接着去把数据拿出来</h2>
          <p class="news-start__text">
            阵容卡的确认规则、赛程筛选的八个维度、战报十二项统计的字段含义，帮助中心按编号步骤一步步写清楚了。如果你要的是把赛程、赛果、阵容和技术统计接到自己的系统里，赛事数据服务页有订阅方式与接口说明。
          </p>
        </div>
        <div class="news-start__actions">
          <a class="bo-btn bo-btn--orange" href="/help/">打开帮助中心</a>
          <a class="bo-btn bo-btn--ghost" href="/business/">看数据服务</a>
          <a class="bo-btn bo-btn--ghost" href="/contact/">联系客服</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-news {
  --news-side: 268px;
  --news-gap: clamp(20px, 3vw, 44px);
  display: block;
  overflow-x: clip;
}

.page-news .news-h2 {
  margin: 8px 0 0;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--bo-cream);
}

.page-news .news-head {
  padding: clamp(22px, 3.6vw, 42px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 2px solid var(--bo-line-1);
}

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

@media (min-width: 940px) {
  .page-news .news-head__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: end;
  }
}

.page-news h1 {
  margin: 12px 0 0;
  font-size: clamp(31px, 5.8vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 900;
  color: var(--bo-cream);
  overflow-wrap: anywhere;
}

.page-news .news-lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--bo-text-dim);
}

.page-news .news-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--bo-line-1);
  border: 2px solid var(--bo-line-1);
}

.page-news .news-facts > li {
  background: var(--bo-layer);
  padding: 15px 15px 13px;
}

.page-news .news-facts__v {
  display: block;
  font-family: var(--bo-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bo-lime);
}

.page-news .news-facts__u {
  font-size: 0.56em;
  margin-left: 2px;
  letter-spacing: 0.06em;
  color: var(--bo-text-dim);
}

.page-news .news-facts__k {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--bo-text-faint);
}

.page-news .news-columns {
  padding: clamp(34px, 5vw, 64px) 0;
}

.page-news .news-columns__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(20px, 3vw, 34px);
}

@media (min-width: 700px) {
  .page-news .news-columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.page-news .news-col {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  box-shadow: var(--bo-shadow-hard-sm);
  padding: 18px 16px 20px;
  transition: transform 0.25s var(--bo-ease), border-color 0.25s var(--bo-ease);
}

.page-news .news-col:hover {
  transform: translateY(-4px);
  border-color: var(--bo-orange);
}

.page-news .news-col__no {
  margin: 0;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-orange);
}

.page-news .news-col__title {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--bo-cream);
}

.page-news .news-col__text {
  margin: 10px 0 0;
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--bo-text-dim);
}

.page-news .news-col__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bo-line-1);
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--bo-ice);
}

.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  padding-top: clamp(18px, 3vw, 36px);
}

@media (min-width: 980px) {
  .page-news .news-layout {
    grid-template-columns: var(--news-side) minmax(0, 1fr);
    align-items: start;
  }
}

.page-news .news-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

@media (min-width: 980px) {
  .page-news .news-side {
    position: sticky;
    top: 96px;
  }
}

.page-news .news-side__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-text-faint);
}

.page-news .news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 980px) {
  .page-news .news-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .page-news .news-filters .bo-chip {
    text-align: left;
  }
}

.page-news .news-side__block {
  border: 1px solid var(--bo-line-1);
  border-left: 3px solid var(--bo-moss);
  background: var(--bo-deep);
  padding: 15px 16px 16px;
}

.page-news .news-side__title {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-text-faint);
}

.page-news .news-side__link {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--bo-line-2);
  font-size: 14px;
  line-height: 1.6;
  color: var(--bo-ice);
  text-decoration: none;
  transition: color 0.2s var(--bo-ease), padding-left 0.2s var(--bo-ease);
}

.page-news .news-side__link:first-of-type {
  border-top: 0;
  padding-top: 6px;
}

.page-news .news-side__link:hover,
.page-news .news-side__link:focus-visible {
  color: var(--bo-lime);
  padding-left: 6px;
}

.page-news .news-stream {
  display: block;
  min-width: 0;
}

.page-news .news-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--bo-line-1);
  transition: padding-left 0.28s var(--bo-ease);
}

@media (min-width: 640px) {
  .page-news .news-item {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 16px;
  }
}

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

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

.page-news .news-item:hover,
.page-news .news-item:focus-within {
  padding-left: 14px;
}

.page-news .news-item__no {
  font-family: var(--bo-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--bo-text-faint);
  padding-top: 3px;
}

.page-news .news-item__body {
  min-width: 0;
}

.page-news .news-item__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  color: var(--bo-text-faint);
}

.page-news .news-item__stage {
  color: var(--bo-text-dim);
}

.page-news .news-item__read {
  color: var(--bo-ice);
}

.page-news .news-item__title {
  margin: 0;
  font-size: clamp(18.5px, 2.1vw, 25px);
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bo-cream);
}

.page-news .news-item__sum {
  margin: 9px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--bo-text-dim);
}

.page-news .news-figure {
  margin: 22px 0;
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  padding: 9px;
  box-shadow: var(--bo-shadow-hard-sm);
}

.page-news .news-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .news-figure__cap {
  margin: 10px 2px 2px;
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--bo-text-faint);
}

.page-news .news-feature {
  margin: 26px 0;
  padding: clamp(20px, 3vw, 30px) clamp(14px, 2vw, 22px);
  border: 2px solid var(--bo-line-1);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(79, 122, 82, 0.12) 0 10px,
      rgba(6, 18, 31, 0) 10px 22px
    ),
    var(--bo-deep);
}

.page-news .news-feature__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}

.page-news .news-feature__hint {
  margin: 0;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--bo-text-faint);
}

.page-news .news-feature__rail {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--bo-rock) transparent;
  outline-offset: 4px;
}

.page-news .news-feature__rail::-webkit-scrollbar {
  height: 6px;
}

.page-news .news-feature__rail::-webkit-scrollbar-thumb {
  background: var(--bo-rock);
}

.page-news .news-topic {
  flex: 0 0 min(296px, 76vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--bo-layer);
  border: 2px solid var(--bo-line-1);
  padding: 16px 15px 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform 0.25s var(--bo-ease), border-color 0.25s var(--bo-ease);
}

.page-news .news-topic:hover {
  transform: translateY(-4px);
  border-color: var(--bo-lime);
}

.page-news .news-topic__no {
  margin: 0;
  font-family: var(--bo-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bo-orange);
}

.page-news .news-topic__title {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.36;
  font-weight: 800;
  color: var(--bo-cream);
}

.page-news .news-topic__text {
  margin: 9px 0 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--bo-text-dim);
}

.page-news .news-topic__foot {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--bo-line-1);
  font-family: var(--bo-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--bo-lime);
}

.page-news .news-rhythm {
  padding: clamp(38px, 6vw, 78px) 0;
  border-top: 2px solid var(--bo-line-1);
}

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

@media (min-width: 940px) {
  .page-news .news-rhythm__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
  }
}

.page-news .news-rhythm__lede {
  margin: 16px 0 22px;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--bo-text-dim);
}

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

.page-news .news-rhythm__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bo-line-1);
  font-size: 15px;
  line-height: 1.78;
  color: var(--bo-text-dim);
}

@media (min-width: 640px) {
  .page-news .news-rhythm__list li {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
}

.page-news .news-rhythm__list b {
  font-family: var(--bo-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--bo-lime);
}

.page-news .news-rhythm__figure {
  margin: 0;
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  padding: 9px;
  box-shadow: var(--bo-shadow-hard-sm);
}

.page-news .news-rhythm__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-news .news-start {
  padding: 0 0 clamp(40px, 6vw, 72px);
}

.page-news .news-start__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: clamp(22px, 3vw, 34px);
  border: 2px solid var(--bo-line-1);
  background: var(--bo-layer);
  box-shadow: var(--bo-shadow-hard);
}

@media (min-width: 880px) {
  .page-news .news-start__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
  }
}

.page-news .news-start__text {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--bo-text-dim);
}

.page-news .news-start__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-news .news-start__actions .bo-btn {
  white-space: nowrap;
}

.page-news a:focus-visible,
.page-news button:focus-visible,
.page-news [data-rail]:focus-visible {
  outline: 2px solid var(--bo-ice);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .page-news .news-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-news .news-item:hover,
  .page-news .news-item:focus-within {
    padding-left: 10px;
  }
  .page-news .news-start__actions .bo-btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item,
  .page-news .news-col,
  .page-news .news-topic,
  .page-news .news-side__link {
    transition: border-color 0.2s linear, color 0.2s linear;
  }
  .page-news .news-item:hover,
  .page-news .news-item:focus-within {
    padding-left: 0;
  }
  .page-news .news-col:hover,
  .page-news .news-topic:hover {
    transform: none;
  }
  .page-news .news-item::before {
    transition: none;
  }
}