.page-news {
  --cat-catalog: var(--ochre);
  --cat-origin: var(--tea);
  --cat-guide: var(--gold);
  --cat-qa: var(--ink);
  --news-block: clamp(46px, 8vw, 96px);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* ============ 页首 ============ */
.page-news .news-masthead {
  padding: clamp(26px, 4.5vw, 48px) 0 clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}

.page-news .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 clamp(22px, 4vw, 36px);
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  color: var(--stone);
}

.page-news .breadcrumb li + li::before {
  content: "/";
  margin: 0 9px;
  color: var(--line);
}

.page-news .breadcrumb a {
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-news .breadcrumb a:hover,
.page-news .breadcrumb a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.page-news .news-head-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}

.page-news .news-title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-news .news-lede {
  max-width: 36em;
  margin: 20px 0 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-news .head-catalog ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-news .head-catalog li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink);
}

.page-news .head-catalog li .mono {
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--gold);
}

@media (min-width: 860px) {
  .page-news .news-head-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    column-gap: clamp(40px, 6vw, 88px);
  }

  .page-news .head-catalog {
    padding-bottom: 6px;
  }
}

/* ============ 本期导读 ============ */
.page-news .news-opening {
  padding: var(--news-block) 0;
}

.page-news .opening-grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
}

.page-news .opening-title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.28;
  color: var(--ink);
}

.page-news .opening-text {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-news .opening-points {
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-news .opening-points li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);
}

.page-news .opening-points li .mono {
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--ochre);
}

.page-news .opening-aside .media-frame {
  border: 1px solid var(--line);
}

.page-news .opening-aside .figure-caption {
  margin-top: 10px;
}

.page-news .figure-caption {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--stone);
}

@media (min-width: 900px) {
  .page-news .opening-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }

  .page-news .opening-aside {
    margin-top: clamp(20px, 4vw, 56px);
  }
}

/* ============ 四类栏目 ============ */
.page-news .news-columns {
  padding: var(--news-block) 0;
  border-top: 1px solid var(--line);
}

.page-news .column-grid {
  display: grid;
  gap: 0;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-news .column-card {
  position: relative;
  padding: 24px 0 26px 18px;
  border-bottom: 1px solid var(--line);
}

.page-news .column-dot {
  position: absolute;
  left: 0;
  top: 26px;
  width: 8px;
  height: 8px;
  background: var(--ink);
}

.page-news .column-card--catalog .column-dot { background: var(--cat-catalog); }
.page-news .column-card--origin .column-dot { background: var(--cat-origin); }
.page-news .column-card--guide .column-dot { background: var(--cat-guide); }
.page-news .column-card--qa .column-dot { background: var(--cat-qa); }

.page-news .column-no {
  margin: 0;
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--stone);
}

.page-news .column-name {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ink);
}

.page-news .column-text {
  margin: 12px 0 0;
  font-size: var(--fs-small);
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-news .column-cadence {
  margin: 16px 0 0;
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--stone);
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .page-news .column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 48px);
  }
}

@media (min-width: 1040px) {
  .page-news .column-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============ 文章列表 ============ */
.page-news .news-articles {
  padding: var(--news-block) 0;
  border-top: 2px solid var(--ink);
}

.page-news .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(24px, 4vw, 36px) 0 clamp(20px, 3vw, 30px);
}

.page-news .filter-tag {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-news .filter-tag:hover,
.page-news .filter-tag:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

.page-news .filter-tag.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--inverse);
}

.page-news .filter-tag--catalog.is-active { background: var(--cat-catalog); border-color: var(--cat-catalog); }
.page-news .filter-tag--origin.is-active { background: var(--cat-origin); border-color: var(--cat-origin); }
.page-news .filter-tag--guide.is-active { background: var(--cat-guide); border-color: var(--cat-guide); color: var(--indigo-deep); }
.page-news .filter-tag--qa.is-active { background: var(--cat-qa); border-color: var(--cat-qa); }

.page-news .article-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.page-news .article-row {
  border-top: 1px solid var(--line);
}

.page-news .article-link {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  grid-template-areas:
    "bar no"
    "bar main"
    "bar meta";
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 8px;
  padding: 22px 0 22px 0;
  text-decoration: none;
  color: inherit;
}

.page-news .article-bar {
  grid-area: bar;
  align-self: stretch;
  background: transparent;
  opacity: 0;
  transform: scaleY(0.35);
  transform-origin: 50% 50%;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-news .article-row--catalog .article-bar { background: var(--cat-catalog); }
.page-news .article-row--origin .article-bar { background: var(--cat-origin); }
.page-news .article-row--guide .article-bar { background: var(--cat-guide); }
.page-news .article-row--qa .article-bar { background: var(--cat-qa); }

.page-news .article-link:hover .article-bar,
.page-news .article-link:focus-visible .article-bar {
  opacity: 1;
  transform: scaleY(1);
}

.page-news .article-no {
  grid-area: no;
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--stone);
  transition: color 0.2s var(--ease);
}

.page-news .article-main {
  grid-area: main;
  display: grid;
  gap: 8px;
}

.page-news .article-tag {
  justify-self: start;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  padding: 2px 7px;
  color: var(--indigo-deep);
  background: var(--cream-deep);
}

.page-news .article-tag--catalog { background: var(--ochre); color: var(--inverse); }
.page-news .article-tag--origin { background: var(--tea); color: var(--inverse); }
.page-news .article-tag--guide { background: var(--gold); color: var(--indigo-deep); }
.page-news .article-tag--qa { background: var(--ink); color: var(--inverse); }

