/* Tall gold outlines sit behind PREME's ranked portrait artwork. */
#main .top-ten-shelf {
  --rank-poster-width: clamp(176px, 14vw, 240px);
  --rank-gutter: calc(var(--rank-poster-width) * .72);
  --rank-ink-width: calc(var(--rank-poster-width) * 1.1);
}
#main .top-ten-shelf .shelf {
  gap: clamp(24px, 2.3vw, 44px);
  align-items: stretch;
  padding-top: 7px;
  padding-bottom: 13px;
}
#main .top-ten-shelf .shelf > .ranked-card {
  flex: 0 0 calc(var(--rank-poster-width) + var(--rank-gutter));
  min-width: 0;
  padding-left: var(--rank-gutter);
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
#main .top-ten-shelf .shelf > .rank-double {
  --rank-gutter: calc(var(--rank-poster-width) * 1.46);
  --rank-ink-width: calc(var(--rank-poster-width) * 1.9);
}
#main .top-ten-shelf .ranked-card .card-art {
  z-index: 1;
  width: var(--rank-poster-width);
  aspect-ratio: 2 / 3;
  border-radius: 13px;
}
#main .top-ten-shelf .ranked-card:after {
  left: var(--rank-gutter);
  border-radius: 13px;
}
#main .top-ten-shelf .ranked-card .card-caption {
  left: var(--rank-gutter);
  border-radius: 0 0 13px 13px;
  overflow: hidden;
}
#main .top-ten-shelf .ranked-card .chart-number {
  position: absolute;
  z-index: 0;
  top: auto;
  left: 0;
  bottom: calc(var(--rank-poster-width) * -.036);
  width: var(--rank-ink-width);
  height: calc(var(--rank-poster-width) * 1.5);
  margin: 0;
  color: transparent;
  background: none;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-shadow: none;
  transform: none;
  pointer-events: none;
  user-select: none;
}
#main .top-ten-shelf .chart-number svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: none;
  filter: drop-shadow(0 .5px 0 #634519);
}
#main .top-ten-shelf .chart-number text {
  /* Arial Bold has clean numeral contours when rendered as outlines. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 420px;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  fill: none;
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#main .top-ten-shelf .ranked-card:has(.card-art:hover),
#main .top-ten-shelf .ranked-card:has(.card-art:focus-visible) {
  box-shadow: none;
}
#main .top-ten-shelf .ranked-card:has(.card-art:hover):after,
#main .top-ten-shelf .ranked-card:has(.card-art:focus-visible):after {
  border-color: #ffffff50;
}
@media (max-width: 700px) {
  #main .top-ten-shelf { --rank-poster-width: clamp(128px, 39vw, 190px); }
  #main .top-ten-shelf .shelf { gap: 22px; }
  #main .top-ten-shelf .shelf > .rank-double {
    --rank-gutter: calc(var(--rank-poster-width) * 1.18);
    --rank-ink-width: calc(var(--rank-poster-width) * 1.53);
  }
  #main .top-ten-shelf .ranked-card .card-caption > strong { font-size: 12px; }
}
@media (forced-colors: active) {
  #main .top-ten-shelf .chart-number svg { filter: none; }
  #main .top-ten-shelf .chart-number text { stroke: CanvasText; }
}