.page-news {
  --n-line: rgba(18, 33, 29, 0.14);
  --n-line-dark: rgba(232, 220, 198, 0.18);
  --n-soft: rgba(18, 33, 29, 0.06);
  font-family: var(--kt-font-body);
  color: var(--kt-text);
  background: var(--kt-paper);
  overflow-x: clip;
}

.page-news .news-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(232, 220, 198, 0.62);
  margin-bottom: 40px;
}

.page-news .news-crumbs a {
  color: rgba(232, 220, 198, 0.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--kt-t) var(--kt-e), color var(--kt-t) var(--kt-e);
}

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

/* ---------- mast ---------- */

.page-news .news-mast {
  background: var(--kt-ink);
  color: var(--kt-sand);
  padding: 44px 0 56px;
  position: relative;
}

.page-news .news-mast__grid {
  display: grid;
  gap: 36px;
}

.page-news .news-mast__title {
  margin: 14px 0 0;
  font-family: var(--kt-font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 9vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--kt-paper);
  max-width: 15em;
}

.page-news .news-mast__lede {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(232, 220, 198, 0.82);
  max-width: 34em;
}

.page-news .news-mast__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-news .news-mast__figs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--n-line-dark);
  border: 1px solid var(--n-line-dark);
  border-radius: var(--kt-r-md);
  overflow: hidden;
}

.page-news .news-fig {
  background: var(--kt-night);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-news .news-fig__n {
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1;
  color: var(--kt-cyan);
  letter-spacing: -0.01em;
}

.page-news .news-fig__n span {
  font-size: 0.6em;
  margin-left: 2px;
}

.page-news .news-fig__l {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(232, 220, 198, 0.66);
}

/* ---------- feed ---------- */

.page-news .news-feed {
  background: var(--kt-paper);
}

.page-news .news-feed__grid {
  display: grid;
  gap: 32px;
  padding: 40px 0 72px;
}

.page-news .news-main {
  min-width: 0;
}

.page-news .news-rail {
  border-left: 2px solid var(--kt-red);
  padding-left: 16px;
}

.page-news .news-rail__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-news .news-rail__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--n-line);
  font-size: 12.5px;
}

.page-news .news-rail__d {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--kt-muted);
}

.page-news .news-rail__t {
  position: relative;
  padding-left: 14px;
  color: var(--kt-text);
  line-height: 1.45;
}

.page-news .news-rail__t::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kt-muted);
}

.page-news .news-rail__item--live .news-rail__t::before { background: var(--kt-red); }
.page-news .news-rail__item--review .news-rail__t::before { background: var(--kt-cyan); }
.page-news .news-rail__item--buzzer .news-rail__t::before { background: var(--kt-ochre); }

.page-news .news-rail__note {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--kt-muted);
}

.page-news .news-rail__note a {
  color: var(--kt-text);
  text-decoration: none;
  border-bottom: 1px solid var(--kt-cyan);
}

.page-news .news-rail__note a:hover,
.page-news .news-rail__note a:focus-visible {
  color: var(--kt-orange);
  border-bottom-color: var(--kt-orange);
}

/* ---------- lead article ---------- */

.page-news .news-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  border-radius: var(--kt-r-lg);
  overflow: hidden;
  background: var(--kt-redblack);
  color: var(--kt-paper);
  border: 1px solid rgba(226, 59, 46, 0.5);
}

.page-news .news-lead__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.78) contrast(1.06);
}

.page-news .news-lead__over {
  position: relative;
  padding: 26px 20px 20px;
  background: linear-gradient(180deg, rgba(18, 16, 15, 0) 0%, rgba(18, 16, 15, 0.82) 34%, rgba(18, 16, 15, 0.97) 100%);
}

.page-news .news-lead__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.page-news .news-lead__title {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.6vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--kt-paper);
}

.page-news .news-lead__sum {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(246, 240, 228, 0.78);
  max-width: 40em;
}

.page-news .news-lead__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(232, 220, 198, 0.2);
}

.page-news .news-lead__num {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 0.9;
  color: var(--kt-paper);
  letter-spacing: -0.03em;
}

.page-news .news-lead__vs {
  font-family: var(--kt-font-data);
  font-size: 1.4rem;
  color: var(--kt-red);
}

.page-news .news-lead__meta {
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--kt-ice);
}

.page-news .news-verdict {
  margin-top: 16px;
  background: var(--kt-red);
  border-radius: var(--kt-r-sm);
  overflow: hidden;
}

.page-news .news-verdict__tab {
  cursor: pointer;
  padding: 11px 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.page-news .news-verdict__tab::after {
  content: "＋";
  margin-left: auto;
  font-size: 13px;
}

.page-news .news-verdict[open] .news-verdict__tab::after { content: "－"; }

.page-news .news-verdict__list {
  margin: 0;
  padding: 4px 16px 16px 32px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13.5px;
  line-height: 1.7;
}

.page-news .news-verdict__list li { margin-top: 8px; }

/* ---------- controls ---------- */

.page-news .news-ctl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-news .news-tools {
  margin-top: 34px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--kt-text);
}

.page-news .news-tools__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-news .news-tools__row--chips { margin-top: 12px; }

.page-news .news-tools__views {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--n-line);
  border-radius: var(--kt-r-pill);
}

.page-news .news-tools__views label {
  cursor: pointer;
  padding: 5px 14px;
  border-radius: var(--kt-r-pill);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--kt-muted);
  transition: background var(--kt-t) var(--kt-e), color var(--kt-t) var(--kt-e);
}

.page-news .news-tools__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-tools__chips label {
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--kt-r-pill);
  border: 1px solid var(--n-line);
  font-size: 12.5px;
  color: var(--kt-text);
  background: transparent;
  transition: background var(--kt-t) var(--kt-e), color var(--kt-t) var(--kt-e), border-color var(--kt-t) var(--kt-e);
}

.page-news .news-tools__chips label:hover,
.page-news .news-tools__views label:hover { border-color: var(--kt-cyan); color: var(--kt-ink); }

.page-news #nv-tight:checked ~ .news-tools label[for="nv-tight"],
.page-news #nv-loose:checked ~ .news-tools label[for="nv-loose"] {
  background: var(--kt-ink);
  color: var(--kt-paper);
}

.page-news #np-all:checked ~ .news-tools label[for="np-all"],
.page-news #np-basket:checked ~ .news-tools label[for="np-basket"],
.page-news #np-volley:checked ~ .news-tools label[for="np-volley"],
.page-news #np-foot:checked ~ .news-tools label[for="np-foot"] {
  background: var(--kt-ink);
  border-color: var(--kt-ink);
  color: var(--kt-cyan);
}

/* ---------- list ---------- */

.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .news-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--n-line);
  transition: opacity var(--kt-t) var(--kt-e), border-color var(--kt-t) var(--kt-e), background var(--kt-t) var(--kt-e);
}

.page-news .news-item:hover {
  border-bottom-color: var(--kt-cyan);
  background: rgba(59, 240, 207, 0.06);
}

.page-news .news-item__proj {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding: 3px 0;
  color: var(--kt-muted);
  border-top: 3px solid var(--kt-muted);
  text-align: center;
}

