/* SHADE — neo-noir, midnight-coded, deliberately cold
   Palette: matte black #08090b / gunmetal #1a1d22 / blood orange #ff5b1f /
            crimson #b3221a / sodium amber #f0a04b / cream-grey #d8d4cf
   Display: Bebas Neue / condensed sans hero. Body: clean grotesque + monospace metadata. */

.artist-shade {
  --paper: #08090b;
  --gun: #1a1d22;
  --gun-deep: #11141a;
  --blood: #ff5b1f;
  --crimson: #b3221a;
  --sodium: #f0a04b;
  --ink: #d8d4cf;
  --muted: #8a8a8a;
  --rule: #2a2e35;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--gun-deep) 60%, var(--paper) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  line-height: 1.7;
}

.artist-shade .ar {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.artist-shade h1, .artist-shade h2, .artist-shade h3 {
  font-family: "Bebas Neue", "Oswald", "Arial Narrow", "Impact", sans-serif;
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.artist-shade h2 {
  font-size: 1.7rem;
  color: var(--ink);
  border-left: 3px solid var(--blood);
  padding: 4px 0 4px 14px;
  letter-spacing: 0.06em;
}
.artist-shade h3 {
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--blood);
}

.artist-shade .ar-id {
  position: relative;
  margin-top: 32px;
  padding: 36px 28px 28px;
  background:
    linear-gradient(135deg, rgba(255, 91, 31, 0.08), transparent 60%),
    var(--gun);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 36px) 100%, 0 100%);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: center;
}
.artist-shade .ar-id::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--blood) 30%, transparent 80%);
}
.artist-shade .ar-id::after {
  content: "// scene 01 — sodium light";
  position: absolute;
  top: 10px; right: 24px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.artist-shade .ar-id img {
  width: 160px; height: 160px;
  border: 1px solid var(--rule);
  filter: grayscale(0.55) contrast(1.1) brightness(0.85);
  background: var(--gun-deep);
}
.artist-shade .ar-name {
  font-size: clamp(3rem, 7.2vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  color: var(--ink);
  text-shadow: 0 0 30px rgba(255, 91, 31, 0.18);
}
.artist-shade .ar-genre {
  margin: 6px 0 0;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blood);
}
.artist-shade .ar-roles { margin: 8px 0; }

.artist-shade .sf-tag {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 3px 10px;
  margin: 0 6px 6px 0;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.artist-shade .sf-tags { list-style: none; padding: 0; margin: 0; }

.artist-shade a {
  color: var(--blood);
  text-decoration: none;
  border-bottom: 1px solid var(--crimson);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.artist-shade a:hover { color: var(--sodium); border-color: var(--sodium); }

.artist-shade .ar-blurb,
.artist-shade .ar-going,
.artist-shade .ar-sound,
.artist-shade .ar-influences,
.artist-shade .ar-top,
.artist-shade .ar-off,
.artist-shade .ar-releases,
.artist-shade .ar-producer {
  position: relative;
  padding: 22px 22px 22px 28px;
  background: var(--gun);
  border-left: 1px solid var(--rule);
}
.artist-shade .ar-blurb::before,
.artist-shade .ar-going::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--blood);
}
.artist-shade .ar-going::before { background: var(--crimson); }

.artist-shade .ar-blurb p,
.artist-shade .ar-going p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

.artist-shade .ar-infl-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.artist-shade .ar-infl-cols ul { list-style: none; padding: 0; margin: 0; }
.artist-shade .ar-infl-cols li {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
  font-family: "JetBrains Mono", "Consolas", monospace;
}

.artist-shade .ar-top__list {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: shadecount;
}
.artist-shade .ar-top__list li {
  counter-increment: shadecount;
  padding: 12px 0 12px 56px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.artist-shade .ar-top__list li::before {
  content: counter(shadecount, decimal-leading-zero) " /";
  position: absolute;
  left: 0; top: 14px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.78rem;
  color: var(--blood);
  letter-spacing: 0.06em;
}
.artist-shade .ar-top__title { font-weight: 500; color: var(--ink); }
.artist-shade .ar-top__by { color: var(--muted); }
.artist-shade .ar-top__note {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 0.86rem;
  font-style: italic;
}

.artist-shade .ar-off ul { list-style: none; padding: 0; margin: 0; }
.artist-shade .ar-off li {
  padding: 12px 0 12px 18px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  color: var(--ink);
}
.artist-shade .ar-off li::before {
  content: ">";
  position: absolute;
  left: 0; top: 12px;
  color: var(--blood);
  font-family: "JetBrains Mono", monospace;
}

.artist-shade .ar-releases__grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.artist-shade .ar-rel {
  padding: 16px;
  background: var(--gun-deep);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blood);
}
.artist-shade .ar-rel h3 {
  color: var(--ink);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .artist-shade .ar-id { grid-template-columns: 1fr; text-align: center; clip-path: none; }
  .artist-shade .ar-id img { margin: 0 auto; }
  .artist-shade .ar-id::after { display: none; }
  .artist-shade .ar-infl-cols,
  .artist-shade .ar-releases__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .artist-shade *, .artist-shade *::before, .artist-shade *::after { animation: none !important; transition: none !important; }
}