/* UI/UX: header, nav, footer and page layout (mobile first) */
.site-header { display: flex; flex-direction: column; gap: .5rem; padding: var(--space); border-bottom: 3px solid var(--color-accent); }
.brand { font-size: 1.25rem; font-weight: 700; color: var(--color-text); text-decoration: none; }
.brand:hover { text-decoration: underline; }
.nav-list { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-list a { display: block; padding: .6rem .9rem; min-height: 44px; box-sizing: border-box; color: var(--color-text); text-decoration: none; border-radius: .25rem; border-bottom: 3px solid transparent; }
.nav-list a:hover { background: var(--color-surface); }
.nav-list a[aria-current="page"] { font-weight: 700; color: var(--color-accent-dark); border-bottom-color: var(--color-accent); }
.nav-list a:focus-visible, .brand:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.skip-link:focus { z-index: 10; outline: 3px solid var(--color-focus); }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); overflow-wrap: break-word; }
.site-footer { margin-top: 2rem; padding: var(--space); border-top: 1px solid var(--color-line); font-size: .9rem; }
.site-footer p { max-width: 60rem; margin: 0 auto; }
@media (min-width: 48rem) {
  .site-header { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space) 2rem; }
  .site-footer { padding: var(--space) 2rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }