.page-news {
  --cat: var(--blue);
  --news-head-gap: clamp(14px, 2.4vw, 20px);
  position: relative;
  overflow-x: clip;
  background: var(--ink-950);
  color: var(--paper);
  padding-bottom: clamp(40px, 7vw, 88px);
}

/* ---------- 首屏报头 ---------- */
.page-news .news-masthead {
  position: relative;
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(24px, 4vw, 44px);
  border-bottom: 1px solid var(--edge);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(46, 123, 255, 0.20), transparent 62%),
    radial-gradient(90% 80% at 100% 10%, rgba(164, 76, 255, 0.16), transparent 66%),
    var(--ink-950);
  overflow: hidden;
}
.page-news .news-masthead::before {
  content: "";
  position: absolute;
  inset: auto -15% -45% 35%;
  height: 220px;
  background: linear-gradient(90deg, transparent, rgba(53, 241, 161, 0.16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.page-news .news-masthead .crumbs {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto clamp(16px, 3vw, 26px);
}
.page-news .mast-grid {
  position: relative;
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  max-width: var(--shell);
  margin: 0 auto;
}
.page-news .mast-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}
.page-news .mast-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.85rem, 6.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.page-news .mast-title em {
  display: inline-block;
  font-style: normal;
  color: var(--blue);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.page-news .mast-lead .lede {
  margin: clamp(14px, 2.4vw, 20px) 0 0;
  max-width: 36em;
  font-size: clamp(0.98rem, 1.7vw, 1.1rem);
  line-height: 1.75;
  color: var(--mute);
}
.page-news .mast-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(16px, 2.6vw, 22px);
}

.page-news .mast-index {
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  background: rgba(14, 23, 48, 0.72);
  padding: 10px;
}
.page-news .mast-index-title {
  margin: 4px 12px 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.page-news .mast-index a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--paper);
  font-size: 0.94rem;
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.page-news .mast-index a:hover,
.page-news .mast-index a:focus-visible {
  background: rgba(46, 123, 255, 0.18);
  color: #ffffff;
}
.page-news .mast-index .idx {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--mint);
  letter-spacing: 0.06em;
}

/* ---------- 章节基础 ---------- */
.page-news .news-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(34px, 6vw, 72px) var(--gutter) 0;
}
.page-news .news-head .title {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.page-news .news-head .lede {
  margin: 10px 0 0;
  max-width: 34em;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mute);
}
.page-news .prose {
  max-width: 34em;
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--paper);
}

/* ---------- 本期焦点 ---------- */
.page-news .focus-card {
  margin-top: var(--news-head-gap);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(27, 30, 74, 0.92), rgba(14, 23, 48, 0.92));
  transition: border-color 0.25s var(--ease);
}
.page-news .focus-card:hover {
  border-color: rgba(46, 123, 255, 0.55);
}
.page-news .focus-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--deep);
}
.page-news .focus-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
}
.page-news .focus-version {
  position: absolute;
  left: clamp(12px, 3vw, 26px);
  bottom: clamp(12px, 3vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--mint);
  border-radius: var(--radius-pill);
  background: rgba(7, 10, 18, 0.84);
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}
.page-news .focus-body {
  display: grid;
  gap: clamp(20px, 3.4vw, 34px);
  padding: clamp(20px, 3.4vw, 36px);
}
.page-news .focus-text .prose:last-child {
  margin-bottom: 0;
}
.page-news .focus-path {
  border-left: 2px solid var(--blue);
  padding-left: clamp(14px, 2.4vw, 22px);
}
.page-news .path-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.page-news .path-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-news .path-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--paper);
}
.page-news .step-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--mint);
  color: var(--ink-950);
}
.page-news .path-foot {
  margin: 14px 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--mute);
}

/* ---------- 时间线图 ---------- */
.page-news .timeline-figure {
  margin: clamp(18px, 3vw, 26px) 0 0;
}
.page-news .timeline-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--edge);
  object-fit: cover;
}
.page-news .timeline-figure .media-caption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--mute);
}

