/* /playlists/ — cover-art grid by year. Loaded only by page-playlists.hbs (via
   the "head" block in home-layout.hbs) on top of home.css, so the tokens below
   (--paper, --line, --green, --serif, --muted) come from there. */

.pl-hero .wrap{max-width:820px}
.pl-hero .lede{max-width:60ch}
.pl-hero .btn svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px}
.pl-enjoy{font-family:var(--serif);font-style:italic;color:var(--muted);margin:0 0 0 6px}

.pl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 22px}
.pl-head h2{margin:0}
.pl-credit{font-family:var(--serif);color:var(--muted);font-size:.95rem;margin:0}
.pl-credit a{color:var(--green);text-underline-offset:3px}

.pl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.pl-grid a{display:block;border-radius:12px;overflow:hidden;background:var(--line);box-shadow:0 1px 2px rgba(21,23,26,.08),0 0 0 1px rgba(21,23,26,.06);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1)}
.pl-grid a:hover,.pl-grid a:focus-visible{transform:translateY(-4px);box-shadow:0 10px 24px -8px rgba(21,23,26,.25),0 2px 6px rgba(21,23,26,.08)}
.pl-grid img{width:100%;height:auto;aspect-ratio:1}

/* Fade-in on scroll. The hidden state only applies once playlists.js has run
   (it sets .pl-fade on <html>), so no-JS visitors see every cover. */
.pl-fade .pl-grid li{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
.pl-fade .pl-grid li.is-in,.pl-fade .pl-grid li:focus-within{opacity:1;transform:none;transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  .pl-grid a{transition:none}
  .pl-grid a:hover,.pl-grid a:focus-visible{transform:none}
  .pl-fade .pl-grid li{opacity:1;transform:none;transition:none}
}

@media (max-width:900px){.pl-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .pl-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pl-hero .cta-row{flex-direction:row;align-items:center}
  .pl-hero .cta-row .btn{width:auto}
}