.page-news {
  --news-line: rgba(126, 155, 144, 0.26);
  --news-line-strong: rgba(61, 245, 206, 0.3);
  background: var(--ink-night);
  color: var(--white);
  font-family: var(--font-display);
  overflow-x: hidden;
}

/* ============ 首屏 ============ */
.page-news .news-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px) 0 clamp(34px, 6vw, 68px);
}
.page-news .hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-news .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.page-news .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(61, 245, 206, 0.2), transparent 62%),
    linear-gradient(180deg, rgba(4, 26, 21, 0.72) 0%, rgba(4, 26, 21, 0.9) 58%, var(--ink-night) 100%);
}
.page-news .hero-inner {
  position: relative;
  min-width: 0;
}
.page-news .hero-grid {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
}
.page-news .hero-copy {
  margin-top: clamp(22px, 4vw, 40px);
  min-width: 0;
}
.page-news .hero-copy .display {
  margin: 12px 0 18px;
  max-width: 20ch;
  text-wrap: balance;
}
.page-news .hero-copy .lede {
  margin: 0;
  max-width: 56ch;
  color: var(--ice);
}
.page-news .hero-stats {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--news-line-strong);
  min-width: 0;
}
.page-news .hero-stats .stat-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--news-line);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.page-news .hero-stats .stat-label {
  color: var(--mist);
  letter-spacing: 0.06em;
}
.page-news .hero-stats .stat-value {
  color: var(--ice);
  font-weight: 700;
  letter-spacing: 0.04em;
}

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

/* ============ 侧轨 + 主列 ============ */
.page-news .news-shell {
  display: grid;
  gap: clamp(28px, 5vw, 46px);
  padding-top: clamp(30px, 5vw, 56px);
  padding-bottom: clamp(50px, 8vw, 96px);
}
.page-news .news-index {
  min-width: 0;
}
.page-news .index-label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}
.page-news .index-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-news .index-list li {
  flex: 0 0 auto;
}
.page-news .index-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--news-line);
  border-radius: var(--radius-capsule);
  color: var(--ice);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.page-news .index-list a:hover,
.page-news .index-list a:focus-visible {
  border-color: var(--neon);
  background: rgba(61, 245, 206, 0.1);
  color: var(--white);
}
.page-news .idx-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--neon);
}
.page-news .news-main {
  display: grid;
  gap: clamp(38px, 6vw, 68px);
  min-width: 0;
}
.page-news .news-block {
  scroll-margin-top: 96px;
  min-width: 0;
}

@media (min-width: 1000px) {
  .page-news .news-shell {
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-index {
    position: sticky;
    top: 100px;
  }
  .page-news .index-list {
    display: grid;
    gap: 0;
    overflow: visible;
  }
  .page-news .index-list a {
    border: 0;
    border-left: 1px solid var(--news-line);
    border-radius: 0;
    padding: 11px 0 11px 16px;
    white-space: normal;
    font-size: 14.5px;
    color: var(--mist);
  }
  .page-news .index-list a:hover,
  .page-news .index-list a:focus-visible {
    background: none;
    border-left-color: var(--neon);
    color: var(--white);
  }
}

/* ============ 图片容器 ============ */
.page-news .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============ 本周三公告封面卡 ============ */
.page-news .cover-card {
  border: 1px solid var(--news-line-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(61, 245, 206, 0.14), transparent 55%),
    linear-gradient(150deg, var(--ink-deep) 0%, var(--ink-field) 100%);
  box-shadow: var(--shadow-float);
}
.page-news .cover-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px clamp(14px, 3vw, 26px);
  background: var(--track-orange);
  color: #26100a;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-news .cover-grid {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(16px, 3vw, 28px);
}
.page-news .cover-body {
  min-width: 0;
}
.page-news .cover-body .section-title {
  margin: 8px 0 12px;
  font-size: clamp(21px, 3.2vw, 30px);
  line-height: 1.32;
}
.page-news .cover-body > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ice);
}
.page-news .points {
  list-style: none;
  margin: 16px 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-news .points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--white);
}
.page-news .points li::before {
  content: "→";
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--neon);
}

@media (min-width: 800px) {
  .page-news .cover-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: start;
  }
}

/* ============ 区块标题 ============ */
.page-news .block-head {
  max-width: 58ch;
  margin-bottom: clamp(16px, 3vw, 24px);
}
.page-news .block-head .section-title {
  margin: 6px 0 10px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.24;
}
.page-news .block-lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--mist);
}

/* ============ 分类筛选 ============ */
.page-news .filter-switches {
  position: relative;
  margin-bottom: 6px;
}
.page-news .nf-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.page-news .filter-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-news .filter-labels label {
  padding: 7px 15px;
  border: 1px solid var(--news-line);
  border-radius: var(--radius-capsule);
  color: var(--mist);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.page-news .filter-labels label:hover {
  color: var(--white);
  border-color: var(--news-line-strong);
}
.page-news .filter-switches:has(#nf-all:checked) label[for="nf-all"],
.page-news .filter-switches:has(#nf-notice:checked) label[for="nf-notice"],
.page-news .filter-switches:has(#nf-version:checked) label[for="nf-version"],
.page-news .filter-switches:has(#nf-data:checked) label[for="nf-data"],
.page-news .filter-switches:has(#nf-topic:checked) label[for="nf-topic"] {
  background: var(--neon);
  border-color: var(--neon);
  color: #04120e;
  font-weight: 700;
}
.page-news .filter-switches:has(#nf-notice:checked) ~ .news-list > .news-item:not([data-cat="notice"]),
.page-news .filter-switches:has(#nf-version:checked) ~ .news-list > .news-item:not([data-cat="version"]),
.page-news .filter-switches:has(#nf-data:checked) ~ .news-list > .news-item:not([data-cat="data"]),
.page-news .filter-switches:has(#nf-topic:checked) ~ .news-list > .news-item:not([data-cat="topic"]) {
  display: none;
}

/* ============ 条目列表 ============ */
.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-line);
}
.page-news .news-item {
  border-bottom: 1px solid var(--news-line);
}
.page-news .news-item > details > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}
.page-news .news-item > details > summary::-webkit-details-marker {
  display: none;
}
.page-news .news-item > details > summary:hover .item-title {
  color: var(--neon);
}
.page-news .item-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--neon);
  padding-top: 3px;
}
.page-news .item-main {
  min-width: 0;
}
.page-news .item-title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
  transition: color 0.18s ease;
}
.page-news .item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}
.page-news .item-meta .tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.6;
}
.page-news .news-item[data-cat="notice"] .tag { color: var(--track-orange); }
.page-news .news-item[data-cat="version"] .tag { color: var(--ice); }
.page-news .news-item[data-cat="data"] .tag { color: var(--paper); }
.page-news .news-item[data-cat="topic"] .tag { color: var(--neon); }
.page-news .item-meta .data-mono {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}
.page-news .item-toggle {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--news-line-strong);
  border-radius: 50%;
  flex: none;
}
.page-news .item-toggle::before,
.page-news .item-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--neon);
  transform: translate(-50%, -50%);
  transition: transform 0.22s ease;
}
.page-news .item-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.page-news .news-item[open] .item-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.page-news .item-body {
  padding: 0 4px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ice);
}
.page-news .item-body p {
  margin: 0 0 10px;
}
.page-news .item-body p:last-child {
  margin-bottom: 0;
}
.page-news .item-body .media-frame {
  margin-top: 14px;
  max-width: 480px;
}

/* ============ 版本记录 ============ */
.page-news .version-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.page-news .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.page-news .timeline li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 1px solid var(--news-line);
}
.page-news .timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.page-news .timeline li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 4px rgba(61, 245, 206, 0.13);
}
.page-news .tl-year {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--neon);
}
.page-news .timeline h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
.page-news .timeline p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--mist);
}
.page-news .version-figure {
  margin: 0;
  min-width: 0;
}
.page-news .version-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

@media (min-width: 860px) {
  .page-news .version-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

/* ============ 赛季专题 ============ */
.page-news .season-grid {
  display: grid;
  gap: 14px;
}
.page-news .season-card {
  position: relative;
  min-width: 0;
  padding: 22px 18px 22px;
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--print-ink);
  box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.9);
}
.page-news .season-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 44px;
  height: 3px;
  background: var(--track-orange);
}
.page-news .season-no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #5e7a6e;
}
.page-news .season-card h3 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--print-ink);
}
.page-news .season-card p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.7;
  color: #2f443b;
}

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

