.site-header {
  position: fixed;
  inset: var(--wp-admin--admin-bar--height, 0) 0 auto 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}
.site-header > .wp-block-group {
  padding: var(--wp--preset--spacing--md) 0;
}

.site-header .wp-block-site-title {
  display: none;
}

@media (width < 541px) {
  .wp-block-site-logo img {
    width: 96px;
  }
}

@media (width > 540px) {
  .site-header .wp-block-site-title {
    display: block;
  }
  /* logo hangs into the hero when unscrolled */
  .home .header-logo {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    transition: top 0.3s ease;
  }
  .home .header-logo img {
    width: 200px;
    height: 200px;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
    transition:
      width 0.3s ease,
      height 0.3s ease;
  }

  .site-header.is-scrolled .header-logo,
  body:not(.home) .header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/*
  scrolled state (and the default on every inner page)
*/
.site-header.is-scrolled,
body:not(.home) .site-header {
  background: var(--wp--preset--color--near-black);
  border-bottom-color: var(--wp--preset--color--secondary);
}
.site-header.is-scrolled .header-logo img,
body:not(.home) .header-logo img {
  width: 96px;
  height: 96px;
}
/* inner pages: static bar, push content below the fixed header */
body:not(.home) {
  padding-top: var(--site-header-height, 96px);
}