.news-screen,
.news-detail-screen {
  background:
    linear-gradient(rgba(247, 246, 241, 0.97), rgba(247, 246, 241, 0.97)),
    url("./assets/ink-home/scenes/paper-texture.webp") center / 72cqw 72cqw repeat;
  color: #172625;
  font-family: "Alibaba PuHuiTi", "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
}

.news-page,
.news-detail-page {
  min-height: 100%;
}

.news-topbar,
.news-detail-topbar {
  background: rgba(250, 250, 247, 0.97);
}

.news-masthead {
  position: relative;
  display: flex;
  min-height: 33.6cqw;
  margin: 3.2cqw 3.2cqw 0;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 5.2cqw 6.4cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.1);
  border-radius: 3.2cqw;
  background:
    radial-gradient(circle at 82% 8%, rgba(192, 206, 190, 0.54), transparent 34%),
    linear-gradient(125deg, rgba(245, 247, 239, 0.98), rgba(228, 235, 223, 0.94));
  box-shadow: 0 2.4cqw 6.4cqw rgba(20, 48, 45, 0.055);
}

.news-masthead::before,
.news-masthead::after {
  position: absolute;
  border: 0.267cqw solid rgba(21, 61, 63, 0.11);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.news-masthead::before {
  right: -7cqw;
  bottom: -12cqw;
  width: 36cqw;
  height: 36cqw;
}

.news-masthead::after {
  right: 4cqw;
  bottom: -10cqw;
  width: 22cqw;
  height: 22cqw;
}

.news-masthead > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.news-masthead > div > span {
  display: block;
  color: #71817d;
  font-size: 2.4cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
}

.news-masthead h2 {
  margin: 2.4cqw 0 1.5cqw;
  color: #153d3f;
  font-family: var(--calligraphy);
  font-size: 5.4cqw;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.04em;
}

.news-masthead p {
  margin: 0;
  color: #64716f;
  font-size: 3.1cqw;
  line-height: 1.45;
}

.news-masthead > img {
  position: relative;
  z-index: 1;
  width: 12.8cqw;
  height: 12.8cqw;
  margin-left: 3.2cqw;
  object-fit: contain;
  opacity: 0.88;
}

.news-categories {
  display: flex;
  gap: 2.1cqw;
  margin: 3.2cqw 0 0;
  overflow-x: auto;
  padding: 0 3.2cqw 1.3cqw;
  scrollbar-width: none;
}

.news-categories::-webkit-scrollbar {
  display: none;
}

.news-categories button {
  flex: 0 0 auto;
  min-height: 9.6cqw;
  padding: 0 4cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.12);
  border-radius: 4.8cqw;
  background: rgba(255, 255, 255, 0.58);
  color: #64716f;
  font-size: 3.1cqw;
}

.news-categories button.active {
  border-color: #204a46;
  background: #204a46;
  color: #f7f7f2;
  box-shadow: 0 1.6cqw 3.2cqw rgba(32, 74, 70, 0.14);
}

.news-result-line {
  display: flex;
  min-height: max(11.7cqw, 44px);
  margin: 2.1cqw 3.2cqw 1.6cqw;
  align-items: center;
  justify-content: space-between;
  gap: 3.2cqw;
}

.news-result-line strong {
  min-width: 0;
  overflow: hidden;
  color: #172625;
  font-family: var(--calligraphy);
  font-size: 4.5cqw;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-result-sort {
  position: relative;
  display: grid;
  width: max(11.7cqw, 44px);
  min-width: max(11.7cqw, 44px);
  min-height: max(11.7cqw, 44px);
  flex: none;
  place-items: center;
  z-index: 8;
}

.news-sort-toggle {
  position: relative;
  width: max(11.7cqw, 44px);
  height: max(11.7cqw, 44px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #263a38;
}

.news-sort-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.1cqw;
  height: 2.1cqw;
  border-right: 0.4cqw solid currentColor;
  border-bottom: 0.4cqw solid currentColor;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -72%) rotate(45deg);
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

.news-sort-toggle[aria-expanded="true"]::after {
  transform: translate(-50%, -28%) rotate(225deg);
}

.news-sort-menu {
  position: absolute;
  top: calc(100% + 1.1cqw);
  right: 0;
  display: grid;
  width: 29.9cqw;
  gap: 0.5cqw;
  padding: 1.3cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.12);
  border-radius: 2.7cqw;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 3.2cqw 8.5cqw rgba(18, 43, 41, 0.16);
  backdrop-filter: blur(4cqw);
}