.page-news .news-item__proj--basket { border-top-color: var(--kt-red); color: var(--kt-red); }
.page-news .news-item__proj--volley { border-top-color: var(--kt-ice); color: var(--kt-steel); }
.page-news .news-item__proj--foot { border-top-color: var(--kt-ochre); color: var(--kt-ochre); }

.page-news .news-item__title {
  margin: 0;
  font-family: var(--kt-font-body);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--kt-text);
}

.page-news .news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.page-news .news-item__time {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--kt-muted);
}

.page-news .news-item__sum {
  display: none;
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--kt-muted);
  max-width: 42em;
}

.page-news .news-serie {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--kt-r-pill);
  font-size: 11px;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
}

.page-news .news-serie--live { color: var(--kt-red); }
.page-news .news-serie--review { color: #16897a; }
.page-news .news-serie--buzzer { color: var(--kt-ochre); }

.page-news #nv-loose:checked ~ .news-list .news-item { padding: 20px 0; }
.page-news #nv-loose:checked ~ .news-list .news-item__sum { display: block; }

.page-news #np-basket:checked ~ .news-list .news-item:not([data-proj="basket"]),
.page-news #np-volley:checked ~ .news-list .news-item:not([data-proj="volley"]),
.page-news #np-foot:checked ~ .news-list .news-item:not([data-proj="foot"]) {
  opacity: 0.3;
}

/* ---------- anatomy ---------- */

.page-news .news-anatomy {
  background: var(--kt-sand);
  padding: 56px 0 64px;
}

.page-news .news-anatomy__head {
  display: grid;
  gap: 12px;
  margin-bottom: 32px;
}

.page-news .news-anatomy__h2 {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 6.5vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--kt-ink);
  max-width: 12em;
}

.page-news .news-anatomy__lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: #2c3a33;
  max-width: 34em;
}

.page-news .news-anatomy__grid {
  display: grid;
  gap: 28px;
}

.page-news .news-anatomy__h3 {
  margin: 0 0 12px;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--kt-ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-news .news-anatomy__p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.75;
  color: #34443c;
}

.page-news .news-anatomy__tl,
.page-news .news-anatomy__bars {
  background: var(--kt-paper);
  border-radius: var(--kt-r-md);
  padding: 22px 18px;
}

.page-news .news-tl {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
}

.page-news .news-tl__axis {
  stroke: rgba(18, 33, 29, 0.22);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.page-news .news-tl__node circle {
  stroke: var(--kt-paper);
  stroke-width: 3;
  transition: r var(--kt-t) var(--kt-e), fill var(--kt-t) var(--kt-e);
}

.page-news .news-tl__node:hover circle { r: 14; }

.page-news .news-tl__node--score circle { fill: var(--kt-red); }
.page-news .news-tl__node--sub circle { fill: var(--kt-ochre); }
.page-news .news-tl__node--timeout circle { fill: var(--kt-steel); }

.page-news .news-tl__t {
  font-family: var(--kt-font-data);
  font-size: 15px;
  fill: var(--kt-ink);
  text-anchor: middle;
}

.page-news .news-tl__s {
  font-family: var(--kt-font-body);
  font-size: 13px;
  fill: var(--kt-muted);
  text-anchor: middle;
}

.page-news .news-tl__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--kt-muted);
}

.page-news .news-tl__legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.page-news .news-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.page-news .news-dot--score { background: var(--kt-red); }
.page-news .news-dot--sub { background: var(--kt-ochre); }
.page-news .news-dot--timeout { background: var(--kt-steel); }

/* bars */

.page-news .news-bars__switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--n-line);
  border-radius: var(--kt-r-pill);
  margin-bottom: 16px;
  width: fit-content;
}

.page-news .news-bars__switch label {
  cursor: pointer;
  padding: 5px 14px;
  border-radius: var(--kt-r-pill);
  font-size: 12px;
  color: var(--kt-muted);
  transition: background var(--kt-t) var(--kt-e), color var(--kt-t) var(--kt-e);
}

.page-news #ds-match:checked ~ .news-bars__switch label[for="ds-match"],
.page-news #ds-season:checked ~ .news-bars__switch label[for="ds-season"] {
  background: var(--kt-ink);
  color: var(--kt-cyan);
}

.page-news .news-bars__set { display: none; }
.page-news #ds-match:checked ~ .news-bars__set[data-set="match"] { display: block; }
.page-news #ds-season:checked ~ .news-bars__set[data-set="season"] { display: block; }

.page-news .news-bar {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--n-line);
}

.page-news .news-bar:last-child { border-bottom: 0; }

.page-news .news-bar__k {
  font-size: 12.5px;
  color: var(--kt-text);
}

.page-news .news-bar__pair {
  display: grid;
  gap: 4px;
}

.page-news .news-bar__track {
  display: block;
  height: 8px;
  border-radius: var(--kt-r-pill);
  background: rgba(18, 33, 29, 0.08);
  overflow: hidden;
}

.page-news .news-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--kt-r-pill);
}

.page-news .news-bar__fill--a { background: var(--kt-red); }
.page-news .news-bar__fill--b { background: var(--kt-steel); }

.page-news .news-bar__v {
  font-size: 11.5px;
  text-align: right;
  color: var(--kt-muted);
  letter-spacing: 0.02em;
}

.page-news .news-anatomy__fig {
  margin: 20px 0 0;
}

.page-news .news-anatomy__fig img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: var(--kt-r-sm);
  object-fit: cover;
}

.page-news .news-anatomy__fig figcaption {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--kt-muted);
}

.page-news .news-anatomy__verdict {
  margin-top: 32px;
  padding: 24px 20px;
  border-radius: var(--kt-r-md);
  background: var(--kt-ink);
  color: var(--kt-sand);
}

.page-news .news-anatomy__verdict .news-anatomy__h3 { color: var(--kt-paper); }
.page-news .news-anatomy__verdict .news-anatomy__p {
  color: rgba(232, 220, 198, 0.8);
  margin-bottom: 0;
  max-width: 46em;
}

/* ---------- series ---------- */

.page-news .news-series {
  background: var(--kt-ink);
  color: var(--kt-sand);
  padding: 0 0 64px;
}

.page-news .news-series__banner {
  margin: 0 0 36px;
  border-radius: 0 0 var(--kt-r-lg) var(--kt-r-lg);
  overflow: hidden;
}

.page-news .news-series__banner img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
}

.page-news .news-series__head {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.page-news .news-series__h2 {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--kt-paper);
  max-width: 16em;
}

.page-news .news-series__lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(232, 220, 198, 0.78);
  max-width: 34em;
}

.page-news .news-series__grid {
  display: grid;
  gap: 16px;
}

.page-news .news-serie {
  background: var(--kt-night);
  border: 1px solid var(--n-line-dark);
  border-radius: var(--kt-r-md);
  padding: 22px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color var(--kt-t) var(--kt-e), background var(--kt-t) var(--kt-e);
}

.page-news .news-serie:hover {
  border-color: var(--kt-cyan);
  background: #0b221c;
}

.page-news .news-serie__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.page-news .news-serie--live .news-serie__dot { background: var(--kt-red); }
.page-news .news-serie--review .news-serie__dot { background: var(--kt-cyan); }
.page-news .news-serie--buzzer .news-serie__dot { background: var(--kt-ochre); }

.page-news .news-serie__name {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--kt-paper);
}

.page-news .news-serie__p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: rgba(232, 220, 198, 0.76);
}

