/* Original PHAS2 bar height × .6. This is one reduction from shipped geometry. */
.site-head {
  --studio-header-height-factor:.6;
  --header-gutter:clamp(16px,3.2vw,44px);
  --header-font:clamp(14px,1.45vw,21px);
  --original-header-height:calc(var(--header-gutter) * 2 + (var(--header-font) * 1.1 + 4px) * 3 + 5px);
  height:calc(var(--original-header-height) * .6);
  padding:0 var(--header-gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#242321;
  background:rgba(255,250,240,.97);
  border-bottom:1px solid rgba(36,35,33,.12);
  z-index:20;
}
.site-head .brand {
  position:relative;
  display:block;
  width:clamp(128px,15vw,236px);
  aspect-ratio:1028/224;
  flex-shrink:0;
}
.site-head .brand img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.site-head .brand .on-light {opacity:1;}
.site-head .brand .on-dark {opacity:0;}
body[data-tone="dark"] .site-head .brand .on-light {opacity:1;}
body[data-tone="dark"] .site-head .brand .on-dark {opacity:0;}
body[data-tone="dark"] .site-head .site-nav a {color:#242321;background:transparent;}
.site-head .site-nav {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(6px,1.5vw,24px);
  font:700 var(--header-font)/1.1 "Space Grotesk",Space,Arial,sans-serif;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.site-head .site-nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:2px 2px;
  color:#242321;
  background:transparent;
  text-decoration:none;
  white-space:nowrap;
}
.site-head .site-nav a:hover {color:#ff6500;}
.site-head a:focus-visible {outline:2px solid #242321;outline-offset:3px;}
@media(max-width:560px) {
  .site-head .site-nav a {min-height:32px;}
}
@media(max-width:360px) {
  .site-head .brand {width:100px;}
}