.news-sort-menu[hidden] {
  display: none;
}

.news-sort-menu button {
  position: relative;
  width: 100%;
  min-height: 10.7cqw;
  padding: 0 7.2cqw 0 3.2cqw;
  border: 0;
  border-radius: 2.1cqw;
  background: transparent;
  color: #51615f;
  font-size: 3.2cqw;
  line-height: 1;
  text-align: left;
}

.news-sort-menu button[aria-checked="true"] {
  background: rgba(32, 74, 70, 0.08);
  color: #204a46;
  font-weight: 600;
}

.news-sort-menu button[aria-checked="true"]::after {
  position: absolute;
  top: 50%;
  right: 3.2cqw;
  width: 1.8cqw;
  height: 1cqw;
  border-bottom: 0.4cqw solid currentColor;
  border-left: 0.4cqw solid currentColor;
  content: "";
  transform: translateY(-65%) rotate(-45deg);
}

.news-list {
  display: grid;
  gap: 2.4cqw;
  padding: 0 3.2cqw 6.4cqw;
}

.news-card {
  display: grid;
  grid-template-columns: 28.8cqw minmax(0, 1fr);
  width: 100%;
  min-height: 27.2cqw;
  overflow: hidden;
  padding: 2.4cqw;
  border: 0.267cqw solid rgba(22, 57, 55, 0.1);
  border-radius: 2.7cqw;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 1.6cqw 4.8cqw rgba(23, 48, 45, 0.045);
  text-align: left;
}

.news-card-media {
  position: relative;
  display: block;
  width: 28.8cqw;
  height: 22.4cqw;
  overflow: hidden;
  border-radius: 2.1cqw;
  background: #dfe5df;
}

.news-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.news-card-copy {
  display: flex;
  min-width: 0;
  padding-left: 3.2cqw;
  flex-direction: column;
}