.page-news .news-serie__meta {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(59, 240, 207, 0.8);
  border-top: 1px solid var(--n-line-dark);
  padding-top: 10px;
}

/* ---------- feedback ---------- */

.page-news .news-feedback {
  background: var(--kt-paper);
  padding: 56px 0 64px;
}

.page-news .news-feedback__grid {
  display: grid;
  gap: 32px;
}

.page-news .news-feedback__h2 {
  margin: 12px 0 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--kt-ink);
  max-width: 14em;
}

.page-news .news-feedback__p {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: #3a4842;
  max-width: 34em;
}

.page-news .news-feedback__steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-feedback__steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--kt-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--n-line);
}

.page-news .news-feedback__steps .kt-data {
  font-size: 12px;
  color: var(--kt-red);
  letter-spacing: 0.06em;
}

.page-news .news-feedback__mail {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--kt-muted);
  max-width: 38em;
}

.page-news .news-feedback__mail .kt-data {
  color: var(--kt-ink);
  font-size: 12.5px;
  word-break: break-all;
}

.page-news .news-feedback__mail a {
  color: var(--kt-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--kt-orange);
}

.page-news .news-feedback__mail a:hover,
.page-news .news-feedback__mail a:focus-visible {
  color: var(--kt-orange);
}

.page-news .news-feedback__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-news .news-feedback__media {
  position: relative;
  border-radius: var(--kt-r-lg);
  overflow: hidden;
  background: var(--kt-redblack);
}

.page-news .news-feedback__media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.08);
}

.page-news .news-feedback__stat {
  position: relative;
  padding: 16px 18px;
  background: var(--kt-redblack);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.page-news .news-feedback__n {
  font-size: 1.4rem;
  color: var(--kt-cyan);
  line-height: 1;
}

.page-news .news-feedback__l {
  font-size: 12px;
  color: rgba(232, 220, 198, 0.72);
}

/* ---------- desktop ---------- */

@media (min-width: 720px) {
  .page-news .news-mast { padding: 56px 0 72px; }

  .page-news .news-mast__figs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-news .news-rail__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  .page-news .news-lead { min-height: 500px; }

  .page-news .news-lead__over { padding: 32px 30px 24px; }

  .page-news .news-item {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 0 22px;
  }

  .page-news .news-item__title { font-size: 17px; }

  .page-news .news-anatomy,
  .page-news .news-feedback { padding: 72px 0 80px; }

  .page-news .news-anatomy__tl,
  .page-news .news-anatomy__bars { padding: 30px 26px; }

  .page-news .news-bar {
    grid-template-columns: 96px minmax(0, 1fr) 86px;
  }

  .page-news .news-series { padding-bottom: 80px; }

  .page-news .news-series__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-news .news-feedback__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 40px;
  }
}

