/* UI/UX: page shell, header, nav and footer layout. Mobile first. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-wrap: break-word; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 10; padding: var(--space-1) var(--space-2); background: var(--color-bg); color: var(--color-link); }
.skip-link:focus { left: var(--space-1); top: var(--space-1); }

.site-header, main, .site-footer { max-width: 60rem; margin: 0 auto; padding: var(--space-2); }
.site-header, .site-footer { max-width: none; padding-inline: max(var(--space-2), calc((100% - 60rem) / 2)); }
.site-header { background: var(--color-header-bg); color: var(--color-header-text); border-bottom: 4px solid var(--color-accent-strong); }
.site-header a { color: var(--color-header-text); }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 3px solid var(--color-accent-strong); outline-offset: 2px; }
.site-header a:hover { color: var(--color-accent-strong); }
.nav-toggle { background: transparent; color: var(--color-header-text); border: 1px solid var(--color-header-text); border-radius: var(--radius); }
.site-footer { background: var(--color-surface); color: var(--color-muted); border-top: var(--rule); margin-top: var(--space-3); }
.site-title { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: 1.25rem; font-weight: bold; }
.site-title a { color: inherit; text-decoration: none; }
.site-title a:hover { text-decoration: underline; }

/* Navigation: a stacked list on phones, a wrapping row on wide screens. */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav a { display: block; padding: 0.75rem 0.25rem; min-height: 2.75rem; }
.site-nav ul[hidden] { display: none; }
.site-nav li + li { border-top: 1px solid rgba(250, 248, 243, 0.25); }
.site-nav a[aria-current="page"] { border-left: 4px solid var(--color-accent-strong); padding-left: 0.5rem; }

/* The menu button only appears when JavaScript is running (nav.js adds .js). */
.nav-toggle { display: none; min-height: 2.75rem; padding: 0 var(--space-2); font: inherit; cursor: pointer; }
.js .nav-toggle { display: inline-block; }

main { padding-top: var(--space-3); padding-bottom: var(--space-3); }
main p, main li { max-width: var(--measure); }
main :target { scroll-margin-top: var(--space-2); }

@media (min-width: 48rem) {
  .site-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
  .site-title { margin: 0; }
  .js .nav-toggle { display: none; }
  .site-nav ul, .site-nav ul[hidden] { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-2); }
  .site-nav li + li { border-top: 0; }
  .site-nav a { padding: 0.5rem 0.25rem; min-height: 0; }
  .site-nav a[aria-current="page"] { border-left: 0; padding-left: 0.25rem; border-bottom: 3px solid var(--color-accent-strong); }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }