/* Leaving Babylon demo, the shelf variant: one row of series covers over one grid.
   Without script every series still shows in turn; shelf.js adds .live and shows one at a time. */
.shelved .head { padding-bottom: 32px; }
.shelf { position: relative; }
.rail { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px 6px 40px; margin: -6px -6px 0; scroll-padding: 0 6px; }
.rail::-webkit-scrollbar { display: none; }
.rail.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); }
.rail.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px); mask-image: linear-gradient(90deg, transparent, #000 90px); }
.rail.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent); }

.cover { flex: 0 0 186px; scroll-snap-align: start; display: block; }
.cover .cw { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--well); outline: 1px solid transparent; outline-offset: 5px; transition: outline-color .2s ease; }
.cover .cw img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cover:hover .cw img { transform: scale(1.04); }
.cover .cn { display: block; margin-top: 16px; font: 400 15px/1.25 "Caslon", Georgia, serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.cover .cc { display: block; margin-top: 7px; color: var(--ink-3); }
.cover[aria-current] .cw { outline: 1.5px solid var(--ink); }
.cover[aria-current] .cn::after { content: ""; display: block; width: 22px; height: 1.5px; margin-top: 9px; background: var(--ink); }
.cover:hover:not([aria-current]) .cw { outline-color: var(--line); }

/* the first cover: their lettering on the night sky, like the footer */
.cover .cw.feat { background: var(--night); display: grid; place-items: center; }
.cover .cw.feat .mark { width: 76%; aspect-ratio: 770 / 330; background: var(--cream);
  -webkit-mask: url(lettering.png) center / contain no-repeat; mask: url(lettering.png) center / contain no-repeat; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cover:hover .cw.feat .mark { transform: scale(1.04); }

/* arrows over the covers, desktop only; phones swipe */
.steer button { position: absolute; z-index: 2; top: calc(186px * 1.25 / 2 - 2px); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 24, 39, .14), 0 6px 18px rgba(20, 24, 39, .12); transition: opacity .2s ease, transform .2s ease; }
.steer button svg { width: 16px; height: 16px; }
.steer .prev { left: -14px; } .steer .prev svg { transform: scaleX(-1); }
.steer .next { right: -14px; }
.steer button:hover { transform: scale(1.06); }
.steer button[disabled] { opacity: 0; pointer-events: none; }

/* one series at a time */
.shelved.live .group:not(.on) { display: none; }
.shelved.live .group.on { animation: shelfin .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes shelfin { from { opacity: 0; transform: translateY(12px); } }
.shelved:not(.live) #featured { display: none; }
.gb { grid-column: 4 / span 9; }
.after { margin-top: 56px; }
.after a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 5px; transition: color .18s ease, border-color .18s ease; }
.after a svg { width: 14px; height: 14px; }
.after a:hover { color: #6b5a9c; border-color: #6b5a9c; }
.shelved:not(.live) .after, .shelved.all .after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .shelved.live .group.on { animation: none; }
  .cover .cw img, .cover .cw.feat .mark { transition: none; }
}

@media (max-width: 760px) {
  .rail { gap: 12px; margin: -6px -24px 0; padding: 6px 24px 30px; scroll-padding: 0 24px; }
  .rail.more-r, .rail.more-l, .rail.more-l.more-r { -webkit-mask-image: none; mask-image: none; }
  .cover { flex-basis: 37vw; }
  .cover .cn { margin-top: 12px; font-size: 13.5px; letter-spacing: .04em; }
  .cover .cc { margin-top: 5px; }
  .steer { display: none; }
  .after { margin-top: 40px; }
}