@media (min-width: 960px) {
  .page-news .news-mast__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: end;
    gap: 56px;
  }

  .page-news .news-mast__figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .news-feed__grid {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 48px;
    padding: 56px 0 88px;
  }

  .page-news .news-rail {
    position: sticky;
    top: 102px;
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow: auto;
  }

  .page-news .news-rail__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-news .news-lead { min-height: 540px; }

  .page-news .news-anatomy__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 32px;
    align-items: start;
  }

  .page-news .news-anatomy__head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
    gap: 32px;
    margin-bottom: 40px;
  }

  .page-news .news-anatomy__head .kt-idx { grid-column: 1 / -1; }

  .page-news .news-series__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: end;
    gap: 32px;
    margin-bottom: 36px;
  }

  .page-news .news-series__head .kt-idx { grid-column: 1 / -1; }

  .page-news .news-series__banner { margin-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-tl__node:hover circle { r: 11; }
  .page-news * {
    transition-duration: 0.01ms !important;
  }
}


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

  <section class="news-mast">
    <div class="kt-shell">
      <nav class="kt-crumbs news-crumbs" aria-label="页面位置">
        <a href="/">看台首页</a>
        <span class="kt-crumbs__sep" aria-hidden="true">/</span>
        <span aria-current="page">战报专栏</span>
      </nav>

      <div class="news-mast__grid">
        <div class="news-mast__lead">
          <p class="kt-idx kt-idx--cyan">终场之后的第一份阅读</p>
          <h1 class="news-mast__title">球一停，这场球怎么被决定的已经写完了</h1>
          <p class="news-mast__lede">
            环球体育看台把每场比赛拆成能读的部分：终场后 90 分钟内先出一版战报，用关键回合把走势讲通，2 小时内补齐双方数据对照与三条结论。错过直播，也能在几分钟里读完一场比赛的全部关节。
          </p>
          <div class="news-mast__acts">
            <a class="kt-btn kt-btn--signal" href="#news-feed">看本轮最新战报</a>
            <a class="kt-btn kt-btn--ghost" href="/download/">装到手机上读</a>
          </div>
        </div>

        <ul class="news-mast__figs">
          <li class="news-fig">
            <span class="news-fig__n kt-data">4,800<span>+</span></span>
            <span class="news-fig__l">已发布的赛后战报</span>
          </li>
          <li class="news-fig">
            <span class="news-fig__n kt-data">26</span>
            <span class="news-fig__l">覆盖的运动项目</span>
          </li>
          <li class="news-fig">
            <span class="news-fig__n kt-data">90</span>
            <span class="news-fig__l">终场后出初版的分钟数</span>
          </li>
          <li class="news-fig">
            <span class="news-fig__n kt-data">2</span>
            <span class="news-fig__l">小时内补齐数据复盘</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="news-feed" id="news-feed">
    <div class="kt-shell news-feed__grid">

      <aside class="news-rail" aria-label="战报索引">
        <p class="kt-idx">索引 / 本轮</p>
        <ol class="news-rail__list">
          <li class="news-rail__item news-rail__item--buzzer">
            <span class="news-rail__d kt-data">本轮</span>
            <span class="news-rail__t">篮球 · 读秒</span>
          </li>
          <li class="news-rail__item news-rail__item--review">
            <span class="news-rail__d kt-data">本轮</span>
            <span class="news-rail__t">排球 · 复盘</span>
          </li>
          <li class="news-rail__item news-rail__item--live">
            <span class="news-rail__d kt-data">本轮</span>
            <span class="news-rail__t">足球 · 临场</span>
          </li>
          <li class="news-rail__item news-rail__item--live">
            <span class="news-rail__d kt-data">昨日</span>
            <span class="news-rail__t">田径 · 临场</span>
          </li>
          <li class="news-rail__item news-rail__item--buzzer">
            <span class="news-rail__d kt-data">昨日</span>
            <span class="news-rail__t">羽毛球 · 读秒</span>
          </li>
          <li class="news-rail__item news-rail__item--review">
            <span class="news-rail__d kt-data">上一轮</span>
            <span class="news-rail__t">游泳 · 复盘</span>
          </li>
          <li class="news-rail__item news-rail__item--review">
            <span class="news-rail__d kt-data">上一轮</span>
            <span class="news-rail__t">乒乓球 · 复盘</span>
          </li>
          <li class="news-rail__item news-rail__item--live">
            <span class="news-rail__d kt-data">三周前</span>
            <span class="news-rail__t">排球 · 临场</span>
          </li>
        </ol>
        <p class="news-rail__note">
          按项目与系列排开，最新一版在最上面。想从别的入口找起，回<a href="/">看台首页</a>用顶部检索更快。
        </p>
      </aside>

      <div class="news-main">

        <article class="news-lead">
          <img class="news-lead__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="赛场关键动作的定格画面，逆光剪影与运动模糊，看不清运动员面部">
          <div class="news-lead__over">
            <div class="news-lead__tags">
              <span class="kt-tag kt-tag--signal">本轮头条</span>
              <span class="kt-tag kt-tag--report">读秒</span>
              <span class="kt-tag kt-tag--report">篮球</span>
            </div>
            <h2 class="news-lead__title">末节最后两分钟抹平八分，加时的三次防守把结果锁死了</h2>
            <p class="news-lead__sum">
              主队在第四节还剩 1 分 52 秒时落后 8 分，靠两次前场逼抢把比赛拖进加时；加时赛的前三个回合，客队一次都没有走到禁区里。
            </p>
            <div class="news-lead__score">
              <span class="news-lead__num kt-data">86</span>
              <span class="news-lead__vs">:</span>
              <span class="news-lead__num kt-data">91</span>
              <span class="news-lead__meta kt-data">加时 · 客队胜</span>
            </div>

            <details class="news-verdict" open>
              <summary class="news-verdict__tab">三条结论</summary>
              <ol class="news-verdict__list">
                <li>客队全场三分出手 34 次，命中 15 球，其中 11 球来自底角与侧翼的空位接投。</li>
                <li>主队第四节的 12 分里有 9 分来自失误反击，半场阵地战的命中率只有 31%。</li>
                <li>加时赛前 3 分钟，客队每回合平均耗时 19 秒，把节奏压到了自己最舒服的区间。</li>
              </ol>
            </details>
          </div>
        </article>

        <input type="radio" id="nv-tight" name="newsview" class="news-ctl" checked>
        <input type="radio" id="nv-loose" name="newsview" class="news-ctl">
        <input type="radio" id="np-all" name="newsproj" class="news-ctl" checked>
        <input type="radio" id="np-basket" name="newsproj" class="news-ctl">
        <input type="radio" id="np-volley" name="newsproj" class="news-ctl">
        <input type="radio" id="np-foot" name="newsproj" class="news-ctl">

        <div class="news-tools">
          <div class="news-tools__row">
            <p class="kt-idx">最新发布 · 本轮</p>
            <div class="news-tools__views" role="group" aria-label="列表视图">
              <label for="nv-tight">紧凑</label>
              <label for="nv-loose">舒展</label>
            </div>
          </div>
          <div class="news-tools__row news-tools__row--chips">
            <div class="news-tools__chips" role="group" aria-label="按项目筛选">
              <label for="np-all">全部项目</label>
              <label for="np-basket">篮球</label>
              <label for="np-volley">排球</label>
              <label for="np-foot">足球</label>
            </div>
          </div>
        </div>

        <ol class="news-list">
          <li class="news-item" data-proj="basket">
            <span class="news-item__proj news-item__proj--basket">篮球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">终场前 4.8 秒的那记三分，回看录像能看出两层布置</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--buzzer">读秒</span>
                <span class="news-item__time kt-data">本轮 · 2 小时前</span>
              </div>
              <p class="news-item__sum">发球前的两次交叉掩护只为了把防守重心挪到弧顶，真正的出手点留在弱侧 45 度。</p>
            </div>
          </li>
          <li class="news-item" data-proj="volley">
            <span class="news-item__proj news-item__proj--volley">排球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">一传到位率掉到 41%，第二局的换人从哪一步开始松动</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--review">复盘</span>
                <span class="news-item__time kt-data">本轮 · 3 小时前</span>
              </div>
              <p class="news-item__sum">对方把发球落点从 5 号位挪到了 1 号位与 6 号位之间，接发串联整局没有缓过来。</p>
            </div>
          </li>
          <li class="news-item" data-proj="foot">
            <span class="news-item__proj news-item__proj--foot">足球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">边路三次连续换位，把对手的右路拉出了空档</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--live">临场</span>
                <span class="news-item__time kt-data">本轮 · 5 小时前</span>
              </div>
              <p class="news-item__sum">第 28 分钟到第 41 分钟，同一侧的换位重复了三次，第二次就制造了那次单刀。</p>
            </div>
          </li>
          <li class="news-item" data-proj="track">
            <span class="news-item__proj">田径</span>
            <div class="news-item__body">
              <h3 class="news-item__title">400 米栏最后两个栏慢了 0.3 秒，问题出在第七栏之后</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--live">临场</span>
                <span class="news-item__time kt-data">本轮 · 昨天</span>
              </div>
              <p class="news-item__sum">栏间节奏从三步半变成四步，步频没有掉，但触地时间被拉长了。</p>
            </div>
          </li>
          <li class="news-item" data-proj="badminton">
            <span class="news-item__proj">羽毛球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">决胜局 19 平后的两个发球轮，接发站位往前压了半步</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--buzzer">读秒</span>
                <span class="news-item__time kt-data">本轮 · 昨天</span>
              </div>
              <p class="news-item__sum">那半步让前三拍的平均回合数从 6 拍降到 3 拍，主动权彻底换了手。</p>
            </div>
          </li>
          <li class="news-item" data-proj="swim">
            <span class="news-item__proj">游泳</span>
            <div class="news-item__body">
              <h3 class="news-item__title">200 米混合泳分段对照，第三段是全场真正的分水岭</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--review">复盘</span>
                <span class="news-item__time kt-data">上一轮 · 2 天前</span>
              </div>
              <p class="news-item__sum">仰泳段落后 0.4 秒，蛙泳段反超 1.1 秒，转身出水的前两划是全部差距来源。</p>
            </div>
          </li>
          <li class="news-item" data-proj="tabletennis">
            <span class="news-item__proj">乒乓球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">正手位被压制的那六分，从第七分开始改成了反手抢攻</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--review">复盘</span>
                <span class="news-item__time kt-data">上一轮 · 3 天前</span>
              </div>
              <p class="news-item__sum">接发球的站位没动，但第一板从搓变成了拧，对手的发球套路立刻失去了落点优势。</p>
            </div>
          </li>
          <li class="news-item" data-proj="basket">
            <span class="news-item__proj news-item__proj--basket">篮球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">客场第三节那波 12:2，暂停之后防守落位换成了三二联防</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--live">临场</span>
                <span class="news-item__time kt-data">上一轮 · 4 天前</span>
              </div>
              <p class="news-item__sum">换防点从弧顶挪到了两个 45 度，对手连着四个回合在同样的位置出手未果。</p>
            </div>
          </li>
          <li class="news-item" data-proj="foot">
            <span class="news-item__proj news-item__proj--foot">足球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">补时第 4 分钟的定位球，前点跑位与第一落点争顶的完整回放</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--buzzer">读秒</span>
                <span class="news-item__time kt-data">上一轮 · 5 天前</span>
              </div>
              <p class="news-item__sum">前点两人是佯动，真正的第一落点被留在小禁区线外，起跳时间差只有半拍。</p>
            </div>
          </li>
          <li class="news-item" data-proj="volley">
            <span class="news-item__proj news-item__proj--volley">排球</span>
            <div class="news-item__body">
              <h3 class="news-item__title">替补发球手连发六次跳发，把整局的接发节奏换了个方向</h3>
              <div class="news-item__meta">
                <span class="news-serie news-serie--live">临场</span>
                <span class="news-item__time kt-data">三周前 · 上一阶段</span>
              </div>
              <p class="news-item__sum">六次发球里四次压到底线，对方一传体系从双人接发退回了三人接发。</p>
            </div>
          </li>
        </ol>

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

  <section class="news-anatomy">
    <div class="kt-shell">
      <div class="news-anatomy__head">
        <p class="kt-idx">单篇结构</p>
        <h2 class="news-anatomy__h2">一篇战报，三种读法</h2>
        <p class="news-anatomy__lede">
          赶时间只读结论，想知道过程就顺着时间轴往下走，要做对照就翻到数据那一栏。每一篇环球体育赛后战报都按同一个顺序摆放，读熟之后你自然知道该先看哪一段。
        </p>
      </div>

      <div class="news-anatomy__grid">

        <div class="news-anatomy__tl">
          <h3 class="news-anatomy__h3"><span class="kt-idx kt-idx--sand">01</span>关键回合时间轴</h3>
          <p class="news-anatomy__p">
            从开场到终场，把改变过走势的回合单独拎出来，标上比赛用时。得分、换人、暂停用三种颜色分开，一眼能看出哪一段是转折。
          </p>
          <svg class="news-tl" viewBox="0 0 640 140" role="img" aria-label="关键回合时间轴示意，横向标出得分、换人与暂停三类节点">
            <line class="news-tl__axis" x1="24" y1="72" x2="616" y2="72"></line>
            <g class="news-tl__node news-tl__node--score">
              <circle cx="80" cy="72" r="11"></circle>
              <text class="news-tl__t" x="80" y="40">12:41</text>
              <text class="news-tl__s" x="80" y="106">得分</text>
              <title>第一节 12:41 底角三分命中，分差回到两分</title>
            </g>
            <g class="news-tl__node news-tl__node--sub">
              <circle cx="206" cy="72" r="11"></circle>
              <text class="news-tl__t" x="206" y="40">08:15</text>
              <text class="news-tl__s" x="206" y="106">换人</text>
              <title>第二节 08:15 双后卫同时登场，节奏被提起来</title>
            </g>
            <g class="news-tl__node news-tl__node--timeout">
              <circle cx="332" cy="72" r="11"></circle>
              <text class="news-tl__t" x="332" y="40">04:52</text>
              <text class="news-tl__s" x="332" y="106">暂停</text>
              <title>第三节 04:52 落后 9 分时叫停，防守落位随即调整</title>
            </g>
            <g class="news-tl__node news-tl__node--score">
              <circle cx="458" cy="72" r="11"></circle>
              <text class="news-tl__t" x="458" y="40">01:52</text>
              <text class="news-tl__s" x="458" y="106">得分</text>
              <title>第四节 01:52 连续两次前场抢断，八分差被抹平</title>
            </g>
            <g class="news-tl__node news-tl__node--score">
              <circle cx="584" cy="72" r="11"></circle>
              <text class="news-tl__t" x="584" y="40">加时</text>
              <text class="news-tl__s" x="584" y="106">得分</text>
              <title>加时赛前三个回合，客队一次都没有进入禁区</title>
            </g>
          </svg>
          <ul class="news-tl__legend">
            <li><span class="news-dot news-dot--score"></span>得分</li>
            <li><span class="news-dot news-dot--sub"></span>换人</li>
            <li><span class="news-dot news-dot--timeout"></span>暂停</li>
          </ul>
        </div>

        <div class="news-anatomy__bars">
          <h3 class="news-anatomy__h3"><span class="kt-idx kt-idx--sand">02</span>双方数据对照</h3>
          <p class="news-anatomy__p">
            每一项指标左右两条，数值等宽右对齐，扫一眼就知道谁在这一项上占了多少便宜。可以切到赛季平均，看看这场是常态还是意外。
          </p>

          <div class="news-bars">
            <input type="radio" name="dataset" id="ds-match" class="news-ctl" checked>
            <input type="radio" name="dataset" id="ds-season" class="news-ctl">
            <div class="news-bars__switch">
              <label for="ds-match">本场</label>
              <label for="ds-season">赛季平均</label>
            </div>

            <div class="news-bars__set" data-set="match">
              <div class="news-bar">
                <span class="news-bar__k">两分命中率</span>
                <span class="news-bar__pair">
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--a" style="width:47%"></span></span>
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--b" style="width:53%"></span></span>
                </span>
                <span class="news-bar__v kt-data">47 / 53</span>
              </div>
              <div class="news-bar">
                <span class="news-bar__k">篮板</span>
                <span class="news-bar__pair">
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--a" style="width:42%"></span></span>
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--b" style="width:58%"></span></span>
                </span>
                <span class="news-bar__v kt-data">34 / 47</span>
              </div>
              <div class="news-bar">
                <span class="news-bar__k">失误</span>
                <span class="news-bar__pair">
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--a" style="width:64%"></span></span>
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--b" style="width:36%"></span></span>
                </span>
                <span class="news-bar__v kt-data">18 / 10</span>
              </div>
            </div>

            <div class="news-bars__set" data-set="season">
              <div class="news-bar">
                <span class="news-bar__k">两分命中率</span>
                <span class="news-bar__pair">
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--a" style="width:51%"></span></span>
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--b" style="width:49%"></span></span>
                </span>
                <span class="news-bar__v kt-data">51 / 49</span>
              </div>
              <div class="news-bar">
                <span class="news-bar__k">篮板</span>
                <span class="news-bar__pair">
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--a" style="width:49%"></span></span>
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--b" style="width:51%"></span></span>
                </span>
                <span class="news-bar__v kt-data">41 / 43</span>
              </div>
              <div class="news-bar">
                <span class="news-bar__k">失误</span>
                <span class="news-bar__pair">
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--a" style="width:50%"></span></span>
                  <span class="news-bar__track"><span class="news-bar__fill news-bar__fill--b" style="width:50%"></span></span>
                </span>
                <span class="news-bar__v kt-data">13 / 13</span>
              </div>
            </div>
          </div>

          <figure class="news-anatomy__fig">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="场馆计分牌与数据面板特写，数字在暗色背景中发亮" loading="lazy" decoding="async">
            <figcaption class="kt-media__cap">数据栏与现场计分牌同步整理，赛后 2 小时内补齐。</figcaption>
          </figure>
        </div>

      </div>

      <div class="news-anatomy__verdict">
        <h3 class="news-anatomy__h3"><span class="kt-idx kt-idx--sand">03</span>三条结论</h3>
        <p class="news-anatomy__p">
          每篇固定在文末收三条，一条一句结论，后面跟着支撑它的那组数字。看完三条就知道这场球的核心矛盾在哪里，不必再从第一段读起。
        </p>
      </div>
    </div>
  </section>

  <section class="news-series">
    <div class="kt-shell">
      <figure class="news-series__banner">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="场边低角度视角，能看到边线与替补席局部，只有人物下半身与背影" loading="lazy" decoding="async">
      </figure>

      <div class="news-series__head">
        <p class="kt-idx kt-idx--cyan">系列 / 三种角度</p>
        <h2 class="news-series__h2">临场、复盘、读秒，跟哪个系列取决于你怎么看球</h2>
        <p class="news-series__lede">
          读者常常先认系列，再认项目。在战报专栏看环球体育这三个系列，等于给自己定了一个固定视角：有人只想知道现场发生了什么，有人想弄明白战术怎么变的，有人专挑最后两分钟。
        </p>
      </div>

      <div class="news-series__grid">
        <article class="news-serie news-serie--live">
          <span class="news-serie__dot"></span>
          <h3 class="news-serie__name">临场</h3>
          <p class="news-serie__p">
            以现场观察为主，写看得见的东西：谁在什么时候换了防守方式、哪个位置开始被反复攻击、观众的节奏在哪一段变了。适合刚看完直播、想把感觉对上事实的读者。
          </p>
          <p class="news-serie__meta kt-data">更新最勤 · 每个比赛日</p>
        </article>

        <article class="news-serie news-serie--review">
          <span class="news-serie__dot"></span>
          <h3 class="news-serie__name">复盘</h3>
          <p class="news-serie__p">
            回到战术与人员这一层，用分解动作和分段时间对照说明一场比赛的走向是怎么被改写的。篇幅更长，适合教练、赛事执行者和习惯做笔记的读者。
          </p>
          <p class="news-serie__meta kt-data">每轮 2 至 3 篇 · 隔日发布</p>
        </article>

        <article class="news-serie news-serie--buzzer">
          <span class="news-serie__dot"></span>
          <h3 class="news-serie__name">读秒</h3>
          <p class="news-serie__p">
            只盯最后几分钟与决胜阶段，把每一次停表、换人和关键出手逐个拆开。篇幅短、节奏快，适合在通勤路上补一场错过的比赛。
          </p>
          <p class="news-serie__meta kt-data">比赛日当晚 · 加时另起一篇</p>
        </article>
      </div>
    </div>
  </section>

  <section class="news-feedback" id="news-letter">
    <div class="kt-shell news-feedback__grid">
      <div class="news-feedback__copy">
        <p class="kt-idx">读者来信</p>
        <h2 class="news-feedback__h2">看到对不上的地方，写下来给编辑部</h2>
        <p class="news-feedback__p">
          读者来信栏目每月大约收到 400 封反馈，编辑部在 48 小时内回复。比分、时间、人员记录有问题，直接把战报标题和具体段落写进邮件，我们在核对后更新页面，并在文末标出更正时间。
        </p>
        <ul class="news-feedback__steps">
          <li><span class="kt-data">01</span>写明战报标题与需要更正的段落，附上可查的比赛记录来源。</li>
          <li><span class="kt-data">02</span>编辑部在 48 小时内回信，确认收到并给出处理方向。</li>
          <li><span class="kt-data">03</span>核对完成当天更新页面，文末保留更正说明与时间。</li>
        </ul>
        <p class="news-feedback__mail">
          来信请发 <span class="kt-data">service@hq-reader-hub.com.cn</span>；赛事运营方与媒体同行要谈数据整理、案例联合采写或品牌专栏，走<a href="/cooperation/">商务合作</a>更快，工作时段内 1 个工作日内首次响应。
        </p>
        <div class="news-feedback__acts">
          <a class="kt-btn kt-btn--signal" href="/help-center/">去帮助中心查使用问题</a>
          <a class="kt-btn kt-btn--ghost" href="/download/">订阅看台通讯</a>
        </div>
      </div>

      <div class="news-feedback__media">
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="夜场比赛的看台与灯光，观众只以剪影出现，画面带有明显颗粒感" loading="lazy" decoding="async">
        <div class="news-feedback__stat">
          <span class="news-feedback__n kt-data">5.6 万</span>
          <span class="news-feedback__l">看台通讯订阅读者，每周一期</span>
        </div>
      </div>
    </div>
  </section>

