diff --git a/src/components/MeetupsSection.astro b/src/components/MeetupsSection.astro
index 593e36d..c495b32 100644
--- a/src/components/MeetupsSection.astro
+++ b/src/components/MeetupsSection.astro
@@ -58,7 +58,6 @@ const statusConfig = {
                 <div class="meetup-cover">
                   {event.coverUrl && <img class="meetup-cover-image" src={event.coverUrl} alt="" loading="lazy" decoding="async" />}
                   <span class={`meetup-status-badge status-${event.status}`}>{cfg.label}</span>
-                  <span class="meetup-photo-badge">{event.format.replaceAll('_', ' ')}</span>
                 </div>
               </a>
               <div class="meetup-body">
@@ -138,10 +137,7 @@ const statusConfig = {
         const statusBadge = document.createElement('span');
         statusBadge.className = `meetup-status-badge status-${status}`;
         statusBadge.textContent = config.label;
-        const typeBadge = document.createElement('span');
-        typeBadge.className = 'meetup-photo-badge';
-        typeBadge.textContent = event.format.replaceAll('_', ' ');
-        cover.append(statusBadge, typeBadge);
+        cover.append(statusBadge);
         coverLink.append(cover);
 
         const body = document.createElement('div');
@@ -260,7 +256,6 @@ const statusConfig = {
     align-items: flex-end;
     justify-content: space-between;
     padding: var(--s3);
-    transition: opacity 200ms ease;
   }
   .meetup-cover-image {
     position: absolute;
@@ -268,12 +263,13 @@ const statusConfig = {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
   }
-  .meetup-status-badge,
-  .meetup-photo-badge {
-    position: relative;
+  .meetup-status-badge { position: relative; }
+  @media (hover: hover) and (pointer: fine) {
+    .meetup-card:hover { transform: none; }
+    .meetup-card:hover .meetup-cover-image { opacity: 0.92; }
   }
-  .meetup-card:hover .meetup-cover { opacity: 0.9; }
 
   .meetup-status-badge {
     font-size: var(--text-xs);
@@ -286,15 +282,6 @@ const statusConfig = {
   .status-live     { background: var(--pink);     color: #fff; }
   .status-past     { background: var(--bg-white); color: var(--text-muted); }
 
-  .meetup-photo-badge {
-    font-size: var(--text-xs);
-    font-weight: 700;
-    background: rgba(0,0,0,0.6);
-    color: #fff;
-    border-radius: var(--r-sm);
-    padding: 2px var(--s2);
-  }
-
   .meetup-body {
     padding: var(--s5);
     display: flex;
@@ -348,5 +335,9 @@ const statusConfig = {
     flex: 1;
   }
 
-  .meetup-cta { align-self: flex-start; margin-top: var(--s2); }
+  .meetup-cta { align-self: flex-end; margin-top: auto; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meetup-cover-image { transition: none; }
+  }
 </style>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index e480903..e16fb73 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -231,6 +231,144 @@ const site        = siteEntries[0]!.data;
     box-shadow: var(--shadow-solid);
   }
 
+  /* Runtime event cards are created after Astro's scoped styles run. Keep this
+     compatibility layer narrow so only the live homepage/list card surfaces
+     opt into the same geometry as their server-rendered counterparts. */
+  [data-home-events-grid] > .meetup-card {
+    width: calc((min(var(--max-w), 100vw) - 2 * var(--pad) - 2 * var(--s5)) / 3);
+    flex-shrink: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  [data-home-events-grid] > .meetup-card .meetup-cover-link,
+  #events-list-view .event-card .event-cover-link { display: block; }
+  [data-home-events-grid] > .meetup-card .meetup-cover,
+  #events-list-view .event-card .event-cover {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: var(--s3);
+    background-color: var(--border-light);
+  }
+  [data-home-events-grid] > .meetup-card .meetup-cover-image,
+  #events-list-view .event-card .event-cover-image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  [data-home-events-grid] > .meetup-card .meetup-status-badge,
+  #events-list-view .event-card .event-status-badge { position: relative; }
+  [data-home-events-grid] > .meetup-card .meetup-status-badge,
+  #events-list-view .event-card .event-status-badge {
+    padding: 2px var(--s2);
+    border: 2px solid var(--black);
+    border-radius: var(--r-sm);
+    font-size: var(--text-xs);
+    font-weight: 700;
+  }
+  [data-home-events-grid] > .meetup-card .status-upcoming,
+  #events-list-view .event-card .status-upcoming { background: var(--yellow); color: var(--black); }
+  [data-home-events-grid] > .meetup-card .status-live,
+  #events-list-view .event-card .status-live { background: var(--pink); color: #fff; }
+  [data-home-events-grid] > .meetup-card .status-past,
+  #events-list-view .event-card .status-past { background: var(--bg-white); color: var(--text-muted); }
+  [data-home-events-grid] > .meetup-card .meetup-body,
+  #events-list-view .event-card .event-body {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--s3);
+    padding: var(--s5);
+    border-top: 2px solid var(--black);
+  }
+  [data-home-events-grid] > .meetup-card .meetup-meta,
+  #events-list-view .event-card .event-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    gap: var(--s2);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+  [data-home-events-grid] > .meetup-card .meetup-location,
+  #events-list-view .event-card .event-location {
+    min-width: 0;
+    max-width: 100%;
+    flex: 1 1 0;
+    overflow: hidden;
+    color: var(--pink);
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-home-events-grid] > .meetup-card .meetup-meta time,
+  #events-list-view .event-card .event-meta time {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+  [data-home-events-grid] > .meetup-card .meetup-name,
+  #events-list-view .event-card .event-name {
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--text-xl);
+    line-height: var(--leading-snug);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-home-events-grid] > .meetup-card .meetup-desc,
+  #events-list-view .event-card .event-desc {
+    display: -webkit-box;
+    flex: 1;
+    overflow: hidden;
+    color: var(--text-mid);
+    font-size: var(--text-sm);
+    line-height: var(--leading-body);
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+  [data-home-events-grid] > .meetup-card .meetup-cta,
+  #events-list-view .event-card .event-cta {
+    align-self: flex-end;
+    margin-top: auto;
+  }
+  #events-list-view .events-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--s5);
+  }
+  #events-list-view[hidden],
+  #events-calendar-view[hidden],
+  #event-detail-view[hidden] { display: none !important; }
+
+  @media (hover: hover) and (pointer: fine) {
+    [data-home-events-grid] > .meetup-card.card:hover,
+    #events-list-view .event-card.card:hover { transform: none; }
+    [data-home-events-grid] > .meetup-card:hover .meetup-cover-image,
+    #events-list-view .event-card:hover .event-cover-image { opacity: 0.92; }
+  }
+
+  @media (max-width: 900px) {
+    [data-home-events-grid] > .meetup-card {
+      width: calc((100vw - 2 * var(--pad) - var(--s5)) / 2);
+    }
+  }
+  @media (max-width: 640px) {
+    [data-home-events-grid] > .meetup-card { width: 85vw; }
+    #events-list-view .events-grid { grid-template-columns: 1fr; }
+  }
+
   /* ─── Divider ────────────────────────────────────────────── */
   .divider { border: none; border-top: 2px solid var(--black); }
 
