/* The full-width masthead folds into a smaller, floating navigation bar. */
.header, .header.glass {
  --nav-progress: 0;
  --nav-inset: clamp(16px, 4vw, 68px);
  --nav-side: 24px;
  --nav-pad-start: 24px;
  --nav-pad-end: 12px;
  --nav-logo-start: 181px;
  --nav-logo-end: 138px;
  --utility-height: 35px;
  left: 50%;
  right: auto;
  top: calc(14px * var(--nav-progress));
  width: calc(100% - 2 * var(--nav-inset) * var(--nav-progress));
  max-width: calc((1 - var(--nav-progress)) * 100vw + var(--nav-progress) * 1320px);
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / calc(.17 * var(--nav-progress)));
  border-radius: calc(20px * var(--nav-progress));
  background: linear-gradient(rgb(18 18 18 / .94), rgb(18 18 18 / calc(.16 + .77 * var(--nav-progress))));
  backdrop-filter: blur(calc(20px * var(--nav-progress)));
  -webkit-backdrop-filter: blur(calc(20px * var(--nav-progress)));
  box-shadow: 0 12px 40px rgb(0 0 0 / calc(.22 * var(--nav-progress)));
  transition: none;
}
.header .utility, .header.glass .utility {
  height: calc(var(--utility-height) * (1 - var(--nav-progress)));
  opacity: calc(1 - var(--nav-progress));
  margin-inline: calc(var(--gutter) * (1 - var(--nav-progress)) + var(--nav-side) * var(--nav-progress));
  border-bottom: 1px solid rgb(255 255 255 / calc(.13 * (1 - var(--nav-progress))));
  transition: none;
}
.header.is-condensed .utility { visibility: hidden; border: 0; }
.header .nav-row, .header.glass .nav-row {
  padding-block: calc(var(--nav-pad-start) * (1 - var(--nav-progress)) + var(--nav-pad-end) * var(--nav-progress));
  padding-inline: calc(var(--gutter) * (1 - var(--nav-progress)) + var(--nav-side) * var(--nav-progress));
  gap: 24px;
  transition: none;
}
.header .brand { width: calc(var(--nav-logo-start) * (1 - var(--nav-progress)) + var(--nav-logo-end) * var(--nav-progress)); }
.header nav { gap: clamp(4px, 1.1vw, 16px); align-items: center; }
.header nav a { padding: 9px 12px; border-radius: 100px; white-space: nowrap; transition: color .2s, background .2s; }
.header nav a:hover, .header nav a[aria-current=page] { background: #ffffff0d; }
.header nav a::after { left: 12px; right: 12px; bottom: 5px; }
.header .btn { min-height: 42px; padding: 11px 22px; white-space: nowrap; }
.header-actions { gap: 16px; }
@media (min-width: 1001px) and (max-width: 1150px) {
  .header .nav-row { gap: 16px; }
  .header nav { gap: 1px; }
  .header nav a { padding-inline: 8px; }
  .header .btn { padding-inline: 18px; }
}
@media (max-width: 1000px) {
  .header, .header.glass { --nav-pad-start: 20px; --nav-pad-end: 10px; --nav-side: 18px; }
  .header .nav-row { gap: 18px; }
}
@media (max-width: 700px) {
  .header, .header.glass {
    --nav-inset: 12px;
    --nav-side: 14px;
    --nav-pad-start: 18px;
    --nav-pad-end: 9px;
    --nav-logo-start: 151px;
    --nav-logo-end: 120px;
    --utility-height: 31px;
    top: calc(10px * var(--nav-progress));
    border-radius: calc(16px * var(--nav-progress));
  }
  .header .menu-button, .header.glass .menu-button { width: 40px; height: 40px; padding: 10px; }
}