Add partner logos, nav popout menu, FAQ updates; fix scroll-spy

- Replace generic partner labels with brand logos (LFS-tracked PNGs + Cohere SVG)
- Add responsive nav popout menu; fix top-nav scroll-spy jumping
- Expand FAQ content; remove buggy scroll-reveal animation

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.gitattributes

@@ -0,0 +1,36 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

src/lib/actions/reveal.ts

@@ -1,25 +0,0 @@
-/* Scroll-reveal action — adds `.in` when the element enters the viewport.
-   Apply alongside the `reveal` class, e.g. <div class="reveal" use:reveal>. */
-import type { Action } from 'svelte/action';
-
-export const reveal: Action<HTMLElement, { delay?: number } | undefined> = (node, params) => {
-	const delay = params?.delay ?? 0;
-	if (delay) node.style.transitionDelay = `${delay}ms`;
-
-	const io = new IntersectionObserver(
-		([entry]) => {
-			if (entry.isIntersecting) {
-				node.classList.add('in');
-				io.disconnect();
-			}
-		},
-		{ threshold: 0.12, rootMargin: '0px 0px -8% 0px' }
-	);
-	io.observe(node);
-
-	return {
-		destroy() {
-			io.disconnect();
-		}
-	};
-};

src/lib/components/BigIdea.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { EVENT } from '$lib/data/content';
 	import TopoBackdrop from './TopoBackdrop.svelte';
-	import { reveal } from '$lib/actions/reveal';
 </script>
 
 <section class="section on-dark" id="idea">
 	<TopoBackdrop opacity={0.1} stroke="rgba(244,238,225,.5)" />
 	<div class="wrap" style="position:relative">
-		<div class="reveal" use:reveal>
+		<div>
 			<span class="eyebrow">The big idea</span>
 			<p
 				class="display"

src/lib/components/Icon.svelte

@@ -30,7 +30,8 @@
 		Smile,
 		X,
 		GitBranch,
-		Plus
+		Plus,
+		Menu
 	} from '@lucide/svelte';
 
 	interface Props {
@@ -70,6 +71,8 @@
 		grid: LayoutGrid,
 		clock: Clock,
 		plus: Plus,
+		menu: Menu,
+		close: X,
 		// social / external — neutral generic marks (no brand logos)
 		globe: Globe,
 		hug: Smile,

src/lib/components/Nav.svelte

@@ -7,21 +7,68 @@
 		active?: string;
 	}
 	let { active = 'top' }: Props = $props();
+
+	let open = $state(false);
+	const close = () => (open = false);
+
+	// close the popout on Escape, and when the viewport grows back to the wide layout
+	$effect(() => {
+		if (!open) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') close();
+		};
+		const onResize = () => {
+			if (window.innerWidth > 1000) close();
+		};
+		window.addEventListener('keydown', onKey);
+		window.addEventListener('resize', onResize);
+		return () => {
+			window.removeEventListener('keydown', onKey);
+			window.removeEventListener('resize', onResize);
+		};
+	});
 </script>
 
 <nav class="nav">
 	<div class="wrap nav__inner">
-		<a href="#top" style="display:flex;align-items:center;gap:10px">
+		<a href="#top" class="nav__brand" onclick={close}>
 			<StampBadge glyph="trees" accent="var(--forest)" size={32} spin={false} />
-			<span class="display" style="font-size:19px;font-stretch:112%">Build Small</span>
+			<span class="display nav__brand-text">Build Small</span>
 		</a>
