From a8416440fdf23f57a52e6082f7aa21db91c80f0a Mon Sep 17 00:00:00 2001
From: Charlie Hinojosa <charlie@sightbox.me>
Date: Tue, 20 Oct 2026 16:17:47 +0000
Subject: [PATCH 1/5] Polish the Inference Day page and promote the event on
 the homepage

Follow-up to the merged Inference Day page (#40), rebased onto the lint fix (#41):

- Make the hero and closing-CTA contrail full-bleed, sized in vw so the wave
  spans the section at every width (the fan reaches the lower-left, the lines run
  off the top-right) instead of being cut off; soften it on phones for legibility.
- Add a dismissible homepage announcement bar linking to /inference-day. It is
  rendered client-only (its visibility depends on localStorage and the date), so
  there is no effect-driven state and no hydration mismatch; it hides itself once
  the event has passed.
- Add an Inference Day link to the main nav (next to Slack, cyan accent) using
  next/link, and give the landing page a two-tier header: the main site Nav plus
  a slim event sub-nav for the on-page jump links. This replaces the standalone
  EventNav.

npm run lint, build and validate-posts all pass.

Signed-off-by: Charlie Hinojosa <charlie@sightbox.me>
---
 pages/index.tsx                              |   5 +
 pages/inference-day.tsx                      |   6 +-
 src/components/AnnouncementBar.tsx           |  57 ++++++++++
 src/components/Nav.tsx                       |   2 +
 src/components/inference-day/EventNav.tsx    |  61 -----------
 src/components/inference-day/EventSubNav.tsx |  20 ++++
 src/styles/globals.css                       |  71 ++++++++++++
 src/styles/inference-day.css                 | 107 +++++++++----------
 8 files changed, 211 insertions(+), 118 deletions(-)
 create mode 100644 src/components/AnnouncementBar.tsx
 delete mode 100644 src/components/inference-day/EventNav.tsx
 create mode 100644 src/components/inference-day/EventSubNav.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index b01a345..f63c2b2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import Seo from '@/components/Seo'
 import { SITE_URL } from '@/lib/site'
+import dynamic from 'next/dynamic'
 import Nav from '@/components/Nav'
 import Hero from '@/components/Hero'
 import Capabilities from '@/components/Capabilities'
@@ -11,6 +12,9 @@ import OpenSource from '@/components/OpenSource'
 import Partners from '@/components/Partners'
 import Footer from '@/components/Footer'
 
+// Client-only: its visibility depends on localStorage and the current date.
+const AnnouncementBar = dynamic(() => import('@/components/AnnouncementBar'), { ssr: false })
+
 export default function Home() {
   // Set up scroll-reveal observer (mirrors the original HTML script)
   useEffect(() => {
@@ -35,6 +39,7 @@ export default function Home() {
   return (
     <>
       <Seo url={SITE_URL} />
+      <AnnouncementBar />
       <Nav hero />
       <Hero />
       <hr className="divider" />
diff --git a/pages/inference-day.tsx b/pages/inference-day.tsx
index f48ddc4..6974a5d 100644
--- a/pages/inference-day.tsx
+++ b/pages/inference-day.tsx
@@ -1,7 +1,8 @@
 import Seo from '@/components/Seo'
 import Footer from '@/components/Footer'
+import Nav from '@/components/Nav'
 import { SITE_URL } from '@/lib/site'
-import EventNav from '@/components/inference-day/EventNav'
+import EventSubNav from '@/components/inference-day/EventSubNav'
 import EventHero from '@/components/inference-day/EventHero'
 import RegisterSection from '@/components/inference-day/RegisterSection'
 import Agenda from '@/components/inference-day/Agenda'
@@ -54,7 +55,8 @@ export default function InferenceDay() {
       </Seo>
 
       <div className="id-page">
-        <EventNav />
+        <Nav />
+        <EventSubNav />
         <main>
           <EventHero />
           <RegisterSection />
diff --git a/src/components/AnnouncementBar.tsx b/src/components/AnnouncementBar.tsx
new file mode 100644
index 0000000..29800c3
--- /dev/null
+++ b/src/components/AnnouncementBar.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import Link from 'next/link'
+
+// Homepage announcement bar for the Inference Day event. Links to the event
+// landing page, can be dismissed (remembered per browser), and hides itself once
+// the event date has passed so it never needs to be removed by hand.
+//
+// Rendered client-only (next/dynamic ssr:false in the homepage), so the initial
+// visibility is read straight from localStorage/the clock in the useState
+// initializer — no effect, and no server/client markup to mismatch.
+const EVENT_URL = '/inference-day'
+const HIDE_AFTER = new Date('2026-11-06T00:00:00Z') // day after the event
+const DISMISS_KEY = 'mp-inference-day-bar'
+
+function shouldShow(): boolean {
+  if (Date.now() >= HIDE_AFTER.getTime()) return false
+  try {
+    return localStorage.getItem(DISMISS_KEY) !== 'dismissed'
+  } catch {
+    // private mode / blocked storage — treat as not dismissed
+    return true
+  }
+}
+
+export default function AnnouncementBar() {
+  const [show, setShow] = useState(shouldShow)
+
+  function dismiss() {
+    setShow(false)
+    try {
+      localStorage.setItem(DISMISS_KEY, 'dismissed')
+    } catch {
+      // storage unavailable — nothing to persist
+    }
+  }
+
+  if (!show) return null
+
+  return (
+    <aside className="announce" aria-label="Inference Day announcement">
+      <Link href={EVENT_URL} className="announce-link">
+        <span className="announce-wordmark">Inference Day</span>
+        <span className="announce-sep" aria-hidden="true" />
+        <span className="announce-tag">Nov 5 · Virtual · Free</span>
+        <span className="announce-copy">
+          Hear where AI infrastructure is going from the engineers building it.
+        </span>
+        <span className="announce-cta">Register →</span>
+      </Link>
+      <button className="announce-close" onClick={dismiss} aria-label="Dismiss announcement">
+        <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+          <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+        </svg>
+      </button>
+    </aside>
+  )
+}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index e34ea96..2b5bf3d 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -55,6 +55,7 @@ export default function Nav({ hero = false }: NavProps) {
           <li><Link href="/blog">Blog</Link></li>
           <li><Link href="/manifesto">Manifesto</Link></li>
           <li><a href={SLACK_URL} target="_blank" rel="noopener noreferrer">Slack</a></li>
+          <li><Link href="/inference-day" className="nav-event">Inference Day</Link></li>
           <li><a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" aria-label="GitHub"><GithubIcon /></a></li>
           <li><a href={GITHUB_URL} className="nav-cta-ghost" target="_blank" rel="noopener noreferrer">★ Star the Project</a></li>
           <li><a href="https://docs.modelplane.ai/getting-started/" className="nav-cta">Get started →</a></li>
@@ -75,6 +76,7 @@ export default function Nav({ hero = false }: NavProps) {
           <Link href="/blog" onClick={() => setOpen(false)}>Blog</Link>
           <Link href="/manifesto" onClick={() => setOpen(false)}>Manifesto</Link>
           <a href={SLACK_URL} target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>Slack</a>
+          <Link href="/inference-day" className="nav-event" onClick={() => setOpen(false)}>Inference Day</Link>
           <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" aria-label="GitHub" onClick={() => setOpen(false)}><GithubIcon /></a>
           <a href={GITHUB_URL} className="nav-cta-mobile" target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>★ Star the Project</a>
           <a href="https://docs.modelplane.ai/getting-started/" className="nav-cta-mobile" onClick={() => setOpen(false)}>Get started →</a>
diff --git a/src/components/inference-day/EventNav.tsx b/src/components/inference-day/EventNav.tsx
deleted file mode 100644
index 921edc3..0000000
--- a/src/components/inference-day/EventNav.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useEffect, useState } from 'react'
-
-// Event-specific top bar for /inference-day. Separate from the site Nav so the
-// links are the on-page anchors rather than the marketing nav. Sticky on a
-// midnight background; collapses to a toggle menu on small screens.
-const DOCS_URL = 'https://docs.modelplane.ai'
-
-const LINKS = [
-  { label: 'Register', href: '#register' },
-  { label: 'Agenda', href: '#agenda' },
-  { label: 'Speakers', href: '#speakers' },
-  { label: 'Docs', href: DOCS_URL },
-]
-
-export default function EventNav() {
-  const [open, setOpen] = useState(false)
-
-  // Close the mobile menu when the hash changes (an anchor link was followed).
-  useEffect(() => {
-    const close = () => setOpen(false)
-    window.addEventListener('hashchange', close)
-    return () => window.removeEventListener('hashchange', close)
-  }, [])
-
-  return (
-    <nav className="id-nav" aria-label="Inference Day">
-      <div className="id-wrap id-nav-inner">
-        <a href="#top" className="id-nav-logo" aria-label="Modelplane">
-          <img src="/logo-inverted.svg" alt="Modelplane" />
-        </a>
-
-        <ul className="id-nav-links">
-          {LINKS.map((l) => (
-            <li key={l.href}>
-              <a href={l.href}>{l.label}</a>
-            </li>
-          ))}
-          <li>
-            <a href="#register" className="btn-primary">Register →</a>
-          </li>
-        </ul>
-
-        <button
-          className="id-nav-toggle"
-          onClick={() => setOpen((v) => !v)}
-          aria-label="Toggle menu"
-          aria-expanded={open}
-        >
-          <span /><span /><span />
-        </button>
-      </div>
-
-      <div className={`id-nav-mobile${open ? ' open' : ''}`}>
-        {LINKS.map((l) => (
-          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
-        ))}
-        <a href="#register" className="btn-primary id-btn-block" onClick={() => setOpen(false)}>Register →</a>
-      </div>
-    </nav>
-  )
-}
diff --git a/src/components/inference-day/EventSubNav.tsx b/src/components/inference-day/EventSubNav.tsx
new file mode 100644
index 0000000..b86b842
--- /dev/null
+++ b/src/components/inference-day/EventSubNav.tsx
@@ -0,0 +1,20 @@
+// Event sub-nav for the Inference Day landing page. Sits directly below the main
+// site <Nav /> and sticks under it, carrying only the on-page jump links plus a
+// Register CTA. The "Inference Day" label marks which section of the site you're
+// in, since the main nav shows the Modelplane logo. All links are in-page anchors,
+// so they stay plain <a> (next/link is for route navigation).
+export default function EventSubNav() {
+  return (
+    <nav className="id-subnav" aria-label="Inference Day sections">
+      <div className="id-wrap id-subnav-inner">
+        <a href="#top" className="id-subnav-label">Inference Day</a>
+        <div className="id-subnav-links">
+          <a href="#register">Register</a>
+          <a href="#agenda">Agenda</a>
+          <a href="#speakers">Speakers</a>
+        </div>
+        <a href="#register" className="btn-primary id-subnav-cta">Register →</a>
+      </div>
+    </nav>
+  )
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a3337d5..7c6d27e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1798,3 +1798,74 @@ a.post-tag:hover { border-color: var(--border-hi); color: var(--text); }
 @media (max-width: 560px) {
   .post-related .post-grid { grid-template-columns: 1fr 1fr; }
 }
+
+/* ── ANNOUNCEMENT BAR (Inference Day, homepage) ── */
+.announce {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: stretch;
+  background:
+    radial-gradient(460px 160px at 14% 50%, rgba(0, 220, 232, 0.16), transparent 72%),
+    #001C2E;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.announce-link {
+  flex: 1;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  padding: 9px 56px 9px 24px;
+  text-decoration: none;
+  color: #fff;
+}
+.announce-wordmark {
+  font-family: var(--display);
+  font-weight: 600;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+  background: linear-gradient(90deg, #9A5EFC, #00DCE8);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  white-space: nowrap;
+}
+.announce-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.18); flex: none; }
+.announce-tag {
+  font-size: 12px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
+  color: var(--cyan); white-space: nowrap;
+}
+.announce-copy { font-size: 14px; color: rgba(255, 255, 255, 0.86); }
+.announce-cta {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--purple); color: #fff; font-size: 13px; font-weight: 600;
+  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
+  transition: background 0.2s;
+}
+.announce-link:hover .announce-cta { background: linear-gradient(90deg, #9A5EFC, #00DCE8); }
+.announce-close {
+  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px;
+  background: none; border: 0; color: rgba(255, 255, 255, 0.55);
+  cursor: pointer; border-radius: 8px; transition: color 0.2s, background 0.2s;
+}
+.announce-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
+
+@media (max-width: 760px) {
+  .announce-copy, .announce-sep { display: none; }
+  .announce-link { gap: 12px; justify-content: space-between; padding: 8px 48px 8px 16px; }
+}
+@media (max-width: 420px) {
+  .announce-tag { display: none; }
+}
+
+/* Inference Day event link in the main nav — a subtle cyan accent so the
+   time-sensitive event stands out next to the standard nav items. */
+.nav-links .nav-event,
+.nav-dropdown .nav-event { color: var(--cyan); }
+.nav-links .nav-event:hover,
+.nav-dropdown .nav-event:hover { color: var(--purple-hi); }
diff --git a/src/styles/inference-day.css b/src/styles/inference-day.css
index 6d1b1df..f10e274 100644
--- a/src/styles/inference-day.css
+++ b/src/styles/inference-day.css
@@ -48,7 +48,7 @@ body:has(.id-page) { background: #001C2E; }
   padding-inline: var(--id-gutter);
 }
 
-.id-page section { scroll-margin-top: 84px; } /* clear the sticky nav on anchor jumps */
+.id-page section { scroll-margin-top: 128px; } /* clear the main nav + event sub-nav on anchor jumps */
 
 /* ── Shared type ──────────────────────────────────────────────────────────── */
 .id-wordmark {
@@ -94,57 +94,54 @@ body:has(.id-page) { background: #001C2E; }
   height: 48px;
 }
 
-/* ── 3.1 Nav ──────────────────────────────────────────────────────────────── */
-.id-nav {
+/* ── Event sub-nav ──────────────────────────────────────────────────────────
+   Sits directly below the main site <Nav /> and sticks under it, carrying the
+   on-page jump links. The main nav is sticky at top:0 (z 100); this pins just
+   below it. .id-subnav is a <nav>, so it overrides the global nav rules. */
+.id-subnav {
   position: sticky;
-  top: 0;
-  z-index: 100;
-  background: rgba(0, 28, 46, .82);
+  top: 65px;
+  z-index: 90;
+  background: rgba(3, 57, 74, .85);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--id-line);
 }
-.id-nav-inner {
+.id-subnav-inner {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 24px;
-  padding-block: 16px;
+  min-height: 44px;
+  padding-block: 8px;
 }
-.id-nav-logo { display: inline-flex; align-items: center; }
-.id-nav-logo img { height: 26px; width: auto; display: block; }
-.id-nav-links {
-  display: flex;
-  align-items: center;
-  gap: 28px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.id-subnav-label {
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: 15px;
+  letter-spacing: -0.01em;
+  color: #fff;
+  text-decoration: none;
+  white-space: nowrap;
 }
-.id-nav-links a {
+.id-subnav-links { display: flex; gap: 22px; }
+.id-subnav-links a {
   font: 400 14px/1 var(--font-body);
   color: var(--id-white-72);
   text-decoration: none;
   transition: color .18s;
 }
-.id-nav-links a:hover { color: #fff; }
-.id-nav-links .btn-primary { color: #fff; }
-.id-nav-toggle {
-  display: none;
-  background: none;
-  border: 0;
-  padding: 8px;
-  cursor: pointer;
+.id-subnav-links a:hover { color: #fff; }
+.id-page .id-subnav-cta {
+  margin-left: auto;
+  font-size: 13px;
+  padding: 8px 18px;
 }
-.id-nav-toggle span {
-  display: block;
-  width: 22px;
-  height: 2px;
-  margin: 4px 0;
-  background: #fff;
-  transition: transform .2s, opacity .2s;
+@media (max-width: 640px) {
+  .id-subnav-label { display: none; }
+  .id-page .id-subnav-cta { display: none; }
+  .id-subnav-inner { gap: 0; }
+  .id-subnav-links { width: 100%; justify-content: space-around; gap: 12px; }
 }
-.id-nav-mobile { display: none; }
 
 /* ── 3.2 Hero ─────────────────────────────────────────────────────────────── */
 .id-hero {
@@ -153,12 +150,18 @@ body:has(.id-page) { background: #001C2E; }
   background: var(--id-hero);
   padding-block: clamp(56px, 7vw, 96px) clamp(72px, 8vw, 120px);
 }
+/* The contrail is full-bleed behind the content, as the design calls for:
+   anchored right and bled slightly above the top (y -133 at 1440). Sized and
+   offset in vw (the asset is 1563px wide ≈ 108.5vw at 1440) so the whole
+   flight-path composition scales with the viewport and stays full-bleed — the
+   fan reaches the lower-left and the lines run off the top-right at every width,
+   rather than being cut off. The hero clips the overflow; text sits above (z 1). */
 .id-hero-art {
   position: absolute;
-  top: -133px;
+  top: -9.2vw;
   right: 0;
-  width: min(1200px, 115%);
-  max-width: none;
+  width: 108.5vw;
+  min-width: 1040px;
   height: auto;
   pointer-events: none;
   z-index: 0;
@@ -459,8 +462,10 @@ body:has(.id-page) { background: #001C2E; }
 .id-cta-art {
   position: absolute;
   right: 0;
-  bottom: -40px;
-  width: min(1100px, 110%);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 108.5vw;
+  min-width: 1040px;
   height: auto;
   opacity: .85;
   pointer-events: none;
@@ -502,21 +507,6 @@ body:has(.id-page) { background: #001C2E; }
   .id-hero-inner { max-width: none; }
 }
 @media (max-width: 860px) {
-  .id-nav-links { display: none; }
-  .id-nav-toggle { display: block; }
-  .id-nav-mobile.open {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 8px var(--id-gutter) 20px;
-    border-top: 1px solid var(--id-line);
-  }
-  .id-nav-mobile a {
-    font: 400 16px/1 var(--font-body);
-    color: #fff;
-    text-decoration: none;
-    padding: 12px 0;
-  }
   .id-hero-lockup {
     position: static;
     display: block;
@@ -544,3 +534,10 @@ body:has(.id-page) { background: #001C2E; }
 @media (prefers-reduced-motion: reduce) {
   .id-page * { animation: none !important; transition: none !important; }
 }
+
+/* Soften the full-bleed contrail on phones so the hero/CTA text stays legible
+   over it (the wave sits behind full-width copy at this size). */
+@media (max-width: 640px) {
+  .id-hero-art { opacity: 0.5; }
+  .id-cta-art { opacity: 0.5; }
+}

From 503f41c8e33ff7cd179f126ddd1a9cb30ff3e700 Mon Sep 17 00:00:00 2001
From: Charlie Hinojosa <charlie@sightbox.me>
Date: Tue, 20 Oct 2026 16:56:38 +0000
Subject: [PATCH 2/5] Reposition the hero/CTA wave clear of the copy and hide
 it on mobile

The full-bleed wave crossed the hero's body text, date and buttons, and its
glowing nodes landed on readable copy (looked odd on desktop, cluttered on
mobile). Lift the hero contrail above the body copy (top -33vw) so it frames the
wordmark and the nodes fall in open space, leaving the intro, date and buttons
on clean dark. On phones/small tablets (<=768px) the copy is full-width with
nowhere for the wave to go, so hide the decorative art there for a clean,
legible hero and CTA.

Signed-off-by: Charlie Hinojosa <charlie@sightbox.me>
---
 src/styles/inference-day.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/styles/inference-day.css b/src/styles/inference-day.css
index f10e274..8cf40ef 100644
--- a/src/styles/inference-day.css
+++ b/src/styles/inference-day.css
@@ -158,7 +158,7 @@ body:has(.id-page) { background: #001C2E; }
    rather than being cut off. The hero clips the overflow; text sits above (z 1). */
 .id-hero-art {
   position: absolute;
-  top: -9.2vw;
+  top: -33vw;
   right: 0;
   width: 108.5vw;
   min-width: 1040px;
@@ -535,9 +535,10 @@ body:has(.id-page) { background: #001C2E; }
   .id-page * { animation: none !important; transition: none !important; }
 }
 
-/* Soften the full-bleed contrail on phones so the hero/CTA text stays legible
-   over it (the wave sits behind full-width copy at this size). */
-@media (max-width: 640px) {
-  .id-hero-art { opacity: 0.5; }
-  .id-cta-art { opacity: 0.5; }
+/* On phones/small tablets the hero and CTA copy is full-width, so the full-bleed
+   wave can only sit behind the text and clutter it. Hide the decorative art at
+   these sizes and keep the clean solid-dark hero/CTA instead. */
+@media (max-width: 768px) {
+  .id-hero-art,
+  .id-cta-art { display: none; }
 }

From 1e666010e12de07676e573a41bf326469a10db60 Mon Sep 17 00:00:00 2001
From: Charlie Hinojosa <charlie@sightbox.me>
Date: Tue, 20 Oct 2026 17:04:58 +0000
Subject: [PATCH 3/5] Center the hosted/sponsored lockup under the buttons

The lockup was absolutely positioned in the hero's bottom-right, floating over
the wave art, so it did not place predictably across breakpoints. Move it into
the hero content flow, directly under the buttons, and centre it (full-width on
small screens) so it sits consistently on desktop, tablet and mobile.

Signed-off-by: Charlie Hinojosa <charlie@sightbox.me>
---
 src/components/inference-day/EventHero.tsx | 12 ++++++------
 src/styles/inference-day.css               | 21 +++++++--------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/components/inference-day/EventHero.tsx b/src/components/inference-day/EventHero.tsx
index 9208047..2f205f1 100644
--- a/src/components/inference-day/EventHero.tsx
+++ b/src/components/inference-day/EventHero.tsx
@@ -23,14 +23,14 @@ export default function EventHero() {
           </p>
 
           <EventActions />
+
+          <img
+            src="/inference-day/lockup.png"
+            alt="Hosted by Modelplane · Sponsored by Upbound"
+            className="id-hero-lockup"
+          />
         </div>
       </div>
-
-      <img
-        src="/inference-day/lockup.png"
-        alt="Hosted by Modelplane · Sponsored by Upbound"
-        className="id-hero-lockup"
-      />
     </section>
   )
 }
diff --git a/src/styles/inference-day.css b/src/styles/inference-day.css
index 8cf40ef..aa18c98 100644
--- a/src/styles/inference-day.css
+++ b/src/styles/inference-day.css
@@ -191,15 +191,15 @@ body:has(.id-page) { background: #001C2E; }
   gap: 16px;
   margin-top: 34px;
 }
+/* "Hosted by / Sponsored by" lockup: a normal flow element, centred under the
+   buttons, so it places predictably on desktop, tablet and mobile (rather than
+   floating over the hero art). */
 .id-hero-lockup {
-  position: absolute;
-  right: var(--id-gutter);
-  bottom: 28px;
-  width: 612px;
-  max-width: 48%;
+  display: block;
+  width: 440px;
+  max-width: 100%;
   height: auto;
-  z-index: 1;
-  pointer-events: none;
+  margin: 44px auto 0;
 }
 
 /* ── 3.3 About + Register ─────────────────────────────────────────────────── */
@@ -507,13 +507,6 @@ body:has(.id-page) { background: #001C2E; }
   .id-hero-inner { max-width: none; }
 }
 @media (max-width: 860px) {
-  .id-hero-lockup {
-    position: static;
-    display: block;
-    width: 70%;
-    max-width: 420px;
-    margin: 40px 0 0;
-  }
   .id-featured--large,
   .id-featured--small { flex-basis: 100%; }
 }

From 15ca15e073a9b914961dcd4a63b57dd98749c50e Mon Sep 17 00:00:00 2001
From: Charlie Hinojosa <charlie@sightbox.me>
Date: Tue, 20 Oct 2026 18:48:28 +0000
Subject: [PATCH 4/5] Rebuild the hero to match the final design

The earlier passes lifted the wave above the copy, then dropped it below the
whole copy block; neither matched the handoff design, where the wave sweeps
behind a compact copy block in the upper-left.

Match the design's proportions so the composition works as drawn:

- Give the hero a roomy min-height (~800px at 1440) with tighter padding, so the
  copy sits compact in the upper-left and leaves open space below and to the
  right for the wave.
- Keep the wave full-bleed but anchor it near the top (top -9.2vw), so it sweeps
  from the upper-right down to the lower-left with its glowing nodes falling in
  the open area, clear of the text.
- Set the wordmark on one line (white-space: nowrap, 108px cap) and widen the
  intro to two lines, matching the design's headline and copy.
- Tighten the date and action gaps to the design's rhythm.
- On phones/small tablets (<=768px) the wave is still hidden; let the wordmark
  wrap and drop the desktop min-height for a clean, legible stacked hero.

npm run lint, build and validate-posts all pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016QU1xKJitT9UNpCfjXjDxt
Signed-off-by: Charlie Hinojosa <charlie@sightbox.me>
---
 src/styles/inference-day.css | 38 +++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/styles/inference-day.css b/src/styles/inference-day.css
index aa18c98..02a3179 100644
--- a/src/styles/inference-day.css
+++ b/src/styles/inference-day.css
@@ -148,17 +148,18 @@ body:has(.id-page) { background: #001C2E; }
   position: relative;
   overflow: hidden;
   background: var(--id-hero);
-  padding-block: clamp(56px, 7vw, 96px) clamp(72px, 8vw, 120px);
-}
-/* The contrail is full-bleed behind the content, as the design calls for:
-   anchored right and bled slightly above the top (y -133 at 1440). Sized and
-   offset in vw (the asset is 1563px wide ≈ 108.5vw at 1440) so the whole
-   flight-path composition scales with the viewport and stays full-bleed — the
-   fan reaches the lower-left and the lines run off the top-right at every width,
-   rather than being cut off. The hero clips the overflow; text sits above (z 1). */
+  /* Compact, roomy hero like the design (≈800px at 1440): the copy sits in the
+     upper-left and the min-height leaves open space below/right for the wave. */
+  min-height: clamp(560px, 52vw, 780px);
+  padding-block: clamp(48px, 5vw, 80px) clamp(64px, 7vw, 104px);
+}
+/* The contrail is full-bleed behind the content, as the design composes it:
+   anchored right and bled above the top (y -133 at 1440), sweeping from the
+   upper-right down to the lower-left. The copy sits compact in the upper-left
+   (z 1), so the wave's dense sweep falls in the open right and lower area. */
 .id-hero-art {
   position: absolute;
-  top: -33vw;
+  top: -9.2vw;
   right: 0;
   width: 108.5vw;
   min-width: 1040px;
@@ -166,16 +167,17 @@ body:has(.id-page) { background: #001C2E; }
   pointer-events: none;
   z-index: 0;
 }
-.id-hero-inner { position: relative; z-index: 1; max-width: 760px; }
+.id-hero-inner { position: relative; z-index: 1; max-width: none; }
 .id-hero h1 {
-  font-size: clamp(56px, 9.7vw, 140px);
+  font-size: clamp(44px, 7.2vw, 108px);
+  white-space: nowrap;
   margin: 0;
 }
 .id-hero-intro {
-  font: 400 clamp(18px, 1.7vw, 24px)/1.35 var(--font-body);
+  font: 400 clamp(17px, 1.5vw, 22px)/1.4 var(--font-body);
   color: #fff;
-  margin: 22px 0 0;
-  max-width: 620px;
+  margin: 20px 0 0;
+  max-width: 900px;
 }
 .id-hero-intro span { display: block; }
 .id-date {
@@ -183,13 +185,13 @@ body:has(.id-page) { background: #001C2E; }
   letter-spacing: .10em;
   text-transform: uppercase;
   color: var(--id-cyan);
-  margin: 26px 0 0;
+  margin: 22px 0 0;
 }
 .id-hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
-  margin-top: 34px;
+  margin-top: 28px;
 }
 /* "Hosted by / Sponsored by" lockup: a normal flow element, centred under the
    buttons, so it places predictably on desktop, tablet and mobile (rather than
@@ -532,6 +534,10 @@ body:has(.id-page) { background: #001C2E; }
    wave can only sit behind the text and clutter it. Hide the decorative art at
    these sizes and keep the clean solid-dark hero/CTA instead. */
 @media (max-width: 768px) {
+  /* Phones/small tablets: hide the decorative wave (no room beside full-width
+     copy), let the wordmark wrap, and drop the desktop min-height. */
   .id-hero-art,
   .id-cta-art { display: none; }
+  .id-hero { min-height: 0; }
+  .id-hero h1 { white-space: normal; }
 }

From 95c6c97e8816352c31bec95eea86a81f4bd360f1 Mon Sep 17 00:00:00 2001
From: Charlie Hinojosa <charlie@sightbox.me>
Date: Tue, 20 Oct 2026 19:02:06 +0000
Subject: [PATCH 5/5] Left-align the hosted/sponsored lockup under the buttons

Centred, the lockup landed over the busiest part of the wave and got lost in the
pattern. Left-align it so it sits under the copy and buttons on clean dark,
consistent with the rest of the hero's left-aligned content at every breakpoint.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016QU1xKJitT9UNpCfjXjDxt
Signed-off-by: Charlie Hinojosa <charlie@sightbox.me>
---
 src/styles/inference-day.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/inference-day.css b/src/styles/inference-day.css
index 02a3179..b3698e1 100644
--- a/src/styles/inference-day.css
+++ b/src/styles/inference-day.css
@@ -193,15 +193,15 @@ body:has(.id-page) { background: #001C2E; }
   gap: 16px;
   margin-top: 28px;
 }
-/* "Hosted by / Sponsored by" lockup: a normal flow element, centred under the
-   buttons, so it places predictably on desktop, tablet and mobile (rather than
-   floating over the hero art). */
+/* "Hosted by / Sponsored by" lockup: a normal flow element left-aligned under
+   the buttons, so it sits on clean dark below the copy rather than centred over
+   the wave pattern (where it got lost). Places predictably on every breakpoint. */
 .id-hero-lockup {
   display: block;
   width: 440px;
   max-width: 100%;
   height: auto;
-  margin: 44px auto 0;
+  margin: 44px 0 0;
 }
 
 /* ── 3.3 About + Register ─────────────────────────────────────────────────── */