.page-news {
  --news-radius: 22px;
  --news-gap: clamp(48px, 7vw, 96px);
  display: block;
  padding: 28px 0 88px;
  background: var(--ink);
  color: var(--paper);
  overflow-x: clip;
}

/* ============ 首屏 ============ */
.page-news .news-hero {
  position: relative;
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 96% at 6% -10%, rgba(43, 240, 196, 0.13), transparent 58%),
    radial-gradient(80% 70% at 96% 4%, rgba(255, 122, 31, 0.09), transparent 62%);
}

.page-news .news-hero__inner {
  position: relative;
}

.page-news .news-hero .crumbs {
  margin-bottom: 26px;
}

.page-news .news-hero .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--mute);
}

.page-news .news-hero .crumbs a {
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.page-news .news-hero .crumbs a:hover,
.page-news .news-hero .crumbs a:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-news .news-hero .crumbs li[aria-current="page"] {
  color: var(--paper);
}

.page-news .news-hero .band {
  display: block;
  width: 38%;
  height: 3px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.page-news .news-hero.is-in .band {
  width: 100%;
}

.page-news .news-hero .eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-news .news-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 10vw, 92px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--paper);
}

.page-news .news-hero__lead {
  max-width: 62ch;
  margin: 0 0 34px;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.8;
  color: var(--mute);
}

.page-news .hero-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.page-news .hero-metrics li {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(18, 22, 26, 0.72);
}

.page-news .hero-metrics__num {
  display: block;
  font-family: var(--mono);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cyan);
}

.page-news .hero-metrics__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
}

/* ============ 本期焦点 ============ */
.page-news .news-focus {
  padding: var(--news-gap) 0 0;
}

.page-news .focus-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--news-radius);
  overflow: hidden;
  background: var(--deck);
  transition: border-color 200ms ease;
}

.page-news .focus-card:hover,
.page-news .focus-card:focus-within {
  border-color: var(--cyan);
}

.page-news .focus-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(150deg, #0f2620, #0a1c17);
}

.page-news .focus-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-news .focus-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(147, 166, 160, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 166, 160, 0.12) 1px, transparent 1px);
  background-size: 52px 52px;
}

.page-news .focus-card__cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 28, 23, 0.78);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper);
}

.page-news .focus-card__body {
  padding: clamp(22px, 4vw, 42px);
}

.page-news .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-news .tag-row .tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
  white-space: nowrap;
}

.page-news .tag-row .tag--cyan {
  border-color: rgba(43, 240, 196, 0.5);
  color: var(--cyan);
}

.page-news .tag-row .tag--orange {
  border-color: var(--orange);
  color: var(--orange);
}

.page-news .tag-row .tag--flag {
  border-color: transparent;
  background: var(--flag);
  color: #fff;
}

.page-news .focus-card__body h2 {
  margin: 0 0 16px;
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-news .focus-card__body > p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mute);
}

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

.page-news .focus-points li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .focus-points__k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-news .focus-points__v {
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
}

.page-news .focus-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease;
}

.page-news .btn--primary {
  background: var(--orange);
  color: #1a0d02;
}

.page-news .btn--primary:hover,
.page-news .btn--primary:focus-visible {
  box-shadow: inset 0 0 0 40px rgba(0, 0, 0, 0.14);
}

.page-news .btn--ghost {
  border-color: var(--line);
  color: var(--paper);
}

.page-news .btn--ghost:hover,
.page-news .btn--ghost:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-news .btn--cyan {
  background: var(--cyan);
  color: #041a14;
}

.page-news .btn--cyan:hover,
.page-news .btn--cyan:focus-visible {
  box-shadow: inset 0 0 0 40px rgba(0, 0, 0, 0.14);
}

@media (min-width: 960px) {
  .page-news .focus-card {
    grid-template-columns: 1.12fr 1fr;
  }

  .page-news .focus-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 460px;
  }

  .page-news .focus-points li {
    grid-template-columns: 148px 1fr;
    gap: 18px;
    align-items: baseline;
  }
}

/* ============ 系列通用标题 ============ */
.page-news .news-series {
  padding: var(--news-gap) 0 0;
}

.page-news .news-series--alt {
  margin-top: var(--news-gap);
  padding-top: var(--news-gap);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(90% 60% at 88% 0%, rgba(226, 68, 75, 0.07), transparent 62%);
}

.page-news .series-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: clamp(26px, 4vw, 42px);
}

.page-news .series-head__no {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 700;
  line-height: 0.86;
  color: transparent;
  -webkit-text-stroke: 1px var(--cyan);
  opacity: 0.82;
}

