.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* First-page draft: the performance photo fills the entire hero. */
.hero {
  background: #10100f;
  padding-top: 95px;
  min-height: 800px;
  height: auto;
}

.hero-photo {
  top: 0;
  right: 0;
  left: auto;
  width: 72%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 1;
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.hero::before {
  display: block;
  inset: 0;
  background: url("dj-al-gee.png") center 42% / cover no-repeat;
  filter: blur(42px) saturate(1.2);
  opacity: .7;
  mask-image: none;
}

.hero::after {
  inset: 0;
  background:
    linear-gradient(90deg, #080a13f8 0%, #080a13ed 42%, #080a1366 70%, #080a1312 100%),
    linear-gradient(0deg, #080a13b8 0%, transparent 25%);
}

.hero-grid {
  opacity: .2;
}

.hero-content {
  width: min(100%, 480px);
  transform: none;
}

.hero-logo-frame {
  width: min(100%, 430px);
  height: auto;
  aspect-ratio: 5 / 4.1;
  overflow: hidden;
  margin: 0 auto;
}

.hero-logo {
  position: absolute;
  top: -22%;
  left: 0;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px #ffffffa6) drop-shadow(0 12px 16px #000b);
}

.hero-sub {
  position: relative;
  z-index: 3;
  margin: -65px 0 22px;
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 390px);
  gap: 12px;
  margin-top: 0;
}

.hero-actions .platform-button {
  height: 86px;
  padding: 8px 12px;
  overflow: hidden;
  border: 1px solid #ffffff80;
  border-radius: 14px;
  background: #090e19d9;
  box-shadow: 0 14px 30px #0009, inset 0 1px #ffffff30;
}

.hero-actions .platform-button img {
  width: 138px;
  height: 42px;
}

.hero-actions .platform-button:hover,
.hero-actions .platform-button:focus-visible {
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: #101522f2;
  box-shadow: 0 18px 34px #000a, 0 0 16px var(--glow);
  filter: none;
}

/* SoundCloud section in the draft. */
.listen h2 .press-play {
  color: #ff5500;
}

.listen .soundcloud-prompt {
  color: #ff5500;
  font-family: 'MarkerFelt-Wide', 'Marker Felt', 'Comic Sans MS', cursive;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 9px #000c;
}

.listen .section-copy .soundcloud-listen-link:not(.hidden) {
  display: flex;
  width: 165px;
  min-height: 76px;
  padding: 8px 10px;
  margin: 12px auto 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #ffffff80;
  border-radius: 14px;
  background: #090e19d9;
  box-shadow: 0 14px 30px #0009, inset 0 1px #ffffff30;
  text-align: center;
}

.listen .section-copy .soundcloud-listen-link:not(.hidden):hover,
.listen .section-copy .soundcloud-listen-link:not(.hidden):focus-visible {
  border-color: #ff5500;
  background: #101522f2;
  box-shadow: 0 18px 34px #000a, 0 0 16px #ff550055;
  filter: none;
}

.listen .soundcloud-listen-link img {
  width: 120px;
  max-height: 36px;
}

.listen .soundcloud-listen-link span {
  color: #ff5500;
  font-size: .82rem;
}

.edits-intro .section-copy p {
  color: #ed5148;
  font-family: 'MarkerFelt-Wide', 'Marker Felt', 'Comic Sans MS', cursive;
  font-size: clamp(1.2rem, 1.75vw, 1.48rem);
  font-weight: 400;
  line-height: 1.38;
}

/* Keep the Crooklyn badge with the main logo and use a compact matching link. */
.edits .crooklyn-feature-logo {
  align-items: flex-end;
  gap: 4px;
}

.edits .crooklyn-feature-logo > img:first-child {
  width: min(70vw, 490px);
  max-height: none;
}

.edits .crooklyn-feature-logo > .crooklyn-feature-badge {
  width: clamp(65px, 10vw, 105px);
  max-height: none;
  margin: 0 0 7px -8px;
  flex: none;
}

.edits .crooklyn-explore {
  display: flex;
  width: 165px;
  min-height: 64px;
  margin: 22px auto 0;
  padding: 8px 14px;
  border: 1px solid #ffffff80;
  border-radius: 14px;
  background: #090e19d9;
  box-shadow: 0 14px 30px #0009, inset 0 1px #ffffff30;
  color: #ed5148;
  font-family: 'MarkerFelt-Wide', 'Marker Felt', 'Comic Sans MS', cursive;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-align: center;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.edits .crooklyn-playlist h3 {
  font-family: 'MarkerFelt-Wide', 'Marker Felt', 'Comic Sans MS', cursive;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
}

.edits .featured-heading-link {
  color: #ed5148;
}

.edits .featured-heading-link:hover,
.edits .featured-heading-link:focus-visible {
  color: #ff746a;
}

.edits .crooklyn-playlist > a.crooklyn-playlist-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 260px);
  min-height: 0;
  padding: 7px 9px;
  border: 1px solid #ffffff80;
  border-radius: 14px;
  background: #090e19d9;
  box-shadow: 0 14px 30px #0009, inset 0 1px #ffffff30;
  line-height: 0;
}

.edits .crooklyn-playlist > a.crooklyn-playlist-buy:hover,
.edits .crooklyn-playlist > a.crooklyn-playlist-buy:focus-visible {
  border-color: var(--accent);
  background: #101522f2;
  box-shadow: 0 18px 34px #000a, 0 0 16px var(--glow);
  filter: none;
}

.site-footer {
  grid-template-columns: 1fr auto 1fr;
}

.site-footer p {
  justify-self: center;
  color: #ed5148;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  text-align: center;
}

.site-footer .back-top {
  justify-self: end;
  color: #fff;
  font-family: 'MarkerFelt-Wide', 'Marker Felt', 'Comic Sans MS', cursive;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .01em;
}

.site-footer .back-top:hover,
.site-footer .back-top:focus-visible {
  color: #fff;
}

@media (max-width: 560px) {
  .listen .two-column > div:first-child,
  .edits-intro > div:first-child,
  .listen .section-copy,
  .edits-intro .section-copy,
  .edits .crooklyn-playlist {
    text-align: center;
  }

  .listen .section-copy,
  .edits-intro .section-copy {
    max-width: 100%;
    margin-inline: auto;
  }

  .edits-intro .section-copy p {
    font-size: 1.1rem;
    text-wrap: balance;
  }

  .edits .crooklyn-playlist {
    align-items: center;
  }

  .edits .crooklyn-playlist > a.crooklyn-playlist-buy {
    margin-inline: auto;
  }

  .site-footer {
    align-items: center;
    text-align: center;
  }

  .site-footer p {
    align-self: center;
  }

  .site-footer .back-top,
  .site-footer small {
    align-self: center;
  }
}

@media (max-width: 360px) {
  .hero-sub {
    margin-top: -45px;
  }

  .listen h2,
  .edits-intro h2 {
    font-size: 3.8rem;
  }

  .edits .crooklyn-feature-logo > img:first-child {
    width: 66vw;
  }
}

.edits .crooklyn-explore:hover,
.edits .crooklyn-explore:focus-visible {
  transform: none;
  filter: none;
  border-color: var(--accent);
  background: #101522f2;
  box-shadow: 0 18px 34px #000a, 0 0 16px var(--glow);
}

@media (min-width: 1101px) {
  .hero-content {
    width: min(100%, 560px);
  }

  .hero-logo-frame {
    width: min(100%, 530px);
  }

  .hero-actions {
    width: min(100%, 390px);
  }
}

@media (max-width: 1100px) {
  .hero {
    min-height: 800px;
  }

  .hero-actions {
    width: min(100%, 390px);
  }
}

@media (max-width: 700px) {
  .hero-actions {
    grid-template-columns: 1fr;
    width: min(100%, 220px);
  }
}

@media (max-width: 560px) {
  .hero {
    min-height: 930px;
    align-items: flex-start;
  }

  .hero-photo {
    width: 100%;
    object-position: 58% center;
    mask-image: none;
  }

  .hero::after {
    inset: 0;
    background: linear-gradient(90deg, #080a13d9, #080a1399),
      linear-gradient(0deg, #080a13d9, transparent 40%);
  }

  .hero-content {
    width: 100%;
    margin-top: 0;
  }

  .hero-logo-frame {
    width: min(100%, 400px);
  }

  .hero-actions {
    width: min(100%, 220px);
  }

  .hero-actions .platform-button {
    height: 86px;
  }
}