.modern-track .track-title {
  --track-title-gap: 1em;
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 20px;
  line-height: calc(1.4em + var(--track-title-gap));
  /* Trim outer leading so the extra gap only separates wrapped lines. */
  margin-block: calc(var(--track-title-gap) / -2);
  letter-spacing: 0;
  text-indent: 0;
  word-spacing: calc(var(--track-title-gap) * 2);
  cursor: default;
}

.modern-track .track-title-word {
  display: inline-flex;
  gap: var(--track-title-gap);
  white-space: nowrap;
}

.modern-track .track-title-glyph {
  position: relative;
}

.modern-track .track-cover { z-index: 2; }
.modern-track .track-cover-wrap { cursor: default; }
.modern-track .track-cover-wrap::after {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.48), 0 34px 88px rgba(0, 0, 0, 0.4);
}

.modern-track .track-platform-link {
  position: relative;
  font-family: var(--font-family);
  font-weight: 400;
  letter-spacing: 0;
}

.modern-track .track-platform-label { position: relative; }
.modern-track .track-release-status {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(249, 250, 251, 0.7);
}
.modern-track .track-platform-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.055), transparent 70%);
  opacity: var(--ui-light, 0);
  pointer-events: none;
}
.modern-track .track-platform-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.modern-track .track-platform-arrow {
  text-shadow: 0 0 8px rgba(255, 255, 255, calc(var(--ui-light, 0) * 0.5));
}

@media (max-width: 860px) {
  .modern-track .track-title { font-size: 18px; }
  .modern-track .track-release-status { text-align: center; }
}

@media (max-width: 380px) {
  .modern-track .track-title { font-size: 16px; }
}
