/* Article Single Page */

.article-page {
  padding-left: 2.778vw;
  font-family: "Abolition";
}

.article-page .episode-main h1:not(.episode-title),
.article-page .episode-main h2,
.article-page .episode-main h3,
.article-page .episode-main h4,
.article-page .episode-main h5,
.article-page .episode-main h6 {
  /* padding-left: 2.778vw; */
  font-family: "Abolition";
  margin: 2.7778vw 0 1.3889vw;
  font-size: 2.7778vw;
  line-height: 110%;
}

.article-page .episode-main p,
.article-page .episode-main a,
.article-page .episode-main span:not(.episode-meta span) {
  /* padding-left: 2.778vw; */
  font-family: "Neue Machina";
  font-size: 1.111vw;
  line-height: 150%;
}
.article-page .episode-main strong {
  font-weight: 800;
}
.article-page .episode-main blockquote {
  padding-left: 2vw;
}
.article-page .episode-main blockquote p {
  margin: 1vw 0;
}

.article-page .episode-content {
  display: flex;
}

.article-page .episode-main {
  width: 62.5vw;
  margin-bottom: 2.7778vw;
}

.article-page .episode-sidebar {
  width: 34.722vw;
  display: flex;
  flex-direction: column;
  padding: 2.778vw;
}

.sidebar-inner {
  position: sticky;
  top: 2.778vw;
}

.article-page .episode-meta {
  display: flex;
  align-items: center;
  gap: 1.389vw;
  margin-bottom: 0.556vw;
}

.article-page .episode-meta span {
  background: #91ea00;
  color: #000;
  padding: 0.417vw 0.694vw 0.694vw;
  font-size: 0.972vw;
  line-height: 100%;
  text-transform: uppercase;
}

.article-page .episode-meta p {
  font-family: "Neue Machina";
  font-size: 0.972vw;
  line-height: 1.25vw;
  font-weight: 500;
  text-transform: uppercase;
}

.article-page .episode-title {
  font-size: 6.944vw;
  line-height: 6.944vw;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 1.667vw;
}

.article-page .episode-video {
  overflow: hidden;
  transition: 0.4s;
}

.article-page .episode-video img {
  width: 100%;
  max-height: 30vw;
  object-fit: cover;
  display: block;
  margin-bottom: 2.2222vw;
}

.article-page .episode-actions {
  display: flex;
  align-items: center;
  gap: 1.389vw;
  margin-top: 1.667vw;
}

.article-page .episode-actions a {
  display: flex;
  align-items: center;
  gap: 0.556vw;
  background: #fff;
  color: #000;
  padding: 0.694vw 0.833vw 0.972vw;
  font-size: 1.389vw;
  line-height: 100%;
  text-transform: uppercase;
  transition: 0.4s;
}

.article-page .episode-actions a::after {
  content: "";
  display: inline-block;
  width: 0.972vw;
  height: 0.972vw;
  background: url("./images/headphones.svg") center / contain no-repeat;
  transition: 0.4s;
}

.article-page .episode-actions a:hover {
  color: #ff3b1f;
}

.article-page .episode-actions a:hover::after {
  background: url("./images/headphones-orange.svg") center / contain no-repeat;
}

.article-page .episode-actions span {
  font-family: "Neue Machina";
  font-weight: 500;
  font-size: 1.389vw;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0;
}

.writer-block h2,
.related-block h2 {
  font-family: "Neue Machina";
  font-size: 1.389vw;
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
  color: #5d5d5d;
  margin-bottom: 0.833vw;
}

.writer-block {
  margin-bottom: 2.778vw;
}

.writer-card {
  display: flex;
  align-items: center;
  gap: 0.972vw;
  background: #292929;
  position: relative;
}

.writer-card img {
  width: 5.556vw;
  height: 5.556vw;
  object-fit: cover;
  display: block;
}

.writer-info p {
  font-size: 1.667vw;
  line-height: 2.083vw;
  font-weight: 400;
  text-transform: uppercase;
}

.article-related-list {
  display: flex;
  flex-direction: column;
  gap: 1.389vw;
}

