diff --git a/src/components/HeroSection.astro b/src/components/HeroSection.astro
index 02d4a7f..07b3861 100644
--- a/src/components/HeroSection.astro
+++ b/src/components/HeroSection.astro
@@ -141,4 +141,17 @@ const colorClass: Record<string, string> = {
     border: none;
     display: block;
   }
+
+  @media (max-width: 640px) {
+    .hero-top { margin-bottom: var(--s7); }
+    .hero-headline { margin-bottom: var(--s6); }
+    .hero-ctas { gap: var(--s3); width: 100%; }
+    .btn-hero {
+      width: min(100%, 19rem);
+      min-height: 46px;
+      justify-content: center;
+      padding: var(--s3) var(--s6);
+      font-size: var(--text-base);
+    }
+  }
 </style>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index fbb22c4..c054080 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -107,7 +107,11 @@ const { slackUrl, paystackUrl } = Astro.props;
   .burger {
     display: none;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     gap: 5px;
+    width: 42px;
+    height: 42px;
     padding: var(--s2);
     margin-left: auto;
   }
@@ -117,7 +121,13 @@ const { slackUrl, paystackUrl } = Astro.props;
     height: 2px;
     background: var(--black);
     border-radius: 2px;
+    transition:
+      opacity 120ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
+  .burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+  .burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
+  .burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 
   .mobile-menu {
     display: none;
@@ -128,37 +138,91 @@ const { slackUrl, paystackUrl } = Astro.props;
   .mobile-menu nav {
     display: flex;
     flex-direction: column;
-    gap: var(--s4);
-    margin-bottom: var(--s5);
+    gap: var(--s1);
+    margin-bottom: var(--s4);
     border-bottom: 1px solid var(--border-light);
-    padding-bottom: var(--s5);
+    padding-bottom: var(--s4);
   }
   .mobile-menu nav a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 44px;
+    padding-block: var(--s2);
     font-size: var(--text-base);
-    font-weight: 500;
-    color: var(--text-mid);
+    font-weight: 600;
+    color: var(--text);
+  }
+  .mobile-menu nav a::after {
+    content: '→';
+    color: var(--pink);
+    font-size: var(--text-lg);
+    font-weight: 700;
   }
   .mobile-actions {
     display: flex;
     flex-direction: column;
     gap: var(--s3);
-    align-items: flex-start;
-    padding-top: var(--s4);
+    align-items: stretch;
+  }
+  .mobile-actions .btn {
+    justify-content: center;
+    width: 100%;
   }
-  .mobile-menu.is-open { display: block; }
 
   @media (max-width: 960px) {
     .navbar-links, .navbar-actions { display: none; }
     .burger { display: flex; }
+    .mobile-menu {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      left: 0;
+      z-index: 1;
+      display: block;
+      visibility: hidden;
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(-8px);
+      transition:
+        opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
+        transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
+        visibility 0s linear 200ms;
+    }
+    .mobile-menu.is-open {
+      visibility: visible;
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0);
+      box-shadow: 0 14px 24px rgb(17 17 17 / 16%);
+      transition-delay: 0s;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mobile-menu, .burger span { transition: none; }
   }
 </style>
 
 <script>
   const burger = document.querySelector('.burger') as HTMLButtonElement;
   const menu   = document.getElementById('mobile-menu');
-  burger?.addEventListener('click', () => {
-    const open = menu?.classList.toggle('is-open');
+  const setMenuOpen = (open: boolean) => {
+    menu?.classList.toggle('is-open', open);
     burger.setAttribute('aria-expanded', String(open));
+    burger.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
     menu?.setAttribute('aria-hidden', String(!open));
+  };
+
+  burger?.addEventListener('click', () => {
+    setMenuOpen(!menu?.classList.contains('is-open'));
+  });
+
+  menu?.querySelectorAll('a').forEach((link) => {
+    link.addEventListener('click', () => setMenuOpen(false));
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') setMenuOpen(false);
   });
 </script>
diff --git a/src/pages/events/[slug].astro b/src/pages/events/[slug].astro
index 4a353e6..bae04f8 100644
--- a/src/pages/events/[slug].astro
+++ b/src/pages/events/[slug].astro
@@ -84,10 +84,9 @@ const externalAction = action?.href.startsWith('http') ?? false;
 
     <div class="container event-detail-body">
       <a href="/events/" class="event-detail-back">← All events</a>
-      <section class="event-detail-layout" aria-labelledby="event-about-heading">
+      <section class="event-detail-layout" aria-label="About">
         <div>
           <p class="eyebrow">About</p>
-          <h2 class="heading-serif event-about-heading" id="event-about-heading">About this event</h2>
           <p class="event-detail-summary">{event.summary}</p>
         </div>
         <aside class="event-detail-action" aria-label="Event action">
@@ -202,8 +201,7 @@ const externalAction = action?.href.startsWith('http') ?? false;
   .event-hero-meta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); color: rgba(255, 255, 255, 0.9); font-size: clamp(var(--text-sm), 2vw, var(--text-lg)); font-weight: 700; line-height: var(--leading-body); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.36); }
   .event-detail-body { padding-block: var(--s8); }
   .event-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s7); margin-top: var(--s7); }
