.music-page {
    --music-orange: var(--hunter-red);
    --music-blue: var(--hunter-yellow);
    --music-purple: var(--hunter-silver);
    background:
        radial-gradient(circle at 92% 9%, rgba(234, 255, 0, .13), transparent 31rem),
        radial-gradient(circle at 3% 36%, rgba(209, 40, 56, .20), transparent 29rem),
        radial-gradient(circle at 78% 74%, rgba(203, 211, 218, .08), transparent 34rem);
}

.music-hero h1 span {
    color: var(--hunter-yellow);
    text-shadow: 3px 3px 0 rgba(209, 40, 56, .72);
}

.music-hero__photo,
.music-contact {
    border-color: rgba(234, 255, 0, .25);
}

.music-hero__photo {
    box-shadow: 14px 14px 0 var(--hunter-red), 25px 25px 0 rgba(203, 211, 218, .38), 0 35px 90px rgba(0, 0, 0, .4);
}

.music-feature--blue {
    color: var(--hunter-yellow);
}

.music-feature--silver {
    color: var(--hunter-silver);
}

.music-feature h3 {
    margin-top: 2.5rem;
}

.music-stage__visual > p {
    display: none;
}

@media (max-width: 560px) {
    .music-hero__photo {
        box-shadow: 7px 7px 0 var(--hunter-red), 13px 13px 0 rgba(203, 211, 218, .38);
    }
}

.music-score {
    position: relative;
    width: min(86vw, 440px);
    padding: 2rem 1.6rem 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(7, 17, 31, .18);
    border-left: 12px solid var(--hunter-red);
    border-radius: .4rem;
    background: #f4f6ed;
    color: var(--hunter-navy);
    box-shadow: 18px 18px 0 var(--hunter-yellow), 30px 30px 0 rgba(203, 211, 218, .8), 0 35px 70px rgba(7, 17, 31, .24);
    transform: rotate(-3deg);
}

.music-score::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 7rem;
    height: .45rem;
    background: linear-gradient(90deg, var(--hunter-red), var(--hunter-yellow), var(--hunter-silver));
}

.music-score__label,
.music-score strong,
.music-score small {
    display: block;
    position: relative;
    z-index: 2;
}

.music-score__label {
    color: var(--hunter-red);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.music-score svg {
    display: block;
    width: 100%;
    margin: .4rem 0 -.3rem;
}

.music-staff {
    fill: none;
    stroke: var(--hunter-navy);
    stroke-width: 3;
    opacity: .42;
}

.music-staff .music-bar {
    stroke-width: 7;
    opacity: 1;
}

.music-notes {
    fill: var(--hunter-navy);
    stroke: var(--hunter-navy);
    stroke-width: 7;
    stroke-linecap: round;
}

.music-notes g:nth-child(2),
.music-notes g:nth-child(4) {
    fill: var(--hunter-red);
    stroke: var(--hunter-red);
}

.music-score strong {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: .9;
    letter-spacing: -.055em;
}

.music-score small {
    margin-top: .65rem;
    color: #4b5563;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    .music-score {
        box-shadow: 9px 9px 0 var(--hunter-yellow), 16px 16px 0 rgba(203, 211, 218, .8), 0 25px 55px rgba(7, 17, 31, .2);
        transform: rotate(-2deg);
    }
}