</main>

.page-news {
  --n-line: rgba(18, 33, 29, 0.14);
  --n-line-dark: rgba(232, 220, 198, 0.18);
  font-family: var(--kt-font-body);
  color: var(--kt-text);
  background: var(--kt-paper);
  overflow-x: clip;
}

/* mast */
.page-news .news-mast {
  background: var(--kt-ink);
  color: var(--kt-sand);
  padding: 44px 0 56px;
}

.page-news .news-mast__grid { display: grid; gap: 36px; }

.page-news .news-mast__title {
  margin: 14px 0 0;
  font-family: var(--kt-font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 9vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--kt-paper);
  max-width: 15em;
}

.page-news .news-mast__lede {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(232, 220, 198, 0.82);
  max-width: 34em;
}

.page-news .news-mast__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-news .news-mast__figs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--n-line-dark);
  border: 1px solid var(--n-line-dark);
  border-radius: var(--kt-r-md);
  overflow: hidden;
}

.page-news .news-fig {
  background: var(--kt-night);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-news .news-fig__n {
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1;
  color: var(--kt-cyan);
}

.page-news .news-fig__l { font-size: 12px; line-height: 1.5; color: rgba(232, 220, 198, 0.66); }

/* feed */
.page-news .news-feed { background: var(--kt-paper); }

.page-news .news-feed__grid {
  display: grid;
  gap: 32px;
  padding: 40px 0 72px;
}

.page-news .news-main { min-width: 0; }

.page-news .news-rail {
  border-left: 2px solid var(--kt-red);
  padding-left: 16px;
}

.page-news .news-rail__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-news .news-rail__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--n-line);
  font-size: 12.5px;
}