/* ============ 获取方式 ============ */
.page-news .how-card {
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--news-line-strong);
  border-radius: var(--radius-card);
  background:
    radial-gradient(100% 130% at 100% 0%, rgba(61, 245, 206, 0.16), transparent 58%),
    var(--ink-deep);
}
.page-news .how-card .section-title {
  margin: 6px 0 10px;
  font-size: clamp(22px, 3.2vw, 30px);
}
.page-news .how-card > p {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ice);
}
.page-news .how-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.page-news .how-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}
.page-news .how-step {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--neon);
}
.page-news .how-list h3 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
}
.page-news .how-list h3 a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--news-line-strong);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.page-news .how-list h3 a:hover,
.page-news .how-list h3 a:focus-visible {
  color: var(--neon);
  border-bottom-color: var(--neon);
}
.page-news .how-list p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--mist);
}
.page-news .how-mail {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--mist);
  word-break: break-all;
}
.page-news .how-mail a {
  color: var(--ice);
  text-decoration: none;
  border-bottom: 1px solid var(--news-line-strong);
}
.page-news .how-mail a:hover {
  color: var(--neon);
}

@media (min-width: 720px) {
  .page-news .how-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

/* ============ 合作投稿 ============ */
.page-news .submit-strip {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(255, 107, 42, 0.4);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, rgba(255, 107, 42, 0.14), rgba(4, 26, 21, 0.2) 60%);
}
.page-news .submit-strip .section-title {
  margin: 6px 0 10px;
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.3;
}
.page-news .submit-strip p {
  margin: 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ice);
}
.page-news .submit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 820px) {
  .page-news .submit-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .page-news .submit-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

<main id="main-content" class="page-news">
  <div class="news-hero">
    <div class="hero-media">
      <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="暗调球场看台与灯光光带的抽象背景">
    </div>
    <div class="container hero-inner">
      <nav class="breadcrumb" aria-label="当前位置">
        <ol>
          <li><a href="/">赛场首页</a></li>
          <li aria-current="page">更新前线</li>
        </ol>
      </nav>
      <div class="hero-grid">
        <div class="hero-copy">
          <p class="eyebrow">更新前线 / 每周三交付</p>
          <h1 class="display">周三的更新，落在每一条赛程上</h1>
          <p class="lede">你在赛前十分钟刷新关注列表看到的变化，通常先出现在这里。爱游戏赛事把 46 个联赛与杯赛的赛程节点、阵容提示和界面调整整理成每周一条的体育赛事移动端更新公告，赛季高峰期再追加临时条目。</p>
        </div>
        <div class="hero-stats">
          <div class="stat-line"><span class="stat-label">联赛与杯赛</span><span class="stat-value">46</span></div>
          <div class="stat-line"><span class="stat-label">运动大类</span><span class="stat-value">12</span></div>
          <div class="stat-line"><span class="stat-label">发布节奏</span><span class="stat-value">每周三</span></div>
          <div class="stat-line"><span class="stat-label">内容值守</span><span class="stat-value">7×12 小时</span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="news-shell">
      <aside class="news-index">
        <p class="index-label">目录</p>
        <ol class="index-list">
          <li><a href="#announce"><span class="idx-num">01</span>本周三公告</a></li>
          <li><a href="#latest"><span class="idx-num">02</span>最新条目</a></li>
          <li><a href="#versions"><span class="idx-num">03</span>版本记录</a></li>
          <li><a href="#seasons"><span class="idx-num">04</span>赛季专题</a></li>
          <li><a href="#how"><span class="idx-num">05</span>获取方式</a></li>
          <li><a href="#submit"><span class="idx-num">06</span>合作投稿</a></li>
        </ol>
      </aside>

      <div class="news-main">
        <section id="announce" class="news-block">
          <div class="cover-card">
            <div class="cover-band">
              <span>本周三 · 固定发布</span>
              <span>赛前十分钟提示</span>
            </div>
            <div class="cover-grid">
              <div class="cover-media media-frame media-frame--wide media-frame--cut">
                <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="每周三公告条带与移动端赛事界面的合成图" loading="lazy" decoding="async">
              </div>
              <div class="cover-body">
                <p class="eyebrow">本期头条</p>
                <h2 class="section-title">赛前十分钟，关注列表先替你盯住</h2>
                <p>本期公告围绕关注列表的提示方式做了一次收拢：同一场比赛的多条阵容变化合并成一次提醒，你不用再在开赛前反复来回翻。</p>
                <ul class="points">
                  <li>同一球队的多条变动合并成一条提示，刷新一眼看完。</li>
                  <li>赛前十分钟到开赛之间是更新最密的一段，提示按发生顺序排列。</li>
                  <li>小屏端关注抽屉里直接显示变动标签，点进去才展开完整名单。</li>
                </ul>
                <a class="btn btn-accent" href="/services/">看关注列表怎么用</a>
              </div>
            </div>
          </div>
        </section>

        <section id="latest" class="news-block">
          <div class="block-head">
            <p class="eyebrow">最新条目</p>
            <h2 class="section-title">这一周写下的条目</h2>
            <p class="block-lede">公告、版本、数据校准与赛季观察混排在一起，按发布的先后排列。打开任意一条可以展开具体说明。</p>
          </div>

          <div class="filter-switches">
            <input class="nf-input" type="radio" name="news-filter" id="nf-all" checked>
            <input class="nf-input" type="radio" name="news-filter" id="nf-notice">
            <input class="nf-input" type="radio" name="news-filter" id="nf-version">
            <input class="nf-input" type="radio" name="news-filter" id="nf-data">
            <input class="nf-input" type="radio" name="news-filter" id="nf-topic">
            <div class="filter-labels" role="group" aria-label="按分类筛选条目">
              <label for="nf-all">全部</label>
              <label for="nf-notice">公告</label>
              <label for="nf-version">版本</label>
              <label for="nf-data">数据</label>
              <label for="nf-topic">专题</label>
            </div>
          </div>

          <ol class="news-list">
            <li class="news-item" data-cat="notice">
              <details>
                <summary>
                  <span class="item-num">01</span>
                  <span class="item-main">
                    <span class="item-title">本周三公告：关注列表赛前十分钟提示优化</span>
                    <span class="item-meta"><span class="tag">公告</span><span class="data-mono">本周三</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>开赛前十分钟，关注列表会把同一场比赛的多条阵容变化合并成一条提示，只有在首发或伤停状态出现变更时才单独提醒。</p>
                  <p>你赛前打开关注列表刷新一次，就能看到这场比赛在你关注的全部条目里处于什么状态，不必再逐个联赛点开确认。</p>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="version">
              <details>
                <summary>
                  <span class="item-num">02</span>
                  <span class="item-main">
                    <span class="item-title">V4 内容页联赛标签新增快捷筛选</span>
                    <span class="item-meta"><span class="tag">版本</span><span class="data-mono">新版本发布后</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>内容页顶部的联赛标签现在可以横向滑动切换，最近看过的联赛自动排到前面。从关注列表点进任意一场，页面会落在对应的联赛标签上。</p>
                  <p>同一次更新还调整了阶段信息的层级，小组赛、淘汰赛这样的阶段说明直接写在赛程卡上，不用再点开详情。</p>
                  <div class="media-frame media-frame--square media-frame--cut">
                    <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="V4内容页联赛标签与关注入口的界面细节" loading="lazy" decoding="async">
                  </div>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="data">
              <details>
                <summary>
                  <span class="item-num">03</span>
                  <span class="item-main">
                    <span class="item-title">赛程数据节点校准说明</span>
                    <span class="item-meta"><span class="tag">数据</span><span class="data-mono">上周三</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>足球与篮球两个大类下的部分联赛，开赛时间的更新时间做了统一调整，口径以联赛官方发布为准，校准结果已同步到赛程卡、关注列表和内容页三处展示位置。</p>
                  <p>调整后，赛前十分钟的阵容提示不会因为时间口径不同而出现空窗，比赛日的重点时段另有加密刷新。</p>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="topic">
              <details>
                <summary>
                  <span class="item-num">04</span>
                  <span class="item-main">
                    <span class="item-title">小屏端底部关注抽屉使用技巧</span>
                    <span class="item-meta"><span class="tag">专题</span><span class="data-mono">新版本发布后</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>把屏幕底部的关注抽屉往上带一点，就能看到全部关注条目；长按任意一条可以调整顺序，把常看的联赛放到最前面，赛前打开直接刷第一屏。</p>
                  <p>抽屉里的条目会保存在本机，登录之后可以在换设备时接着看。关注位一共 20 个，留给真正会看的联赛和球队更划算。</p>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="topic">
              <details>
                <summary>
                  <span class="item-num">05</span>
                  <span class="item-main">
                    <span class="item-title">赛季专题：多联赛并行观赛的刷新节奏</span>
                    <span class="item-meta"><span class="tag">专题</span><span class="data-mono">赛季第一阶段</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>赛季第一阶段常出现足球和篮球同晚开赛的情况。把两个联赛各挂两到三支球队，比把整轮联赛全部塞进关注列表更容易在开赛前读完。</p>
                  <p>节奏上建议只守两个时间点：赛前三十分钟看一次对阵和阶段，赛前十分钟再刷新一次阵容变动，中间不必反复打开。</p>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="version">
              <details>
                <summary>
                  <span class="item-num">06</span>
                  <span class="item-main">
                    <span class="item-title">版本记录：关注列表条目管理说明</span>
                    <span class="item-meta"><span class="tag">版本</span><span class="data-mono">新版本发布后</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>添加关注时按联赛和球队两个层级选择，移除条目不会影响已经看过的赛程记录。列表页新增了批量整理入口，赛季结束时清理一次比较省事。</p>
                  <p>单个账号的关注上限仍是 20 个条目，超出时会提示替换，而不是静默丢弃最早添加的那一条。</p>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="notice">
              <details>
                <summary>
                  <span class="item-num">07</span>
                  <span class="item-main">
                    <span class="item-title">公告栏目新增赛季分类标签</span>
                    <span class="item-meta"><span class="tag">公告</span><span class="data-mono">上周三</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>从上周三起，每期公告按赛季阶段归类，赛季专题里的观察文章会归到同一个标签下，翻旧文时不必再从头往下找。</p>
                  <p>标签同时出现在条目列表和内容页里，两处指向同一篇文章，读到一半切换位置也不会丢上下文。</p>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="data">
              <details>
                <summary>
                  <span class="item-num">08</span>
                  <span class="item-main">
                    <span class="item-title">内容页阵容变动提示的显示规则</span>
                    <span class="item-meta"><span class="tag">数据</span><span class="data-mono">本周三</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>阵容变动标签会出现在赛程卡和关注抽屉两处，颜色跟随变动类型变化；点开详情才展开完整的名单与状态说明。</p>
                  <p>赛前十分钟到开赛之间提示最密集，开赛后提示转为归档状态，不再打断你对其他场次的浏览。</p>
                </div>
              </details>
            </li>

            <li class="news-item" data-cat="topic">
              <details>
                <summary>
                  <span class="item-num">09</span>
                  <span class="item-main">
                    <span class="item-title">赛季专题：篮球背靠背赛程的关注设置</span>
                    <span class="item-meta"><span class="tag">专题</span><span class="data-mono">赛前一周</span></span>
                  </span>
                  <span class="item-toggle" aria-hidden="true"></span>
                </summary>
                <div class="item-body">
                  <p>背靠背的第二场往往只隔一天，开赛时间容易记混。按球队而不是按联赛建立关注条目，切换时能直接看到这支队伍连续两场的安排。</p>
                  <p>如果两场都想看，把关注点放在阵容栏而不是比分栏，赛前十分钟刷新一次就够判断这一场值不值得守。</p>
                </div>
              </details>
            </li>
          </ol>
        </section>

        <section id="versions" class="news-block">
          <div class="block-head">
            <p class="eyebrow">版本记录</p>
            <h2 class="section-title">从关注列表到一个抽屉</h2>
            <p class="block-lede">几个关键节点串起来看，能明白今天这套赛前节奏是怎么长出来的。</p>
          </div>
          <div class="version-grid">
            <ol class="timeline">
              <li>
                <span class="tl-year">2021</span>
                <h3>关注列表上线</h3>
                <p>先在足球和篮球两个大类里试点，把“我常看的”和“全部赛程”分开。</p>
              </li>
              <li>
                <span class="tl-year">2022</span>
                <h3>开赛前十分钟阵容提示</h3>
                <p>提示开始跟着比赛时间走，用户赛前刷新一次即可看到阵容变动。</p>
              </li>
              <li>
                <span class="tl-year">2023</span>
                <h3>V4 中文版重构内容页</h3>
                <p>赛事内容页、联赛标签和关注列表入口一起重新梳理，切换联赛更直接。</p>
              </li>
              <li>
                <span class="tl-year">2024</span>
                <h3>小屏端底部关注抽屉</h3>
                <p>关注列表沉到底部抽屉，联赛标签支持快捷切换，单手操作更顺手。</p>
              </li>
              <li>
                <span class="tl-year">本赛季</span>
                <h3>公告按赛季阶段归类</h3>
                <p>每期公告带上赛季标签，赛季专题文章集中归档，回看旧内容有迹可循。</p>
              </li>
            </ol>
            <figure class="version-figure">
              <div class="media-frame media-frame--square media-frame--cut">
                <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛程数据节点、时间轴与联赛分类的暗色信息图" loading="lazy" decoding="async">
              </div>
              <figcaption>赛程节点与联赛分类的整理视图</figcaption>
            </figure>
          </div>
        </section>

        <section id="seasons" class="news-block">
          <div class="block-head">
            <p class="eyebrow">赛季专题</p>
            <h2 class="section-title">不同赛场，不同的守候方式</h2>
            <p class="block-lede">同样是赛前刷新，足球看阵容，网球看时间，赛车看节奏。挑一个你常看的类别，照着调一次关注设置。</p>
          </div>
          <div class="season-grid">
            <article class="season-card">
              <span class="season-no">01 / 足球</span>
              <h3>足球</h3>
              <p>一周双赛很常见。把常看的联赛挂进关注列表，赛前十分钟刷新一次，重点看阵容那一栏的变动标签。</p>
            </article>
            <article class="season-card">
              <span class="season-no">02 / 篮球</span>
              <h3>篮球</h3>
              <p>背靠背赛程时开赛时间只隔一天。关注条目按球队建，比按联赛建更容易看清连续两场的安排。</p>
            </article>
            <article class="season-card">
              <span class="season-no">03 / 网球</span>
              <h3>网球</h3>
              <p>单打场次的预计开赛浮动大。先看赛程卡上的时间，再决定要不要提前五分钟打开关注抽屉。</p>
            </article>
            <article class="season-card">
              <span class="season-no">04 / 赛车</span>
              <h3>赛车</h3>
              <p>排位与正赛之间隔得久。把整场挂进关注列表，中间的安排照常，开赛前回来刷新一次即可。</p>
            </article>
            <article class="season-card">
              <span class="season-no">05 / 电竞</span>
              <h3>电竞</h3>
              <p>临时调整来得快。以每周三公告和赛程节点为准，临开赛再确认一次对阵，避免按旧时间等场。</p>
            </article>
          </div>
        </section>

        <section id="how" class="news-block">
          <div class="how-card">
            <p class="eyebrow">获取方式</p>
            <h2 class="section-title">每周三，见一次面</h2>
            <p>公告固定在每周三发布，赛季高峰期会追加临时公告。想找最近一期，从下面两个位置进去最快。</p>
            <ol class="how-list">
              <li>
                <span class="how-step">A</span>
                <div>
                  <h3><a href="/">首页公告条</a></h3>
                  <p>浮岛右侧的快捷入口直通最近一期，滚动到页面底部也能看到同一条内容。</p>
                </div>
              </li>
              <li>
                <span class="how-step">B</span>
                <div>
                  <h3><a href="/help-center/">帮助中心</a></h3>
                  <p>安装、关注列表设置和公告查看的步骤都收在那里，遇到具体问题先看这里。</p>
                </div>
              </li>
            </ol>
            <p class="how-mail">版本与公告相关的问题可以邮件联系 <a href="mailto:contact@aiyouxi-app-joy.com.cn">contact@aiyouxi-app-joy.com.cn</a>，客服邮箱在工作日 10:00-18:00 内回复。</p>
          </div>
        </section>

        <section id="submit" class="news-block">
          <div class="submit-strip">
            <div>
              <p class="eyebrow">合作投稿</p>
              <h2 class="section-title">贵方的赛事内容，可以进入这条更新流</h2>
              <p>内容机构可以把赛季专题、赛前观察和联赛速览接进来，数据服务方可以对接种类与节点信息。内容运营与数据团队共 68 人，赛事编辑、数据工程和产品体验三个方向一起跟进每一条新内容。</p>
            </div>
            <div class="submit-actions">
              <a class="btn btn-accent" href="/cooperation/">谈内容共建</a>
              <a class="btn btn-ghost" href="/company/">了解内容团队</a>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</main>

.page-news {
  --news-line: rgba(126, 155, 144, 0.26);
  --news-line-strong: rgba(61, 245, 206, 0.3);
  background: var(--ink-night);
  color: var(--white);
  font-family: var(--font-display);
  overflow-x: hidden;
}

/* ============ 首屏 ============ */
.page-news .news-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px) 0 clamp(34px, 6vw, 68px);
}
.page-news .hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-news .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.page-news .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(61, 245, 206, 0.2), transparent 62%),
    linear-gradient(180deg, rgba(4, 26, 21, 0.72) 0%, rgba(4, 26, 21, 0.9) 58%, var(--ink-night) 100%);
}
.page-news .hero-inner {
  position: relative;
  min-width: 0;
}
.page-news .hero-grid {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
}
.page-news .hero-copy {
  margin-top: clamp(22px, 4vw, 40px);
  min-width: 0;
}
.page-news .hero-copy .display {
  margin: 12px 0 18px;
  max-width: 20ch;
  text-wrap: balance;
}
.page-news .hero-copy .lede {
  margin: 0;
  max-width: 56ch;
  color: var(--ice);
}
.page-news .hero-stats {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--news-line-strong);
  min-width: 0;
}
.page-news .hero-stats .stat-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--news-line);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.page-news .hero-stats .stat-label {
  color: var(--mist);
  letter-spacing: 0.06em;
}
.page-news .hero-stats .stat-value {
  color: var(--ice);
  font-weight: 700;
  letter-spacing: 0.04em;
}

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

