fix: restore brand text on iOS by isolating from backdrop-filter

Shibuya's .sy-head-blur uses -webkit-backdrop-filter: blur(), which
causes -webkit-background-clip: text on sibling elements to silently
fail in iOS Safari — making the "UltraPlot" nav link invisible.

Adding isolation: isolate to .sy-head-brand creates a new stacking
context, shielding the gradient text compositing from the blur layer.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: cvanelteren

docs/_static/custom.css

@@ -84,6 +84,12 @@
     gap: 0.5rem;
     padding: 0.2rem 0.04rem 0.2rem;
     line-height: 1.25;
+    /* Shibuya's .sy-head-blur sibling uses -webkit-backdrop-filter: blur().
+       On iOS Safari, backdrop-filter on any element in the same stacking
+       context breaks -webkit-background-clip: text in descendants, making
+       the brand text invisible. isolation: isolate creates a new stacking
+       context here so the gradient clip composites independently. */
+    isolation: isolate;
 }
 
 .sy-head .sy-head-brand strong {
@@ -92,31 +98,22 @@
     letter-spacing: 0.065em;
     text-transform: uppercase;
     line-height: 1.25;
-    /* Solid colour fallback — always applied first. On browsers that support
-       background-clip: text the @supports block below overrides this with the
-       gradient. On iOS Safari or any browser where the gradient clip fails the
-       text remains visible in this teal colour instead of disappearing. */
     color: #138a73;
-}
-
-@supports (-webkit-background-clip: text) or (background-clip: text) {
-    .sy-head .sy-head-brand strong {
-        background-image: linear-gradient(
-            90deg,
-            #0f6d5f 0%,
-            #11806b 12%,
-            #139378 24%,
-            #15a685 36%,
-            #17b793 48%,
-            #19a988 60%,
-            #1a9c7d 72%,
-            #1c8f73 84%,
-            #1e8268 100%
-        );
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
+    background-image: linear-gradient(
+        90deg,
+        #0f6d5f 0%,
+        #11806b 12%,
+        #139378 24%,
+        #15a685 36%,
+        #17b793 48%,
+        #19a988 60%,
+        #1a9c7d 72%,
+        #1c8f73 84%,
+        #1e8268 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 @media (min-width: 768px) {