/* ---------- Base / Reset ---------- */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: #0b0b0f;
      color: #e9e9ef;
      line-height: 1.5;
    }
    :root{
      --ink:#e9e9ef;
      --sub:#b7b7c5;
      --panel:#14141c; /* card base */
      --panel-2:#1b1b25; /* card hover */
      --accent:#f3f3f7;
      --ring:#6c6c82;
      --brand:#e4e4ea; /* keep neutral so the cover art pops */
      --shadow: 0 8px 24px rgb(0 0 0 / .35);
    }

    /* ---------- Header ---------- */
    header{
      padding: clamp(16px, 3vw, 32px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid #1f1f2b;
      background: radial-gradient(1200px 1200px at -10% -20%, #14141e 0%, #0b0b0f 50%, #0b0b0f 100%);
      position: sticky;
      top: 0;
      z-index: 10;
    }
    h1{
      margin: 0;
      font-family: "Metal Mania", system-ui, sans-serif;
      letter-spacing: .02em;
      font-size: clamp(28px, 5vw, 56px);
      color: var(--ink);
      text-shadow: 0 1px 0 #fff1, 0 2px 18px #0008;
    }
    .tagline{
      margin: 0;
      font-size: clamp(12px, 1.6vw, 14px);
      color: var(--sub);
      max-width: 52ch;
    }

    /* ---------- Layout ---------- */
    .wrapper{
      padding: clamp(16px, 4vw, 48px);
    }
    .grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: clamp(14px, 2vw, 22px);
      align-items: start;
    }

    /* ---------- Playlist Block (vertical rectangle) ---------- */
    .playlist{
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      background: var(--panel);
      border: 1px solid #1e1e2a;
      border-radius: 18px;
      padding: 16px;
      min-height: 420px; /* ensures a tall, vertical rectangle */
      box-shadow: var(--shadow);
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .playlist:hover{
      transform: translateY(-2px);
      background: var(--panel-2);
      border-color: #2a2a3a;
    }

    /* Album cover: perfect square that scales */
    .cover{
      width: 100%;
      aspect-ratio: 2 / 1;
      border-radius: 12px;
      overflow: hidden;
      background:
        linear-gradient(120deg, #2b2b3a 0 30%, #3a3a4d 30% 60%, #2a2a3a 60% 100%);
      border: 1px solid #2a2a3a;
    }
    .cover > img{ /* replace the placeholder gradient by supplying an <img> */
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    .title{
      margin: 2px 0 0 0;
      font-weight: 700;
      letter-spacing: .2px;
      font-size: 18px;
      color: var(--ink);
    }
    .meta{
      margin: 0;
      font-size: 13px;
      color: var(--sub);
    }

    .lines{
      margin: 6px 0 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
      color: var(--ink);
      font-size: 14px;
    }
    .lines li{
      opacity: .9;
      text-wrap: pretty;
    }

    /* Play button that looks like a player control */
    .actions{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 6px;
    }
    .play{
      --size: 46px;
      display: inline-grid;
      place-items: center;
      width: var(--size); height: var(--size);
      border-radius: 999px;
      border: 1px solid var(--ring);
      background: radial-gradient(240px 240px at 30% 30%, #232334 0%, #171722 60%);
      text-decoration: none;
      position: relative;
      box-shadow: 0 4px 14px rgb(0 0 0 / .35) inset, 0 6px 22px rgb(0 0 0 / .35);
    }
    .play:focus-visible{
      outline: 2px solid #9aa0ff;
      outline-offset: 3px;
    }
    .play::before{ /* triangle icon */
      content: "";
      display: block;
      margin-left: 2px;
      width: 0; height: 0;
      border-left: 12px solid var(--accent);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }
    .play:hover{
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    /* Optional secondary link */
    .more{
      margin-left: auto;
      font-size: 13px;
      color: var(--sub);
      text-decoration: none;
    }
    .more:hover{ color: var(--ink); }

    /* Make blocks feel tall on larger screens */
    @media (min-width: 1200px){
      .playlist{ min-height: 460px; }
    }