/* ============================================================
   PenduJatt.dev v2 — "Vintage Radio Dial" aesthetic (light mode)
   Warm paper background, saffron/brick accents, Anton display type,
   ticket-stub & vinyl-sleeve motifs. No decorative animation —
   built lean for mobile.
   ============================================================ */

:root{
  --page-bg:#ECECEC;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F4F4;
  --line:#E4E4E4;
  --ink:#181818;
  --ink-dim:#6E6E6E;
  --gold:#B8790F;
  --gold-bg:#F0A93A;
  --brick:#C4381F;
  --brick-2:#A62E19;
  --blue:#296CED;
  --font-display:'Work Sans',Arial,sans-serif;
  --font-body:'Work Sans',Arial,sans-serif;
  --font-mono:'Work Sans',Arial,sans-serif;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{overflow-x:hidden}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-track{background:var(--surface)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.pj-wrap{
  max-width:1180px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  overflow:hidden;
  padding:0 20px;
}

/* ---------- header ---------- */
.pj-header{
  margin:0 -20px;
  padding:40px 20px 0;
  background:#505050;
  text-align:center;
}
.pj-word-h1{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline-block}
.pj-word{display:inline-flex;align-items:baseline;gap:6px}
.pj-word-main{
  font:800 34px/1 var(--font-display);
  letter-spacing:-.2px;
  color:var(--ink);
}
.pj-word-main .pj-word-accent{color:var(--brick)}
.pj-word-dot{font:600 15px var(--font-mono);color:var(--blue);align-self:flex-end}
.pj-header .pj-word-main{color:#fff}
.pj-header .pj-word-main .pj-word-accent{color:#FF8A65}
.pj-header .pj-word-dot{color:#8CB4FF}
.pj-tagline{
  margin:10px 0 26px;
  font:500 13px var(--font-body);
  color:var(--ink-dim);
}
.pj-header .pj-tagline{color:rgba(255,255,255,.65)}
.pj-langbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:0 0 24px;
  border-bottom:1px dashed var(--line);
}
.pj-header .pj-langbar{border-bottom-color:rgba(255,255,255,.15)}
.pj-langbar a{
  font:700 12.5px var(--font-body);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-dim);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 18px;
}
.pj-langbar a:hover{color:#fff;background:var(--blue);border-color:var(--blue)}
.pj-header .pj-langbar a{
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}
.pj-header .pj-langbar a:hover{color:#fff;background:var(--blue);border-color:var(--blue)}

/* ---------- header equalizer strip ---------- */
.pj-eq{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  height:20px;
  margin:14px -20px 0;
  padding:0 20px;
  overflow:hidden;
}
.pj-eq span{
  flex:1 1 0;
  max-width:5px;
  height:22%;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#8CB4FF,var(--blue));
  animation:pj-eq-bounce var(--dur,1s) ease-in-out var(--delay,0s) infinite;
  transform-origin:bottom;
}
.pj-eq span:nth-child(5n+2){background:linear-gradient(180deg,#FFB499,#FF8A65)}
.pj-eq span:nth-child(7n+4){background:linear-gradient(180deg,#c9b3ff,#8a63e0)}

@keyframes pj-eq-bounce{
  0%, 100% { height: 18%; }
  50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .pj-eq span{animation:none;height:40%}
}

/* ---------- year filter bar ---------- */
.pj-yearfilter{
  display:flex;align-items:center;gap:14px;margin-bottom:24px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);
}
.pj-yearfilter-label{
  flex:none;font:700 11px var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-dim);
}
.pj-yearbar{
  flex:1;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;
}
.pj-yearbar::-webkit-scrollbar{display:none}
.pj-yearbar a{
  flex:none;font:700 12px var(--font-body);color:var(--ink-dim);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  scroll-snap-align:start;
}
.pj-yearbar a:hover{border-color:var(--blue);color:var(--blue)}
.pj-yearbar a.is-active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:800}

/* ---------- pagination ---------- */
.pj-pagination{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px;
}
.pj-pagination a{
  font:700 13px var(--font-body);color:var(--ink-dim);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:9px 15px;min-width:38px;text-align:center;
}
.pj-pagination a:hover{border-color:var(--blue);color:var(--blue)}
.pj-pagination a.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- infinite-scroll loader ---------- */
.pj-loadmore{
  display:none;align-items:center;justify-content:center;gap:10px;
  padding:28px 0 8px;font:600 12.5px var(--font-body);color:var(--ink-dim);
}
.pj-spinner{
  width:18px;height:18px;flex:none;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--blue);
  animation:pj-spin .7s linear infinite;
}
@keyframes pj-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .pj-spinner{animation:none}
}

/* ---------- main / search ---------- */
.pj-main{padding:30px 0 10px}

/* ---------- breadcrumb ---------- */
.pj-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:22px;
  font:500 12px var(--font-body);color:var(--ink-dim);
}
.pj-crumb a{color:var(--blue)}
.pj-crumb a:hover{text-decoration:underline}
.pj-crumb-current{color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}

/* ---------- title block (above hero) ---------- */
.pj-titleblock{margin-bottom:20px}
.pj-hero-badge{
  display:inline-block;font:700 10.5px var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
  color:#fff;background:var(--blue);padding:4px 10px;border-radius:3px;margin-bottom:10px;
}
.pj-hero-title{margin:0;font:700 27px var(--font-display);color:var(--ink);line-height:1.25}
.pj-hero-sub{margin:8px 0 0;font:500 14px var(--font-body);color:var(--ink-dim)}
.pj-hero-sub a{color:var(--blue);font-weight:600}
.pj-hero-sub a:hover{text-decoration:underline}

/* ---------- artist hero (avatar + stats) ---------- */
.pj-artist-hero{
  text-align:center;padding:8px 0 32px;margin-bottom:32px;
  border-bottom:1px solid var(--line);
}
.pj-artist-avatar{
  width:140px;height:140px;margin:0 auto;border-radius:50%;object-fit:cover;
  background:var(--surface-2);border:4px solid var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 10px 24px rgba(0,0,0,.1);
  overflow:hidden;font-size:0;color:transparent;
}
.pj-artist-name{
  margin:20px 0 0;font:700 26px var(--font-display);color:var(--ink);line-height:1.25;
}
.pj-artist-suffix{
  display:block;margin-top:5px;font:600 12.5px var(--font-body);
  color:var(--blue);text-transform:uppercase;letter-spacing:.06em;
}
.pj-artist-stats{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:24px}
.pj-stat{display:flex;flex-direction:column;align-items:center;gap:3px}
.pj-stat-num{font:800 28px var(--font-display);color:var(--ink)}
.pj-stat-label{font:600 11px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim)}
.pj-stat-divider{width:1px;height:34px;background:var(--line)}

/* ---------- album/song hero (cover + info box, equal height) ---------- */
.pj-hero{
  display:flex;align-items:stretch;gap:24px;margin-bottom:24px;
  padding-bottom:24px;border-bottom:1px solid var(--line);
}
.pj-hero-cover{
  flex:none;width:220px;height:auto;border-radius:10px;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden;font-size:0;color:transparent;
}
.pj-hero-info{flex:1;min-width:0;display:flex}
.pj-meta{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0;
  font:500 13px var(--font-body);color:var(--ink-dim);
}
.pj-meta span{display:inline-flex;align-items:center;gap:8px}
.pj-meta span:not(:last-child)::after{content:"·";margin:0 8px;color:var(--line);font-weight:700}
.pj-meta a{color:var(--blue)}
.pj-meta a:hover{text-decoration:underline}

/* ---------- info box (structured track/album details) ---------- */
.pj-infobox{
  position:relative;flex:1;min-width:0;margin:0;padding:18px;
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
}
.pj-infobox-label{
  position:absolute;top:-11px;left:16px;
  font:700 10.5px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
  color:#fff;background:var(--blue);padding:3px 10px;border-radius:4px;
}
.pj-infobox-row{
  display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);
  font:500 13px var(--font-body);
}
.pj-infobox-row:last-child{border-bottom:none}
.pj-infobox-row dt{flex:none;width:118px;margin:0;font-weight:700;color:var(--ink)}
.pj-infobox-row dd{flex:1;min-width:0;margin:0;color:var(--ink-dim)}
.pj-infobox-row dd a{color:var(--blue)}
.pj-infobox-row dd a:hover{text-decoration:underline}
.pj-desc{
  margin:0 0 40px;padding:14px 16px;border-left:3px solid var(--blue);background:var(--surface-2);
  font:500 13px/1.7 var(--font-body);color:var(--ink-dim);border-radius:0 5px 5px 0;
}
.pj-desc--full{width:100%;box-sizing:border-box}

/* ---------- player (song page) ---------- */
.pj-player{
  display:flex;align-items:center;gap:16px;
  margin:0 0 14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);
}
.pj-player-play{
  flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;border:none;
}
.pj-player-play:hover{background:#1d54c4}
.pj-player-play .pj-play-icon{margin-left:2px}

.pj-buffer-icon{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:pj-spin .7s linear infinite;
}
.pj-play .pj-buffer-icon{width:14px;height:14px;border-color:rgba(41,108,237,.25);border-top-color:var(--blue)}
@media (prefers-reduced-motion:reduce){
  .pj-buffer-icon{animation:none}
}
.pj-player-body{flex:1;min-width:0}
.pj-player-seek{
  position:relative;height:6px;border-radius:999px;background:var(--line);
  cursor:pointer;overflow:hidden;
}
.pj-player-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--blue);border-radius:999px}
.pj-player-times{
  display:flex;justify-content:space-between;margin-top:7px;
  font:600 11px var(--font-mono);color:var(--ink-dim);
}
.pj-player-status{
  display:block;margin-bottom:6px;font:700 11.5px var(--font-body);color:var(--blue);
}

