Give section badge pills a rhomboid shape

app/globals.css

@@ -210,6 +210,38 @@
   );
 }
 
+@utility rhomboid {
+  /* Rhomboid (skewed parallelogram) chrome drawn on a pseudo-element so the
+     label itself stays upright. Colors come from --rhomboid-* (see the
+     rhomboid-emerald / rhomboid-strong modifiers). */
+  position: relative;
+  isolation: isolate;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    transform: skewX(-12deg);
+    /* Rounded before the skew, so the slanted points read as soft corners
+       rather than blades. */
+    border-radius: var(--rhomboid-radius, 6px);
+    border: 1px solid var(--rhomboid-border, rgba(167, 139, 250, 0.3));
+    background: var(--rhomboid-bg, rgba(139, 92, 246, 0.1));
+    backdrop-filter: blur(12px);
+  }
+}
+
+@utility rhomboid-emerald {
+  --rhomboid-border: rgba(52, 211, 153, 0.3);
+  --rhomboid-bg: rgba(16, 185, 129, 0.1);
+}
+
+@utility rhomboid-strong {
+  --rhomboid-border: rgba(167, 139, 250, 0.4);
+  --rhomboid-bg: rgba(139, 92, 246, 0.2);
+}
+
 @utility vignette {
   box-shadow: inset 0 0 200px 50px rgba(0, 0, 0, 0.5);
 }