/* ============ 侧轨 + 主列 ============ */
.page-news .news-shell {
  display: grid;
  gap: clamp(28px, 5vw, 46px);
  padding-top: clamp(30px, 5vw, 56px);
  padding-bottom: clamp(50px, 8vw, 96px);
}
.page-news .news-index {
  min-width: 0;
}
.page-news .index-label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}
.page-news .index-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-news .index-list li {
  flex: 0 0 auto;
}
.page-news .index-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--news-line);
  border-radius: var(--radius-capsule);
  color: var(--ice);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.page-news .index-list a:hover,
.page-news .index-list a:focus-visible {
  border-color: var(--neon);
  background: rgba(61, 245, 206, 0.1);
  color: var(--white);
}
.page-news .idx-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--neon);
}
.page-news .news-main {
  display: grid;
  gap: clamp(38px, 6vw, 68px);
  min-width: 0;
}
.page-news .news-block {
  scroll-margin-top: 96px;
  min-width: 0;
}

@media (min-width: 1000px) {
  .page-news .news-shell {
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-index {
    position: sticky;
    top: 100px;
  }
  .page-news .index-list {
    display: grid;
    gap: 0;
    overflow: visible;
  }
  .page-news .index-list a {
    border: 0;
    border-left: 1px solid var(--news-line);
    border-radius: 0;
    padding: 11px 0 11px 16px;
    white-space: normal;
    font-size: 14.5px;
    color: var(--mist);
  }
  .page-news .index-list a:hover,
  .page-news .index-list a:focus-visible {
    background: none;
    border-left-color: var(--neon);
    color: var(--white);
  }
}

/* ============ 图片容器 ============ */
.page-news .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============ 本周三公告封面卡 ============ */
.page-news .cover-card {
  border: 1px solid var(--news-line-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(61, 245, 206, 0.14), transparent 55%),
    linear-gradient(150deg, var(--ink-deep) 0%, var(--ink-field) 100%);
  box-shadow: var(--shadow-float);
}
.page-news .cover-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px clamp(14px, 3vw, 26px);
  background: var(--track-orange);
  color: #26100a;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-news .cover-grid {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(16px, 3vw, 28px);
}
.page-news .cover-body {
  min-width: 0;
}
.page-news .cover-body .section-title {
  margin: 8px 0 12px;
  font-size: clamp(21px, 3.2vw, 30px);
  line-height: 1.32;
}
.page-news .cover-body > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ice);
}
.page-news .points {
  list-style: none;
  margin: 16px 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-news .points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--white);
}
.page-news .points li::before {
  content: "→";
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--neon);
}

