.page-news{
  --pn-gap: clamp(30px, 5vw, 76px);
  --pn-dot: 8px;
  padding-bottom: clamp(48px, 8vw, 120px);
}

.page-news .crumbs{margin-top: clamp(18px, 3vw, 32px);}

/* ---------- 头部 ---------- */
.page-news .pn-head{
  padding: clamp(20px, 4vw, 52px) 0 clamp(22px, 3.6vw, 42px);
  border-bottom: 1px solid var(--line);
}
.page-news .pn-head .kicker{margin: 0 0 14px;}
.page-news .pn-head h1{
  margin: 0;
  font-size: clamp(34px, 6vw, 74px);
  line-height: 1.03;
  letter-spacing: -.025em;
  font-weight: 900;
  color: var(--paper);
}
.page-news .pn-head__sub{
  display: block;
  margin-top: 16px;
  max-width: 54ch;
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--blue);
}
.page-news .pn-head .lead{margin: 20px 0 0; max-width: 66ch;}
.page-news .pn-head__stats{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 26px;
}
.page-news .pn-head__stat{display: flex; align-items: baseline; gap: 8px;}
.page-news .pn-head__stat .num{
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 600;
  color: var(--lime);
  line-height: 1;
}
.page-news .pn-head__stat span:last-child{
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--blue);
}

/* ---------- 区块骨架 ---------- */
.page-news .pn-sec{
  padding-top: var(--pn-gap);
}
.page-news .pn-sec .chapter{margin-bottom: clamp(18px, 2.6vw, 30px);}
.page-news .pn-intro{margin: 0 0 clamp(18px, 2.6vw, 28px); max-width: 66ch;}

