.page-news {
  --news-gold-line: rgba(212, 175, 55, .45);
  --news-panel: rgba(255, 255, 255, .028);
  --news-panel-border: rgba(212, 175, 55, .16);
  overflow-x: clip;
  color: var(--color-neutral-light);
}

.page-news h1,
.page-news h2,
.page-news h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--color-white);
  line-height: 1.06;
}

.page-news h3 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
}

.page-news .news-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 3rem) 0 3.5rem;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 229, 204, .12), transparent 30%),
    linear-gradient(135deg, var(--color-pitch-green) 0%, #0C2A24 62%, var(--color-neutral-dark) 100%);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-55deg, transparent 0 22px, rgba(212, 175, 55, .05) 22px 23px);
  pointer-events: none;
}

.page-news .news-hero__inner {
  position: relative;
  z-index: 2;
}

.page-news .news-hero__grid {
  margin-top: 2.25rem;
  display: grid;
  gap: 2.5rem;
}

.page-news .news-hero__title {
  font-size: clamp(3rem, 8vw, 5.5rem);
  margin: .5rem 0 .5rem;
  text-transform: uppercase;
}

.page-news .news-hero__lead {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--color-gold-light);
  margin-bottom: 1rem;
}

.page-news .news-hero__desc {
  max-width: 42rem;
  font-size: 1.02rem;
  line-height: 1.8;
}

.page-news .hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: 0;
}

.page-news .hero-stats__item {
  background: var(--news-panel);
  border: 1px solid var(--news-panel-border);
  padding: 1.1rem .9rem;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.page-news .hero-stats__item dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-neutral-light);
  opacity: .8;
}

.page-news .hero-stats__item dd {
  font-size: clamp(1.35rem, 3vw, 2rem);
  color: var(--color-gold);
  margin: .3rem 0 0;
}

.page-news .news-hero__slant {
  position: absolute;
  right: -12%;
  bottom: -28%;
  width: 52%;
  height: 90%;
  background: linear-gradient(120deg, rgba(139, 0, 0, .55), rgba(106, 13, 173, .4));
  clip-path: polygon(30% 0, 100% 12%, 78% 100%, 0 86%);
  transform: rotate(-6deg);
  pointer-events: none;
}

.page-news .page-news__section {
  padding: 4.25rem 0;
  position: relative;
}

.page-news .page-news__section-head {
  margin-bottom: 2.25rem;
  border-left: 3px solid var(--color-gold);
  padding-left: 1rem;
}

.page-news .page-news__section-head .kicker {
  color: var(--color-electric-teal);
}

.page-news .page-news__section-head .section__heading {
  margin: .5rem 0 0;
}

.page-news .page-news__more {
  margin-top: 2rem;
}

.page-news .replay-section {
  background: linear-gradient(180deg, transparent 0, rgba(255, 255, 255, .015) 40%, transparent 100%);
}

.page-news .replay-list {
  position: relative;
  padding-left: 1.4rem;
}

.page-news .replay-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--color-gold), rgba(212, 175, 55, .12));
  opacity: .7;
}

.page-news .replay-item {
  position: relative;
  background: var(--news-panel);
  border: 1px solid var(--news-panel-border);
  padding: 1.25rem;
  margin: 0 0 1.75rem;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.page-news .replay-item--featured {
  border-color: rgba(212, 175, 55, .45);
  background: linear-gradient(135deg, rgba(212, 175, 55, .06), rgba(255, 255, 255, .02));
}

.page-news .replay-item::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 2rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .2), 0 0 14px rgba(212, 175, 55, .5);
}

.page-news .replay-item__media {
  margin-bottom: 1rem;
}

.page-news .replay-item__media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.page-news .replay-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}

.page-news .replay-item__tag {
  display: inline-block;
  background: var(--color-crimson);
  color: var(--color-white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .25rem .6rem;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.page-news .replay-item__time {
  font-family: var(--font-data);
  font-size: .8rem;
  color: var(--color-neutral-light);
  opacity: .75;
}

.page-news .replay-item__excerpt {
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.page-news .replay-item__detail {
  border-top: 1px dashed rgba(212, 175, 55, .3);
  padding-top: .75rem;
  margin-bottom: 1rem;
}

.page-news .replay-item__detail summary {
  cursor: pointer;
  color: var(--color-gold-light);
  font-weight: 700;
  font-size: .9rem;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

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

.page-news .replay-item__detail summary::before {
  content: "+";
  font-family: var(--font-data);
  font-size: 1.1rem;
  color: var(--color-electric-teal);
  line-height: 1;
}

.page-news .replay-item__detail[open] summary::before {
  content: "−";
}

.page-news .replay-item__detail p {
  color: var(--color-neutral-light);
  font-size: .88rem;
  line-height: 1.6;
  margin: .75rem 0 0;
}

.page-news .replay-item__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-top: .75rem;
}

.page-news .replay-item__facts .data-number {
  font-family: var(--font-data);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-gold);
}

.page-news .replay-item__facts i {
  font-style: normal;
  font-size: .78rem;
  color: var(--color-neutral-light);
  opacity: .8;
  margin-left: .2rem;
}

.page-news .filter-section {
  background: linear-gradient(180deg, #08140F, var(--color-pitch-green));
  border-top: 1px solid rgba(212, 175, 55, .2);
  border-bottom: 1px solid rgba(212, 175, 55, .2);
}

.page-news .filter-section__decor {
  position: absolute;
  left: -6%;
  top: 0;
  width: 46%;
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}

.page-news .filter-section__decor img {
  width: 100%;
  height: auto;
  display: block;
}

.page-news .filter-grid {
  position: relative;
  z-index: 1;
}

.page-news .filter-nav {
  margin-bottom: 1.5rem;
}

.page-news .filter-nav__title {
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-electric-teal);
  margin: 1.5rem 0 .75rem;
}

.page-news .filter-tabs,
.page-news .filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.page-news .filter-tab,
.page-news .filter-tags__item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(212, 175, 55, .25);
  color: var(--color-neutral-light);
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem .85rem;
  text-decoration: none;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}

.page-news .filter-tab:hover,
.page-news .filter-tags__item:hover {
  border-color: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-2px);
}