@media (min-width: 800px) {
  .page-news .cover-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: start;
  }
}

/* ============ 区块标题 ============ */
.page-news .block-head {
  max-width: 58ch;
  margin-bottom: clamp(16px, 3vw, 24px);
}
.page-news .block-head .section-title {
  margin: 6px 0 10px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.24;
}
.page-news .block-lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--mist);
}

/* ============ 分类筛选 ============ */
.page-news .filter-switches {
  position: relative;
  margin-bottom: 6px;
}
.page-news .nf-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.page-news .filter-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-news .filter-labels label {
  padding: 7px 15px;
  border: 1px solid var(--news-line);
  border-radius: var(--radius-capsule);
  color: var(--mist);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.page-news .filter-labels label:hover {
  color: var(--white);
  border-color: var(--news-line-strong);
}
.page-news .filter-switches:has(#nf-all:checked) label[for="nf-all"],
.page-news .filter-switches:has(#nf-notice:checked) label[for="nf-notice"],
.page-news .filter-switches:has(#nf-version:checked) label[for="nf-version"],
.page-news .filter-switches:has(#nf-data:checked) label[for="nf-data"],
.page-news .filter-switches:has(#nf-topic:checked) label[for="nf-topic"] {
  background: var(--neon);
  border-color: var(--neon);
  color: #04120e;
  font-weight: 700;
}
.page-news .filter-switches:has(#nf-notice:checked) ~ .news-list > .news-item:not([data-cat="notice"]),
.page-news .filter-switches:has(#nf-version:checked) ~ .news-list > .news-item:not([data-cat="version"]),
.page-news .filter-switches:has(#nf-data:checked) ~ .news-list > .news-item:not([data-cat="data"]),
.page-news .filter-switches:has(#nf-topic:checked) ~ .news-list > .news-item:not([data-cat="topic"]) {
  display: none;
}

/* ============ 条目列表 ============ */
.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-line);
}
.page-news .news-item {
  border-bottom: 1px solid var(--news-line);
}
.page-news .news-item > details > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}
.page-news .news-item > details > summary::-webkit-details-marker {
  display: none;
}
.page-news .news-item > details > summary:hover .item-title {
  color: var(--neon);
}
.page-news .item-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--neon);
  padding-top: 3px;
}
.page-news .item-main {
  min-width: 0;
}
.page-news .item-title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
  transition: color 0.18s ease;
}
.page-news .item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}
.page-news .item-meta .tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.6;
}
.page-news .news-item[data-cat="notice"] .tag { color: var(--track-orange); }
.page-news .news-item[data-cat="version"] .tag { color: var(--ice); }
.page-news .news-item[data-cat="data"] .tag { color: var(--paper); }
.page-news .news-item[data-cat="topic"] .tag { color: var(--neon); }
.page-news .item-meta .data-mono {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}
.page-news .item-toggle {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--news-line-strong);
  border-radius: 50%;
  flex: none;
}
.page-news .item-toggle::before,
.page-news .item-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--neon);
  transform: translate(-50%, -50%);
  transition: transform 0.22s ease;
}
.page-news .item-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.page-news .news-item[open] .item-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.page-news .item-body {
  padding: 0 4px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ice);
}
.page-news .item-body p {
  margin: 0 0 10px;
}
.page-news .item-body p:last-child {
  margin-bottom: 0;
}
.page-news .item-body .media-frame {
  margin-top: 14px;
  max-width: 480px;
}