.news-card-copy strong {
  display: block;
  margin-top: 0;
  overflow: hidden;
  color: #183534;
  font-family: "Songti SC", "STSong", serif;
  font-size: 3.8cqw;
  font-weight: 700;
  line-height: 1.38;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card-copy > small {
  display: -webkit-box;
  min-height: 7.98cqw;
  margin-top: 1.2cqw;
  overflow: hidden;
  color: #697573;
  font-size: 2.75cqw;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-card-meta {
  display: flex;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.4cqw;
  color: #8b9491;
  font-size: 2.45cqw;
  line-height: 1;
}

.news-card:active {
  transform: scale(0.985);
}

.news-card:active .news-card-media img {
  transform: scale(1.025);
}

.news-empty {
  margin: 6.4cqw 3.2cqw;
  padding: 10.7cqw 5.3cqw;
  border: 0.267cqw solid rgba(22, 57, 55, 0.09);
  border-radius: 3.2cqw;
  background: rgba(255, 255, 255, 0.68);
  text-align: center;
}

.news-empty > span {
  display: grid;
  width: 14.4cqw;
  height: 14.4cqw;
  margin: 0 auto;
  place-items: center;
  border: 0.267cqw solid rgba(21, 61, 63, 0.18);
  border-radius: 50%;
  color: #204a46;
  font-family: var(--calligraphy);
  font-size: 6.4cqw;
}

.news-empty h2 {
  margin: 3.2cqw 0 1.6cqw;
  font-size: 4.2cqw;
}

.news-empty p {
  margin: 0;
  color: #7c8784;
  font-size: 3.2cqw;
}

.news-empty button {
  min-height: 11.7cqw;
  margin-top: 4.8cqw;
  padding: 0 5.3cqw;
  border: 0;
  border-radius: 2.4cqw;
  background: #204a46;
  color: #fff;
  font-size: 3.4cqw;
}

.news-detail-page {
  padding-bottom: 20.8cqw;
  background: transparent;
}

.news-detail-state {
  margin: 5.3cqw;
  padding: 13.3cqw 6.4cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.1);
  border-radius: 3.2cqw;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.news-detail-state > span {
  display: grid;
  width: 14.4cqw;
  height: 14.4cqw;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e7ece5;
  color: #204a46;
  font-family: var(--calligraphy);
  font-size: 5.3cqw;
}

.news-detail-state h1 {
  margin: 4cqw 0 1.6cqw;
  color: #183534;
  font-size: 5cqw;
}

.news-detail-state p {
  margin: 0;
  color: #74807d;
  font-size: 3.2cqw;
  line-height: 1.65;
}

.news-detail-state button {
  min-height: 11.7cqw;
  margin-top: 5.3cqw;
  padding: 0 5.3cqw;
  border: 0;
  border-radius: 2.4cqw;
  background: #204a46;
  color: #fff;
  font-size: 3.4cqw;
}

.news-article {
  padding-bottom: 10.7cqw;
}

.news-article .video-player.news-detail-cover {
  margin: 0;
  background: #dfe5df;
}

.news-article .video-player.news-detail-cover > img {
  filter: saturate(0.78) brightness(1.02) contrast(0.96);
}

.news-article .video-player.news-detail-cover::after {
  background: linear-gradient(to bottom, transparent 58%, rgba(9, 24, 22, 0.58));
}

.news-detail-cover figcaption {
  position: absolute;
  z-index: 2;
  right: 4.3cqw;
  bottom: 3.5cqw;
  left: 4.3cqw;
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 2.55cqw;
  line-height: 1.55;
  text-shadow: 0 0.4cqw 1.6cqw rgba(0, 0, 0, 0.28);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-publisher-row .video-author-avatar {
  background: #e6ece5;
  color: #315c57;
}

.news-detail-body {
  margin-top: 5.3cqw;
  padding-top: 4.2cqw;
  border-top: 0.18cqw solid rgba(25, 57, 57, 0.1);
}

.news-detail-lead {
  margin: 0;
  padding-left: 3.2cqw;
  border-left: 0.8cqw solid rgba(155, 48, 42, 0.72);
  color: #40504e;
  font-family: var(--section-title-font);
  font-size: 3.45cqw;
  line-height: 1.8;
}

.news-detail-body > section {
  margin-top: 6.4cqw;
}

.news-detail-body h2 {
  margin: 0 0 2.1cqw;
  color: #173b3c;
  font-family: var(--section-title-font);
  font-size: 4.45cqw;
  font-weight: 500;
  line-height: 1.4;
}

.news-detail-body section p {
  margin: 0;
  color: #3f4e4c;
  font-size: 3.35cqw;
  line-height: 1.9;
}

.news-detail-content .news-article-video {
  margin: 6.4cqw 0 0;
}

.news-detail-related {
  margin-top: 7.5cqw;
}

.news-article-video {
  position: relative;
  margin: 4.3cqw 5.4cqw 0;
  overflow: hidden;
  border-radius: 2.7cqw;
  background: #173b3c;
}

.news-article-video > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.78;
}

.news-article-video button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.1cqw;
  border: 0;
  background: linear-gradient(transparent, rgba(14, 37, 36, 0.42));
  color: #fff;
  font-size: 3.4cqw;
  font-weight: 600;
}

.news-article-video button img {
  width: 9.6cqw;
  height: 9.6cqw;
}

.news-article-video.is-played button {
  align-items: flex-end;
  padding-bottom: 4cqw;
}

.news-comments {
  margin: 8cqw 5.4cqw 0;
  padding-top: 4.2cqw;
  border-top: 0.18cqw solid rgba(25, 57, 57, 0.1);
}

.news-comments > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.news-comments > header h2 {
  margin: 0;
  color: #173b3c;
  font-family: var(--section-title-font);
  font-size: 4.45cqw;
  font-weight: 500;
}

.news-comments > header span {
  color: #8a9491;
  font-size: 2.8cqw;
}

.news-comment-form {
  margin-top: 4cqw;
}

.news-replying {
  display: flex;
  min-height: 9.6cqw;
  margin: 0 0 2.1cqw;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.7cqw;
  border-radius: 2.1cqw;
  background: #eef2eb;
  color: #53625f;
  font-size: 2.8cqw;
}

.news-replying[hidden] {
  display: none;
}

.news-replying button {
  min-width: 10.7cqw;
  min-height: 10.7cqw;
  padding: 0;
  background: transparent;
  color: #9b302a;
}

.news-comment-form textarea {
  display: block;
  width: 100%;
  min-height: 18.7cqw;
  resize: vertical;
  padding: 3.2cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.14);
  border-radius: 2.4cqw;
  outline: 0;
  background: #fff;
  color: #243c3a;
  font: inherit;
  font-size: 3.45cqw;
  line-height: 1.55;
}

