@font-face {
  font-family: Canopy;
  src: url("canopy-display.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}

.counterstrain {
  --bg: #0c0912;
  --panel: #151020;
  --line: #382b4a;
  --lime: #edff00;
  --pink: #ff49a6;
  --cyan: #55e9ff;
  background: radial-gradient(ellipse at 83% 6%, #241335, transparent 58%), var(--bg);
}

.counterstrain .brand {
  font-family: Canopy, system-ui, sans-serif;
  letter-spacing: 0;
}

.counterstrain .artist {
  min-height: 560px;
  background: #100b19;
  border-color: #463358;
}

.artist-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("after-hours-2077.webp") center 54% / cover no-repeat;
}

.artist-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0c0816fa, #0c0816db 36%, #0c08166b 70%, #0c081620),
              linear-gradient(0deg, #0c0816b3, transparent 46%);
}

.counterstrain .artist h1 {
  font-family: Canopy, system-ui, sans-serif;
  font-size: clamp(2rem, 6.35vw, 6.1rem);
  letter-spacing: -.035em;
  line-height: 1;
  text-shadow: 0 5px 28px #0c0912d9;
}

.counterstrain .artist h1 span { color: var(--pink); }
.counterstrain .artist .intro { color: #f5eef9; }
.counterstrain .artist .secondary { border-color: #9c83ba; background: #130e20; }
.counterstrain .artist .secondary:hover { background: #2c2042; }
.counterstrain .artist .shop { border-color: var(--cyan); color: var(--cyan); }
.counterstrain .artist .shop:hover { background: #163142; }
.counterstrain .feature .text-link { color: var(--cyan); }
.counterstrain .feature .text-link:hover { color: var(--lime); }
.counterstrain .feature h2 { color: #f6effb; }

@media (max-width: 620px) {
  .counterstrain .artist { min-height: 520px; align-items: end; }
  .counterstrain .artist .hero-inner { padding-block: 150px 35px; }
  .artist-art { background-position: 72% 55%; }
  .artist-art::after {
    background: linear-gradient(0deg, #100b19 9%, #100b19eb 38%, #100b194d 82%),
                linear-gradient(90deg, #100b193d, transparent);
  }
  .counterstrain .artist h1 { font-size: clamp(2.65rem, 11vw, 4.5rem); }
}