.page-news {
  --news-soft: rgba(7, 26, 20, .70);
  --news-hair: rgba(7, 26, 20, .13);
  background: var(--stand);
  color: var(--ink);
  font-family: var(--font-body);
}

/* 面包屑 */
.page-news .breadcrumb {
  background: var(--green);
  padding: 16px var(--pad-x) 0;
}
.page-news .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.page-news .breadcrumb__link {
  color: rgba(247, 243, 236, .72);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.page-news .breadcrumb__link:hover,
.page-news .breadcrumb__link:focus-visible {
  color: var(--gold);
}
.page-news .breadcrumb__sep { color: rgba(247, 243, 236, .40); }
.page-news .breadcrumb__item[aria-current] span { color: var(--stand); }

/* 报头 */
.page-news .news-mast {
  position: relative;
  overflow: hidden;
  background: var(--green);
  color: var(--stand);
  padding: clamp(22px, 4.5vw, 44px) var(--pad-x) clamp(30px, 5vw, 58px);
}
.page-news .news-mast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 253, 247, .07) 0 6px, transparent 6px 20px);
  pointer-events: none;
}
.page-news .news-mast::after {
  content: "";
  position: absolute;
  top: -24%;
  right: -18%;
  width: 44%;
  height: 150%;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 58%, rgba(122, 22, 32, 0) 100%);
  transform: skewX(-8deg);
  opacity: .9;
  pointer-events: none;
}
.page-news .news-mast__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto;
}
.page-news .news-mast__kicker {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.page-news .news-mast__title {
  margin: 12px 0 clamp(20px, 3vw, 30px);
  font-family: var(--font-display);
  font-size: clamp(56px, 15vw, 168px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: .01em;
  color: var(--ivory);
}
.page-news .news-mast__foot {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
}
.page-news .news-mast__lede {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: rgba(247, 243, 236, .84);
}
.page-news .news-mast__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid rgba(247, 243, 236, .26);
}
.page-news .news-mast__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.page-news .news-mast__num {
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
}
.page-news .news-mast__lbl {
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(247, 243, 236, .70);
}

/* 三列骨架 */
.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px) var(--pad-x) clamp(48px, 6vw, 88px);
}
.page-news .news-main { min-width: 0; }

/* 目录 */
.page-news .news-index { min-width: 0; }
.page-news .news-index__title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(7, 26, 20, .55);
}
.page-news .news-index__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-news .news-index__list li { flex: 0 0 auto; }
.page-news .news-index__list a {
  display: block;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
  line-height: 24px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-news .news-index__list a:hover,
.page-news .news-index__list a:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--ivory);
}

/* 章节通用 */
.page-news .news-sec {
  margin-bottom: clamp(42px, 6vw, 76px);
  scroll-margin-top: 24px;
}
.page-news .news-sec:last-of-type { margin-bottom: 0; }
.page-news .section-title {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: .01em;
  margin: 6px 0 10px;
}
.page-news .section-note { color: var(--news-soft); }

/* 分类筛选 */
.page-news .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
}
.page-news .chips__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-news .chips__label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-news .chips__label:hover { border-color: var(--red); color: var(--red); }
.page-news .chips__input:checked + .chips__label {
  background: var(--red);
  border-color: var(--red);
  color: var(--ivory);
}
.page-news .chips__input:focus-visible + .chips__label {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 前端分类过滤 */
.page-news .cat-filter:has(#cat-jijin:checked) .feed__item:not([data-cat="jijin"]),
.page-news .cat-filter:has(#cat-data:checked) .feed__item:not([data-cat="data"]),
.page-news .cat-filter:has(#cat-rules:checked) .feed__item:not([data-cat="rules"]),
.page-news .cat-filter:has(#cat-comm:checked) .feed__item:not([data-cat="comm"]) {
  display: none;
}

/* 文章列表 */
.page-news .feed {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--red);
}
.page-news .feed__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-bottom: 1px solid var(--news-hair);
}
.page-news .feed__item::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  background: repeating-linear-gradient(90deg, rgba(215, 25, 32, .10) 0 6px, transparent 6px 18px);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
  z-index: 0;
}
.page-news .feed__item:hover::before { opacity: 1; transform: translateX(0); }
.page-news .feed__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.page-news .feed__media {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.page-news .feed__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 220ms var(--ease);
}
.page-news .feed__media:hover img { transform: scale(1.04); }
.page-news .feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.page-news .feed__meta .idx { color: rgba(7, 26, 20, .52); }
.page-news .feed__title {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.3vw, 25px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -.01em;
  transition: color var(--dur) var(--ease);
}
.page-news .feed__item:hover .feed__title { color: var(--red); }
.page-news .feed__text {
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--news-soft);
}
.page-news .feed__more {
  display: inline-block;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease);
}
.page-news .feed__more:hover,
.page-news .feed__more:focus-visible { color: var(--wine); }

