/*
 * Library wall: columns of book tiles that flip between the cover and the series.
 * Shared by the landing page and the home page. The plotsy-home repo has its own copy: make the same change there.
 *
 * Markup: .wall-plane > .wall-col > figure.tile > .tile__in > (img.tile__book + .tile__show)
 * Each page sets the plane's tile width (--tw), position and tilt.
 */
.wall-plane { --gap: calc(var(--tw) * 0.075); display: flex; gap: var(--gap); }
.wall-col { display: flex; flex-direction: column; gap: var(--gap); }
.wall-col:nth-child(odd) { margin-top: calc(var(--tw) * -0.55); }
html.js:not(.reduced) .wall-col { animation: wall-drift 34s linear infinite alternate; }
html.js:not(.reduced) .wall-col:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes wall-drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }

.tile { margin: 0; width: var(--tw); aspect-ratio: 2 / 3; perspective: 1100px; }
.tile__in {
  position: relative; height: 100%; transform-style: preserve-3d;
  transition: transform 1.25s var(--ease-out);
}
.tile.is-show .tile__in { transform: rotateY(180deg); }
.is-scrub .tile__in { transition: none; }
.tile__book, .tile__show {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: calc(var(--tw) * 0.045); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -22px rgba(0, 0, 0, 0.9);
}
.tile__book { object-fit: cover; background: var(--bg-3); }
.tile__show { transform: rotateY(180deg); background: #000; }
.tile__show img { width: 100%; height: 100%; object-fit: cover; }
.tile__show::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 6, 11, 0) 45%, rgba(7, 6, 11, 0.92) 100%);
  box-shadow: inset 0 0 0 1px rgba(194, 102, 255, 0.35);
  border-radius: inherit;
}
.tile__label { position: absolute; left: 9%; right: 9%; bottom: 7%; z-index: 1; display: grid; gap: calc(var(--tw) * 0.025); }
.tile__status {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.35em 0.7em; border-radius: 999px;
  font-size: calc(var(--tw) * 0.05); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14); color: var(--ink);
}
.tile__status.is-live { background: var(--accent); }
.tile__status.is-live::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; background: #fff; }
.tile__name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: calc(var(--tw) * 0.1); line-height: 0.92; letter-spacing: 0.01em;
}