diff --git a/public/logo.png b/public/logo.png
index cda5d710..85055a6a 100644
Binary files a/public/logo.png and b/public/logo.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
index cda5d710..85055a6a 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/components/Countdown.module.scss b/src/components/Countdown.module.scss
index b61baf5c..4b74177a 100644
--- a/src/components/Countdown.module.scss
+++ b/src/components/Countdown.module.scss
@@ -56,6 +56,49 @@
 	line-height: 1;
 }
 
+// Compact — one line, unit letters as a suffix on the digits instead of a
+// caption underneath: `069d 22h 43m 21s`. Used where the clock sits under a
+// poster-scale statement and four captioned stubs would out-weigh it.
+.countdownCompact {
+	gap: 0.55rem;
+
+	// Sized to sit beside the footing strip's DATE/PLACE values, not tower
+	// over them — the full four-stub clock is display-scale on its own line;
+	// this one shares a row with the rest of the meta.
+	.value {
+		font-size: clamp(1.3rem, 1.75vw, 1.7rem);
+	}
+}
+
+// Reserves the days digit's own width at its longest (three figures, the
+// stretch above 99 days) so the 100 → 99 rollover doesn't nudge the suffix
+// and everything after it — a printed leading zero would do the same job
+// but read as part of the count.
+.valueDays {
+	min-width: 3ch;
+	text-align: right;
+}
+
+.unitCompact {
+	flex-direction: row;
+	align-items: baseline;
+	gap: 0.06em;
+
+	.label {
+		font-family: var(--font-bebas-neue), sans-serif;
+		font-size: clamp(1rem, 1.4vw, 1.3rem);
+		letter-spacing: 0.02em;
+		text-transform: lowercase;
+		color: rgba(240, 237, 230, 0.5);
+	}
+}
+
+@media (max-width: 600px) {
+	.countdownCompact .value {
+		font-size: 1.3rem;
+	}
+}
+
 @media (max-width: 600px) {
 	.countdown {
 		gap: 0.35rem;
diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
index 13c72c03..e230e935 100644
--- a/src/components/Countdown.tsx
+++ b/src/components/Countdown.tsx
@@ -14,34 +14,53 @@ function calcTimeLeft(): TimeLeft {
 	const diff = TARGET - Date.now();
 
 	if (diff <= 0) {
-		return { days: '000', hours: '00', minutes: '00', seconds: '00' };
+		return { days: '0', hours: '00', minutes: '00', seconds: '00' };
 	}
 
 	return {
-		days: String(Math.floor(diff / (1000 * 60 * 60 * 24))).padStart(3, '0'),
+		days: String(Math.floor(diff / (1000 * 60 * 60 * 24))),
 		hours: String(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
 		minutes: String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
 		seconds: String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0'),
 	};
 }
 
-const UNITS: { key: keyof TimeLeft; label: string }[] = [
-	{ key: 'days', label: 'Days' },
-	{ key: 'hours', label: 'Hrs' },
-	{ key: 'minutes', label: 'Min' },
-	{ key: 'seconds', label: 'Sec' },
+const UNITS: { key: keyof TimeLeft; label: string; suffix: string }[] = [
+	{ key: 'days', label: 'Days', suffix: 'd' },
+	{ key: 'hours', label: 'Hrs', suffix: 'h' },
+	{ key: 'minutes', label: 'Min', suffix: 'm' },
+	{ key: 'seconds', label: 'Sec', suffix: 's' },
 ];
 
-const INITIAL_TIME: TimeLeft = { days: '000', hours: '00', minutes: '00', seconds: '00' };
+const INITIAL_TIME: TimeLeft = { days: '0', hours: '00', minutes: '00', seconds: '00' };
 
-export default function Countdown() {
+interface Props {
+	/**
+	 * `069d 22h 43m 21s` on one line instead of four labelled stubs separated
+	 * by colons. The suffix is real rendered text on the unit, not a stylesheet
+	 * `::after` — a generated-content suffix reads fine visually but is
+	 * invisible to anything that inspects the DOM text.
+	 */
+	compact?: boolean;
+	/**
+	 * Drop the seconds unit — `54D 10H 34M`, one rhythm. Seconds ticking next
+	 * to the hero's own rotating topic is a second, unrelated clock in the
+	 * same shot. Without seconds the display only needs to update once a
+	 * minute; the 15s interval is just slack so a stale minute never survives
+	 * more than that long, not a tick visitors are meant to notice.
+	 */
+	showSeconds?: boolean;
+}
+
+export default function Countdown({ compact = false, showSeconds = true }: Props) {
 	const [time, setTime] = useState<TimeLeft>(INITIAL_TIME);
+	const units = showSeconds ? UNITS : UNITS.filter((u) => u.key !== 'seconds');
 
 	useEffect(() => {
 		setTime(calcTimeLeft());
-		const id = setInterval(() => setTime(calcTimeLeft()), 1000);
+		const id = setInterval(() => setTime(calcTimeLeft()), showSeconds ? 1000 : 15000);
 		return () => clearInterval(id);
-	}, []);
+	}, [showSeconds]);
 
 	// The clock is decorative — screen readers get the static "doors open"
 	// sentence instead. A per-second aria-label would spam AT without adding
@@ -54,13 +73,13 @@ export default function Countdown() {
 	return (
 		<>
 			<span className={s.srOnly}>Doors open on 30 October 2026 at 9:00 AM Central European Time.</span>
-			<div className={s.countdown} aria-hidden="true">
-				{UNITS.map(({ key, label }, i) => (
+			<div className={`${s.countdown} ${compact ? s.countdownCompact : ''}`} aria-hidden="true">
+				{units.map(({ key, label, suffix }, i) => (
 					<Fragment key={key}>
-						{i > 0 && <span className={s.sep}>:</span>}
-						<div className={s.unit}>
-							<span className={s.value}>{time[key]}</span>
-							<span className={s.label}>{label}</span>
+						{!compact && i > 0 && <span className={s.sep}>:</span>}
+						<div className={`${s.unit} ${compact ? s.unitCompact : ''}`}>
+							<span className={`${s.value} ${compact && key === 'days' ? s.valueDays : ''}`}>{time[key]}</span>
+							<span className={s.label}>{compact ? suffix : label}</span>
 						</div>
 					</Fragment>
 				))}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ff30e366..6fe36ec7 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -59,8 +59,8 @@ const SITEMAP = [
 						alt="DevFest.cz 2026"
 						class="footer-logo"
 						loading="lazy"
-						widths={[260, 520]}
-						sizes="(max-width: 500px) 60vw, 260px"
+						widths={[204, 408]}
+						sizes="(max-width: 500px) 60vw, 204px"
 					/>
 				</a>
 				<p class="brand-tagline">
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
index 04cd6670..b62ed1f7 100644
--- a/src/components/Footer.scss
+++ b/src/components/Footer.scss
@@ -31,7 +31,7 @@
 
 	.footer-logo {
 		display: block;
-		width: clamp(190px, 18vw, 260px);
+		width: clamp(150px, 18vw, 204px);
 		height: auto;
 	}
 
diff --git a/src/components/HeroBackground.astro b/src/components/HeroBackground.astro
index b4726a80..59529064 100644
--- a/src/components/HeroBackground.astro
+++ b/src/components/HeroBackground.astro
@@ -12,6 +12,24 @@ interface Props {
 	 */
 	focus?: string;
 	mobileFocus?: string;
+	/**
+	 * Opt-in `background-size` for the phone crop, e.g. `auto 130%`. The plate
+	 * is a square and the phone frame is 9:19.5, so a bare `cover` at some
+	 * focus points still leaves the subject too small to read at arm's length
+	 * — `mobileFocus` alone repositions the crop, this scales it. Left unset,
+	 * the phone crop stays `cover` like every other hero.
+	 */
+	mobileZoom?: string;
+	/** Opt-in desktop `width` for the plate. Defaults to the shipped 60%. */
+	width?: string;
+	/** Opt-in desktop `background-size`. Left unset, the desktop crop stays `cover`. */
+	size?: string;
+	/**
+	 * Shortens the left-to-right dissolve so the plate reaches full opacity by
+	 * 62% of its own width instead of 92% — a fade that stays transparent past
+	 * its own midpoint turns most of a paid-for photograph into flat black.
+	 */
+	tightMask?: boolean;
 }
 
 const {
@@ -19,14 +37,18 @@ const {
 	mobilePhotoOpacity = 0.55,
 	focus = 'center',
 	mobileFocus = '38% center',
+	mobileZoom,
+	width,
+	size,
+	tightMask = false,
 } = Astro.props;
 ---
 
 <div class="hero-bg" aria-hidden="true"></div>
 <div
-	class="hero-photo"
+	class={`hero-photo${tightMask ? ' hero-photo--tight-mask' : ''}`}
 	aria-hidden="true"
-	style={`--hero-photo-opacity:${photoOpacity};--hero-photo-opacity-mobile:${mobilePhotoOpacity};--hero-photo-pos:${focus};--hero-photo-pos-mobile:${mobileFocus};`}
+	style={`--hero-photo-opacity:${photoOpacity};--hero-photo-opacity-mobile:${mobilePhotoOpacity};--hero-photo-pos:${focus};--hero-photo-pos-mobile:${mobileFocus};${mobileZoom ? `--hero-photo-size-mobile:${mobileZoom};` : ''}${width ? `--hero-photo-width:${width};` : ''}${size ? `--hero-photo-size:${size};` : ''}`}
 ></div>
 
 <style lang="scss">
diff --git a/src/components/HeroBackground.scss b/src/components/HeroBackground.scss
index 0305eb47..43d6b441 100644
--- a/src/components/HeroBackground.scss
+++ b/src/components/HeroBackground.scss
@@ -1,9 +1,11 @@
 	.hero-bg {
 		position: absolute;
 		inset: 0;
+		// One wash, and it answers to the frame: the lamp in the plate sits
+		// upper right, so that's the only light source here. A second bloom in
+		// the lower left answered to nothing in the shot and read as
+		// decoration rather than lighting.
 		background:
-			// distant neon — a red light source glowing in the alley.
-			radial-gradient(ellipse 36% 50% at 12% 78%, rgba(204, 0, 0, 0.16) 0%, transparent 62%),
 			radial-gradient(ellipse 30% 40% at 70% 18%, rgba(204, 0, 0, 0.07) 0%, transparent 60%),
 			#050505;
 		z-index: 0;
@@ -14,9 +16,9 @@
 		top: 0;
 		bottom: 0;
 		right: 0;
-		width: 60%;
+		width: var(--hero-photo-width, 60%);
 		background-image: url('/hero-detective.webp');
-		background-size: cover;
+		background-size: var(--hero-photo-size, cover);
 		background-position: var(--hero-photo-pos, center);
 		// Cinematic grade — push the detective plate to high-contrast B&W noir.
 		filter: grayscale(1) contrast(1.12) brightness(0.84);
@@ -44,8 +46,32 @@
 		pointer-events: none;
 		z-index: 1;
 
+		// A shorter dissolve for a frame that widened the plate: the shipped
+		// gradient is still transparent at half its own width, which on a wider
+		// plate turns most of a paid-for photograph into flat black. This one
+		// clears the type column and gets out of the way by 62%.
+		&.hero-photo--tight-mask {
+			mask-image: linear-gradient(
+				to right,
+				transparent 0%,
+				rgba(0, 0, 0, 0.1) 16%,
+				rgba(0, 0, 0, 0.34) 30%,
+				rgba(0, 0, 0, 0.72) 46%,
+				#000 62%
+			);
+			-webkit-mask-image: linear-gradient(
+				to right,
+				transparent 0%,
+				rgba(0, 0, 0, 0.1) 16%,
+				rgba(0, 0, 0, 0.34) 30%,
+				rgba(0, 0, 0, 0.72) 46%,
+				#000 62%
+			);
+		}
+
 		@media (max-width: 900px) {
 			width: 100%;
+			background-size: var(--hero-photo-size-mobile, cover);
 			background-position: var(--hero-photo-pos-mobile, 38% center);
 			opacity: var(--hero-photo-opacity-mobile, 0.55);
 			mask-image: linear-gradient(
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
index 253f79ca..89a33da2 100644
--- a/src/components/Menu.astro
+++ b/src/components/Menu.astro
@@ -40,15 +40,15 @@ const isCurrent = (href: string) => {
 <header id="site-header" class="site-header" data-state="top" data-home={isHome ? 'true' : 'false'}>
 	<a href="/" class="brand" aria-label="DevFest.cz 2026 — home">
 		<!-- Header sits above the fold on every page, so it loads eagerly; the
-		     intrinsic width/height come from the source (5:1), and `widths` caps
-		     the srcset at the 210px CSS maximum up to 2× DPR. -->
+		     intrinsic width/height come from the source (4.2:1), and `widths` caps
+		     the srcset at the 176px CSS maximum up to 2× DPR. -->
 		<Image
 			src={logo}
 			alt="DevFest.cz 2026"
 			class="brand-logo"
 			loading="eager"
-			widths={[210, 420]}
-			sizes="210px"
+			widths={[165, 330]}
+			sizes="176px"
 		/>
 	</a>
 
diff --git a/src/components/Menu.scss b/src/components/Menu.scss
index 7a8448a1..842a050c 100644
--- a/src/components/Menu.scss
+++ b/src/components/Menu.scss
@@ -210,6 +210,26 @@
 		border-color: var(--color-accent-hot);
 	}
 
+	// The home hero carries its own "Get tickets" button, in view whenever the
+	// bar is still transparent — a second route to the same place inside one
+	// screen. It comes back the moment the hero has scrolled away.
+	#site-header[data-home='true'][data-state='top'] .header-cta {
+		display: none;
+	}
+
+	// The toggle is the only bordered box left on the hero's first screen once
+	// the CTA above hands the accent to the hero's own button — a boxed
+	// control beside an unboxed one reads as two systems. Border comes back on
+	// hover/focus (below) and once the bar goes solid.
+	#site-header[data-home='true'][data-state='top'] .nav-toggle {
+		border-color: transparent;
+	}
+
+	#site-header[data-home='true'][data-state='top'] .nav-toggle:hover,
+	#site-header[data-home='true'][data-state='top'] .nav-toggle:focus-visible {
+		border-color: var(--color-text);
+	}
+
 	.nav {
 		display: flex;
 		align-items: center;
diff --git a/src/lib/ticker.ts b/src/lib/ticker.ts
index 1e6067ca..2770be44 100644
--- a/src/lib/ticker.ts
+++ b/src/lib/ticker.ts
@@ -1,3 +1,5 @@
+import { TOPICS } from './topics';
+
 /**
  * The running band's copy.
  *
@@ -8,13 +10,8 @@
  *
  * `/partners` is the deliberate exception: that page is about partnering, not
  * about the programme, so it keeps its own list (see `partners.astro`).
+ *
+ * Same five subjects as the hero's topic set (`TOPICS` in `topics.ts`), not a
+ * second list — no product names here either.
  */
-export const EVENT_TOPICS = [
-	'AI & Machine Learning',
-	'Android & Kotlin',
-	'Web Technologies',
-	'Cloud & DevOps',
-	'Flutter & Dart',
-	'Security',
-	'Open Source',
-] as const;
+export const EVENT_TOPICS = TOPICS.map((t) => t.name);
diff --git a/src/lib/topics.ts b/src/lib/topics.ts
new file mode 100644
index 00000000..6e22d5ff
--- /dev/null
+++ b/src/lib/topics.ts
@@ -0,0 +1,21 @@
+/**
+ * The audited topic set shown under the hero statement and in the ticker.
+ *
+ * No product names. The set describes what the conference is about, and a
+ * subject outlives the vendor's naming — a track called after a specific
+ * model or OS dates the page the moment either is renamed, and reads as a
+ * sponsor list rather than a programme. The talks still name the products
+ * they are about; the hero and the ticker do not.
+ *
+ * Mobile and web are one entry, not two. Split, they read as two platform
+ * camps and the poster spends two of six lines on the same answer: what you
+ * ship to a person. Merged, accessibility stays in the description where it
+ * belongs — it is a property of the work, not a track beside it.
+ */
+export const TOPICS = [
+	{ n: '01', name: 'AI Agents', desc: 'Agents that touch real code and real systems.' },
+	{ n: '02', name: 'Generative UI', desc: 'LLMs as a product layer, not a demo.' },
+	{ n: '03', name: 'Cloud & Backends', desc: 'Where the AI actually runs — access, data, and the bill.' },
+	{ n: '04', name: 'Mobile & Web', desc: 'What you ship to a person — on every device, for every user.' },
+	{ n: '05', name: 'Humans in Tech', desc: 'Teams, trust, and the part that is not code.' },
+] as const;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 65426be1..70adcc0e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,6 +11,7 @@ import Tickets from '../components/Tickets';
 import SpeakersTeaser from '../components/SpeakersTeaser';
 import { getActivePartnerTiers } from '../lib/partners';
 import { EVENT_TOPICS } from '../lib/ticker';
+import { TOPICS } from '../lib/topics';
 
 // Homepage "silver+" strip — one labelled row per tier, top tier first, so the
 // ladder reads the same here as it does on /partners (row scale steps down with
@@ -66,7 +67,7 @@ const facts = [
 
 ---
 
-<BaseLayout>
+<BaseLayout description="DevFest.cz 2026 — Prague's developer conference & festival: AI agents, generative UI, cloud & backends, mobile & web accessibility, and the humans behind it. October 30, 2026. Tickets on sale now.">
 	<!-- Preload the LCP hero background so it isn't discovered only after CSS parse -->
 	<link
 		slot="head"
@@ -79,7 +80,16 @@ const facts = [
 	<main class="page-stack">
 		<!-- HERO -->
 		<section id="hero" class="scene">
-			<HeroBackground photoOpacity={0.85} mobilePhotoOpacity={0.55} />
+			<HeroBackground
+				photoOpacity={0.85}
+				mobilePhotoOpacity={0.55}
+				mobileFocus="42% 100%"
+				mobileZoom="auto 130%"
+				width="74%"
+				size="auto 132%"
+				focus="54% 46%"
+				tightMask
+			/>
 			<div class="scene-vignette" aria-hidden="true"></div>
 
 			<div class="hero-inner">
@@ -89,21 +99,37 @@ const facts = [
 						alt=""
 						class="hero-logo"
 						priority
-						widths={[280, 560, 620, 1240]}
-						sizes="(max-width: 700px) 82vw, 560px"
+						widths={[220, 439, 487, 974]}
+						sizes="(max-width: 700px) 82vw, 439px"
 					/>
-					<span class="sr-only">DevFest.cz 2026 — Prague Developer Conference. Web, Mobile, Cybersecurity, AI/ML. October 30, 2026.</span>
+					<span class="sr-only">DevFest.cz 2026 — Prague Developer Conference. AI agents, generative UI, cloud & backends, mobile & web accessibility. October 30, 2026.</span>
 				</h1>
 
 				<p class="hero-statement display">
 					Prague&rsquo;s most original<br />conference is <span class="red">back.</span>
 				</p>
 
-				<p class="hero-note">And it&rsquo;s brought a few mysteries with it.</p>
+				<!-- The topic set as one rotating subject in a fixed slot, not five
+				     lines under the statement — the poster keeps its column, the
+				     set still covers all five. The full set stays in the DOM at
+				     all times for SEO and screen readers (`aria-label` on the
+				     group); the rotating slot itself is `aria-hidden` so the
+				     swap is never announced as a live-region update. Hover or
+				     focus on the group holds the current subject (SC 2.2.2);
+				     `prefers-reduced-motion` unstacks the slot into the static
+				     set below instead of starting the rotation. -->
+				<p class="topics-rotor" tabindex="0" role="group" aria-label={`What we cover: ${TOPICS.map((t) => t.name).join(', ')}`}>
+					<span class="topics-rotor-label" aria-hidden="true">What we cover</span>
+					<span class="topics-rotor-slot" data-rotor aria-hidden="true">
+						{TOPICS.map((t, i) => (
+							<span class={`topics-rotor-item${i === 0 ? ' is-active' : ''}`}>{t.name}</span>
+						))}
+					</span>
+				</p>
 
 				<div class="hero-actions">
 					<a href="#tickets" class="btn-primary">Get tickets</a>
-					<a href="#newsletter" class="btn-ghost">Stay in the loop</a>
+					<a href="#newsletter" class="btn-ghost"><span class="btn-ghost-label">Stay in the loop</span></a>
 				</div>
 			</div>
 
@@ -114,7 +140,7 @@ const facts = [
 				<dl class="hero-meta">
 					<div class="meta-item">
 						<dt class="meta-label">Date</dt>
-						<dd class="meta-value">30. 10. 2026</dd>
+						<dd class="meta-value">30 Oct 2026</dd>
 					</div>
 					<div class="meta-item">
 						<dt class="meta-label">Place</dt>
@@ -124,7 +150,7 @@ const facts = [
 								href="https://maps.app.goo.gl/W5bcH4BgFQ1B8QAm8"
 								target="_blank"
 								rel="noopener noreferrer"
-							>Uhelný Mlýn<span class="meta-sub">near Prague</span></a>
+							>Uhelný Mlýn</a>
 						</dd>
 					</div>
 				</dl>
@@ -140,7 +166,7 @@ const facts = [
 						client-side navigations (e.g. back/forward to `/`), not on
 						`/` → `/team`, where the island is torn down as usual.
 					*/}
-					<Countdown client:load transition:persist />
+					<Countdown compact showSeconds={false} client:load transition:persist />
 				</div>
 			</div>
 		</section>
@@ -303,4 +329,50 @@ const facts = [
 		const shuffled = [...unique, ...unique.map((n) => n.cloneNode(true) as HTMLElement)];
 		track.replaceChildren(...shuffled);
 	});
+
+	// The topic rotor. `prefers-reduced-motion` is checked once here — the
+	// stylesheet already unstacks the slot into the full static set for that
+	// visitor, so the loop below simply never starts and that static reading
+	// is the deployed one, not a fallback.
+	let rotorInterval: ReturnType<typeof setInterval> | undefined;
+
+	document.addEventListener('astro:before-swap', () => {
+		clearInterval(rotorInterval);
+	});
+
+	document.addEventListener('astro:page-load', () => {
+		clearInterval(rotorInterval);
+		const slot = document.querySelector<HTMLElement>('[data-rotor]');
+		if (!slot) return;
+		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+		const items = [...slot.children] as HTMLElement[];
+		let i = 0;
+		// SC 2.2.2 (Pause, Stop, Hide): the rotation runs longer than 5s, so it
+		// must be stoppable. Pointer over the group or keyboard focus inside it
+		// holds the current subject; there is no separate visible control, so
+		// the group itself carries the focus ring.
+		let paused = false;
+		const group = slot.closest<HTMLElement>('.topics-rotor');
+		group?.addEventListener('mouseenter', () => { paused = true; });
+		group?.addEventListener('mouseleave', () => { paused = false; });
+		group?.addEventListener('focusin', () => { paused = true; });
+		group?.addEventListener('focusout', () => { paused = false; });
+
+		// Out, THEN in — never both at once. Cross-fading two names in one slot
+		// leaves both legible mid-swap, which reads as a rendering fault rather
+		// than a change.
+		rotorInterval = setInterval(() => {
+			if (paused) return;
+			const prev = items[i];
+			prev.classList.remove('is-active');
+			prev.classList.add('is-leaving');
+			i = (i + 1) % items.length;
+			const next = items[i];
+			setTimeout(() => {
+				prev.classList.remove('is-leaving');
+				next.classList.add('is-active');
+			}, 260);
+		}, 2600);
+	});
 </script>
diff --git a/src/pages/index.scss b/src/pages/index.scss
index 207e4fc8..1f5329cb 100644
--- a/src/pages/index.scss
+++ b/src/pages/index.scss
@@ -30,10 +30,25 @@
 		flex: 1;
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
+		// Bottom-set on the phone (the mobile fold fix this column depends on —
+		// see the `#hero` comment below); hung from the top edge on desktop.
+		justify-content: flex-end;
 		align-items: flex-start;
 	}
 
+	// Hung from the top edge, not centred: the rotor collapsed five lines of
+	// topic type down to one, and a centred column let that height back into
+	// ~520px of dead air above the wordmark instead of retiring it. Top-set
+	// puts the wordmark a step under `MENU` and lets the leftover air pool
+	// below, over the strip — the rhythm the poster wants. Phone keeps the
+	// bottom-set rule: it is what the mobile-fold fix relies on to fill the
+	// frame without an auto-height `#hero`.
+	@media (min-width: 901px) {
+		.hero-inner {
+			justify-content: flex-start;
+		}
+	}
+
 	.hero-title {
 		line-height: 0;
 		// Height-aware: the gap under the wordmark is one of the four vertical
@@ -41,6 +56,9 @@
 		// against an svh term lets a short viewport take the small value while a
 		// tall desktop keeps the poster spacing.
 		margin: 0 0 clamp(0.9rem, min(3.5vw, 3svh), 2.75rem);
+		// The wordmark PNG carries ~2.8% of transparent margin on its left; left
+		// as-is the mark sits visibly right of the statement's stem below it.
+		transform: translateX(-2.77%);
 		filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.9));
 		animation: fadeInUp 0.9s ease 0.1s both;
 	}
@@ -49,7 +67,7 @@
 		// The wordmark is ~5:1, so its WIDTH is what spends vertical budget.
 		// Capping it against svh as well keeps a 900px-tall desktop from giving
 		// 112px of the hero's height to the mark alone.
-		width: clamp(220px, min(44vw, 44svh), 560px);
+		width: clamp(173px, min(44vw, 44svh), 439px);
 		max-width: 100%;
 		height: auto;
 		display: block;
@@ -68,28 +86,172 @@
 		// `balance` fights the explicit <br> — the line breaks are art-directed.
 		text-wrap: initial;
 		animation: fadeInUp 0.9s ease 0.25s both;
+
+		// The sentence meets the figure instead of stopping beside him — a
+		// clean seam between two rectangles (type block, photograph) is what
+		// reads as a caption next to a photo rather than a poster. Nudged past
+		// where the hat brim already reaches so the letterform itself crosses
+		// onto his shoulder.
+		@media (min-width: 901px) {
+			.red {
+				display: inline-block;
+				transform: translateX(0.12em);
+			}
+		}
 	}
 
-	// A quiet second line. No red border and no italic serif.
-	.hero-note {
-		margin-top: clamp(0.8rem, min(2.5vw, 2svh), 1.9rem);
-		font-family: var(--font-special-elite), cursive;
-		font-size: var(--fs-lede);
-		line-height: 1.6;
-		color: rgba(240, 237, 230, 0.7);
-		max-width: 44ch;
+	// The set as one rotating subject in a fixed slot instead of five lines
+	// under the statement — motion buys the poster the one thing space
+	// couldn't: it covers all five topics without spending five rows on them.
+	// Tight–loose–tight rhythm: the big pause sits ABOVE the subject (mark and
+	// statement are one cluster, subject and action the next), not below it.
+	.topics-rotor {
+		display: grid;
+		gap: clamp(0.3rem, 0.9vh, 0.5rem);
+		margin: clamp(2rem, 9vh, 6rem) 0 0;
+		width: 100%;
 		animation: fadeInUp 0.9s ease 0.4s both;
+
+		&:focus-visible {
+			outline: 2px solid var(--color-accent-hot);
+			outline-offset: var(--focus-gap, 0.5rem);
+		}
 	}
 
+	// Indented by its own tracking so the caption starts on the same optical
+	// stem as the name under it — a 10px mono line flush with a 100px headline
+	// reads as a leftover, not as an opening.
+	.topics-rotor-label {
+		margin: 0 0 0 0.26em;
+		font-family: var(--font-jetbrains-mono), monospace;
+		font-size: clamp(0.56rem, 0.66vw, 0.62rem);
+		letter-spacing: 0.26em;
+		text-transform: uppercase;
+		color: rgba(240, 237, 230, 0.55);
+	}
+
+	// Every name occupies the same grid cell, so the slot measures the widest
+	// one and the block's height and width stay constant across the cycle —
+	// nothing else on the page reflows as the subject changes.
+	.topics-rotor-slot {
+		display: grid;
+		grid-template-areas: 'slot';
+		justify-items: start;
+	}
+
+	// Mono, full ink, one grade under the statement — the subject separates
+	// from the headline by CATEGORY, not by tint. A dimmed cream on the one
+	// thing that moves reads as disabled; two faces is a difference the eye
+	// reads instantly, a tint is not.
+	.topics-rotor-item {
+		grid-area: slot;
+		font-family: var(--font-jetbrains-mono), monospace;
+		font-size: clamp(1.1rem, 2.15vw, 2.05rem);
+		line-height: 1.15;
+		letter-spacing: 0.035em;
+		text-transform: uppercase;
+		color: rgba(240, 237, 230, 0.96);
+		opacity: 0;
+		transform: translateY(0.3em);
+		transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
+	}
+
+	.topics-rotor-item.is-active {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	// Out is faster than in and travels the other way, so the two names are
+	// never both legible mid-swap — a cross-fade of two half-transparent words
+	// reads as a rendering fault, not a change.
+	.topics-rotor-item.is-leaving {
+		opacity: 0;
+		transform: translateY(-0.3em);
+		transition-duration: 260ms;
+	}
+
+	// The full set, unstacked into two mono columns instead of rotating. This
+	// is also what a visitor with `prefers-reduced-motion: reduce` sees — the
+	// script that drives the rotation never starts (see the inline script
+	// below), so this is the deployed reading for them, not a fallback.
+	@media (prefers-reduced-motion: reduce) {
+		.topics-rotor-slot {
+			grid-template-areas: none;
+			grid-auto-flow: column;
+			grid-template-rows: repeat(3, auto);
+			grid-template-columns: repeat(2, minmax(0, max-content));
+			column-gap: clamp(1.25rem, 3vw, 3rem);
+			row-gap: 0.1rem;
+		}
+
+		.topics-rotor-item {
+			grid-area: auto;
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+	// Close under the rotor (~52px at the cap): the big pause in the column
+	// sits above the subject, not below it, so this gap stays tight.
 	.hero-actions {
 		margin-top: clamp(1.25rem, min(4.5vw, 4svh), 3.5rem);
 		display: flex;
-		gap: 0.9rem;
+		gap: clamp(1.25rem, 3vw, 2.25rem);
 		align-items: center;
 		flex-wrap: wrap;
 		animation: fadeInUp 0.9s ease 0.55s both;
 	}
 
+	// Optical, not metric: a filled rectangle aligned to the same x as a
+	// letter stem reads as sitting inside the column above it.
+	.hero-actions .btn-primary {
+		transform: translateX(-2px);
+	}
+
+	// One secondary control, one treatment — the outlined pill next to the
+	// filled one reads as a second button of equal weight; the system already
+	// dropped that device everywhere else.
+	.hero-actions .btn-ghost {
+		width: auto;
+		min-height: 44px;
+		border: 0;
+		background: none;
+		padding: 0.55rem 0;
+		justify-content: flex-start;
+		color: rgba(240, 237, 230, 0.78);
+		text-decoration: none;
+	}
+
+	// The control's own label carries the underline instead of the browser's
+	// `text-decoration`, which on tracked-out mono runs to the end of the
+	// inline box — one tracking space past the last glyph — and hangs right.
+	// `::after` with a negative margin pulls the rule back to the letter.
+	.btn-ghost-label {
+		display: inline-block;
+		white-space: nowrap;
+		border-bottom: 1px solid currentColor;
+		padding-bottom: 0.4em;
+
+		&::after {
+			content: '';
+			display: inline-block;
+			margin-left: -0.22em;
+		}
+	}
+
+	// Two controls, two different hit areas otherwise: the ghost stretches to
+	// the filled button's block instead of carrying its own 44px, so the row
+	// reads as one control surface with two labels.
+	@media (min-width: 901px) {
+		.hero-actions .btn-ghost {
+			align-self: stretch;
+			min-height: 0;
+			padding-block: 0;
+			display: inline-flex;
+			align-items: center;
+		}
+	}
+
 	/* ---- footing strip ---- */
 	// Full-bleed row along the base of the hero, one hairline above.
 	.hero-foot {
@@ -122,21 +284,47 @@
 		margin: 0;
 	}
 
+	// Lifted from 0.55 to 0.72: at the darker part of the plate this sits on,
+	// 0.55 fell under 4.5:1.
 	.meta-label {
 		font-family: var(--font-jetbrains-mono), monospace;
 		font-size: var(--fs-label);
 		letter-spacing: 0.26em;
 		text-transform: uppercase;
-		color: rgba(240, 237, 230, 0.55);
+		color: rgba(240, 237, 230, 0.72);
 		white-space: nowrap;
 		margin: 0;
 	}
 
+	// One grid, one intent: DATE and PLACE are a single cluster set from the
+	// left edge of the measure, the clock closes it on the right. Three even
+	// columns put PLACE on a third that answered to nothing above it and gave
+	// the clock a second, different alignment inside the last third — two
+	// alignments on one rule. The space this leaves between the cluster and
+	// the clock is the widest on the strip, so it reads as separation.
+	@media (min-width: 901px) {
+		.hero-foot {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-end;
+		}
+
+		.hero-meta {
+			display: flex;
+		}
+
+		.hero-clock {
+			align-items: flex-end;
+			text-align: right;
+		}
+	}
+
 	.meta-value {
 		font-family: var(--font-bebas-neue), sans-serif;
 		font-size: clamp(1.6rem, 2.4vw, 2.2rem);
 		line-height: 1;
 		letter-spacing: 0.04em;
+		text-transform: uppercase;
 		color: var(--color-text);
 		white-space: nowrap;
 		margin: 0;
@@ -161,10 +349,6 @@
 		&:hover,
 		&:focus-visible {
 			color: var(--color-accent-hot);
-
-			.meta-sub {
-				color: inherit;
-			}
 		}
 	}
 
@@ -512,6 +696,13 @@
 
 	/* ===================== RESPONSIVE ===================== */
 	@media (max-width: 900px) {
+		// Back to 100svh (the base rule, unset here). Auto height let the hero
+		// shrink under the viewport whenever its content fell short of a full
+		// screen — which put the running ticker's OWN topic set back in the
+		// fold, 100px under the strip, in the same hollow face the mock keeps
+		// off-screen. `.hero-actions .btn-ghost` below is what pays for it: the
+		// content that used to overflow a fixed-height frame is now one control
+		// shorter, so nothing needs a hard-coded `hero-inner` height to fit.
 		#hero {
 			// Back to a full-viewport frame. This used to be `min-height: auto`
 			// so the footing strip scrolled in under the CTAs instead of landing
@@ -530,7 +721,23 @@
 		}
 
 		.hero-statement {
-			max-width: 14ch;
+			font-size: clamp(2rem, 10vw, 2.6rem);
+			max-width: none;
+		}
+
+		.topics-rotor-item {
+			font-size: 1.15rem;
+			letter-spacing: 0.03em;
+		}
+
+		.hero-actions {
+			margin-top: clamp(1.5rem, 4.2vh, 2.5rem);
+		}
+
+		// "Stay in the loop" has its own section further down; on the phone it
+		// is the one control in the fold that isn't the primary decision.
+		.hero-actions .btn-ghost {
+			display: none;
 		}
 
 		.hero-foot {
@@ -566,13 +773,13 @@
 			max-width: 12ch;
 		}
 
-		// The flavour line is the one element in the hero that carries no data.
-		// At 375x667 it costs ~70px (two lines plus its inset) — the difference
-		// between the clock clearing the fold and sitting under it — so below
-		// the phone breakpoint it runs at UI size instead of lede size.
-		.hero-note {
+		// The rotor is the one element in the hero that carries no data of its
+		// own (date/venue/clock do). At 375x667 its mono item ran at lede scale
+		// and cost more height than the slot needs — the difference between the
+		// clock clearing the fold and sitting under it — so below the phone
+		// breakpoint it runs at UI size instead.
+		.topics-rotor-item {
 			font-size: var(--fs-ui);
-			max-width: 30ch;
 		}
 
 		.hero-actions {
@@ -591,7 +798,7 @@
 				padding-block: 1rem;
 				// Full-width, so the centred label was the only thing on the
 				// phone hero sitting on its own axis — wordmark, statement,
-				// flavour line and the whole footing strip are flush left, and
+				// topic rotor and the whole footing strip are flush left, and
 				// two centred labels in the middle of that column read as a
 				// mis-set block. Left-set with a short inline inset (not 2.8rem:
 				// the label should land near the same edge as the type above it).
@@ -631,9 +838,8 @@
 			font-size: 2.25rem;
 		}
 
-		.hero-note {
+		.topics-rotor {
 			margin-top: 0.65rem;
-			line-height: 1.45;
 		}
 	}
 
@@ -643,16 +849,16 @@
 	// stopped shrinking — the statement hit the floor of its `clamp()`, and the
 	// stacked CTAs and the footing strip are fixed — so the block bottomed out at
 	// ~633px and the clock fell under the fold. This rule takes the floor down to
-	// 541px: the flavour line goes — the same trade the landscape rule makes, and
+	// 541px: the rotor goes — the same trade the landscape rule makes, and
 	// it is the one element in the hero carrying no data — and the insets around
 	// the wordmark, the CTAs and the strip are trimmed. Calibrated on the
 	// tightest case (375x553, 12px to spare): the statement and the wordmark keep
-	// the sizes the <=680px rule already gives them, because dropping the flavour
-	// line alone buys back more than shrinking the type would. The date, the
+	// the sizes the <=680px rule already gives them, because dropping the rotor
+	// alone buys back more than shrinking the type would. The date, the
 	// venue and the clock stay whole.
 	//
 	// `pointer: coarse`, like the landscape rule below: a desktop at 400% zoom is
-	// 320x256 CSS px and would otherwise match, and dropping `.hero-note` because
+	// 320x256 CSS px and would otherwise match, and dropping `.topics-rotor` because
 	// of zoom is the 1.4.10 reflow fault this PR already fixed once.
 	@media (max-width: 600px) and (max-height: 630px) and (pointer: coarse) {
 		.hero-inner {
@@ -663,7 +869,7 @@
 			margin-bottom: 0.7rem;
 		}
 
-		.hero-note {
+		.topics-rotor {
 			display: none;
 		}
 
@@ -687,19 +893,19 @@
 	}
 
 	// Landscape phones (<=500px of height). The full block — wordmark, poster
-	// statement, flavour line, two stacked CTAs and the footing strip — cannot
+	// statement, topic rotor, two stacked CTAs and the footing strip — cannot
 	// fit 375px of height with 71px of it already spent clearing the header
 	// bar; scaling the type down far enough to make it fit turns the poster
 	// into a caption. So this is the one viewport where the hero is allowed to
-	// compress instead: the flavour line goes, the CTAs go back side by side,
+	// compress instead: the rotor goes, the CTAs go back side by side,
 	// and the statement runs at UI scale on a wider measure. The date, venue
 	// and clock — the data this whole change exists to surface — stay above the
 	// fold.
 	// `pointer: coarse` keeps this off a zoomed desktop: at 400% zoom the
 	// viewport is 320x256 CSS px, which is landscape under 500px tall, and the
-	// rule would drop `.hero-note` — removing content because of zoom is a
+	// rule would drop `.topics-rotor` — removing content because of zoom is a
 	// 1.4.10 reflow fault. A mouse pointer never matches `coarse`, so the
-	// zoomed window keeps the line and simply grows taller.
+	// zoomed window keeps the rotor and simply grows taller.
 	@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
 		#hero {
 			padding-top: calc(4rem + env(safe-area-inset-top));
@@ -722,7 +928,7 @@
 			max-width: 26ch;
 		}
 
-		.hero-note {
+		.topics-rotor {
 			display: none;
 		}
 
@@ -751,7 +957,7 @@
 	@media (prefers-reduced-motion: reduce) {
 		.hero-title,
 		.hero-statement,
-		.hero-note,
+		.topics-rotor,
 		.hero-actions,
 		.hero-foot,
 		.gallery-track { animation: none; }