.news-comment-form textarea:focus {
  border-color: #2c686a;
  box-shadow: 0 0 0 0.8cqw rgba(44, 104, 106, 0.09);
}

.news-comment-form footer {
  display: flex;
  min-height: 12.8cqw;
  align-items: center;
  justify-content: space-between;
}

.news-comment-form small {
  color: #8a9491;
  font-size: 2.55cqw;
}

.news-comment-form button {
  min-width: 21.3cqw;
  min-height: 10.7cqw;
  padding: 0 4.3cqw;
  border: 0;
  border-radius: 2.4cqw;
  background: #204a46;
  color: #fff;
  font-size: 3.2cqw;
  font-weight: 600;
}

.news-comment-form .news-replying button {
  min-width: 10.7cqw;
  min-height: 10.7cqw;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9b302a;
  font-size: 2.8cqw;
  font-weight: 500;
}

.news-comment-list {
  display: grid;
  margin-top: 0.8cqw;
}

.news-comment {
  display: grid;
  grid-template-columns: 9.6cqw minmax(0, 1fr);
  gap: 0 2.7cqw;
  padding: 4cqw 0;
  border-top: 0.267cqw solid rgba(21, 61, 63, 0.09);
}

.news-comment > span {
  grid-row: 1 / 4;
  display: grid;
  width: 9.6cqw;
  height: 9.6cqw;
  place-items: center;
  border-radius: 50%;
  background: #e7ece5;
  color: #315c57;
  font-family: var(--calligraphy);
  font-size: 3.7cqw;
}

.news-comment strong {
  color: #223b39;
  font-size: 3.25cqw;
}

.news-comment time {
  margin-top: 0.5cqw;
  color: #929a98;
  font-size: 2.45cqw;
}

.news-comment p {
  margin: 2.1cqw 0 0;
  color: #4f5f5c;
  font-size: 3.25cqw;
  line-height: 1.65;
}

.news-comment-action {
  grid-column: 2;
  justify-self: start;
  min-height: 11.7cqw;
  margin-top: 1.1cqw;
  padding: 0 2.7cqw;
  border: 0;
  background: transparent;
  color: #466762;
  font-size: 2.8cqw;
}

.news-comment-replies {
  grid-column: 2;
  display: grid;
  gap: 1.6cqw;
  margin-top: 1.3cqw;
  padding: 2.4cqw 2.7cqw;
  border-radius: 2.1cqw;
  background: #f1f3ee;
}

.news-comment-replies p {
  margin: 0;
  color: #596966;
  font-size: 2.95cqw;
  line-height: 1.55;
}

.news-comment-replies strong {
  margin-right: 1.3cqw;
  color: #294b47;
  font-size: inherit;
}

.news-comments-disabled {
  margin: 8cqw 5.4cqw 0;
  padding: 6.4cqw 4.3cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.09);
  border-radius: 2.7cqw;
  background: rgba(239, 242, 235, 0.72);
  text-align: center;
}

.news-comments-disabled strong {
  display: block;
  color: #284542;
  font-size: 3.6cqw;
}

.news-comments-disabled p {
  margin: 1.3cqw 0 0;
  color: #788481;
  font-size: 2.9cqw;
  line-height: 1.55;
}

.news-report-form select,
.news-report-form textarea {
  width: 100%;
  margin-top: 1.3cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.16);
  border-radius: 2.1cqw;
  background: #fff;
  color: #243c3a;
  font: inherit;
}

