Lift hero actions off grid line

app/portfolio.css

@@ -411,6 +411,29 @@
     line-height: 1.2;
   }
 
+  .hero-action-group {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    isolation: isolate;
+    padding: 0.35rem;
+    border-radius: 999px;
+  }
+
+  .hero-action-group::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border: 1px solid var(--color-line);
+    border-radius: inherit;
+    background: var(--surface-card-strong-background);
+    box-shadow: var(--button-secondary-shadow);
+    opacity: 0.92;
+  }
+
   .display-face {
     font-family: var(--font-display), serif;
   }
@@ -809,9 +832,8 @@
     .hero-action-group {
       justify-content: flex-start;
       gap: 0.75rem;
-      position: relative;
-      z-index: 1;
-      padding-bottom: 0.65rem;
+      padding: 0.3rem 0.45rem 0.95rem;
+      border-radius: 26px;
     }
 
     .hero-action-link {
@@ -874,10 +896,12 @@
       align-items: flex-start;
       flex-wrap: wrap;
       gap: 0.75rem;
+      padding-inline: 0.45rem;
+      padding-bottom: 1rem;
     }
 
     [dir="rtl"] .hero-action-group {
-      padding-right: 3.2rem;
+      padding-right: 2.4rem;
     }
 
     .hero-action-group > * {