/* App shell: header with wordmark + nav, and the main content container.
 * Works down to 320px-wide screens (header wraps). */

@layer layout {
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .wordmark {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-decoration: none;
    margin-right: auto;
  }
  .wordmark:hover { color: var(--color-text); }

  .site-header nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }
  .site-header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: var(--space-1) var(--space-2);
    margin: 0 calc(-1 * var(--space-1));
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-xs);
  }
  .site-header nav a:hover { color: var(--color-text); background: var(--color-surface-hover); }
  .site-header nav a[aria-current="page"] { color: var(--color-text); font-weight: 550; }
  .site-header nav .btn--ghost { font-weight: 400; }

  main.container {
    max-width: 64rem;
    margin-inline: auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
  }

  /* On phones the nav takes its own row under the wordmark. */
  @media (max-width: 480px) {
    .site-header nav { width: 100%; }
  }
}