kinda funky hover states

assets/styles/artist-resident.css

@@ -1,7 +1,7 @@
 .resident {
   margin: 2rem auto;
   display: grid;
-  grid-template: 
+  grid-template:
     'img h1'
     'img desc'
     'img .';
@@ -10,18 +10,18 @@
 
 @media (max-width: 1050px) {
   .resident {
-    grid-template: 
+    grid-template:
       'img'
       'h1'
       'desc';
-  } 
+  }
 }
 
 .resident h1 {
   grid-area: h1;
   font-size: 2rem;
   margin: 0;
-  border-bottom: solid var(--color-accent);
+  border-bottom: .25rem solid var(--color-accent);
 }
 
 .resident img {

assets/styles/directory.css

@@ -14,20 +14,20 @@
 
 #directory li {
   list-style: none;
-  border: solid thin var(--color-accent);
+  border: solid .25rem var(--color-accent);
   border-radius: .5rem;
-  outline-offset: .1rem;
+  outline-offset: .25rem;
   margin: 0;
 }
 
 @media (any-hover: hover) {
   #directory li:hover {
     background-color: var(--color-text);
-    border-color: var(--color-text);
   }
 
   #directory li:hover h2 {
     color: var(--color-bg);
+    border-color: var(--color-accent-flipped);
   }
 }
 

assets/styles/main.css

@@ -1,19 +1,19 @@
 :root {
   color-scheme: light dark;
 
-  --color-light: #d5e9ff;
+  --color-light: #e5e0c7;
-  --color-light-alt: #beddff;
+  --color-light-alt: #d1cbab;
-  --color-dark: #001a33;
+  --color-dark: #142B15;
-  --color-dark-alt: #00274b;
+  --color-dark-alt: #1a3b1b;
-  --color-orange-light: #ff764f;
+  --color-accent-light: #4ba19e;
-  --color-orange-dark: #f55e33;
+  --color-accent-dark: #0c6a74;
 
   --color-bg: light-dark(var(--color-light), var(--color-dark));
   --color-text: light-dark(var(--color-dark), var(--color-light));
   --color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
   --color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
-  --color-accent: light-dark(var(--color-orange-dark), var(--color-orange-light));
+  --color-accent: light-dark(var(--color-accent-dark), var(--color-accent-light));
-  --color-accent-flipped: light-dark(var(--color-orange-light), var(--color-orange-dark));
+  --color-accent-flipped: light-dark(var(--color-accent-light), var(--color-accent-dark));
 }
 
 * {

assets/styles/nav.css

@@ -12,21 +12,23 @@ nav a {
   text-decoration: none;
   font-size: 1.2rem;
   padding: 0 .25rem;
-  border: solid thin var(--color-accent);
+  border: solid .125rem var(--color-accent);
   border-radius: .25rem;
-  outline-offset: .1rem;
 }
 
 @media (any-hover: hover) {
   nav a:hover {
     color: var(--color-bg);
-    background-color: var(--color-text);
+    background-color: var(--color-text-alt);
-    border-color: var(--color-text);
+    border-color: var(--color-accent-flipped);
+    outline: .125rem solid var(--color-accent);
+    outline-offset: 0;
   }
 }
 
 nav a:focus-visible {
-  outline: solid .25rem var(--color-accent);
+  outline: solid .125rem var(--color-accent);
+  outline-offset: .125rem;
 }
 
 #skip {
@@ -37,7 +39,6 @@ nav a:focus-visible {
 	height: 1px;
 	overflow: hidden;
 	z-index: -99;
-  background-color: var(--color-bg);
 }
 
 #skip:focus-visible {