feat: ✨ add home button to navigate back to character select

When deep-linking character pages there's no way for a visitor to know there's other characters as well

src/components/navigation.webc

@@ -1,4 +1,5 @@
 <nav :aria-label="label" webc:root="override">
+  <a class="home link" href="/#characters"> <icon icon="fa6-solid:chevron-left"></icon> Home </a>
   <label for="nav-toggle">
     <icon icon="fa6-solid:bars"></icon>
   </label>
@@ -32,7 +33,11 @@
     inset: 0.5em;
 
     display: grid;
+    grid-auto-flow: column;
+    justify-content: space-between;
     justify-items: end;
+    align-items: center;
+    gap: 1em;
 
     background-color: var(--nav-background-color);
     box-shadow: var(--box-shadow);
@@ -44,7 +49,7 @@
 
     z-index: 2;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       --nav-spacing: 1.5em;
       --nav-background-color: transparent;
       --nav-border: none;
@@ -70,7 +75,7 @@
     margin-block: 0.75em;
     margin-inline: 1em;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       display: none;
     }
   }
@@ -109,7 +114,7 @@
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       --nav-items-position: static;
       --nav-items-orientation: row nowrap;
       align-items: start;
@@ -123,7 +128,7 @@
     height: 0;
     transition: height 0.4s ease-in-out;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       height: 100%;
     }
   }
@@ -138,10 +143,36 @@
     padding-block: calc(var(--nav-spacing) / 2);
 
     transition: color 0.4s ease;
+
+    & svg {
+      width: 1em;
+      height: 1em;
+      transition: fill 0.4s ease;
+    }
+  }
+
+  :host .home {
+    display: flex;
+    align-items: center;
+    gap: 0.125em;
+
+    padding-inline: 0.75em 1em;
+
+    z-index: 3;
+
+    @media (min-width: 48em) {
+      background-color: var(--clr-nav-background);
+      box-shadow: var(--box-shadow);
+      border-radius: inherit;
+    }
   }
 
   :host .link:hover {
     color: var(--clr-nav-link-hover);
+
+    & svg {
+      fill: var(--clr-nav-link-hover);
+    }
   }
 
   :host .link-active {