/* Home: De bezetting. Prototype B line-up, scoped to .home-lineup. With every illustrated composer (decision #4)
   the figures stand on two tiers, back and front, so all of them fit the width at a size where faces read. */
.home-lineup .lineup-wrap { position: relative; }
.home-lineup .lineup {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: end;
  margin: 0; list-style: none; padding: clamp(48px, 6vw, 84px) 4% 0; border-bottom: 1px solid var(--hair-strong);
}
.home-lineup .lineup li { grid-row: 1; grid-column: var(--col) / span 2; position: relative; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.home-lineup .lineup li.back { z-index: 1; transform: translateY(-46%); }
.home-lineup .lineup li.front { z-index: 2; }
.home-lineup .lineup a { position: relative; display: block; width: 100%; aspect-ratio: 1 / 2.1; color: inherit; }
.home-lineup .lineup img {
  position: absolute; left: 50%; bottom: -1px; width: 270%; max-width: none; height: auto; transform: translateX(-50%);
  transition: transform .45s var(--ease), opacity .3s var(--ease), filter .3s var(--ease);
  pointer-events: none;
}
.home-lineup .lineup a:focus-visible { outline: none; }
.home-lineup .lineup a:focus-visible::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -12px; height: 4px; background: var(--ink); }
.home-lineup .lineup.has-active img { opacity: .6; filter: saturate(.55); }
.home-lineup .lineup li.on { z-index: 5; }
.home-lineup .lineup li.on img { opacity: 1; filter: none; transform: translate(-50%, -16px); }

.home-lineup .decode-line {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px 22px; align-items: baseline; margin: 0; padding-top: 16px; min-height: 72px;
}
.home-lineup .d-name { font-family: var(--f-caps); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 20px; }
.home-lineup .d-years { font-family: var(--f-num); font-stretch: 62%; font-weight: 700; font-size: 24px; color: var(--ink-2); }
.home-lineup .d-count { color: var(--ink-2); font-size: 17px; }
.home-lineup .d-hint { grid-column: 1 / -1; color: var(--ink-2); font-size: 17px; }
.home-lineup .d-bar { width: 44px; height: 14px; background: var(--cc, var(--ink)); align-self: center; }

/* Below 900px one tier that scrolls sideways, as in the prototype. */
@media (max-width: 900px) {
  .home-lineup .lineup-wrap { margin: 0 calc(var(--gutter) * -1); }
  .home-lineup .lineup { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px var(--gutter) 0; scrollbar-width: thin; }
  .home-lineup .lineup li { flex: 0 0 132px; scroll-snap-align: center; height: auto; }
  .home-lineup .lineup li.back { transform: none; }
  .home-lineup .lineup img { width: 190%; }
  .home-lineup .lineup a { aspect-ratio: 1 / 1.6; }
  .home-lineup .decode-line { grid-template-columns: auto 1fr; }
  .home-lineup .d-count { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-lineup .lineup img { transition: none; }
}