/* UI/UX: page shell, header, nav and footer layout. Mobile first.
   Token fallbacks keep the shell readable until the designer's extra tokens land. */
*, *::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, #1b1f24); color: var(--color-header-text, #faf8f3); border-bottom: 4px solid var(--color-accent-strong, var(--color-accent)); }
.site-header a { color: inherit; }
.site-header a:hover { color: var(--color-accent-strong, #f2a900); }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 3px solid var(--color-accent-strong, #f2a900); outline-offset: 2px; }
.site-title { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: 1.25rem; font-weight: bold; }
.site-title a { 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 ul[hidden] { display: none; }
.site-nav a { display: block; padding: 0.75rem 0.25rem; min-height: 2.75rem; }
.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, #f2a900); 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; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--radius, 4px); }
.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); }

/* Footer: text on the left, room for the QR block and repo link on the right. */
.site-footer { margin-top: var(--space-3); background: var(--color-surface, #f0ece2); color: var(--color-muted, #4a525c); border-top: var(--rule, 1px solid #cfc8b8); display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer > * { margin: 0; }
.site-footer a { color: var(--color-link); }
.site-footer .footer-qr, .site-footer .qr { max-width: 100%; overflow-x: auto; }

@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, #f2a900); }
  .site-footer { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

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