body {
  background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(255,0,0,0.2) 5%, #FFF 10%);
}

nav {
  padding: 20px;
  position: relative;
  > #primary-nav {
    display: none;
  }
  label {
    cursor: pointer;
  }
  > ul {
    background: #FFF;
    display: none;
    position: relative;
    z-index: 1;
  }
  &:has(#primary-nav:checked) {
    #primary-nav + label:after {
      content: ' ×';
    }
    ul {
      display: block;
    }
    label {
      &:before {
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(10px);
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
      }
    }
  }
}