.page-news .news-rail__d { font-size: 11px; color: var(--kt-muted); }
.page-news .news-rail__t { position: relative; padding-left: 14px; line-height: 1.45; }

.page-news .news-rail__t::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kt-muted);
}

.page-news .news-rail__item--live .news-rail__t::before { background: var(--kt-red); }
.page-news .news-rail__item--review .news-rail__t::before { background: var(--kt-cyan); }
.page-news .news-rail__item--buzzer .news-rail__t::before { background: var(--kt-ochre); }

.page-news .news-rail__note { margin: 18px 0 0; font-size: 12px; line-height: 1.65; color: var(--kt-muted); }

.page-news .news-rail__note a {
  color: var(--kt-text);
  text-decoration: none;
  border-bottom: 1px solid var(--kt-cyan);
}

.page-news .news-rail__note a:hover,
.page-news .news-rail__note a:focus-visible { color: var(--kt-orange); border-bottom-color: var(--kt-orange); }

/* lead */
.page-news .news-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  border-radius: var(--kt-r-lg);
  overflow: hidden;
  background: var(--kt-redblack);
  border: 1px solid rgba(226, 59, 46, 0.5);
}

.page-news .news-lead__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.78) contrast(1.06);
}

.page-news .news-lead__over {
  position: relative;
  padding: 26px 20px 20px;
  background: linear-gradient(180deg, rgba(18,16,15,0) 0%, rgba(18,16,15,0.82) 34%, rgba(18,16,15,0.97) 100%);
}

.page-news .news-lead__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.page-news .news-lead__title {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.6vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--kt-paper);
}

.page-news .news-lead__sum {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(246, 240, 228, 0.78);
  max-width: 40em;
}

.page-news .news-lead__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(232, 220, 198, 0.2);
}

.page-news .news-lead__num {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 0.9;
  color: var(--kt-paper);
  letter-spacing: -0.03em;
}

