/* Shared navigation contract for every public HRCADRY page. */
@media (min-width: 981px) {
  body .site-shell > .topbar,
  body .page-shell > .topbar {
    position: fixed;
    inset: 0 auto auto 0;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    width: 100%;
    min-height: 90px;
    margin: 0;
    padding: 14px max(80px, calc((100vw - 1500px) / 2));
    border: 0;
    border-bottom: 1px solid rgba(216, 177, 100, .24);
    border-radius: 0;
    background: linear-gradient(rgba(10, 10, 9, .78), rgba(10, 10, 9, .9)), url("./black-gold-marble.webp") center / cover;
    box-shadow: none;
    transform: none;
    z-index: 100;
  }

  body .topbar::after { display: none; }
  body .topbar .brand__logo {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  body .topbar > .brand { justify-self: start; }
  body .topbar > .nav { justify-self: center; }
  body .topbar > .button { justify-self: end; }
  body .site-shell:has(> .topbar),
  body .page-shell:has(> .topbar) { padding-top: 90px !important; }
}

@media (max-width: 980px) {
  body .site-shell > .topbar,
  body .page-shell > .topbar {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    border-radius: 0;
    transform: none;
    background: linear-gradient(rgba(10, 10, 9, .78), rgba(10, 10, 9, .9)), url("./black-gold-marble.webp") center / cover;
  }

  body .site-shell:has(> .topbar),
  body .page-shell:has(> .topbar) { padding-top: 0 !important; }
}