/* Shared nav + footer alignment (desktop only — mobile uses the hamburger).
   The nav <ul> and the footer inner both use .maxWidth centered, so forcing
   each to fill that width makes their left/right edges line up:
   nav "character design"  ⇄  footer signature (name mark)
   nav "about me"          ⇄  footer social links */

@media (min-width: 850px) {
  .navMobileList {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .navMobileList > li {
    margin: 0;
  }

  /* Shift the end items by the link's own padding (2rem) so their text edges
     line up with the footer — without changing link padding, which would
     resize the active GIF backgrounds. */
  .navMobileList > li:first-child {
    margin-left: -2rem;
  }

  .navMobileList > li.nav-about {
    margin-left: auto;
    margin-right: -2rem;
  }

  .footerSpan {
    width: 100%;
    max-width: 1000px;
  }
}