fix(header): event promo overflow

skills/context/progress-tracker.md

@@ -89,6 +89,7 @@ All seven homepage sections are built, wired, and animated (scroll-driven entran
 
 ## Latest Handoff
 
+- **Event text containment** -- Fixed compact desktop header overflow after the Atlanta event became the next event by letting the right header group and promo pill shrink before the title truncates; moved desktop nav/stake/hamburger breakpoint from lg to xl to give the promo pill room at mid-width viewports; hardened Events card title/location text so realistic long event names and metadata wrap or truncate without horizontal layout overflow.
 - **Cortex Atlanta event** -- Second event added to `events.ts` (stablecoins/payments, Aug 11 EDT, Luma RSVP).
 - **Events mobile carousel** -- Snap-scroll carousel on mobile with prev/next controls, 4-line description clamp, vertical centering. Tablet/desktop unchanged.
 - **Events carousel controls** -- Hydration fix (both flags init `true`), `useOnMount` subscription, `ResizeObserver` instead of `window.resize`, functional `setScrollState` bail-out, `next/dynamic` lazy import.

src/app/globals.css

@@ -1677,8 +1677,8 @@
 
   .header-upcoming-event {
     isolation: isolate;
-    @apply relative inline-flex max-w-full overflow-hidden rounded-full border border-transparent bg-transparent px-3 py-1.5 font-mona text-nav leading-none text-text-secondary transition-colors duration-200 hover:text-text-primary;
-    max-width: min(100%, 17.5rem);
+    @apply relative inline-flex min-w-0 shrink overflow-hidden rounded-full border border-transparent bg-transparent px-3 py-1.5 font-mona text-nav leading-none text-text-secondary transition-colors duration-200 hover:text-text-primary;
+    max-width: min(100%, 18rem);
   }
 
   .header-upcoming-event::before,
@@ -1719,19 +1719,20 @@
   }
 
   .header-upcoming-event-content {
-    @apply relative z-10 flex min-w-0 items-center gap-2;
+    @apply relative z-10 flex min-w-0 w-full items-center gap-2 overflow-hidden;
   }
 
   .header-upcoming-event-pill {
-    @apply inline-flex h-5.5 shrink-0 items-center justify-center rounded-full border border-action-primary px-2.5 font-mona text-[0.5rem] leading-none font-medium whitespace-nowrap text-action-primary uppercase;
+    @apply inline-flex h-5.5 min-w-0 shrink-0 items-center justify-center truncate rounded-full border border-action-primary px-2.5 font-mona text-[0.5rem] leading-none font-medium text-action-primary uppercase;
+    max-width: 8.5rem;
   }
 
   .header-upcoming-event-copy {
-    @apply flex min-w-0 flex-col gap-0.5;
+    @apply flex min-w-0 flex-col gap-0.5 overflow-hidden;
   }
 
   .header-upcoming-event-date {
-    @apply text-[0.625rem] font-semibold uppercase tracking-wide text-brand-cortex-orange;
+    @apply block min-w-0 truncate text-[0.625rem] font-semibold uppercase tracking-wide text-brand-cortex-orange;
   }
 
   .header-upcoming-event-title {
@@ -2416,6 +2417,7 @@
 
   .event-title {
     @apply max-w-full font-mona text-[1.25rem] leading-normal font-bold text-text-secondary transition-colors duration-300 md:font-open md:text-event-heading md:leading-none;
+    overflow-wrap: break-word;
   }
 
   .event-countdown {
@@ -2608,23 +2610,31 @@
   }
 
   .event-pill {
-    @apply inline-flex h-5.5 min-w-20 items-center justify-center rounded-full border border-action-primary px-3 font-mona text-[0.5rem] leading-none font-medium whitespace-nowrap text-action-primary uppercase md:h-7.5 md:min-w-29 md:px-4 md:text-tag;
+    @apply inline-flex h-5.5 min-w-20 max-w-full items-center justify-center truncate rounded-full border border-action-primary px-3 font-mona text-[0.5rem] leading-none font-medium text-action-primary uppercase md:h-7.5 md:min-w-29 md:px-4 md:text-tag;
   }
 
   .event-lockup {
-    @apply inline-flex min-w-0 items-center gap-2 text-text-muted;
+    @apply inline-flex min-w-0 max-w-full items-center gap-2 overflow-hidden text-text-muted;
   }
 
   .event-lockup-mark {
     @apply h-3.5 w-auto shrink-0 md:h-5;
   }
 
   .event-lockup-text {
-    @apply flex flex-col font-mona text-[0.5rem] leading-none font-extrabold whitespace-nowrap uppercase md:text-[0.6875rem];
+    @apply flex min-w-0 flex-col overflow-hidden font-mona text-[0.5rem] leading-none font-extrabold whitespace-nowrap uppercase md:text-[0.6875rem];
+  }
+
+  .event-lockup-text span {
+    @apply truncate;
   }
 
   .event-location {
-    @apply inline-flex items-center gap-2 font-semibold;
+    @apply inline-flex min-w-0 max-w-full items-center gap-2 font-semibold;
+  }
+
+  .event-location span {
+    overflow-wrap: anywhere;
   }
 
   .event-location-icon {

src/components/layout/header/header-stake-cta.tsx

@@ -21,7 +21,7 @@ export function HeaderStakeCta() {
           type="button"
           animated={false}
           aria-disabled="true"
-          className="header-stake-cta hidden font-bold lg:inline-flex"
+          className="header-stake-cta hidden font-bold xl:inline-flex"
         >
           {ctaButton.label}
         </CortexButton>

src/components/layout/header/site-header-mobile-menu.tsx

@@ -26,7 +26,7 @@ export function SiteHeaderMobileMenu() {
   return (
     <>
       <button
-        className="text-text-primary lg:hidden"
+        className="text-text-primary xl:hidden"
         onPointerEnter={preloadMobileNav}
         onFocus={preloadMobileNav}
         onPointerDown={preloadMobileNav}

src/components/layout/site-header.tsx

@@ -23,7 +23,7 @@ export function SiteHeader() {
             <CortexWordmark className="size-6 w-auto text-text-secondary" />
           </HomeLink>
 
-          <nav className="hidden items-center gap-16 lg:flex">
+          <nav className="hidden items-center gap-16 xl:flex">
             {aboutNavItem?.megaNav && (
               <HeaderMegaNav
                 label={aboutNavItem.label}
@@ -43,7 +43,7 @@ export function SiteHeader() {
           </nav>
         </div>
 
-        <div className="flex items-center gap-4">
+        <div className="flex min-w-0 items-center justify-end gap-4">
           <HeaderUpcomingEvent className="hidden sm:inline-flex" />
           <HeaderStakeCta />
           <SiteHeaderMobileMenu />