diff --git a/site/index.html b/site/index.html
index b03a011..41e21c0 100644
--- a/site/index.html
+++ b/site/index.html
@@ -35,7 +35,7 @@
     <section class="events" hidden>
       <p class="event-prompt">upcoming</p>
       <a class="event-card" href="" target="_blank" rel="noopener noreferrer">
-        <img class="event-og" alt="" />
+        <iframe class="event-og" src="" title="upcoming event" loading="lazy"></iframe>
       </a>
     </section>
 
diff --git a/site/script.js b/site/script.js
index 1c385c7..cff1da7 100644
--- a/site/script.js
+++ b/site/script.js
@@ -106,9 +106,9 @@
 //
 // reads `community.lexicon.calendar.event` records from the chicago.at PDS
 // (cors is wide-open on atproto PDSes), finds the next scheduled one,
-// and embeds atmo.rsvp's server-rendered og image for it. the og endpoint
-// does the design — we just thread the rkey. no events / past events →
-// section stays hidden.
+// and embeds atmo.rsvp's server-rendered event page for it. the embed
+// endpoint does the design — we just thread the rkey. no events / past
+// events → section stays hidden.
 
 (() => {
   'use strict';
@@ -137,12 +137,12 @@
       const rkey    = next.uri.split('/').pop();
       const section = document.querySelector('.events');
       const link    = section?.querySelector('.event-card');
-      const img     = section?.querySelector('.event-og');
-      if (!section || !link || !img) return;
+      const embed   = section?.querySelector('.event-og');
+      if (!section || !link || !embed) return;
 
       link.href = `https://atmo.rsvp/p/${HANDLE}/e/${rkey}`;
-      img.src   = `https://atmo.rsvp/p/${HANDLE}/e/${rkey}/og.png`;
-      img.alt   = next.value.name || 'upcoming event';
+      embed.src = `https://atmo.rsvp/embed/p/${HANDLE}/e/${rkey}`;
+      embed.title = next.value.name || 'upcoming event';
       section.hidden = false;
     } catch (_) {
       // network/parse failure → section stays hidden, page still works
diff --git a/site/styles.css b/site/styles.css
index 6fc4007..132a89a 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -142,7 +142,7 @@ a:focus-visible { text-decoration-color: var(--accent); outline: none; }
 
 .stars:hover .star { transform: rotate(60deg); }
 
-/* ─── events (embed atmo.rsvp's og image) ───────── */
+/* ─── events (embed atmo.rsvp) ──────────────────── */
 
 .events {
   width: 100%;
@@ -182,7 +182,7 @@ a:focus-visible { text-decoration-color: var(--accent); outline: none; }
 .event-og {
   display: block;
   width: 100%;
-  height: auto;
+  border: none;
 }
 
 /* ─── footer (find us in the atmosphere) ─────────── */