/* ---------- 筛选 + 条目 ---------- */
.page-news .filter-set {
  margin-top: clamp(20px, 3.2vw, 30px);
  position: relative;
}
.page-news .filter-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(14px, 2.4vw, 20px);
}
.page-news .filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  background: rgba(14, 23, 48, 0.62);
  color: var(--mute);
  font-size: 0.86rem;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.page-news .filter-chip:hover {
  color: var(--paper);
  border-color: var(--violet);
}
.page-news #nf-all:checked ~ .filter-bar [for="nf-all"],
.page-news #nf-version:checked ~ .filter-bar [for="nf-version"],
.page-news #nf-schedule:checked ~ .filter-bar [for="nf-schedule"],
.page-news #nf-transfer:checked ~ .filter-bar [for="nf-transfer"],
.page-news #nf-booking:checked ~ .filter-bar [for="nf-booking"] {
  background: var(--violet);
  border-color: var(--violet);
  color: #ffffff;
}

.page-news #nf-version:checked ~ .log-list .log-item:not(.log-item--version),
.page-news #nf-schedule:checked ~ .log-list .log-item:not(.log-item--schedule),
.page-news #nf-transfer:checked ~ .log-list .log-item:not(.log-item--transfer),
.page-news #nf-booking:checked ~ .log-list .log-item:not(.log-item--booking) {
  display: none;
}

.page-news .log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-news .log-item {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(14px, 2.4vw, 20px) clamp(14px, 2.4vw, 22px) clamp(14px, 2.4vw, 20px) clamp(18px, 3vw, 26px);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  background: rgba(14, 23, 48, 0.56);
  overflow: hidden;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.page-news .log-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cat);
}
.page-news .log-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(233, 238, 248, 0.10) 48%, transparent 64%);
  transform: translateX(-115%);
  transition: transform 0.55s var(--ease);
  pointer-events: none;
}
.page-news .log-item:hover {
  background: rgba(27, 30, 74, 0.86);
  border-color: rgba(46, 123, 255, 0.5);
}
.page-news .log-item:hover::after {
  transform: translateX(115%);
}
.page-news .log-item--version { --cat: var(--violet); }
.page-news .log-item--schedule { --cat: var(--blue); }
.page-news .log-item--transfer { --cat: var(--mint); }
.page-news .log-item--booking { --cat: var(--amber); }

.page-news .log-cat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--cat);
}
.page-news .log-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.page-news .log-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mute);
}
.page-news .log-note {
  margin: 2px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
  transition: color 0.2s var(--ease);
}
.page-news .log-item:hover .log-note {
  color: var(--paper);
}
.page-news .log-item--compact {
  padding-top: clamp(11px, 1.8vw, 14px);
  padding-bottom: clamp(11px, 1.8vw, 14px);
  background: rgba(14, 23, 48, 0.34);
}
.page-news .log-item--compact .log-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--mute);
}
.page-news .log-item--compact:hover .log-title {
  color: var(--paper);
}

/* ---------- 人员变动 ---------- */
.page-news .squad-grid {
  display: grid;
  gap: clamp(20px, 3.6vw, 38px);
  margin-top: var(--news-head-gap);
}
.page-news .squad-scope {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-news .squad-scope li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--mute);
}
.page-news .squad-scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mint);
  transform: rotate(45deg);
}
.page-news .squad-scope strong {
  color: var(--paper);
  font-weight: 700;
}
.page-news .squad-link {
  margin: 18px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
}
.page-news .squad-link a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 123, 255, 0.45);
}
.page-news .squad-link a:hover {
  color: var(--mint);
  border-bottom-color: var(--mint);
}
.page-news .squad-figure {
  position: relative;
  margin: 0;
}
.page-news .squad-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--edge);
  object-fit: cover;
}
.page-news .squad-badge {
  position: absolute;
  top: clamp(12px, 2.4vw, 18px);
  right: clamp(12px, 2.4vw, 18px);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(7, 10, 18, 0.86);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
.page-news .squad-figure .media-caption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--mute);
}

