.app-header {
  position: sticky;
  z-index: 10;
  top: 0;
  overflow: visible;
  --header-veil-depth: 4rem;
  background: transparent;
}

.app-header::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: calc(var(--header-offset) + var(--header-veil-depth));
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--color-canvas) 0%,
    color-mix(in srgb, var(--color-canvas) 99%, transparent) 30%,
    color-mix(in srgb, var(--color-canvas) 92%, transparent) 50%,
    color-mix(in srgb, var(--color-canvas) 68%, transparent) 68%,
    color-mix(in srgb, var(--color-canvas) 32%, transparent) 84%,
    transparent 100%
  );
  content: "";
}

.app-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 100rem);
  height: var(--header-offset);
  margin-inline: auto;
  align-items: stretch;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: clamp(1.8rem, 3.4vw, 3.75rem) clamp(1.15rem, 2.2vw, 2.25rem);
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

.brand img {
  display: block;
  width: auto;
  height: clamp(3.05rem, 4.4vw, 3.85rem);
  filter: none;
  transform: translateY(-0.02rem);
  transition: filter 160ms ease;
}

:root[data-theme="dark"] .brand img {
  filter: invert(1);
}

.brand:focus-visible {
  z-index: 1;
  outline: 2px solid var(--color-ink);
  outline-offset: -3px;
}

@media (max-width: 62rem) {
  .app-header__inner {
    width: 100%;
  }
}

@media (max-width: 42rem) {
  .app-header {
    --header-veil-depth: 2rem;
  }

  .brand {
    padding-inline: 0.65rem 0.25rem;
  }

  .brand img {
    height: 1.9rem;
  }
}

@media (max-width: 23.5rem) {
  .brand {
    padding-inline: 0.42rem 0.16rem;
  }

  .brand img {
    height: 1.35rem;
  }
}