fix: mobile hero overlay — stop Lead-briefing badge clipping

Header NavLinks (Top Stories/Canada/National/All) always rendered and
overflowed the ~360-400px viewport, causing whole-page horizontal
scroll + wrapped/bleeding active pill. Now hidden on phones (the
horizontally-scrolling SectionPills row under the header remains the
mobile nav); inline nav returns at md (768px). Added overflow-x:clip on
html as a global NOOP-safe against any future sideways overflow.

src/app/globals.css

@@ -8,6 +8,8 @@
 
 html {
   scroll-behavior: smooth;
+  /* never allow sideways scroll from any overflow (sticky-safe, unlike hidden) */
+  overflow-x: clip;
 }
 
 body {

src/app/page.tsx

@@ -47,14 +47,14 @@ export default async function HomePage({
                       </span>
                     </div>
                   )}
-                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-ink-950/95 via-ink-950/70 to-transparent p-5 pt-16">
+                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-ink-950/95 via-ink-950/70 to-transparent px-4 pb-4 pt-10 sm:px-5 sm:pb-5 sm:pt-16">
                     <span className="mb-2 inline-block rounded bg-maple-600 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wider text-white">
                       Lead briefing
                     </span>
-                    <h1 className="font-display text-2xl font-bold leading-tight text-white sm:text-3xl">
+                    <h1 className="line-clamp-2 font-display text-lg font-bold leading-tight text-white sm:line-clamp-3 sm:text-3xl">
                       {hero.headline ?? hero.title}
                     </h1>
-                    <p className="mt-2 line-clamp-2 text-sm text-ink-200">{hero.excerpt}</p>
+                    <p className="mt-2 line-clamp-1 text-sm text-ink-200 sm:line-clamp-2">{hero.excerpt}</p>
                   </div>
                 </div>
               </Link>

src/components/layout/NavLinks.tsx

@@ -7,7 +7,7 @@ import { SECTIONS } from '@/data/feeds';
 export default function NavLinks() {
   const pathname = usePathname();
   return (
-    <nav className="flex items-center gap-1" aria-label="Primary">
+    <nav className="hidden items-center gap-1 md:flex" aria-label="Primary">
       {SECTIONS.map((s) => {
         const href = s.slug === 'all' ? '/' : `/${s.slug}`;
         const active = s.slug === 'all' ? pathname === '/' : pathname.startsWith(`/${s.slug}`);