/* ---------- 赛季专题 ---------- */
.page-news .series-grid {
  display: grid;
  gap: 14px;
  margin-top: var(--news-head-gap);
}
.page-news .series-card {
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(27, 30, 74, 0.86), rgba(14, 23, 48, 0.86));
  overflow: hidden;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.page-news .series-card:hover {
  border-color: rgba(164, 76, 255, 0.5);
}
.page-news .series-card[open] {
  border-color: rgba(164, 76, 255, 0.65);
  background: linear-gradient(170deg, rgba(27, 30, 74, 0.98), rgba(14, 23, 48, 0.98));
}
.page-news .series-card > summary {
  display: grid;
  gap: 8px;
  padding: clamp(16px, 2.6vw, 22px);
  cursor: pointer;
  list-style: none;
}
.page-news .series-card > summary::-webkit-details-marker {
  display: none;
}
.page-news .series-no {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--violet);
}
.page-news .series-name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--paper);
}
.page-news .series-desc {
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--mute);
}
.page-news .series-body {
  padding: 0 clamp(16px, 2.6vw, 22px) clamp(16px, 2.6vw, 22px);
  border-top: 1px dashed var(--edge);
  padding-top: clamp(14px, 2.4vw, 18px);
}
.page-news .series-media {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--edge);
  object-fit: cover;
}
.page-news .series-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.page-news .series-body li {
  position: relative;
  padding-left: 16px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--paper);
}
.page-news .series-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--mint);
  transform: rotate(45deg);
}

/* ---------- 订阅 ---------- */
.page-news .subscribe-panel {
  margin-top: var(--news-head-gap);
  padding: clamp(20px, 3.6vw, 40px);
  border: 1px solid rgba(46, 123, 255, 0.38);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(164, 76, 255, 0.22), transparent 62%),
    linear-gradient(150deg, rgba(14, 23, 48, 0.96), rgba(7, 10, 18, 0.96));
}
.page-news .sub-grid {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-news .sub-block p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--mute);
  max-width: 32em;
}
.page-news .sub-label {
  margin-bottom: 8px !important;
  font-family: var(--font-mono);
  font-size: 0.76rem !important;
  letter-spacing: 0.16em;
  color: var(--mint) !important;
}
.page-news .sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px);
}
.page-news .sub-foot {
  margin: 16px 0 0;
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--mute);
}

/* ---------- 响应式 ---------- */
@media (min-width: 600px) {
  .page-news .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-news .log-item {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 18px;
  }
  .page-news .log-note {
    grid-column: 2 / 4;
  }
  .page-news .log-meta {
    justify-self: end;
    white-space: nowrap;
  }
}

@media (min-width: 900px) {
  .page-news .mast-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.82fr);
    align-items: end;
  }
  .page-news .focus-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
  .page-news .squad-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
  .page-news .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-news .sub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .log-item,
  .page-news .log-item::after,
  .page-news .filter-chip,
  .page-news .mast-index a {
    transition: none !important;
  }
  .page-news .log-item:hover::after {
    transform: translateX(-115%);
  }
}