/* 数据观察 */
.page-news .obs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.page-news .obs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  border-top: 3px solid var(--indigo);
}
.page-news .obs--net { border-top-color: var(--red); }
.page-news .obs--run { border-top-color: var(--indigo); }
.page-news .obs--shot { border-top-color: var(--gold); }
.page-news .obs h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .02em;
}
.page-news .obs p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--news-soft);
}
.page-news .obs-chart { display: block; width: 100%; height: auto; }
.page-news .obs-chart__edge line { stroke: var(--indigo); stroke-width: 1.2; opacity: .45; }
.page-news .obs-chart__node circle { fill: var(--red); }
.page-news .obs-chart__axis { stroke: var(--lime); stroke-width: 1; }
.page-news .obs-chart__line {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.page-news .obs-chart__line--red { stroke: var(--red); }
.page-news .obs-chart__frame { fill: none; stroke: var(--green); stroke-width: 2; }
.page-news .obs-chart__dot { fill: var(--indigo); opacity: .7; }
.page-news .obs-chart__dot--hot { fill: var(--gold); opacity: 1; }

.page-news .obs-figure { margin: 18px 0 0; }
.page-news .obs-figure img { display: block; width: 100%; height: auto; object-fit: cover; }

.page-news .obs-cta {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  background: rgba(255, 253, 247, .62);
  border-left: 4px solid var(--indigo);
}
.page-news .obs-cta p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--news-soft);
}
.page-news .obs-cta .btn { justify-self: start; }

/* 规则版本 */
.page-news .rules-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.page-news .ver-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}
.page-news .ver {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
}
.page-news .ver--current {
  border-color: rgba(245, 197, 66, .9);
  box-shadow: inset 4px 0 0 var(--gold);
  background: var(--ivory);
}
.page-news .ver__badge {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--green);
}
.page-news .ver--current .ver__badge { color: var(--red); }
.page-news .ver__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}
.page-news .ver__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--news-soft);
}
.page-news .ver__list li { margin-bottom: 4px; }
.page-news .ver__list li::marker { color: var(--red); }
.page-news .rules-figure { margin: 0; }
.page-news .rules-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.page-news .rules-cta { margin: 18px 0 0; }
.page-news .rules-cta .btn { justify-self: start; }

/* 社群与活动 */
.page-news .comm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.page-news .comm-figure { margin: 0; }
.page-news .comm-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.page-news .comm-body {
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-news .comm-item {
  padding: 14px 16px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  border-left: 3px solid var(--wine);
}
.page-news .comm-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.page-news .comm-item__meta .idx { color: rgba(7, 26, 20, .52); }
.page-news .comm-item h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.42;
}
.page-news .comm-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.74;
  color: var(--news-soft);
}
.page-news .comm-cta { margin: 2px 0 0; }

/* 订阅与投稿 */
.page-news .subscribe {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 38px);
  background: var(--green-deep);
  color: var(--stand);
}
.page-news .subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, rgba(215, 25, 32, .22) 0 10px, transparent 10px 34px);
  pointer-events: none;
}
.page-news .subscribe > * { position: relative; z-index: 1; }
.page-news .subscribe__head .section-title { color: var(--ivory); }
.page-news .subscribe__head .section-note { color: rgba(247, 243, 236, .76); }
.page-news .subscribe__head .section-kicker { color: var(--gold); }
.page-news .subscribe__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.page-news .subscribe__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: rgba(255, 253, 247, .07);
  border: 1px solid rgba(247, 243, 236, .22);
}
.page-news .subscribe__card h3 {
  margin: 0;
  font-size: 17px;
  color: var(--ivory);
}
.page-news .subscribe__card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.76;
  color: rgba(247, 243, 236, .80);
}
.page-news .subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}
.page-news .subscribe__card .btn { align-self: flex-start; }
.page-news .subscribe__copy { color: var(--stand); border-color: rgba(247, 243, 236, .5); }
.page-news .subscribe__copy:hover,
.page-news .subscribe__copy:focus-visible { border-color: var(--gold); color: var(--gold); }
.page-news .subscribe__copy[data-copied] { border-color: var(--ok); color: var(--ok); }

/* 旁注列 */
.page-news .news-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.page-news .aside-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
}
.page-news .aside-card--glass {
  background: rgba(255, 253, 247, .64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: rgba(11, 61, 46, .18);
}
.page-news .aside-card--dark {
  background: var(--green);
  color: var(--stand);
  border-color: transparent;
}
.page-news .aside-card .idx { color: rgba(7, 26, 20, .52); }
.page-news .aside-card--dark .idx { color: var(--gold); }
.page-news .aside-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--news-soft);
}
.page-news .aside-card--glass p { color: rgba(7, 26, 20, .76); }
.page-news .aside-stats {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .aside-stats li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--news-hair);
}
.page-news .aside-stats li:last-child { border-bottom: 0; padding-bottom: 0; }
.page-news .aside-stats span {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.1;
}
.page-news .aside-stats em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--news-soft);
}
.page-news .aside-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .aside-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--stand);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 243, 236, .18);
  transition: color var(--dur) var(--ease);
}
.page-news .aside-links li:last-child a { border-bottom: 0; }
.page-news .aside-links a::after {
  content: "→";
  color: var(--gold);
  font-family: var(--font-mono);
}
.page-news .aside-links a:hover,
.page-news .aside-links a:focus-visible { color: var(--gold); }

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

