:root {
  --header-height: 96px;
}

.site-header .brand,
body.home-ux .site-header .brand {
  width: auto;
  flex: 0 0 auto;
}

.site-header .brand-image,
body.home-ux .site-header .brand-image {
  width: auto;
  height: clamp(64px, 5vw, 72px);
  max-height: 72px;
}

@media (max-width: 980px) and (min-width: 761px) {
  .site-header .brand-image,
  body.home-ux .site-header .brand-image {
    height: 62px;
  }

  .main-nav {
    gap: 16px;
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 70px;
  }

  .site-header .brand,
  body.home-ux .site-header .brand {
    width: auto;
  }

  .site-header .brand-image,
  body.home-ux .site-header .brand-image {
    width: auto;
    height: 50px;
    max-height: 50px;
  }

  body.home-ux .site-header .nav-wrap {
    min-height: var(--header-height);
  }

  body.home-ux .site-header .header-actions {
    display: none;
  }

  /*
   * Keep both compact controls visible on small screens. The theme control
   * owns the single flexible margin; the menu button stays directly beside it.
   */
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    flex: 0 0 42px;
  }

  .site-header .theme-toggle {
    margin-left: auto;
  }

  body.home-ux .site-header .menu-toggle,
  .site-header .menu-toggle {
    margin-left: 0;
  }

  body.home-ux .site-header .main-nav {
    top: var(--header-height);
  }
}

@media (max-width: 520px) {
  .site-header .brand-image,
  body.home-ux .site-header .brand-image {
    width: auto;
    height: 48px;
    max-height: 48px;
  }

  .site-header .theme-toggle,
  .site-header .menu-toggle {
    flex-basis: 40px;
  }
}