.page-news .news-lead__vs { font-family: var(--kt-font-data); font-size: 1.4rem; color: var(--kt-red); }
.page-news .news-lead__meta { margin-left: auto; font-size: 11.5px; letter-spacing: 0.06em; color: var(--kt-ice); }

.page-news .news-verdict {
  margin-top: 16px;
  background: var(--kt-red);
  border-radius: var(--kt-r-sm);
  overflow: hidden;
}

.page-news .news-verdict__tab {
  cursor: pointer;
  padding: 11px 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #fff;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-news .news-verdict__tab::-webkit-details-marker { display: none; }
.page-news .news-verdict__tab::after { content: "＋"; margin-left: auto; font-size: 13px; }
.page-news .news-verdict[open] .news-verdict__tab::after { content: "－"; }

.page-news .news-verdict__list {
  margin: 0;
  padding: 4px 16px 16px 32px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13.5px;
  line-height: 1.7;
}

.page-news .news-verdict__list li { margin-top: 8px; }

/* controls */
.page-news .news-ctl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-news .news-tools {
  margin-top: 34px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--kt-text);
}

.page-news .news-tools__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-news .news-tools__row--chips { margin-top: 12px; }

.page-news .news-tools__views {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--n-line);
  border-radius: var(--kt-r-pill);
}

.page-news .news-tools__views label {
  cursor: pointer;
  padding: 5px 14px;
  border-radius: var(--kt-r-pill);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--kt-muted);
  transition: background var(--kt-t) var(--kt-e), color var(--kt-t) var(--kt-e);
}

.page-news .news-tools__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.page-news .news-tools__chips label {
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--kt-r-pill);
  border: 1px solid var(--n-line);
  font-size: 12.5px;
  color: var(--kt-text);
  transition: background var(--kt-t) var(--kt-e), color var(--kt-t) var(--kt-e), border-color var(--kt-t) var(--kt-e);
}

.page-news .news-tools__chips label:hover,
.page-news .news-tools__views label:hover { border-color: var(--kt-cyan); }

.page-news #nv-tight:checked ~ .news-tools label[for="nv-tight"],
.page-news #nv-loose:checked ~ .news-tools label[for="nv-loose"] {
  background: var(--kt-ink);
  color: var(--kt-paper);
}

.page-news #np-all:checked ~ .news-tools label[for="np-all"],
.page-news #np-basket:checked ~ .news-tools label[for="np-basket"],
.page-news #np-volley:checked ~ .news-tools label[for="np-volley"],
.page-news #np-foot:checked ~ .news-tools label[for="np-foot"] {
  background: var(--kt-ink);
  border-color: var(--kt-ink);
  color: var(--kt-cyan);
}

/* list */
.page-news .news-list { list-style: none; margin: 0; padding: 0; }

.page-news .news-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--n-line);
  transition: opacity var(--kt-t) var(--kt-e), border-color var(--kt-t) var(--kt-e), background var(--kt-t) var(--kt-e);
}

.page-news .news-item:hover {
  border-bottom-color: var(--kt-cyan);
  background: rgba(59, 240, 207, 0.06);
}

.page-news .news-item__proj {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding: 3px 0;
  color: var(--kt-muted);
  border-top: 3px solid var(--kt-muted);
  text-align: center;
}

.page-news .news-item__proj--basket { border-top-color: var(--kt-red); color: var(--kt-red); }
.page-news .news-item__proj--volley { border-top-color: var(--kt-ice); color: var(--kt-steel); }
.page-news .news-item__proj--foot { border-top-color: var(--kt-ochre); color: var(--kt-ochre); }

.page-news .news-item__title {
  margin: 0;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--kt-text);
}

.page-news .news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.page-news .news-item__time { font-size: 11.5px; letter-spacing: 0.04em; color: var(--kt-muted); }

.page-news .news-item__sum {
  display: none;
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--kt-muted);
  max-width: 42em;
}

.page-news .news-serie {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--kt-r-pill);
  font-size: 11px;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
}

.page-news .news-serie--live { color: var(--kt-red); }
.page-news .news-serie--review { color: #16897a; }
.page-news .news-serie--buzzer { color: var(--kt-ochre); }

.page-news #nv-loose:checked ~ .news-list .news-item { padding: 20px 0; }
.page-news #nv-loose:checked ~ .news-list .news-item__sum { display: block; }

.page-news #np-basket:checked ~ .news-list .news-item:not([data-proj="basket"]),
.page-news #np-volley:checked ~ .news-list .news-item:not([data-proj="volley"]),
.page-news #np-foot:checked ~ .news-list .news-item:not([data-proj="foot"]) { opacity: 0.3; }

/* anatomy */
.page-news .news-anatomy { background: var(--kt-sand); padding: 56px 0 64px; }
.page-news .news-anatomy__head { display: grid; gap: 12px; margin-bottom: 32px; }

.page-news .news-anatomy__h2 {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 6.5vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--kt-ink);
  max-width: 12em;
}

.page-news .news-anatomy__lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: #2c3a33;
  max-width: 34em;
}

.page-news .news-anatomy__grid { display: grid; gap: 28px; }

.page-news .news-anatomy__h3 {
  margin: 0 0 12px;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--kt-ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-news .news-anatomy__p { margin: 0 0 20px; font-size: 14px; line-height: 1.75; color: #34443c; }

.page-news .news-anatomy__tl,
.page-news .news-anatomy__bars {
  background: var(--kt-paper);
  border-radius: var(--kt-r-md);
  padding: 22px 18px;
}

.page-news .news-tl { display: block; width: 100%; height: auto; margin-top: 4px; }
.page-news .news-tl__axis { stroke: rgba(18, 33, 29, 0.22); stroke-width: 2; stroke-dasharray: 4 6; }

.page-news .news-tl__node circle {
  stroke: var(--kt-paper);
  stroke-width: 3;
  transition: r var(--kt-t) var(--kt-e);
}

.page-news .news-tl__node:hover circle { r: 14; }
.page-news .news-tl__node--score circle { fill: var(--kt-red); }
.page-news .news-tl__node--sub circle { fill: var(--kt-ochre); }
.page-news .news-tl__node--timeout circle { fill: var(--kt-steel); }

.page-news .news-tl__t { font-family: var(--kt-font-data); font-size: 15px; fill: var(--kt-ink); text-anchor: middle; }
.page-news .news-tl__s { font-size: 13px; fill: var(--kt-muted); text-anchor: middle; }

.page-news .news-tl__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--kt-muted);
}

.page-news .news-tl__legend li { display: flex; align-items: center; gap: 7px; }
.page-news .news-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.page-news .news-dot--score { background: var(--kt-red); }
.page-news .news-dot--sub { background: var(--kt-ochre); }
.page-news .news-dot--timeout { background: var(--kt-steel); }

.page-news .news-bars__switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--n-line);
  border-radius: var(--kt-r-pill);
  margin-bottom: 16px;
  width: fit-content;
}

.page-news .news-bars__switch label {
  cursor: pointer;
  padding: 5px 14px;
  border-radius: var(--kt-r-pill);
  font-size: 12px;
  color: var(--kt-muted);
  transition: background var(--kt-t) var(--kt-e), color var(--kt-t) var(--kt-e);
}

.page-news #ds-match:checked ~ .news-bars__switch label[for="ds-match"],
.page-news #ds-season:checked ~ .news-bars__switch label[for="ds-season"] {
  background: var(--kt-ink);
  color: var(--kt-cyan);
}