<main id="main-content" class="page-news">
  <header class="news-masthead">
    <nav class="crumbs" aria-label="面包屑">
      <ol class="crumbs-list">
        <li class="crumbs-item"><a class="crumbs-link" href="/">首页</a></li>
        <li class="crumbs-sep" aria-hidden="true">/</li>
        <li class="crumbs-item"><span class="crumbs-link" aria-current="page">赛事动态</span></li>
      </ol>
    </nav>

    <div class="mast-grid">
      <div class="mast-lead">
        <p class="mast-kicker">更新公告 · 赛季档案</p>
        <h1 class="mast-title">入口挪了、时间改了、人换了，<em>都在这里</em></h1>
        <p class="lede">从 v3.2 稳定版到本赛季季后赛阶段，完美电竞中心调整了几处你每天都会碰到的位置：赛事入口更靠上、通知按时段分层、人员变动收进设置。往下翻，每条都写清改了什么、你要在哪里点。</p>
        <div class="mast-tags">
          <span class="tag tag--mint">v3.2 稳定版</span>
          <span class="tag tag--violet">27 个版本迭代</span>
          <span class="tag tag--amber">转会推送 4.6 万条</span>
        </div>
      </div>

      <aside class="mast-index" aria-label="速览">
        <p class="mast-index-title">速览</p>
        <a href="#focus"><span class="idx">01</span><span>这一轮改了什么</span></a>
        <a href="#log"><span class="idx">02</span><span>变更条目一览</span></a>
        <a href="#squad"><span class="idx">03</span><span>转会与教练组调整</span></a>
        <a href="#series"><span class="idx">04</span><span>赛季专题读本</span></a>
        <a href="#subscribe"><span class="idx">05</span><span>把变化收进通知</span></a>
      </aside>
    </div>
  </header>

  <section class="news-section" id="focus">
    <div class="news-head">
      <p class="eyebrow">本期焦点</p>
      <h2 class="title">通知分了层，你追的那几场先响</h2>
    </div>

    <article class="focus-card">
      <div class="focus-media">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="暗调数据流与霓虹光晕交织的抽象题图">
        <span class="focus-version">v3.2 稳定版 · 本赛季</span>
      </div>
      <div class="focus-body">
        <div class="focus-text">
          <p class="prose">过去一条提醒不分轻重地响，现在拆成赛前提醒、比分推送、赛后数据回看三层，各自能在设置里按时间段开关。默认只覆盖比赛日傍晚到深夜，白天开会时手机不会突然震动。</p>
          <p class="prose">同一页还放着转会动态的开关：打开后，只有你订阅的球队换人换帅才会找你，其他队伍的进出安静留在列表里，想看的时候再翻。</p>
        </div>
        <div class="focus-path">
          <p class="path-label">回到设置，三步搞定</p>
          <ol class="path-steps">
            <li><span class="step-no">01</span><span>首页顶部导航栏点「赛事」，先确认你的订阅球队还在列表里。</span></li>
            <li><span class="step-no">02</span><span>右上角头像菜单进入「设置」。</span></li>
            <li><span class="step-no">03</span><span>打开「通知与推送」，按时间段勾选你要的那几层。</span></li>
          </ol>
          <p class="path-foot">保存后返回首页，实时比分和球队动态仍在同一屏，不用再往下跳一层。</p>
        </div>
      </div>
    </article>
  </section>

  <section class="news-section" id="log">
    <div class="news-head">
      <p class="eyebrow">更新公告</p>
      <h2 class="title">版本、赛程与预约的变更条目</h2>
      <p class="lede">切到对应栏目，只留下你要看的那一类。</p>
    </div>

    <figure class="timeline-figure">
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="沿横轴排列的版本节点刻度图，节点以亮点标记" loading="lazy" decoding="async">
      <figcaption class="media-caption">版本节点沿赛季阶段排开，亮起的是已经推到三端的稳定版。</figcaption>
    </figure>

    <div class="filter-set">
      <input class="filter-input" type="radio" name="news-cat" id="nf-all" checked>
      <input class="filter-input" type="radio" name="news-cat" id="nf-version">
      <input class="filter-input" type="radio" name="news-cat" id="nf-schedule">
      <input class="filter-input" type="radio" name="news-cat" id="nf-transfer">
      <input class="filter-input" type="radio" name="news-cat" id="nf-booking">

      <div class="filter-bar" role="group" aria-label="按栏目筛选条目">
        <label class="filter-chip" for="nf-all">全部</label>
        <label class="filter-chip" for="nf-version">版本迭代</label>
        <label class="filter-chip" for="nf-schedule">赛程同步</label>
        <label class="filter-chip" for="nf-transfer">人员变动</label>
        <label class="filter-chip" for="nf-booking">赛事预约</label>
      </div>

      <ul class="log-list">
        <li class="log-item log-item--version">
          <span class="log-cat">版本迭代</span>
          <h3 class="log-title">v3.2 稳定版：赛事入口收进首页顶部导航栏</h3>
          <span class="log-meta">阅读 2 分钟</span>
          <p class="log-note">从打开应用到进入赛程页平均 3 步，比改版前少走了一半路。网页端、iOS 与 Android 用同一账号，换手机扫码登录平均 8 秒完成。</p>
        </li>
        <li class="log-item log-item--version">
          <span class="log-cat">版本迭代</span>
          <h3 class="log-title">「我的订阅」上限扩到 30 支球队、12 项赛事</h3>
          <span class="log-meta">阅读 2 分钟</span>
          <p class="log-note">关注位变多之后，首页比分带按开赛时间排序，最近要打的排在最前面，追赛不用自己往下翻。</p>
        </li>
        <li class="log-item log-item--schedule">
          <span class="log-cat">赛程同步</span>
          <h3 class="log-title">本赛季中段：赛程同步节奏加密</h3>
          <span class="log-meta">阅读 3 分钟</span>
          <p class="log-note">赛事信息每 15 分钟完成一轮同步，比分直播延迟控制在 3 秒以内；开赛时间临时调整会直接刷到你关注的那一条上。</p>
        </li>
        <li class="log-item log-item--transfer">
          <span class="log-cat">人员变动</span>
          <h3 class="log-title">v3.2 发布后一轮：转会动态并入设置页</h3>
          <span class="log-meta">阅读 2 分钟</span>
          <p class="log-note">六类赛事的选手转会、战队人员变动与教练组调整收在同一处，按你订阅的球队过滤，不再混在比分推送里。</p>
        </li>
        <li class="log-item log-item--booking">
          <span class="log-cat">赛事预约</span>
          <h3 class="log-title">小队团体预约支持 2 至 20 人</h3>
          <span class="log-meta">阅读 2 分钟</span>
          <p class="log-note">队长填一次人数与场馆就能看到余位，队员各自收到确认提示；人数临时变动不用重新发起。</p>
        </li>
        <li class="log-item log-item--schedule log-item--compact">
          <span class="log-cat">赛程同步</span>
          <h3 class="log-title">季后赛阶段：开赛提醒提前量调整为赛前 30 分钟</h3>
          <span class="log-meta">1 分钟</span>
        </li>
        <li class="log-item log-item--transfer log-item--compact">
          <span class="log-cat">人员变动</span>
          <h3 class="log-title">休赛期窗口：变动条目按战队归档</h3>
          <span class="log-meta">1 分钟</span>
        </li>
        <li class="log-item log-item--booking log-item--compact">
          <span class="log-cat">赛事预约</span>
          <h3 class="log-title">个人席位预约：确认提示挪到赛前一天</h3>
          <span class="log-meta">1 分钟</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-section" id="squad">
    <div class="news-head">
      <p class="eyebrow">人员变动</p>
      <h2 class="title">谁换了队、谁进了教练组</h2>
    </div>

    <div class="squad-grid">
      <div class="squad-text">
        <p class="prose">升级版转会动态面板在「设置」里开启，覆盖六个大类赛事的选手转会、战队人员变动与教练组调整。开启后只有你订阅的球队会主动找你，其余队伍的进出安静躺在面板里等你翻。</p>
        <p class="prose">上线以来累计推送 4.6 万条人员变动信息。休赛期一天几十条很正常，把提醒时间段收紧到晚间，白天进面板集中看更省事。</p>

        <ul class="squad-scope">
          <li><strong>选手转会</strong>转入、转出与租借三类标记分开显示，一眼看出人是走了还是借出去。</li>
          <li><strong>战队人员变动</strong>首发与替补的名额变化单独成行，不和大名单混在一起。</li>
          <li><strong>教练组调整</strong>主教练与助教变动写进同一条，不用两条拼着看。</li>
        </ul>

        <p class="squad-link">赛程与场馆信息由 12 个重点城市的本地运营团队维护更新，<a href="/culture/">了解这些团队怎么分工</a>。</p>
      </div>

      <figure class="squad-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="表示人员流动方向的箭头与色块组合图，抽象无姓名" loading="lazy" decoding="async">
        <span class="squad-badge">累计推送 4.6 万条</span>
        <figcaption class="media-caption">箭头方向表示转入与转出，颜色区分选手、战队与教练组三类调整。</figcaption>
      </figure>
    </div>
  </section>

  <section class="news-section" id="series">
    <div class="news-head">
      <p class="eyebrow">赛季专题</p>
      <h2 class="title">单个条目只讲改动，专题把一段赛季连起来</h2>
      <p class="lede">点开卡片，展开该系列的条目清单。</p>
    </div>

    <div class="series-grid">
      <details class="series-card">
        <summary>
          <span class="series-no">01</span>
          <h3 class="series-name">六类赛事的观赛节奏</h3>
          <span class="series-desc">足球、篮球、排球、乒乓球、羽毛球与电竞，赛程密度和观赛窗口差得很远，这一组按类别拆开讲。</span>
        </summary>
        <div class="series-body">
          <img class="series-media" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="斜向分割的抽象封面图形，用于区分不同系列主题" loading="lazy" decoding="async">
          <ul>
            <li>联赛与杯赛交叠时，哪一项该优先看</li>
            <li>一天同时三场开打，比分带怎么排序</li>
            <li>电竞与球类赛程在提醒节奏上的差别</li>
          </ul>
        </div>
      </details>

      <details class="series-card">
        <summary>
          <span class="series-no">02</span>
          <h3 class="series-name">一个转会窗口的完整记录</h3>
          <span class="series-desc">从窗口开启到关闭，人员流动的方向、节奏，以及最常见的那几种误读。</span>
        </summary>
        <div class="series-body">
          <ul>
            <li>窗口期前段：传闻多、确认少，怎么筛</li>
            <li>窗口中段：租借与转会同时发生时的标记差别</li>
            <li>收尾阶段：教练组调整往往比选手更晚落定</li>
          </ul>
        </div>
      </details>

      <details class="series-card">
        <summary>
          <span class="series-no">03</span>
          <h3 class="series-name">数据面板进阶用法</h3>
          <span class="series-desc">比分、回合、得分分布与选手出场时间，40 余项指标怎么组合出你要的答案。</span>
        </summary>
        <div class="series-body">
          <ul>
            <li>单场技术统计导出后先看哪几列</li>
            <li>近 10 场趋势对照，找出状态拐点</li>
            <li>得分分布与出场时间的交叉读法</li>
          </ul>
        </div>
      </details>
    </div>
  </section>

  <section class="news-section" id="subscribe">
    <div class="news-head">
      <p class="eyebrow">订阅</p>
      <h2 class="title">把这些变化收进通知</h2>
    </div>

    <div class="subscribe-panel">
      <div class="sub-grid">
        <div class="sub-block">
          <p class="sub-label">站内通知</p>
          <p>赛前提醒、比分推送与赛后数据回看三层各自独立，改完设置马上生效。时间段默认覆盖比赛日傍晚到深夜，也可以改成全天或只在开赛前。</p>
        </div>
        <div class="sub-block">
          <p class="sub-label">邮件提醒</p>
          <p>账号与预约的确认信息会发到注册邮箱，适合留档用。需要人来看的邮件，工作日 9:00-18:00 有专员处理。</p>
        </div>
      </div>

      <div class="sub-actions">
        <a class="btn btn--primary" href="/product/">查看通知设置位置</a>
        <a class="btn btn--ghost" href="/knowledge/">收不到推送怎么办</a>
      </div>
      <p class="sub-foot">想同时关注多支队伍，可在「我的订阅」里一次加到 30 支球队或 12 项赛事，超出时会按开赛时间自动排序。</p>
    </div>
  </section>
