:root {
  color: #171714;
  background: #f2efe7;
  font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  --ink: #171714; --muted: #656156; --paper: #f2efe7; --card: #fffdf7;
  --acid: #d8ff45; --violet: #7353ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
a { color: inherit; }
#storefront { max-width: 96rem; margin: auto; padding: clamp(.8rem, 2vw, 1.5rem) clamp(.8rem, 3vw, 3rem) 5rem; }
.placement { margin: 0; }
.placement + .placement { margin-top: 2.5rem; }
.placement > h2 { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .8rem; font-size: clamp(1.25rem, 2vw, 1.8rem); letter-spacing: -.035em; }
.placement > h2::after { content: ""; flex: 1; height: 1px; background: #cbc6b9; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: clamp(.75rem, 1.5vw, 1.2rem); }
.card { position: relative; overflow: hidden; background: var(--card); border: 1px solid #d6d0c2; border-radius: 1rem; box-shadow: 0 .25rem 0 rgba(23,23,20,.08); transition: transform .18s ease, box-shadow .18s ease; }
.card:focus-within, .card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 0 rgba(23,23,20,.12); }
.card:focus-within { outline: 3px solid var(--violet); outline-offset: 2px; }
.card-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #cbc4ff, #d8ff45); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.card:hover img { transform: scale(1.025); }
.card-copy { padding: .85rem .9rem .95rem; }
.card h3 { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.1; letter-spacing: -.025em; }
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus { outline: none; }
.card p { color: var(--muted); font-size: .9rem; line-height: 1.35; margin: .45rem 0 .7rem; min-height: 2.45em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .65rem; }
.meta { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.tag { border: 1px solid #c9c3b6; border-radius: 999px; padding: .25rem .48rem; color: #4f4b43; font-size: .65rem; line-height: 1; }
.play-cue { margin-left: auto; color: var(--violet); font-size: .75rem; font-weight: 820; white-space: nowrap; }
.status { min-height: 45vh; display: grid; place-content: center; justify-items: center; text-align: center; }
.status p, .empty { color: var(--muted); }
button { border: 0; border-radius: .6rem; padding: .75rem 1rem; font: inherit; cursor: pointer; }
.spinner { width: 2rem; height: 2rem; border: 3px solid #c6c0b3; border-top-color: var(--violet); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } .card, .card img { transition: none; } }
@media (max-width: 42rem) {
  #storefront { padding: .65rem .65rem 3rem; }
  .placement > h2 { margin-bottom: .6rem; font-size: 1.18rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .card { border-radius: .75rem; box-shadow: 0 .18rem 0 rgba(23,23,20,.08); }
  .card-copy { padding: .58rem .62rem .65rem; }
  .card h3 { font-size: .92rem; line-height: 1.12; }
  .card p, .meta { display: none; }
  .card-footer { margin-top: .42rem; }
  .play-cue { font-size: .68rem; }
}
@media (max-width: 22rem) {
  .cards { grid-template-columns: 1fr; }
  .card p { display: -webkit-box; min-height: auto; }
  .meta { display: flex; }
}