/* ---------- downloads (song page) ---------- */
.pj-downloads{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;
  padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
}
.pj-dlbtn{
  display:inline-flex;align-items:center;gap:7px;flex:1;min-width:110px;justify-content:center;
  font:700 12.5px var(--font-body);letter-spacing:.02em;
  color:var(--blue);background:var(--surface);border:1.5px solid var(--blue);
  border-radius:var(--radius);padding:12px 18px;
}
.pj-dlbtn:hover{color:#fff;background:var(--blue)}

/* ---------- reactions (like/dislike) ---------- */
.pj-reactions{display:flex;align-items:center;gap:10px;margin:0 0 28px;flex-wrap:wrap}
.pj-react{
  display:inline-flex;align-items:center;gap:7px;font:700 13px var(--font-body);color:#fff;
  background:#2FA766;border:1.5px solid #2FA766;border-radius:999px;padding:9px 16px;cursor:pointer;
}
.pj-react:hover{background:#268A54;border-color:#268A54}
.pj-react.is-active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px #2FA766}
.pj-react--dislike{background:var(--brick,#D3452A);border-color:var(--brick,#D3452A)}
.pj-react--dislike:hover{background:#B23A22;border-color:#B23A22}
.pj-react--dislike.is-active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px #D3452A}
.pj-react--dislike svg{transform:scaleY(-1)}

/* ---------- download count (under cover) ---------- */
.pj-hero-coverwrap{flex:none;width:220px;display:flex;flex-direction:column;align-items:center;gap:8px}
.pj-download-count{
  font:700 11px var(--font-mono);color:var(--ink-dim);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;
}

/* ---------- banner ---------- */
.pj-banner{
  margin-bottom:20px;padding:12px 16px;border-radius:var(--radius);
  background:#FBEAE8;color:#A62E19;border:1px solid #F3C7C0;font:600 13px var(--font-body);
}
.pj-banner--ok{background:#E7F8EF;color:#166B3C;border-color:#BEE9D0}

/* ---------- comments ---------- */
.pj-comment-form{
  display:flex;flex-direction:column;gap:12px;padding:18px;margin-bottom:24px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
}
.pj-comment-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.pj-comment-row input,
.pj-comment-form textarea{
  width:100%;font:500 13.5px var(--font-body);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;outline:none;
}
.pj-comment-row input:focus,
.pj-comment-form textarea:focus{border-color:var(--blue)}
.pj-comment-form textarea{min-height:90px;resize:vertical;font-family:var(--font-body)}
.pj-comment-submit{
  align-self:flex-start;font:700 12.5px var(--font-body);color:#fff;background:var(--blue);
  border:none;border-radius:8px;padding:11px 22px;cursor:pointer;
}
.pj-comment-submit:hover{background:#1d54c4}
.pj-comment-note{margin:0;font:500 11.5px var(--font-body);color:var(--ink-dim)}

.pj-comments{display:flex;flex-direction:column;gap:16px}
.pj-comment{display:flex;gap:12px}
.pj-comment-avatar{
  flex:none;width:36px;height:36px;border-radius:50%;background:var(--surface-2);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font:800 13px var(--font-body);
}
.pj-comment-body{flex:1;min-width:0}
.pj-comment-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pj-comment-name{font:700 13px var(--font-body);color:var(--ink)}
.pj-comment-date{font:500 11.5px var(--font-body);color:var(--ink-dim)}
.pj-comment-text{margin:4px 0 0;font:500 13.5px/1.6 var(--font-body);color:var(--ink-dim)}
.pj-comment-empty{color:var(--ink-dim);font:500 13px var(--font-body)}
.pj-comment--pending{opacity:.65}
.pj-comment--pending .pj-comment-date{color:var(--blue)}

/* ---------- track list (with play button) ---------- */
.pj-track-row{
  display:flex;align-items:center;gap:12px;
  border-bottom:1px dashed var(--line);
}
.pj-track-row:hover{background:var(--surface-2)}
.pj-play{
  flex:none;width:34px;height:34px;margin-left:6px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);color:var(--blue);
}
.pj-play:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.pj-play.is-playing{background:var(--blue);color:#fff;border-color:var(--blue)}

.pj-track-row--rich{padding:4px 0}
.pj-track-row--rich .pj-play{margin-left:0}
.pj-track-num{
  flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  font:800 13px var(--font-display);color:var(--blue);
}
.pj-track-row--rich:hover .pj-track-num{background:var(--blue);border-color:var(--blue);color:#fff}
.pj-play-icon{margin-left:1px}
.pj-track-dl{
  flex:none;width:34px;height:34px;margin-right:6px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-dim);
}
.pj-track-dl:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.pj-track-link{
  flex:1;min-width:0;display:flex;align-items:center;gap:16px;padding:13px 6px 13px 0;
}

/* ---------- playlist page: sticky now-playing bar ---------- */
.pj-nowplaying{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px 10px;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(0,0,0,.08);
}
.pj-np-seek{
  position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--line);cursor:pointer;
}
.pj-np-seek::before{
  /* wider invisible hit area so the thin bar is still easy to grab/click */
  content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;
}
.pj-np-seek-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--blue)}
.pj-nowplaying-thumb{
  flex:none;width:40px;height:40px;border-radius:6px;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line);
}
.pj-nowplaying-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pj-nowplaying-title{
  font:600 13.5px var(--font-body);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-nowplaying-times{font:600 10.5px var(--font-mono);color:var(--ink-dim)}
.pj-np-btn{
  flex:none;width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
}
.pj-np-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.pj-np-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.pj-np-btn--main{
  width:42px;height:42px;background:var(--blue);color:#fff;border-color:var(--blue);
}
.pj-np-btn--main:hover{background:var(--brick);border-color:var(--brick)}
.pj-np-btn--main .pj-play-icon{margin-left:1px}
@media (max-width:640px){
  .pj-nowplaying-title{font-size:12.5px}
  .pj-np-btn{width:32px;height:32px}
  .pj-np-btn--main{width:38px;height:38px}
}

/* ---------- playlist page ---------- */
.pj-playall-btn{
  flex:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:800 13px var(--font-body);letter-spacing:.02em;
  color:#fff;background:var(--blue);border:1.5px solid var(--blue);
  border-radius:999px;padding:10px 20px;
}
.pj-playall-btn:hover{background:var(--brick);border-color:var(--brick)}
.pj-track-row--playlist{padding:2px 0}
.pj-track-row--playlist .pj-track-num{
  font:700 12px var(--font-mono);color:var(--ink-dim);background:none;border:none;
  width:26px;height:auto;margin-left:4px;
}
.pj-track-row--playlist .pj-play{margin-left:2px}
.pj-track-row--playlist .pj-track-dur{
  flex:none;font:600 12.5px var(--font-mono);color:var(--ink-dim);padding-right:6px;
}
/* Currently-playing row: same accent as everywhere else on the site, easy to
   spot at a glance instead of only the small play button changing color. */
.pj-track-row--playlist.is-current{background:var(--surface-2)}
.pj-track-row--playlist.is-current .pj-track-num{color:var(--brick)}
.pj-track-row--playlist.is-current .pj-chart-t{color:var(--brick)}

.pj-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 8px 6px 20px;
  margin:24px 0 0;
}
.pj-search-notch{
  position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line);
}
.pj-search-icon{flex:none;color:var(--ink-dim)}
.pj-search input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  font:500 14.5px var(--font-body);color:var(--ink);padding:12px 0;
}
.pj-search input::placeholder{color:var(--ink-dim)}
.pj-search button{
  flex:none;border:none;border-radius:999px;cursor:pointer;
  background:var(--brick);color:#fff;
  font:800 12.5px var(--font-body);letter-spacing:.05em;text-transform:uppercase;
  padding:13px 26px;
}
.pj-search button:hover{background:var(--brick-2)}

/* ---------- section heads ---------- */
.pj-section{margin-bottom:42px}
.pj-section--last{margin-bottom:0}
.pj-ribbonhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--ink);
}
.pj-ribbonhead h2{
  margin:0;flex:1;min-width:0;
  font:600 22px var(--font-display);
  color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-ribbontag{
  flex:none;font:700 11px var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
  color:#fff;background:var(--blue);padding:5px 12px;border-radius:3px;
}
.pj-viewall{
  flex:none;font:700 12px var(--font-body);text-transform:uppercase;letter-spacing:.04em;
  color:var(--blue);
}
.pj-viewall:hover{text-decoration:underline}

/* ---------- playlists rail (homepage) / grid (all-playlists page) ---------- */
.pj-playlist-rail{display:flex;gap:18px;overflow-x:auto;padding:2px 4px 14px}
.pj-playlist-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:22px 18px;
}
.pj-playlist-grid .pj-playlist-card,
.pj-playlist-grid .pj-playlist-cover{width:100%}
.pj-playlist-grid .pj-playlist-cover{aspect-ratio:1/1;height:auto}
.pj-playlist-cta{display:flex;justify-content:center;margin-top:22px}
.pj-playlist-cta-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font:800 14px var(--font-body);letter-spacing:.02em;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--ink);border-radius:999px;
  padding:13px 26px;
}
.pj-playlist-cta-btn:hover{background:var(--ink);color:#fff}
.pj-playlist-cta-btn:hover .pj-beta-tag{background:#fff;color:var(--ink)}
.pj-beta-tag{
  font:800 10px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
  color:#fff;background:var(--brick);padding:3px 8px;border-radius:999px;
}
.pj-playlist-card{flex:none;width:170px}
.pj-playlist-cover{
  position:relative;display:block;width:170px;height:170px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);overflow:hidden;
}
.pj-playlist-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease;
}
.pj-playlist-card:hover .pj-playlist-cover img{transform:scale(1.06)}
.pj-playlist-cover::after{
  /* darken the bottom of the cover so the play button always reads clearly */
  content:"";position:absolute;left:0;right:0;bottom:0;height:60%;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events:none;
}
.pj-playlist-play{
  position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;
  transform:translateY(6px);opacity:0;transition:transform .2s ease,opacity .2s ease;
}
.pj-playlist-card:hover .pj-playlist-play{transform:translateY(0);opacity:1}
.pj-playlist-play svg{margin-left:2px}
.pj-playlist-t{
  display:block;margin-top:10px;font:700 14px var(--font-body);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-playlist-count{
  display:block;margin-top:3px;font:600 11.5px var(--font-mono);color:var(--ink-dim);
}

/* ---------- new releases rail ---------- */
.pj-rail{display:flex;gap:18px;overflow-x:auto;padding:2px 4px 14px}
.pj-vinyl{flex:none;width:160px}
.pj-vinyl-disc{display:none}
.pj-vinyl-cover{
  width:160px;height:160px;border-radius:var(--radius);object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line);
  overflow:hidden;font-size:0;color:transparent;
}
.pj-vinyl-t{
  display:block;margin-top:10px;font:600 14px var(--font-body);color:var(--blue);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-vinyl-a{
  display:block;margin-top:3px;font:600 12px var(--font-mono);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- trending chart ---------- */
.pj-chart{border-top:1px dashed var(--line)}
.pj-chart-row{
  display:flex;align-items:center;gap:16px;padding:13px 6px;
  border-bottom:1px dashed var(--line);
}
.pj-chart-row:hover{background:var(--surface-2)}
.pj-rank{flex:none;width:38px;font:800 20px var(--font-display);color:var(--line)}
.pj-chart-row:hover .pj-rank{color:var(--brick)}
.pj-chart-thumb{
  flex:none;width:56px;height:56px;border-radius:var(--radius);object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line);
  overflow:hidden;font-size:0;color:transparent;
}
.pj-chart-info{flex:1;min-width:0}
.pj-chart-t{
  display:block;font:600 15px var(--font-body);color:var(--blue);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-chart-a{
  display:block;margin-top:3px;font:500 12.5px var(--font-mono);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-stamp{
  flex:none;font:700 10.5px var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-dim);border:1px dashed var(--line);border-radius:3px;padding:5px 10px;
}

/* ---------- hindi / tamil grid ---------- */
.pj-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:1fr;gap:14px;
}
.pj-card{
  display:flex;align-items:center;gap:14px;min-width:0;width:100%;height:100%;
  position:relative;padding:12px;border-radius:4px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,30,60,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pj-card:hover{
  transform:translateY(-3px);
  border-color:var(--blue);
  box-shadow:0 12px 24px -10px rgba(20,30,60,.2);
}
.pj-card-art{
  flex:none;width:72px;height:72px;border-radius:4px;overflow:hidden;position:relative;
  background:var(--surface-2);box-shadow:0 2px 6px rgba(20,30,60,.12);
}
.pj-card-art img{
  width:100%;height:100%;object-fit:cover;font-size:0;color:transparent;
  transition:transform .3s ease;
}
.pj-card:hover .pj-card-art img{transform:scale(1.08)}
.pj-card-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(10,12,20,.45) 100%);
  opacity:0;transition:opacity .2s ease;
}
.pj-card:hover .pj-card-art::after{opacity:1}
.pj-card-art::before{
  content:'';position:absolute;top:50%;left:50%;z-index:1;
  width:28px;height:28px;border-radius:50%;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23296CED'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:54% center;background-size:11px;
  box-shadow:0 4px 10px rgba(10,12,20,.3);
  opacity:0;transform:translate(-50%,-50%) scale(.6);
  transition:opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.pj-card:hover .pj-card-art::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pj-card-info{flex:1;min-width:0}
.pj-card-t{
  display:block;font:700 14.5px var(--font-body);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-card:hover .pj-card-t{color:var(--blue)}
.pj-card-a{
  display:block;margin-top:4px;font:500 12px var(--font-mono);color:var(--ink-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pj-card-count{
  display:inline-block;margin-top:6px;
  padding:2px 8px;border-radius:999px;background:var(--surface-2);
  font:600 10.5px var(--font-mono);color:var(--ink-dim);
}

/* ---------- footer ---------- */
.pj-footer{
  margin:44px -20px 0;padding:34px 20px 0;
  background:#505050;
}
.pj-footgrid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:24px;padding-bottom:28px;
}
.pj-word--foot .pj-word-main{font-size:20px;color:#fff}
.pj-word--foot .pj-word-main .pj-word-accent{color:#FF8A65}
.pj-word--foot .pj-word-dot{color:#8CB4FF}
.pj-footdesc{margin-top:10px;font:500 12.5px/1.6 var(--font-body);color:rgba(255,255,255,.6);max-width:280px}
.pj-foothead{
  font:700 11px var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.9);margin-bottom:12px;
}
.pj-footlinks{display:flex;flex-direction:column;gap:8px}
.pj-footlinks a{font:500 12.5px var(--font-body);color:rgba(255,255,255,.6)}
.pj-footlinks a:hover{color:#8CB4FF}
.pj-footbottom{
  margin:0 -20px;padding:14px 20px;
  background:#454545;
  font:500 11px var(--font-body);color:rgba(255,255,255,.45);text-align:center;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pj-footgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media (max-width:760px){
  .pj-word-main{font-size:32px}
  .pj-ribbonhead h2{font-size:22px}
  .pj-footgrid{grid-template-columns:1fr;gap:24px}
}

@media (max-width:640px){
  .pj-wrap{padding:0 14px;border-radius:0}
  .pj-header{margin:0 -14px;padding:28px 14px 0}
  .pj-word-main{font-size:26px}
  .pj-tagline{font-size:10.5px;margin:8px 0 18px}
  .pj-langbar{gap:6px;padding-bottom:18px}
  .pj-langbar a{padding:8px 14px;font-size:11.5px}
  .pj-search{padding:5px 6px 5px 16px;margin-bottom:26px}
  .pj-search input{font-size:13.5px;padding:10px 0}
  .pj-search button{padding:11px 18px;font-size:11.5px}
  .pj-ribbonhead h2{font-size:19px}
  .pj-vinyl,.pj-vinyl-cover{width:126px}
  .pj-vinyl-cover{height:126px}
  .pj-playlist-card,.pj-playlist-cover{width:126px}
  .pj-playlist-cover{height:126px}
  .pj-grid{grid-template-columns:1fr;gap:10px}
  .pj-card-art{width:60px;height:60px}
  .pj-card-t{font-size:13px}
  .pj-chart-thumb{width:48px;height:48px}
  .pj-stamp{display:none}
  .pj-titleblock{
    text-align:start;margin:0 -14px 20px;padding:0 14px 18px;
    border-bottom:1px solid var(--line);
  }
  .pj-hero-badge{margin-bottom:8px}
  .pj-hero-title{font-size:21px;line-height:1.3}
  .pj-hero-sub{font-size:13px;margin-top:6px}
  .pj-hero{flex-direction:column;align-items:center;gap:16px;padding-bottom:20px}
  .pj-hero-cover{width:150px;height:150px}
  .pj-hero-coverwrap{width:150px}
  .pj-hero-info{width:100%}
  .pj-meta{justify-content:flex-start;text-align:start}
  .pj-infobox{text-align:start}
  .pj-infobox-row dt{width:96px;font-size:12.5px}
  .pj-downloads{flex-direction:column;flex-wrap:nowrap;gap:8px;padding:12px}
  .pj-dlbtn{width:100%;min-width:0;justify-content:center;padding:12px 14px;font-size:13px}
  .pj-crumb{justify-content:flex-start}
  .pj-yearfilter{flex-direction:column;align-items:flex-start;gap:8px}
  .pj-yearbar{width:100%}
  .pj-crumb-current{max-width:140px}
  .pj-artist-avatar{width:104px;height:104px}
  .pj-artist-name{font-size:21px;margin-top:16px}
  .pj-artist-stats{gap:18px;margin-top:18px}
  .pj-stat-num{font-size:22px}
  .pj-track-link{gap:12px;padding:11px 4px 11px 0}
  .pj-play{width:30px;height:30px;margin-left:2px}
}

@media (max-width:400px){
  .pj-word-main{font-size:22px}
  .pj-langbar a{padding:7px 11px;font-size:11px}
  .pj-vinyl,.pj-vinyl-cover{width:110px}
  .pj-vinyl-cover{height:110px}
  .pj-playlist-card,.pj-playlist-cover{width:110px}
  .pj-playlist-cover{height:110px}
  .pj-rank{font-size:20px;width:28px}
  .pj-chart-row{gap:10px;padding:11px 4px}
  .pj-downloads{gap:6px;padding:10px}
  .pj-dlbtn{padding:11px 10px;font-size:12.5px}
}

/* ---- content / legal pages ---- */
.pj-search-hint{font:500 14.5px/1.7 var(--font-body);color:var(--ink-dim);max-width:720px}

.pj-legal{max-width:760px;font:500 14.5px/1.75 var(--font-body);color:var(--ink-dim)}
.pj-legal p{margin:0 0 16px}
.pj-legal h2{margin:32px 0 12px;font:700 19px var(--font-display);color:var(--ink)}
.pj-legal h2:first-child{margin-top:0}
.pj-legal h3{margin:22px 0 8px;font:700 15.5px var(--font-body);color:var(--ink)}
.pj-legal ul{margin:0 0 16px;padding-left:20px}
.pj-legal li{margin-bottom:6px}
.pj-legal a{color:var(--blue);text-decoration:none}
.pj-legal a:hover{text-decoration:underline}
.pj-legal strong{color:var(--ink);font-weight:700}
.pj-legal .pj-legal-updated{
  display:inline-block;margin-bottom:24px;padding:6px 14px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  font:700 11.5px var(--font-mono);color:var(--ink-dim);
}

.pj-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:36px;align-items:start}
.pj-contact-cards{display:flex;flex-direction:column;gap:14px}
.pj-contact-card{
  display:flex;gap:14px;align-items:flex-start;padding:16px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
}
.pj-contact-card svg{flex:none;color:var(--blue);margin-top:2px}
.pj-contact-card-label{display:block;font:700 12px var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);margin-bottom:3px}
.pj-contact-card-value{font:600 14px var(--font-body);color:var(--ink)}
.pj-contact-card-value a{color:var(--ink);text-decoration:none}
.pj-contact-card-value a:hover{color:var(--blue)}

.pj-form{display:flex;flex-direction:column;gap:16px}
.pj-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pj-form label{display:block;margin-bottom:6px;font:700 12.5px var(--font-body);color:var(--ink)}
.pj-form input[type=text],
.pj-form input[type=email],
.pj-form textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  font:500 14px var(--font-body);color:var(--ink);background:var(--surface);
}
.pj-form input:focus,.pj-form textarea:focus{outline:none;border-color:var(--blue)}
.pj-form textarea{resize:vertical;min-height:120px}
.pj-form button{
  align-self:flex-start;padding:12px 28px;border:none;border-radius:var(--radius);
  background:var(--blue);color:#fff;font:700 14px var(--font-body);cursor:pointer;
}
.pj-form button:hover{opacity:.9}
.pj-form button:disabled{opacity:.5;cursor:not-allowed}
.pj-form-note{font:500 12.5px var(--font-body);color:var(--ink-dim);margin-top:-4px}
.pj-form-alert{
  padding:12px 14px;border-radius:var(--radius);font:600 13px var(--font-body);
  margin-bottom:4px;
}
.pj-form-alert--ok{background:#E9F7EF;color:#1E7A3D;border:1px solid #BEE7CC}
.pj-form-alert--err{background:#FDECEC;color:#B3261E;border:1px solid #F5C6C4}
.pj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pj-404{text-align:center;padding:40px 0}
.pj-404-code{font:800 88px var(--font-display);color:var(--blue);line-height:1;margin:0}
.pj-404-title{font:700 22px var(--font-display);color:var(--ink);margin:12px 0 8px}
.pj-404-sub{font:500 14.5px var(--font-body);color:var(--ink-dim);margin:0 0 28px}
.pj-404 .pj-search{max-width:520px;margin:0 auto 28px}
.pj-404-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

@media (max-width:760px){
  .pj-contact-grid{grid-template-columns:1fr;gap:28px}
  .pj-form-row{grid-template-columns:1fr}
  .pj-404-code{font-size:60px}
}

.pj-alert{
  max-width:var(--max-w);
  margin:10px auto;
  padding:10px 16px;
  background:#3a2a06;
  color:#ffd876;
  border:1px solid #6b4e0c;
  border-radius:8px;
  font-size:14px;
  text-align:center;
  line-height:1.4;
}
@media (max-width:760px){
  .pj-alert{margin:8px 12px;font-size:13px}
}