/* ---------- 置顶速览 ---------- */
.page-news .feature{
  display: grid;
  border: 1px solid var(--line-strong);
  background-color: var(--ink-800);
  background-image: radial-gradient(120% 100% at 88% -12%, rgba(200,255,74,.16), rgba(6,20,16,0) 62%);
  overflow: hidden;
}
.page-news .feature__media{
  position: relative;
  margin: 0;
  overflow: hidden;
}
.page-news .feature__media img{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 320px;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%);
}
.page-news .feature__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,20,16,0) 42%, rgba(6,20,16,.7) 100%);
  pointer-events: none;
}
.page-news .feature__body{
  padding: clamp(20px, 3.4vw, 40px);
}
.page-news .feature__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.page-news .feature__issue{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 14px;
  background: var(--lime);
  color: var(--ink-950);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.page-news .feature__issue .num{font-size: 15px; font-weight: 700;}
.page-news .feature__title{
  margin: 16px 0 0;
  font-size: clamp(21px, 3vw, 32px);
  line-height: 1.24;
  letter-spacing: -.015em;
  font-weight: 900;
  color: var(--paper);
}
.page-news .feature__lead{
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--blue);
  max-width: 56ch;
}
.page-news .feature__points{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.page-news .feature__points li{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.page-news .feature__num{
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1;
  color: var(--teal);
}
.page-news .feature__txt{
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
}
.page-news .feature__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 数据带 ---------- */
.page-news .pn-strip{margin-top: clamp(26px, 4vw, 48px);}
.page-news .pn-strip .datastrip__item{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-news .pn-strip .num{
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  color: var(--paper);
  line-height: 1;
}

/* ---------- 分类轨道 ---------- */
.page-news .track{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 16px;
  margin-bottom: clamp(14px, 2.2vw, 22px);
  scrollbar-width: thin;
}
.page-news .track__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--ink-800);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.page-news .track__item .num{
  font-size: 12px;
  color: var(--blue);
}
.page-news .track__item .dot{
  width: var(--pn-dot);
  height: var(--pn-dot);
  background: var(--moss);
}
.page-news .track__item--review .dot{background: var(--orange);}
.page-news .track__item--version .dot{background: var(--lime);}
.page-news .track__item--data .dot{background: var(--blue);}
.page-news .track__item--rank .dot{background: var(--amber);}
.page-news .track__item:hover,
.page-news .track__item:focus-visible{
  background: var(--ink-700);
  border-color: var(--line-strong);
}

/* ---------- 列表骨架 ---------- */
.page-news .listwrap{display: grid; gap: clamp(20px, 3vw, 30px);}

.page-news .stages{display: none;}

.page-news .group{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 34px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
  scroll-margin-top: calc(var(--bar-h) + 24px);
}
.page-news .entries .group:first-child{margin-top: 0;}
.page-news .group__meta{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--blue);
}

/* ---------- 条目 ---------- */
.page-news .entry{
  border-bottom: 1px solid var(--line);
}
.page-news .entry__head{
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 16px;
  grid-template-areas:
    "idx .page-news arrow"
    ".   stat .";
  gap: 8px 14px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  transition: background .22s var(--ease), box-shadow .22s var(--ease);
  scroll-margin-top: calc(var(--bar-h) + 24px);
}
.page-news .entry__head::-webkit-details-marker{display: none;}
.page-news .entry__head::marker{content: "";}
.page-news .entry__head:hover{background: var(--ink-800);}
.page-news .entry__head:hover .entry__idx{color: var(--lime);}
.page-news .entry[open] .entry__head{
  background: var(--ink-800);
  box-shadow: inset 3px 0 0 var(--lime);
}

.page-news .entry__idx{
  grid-area: idx;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600;
  line-height: 1;
  color: var(--paper);
  transition: color .2s var(--ease);
}
.page-news .entry__idx-key{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--moss);
}
.page-news .entry__body{
  grid-area: body;
  display: grid;
  gap: 6px;
}
.page-news .entry__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.page-news .entry__stage{
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--blue);
}
.page-news .entry__title{
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper);
}
.page-news .entry__sum{
  font-size: 14px;
  line-height: 1.7;
  color: var(--blue);
}
.page-news .entry__stat{
  grid-area: stat;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.page-news .entry__stat .num{
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
  color: var(--amber);
  line-height: 1;
}
.page-news .entry__stat-key{
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--moss);
}
.page-news .entry__arrow{
  grid-area: arrow;
  align-self: start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--blue);
  transition: transform .22s var(--ease), color .22s var(--ease);
}
.page-news .entry[open] .entry__arrow{
  transform: rotate(90deg);
  color: var(--lime);
}

.page-news .entry__more{
  padding: 0 4px 22px;
  border-left: 1px solid transparent;
}
.page-news .entry__more p{
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--paper);
}
.page-news .entry__fig{
  margin: 16px 0 0;
  max-width: 420px;
  border: 1px solid var(--line);
  background: var(--ink-900);
}
.page-news .entry__fig img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 420;
  object-fit: cover;
}
.page-news .entry__cap{
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--blue);
  border-top: 1px solid var(--line);
}

/* ---------- 射门指标 ---------- */
.page-news .metrics{
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-news .metric{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: clamp(18px, 2.8vw, 26px);
  background: var(--ink-900);
}
.page-news .metric__name{
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--paper);
}
.page-news .metric__note{
  font-size: 14px;
  line-height: 1.75;
  color: var(--blue);
  max-width: 48ch;
}
.page-news .metric__bar{
  display: block;
  height: 3px;
  background: var(--ink-700);
  position: relative;
}
.page-news .metric__fill{
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--teal);
}
.page-news .metric--shot .metric__fill{width: 72%;}
.page-news .metric--ontarget .metric__fill{width: 54%; background: var(--lime);}
.page-news .metric--rate .metric__fill{width: 38%; background: var(--amber);}
.page-news .metric__tag{
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--moss);
}
.page-news .pn-note-foot{
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--blue);
  max-width: 62ch;
}
.page-news .pn-note-foot a{color: var(--lime);}