.page-news .news-bars__set { display: none; }
.page-news #ds-match:checked ~ .news-bars__set[data-set="match"] { display: block; }
.page-news #ds-season:checked ~ .news-bars__set[data-set="season"] { display: block; }

.page-news .news-bar {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--n-line);
}

.page-news .news-bar:last-child { border-bottom: 0; }
.page-news .news-bar__k { font-size: 12.5px; color: var(--kt-text); }
.page-news .news-bar__pair { display: grid; gap: 4px; }

.page-news .news-bar__track {
  display: block;
  height: 8px;
  border-radius: var(--kt-r-pill);
  background: rgba(18, 33, 29, 0.08);
  overflow: hidden;
}

.page-news .news-bar__fill { display: block; height: 100%; border-radius: var(--kt-r-pill); }
.page-news .news-bar__fill--a { background: var(--kt-red); }
.page-news .news-bar__fill--b { background: var(--kt-steel); }

.page-news .news-bar__v {
  font-size: 11.5px;
  text-align: right;
  color: var(--kt-muted);
  letter-spacing: 0.02em;
}

.page-news .news-anatomy__fig { margin: 20px 0 0; }

.page-news .news-anatomy__fig img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: var(--kt-r-sm);
  object-fit: cover;
}

.page-news .news-anatomy__fig figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--kt-muted); }

.page-news .news-anatomy__verdict {
  margin-top: 32px;
  padding: 24px 20px;
  border-radius: var(--kt-r-md);
  background: var(--kt-ink);
}

.page-news .news-anatomy__verdict .news-anatomy__h3 { color: var(--kt-paper); }
.page-news .news-anatomy__verdict .news-anatomy__p { color: rgba(232, 220, 198, 0.8); margin-bottom: 0; max-width: 46em; }

/* series */
.page-news .news-series { background: var(--kt-ink); color: var(--kt-sand); padding: 0 0 64px; }

.page-news .news-series__banner {
  margin: 0 0 36px;
  border-radius: 0 0 var(--kt-r-lg) var(--kt-r-lg);
  overflow: hidden;
}

.page-news .news-series__banner img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
}

.page-news .news-series__head { display: grid; gap: 12px; margin-bottom: 28px; }

.page-news .news-series__h2 {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--kt-paper);
  max-width: 16em;
}

.page-news .news-series__lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(232, 220, 198, 0.78);
  max-width: 34em;
}

.page-news .news-series__grid { display: grid; gap: 16px; }

.page-news .news-series__grid .news-serie {
  background: var(--kt-night);
  border: 1px solid var(--n-line-dark);
  border-radius: var(--kt-r-md);
  padding: 22px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color var(--kt-t) var(--kt-e), background var(--kt-t) var(--kt-e);
}

.page-news .news-series__grid .news-serie:hover { border-color: var(--kt-cyan); background: #0b221c; }

.page-news .news-serie__dot { width: 10px; height: 10px; border-radius: 50%; display: block; }
.page-news .news-serie--live .news-serie__dot { background: var(--kt-red); }
.page-news .news-serie--review .news-serie__dot { background: var(--kt-cyan); }
.page-news .news-serie--buzzer .news-serie__dot { background: var(--kt-ochre); }

.page-news .news-serie__name {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--kt-paper);
}

.page-news .news-serie__p { margin: 0; font-size: 13.5px; line-height: 1.78; color: rgba(232, 220, 198, 0.76); }

.page-news .news-serie__meta {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(59, 240, 207, 0.8);
  border-top: 1px solid var(--n-line-dark);
  padding-top: 10px;
}

/* feedback */
.page-news .news-feedback { background: var(--kt-paper); padding: 56px 0 64px; }
.page-news .news-feedback__grid { display: grid; gap: 32px; }

.page-news .news-feedback__h2 {
  margin: 12px 0 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--kt-ink);
  max-width: 14em;
}

.page-news .news-feedback__p { margin: 16px 0 0; font-size: 14.5px; line-height: 1.78; color: #3a4842; max-width: 34em; }

.page-news .news-feedback__steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-feedback__steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--kt-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--n-line);
}

.page-news .news-feedback__steps .kt-data { font-size: 12px; color: var(--kt-red); letter-spacing: 0.06em; }

.page-news .news-feedback__mail { margin: 20px 0 0; font-size: 13px; line-height: 1.8; color: var(--kt-muted); max-width: 38em; }
.page-news .news-feedback__mail .kt-data { color: var(--kt-ink); font-size: 12.5px; word-break: break-all; }

.page-news .news-feedback__mail a {
  color: var(--kt-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--kt-orange);
}

.page-news .news-feedback__mail a:hover,
.page-news .news-feedback__mail a:focus-visible { color: var(--kt-orange); }

.page-news .news-feedback__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.page-news .news-feedback__media {
  position: relative;
  border-radius: var(--kt-r-lg);
  overflow: hidden;
  background: var(--kt-redblack);
}

.page-news .news-feedback__media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.08);
}

.page-news .news-feedback__stat {
  padding: 16px 18px;
  background: var(--kt-redblack);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.page-news .news-feedback__n { font-size: 1.4rem; color: var(--kt-cyan); line-height: 1; }
.page-news .news-feedback__l { font-size: 12px; color: rgba(232, 220, 198, 0.72); }

/* desktop */
@media (min-width: 720px) {
  .page-news .news-mast { padding: 56px 0 72px; }
  .page-news .news-mast__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-news .news-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .page-news .news-lead { min-height: 500px; }
  .page-news .news-lead__over { padding: 32px 30px 24px; }
  .page-news .news-item { grid-template-columns: 70px minmax(0, 1fr); gap: 0 22px; }
  .page-news .news-item__title { font-size: 17px; }
  .page-news .news-anatomy,
  .page-news .news-feedback { padding: 72px 0 80px; }
  .page-news .news-anatomy__tl,
  .page-news .news-anatomy__bars { padding: 30px 26px; }
  .page-news .news-bar { grid-template-columns: 96px minmax(0, 1fr) 86px; }
  .page-news .news-series { padding-bottom: 80px; }
  .page-news .news-series__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .page-news .news-feedback__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 40px;
  }
}

@media (min-width: 960px) {
  .page-news .news-mast__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: end;
    gap: 56px;
  }

  .page-news .news-mast__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page-news .news-feed__grid {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 48px;
    padding: 56px 0 88px;
  }

  .page-news .news-rail {
    position: sticky;
    top: 102px;
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow: auto;
  }

  .page-news .news-rail__list { grid-template-columns: minmax(0, 1fr); }

  .page-news .news-lead { min-height: 540px; }

  .page-news .news-anatomy__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 32px;
    align-items: start;
  }

  .page-news .news-anatomy__head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
    gap: 32px;
    margin-bottom: 40px;
  }

  .page-news .news-anatomy__head .kt-idx { grid-column: 1 / -1; }

  .page-news .news-series__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: end;
    gap: 32px;
    margin-bottom: 36px;
  }

  .page-news .news-series__head .kt-idx { grid-column: 1 / -1; }
  .page-news .news-series__banner { margin-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-tl__node:hover circle { r: 11; }
  .page-news * { transition-duration: 0.01ms !important; }
}