.page-news {
  --news-gap: 32px;
  --chip-line: rgba(53, 242, 208, .28);
}

/* 面包屑 */
.page-news .breadcrumb__sep {
  margin-inline: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.page-news .breadcrumb__here {
  color: var(--text);
}

/* 页首 */
.page-news .news-head__grid {
  display: grid;
  gap: 26px;
  margin-top: 24px;
}
.page-news .news-head__title {
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 15em;
}
.page-news .news-head__lede {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--muted);
}

.page-news .signal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.page-news .signal__item {
  padding: 14px 16px;
  background: var(--ink-800);
}
.page-news .signal__dt {
  margin-bottom: 7px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-news .signal__dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -.01em;
}

/* 主体分栏 */
.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  align-items: start;
}

/* 左侧公告栏 */
.page-news .news-rail {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.page-news .board {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid var(--line-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.page-news .board__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-news .board__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  filter: grayscale(.45) contrast(1.1);
}
.page-news .board__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 31, 26, .30) 0%, rgba(7, 31, 26, .92) 58%, var(--ink-900) 100%);
}
.page-news .board__inner {
  position: relative;
  z-index: 1;
  padding: 24px 22px 26px;
}
.page-news .board__title {
  margin: 12px 0 18px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
}
.page-news .board__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.page-news .board__list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.page-news .board__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--orange);
  transform: rotate(45deg);
}
.page-news .board__key {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-news .rail-cats {
  padding: 4px 0 0;
}
.page-news .taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .chip {
  display: inline-block;
  padding: 5px 11px;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.4;
  border: 1px solid var(--chip-line);
  color: var(--cyan);
  background: rgba(53, 242, 208, .08);
  transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.page-news a.chip:hover,
.page-news a.chip:focus-visible {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}
.page-news .chip--orange {
  color: var(--orange);
  border-color: rgba(255, 154, 60, .38);
  background: rgba(255, 154, 60, .10);
}
.page-news .chip--indigo {
  color: #A9B4F2;
  border-color: rgba(169, 180, 242, .34);
  background: rgba(27, 27, 58, .82);
}
.page-news .chip--wine {
  color: #EBAFC0;
  border-color: rgba(235, 175, 192, .30);
  background: rgba(74, 30, 43, .82);
}
.page-news .chip--cyan {
  color: var(--cyan);
}

.page-news .rail-note {
  padding: 20px 20px 22px;
}
.page-news .rail-note__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.page-news .rail-note__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(214, 228, 221, .82);
}
.page-news .rail-note__link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 154, 60, .42);
  padding-bottom: 2px;
  transition: border-color var(--t) var(--ease);
}
.page-news .rail-note__link:hover,
.page-news .rail-note__link:focus-visible {
  border-color: var(--orange);
}

/* 右侧流 */
.page-news .news-stream {
  display: grid;
  gap: 40px;
  min-width: 0;
}

/* 置顶公告 */
.page-news .pin {
  position: relative;
  padding: 24px 22px 26px;
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 154, 60, .16), transparent 58%),
    var(--ink-700);
  border-left: 3px solid var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.page-news .pin__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.page-news .pin__stamp {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}
.page-news .pin__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.2vw, 32px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--text);
  max-width: 22em;
}
.page-news .pin__text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.82;
  color: rgba(214, 228, 221, .84);
  max-width: 40em;
}
.page-news .pin__points {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.page-news .pin__points li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .pin__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 10px;
  height: 1px;
  background: var(--cyan);
}
.page-news .pin__link {
  display: inline-block;
  font-size: 13.5px;
  letter-spacing: .05em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.page-news .pin__link:hover,
.page-news .pin__link:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

/* 区块标题 */
.page-news .news-block {
  display: grid;
  gap: 20px;
  scroll-margin-top: 80px;
}
.page-news .block-head__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--text);
}
.page-news .block-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.page-news .block-head__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* 条目卡 */
.page-news .entry {
  position: relative;
  padding: 20px 0 0 18px;
  border-top: 1px solid var(--line-soft);
}
.page-news .entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background var(--t) var(--ease), top var(--t) var(--ease);
}
.page-news .entry:hover::before,
.page-news .entry:focus-within::before {
  top: 12px;
  background: var(--cyan);
}
.page-news .entry--feature {
  display: grid;
  gap: 16px;
  padding-top: 0;
  border-top: 0;
}
.page-news .entry--feature::before {
  top: 0;
}
.page-news .entry__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.page-news .entry__time {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}
.page-news .entry__title {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: clamp(18px, 3.2vw, 23px);
  font-weight: 800;
  line-height: 1.26;
  color: var(--text);
}
.page-news .entry__summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--muted);
  transition: color var(--t) var(--ease);
}
.page-news .entry:hover .entry__summary,
.page-news .entry:focus-within .entry__summary {
  color: rgba(214, 228, 221, .92);
}