.news-report-form select {
  min-height: 11.7cqw;
  padding: 0 3.2cqw;
}

.news-report-form textarea {
  min-height: 18.7cqw;
  resize: vertical;
  padding: 3.2cqw;
}

[data-news-report-error] {
  display: block;
  min-height: 4.8cqw;
  margin-top: 1.1cqw;
  color: #a8342b;
  font-size: 2.7cqw;
}

.news-comment-empty {
  padding: 5.3cqw 0 1.6cqw;
  color: #8a9491;
  font-size: 3.2cqw;
  text-align: center;
}

.news-detail-actionbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 18.1cqw;
  padding: 1.3cqw 4.3cqw 2.7cqw;
  border-top: 0.267cqw solid rgba(21, 61, 63, 0.1);
  background: rgba(253, 252, 249, 0.98);
  box-shadow: 0 -1.6cqw 4.8cqw rgba(20, 48, 45, 0.055);
  backdrop-filter: blur(12px);
}

.news-detail-actionbar[hidden] {
  display: none;
}

.news-detail-actionbar::after {
  position: absolute;
  bottom: 0.7cqw;
  left: 50%;
  width: 32cqw;
  height: 1.1cqw;
  border-radius: 2cqw;
  background: #0b0d0d;
  content: "";
  transform: translateX(-50%);
}

.news-detail-actionbar button {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  border: 0;
  background: transparent;
  color: #52615e;
  font-size: 3cqw;
}

.news-detail-actionbar button + button::before {
  position: absolute;
  top: 2.1cqw;
  bottom: 2.1cqw;
  left: 0;
  width: 0.267cqw;
  background: rgba(21, 61, 63, 0.09);
  content: "";
}

.news-detail-actionbar img {
  width: 5.1cqw;
  height: 5.1cqw;
  object-fit: contain;
  opacity: 0.76;
}

.news-detail-actionbar em {
  min-width: 4.8cqw;
  color: #8b9491;
  font-size: 2.55cqw;
  font-style: normal;
  text-align: left;
}

.news-detail-actionbar button:disabled {
  color: #9ba4a1;
  opacity: 0.64;
}

.news-detail-actionbar [data-news-like][aria-pressed="true"],
.news-detail-actionbar [data-news-favorite][aria-pressed="true"] {
  color: #a8342b;
}

.news-detail-actionbar [data-news-like][aria-pressed="true"] img,
.news-detail-actionbar [data-news-favorite][aria-pressed="true"] img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(30%) saturate(3212%) hue-rotate(334deg) brightness(89%) contrast(92%);
  opacity: 1;
}

.news-card:focus-visible,
.news-categories button:focus-visible,
.news-sort-toggle:focus-visible,
.news-sort-menu button:focus-visible,
.news-comment-form button:focus-visible,
.news-comment-action:focus-visible,
.news-detail-state button:focus-visible,
.news-detail-actionbar button:focus-visible {
  outline: 0.533cqw solid #2c686a;
  outline-offset: -0.8cqw;
}

.phone[data-page="news"] .bottom-nav {
  display: none;
}

.phone[data-page="news"] .statusbar {
  height: 11.7cqw;
  background: rgba(250, 250, 247, 0.98);
}

.phone[data-page="news"] .toast {
  bottom: 5.3cqw;
}

.phone[data-subpage="news-detail"] .toast {
  bottom: 21.3cqw;
}

html.view-h5 .news-detail-page {
  padding-bottom: calc(16cqw + env(safe-area-inset-bottom, 0px));
}

html.view-h5 .news-detail-actionbar {
  height: calc(15.5cqw + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.view-h5 .news-detail-actionbar::after {
  display: none;
}

@media (hover: hover) {
  .news-card:hover {
    border-color: rgba(21, 61, 63, 0.2);
    box-shadow: 0 2.1cqw 6.4cqw rgba(23, 48, 45, 0.08);
  }

  .news-card:hover .news-card-media img {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .news-card,
  .news-categories button,
  .news-detail-actionbar button {
    transition: transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-card,
  .news-card-media img,
  .news-categories button,
  .news-detail-actionbar button {
    transition: none;
  }
}