-  .event-about-heading { margin-top: var(--s2); font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); }
-  .event-detail-summary { max-width: 46rem; margin-top: var(--s4); color: var(--text-mid); font-size: var(--text-lg); line-height: var(--leading-body); }
+  .event-detail-summary { max-width: 46rem; color: var(--text-mid); font-size: var(--text-lg); line-height: var(--leading-body); }
   .event-detail-action { padding-top: var(--s6); }
   .event-detail-action .btn { white-space: nowrap; }
   .event-detail-state { max-width: 16rem; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
diff --git a/src/pages/events/index.astro b/src/pages/events/index.astro
index c71a364..c224d4a 100644
--- a/src/pages/events/index.astro
+++ b/src/pages/events/index.astro
@@ -107,10 +107,9 @@ const calendarEvents = events.map((event) => {
       </div>
       <div class="container event-detail-body">
         <a href="/events/" class="event-detail-back">← All events</a>
-        <section class="event-detail-layout" aria-labelledby="event-detail-about-heading">
+        <section class="event-detail-layout" aria-label="About">
           <div>
             <p class="eyebrow">About</p>
-            <h2 class="heading-serif event-detail-about-heading" id="event-detail-about-heading">About this event</h2>
             <p class="event-detail-summary" id="event-detail-summary"></p>
           </div>
           <aside class="event-detail-action" aria-label="Event action">
@@ -314,6 +313,13 @@ const calendarEvents = events.map((event) => {
 
 <script>
   import { fetchLivePublicEvent, fetchLivePublicEvents } from '../../lib/live-public-events';
+  import type { WebsiteEvent } from '../../lib/events';
+
+  const statusConfig = {
+    upcoming: { label: 'Upcoming', cta: 'Register →' },
+    live: { label: '● Live', cta: 'Follow live →' },
+    past: { label: 'Past', cta: 'View event →' },
+  };
 
   const calendarEvents = (() => {
     const raw = document.querySelector('[data-calendar-events]')?.getAttribute('data-calendar-events');
@@ -334,8 +340,11 @@ const calendarEvents = events.map((event) => {
   const eventsPageHeader = document.querySelector('#events-page-header');
   const eventsPageTitle = document.querySelector('#events-page-title');
   const eventsPageSub = document.querySelector('#events-page-sub');
+  const eventsListTitle = eventsPageTitle?.textContent?.trim() || 'Where we show up';
+  const eventsListDocumentTitle = document.title;
   const calendarSubscribe = document.querySelector('#calendar-subscribe');
   const detailPanel = document.querySelector('#event-detail-view');
+  const detailBack = document.querySelector('.event-detail-back');
   const detailCover = document.querySelector('#event-detail-cover');
   const detailStatus = document.querySelector('#event-detail-status');
   const detailMeta = document.querySelector('#event-detail-meta');
@@ -359,6 +368,9 @@ const calendarEvents = events.map((event) => {
   const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
   const monthPattern = /^\d{4}-(0[1-9]|1[0-2])$/;
   let activePopoverAnchor = null;
+  let routeRequestVersion = 0;
+  const liveEventDetails = new Map<string, WebsiteEvent>();
+  const eventDetailRequests = new Map();
 
   const today = new Date();
   const todayKey = [
@@ -604,7 +616,16 @@ const calendarEvents = events.map((event) => {
     }
   }
 
+  function restoreEventsListHeader() {
+    if (eventsPageTitle) eventsPageTitle.textContent = eventsListTitle;
+    if (eventsPageSub) {
+      eventsPageSub.textContent = `${liveCalendarEvents.length} event${liveCalendarEvents.length === 1 ? '' : 's'} and counting.`;
+    }
+    document.title = eventsListDocumentTitle;
+  }
+
   function renderLiveEventLoading() {
+    syncDetailBackLink();
     setDetailMode(true);
     if (eventsPageTitle) eventsPageTitle.textContent = 'Loading event…';
     if (eventsPageSub) eventsPageSub.textContent = 'Loading event details…';
@@ -671,9 +692,12 @@ const calendarEvents = events.map((event) => {
     if (detailCta instanceof HTMLAnchorElement) detailCta.hidden = true;
   }
 
-  async function refreshLiveEvents() {
+  async function refreshLiveEvents(routeVersion = routeRequestVersion) {
     try {
       const events = await fetchLivePublicEvents();
+      if (routeVersion !== routeRequestVersion) return;
+      liveEventDetails.clear();
+      events.forEach((event) => liveEventDetails.set(event.slug, event));
       liveCalendarEvents = events.map((event) => {
         const status = getLiveStatus(event);
         const url = liveEventUrl(event);
@@ -705,28 +729,96 @@ const calendarEvents = events.map((event) => {
     }
   }
 
+  function fetchEventForRoute(slug) {
+    const liveEvent = liveEventDetails.get(slug);
+    if (liveEvent) return Promise.resolve(liveEvent);
+
+    const cached = eventDetailRequests.get(slug);
+    if (cached) return cached;
+
+    const request = fetchLivePublicEvent(slug)
+      .then((event) => {
+        if (event) liveEventDetails.set(event.slug, event);
+        return event;
+      })
+      .catch((error) => {
+        eventDetailRequests.delete(slug);
+        throw error;
+      });
+    eventDetailRequests.set(slug, request);
+    return request;
+  }
+
   async function loadLiveEventRoute() {
+    const routeVersion = ++routeRequestVersion;
     const match = window.location.pathname.match(/^\/events\/([a-zA-Z0-9][a-zA-Z0-9_-]{0,239})\/?$/);
     if (!match || match[1] === 'index' || match[1] === 'submit') {
+      restoreEventsListHeader();
       setDetailMode(false);
       setView(new URLSearchParams(window.location.search).get('view') === 'calendar' ? 'calendar' : 'list', false);
-      await refreshLiveEvents();
+      void refreshLiveEvents(routeVersion);
       return;
     }
 
     renderLiveEventLoading();
     try {
-      const event = await fetchLivePublicEvent(match[1]);
+      const event = await fetchEventForRoute(match[1]);
+      if (routeVersion !== routeRequestVersion) return;
       if (!event) {
         renderLiveEventError('This event may have been removed, unpublished, or is not available yet.');
         return;
       }
       renderLiveEventDetail(event);
     } catch {
+      if (routeVersion !== routeRequestVersion) return;
       renderLiveEventError('The public event service is temporarily unavailable. Please try again shortly.');
     }
   }
 
+  function sameOriginEventUrl(anchor) {
+    if (!(anchor instanceof HTMLAnchorElement) || anchor.target || anchor.hasAttribute('download')) return null;
+    const url = new URL(anchor.href, window.location.href);
+    if (url.origin !== window.location.origin || !/^\/events(?:\/|$)/.test(url.pathname)) return null;
+    if (url.pathname === '/events/calendar.ics' || url.pathname === '/events/submit/' || url.pathname === '/events/submit') return null;
+    return url;
+  }
+
+  function eventSlugFromUrl(url) {
+    const match = url.pathname.match(/^\/events\/([a-zA-Z0-9][a-zA-Z0-9_-]{0,239})\/?$/);
+    return match && match[1] !== 'index' && match[1] !== 'submit' ? match[1] : null;
+  }
+
+  document.addEventListener('pointerover', (event) => {
+    if (event.pointerType === 'touch') return;
+    const target = event.target instanceof Element ? event.target.closest('a[href]') : null;
+    const url = sameOriginEventUrl(target);
+    const slug = url && eventSlugFromUrl(url);
+    if (slug) void fetchEventForRoute(slug).catch(() => undefined);
+  });
+
+  document.addEventListener('pointerdown', (event) => {
+    const target = event.target instanceof Element ? event.target.closest('a[href]') : null;
+    const url = sameOriginEventUrl(target);
+    const slug = url && eventSlugFromUrl(url);
+    if (slug) void fetchEventForRoute(slug).catch(() => undefined);
+  });
+
+  document.addEventListener('click', (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const target = event.target instanceof Element ? event.target.closest('a[href]') : null;
+    const url = sameOriginEventUrl(target);
+    if (!url) return;
+
+    event.preventDefault();
+    window.history.pushState({}, '', `${url.pathname}${url.search}${url.hash}`);
+    window.scrollTo(0, 0);
+    void loadLiveEventRoute();
+  });
+
+  window.addEventListener('popstate', () => {
+    void loadLiveEventRoute();
+  });
+
   function monthDate(monthKey) {
     const [year, month] = monthKey.split('-').map(Number);
     return new Date(Date.UTC(year, month - 1, 1));
@@ -743,7 +835,7 @@ const calendarEvents = events.map((event) => {
     const element = document.createElement(event.url ? 'a' : 'div');
     element.className = className;
     if (event.url) {
-      element.href = event.url;
+      element.href = calendarEventUrl(event);
       if (event.external) {
         element.target = '_blank';
         element.rel = 'noopener noreferrer';
@@ -752,6 +844,27 @@ const calendarEvents = events.map((event) => {
     return element;
   }
 
+  function calendarEventUrl(event) {
+    if (!event.url || event.external) return event.url;
+    const url = new URL(event.url, window.location.origin);
+    if (!eventSlugFromUrl(url)) return event.url;
+    url.searchParams.set('view', 'calendar');
+    url.searchParams.set('month', selectedMonth);
+    return `${url.pathname}${url.search}${url.hash}`;
+  }
+
+  function syncDetailBackLink() {
+    if (!(detailBack instanceof HTMLAnchorElement)) return;
+    const url = new URL('/events/', window.location.origin);
+    const search = new URLSearchParams(window.location.search);
+    if (search.get('view') === 'calendar') {
+      url.searchParams.set('view', 'calendar');
+      const month = search.get('month');
+      url.searchParams.set('month', monthPattern.test(month ?? '') ? month : selectedMonth);
+    }
+    detailBack.href = `${url.pathname}${url.search}`;
+  }
+
   function appendEventContent(element, event, compact = false) {
     const title = document.createElement('span');
     title.className = compact ? 'calendar-event-title' : 'agenda-event-title';
@@ -1213,10 +1326,10 @@ const calendarEvents = events.map((event) => {
   }
   .event-detail-back:hover { color: var(--pink); }
   .event-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s7); margin-top: var(--s7); }
-  .event-detail-about-heading { margin-top: var(--s2); font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); }
-  .event-detail-summary { max-width: 46rem; margin-top: var(--s4); color: var(--text-mid); font-size: var(--text-lg); line-height: var(--leading-body); }
+  .event-detail-summary { max-width: 46rem; color: var(--text-mid); font-size: var(--text-lg); line-height: var(--leading-body); }
   .event-detail-action { padding-top: var(--s6); }
   .event-detail-action .btn { white-space: nowrap; }
+  .event-detail-cta[hidden] { display: none !important; }
   .event-detail-state { max-width: 16rem; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
 
   .calendar-panel { overflow: hidden; background: var(--bg-white); }
@@ -1361,6 +1474,8 @@ const calendarEvents = events.map((event) => {
   :global(.calendar-more-button:active) { transform: scale(0.97); }
 
   @media (max-width: 640px) {
+    .page-header { padding-block: var(--s7); }
+    .page-heading-row { gap: var(--s4); }
     .events-grid { grid-template-columns: 1fr; }
     .event-detail-hero { min-height: 30rem; }
     .event-detail-body { padding-block: var(--s7); }
diff --git a/src/worker.ts b/src/worker.ts
index 4c07345..1936ad3 100644
--- a/src/worker.ts
+++ b/src/worker.ts
@@ -10,6 +10,7 @@ interface Env {
 const EVENT_ROUTE = /^\/events\/([a-zA-Z0-9][a-zA-Z0-9_-]{0,239})\/?$/;
 const CALENDAR_PATH = '/events/calendar.ics';
 const EVENT_SHELL_PATH = '/events/';
+const EVENT_READINESS_PARAM = 'readiness';
 
 export default {
   async fetch(request: Request, env: Env): Promise<Response> {
@@ -21,6 +22,9 @@ export default {
 
     const eventMatch = url.pathname.match(EVENT_ROUTE);
     if (eventMatch && eventMatch[1] !== 'index' && eventMatch[1] !== 'submit') {
+      if (url.searchParams.get(EVENT_READINESS_PARAM) === '1') {
+        return serveLiveEventReadiness(eventMatch[1]);
+      }
       return serveLiveEventShell(request, env, eventMatch[1]);
     }
 
@@ -30,9 +34,6 @@ export default {
 
 async function serveLiveEventShell(request: Request, env: Env, slug: string): Promise<Response> {
   try {
-    const event = await fetchLivePublicEvent(slug);
-    if (!event) return new Response('Event not found', { status: 404 });
-
     const shellUrl = new URL(EVENT_SHELL_PATH, request.url);
     const shellResponse = await env.ASSETS.fetch(new Request(shellUrl, request));
     if (!shellResponse.ok) return shellResponse;
@@ -54,6 +55,28 @@ async function serveLiveEventShell(request: Request, env: Env, slug: string): Pr
   }
 }
 
+async function serveLiveEventReadiness(slug: string): Promise<Response> {
+  try {
+    const event = await fetchLivePublicEvent(slug);
+    if (!event) return new Response('Event not found', { status: 404 });
+
+    return new Response(null, {
+      status: 204,
+      headers: {
+        'Cache-Control': 'no-store',
+        'X-Content-Type-Options': 'nosniff',
+      },
+    });
+  } catch (error) {
+    console.error(JSON.stringify({
+      event: 'public_event_readiness_lookup_failed',
+      slug,
+      error_name: error instanceof Error ? error.name : 'Error',
+    }));
+    return new Response('Public event temporarily unavailable', { status: 503 });
+  }
+}
+
 async function serveLiveCalendar(request: Request): Promise<Response> {
   try {
     const events = await fetchLivePublicEvents();