</main>

.page-news {
  --cat: var(--blue);
  --news-head-gap: clamp(14px, 2.4vw, 20px);
  position: relative;
  overflow-x: clip;
  background: var(--ink-950);
  color: var(--paper);
  padding-bottom: clamp(40px, 7vw, 88px);
}

/* ---------- 首屏报头 ---------- */
.page-news .news-masthead {
  position: relative;
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(24px, 4vw, 44px);
  border-bottom: 1px solid var(--edge);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(46, 123, 255, 0.20), transparent 62%),
    radial-gradient(90% 80% at 100% 10%, rgba(164, 76, 255, 0.16), transparent 66%),
    var(--ink-950);
  overflow: hidden;
}
.page-news .news-masthead::before {
  content: "";
  position: absolute;
  inset: auto -15% -45% 35%;
  height: 220px;
  background: linear-gradient(90deg, transparent, rgba(53, 241, 161, 0.16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.page-news .news-masthead .crumbs {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto clamp(16px, 3vw, 26px);
}
.page-news .mast-grid {
  position: relative;
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  max-width: var(--shell);
  margin: 0 auto;
}
.page-news .mast-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--mint);
}
.page-news .mast-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.85rem, 6.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.page-news .mast-title em {
  display: inline-block;
  font-style: normal;
  color: var(--blue);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.page-news .mast-lead .lede {
  margin: clamp(14px, 2.4vw, 20px) 0 0;
  max-width: 36em;
  font-size: clamp(0.98rem, 1.7vw, 1.1rem);
  line-height: 1.75;
  color: var(--mute);
}
.page-news .mast-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(16px, 2.6vw, 22px);
}

.page-news .mast-index {
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  background: rgba(14, 23, 48, 0.72);
  padding: 10px;
}
.page-news .mast-index-title {
  margin: 4px 12px 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.page-news .mast-index a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--paper);
  font-size: 0.94rem;
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.page-news .mast-index a:hover,
.page-news .mast-index a:focus-visible {
  background: rgba(46, 123, 255, 0.18);
  color: #ffffff;
}
.page-news .mast-index .idx {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--mint);
  letter-spacing: 0.06em;
}

