fix(mobile): hide inline header nav below md; add overflow-x:clip guard

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/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}`);