@layer components {
  .site-header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 10; color: var(--color-text); padding-block-start: env(safe-area-inset-top); }
  .site-header[data-variant="on-sky"] { color: var(--color-on-sky); }
  .site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-height); }
  .site-header__brand { font: 400 var(--step-0) / 1 var(--font-display); letter-spacing: var(--tracking-brand); text-decoration: none; white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; }
  .site-header__nav { display: none; gap: var(--space-5); margin-inline-start: auto; }
  .site-header__link { font-size: var(--font-size-small); letter-spacing: var(--tracking-nav); text-decoration: none; opacity: 0.9; min-height: var(--tap); display: inline-flex; align-items: center; }
  .site-header__link:hover { opacity: 1; text-decoration: underline; }
  .site-header__cta { margin-inline-start: auto; }
  @media (min-width: 48em) {
    .site-header__nav { display: flex; }
    .site-header__nav + .site-header__cta { margin-inline-start: 0; }
  }
}
@layer components {
  .site-header__link[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; }
}