.page-news .series-head__text {
  max-width: 70ch;
}

.page-news .series-head__text h2 {
  margin: 0 0 12px;
  font-size: clamp(23px, 3.6vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-news .series-head__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mute);
}

/* ============ 更新日志式列表 ============ */
.page-news .log-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px;
}

.page-news .log-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--news-radius);
  background: var(--board);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.page-news .log-item:hover,
.page-news .log-item:focus-within {
  border-color: var(--cyan);
}

.page-news .log-item__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--mute);
  transition: color 180ms ease, border-color 180ms ease;
}

.page-news .log-item:hover .log-item__no,
.page-news .log-item:focus-within .log-item__no {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-news .log-item__thumb {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(150deg, #10241e, #0a1c17);
}

.page-news .log-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-news .log-item__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(147, 166, 160, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 166, 160, 0.1) 1px, transparent 1px);
  background-size: 34px 34px;
}

.page-news .log-item__body h3 {
  margin: 0 0 10px;
  font-size: clamp(17px, 2.6vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-news .log-item__body > p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

.page-news .log-item__time {
  display: inline-block;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--orange);
}

.page-news .log-more {
  margin: 0 0 12px;
  border-top: 1px dashed rgba(147, 166, 160, 0.28);
}

.page-news .log-more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--cyan);
}

.page-news .log-more summary::-webkit-details-marker {
  display: none;
}

.page-news .log-more summary::before {
  content: "＋";
  font-family: var(--mono);
  font-size: 13px;
}

.page-news .log-more[open] summary::before {
  content: "－";
}

.page-news .log-more p {
  margin: 0 0 6px;
  padding-left: 2px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

.page-news .log-more summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (min-width: 780px) {
  .page-news .log-list {
    gap: 18px;
  }

  .page-news .log-list::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: linear-gradient(180deg, var(--cyan), var(--line) 34%, rgba(51, 70, 63, 0.25));
    pointer-events: none;
  }

  .page-news .log-item {
    grid-template-columns: 42px 168px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 22px;
  }

  .page-news .log-item__no {
    justify-self: center;
  }

  .page-news .log-item__thumb {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1080px) {
  .page-news .log-item {
    grid-template-columns: 42px 212px minmax(0, 1fr);
    gap: 28px;
    padding: 24px 28px;
  }
}

/* 越往下越紧凑，形成从焦点到档案的递进 */
.page-news .news-series .log-list .log-item:nth-child(n + 3) {
  padding: 16px;
}

.page-news .news-series .log-list .log-item:nth-child(n + 3) .log-item__body h3 {
  font-size: clamp(16px, 2.2vw, 19px);
}

@media (min-width: 780px) {
  .page-news .news-series .log-list .log-item:nth-child(n + 3) {
    grid-template-columns: 42px 132px minmax(0, 1fr);
    padding: 16px 20px;
  }
}

/* ============ 标签导航 ============ */
.page-news .news-tags {
  padding: var(--news-gap) 0 0;
}

.page-news .tag-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 720px) {
  .page-news .tag-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-news .tag-group {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--news-radius);
  background: var(--deck);
  transition: border-color 200ms ease;
}

.page-news .tag-group:hover {
  border-color: rgba(43, 240, 196, 0.55);
}

.page-news .tag-group__title {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--mute);
}

.page-news .tag-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .tag-group__list .tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--paper);
  white-space: nowrap;
}

.page-news .tag-group__list .tag--cyan {
  border-color: rgba(43, 240, 196, 0.5);
  color: var(--cyan);
}

.page-news .tag-group__list .tag--orange {
  border-color: var(--orange);
  color: var(--orange);
}

.page-news .tag-group__list .tag--flag {
  border-color: transparent;
  background: var(--flag);
  color: #fff;
}

.page-news .news-tags__note {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

.page-news .news-tags__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 240, 196, 0.4);
}

.page-news .news-tags__note a:hover,
.page-news .news-tags__note a:focus-visible {
  border-color: var(--cyan);
}

/* ============ 订阅与线索 ============ */
.page-news .news-submit {
  padding: var(--news-gap) 0 0;
}

.page-news .submit-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(140deg, rgba(43, 240, 196, 0.11), transparent 52%),
    var(--deck);
}

