Mobile hero: bump tab to 80% width; banner stays right-justified

Tab was rendering at 50% on phone, which made it small and easy to miss.
Bump to 80% width with a 50% max-height cap, anchored bottom: 18% with a
slight right overhang. The hero photo continues to right-justify so the
gray block stays under the tab; the left portion of the RNA photo gets
cropped on phone widths, which is fine.

Author: rhiju

assets/css/style.scss

@@ -183,9 +183,10 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
   filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.25));
 }
 
-/* Mobile: pin the hero to a fixed height (about a person-card height) and
-   show the right-most portion (the teal page-name tab + gray block). The
-   left part of the photo can be cropped — it's the less-informative side. */
+/* Mobile: pin the hero to a fixed height and right-justify the photo so
+   the gray block + teal tab stay visible; the photo crops from the left.
+   The teal tab keeps its desktop proportions so it reads clearly — it's
+   OK if it overlaps the photo. */
 @media (max-width: $bp-phone) {
   .page-hero {
     aspect-ratio: auto;
@@ -194,8 +195,10 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
     background-position: right center;
   }
   .page-hero-tab {
-    width: 50%;
-    bottom: 12%;
+    width: 80%;
+    max-height: 50%;
+    bottom: 18%;
+    right: -2%;
   }
 }