/* 设备适配 */
.page-news .device {
  display: grid;
  gap: 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line-soft);
}
.page-news .device__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
}
.page-news .device__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.05);
}
.page-news .device__body {
  min-width: 0;
}
.page-news .device__title {
  margin: 12px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(19px, 3.4vw, 25px);
  font-weight: 800;
  line-height: 1.22;
  color: var(--text);
}
.page-news .device__text {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}
.page-news .devlist {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-news .devlist__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .devlist__key {
  font-size: 12px;
  color: var(--orange);
  letter-spacing: .06em;
  padding-top: 2px;
}
.page-news .device__link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.page-news .device__link:hover,
.page-news .device__link:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

/* 横向专题卡 */
.page-news .topics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(228px, 82%);
  gap: 14px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--line-strong) transparent;
}
.page-news .topics:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.page-news .topic {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  background: var(--ink-800);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.page-news .topic:hover {
  background: var(--ink-700);
  border-top-color: var(--cyan);
  transform: translateY(-2px);
}
.page-news .topic--lead {
  padding: 0 0 20px;
  background: var(--ink-700);
}
.page-news .topic__media {
  overflow: hidden;
  margin-bottom: 16px;
}
.page-news .topic__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.7);
  transition: transform var(--t-slow) var(--ease);
}
.page-news .topic--lead:hover .topic__media img {
  transform: scale(1.03);
}
.page-news .topic--lead .topic__num,
.page-news .topic--lead .topic__title,
.page-news .topic--lead .topic__text {
  margin-left: 18px;
  margin-right: 18px;
}
.page-news .topic__num {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
  margin-bottom: 8px;
}
.page-news .topic__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
.page-news .topic__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* 迭代记录 */
.page-news .log {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}
.page-news .log__item {
  display: grid;
  gap: 4px;
  padding: 15px 0 15px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  transition: border-left-color var(--t) var(--ease), background var(--t) var(--ease);
}
.page-news .log__item:hover {
  border-left-color: var(--cyan);
  background: rgba(53, 242, 208, .04);
}
.page-news .log__time {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
}
.page-news .log__text {
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}
.page-news .log__link {
  justify-self: start;
  font-size: 13.5px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.page-news .log__link:hover,
.page-news .log__link:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

/* 关注入口 */
.page-news .follow {
  display: grid;
  gap: 22px;
  padding: 26px 22px 28px;
  background:
    radial-gradient(circle at 8% 100%, rgba(53, 242, 208, .14), transparent 62%),
    var(--ink-700);
}
.page-news .follow__title {
  margin: 12px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(21px, 3.8vw, 28px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--text);
}
.page-news .follow__lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--muted);
  max-width: 40em;
}
.page-news .follow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 窄屏保护 */
.page-news img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 620px) {
  .page-news .signal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-news .entry--feature {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 20px;
  }
  .page-news .topics {
    grid-auto-columns: minmax(260px, 46%);
  }
  .page-news .devlist__item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

@media (min-width: 780px) {
  .page-news .device {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 26px;
  }
  .page-news .follow {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 30px 28px 32px;
  }
  .page-news .follow__actions {
    justify-content: flex-end;
  }
  .page-news .log__item {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
  }
}

@media (min-width: 1000px) {
  .page-news .news-head__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: 46px;
  }
  .page-news .news-layout {
    grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
    gap: 44px;
  }
  .page-news .news-rail {
    position: sticky;
    top: 28px;
  }
  .page-news .news-stream {
    gap: 48px;
  }
  .page-news .topics {
    grid-auto-columns: minmax(290px, 40%);
  }
  .page-news .pin {
    padding: 30px 30px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .entry::before,
  .page-news .entry__summary,
  .page-news .topic,
  .page-news .topic__media img,
  .page-news .log__item,
  .page-news a.chip {
    transition: none;
  }
  .page-news .topic:hover,
  .page-news .topic--lead:hover .topic__media img {
    transform: none;
  }
}


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

  <section class="section section--tight news-head">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li><a class="breadcrumb__link" href="/">首页概览</a></li>
          <li><span class="breadcrumb__sep" aria-hidden="true">/</span><span class="breadcrumb__here">动态与公告</span></li>
        </ol>
      </nav>

      <div class="news-head__grid">
        <div class="news-head__lead">
          <p class="kicker">动态与公告</p>
          <h1 class="news-head__title">赛季进行中的每一次调整，在这里先说一声</h1>
          <p class="news-head__lede">博奥体育把轮次安排的变动、栏目页的改版、设备阅读设置的调整集中在这一页发布。最近一轮对阵从哪翻起、换到平板之后阅读密度怎么设，顺着公告就能找到下一步该点哪里。</p>
        </div>

        <dl class="signal">
          <div class="signal__item">
            <dt class="signal__dt">公告节奏</dt>
            <dd class="signal__dd">每周一</dd>
          </div>
          <div class="signal__item">
            <dt class="signal__dt">联赛栏目</dt>
            <dd class="signal__dd">12 个</dd>
          </div>
          <div class="signal__item">
            <dt class="signal__dt">专题路线</dt>
            <dd class="signal__dd">6 类</dd>
          </div>
          <div class="signal__item">
            <dt class="signal__dt">速查页已发布</dt>
            <dd class="signal__dd">1,200 余期</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <section class="section news-main">
    <div class="wrap news-layout">

      <aside class="news-rail" aria-label="公告节奏与分类入口">
        <div class="board">
          <div class="board__bg">
            <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="夜间看台灯光与公告板线条交织的抽象背景">
          </div>
          <div class="board__inner">
            <p class="kicker">公告栏</p>
            <p class="board__title">持续运营的更新节奏</p>
            <ul class="board__list">
              <li><span class="board__key">每周一</span>轮次调整、栏目变更与设备适配说明集中发布</li>
              <li><span class="board__key">工作日</span>每日校对轮次速查与交锋档案</li>
              <li><span class="board__key">赛季节点</span>上线专题阅读路线</li>
              <li><span class="board__key">每季度</span>复盘导航结构，调整入口顺序</li>
            </ul>
          </div>
        </div>

        <div class="rail-cats">
          <p class="kicker">按分类查看</p>
          <ul class="taglist">
            <li><a class="chip chip--cyan" href="#pin">轮次调整</a></li>
            <li><a class="chip chip--indigo" href="#updates">栏目更新</a></li>
            <li><a class="chip chip--wine" href="#device">设备适配</a></li>
            <li><a class="chip chip--orange" href="#topics">专题上线</a></li>
          </ul>
        </div>

        <div class="panel panel--wine rail-note">
          <p class="rail-note__title">发现对阵记录有出入？</p>
          <p class="rail-note__text">把轮次或交锋档案的具体位置说清楚，通过内容纠错通道提交，编辑组会按联赛分组跟进处理。</p>
          <a class="rail-note__link" href="/connect/">前往联系通道</a>
        </div>
      </aside>

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

        <article class="pin" id="pin">
          <div class="pin__flag">
            <span class="chip chip--orange">置顶</span>
            <span class="pin__stamp num">本周一公告 · 轮次调整</span>
          </div>
          <h2 class="pin__title">赛季第二阶段轮次速查已按周拆分，周末连看路线同步更新</h2>
          <p class="pin__text">进入赛季第二阶段后，轮次密度明显提高，最近两个赛季的轮次安排已重排成一页速查，按周横向翻阅。周末打算连看两场的球迷朋友，可以在同一页把相邻轮次串成一条连续浏览路径，提前知道两场之间的间隔和切换位置。</p>
          <ul class="pin__points">
            <li>速查页顶部新增周次序号，横向滑动即可跳到下一周</li>
            <li>相邻轮次的卡片之间补齐了跳转，串成路线后一次翻完</li>
            <li>历史交锋入口保留在对阵卡片上，不必回到列表重新检索</li>
          </ul>
          <a class="pin__link" href="/features/">看轮次速查怎么用</a>
        </article>

        <section class="news-block" id="updates">
          <div class="block-head">
            <p class="kicker">轮次与栏目更新</p>
            <h2 class="block-head__title">近期改动的栏目与档案</h2>
          </div>

          <article class="entry entry--feature">
            <div class="media media--wide">
              <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="球场边线与轮次标签排布的局部抽象图" loading="lazy" decoding="async">
              <p class="media__caption">五大联赛对阵页 · 按周重排</p>
            </div>
            <div class="entry__body">
              <div class="entry__tags">
                <span class="chip chip--cyan">轮次调整</span>
                <span class="entry__time num">最近一轮</span>
              </div>
              <h3 class="entry__title">欧洲五大联赛对阵页按周重排，翻轮次的手感变快了</h3>
              <p class="entry__summary">对阵卡片改为以周为单位成组排列，每组顶部带一个周次角标。之前要滑过整段赛程才能找到的那一轮，现在从周次角标直接定位。</p>
            </div>
          </article>

          <article class="entry">
            <div class="entry__body">
              <div class="entry__tags">
                <span class="chip chip--indigo">栏目更新</span>
                <span class="entry__time num">赛季第二阶段</span>
              </div>
              <h3 class="entry__title">历史交锋档案补齐 260 场对阵，累计收录超过 4,800 场</h3>
              <p class="entry__summary">按联赛、轮次和栏目三类索引归档的档案继续扩量，洲际杯赛阶段的对阵记录补齐了此前缺失的部分。从关注列表里的球队直接点进去，能落到对应的交锋页。</p>
            </div>
          </article>

          <article class="entry">
            <div class="entry__body">
              <div class="entry__tags">
                <span class="chip chip--indigo">栏目更新</span>
                <span class="entry__time num">本周</span>
              </div>
              <h3 class="entry__title">关注列表补齐主客场筛选，多联赛并行追踪更顺手</h3>
              <p class="entry__summary">关注列表现在支持按联赛、时间、主客场三种方式筛选，最多可并行追踪 8 个联赛，每个联赛还能单独打上提醒标记。同时跟三四个联赛的球迷，可以把想看的那几场先圈出来。</p>
            </div>
          </article>
        </section>

        <section class="news-block" id="device">
          <div class="block-head">
            <p class="kicker">设备适配说明</p>
            <h2 class="block-head__title">换到平板之后，阅读区怎么排</h2>
          </div>

          <div class="device">
            <div class="device__media">
              <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="平板轮廓与适配清单线条组合的抽象图" loading="lazy" decoding="async">
            </div>
            <div class="device__body">
              <span class="chip chip--wine">设备适配</span>
              <h3 class="device__title">平板适配清单按屏幕比例拆分，横屏布局建议一并给出</h3>
              <p class="device__text">平板端首次使用需要完成换平板登录，登录后在适配清单里能看到屏幕比例、阅读密度和横屏布局三项建议。清单按设备类型拆分，不同尺寸的平板对应的密度设置并不相同，照着清单调完再进轮次速查，卡片间距会舒服很多。</p>
              <ul class="devlist">
                <li class="devlist__item"><span class="devlist__key num">01</span>内地版导航按手机、平板、桌面三类设备拆入口，平板端单独一份清单</li>
                <li class="devlist__item"><span class="devlist__key num">02</span>账号在移动端与平板端通用，登录状态可随设备切换</li>
                <li class="devlist__item"><span class="devlist__key num">03</span>横屏时轮次卡片自动加宽，纵向滑动距离相应缩短</li>
              </ul>
              <a class="device__link" href="/guide/">看换平板登录的步骤</a>
            </div>
          </div>
        </section>

        <section class="news-block" id="topics">
          <div class="block-head block-head--row">
            <div>
              <p class="kicker">专题上线</p>
              <h2 class="block-head__title">六类专题路线，按赛季节奏排</h2>
            </div>
            <p class="block-head__hint">横向滑动查看</p>
          </div>

          <ul class="topics" tabindex="0" aria-label="专题路线列表">
            <li class="topic topic--lead">
              <div class="topic__media">
                <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="战术板箭头连成专题路径的抽象图" loading="lazy" decoding="async">
              </div>
              <div class="topic__body">
                <span class="topic__num num">01</span>
                <h3 class="topic__title">赛季开局</h3>
                <p class="topic__text">各联赛首轮的排布与对阵背景放在一条路径里，开季前一次看完。</p>
              </div>
            </li>
            <li class="topic">
              <span class="topic__num num">02</span>
              <h3 class="topic__title">密集赛程</h3>
              <p class="topic__text">连续轮次之间的间隔被标在卡片上，哪些周要连着看一目了然。</p>
            </li>
            <li class="topic">
              <span class="topic__num num">03</span>
              <h3 class="topic__title">杯赛淘汰</h3>
              <p class="topic__text">洲际杯赛进入淘汰阶段后，对阵关系按轮次逐层展开。</p>
            </li>
            <li class="topic">
              <span class="topic__num num">04</span>
              <h3 class="topic__title">历史交锋</h3>
              <p class="topic__text">从当前对阵跳到同两队的历史记录，把来历先摸清楚。</p>
            </li>
            <li class="topic">
              <span class="topic__num num">05</span>
              <h3 class="topic__title">周末连看</h3>
              <p class="topic__text">两场相邻赛事串成一条路径，周末怎么安排先有个底。</p>
            </li>
            <li class="topic">
              <span class="topic__num num">06</span>
              <h3 class="topic__title">赛季收官</h3>
              <p class="topic__text">最后几轮的排布集中呈现，需要一起看的场次归在一起。</p>
            </li>
          </ul>
        </section>

        <section class="news-block" id="iterations">
          <div class="block-head">
            <p class="kicker">版本迭代记录</p>
            <h2 class="block-head__title">导航与筛选的调整轨迹</h2>
          </div>

          <ol class="log">
            <li class="log__item">
              <span class="log__time num">最近一次复盘</span>
              <span class="log__text">新增平板适配清单页，内地版导航的平板入口从二级位置提到首页入口序列。</span>
            </li>
            <li class="log__item">
              <span class="log__time num">赛季第二阶段前</span>
              <span class="log__text">关注列表的筛选方式由单一联赛筛选扩为联赛、时间、主客场三种并行。</span>
            </li>
            <li class="log__item">
              <span class="log__time num">上一赛季末</span>
              <span class="log__text">轮次速查页从纵向长列表改为按周分组，周次序号固定在每组顶端。</span>
            </li>
            <li class="log__item">
              <span class="log__time num">更早一次复盘</span>
              <span class="log__text">公告栏按四类标签归档，历史公告可按分类回看，不必从头翻起。</span>
            </li>
          </ol>
          <a class="log__link" href="/about/">了解内容整理的做法</a>
        </section>

        <section class="news-block" id="follow">
          <div class="panel follow">
            <div class="follow__text">
              <p class="kicker">持续跟进</p>
              <h2 class="follow__title">把变化留在你的关注列表里</h2>
              <p class="follow__lede">公告发布之后，最直接的跟进方式是把对应联赛加进关注列表：轮次有调整，列表里的卡片会跟着变；交锋档案补齐了，从列表点进去就能看到更新后的记录。想回看历史公告，公告栏按四类标签归档，按分类翻比按日期翻快。</p>
            </div>
            <div class="follow__actions">
              <a class="btn" href="/features/">设置关注列表</a>
              <a class="btn btn--ghost" href="/guide/">查看公告栏用法</a>
            </div>
          </div>
        </section>

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

</main>

.page-news {
  --news-gap: 32px;
  --chip-line: rgba(53, 242, 208, .28);
}

/* 面包屑 */
.page-news .breadcrumb__sep {
  margin-inline: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.page-news .breadcrumb__here {
  color: var(--text);
}

/* 页首 */
.page-news .news-head__grid {
  display: grid;
  gap: 26px;
  margin-top: 24px;
}
.page-news .news-head__title {
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 15em;
}
.page-news .news-head__lede {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--muted);
}

.page-news .signal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.page-news .signal__item {
  padding: 14px 16px;
  background: var(--ink-800);
}
.page-news .signal__dt {
  margin-bottom: 7px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-news .signal__dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -.01em;
}

/* 主体分栏 */
.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  align-items: start;
}

