/* Layout, header, nav, footer: owned by UI/UX. Mobile first. */
*, *::before, *::after { box-sizing: border-box; }

.skip-link {
  position: absolute; left: var(--space); top: -4rem; z-index: 100;
  padding: .6rem 1rem; background: var(--color-text); color: var(--color-bg);
  border-radius: .25rem; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space); }

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem var(--space); padding: .75rem var(--space);
  border-bottom: 1px solid var(--color-border); background: var(--color-surface);
}
.brand { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-text); text-decoration: none; }

.nav-toggle {
  display: none; min-height: 2.75rem; min-width: 2.75rem; padding: .4rem .9rem;
  font: inherit; font-weight: 600; color: var(--color-text); background: transparent;
  border: 2px solid var(--color-text); border-radius: .4rem; cursor: pointer;
}

#site-nav { flex-basis: 100%; }
#site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
#site-nav a {
  display: block; padding: .65rem .75rem; border-radius: .4rem;
  color: var(--color-text); text-decoration: none;
}
#site-nav a:hover { text-decoration: underline; }
#site-nav a[aria-current="page"] {
  font-weight: 700; color: var(--color-accent);
  box-shadow: inset 4px 0 0 var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

/* With JS, collapse the menu on small screens. Without JS it stays open. */
.js .nav-toggle { display: inline-block; }
.js #site-nav[data-open="false"] { display: none; }

main { max-width: min(48rem, var(--max-width)); margin: 0 auto; padding: var(--space); }
h1, h2, h3 { font-family: var(--font-heading); line-height: var(--leading-tight); }
img, svg { max-width: 100%; height: auto; }

.site-footer {
  margin-top: 2rem; padding: var(--space); text-align: center; font-size: .9rem;
  border-top: 1px solid var(--color-border); color: var(--color-muted);
}

@media (min-width: 52rem) {
  .site-header { padding: .75rem 2rem; flex-wrap: nowrap; }
  .js .nav-toggle { display: none; }
  .js #site-nav[data-open="false"], #site-nav { display: block; flex-basis: auto; }
  #site-nav ul { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
  #site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-accent); }
}

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