/* 断点 */
@media (min-width: 640px) {
  .page-news .feed__item {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-news .obs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .ver-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .subscribe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .news-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .page-news .news-mast__foot {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    align-items: end;
  }
  .page-news .feed__item--lead {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
  .page-news .feed__item--lead .feed__media { aspect-ratio: 4 / 3; }
  .page-news .obs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .comm { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .page-news .rules-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .page-news .rules-figure { position: sticky; top: 24px; }
  .page-news .obs-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 920px) {
  .page-news .news-layout {
    grid-template-columns: 158px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-index {
    position: sticky;
    top: 24px;
  }
  .page-news .news-index__list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-news .news-index__list a {
    white-space: normal;
    padding: 11px 12px;
    font-size: 13.5px;
  }
  .page-news .news-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1200px) {
  .page-news .news-layout {
    grid-template-columns: 158px minmax(0, 1fr) 268px;
  }
  .page-news .news-aside {
    position: sticky;
    top: 24px;
  }
  .page-news .feed__item:not(.feed__item--lead) {
    grid-template-columns: 156px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .ver-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .feed__item::before,
  .page-news .feed__media img,
  .page-news .feed__title {
    transition-property: opacity, color;
  }
  .page-news .feed__item:hover::before { transform: none; }
  .page-news .feed__media:hover img { transform: none; }
}

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

  <nav class="breadcrumb" aria-label="你所在的位置">
    <ol class="breadcrumb__list">
      <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">主场首页</a></li>
      <li class="breadcrumb__sep" aria-hidden="true">›</li>
      <li class="breadcrumb__item" aria-current="page"><span>看台笔记</span></li>
    </ol>
  </nav>

  <header class="news-mast">
    <div class="news-mast__inner">
      <p class="news-mast__kicker idx">栏目 04 · 每个比赛周的观察手记</p>
      <h1 class="news-mast__title">看台笔记</h1>
      <div class="news-mast__foot">
        <p class="news-mast__lede">九十分钟留下的不只是比分。冠军体育希洪在每个比赛周把回看里的跑位、图表里的曲线和规则条文的改动写成笔记——让你赛后回看时知道该盯哪里，也让你把一份球队清单交给同事之前少走几步弯路。</p>
        <ul class="news-mast__stats">
          <li>
            <span class="news-mast__num">8</span>
            <span class="news-mast__lbl">本周更新</span>
          </li>
          <li>
            <span class="news-mast__num">380</span>
            <span class="news-mast__lbl">每赛季回看索引</span>
          </li>
          <li>
            <span class="news-mast__num">96</span>
            <span class="news-mast__lbl">累计规则解读</span>
          </li>
        </ul>
      </div>
    </div>
  </header>

  <div class="news-layout">

    <aside class="news-index" aria-label="栏目目录">
      <p class="news-index__title idx">目录</p>
      <ul class="news-index__list">
        <li><a href="#feed">本周精选</a></li>
        <li><a href="#data">数据观察</a></li>
        <li><a href="#rules">规则更新</a></li>
        <li><a href="#community">社群与活动</a></li>
        <li><a href="#subscribe">订阅与投稿</a></li>
      </ul>
    </aside>

    <div class="news-main">

      <section id="feed" class="news-sec" aria-labelledby="feed-title">
        <div class="section-head">
          <p class="section-kicker">本周精选</p>
          <h2 id="feed-title" class="section-title">看台上记下的八件事</h2>
          <p class="section-note">从上周主场的压迫节拍，到把球队资料交出去之前要先过的几道筛选，按由近到远排。</p>
        </div>

        <div class="cat-filter">
          <div class="chips" role="radiogroup" aria-label="按分类查看笔记">
            <input class="chips__input" type="radio" name="news-cat" id="cat-all" checked>
            <label class="chips__label" for="cat-all">全部</label>
            <input class="chips__input" type="radio" name="news-cat" id="cat-jijin">
            <label class="chips__label" for="cat-jijin">集锦解读</label>
            <input class="chips__input" type="radio" name="news-cat" id="cat-data">
            <label class="chips__label" for="cat-data">数据观察</label>
            <input class="chips__input" type="radio" name="news-cat" id="cat-rules">
            <label class="chips__label" for="cat-rules">规则更新</label>
            <input class="chips__input" type="radio" name="news-cat" id="cat-comm">
            <label class="chips__label" for="cat-comm">社群活动</label>
          </div>

          <ol class="feed">

            <li class="feed__item feed__item--lead" data-cat="jijin" data-reveal>
              <a class="feed__media" href="/" aria-label="回到主场首页查看本周回看集锦">
                <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="低角度仰拍的红白球衣拼抢瞬间，织物纹理与草屑被虚化" decoding="async">
              </a>
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag tag--red">集锦解读</span>
                  <span class="idx">上轮 · 主场</span>
                </p>
                <h3 class="feed__title">中场推进的三段节拍：从上周回看里读主场压迫</h3>
                <p class="feed__text">把一次由守转攻拆成回收、转身、出球三段，你会发现节奏并不是一直往前顶：每推进十米就有一脚回敲，把对手的第二条线拉出来。三次压迫成功的位置都落在中圈偏右，这是本周回看最值得反复看的地方。</p>
                <a class="feed__more" href="/">看本周回看集锦</a>
              </div>
            </li>

            <li class="feed__item" data-cat="data">
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag">数据观察</span>
                  <span class="idx">本周 · 工具手记</span>
                </p>
                <h3 class="feed__title">导出球队库之前，先把这四个筛选字段对一遍</h3>
                <p class="feed__text">关注球队、联赛、赛季、主客场，四个条件叠在一起才是你想要的那份清单。单次最多导出 500 条，格式可选 CSV 或 JSON；先缩小范围再切换格式，比导出后再删列省事得多。</p>
                <a class="feed__more" href="/products/">去球队库试试筛选</a>
              </div>
            </li>

            <li class="feed__item" data-cat="rules">
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag tag--gold">规则更新</span>
                  <span class="idx">3月版本</span>
                </p>
                <h3 class="feed__title">规则说明的3月版本：42条细则与9个操作示例</h3>
                <p class="feed__text">新版本把判定说明写得更细，也补进了几个常见操作场景。如果你习惯按旧条目顺序找内容，先看版本对比，再回到正文按新编号定位，会快很多。</p>
                <a class="feed__more" href="/troubleshooting/">查看规则与排查</a>
              </div>
            </li>

            <li class="feed__item" data-cat="comm">
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag">社群活动</span>
                  <span class="idx">本周 · 征集</span>
                </p>
                <h3 class="feed__title">红白条纹征集：看台围巾的第一批十二条设计线</h3>
                <p class="feed__text">条纹的宽度、留白和折叠后的显色，是大家争得最久的三件事。第一批线条稿已经在社群里传阅，来自各地的球迷把自家看台的配色习惯都带了进来。</p>
                <a class="feed__more" href="/cooperation/">参与与投稿方式</a>
              </div>
            </li>

            <li class="feed__item" data-cat="jijin">
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag tag--red">集锦解读</span>
                  <span class="idx">近两轮</span>
                </p>
                <h3 class="feed__title">反击三秒：边路提速的两处细节</h3>
                <p class="feed__text">第一脚触球的方向决定了后面能不能一条道跑到黑。两段反击里，边路球员都没有停球调整，而是用外脚背把球顺着跑道推出去，防守人才刚刚转身。</p>
                <a class="feed__more" href="/">看回看集锦分类</a>
              </div>
            </li>

            <li class="feed__item" data-cat="data">
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag">数据观察</span>
                  <span class="idx">本赛季中段</span>
                </p>
                <h3 class="feed__title">跑动曲线上的下半场：体能是怎么一点点掉下去的</h3>
                <p class="feed__text">整场跑动总量好看，不代表最后二十分钟还顶得住。把曲线按十五分钟切段，你会看到高强度跑动的峰值提前到了六十分钟前后，之后是一条缓慢的下坡。</p>
                <a class="feed__more" href="/products/">在会员中心查指标</a>
              </div>
            </li>

            <li class="feed__item" data-cat="data">
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag">数据观察</span>
                  <span class="idx">赛季间歇期</span>
                </p>
                <h3 class="feed__title">定位球路线：五种落点该怎么读</h3>
                <p class="feed__text">前点、后点、点球点、禁区弧顶、回敲再传中，五种落点对应五种跑位包抄。间歇期正好把上赛季的定位球路线按这五类归一遍，下次看球就不用只盯着球飞。</p>
                <a class="feed__more" href="/products/">看球队库里的历史记录</a>
              </div>
            </li>

            <li class="feed__item" data-cat="comm">
              <div class="feed__body">
                <p class="feed__meta">
                  <span class="tag">社群活动</span>
                  <span class="idx">本周 · 联合观赛</span>
                </p>
                <h3 class="feed__title">三城同看一场客场：校园社团的联合观赛夜</h3>
                <p class="feed__text">六家校园体育社团把投影、围巾和同一份赛前笔记带到各自的教室，中场休息时同步连线聊阵型。客场也能有主场的声音，这是今年社区合作里最热闹的一晚。</p>
                <a class="feed__more" href="/cooperation/">加入社群与活动</a>
              </div>
            </li>

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

      <section id="data" class="news-sec" aria-labelledby="data-title">
        <div class="section-head">
          <p class="section-kicker">数据观察</p>
          <h2 id="data-title" class="section-title">把一场比赛拆成看得懂的曲线</h2>
          <p class="section-note">同样的比分，不同的跑动起点、传球方向和射门位置。这里放三个最常被问到的观察角度。</p>
        </div>

        <div class="obs-grid">
          <article class="obs obs--net">
            <h3>传球网络</h3>
            <svg class="obs-chart" viewBox="0 0 200 96" role="img" aria-label="传球网络示意：七名球员节点连成网络，中场偏右的连线最密集">
              <g class="obs-chart__edge">
                <line x1="26" y1="66" x2="62" y2="46"></line>
                <line x1="62" y1="46" x2="96" y2="62"></line>
                <line x1="96" y1="62" x2="128" y2="40"></line>
                <line x1="128" y1="40" x2="162" y2="58"></line>
                <line x1="62" y1="46" x2="128" y2="40"></line>
                <line x1="96" y1="62" x2="118" y2="78"></line>
                <line x1="128" y1="40" x2="118" y2="78"></line>
                <line x1="26" y1="66" x2="44" y2="30"></line>
                <line x1="44" y1="30" x2="62" y2="46"></line>
              </g>
              <g class="obs-chart__node">
                <circle cx="26" cy="66" r="4"></circle>
                <circle cx="44" cy="30" r="3"></circle>
                <circle cx="62" cy="46" r="5"></circle>
                <circle cx="96" cy="62" r="4"></circle>
                <circle cx="118" cy="78" r="3"></circle>
                <circle cx="128" cy="40" r="6"></circle>
                <circle cx="162" cy="58" r="4"></circle>
              </g>
            </svg>
            <p>节点越大，接球次数越多。看两条线之间的密度，比数某一个人的数据更能看出球队往哪边推。</p>
          </article>

          <article class="obs obs--run">
            <h3>跑动曲线</h3>
            <svg class="obs-chart" viewBox="0 0 200 96" role="img" aria-label="跑动曲线示意：两条曲线对比上下半场的高强度跑动，下半场末端下坠">
              <line class="obs-chart__axis" x1="14" y1="82" x2="192" y2="82"></line>
              <polyline class="obs-chart__line obs-chart__line--red" points="18,64 44,52 70,58 96,44 122,50 148,62 174,70"></polyline>
              <polyline class="obs-chart__line" points="18,72 44,66 70,60 96,58 122,66 148,74 174,80"></polyline>
            </svg>
            <p>红色是高强度跑动，靛青是总跑动。两条线的间距拉开，往往说明球队在用站位省力气。</p>
          </article>

          <article class="obs obs--shot">
            <h3>射门分布</h3>
            <svg class="obs-chart" viewBox="0 0 200 96" role="img" aria-label="射门分布示意：球门框内的落点集中在下半区，金色圆点代表最集中的两个位置">
              <rect class="obs-chart__frame" x="40" y="16" width="120" height="64" rx="2"></rect>
              <circle class="obs-chart__dot" cx="66" cy="30" r="3.5"></circle>
              <circle class="obs-chart__dot" cx="104" cy="52" r="3.5"></circle>
              <circle class="obs-chart__dot obs-chart__dot--hot" cx="128" cy="64" r="5"></circle>
              <circle class="obs-chart__dot" cx="140" cy="40" r="3"></circle>
              <circle class="obs-chart__dot obs-chart__dot--hot" cx="118" cy="68" r="4.5"></circle>
              <circle class="obs-chart__dot" cx="86" cy="44" r="3"></circle>
            </svg>
            <p>金色是落点最集中的区域。同样的射门次数，压在门框哪一侧，决定了守门员要往哪边先动。</p>
          </article>
        </div>

        <figure class="media-frame media-frame--wide media-frame--cut obs-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深墨绿球场纹理上叠加的传球网络与跑动曲线，线条由中心向外发散" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">传球网络与跑动曲线叠在同一块场地上，位置关系一眼可见</figcaption>
        </figure>

        <div class="obs-cta">
          <p>除了这三张，会员中心还提供热区图、对抗成功率、定位球路线和节奏条带。历史数据覆盖近 5 个赛季、12 类比赛指标，按比赛、赛季、主客场和球员位置组合筛选，图形会跟着你的条件一起变。</p>
          <a class="btn btn--primary" href="/products/">进会员中心查历史数据</a>
        </div>
      </section>

      <section id="rules" class="news-sec" aria-labelledby="rules-title">
        <div class="section-head">
          <p class="section-kicker">规则更新</p>
          <h2 id="rules-title" class="section-title">3月版本改了哪些地方</h2>
          <p class="section-note">规则说明按赛季阶段更新，最近 6 个版本留档。手上拿着旧版条目编号的，先看版本对比再找正文。</p>
        </div>

        <div class="rules-body">
          <div class="ver-list">
            <article class="ver ver--current">
              <p class="ver__badge">3月版本 · 当前</p>
              <h3 class="ver__title">现行细则与操作示例</h3>
              <ul class="ver__list">
                <li>42 条细则逐条编号，改过的条目在对比视图里高亮。</li>
                <li>9 个操作示例覆盖筛选、导出、指标切换等日常动作。</li>
                <li>和上一版本并排看，差异条目可以逐条对照。</li>
              </ul>
            </article>

            <article class="ver">
              <p class="ver__badge">版本对比</p>
              <h3 class="ver__title">从旧版条目找到新版位置</h3>
              <ul class="ver__list">
                <li>两侧同步滚动，同一条规则的新旧表述放在一起。</li>
                <li>条目顺序调整过的，会标出原来的编号。</li>
                <li>适合赛季间歇期做一次集中核对。</li>
              </ul>
            </article>

            <article class="ver">
              <p class="ver__badge">更新记录</p>
              <h3 class="ver__title">最近 6 个版本的变更轨迹</h3>
              <ul class="ver__list">
                <li>每次更新保留要点摘要，回看时不必翻整页。</li>
                <li>按赛季阶段归档，找某个阶段的说法更直接。</li>
                <li>遇到与规则相关的疑问，可以带着版本号提交工单。</li>
              </ul>
            </article>
          </div>

          <figure class="media-frame media-frame--cut rules-figure">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="条款编号与版本徽标排列在球场边线之上的抽象画面，红白色块斜切进入" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">版本徽标、条款编号与球场边线叠在一起的样子</figcaption>
          </figure>
        </div>

        <p class="rules-cta"><a class="btn btn--gold" href="/troubleshooting/">看规则说明与排查</a></p>
      </section>

      <section id="community" class="news-sec" aria-labelledby="community-title">
        <div class="section-head">
          <p class="section-kicker">社群与活动</p>
          <h2 id="community-title" class="section-title">看台的声音是怎么聚起来的</h2>
          <p class="section-note">12 家球迷社群和 6 家校园体育社团常年一起做观赛、征集和内容共创，想加入随时能接上。</p>
        </div>

        <div class="comm">
          <figure class="media-frame media-frame--cut comm-figure">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="看台围巾、旗帜与座椅纹理组成的活动氛围近景，红色织物占据画面前景" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">围巾、旗帜和座椅，一场联合观赛需要准备的东西</figcaption>
          </figure>

          <div class="comm-body">
            <article class="comm-item">
              <p class="comm-item__meta"><span class="tag tag--red">联合观赛</span><span class="idx">每个比赛周</span></p>
              <h3>主场一起看，客场也一起看</h3>
              <p>主场日社群自组看台区，客场日就近找场地连线。赛前同一份笔记发到群里，半场休息还能开个十分钟的语音复盘。</p>
            </article>

            <article class="comm-item">
              <p class="comm-item__meta"><span class="tag tag--gold">征集</span><span class="idx">进行中</span></p>
              <h3>红白条纹的设计征集</h3>
              <p>围巾、横幅、助威手幅都可以投。条纹宽度、留白比例和折叠后的显色是评审最看重的三点，入选稿会做实物打样寄给作者。</p>
            </article>

            <article class="comm-item">
              <p class="comm-item__meta"><span class="tag">校园</span><span class="idx">学期内</span></p>
              <h3>校园体育社团的内容共创</h3>
              <p>社团可以申请赛前笔记的使用权与线下活动物料，也可以把同学们做的数据小卡投过来，在赛季专题里集中呈现。</p>
            </article>

            <p class="comm-cta"><a class="btn btn--ghost" href="/cooperation/">联系合作与报名</a></p>
          </div>
        </div>
      </section>

      <section id="subscribe" class="news-sec news-sec--subscribe" aria-labelledby="subscribe-title">
        <div class="subscribe">
          <div class="section-head subscribe__head">
            <p class="section-kicker">订阅与投稿</p>
            <h2 id="subscribe-title" class="section-title">下一期想看什么，你说了算</h2>
            <p class="section-note">把选题建议、观察角度或者你自己做的数据小卡发过来，被采用的会出现在本周精选里。</p>
          </div>

          <div class="subscribe__grid">
            <div class="subscribe__card">
              <h3>订阅提醒</h3>
              <p>在会员中心按球队和指标开启提醒，新笔记和指标变动会第一时间推送到你的账号，不用每次自己翻列表。</p>
              <a class="btn btn--gold" href="/products/">去会员中心设置</a>
            </div>

            <div class="subscribe__card">
              <h3>选题与合作</h3>
              <p>专栏选题、社群活动联办、企业版数据工具的内容共创都可以谈。写信说明你的想法和期望时间，我们会回你一个明确的推进节奏。</p>
              <div class="subscribe__actions">
                <a class="btn btn--primary" href="/cooperation/">提选题或谈合作</a>
                <button class="btn btn--ghost subscribe__copy" type="button" data-copy="service@stadium-guanjun.com.cn">复制客服邮箱</button>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>

    <aside class="news-aside" aria-label="旁注与快捷入口">
      <div class="aside-card aside-card--glass">
        <p class="idx">编辑手记</p>
        <p>这周四场回看里最有意思的不是进球，而是第 63 分钟那次全队前压——三条线同时上提，正好卡在对方后腰接球的瞬间。</p>
      </div>

      <div class="aside-card">
        <p class="idx">赛季速览</p>
        <ul class="aside-stats">
          <li><span>380</span><em>每赛季回看索引</em></li>
          <li><span>12</span><em>合作球迷社群</em></li>
          <li><span>6</span><em>校园体育社团</em></li>
          <li><span>260万</span><em>赛季专题阅读</em></li>
        </ul>
      </div>

      <div class="aside-card aside-card--dark">
        <p class="idx">常去的入口</p>
        <ul class="aside-links">
          <li><a href="/products/">会员中心与球队库</a></li>
          <li><a href="/troubleshooting/">规则说明与排查</a></li>
          <li><a href="/cooperation/">联系与合作</a></li>
          <li><a href="/history/">品牌历程</a></li>
        </ul>
      </div>
    </aside>

  </div>
</main>

.page-news {
  --news-soft: rgba(7, 26, 20, .70);
  --news-hair: rgba(7, 26, 20, .13);
  background: var(--stand);
  color: var(--ink);
  font-family: var(--font-body);
}

/* 面包屑 */
.page-news .breadcrumb {
  background: var(--green);
  padding: 16px var(--pad-x) 0;
}
.page-news .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.page-news .breadcrumb__link {
  color: rgba(247, 243, 236, .72);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.page-news .breadcrumb__link:hover,
.page-news .breadcrumb__link:focus-visible {
  color: var(--gold);
}
.page-news .breadcrumb__sep { color: rgba(247, 243, 236, .40); }
.page-news .breadcrumb__item[aria-current] span { color: var(--stand); }

/* 报头 */
.page-news .news-mast {
  position: relative;
  overflow: hidden;
  background: var(--green);
  color: var(--stand);
  padding: clamp(22px, 4.5vw, 44px) var(--pad-x) clamp(30px, 5vw, 58px);
}
.page-news .news-mast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 253, 247, .07) 0 6px, transparent 6px 20px);
  pointer-events: none;
}
.page-news .news-mast::after {
  content: "";
  position: absolute;
  top: -24%;
  right: -18%;
  width: 44%;
  height: 150%;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 58%, rgba(122, 22, 32, 0) 100%);
  transform: skewX(-8deg);
  opacity: .9;
  pointer-events: none;
}
.page-news .news-mast__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto;
}
.page-news .news-mast__kicker {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.page-news .news-mast__title {
  margin: 12px 0 clamp(20px, 3vw, 30px);
  font-family: var(--font-display);
  font-size: clamp(56px, 15vw, 168px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: .01em;
  color: var(--ivory);
}
.page-news .news-mast__foot {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
}
.page-news .news-mast__lede {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: rgba(247, 243, 236, .84);
}
.page-news .news-mast__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid rgba(247, 243, 236, .26);
}
.page-news .news-mast__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.page-news .news-mast__num {
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
}
.page-news .news-mast__lbl {
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(247, 243, 236, .70);
}

/* 三列骨架 */
.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px) var(--pad-x) clamp(48px, 6vw, 88px);
}
.page-news .news-main { min-width: 0; }

