/* WHAT EVEN IS WHAT (site/albums/what-even-is-what.json): its own format.
   1. WEIGHTLESS: everything in the hero is centred, and the cover is a round
      porthole that bobs and tips slowly, as the figure on it does.
   2. THE RECEIPT: the song list is the Void Mall's receipt ("Thank you for
      shopping in the void"): a narrow strip of paper in a typewriter face,
      torn along the bottom, a degree off straight. The --al-* variables are
      RESET INSIDE IT (dark ink on paper), so every rule of album-page.css
      keeps working there; the contrast on the paper was measured with
      album_pages.contrast (ink, dim and accent all above 4.5 to 1).
   Still under reduced motion. */
.al-what-even-is-what .al-hero { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.al-what-even-is-what .al-cover { width: min(72vw, 340px); max-width: none; border-radius: 50%; border: 6px solid var(--al-line);
  box-shadow: 0 0 0 2px var(--al-accent2), 0 30px 80px rgba(0,0,0,.6), 0 0 70px rgba(127,224,255,.18);
  animation: wew-float 11s ease-in-out infinite; }
@keyframes wew-float { 0%, 100% { transform: translateY(-9px) rotate(-2.5deg); } 50% { transform: translateY(9px) rotate(2.5deg); } }
.al-what-even-is-what .al-hero h1 { font-weight: 800; letter-spacing: -.01em; }
.al-what-even-is-what .al-tagline { max-width: 34ch; margin-inline: auto; }
.al-what-even-is-what .al-quote { text-align: center; border-left: 0; padding-left: 0; min-height: 6.4rem; }
.al-what-even-is-what .al-quote-line { font-style: normal; font-weight: 700; max-width: 26ch; margin-inline: auto; }
.al-what-even-is-what .al-actions { justify-content: center; }
.al-what-even-is-what .al-story { max-width: 700px; width: 100%; justify-self: center; border-radius: 28px; }

.al-what-even-is-what .al-main > section.al-songs {
  --al-bg: #f4ecd8; --al-panel: #f4ecd8; --al-ink: #2a2233; --al-dim: #5e5470; --al-line: #cdbf9f; --al-accent: #4b2a86;
  --al-display: "Courier New", Courier, ui-monospace, monospace;
  max-width: 620px; width: 100%; justify-self: center; background: var(--al-bg); color: var(--al-ink);
  border: 0; border-radius: 4px 4px 0 0; padding: 1.6rem clamp(1rem, 4vw, 1.8rem) 2.4rem;
  font-family: var(--al-display); transform: rotate(-.7deg); box-shadow: 0 18px 50px rgba(0,0,0,.55);
  /* the torn edge: a row of teeth cut out of the bottom */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.al-what-even-is-what .al-songs::before { content: "VOID GOODS\A FLOATING IN THE VOID \00B7  GRAND OPENING SALE"; white-space: pre-line;
  display: block; text-align: center; font-weight: 700; letter-spacing: .12em; font-size: .82rem; line-height: 1.7;
  padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 2px dashed var(--al-line); }
.al-what-even-is-what .al-songs h2 { text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: 1.05rem; }
.al-what-even-is-what .al-songs .al-hint { text-align: center; }
.al-what-even-is-what .al-songs .al-track { border-bottom: 1px dashed var(--al-line); border-radius: 0; }
.al-what-even-is-what .al-songs .al-title { font-weight: 700; }
.al-what-even-is-what .al-songs .al-words { font-family: var(--al-display); }
.al-what-even-is-what .al-songs::after { content: "TOTAL: SOME AMOUNT OF CREDITS\A THANK YOU FOR SHOPPING IN THE VOID"; white-space: pre-line;
  display: block; text-align: center; font-weight: 700; letter-spacing: .1em; font-size: .82rem; line-height: 1.9;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 2px dashed var(--al-line); }
.al-what-even-is-what .al-get { max-width: 700px; width: 100%; justify-self: center; border-radius: 28px; }
.al-what-even-is-what .al-foot { justify-content: center; text-align: center; }
@media (prefers-reduced-motion: reduce) { .al-what-even-is-what .al-cover { animation: none; } }