Portfolio page logo on mobile menu...

I'm having trouble implementing a logo change on a Squarespace portfolio page when the mobile menu is open. I've specified a different logo for the parent portfolio page, but the change isn't showing on the mobile menu. 

I assume because I am targeting a collection ID, it is interfering with the code. 

Here is the code:

<style>
 /* Set a different logo for this page only - on desktop and mobile */
#collection-66c8769aaa2c9f5cff56529a .header-title-logo a {
content:url(https://static1.squarespace.com/static/649452d206566c5fd4e0aafd/t/66c9bcfd0ef02165db9e0e03/1724497150037/DearLunawhite.png);     
max-height: 42px;
margin-left: auto;
margin-right: auto;
}

/* Hide the original logo when the mobile menu opens */
.header--menu-open #collection-66c8769aaa2c9f5cff56529a .header-title-logo a {
  content: none;
}

/* Insert the mobile logo as a background image when the menu opens */
.header--menu-open .header-title-logo a {
  background-image: url(https://static1.squarespace.com/static/649452d206566c5fd4e0aafd/t/66cc7c1fe3c17103b0a0abdf/1724677151629/DearLunablack.png); /* Replace with your actual URL */
  background-size: cover;
  background-repeat: no-repeat;
}
</style>

@Scenario Hi! Can you share your site URL for context?