/* 目录 */
.page-news .news-index { min-width: 0; }
.page-news .news-index__title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(7, 26, 20, .55);
}
.page-news .news-index__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-news .news-index__list li { flex: 0 0 auto; }
.page-news .news-index__list a {
  display: block;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
  line-height: 24px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-news .news-index__list a:hover,
.page-news .news-index__list a:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--ivory);
}

/* 章节通用 */
.page-news .news-sec {
  margin-bottom: clamp(42px, 6vw, 76px);
  scroll-margin-top: 24px;
}
.page-news .news-sec:last-of-type { margin-bottom: 0; }
.page-news .section-title {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: .01em;
  margin: 6px 0 10px;
}
.page-news .section-note { color: var(--news-soft); }

/* 分类筛选 */
.page-news .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
}
.page-news .chips__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-news .chips__label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-news .chips__label:hover { border-color: var(--red); color: var(--red); }
.page-news .chips__input:checked + .chips__label {
  background: var(--red);
  border-color: var(--red);
  color: var(--ivory);
}
.page-news .chips__input:focus-visible + .chips__label {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 前端分类过滤 */
.page-news .cat-filter:has(#cat-jijin:checked) .feed__item:not([data-cat="jijin"]),
.page-news .cat-filter:has(#cat-data:checked) .feed__item:not([data-cat="data"]),
.page-news .cat-filter:has(#cat-rules:checked) .feed__item:not([data-cat="rules"]),
.page-news .cat-filter:has(#cat-comm:checked) .feed__item:not([data-cat="comm"]) {
  display: none;
}

/* 文章列表 */
.page-news .feed {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--red);
}
.page-news .feed__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-bottom: 1px solid var(--news-hair);
}
.page-news .feed__item::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  background: repeating-linear-gradient(90deg, rgba(215, 25, 32, .10) 0 6px, transparent 6px 18px);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
  z-index: 0;
}
.page-news .feed__item:hover::before { opacity: 1; transform: translateX(0); }
.page-news .feed__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.page-news .feed__media {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.page-news .feed__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 220ms var(--ease);
}
.page-news .feed__media:hover img { transform: scale(1.04); }
.page-news .feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.page-news .feed__meta .idx { color: rgba(7, 26, 20, .52); }
.page-news .feed__title {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.3vw, 25px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -.01em;
  transition: color var(--dur) var(--ease);
}
.page-news .feed__item:hover .feed__title { color: var(--red); }
.page-news .feed__text {
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--news-soft);
}
.page-news .feed__more {
  display: inline-block;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease);
}
.page-news .feed__more:hover,
.page-news .feed__more:focus-visible { color: var(--wine); }

