.artist-page {
    --artist-ink: #152027;
    --artist-red: #bd332b;
    --artist-accent: #f4b33c;
    --artist-muted: #53616a;
    --artist-rule: #dce3e6;
    width: min(100% - 32px, 1240px);
    margin: 24px auto 64px;
    color: var(--artist-ink);
    font: 16px/1.5 "Inter", Arial, sans-serif;
    text-align: left;
}
.artist-page *, .artist-page *::before, .artist-page *::after { box-sizing: border-box; }
.artist-page a { color: inherit; text-decoration: none; }
.artist-page a:focus-visible, .artist-page button:focus-visible, .artist-page summary:focus-visible, .artist-page textarea:focus-visible { outline: 3px solid #a95b12; outline-offset: 3px; }
.artist-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: end;
    min-height: clamp(320px, 36vw, 448px);
    overflow: hidden;
    border-top: 4px solid var(--artist-accent);
    border-radius: 8px 8px 0 0;
    background: #172128;
    color: #fff;
}
.artist-hero__photo { position: absolute; inset: 0 0 0 auto; z-index: -2; width: 70%; height: 100%; object-fit: cover; object-position: center 38%; }
.artist-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#172128 1%,#172128 28%,rgba(23,33,40,.86) 44%,rgba(23,33,40,.08) 100%),linear-gradient(0deg,rgba(15,23,28,.6),transparent 65%); content: ""; }
.artist-hero__content { padding: clamp(20px, 4.4vw, 58px); }
.artist-page .artist-hero h1 { max-width: 19ch; margin: 0 0 22px; color: #fff; font-size: clamp(2.55rem, 6vw, 5.35rem); font-weight: 850; letter-spacing: -.055em; line-height: .99; overflow-wrap: anywhere; }
.artist-hero__actions, .artist-comments__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.artist-page .artist-button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px;
    border: 1px solid transparent; border-radius: 5px; background: var(--artist-red); color: #fff;
    font: inherit; font-size: .87rem; font-weight: 730; cursor: pointer;
}
.artist-page .artist-button:hover { background: #9c2720; color: #fff; }
.artist-page .artist-button--outline { border-color: #929da3; background: rgba(20,30,36,.42); }
.artist-page .artist-button--light { border-color: var(--artist-rule); background: #fff; color: var(--artist-ink); }
.artist-page .artist-button--light:hover { background: #f0f3f5; color: var(--artist-ink); }
.artist-audience { display: grid; padding: 0 8px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.artist-audience span, .artist-hero__release small { color: #d4dde2; font-size: .8rem; }
.artist-audience strong { font-size: 1.15rem; }
.artist-page .artist-hero__release { display: inline-flex; align-items: center; gap: 10px; margin-top: 21px; color: #fff; overflow-wrap: anywhere; }
.artist-hero__release span { display: grid; }
.artist-hero__release img { border-radius: 4px; object-fit: cover; }
.artist-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 0 24px; border: 1px solid var(--artist-rule); border-top: 0; background: #fff; }
.artist-nav:empty { display: none; }
.artist-nav a { padding: 12px 0; border-bottom: 2px solid transparent; font-size: .89rem; font-weight: 720; }
.artist-nav a:hover { border-color: var(--artist-red); color: var(--artist-red); }
.artist-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(235px, 1fr); gap: clamp(22px, 4vw, 52px); padding: 0 clamp(18px, 3vw, 42px); border: 1px solid var(--artist-rule); border-top: 0; background: #fff; }
.artist-section { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--artist-rule); scroll-margin-top: 88px; }
.artist-section:last-child { border-bottom: 0; }
.artist-page .artist-section h2 { margin: 0 0 14px; color: var(--artist-ink); font-size: 1.24rem; font-weight: 800; line-height: 1.2; text-transform: none; }
.artist-section p { margin: 0 0 10px; overflow-wrap: anywhere; }
.artist-bio { max-width: 72ch; }
.artist-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.artist-tags a { padding: 4px 10px; border: 1px solid var(--artist-rule); border-radius: 4px; font-size: .8rem; font-weight: 680; }
.artist-page .artist-tags a:hover { border-color: var(--artist-red); color: var(--artist-red); }
.artist-more { margin-top: 12px; }
.artist-page .artist-more summary, .artist-page .artist-text-button { color: var(--artist-red); font: inherit; font-weight: 680; cursor: pointer; }
.artist-more[open] > summary { margin-bottom: 12px; }
.artist-page .artist-track { display: grid; grid-template-columns: 32px 72px minmax(0,1fr); align-items: center; gap: 12px; min-height: 58px; padding: 6px 8px; border-bottom: 1px solid var(--artist-rule); }
.artist-page .artist-track:hover, .artist-page .artist-track[aria-current] { background: #f6f0eb; }
.artist-track img { width: 72px; height: 42px; border-radius: 3px; object-fit: cover; }
.artist-track strong { overflow-wrap: anywhere; }
.artist-track__play { display: grid; width: 30px; aspect-ratio: 1; place-items: center; border: 1px solid var(--artist-rule); border-radius: 50%; color: var(--artist-red); font-size: .72rem; }
.artist-player { margin-bottom: 10px; }
.artist-player iframe { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 0; border-radius: 5px; background: #172128; }
.artist-albums { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.artist-album img, .artist-album__placeholder { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 5px; object-fit: cover; background: #f0f3f5; }
.artist-album__placeholder { display: grid; place-items: center; color: var(--artist-muted); font-size: 2rem; }
.artist-album strong, .artist-album small { display: block; overflow-wrap: anywhere; }
.artist-album strong { margin-top: 7px; font-size: .89rem; line-height: 1.25; }
.artist-album small, .artist-section time { color: var(--artist-muted); }
.artist-similar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px 10px; text-align: center; }
.artist-similar img { display: block; width: min(100%, 86px); height: auto; aspect-ratio: 1; margin: 0 auto 5px; border-radius: 50%; object-fit: cover; background: #f0f3f5; }
.artist-similar strong { display: block; font-size: .8rem; line-height: 1.24; overflow-wrap: anywhere; }
.artist-page .artist-album:hover strong, .artist-page .artist-similar a:hover, .artist-page .artist-link-list a:hover { color: var(--artist-red); text-decoration: underline; }
.artist-page .artist-link-list { margin: 0; padding: 0; list-style: none; }
.artist-link-list li { padding: 8px 0; border-bottom: 1px solid var(--artist-rule); overflow-wrap: anywhere; }
.artist-link-list li:last-child { border-bottom: 0; }
.artist-comments__signin, .artist-comments__form { padding: 16px; border-radius: 5px; background: #f4f6f7; }
.artist-comments__form label { display: block; margin-bottom: 6px; font-weight: 720; }
.artist-comments__form textarea { display: block; width: 100%; min-height: 94px; padding: 9px; resize: vertical; border: 1px solid #a7b4ba; border-radius: 4px; font: inherit; }
.artist-comments__form small { display: block; margin: 6px 0 10px; color: var(--artist-muted); }
.artist-comments__empty { padding-top: 12px; color: var(--artist-muted); }
.artist-comment { padding: 12px 0; border-bottom: 1px solid var(--artist-rule); }
.artist-comment__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.artist-comment__meta time { font-size: .8rem; }
.artist-page .artist-text-button { padding: 0; border: 0; background: transparent; text-decoration: underline; }
.artist-comments__notice { color: var(--artist-red); }
@media (max-width: 800px) {
    .artist-grid { grid-template-columns: 1fr; gap: 0; }
    .artist-sidebar { border-top: 1px solid var(--artist-rule); }
    .artist-similar { grid-template-columns: repeat(3,minmax(0,105px)); }
}
@media (max-width: 520px) {
    .artist-page { width: calc(100% - 16px); margin-top: 12px; }
    .artist-hero { min-height: 320px; }
    .artist-hero__photo { width: 100%; }
    .artist-hero::after { background: linear-gradient(0deg,#172128 4%,rgba(23,33,40,.87) 51%,rgba(23,33,40,.08) 100%); }
    .artist-nav { gap: 0 15px; padding: 0 14px; }
    .artist-albums { grid-template-columns: repeat(2,minmax(0,1fr)); }
}