/* Keep the series cover and metadata ahead of the description on phones. */
@media (max-width: 768px) {
  .series-hero {
    display: flex;
    flex-direction: column;
  }

  .hero-desc-section {
    order: 0;
    margin-bottom: 16px;
  }
}

/* Keep series breadcrumbs readable on small screens, matching desktop. */
.breadcrumb {
  position: relative;
  z-index: 2;
  color: var(--text);
}

.breadcrumb a {
  color: var(--accent-text);
  font-weight: 700;
}

.breadcrumb span {
  color: var(--text);
  font-weight: 600;
}

.breadcrumb span:first-of-type {
  color: var(--text2);
}