/* 数据观察 */
.page-news .obs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.page-news .obs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  border-top: 3px solid var(--indigo);
}
.page-news .obs--net { border-top-color: var(--red); }
.page-news .obs--run { border-top-color: var(--indigo); }
.page-news .obs--shot { border-top-color: var(--gold); }
.page-news .obs h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .02em;
}
.page-news .obs p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--news-soft);
}
.page-news .obs-chart { display: block; width: 100%; height: auto; }
.page-news .obs-chart__edge line { stroke: var(--indigo); stroke-width: 1.2; opacity: .45; }
.page-news .obs-chart__node circle { fill: var(--red); }
.page-news .obs-chart__axis { stroke: var(--lime); stroke-width: 1; }
.page-news .obs-chart__line {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.page-news .obs-chart__line--red { stroke: var(--red); }
.page-news .obs-chart__frame { fill: none; stroke: var(--green); stroke-width: 2; }
.page-news .obs-chart__dot { fill: var(--indigo); opacity: .7; }
.page-news .obs-chart__dot--hot { fill: var(--gold); opacity: 1; }

.page-news .obs-figure { margin: 18px 0 0; }
.page-news .obs-figure img { display: block; width: 100%; height: auto; object-fit: cover; }

.page-news .obs-cta {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  background: rgba(255, 253, 247, .62);
  border-left: 4px solid var(--indigo);
}
.page-news .obs-cta p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--news-soft);
}
.page-news .obs-cta .btn { justify-self: start; }

