diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..4f8d59c
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,5 @@
+# Public event submission launch control. The flag fails closed when omitted.
+#
+# Private beta: enabled=true, then share /events/submit/ directly.
+# Safety shutdown: enabled=false.
+PUBLIC_EVENT_SUBMISSIONS_ENABLED=false
diff --git a/.github/workflows/deploy-cloudflare-workers.yml b/.github/workflows/deploy-cloudflare-workers.yml
index 8196180..737c379 100644
--- a/.github/workflows/deploy-cloudflare-workers.yml
+++ b/.github/workflows/deploy-cloudflare-workers.yml
@@ -18,6 +18,9 @@ concurrency:
   group: cloudflare-workers-production
   cancel-in-progress: false
 
+env:
+  PUBLIC_EVENT_SUBMISSIONS_ENABLED: ${{ vars.PUBLIC_EVENT_SUBMISSIONS_ENABLED }}
+
 jobs:
   validate-and-build:
     name: Build static site
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 1518424..a0e8e99 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -18,6 +18,9 @@ concurrency:
   group: github-pages
   cancel-in-progress: false
 
+env:
+  PUBLIC_EVENT_SUBMISSIONS_ENABLED: ${{ vars.PUBLIC_EVENT_SUBMISSIONS_ENABLED }}
+
 jobs:
   build:
     name: Build static site
diff --git a/README.md b/README.md
index 4d63c98..be3587d 100644
--- a/README.md
+++ b/README.md
@@ -53,8 +53,29 @@ the build uses `content/meetups/*.yaml` instead. This keeps the public site
 deployable during a temporary upstream incident without exposing organizer
 credentials or connecting the browser directly to the operational system.
 
-Pushes to `main`, manual workflow runs, and the existing Monday/Thursday
-scheduled builds refresh the static meetup snapshot.
+Pushes to `main`, manual workflow runs, and the daily `06:17 UTC` scheduled
+build refresh the static event snapshot.
+
+## Public event submission launch controls
+
+Event submissions use one fail-closed build-time flag. Add it as a GitHub
+Actions repository variable so GitHub Pages and Cloudflare produce the same
+static release:
+
+| Variable | Purpose |
+| :-- | :-- |
+| `PUBLIC_EVENT_SUBMISSIONS_ENABLED` | Hard website safety switch. When it is not `true`, `/events/submit/` redirects to `/events/`. |
+
+- Private beta: set the variable to `true`, then share `/events/submit/`
+  directly with testers.
+- Safety shutdown: set enabled to `false` and rebuild both static deployments.
+
+The website does not render an event-submission link during beta, and the form
+page remains `noindex`. Its permanent public entry point will be chosen after
+beta. An unset variable is treated as `false`. Local development can copy
+`.env.example` to `.env` and opt in explicitly. This website flag does not
+disable direct requests to Events Management; the backend needs its own runtime
+switch for a system-wide shutdown.
 
 ## Cloudflare Workers deployment
 