@media (min-width: 900px) {
  .page-news .submit-band {
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

.page-news .submit-band__text h2 {
  margin: 0 0 14px;
  font-size: clamp(21px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-news .submit-band__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mute);
}

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

.page-news .submit-band__list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .submit-band__k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-news .submit-band__v {
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper);
}

@media (min-width: 520px) {
  .page-news .submit-band__list li {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
  }
}

/* ============ 回到焦点 ============ */
.page-news .to-focus {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 30;
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--cyan);
  background: rgba(10, 28, 23, 0.9);
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background-color 180ms ease, color 180ms ease;
}

.page-news .to-focus:hover,
.page-news .to-focus:focus-visible {
  background: var(--cyan);
  color: #041a14;
}

/* ============ 焦点态 ============ */
.page-news a:focus-visible,
.page-news summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ============ 减弱动效 ============ */
@media (prefers-reduced-motion: reduce) {
  .page-news .band,
  .page-news .log-item,
  .page-news .log-item__no,
  .page-news .focus-card,
  .page-news .tag-group,
  .page-news .to-focus,
  .page-news .btn {
    transition: none !important;
  }

  .page-news .news-hero .band {
    width: 100%;
  }
}
<<<END>>>

<main id="main-content" class="page-news">
  <section class="news-hero" data-reveal>
    <div class="container news-hero__inner">
      <nav class="crumbs" aria-label="当前位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">赛事专栏</li>
        </ol>
      </nav>
      <span class="band" aria-hidden="true"></span>
      <p class="eyebrow">第 47 轮开赛前 · 专栏更新</p>
      <h1>赛事专栏</h1>
      <p class="news-hero__lead">
        每一轮开赛之前，先把要盯的东西看明白。易倍赛场把轮次观察、对位图解与功能调整记成一条条能顺着往下读的专题——看完再打开数据功能，你会知道这一轮该对比哪组对位、上一轮的名次是怎么挪动的，手边的查询工具这次又多了哪几项。
      </p>
      <ul class="hero-metrics">
        <li>
          <span class="hero-metrics__num">第 47 轮</span>
          <span class="hero-metrics__label">本赛季已锚定轮次</span>
        </li>
        <li>
          <span class="hero-metrics__num">180+</span>
          <span class="hero-metrics__label">累计整理轮次数据</span>
        </li>
        <li>
          <span class="hero-metrics__num">700+</span>
          <span class="hero-metrics__label">热身赛对位记录</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-focus" id="focus" aria-labelledby="focus-title">
    <div class="container">
      <article class="focus-card" data-reveal>
        <figure class="focus-card__media">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间看台灯光与场边线条构成的长幅剪影画面">
          <figcaption class="focus-card__cap">第 47 轮 · 开场阶段的场边视角</figcaption>
        </figure>
        <div class="focus-card__body">
          <div class="tag-row">
            <span class="tag tag--orange">本期焦点</span>
            <span class="tag tag--cyan">第 47 轮</span>
          </div>
          <h2 id="focus-title">第 47 轮早早分段：前二十分钟的推进频率，比比分更值得先看</h2>
          <p>
            这一轮排期挤在一起，几支队伍在上半场的出球方向出现了明显偏向。名次的挪动往往不是从进球那一刻开始的，而是从开场阶段的推进选择开始的。本期把三条线索并在一起看：边路推进的重复次数、中场丢球后的回追长度，以及名次相邻球队在同一时段的处理差别。
          </p>
          <ul class="focus-points">
            <li>
              <span class="focus-points__k">边路重复推进</span>
              <span class="focus-points__v">同一侧连续三次以上的推进，本轮出现频次高于上一轮</span>
            </li>
            <li>
              <span class="focus-points__k">丢球后回追长度</span>
              <span class="focus-points__v">中段球队的回追落点更靠近本方禁区弧顶</span>
            </li>
            <li>
              <span class="focus-points__k">名次相邻对比</span>
              <span class="focus-points__v">积分差在两分以内的两两组合，本轮共有四组</span>
            </li>
          </ul>
          <div class="focus-card__foot">
            <a class="btn btn--primary" href="/product/">打开数据功能</a>
            <a class="btn btn--ghost" href="/faq/">查询口径怎么看</a>
          </div>
        </div>
      </article>
    </div>
  </section>

  <section class="news-series" aria-labelledby="rounds-title">
    <div class="container">
      <header class="series-head">
        <span class="series-head__no" aria-hidden="true">01</span>
        <div class="series-head__text">
          <h2 id="rounds-title">轮次观察系列</h2>
          <p>一轮一篇，从开场的推进节奏写到收尾阶段的换人效果。顺着编号往下读，你能把一支球队整个赛季的走势串起来看。</p>
        </div>
      </header>

      <ol class="log-list">
        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">01</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="轮次刻度与折线构成的抽象图形，荧光青为主色" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">四级联赛</span>
              <span class="tag">积分与名次</span>
            </div>
            <h3>第 47 轮开局：两条边路的推进方向为什么反了过来</h3>
            <p>同一支球队在上一轮反复走左路，这一轮却把重心挪到了右侧。把两次开场的出球点叠起来看，差别比预想的更清楚。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>对照两轮的出球落点分布，左路的热度从中圈附近退到了后场，右侧则向前压过中线。这个变化和对手的中场站位几乎同步发生，说明不是随机选择，而是赛前的针对性安排。文中配了三张叠图，可以逐段比对。</p>
            </details>
            <p class="log-item__time">上一轮校准完成后</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">02</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="纵向排列的刻度点阵与缓慢上扬的数据折线" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">四级联赛</span>
              <span class="tag">名次变化</span>
            </div>
            <h3>第 46 轮回看：中段换人之后，积分榜中段挪了几格</h3>
            <p>中段球队的排名挤压得最紧。一次换人时间点的前后差异，足以让三支球队在一轮之内换位。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>把第 46 轮参与中段争夺的六支球队按换人时点排序，换人越早的一方，后半段的控球时间越长，名次上升的概率也更高。文中给出了名次回算的每一步，方便你自己核对。</p>
            </details>
            <p class="log-item__time">第 46 轮校准完成后</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">03</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="三组并排的窄幅柱状刻度，呈现分差收敛趋势" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">四级联赛</span>
              <span class="tag">对抗明细</span>
            </div>
            <h3>第 45 轮：连续三场一球分差，最后十五分钟发生了什么</h3>
            <p>三场比赛的分差都停在一球。真正拉开差距的不是进攻效率，而是最后阶段的防守站位选择。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>三场的最后十五分钟里，领先一方的防线整体后撤了大约一个身位，越位次数随之上升。落后者则把射门分布收窄到了禁区正面。文末附了一张区域对比图，标出了三条最容易被打穿的通道。</p>
            </details>
            <p class="log-item__time">第 45 轮归档后</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">04</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="按时间轴分段的折线阶梯图，后半段明显下沉" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">四级联赛</span>
              <span class="tag">时段分布</span>
            </div>
            <h3>第 44 轮：名次靠后的球队在哪个时段最容易丢分</h3>
            <p>把整轮比赛的失球按分钟切段之后，一个集中的时间段浮了出来——它和体能曲线并不完全吻合。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>名次靠后的球队在开场后二十分钟与终场前十分钟的失球比例明显偏高，中间时段反而相对稳定。这说明问题更多出在开局的组织与收尾的注意力上，而不是整场的体能分配。</p>
            </details>
            <p class="log-item__time">第 44 轮数据复核发布后</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-series news-series--alt" aria-labelledby="matchups-title">
    <div class="container">
      <header class="series-head">
        <span class="series-head__no" aria-hidden="true">02</span>
        <div class="series-head__text">
          <h2 id="matchups-title">对位解析系列</h2>
          <p>用对位关系图把一场比赛拆成几组关键对抗。联赛与热身赛都在这里，每场热身赛的完整对位关系由正式版友谊赛安排站点逐场串联，可以按赛事级别、日期和参赛球队三个维度筛出你要找的那一场。</p>
        </div>
      </header>

      <ol class="log-list">
        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">01</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="两组节点通过细线相连的对位关系图局部特写" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--orange">对位关系图</span>
              <span class="tag">边路</span>
            </div>
            <h3>边路对位图谱：两组节点的连线密度对比</h3>
            <p>同一条边路上，攻守双方的节点数量并不对称。连线的疏密，直接决定了这一侧能不能把球送到前场。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>图谱把边路区域切成六个纵向区段，每个区段标出双方节点的接触次数。密集区段往往意味着反复争夺，稀疏区段则说明一方已经完成了摆脱。对照着看，比单看传球成功率更直观。</p>
            </details>
            <p class="log-item__time">第 47 轮开赛前</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">02</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="深墨绿背景上多层分区连线构成的热身赛对位结构图" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--orange">对位关系图</span>
              <span class="tag tag--flag">热身赛</span>
            </div>
            <h3>热身赛对位关系：按赛事级别拆开的三层结构</h3>
            <p>热身赛的对位安排常常混在一起看，按级别拆开之后，每支球队的试阵思路反而清楚了。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>把同一支球队在这个阶段参加的热身赛按赛事级别分成三层，可以看到它面对不同强度的对手时，前后场的站位习惯并不一致。这一点在正式比赛里往往会收敛，但准备期的意图很明显。</p>
            </details>
            <p class="log-item__time">上一轮校准完成后</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">03</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="中场区域的跑动轨迹叠加图，线条纤细交织" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--orange">跑动轨迹</span>
              <span class="tag">中场</span>
            </div>
            <h3>中场区域的换位覆盖：空当是怎么被让出来的</h3>
            <p>两名球员同时向一侧移动，另一侧就空了出来。这种空当不是失误，而是换位时没有衔接上。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>把中场四名球员的跑动轨迹叠在同一张图上，能清楚看到重叠与缺口。缺口出现后的几秒内，对手的推进成功率明显提高。文中标出了三处最典型的缺口位置。</p>
            </details>
            <p class="log-item__time">第 46 轮校准完成后</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">04</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="禁区前定位球热区高亮与落点分布的抽象示意图" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--orange">对抗热区图</span>
              <span class="tag">定位球</span>
            </div>
            <h3>定位球站位：热区高亮与第二落点分布</h3>
            <p>第一落点争顶成功不等于威胁形成，真正决定结果的是第二落点被谁捡到。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>热区图显示，多数定位球的第一落点集中在点球点两侧。但第二落点的分布要散得多，且与防守方的解围方向高度相关。把这个方向当作预测线索，比只看争顶成功率更有用。</p>
            </details>
            <p class="log-item__time">第 46 轮开赛前</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-series" aria-labelledby="updates-title">
    <div class="container">
      <header class="series-head">
        <span class="series-head__no" aria-hidden="true">03</span>
        <div class="series-head__text">
          <h2 id="updates-title">平台功能与字段说明</h2>
          <p>每次字段扩充、可视化组件上线或校准流程调整，都会在这里说明它改了什么、对你查数据有什么影响。四个赛季以来，积分走势图、对抗热区图与对位关系图三类组件都是按这个节奏陆续上线的。</p>
        </div>
      </header>

      <ol class="log-list">
        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">01</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="层叠面板组件的抽象示意，荧光青描边勾勒模块边界" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">可视化组件</span>
              <span class="tag">对抗明细</span>
            </div>
            <h3>对抗热区图新增半场切分，主客队可选单看</h3>
            <p>整场的热区分布会掩盖上下半场的差别。切分之后，你能立刻看出哪一方在下半场把重心压了上去。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>热区图现在支持按半场切换，也可以选择只显示其中一方的活动区域。这个改动对分析换人效果的帮助最直接——把上下半场的图叠起来，变化的位置一目了然。</p>
            </details>
            <p class="log-item__time">本赛季第 47 轮上线</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">02</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="按日期分组排列的赛程面板抽象图，模块边界清晰" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">查询视图</span>
              <span class="tag">比赛日</span>
            </div>
            <h3>赛程模块新增按比赛日聚合视图</h3>
            <p>习惯在上海看球的朋友最常问的是同一天有几场可以看。新的聚合视图把当日多场比赛排在同一屏，不必再一场场点开对照。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>聚合视图按开球时间纵向排列当日的全部比赛，同时显示轮次编号、对阵双方与场地。把同一时段的几场放在一起，安排当天的看球顺序会容易很多。切换回单场视图的方式没有变。</p>
            </details>
            <p class="log-item__time">第 46 轮校准后上线</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">03</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="表格列结构与导出流程的抽象示意图，荧光青描边" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">导出</span>
              <span class="tag">字段顺序</span>
            </div>
            <h3>表格导出支持 XLSX，导出前可自选字段顺序</h3>
            <p>做本地分析的人不需要全部字段。现在导出前可以先把列的顺序调成自己的习惯，存下来的文件打开就能直接用。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>导出格式包含 CSV 与 XLSX 两种，字段勾选与排序都在导出面板里完成。名次、胜平负与积分变化这几列默认排在最前，其余字段可以按需要增减。</p>
            </details>
            <p class="log-item__time">上一轮校准完成后</p>
          </div>
        </li>

        <li class="log-item" data-reveal>
          <span class="log-item__no" aria-hidden="true">04</span>
          <figure class="log-item__thumb">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="提醒订阅与轮次节点的连线网络抽象图" loading="lazy" decoding="async">
          </figure>
          <div class="log-item__body">
            <div class="tag-row">
              <span class="tag tag--cyan">提醒</span>
              <span class="tag">轮次变更</span>
            </div>
            <h3>轮次变更提醒可按球队订阅，改期当场推送</h3>
            <p>主哨安排确认之后如果开球时间有调整，订阅了这支球队的提醒会立刻收到，不用等到比赛日当天才发现。</p>
            <details class="log-more">
              <summary>展开全文预览</summary>
              <p>订阅按球队维度设置，也可以只订某一个轮次区间。提醒触发的时间点定在主哨安排确认、对位关系核验完成之后，避免推送后又发生变动。</p>
            </details>
            <p class="log-item__time">第 45 轮校准完成后</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-tags" aria-labelledby="tags-title">
    <div class="container">
      <header class="series-head">
        <span class="series-head__no" aria-hidden="true">04</span>
        <div class="series-head__text">
          <h2 id="tags-title">按专题找内容</h2>
          <p>专栏条目按联赛级别、数据维度和使用场景做了标记。想快速找到跟自己相关的那一类，从下面几组标签入手最快。</p>
        </div>
      </header>

      <div class="tag-groups">
        <div class="tag-group">
          <h3 class="tag-group__title">按联赛级别</h3>
          <ul class="tag-group__list">
            <li><span class="tag tag--cyan">四级联赛</span></li>
            <li><span class="tag tag--orange">正式版友谊赛</span></li>
            <li><span class="tag tag--flag">热身赛</span></li>
          </ul>
        </div>
        <div class="tag-group">
          <h3 class="tag-group__title">按数据维度</h3>
          <ul class="tag-group__list">
            <li><span class="tag">积分与名次</span></li>
            <li><span class="tag">对抗明细</span></li>
            <li><span class="tag">对位关系</span></li>
            <li><span class="tag">可视化组件</span></li>
          </ul>
        </div>
        <div class="tag-group">
          <h3 class="tag-group__title">按使用场景</h3>
          <ul class="tag-group__list">
            <li><span class="tag">比赛日排期</span></li>
            <li><span class="tag">成都球队走势</span></li>
            <li><span class="tag">客场行程比对</span></li>
            <li><span class="tag">数据纠错</span></li>
          </ul>
        </div>
      </div>

      <p class="news-tags__note">
        想按球队或轮次直接查，可以去<a href="/product/">数据功能</a>；想知道名次和积分是怎么算出来的，<a href="/faq/">常见问题</a>里写得更细。
      </p>
    </div>
  </section>

  <section class="news-submit" aria-labelledby="submit-title">
    <div class="container">
      <div class="submit-band" data-reveal>
        <div class="submit-band__text">
          <h2 id="submit-title">更新提醒与线索提交</h2>
          <p>
            轮次变更提醒会在主哨安排确认、对位关系核验完成之后发出，订阅之后不用每天自己盯。手上如果有赛程线索、热身赛对位信息，或者发现某一场的数据对不上，也可以直接提交过来——我们按线索提交、复核、修订标注三步处理，修订结果会标在对应轮次的条目上。
          </p>
        </div>
        <div class="submit-band__side">
          <ul class="submit-band__list">
            <li><span class="submit-band__k">更新提醒</span><span class="submit-band__v">按球队或轮次区间订阅</span></li>
            <li><span class="submit-band__k">赛程线索</span><span class="submit-band__v">改期、场地变更、补赛安排</span></li>
            <li><span class="submit-band__k">数据纠错</span><span class="submit-band__v">名次、比分、裁判安排与对抗字段</span></li>
          </ul>
          <a class="btn btn--cyan" href="/inquiry/">去联系页提交</a>
        </div>
      </div>
    </div>
  </section>

  <a class="to-focus" href="#focus">回到本期焦点</a>