.page-news .article-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: var(--fs-h4);
  line-height: 1.42;
  color: var(--ink);
}

.page-news .article-sum {
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-news .article-meta {
  grid-area: meta;
  font-size: var(--fs-mono);
  letter-spacing: 0.05em;
  color: var(--stone);
  opacity: 1;
  transition: color 0.2s var(--ease);
}

.page-news .article-link:hover .article-no,
.page-news .article-link:hover .article-meta {
  color: var(--ink);
}

@media (min-width: 900px) {
  .page-news .article-link {
    grid-template-columns: 4px 76px minmax(0, 1fr) 210px;
    grid-template-areas: "bar no main meta";
    grid-template-rows: auto;
    column-gap: 22px;
    row-gap: 0;
    align-items: start;
    padding: 24px 0;
  }

  .page-news .article-main {
    gap: 7px;
  }

  .page-news .article-meta {
    text-align: right;
    padding-top: 3px;
  }
}

.page-news .list-media {
  margin: clamp(30px, 5vw, 52px) 0 0;
  padding: 0;
}

.page-news .list-media .figure-caption {
  margin-top: 10px;
}

@media (min-width: 900px) {
  .page-news .list-media {
    margin-left: 26%;
    max-width: 74%;
  }
}

/* ============ 编辑推荐 ============ */
.page-news .news-picks {
  padding: var(--news-block) 0;
  background: var(--cream-deep);
}

.page-news .pick-grid {
  display: grid;
  gap: clamp(28px, 5vw, 48px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-news .pick-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-news .pick-item {
  padding: 24px 0 26px;
  border-top: 1px solid var(--line);
}

.page-news .pick-item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-news .pick-no {
  margin: 0;
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--ochre);
}

.page-news .pick-title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.36;
  color: var(--ink);
}

.page-news .pick-why {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: var(--fs-small);
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-news .pick-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-news .pick-link:hover,
.page-news .pick-link:focus-visible {
  color: var(--ochre);
  border-bottom-color: var(--ochre);
}

.page-news .pick-media {
  margin: 0;
}

.page-news .pick-media .media-frame {
  border: 1px solid var(--line);
}

.page-news .pick-media .figure-caption {
  margin-top: 10px;
}

@media (min-width: 940px) {
  .page-news .pick-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }

  .page-news .pick-media {
    margin-top: clamp(16px, 3vw, 40px);
  }
}

/* ============ 往期归档 ============ */
.page-news .news-archive {
  padding: var(--news-block) 0;
  border-top: 1px solid var(--line);
}

.page-news .archive-wrap {
  display: grid;
  gap: clamp(28px, 5vw, 48px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-news .archive-media {
  margin: 0;
}

.page-news .archive-media .media-frame {
  border: 1px solid var(--line);
}

.page-news .archive-media .figure-caption {
  margin-top: 10px;
}

.page-news .archive-groups {
  display: grid;
  gap: 0;
  align-content: start;
}

.page-news .archive-group {
  border-top: 1px solid var(--line);
}

.page-news .archive-group:last-child {
  border-bottom: 1px solid var(--line);
}

.page-news .archive-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "ver count"
    "season count";
  align-items: center;
  gap: 2px 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

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

.page-news .archive-summary::marker {
  content: "";
}

.page-news .archive-ver {
  grid-area: ver;
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--ink);
}

.page-news .archive-season {
  grid-area: season;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.page-news .archive-count {
  grid-area: count;
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--stone);
}

.page-news .archive-group[open] .archive-count {
  color: var(--tea);
}

.page-news .archive-list {
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.page-news .archive-list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-news .archive-list li .mono {
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  color: var(--stone);
}

@media (min-width: 980px) {
  .page-news .archive-wrap {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }

  .page-news .archive-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 36px);
  }

  .page-news .archive-list li {
    grid-template-columns: 52px minmax(0, 1fr);
  }
}

/* ============ 选题征集 ============ */
.page-news .news-invite {
  padding: var(--news-block) 0;
  background: var(--indigo-deep);
  color: var(--inverse);
}

.page-news .invite-panel {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
}

.page-news .news-invite .t-label {
  color: var(--gold-light);
}

.page-news .invite-title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.26;
  color: var(--inverse);
}

.page-news .invite-text {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: var(--fs-small);
  line-height: 1.82;
  color: var(--inverse-soft);
}

.page-news .invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.page-news .news-invite .btn--line {
  color: var(--inverse);
  border-color: var(--inverse-line);
}

.page-news .news-invite .btn--line:hover,
.page-news .news-invite .btn--line:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

@media (min-width: 900px) {
  .page-news .invite-panel {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }

  .page-news .invite-actions {
    justify-content: flex-start;
    padding-top: 8px;
  }
}

/* ============ 回到顶部 ============ */
.page-news .to-top {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  opacity: 0.62;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-news .to-top:hover,
.page-news .to-top:focus-visible {
  opacity: 1;
  border-color: var(--gold);
  color: var(--ochre);
}

.page-news .to-top-mark {
  font-family: var(--mono);
  line-height: 1;
}

/* ============ 动效 ============ */
.page-news [data-reveal] {
  opacity: 1;
}

.js-ready .page-news [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}

.js-ready .page-news [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .page-news [data-reveal],
  .js-ready .page-news [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-news .article-bar,
  .page-news .filter-tag,
  .page-news .to-top {
    transition: none;
  }
}
<<<END>>>