/* The complete brand-home Hero is embedded above the article heading. */
.article-brand-hero {
  border-bottom: 1px solid #17344f;
}

.article-brand-hero .article-brand-hero-title {
  margin: 10px 0 10px;
  background: linear-gradient(90deg, #fff 0%, #74efff 36%, #299cff 70%, #9b75ff 100%);
  color: #8cecff;
  font-size: 68px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.08;
  text-shadow: 0 0 28px rgba(24, 216, 245, .16);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-heading {
  border-bottom: 1px solid #17344f;
  background: linear-gradient(90deg, rgba(4, 17, 35, .98), rgba(4, 17, 35, .76));
}

.article-heading > div {
  width: min(1260px, calc(100% - 44px));
  margin: auto;
  padding: 54px 0 48px;
}

.article-heading a { color: #55e5f5; letter-spacing: .12em; }
.article-heading h1 { max-width: 980px; margin: 12px 0; font-size: 42px; line-height: 1.3; }
.article-heading p { display: flex; gap: 24px; margin: 0; color: #94a9bf; }

.article-shell {
  width: min(1260px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 880px) 330px;
  gap: 34px;
  align-items: start;
}

.article-shell .article-content {
  width: auto;
  min-width: 0;
  margin: 48px 0 58px;
}

.article-sidebar {
  position: sticky;
  top: 96px;
  margin: 48px 0 58px;
}

.article-ranking {
  overflow: hidden;
  border: 1px solid #214c70;
  border-radius: 14px;
  background: rgba(5, 17, 35, .96);
  box-shadow: 0 0 24px rgba(16, 126, 214, .12);
}

.article-ranking-title {
  padding: 20px;
  border-bottom: 1px solid #183b59;
  background: linear-gradient(135deg, rgba(10, 86, 150, .24), rgba(5, 17, 35, .94));
}

.article-ranking-title > span,
.article-related-heading > span {
  color: #35dff2;
  font-size: 11px;
  letter-spacing: .2em;
}

.article-ranking-title h2 {
  margin: 3px 0 0;
  font-size: 24px;
}

.article-ranking-title p {
  margin: 2px 0 0;
  color: #8fa5bb;
  font-size: 13px;
}

.article-rank-item {
  display: grid;
  grid-template-columns: 31px 44px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 66px;
  padding: 8px 13px;
  border-bottom: 1px solid #142f48;
  transition: .18s;
}

.article-rank-item:last-child { border-bottom: 0; }
.article-rank-item:hover,
.article-rank-item.active { background: #08203a; }
.article-rank-item:hover { box-shadow: inset 3px 0 #25ddec; }
.article-rank-item i { color: #79dff0; font-style: normal; text-align: center; }
.article-rank-item img { width: 40px; height: 40px; object-fit: contain; }
.article-rank-item span { min-width: 0; }
.article-rank-item b { display: block; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.article-rank-item small { display: block; color: #7f96ac; font-size: 11px; }
.article-rank-item strong { color: #4de4f4; font-size: 17px; }

.article-related {
  width: min(1260px, calc(100% - 44px));
  margin: 0 auto 78px;
  padding-top: 32px;
  border-top: 1px solid #183750;
}

.article-related-heading {
  display: flex;
  align-items: end;
  gap: 15px;
  margin-bottom: 20px;
}

.article-related-heading h2 { margin: 0; font-size: 30px; }
.article-related-heading > a { margin-left: auto; color: #69dcff; font-weight: 700; }
.article-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.article-related-grid article {
  overflow: hidden;
  border: 1px solid #204664;
  border-radius: 13px;
  background: #061326;
  transition: .2s;
}

.article-related-grid article:hover { border-color: #168fce; transform: translateY(-2px); }
.related-cover { display: block; height: 190px; overflow: hidden; background: radial-gradient(circle at 40% 40%, rgba(24, 216, 245, .28), transparent 32%), #06172c; }
.related-cover img { width: 100%; height: 100%; object-fit: cover; transition: .25s; }
.article-related-grid article:hover .related-cover img { transform: scale(1.035); }
.related-placeholder { height: 100%; display: grid; place-items: center; color: #69dcff; font-weight: 800; }
.article-related-grid article > div { padding: 17px; }
.article-related-grid time { color: #839bb2; font-size: 12px; }
.article-related-grid h3 { margin: 6px 0; font-size: 18px; line-height: 1.5; }
.article-related-grid h3 a:hover { color: #65eaff; }
.article-related-grid p { display: -webkit-box; overflow: hidden; margin: 0 0 10px; color: #9fb0c3; font-size: 13px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

@media (max-width: 1050px) {
  .article-shell { grid-template-columns: 1fr; }
  .article-shell .article-content { margin-bottom: 0; }
  .article-sidebar { position: static; margin: 0 0 58px; }
  .article-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .article-brand-hero .article-brand-hero-title { font-size: 44px; }
  .article-heading > div { width: calc(100% - 28px); padding: 38px 0; }
  .article-heading h1 { font-size: 31px; }
  .article-shell,
  .article-related { width: calc(100% - 28px); }
  .article-related-heading { align-items: flex-start; flex-wrap: wrap; }
  .article-related-heading > a { width: 100%; margin-left: 0; }
  .article-related-grid { grid-template-columns: 1fr; }
  .related-cover { height: 205px; }
}