</main>

.page-news {
  --news-radius: 22px;
  --news-gap: clamp(48px, 7vw, 96px);
  display: block;
  padding: 28px 0 88px;
  background: var(--ink);
  color: var(--paper);
  overflow-x: clip;
}

/* ============ 首屏 ============ */
.page-news .news-hero {
  position: relative;
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 96% at 6% -10%, rgba(43, 240, 196, 0.13), transparent 58%),
    radial-gradient(80% 70% at 96% 4%, rgba(255, 122, 31, 0.09), transparent 62%);
}

.page-news .news-hero__inner {
  position: relative;
}

.page-news .news-hero .crumbs {
  margin-bottom: 26px;
}

.page-news .news-hero .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--mute);
}

.page-news .news-hero .crumbs a {
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.page-news .news-hero .crumbs a:hover,
.page-news .news-hero .crumbs a:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-news .news-hero .crumbs li[aria-current="page"] {
  color: var(--paper);
}

.page-news .news-hero .band {
  display: block;
  width: 38%;
  height: 3px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.page-news .news-hero.is-in .band {
  width: 100%;
}

.page-news .news-hero .eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-news .news-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 10vw, 92px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--paper);
}

.page-news .news-hero__lead {
  max-width: 62ch;
  margin: 0 0 34px;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.8;
  color: var(--mute);
}