/* 规则版本 */
.page-news .rules-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.page-news .ver-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}
.page-news .ver {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
}
.page-news .ver--current {
  border-color: rgba(245, 197, 66, .9);
  box-shadow: inset 4px 0 0 var(--gold);
}
.page-news .ver__badge {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--green);
}
.page-news .ver--current .ver__badge { color: var(--red); }
.page-news .ver__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}
.page-news .ver__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--news-soft);
}
.page-news .ver__list li { margin-bottom: 4px; }
.page-news .ver__list li::marker { color: var(--red); }
.page-news .rules-figure { margin: 0; }
.page-news .rules-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.page-news .rules-cta { margin: 18px 0 0; }

/* 社群与活动 */
.page-news .comm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.page-news .comm-figure { margin: 0; }
.page-news .comm-figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.page-news .comm-body {
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-news .comm-item {
  padding: 14px 16px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
  border-left: 3px solid var(--wine);
}
.page-news .comm-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.page-news .comm-item__meta .idx { color: rgba(7, 26, 20, .52); }
.page-news .comm-item h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.42;
}
.page-news .comm-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.74;
  color: var(--news-soft);
}
.page-news .comm-cta { margin: 2px 0 0; }

/* 订阅与投稿 */
.page-news .subscribe {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 38px);
  background: var(--green-deep);
  color: var(--stand);
}
.page-news .subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, rgba(215, 25, 32, .22) 0 10px, transparent 10px 34px);
  pointer-events: none;
}
.page-news .subscribe > * { position: relative; z-index: 1; }
.page-news .subscribe__head .section-title { color: var(--ivory); }
.page-news .subscribe__head .section-note { color: rgba(247, 243, 236, .76); }
.page-news .subscribe__head .section-kicker { color: var(--gold); }
.page-news .subscribe__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.page-news .subscribe__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: rgba(255, 253, 247, .07);
  border: 1px solid rgba(247, 243, 236, .22);
}
.page-news .subscribe__card h3 {
  margin: 0;
  font-size: 17px;
  color: var(--ivory);
}
.page-news .subscribe__card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.76;
  color: rgba(247, 243, 236, .80);
}
.page-news .subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}
.page-news .subscribe__card .btn { align-self: flex-start; }
.page-news .subscribe__copy { color: var(--stand); border-color: rgba(247, 243, 236, .5); }
.page-news .subscribe__copy:hover,
.page-news .subscribe__copy:focus-visible { border-color: var(--gold); color: var(--gold); }
.page-news .subscribe__copy[data-copied] { border-color: var(--ok); color: var(--ok); }

