:root { --header-gutter:clamp(24px,5vw,72px); --header-max:1280px; --header-height:78px; }

.site-header {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  width:min(100%,var(--header-max));
  min-height:var(--header-height);
  margin:0 auto;
  padding:18px var(--header-gutter);
}

.brand {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
  text-decoration:none;
}

.site-header nav { display:flex; align-items:baseline; gap:28px; }
.site-header nav a {
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:opacity 180ms ease;
}

@media (max-width:760px) {
  :root { --header-height:68px; }
  .site-header nav { gap:16px; }
  .site-header nav a { font-size:13px; }
}