/* UI/UX: header, nav, footer, page frame, scroll text animation */
.skip-link { position: absolute; left: -999px; top: var(--space); padding: .5rem 1rem; background: var(--color-accent); color: var(--color-bg); font-weight: 700; z-index: 10; }
.skip-link:focus { left: var(--space); }
.site-header { display: flex; flex-wrap: wrap; gap: .5rem var(--space); align-items: center; justify-content: space-between; padding: var(--space); border-bottom: var(--rule-width) solid var(--color-rule); }
.brand { font-family: var(--font-display); font-size: var(--step-h3); font-weight: var(--weight-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-text); text-decoration: none; }
.nav-list { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-list a { display: block; padding: .6rem .8rem; min-height: 44px; box-sizing: border-box; color: var(--color-text); text-decoration: none; border-bottom: 3px solid transparent; }
.nav-list a:hover { border-bottom-color: var(--color-accent); }
.nav-list a { font-size: var(--step-small); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.nav-list a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 700; }
a:focus-visible, .brand:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space-l) var(--space); overflow-wrap: break-word; }
main h2 { font-family: var(--font-display); font-size: var(--step-h2); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-transform: uppercase; margin: var(--space-section) 0 var(--space-m); }
main p { font-size: var(--step-body); line-height: var(--leading-body); max-width: var(--measure); }
.site-footer { padding: var(--space); text-align: center; border-top: var(--rule-width) solid var(--color-rule); }
@media (max-width: 40rem) {
  .site-header { flex-direction: column; align-items: flex-start; }
  .nav-list { width: 100%; }
  .nav-list li { flex: 1 1 auto; }
  .nav-list a { text-align: center; }
}

/* Scroll text animation: only active when nav.js adds .js and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .js .word { display: inline-block; overflow: hidden; vertical-align: top; }
  .js .word > span { display: inline-block; transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .js .is-visible .word > span { transform: none; }
  .js [data-reveal] { opacity: 0; transform: translateY(2.5rem); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}