/* 旁注列 */
.page-news .news-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.page-news .aside-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--ivory);
  border: 1px solid var(--news-hair);
}
.page-news .aside-card--glass {
  background: rgba(255, 253, 247, .64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: rgba(11, 61, 46, .18);
}
.page-news .aside-card--dark {
  background: var(--green);
  color: var(--stand);
  border-color: transparent;
}
.page-news .aside-card .idx { color: rgba(7, 26, 20, .52); }
.page-news .aside-card--dark .idx { color: var(--gold); }
.page-news .aside-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--news-soft);
}
.page-news .aside-card--glass p { color: rgba(7, 26, 20, .76); }
.page-news .aside-stats {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .aside-stats li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--news-hair);
}
.page-news .aside-stats li:last-child { border-bottom: 0; padding-bottom: 0; }
.page-news .aside-stats span {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.1;
}
.page-news .aside-stats em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--news-soft);
}
.page-news .aside-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .aside-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--stand);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 243, 236, .18);
  transition: color var(--dur) var(--ease);
}
.page-news .aside-links li:last-child a { border-bottom: 0; }
.page-news .aside-links a::after {
  content: "→";
  color: var(--gold);
  font-family: var(--font-mono);
}
.page-news .aside-links a:hover,
.page-news .aside-links a:focus-visible { color: var(--gold); }

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

