perf: enforce journey budgets and reference traces

src/styles/layout.css

@@ -6,7 +6,7 @@
   display: grid;
   gap: var(--space-2);
   min-width: 0;
-  padding: var(--space-4) 4vw var(--space-3);
+  padding: calc(var(--space-4) + 44px) 4vw var(--space-3);
   border-block-end: var(--panel-border);
   background: #0b111b;
 }
@@ -21,14 +21,20 @@
 }
 
 .site-navigation {
-  margin-block-start: var(--space-1);
+  position: fixed;
+  z-index: 3;
+  inset: 0 0 auto;
+  min-block-size: 44px;
+  border-block-end: var(--panel-border);
+  background: rgb(7 13 23 / 94%);
+  backdrop-filter: blur(10px);
 }
 
 .site-navigation ul {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
   gap: 0.25rem;
-  max-inline-size: 78rem;
+  max-inline-size: 90rem;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -38,7 +44,8 @@
   display: inline-flex;
   align-items: center;
   min-block-size: 44px;
-  padding-inline: 0.7rem;
+  justify-content: center;
+  padding-inline: 0.4rem;
   color: var(--text-muted);
   font-family: var(--mono);
   font-size: var(--step--1);
@@ -63,7 +70,7 @@
   min-width: 0;
   margin: 0 1rem var(--space-4);
   padding: var(--space-3);
-  scroll-margin-block: var(--space-3);
+  scroll-margin-block-start: calc(44px + var(--space-3));
   border: var(--panel-border);
   border-radius: 2px;
   background: var(--surface);
@@ -89,6 +96,26 @@
 }
 
 @media (max-width: 767px) {
+  .site-header {
+    padding-block-start: calc(var(--space-4) + 88px);
+  }
+
+  .site-navigation ul {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .site-navigation__full-label {
+    display: none;
+  }
+
+  .site-navigation a::after {
+    content: attr(data-compact-label);
+  }
+
+  .portfolio-section {
+    scroll-margin-block-start: calc(88px + var(--space-3));
+  }
+
   .project-link,
   .contact-link,
   .contact-social-link {