.article-related-card {
  display: block;
}

.related-tag {
  display: inline-block;
  background: #5d5d5d;
  color: #fff;
  padding: 0.417vw 0.694vw 0.694vw;
  font-size: 0.972vw;
  line-height: 100%;
  letter-spacing: 3%;
  text-transform: uppercase;
  margin-bottom: 0.139vw;
}

.article-related-card h3 {
  font-size: 2.778vw;
  line-height: 2.778vw;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 1.111vw;
  letter-spacing: 0;
  transition: 0.4s;
}

.article-related-card:hover h3 {
  color: #fe4622;
}

.date-span {
  font-family: "Neue Machina";
  font-size: 0.972vw;
  font-weight: 500;
  line-height: 1.25vw;
  text-transform: uppercase;
  letter-spacing: 0;
}

.article-intro {
  width: 54.514vw;
  margin-top: 2.778vw;
}

.article-intro p {
  font-family: "Neue Machina";
  font-size: 1.111vw;
  line-height: 1.806vw;
  font-weight: 500;
}

.main-description {
  width: 54.514vw;
  margin-top: 2.778vw;
  font-family: "Neue Machina";
  font-size: 1.389vw;
  line-height: 1.944vw;
  font-weight: 500;
  letter-spacing: 0;
}

/* Article Body */

.article-body {
  width: 62.5vw;
  margin-top: 2.778vw;
  font-family: "Neue Machina";
}

.article-body .article-text-block:nth-child(odd) {
  margin-bottom: 2.778vw;
}

.article-text-block h2 {
  font-family: "Abolition";
  font-size: 2.778vw;
  line-height: 2.778vw;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 1.389vw;
}

.article-text-block p {
  font-family: "Neue Machina";
  width: 54.514vw;
  font-size: 1.111vw;
  line-height: 1.806vw;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 1.111vw;
}

.article-text-block a {
  color: #fe4622;
}

.article-image-block img {
  width: 100%;
  display: block;
}

.article-image-block p {
  margin: 0.833vw 0 2.778vw;
  font-size: 0.972vw;
  font-weight: 500;
  font-family: "Neue Machina";
  line-height: 1.25vw;
  color: rgba(255, 255, 255, 0.7);
}

/* Article Popular Text */

.most-popular-list {
  width: 54.514vw;
  margin-bottom: 2.778vw;
  font-family: "Neue Machina";
}

.most-popular-list p {
  margin-bottom: 0.694vw;
}

.most-popular-list ul {
  padding-left: 1.111vw;
}

.most-popular-list li {
  font-size: 1.111vw;
  line-height: 1.806vw;
  font-weight: 500;
  letter-spacing: 0;
}