/* ---------- 章节基础 ---------- */
.page-news .news-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(34px, 6vw, 72px) var(--gutter) 0;
}
.page-news .news-head .title {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.page-news .news-head .lede {
  margin: 10px 0 0;
  max-width: 34em;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mute);
}
.page-news .prose {
  max-width: 34em;
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--paper);
}

/* ---------- 本期焦点 ---------- */
.page-news .focus-card {
  margin-top: var(--news-head-gap);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(27, 30, 74, 0.92), rgba(14, 23, 48, 0.92));
  transition: border-color 0.25s var(--ease);
}
.page-news .focus-card:hover {
  border-color: rgba(46, 123, 255, 0.55);
}
.page-news .focus-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--deep);
}
.page-news .focus-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
}
.page-news .focus-version {
  position: absolute;
  left: clamp(12px, 3vw, 26px);
  bottom: clamp(12px, 3vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--mint);
  border-radius: var(--radius-pill);
  background: rgba(7, 10, 18, 0.84);
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}
.page-news .focus-body {
  display: grid;
  gap: clamp(20px, 3.4vw, 34px);
  padding: clamp(20px, 3.4vw, 36px);
}
.page-news .focus-text .prose:last-child {
  margin-bottom: 0;
}
.page-news .focus-path {
  border-left: 2px solid var(--blue);
  padding-left: clamp(14px, 2.4vw, 22px);
}
.page-news .path-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.page-news .path-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-news .path-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--paper);
}
.page-news .step-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--mint);
  color: var(--ink-950);
}
.page-news .path-foot {
  margin: 14px 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--mute);
}

