.status-label,
.verified-label {
  border-radius: 100px;
  font-size: 10px;
  padding: 3px 7px;
}

.status-label {
  background: #fff1cc;
  color: #7a5200;
}

.verified-label {
  background: #dff8ec;
  color: #126143;
}

.story-featured .status-label {
  background: #3e3217;
  color: #ffe49a;
}

.sources a {
  color: inherit;
  text-underline-offset: 3px;
}

.sources a:hover {
  color: #1769df;
}

.story-featured .sources a:hover {
  color: var(--cyan);
}

.archive-empty {
  color: #516276;
  padding: 24px 0;
}

.archive-empty p {
  margin: 0;
  max-width: 620px;
}

.story:not(.story-featured) {
  background:
    radial-gradient(circle at 100% 0, rgba(45, 91, 255, 0.16), transparent 34%),
    linear-gradient(145deg, #0b1730, #07111f 70%);
  border: 1px solid #1d3552;
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(7, 17, 31, 0.08);
  color: #fff;
  margin-bottom: 36px;
  padding: 52px 54px;
}

.story:not(.story-featured) .story-rank,
.story:not(.story-featured) .story-region {
  color: var(--cyan);
}

.story:not(.story-featured) .story-content > p:not(.story-region, .why, .sources) {
  color: #b3c2d4;
}

.story:not(.story-featured) .why {
  background: #0f2037;
  border-color: var(--cyan);
}

.story:not(.story-featured) .sources {
  color: #8799ae;
}

.story:not(.story-featured) .sources span {
  color: #dfe7f2;
}

.story:not(.story-featured) .sources a:hover {
  color: var(--cyan);
}

.story:not(.story-featured) .verified-label {
  background: #12392f;
  color: #91f4cf;
}

@media (max-width: 620px) {
  .story:not(.story-featured) {
    border-radius: 20px;
    padding: 38px 24px;
  }
}