@media (max-width: 960px) {

  .article-page {
    padding: 0 5.333vw 5.333vw;
  }

  .article-page .episode-content {
    display: flex;
    flex-direction: column;
  }

  .article-page .episode-main {
    width: 100%;
  }

  .article-page .episode-sidebar {
    width: 100%;
    padding: 0;
    margin-top: 8.533vw;
  }

  .sidebar-inner {
    position: static;
  }

  .article-page .episode-meta {
    gap: 3.2vw;
    margin-bottom: 0.533vw;
  }

  .article-page .episode-meta span {
    font-size: 3.733vw;
    padding: 1.6vw 2.667vw 2.667vw;
  }

  .article-page .episode-meta p {
    font-size: 3.2vw;
    line-height: 3.733vw;
  }

  .article-page .episode-title {
    font-size: 16vw;
    line-height: 16vw;
    margin-bottom: 5.333vw;
  }

  .article-page .episode-video:hover {
    transform: none;
  }

  .article-page .episode-actions {
    gap: 4.267vw;
    margin-top: 5.333vw;
  }

  .article-page .episode-actions a {
    display: flex;
    align-items: center;
    gap: 2.133vw;
    font-size: 5.333vw;
    padding: 2.667vw 3.2vw 3.733vw;
  }

  .article-page .episode-actions a::after {
    transform: translateY(0.4vw);
    width: 4vw;
    height: 4vw;
  }

  .article-page .episode-actions span {
    font-size: 3.2vw;
    line-height: 3.733vw;
  }

  .main-description {
    width: 100%;
    margin-top: 8.533vw;
    font-size: 4.267vw;
    line-height: 6.933vw;
  }

  .article-body {
    width: 100%;
    margin-top: 8.533vw;
  }

  .article-text-block {
    margin-bottom: 8.533vw;
  }

  .article-body .article-text-block:nth-child(odd) {
    margin-bottom: 8.533vw;
  }

  .article-text-block h2 {
    font-size: 10.667vw;
    line-height: 10.667vw;
    margin-bottom: 5.333vw;
  }

  .article-text-block p {
    width: 100%;
    font-size: 4.267vw;
    line-height: 6.933vw;
    margin-bottom: 4.267vw;
  }

  .article-image-block {
    margin-bottom: 8.533vw;
  }

  .article-image-block p {
    margin: 2.133vw 0 8.533vw;
    font-size: 3.2vw;
    line-height: 4.8vw;
  }

  .most-popular-list {
    width: 100%;
    margin-bottom: 8.533vw;
  }

  .most-popular-list p {
    font-size: 4.267vw;
    line-height: 6.933vw;
    margin-bottom: 2.133vw;
  }

  .most-popular-list ul {
    padding-left: 4.267vw;
  }

  .most-popular-list li {
    font-size: 4.267vw;
    line-height: 6.933vw;
  }

  .writer-block h2,
  .related-block h2 {
    font-size: 3.733vw;
    line-height: 4.8vw;
    margin-bottom: 2.133vw;
  }

  .writer-block {
    margin-bottom: 6.4vw;
  }

  .writer-card {
    gap: 3.2vw;
  }

  .writer-card img {
    width: 16vw;
    height: 16vw;
  }

  .writer-info h1 {
    font-size: 6.4vw;
    line-height: 8vw;
  }

  .writer-card::after {
    right: 4.267vw;
    width: 3.2vw;
    height: 3.2vw;
  }

  .article-related-list {
    gap: 4.267vw;
  }

  .related-tag {
    font-size: 3.733vw;
    padding: 1.6vw 2.667vw 2.667vw;
    margin-bottom: 0.533vw;
  }

  .article-related-card h3 {
    font-size: 8.533vw;
    line-height: 8.533vw;
    margin-bottom: 2.133vw;
  }

  .article-related-card .date-span {
    font-size: 3.2vw;
    line-height: 3.733vw;
  }

  .article-text-block a {
    color: #91ea00;
  }

  .signals-more-area {
    padding: 5.333vw;
  }

  .signals-more-title {
    font-family: "Abolition";
    font-weight: 400;
    font-size: 10.667vw;
    line-height: 10.667vw;
    margin-bottom: 4.267vw;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .signals-more-row {
    display: flex;
    flex-direction: column;
    gap: 6.4vw;
  }

  .signals-more-card {
    width: 100%;
  }

  .signals-more-img .tag {
    top: 3.2vw;
    left: 3.2vw;
  }

  .signals-more-card .news-title {
    font-size: 6.4vw;
    line-height: 6.4vw;
    margin: 2.133vw 0 2.133vw;
  }

  .signals-more-card .date-span {
    font-size: 3.2vw;
    line-height: 3.733vw;
  }

  .tag {
    font-size: 3.733vw;
    line-height: 100%;
    letter-spacing: 3%;
    padding: 1.6vw 2.667vw 2.667vw;
  }

  .date-span {
    font-size: 3.2vw;
    line-height: 3.733vw;
  }
  .article-page .episode-main p, .article-page .episode-main a, .article-page .episode-main span:not(.episode-meta span) {
    font-size: 4.267vw;
  }
  .article-page .episode-main h1:not(.episode-title), .article-page .episode-main h2, .article-page .episode-main h3, .article-page .episode-main h4, .article-page .episode-main h5, .article-page .episode-main h6 {
    margin: 5.333vw 0;
    font-size: 10.667vw;
  }
  .article-page .episode-video img {
    max-height: 70vw;
    object-position: center;
  }
}