test: approve automated portfolio visual quality

src/styles/layout.css

@@ -1,3 +1,7 @@
+:root {
+  --site-navigation-block-size: 45px;
+}
+
 .portfolio-shell {
   min-width: 0;
 }
@@ -6,7 +10,8 @@
   display: grid;
   gap: var(--space-2);
   min-width: 0;
-  padding: calc(var(--space-4) + 44px) 4vw var(--space-3);
+  padding: calc(var(--space-4) + var(--site-navigation-block-size)) 4vw
+    var(--space-3);
   border-block-end: var(--panel-border);
   background: #0b111b;
 }
@@ -24,7 +29,7 @@
   position: fixed;
   z-index: 3;
   inset: 0 0 auto;
-  min-block-size: 44px;
+  block-size: var(--site-navigation-block-size);
   border-block-end: var(--panel-border);
   background: rgb(7 13 23 / 94%);
   backdrop-filter: blur(10px);
@@ -33,6 +38,7 @@
 .site-navigation ul {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
+  grid-auto-rows: 44px;
   gap: 0.25rem;
   max-inline-size: 90rem;
   margin: 0;
@@ -42,6 +48,7 @@
 
 .site-navigation a {
   display: inline-flex;
+  inline-size: 100%;
   align-items: center;
   min-block-size: 44px;
   justify-content: center;
@@ -51,7 +58,9 @@
   font-size: var(--step--1);
   letter-spacing: 0.04em;
   text-decoration: none;
-  transition: color var(--transition), background-color var(--transition);
+  transition:
+    color var(--transition),
+    background-color var(--transition);
 }
 
 .site-navigation a:hover,
@@ -60,6 +69,10 @@
   color: var(--text);
 }
 
+.site-navigation a:focus-visible {
+  outline-offset: -3px;
+}
+
 .portfolio-main {
   min-width: 0;
   padding-block: var(--space-4) var(--space-5);
@@ -70,12 +83,16 @@
   min-width: 0;
   margin: 0 1rem var(--space-4);
   padding: var(--space-3);
-  scroll-margin-block-start: calc(44px + var(--space-3));
+  scroll-margin-block-start: calc(
+    var(--site-navigation-block-size) + var(--space-3)
+  );
   border: var(--panel-border);
   border-radius: 2px;
   background: var(--surface);
   box-shadow: var(--panel-shadow);
-  transition: border-color var(--transition), background-color var(--transition);
+  transition:
+    border-color var(--transition),
+    background-color var(--transition);
 }
 
 .portfolio-section:hover {
@@ -96,8 +113,14 @@
 }
 
 @media (max-width: 767px) {
+  :root {
+    --site-navigation-block-size: 93px;
+  }
+
   .site-header {
-    padding-block-start: calc(var(--space-4) + 88px);
+    padding-block-start: calc(
+      var(--space-4) + var(--site-navigation-block-size)
+    );
   }
 
   .site-navigation ul {
@@ -113,7 +136,9 @@
   }
 
   .portfolio-section {
-    scroll-margin-block-start: calc(88px + var(--space-3));
+    scroll-margin-block-start: calc(
+      var(--site-navigation-block-size) + var(--space-3)
+    );
   }
 
   .project-link,