ok

src/components/Header.jsx

@@ -12,7 +12,7 @@ import clsx from 'clsx'
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
-import { Logo } from '@/components/Logo'
+import { Logo2 } from '@/components/Logo2'
 import { NavLink } from '@/components/NavLink'
 
 function MobileNavLink({ href, children }) {
@@ -99,7 +99,7 @@ export function Header() {
             {/* Logo - Left */}
             <div className="flex-shrink-0">
               <Link href="/" aria-label="Home" className="overflow-visible flex-shrink-0">
-                <Logo className="h-7 w-auto max-w-none sm:h-8 md:h-9 lg:h-10" />
+                <Logo2 className="h-7 w-auto max-w-none sm:h-8 md:h-9 lg:h-10" />
               </Link>
             </div>
 

src/components/StorySticky.jsx

@@ -58,7 +58,7 @@ export default function StorySticky({ children }) {
       <div className="hidden lg:flex" ref={containerRef}>
         {/* Sticky left media - extends to left edge */}
         <div className="w-1/2 relative">
-          <div className="sticky top-0 h-auto overflow-hidden">
+          <div className="sticky top-0 h-screen overflow-hidden">
             <div className="absolute inset-0">
               {sections.map((s, i) => (
                 <div
@@ -89,9 +89,9 @@ export default function StorySticky({ children }) {
           </div>
         </div>
 
-        {/* Right column = the original heroes with proper container */}
+        {/* Right column = the original heroes with proper container and height restriction */}
-        <div className="w-1/2 flex flex-col gap-4">
+        <div className="w-1/2 flex flex-col">
-          <div className="mx-auto max-w-7xl px-2">
+          <div className="px-8 py-12 h-[50vh] overflow-y-auto space-y-8">
             {children}
           </div>
         </div>