.page-news .hero-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.page-news .hero-metrics li {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(18, 22, 26, 0.72);
}

.page-news .hero-metrics__num {
  display: block;
  font-family: var(--mono);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cyan);
}

.page-news .hero-metrics__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
}

/* ============ 本期焦点 ============ */
.page-news .news-focus {
  padding: var(--news-gap) 0 0;
}

.page-news .focus-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--news-radius);
  overflow: hidden;
  background: var(--deck);
  transition: border-color 200ms ease;
}

.page-news .focus-card:hover,
.page-news .focus-card:focus-within {
  border-color: var(--cyan);
}

.page-news .focus-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(150deg, #0f2620, #0a1c17);
}

.page-news .focus-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-news .focus-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(147, 166, 160, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 166, 160, 0.12) 1px, transparent 1px);
  background-size: 52px 52px;
}

.page-news .focus-card__cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 28, 23, 0.78);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper);
}

.page-news .focus-card__body {
  padding: clamp(22px, 4vw, 42px);
}

.page-news .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-news .tag-row .tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
  white-space: nowrap;
}

.page-news .tag-row .tag--cyan {
  border-color: rgba(43, 240, 196, 0.5);
  color: var(--cyan);
}

.page-news .tag-row .tag--orange {
  border-color: var(--orange);
  color: var(--orange);
}