.page-news .filter-tab.is-active {
  background: var(--color-crimson);
  border-color: var(--color-crimson);
  color: var(--color-white);
}

.page-news .filter-tab.is-more {
  border-style: dashed;
  color: rgba(224, 224, 224, .55);
  cursor: default;
  pointer-events: none;
}

.page-news .filter-main-col {
  display: grid;
  gap: 1.5rem;
}

.page-news .filter-visual {
  background: var(--news-panel);
  padding: 1rem;
  border: 1px solid var(--news-panel-border);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

.page-news .filter-visual img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  background: #061210;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.page-news .filter-visual__caption {
  margin: .75rem 0 0;
  font-size: .82rem;
  opacity: .75;
  line-height: 1.5;
}

.page-news .filter-chart {
  background: var(--color-neutral-dark);
  border-left: 3px solid var(--color-gold);
  padding: 1.25rem;
}

.page-news .filter-chart__list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.page-news .filter-chart__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
}

.page-news .filter-chart__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: .5rem;
  height: .5rem;
  background: var(--color-gold);
  transform: rotate(45deg);
}

.page-news .filter-chart__footnote {
  margin-top: 1rem;
  font-size: .78rem;
  opacity: .65;
  line-height: 1.55;
  border-top: 1px dashed rgba(212, 175, 55, .3);
  padding-top: .8rem;
}

.page-news .version-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(106, 13, 173, .12), transparent 35%),
    var(--color-pitch-green);
}

.page-news .version-section__bg {
  position: absolute;
  right: -12%;
  top: 8%;
  width: 55%;
  max-width: 780px;
  opacity: .24;
  pointer-events: none;
}

.page-news .version-section__bg img {
  width: 100%;
  height: auto;
  display: block;
}

.page-news .version-list {
  position: relative;
  padding-left: 1.4rem;
}

.page-news .version-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4rem;
  bottom: .6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--color-gold), rgba(212, 175, 55, .12));
  opacity: .65;
}

.page-news .version-item {
  position: relative;
  padding-bottom: 1.8rem;
}

.page-news .version-item::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: .4rem;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--color-electric-teal);
  box-shadow: 0 0 12px rgba(0, 229, 204, .6);
}

.page-news .version-item__year {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--color-gold);
  line-height: 1;
  margin: 0 0 .4rem;
}

.page-news .version-item__copy p {
  margin: 0;
  line-height: 1.7;
  font-size: .93rem;
  color: var(--color-neutral-light);
}

.page-news .version-note {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(212, 175, 55, .25);
  padding: 1.15rem;
  font-size: .9rem;
  line-height: 1.6;
}

.page-news .tip-section {
  background:
    linear-gradient(180deg, transparent, rgba(255, 255, 255, .02) 40%, transparent);
  border-top: 1px solid rgba(212, 175, 55, .2);
}

.page-news .tip-grid {
  display: grid;
  gap: 2rem;
}

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

.page-news .tip-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--news-panel);
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid var(--color-gold);
}

.page-news .tip-item__no {
  font-family: var(--font-data);
  color: var(--color-gold);
  font-size: 1.4rem;
  line-height: 1;
  opacity: .9;
}

.page-news .tip-item p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
}

.page-news .tip-item strong {
  color: var(--color-white);
}

.page-news .tip-aside {
  align-self: start;
  background: linear-gradient(145deg, var(--color-neutral-dark), var(--color-pitch-green));
  border: 1px solid rgba(212, 175, 55, .3);
  padding: 1.35rem;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.page-news .tip-aside p {
  font-size: .92rem;
  line-height: 1.7;
  margin: .5rem 0 1.25rem;
}

.page-news .btn {
  align-self: flex-start;
}

@media (min-width: 40rem) {
  .page-news .news-hero__grid {
    grid-template-columns: 1.6fr 1fr;
    align-items: end;
  }
}

@media (min-width: 48rem) {
  .page-news .version-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.2rem;
    align-items: start;
  }

  .page-news .version-item__year {
    margin-bottom: 0;
    text-align: right;
  }
}

@media (min-width: 56rem) {
  .page-news .page-news__section {
    padding: 5rem 0;
  }

  .page-news .replay-list::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .page-news .replay-item {
    width: calc(50% - 2rem);
    margin-left: 0;
  }

  .page-news .replay-item:nth-child(even) {
    margin-left: auto;
  }

  .page-news .replay-item--featured {
    width: calc(65% - 2rem);
  }

  .page-news .replay-item::before {
    left: auto;
    right: -2.05rem;
  }

  .page-news .replay-item:nth-child(even)::before {
    right: auto;
    left: -2.05rem;
  }

  .page-news .replay-item__media {
    margin-bottom: 1rem;
  }

  .page-news .filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 2rem;
    align-items: start;
  }

  .page-news .filter-nav {
    margin-bottom: 0;
  }

  .page-news .filter-nav__title:first-child {
    margin-top: 0;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-news *,
  .page-news *::before,
  .page-news *::after {
    transition: none !important;
    animation: none !important;
  }
}