:root{
  --bg1:#000000;
  --bg2:#070707;
  --card:#000000cc;
  --accent:#ffffff;
  --muted:#bdbdbd;
  --btn-bg:transparent;
}

*{box-sizing:border-box}
html,body{height:auto}
body{
  margin:0;
  font-family: "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:block;
  padding:36px 16px;
  -webkit-overflow-scrolling:touch;
}

.container{
  width:100%;
  max-width:880px;
  text-align:center;
  margin:0 auto;
  padding:22px 18px;
  box-sizing:border-box;
}

.hero{margin-bottom:20px}
.avatar{
  width:180px;max-width:42%;height:auto;object-fit:cover;border-radius:4px;border:2px solid #fff;display:block;margin:0 auto 14px;filter:grayscale(100%) contrast(120%);
  box-shadow:0 18px 40px rgba(0,0,0,0.7);
}
.artist-name{font-size:1.8rem;margin:0 0 8px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.tagline{color:var(--muted);margin:0 0 20px;font-size:0.78rem;letter-spacing:1px}

.links{display:flex;flex-direction:column;gap:12px;padding:6px}
.album{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.album-art{width:160px;max-width:40%;height:auto;object-fit:cover;border-radius:2px;border:2px solid #fff;filter:grayscale(100%) contrast(120%);box-shadow:0 30px 60px rgba(0,0,0,0.8)}
.album-meta{text-align:left;color:var(--accent);max-width:360px}
.album-title{font-size:1.25rem;margin:0 0 6px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.album-meta .release{color:var(--muted);margin:0 0 12px;font-weight:700}
.album-ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:12px 16px;border-radius:6px;text-decoration:none;color:var(--accent);background:var(--btn-bg);border:2px solid #fff;font-weight:800;font-size:0.9rem;letter-spacing:1px;transition:all .12s ease}
.btn:hover{background:#fff;color:#000;transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px dashed #bbb;color:var(--muted);font-weight:700}

.socials{display:flex;gap:14px;justify-content:center;padding-top:18px}
.icon{color:var(--muted);opacity:0.95}
.icon:hover{color:var(--accent);transform:translateY(-3px)}

/* focus styles for accessibility */
.btn:focus,.icon:focus{outline:3px solid rgba(255,92,138,0.18);outline-offset:3px}

@media (max-width:720px){
  .container{padding:18px}
  .avatar{width:140px;max-width:60%}
  .album-art{width:140px;max-width:60%}
  .artist-name{font-size:1.3rem}
}

@media (max-width:420px){
  .container{padding:14px}
  .avatar{width:120px;max-width:70%}
  .album-art{width:120px;max-width:70%}
  .btn{padding:10px 12px;font-size:0.88rem}
  .artist-name{font-size:1.1rem}
}