.page-news .tag-row .tag--flag {
  border-color: transparent;
  background: var(--flag);
  color: #fff;
}

.page-news .focus-card__body h2 {
  margin: 0 0 16px;
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-news .focus-card__body > p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mute);
}

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

.page-news .focus-points li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .focus-points__k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-news .focus-points__v {
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
}

.page-news .focus-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease;
}

.page-news .btn--primary {
  background: var(--orange);
  color: #1a0d02;
}

.page-news .btn--primary:hover,
.page-news .btn--primary:focus-visible {
  box-shadow: inset 0 0 0 40px rgba(0, 0, 0, 0.14);
}

.page-news .btn--ghost {
  border-color: var(--line);
  color: var(--paper);
}

.page-news .btn--ghost:hover,
.page-news .btn--ghost:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-news .btn--cyan {
  background: var(--cyan);
  color: #041a14;
}

.page-news .btn--cyan:hover,
.page-news .btn--cyan:focus-visible {
  box-shadow: inset 0 0 0 40px rgba(0, 0, 0, 0.14);
}

@media (min-width: 960px) {
  .page-news .focus-card {
    grid-template-columns: 1.12fr 1fr;
  }

  .page-news .focus-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 460px;
  }

  .page-news .focus-points li {
    grid-template-columns: 148px 1fr;
    gap: 18px;
    align-items: baseline;
  }
}