/* 断点 */
@media (min-width: 640px) {
  .page-news .obs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .ver-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .subscribe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .news-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .page-news .news-mast__foot {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    align-items: end;
  }
  .page-news .feed__item--lead {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
  .page-news .feed__item--lead .feed__media { aspect-ratio: 4 / 3; }
  .page-news .obs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .comm { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .page-news .rules-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .page-news .rules-figure { position: sticky; top: 24px; }
  .page-news .obs-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 920px) {
  .page-news .news-layout {
    grid-template-columns: 158px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .news-index {
    position: sticky;
    top: 24px;
  }
  .page-news .news-index__list {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-news .news-index__list a {
    white-space: normal;
    padding: 11px 12px;
    font-size: 13.5px;
  }
  .page-news .news-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1200px) {
  .page-news .news-layout {
    grid-template-columns: 158px minmax(0, 1fr) 268px;
  }
  .page-news .news-aside {
    position: sticky;
    top: 24px;
  }
  .page-news .feed__item:not(.feed__item--lead) {
    grid-template-columns: 156px minmax(0, 1fr);
    align-items: start;
  }
  .page-news .ver-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .feed__item::before,
  .page-news .feed__media img,
  .page-news .feed__title {
    transition-property: opacity, color;
  }
  .page-news .feed__item:hover::before { transform: none; }
  .page-news .feed__media:hover img { transform: none; }
}