/* The header's height transition must not move the document's scroll anchor. */
html { overflow-anchor: none; }

@media (min-width: 641px) and (max-width: 767px) {
  .site-header[data-header-scroll] nav a {
    white-space: nowrap;
    font-size: 0.85rem;
    padding-inline: 6px;
  }
}

@media (max-width: 640px) {
  .site-header[data-header-scroll] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-rows: 40px 38px;
    align-items: center;
    column-gap: 20px;
    row-gap: 5px;
    min-height: 112px;
    padding: 14px 16px;
    transition:
      min-height 0.24s ease,
      padding 0.24s ease,
      row-gap 0.24s ease,
      box-shadow 0.24s ease;
  }

  .site-header[data-header-scroll].is-scrolled {
    min-height: 86px;
    padding-block: 3px;
    row-gap: 1px;
  }

  .site-header[data-header-scroll] .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .site-header[data-header-scroll] .theme-toggle {
    position: static;
    grid-column: 2;
    grid-row: 1;
  }

  .site-header[data-header-scroll] nav {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .site-header[data-header-scroll] nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(0.75rem, calc(2.5vw + 4px), 0.94rem);
    padding-inline: clamp(2px, calc(5vw - 14px), 12px);
  }
}