ASIDE[aria-label="Cookie Notice"] {
    --cookieMargin: 1rem;
    background-color: #fff;
    border-radius: .25rem;
    padding: 1.2rem;
    text-align: center;
    box-shadow: 0 0 18px rgba(0, 0, 0, .2);
    width: max-content;
    max-width: min(1140px, 80%);
    margin-top: var(--cookieMargin);
    bottom: var(--cookieMargin);
    left: 50%; /* of containerWidth */
    translate: -50%; /* [x-axis] of selfWidth */
    position: fixed;
    z-index: 100; /* Currently: Our Social Media icons are set to 'z-index: 89' (for some reason.) */
    box-sizing: border-box;
  }

  ASIDE[aria-label="Cookie Notice"] > DIV:first-child {
    margin: 0 0 1rem;
  }

  ASIDE[aria-label="Cookie Notice"] A:any-link{
  text-decoration:revert;
  text-underline-offset: 4px;
  transition: text-underline-offset .1s;

  &:hover{
    text-underline-offset: 2px;
  }
  &:focus{
      text-decoration: none;
  }
}
  

  ASIDE[aria-label="Cookie Notice"] > BUTTON:last-child {
    font-weight: bold;
    padding: .3rem .9rem;
    background: #002f87;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 0 1px #000;
    border: 1px solid #0007;
    display: block; /* Ensures expected border-collapse behavior and a dedicated newline. */
    margin: auto;

    &:hover,
    &:focus {
      background: #4c6dab;
      /* text-decoration: underline; /* Since it's not an actual hyperlink to a new page, a11y hints the element shouldn't get the same underline treatment. 
      cursor: initial; /* Some purists also argue the cursor should likewise remain set to `default` rather than `pointer`, but I currently disagree on going that far. */
    }
    
    &:active{
        background: radial-gradient(#002F87,#4C6DAB);
    }
  }

  @media (max-width: 768px) {
    ASIDE[aria-label="Cookie Notice"] {
      /* AI crowds it in mobile. */
      left: var(--cookieMargin);
      translate: unset;
      z-index: 2147483646; /* Our AI-vendor is really weird. */
    }
  }