/* Editorial ranks sit behind the portraits, inspired by the supplied cinema reference. */
.showcase .ranked-rail{
  --showcase-poster:200px;
  --rank-lane:150px;
  grid-auto-columns:auto;
  gap:32px;
  padding:8px 32px 16px 18px;
  margin:-8px -3px -16px -18px;
  scroll-padding-inline:18px 32px;
}
.showcase .ranked-card{width:calc(var(--showcase-poster) + var(--rank-lane));padding-left:var(--rank-lane)}
.showcase .ranked-card[data-rank="10"]{--rank-lane:300px}
.showcase .poster-rank{
  top:calc(var(--showcase-poster) * -.1);
  left:12px;
  width:max-content;
  padding:0;
  font-family:inherit;
  font-size:calc(var(--showcase-poster) * 1.5);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:#e8e1d6;
  background:linear-gradient(170deg,#fff9ec 13%,#ddd9d1 31%,#f9f4e9 43%,#a1a1a6 58%,#777782 76%,#d5cec3 93%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:.5px rgb(245 240 232 / .45);
  filter:drop-shadow(1px 2px 0 #65594b) drop-shadow(2px 4px 3px rgb(0 0 0 / .6));
  transform:skewX(-13deg) scaleX(1.22);
  transform-origin:left center;
  z-index:-1;
  pointer-events:none;
  user-select:none;
}
.showcase .ranked-card .poster-link{border-radius:2px;box-shadow:none}
.showcase .ranked-card .card-caption{margin-left:0;padding-top:0;border:0}
.showcase .ranked-card .card-caption h3{min-height:0}
@media(max-width:1199px){
  .showcase .ranked-rail{--showcase-poster:180px;--rank-lane:136px;gap:28px}
  .showcase .ranked-card[data-rank="10"]{--rank-lane:270px}
}
@media(max-width:640px),(min-width:641px) and (max-width:1024px) and (orientation:portrait){
  .showcase .ranked-rail{--showcase-poster:clamp(132px,40vw,180px);--rank-lane:calc(var(--showcase-poster) * .75);gap:24px;padding-right:28px;scroll-padding-right:28px;margin-right:calc(-1 * var(--gutter))}
  .showcase .ranked-card[data-rank="10"]{--rank-lane:min(calc(var(--showcase-poster) * 1.5),calc(100vw - var(--gutter) * 2 - var(--showcase-poster) - 6px))}
}
@media(forced-colors:active){.showcase .poster-rank{background:none;-webkit-text-fill-color:currentColor;filter:none}}
@media(max-width:640px){
  .showcase .ranked-card[data-rank="10"] .poster-rank{transform:skewX(-13deg) scaleX(.72);left:8px}
}
@media(max-width:360px){
  .showcase .ranked-card[data-rank="10"] .poster-rank{transform:skewX(-13deg) scaleX(.62)}
}