/* ---------- 时间线图 ---------- */
.page-news .timeline-figure {
  margin: clamp(18px, 3vw, 26px) 0 0;
}
.page-news .timeline-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--edge);
  object-fit: cover;
}
.page-news .timeline-figure .media-caption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--mute);
}

/* ---------- 筛选与条目 ---------- */
.page-news .filter-set {
  margin-top: clamp(20px, 3.2vw, 30px);
  position: relative;
}
.page-news .filter-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(14px, 2.4vw, 20px);
}
.page-news .filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  background: rgba(14, 23, 48, 0.62);
  color: var(--mute);
  font-size: 0.86rem;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.page-news .filter-chip:hover {
  color: var(--paper);
  border-color: var(--violet);
}
.page-news #nf-all:checked ~ .filter-bar [for="nf-all"],
.page-news #nf-version:checked ~ .filter-bar [for="nf-version"],
.page-news #nf-schedule:checked ~ .filter-bar [for="nf-schedule"],
.page-news #nf-transfer:checked ~ .filter-bar [for="nf-transfer"],
.page-news #nf-booking:checked ~ .filter-bar [for="nf-booking"] {
  background: var(--violet);
  border-color: var(--violet);
  color: #ffffff;
}

.page-news #nf-version:checked ~ .log-list .log-item:not(.log-item--version),
.page-news #nf-schedule:checked ~ .log-list .log-item:not(.log-item--schedule),
.page-news #nf-transfer:checked ~ .log-list .log-item:not(.log-item--transfer),
.page-news #nf-booking:checked ~ .log-list .log-item:not(.log-item--booking) {
  display: none;
}

.page-news .log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-news .log-item {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(14px, 2.4vw, 20px) clamp(14px, 2.4vw, 22px) clamp(14px, 2.4vw, 20px) clamp(18px, 3vw, 26px);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  background: rgba(14, 23, 48, 0.56);
  overflow: hidden;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.page-news .log-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cat);
}
.page-news .log-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(233, 238, 248, 0.10) 48%, transparent 64%);
  transform: translateX(-115%);
  transition: transform 0.55s var(--ease);
  pointer-events: none;
}
.page-news .log-item:hover {
  background: rgba(27, 30, 74, 0.86);
  border-color: rgba(46, 123, 255, 0.5);
}
.page-news .log-item:hover::after {
  transform: translateX(115%);
}
.page-news .log-item--version { --cat: var(--violet); }
.page-news .log-item--schedule { --cat: var(--blue); }
.page-news .log-item--transfer { --cat: var(--mint); }
.page-news .log-item--booking { --cat: var(--amber); }