/* 左侧公告栏 */
.page-news .news-rail {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.page-news .board {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid var(--line-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.page-news .board__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-news .board__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  filter: grayscale(.45) contrast(1.1);
}
.page-news .board__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 31, 26, .30) 0%, rgba(7, 31, 26, .92) 58%, var(--ink-900) 100%);
}
.page-news .board__inner {
  position: relative;
  z-index: 1;
  padding: 24px 22px 26px;
}
.page-news .board__title {
  margin: 12px 0 18px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
}
.page-news .board__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.page-news .board__list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.page-news .board__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--orange);
  transform: rotate(45deg);
}
.page-news .board__key {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-news .rail-cats {
  padding: 4px 0 0;
}
.page-news .taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .chip {
  display: inline-block;
  padding: 5px 11px;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.4;
  border: 1px solid var(--chip-line);
  color: var(--cyan);
  background: rgba(53, 242, 208, .08);
  transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.page-news a.chip:hover,
.page-news a.chip:focus-visible {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}
.page-news .chip--orange {
  color: var(--orange);
  border-color: rgba(255, 154, 60, .38);
  background: rgba(255, 154, 60, .10);
}
.page-news .chip--indigo {
  color: #A9B4F2;
  border-color: rgba(169, 180, 242, .34);
  background: rgba(27, 27, 58, .82);
}
.page-news .chip--wine {
  color: #EBAFC0;
  border-color: rgba(235, 175, 192, .30);
  background: rgba(74, 30, 43, .82);
}
.page-news .chip--cyan {
  color: var(--cyan);
}

.page-news .rail-note {
  padding: 20px 20px 22px;
}
.page-news .rail-note__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.page-news .rail-note__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(214, 228, 221, .82);
}
.page-news .rail-note__link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 154, 60, .42);
  padding-bottom: 2px;
  transition: border-color var(--t) var(--ease);
}
.page-news .rail-note__link:hover,
.page-news .rail-note__link:focus-visible {
  border-color: var(--orange);
}