/* ============ 版本记录 ============ */
.page-news .version-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.page-news .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.page-news .timeline li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 1px solid var(--news-line);
}
.page-news .timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.page-news .timeline li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 4px rgba(61, 245, 206, 0.13);
}
.page-news .tl-year {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--neon);
}
.page-news .timeline h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
.page-news .timeline p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--mist);
}
.page-news .version-figure {
  margin: 0;
  min-width: 0;
}
.page-news .version-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

@media (min-width: 860px) {
  .page-news .version-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

/* ============ 赛季专题 ============ */
.page-news .season-grid {
  display: grid;
  gap: 14px;
}
.page-news .season-card {
  position: relative;
  min-width: 0;
  padding: 22px 18px 22px;
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--print-ink);
  box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.9);
}
.page-news .season-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 44px;
  height: 3px;
  background: var(--track-orange);
}
.page-news .season-no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #5e7a6e;
}
.page-news .season-card h3 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--print-ink);
}
.page-news .season-card p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.7;
  color: #2f443b;
}

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

/* ============ 获取方式 ============ */
.page-news .how-card {
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--news-line-strong);
  border-radius: var(--radius-card);
  background:
    radial-gradient(100% 130% at 100% 0%, rgba(61, 245, 206, 0.16), transparent 58%),
    var(--ink-deep);
}
.page-news .how-card .section-title {
  margin: 6px 0 10px;
  font-size: clamp(22px, 3.2vw, 30px);
}
.page-news .how-card > p {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ice);
}
.page-news .how-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.page-news .how-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}
.page-news .how-step {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--neon);
}
.page-news .how-list h3 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
}
.page-news .how-list h3 a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--news-line-strong);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.page-news .how-list h3 a:hover,
.page-news .how-list h3 a:focus-visible {
  color: var(--neon);
  border-bottom-color: var(--neon);
}
.page-news .how-list p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--mist);
}
.page-news .how-mail {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--mist);
  word-break: break-all;
}
.page-news .how-mail a {
  color: var(--ice);
  text-decoration: none;
  border-bottom: 1px solid var(--news-line-strong);
}
.page-news .how-mail a:hover {
  color: var(--neon);
}

@media (min-width: 720px) {
  .page-news .how-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

/* ============ 合作投稿 ============ */
.page-news .submit-strip {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(255, 107, 42, 0.4);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, rgba(255, 107, 42, 0.14), rgba(4, 26, 21, 0.2) 60%);
}
.page-news .submit-strip .section-title {
  margin: 6px 0 10px;
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.3;
}
.page-news .submit-strip p {
  margin: 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ice);
}
.page-news .submit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 820px) {
  .page-news .submit-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .page-news .submit-actions {
    flex-direction: column;
    align-items: stretch;
  }
}