html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  background-color: #fff;
  font-family: 'PingFang SC', '思源黑体', '方正兰亭黑_GBK', '方正黑体_GBK',
    'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

[hidden],
.hidden {
  display: none;
}

.social-media {
  --icon-size: 32px;
  --arrow-size: 12px;
  --gap: 8px;

  display: flex;
  flex-direction: column;
  align-items: end;
  row-gap: var(--gap);
  position: relative;
  flex: auto;
  padding: 16px 32px 16px 16px;
  /* border-radius: 8px; */
  /* background-color: #083e73; */
  user-select: none;

  @media (max-width: 640px) {
    transform: translateX(-10%);
  }

  .platform {
    .qrcode-image {
      z-index: -1;
      position: absolute;
      /* left: 24px; */
      right: calc(var(--icon-size) + var(--arrow-size) + var(--gap) + 32px);
      top: 16px;
      height: calc(100% - 32px);
      aspect-ratio: 1;
      object-fit: contain;
      border-radius: 8px;
      background-color: #fff;
      opacity: 0;
      transition: all var(--transition-duration-faster);
    }

    .icon {
      display: flex;
      align-items: center;
      width: var(--icon-size);
      height: var(--icon-size);
      background: center / contain no-repeat;
      opacity: 0.6;
      cursor: pointer;
      transition: all var(--transition-duration-faster);

      &::before {
        display: block;
        width: 12px;
        aspect-ratio: 1/1.25;
        margin-left: calc((var(--arrow-size) + var(--gap)) * -1);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background-color: #fff;
        opacity: 0;
        transition: all var(--transition-duration-faster);
        content: '';
      }
    }

    &.wechatvideo .icon {
      background-image: url('../images/icon-wechat-video-circle.svg');
    }

    &.wechat .icon {
      background-image: url('../images/icon-wechat-circle.svg');
    }

    &.weibo .icon {
      background-image: url('../images/icon-sina-weibo-circle.svg');
    }

    &.xiaohongshu .icon {
      background-image: url('../images/icon-xiaohongshu-circle.svg');
    }

    &.tiktok .icon {
      background-image: url('../images/icon-tiktok-circle.svg');
    }

    &.active {
      .qrcode-image {
        z-index: 0;
        opacity: 1;
      }

      .icon {
        opacity: 1;

        &::before {
          opacity: 1;
        }
      }
    }
  }
}

article {
  header {
    margin-top: 20px;
    margin-bottom: 40px;
    padding-bottom: 40px;

    @media (max-width: 640px) {
      margin-top: 20px;
      margin-bottom: 40px;
      padding-bottom: 20px;
    }
  }

  .news-title {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 500;
    text-align: center;
    color: var(--theme-color);

    @media (min-width: 1281px) {
      font-size: 2rem;
    }

    @media (max-width: 1024px) {
      max-width: unset;
    }
  }

  .news-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25em 1em;
    margin-top: 2em;
    color: #666;

    @media (max-width: 640px) {
      font-size: 0.875em;
    }

    & > span {
      flex: none;
    }
  }

  .news-content {
    font-family: '方正仿宋_GBK', fangsong, serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 0;
      margin-bottom: 0;
      font-family: 'PingFang SC', '思源黑体', '方正兰亭黑_GBK', '方正黑体_GBK',
        'Microsoft YaHei', sans-serif;
      font-weight: 600;
      line-height: 1.25;
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
      text-indent: 2em;
    }

    p {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 19px;
      text-indent: 2em;
      text-align: justify;
    }

    iframe {
      border: none;
    }

    img,
    video,
    audio {
      display: block;
      max-width: 100%;
      margin: 0 auto;

      @media (min-width: 1024px) {
        max-width: 800px;
      }
    }
  }
}