.page-news .log-cat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--cat);
}
.page-news .log-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.page-news .log-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mute);
}
.page-news .log-note {
  margin: 2px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
  transition: color 0.2s var(--ease);
}
.page-news .log-item:hover .log-note {
  color: var(--paper);
}
.page-news .log-item--compact {
  padding-top: clamp(11px, 1.8vw, 14px);
  padding-bottom: clamp(11px, 1.8vw, 14px);
  background: rgba(14, 23, 48, 0.34);
}
.page-news .log-item--compact .log-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--mute);
}
.page-news .log-item--compact:hover .log-title {
  color: var(--paper);
}

/* ---------- 人员变动 ---------- */
.page-news .squad-grid {
  display: grid;
  gap: clamp(20px, 3.6vw, 38px);
  margin-top: var(--news-head-gap);
}
.page-news .squad-scope {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-news .squad-scope li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--mute);
}
.page-news .squad-scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mint);
  transform: rotate(45deg);
}
.page-news .squad-scope strong {
  color: var(--paper);
  font-weight: 700;
}
.page-news .squad-link {
  margin: 18px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
}
.page-news .squad-link a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 123, 255, 0.45);
}
.page-news .squad-link a:hover {
  color: var(--mint);
  border-bottom-color: var(--mint);
}
.page-news .squad-figure {
  position: relative;
  margin: 0;
}
.page-news .squad-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--edge);
  object-fit: cover;
}
.page-news .squad-badge {
  position: absolute;
  top: clamp(12px, 2.4vw, 18px);
  right: clamp(12px, 2.4vw, 18px);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(7, 10, 18, 0.86);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
.page-news .squad-figure .media-caption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--mute);
}

/* ---------- 赛季专题 ---------- */
.page-news .series-grid {
  display: grid;
  gap: 14px;
  margin-top: var(--news-head-gap);
}
.page-news .series-card {
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(27, 30, 74, 0.86), rgba(14, 23, 48, 0.86));
  overflow: hidden;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.page-news .series-card:hover {
  border-color: rgba(164, 76, 255, 0.5);
}
.page-news .series-card[open] {
  border-color: rgba(164, 76, 255, 0.65);
  background: linear-gradient(170deg, rgba(27, 30, 74, 0.98), rgba(14, 23, 48, 0.98));
}
.page-news .series-card > summary {
  display: grid;
  gap: 8px;
  padding: clamp(16px, 2.6vw, 22px);
  cursor: pointer;
  list-style: none;
}
.page-news .series-card > summary::-webkit-details-marker {
  display: none;
}
.page-news .series-no {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--violet);
}
.page-news .series-name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--paper);
}
.page-news .series-desc {
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--mute);
}
.page-news .series-body {
  padding: clamp(14px, 2.4vw, 18px) clamp(16px, 2.6vw, 22px) clamp(16px, 2.6vw, 22px);
  border-top: 1px dashed var(--edge);
}
.page-news .series-media {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--edge);
  object-fit: cover;
}
.page-news .series-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.page-news .series-body li {
  position: relative;
  padding-left: 16px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--paper);
}
.page-news .series-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--mint);
  transform: rotate(45deg);
}

/* ---------- 订阅 ---------- */
.page-news .subscribe-panel {
  margin-top: var(--news-head-gap);
  padding: clamp(20px, 3.6vw, 40px);
  border: 1px solid rgba(46, 123, 255, 0.38);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(164, 76, 255, 0.22), transparent 62%),
    linear-gradient(150deg, rgba(14, 23, 48, 0.96), rgba(7, 10, 18, 0.96));
}
.page-news .sub-grid {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-news .sub-block p {
  margin: 0;
  max-width: 32em;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--mute);
}
.page-news .sub-label {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--mint);
}
.page-news .sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px);
}
.page-news .sub-foot {
  margin: 16px 0 0;
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--mute);
}

/* ---------- 响应式 ---------- */
@media (min-width: 600px) {
  .page-news .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-news .log-item {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 18px;
  }
  .page-news .log-note {
    grid-column: 2 / 4;
  }
  .page-news .log-meta {
    justify-self: end;
    white-space: nowrap;
  }
}

@media (min-width: 900px) {
  .page-news .mast-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.82fr);
    align-items: end;
  }
  .page-news .focus-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
  .page-news .squad-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
  .page-news .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-news .sub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .log-item,
  .page-news .log-item::after,
  .page-news .filter-chip,
  .page-news .mast-index a,
  .page-news .series-card {
    transition: none !important;
  }
  .page-news .log-item:hover::after {
    transform: translateX(-115%);
  }
}