/* ============ 系列通用标题 ============ */
.page-news .news-series {
  padding: var(--news-gap) 0 0;
}

.page-news .news-series--alt {
  margin-top: var(--news-gap);
  padding-top: var(--news-gap);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(90% 60% at 88% 0%, rgba(226, 68, 75, 0.07), transparent 62%);
}

.page-news .series-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: clamp(26px, 4vw, 42px);
}

.page-news .series-head__no {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 700;
  line-height: 0.86;
  color: transparent;
  -webkit-text-stroke: 1px var(--cyan);
  opacity: 0.82;
}

.page-news .series-head__text {
  max-width: 70ch;
}

.page-news .series-head__text h2 {
  margin: 0 0 12px;
  font-size: clamp(23px, 3.6vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-news .series-head__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mute);
}

/* ============ 更新日志式列表 ============ */
.page-news .log-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px;
}

.page-news .log-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--news-radius);
  background: var(--board);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.page-news .log-item:hover,
.page-news .log-item:focus-within {
  border-color: var(--cyan);
}

.page-news .log-item__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--mute);
  transition: color 180ms ease, border-color 180ms ease;
}

.page-news .log-item:hover .log-item__no,
.page-news .log-item:focus-within .log-item__no {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-news .log-item__thumb {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(150deg, #10241e, #0a1c17);
}

.page-news .log-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-news .log-item__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(147, 166, 160, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 166, 160, 0.1) 1px, transparent 1px);
  background-size: 34px 34px;
}