/* 右侧流 */
.page-news .news-stream {
  display: grid;
  gap: 40px;
  min-width: 0;
}

/* 置顶公告 */
.page-news .pin {
  position: relative;
  padding: 24px 22px 26px;
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 154, 60, .16), transparent 58%),
    var(--ink-700);
  border-left: 3px solid var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.page-news .pin__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.page-news .pin__stamp {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}
.page-news .pin__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.2vw, 32px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--text);
  max-width: 22em;
}
.page-news .pin__text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.82;
  color: rgba(214, 228, 221, .84);
  max-width: 40em;
}
.page-news .pin__points {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.page-news .pin__points li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .pin__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 10px;
  height: 1px;
  background: var(--cyan);
}
.page-news .pin__link {
  display: inline-block;
  font-size: 13.5px;
  letter-spacing: .05em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.page-news .pin__link:hover,
.page-news .pin__link:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

/* 区块标题 */
.page-news .news-block {
  display: grid;
  gap: 20px;
  scroll-margin-top: 80px;
}
.page-news .block-head__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--text);
}
.page-news .block-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.page-news .block-head__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* 条目卡 */
.page-news .entry {
  position: relative;
  padding: 20px 0 0 18px;
  border-top: 1px solid var(--line-soft);
}
.page-news .entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background var(--t) var(--ease), top var(--t) var(--ease);
}
.page-news .entry:hover::before,
.page-news .entry:focus-within::before {
  top: 12px;
  background: var(--cyan);
}
.page-news .entry--feature {
  display: grid;
  gap: 16px;
  padding-top: 0;
  border-top: 0;
}
.page-news .entry--feature::before {
  top: 0;
}
.page-news .entry__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.page-news .entry__time {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}
.page-news .entry__title {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: clamp(18px, 3.2vw, 23px);
  font-weight: 800;
  line-height: 1.26;
  color: var(--text);
}
.page-news .entry__summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--muted);
  transition: color var(--t) var(--ease);
}
.page-news .entry:hover .entry__summary,
.page-news .entry:focus-within .entry__summary {
  color: rgba(214, 228, 221, .92);
}

