/* Shared public-site header presentation.
   Common header content: js/site-header.js
   Common header appearance: css/site-header.css */

@media (min-width: 701px) {
  /* Keep the TOP overlay behavior, but make its geometry identical to sub pages. */
  body header.site-header {
    width: 100%;
    height: 112px;
    padding: 32px 6%;
    align-items: center;
  }

  body header.site-header .brand-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .38em;
  }

  body header.site-header nav {
    margin-left: auto;
    gap: 36px;
    font-size: 12px;
    letter-spacing: .22em;
  }

  body header.site-header nav > a {
    padding: 12px 0;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .22em;
  }
}

@media (max-width: 700px) {
  body header.site-header nav { gap: 0; }
  body header.site-header nav > a {
    font-size: clamp(25px, 6vw, 34px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .05em;
  }
}