/* Site chrome: the one-line header and the two-line footer (theme.md section 4). */
@layer components {
  .site { display: flex; align-items: baseline; gap: 16px; padding: 18px 0 14px; border-bottom: 1px solid var(--rule); }
  .site .mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.05rem; text-decoration: none; letter-spacing: -.01em; }
  .site .mark svg { display: block; flex: none; }
  .site nav { display: flex; gap: 18px; font-size: .95rem; color: var(--muted); margin-left: auto; }
  .site nav a { text-decoration: none; }
  .site nav a[aria-current] { color: var(--ink); text-decoration: underline; }
  @media (max-width: 520px) { .site { flex-wrap: wrap; } .site .theme { width: 100%; } }

  footer.site-foot { margin-top: 40px; padding: 22px 0 40px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
}