.page-news .log-item__body h3 {
  margin: 0 0 10px;
  font-size: clamp(17px, 2.6vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-news .log-item__body > p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

.page-news .log-item__time {
  display: inline-block;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--orange);
}

.page-news .log-more {
  margin: 0 0 12px;
  border-top: 1px dashed rgba(147, 166, 160, 0.28);
}

.page-news .log-more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--cyan);
}

.page-news .log-more summary::-webkit-details-marker {
  display: none;
}

.page-news .log-more summary::before {
  content: "＋";
  font-family: var(--mono);
  font-size: 13px;
}

.page-news .log-more[open] summary::before {
  content: "－";
}

.page-news .log-more p {
  margin: 0 0 6px;
  padding-left: 2px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

.page-news .log-more summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (min-width: 780px) {
  .page-news .log-list {
    gap: 18px;
  }

  .page-news .log-list::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: linear-gradient(180deg, var(--cyan), var(--line) 34%, rgba(51, 70, 63, 0.25));
    pointer-events: none;
  }

  .page-news .log-item {
    grid-template-columns: 42px 168px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 22px;
  }

  .page-news .log-item__no {
    justify-self: center;
  }

  .page-news .log-item__thumb {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1080px) {
  .page-news .log-item {
    grid-template-columns: 42px 212px minmax(0, 1fr);
    gap: 28px;
    padding: 24px 28px;
  }
}

/* 越往下越紧凑，形成从焦点到档案的递进 */
.page-news .news-series .log-list .log-item:nth-child(n + 3) {
  padding: 16px;
}

.page-news .news-series .log-list .log-item:nth-child(n + 3) .log-item__body h3 {
  font-size: clamp(16px, 2.2vw, 19px);
}

@media (min-width: 780px) {
  .page-news .news-series .log-list .log-item:nth-child(n + 3) {
    grid-template-columns: 42px 132px minmax(0, 1fr);
    padding: 16px 20px;
  }
}

/* ============ 标签导航 ============ */
.page-news .news-tags {
  padding: var(--news-gap) 0 0;
}

.page-news .tag-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 720px) {
  .page-news .tag-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-news .tag-group {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--news-radius);
  background: var(--deck);
  transition: border-color 200ms ease;
}

.page-news .tag-group:hover {
  border-color: rgba(43, 240, 196, 0.55);
}

.page-news .tag-group__title {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--mute);
}

.page-news .tag-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .tag-group__list .tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--paper);
  white-space: nowrap;
}

.page-news .tag-group__list .tag--cyan {
  border-color: rgba(43, 240, 196, 0.5);
  color: var(--cyan);
}

.page-news .tag-group__list .tag--orange {
  border-color: var(--orange);
  color: var(--orange);
}

.page-news .tag-group__list .tag--flag {
  border-color: transparent;
  background: var(--flag);
  color: #fff;
}

.page-news .news-tags__note {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute);
}

.page-news .news-tags__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 240, 196, 0.4);
}

.page-news .news-tags__note a:hover,
.page-news .news-tags__note a:focus-visible {
  border-color: var(--cyan);
}

/* ============ 订阅与线索 ============ */
.page-news .news-submit {
  padding: var(--news-gap) 0 0;
}

.page-news .submit-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(140deg, rgba(43, 240, 196, 0.11), transparent 52%),
    var(--deck);
}

@media (min-width: 900px) {
  .page-news .submit-band {
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

.page-news .submit-band__text h2 {
  margin: 0 0 14px;
  font-size: clamp(21px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-news .submit-band__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mute);
}

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

.page-news .submit-band__list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .submit-band__k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-news .submit-band__v {
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper);
}

@media (min-width: 520px) {
  .page-news .submit-band__list li {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
  }
}

/* ============ 回到焦点 ============ */
.page-news .to-focus {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 30;
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--cyan);
  background: rgba(10, 28, 23, 0.9);
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background-color 180ms ease, color 180ms ease;
}

.page-news .to-focus:hover,
.page-news .to-focus:focus-visible {
  background: var(--cyan);
  color: #041a14;
}

/* ============ 焦点态 ============ */
.page-news a:focus-visible,
.page-news summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ============ 减弱动效 ============ */
@media (prefers-reduced-motion: reduce) {
  .page-news .band,
  .page-news .log-item,
  .page-news .log-item__no,
  .page-news .focus-card,
  .page-news .tag-group,
  .page-news .to-focus,
  .page-news .btn {
    transition: none !important;
  }

  .page-news .news-hero .band {
    width: 100%;
  }
}
<<<END>>>