diff --git a/docs/screenshots/community-event-submission/01-event-details.png b/docs/screenshots/community-event-submission/01-event-details.png
new file mode 100644
index 0000000..5afef57
Binary files /dev/null and b/docs/screenshots/community-event-submission/01-event-details.png differ
diff --git a/docs/screenshots/community-event-submission/02-place-and-time.png b/docs/screenshots/community-event-submission/02-place-and-time.png
new file mode 100644
index 0000000..db390d0
Binary files /dev/null and b/docs/screenshots/community-event-submission/02-place-and-time.png differ
diff --git a/docs/screenshots/community-event-submission/03-contact-and-human-check.png b/docs/screenshots/community-event-submission/03-contact-and-human-check.png
new file mode 100644
index 0000000..3d9b240
Binary files /dev/null and b/docs/screenshots/community-event-submission/03-contact-and-human-check.png differ
diff --git a/docs/screenshots/community-event-submission/04-submitted-for-review.png b/docs/screenshots/community-event-submission/04-submitted-for-review.png
new file mode 100644
index 0000000..c11bf81
Binary files /dev/null and b/docs/screenshots/community-event-submission/04-submitted-for-review.png differ
diff --git a/src/components/AppDateTimePicker.astro b/src/components/AppDateTimePicker.astro
new file mode 100644
index 0000000..434cd40
--- /dev/null
+++ b/src/components/AppDateTimePicker.astro
@@ -0,0 +1,349 @@
+---
+interface Props {
+  id: string;
+  name: string;
+  label: string;
+  required?: boolean;
+}
+
+const { id, name, label, required = false } = Astro.props;
+---
+
+<div class="date-time-field" data-date-time-picker={name}>
+  <label for={`${id}-trigger`}>
+    {label} {required && <span aria-hidden="true">*</span>}
+  </label>
+  <input
+    id={id}
+    name={name}
+    type="datetime-local"
+    class="native-date-time"
+    autocomplete="off"
+    required={required}
+    tabindex="-1"
+    aria-hidden="true"
+  />
+  <button
+    type="button"
+    id={`${id}-trigger`}
+    class="date-time-trigger"
+    aria-haspopup="dialog"
+    aria-expanded="false"
+    aria-required={required ? 'true' : undefined}
+  >
+    <span data-date-time-label>Choose date and time</span>
+    <span class="calendar-icon" aria-hidden="true">
+      <svg viewBox="0 0 20 20" fill="none">
+        <path d="M5.5 3.5v2M14.5 3.5v2M4 7.5h12M6 2.75h8a1.75 1.75 0 0 1 1.75 1.75v10.5A1.75 1.75 0 0 1 14 16.75H6A1.75 1.75 0 0 1 4.25 15V4.5A1.75 1.75 0 0 1 6 2.75Z" />
+      </svg>
+    </span>
+  </button>
+
+  <div class="date-time-panel" role="dialog" aria-label={`Choose ${label.toLowerCase()}`} hidden>
+    <div class="calendar-header">
+      <button type="button" data-previous-month aria-label="Previous month">
+        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M12.5 4.5 7 10l5.5 5.5" /></svg>
+      </button>
+      <p data-month-label></p>
+      <button type="button" data-next-month aria-label="Next month">
+        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M7.5 4.5 13 10l-5.5 5.5" /></svg>
+      </button>
+    </div>
+
+    <div class="calendar-body">
+      <div class="weekday-row" aria-hidden="true">
+        <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
+      </div>
+      <div class="calendar-grid" data-calendar-grid></div>
+
+      <div class="time-row">
+        <div>
+          <strong>Time</strong>
+          <span>24 hour</span>
+        </div>
+        <div class="time-inputs">
+          <label>
+            <span class="sr-only">Hour</span>
+            <input type="text" inputmode="numeric" maxlength="2" value="09" data-hour aria-label="Hour, 00 to 23" />
+          </label>
+          <span aria-hidden="true">:</span>
+          <label>
+            <span class="sr-only">Minute</span>
+            <input type="text" inputmode="numeric" maxlength="2" value="00" data-minute aria-label="Minute, 00 to 59" />
+          </label>
+        </div>
+      </div>
+
+      <div class="calendar-actions">
+        <button type="button" class="today-action" data-today>Today</button>
+        <button type="button" class="done-action" data-date-done>Done</button>
+      </div>
+    </div>
+  </div>
+  <p class="field-error" id={`${id}-error`}></p>
+</div>
+
+<script>
+  const pickerRoots = Array.from(document.querySelectorAll<HTMLElement>('[data-date-time-picker]'));
+
+  function padDatePart(value: number): string {
+    return String(value).padStart(2, '0');
+  }
+
+  function dateKey(date: Date): string {
+    return `${date.getFullYear()}-${padDatePart(date.getMonth() + 1)}-${padDatePart(date.getDate())}`;
+  }
+
+  function sameDate(first: Date | null, second: Date | null): boolean {
+    return Boolean(first && second && dateKey(first) === dateKey(second));
+  }
+
+  function parseLocalDateTime(value: string): Date | null {
+    const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
+    if (!match) return null;
+    const parsed = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]), Number(match[4]), Number(match[5]));
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  }
+
+  pickerRoots.forEach((root) => {
+    if (root.dataset.initialized === 'true') return;
+    root.dataset.initialized = 'true';
+    const input = root.querySelector<HTMLInputElement>('.native-date-time');
+    const trigger = root.querySelector<HTMLButtonElement>('.date-time-trigger');
+    const valueLabel = root.querySelector<HTMLElement>('[data-date-time-label]');
+    const panel = root.querySelector<HTMLElement>('.date-time-panel');
+    const monthLabel = root.querySelector<HTMLElement>('[data-month-label]');
+    const grid = root.querySelector<HTMLElement>('[data-calendar-grid]');
+    const hourInput = root.querySelector<HTMLInputElement>('[data-hour]');
+    const minuteInput = root.querySelector<HTMLInputElement>('[data-minute]');
+    if (!input || !trigger || !valueLabel || !panel || !monthLabel || !grid || !hourInput || !minuteInput) return;
+
+    let cursor = new Date();
+    let draftDate: Date | null = null;
+    let activeDate = new Date();
+    let closeTimer: number | undefined;
+
+    const normalizedNumber = (value: string, maximum: number) => {
+      const number = Number(value.replace(/\D/g, ''));
+      return padDatePart(Number.isFinite(number) ? Math.min(Math.max(number, 0), maximum) : 0);
+    };
+
+    function syncTrigger(): void {
+      const selected = parseLocalDateTime(input.value);
+      if (!selected) {
+        valueLabel.textContent = 'Choose date and time';
+        trigger.classList.add('is-placeholder');
+        return;
+      }
+      valueLabel.textContent = `${new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }).format(selected)} · ${padDatePart(selected.getHours())}:${padDatePart(selected.getMinutes())}`;
+      trigger.classList.remove('is-placeholder');
+    }
+
+    function isBeforeMinimum(date: Date): boolean {
+      const minimum = parseLocalDateTime(input.min);
+      if (!minimum) return false;
+      const dayEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
+      return dayEnd < minimum;
+    }
+
+    function renderCalendar(): void {
+      monthLabel.textContent = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' }).format(cursor);
+      grid.replaceChildren();
+      const year = cursor.getFullYear();
+      const month = cursor.getMonth();
+      const first = new Date(year, month, 1);
+      const start = new Date(year, month, 1 - first.getDay());
+      const today = new Date();
+
+      for (let index = 0; index < 42; index += 1) {
+        const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.textContent = String(date.getDate());
+        button.dataset.date = dateKey(date);
+        button.className = 'calendar-day';
+        button.tabIndex = sameDate(date, activeDate) ? 0 : -1;
+        if (date.getMonth() !== month) button.classList.add('is-outside');
+        if (sameDate(date, today)) {
+          button.classList.add('is-today');
+          button.setAttribute('aria-current', 'date');
+        }
+        if (sameDate(date, draftDate)) {
+          button.classList.add('is-selected');
+          button.setAttribute('aria-pressed', 'true');
+        } else button.setAttribute('aria-pressed', 'false');
+        button.disabled = isBeforeMinimum(date);
+        button.setAttribute('aria-label', new Intl.DateTimeFormat('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(date));
+        button.addEventListener('click', () => {
+          draftDate = date;
+          activeDate = date;
+          cursor = new Date(date.getFullYear(), date.getMonth(), 1);
+          renderCalendar();
+        });
+        grid.append(button);
+      }
+    }
+
+    function closePicker(restoreFocus = false): void {
+      if (closeTimer) window.clearTimeout(closeTimer);
+      trigger.setAttribute('aria-expanded', 'false');
+      root.classList.remove('is-open');
+      panel.classList.remove('is-visible');
+      const finish = () => { panel.hidden = true; };
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) finish();
+      else closeTimer = window.setTimeout(finish, 160);
+      if (restoreFocus) trigger.focus();
+    }
+
+    function openPicker(): void {
+      document.dispatchEvent(new CustomEvent('public-date-picker:open', { detail: { root } }));
+      if (closeTimer) window.clearTimeout(closeTimer);
+      const selected = parseLocalDateTime(input.value) ?? new Date(Date.now() + 60 * 60 * 1000);
+      draftDate = new Date(selected.getFullYear(), selected.getMonth(), selected.getDate());
+      activeDate = new Date(selected.getFullYear(), selected.getMonth(), selected.getDate());
+      cursor = new Date(selected.getFullYear(), selected.getMonth(), 1);
+      hourInput.value = padDatePart(selected.getHours());
+      minuteInput.value = padDatePart(selected.getMinutes());
+      renderCalendar();
+      panel.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      root.classList.add('is-open');
+      requestAnimationFrame(() => {
+        panel.classList.add('is-visible');
+        grid.querySelector<HTMLButtonElement>('[tabindex="0"]')?.focus();
+      });
+    }
+
+    function applySelection(): void {
+      if (!draftDate) return;
+      hourInput.value = normalizedNumber(hourInput.value, 23);
+      minuteInput.value = normalizedNumber(minuteInput.value, 59);
+      input.value = `${dateKey(draftDate)}T${hourInput.value}:${minuteInput.value}`;
+      trigger.removeAttribute('aria-invalid');
+      trigger.removeAttribute('aria-describedby');
+      trigger.removeAttribute('aria-errormessage');
+      const error = root.querySelector<HTMLElement>('.field-error');
+      if (error) error.textContent = '';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+      syncTrigger();
+      closePicker(true);
+    }
+
+    trigger.addEventListener('click', () => {
+      if (trigger.getAttribute('aria-expanded') === 'true') closePicker();
+      else openPicker();
+    });
+    root.querySelector<HTMLButtonElement>('[data-previous-month]')?.addEventListener('click', () => {
+      cursor = new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1);
+      renderCalendar();
+    });
+    root.querySelector<HTMLButtonElement>('[data-next-month]')?.addEventListener('click', () => {
+      cursor = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);
+      renderCalendar();
+    });
+    root.querySelector<HTMLButtonElement>('[data-today]')?.addEventListener('click', () => {
+      const today = new Date();
+      draftDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      activeDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      cursor = new Date(today.getFullYear(), today.getMonth(), 1);
+      renderCalendar();
+    });
+    root.querySelector<HTMLButtonElement>('[data-date-done]')?.addEventListener('click', applySelection);
+    [hourInput, minuteInput].forEach((timeInput) => {
+      timeInput.addEventListener('input', () => { timeInput.value = timeInput.value.replace(/\D/g, '').slice(0, 2); });
+      timeInput.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') { event.preventDefault(); applySelection(); }
+      });
+    });
+    panel.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') { event.preventDefault(); closePicker(true); }
+    });
+    grid.addEventListener('keydown', (event) => {
+      const target = event.target instanceof HTMLButtonElement ? event.target : null;
+      const value = target?.dataset.date;
+      if (!value) return;
+      const current = parseLocalDateTime(`${value}T12:00`);
+      if (!current) return;
+      const moves: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+      const offset = moves[event.key];
+      if (!offset) return;
+      event.preventDefault();
+      const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + offset);
+      activeDate = next;
+      cursor = new Date(next.getFullYear(), next.getMonth(), 1);
+      renderCalendar();
+      grid.querySelector<HTMLButtonElement>(`[data-date="${dateKey(next)}"]`)?.focus();
+    });
+    document.addEventListener('public-date-picker:open', (event) => {
+      const openedRoot = (event as CustomEvent<{ root?: HTMLElement }>).detail?.root;
+      if (openedRoot !== root) closePicker();
+    });
+    document.addEventListener('pointerdown', (event) => {
+      if (!root.contains(event.target as Node)) closePicker();
+    });
+    input.addEventListener('app-date-picker:sync', syncTrigger);
+    input.addEventListener('change', syncTrigger);
+    syncTrigger();
+  });
+</script>
+
+<style>
+  .date-time-field { position: relative; display: flex; min-width: 0; flex-direction: column; }
+  label { margin-bottom: var(--s2); font-size: var(--text-sm); font-weight: 700; }
+  label > span[aria-hidden='true'] { color: var(--pink); }
+  .native-date-time { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  .date-time-trigger { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: var(--s3); border: 2px solid var(--black); border-radius: var(--r-md); background: var(--bg-white); color: var(--text); padding: 0.8rem var(--s3); font-size: var(--text-sm); font-weight: 600; text-align: left; outline: none; touch-action: manipulation; }
+  .date-time-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .date-time-trigger.is-placeholder { color: var(--text-muted); font-weight: 400; }
+  .date-time-trigger:focus-visible, .is-open .date-time-trigger { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232, 17, 127, 0.13); }
+  .date-time-trigger[aria-invalid='true'] { border-color: #be123c; box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.12); }
+  .calendar-icon { display: grid; width: 25px; height: 25px; flex: none; place-items: center; border: 1px solid var(--border-light); border-radius: 50%; color: var(--pink); }
+  .calendar-icon svg { width: 15px; height: 15px; }
+  .calendar-icon path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+  .date-time-panel { position: absolute; z-index: 60; top: calc(100% - 10px); left: 0; width: min(330px, calc(100vw - 3rem)); overflow: hidden; overscroll-behavior: contain; border: 2px solid var(--black); border-radius: var(--r-md); background: var(--bg-white); box-shadow: var(--shadow-solid); opacity: 0; transform: translateY(-8px) scale(0.985); transform-origin: top left; transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .date-time-panel.is-visible { opacity: 1; transform: translateY(0) scale(1); }
+  .calendar-header { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--border-light); background: var(--yellow-bg); padding: var(--s3); }
+  .calendar-header p { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
+  .calendar-header button { display: grid; width: 32px; height: 32px; place-items: center; border: 1.5px solid var(--black); border-radius: 6px; background: var(--bg-white); }
+  .calendar-header svg { width: 16px; height: 16px; }
+  .calendar-header path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+  .calendar-body { padding: var(--s3); }
+  .weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
+  .weekday-row { margin-bottom: 3px; }
+  .weekday-row span { display: grid; height: 24px; place-items: center; color: var(--text-muted); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
+  :global(.calendar-day) { position: relative; display: grid; height: 34px; place-items: center; border: 1.5px solid transparent; border-radius: 6px; color: var(--text); font-size: var(--text-xs); font-weight: 600; outline: none; transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1), border-color 120ms cubic-bezier(0.4, 0, 0.2, 1), transform 100ms cubic-bezier(0.4, 0, 0.2, 1); }
+  :global(.calendar-day.is-outside) { color: var(--text-muted); opacity: 0.55; }
+  :global(.calendar-day.is-today) { border-color: var(--pink); color: var(--pink); }
+  :global(.calendar-day.is-selected) { border-color: var(--black); background: var(--yellow); color: var(--black); font-weight: 800; box-shadow: 2px 2px 0 var(--black); opacity: 1; }
+  :global(.calendar-day:focus-visible) { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(232, 17, 127, 0.28); }
+  :global(.calendar-day:disabled) { cursor: not-allowed; opacity: 0.22; }
+  .time-row { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); border-top: 1px solid var(--border-light); padding-top: var(--s3); }
+  .time-row > div:first-child { display: grid; }
+  .time-row strong { font-size: var(--text-xs); text-transform: uppercase; }
+  .time-row > div:first-child span { color: var(--text-muted); font-size: 0.625rem; }
+  .time-inputs { display: flex; align-items: center; gap: 5px; font-weight: 800; }
+  .time-inputs label { margin: 0; }
+  .time-inputs input { width: 44px; height: 38px; border: 1.5px solid var(--black); border-radius: 6px; background: white; font: inherit; font-size: var(--text-xs); font-weight: 700; text-align: center; outline: none; }
+  .time-inputs input:focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(232, 17, 127, 0.15); }
+  .calendar-actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s3); border-top: 1px solid var(--border-light); padding-top: var(--s3); }
+  .today-action { color: var(--text-mid); font-size: var(--text-xs); font-weight: 700; }
+  .done-action { border: 2px solid var(--black); border-radius: 6px; background: var(--pink); color: white; padding: 0.55rem var(--s4); font-size: var(--text-xs); font-weight: 800; box-shadow: 2px 2px 0 var(--black); }
+  .calendar-header button:focus-visible, .today-action:focus-visible, .done-action:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
+  .calendar-header button:active, :global(.calendar-day:active), .done-action:active { transform: scale(0.97); }
+  .field-error { min-height: 1.2em; color: #be123c; font-size: var(--text-xs); font-weight: 650; line-height: 1.2; margin-top: var(--s1); }
+  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  [hidden] { display: none !important; }
+  @media (hover: hover) and (pointer: fine) {
+    .calendar-header button:hover { background: var(--yellow); }
+    :global(.calendar-day:not(:disabled):hover) { border-color: var(--black); background: var(--yellow-bg); }
+    .today-action:hover { color: var(--pink); }
+  }
+  @media (max-width: 600px) {
+    .date-time-panel { position: fixed; top: 50%; left: 50%; width: min(330px, calc(100vw - 2rem)); transform: translate(-50%, calc(-50% - 8px)) scale(0.985); transform-origin: center; }
+    .date-time-panel.is-visible { transform: translate(-50%, -50%) scale(1); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .date-time-panel, :global(.calendar-day) { transition: none; }
+  }
+</style>
diff --git a/src/components/AppTimezonePicker.astro b/src/components/AppTimezonePicker.astro
new file mode 100644
index 0000000..24a40c0
--- /dev/null
+++ b/src/components/AppTimezonePicker.astro
@@ -0,0 +1,357 @@
+---
+interface Props {
+  id: string;
+  name: string;
+  label: string;
+  hint?: string;
+  required?: boolean;
+}
+
+const {
+  id,
+  name,
+  label,
+  hint = 'Detected from your device. Change it if the event uses another time zone.',
+  required = false,
+} = Astro.props;
+---
+
+<div class="timezone-field" data-timezone-picker>
+  <label for={`${id}-trigger`}>
+    {label} {required && <span aria-hidden="true">*</span>}
+  </label>
+  <input
+    id={id}
+    name={name}
+    type="text"
+    class="native-timezone"
+    autocomplete="off"
+    required={required}
+    tabindex="-1"
+    aria-hidden="true"
+  />
+
+  <div class="timezone-select">
+    <button
+      type="button"
+      id={`${id}-trigger`}
+      class="timezone-trigger"
+      role="combobox"
+      aria-label={label}
+      aria-controls={`${id}-options`}
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-required={required ? 'true' : undefined}
+    >
+      <span class="timezone-value">
+        <strong data-timezone-label>Detecting time zone…</strong>
+        <small data-timezone-offset></small>
+      </span>
+      <svg class="timezone-chevron" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+        <path d="m5.5 7.5 4.5 4.5 4.5-4.5" />
+      </svg>
+    </button>
+
+    <div class="timezone-menu" hidden>
+      <div class="timezone-search-wrap">
+        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <circle cx="8.75" cy="8.75" r="5.25" />
+          <path d="m12.75 12.75 3.5 3.5" />
+        </svg>
+        <label class="sr-only" for={`${id}-search`}>Search time zones</label>
+        <input
+          id={`${id}-search`}
+          type="search"
+          class="timezone-search"
+          placeholder="Search city or time zone"
+          autocomplete="off"
+          spellcheck="false"
+        />
+      </div>
+      <div class="timezone-menu-meta">
+        <span data-timezone-result-count></span>
+        <span>Current UTC offsets</span>
+      </div>
+      <div id={`${id}-options`} class="timezone-options" role="listbox" aria-label={label}></div>
+      <p class="timezone-empty" data-timezone-empty hidden>No matching time zone.</p>
+    </div>
+  </div>
+
+  <p class="timezone-hint">{hint}</p>
+  <p class="field-error" id={`${id}-error`}></p>
+</div>
+
+<script>
+  type IntlWithSupportedValues = typeof Intl & {
+    supportedValuesOf?: (key: 'timeZone') => string[];
+  };
+
+  const fallbackTimezones = [
+    'Africa/Accra', 'Africa/Cairo', 'Africa/Johannesburg', 'Africa/Lagos', 'Africa/Nairobi',
+    'America/Chicago', 'America/Los_Angeles', 'America/New_York', 'America/Sao_Paulo',
+    'Asia/Dubai', 'Asia/Kolkata', 'Asia/Singapore', 'Asia/Tokyo',
+    'Australia/Sydney', 'Europe/Berlin', 'Europe/London', 'Europe/Paris', 'Pacific/Auckland', 'UTC',
+  ];
+
+  const timezoneRoots = Array.from(document.querySelectorAll<HTMLElement>('[data-timezone-picker]'));
+
+  function timezoneOffset(timezone: string): string {
+    try {
+      const parts = new Intl.DateTimeFormat('en-GB', {
+        timeZone: timezone,
+        timeZoneName: 'shortOffset',
+      }).formatToParts(new Date());
+      return parts.find((part) => part.type === 'timeZoneName')?.value.replace('GMT', 'UTC') ?? '';
+    } catch {
+      return '';
+    }
+  }
+
+  function timezoneCity(timezone: string): string {
+    const city = timezone.split('/').at(-1) ?? timezone;
+    return city.replaceAll('_', ' ');
+  }
+
+  function searchText(value: string): string {
+    return value.toLocaleLowerCase().replaceAll('_', ' ').replaceAll('/', ' ');
+  }
+
+  timezoneRoots.forEach((root) => {
+    if (root.dataset.initialized === 'true') return;
+    root.dataset.initialized = 'true';
+    const input = root.querySelector<HTMLInputElement>('.native-timezone');
+    const select = root.querySelector<HTMLElement>('.timezone-select');
+    const trigger = root.querySelector<HTMLButtonElement>('.timezone-trigger');
+    const selectedLabel = root.querySelector<HTMLElement>('[data-timezone-label]');
+    const selectedOffset = root.querySelector<HTMLElement>('[data-timezone-offset]');
+    const menu = root.querySelector<HTMLElement>('.timezone-menu');
+    const search = root.querySelector<HTMLInputElement>('.timezone-search');
+    const optionsRoot = root.querySelector<HTMLElement>('.timezone-options');
+    const resultCount = root.querySelector<HTMLElement>('[data-timezone-result-count]');
+    const empty = root.querySelector<HTMLElement>('[data-timezone-empty]');
+    if (!input || !select || !trigger || !selectedLabel || !selectedOffset || !menu || !search || !optionsRoot || !resultCount || !empty) return;
+
+    const detected = Intl.DateTimeFormat().resolvedOptions().timeZone || 'Africa/Accra';
+    let timezones: string[];
+    try {
+      timezones = (Intl as IntlWithSupportedValues).supportedValuesOf?.('timeZone') ?? fallbackTimezones;
+    } catch {
+      timezones = fallbackTimezones;
+    }
+    timezones = Array.from(new Set([detected, 'UTC', ...timezones])).sort((first, second) => (
+      timezoneCity(first).localeCompare(timezoneCity(second), 'en', { sensitivity: 'base' })
+    ));
+    const timezoneRecords = timezones.map((timezone) => {
+      const city = timezoneCity(timezone);
+      const offset = timezoneOffset(timezone);
+      return {
+        timezone,
+        city,
+        offset,
+        search: searchText(`${timezone} ${city} ${offset}`),
+      };
+    });
+    let closeTimer: number | undefined;
+
+    function syncSelection(timezone: string, announce = true): void {
+      input.value = timezone;
+      selectedLabel.textContent = timezoneCity(timezone);
+      selectedOffset.textContent = `${timezone} · ${timezoneOffset(timezone)}`;
+      trigger.removeAttribute('aria-invalid');
+      trigger.removeAttribute('aria-describedby');
+      trigger.removeAttribute('aria-errormessage');
+      const error = root.querySelector<HTMLElement>('.field-error');
+      if (error) error.textContent = '';
+      if (announce) {
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    }
+
+    function closeMenu(restoreFocus = false): void {
+      if (closeTimer) window.clearTimeout(closeTimer);
+      trigger.setAttribute('aria-expanded', 'false');
+      select.classList.remove('is-open');
+      menu.classList.remove('is-visible');
+      const finish = () => { menu.hidden = true; };
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) finish();
+      else closeTimer = window.setTimeout(finish, 160);
+      if (restoreFocus) trigger.focus();
+    }
+
+    function selectTimezone(timezone: string): void {
+      syncSelection(timezone);
+      renderOptions(search.value);
+      closeMenu(true);
+    }
+
+    function optionButtons(): HTMLButtonElement[] {
+      return Array.from(optionsRoot.querySelectorAll<HTMLButtonElement>('[role="option"]'));
+    }
+
+    function handleOptionKeydown(event: KeyboardEvent, index: number): void {
+      const options = optionButtons();
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeMenu(true);
+        return;
+      }
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+      event.preventDefault();
+      const nextIndex = event.key === 'Home'
+        ? 0
+        : event.key === 'End'
+          ? options.length - 1
+          : (index + (event.key === 'ArrowDown' ? 1 : -1) + options.length) % options.length;
+      options[nextIndex]?.focus();
+    }
+
+    function renderOptions(query = ''): void {
+      const normalizedQuery = searchText(query.trim());
+      const matches = normalizedQuery
+        ? timezoneRecords.filter((record) => record.search.includes(normalizedQuery))
+        : timezoneRecords;
+      optionsRoot.replaceChildren();
+      resultCount.textContent = `${matches.length} time zone${matches.length === 1 ? '' : 's'}`;
+      empty.hidden = matches.length > 0;
+      optionsRoot.hidden = matches.length === 0;
+
+      matches.forEach((record, index) => {
+        const option = document.createElement('button');
+        const label = document.createElement('span');
+        const city = document.createElement('strong');
+        const canonical = document.createElement('small');
+        const offset = document.createElement('span');
+        option.type = 'button';
+        option.className = 'timezone-option';
+        option.setAttribute('role', 'option');
+        option.setAttribute('aria-selected', String(record.timezone === input.value));
+        option.dataset.timezone = record.timezone;
+        label.className = 'timezone-option-label';
+        city.textContent = record.city;
+        canonical.textContent = record.timezone;
+        offset.className = 'timezone-option-offset';
+        offset.textContent = record.offset;
+        label.append(city, canonical);
+        option.append(label, offset);
+        option.addEventListener('click', () => selectTimezone(record.timezone));
+        option.addEventListener('keydown', (event) => handleOptionKeydown(event, index));
+        optionsRoot.append(option);
+      });
+    }
+
+    function openMenu(): void {
+      if (closeTimer) window.clearTimeout(closeTimer);
+      renderOptions(search.value);
+      menu.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      select.classList.add('is-open');
+      requestAnimationFrame(() => {
+        menu.classList.add('is-visible');
+        search.focus();
+        search.select();
+      });
+    }
+
+    trigger.addEventListener('click', () => {
+      if (trigger.getAttribute('aria-expanded') === 'true') closeMenu();
+      else openMenu();
+    });
+    trigger.addEventListener('keydown', (event) => {
+      if (!['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) return;
+      event.preventDefault();
+      openMenu();
+    });
+    search.addEventListener('input', () => renderOptions(search.value));
+    search.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeMenu(true);
+        return;
+      }
+      if (event.key !== 'ArrowDown') return;
+      event.preventDefault();
+      optionButtons()[0]?.focus();
+    });
+    document.addEventListener('click', (event) => {
+      if (!select.contains(event.target as Node)) closeMenu();
+    });
+    input.addEventListener('app-timezone-picker:reset', () => {
+      search.value = '';
+      syncSelection(detected, false);
+      renderOptions();
+    });
+    input.addEventListener('app-timezone-picker:sync', () => {
+      const restoredTimezone = timezoneRecords.some((record) => record.timezone === input.value)
+        ? input.value
+        : detected;
+      search.value = '';
+      syncSelection(restoredTimezone, false);
+      renderOptions();
+    });
+
+    syncSelection(detected, false);
+    renderOptions();
+  });
+</script>
+
+<style>
+  .timezone-field { position: relative; display: flex; flex-direction: column; grid-column: 1 / -1; min-width: 0; }
+  label { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--s2); }
+  label > span[aria-hidden='true'] { color: var(--pink); }
+  .native-timezone { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  .timezone-select { position: relative; }
+  .timezone-trigger {
+    display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 50px;
+    border: 2px solid var(--black); border-radius: var(--r-md); background: var(--bg-white); color: var(--text);
+    padding: 0.7rem var(--s3); font: inherit; text-align: left; outline: none; cursor: pointer;
+  }
+  .timezone-trigger:focus-visible { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232, 17, 127, 0.13); }
+  .timezone-trigger[aria-invalid='true'] { border-color: #be123c; box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.12); }
+  .timezone-value { display: flex; flex-direction: column; min-width: 0; }
+  .timezone-value strong { overflow: hidden; color: var(--text); font-size: var(--text-sm); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+  .timezone-value small { overflow: hidden; color: var(--text-muted); font-size: 0.6875rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
+  .timezone-chevron { flex: 0 0 auto; width: 20px; height: 20px; stroke: var(--pink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
+  .timezone-select.is-open .timezone-chevron { transform: rotate(180deg); }
+  .timezone-menu {
+    position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
+    border: 2px solid var(--black); border-radius: var(--r-md); background: var(--bg-white); box-shadow: var(--shadow-solid);
+    padding: var(--s2); 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);
+  }
+  .timezone-menu.is-visible { opacity: 1; transform: translateY(0) scale(1); }
+  .timezone-search-wrap { position: relative; display: flex; align-items: center; }
+  .timezone-search-wrap > svg { position: absolute; left: var(--s3); width: 18px; height: 18px; stroke: var(--text-muted); stroke-width: 1.8; pointer-events: none; }
+  .timezone-search {
+    width: 100%; min-height: 42px; border: 1px solid var(--border-light); border-radius: calc(var(--r-md) - 2px);
+    background: var(--yellow-bg); color: var(--text); font: inherit; font-size: var(--text-sm); padding: 0.6rem var(--s3) 0.6rem 2.5rem; outline: none;
+  }
+  .timezone-search:focus { border-color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink); }
+  .timezone-search::-webkit-search-cancel-button { cursor: pointer; }
+  .timezone-menu-meta { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s2) var(--s1); color: var(--text-muted); font-size: 0.6875rem; }
+  .timezone-options { display: grid; gap: 2px; max-height: min(272px, 38vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--pink) var(--yellow-bg); }
+  :global(.timezone-option) {
+    display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 48px;
+    border-radius: calc(var(--r-md) - 2px); padding: 0.5rem var(--s3); color: var(--text-mid); font: inherit; 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);
+  }
+  :global(.timezone-option:hover), :global(.timezone-option:focus-visible) { color: var(--text); background: var(--yellow-bg); outline: 2px solid var(--pink); outline-offset: -2px; }
+  :global(.timezone-option[aria-selected='true']) { color: var(--text); background: var(--yellow); }
+  :global(.timezone-option:active) { transform: scale(0.985); }
+  :global(.timezone-option-label) { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
+  :global(.timezone-option-label strong) { flex: 0 0 auto; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
+  :global(.timezone-option-label small) { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+  :global(.timezone-option-offset) { flex: 0 0 auto; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+  .timezone-empty { padding: var(--s5) var(--s3); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
+  .timezone-hint { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--s2); }
+  .field-error { min-height: 1.2em; color: #be123c; font-size: var(--text-xs); font-weight: 650; line-height: 1.2; margin-top: var(--s1); }
+  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  @media (max-width: 600px) {
+    .timezone-menu-meta span:last-child { display: none; }
+    .timezone-menu { right: 0; }
+    :global(.timezone-option-label small) { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .timezone-chevron, .timezone-menu, :global(.timezone-option) { transition: none; }
+  }
+</style>
diff --git a/src/components/FooterSection.astro b/src/components/FooterSection.astro
index 623f2f9..92ae5c4 100644
--- a/src/components/FooterSection.astro
+++ b/src/components/FooterSection.astro
@@ -21,12 +21,12 @@ const year = new Date().getFullYear();
     <nav class="footer-nav" aria-label="Footer links">
       <p class="footer-nav-label">Links</p>
       <ul>
-        <li><a href="#community">Community</a></li>
-        <li><a href="#programs">Programs</a></li>
-        <li><a href="#meetups">Meetups</a></li>
-        <li><a href="#admins">Admins</a></li>
-        <li><a href="#partners">Partners</a></li>
-        <li><a href="#donate">Support Us</a></li>
+        <li><a href="/#community">Community</a></li>
+        <li><a href="/#programs">Programs</a></li>
+        <li><a href="/events/">Events</a></li>
+        <li><a href="/#admins">Admins</a></li>
+        <li><a href="/#partners">Partners</a></li>
+        <li><a href="/#donate">Support Us</a></li>
       </ul>
     </nav>
 
diff --git a/src/components/MeetupsSection.astro b/src/components/MeetupsSection.astro
index 3601e2e..090773f 100644
--- a/src/components/MeetupsSection.astro
+++ b/src/components/MeetupsSection.astro
@@ -34,15 +34,15 @@ const statusConfig = {
 };
 ---
 
-<section class="section" id="meetups">
+<section class="section" id="events">
   <div class="container">
 
     <div class="meetups-header">
-      <span class="eyebrow">Meetups</span>
+      <span class="eyebrow">Events</span>
       <div class="meetups-title-row">
         <h2 class="heading-serif meetups-heading">Where we show up</h2>
-        <a href="/meetups/" class="btn btn-outline meetups-all-btn">
-          All Meetups →
+        <a href="/events/" class="btn btn-outline meetups-all-btn">
+          All Events →
         </a>
       </div>
     </div>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 68a4950..fbb22c4 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,5 +1,9 @@
 ---
-interface Props { slackUrl: string; paystackUrl: string; }
+interface Props {
+  slackUrl: string;
+  paystackUrl: string;
+}
+
 const { slackUrl, paystackUrl } = Astro.props;
 ---
 
@@ -10,9 +14,9 @@ const { slackUrl, paystackUrl } = Astro.props;
     </a>
 
     <nav class="navbar-links" aria-label="Primary">
-      <a href="#community">Community</a>
-      <a href="#programs">Programs</a>
-      <a href="#meetups">Meetups</a>
+      <a href="/#community">Community</a>
+      <a href="/#programs">Programs</a>
+      <a href="/#events">Events</a>
     </nav>
 
     <div class="navbar-actions">
@@ -31,9 +35,9 @@ const { slackUrl, paystackUrl } = Astro.props;
 
   <div class="mobile-menu" id="mobile-menu" aria-hidden="true">
     <nav>
-      <a href="#community">Community</a>
-      <a href="#programs">Programs</a>
-      <a href="#meetups">Meetups</a>
+      <a href="/#community">Community</a>
+      <a href="/#programs">Programs</a>
+      <a href="/#events">Events</a>
     </nav>
     <div class="mobile-actions">
       <a href={paystackUrl} target="_blank" rel="noopener noreferrer" class="btn btn-outline">Support Us</a>
@@ -94,6 +98,11 @@ const { slackUrl, paystackUrl } = Astro.props;
     align-items: center;
     gap: var(--s3);
   }
+  .navbar-actions .btn { padding-inline: var(--s4); }
+  @media (hover: hover) and (pointer: fine) {
+    .navbar-actions .btn:hover { transform: translateX(-2px); }
+    .navbar-actions .btn:active { transform: translate(0, 0); }
+  }
 
   .burger {
     display: none;
@@ -138,7 +147,7 @@ const { slackUrl, paystackUrl } = Astro.props;
   }
   .mobile-menu.is-open { display: block; }
 
-  @media (max-width: 700px) {
+  @media (max-width: 960px) {
     .navbar-links, .navbar-actions { display: none; }
     .burger { display: flex; }
   }
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 97400b2..85072ea 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -5,10 +5,14 @@ import FooterSection from '../components/FooterSection.astro';
 interface Props {
   title?: string;
   description?: string;
+  showFooter?: boolean;
+  noindex?: boolean;
 }
 const {
   title = "DevCongress | Africa's home for builders",
   description = "DevCongress is a tech community where developers, designers, founders, and makers across Africa connect, grow, and build together.",
+  showFooter = true,
+  noindex = false,
 } = Astro.props;
 
 const siteEntries = await getCollection('site');
@@ -22,7 +26,7 @@ const site        = siteEntries[0]!.data;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title}</title>
     <meta name="description" content={description} />
-    <meta name="robots" content="index, follow" />
+    <meta name="robots" content={noindex ? 'noindex, nofollow' : 'index, follow'} />
     <meta name="theme-color" content="#F5F2E8" />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
@@ -41,7 +45,7 @@ const site        = siteEntries[0]!.data;
   </head>
   <body>
     <slot />
-    <FooterSection socials={site.socials} />
+    {showFooter && <FooterSection socials={site.socials} />}
   </body>
 </html>
 
diff --git a/src/lib/events.ts b/src/lib/events.ts
new file mode 100644
index 0000000..124c895
--- /dev/null
+++ b/src/lib/events.ts
@@ -0,0 +1,316 @@
+import { z } from "zod";
+import { getMeetups } from "./meetups";
+
+export const EVENTS_MANAGEMENT_ORIGIN = new URL("https://em.devcongress.org");
+export const EVENT_SUBMISSIONS_API_URL = new URL(
+  "/api/public/event-submissions",
+  EVENTS_MANAGEMENT_ORIGIN,
+).toString();
+export const EVENT_SUBMISSION_TURNSTILE_ACTION = "event_submission";
+export const EVENT_SUBMISSION_TURNSTILE_SITE_KEY = "0x4AAAAAADov8n7eB5-btoDw";
+
+const EVENTS_API_PATH = "/api/public/events";
+const EVENTS_API_TIMEOUT_MS = 8_000;
+const MAX_EVENTS_RESPONSE_BYTES = 2 * 1024 * 1024;
+
+const publicHttpUrlSchema = z
+  .string()
+  .trim()
+  .max(2_048)
+  .refine((value) => {
+    try {
+      const url = new URL(value);
+      return (
+        (url.protocol === "https:" || url.protocol === "http:") &&
+        !url.username &&
+        !url.password &&
+        Boolean(url.hostname)
+      );
+    } catch {
+      return false;
+    }
+  }, "Expected a public HTTP(S) URL");
+
+const publicWebsiteUrlSchema = z
+  .string()
+  .trim()
+  .max(2_048)
+  .refine(
+    (value) =>
+      (value.startsWith("/") && !value.startsWith("//")) ||
+      publicHttpUrlSchema.safeParse(value).success,
+    "Expected a relative website path or public HTTP(S) URL",
+  );
+
+const eventFormatSchema = z.enum([
+  "meetup",
+  "conference",
+  "workshop",
+  "hackathon",
+  "webinar",
+  "other",
+]);
+
+const publicEventSchema = z
+  .object({
+    id: z.string().trim().min(1).max(300),
+    slug: z
+      .string()
+      .trim()
+      .min(1)
+      .max(240)
+      .regex(/^[a-zA-Z0-9][a-zA-Z0-9_-]*$/),
+    title: z.string().trim().min(2).max(500),
+    summary: z.string().trim().min(10).max(20_000),
+    ownership: z.enum(["devcongress", "external"]),
+    series: z.enum(["monthly", "quarterly", "special"]).nullable(),
+    format: eventFormatSchema,
+    source: z.enum(["internal", "public_submission"]),
+    moderation_status: z.literal("approved").nullable(),
+    publication_status: z.literal("published"),
+    classification: z.enum(["official", "community"]),
+    starts_at: z
+      .string()
+      .refine(isValidDateTime, "Expected a valid start datetime"),
+    ends_at: z
+      .string()
+      .refine(isValidDateTime, "Expected a valid end datetime"),
+    timezone: z.string().trim().min(1).max(100),
+    location_type: z.enum(["in_person", "online", "hybrid"]),
+    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(),
+    registration_url: publicWebsiteUrlSchema.nullable(),
+    organizer_name: z.string().trim().min(1).max(300),
+    organizer_website: publicHttpUrlSchema.nullable(),
+    cover_url: publicWebsiteUrlSchema.nullable(),
+    updated_at: z
+      .string()
+      .refine(isValidDateTime, "Expected a valid updated datetime"),
+  })
+  .refine(
+    ({ starts_at, ends_at }) =>
+      new Date(ends_at).getTime() > new Date(starts_at).getTime(),
+    { message: "Event end must be after its start", path: ["ends_at"] },
+  );
+
+const publicEventsResponseSchema = z
+  .object({
+    data: z.array(publicEventSchema).max(500),
+    meta: z.object({
+      source: z.literal("events-management"),
+      version: z.literal(1),
+    }),
+  })
+  .superRefine(({ data }, context) => {
+    const slugs = new Set<string>();
+    data.forEach((event, index) => {
+      if (slugs.has(event.slug)) {
+        context.addIssue({
+          code: "custom",
+          message: "Event slugs must be unique",
+          path: ["data", index, "slug"],
+        });
+      }
+      slugs.add(event.slug);
+    });
+  });
+
+type PublicEvent = z.infer<typeof publicEventSchema>;
+export type EventFormat = z.infer<typeof eventFormatSchema>;
+export type EventLocationType = "in_person" | "online" | "hybrid";
+export type EventClassification = "official" | "community";
+
+export interface WebsiteEvent {
+  id: string;
+  slug: string;
+  title: string;
+  summary: string;
+  ownership: "devcongress" | "external";
+  format: EventFormat;
+  classification: EventClassification;
+  startsAt: string;
+  endsAt: string;
+  timezone: string;
+  locationType: EventLocationType;
+  venueName: string | null;
+  venueAddress: string | null;
+  onlineUrl: string | null;
+  registrationUrl: string | null;
+  organizerName: string;
+  organizerWebsite: string | null;
+  coverUrl: string | null;
+  detailsUrl: string | null;
+}
+
+let eventsPromise: Promise<WebsiteEvent[]> | undefined;
+
+export async function getEvents(): Promise<WebsiteEvent[]> {
+  eventsPromise ??= loadEvents();
+  return eventsPromise;
+}
+
+export function sortEventsBySoonest(events: WebsiteEvent[]): WebsiteEvent[] {
+  const now = Date.now();
+  return [...events].sort((a, b) => {
+    const aTime = new Date(a.startsAt).getTime();
+    const bTime = new Date(b.startsAt).getTime();
+    const aUpcoming = new Date(a.endsAt).getTime() >= now;
+    const bUpcoming = new Date(b.endsAt).getTime() >= now;
+
+    if (aUpcoming !== bUpcoming) return aUpcoming ? -1 : 1;
+    return aUpcoming ? aTime - bTime : bTime - aTime;
+  });
+}
+
+async function loadEvents(): Promise<WebsiteEvent[]> {
+  try {
+    return await fetchRemoteEvents();
+  } catch (error) {
+    console.warn(
+      `[events] Public events feed unavailable; building an official-events fallback from meetups. ${getErrorMessage(error)}`,
+    );
+    return fetchMeetupFallback();
+  }
+}
+
+async function fetchRemoteEvents(): Promise<WebsiteEvent[]> {
+  const response = await fetch(
+    new URL(EVENTS_API_PATH, EVENTS_MANAGEMENT_ORIGIN),
+    {
+      headers: { accept: "application/json" },
+      redirect: "error",
+      signal: AbortSignal.timeout(EVENTS_API_TIMEOUT_MS),
+    },
+  );
+
+  if (!response.ok) throw new Error(`Events API returned ${response.status}`);
+
+  const contentType = response.headers.get("content-type") ?? "";
+  if (!contentType.toLowerCase().includes("application/json")) {
+    throw new Error("Events API did not return JSON");
+  }
+
+  const declaredLength = Number(response.headers.get("content-length"));
+  if (
+    Number.isFinite(declaredLength) &&
+    declaredLength > MAX_EVENTS_RESPONSE_BYTES
+  ) {
+    throw new Error("Events API response exceeded the size limit");
+  }
+
+  const rawBody = await readResponseBody(response);
+  let decoded: unknown;
+  try {
+    decoded = JSON.parse(rawBody);
+  } catch {
+    throw new Error("Events API returned invalid JSON");
+  }
+
+  const parsed = publicEventsResponseSchema.safeParse(decoded);
+  if (!parsed.success)
+    throw new Error("Events API response did not match contract version 1");
+
+  console.info(
+    `[events] Loaded ${parsed.data.data.length} published events from ${EVENTS_MANAGEMENT_ORIGIN.origin}.`,
+  );
+  return parsed.data.data.map(mapPublicEvent);
+}
+
+async function fetchMeetupFallback(): Promise<WebsiteEvent[]> {
+  const meetups = await getMeetups();
+  return meetups.map((meetup) => ({
+    id: meetup.id,
+    slug: meetup.id,
+    title: meetup.data.name,
+    summary: meetup.data.description,
+    ownership: "devcongress",
+    format: "meetup",
+    classification: "official",
+    startsAt: meetup.data.start,
+    endsAt: meetup.data.end,
+    timezone: "Africa/Accra",
+    locationType: meetup.data.stream_url
+      ? meetup.data.location.name
+        ? "hybrid"
+        : "online"
+      : "in_person",
+    venueName: meetup.data.location.name,
+    venueAddress: meetup.data.location.label ?? null,
+    onlineUrl: meetup.data.stream_url ?? null,
+    registrationUrl: meetup.data.registration_url ?? null,
+    organizerName: "DevCongress",
+    organizerWebsite: "https://devcongress.org",
+    coverUrl: meetup.data.cover,
+    detailsUrl: `/meetups/${meetup.id}/`,
+  }));
+}
+
+function mapPublicEvent(event: PublicEvent): WebsiteEvent {
+  return {
+    id: event.id,
+    slug: event.slug,
+    title: event.title,
+    summary: event.summary,
+    ownership: event.ownership,
+    format: event.format,
+    classification: event.classification,
+    startsAt: event.starts_at,
+    endsAt: event.ends_at,
+    timezone: event.timezone,
+    locationType: event.location_type,
+    venueName: event.venue_name,
+    venueAddress: event.venue_address,
+    onlineUrl: event.online_url,
+    registrationUrl: resolveOptionalWebsiteUrl(event.registration_url),
+    organizerName: event.organizer_name,
+    organizerWebsite: event.organizer_website,
+    coverUrl: resolveOptionalWebsiteUrl(event.cover_url),
+    detailsUrl:
+      event.ownership === "devcongress" ? `/meetups/${event.slug}/` : null,
+  };
+}
+
+function resolveOptionalWebsiteUrl(value: string | null): string | null {
+  return value
+    ? value.startsWith("/")
+      ? new URL(value, EVENTS_MANAGEMENT_ORIGIN).toString()
+      : value
+    : null;
+}
+
+async function readResponseBody(response: Response): Promise<string> {
+  if (!response.body) throw new Error("Events API returned an empty response");
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let receivedBytes = 0;
+  let rawBody = "";
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      receivedBytes += value.byteLength;
+      if (receivedBytes > MAX_EVENTS_RESPONSE_BYTES) {
+        await reader.cancel();
+        throw new Error("Events API response exceeded the size limit");
+      }
+      rawBody += decoder.decode(value, { stream: true });
+    }
+    return rawBody + decoder.decode();
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+function isValidDateTime(value: string): boolean {
+  return Number.isFinite(new Date(value).getTime());
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof DOMException && error.name === "TimeoutError") {
+    return `The request exceeded ${EVENTS_API_TIMEOUT_MS / 1_000} seconds.`;
+  }
+  return error instanceof Error ? error.message : "Unknown feed error";
+}
diff --git a/src/lib/features.ts b/src/lib/features.ts
new file mode 100644
index 0000000..fee6e39
--- /dev/null
+++ b/src/lib/features.ts
@@ -0,0 +1,7 @@
+function isEnabled(value: string | undefined): boolean {
+  return value?.trim().toLowerCase() === 'true';
+}
+
+export const EVENT_SUBMISSIONS_ENABLED = isEnabled(
+  import.meta.env.PUBLIC_EVENT_SUBMISSIONS_ENABLED,
+);
diff --git a/src/pages/events/index.astro b/src/pages/events/index.astro
new file mode 100644
index 0000000..c87380a
--- /dev/null
+++ b/src/pages/events/index.astro
@@ -0,0 +1,215 @@
+---
+import Base from '../../layouts/Base.astro';
+import { getEvents, sortEventsBySoonest, type WebsiteEvent } from '../../lib/events';
+
+const events = sortEventsBySoonest(await getEvents()).map((event) => ({
+  ...event,
+  status: getEventStatus(event),
+}));
+
+function getEventStatus(event: WebsiteEvent): 'upcoming' | 'live' | 'past' {
+  const now = new Date();
+  const start = new Date(event.startsAt);
+  const end = new Date(event.endsAt);
+  return now < start ? 'upcoming' : now <= end ? 'live' : 'past';
+}
+
+function formatDate(iso: string, timezone: string): string {
+  return new Date(iso).toLocaleDateString('en-GB', {
+    day: 'numeric', month: 'long', year: 'numeric', timeZone: timezone,
+  });
+}
+
+function formatLabel(value: string): string {
+  if (value === 'conference') return 'Conference / congress';
+  return value.replaceAll('_', ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function getLocation(event: WebsiteEvent): string {
+  if (event.locationType === 'online') return 'Online';
+  if (event.locationType === 'hybrid') return event.venueName ? `${event.venueName} + online` : 'Hybrid';
+  return event.venueName ?? 'In person';
+}
+
+function getEventUrl(event: WebsiteEvent): string | null {
+  return event.detailsUrl ?? event.registrationUrl ?? event.onlineUrl;
+}
+
+const statusConfig = {
+  upcoming: { label: 'Upcoming', cta: 'Register →' },
+  live: { label: '● Live', cta: 'Follow live →' },
+  past: { label: 'Past', cta: 'View event →' },
+};
+---
+
+<Base
+  title="Events — DevCongress"
+  description="DevCongress events, upcoming, live, and past. Find community meetups, workshops, hackathons, and conferences."
+>
+  <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="/" class="mnav-back">← Home</a>
+    </div>
+  </header>
+
+  <main>
+    <div class="page-header">
+      <div class="container">
+        <span class="eyebrow">Events</span>
+        <h1 class="heading-serif page-title">Where we show up</h1>
+        <p class="page-sub">
+          {events.length} event{events.length !== 1 ? 's' : ''} and counting.
+        </p>
+      </div>
+    </div>
+
+    <div class="container events-body">
+      <ul class="events-grid">
+        {events.map((event) => {
+          const config = statusConfig[event.status];
+          const eventUrl = getEventUrl(event);
+          const external = eventUrl?.startsWith('http');
+          return (
+            <li class="event-card card">
+              {eventUrl ? (
+                <a
+                  href={eventUrl}
+                  class="event-cover-link"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  target={external ? '_blank' : undefined}
+                  rel={external ? 'noopener noreferrer' : undefined}
+                >
+                  <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>
+              )}
+              <div class="event-body">
+                <div class="event-meta">
+                  <time datetime={event.startsAt}>{formatDate(event.startsAt, event.timezone)}</time>
+                  <span class="event-location">{getLocation(event)}</span>
+                </div>
+                <h2 class="heading-serif event-name">
+                  {eventUrl ? (
+                    <a
+                      href={eventUrl}
+                      target={external ? '_blank' : undefined}
+                      rel={external ? 'noopener noreferrer' : undefined}
+                    >
+                      {event.title}
+                    </a>
+                  ) : event.title}
+                </h2>
+                <p class="event-desc">{event.summary}</p>
+                {eventUrl && (
+                  <a
+                    href={eventUrl}
+                    class="btn btn-outline event-cta"
+                    target={external ? '_blank' : undefined}
+                    rel={external ? 'noopener noreferrer' : undefined}
+                  >
+                    {config.cta}
+                  </a>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  </main>
+</Base>
+
+<style>
+  .mnav {
+    position: sticky; top: 0; z-index: 100;
+    background: var(--bg); border-bottom: 2px solid var(--black);
+    padding-block: var(--s4);
+  }
+  .mnav-inner { display: flex; align-items: center; justify-content: space-between; }
+  .mnav-back { font-size: var(--text-sm); font-weight: 500; color: var(--text-mid); transition: color 150ms; }
+  .mnav-back:hover { color: var(--pink); }
+
+  .page-header {
+    padding-block: var(--s9);
+    border-bottom: 2px solid var(--black);
+    background: var(--bg-white);
+  }
+  .page-title { font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl)); margin-bottom: var(--s3); }
+  .page-sub { font-size: var(--text-lg); color: var(--text-mid); }
+
+  .events-body { padding-block: var(--s9); }
+  .events-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--s5);
+  }
+
+  .event-card { overflow: hidden; display: flex; flex-direction: column; }
+  .event-cover-link { display: block; }
+  .event-cover {
+    width: 100%; aspect-ratio: 16/9;
+    background-color: var(--border-light);
+    position: relative; display: flex;
+    align-items: flex-end; justify-content: space-between;
+    padding: var(--s3); transition: opacity 200ms ease;
+  }
+  .event-cover-image {
+    position: absolute; inset: 0;
+    width: 100%; height: 100%; object-fit: cover;
+  }
+  .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;
+    border: 2px solid var(--black); border-radius: var(--r-sm);
+    padding: 2px var(--s2);
+  }
+  .status-upcoming { background: var(--yellow); color: var(--black); }
+  .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);
+  }
+  .event-meta {
+    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);
+  }
+  .event-location { color: var(--pink); }
+  .event-name { font-size: var(--text-xl); line-height: var(--leading-snug); }
+  .event-name a:hover { color: var(--pink); }
+  .event-desc {
+    font-size: var(--text-sm); color: var(--text-mid);
+    line-height: var(--leading-body);
+    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); }
+
+  @media (max-width: 640px) { .events-grid { grid-template-columns: 1fr; } }
+  @media (prefers-reduced-motion: reduce) { .mnav-back, .event-cover { transition: none; } }
+</style>
diff --git a/src/pages/events/submit.astro b/src/pages/events/submit.astro
new file mode 100644
index 0000000..aab6e92
--- /dev/null
+++ b/src/pages/events/submit.astro
@@ -0,0 +1,1652 @@
+---
+import Base from '../../layouts/Base.astro';
+import AppDateTimePicker from '../../components/AppDateTimePicker.astro';
+import AppTimezonePicker from '../../components/AppTimezonePicker.astro';
+import {
+  EVENT_SUBMISSIONS_API_URL,
+  EVENT_SUBMISSION_TURNSTILE_ACTION,
+  EVENT_SUBMISSION_TURNSTILE_SITE_KEY,
+} from '../../lib/events';
+import { EVENT_SUBMISSIONS_ENABLED } from '../../lib/features';
+
+if (!EVENT_SUBMISSIONS_ENABLED) {
+  return Astro.redirect('/events/');
+}
+---
+
+<Base
+  title="Create Event | DevCongress"
+  description="Submit a technology event for review and inclusion in the DevCongress community calendar."
+  showFooter={false}
+  noindex
+>
+  <header class="page-nav">
+    <div class="container page-nav-inner">
+      <a href="/" class="page-logo" aria-label="DevCongress home" data-confirm-navigation>
+        <img src="/images/logo.png" alt="DevCongress" height="36" />
+      </a>
+    </div>
+  </header>
+
+  <main>
+    <section class="form-hero">
+      <div class="container form-hero-inner">
+        <span class="hero-kicker">Community calendar</span>
+        <h1>
+          Bring people<br />
+          together.
+        </h1>
+        <p>
+          Planning a meetup, workshop, hackathon, or conference? Share the essentials for the
+          community calendar.
+        </p>
+      </div>
+    </section>
+
+    <section class="container form-layout">
+      <div class="form-shell card">
+        <form
+          id="event-submission-form"
+          data-endpoint={EVENT_SUBMISSIONS_API_URL}
+          data-turnstile-action={EVENT_SUBMISSION_TURNSTILE_ACTION}
+          novalidate
+        >
+          <nav class="step-progress" aria-label="Event submission progress">
+            <ol>
+              <li class="is-current" data-step-indicator="0" aria-current="step">
+                <span class="step-dot"><span class="step-number">1</span><span class="step-check" hidden aria-label="Completed"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3.25 8.25 3 3 6.5-6.5" /></svg></span></span>
+                <span class="step-label">Event</span>
+              </li>
+              <li data-step-indicator="1">
+                <span class="step-dot"><span class="step-number">2</span><span class="step-check" hidden aria-label="Completed"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3.25 8.25 3 3 6.5-6.5" /></svg></span></span>
+                <span class="step-label">Place &amp; time</span>
+              </li>
+              <li data-step-indicator="2">
+                <span class="step-dot"><span class="step-number">3</span><span class="step-check" hidden aria-label="Completed"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3.25 8.25 3 3 6.5-6.5" /></svg></span></span>
+                <span class="step-label">Contact</span>
+              </li>
+            </ol>
+          </nav>
+
+          <div class="step-panels">
+          <div class="form-section" data-step="0">
+            <div class="section-heading">
+              <div>
+                <h2 tabindex="-1">Tell us about it</h2>
+                <p>The details people use to decide if the event is for them.</p>
+              </div>
+              <div id="draft-restored-notice" class="draft-notice" hidden>
+                <span>Draft restored</span>
+                <span class="draft-notice-divider" aria-hidden="true">·</span>
+                <button
+                  type="button"
+                  id="discard-draft"
+                  class="draft-discard"
+                  aria-label="Discard restored draft and start over"
+                >Start over</button>
+              </div>
+            </div>
+
+            <div class="field full-field">
+              <label for="title">Event name <span aria-hidden="true">*</span></label>
+              <input id="title" name="title" type="text" minlength="3" maxlength="160" autocomplete="off" required />
+              <p class="field-error" id="title-error"></p>
+            </div>
+
+            <div class="field full-field" id="summary-field">
+              <label for="summary">Short description <span aria-hidden="true">*</span></label>
+              <textarea id="summary" name="summary" rows="4" minlength="20" data-character-limit="1200" autocomplete="off" required></textarea>
+              <div class="field-hint-row">
+                <p>What will happen, and who should attend?</p>
+                <span class="character-count" aria-live="polite"><output id="summary-count">0</output>/1200</span>
+              </div>
+              <p class="field-error" id="summary-error"></p>
+            </div>
+
+            <div class="field full-field">
+              <label for="format">Event type <span aria-hidden="true">*</span></label>
+              <select id="format" name="format" class="native-select" required tabindex="-1" aria-hidden="true">
+                <option value="">Choose one</option>
+                <option value="meetup">Meetup</option>
+                <option value="conference">Conference</option>
+                <option value="workshop">Workshop</option>
+                <option value="hackathon">Hackathon</option>
+                <option value="webinar">Webinar</option>
+                <option value="other">Other</option>
+              </select>
+              <div class="app-select" data-app-select>
+                <button
+                  type="button"
+                  id="format-trigger"
+                  class="app-select-trigger"
+                  role="combobox"
+                  aria-controls="format-options"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-required="true"
+                >
+                  <span data-select-label>Choose one</span>
+                  <span class="app-select-chevron" aria-hidden="true">⌄</span>
+                </button>
+                <div id="format-options" class="app-select-menu" role="listbox" aria-label="Event type" hidden>
+                  <button type="button" role="option" aria-selected="false" data-select-value="meetup">Meetup</button>
+                  <button type="button" role="option" aria-selected="false" data-select-value="conference">Conference</button>
+                  <button type="button" role="option" aria-selected="false" data-select-value="workshop">Workshop</button>
+                  <button type="button" role="option" aria-selected="false" data-select-value="hackathon">Hackathon</button>
+                  <button type="button" role="option" aria-selected="false" data-select-value="webinar">Webinar</button>
+                  <button type="button" role="option" aria-selected="false" data-select-value="other">Other</button>
+                </div>
+              </div>
+              <p class="field-error" id="format-error"></p>
+            </div>
+
+            <div class="step-actions">
+              <span class="sr-only" data-step-status="0" aria-live="polite">Complete the required event details to continue.</span>
+              <button type="button" class="btn btn-primary step-next" data-next-step="1" disabled>
+                Continue to place &amp; time <span aria-hidden="true">→</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="form-section" data-step="1" hidden>
+            <div class="section-heading">
+              <div>
+                <h2 tabindex="-1">When and where</h2>
+                <p>Times are saved in your detected time zone.</p>
+              </div>
+            </div>
+
+            <div class="field-grid">
+              <AppDateTimePicker id="starts_at" name="starts_at" label="Starts" required />
+              <AppDateTimePicker id="ends_at" name="ends_at" label="Ends" required />
+            </div>
+            <AppTimezonePicker
+              id="timezone"
+              name="timezone"
+              label="Event time zone"
+              required
+            />
+
+            <fieldset class="location-choice">
+              <legend>How can people attend? <span aria-hidden="true">*</span></legend>
+              <div class="segmented-control">
+                <label><input type="radio" name="location_type" value="in_person" checked /> <span>In person</span></label>
+                <label><input type="radio" name="location_type" value="online" /> <span>Online</span></label>
+                <label><input type="radio" name="location_type" value="hybrid" /> <span>Hybrid</span></label>
+              </div>
+              <p class="field-error" id="location_type-error"></p>
+            </fieldset>
+
+            <div id="venue-fields" class="conditional-fields">
+              <div class="field">
+                <label for="venue_name">Venue name <span aria-hidden="true">*</span></label>
+                <input id="venue_name" name="venue_name" type="text" maxlength="200" autocomplete="organization" />
+                <p class="field-error" id="venue_name-error"></p>
+              </div>
+              <div class="field">
+                <label for="venue_address">Venue address <span class="optional">Optional</span></label>
+                <input id="venue_address" name="venue_address" type="text" maxlength="300" autocomplete="street-address" />
+                <p class="field-error" id="venue_address-error"></p>
+              </div>
+            </div>
+
+            <div id="online-fields" class="conditional-fields" hidden>
+              <div class="field full-field">
+                <label for="online_url">Online event link <span aria-hidden="true">*</span></label>
+                <input id="online_url" name="online_url" type="url" maxlength="2048" inputmode="url" autocomplete="url" autocapitalize="none" spellcheck="false" placeholder="https://example.com/…" />
+                <p class="field-hint">A meeting, stream, or virtual venue link.</p>
+                <p class="field-error" id="online_url-error"></p>
+              </div>
+            </div>
+
+            <div class="field full-field">
+              <label for="registration_url">Registration or event page <span aria-hidden="true">*</span> <span class="optional">Required unless an online link is provided</span></label>
+              <input id="registration_url" name="registration_url" type="url" maxlength="2048" inputmode="url" autocomplete="url" autocapitalize="none" spellcheck="false" placeholder="https://example.com/…" />
+              <p class="field-hint">Provide this or an online event link so people know where to join.</p>
+              <p class="field-error" id="registration_url-error"></p>
+            </div>
+
+            <div class="step-actions">
+              <button type="button" class="step-back" data-previous-step="0">← Back</button>
+              <span class="sr-only" data-step-status="1" aria-live="polite">Complete the required place and time details to continue.</span>
+              <button type="button" class="btn btn-primary step-next" data-next-step="2" disabled>
+                Continue to contact <span aria-hidden="true">→</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="form-section" data-step="2" hidden>
+            <div class="section-heading">
+              <div>
+                <h2 tabindex="-1">Who is organizing?</h2>
+                <p>Your email is only used to contact you about this submission.</p>
+              </div>
+            </div>
+
+            <div class="field-grid">
+              <div class="field">
+                <label for="organizer_name">Organizer name <span aria-hidden="true">*</span></label>
+                <input id="organizer_name" name="organizer_name" type="text" minlength="2" maxlength="160" autocomplete="organization" required />
+                <p class="field-error" id="organizer_name-error"></p>
+              </div>
+              <div class="field">
+                <label for="organizer_email">Contact email <span aria-hidden="true">*</span></label>
+                <input id="organizer_email" name="organizer_email" type="email" maxlength="254" autocomplete="email" autocapitalize="none" spellcheck="false" required />
+                <p class="field-error" id="organizer_email-error"></p>
+              </div>
+            </div>
+
+            <div class="field full-field extra-details">
+              <label for="notes">Anything else our reviewer should know? <span class="optional">Optional</span></label>
+              <textarea id="notes" name="notes" rows="3" maxlength="500" autocomplete="off" placeholder="Add context that could help us review your event."></textarea>
+              <div class="notes-meta">
+                <p class="field-error" id="notes-error"></p>
+                <span class="character-count notes-count" aria-live="polite"><output id="notes-count">0</output>/500</span>
+              </div>
+            </div>
+
+            <div class="final-field-row">
+              <div class="field">
+                <label for="organizer_website">Organizer website <span class="optional">Optional</span></label>
+                <input id="organizer_website" name="organizer_website" type="url" maxlength="2048" inputmode="url" autocomplete="url" autocapitalize="none" spellcheck="false" placeholder="https://example.com/…" />
+                <p class="field-error" id="organizer_website-error"></p>
+              </div>
+
+              <div class="field verification-field">
+                <span class="verification-label" id="turnstile-label">Human check <span aria-hidden="true">*</span></span>
+                <div>
+                  <div
+                    class="cf-turnstile"
+                    aria-labelledby="turnstile-label"
+                    data-sitekey={EVENT_SUBMISSION_TURNSTILE_SITE_KEY}
+                    data-action={EVENT_SUBMISSION_TURNSTILE_ACTION}
+                    data-theme="light"
+                    data-appearance="always"
+                    tabindex="-1"
+                  ></div>
+                  <p class="field-error" id="turnstile-error" aria-live="polite"></p>
+                </div>
+              </div>
+            </div>
+
+            <div class="form-submit">
+              <div id="form-status" class="form-status" role="alert" aria-live="assertive" tabindex="-1" hidden></div>
+              <div class="final-actions">
+                <button type="button" class="step-back" data-previous-step="1">← Back</button>
+                <button type="submit" class="btn btn-primary submit-button">
+                  <span class="submit-label">Submit for review</span>
+                  <span class="submit-loading" hidden>Submitting…</span>
+                  <span aria-hidden="true">→</span>
+                </button>
+              </div>
+              <p class="submission-note">
+                By submitting, you confirm the details are accurate and that DevCongress may publish them.
+              </p>
+            </div>
+          </div>
+          </div>
+
+          <div class="trap-field" aria-hidden="true">
+            <label for="contact_website">Leave this field empty</label>
+            <input id="contact_website" name="contact_website" type="text" tabindex="-1" autocomplete="off" />
+          </div>
+        </form>
+
+        <div id="success-panel" class="success-panel" tabindex="-1" hidden>
+          <span class="success-mark" aria-hidden="true">✓</span>
+          <span class="eyebrow">Submitted for review</span>
+          <h2 class="heading-serif">Thank you for sharing.</h2>
+          <p>
+            Your event is now with the DevCongress organizers. We’ll use the email you provided if
+            we need anything else.
+          </p>
+          <div class="success-actions">
+            <a href="/events/" class="btn btn-primary">Browse events</a>
+            <button type="button" id="submit-another" class="btn btn-outline">Submit another</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <dialog
+    id="leave-form-dialog"
+    class="leave-dialog"
+    aria-labelledby="leave-dialog-title"
+    aria-describedby="leave-dialog-description"
+  >
+    <div class="leave-dialog-content">
+      <span class="leave-dialog-kicker">Unsaved event</span>
+      <h2 id="leave-dialog-title">Leave this form?</h2>
+      <p id="leave-dialog-description">
+        Your event details haven’t been submitted. If you leave now, they’ll be discarded.
+      </p>
+      <div class="leave-dialog-actions">
+        <button type="button" class="btn btn-primary" id="keep-editing" autofocus>Keep editing</button>
+        <button type="button" class="btn btn-outline" id="leave-form">Leave form</button>
+      </div>
+    </div>
+  </dialog>
+  <p class="sr-only" id="draft-status" aria-live="polite"></p>
+
+  <script id="turnstile-script" is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
+</Base>
+
+<script>
+  interface SubmissionErrorResponse {
+    error?: {
+      code?: string;
+      message?: string;
+      field_errors?: Record<string, string>;
+    };
+  }
+
+  interface TurnstileApi {
+    render: (container: HTMLElement, options: Record<string, string | (() => void)>) => string;
+    reset: (widget?: string) => void;
+  }
+
+  declare global {
+    interface Window { turnstile?: TurnstileApi; }
+  }
+
+  const DRAFT_STORAGE_KEY = 'devcongress:event-submission-draft:v1';
+  const DRAFT_TTL_MS = 24 * 60 * 60 * 1000;
+  const DRAFT_SAVE_DELAY_MS = 250;
+  const DRAFT_FIELD_NAMES = [
+    'title', 'summary', 'format', 'starts_at', 'ends_at', 'timezone', 'location_type',
+    'venue_name', 'venue_address', 'online_url', 'registration_url', 'organizer_name',
+    'organizer_email', 'organizer_website', 'notes',
+  ] as const;
+  type DraftFieldName = typeof DRAFT_FIELD_NAMES[number];
+  interface EventSubmissionDraft {
+    version: 1;
+    savedAt: number;
+    fields: Partial<Record<DraftFieldName, string>>;
+  }
+
+  const form = document.querySelector<HTMLFormElement>('#event-submission-form');
+  const successPanel = document.querySelector<HTMLElement>('#success-panel');
+  const statusPanel = document.querySelector<HTMLElement>('#form-status');
+  const submitButton = form?.querySelector<HTMLButtonElement>('.submit-button');
+  const submitLabel = form?.querySelector<HTMLElement>('.submit-label');
+  const submitLoading = form?.querySelector<HTMLElement>('.submit-loading');
+  const startsInput = document.querySelector<HTMLInputElement>('#starts_at');
+  const endsInput = document.querySelector<HTMLInputElement>('#ends_at');
+  const summaryInput = document.querySelector<HTMLTextAreaElement>('#summary');
+  const summaryField = document.querySelector<HTMLElement>('#summary-field');
+  const summaryCount = document.querySelector<HTMLOutputElement>('#summary-count');
+  const notesInput = document.querySelector<HTMLTextAreaElement>('#notes');
+  const notesCount = document.querySelector<HTMLOutputElement>('#notes-count');
+  const formatSelect = document.querySelector<HTMLSelectElement>('#format');
+  const formatSelectRoot = document.querySelector<HTMLElement>('[data-app-select]');
+  const formatTrigger = document.querySelector<HTMLButtonElement>('#format-trigger');
+  const formatMenu = document.querySelector<HTMLElement>('#format-options');
+  const formatLabel = formatTrigger?.querySelector<HTMLElement>('[data-select-label]');
+  const formatOptions = Array.from(formatMenu?.querySelectorAll<HTMLButtonElement>('[data-select-value]') ?? []);
+  const timezoneInput = document.querySelector<HTMLInputElement>('#timezone');
+  const venueFields = document.querySelector<HTMLElement>('#venue-fields');
+  const onlineFields = document.querySelector<HTMLElement>('#online-fields');
+  const venueName = document.querySelector<HTMLInputElement>('#venue_name');
+  const onlineUrl = document.querySelector<HTMLInputElement>('#online_url');
+  const submitAnother = document.querySelector<HTMLButtonElement>('#submit-another');
+  const leaveDialog = document.querySelector<HTMLDialogElement>('#leave-form-dialog');
+  const keepEditingButton = document.querySelector<HTMLButtonElement>('#keep-editing');
+  const leaveFormButton = document.querySelector<HTMLButtonElement>('#leave-form');
+  const draftStatus = document.querySelector<HTMLElement>('#draft-status');
+  const draftNotice = document.querySelector<HTMLElement>('#draft-restored-notice');
+  const discardDraftButton = document.querySelector<HTMLButtonElement>('#discard-draft');
+  const guardedNavigationLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('[data-confirm-navigation]'));
+  const stepPanels = Array.from(form?.querySelectorAll<HTMLElement>('[data-step]') ?? []);
+  const stepIndicators = Array.from(form?.querySelectorAll<HTMLElement>('[data-step-indicator]') ?? []);
+  const nextButtons = Array.from(form?.querySelectorAll<HTMLButtonElement>('[data-next-step]') ?? []);
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  const detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'Africa/Accra';
+  let currentStep = 0;
+  let turnstileWidgetId: string | undefined;
+  let transitionTimer: number | undefined;
+  let selectCloseTimer: number | undefined;
+  let draftSaveTimer: number | undefined;
+  let dialogCloseTimer: number | undefined;
+  let draftNoticeTimer: number | undefined;
+  let pendingNavigationUrl = '';
+  let navigationTrigger: HTMLAnchorElement | null = null;
+  let hasUnsavedChanges = false;
+  let submissionComplete = false;
+
+  if (timezoneInput) timezoneInput.value = detectedTimezone;
+
+  function toLocalInputValue(date: Date): string {
+    const offset = date.getTimezoneOffset();
+    return new Date(date.getTime() - offset * 60_000).toISOString().slice(0, 16);
+  }
+
+  function localDateTimeToIso(value: string, timeZone: string): string {
+    const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
+    if (!match) throw new Error('Invalid local datetime');
+    const [, year, month, day, hour, minute] = match;
+    const desiredUtc = Date.UTC(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute));
+    const formatter = new Intl.DateTimeFormat('en-CA', {
+      timeZone,
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23',
+    });
+    let instant = desiredUtc;
+    let offsetMinutes = 0;
+    for (let attempt = 0; attempt < 2; attempt += 1) {
+      const parts = Object.fromEntries(
+        formatter.formatToParts(new Date(instant)).map((part) => [part.type, part.value]),
+      );
+      const representedUtc = Date.UTC(
+        Number(parts.year), Number(parts.month) - 1, Number(parts.day),
+        Number(parts.hour), Number(parts.minute), Number(parts.second),
+      );
+      offsetMinutes = Math.round((representedUtc - instant) / 60_000);
+      instant = desiredUtc - offsetMinutes * 60_000;
+    }
+    const sign = offsetMinutes >= 0 ? '+' : '-';
+    const absoluteOffset = Math.abs(offsetMinutes);
+    const offsetHours = String(Math.floor(absoluteOffset / 60)).padStart(2, '0');
+    const offsetRemainder = String(absoluteOffset % 60).padStart(2, '0');
+    return `${value}:00${sign}${offsetHours}:${offsetRemainder}`;
+  }
+
+  function draftFieldValue(name: DraftFieldName, value: string): string {
+    const element = form?.elements.namedItem(name);
+    const control = element instanceof RadioNodeList ? null : element;
+    const declaredLimit = control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement
+      ? control.maxLength
+      : -1;
+    const dataLimit = control instanceof HTMLTextAreaElement
+      ? Number(control.dataset.characterLimit ?? 0)
+      : 0;
+    const fallbackLimits: Partial<Record<DraftFieldName, number>> = {
+      format: 20,
+      starts_at: 16,
+      ends_at: 16,
+      timezone: 100,
+      location_type: 20,
+    };
+    const limit = declaredLimit > 0 ? declaredLimit : dataLimit > 0 ? dataLimit : fallbackLimits[name] ?? 2_048;
+    return value
+      .normalize('NFC')
+      .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, '')
+      .slice(0, limit);
+  }
+
+  function clearDraft(): void {
+    if (draftSaveTimer) window.clearTimeout(draftSaveTimer);
+    draftSaveTimer = undefined;
+    try { localStorage.removeItem(DRAFT_STORAGE_KEY); } catch { /* Storage can be unavailable. */ }
+  }
+
+  function showDraftNotice(): void {
+    if (!draftNotice) return;
+    if (draftNoticeTimer) window.clearTimeout(draftNoticeTimer);
+    draftNotice.hidden = false;
+    requestAnimationFrame(() => draftNotice.classList.add('is-visible'));
+  }
+
+  function hideDraftNotice(): void {
+    if (!draftNotice || draftNotice.hidden) return;
+    if (draftNoticeTimer) window.clearTimeout(draftNoticeTimer);
+    draftNotice.classList.remove('is-visible');
+    const finish = () => {
+      draftNoticeTimer = undefined;
+      draftNotice.hidden = true;
+    };
+    if (reduceMotion.matches) finish();
+    else draftNoticeTimer = window.setTimeout(finish, 160);
+  }
+
+  function persistDraft(): void {
+    if (!form || !hasUnsavedChanges || submissionComplete) return;
+    const data = new FormData(form);
+    const fields: EventSubmissionDraft['fields'] = {};
+    DRAFT_FIELD_NAMES.forEach((name) => {
+      const value = data.get(name);
+      if (typeof value === 'string') fields[name] = draftFieldValue(name, value);
+    });
+    const draft: EventSubmissionDraft = { version: 1, savedAt: Date.now(), fields };
+    try { localStorage.setItem(DRAFT_STORAGE_KEY, JSON.stringify(draft)); } catch { /* Draft recovery is best effort. */ }
+  }
+
+  function scheduleDraftSave(): void {
+    if (draftSaveTimer) window.clearTimeout(draftSaveTimer);
+    draftSaveTimer = window.setTimeout(() => {
+      draftSaveTimer = undefined;
+      persistDraft();
+    }, DRAFT_SAVE_DELAY_MS);
+  }
+
+  function readDraft(): EventSubmissionDraft | null {
+    try {
+      const rawDraft = localStorage.getItem(DRAFT_STORAGE_KEY);
+      if (!rawDraft) return null;
+      const parsed = JSON.parse(rawDraft) as Partial<EventSubmissionDraft>;
+      if (parsed.version !== 1 || typeof parsed.savedAt !== 'number' || !parsed.fields || typeof parsed.fields !== 'object') {
+        clearDraft();
+        return null;
+      }
+      if (Date.now() - parsed.savedAt > DRAFT_TTL_MS || parsed.savedAt > Date.now() + 60_000) {
+        clearDraft();
+        return null;
+      }
+      const fields: EventSubmissionDraft['fields'] = {};
+      DRAFT_FIELD_NAMES.forEach((name) => {
+        const value = parsed.fields?.[name];
+        if (typeof value === 'string') fields[name] = draftFieldValue(name, value);
+      });
+      return { version: 1, savedAt: parsed.savedAt, fields };
+    } catch {
+      clearDraft();
+      return null;
+    }
+  }
+
+  function restoreDraft(): void {
+    if (!form) return;
+    const draft = readDraft();
+    if (!draft) return;
+    const allowedFormats = new Set(formatOptions.map((option) => option.dataset.selectValue ?? ''));
+    const allowedLocations = new Set(['in_person', 'online', 'hybrid']);
+
+    DRAFT_FIELD_NAMES.forEach((name) => {
+      const value = draft.fields[name];
+      if (typeof value !== 'string' || name === 'format' || name === 'location_type') return;
+      const element = form.elements.namedItem(name);
+      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+        element.value = value;
+      }
+    });
+
+    const format = draft.fields.format ?? '';
+    if (allowedFormats.has(format)) selectFormat(format);
+    const location = draft.fields.location_type ?? '';
+    if (allowedLocations.has(location)) {
+      form.querySelector<HTMLInputElement>(`input[name="location_type"][value="${location}"]`)?.click();
+    }
+    startsInput?.dispatchEvent(new Event('app-date-picker:sync'));
+    endsInput?.dispatchEvent(new Event('app-date-picker:sync'));
+    timezoneInput?.dispatchEvent(new Event('app-timezone-picker:sync'));
+    syncLocationFields();
+    syncSummaryState();
+    syncNotesCount();
+    updateContinueButtonStates();
+    hasUnsavedChanges = true;
+    if (draftStatus) draftStatus.textContent = 'Your unfinished event draft was restored on this device.';
+    showDraftNotice();
+  }
+
+  function discardRestoredDraft(): void {
+    form?.reset();
+    selectFormat('');
+    timezoneInput?.dispatchEvent(new Event('app-timezone-picker:reset'));
+    initializeDateLimits();
+    syncLocationFields();
+    syncSummaryState();
+    syncNotesCount();
+    clearErrors();
+    form?.querySelectorAll<HTMLElement>('[data-dirty], [data-touched]').forEach((control) => {
+      delete control.dataset.dirty;
+      delete control.dataset.touched;
+    });
+    currentStep = 0;
+    stepPanels.forEach((panel, index) => {
+      panel.hidden = index !== 0;
+      panel.classList.remove('is-leaving-forward', 'is-leaving-back', 'is-entering-forward', 'is-entering-back');
+    });
+    updateStepProgress();
+    updateContinueButtonStates();
+    hasUnsavedChanges = false;
+    clearDraft();
+    hideDraftNotice();
+    if (draftStatus) draftStatus.textContent = 'Restored draft discarded. Starting a new event.';
+    form?.querySelector<HTMLInputElement>('#title')?.focus();
+  }
+
+  function finishClosingLeaveDialog(): void {
+    dialogCloseTimer = undefined;
+    leaveDialog?.classList.remove('is-closing');
+    leaveDialog?.close();
+    navigationTrigger?.focus();
+    pendingNavigationUrl = '';
+    navigationTrigger = null;
+  }
+
+  function closeLeaveDialog(): void {
+    if (!leaveDialog?.open) return;
+    if (dialogCloseTimer) window.clearTimeout(dialogCloseTimer);
+    if (reduceMotion.matches) {
+      finishClosingLeaveDialog();
+      return;
+    }
+    leaveDialog.classList.add('is-closing');
+    dialogCloseTimer = window.setTimeout(finishClosingLeaveDialog, 160);
+  }
+
+  function requestGuardedNavigation(link: HTMLAnchorElement): void {
+    pendingNavigationUrl = link.href;
+    navigationTrigger = link;
+    if (!leaveDialog || typeof leaveDialog.showModal !== 'function') {
+      if (window.confirm('Leave this form? Your unsaved event details will be discarded.')) {
+        clearDraft();
+        hasUnsavedChanges = false;
+        window.location.assign(pendingNavigationUrl);
+      }
+      return;
+    }
+    if (dialogCloseTimer) window.clearTimeout(dialogCloseTimer);
+    leaveDialog.classList.remove('is-closing');
+    leaveDialog.showModal();
+  }
+
+  function initializeDateLimits(): void {
+    if (!startsInput || !endsInput) return;
+    const now = new Date();
+    const soon = new Date(now.getTime() + 60 * 60 * 1000);
+    const defaultEnd = new Date(soon.getTime() + 2 * 60 * 60 * 1000);
+    startsInput.min = toLocalInputValue(now);
+    endsInput.min = toLocalInputValue(soon);
+    if (!startsInput.value) startsInput.value = toLocalInputValue(soon);
+    if (!endsInput.value) endsInput.value = toLocalInputValue(defaultEnd);
+    startsInput.dispatchEvent(new Event('app-date-picker:sync'));
+    endsInput.dispatchEvent(new Event('app-date-picker:sync'));
+  }
+
+  function syncEndDate(): void {
+    if (!startsInput || !endsInput || !startsInput.value) return;
+    endsInput.min = startsInput.value;
+    if (!endsInput.value || new Date(endsInput.value) <= new Date(startsInput.value)) {
+      const suggestedEnd = new Date(new Date(startsInput.value).getTime() + 2 * 60 * 60 * 1000);
+      endsInput.value = toLocalInputValue(suggestedEnd);
+    }
+    endsInput.dispatchEvent(new Event('app-date-picker:sync'));
+  }
+
+  function syncLocationFields(): void {
+    if (!form || !venueFields || !onlineFields || !venueName || !onlineUrl) return;
+    const selected = new FormData(form).get('location_type');
+    const needsVenue = selected === 'in_person' || selected === 'hybrid';
+    const needsOnline = selected === 'online' || selected === 'hybrid';
+    venueFields.hidden = !needsVenue;
+    onlineFields.hidden = !needsOnline;
+    venueName.required = needsVenue;
+    onlineUrl.required = needsOnline;
+    if (!needsVenue) {
+      venueName.value = '';
+      const address = document.querySelector<HTMLInputElement>('#venue_address');
+      if (address) address.value = '';
+      clearFieldError('venue_name');
+      clearFieldError('venue_address');
+    }
+    if (!needsOnline) {
+      onlineUrl.value = '';
+      clearFieldError('online_url');
+    }
+  }
+
+  function clearErrors(): void {
+    if (!form || !statusPanel) return;
+    form.querySelectorAll<HTMLElement>('.field-error').forEach((element) => { element.textContent = ''; });
+    form.querySelectorAll<HTMLElement>('[aria-invalid="true"]').forEach((element) => {
+      element.removeAttribute('aria-invalid');
+      element.removeAttribute('aria-describedby');
+      element.removeAttribute('aria-errormessage');
+    });
+    statusPanel.hidden = true;
+    statusPanel.textContent = '';
+  }
+
+  function clearFieldError(fieldName: string): void {
+    const field = form?.elements.namedItem(fieldName);
+    const input = field instanceof RadioNodeList ? field[0] : field;
+    const fieldElement = input instanceof HTMLElement ? input : null;
+    const dateTimeTrigger = ['starts_at', 'ends_at'].includes(fieldName)
+      ? document.querySelector<HTMLElement>(`[data-date-time-picker="${fieldName}"] .date-time-trigger`)
+      : null;
+    const timezoneTrigger = fieldName === 'timezone'
+      ? document.querySelector<HTMLElement>('[data-timezone-picker] .timezone-trigger')
+      : null;
+    const element = fieldName === 'format'
+      ? formatTrigger ?? fieldElement
+      : timezoneTrigger ?? dateTimeTrigger ?? fieldElement;
+    const error = document.getElementById(`${fieldName}-error`);
+    if (error) error.textContent = '';
+    element?.removeAttribute('aria-invalid');
+    element?.removeAttribute('aria-describedby');
+    element?.removeAttribute('aria-errormessage');
+  }
+
+  function syncSummaryState(): void {
+    if (!summaryInput || !summaryCount || !summaryField) return;
+    const limit = Number(summaryInput.dataset.characterLimit ?? 1200);
+    const overLimit = summaryInput.value.length > limit;
+    summaryCount.value = String(summaryInput.value.length);
+    summaryField.classList.toggle('is-over-limit', overLimit);
+
+    if (overLimit) {
+      showFieldError('summary', `Shorten the description by ${summaryInput.value.length - limit} character${summaryInput.value.length - limit === 1 ? '' : 's'}.`);
+      return;
+    }
+
+    const error = document.getElementById('summary-error');
+    if (error?.textContent?.startsWith('Shorten the description by')) error.textContent = '';
+    if (summaryInput.getAttribute('aria-describedby') === 'summary-error') {
+      summaryInput.removeAttribute('aria-invalid');
+      summaryInput.removeAttribute('aria-describedby');
+      summaryInput.removeAttribute('aria-errormessage');
+    }
+  }
+
+  function syncNotesCount(): void {
+    if (notesInput && notesCount) notesCount.value = String(notesInput.value.length);
+  }
+
+  function setFormatMenuOpen(open: boolean): void {
+    if (!formatMenu || !formatTrigger || !formatSelectRoot) return;
+    if (selectCloseTimer) window.clearTimeout(selectCloseTimer);
+    formatTrigger.setAttribute('aria-expanded', String(open));
+    formatSelectRoot.classList.toggle('is-open', open);
+
+    if (open) {
+      formatMenu.hidden = false;
+      requestAnimationFrame(() => formatMenu.classList.add('is-visible'));
+      return;
+    }
+
+    formatMenu.classList.remove('is-visible');
+    const finish = () => { formatMenu.hidden = true; };
+    if (reduceMotion.matches) finish();
+    else selectCloseTimer = window.setTimeout(finish, 150);
+  }
+
+  function selectFormat(value: string): void {
+    if (!formatSelect || !formatLabel) return;
+    formatSelect.value = value;
+    const selected = formatOptions.find((option) => option.dataset.selectValue === value);
+    formatLabel.textContent = selected?.textContent?.trim() || 'Choose one';
+    formatOptions.forEach((option) => {
+      option.setAttribute('aria-selected', String(option === selected));
+    });
+    formatTrigger?.removeAttribute('aria-invalid');
+    formatTrigger?.removeAttribute('aria-describedby');
+    formatTrigger?.removeAttribute('aria-errormessage');
+    const error = document.getElementById('format-error');
+    if (error) error.textContent = '';
+    formatSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    setFormatMenuOpen(false);
+  }
+
+  function isSafeHttpUrl(value: string): boolean {
+    if (!value.trim()) return true;
+    try {
+      const parsed = new URL(value.trim());
+      return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    } catch {
+      return false;
+    }
+  }
+
+  function stepIsReady(step: number): boolean {
+    if (!form || !startsInput || !endsInput) return false;
+    const panel = stepPanels[step];
+    if (!panel) return false;
+    const controls = Array.from(panel.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select'));
+    for (const control of controls) {
+      if (control.disabled || control.type === 'hidden') continue;
+      if (!control.checkValidity()) return false;
+      if ((control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) && control.required) {
+        const trimmedValue = control.value.trim();
+        if (!trimmedValue || (control.minLength > 0 && trimmedValue.length < control.minLength)) return false;
+      }
+      if (control instanceof HTMLInputElement && control.type === 'url' && !isSafeHttpUrl(control.value)) return false;
+    }
+
+    if (step === 0) {
+      const limit = Number(summaryInput?.dataset.characterLimit ?? 1200);
+      return Boolean(summaryInput && summaryInput.value.trim().length >= 20 && summaryInput.value.length <= limit && formatSelect?.value);
+    }
+
+    if (step === 1) {
+      const eventTimezone = timezoneInput?.value.trim() ?? '';
+      try {
+        Intl.DateTimeFormat('en', { timeZone: eventTimezone }).format();
+        const start = new Date(localDateTimeToIso(startsInput.value, eventTimezone));
+        const end = new Date(localDateTimeToIso(endsInput.value, eventTimezone));
+        if (start.getTime() <= Date.now() || end <= start || end.getTime() - start.getTime() > 31 * 24 * 60 * 60 * 1000) return false;
+      } catch {
+        return false;
+      }
+      const data = new FormData(form);
+      if (!String(data.get('registration_url') ?? '').trim() && !String(data.get('online_url') ?? '').trim()) return false;
+    }
+
+    return true;
+  }
+
+  function updateContinueButtonStates(): void {
+    nextButtons.forEach((button) => {
+      const step = Number(button.closest<HTMLElement>('[data-step]')?.dataset.step ?? -1);
+      const ready = stepIsReady(step);
+      button.disabled = !ready;
+      const status = form?.querySelector<HTMLElement>(`[data-step-status="${step}"]`);
+      if (status) status.textContent = ready ? 'Required fields complete. You can continue.' : 'Complete all required fields to continue.';
+    });
+  }
+
+  function showFieldError(fieldName: string, message: string): HTMLElement | null {
+    const field = form?.elements.namedItem(fieldName);
+    const input = field instanceof RadioNodeList ? field[0] : field;
+    const fieldElement = input instanceof HTMLElement ? input : null;
+    const dateTimeTrigger = ['starts_at', 'ends_at'].includes(fieldName)
+      ? document.querySelector<HTMLElement>(`[data-date-time-picker="${fieldName}"] .date-time-trigger`)
+      : null;
+    const timezoneTrigger = fieldName === 'timezone'
+      ? document.querySelector<HTMLElement>('[data-timezone-picker] .timezone-trigger')
+      : null;
+    const element = fieldName === 'format'
+      ? formatTrigger ?? fieldElement
+      : timezoneTrigger ?? dateTimeTrigger ?? fieldElement;
+    const error = document.getElementById(`${fieldName}-error`);
+    if (error) error.textContent = message;
+    if (element) {
+      element.setAttribute('aria-invalid', 'true');
+      element.setAttribute('aria-describedby', `${fieldName}-error`);
+      element.setAttribute('aria-errormessage', `${fieldName}-error`);
+    }
+    return element;
+  }
+
+  function liveValidationMessage(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): string | null {
+    const value = element.value.trim();
+    const labels: Record<string, string> = {
+      title: 'event name',
+      summary: 'short description',
+      format: 'event type',
+      starts_at: 'start date and time',
+      ends_at: 'end date and time',
+      timezone: 'time zone',
+      venue_name: 'venue name',
+      online_url: 'online event link',
+      organizer_name: 'organizer name',
+      organizer_email: 'contact email',
+    };
+
+    if (element.required && !value) {
+      if (element.name === 'format') return 'Choose an event type.';
+      return `Enter the ${labels[element.name] ?? 'required value'}.`;
+    }
+    if (!value) return null;
+    if ((element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)
+      && element.minLength > 0
+      && value.length < element.minLength) {
+      return `Enter at least ${element.minLength} characters.`;
+    }
+    if (element instanceof HTMLInputElement && element.type === 'email' && element.validity.typeMismatch) {
+      return 'Enter a valid email address.';
+    }
+    if (element instanceof HTMLInputElement && element.type === 'url' && !isSafeHttpUrl(value)) {
+      return 'Use a complete http(s) URL.';
+    }
+    if (!element.checkValidity()) return element.validationMessage;
+
+    if (element.name === 'summary' && summaryInput) {
+      const limit = Number(summaryInput.dataset.characterLimit ?? 1200);
+      if (summaryInput.value.length > limit) {
+        const extra = summaryInput.value.length - limit;
+        return `Shorten this by ${extra} character${extra === 1 ? '' : 's'}.`;
+      }
+    }
+
+    if (element.name === 'timezone') {
+      try { Intl.DateTimeFormat('en', { timeZone: value }).format(); }
+      catch { return 'Use a valid time zone, such as Africa/Accra.'; }
+    }
+
+    if ((element.name === 'starts_at' || element.name === 'ends_at') && startsInput && endsInput && timezoneInput) {
+      try {
+        const start = new Date(localDateTimeToIso(startsInput.value, timezoneInput.value.trim()));
+        const end = new Date(localDateTimeToIso(endsInput.value, timezoneInput.value.trim()));
+        if (element.name === 'starts_at' && start.getTime() <= Date.now()) return 'Choose a start time in the future.';
+        if (element.name === 'ends_at' && end <= start) return 'Choose an end time after the start.';
+        if (element.name === 'ends_at' && end.getTime() - start.getTime() > 31 * 24 * 60 * 60 * 1000) {
+          return 'Keep the event within 31 days.';
+        }
+      } catch {
+        return 'Choose a valid date and time.';
+      }
+    }
+
+    return null;
+  }
+
+  function validateScheduleFields(): void {
+    if (!startsInput || !endsInput || !timezoneInput) return;
+    try { Intl.DateTimeFormat('en', { timeZone: timezoneInput.value.trim() }).format(); }
+    catch { return; }
+
+    [startsInput, endsInput].forEach((input) => {
+      const message = liveValidationMessage(input);
+      if (message) showFieldError(input.name, message);
+      else clearFieldError(input.name);
+    });
+  }
+
+  function validateDirtyControl(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): void {
+    if (!element.name || element.disabled || element.type === 'hidden' || element.closest('.trap-field')) return;
+    const message = liveValidationMessage(element);
+    if (message) showFieldError(element.name, message);
+    else clearFieldError(element.name);
+
+    if (['starts_at', 'ends_at', 'timezone'].includes(element.name)) {
+      validateScheduleFields();
+    }
+
+    if (element.name === 'registration_url' || element.name === 'online_url') {
+      const registration = form?.elements.namedItem('registration_url');
+      const online = form?.elements.namedItem('online_url');
+      const registrationInput = registration instanceof HTMLInputElement ? registration : null;
+      const onlineInput = online instanceof HTMLInputElement ? online : null;
+      if (registrationInput && onlineInput) {
+        const hasJoinLink = Boolean(registrationInput.value.trim() || onlineInput.value.trim());
+        if (!hasJoinLink) showFieldError('registration_url', 'Add a registration or online link.');
+        else if (!liveValidationMessage(registrationInput)) clearFieldError('registration_url');
+      }
+    }
+  }
+
+  function updateStepProgress(): void {
+    stepIndicators.forEach((indicator, index) => {
+      const completed = index < currentStep;
+      const current = index === currentStep;
+      indicator.classList.toggle('is-complete', completed);
+      indicator.classList.toggle('is-current', current);
+      if (current) indicator.setAttribute('aria-current', 'step');
+      else indicator.removeAttribute('aria-current');
+      const number = indicator.querySelector<HTMLElement>('.step-number');
+      const check = indicator.querySelector<HTMLElement>('.step-check');
+      if (number) number.hidden = completed;
+      if (check) check.hidden = !completed;
+    });
+  }
+
+  function renderTurnstile(): void {
+    if (turnstileWidgetId) return;
+    const container = form?.querySelector<HTMLElement>('.cf-turnstile');
+    if (!container || !window.turnstile) return;
+    const error = document.getElementById('turnstile-error');
+    const clearError = () => {
+      if (error) error.textContent = '';
+      container.removeAttribute('aria-invalid');
+      container.removeAttribute('aria-describedby');
+    };
+    const showError = (message: string) => {
+      if (error) error.textContent = message;
+      container.setAttribute('aria-invalid', 'true');
+      container.setAttribute('aria-describedby', 'turnstile-error');
+    };
+    turnstileWidgetId = window.turnstile.render(container, {
+      sitekey: container.dataset.sitekey ?? '',
+      action: container.dataset.action ?? '',
+      theme: 'light',
+      appearance: 'always',
+      callback: clearError,
+      'expired-callback': () => showError('The human check expired. Please complete it again.'),
+      'error-callback': () => showError('The human check could not load. Please refresh and try again.'),
+    });
+  }
+
+  function resetTurnstile(): void {
+    if (turnstileWidgetId) window.turnstile?.reset(turnstileWidgetId);
+  }
+
+  function goToStep(nextStep: number, focusTarget?: HTMLElement | null): void {
+    if (nextStep < 0 || nextStep >= stepPanels.length) return;
+    const outgoing = stepPanels[currentStep];
+    const incoming = stepPanels[nextStep];
+    if (!outgoing || !incoming) return;
+    if (nextStep === currentStep) {
+      focusTarget?.focus();
+      return;
+    }
+
+    if (transitionTimer) window.clearTimeout(transitionTimer);
+    stepPanels.forEach((panel) => {
+      panel.classList.remove('is-leaving-forward', 'is-leaving-back', 'is-entering-forward', 'is-entering-back');
+      if (panel !== outgoing && panel !== incoming) panel.hidden = true;
+    });
+
+    const forward = nextStep > currentStep;
+    outgoing.classList.add(forward ? 'is-leaving-forward' : 'is-leaving-back');
+    incoming.classList.add(forward ? 'is-entering-forward' : 'is-entering-back');
+    incoming.hidden = false;
+    currentStep = nextStep;
+    updateStepProgress();
+    updateContinueButtonStates();
+    if (currentStep === 2) {
+      renderTurnstile();
+      document.getElementById('turnstile-script')?.addEventListener('load', renderTurnstile, { once: true });
+    }
+
+    const finish = () => {
+      outgoing.hidden = true;
+      outgoing.classList.remove('is-leaving-forward', 'is-leaving-back');
+      incoming.classList.remove('is-entering-forward', 'is-entering-back');
+      (focusTarget ?? incoming.querySelector<HTMLElement>('h2'))?.focus();
+    };
+
+    if (reduceMotion.matches) finish();
+    else {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => incoming.classList.remove('is-entering-forward', 'is-entering-back'));
+      });
+      transitionTimer = window.setTimeout(finish, 230);
+    }
+  }
+
+  function validateStep(step: number, includeTurnstile = false): HTMLElement | null {
+    if (!form || !startsInput || !endsInput) return null;
+    const panel = stepPanels[step];
+    if (!panel) return null;
+    let firstInvalid: HTMLElement | null = null;
+
+    for (const element of Array.from(panel.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select'))) {
+      if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) continue;
+      if (element.type === 'hidden' || element.disabled) continue;
+      if (!element.checkValidity()) {
+        const invalid = showFieldError(element.name, element.validationMessage);
+        firstInvalid ??= invalid;
+      }
+      if ((element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) && element.required) {
+        const trimmedValue = element.value.trim();
+        if (!trimmedValue) firstInvalid ??= showFieldError(element.name, 'Enter a value without using only spaces.');
+        else if (element.minLength > 0 && trimmedValue.length < element.minLength) {
+          firstInvalid ??= showFieldError(element.name, `Enter at least ${element.minLength} characters.`);
+        }
+      }
+    }
+
+    for (const urlInput of Array.from(panel.querySelectorAll<HTMLInputElement>('input[type="url"]'))) {
+      if (urlInput.value.trim() && !isSafeHttpUrl(urlInput.value)) {
+        firstInvalid ??= showFieldError(urlInput.name, 'Use a complete http(s) URL, such as https://example.com/.');
+      }
+    }
+
+    if (step === 0 && summaryInput) {
+      const limit = Number(summaryInput.dataset.characterLimit ?? 1200);
+      if (summaryInput.value.length > limit) {
+        firstInvalid ??= showFieldError('summary', `Shorten the description by ${summaryInput.value.length - limit} character${summaryInput.value.length - limit === 1 ? '' : 's'}.`);
+      }
+    }
+
+    if (step === 1) {
+      const eventTimezone = String(new FormData(form).get('timezone') ?? '').trim();
+      try {
+        Intl.DateTimeFormat('en', { timeZone: eventTimezone }).format();
+        const start = new Date(localDateTimeToIso(startsInput.value, eventTimezone));
+        const end = new Date(localDateTimeToIso(endsInput.value, eventTimezone));
+        if (start.getTime() <= Date.now()) firstInvalid ??= showFieldError('starts_at', 'Choose a start time in the future.');
+        if (end <= start) firstInvalid ??= showFieldError('ends_at', 'The end time must be after the start time.');
+        if (end.getTime() - start.getTime() > 31 * 24 * 60 * 60 * 1000) {
+          firstInvalid ??= showFieldError('ends_at', 'An event cannot run for more than 31 days.');
+        }
+      } catch {
+        firstInvalid ??= showFieldError('timezone', 'Enter a valid IANA time zone, such as Africa/Accra.');
+      }
+
+      const data = new FormData(form);
+      if (!String(data.get('registration_url') ?? '').trim() && !String(data.get('online_url') ?? '').trim()) {
+        firstInvalid ??= showFieldError('registration_url', 'Add a registration page or online event link.');
+      }
+    }
+
+    if (includeTurnstile && !String(new FormData(form).get('cf-turnstile-response') ?? '')) {
+      const error = document.getElementById('turnstile-error');
+      if (error) error.textContent = 'Please complete the security check.';
+      const turnstile = form.querySelector<HTMLElement>('.cf-turnstile');
+      turnstile?.setAttribute('aria-invalid', 'true');
+      turnstile?.setAttribute('aria-describedby', 'turnstile-error');
+      firstInvalid ??= turnstile;
+    }
+    return firstInvalid;
+  }
+
+  function findInvalidStep(includeTurnstile: boolean): { element: HTMLElement; step: number } | null {
+    for (let step = 0; step < stepPanels.length; step += 1) {
+      const element = validateStep(step, includeTurnstile && step === 2);
+      if (element) return { element, step };
+    }
+    return null;
+  }
+
+  function revealAndFocus(element: HTMLElement): void {
+    const panel = element.closest<HTMLElement>('[data-step]');
+    const step = Number(panel?.dataset.step ?? currentStep);
+    if (step !== currentStep) goToStep(step, element);
+    else element.focus();
+  }
+
+  function sanitizePlainText(value: FormDataEntryValue | null): string {
+    return String(value ?? '')
+      .normalize('NFC')
+      .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, '')
+      .trim();
+  }
+
+  function optionalValue(data: FormData, name: string): string | undefined {
+    const value = sanitizePlainText(data.get(name));
+    return value || undefined;
+  }
+
+  function setSubmitting(submitting: boolean): void {
+    if (!submitButton || !submitLabel || !submitLoading) return;
+    submitButton.disabled = submitting;
+    submitButton.setAttribute('aria-busy', String(submitting));
+    submitLabel.hidden = submitting;
+    submitLoading.hidden = !submitting;
+  }
+
+  async function parseError(response: Response): Promise<SubmissionErrorResponse> {
+    const contentType = response.headers.get('content-type') ?? '';
+    if (!contentType.toLowerCase().includes('application/json')) return {};
+    try { return await response.json() as SubmissionErrorResponse; } catch { return {}; }
+  }
+
+  initializeDateLimits();
+  syncLocationFields();
+  form?.querySelectorAll<HTMLElement>('.field-error').forEach((error) => error.setAttribute('aria-live', 'polite'));
+  form?.addEventListener('input', (event) => {
+    const target = event.target;
+    if ((target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)
+      && target.name
+      && !target.closest('.trap-field')) {
+      hasUnsavedChanges = true;
+      hideDraftNotice();
+      target.dataset.dirty = 'true';
+      validateDirtyControl(target);
+      updateContinueButtonStates();
+      scheduleDraftSave();
+    }
+  });
+  form?.addEventListener('change', (event) => {
+    const target = event.target;
+    if ((target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)
+      && target.name
+      && !target.closest('.trap-field')) {
+      hasUnsavedChanges = true;
+      hideDraftNotice();
+      target.dataset.dirty = 'true';
+      validateDirtyControl(target);
+      updateContinueButtonStates();
+      scheduleDraftSave();
+    }
+  });
+  form?.addEventListener('focusout', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) return;
+    if (!target.name || target.closest('.date-time-panel')) return;
+    target.dataset.touched = 'true';
+    validateDirtyControl(target);
+  });
+  startsInput?.addEventListener('change', syncEndDate);
+  form?.querySelectorAll<HTMLInputElement>('input[name="location_type"]').forEach((input) => {
+    input.addEventListener('change', syncLocationFields);
+  });
+  summaryInput?.addEventListener('input', () => {
+    syncSummaryState();
+  });
+  notesInput?.addEventListener('input', syncNotesCount);
+  syncNotesCount();
+  updateContinueButtonStates();
+  formatTrigger?.addEventListener('click', () => {
+    const open = formatTrigger.getAttribute('aria-expanded') !== 'true';
+    setFormatMenuOpen(open);
+    if (open) (formatOptions.find((option) => option.getAttribute('aria-selected') === 'true') ?? formatOptions[0])?.focus();
+  });
+  formatTrigger?.addEventListener('keydown', (event) => {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    event.preventDefault();
+    setFormatMenuOpen(true);
+    (event.key === 'ArrowDown' ? formatOptions[0] : formatOptions.at(-1))?.focus();
+  });
+  formatSelectRoot?.addEventListener('focusout', () => {
+    requestAnimationFrame(() => {
+      if (formatSelectRoot.contains(document.activeElement)) return;
+      if (formatSelect) {
+        formatSelect.dataset.touched = 'true';
+        validateDirtyControl(formatSelect);
+      }
+    });
+  });
+  formatOptions.forEach((option, index) => {
+    option.addEventListener('click', () => {
+      selectFormat(option.dataset.selectValue ?? '');
+      formatTrigger?.focus();
+    });
+    option.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        setFormatMenuOpen(false);
+        formatTrigger?.focus();
+        return;
+      }
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+      event.preventDefault();
+      const nextIndex = event.key === 'Home'
+        ? 0
+        : event.key === 'End'
+          ? formatOptions.length - 1
+          : (index + (event.key === 'ArrowDown' ? 1 : -1) + formatOptions.length) % formatOptions.length;
+      formatOptions[nextIndex]?.focus();
+    });
+  });
+  document.addEventListener('click', (event) => {
+    if (formatSelectRoot && !formatSelectRoot.contains(event.target as Node)) setFormatMenuOpen(false);
+  });
+  nextButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      clearErrors();
+      const invalid = validateStep(currentStep);
+      if (invalid) revealAndFocus(invalid);
+      else goToStep(Number(button.dataset.nextStep));
+    });
+  });
+  form?.querySelectorAll<HTMLButtonElement>('[data-previous-step]').forEach((button) => {
+    button.addEventListener('click', () => goToStep(Number(button.dataset.previousStep)));
+  });
+
+  form?.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    clearErrors();
+    const invalid = findInvalidStep(true);
+    if (invalid) {
+      if (invalid.step !== currentStep) goToStep(invalid.step, invalid.element);
+      else invalid.element.focus();
+      return;
+    }
+    const data = new FormData(form);
+
+    // A filled honeypot is treated as accepted without sending anything.
+    if (String(data.get('contact_website') ?? '').trim()) {
+      submissionComplete = true;
+      hasUnsavedChanges = false;
+      clearDraft();
+      form.hidden = true;
+      if (successPanel) { successPanel.hidden = false; successPanel.focus(); }
+      return;
+    }
+
+    const endpoint = form.dataset.endpoint;
+    const turnstileAction = form.dataset.turnstileAction;
+    if (!endpoint || !turnstileAction) return;
+
+    const payload = {
+      title: sanitizePlainText(data.get('title')),
+      summary: sanitizePlainText(data.get('summary')),
+      format: sanitizePlainText(data.get('format')),
+      starts_at: localDateTimeToIso(sanitizePlainText(data.get('starts_at')), sanitizePlainText(data.get('timezone'))),
+      ends_at: localDateTimeToIso(sanitizePlainText(data.get('ends_at')), sanitizePlainText(data.get('timezone'))),
+      timezone: sanitizePlainText(data.get('timezone')),
+      location_type: sanitizePlainText(data.get('location_type')),
+      venue_name: optionalValue(data, 'venue_name'),
+      venue_address: optionalValue(data, 'venue_address'),
+      online_url: optionalValue(data, 'online_url'),
+      registration_url: optionalValue(data, 'registration_url'),
+      organizer_name: sanitizePlainText(data.get('organizer_name')),
+      organizer_email: sanitizePlainText(data.get('organizer_email')).toLowerCase(),
+      organizer_website: optionalValue(data, 'organizer_website'),
+      notes: optionalValue(data, 'notes'),
+      turnstile_action: turnstileAction,
+      turnstile_token: String(data.get('cf-turnstile-response')),
+    };
+
+    setSubmitting(true);
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: { accept: 'application/json', 'content-type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (response.status !== 202) {
+        const body = await parseError(response);
+        const fieldErrors = body.error?.field_errors ?? {};
+        let firstServerError: HTMLElement | null = null;
+        Object.entries(fieldErrors).forEach(([fieldName, message]) => {
+          firstServerError ??= showFieldError(fieldName, message);
+        });
+
+        const retryAfter = response.headers.get('retry-after');
+        let message = body.error?.message || 'We could not submit your event. Please try again.';
+        if (response.status === 429 && retryAfter) {
+          const seconds = Number(retryAfter);
+          if (Number.isFinite(seconds)) message = `Too many attempts. Please try again in ${Math.ceil(seconds / 60)} minute(s).`;
+        }
+        if (statusPanel) {
+          statusPanel.textContent = message;
+          statusPanel.hidden = false;
+          statusPanel.focus();
+        }
+        if (firstServerError) revealAndFocus(firstServerError);
+        else statusPanel?.focus();
+        resetTurnstile();
+        throw new Error('Submission rejected');
+      }
+
+      form.hidden = true;
+      submissionComplete = true;
+      hasUnsavedChanges = false;
+      clearDraft();
+      if (successPanel) {
+        successPanel.hidden = false;
+        successPanel.focus();
+      }
+    } catch (error) {
+      if (error instanceof Error && error.message === 'Submission rejected') return;
+      if (statusPanel) {
+        statusPanel.textContent = 'We could not reach the review service. Check your connection and try again.';
+        statusPanel.hidden = false;
+        statusPanel.focus();
+      }
+      resetTurnstile();
+    } finally {
+      setSubmitting(false);
+    }
+  });
+
+  submitAnother?.addEventListener('click', () => {
+    clearDraft();
+    form?.reset();
+    selectFormat('');
+    timezoneInput?.dispatchEvent(new Event('app-timezone-picker:reset'));
+    syncSummaryState();
+    initializeDateLimits();
+    syncLocationFields();
+    clearErrors();
+    resetTurnstile();
+    if (successPanel) successPanel.hidden = true;
+    currentStep = 0;
+    stepPanels.forEach((panel, index) => {
+      panel.hidden = index !== 0;
+      panel.classList.remove('is-leaving-forward', 'is-leaving-back', 'is-entering-forward', 'is-entering-back');
+    });
+    updateStepProgress();
+    updateContinueButtonStates();
+    submissionComplete = false;
+    hasUnsavedChanges = false;
+    if (form) { form.hidden = false; form.querySelector<HTMLInputElement>('#title')?.focus(); }
+  });
+
+  discardDraftButton?.addEventListener('click', discardRestoredDraft);
+
+  guardedNavigationLinks.forEach((link) => {
+    link.addEventListener('click', (event) => {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      if (!hasUnsavedChanges || submissionComplete) return;
+      event.preventDefault();
+      requestGuardedNavigation(link);
+    });
+  });
+  keepEditingButton?.addEventListener('click', closeLeaveDialog);
+  leaveFormButton?.addEventListener('click', () => {
+    if (!pendingNavigationUrl) return;
+    clearDraft();
+    hasUnsavedChanges = false;
+    window.location.assign(pendingNavigationUrl);
+  });
+  leaveDialog?.addEventListener('cancel', (event) => {
+    event.preventDefault();
+    closeLeaveDialog();
+  });
+
+  restoreDraft();
+
+  window.addEventListener('beforeunload', (event) => {
+    if (!hasUnsavedChanges || submissionComplete) return;
+    persistDraft();
+    event.preventDefault();
+    event.returnValue = '';
+  });
+  window.addEventListener('pagehide', persistDraft);
+</script>
+
+<style>
+  .page-nav { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 2px solid var(--black); }
+  .page-nav-inner { min-height: 68px; display: flex; align-items: center; }
+  .page-logo img { height: 36px; width: auto; }
+  .leave-dialog {
+    width: min(460px, calc(100vw - 2rem));
+    max-height: calc(100svh - 2rem);
+    margin: auto;
+    overflow: auto;
+    border: 2px solid var(--black);
+    border-radius: var(--r-md);
+    padding: 0;
+    background: var(--bg-white);
+    color: var(--text);
+    box-shadow: 8px 8px 0 var(--black);
+    opacity: 0;
+    transform: translateY(10px) scale(0.985);
+    transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .leave-dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
+  .leave-dialog.is-closing { opacity: 0; transform: translateY(6px) scale(0.99); }
+  .leave-dialog::backdrop { background: rgba(17, 17, 17, 0.58); }
+  .leave-dialog-content { padding: var(--s6); }
+  .leave-dialog-kicker {
+    display: block;
+    color: var(--pink);
+    font-size: var(--text-xs);
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .leave-dialog h2 { margin-top: var(--s2); font-size: var(--text-2xl); line-height: var(--leading-snug); }
+  .leave-dialog p { max-width: 38ch; margin-top: var(--s2); color: var(--text-mid); font-size: var(--text-sm); }
+  .leave-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
+  .leave-dialog .btn { min-height: 44px; border-radius: var(--r-sm); padding: var(--s3) var(--s5); }
+  @starting-style {
+    .leave-dialog[open] { opacity: 0; transform: translateY(10px) scale(0.985); }
+  }
+  .form-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(3rem, 7vw, 6rem); background: var(--yellow); border-bottom: 2px solid var(--black); }
+  .form-hero::before {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    background-image:
+      linear-gradient(to right, color-mix(in oklch, var(--black) 11%, transparent) 1px, transparent 1px),
+      linear-gradient(to bottom, color-mix(in oklch, var(--black) 11%, transparent) 1px, transparent 1px);
+    background-size: clamp(56px, 6vw, 76px) clamp(56px, 6vw, 76px);
+    -webkit-mask-image: linear-gradient(140deg, transparent 5%, black 52%, transparent 100%);
+    mask-image: linear-gradient(140deg, transparent 5%, black 52%, transparent 100%);
+    pointer-events: none;
+  }
+  .form-hero::after {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    right: 10%;
+    bottom: 12%;
+    width: clamp(56px, 6vw, 76px);
+    aspect-ratio: 1;
+    border: 1px solid color-mix(in oklch, var(--pink) 44%, transparent);
+    background: color-mix(in oklch, var(--pink) 18%, transparent);
+    pointer-events: none;
+  }
+  .form-hero-inner { position: relative; z-index: 1; max-width: 900px; }
+  .hero-kicker { display: block; color: color-mix(in oklch, var(--black) 72%, var(--yellow)); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
+  .form-hero h1 { margin-top: var(--s5); font-family: var(--font-body); font-size: clamp(3.25rem, 6vw, 5.75rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; text-wrap: balance; }
+  .form-hero h1::after { content: ''; display: block; width: clamp(76px, 13vw, 142px); height: 10px; margin-top: var(--s5); background: var(--pink); }
+  .form-hero p { color: var(--text); font-size: var(--text-base); font-weight: 550; max-width: 46ch; margin-top: var(--s5); text-wrap: pretty; }
+  .form-layout { max-width: 900px; padding-block: var(--s9); }
+  .form-shell { overflow: visible; transition: none; }
+  .form-shell .btn { border-radius: var(--r-sm); }
+  .form-shell:hover { transform: none; box-shadow: none; }
+  .step-progress {
+    padding: var(--s5) var(--s7);
+    border-bottom: 2px solid var(--black);
+    border-radius: calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0 0;
+    background: var(--yellow-bg);
+  }
+  .step-progress ol { display: grid; grid-template-columns: repeat(3, 1fr); }
+  .step-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; text-align: center; }
+  .step-progress li:not(:last-child)::after { content: ''; position: absolute; z-index: 0; top: 16px; left: calc(50% + 22px); width: calc(100% - 44px); border-top: 2px solid var(--border-light); }
+  .step-progress li.is-complete:not(:last-child)::after { border-color: var(--black); }
+  .step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--border-light); border-radius: 50%; background: var(--bg-white); transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
+  .step-progress li.is-current { color: var(--text); }
+  .step-progress li.is-current .step-dot { border-color: var(--black); background: var(--pink); color: white; transform: scale(1.06); }
+  .step-progress li.is-complete { color: var(--text); }
+  .step-progress li.is-complete .step-dot { border-color: var(--black); background: var(--yellow); color: var(--black); }
+  .step-check { display: grid; place-items: center; }
+  .step-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
+  .draft-notice { display: flex; flex: 0 0 auto; align-items: baseline; gap: var(--s2); margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); opacity: 0; transform: translateY(-4px); transition: opacity 140ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .draft-notice.is-visible { opacity: 1; transform: translateY(0); }
+  .draft-notice > span:first-child { color: var(--text); font-weight: 700; }
+  .draft-notice-divider { color: var(--border-light); }
+  .draft-discard {
+    min-height: 28px;
+    border-bottom: 1px solid currentColor;
+    border-radius: 0;
+    padding: 0;
+    color: var(--pink);
+    font-size: var(--text-xs);
+    font-weight: 700;
+    transition: color 120ms cubic-bezier(0.4, 0, 0.2, 1), transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .draft-discard:hover { color: var(--black); }
+  .draft-discard:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
+  .draft-discard:active { transform: scale(0.97); }
+  .step-panels { position: relative; }
+  .form-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); padding: var(--s7); border-radius: 0 0 calc(var(--r-md) - 2px) calc(var(--r-md) - 2px); background: var(--bg-white); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms cubic-bezier(0.4, 0, 0.2, 1); }
+  .form-section.is-leaving-forward, .form-section.is-leaving-back { position: absolute; inset: 0; z-index: 0; width: 100%; pointer-events: none; }
+  .form-section.is-leaving-forward { transform: translateX(-24px); opacity: 0; }
+  .form-section.is-leaving-back { transform: translateX(24px); opacity: 0; }
+  .form-section.is-entering-forward { transform: translateX(24px); opacity: 0; }
+  .form-section.is-entering-back { transform: translateX(-24px); opacity: 0; }
+  .section-heading { grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-bottom: var(--s2); }
+  .section-heading h2 { font-size: var(--text-xl); line-height: var(--leading-snug); }
+  .section-heading h2:focus { outline: none; }
+  .section-heading p { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }
+  .field-grid, .conditional-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
+  .full-field, .location-choice, .timezone-note, .extra-details { grid-column: 1 / -1; }
+  .field { display: flex; flex-direction: column; min-width: 0; }
+  label, legend { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--s2); }
+  label > span[aria-hidden='true'], legend > span[aria-hidden='true'] { color: var(--pink); }
+  .optional { color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; margin-left: var(--s1); }
+  input, textarea, select, .app-select-trigger {
+    width: 100%; border: 2px solid var(--black); border-radius: var(--r-md); background: var(--bg-white);
+    color: var(--text); font: inherit; font-size: var(--text-sm); padding: 0.8rem var(--s3); outline: none;
+  }
+  textarea { resize: none; min-height: 96px; }
+  input:focus, textarea:focus, select:focus, .app-select-trigger:focus-visible { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232, 17, 127, 0.13); }
+  input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'], .app-select-trigger[aria-invalid='true'] { border-color: #be123c; box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.12); }
+  .native-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  .app-select { position: relative; }
+  .app-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; text-align: left; cursor: pointer; }
+  .app-select-chevron { color: var(--pink); font-size: 1.25rem; line-height: 1; transform: translateY(-2px); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
+  .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;
+    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-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); }
+  .app-select-menu button:active { transform: scale(0.985); }
+  .field-hint, .field-hint-row { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--s2); }
+  .field-hint-row { display: flex; justify-content: space-between; gap: var(--s3); }
+  .character-count { font-variant-numeric: tabular-nums; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
+  #summary-field.is-over-limit textarea { border-color: #be123c; box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.12); }
+  #summary-field.is-over-limit .character-count { color: #be123c; font-weight: 800; }
+  .field-error { min-height: 1.2em; color: #be123c; font-size: var(--text-xs); font-weight: 650; line-height: 1.2; margin-top: var(--s1); }
+  fieldset { border: 0; }
+  .segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--black); border-radius: var(--r-md); overflow: hidden; }
+  .segmented-control label { margin: 0; cursor: pointer; }
+  .segmented-control label + label { border-left: 2px solid var(--black); }
+  .segmented-control input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .segmented-control span { display: grid; place-items: center; min-height: 46px; padding: var(--s2); background: var(--bg-white); font-size: var(--text-sm); text-align: center; }
+  .segmented-control input:checked + span { background: var(--yellow); }
+  .segmented-control input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--pink); }
+  [hidden] { display: none !important; }
+  .extra-details textarea { background: var(--bg-white); resize: none; }
+  .notes-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-top: var(--s1); }
+  .notes-meta .field-error { flex: 1; margin-top: 0; }
+  .notes-count { color: var(--text-muted); font-size: var(--text-xs); }
+  .step-actions, .final-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: var(--s4); padding-top: var(--s3); }
+  .step-back { min-height: 44px; padding: var(--s2) var(--s3); color: var(--text-mid); font-size: var(--text-sm); font-weight: 700; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 100ms cubic-bezier(0.4, 0, 0.2, 1); }
+  .step-back:hover { color: var(--pink); }
+  .step-back:active { transform: scale(0.97); }
+  .step-next:active, .submit-button:active { transform: scale(0.97); }
+  .step-next:disabled { cursor: not-allowed; opacity: 0.42; filter: saturate(0.35); box-shadow: none; }
+  .step-next:disabled:hover, .step-next:disabled:active { transform: none; box-shadow: none; }
+  .form-submit { grid-column: 1 / -1; }
+  .final-field-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s5); }
+  .verification-field {
+    width: 300px;
+    max-width: 100%;
+  }
+  .verification-label { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--s2); }
+  .verification-label span { color: var(--pink); }
+  .verification-field .field-error { margin-top: var(--s1); }
+  .final-actions { justify-content: space-between; margin-top: var(--s3); }
+  .form-status { border: 2px solid #be123c; border-radius: var(--r-md); background: #fff1f2; color: #9f1239; font-size: var(--text-sm); font-weight: 600; padding: var(--s3); margin-block: var(--s3); }
+  .submit-button { justify-content: center; min-height: 52px; font-size: var(--text-base); }
+  .submit-button:disabled { cursor: wait; opacity: 0.7; }
+  .submission-note { color: var(--text-muted); font-size: var(--text-xs); text-align: center; margin-top: var(--s3); }
+  .trap-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
+  .success-panel { padding: clamp(var(--s7), 8vw, var(--s9)); text-align: center; }
+  .success-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--s5); border: 3px solid var(--black); border-radius: 50%; background: var(--yellow); font-size: var(--text-2xl); font-weight: 800; box-shadow: var(--shadow-solid); }
+  .success-panel h2 { font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); }
+  .success-panel > p { color: var(--text-mid); max-width: 50ch; margin: var(--s3) auto var(--s6); }
+  .success-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s3); }
+  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  @media (min-width: 1000px) and (min-height: 720px) {
+    main {
+      display: grid;
+      grid-template-columns: minmax(320px, 0.72fr) minmax(620px, 1.28fr);
+      min-height: calc(100svh - 70px);
+    }
+    .form-hero {
+      display: flex;
+      align-items: center;
+      border-right: 0;
+      border-bottom: 0;
+      padding-block: clamp(var(--s7), 5vw, var(--s9));
+    }
+    .form-hero h1 { font-size: clamp(3.5rem, 5vw, 5.25rem); }
+    .form-hero p { font-size: var(--text-base); }
+    .form-layout {
+      align-self: center;
+      width: 100%;
+      max-width: 900px;
+      padding: var(--s5);
+    }
+    .step-progress { padding: var(--s4) var(--s5); }
+    .form-section { gap: var(--s4); padding: var(--s5); }
+    .section-heading { margin-bottom: 0; }
+    .step-actions, .final-actions { padding-top: var(--s2); }
+  }
+  @media (max-width: 600px) {
+    .step-progress { padding-inline: var(--s4); }
+    .step-label { font-size: 0.6875rem; }
+    .form-section { grid-template-columns: 1fr; padding: var(--s5); }
+    .field-grid, .conditional-fields { grid-template-columns: 1fr; }
+    .final-field-row { grid-template-columns: 1fr; }
+    .segmented-control { grid-template-columns: 1fr; }
+    .segmented-control label + label { border-left: 0; border-top: 2px solid var(--black); }
+    .verification-field { width: 100%; }
+    .draft-notice { margin-left: 0; }
+    .leave-dialog-actions { align-items: stretch; flex-direction: column; }
+    .leave-dialog-actions .btn { justify-content: center; width: 100%; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .form-section, .step-dot, .step-back, .app-select-menu, .app-select-chevron, .character-count, .leave-dialog, .draft-notice, .draft-discard { transition: none; }
+    .form-section.is-leaving-forward, .form-section.is-leaving-back,
+    .form-section.is-entering-forward, .form-section.is-entering-back { transform: none; }
+  }
+</style>
diff --git a/src/pages/meetups/[slug].astro b/src/pages/meetups/[slug].astro
index 3b42f7c..8683174 100644
--- a/src/pages/meetups/[slug].astro
+++ b/src/pages/meetups/[slug].astro
@@ -86,7 +86,7 @@ function sharedLinkLabel(value: string): string {
       <a href="/" class="mnav-logo">
         <img src="/images/logo.png" alt="DevCongress" height="36" />
       </a>
-      <a href="/#meetups" class="mnav-back">← All meetups</a>
+      <a href="/events/" class="mnav-back">← All events</a>
     </div>
   </header>
 
diff --git a/src/pages/meetups/index.astro b/src/pages/meetups/index.astro
index 7d48263..fa59ec4 100644
--- a/src/pages/meetups/index.astro
+++ b/src/pages/meetups/index.astro
@@ -32,8 +32,8 @@ const statusConfig = {
 ---
 
 <Base
-  title="All Meetups — DevCongress"
-  description="Every DevCongress meetup — upcoming, live, and past. Find recordings, photos, speakers, and schedules."
+  title="Events — DevCongress"
+  description="DevCongress events, upcoming, live, and past. Find recordings, photos, speakers, and schedules."
 >
   <header class="mnav">
     <div class="container mnav-inner">
@@ -47,10 +47,10 @@ const statusConfig = {
   <main>
     <div class="page-header">
       <div class="container">
-        <span class="eyebrow">Meetups</span>
+        <span class="eyebrow">Events</span>
         <h1 class="heading-serif page-title">Where we show up</h1>
         <p class="page-sub">
-          {sorted.length} meetup{sorted.length !== 1 ? 's' : ''} and counting.
+          {sorted.length} event{sorted.length !== 1 ? 's' : ''} and counting.
         </p>
       </div>
     </div>