/* ---------- 回看与跟进 ---------- */
.page-news .pn-sec--last{padding-bottom: clamp(20px, 4vw, 48px);}
.page-news .archive{
  display: grid;
  gap: clamp(26px, 4vw, 44px);
}
.page-news .archive__title{
  margin: 0 0 16px;
  font-size: clamp(15px, 1.9vw, 17px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--paper);
}
.page-news .archive__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-news .archive__list li{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.page-news .archive__k{
  font-size: 14px;
  font-weight: 700;
  color: var(--lime);
}
.page-news .archive__v{
  font-size: 13px;
  line-height: 1.7;
  color: var(--blue);
}
.page-news .archive__foot{
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--blue);
  max-width: 52ch;
}

.page-news .follow{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-news .follow li{
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.page-news .follow a{
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.page-news .follow a:hover,
.page-news .follow a:focus-visible{
  color: var(--lime);
  border-bottom-color: var(--lime);
}
.page-news .follow span{
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--blue);
}
.page-news .archive__contact{
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--paper);
  border-left: 2px solid var(--lime);
  background: var(--ink-800);
}
.page-news .archive__contact a{color: var(--lime); word-break: break-all;}

/* ---------- 断点 ---------- */
@media (min-width: 700px){
  .page-news .metric{
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-areas:
      "name note"
      "bar  tag";
    align-items: start;
    column-gap: 22px;
  }
  .page-news .metric__name{grid-area: name;}
  .page-news .metric__note{grid-area: note;}
  .page-news .metric__bar{grid-area: bar; margin-top: 10px;}
  .page-news .metric__tag{grid-area: tag; margin-top: 6px;}

  .page-news .archive__list li{
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
  }
}

@media (min-width: 860px){
  .page-news .feature{
    grid-template-columns: 5fr 6fr;
    align-items: stretch;
  }
  .page-news .feature__media img{
    min-height: 100%;
    max-height: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
  }
  .page-news .feature__media::after{
    background: linear-gradient(90deg, rgba(6,20,16,0) 46%, rgba(14,36,28,.62) 100%);
  }
  .page-news .feature__body{
    padding: clamp(28px, 3.6vw, 48px) clamp(24px, 3.2vw, 44px);
  }
  .page-news .archive{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
  }
}

@media (min-width: 960px){
  .page-news .listwrap{
    grid-template-columns: 152px minmax(0, 1fr);
    gap: clamp(26px, 4vw, 52px);
  }
  .page-news .stages{
    display: block;
    position: sticky;
    top: calc(var(--bar-h) + 28px);
    align-self: start;
    padding-top: 6px;
  }
  .page-news .stages__label{
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--moss);
  }
  .page-news .stages__list{
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--line);
    display: grid;
    gap: 16px;
    counter-reset: stage;
  }
  .page-news .stages__list a{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--blue);
    text-decoration: none;
    transition: color .2s var(--ease);
  }
  .page-news .stages__list a:hover,
  .page-news .stages__list a:focus-visible{color: var(--lime);}
  .page-news .stages__dot{
    width: 7px;
    height: 7px;
    margin-left: -20px;
    background: var(--line-strong);
    flex: 0 0 auto;
    transition: background .2s var(--ease);
  }
  .page-news .stages__list a:hover .stages__dot{background: var(--lime);}
  .page-news .stages__list .num{
    margin-left: auto;
    font-size: 11px;
    color: var(--moss);
  }
  .page-news .stages__note{
    margin: 20px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--moss);
  }

  .page-news .entry__head{
    grid-template-columns: 86px minmax(0, 1fr) 120px 16px;
    grid-template-areas: "idx .page-news stat arrow";
    align-items: start;
    gap: 0 22px;
    padding: 22px 10px;
  }
  .page-news .entry__more{
    padding: 0 10px 26px calc(86px + 22px);
  }
  .page-news .entry__stat{
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-news .entry__head,
  .page-news .entry__idx,
  .page-news .entry__arrow,
  .page-news .track__item,
  .page-news .follow a{
    transition: none;
  }
}
<<<END>>>