Mobile home: left-aligned bg with cut-off; separate teal tab overlay

Restored the previous mobile home-banner treatment (height 200px,
background-size: auto 200% to show only the top carousel pane,
background-position: 0 0 so the photo is left-aligned and the right
side is cropped at the viewport edge — analogous to research/).

Added .home-banner-tab as a separate <img> overlay (icon_home.png,
cropped from logo_home.png at x=465-1000, y=70-280 → 535x210). It's
hidden on desktop (the teal text is already baked into the bg there)
and shown on mobile, anchored right with height: 45% so it scales
proportionally and the source's 535:210 aspect is preserved. Covers
the bg's leaked teal portion that bleeds into the visible viewport
on widths > ~440px.

Author: rhiju

assets/css/style.scss

@@ -288,6 +288,13 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
   border-radius: 2px;
 }
 
+/* Teal "RNA fold & function from scratch" tab — only used on mobile,
+   where the home banner is treated like other-page heroes (photo on
+   the left, fixed height, right cut off, separate teal tab overlay
+   on the right). On desktop the tab text is already part of the
+   logo_home.png background, so this overlay is hidden. */
+.home-banner-tab { display: none; }
+
 /* Circular teal "research →" tab anchored to the banner's left edge */
 .home-research-arrow {
   position: absolute;
@@ -905,17 +912,28 @@ details.show-more {
      edge of logo_home.png anchored to the right of the viewport — matches
      the .page-hero approach used on interior pages. */
   .home-banner {
-    /* Show only the first carousel pane (1022x348) and let it span the
-       full viewport width so nothing in the artwork — including the
-       'RNA fold & function from scratch' tab on the right — gets clipped
-       at narrow phone widths. The container's height tracks the pane's
-       aspect ratio so it stays proportional, and background-size 100% 200%
-       puts the top pane in the visible window. */
-    aspect-ratio: 1022 / 348;
-    height: auto;
-    background-size: 100% 200%;
+    /* Mobile: same treatment as the interior page-heros. Fixed 200px
+       height, image scaled to fill height and aligned left so the photo
+       (Crystal / Prediction RNA) stays in view; the right side of the
+       source (gray block + baked-in teal tab) is cropped off the right
+       edge of the viewport. The teal tab is rendered separately as
+       .home-banner-tab below — anchored right, scaled to fit. */
+    aspect-ratio: auto;
+    height: 200px;
+    background-size: auto 200%;
     background-position: 0 0;
   }
+
+  .home-banner-tab {
+    display: block;
+    position: absolute;
+    right: -2%;
+    bottom: 15%;
+    height: 45%;
+    width: auto;
+    z-index: 2;
+    filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.25));
+  }
   /* Drop the desktop 5% breakout — at narrow viewports it caused horizontal
      overflow / scroll. */
   .home-stage,

assets/images/site/public/icon_home.png

@@ -7,6 +7,7 @@ slug: home
 <div class="home-stage">
   <a class="home-research-arrow" href="{{ '/research/' | relative_url }}" aria-label="Research">research</a>
   <div class="home-banner" role="img" aria-label="Das Lab — RNA fold and function from scratch"></div>
+  <img class="home-banner-tab" src="{{ '/assets/images/site/public/icon_home.png' | relative_url }}" alt="RNA fold and function from scratch">
 </div>
 
 <div class="home-divider-bars">