/* 设备适配 */
.page-news .device {
  display: grid;
  gap: 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line-soft);
}
.page-news .device__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
}
.page-news .device__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.05);
}
.page-news .device__body {
  min-width: 0;
}
.page-news .device__title {
  margin: 12px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(19px, 3.4vw, 25px);
  font-weight: 800;
  line-height: 1.22;
  color: var(--text);
}
.page-news .device__text {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}
.page-news .devlist {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-news .devlist__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .devlist__key {
  font-size: 12px;
  color: var(--orange);
  letter-spacing: .06em;
  padding-top: 2px;
}
.page-news .device__link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.page-news .device__link:hover,
.page-news .device__link:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

/* 横向专题卡 */
.page-news .topics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(228px, 82%);
  gap: 14px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--line-strong) transparent;
}
.page-news .topics:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.page-news .topic {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  background: var(--ink-800);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.page-news .topic:hover {
  background: var(--ink-700);
  border-top-color: var(--cyan);
  transform: translateY(-2px);
}
.page-news .topic--lead {
  padding: 0 0 20px;
  background: var(--ink-700);
}
.page-news .topic__media {
  overflow: hidden;
  margin-bottom: 16px;
}
.page-news .topic__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.7);
  transition: transform var(--t-slow) var(--ease);
}
.page-news .topic--lead:hover .topic__media img {
  transform: scale(1.03);
}
.page-news .topic--lead .topic__num,
.page-news .topic--lead .topic__title,
.page-news .topic--lead .topic__text {
  margin-left: 18px;
  margin-right: 18px;
}
.page-news .topic__num {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
  margin-bottom: 8px;
}
.page-news .topic__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
.page-news .topic__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* 迭代记录 */
.page-news .log {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}
.page-news .log__item {
  display: grid;
  gap: 4px;
  padding: 15px 0 15px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  transition: border-left-color var(--t) var(--ease), background var(--t) var(--ease);
}
.page-news .log__item:hover {
  border-left-color: var(--cyan);
  background: rgba(53, 242, 208, .04);
}
.page-news .log__time {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
}
.page-news .log__text {
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}
.page-news .log__link {
  justify-self: start;
  font-size: 13.5px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.page-news .log__link:hover,
.page-news .log__link:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

/* 关注入口 */
.page-news .follow {
  display: grid;
  gap: 22px;
  padding: 26px 22px 28px;
  background:
    radial-gradient(circle at 8% 100%, rgba(53, 242, 208, .14), transparent 62%),
    var(--ink-700);
}
.page-news .follow__title {
  margin: 12px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(21px, 3.8vw, 28px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--text);
}
.page-news .follow__lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--muted);
  max-width: 40em;
}
.page-news .follow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 窄屏保护 */
.page-news img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 620px) {
  .page-news .signal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-news .entry--feature {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 20px;
  }
  .page-news .topics {
    grid-auto-columns: minmax(260px, 46%);
  }
  .page-news .devlist__item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

@media (min-width: 780px) {
  .page-news .device {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 26px;
  }
  .page-news .follow {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 30px 28px 32px;
  }
  .page-news .follow__actions {
    justify-content: flex-end;
  }
  .page-news .log__item {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
  }
}

@media (min-width: 1000px) {
  .page-news .news-head__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: 46px;
  }
  .page-news .news-layout {
    grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
    gap: 44px;
  }
  .page-news .news-rail {
    position: sticky;
    top: 28px;
  }
  .page-news .news-stream {
    gap: 48px;
  }
  .page-news .topics {
    grid-auto-columns: minmax(290px, 40%);
  }
  .page-news .pin {
    padding: 30px 30px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .entry::before,
  .page-news .entry__summary,
  .page-news .topic,
  .page-news .topic__media img,
  .page-news .log__item,
  .page-news a.chip {
    transition: none;
  }
  .page-news .topic:hover,
  .page-news .topic--lead:hover .topic__media img {
    transform: none;
  }
}