@media (min-width: 901px) {
  html {
    scrollbar-gutter: stable;
  }

  :root {
    --site-logo-size: 32px;
    --site-nav-size: 16px;
  }

  .site-header .header-inner,
  .studio-header .studio-header-inner {
    width: min(1240px, 100% - 32px);
    min-height: 94px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .site-header .logo,
  .studio-header .brand {
    flex: 0 0 auto;
    padding: 0 0 0 8px;
    font-size: var(--site-logo-size);
    line-height: 1;
    letter-spacing: 0;
  }

  .site-header .main-nav a,
  .studio-header .studio-nav a {
    font-size: var(--site-nav-size);
    letter-spacing: 0;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  :root {
    --site-logo-size: 26px;
    --site-nav-size: 14px;
  }
}

@media (min-width: 1440px) {
  :root {
    --site-logo-size: 38px;
    --site-nav-size: 18px;
  }
}