diff --git a/src/lib/events.ts b/src/lib/events.ts
index e37c788..0044f91 100644
--- a/src/lib/events.ts
+++ b/src/lib/events.ts
@@ -84,6 +84,8 @@ const publicEventSchema = z
     venue_name: z.string().trim().min(1).max(500).nullable(),
     venue_address: z.string().trim().min(1).max(1_000).nullable(),
     online_url: publicHttpUrlSchema.nullable(),
+    stream_url: publicHttpUrlSchema.nullable().optional(),
+    embed_stream: z.boolean().optional().default(false),
     registration_url: publicWebsiteUrlSchema.nullable(),
     organizer_name: z.string().trim().min(1).max(300),
     organizer_website: publicHttpUrlSchema.nullable(),
@@ -140,6 +142,8 @@ export interface WebsiteEvent {
   venueName: string | null;
   venueAddress: string | null;
   onlineUrl: string | null;
+  streamUrl: string | null;
+  embedStream: boolean;
   registrationUrl: string | null;
   organizerName: string;
   organizerWebsite: string | null;
@@ -243,6 +247,8 @@ async function fetchMeetupFallback(): Promise<WebsiteEvent[]> {
     venueName: meetup.data.location.name,
     venueAddress: meetup.data.location.label ?? null,
     onlineUrl: meetup.data.stream_url ?? null,
+    streamUrl: meetup.data.stream_url ?? null,
+    embedStream: meetup.data.embed_stream,
     registrationUrl: meetup.data.registration_url ?? null,
     organizerName: "DevCongress",
     organizerWebsite: "https://devcongress.org",
@@ -268,6 +274,8 @@ function mapPublicEvent(event: PublicEvent): WebsiteEvent {
     venueName: event.venue_name,
     venueAddress: event.venue_address,
     onlineUrl: event.online_url,
+    streamUrl: event.stream_url ?? null,
+    embedStream: event.embed_stream,
     registrationUrl: resolveOptionalWebsiteUrl(event.registration_url),
     organizerName: event.organizer_name,
     organizerWebsite: event.organizer_website,
diff --git a/src/lib/live-public-events.ts b/src/lib/live-public-events.ts
index 350b5ba..c813884 100644
--- a/src/lib/live-public-events.ts
+++ b/src/lib/live-public-events.ts
@@ -76,6 +76,8 @@ function normalizePublicEvent(value: unknown): WebsiteEvent | null {
   const venueName = nullableString(value.venue_name, 500);
   const venueAddress = nullableString(value.venue_address, 1_000);
   const onlineUrl = safePublicUrl(value.online_url);
+  const streamUrl = safePublicUrl(value.stream_url);
+  const embedStream = value.embed_stream === true;
   const registrationUrl = safePublicUrl(value.registration_url);
   const organizerWebsite = safePublicUrl(value.organizer_website);
   const coverUrl = safePublicUrl(value.cover_url);
@@ -95,6 +97,8 @@ function normalizePublicEvent(value: unknown): WebsiteEvent | null {
     venueName,
     venueAddress,
     onlineUrl,
+    streamUrl,
+    embedStream,
     registrationUrl,
     organizerName,
     organizerWebsite,
diff --git a/src/pages/events/[slug].astro b/src/pages/events/[slug].astro
index 6f4da2b..4a353e6 100644
--- a/src/pages/events/[slug].astro
+++ b/src/pages/events/[slug].astro
@@ -13,6 +13,8 @@ export async function getStaticPaths() {
 interface Props { event: WebsiteEvent; }
 const { event } = Astro.props;
 
+type EventStatus = 'upcoming' | 'live' | 'past';
+
 function formatDate(iso: string, timezone: string): string {
   return new Date(iso).toLocaleDateString('en-GB', {
     day: 'numeric', month: 'long', year: 'numeric', timeZone: timezone,
@@ -25,106 +27,193 @@ function formatTime(iso: string, timezone: string): string {
   });
 }
 
-function formatLabel(value: string): string {
-  if (value === 'conference') return 'Conference / congress';
-  return value.replaceAll('_', ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
-}
-
 function getLocation(value: WebsiteEvent): string {
   if (value.locationType === 'online') return 'Online';
   if (value.locationType === 'hybrid') return value.venueName ? `${value.venueName} + online` : 'Hybrid';
   return value.venueName ?? 'In person';
 }
 
-function getStatus(value: WebsiteEvent): 'upcoming' | 'live' | 'past' {
+function getStatus(value: WebsiteEvent): EventStatus {
   const now = new Date();
   const start = new Date(value.startsAt);
   const end = new Date(value.endsAt);
   return now < start ? 'upcoming' : now <= end ? 'live' : 'past';
 }
 
+function getPrimaryAction(value: WebsiteEvent, valueStatus: EventStatus): { href: string; label: string } | null {
+  if (valueStatus === 'past') {
+    return value.streamUrl && !value.embedStream ? { href: value.streamUrl, label: 'Watch recording' } : null;
+  }
+
+  if (valueStatus === 'live') {
+    if (value.streamUrl) return { href: value.streamUrl, label: 'Watch live' };
+    if (value.onlineUrl) return { href: value.onlineUrl, label: 'Join online' };
+    return null;
+  }
+
+  return value.registrationUrl ? { href: value.registrationUrl, label: 'Register' } : null;
+}
+
 const status = getStatus(event);
-const statusLabel = status === 'live' ? '● Live' : status === 'upcoming' ? 'Upcoming' : 'Past';
-const actionUrl = event.registrationUrl ?? event.onlineUrl;
-const actionLabel = event.registrationUrl ? 'Register for this event →' : 'Join online →';
-const externalAction = actionUrl?.startsWith('http') ?? false;
+const action = getPrimaryAction(event, status);
+const statusLabel = status === 'live' ? 'Live' : status === 'upcoming' ? 'Upcoming' : 'Past';
+const externalAction = action?.href.startsWith('http') ?? false;
 ---
 
 <Base title={`${event.title} — DevCongress`} description={event.summary}>
   <header class="mnav">
     <div class="container mnav-inner">
       <a href="/" class="mnav-logo"><img src="/images/logo.png" alt="DevCongress" height="36" /></a>
-      <a href="/events/" class="mnav-back">← All events</a>
     </div>
   </header>
 
-  <main>
-    <header class="page-header">
-      <div class="container">
-        <span class="eyebrow">Events</span>
-        <h1 class="heading-serif page-title">{event.title}</h1>
-        <p class="page-sub">{formatDate(event.startsAt, event.timezone)} · {getLocation(event)}</p>
+  <main data-event-detail data-event-slug={event.slug}>
+    <section class="event-hero" aria-labelledby="event-title">
+      {event.coverUrl && <img class="event-hero-image" src={event.coverUrl} alt="" fetchpriority="high" />}
+      <div class="event-hero-overlay" aria-hidden="true"></div>
+      <div class="container event-hero-content">
+        <span class={`event-status-badge status-${status}`}>{statusLabel}</span>
+        <h1 class="heading-serif event-hero-title" id="event-title">{event.title}</h1>
+        <p class="event-hero-meta">
+          <time datetime={event.startsAt}>{formatDate(event.startsAt, event.timezone)} · {formatTime(event.startsAt, event.timezone)}</time>
+          <span aria-hidden="true">•</span>
+          <span>{getLocation(event)}</span>
+        </p>
       </div>
-    </header>
-
-    <div class="container events-body">
-      <section class="event-detail-view">
-        <a href="/events/" class="event-detail-back">← All events</a>
-        <article class="event-detail-card card">
-          {event.coverUrl && (
-            <div class="event-detail-cover">
-              <img class="event-detail-cover-image" src={event.coverUrl} alt="" fetchpriority="high" />
-            </div>
-          )}
-          <div class="event-detail-content">
-            <div class="event-detail-badges">
-              <span class={`event-status-badge status-${status}`}>{statusLabel}</span>
-              <span class="event-type-badge">{formatLabel(event.format)}</span>
-            </div>
-            <p class="event-detail-meta">
-              {formatDate(event.startsAt, event.timezone)} · {formatTime(event.startsAt, event.timezone)} · {getLocation(event)}
-            </p>
-            <h2 class="heading-serif event-detail-title">{event.title}</h2>
-            <p class="event-detail-summary">{event.summary}</p>
-            {actionUrl && (
-              <a
-                class="btn btn-primary event-detail-cta"
-                href={actionUrl}
-                target={externalAction ? '_blank' : undefined}
-                rel={externalAction ? 'noopener noreferrer' : undefined}
-              >
-                {actionLabel}
-              </a>
-            )}
-          </div>
-        </article>
+    </section>
+
+    <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">
+        <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">
+          <a
+            class="btn btn-primary"
+            data-event-action
+            href={action?.href}
+            target={externalAction ? '_blank' : undefined}
+            rel={externalAction ? 'noopener noreferrer' : undefined}
+            hidden={!action}
+          >
+            {action?.label} →
+          </a>
+          <p class="event-detail-state" data-event-state role="status">
+            {status === 'past' && !action ? 'This event has ended.' : ''}
+          </p>
+        </aside>
       </section>
     </div>
   </main>
 </Base>
 
+<script>
+  import { fetchLivePublicEvent } from '../../lib/live-public-events';
+
+  const page = document.querySelector('[data-event-detail]');
+  const actionLink = page?.querySelector('[data-event-action]');
+  const state = page?.querySelector('[data-event-state]');
+  const slug = page?.getAttribute('data-event-slug');
+
+  function currentStatus(event) {
+    const now = Date.now();
+    const start = new Date(event.startsAt).getTime();
+    const end = new Date(event.endsAt).getTime();
+    return now < start ? 'upcoming' : now <= end ? 'live' : 'past';
+  }
+
+  function liveAction(event, status) {
+    if (status === 'past') {
+      return event.streamUrl && !event.embedStream ? { href: event.streamUrl, label: 'Watch recording' } : null;
+    }
+    if (status === 'live') {
+      if (event.streamUrl) return { href: event.streamUrl, label: 'Watch live' };
+      if (event.onlineUrl) return { href: event.onlineUrl, label: 'Join online' };
+      return null;
+    }
+    return event.registrationUrl ? { href: event.registrationUrl, label: 'Register' } : null;
+  }
+
+  function updateAction(event) {
+    if (!(actionLink instanceof HTMLAnchorElement) || !(state instanceof HTMLElement)) return;
+    const status = currentStatus(event);
+    const action = liveAction(event, status);
+    actionLink.hidden = !action;
+    state.textContent = status === 'past' && !action ? 'This event has ended.' : '';
+    if (!action) {
+      actionLink.removeAttribute('href');
+      actionLink.removeAttribute('target');
+      actionLink.removeAttribute('rel');
+      return;
+    }
+
+    actionLink.href = action.href;
+    actionLink.textContent = `${action.label} →`;
+    if (action.href.startsWith('http')) {
+      actionLink.target = '_blank';
+      actionLink.rel = 'noopener noreferrer';
+    } else {
+      actionLink.removeAttribute('target');
+      actionLink.removeAttribute('rel');
+    }
+  }
+
+  if (slug) void fetchLivePublicEvent(slug).then((event) => {
+    if (event) updateAction(event);
+  }).catch(() => undefined);
+</script>
+
 <style>
   .mnav { position: sticky; top: 0; z-index: 100; padding-block: var(--s4); background: var(--bg); border-bottom: 2px solid var(--black); }
   .mnav-inner { display: flex; align-items: center; justify-content: space-between; }
-  .mnav-back { color: var(--text-mid); font-size: var(--text-sm); font-weight: 500; }
-  .mnav-back:hover, .event-detail-back:hover { color: var(--pink); }
-  .page-header { padding-block: var(--s9); border-bottom: 2px solid var(--black); background: var(--bg-white); }
-  .page-title { margin-bottom: var(--s3); font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl)); }
-  .page-sub { color: var(--text-mid); font-size: var(--text-lg); }
-  .events-body { padding-block: var(--s9); }
-  .event-detail-view { display: grid; gap: var(--s4); }
-  .event-detail-back { justify-self: start; color: var(--text-mid); font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
-  .event-detail-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); overflow: hidden; }
-  .event-detail-cover { min-height: 320px; background: var(--border-light); }
-  .event-detail-cover-image { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
-  .event-detail-content { display: flex; flex-direction: column; gap: var(--s4); padding: clamp(var(--s5), 5vw, var(--s8)); }
-  .event-detail-badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
-  .event-detail-meta { color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
-  .event-detail-title { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); line-height: var(--leading-tight); }
-  .event-detail-summary { color: var(--text-mid); font-size: var(--text-lg); line-height: var(--leading-body); }
-  .event-detail-cta { align-self: flex-start; margin-top: auto; }
+  .event-detail-back { color: var(--text-mid); font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
+  .event-detail-back:hover { color: var(--pink); }
+  .event-hero { position: relative; display: flex; min-height: clamp(30rem, 66vw, 48rem); align-items: flex-end; overflow: hidden; border-bottom: 2px solid var(--black); background: var(--black); color: #fff; isolation: isolate; }
+  .event-hero-image, .event-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
+  .event-hero-image { z-index: -2; object-fit: cover; }
+  .event-hero-overlay { z-index: -1; background: linear-gradient(180deg, rgba(17, 17, 17, 0.36) 0%, rgba(17, 17, 17, 0.28) 38%, rgba(17, 17, 17, 0.84) 100%); }
+  .event-hero-content { padding-top: clamp(var(--s8), 14vw, var(--s10)); padding-bottom: clamp(var(--s7), 8vw, var(--s10)); }
+  .event-hero .event-status-badge {
+    position: static;
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    padding: 0.45rem 0.7rem;
+    border: 2px solid rgba(255, 255, 255, 0.78);
+    border-radius: var(--r-sm);
+    background: rgba(17, 17, 17, 0.46);
+    color: #fff;
+    font-family: var(--font-body);
+    font-size: var(--text-xs);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    line-height: 1;
+    text-transform: uppercase;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
+  }
+  .event-hero .status-upcoming { border-color: var(--yellow); background: var(--yellow); color: var(--black); }
+  .event-hero .status-live { border-color: var(--pink); background: var(--pink); color: #fff; }
+  .event-hero .status-past { border-color: var(--black); background: var(--bg-white); color: var(--text-muted); }
+  .event-hero-title { max-width: 55rem; margin-top: var(--s5); color: #fff; font-size: clamp(var(--text-3xl), 7vw, 5.5rem); line-height: 0.96; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34); }
+  .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-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); }
   @media (max-width: 640px) {
-    .event-detail-card { grid-template-columns: 1fr; }
-    .event-detail-cover, .event-detail-cover-image { min-height: 220px; }
+    .event-hero { min-height: 30rem; }
+    .event-detail-body { padding-block: var(--s7); }
+    .event-detail-layout { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }
+    .event-detail-action { padding-top: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .event-detail-back { transition: none; }
   }
 </style>
diff --git a/src/pages/events/index.astro b/src/pages/events/index.astro
index e94b755..c71a364 100644
--- a/src/pages/events/index.astro
+++ b/src/pages/events/index.astro
@@ -94,8 +94,34 @@ const calendarEvents = events.map((event) => {
     </div>
   </header>
 
-  <main>
-    <div class="page-header">
+  <main data-calendar-events={JSON.stringify(calendarEvents)}>
+    <section class="event-detail-view" id="event-detail-view" aria-labelledby="event-detail-title" hidden>
+      <div class="event-detail-hero">
+        <img id="event-detail-cover" class="event-detail-hero-image" alt="" fetchpriority="high" hidden />
+        <div class="event-detail-hero-overlay" aria-hidden="true"></div>
+        <div class="container event-detail-hero-content">
+          <span class="event-status-badge" id="event-detail-status"></span>
+          <h1 class="heading-serif event-detail-title" id="event-detail-title">Loading event…</h1>
+          <p class="event-detail-meta" id="event-detail-meta"></p>
+        </div>
+      </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">
+          <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">
+            <a class="btn btn-primary event-detail-cta" id="event-detail-cta" hidden></a>
+            <p class="event-detail-state" id="event-detail-state" role="status"></p>
+          </aside>
+        </section>
+      </div>
+    </section>
+
+    <div class="page-header" id="events-page-header">
       <div class="container">
         <span class="eyebrow">Events</span>
         <h1 class="heading-serif page-title" id="events-page-title">Where we show up</h1>
@@ -173,26 +199,6 @@ const calendarEvents = events.map((event) => {
         </div>
       </div>
 
-      <section class="event-detail-view" id="event-detail-view" aria-labelledby="event-detail-title" hidden>
-        <a href="/events/" class="event-detail-back">← All events</a>
-        <article class="event-detail-card card">
-          <div class="event-detail-cover" id="event-detail-cover-wrap" hidden>
-            <img id="event-detail-cover" class="event-detail-cover-image" alt="" fetchpriority="high" />
-          </div>
-          <div class="event-detail-content">
-            <div class="event-detail-badges">
-              <span class="event-status-badge" id="event-detail-status"></span>
-              <span class="event-type-badge" id="event-detail-format"></span>
-            </div>
-            <p class="event-detail-meta" id="event-detail-meta"></p>
-            <h2 class="heading-serif event-detail-title" id="event-detail-title">Loading event…</h2>
-            <p class="event-detail-summary" id="event-detail-summary"></p>
-            <a class="btn btn-primary event-detail-cta" id="event-detail-cta" hidden></a>
-            <p class="event-detail-state" id="event-detail-state" role="status"></p>
-          </div>
-        </article>
-      </section>
-
       <section class="view-panel" id="events-list-view" aria-label="Events list">
       <ul class="events-grid">
         {events.map((event) => {
@@ -213,15 +219,13 @@ const calendarEvents = events.map((event) => {
                   <div class="event-cover">
                     {event.coverUrl && <img class="event-cover-image" src={event.coverUrl} alt="" loading="lazy" decoding="async" />}
                     <span class={`event-status-badge status-${event.status}`}>{config.label}</span>
-                    <span class="event-type-badge">{formatLabel(event.format)}</span>
                   </div>
                 </a>
               ) : (
                 <div class="event-cover">
-                  {event.coverUrl && <img class="event-cover-image" src={event.coverUrl} alt="" loading="lazy" decoding="async" />}
-                  <span class={`event-status-badge status-${event.status}`}>{config.label}</span>
-                  <span class="event-type-badge">{formatLabel(event.format)}</span>
-                </div>
+                    {event.coverUrl && <img class="event-cover-image" src={event.coverUrl} alt="" loading="lazy" decoding="async" />}
+                    <span class={`event-status-badge status-${event.status}`}>{config.label}</span>
+                  </div>
               )}
               <div class="event-body">
                 <div class="event-meta">
@@ -308,21 +312,32 @@ const calendarEvents = events.map((event) => {
   </main>
 </Base>
 
-<script define:vars={{ calendarEvents }}>
+<script>
   import { fetchLivePublicEvent, fetchLivePublicEvents } from '../../lib/live-public-events';
 
+  const calendarEvents = (() => {
+    const raw = document.querySelector('[data-calendar-events]')?.getAttribute('data-calendar-events');
+    if (!raw) return [];
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  })();
+
   const listPanel = document.querySelector('#events-list-view');
   const calendarPanel = document.querySelector('#events-calendar-view');
   const eventsViewBar = document.querySelector('.events-view-bar');
   const eventsGrid = document.querySelector('.events-grid');
+  const eventsBody = document.querySelector('.events-body');
+  const eventsPageHeader = document.querySelector('#events-page-header');
   const eventsPageTitle = document.querySelector('#events-page-title');
   const eventsPageSub = document.querySelector('#events-page-sub');
   const calendarSubscribe = document.querySelector('#calendar-subscribe');
   const detailPanel = document.querySelector('#event-detail-view');
-  const detailCoverWrap = document.querySelector('#event-detail-cover-wrap');
   const detailCover = document.querySelector('#event-detail-cover');
   const detailStatus = document.querySelector('#event-detail-status');
-  const detailFormat = document.querySelector('#event-detail-format');
   const detailMeta = document.querySelector('#event-detail-meta');
   const detailTitle = document.querySelector('#event-detail-title');
   const detailSummary = document.querySelector('#event-detail-summary');
@@ -442,6 +457,18 @@ const calendarEvents = events.map((event) => {
     return event.detailsUrl ?? event.registrationUrl ?? event.onlineUrl;
   }
 
+  function liveDetailAction(event, status) {
+    if (status === 'past') {
+      return event.streamUrl && !event.embedStream ? { href: event.streamUrl, label: 'Watch recording' } : null;
+    }
+    if (status === 'live') {
+      if (event.streamUrl) return { href: event.streamUrl, label: 'Watch live' };
+      if (event.onlineUrl) return { href: event.onlineUrl, label: 'Join online' };
+      return null;
+    }
+    return event.registrationUrl ? { href: event.registrationUrl, label: 'Register' } : null;
+  }
+
   function applyExternalLinkAttributes(element, url) {
     if (url?.startsWith('http')) {
       element.target = '_blank';
@@ -478,10 +505,7 @@ const calendarEvents = events.map((event) => {
     const statusBadge = document.createElement('span');
     statusBadge.className = `event-status-badge status-${status}`;
     statusBadge.textContent = config.label;
-    const formatBadge = document.createElement('span');
-    formatBadge.className = 'event-type-badge';
-    formatBadge.textContent = formatLiveLabel(event.format);
-    coverContent.append(statusBadge, formatBadge);
+    coverContent.append(statusBadge);
     if (eventUrl) {
       cover.append(coverContent);
       applyExternalLinkAttributes(cover, eventUrl);
@@ -568,38 +592,61 @@ const calendarEvents = events.map((event) => {
   }
 
   function setDetailMode(active) {
+    if (eventsPageHeader) eventsPageHeader.hidden = active;
+    if (eventsBody) eventsBody.hidden = active;
     if (eventsViewBar) eventsViewBar.hidden = active;
     if (listPanel) listPanel.hidden = active;
     if (calendarPanel) calendarPanel.hidden = active;
     if (calendarSubscribe) calendarSubscribe.hidden = active;
-    if (detailPanel) detailPanel.hidden = !active;
+    if (detailPanel) {
+      detailPanel.hidden = !active;
+      detailPanel.setAttribute('aria-hidden', String(!active));
+    }
+  }
+
+  function renderLiveEventLoading() {
+    setDetailMode(true);
+    if (eventsPageTitle) eventsPageTitle.textContent = 'Loading event…';
+    if (eventsPageSub) eventsPageSub.textContent = 'Loading event details…';
+    if (detailStatus) {
+      detailStatus.className = 'event-status-badge';
+      detailStatus.textContent = '';
+    }
+    if (detailMeta) detailMeta.textContent = '';
+    if (detailTitle) detailTitle.textContent = 'Loading event…';
+    if (detailSummary) detailSummary.textContent = '';
+    if (detailState) detailState.textContent = 'Loading event details…';
+    if (detailCover instanceof HTMLImageElement) {
+      detailCover.hidden = true;
+      detailCover.removeAttribute('src');
+    }
+    if (detailCta instanceof HTMLAnchorElement) detailCta.hidden = true;
   }
 
   function renderLiveEventDetail(event) {
-    if (!detailPanel || !detailTitle || !detailSummary || !detailMeta || !detailStatus || !detailFormat || !detailState) return;
+    if (!detailPanel || !detailTitle || !detailSummary || !detailMeta || !detailStatus || !detailState) return;
     const status = getLiveStatus(event);
     const config = statusConfig[status];
-    const eventUrl = event.registrationUrl ?? event.onlineUrl;
+    const action = liveDetailAction(event, status);
     setDetailMode(true);
     if (eventsPageTitle) eventsPageTitle.textContent = event.title;
     if (eventsPageSub) eventsPageSub.textContent = `${formatLiveDate(event.startsAt, event.timezone)} · ${liveLocation(event)}`;
     detailStatus.className = `event-status-badge status-${status}`;
-    detailStatus.textContent = config.label;
-    detailFormat.textContent = formatLiveLabel(event.format);
+    detailStatus.textContent = status === 'live' ? 'Live' : config.label;
     detailMeta.textContent = `${formatLiveDate(event.startsAt, event.timezone)} · ${formatLiveTime(event.startsAt, event.timezone)} · ${liveLocation(event)}`;
     detailTitle.textContent = event.title;
     detailSummary.textContent = event.summary;
-    detailState.textContent = '';
-    if (detailCoverWrap instanceof HTMLElement && detailCover instanceof HTMLImageElement) {
-      detailCoverWrap.hidden = !event.coverUrl;
+    detailState.textContent = status === 'past' && !(event.streamUrl && !event.embedStream) ? 'This event has ended.' : '';
+    if (detailCover instanceof HTMLImageElement) {
+      detailCover.hidden = !event.coverUrl;
       if (event.coverUrl) detailCover.src = event.coverUrl;
     }
     if (detailCta instanceof HTMLAnchorElement) {
-      detailCta.hidden = !eventUrl;
-      if (eventUrl) {
-        detailCta.href = eventUrl;
-        detailCta.textContent = event.registrationUrl ? 'Register for this event →' : 'Join online →';
-        applyExternalLinkAttributes(detailCta, eventUrl);
+      detailCta.hidden = !action;
+      if (action) {
+        detailCta.href = action.href;
+        detailCta.textContent = `${action.label} →`;
+        applyExternalLinkAttributes(detailCta, action.href);
       }
     }
     document.title = `${event.title} — DevCongress`;
@@ -609,10 +656,18 @@ const calendarEvents = events.map((event) => {
     setDetailMode(true);
     if (eventsPageTitle) eventsPageTitle.textContent = 'Event unavailable';
     if (eventsPageSub) eventsPageSub.textContent = 'This event is not currently available on the public website.';
+    if (detailStatus) {
+      detailStatus.className = 'event-status-badge';
+      detailStatus.textContent = '';
+    }
+    if (detailMeta) detailMeta.textContent = '';
     if (detailTitle) detailTitle.textContent = 'Event unavailable';
     if (detailSummary) detailSummary.textContent = '';
     if (detailState) detailState.textContent = message;
-    if (detailCoverWrap instanceof HTMLElement) detailCoverWrap.hidden = true;
+    if (detailCover instanceof HTMLImageElement) {
+      detailCover.hidden = true;
+      detailCover.removeAttribute('src');
+    }
     if (detailCta instanceof HTMLAnchorElement) detailCta.hidden = true;
   }
 
@@ -653,12 +708,13 @@ const calendarEvents = events.map((event) => {
   async function loadLiveEventRoute() {
     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') {
+      setDetailMode(false);
       setView(new URLSearchParams(window.location.search).get('view') === 'calendar' ? 'calendar' : 'list', false);
       await refreshLiveEvents();
       return;
     }
 
-    setDetailMode(true);
+    renderLiveEventLoading();
     try {
       const event = await fetchLivePublicEvent(match[1]);
       if (!event) {
@@ -1027,15 +1083,18 @@ const calendarEvents = events.map((event) => {
     background-color: var(--border-light);
     position: relative; display: flex;
     align-items: flex-end; justify-content: space-between;
-    padding: var(--s3); transition: opacity 200ms ease;
+    padding: var(--s3);
   }
   .event-cover-image {
     position: absolute; inset: 0;
     width: 100%; height: 100%; object-fit: cover;
+    transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .event-status-badge { position: relative; }
+  @media (hover: hover) and (pointer: fine) {
+    .event-card:hover { transform: none; }
+    .event-card:hover .event-cover-image { opacity: 0.92; }
   }
-  .event-status-badge,
-  .event-type-badge { position: relative; }
-  .event-card:hover .event-cover { opacity: 0.9; }
 
   .event-status-badge {
     font-size: var(--text-xs); font-weight: 700;
@@ -1046,12 +1105,6 @@ const calendarEvents = events.map((event) => {
   .status-live { background: var(--pink); color: #fff; }
   .status-past { background: var(--bg-white); color: var(--text-muted); }
 
-  .event-type-badge {
-    font-size: var(--text-xs); font-weight: 700;
-    background: rgba(0, 0, 0, 0.68); color: #fff;
-    border-radius: var(--r-sm); padding: 2px var(--s2);
-  }
-
   .event-body {
     padding: var(--s5); display: flex; flex-direction: column;
     gap: var(--s3); flex: 1; border-top: 2px solid var(--black);
@@ -1060,12 +1113,13 @@ const calendarEvents = events.map((event) => {
     display: flex; align-items: center; justify-content: space-between;
     font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
     letter-spacing: 0.04em; text-transform: uppercase;
-    flex-wrap: wrap; gap: var(--s2);
+    flex-wrap: nowrap; gap: var(--s2);
   }
   .event-location {
-    min-width: 0; max-width: 100%; overflow: hidden; flex: 1 1 auto;
+    min-width: 0; max-width: 100%; overflow: hidden; flex: 1 1 0;
     color: var(--pink); text-align: right; text-overflow: ellipsis; white-space: nowrap;
   }
+  .event-meta time { flex: 0 0 auto; white-space: nowrap; }
   .event-name {
     min-width: 0; overflow: hidden; font-size: var(--text-xl);
     line-height: var(--leading-snug); text-overflow: ellipsis; white-space: nowrap;
@@ -1077,24 +1131,93 @@ const calendarEvents = events.map((event) => {
     display: -webkit-box; -webkit-line-clamp: 3;
     -webkit-box-orient: vertical; overflow: hidden; flex: 1;
   }
-  .event-cta { align-self: flex-start; margin-top: var(--s2); }
+  .event-cta { align-self: flex-end; margin-top: auto; }
+
+  #events-page-header[hidden],
+  .events-body[hidden],
+  .event-detail-view[hidden] { display: none !important; }
 
-  .event-detail-view { display: grid; gap: var(--s4); }
+  .event-detail-view { background: var(--bg); }
+  .event-detail-hero {
+    position: relative;
+    display: flex;
+    min-height: clamp(30rem, 66vw, 48rem);
+    align-items: flex-end;
+    overflow: hidden;
+    border-bottom: 2px solid var(--black);
+    background: var(--black);
+    color: #fff;
+    isolation: isolate;
+  }
+  .event-detail-hero-image,
+  .event-detail-hero-overlay {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .event-detail-hero-image { z-index: -2; object-fit: cover; }
+  .event-detail-hero-overlay {
+    z-index: -1;
+    background: linear-gradient(180deg, rgba(17, 17, 17, 0.36) 0%, rgba(17, 17, 17, 0.28) 38%, rgba(17, 17, 17, 0.84) 100%);
+  }
+  .event-detail-hero-content {
+    padding-top: clamp(var(--s8), 14vw, var(--s10));
+    padding-bottom: clamp(var(--s7), 8vw, var(--s10));
+  }
+  .event-detail-hero .event-status-badge {
+    position: static;
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    padding: 0.45rem 0.7rem;
+    border: 2px solid rgba(255, 255, 255, 0.78);
+    border-radius: var(--r-sm);
+    background: rgba(17, 17, 17, 0.46);
+    color: #fff;
+    font-family: var(--font-body);
+    font-size: var(--text-xs);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    line-height: 1;
+    text-transform: uppercase;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
+  }
+  .event-detail-hero .status-upcoming { border-color: var(--yellow); background: var(--yellow); color: var(--black); }
+  .event-detail-hero .status-live { border-color: var(--pink); background: var(--pink); color: #fff; }
+  .event-detail-hero .status-past { border-color: var(--black); background: var(--bg-white); color: var(--text-muted); }
+  .event-detail-title {
+    max-width: 55rem;
+    margin-top: var(--s5);
+    color: #fff;
+    font-size: clamp(var(--text-3xl), 7vw, 5.5rem);
+    line-height: 0.96;
+    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
+  }
+  .event-detail-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-back {
-    justify-self: start; color: var(--text-mid); font-size: var(--text-sm); font-weight: 700;
+    color: var(--text-mid); font-size: var(--text-sm); font-weight: 700;
     text-decoration: underline; text-underline-offset: 4px;
   }
   .event-detail-back:hover { color: var(--pink); }
-  .event-detail-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); overflow: hidden; }
-  .event-detail-cover { min-height: 320px; background: var(--border-light); }
-  .event-detail-cover-image { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
-  .event-detail-content { display: flex; flex-direction: column; gap: var(--s4); padding: clamp(var(--s5), 5vw, var(--s8)); }
-  .event-detail-badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
-  .event-detail-meta { color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
-  .event-detail-title { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); line-height: var(--leading-tight); }
-  .event-detail-summary { color: var(--text-mid); font-size: var(--text-lg); line-height: var(--leading-body); }
-  .event-detail-cta { align-self: flex-start; margin-top: auto; }
-  .event-detail-state { color: var(--text-muted); font-size: var(--text-sm); }
+  .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-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); }
 
   .calendar-panel { overflow: hidden; background: var(--bg-white); }
   .calendar-panel:hover { transform: none; box-shadow: none; }
@@ -1239,8 +1362,10 @@ const calendarEvents = events.map((event) => {
 
   @media (max-width: 640px) {
     .events-grid { grid-template-columns: 1fr; }
-    .event-detail-card { grid-template-columns: 1fr; }
-    .event-detail-cover, .event-detail-cover-image { min-height: 220px; }
+    .event-detail-hero { min-height: 30rem; }
+    .event-detail-body { padding-block: var(--s7); }
+    .event-detail-layout { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }
+    .event-detail-action { padding-top: 0; }
     .calendar-subscribe { align-items: center; width: 100%; }
     .calendar-subscribe-button { width: auto; align-self: center; }
     .calendar-subscribe p { max-width: 310px; line-height: 1.45; text-align: center; }
@@ -1275,7 +1400,7 @@ const calendarEvents = events.map((event) => {
     :global(.agenda-arrow) { color: var(--pink); font-size: var(--text-base); font-weight: 800; }
   }
   @media (prefers-reduced-motion: reduce) {
-    .mnav-back, .event-detail-back, .event-cover, .view-switcher-highlight, .view-switcher-button, .calendar-nav-button, .calendar-today-button,
+    .mnav-back, .event-detail-back, .event-cover-image, .view-switcher-highlight, .view-switcher-button, .calendar-nav-button, .calendar-today-button,
     .calendar-day-popover-close, :global(.calendar-event), :global(.calendar-more-button),
     :global(.day-popover-event), :global(.agenda-event) { transition: none; }
   }
diff --git a/src/pages/events/submit.astro b/src/pages/events/submit.astro
index ef97f2f..51e4ecd 100644
--- a/src/pages/events/submit.astro
+++ b/src/pages/events/submit.astro
@@ -839,6 +839,25 @@ if (!EVENT_SUBMISSIONS_ENABLED) {
     if (notesInput && notesCount) notesCount.value = String(notesInput.value.length);
   }
 
+  function syncFormatMenuPlacement(): void {
+    if (!formatMenu || !formatTrigger || !formatSelectRoot || formatMenu.hidden) return;
+
+    const triggerRect = formatTrigger.getBoundingClientRect();
+    const viewport = window.visualViewport;
+    const viewportTop = viewport?.offsetTop ?? 0;
+    const viewportHeight = viewport?.height ?? window.innerHeight;
+    const viewportBottom = viewportTop + viewportHeight;
+    const gap = 8;
+    const spaceAbove = Math.max(0, triggerRect.top - viewportTop - gap);
+    const spaceBelow = Math.max(0, viewportBottom - triggerRect.bottom - gap);
+    const preferredHeight = Math.min(formatMenu.scrollHeight, 224, viewportHeight * 0.4);
+    const opensUpward = spaceBelow < preferredHeight && spaceAbove > spaceBelow;
+    const availableHeight = opensUpward ? spaceAbove : spaceBelow;
+
+    formatSelectRoot.classList.toggle('opens-upward', opensUpward);
+    formatMenu.style.setProperty('--app-select-menu-max-height', `${Math.floor(Math.min(preferredHeight, availableHeight))}px`);
+  }
+
   function setFormatMenuOpen(open: boolean): void {
     if (!formatMenu || !formatTrigger || !formatSelectRoot) return;
     if (selectCloseTimer) window.clearTimeout(selectCloseTimer);
@@ -847,10 +866,13 @@ if (!EVENT_SUBMISSIONS_ENABLED) {
 
     if (open) {
       formatMenu.hidden = false;
+      syncFormatMenuPlacement();
       requestAnimationFrame(() => formatMenu.classList.add('is-visible'));
       return;
     }
 
+    formatSelectRoot.classList.remove('opens-upward');
+    formatMenu.style.removeProperty('--app-select-menu-max-height');
     formatMenu.classList.remove('is-visible');
     const finish = () => { formatMenu.hidden = true; };
     if (reduceMotion.matches) finish();
@@ -1423,6 +1445,9 @@ if (!EVENT_SUBMISSIONS_ENABLED) {
   document.addEventListener('click', (event) => {
     if (formatSelectRoot && !formatSelectRoot.contains(event.target as Node)) setFormatMenuOpen(false);
   });
+  window.addEventListener('resize', syncFormatMenuPlacement, { passive: true });
+  window.visualViewport?.addEventListener('resize', syncFormatMenuPlacement, { passive: true });
+  window.addEventListener('scroll', syncFormatMenuPlacement, { passive: true, capture: true });
   nextButtons.forEach((button) => {
     button.addEventListener('click', () => {
       clearErrors();
@@ -1786,9 +1811,9 @@ if (!EVENT_SUBMISSIONS_ENABLED) {
   .cover-picker { display: flex; align-items: center; gap: var(--s3); min-height: 72px; border: 2px dashed var(--border-light); border-radius: var(--r-md); padding: var(--s3); background: var(--yellow-bg); }
   .cover-picker:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232, 17, 127, 0.13); }
   .cover-picker input[type='file'] { width: min(100%, 180px); min-height: 42px; border: 0; padding: 0; font-size: var(--text-xs); }
-  .cover-picker-copy { display: grid; gap: 2px; min-width: 0; }
+  .cover-picker-copy { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; white-space: nowrap; }
   .cover-picker-copy strong { font-size: var(--text-sm); }
-  .cover-picker-copy span { color: var(--text-muted); font-size: var(--text-xs); }
+  .cover-picker-copy span { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; }
   .cover-remove { margin-left: auto; min-height: 36px; color: #b42318; font-size: var(--text-xs); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
   .cover-preview { width: 100%; max-height: 220px; margin-top: var(--s3); border: 2px solid var(--black); border-radius: var(--r-md); object-fit: cover; }
   .cover-upload-progress { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--yellow-bg); }
@@ -1813,12 +1838,14 @@ if (!EVENT_SUBMISSIONS_ENABLED) {
   .app-select.is-open .app-select-chevron { transform: translateY(2px) rotate(180deg); }
   .app-select-menu {
     position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
-    display: grid; gap: 2px; max-height: min(224px, 40vh); overflow-y: auto; overscroll-behavior: contain;
+    display: grid; gap: 2px; max-height: var(--app-select-menu-max-height, min(224px, 40vh)); overflow-y: auto; overscroll-behavior: contain;
     padding: var(--s2); border: 2px solid var(--black); border-radius: var(--r-md); scrollbar-color: var(--pink) var(--yellow-bg);
     background: var(--bg-white); box-shadow: var(--shadow-solid); opacity: 0; transform: translateY(-8px) scale(0.985);
     transform-origin: top; transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
   }
   .app-select-menu.is-visible { opacity: 1; transform: translateY(0) scale(1); }
+  .app-select.opens-upward .app-select-menu { top: auto; bottom: calc(100% + 8px); transform: translateY(8px) scale(0.985); transform-origin: bottom; }
+  .app-select.opens-upward .app-select-menu.is-visible { transform: translateY(0) scale(1); }
   .app-select-menu button { width: 100%; min-height: 42px; border-radius: calc(var(--r-md) - 2px); padding: 0.55rem var(--s3); color: var(--text-mid); font-size: var(--text-sm); font-weight: 650; text-align: left; transition: color 120ms cubic-bezier(0.4, 0, 0.2, 1), background 120ms cubic-bezier(0.4, 0, 0.2, 1), transform 100ms cubic-bezier(0.4, 0, 0.2, 1); }
   .app-select-menu button:hover, .app-select-menu button:focus-visible { color: var(--text); background: var(--yellow-bg); outline: 2px solid var(--pink); outline-offset: -2px; }
   .app-select-menu button[aria-selected='true'] { color: var(--text); background: var(--yellow); }