+
 		<div class="nav__links">
 			{#each NAV as n (n.id)}
 				<a href={'#' + n.id} class="nav__link" data-active={active === n.id}>{n.label}</a>
 			{/each}
 		</div>
-		<a class="btn btn--accent" href="#submit" style="padding:9px 16px;font-size:13px">
+
+		<button
+			class="nav__toggle"
+			aria-label={open ? 'Close menu' : 'Open menu'}
+			aria-expanded={open}
+			aria-controls="nav-menu"
+			onclick={() => (open = !open)}
+		>
+			<Icon name={open ? 'close' : 'menu'} size={22} stroke="var(--ink)" />
+		</button>
+
+		<a class="btn btn--accent nav__submit" href="#submit" onclick={close}>
 			Submit <Icon name="arrow" size={15} stroke="#fff" />
 		</a>
 	</div>
+
+	{#if open}
+		<!-- click-away scrim -->
+		<button class="nav__scrim" aria-hidden="true" tabindex="-1" onclick={close}></button>
+		<div class="nav__menu" id="nav-menu">
+			{#each NAV as n (n.id)}
+				<a
+					href={'#' + n.id}
+					class="nav__menu-link"
+					data-active={active === n.id}
+					onclick={close}>{n.label}</a
+				>
+			{/each}
+		</div>
+	{/if}
 </nav>

src/lib/components/PartnersOverview.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { PARTNERS } from '$lib/data/content';
+	import { PARTNERS, PARTNER_LOGOS } from '$lib/data/content';
 	import SectionHeader from './SectionHeader.svelte';
 	import Icon from './Icon.svelte';
-	import { reveal } from '$lib/actions/reveal';
 </script>
 
 <section class="section" id="partners">
@@ -14,20 +13,9 @@
 			lede="Models, tools and compute from across the small-AI world. Tap any one for its full kit and support channels."
 		/>
 		<div class="partner-grid" style="margin-top:44px">
-			{#each PARTNERS as p, i (p.id)}
-				<a class="reveal partner-card" use:reveal={{ delay: i * 50 }} href={'/partners/' + p.id}>
-					<div style="display:flex;justify-content:space-between;align-items:flex-start">
-						<div class="partner-logo" style="background:{p.accent}">{p.name.split(' · ')[0]}</div>
-						{#if p.sponsors}
-							<span
-								class="coord"
-								title="Sponsors a prize"
-								style="display:inline-flex;align-items:center;gap:5px;color:var(--amber-deep)"
-							>
-								<Icon name="star" size={13} stroke="var(--amber-deep)" /> sponsor
-							</span>
-						{/if}
-					</div>
+			{#each PARTNERS as p (p.id)}
+				<a class="partner-card" href={'/partners/' + p.id}>
+					<div class="partner-logo"><img src={PARTNER_LOGOS[p.id]} alt={p.name} loading="lazy" /></div>
 					<p style="margin-top:16px;color:var(--ink-2);font-size:14.5px;min-height:44px;text-wrap:pretty">
 						{p.one}
 					</p>
@@ -38,8 +26,7 @@
 				</a>
 			{/each}
 			<div
-				class="reveal partner-card"
-				use:reveal={{ delay: 350 }}
+				class="partner-card"
 				style="display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;background:var(--kraft)"
 			>
 				<span class="coord">FIND THE RIGHT ONE</span>

src/lib/components/Prizes.svelte

@@ -5,7 +5,6 @@
 	import TrackPodium from './prizes/TrackPodium.svelte';
 	import SponsorCard from './prizes/SponsorCard.svelte';
 	import BonusBadge from './prizes/BonusBadge.svelte';
-	import { reveal } from '$lib/actions/reveal';
 
 	let filter = $state('all');
 
@@ -62,7 +61,7 @@
 					<div class="coord" style="margin-bottom:16px">SPONSOR PRIZES · OWN CRITERIA PER PRIZE</div>
 					<div class="sponsor-grid">
 						{#each SPONSOR_PRIZES as s (s.id)}
-							<div class="reveal" use:reveal><SponsorCard {s} /></div>
+							<div><SponsorCard {s} /></div>
 						{/each}
 					</div>
 				</div>
@@ -78,7 +77,7 @@
 					</div>
 					<div class="badge-grid">
 						{#each BONUS_BADGES as b (b.id)}
-							<div class="reveal" use:reveal><BonusBadge {b} /></div>
+							<div><BonusBadge {b} /></div>
 						{/each}
 					</div>
 				</div>

src/lib/components/Recommender.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { BUILD_NEEDS, PARTNERS } from '$lib/data/content';
+	import { BUILD_NEEDS, PARTNERS, PARTNER_LOGOS } from '$lib/data/content';
 	import SectionHeader from './SectionHeader.svelte';
 	import Icon from './Icon.svelte';
-	import { reveal } from '$lib/actions/reveal';
 
 	let need = $state('image');
 	const active = $derived(BUILD_NEEDS.find((n) => n.id === need)!);
@@ -18,7 +17,7 @@
 			lede="Tell us the shape of your idea and we’ll point you at the partners and models worth reaching for. Then dig into their pages for the full guide."
 		/>
 
-		<div class="reveal rec" use:reveal style="margin-top:44px">
+		<div class="rec" style="margin-top:44px">
 			<div class="rec__needs">
 				{#each BUILD_NEEDS as n, i (n.id)}
 					<button class="rec__need" data-on={need === n.id} onclick={() => (need = n.id)}>
@@ -42,9 +41,7 @@
 					{#each active.matches as m (m.partner + m.model)}
 						{@const p = partnerById[m.partner]}
 						<div class="rec__match">
-							<div class="partner-logo" style="background:{p.accent}">
-								{p.name.split(' · ')[0]}
-							</div>
+							<div class="partner-logo"><img src={PARTNER_LOGOS[p.id]} alt={p.name} loading="lazy" /></div>
 							<div style="min-width:0">
 								<div class="rec__matchmeta">
 									<span class="display rec__matchname">{m.model}</span>

src/lib/components/Rules.svelte

@@ -2,7 +2,6 @@
 	import { RULES } from '$lib/data/content';
 	import SectionHeader from './SectionHeader.svelte';
 	import Icon from './Icon.svelte';
-	import { reveal } from '$lib/actions/reveal';
 </script>
 
 <section class="section section--tight" id="rules">
@@ -13,7 +12,7 @@
 			title="Entry criteria at a glance"
 			lede="The things every submission needs. Tick them off and you’re on the board."
 		/>
-		<div class="reveal rules" use:reveal style="margin-top:40px">
+		<div class="rules" style="margin-top:40px">
 			{#each RULES as r, i (r.t)}
 				<div class="rule">
 					<div class="rule__check"><Icon name="check" size={15} sw={2.4} /></div>

src/lib/components/SubmitTrail.svelte

@@ -2,7 +2,6 @@
 	import { SUBMIT_STEPS } from '$lib/data/content';
 	import SectionHeader from './SectionHeader.svelte';
 	import TopoBackdrop from './TopoBackdrop.svelte';
-	import { reveal } from '$lib/actions/reveal';
 </script>
 
 <section class="section on-dark" id="submit">
@@ -16,7 +15,7 @@
 		/>
 		<div class="trail" style="margin-top:48px;max-width:720px">
 			{#each SUBMIT_STEPS as s, i (s.t)}
-				<div class="reveal trail__step" use:reveal={{ delay: i * 70 }}>
+				<div class="trail__step">
 					<div class="trail__dot" style="background:var(--amber);border-color:var(--amber);color:#fff">
 						{i + 1}
 					</div>

src/lib/components/Tracks.svelte

@@ -3,7 +3,6 @@
 	import SectionHeader from './SectionHeader.svelte';
 	import TopoBackdrop from './TopoBackdrop.svelte';
 	import Icon from './Icon.svelte';
-	import { reveal } from '$lib/actions/reveal';
 </script>
 
 <section class="section" id="tracks">
@@ -15,8 +14,8 @@
 			lede="Solve a real problem, or wander somewhere weird. Both are equally celebrated — and carry the same prize pool."
 		/>
 		<div class="tracks" style="margin-top:44px">
-			{#each TRACKS as tr, i (tr.id)}
-				<div class="reveal track" use:reveal={{ delay: i * 90 }}>
+			{#each TRACKS as tr (tr.id)}
+				<div class="track">
 					<TopoBackdrop opacity={0.06} />
 					<div style="position:relative">
 						<div

src/lib/components/partner/CapabilityCard.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PartnerCapability } from '$lib/data/partners';
 	import Icon from '../Icon.svelte';
-	import { reveal } from '$lib/actions/reveal';
 
 	interface Props {
 		c: PartnerCapability;
@@ -9,7 +8,7 @@
 	let { c }: Props = $props();
 </script>
 
-<div class="reveal pcard" use:reveal>
+<div class="pcard">
 	<div class="capglyph"><Icon name={c.glyph} size={24} stroke="#fff" /></div>
 	<div class="pcard__name" style="font-size:19px">{c.name}</div>
 	<p style="color:var(--ink-2);font-size:14.5px;margin-top:10px;text-wrap:pretty">{c.desc}</p>

src/lib/components/partner/ModelCard.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PartnerModel } from '$lib/data/partners';
 	import Icon from '../Icon.svelte';
-	import { reveal } from '$lib/actions/reveal';
 
 	interface Props {
 		m: PartnerModel;
@@ -11,7 +10,7 @@
 	const pct = $derived(m.size !== undefined ? Math.max(4, Math.round((m.size / 32) * 100)) : 0);
 </script>
 
-<div class="reveal pcard" use:reveal>
+<div class="pcard">
 	<div class="pcard__head">
 		<div class="pcard__name">{m.name}</div>
 		{#if m.url}

src/lib/components/partner/PartnerPage.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { PartnerData } from '$lib/data/partners';
 	import { RESOURCE_GLYPH } from '$lib/data/partners';
+	import { PARTNER_LOGOS } from '$lib/data/content';
 	import Icon from '../Icon.svelte';
 	import StampBadge from '../StampBadge.svelte';
 	import TopoBackdrop from '../TopoBackdrop.svelte';
 	import LinkRow from '../LinkRow.svelte';
 	import ModelCard from './ModelCard.svelte';
 	import CapabilityCard from './CapabilityCard.svelte';
-	import { reveal } from '$lib/actions/reveal';
 
 	interface Props {
 		data: PartnerData;
@@ -66,13 +66,8 @@
 		<div class="wrap phead__grid" style="position:relative">
 			<div>
 				<div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
-					<div class="plogo">{data.name}</div>
+					<div class="plogo"><img src={PARTNER_LOGOS[data.id]} alt={data.name} loading="lazy" /></div>
 					<span class="psize-chip"><Icon name="cube" size={14} stroke="var(--paccent)" /> {data.sizeRange}</span>
-					{#if data.prize}
-						<span class="psize-chip" style="border-color:var(--amber);color:var(--amber-deep)">
-							<Icon name="star" size={14} stroke="var(--amber-deep)" /> prize sponsor
-						</span>
-					{/if}
 				</div>
 				<h1 class="display" style="font-size:clamp(40px,6vw,72px);margin-top:22px">{data.name}</h1>
 				<p class="lede" style="margin-top:18px;max-width:52ch">{data.tagline}</p>
@@ -126,7 +121,7 @@
 			<div class="wrap">
 				<div class="section-label"><span class="coord">{labels.guide}</span><span class="eyebrow">Build this with us</span></div>
 				<h2 class="display" style="font-size:clamp(28px,4vw,44px);margin-bottom:28px">If you want to build…</h2>
-				<div class="reveal guide" use:reveal style="max-width:940px">
+				<div class="guide" style="max-width:940px">
 					{#each data.guide as g, i (i)}
 						<div class="guide__row">
 							<div class="guide__want"><b>{g.want}</b></div>
@@ -156,7 +151,7 @@
 					</div>
 				{/if}
 				{#if data.starterSpace}
-					<div class="reveal starter" use:reveal style="margin-top:18px">
+					<div class="starter" style="margin-top:18px">
 						<StampBadge glyph="play" accent="var(--paccent)" size={72} spin={false} />
 						<div style="flex:1">
 							<div class="coord" style="color:var(--paccent)">STARTER SPACE</div>
@@ -183,7 +178,7 @@
 		<section class="section section--tight">
 			<div class="wrap">
 				<div class="section-label"><span class="coord">{labels.prize}</span><span class="eyebrow">Eligible prize</span></div>
-				<div class="reveal pprize" use:reveal>
+				<div class="pprize">
 					<TopoBackdrop opacity={0.07} stroke="rgba(51,49,43,.5)" />
 					<div style="position:relative"><StampBadge glyph="star" accent="var(--amber)" size={104} /></div>
 					<div style="position:relative">

src/lib/components/prizes/SponsorCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SponsorPrize } from '$lib/data/content';
+	import { PARTNER_LOGOS } from '$lib/data/content';
 	import Icon from '../Icon.svelte';
 
 	interface Props {
@@ -15,7 +16,7 @@
 <div class="sponsor-card">
 	<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:14px">
 		<div>
-			<div class="partner-logo" style="background:{accent};font-size:13px;height:30px">{s.sponsor}</div>
+			<div class="partner-logo partner-logo--sm"><img src={PARTNER_LOGOS[s.id]} alt={s.sponsor} loading="lazy" /></div>
 			<h4 class="display" style="font-size:23px;margin-top:14px;font-stretch:108%">{s.title}</h4>
 		</div>
 		<Icon name="star" size={22} stroke={accent} class="sponsor-card__star" />

src/lib/data/content.ts

@@ -19,7 +19,7 @@ export const NAV = [
 export const EVENT = {
 	name: 'Build Small',
 	tagline: 'Build something small, local, and yours.',
-	deadline: 'Aug 4, 2026',
+	deadline: 'June 15, 2026',
 	deadlineNote: 'final submission',
 	org: 'huggingface.co/BuildSmall',
 	paramCap: '32B',
@@ -206,6 +206,17 @@ export const PARTNERS: PartnerSummary[] = [
 	{ id: 'cohere', name: 'Cohere Labs', accent: '#9c5a2b', one: 'Cohere Transcribe (ASR) and Tiny Aya multilingual models.', sponsors: false, size: 'rich', tag: 'ASR · multilingual' }
 ];
 
+// Brand logos, keyed by partner id (shared across PARTNERS, SPONSOR_PRIZES and partner pages).
+export const PARTNER_LOGOS: Record<string, string> = {
+	openbmb: '/partners/openbmb.png',
+	blackforest: '/partners/blackforest.png',
+	openai: '/partners/openai.png',
+	nvidia: '/partners/nvidia.png',
+	modal: '/partners/modal.png',
+	jetbrains: '/partners/jetbrains.png',
+	cohere: '/partners/cohere.svg'
+};
+
 export type BuildNeed = {
 	id: string;
 	label: string;
@@ -280,11 +291,14 @@ export const SUBMIT_STEPS = [
 ];
 
 export const FAQS = [
-	{ q: 'What does “under 32B” actually mean?', a: 'Every model your project depends on must have under 32B total parameters (not just active parameters). You can combine several small models, but none may exceed the cap.' },
-	{ q: 'Do I have to use a sponsor’s model?', a: 'No — the general track prizes have no additional model criteria. Sponsor prizes each require their own model or platform, listed on every prize.' },
+	{ q: 'What does “under 32B” actually mean?', a: 'Every model your project depends on must have under 32B total parameters (not just active parameters). You can freely combine several models — say a 14B text model, a 7B speech model, and a 12B image model — as long as each one individually stays under the cap.' },
+	{ q: 'Do I have to use a sponsor’s model?', a: 'No. For the general tracks you can use any model you like, including ones from non-sponsoring orgs, as long as it stays under the 32B cap. Sponsor prizes each require their own model or platform and have their own criteria, listed on every prize.' },
+	{ q: 'Do I need to exclusively use a sponsor’s models to win their prize?', a: 'No — you can use other providers’ models too. But the sponsor’s models must form a core part of the experience, since each sponsor is looking for the most interesting use of their own models.' },
+	{ q: 'Am I eligible for the OpenAI Codex prize if I didn’t get free Codex credits?', a: 'Yes. The credits given to the first 1,000 registrants aren’t tied to the prize. As long as you use Codex during development and have Codex-attributed commits in the Space’s history or a linked GitHub repo, you’re eligible.' },
 	{ q: 'Is there a GPU limit?', a: 'If you rely on the provided Zero GPU resources, you’re limited to 10 Zero GPU apps per user. Otherwise, run on consumer hardware or use Modal credits.' },
-	{ q: 'Can I use a hosted API instead of running locally?', a: 'Yes. Several partners (like OpenBMB) provide free hosted API access to their models, and most models also run locally via llama.cpp or transformers. Small, open models are the spirit of the jam.' },
-	{ q: 'Can one project win multiple prizes?', a: 'Yes. A single Space can land a track prize, a sponsor prize, and one or more bonus badges all at once.' },
+	{ q: 'Can I use a hosted API instead of running locally?', a: 'Yes. Several partners (like OpenBMB) provide free hosted API access, and Hugging Face inference providers offer plenty more options. That said, not every model is available via a cloud API, and some prizes require running locally to be eligible.' },
+	{ q: 'Can one project win multiple prizes?', a: 'Yes — awards stack. One Space could place in a general track (say Backyard AI), win sponsor prizes (like OpenBMB’s Best MiniCPM Build, the OpenAI Codex prize, and Best Use of Modal), and still pick up bonus badges such as Tiny Titan if every model is ≤ 4B — all at once.' },
+	{ q: 'Can I submit multiple apps?', a: 'Yes — submit as many apps as you like, and each one will be considered.' },
 	{ q: 'How do I submit?', a: 'Ship a Gradio Space in the org, record a demo video, post on social, and update your README with links and frontmatter tags. See the trail map above for the full sequence.' }
 ];
 

src/lib/styles/global.css

@@ -206,11 +206,7 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
 /* small motif: dotted route */
 .route { stroke-dasharray: 1 7; stroke-linecap: round; }
 
-/* reveal on scroll */
-.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
-.reveal.in { opacity: 1; transform: none; }
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
   html { scroll-behavior: auto; }
 }
 
@@ -222,15 +218,77 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
   border-bottom: 2px solid var(--ink);
 }
 .nav__inner { display: flex; align-items: center; gap: 20px; height: 64px; }
+.nav__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+.nav__brand-text { font-size: 19px; font-stretch: 112%; white-space: nowrap; }
 .nav__links { display: flex; gap: 4px; margin-left: auto; }
 .nav__link {
   font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em;
   padding: 7px 12px; border-radius: 0; color: var(--ink-soft);
+  white-space: nowrap;
   transition: all .15s ease; cursor: pointer;
 }
 .nav__link:hover { color: var(--ink); background: color-mix(in srgb, var(--kraft) 60%, transparent); }
 .nav__link[data-active="true"] { color: var(--ink); background: var(--kraft); }
-@media (max-width: 880px){ .nav__links { display: none; } }
+
+/* hamburger toggle — hidden until the inline links no longer fit */
+.nav__toggle {
+  display: none;
+  margin-left: auto;
+  align-items: center; justify-content: center;
+  width: 40px; height: 40px; padding: 0;
+  background: var(--paper);
+  border: 2px solid var(--ink);
+  box-shadow: var(--press-sm);
+  cursor: pointer;
+  transition: transform .1s ease, box-shadow .1s ease;
+}
+.nav__toggle:hover  { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
+.nav__toggle:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
+
+/* submit button sized to match the toggle (40px tall, 2px stamp shadow) */
+.nav__submit {
+  height: 40px; padding: 0 16px;
+  font-size: 13px; gap: 8px;
+  box-shadow: 2px 2px 0 var(--forest-ink);
+}
+.nav__submit:hover  { transform: translate(2px,2px); box-shadow: 0 0 0 var(--forest-ink); }
+.nav__submit:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--forest-ink); }
+
+/* click-away scrim behind the popout */
+.nav__scrim {
+  display: none;
+  position: fixed; inset: 0; z-index: 40;
+  background: transparent; border: 0; padding: 0; margin: 0; cursor: default;
+}
+
+/* popout menu panel */
+.nav__menu {
+  display: none;
+  position: absolute; top: calc(100% + 8px); right: 28px; z-index: 60;
+  flex-direction: column;
+  width: min(260px, calc(100vw - 56px));
+  padding: 8px;
+  background: var(--paper);
+  border: 2px solid var(--ink);
+  box-shadow: var(--press);
+}
+.nav__menu-link {
+  font-family: var(--font-mono); font-size: 14px; letter-spacing: .02em;
+  padding: 11px 14px; color: var(--ink-soft);
+  transition: background .15s ease, color .15s ease;
+}
+.nav__menu-link:hover { color: var(--ink); background: color-mix(in srgb, var(--kraft) 60%, transparent); }
+.nav__menu-link[data-active="true"] { color: var(--ink); background: var(--kraft); }
+
+/* below ~1000px the eight inline links stop fitting — switch to the popout */
+@media (max-width: 1000px){
+  .nav__links { display: none; }
+  .nav__toggle { display: inline-flex; }
+  .nav__menu { display: flex; }
+  .nav__scrim { display: block; }
+}
+/* tiny screens: drop the wordmark, keep the stamp badge */
+@media (max-width: 400px){ .nav__brand-text { display: none; } }
 
 /* dark section */
 .on-dark { --bg: var(--forest-ink); background: var(--forest-ink); color: var(--paper); }
@@ -324,7 +382,7 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
 @media (max-width: 760px){ .podium { grid-template-columns: 1fr; } }
 
 .sponsor-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; grid-auto-rows: 1fr; }
-.sponsor-grid > .reveal { display: grid; }
+.sponsor-grid > div { display: grid; }
 .sponsor-card { position: relative; border: 2px solid var(--ink); border-radius: 0;
   background: var(--paper); padding: 24px; overflow: hidden;
   box-shadow: 6px 6px 0 var(--ink);
@@ -357,7 +415,7 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
 
 /* bonus badge grid */
 .badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: 1fr; }
-.badge-grid > .reveal { display: grid; }
+.badge-grid > div { display: grid; }
 @media (max-width: 700px){ .badge-grid { grid-template-columns: repeat(2,1fr); } }
 @media (max-width: 460px){ .badge-grid { grid-template-columns: 1fr; } }
 .bonus-card { border: 2px solid var(--ink); border-radius: 0; background: var(--paper);
@@ -467,9 +525,16 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
   padding: 22px; box-shadow: 6px 6px 0 var(--ink);
   transition: transform .15s ease, box-shadow .15s ease; display: block; }
 .partner-card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
-.partner-logo { height: 38px; border-radius: 0; display: flex; align-items: center; padding: 0 12px;
-  font-family: var(--font-display); font-weight: 800; font-stretch: 112%; color: #fff; width: fit-content;
-  letter-spacing: -0.01em; font-size: 15px; }
+.partner-logo { height: 38px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
+  padding: 7px 12px; background: #fff; border: 2px solid var(--ink); width: fit-content; }
+.partner-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; display: block; }
+.partner-logo--sm { height: 30px; padding: 5px 10px; }
+/* OpenAI wordmark has a descending “p” — nudge down so the caps optically centre */
+.partner-logo img[src*="openai"],
+.plogo img[src*="openai"] { transform: translateY(8%); }
+/* Cohere lockup reads heavier/larger than the others — shrink for even visual weight */
+.partner-logo img[src*="cohere"],
+.plogo img[src*="cohere"] { max-height: 74%; }
 @media (max-width: 900px){ .partner-grid { grid-template-columns: repeat(2,1fr); } }
 @media (max-width: 480px){ .partner-grid { grid-template-columns: 1fr; } }
 
@@ -531,9 +596,10 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--paccent) 9%, var(--bg)) 0%, var(--bg) 78%); }
 .phead__grid { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
-.plogo { font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
-  color: #fff; background: var(--paccent); padding: 9px 18px; border-radius: 0;
-  font-size: 20px; width: fit-content; letter-spacing: -0.01em; box-shadow: 3px 3px 0 var(--ink); }
+.plogo { display: inline-flex; align-items: center; justify-content: center; height: 52px;
+  padding: 10px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 0;
+  width: fit-content; box-shadow: 3px 3px 0 var(--ink); }
+.plogo img { max-height: 100%; max-width: 220px; width: auto; object-fit: contain; display: block; }
 .psize-chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
   border: 2px solid var(--ink); color: var(--paccent); padding: 6px 13px;
   border-radius: 0; box-shadow: 2px 2px 0 var(--ink);

src/routes/+page.svelte

@@ -14,23 +14,36 @@
 
 	let active = $state('top');
 
-	// scroll-spy: highlight the nav item for the section in view
+	// scroll-spy: highlight the nav item for the last section whose top has
+	// crossed a line ~40% down the viewport. Position-based so it tracks scroll
+	// monotonically and never flips back and forth between sections.
 	$effect(() => {
 		const ids = ['top', ...NAV.map((n) => n.id)];
-		const io = new IntersectionObserver(
-			(entries) => {
-				const visible = entries
-					.filter((e) => e.isIntersecting)
-					.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
-				if (visible[0]) active = visible[0].target.id;
-			},
-			{ rootMargin: '-45% 0px -50% 0px', threshold: [0, 0.25, 0.5] }
-		);
-		for (const id of ids) {
-			const el = document.getElementById(id);
-			if (el) io.observe(el);
-		}
-		return () => io.disconnect();
+		let frame = 0;
+
+		const update = () => {
+			frame = 0;
+			const line = window.innerHeight * 0.4;
+			let current = ids[0];
+			for (const id of ids) {
+				const el = document.getElementById(id);
+				if (el && el.getBoundingClientRect().top <= line) current = id;
+			}
+			active = current;
+		};
+
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+
+		update();
+		window.addEventListener('scroll', onScroll, { passive: true });
+		window.addEventListener('resize', onScroll);
+		return () => {
+			if (frame) cancelAnimationFrame(frame);
+			window.removeEventListener('scroll', onScroll);
+			window.removeEventListener('resize', onScroll);
+		};
 	});
 </script>