@layer components {
  .site-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--block-space-double);
    padding: var(--block-space) clamp(var(--block-space), 4vw, var(--block-space-double));
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .site-nav__brand {
    font-weight: 700;
    font-size: var(--text-medium);
    color: var(--color-ink);

    &:hover {
      text-decoration: none;
    }
  }

  .site-nav__links {
    display: flex;
    gap: var(--block-space);
    flex-wrap: wrap;
  }

  .site-nav__links a {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 500;
    padding: 0.35em 0.1em;

    &:hover {
      color: var(--color-link);
      text-decoration: none;
    }
  }

  .page {
    max-width: 90ch;
    margin-inline: auto;
    padding: var(--block-space-double) clamp(var(--block-space), 4vw, var(--block-space-double));
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .page--wide {
    max-width: 140ch;
  }

  .page-header {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .page-header__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  .actions {
    display: flex;
    gap: var(--inline-space);
    flex-wrap: wrap;
    align-items: center;
  }
}