From e193e53496bc213895d2caae63f1ac0ae3636520 Mon Sep 17 00:00:00 2001
From: Jacob Zweifel <jacob@jacobzweifel.com>
Date: Mon, 24 Aug 2026 17:41:10 -0400
Subject: [PATCH] Banner heroes, section grammar, and the sifa profile fields

The hero now uses the imagery the user's PDS already holds. With a
Bluesky banner present, the default hero renders it as a full-width
band under the masthead with the avatar overlapping its lower edge; a
new optional style field on page.mooring.site#heroSection selects the
postcard variant instead, which mounts the banner as a framed
photograph beside the type block. Without a banner the hero is a
media-object row: a 184px avatar plate beside the name. The value
space is open; unknown styles fall back to band.

The content column now centres on a --shell width instead of anchoring
left, and the banner hero splits into name + tagline on the left with
the bio right of a hairline rule, filling the previously dead field
right of the headlines.

The sifa profile carries more than a headline, and the theme now shows
it: pronouns sit beside the h1 in every hero variant, the career
section opens with the about text as prose, and openTo tokens render
as accent-outline chips with display labels mapped from id.sifa.defs
(camelCase-split fallback for unknown tokens).

Section grammar now differs by content type: writing is title-first
with the document description as excerpt and a Read link; career rows
stay date-first with the current role's date in accent and education
under a Study sublabel; posts remain notes. Long unbreakable display
names wrap instead of overflowing. og:image prefers the banner over
the avatar. Articles centre on the measure.

11 new or updated unit tests (178 in web, 26 in lexicons).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../lib/components/theme/SiteArticle.svelte   |   8 +-
 .../lib/components/theme/SiteLayout.svelte    |  18 +-
 .../lib/components/theme/SiteSections.svelte  | 609 ++++++++++++++----
 .../lib/server/atmosphere/atmosphere.test.ts  |  44 +-
 apps/web/src/lib/server/atmosphere/bluesky.ts |   6 +-
 apps/web/src/lib/server/atmosphere/sifa.ts    |  32 +-
 .../lib/server/atmosphere/standard-site.ts    |   2 +
 apps/web/src/lib/server/render/render.test.ts |  17 +-
 apps/web/src/lib/server/render/sections.ts    |   3 +
 apps/web/src/lib/server/render/site.ts        |   8 +-
 apps/web/src/lib/site-view.ts                 |  14 +-
 apps/web/src/routes/+page.svelte              |   4 +-
 apps/web/src/routes/s/[handle]/+page.svelte   |   4 +-
 docs/NEXT.md                                  |  13 +-
 lexicons/page/mooring/site.json               |   5 +
 15 files changed, 627 insertions(+), 160 deletions(-)

diff --git a/apps/web/src/lib/components/theme/SiteArticle.svelte b/apps/web/src/lib/components/theme/SiteArticle.svelte
index 7ee3275..9153da1 100644
--- a/apps/web/src/lib/components/theme/SiteArticle.svelte
+++ b/apps/web/src/lib/components/theme/SiteArticle.svelte
@@ -25,13 +25,7 @@
 <style>
 	article {
 		max-width: var(--measure);
-		margin-left: calc(var(--rail) + 2.5rem);
-	}
-
-	@media (max-width: 52rem) {
-		article {
-			margin-left: 0;
-		}
+		margin-inline: auto;
 	}
 
 	header {
diff --git a/apps/web/src/lib/components/theme/SiteLayout.svelte b/apps/web/src/lib/components/theme/SiteLayout.svelte
index f17945a..cfa6e43 100644
--- a/apps/web/src/lib/components/theme/SiteLayout.svelte
+++ b/apps/web/src/lib/components/theme/SiteLayout.svelte
@@ -105,6 +105,9 @@
 
 		--measure: 34rem;
 		--rail: 9rem;
+		--pad: clamp(1.25rem, 5vw, 4rem);
+		/* rail + gap + the section body column; sections centre on this. */
+		--shell: 54.5rem;
 
 		background: var(--paper);
 		color: var(--ink);
@@ -151,7 +154,11 @@
 		flex-wrap: wrap;
 		align-items: baseline;
 		gap: 0.75rem 1.5rem;
-		padding: 2rem clamp(1.25rem, 5vw, 4rem) 0;
+		padding: 2rem var(--pad) 0;
+		max-width: calc(var(--shell) + 2 * var(--pad));
+		margin-inline: auto;
+		width: 100%;
+		box-sizing: border-box;
 	}
 
 	.wordmark {
@@ -194,15 +201,18 @@
 
 	main {
 		flex: 1;
-		padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 5vw, 4rem)
-			clamp(2.5rem, 6vw, 5rem);
+		padding: clamp(1.75rem, 3vw, 2.75rem) var(--pad) clamp(2.5rem, 6vw, 5rem);
 	}
 
 	footer {
 		display: flex;
 		align-items: center;
 		gap: 1rem;
-		padding: 2rem clamp(1.25rem, 5vw, 4rem) 3rem;
+		padding: 2rem var(--pad) 3rem;
+		max-width: calc(var(--shell) + 2 * var(--pad));
+		margin-inline: auto;
+		width: 100%;
+		box-sizing: border-box;
 		font-family: var(--font-mono);
 		font-size: 0.72rem;
 		letter-spacing: 0.06em;
diff --git a/apps/web/src/lib/components/theme/SiteSections.svelte b/apps/web/src/lib/components/theme/SiteSections.svelte
index a903dd5..09801ab 100644
--- a/apps/web/src/lib/components/theme/SiteSections.svelte
+++ b/apps/web/src/lib/components/theme/SiteSections.svelte
@@ -15,13 +15,6 @@
 
 	const SKILL_CAP = 10;
 
-	function careerHasDates(section: Extract<RenderedSection, { kind: 'career' }>): boolean {
-		return (
-			section.positions.some((p) => p.startDate || p.endDate) ||
-			section.education.some((e) => e.startDate || e.endDate)
-		);
-	}
-
 	/** ISO date → "2026" or "Aug 2026"; the log rail stays narrow. */
 	function year(value: string | undefined): string {
 		if (!value) return '';
@@ -36,6 +29,13 @@
 		return from === to ? from : `${from}—${to}`;
 	}
 
+	function careerHasDates(section: Extract<RenderedSection, { kind: 'career' }>): boolean {
+		return (
+			section.positions.some((p) => p.startDate || p.endDate) ||
+			section.education.some((e) => e.startDate || e.endDate)
+		);
+	}
+
 	function isEmpty(section: RenderedSection): boolean {
 		switch (section.kind) {
 			case 'hero':
@@ -58,133 +58,393 @@
 	const visible = $derived(site.sections.filter((section) => !isEmpty(section)));
 </script>
 
-{#each visible as section, i (section.kind + i)}
-	<section class="band" class:hero={section.kind === 'hero'} style="--step:{i}">
-		{#if section.kind !== 'hero'}
-			<h2 class="label">{section.title ?? LABELS[section.kind]}</h2>
+{#snippet nameBlock(section: Extract<RenderedSection, { kind: 'hero' }>)}
+	<div class="name-row">
+		<h1>{section.title ?? site.name}</h1>
+		{#if site.sifaProfile?.pronouns}
+			<span class="pronouns">{site.sifaProfile.pronouns}</span>
 		{/if}
+	</div>
+	{#if section.tagline ?? site.sifaProfile?.headline}
+		<p class="tagline">{section.tagline ?? site.sifaProfile?.headline}</p>
+	{/if}
+{/snippet}
+
+{#snippet bio()}
+	{#if site.profile?.description}
+		<p class="bio">{#each linkify(site.profile.description) as segment}{#if segment.url}<a href={segment.url}>{segment.text}</a>{:else}{segment.text}{/if}{/each}</p>
+	{/if}
+{/snippet}
 
-		<div class="body">
-			{#if section.kind === 'hero'}
-				<div class="intro">
+{#each visible as section, i (section.kind + i)}
+	{#if section.kind === 'hero'}
+		{@const banner = site.profile?.bannerUrl}
+		{#if banner && section.style === 'band'}
+			<div class="banner-band" class:with-avatar={section.showAvatar && site.avatarUrl}>
+				<img class="banner" src={banner} alt="" fetchpriority="high" />
+				{#if section.showAvatar && site.avatarUrl}
+					<img class="avatar overlap" src={site.avatarUrl} alt="" width="128" height="128" />
+				{/if}
+			</div>
+			<section class="hero band-hero" style="--step:{i}">
+				<div class="lede">
+					{@render nameBlock(section)}
+				</div>
+				<div class="aside">
+					{@render bio()}
+				</div>
+			</section>
+		{:else if banner && section.style === 'postcard'}
+			<section class="hero postcard-hero" style="--step:{i}">
+				<div class="lede">
 					{#if section.showAvatar && site.avatarUrl}
-						<img class="avatar" src={site.avatarUrl} alt="" width="88" height="88" />
-					{/if}
-					<h1>{section.title ?? site.name}</h1>
-					{#if section.tagline ?? site.sifaProfile?.headline}
-						<p class="tagline">{section.tagline ?? site.sifaProfile?.headline}</p>
-					{/if}
-					{#if site.profile?.description}
-						<p class="bio">{#each linkify(site.profile.description) as segment}{#if segment.url}<a href={segment.url}>{segment.text}</a>{:else}{segment.text}{/if}{/each}</p>
+						<img class="avatar" src={site.avatarUrl} alt="" width="112" height="112" />
 					{/if}
+					{@render nameBlock(section)}
+					{@render bio()}
 				</div>
-			{:else if section.kind === 'writing'}
-				<ul class="log">
-					{#each section.documents as doc (doc.uri)}
-						<li>
-							<span class="when">{year(doc.publishedAt)}</span>
-							<span class="what">
-								{#if doc.url}<a href={doc.url}>{doc.title}</a>{:else}{doc.title}{/if}
-							</span>
-						</li>
-					{/each}
-				</ul>
-			{:else if section.kind === 'career'}
-				{@const dated = careerHasDates(section)}
-				{#if section.positions.length > 0}
-					<ul class="log" class:undated={!dated}>
-						{#each section.positions as post (post.uri)}
+				<figure class="postcard">
+					<img src={banner} alt="" fetchpriority="high" />
+				</figure>
+			</section>
+		{:else}
+			<section class="hero plain-hero" style="--step:{i}">
+				{#if section.showAvatar && site.avatarUrl}
+					<img class="avatar large" src={site.avatarUrl} alt="" width="184" height="184" />
+				{/if}
+				<div class="lede">
+					{@render nameBlock(section)}
+					{@render bio()}
+				</div>
+			</section>
+		{/if}
+	{:else}
+		<section class="band" style="--step:{i}">
+			<h2 class="label">{section.title ?? LABELS[section.kind]}</h2>
+
+			<div class="body">
+				{#if section.kind === 'writing'}
+					<ul class="articles">
+						{#each section.documents as doc (doc.uri)}
 							<li>
-								{#if dated}<span class="when">{span(post.startDate, post.endDate)}</span>{/if}
-								<span class="what">
-									<strong>{post.title ?? 'Role'}</strong>
-									{#if post.organization}<span class="org">{post.organization}</span>{/if}
+								{#if doc.url}
+									<a class="title" href={doc.url}>{doc.title}</a>
+								{:else}
+									<span class="title">{doc.title}</span>
+								{/if}
+								{#if doc.description}
+									<p class="excerpt">{doc.description}</p>
+								{/if}
+								<span class="meta">
+									{#if doc.publishedAt}<time datetime={doc.publishedAt}
+											>{formatDate(doc.publishedAt)}</time
+										>{/if}
+									{#if doc.url}<a href={doc.url}>Read →</a>{/if}
 								</span>
 							</li>
 						{/each}
 					</ul>
-				{/if}
-				{#if section.education.length > 0}
-					<ul class="log" class:undated={!dated}>
-						{#each section.education as edu (edu.uri)}
+				{:else if section.kind === 'career'}
+					{@const dated = careerHasDates(section)}
+					{#if site.sifaProfile?.summary}
+						<p class="about">{site.sifaProfile.summary}</p>
+					{/if}
+					{#if site.sifaProfile?.openTo?.length}
+						<div class="open-to">
+							<span class="open-to-label">Open to</span>
+							<ul>
+								{#each site.sifaProfile.openTo as label (label)}
+									<li>{label}</li>
+								{/each}
+							</ul>
+						</div>
+					{/if}
+					{#if section.positions.length > 0}
+						<ul class="log" class:undated={!dated}>
+							{#each section.positions as post (post.uri)}
+								<li>
+									{#if dated}<span class="when" class:current={post.startDate && !post.endDate}
+											>{span(post.startDate, post.endDate)}</span
+										>{/if}
+									<span class="what">
+										<strong>{post.title ?? 'Role'}</strong>
+										{#if post.organization}<span class="org">{post.organization}</span>{/if}
+									</span>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+					{#if section.education.length > 0}
+						<h3 class="sublabel">Study</h3>
+						<ul class="log" class:undated={!dated}>
+							{#each section.education as edu (edu.uri)}
+								<li>
+									{#if dated}<span class="when">{span(edu.startDate, edu.endDate)}</span>{/if}
+									<span class="what">
+										<strong>{edu.school ?? 'Study'}</strong>
+										{#if edu.degree}<span class="org">{edu.degree}</span>{/if}
+									</span>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+					{#if section.skills.length > 0}
+						<ul class="chips">
+							{#each section.skills.slice(0, SKILL_CAP) as skill (skill.uri)}
+								<li>{skill.name}</li>
+							{/each}
+						</ul>
+						{#if section.skills.length > SKILL_CAP}
+							<details class="more-skills">
+								<summary>+ {section.skills.length - SKILL_CAP} more</summary>
+								<ul class="chips">
+									{#each section.skills.slice(SKILL_CAP) as skill (skill.uri)}
+										<li>{skill.name}</li>
+									{/each}
+								</ul>
+							</details>
+						{/if}
+					{/if}
+				{:else if section.kind === 'posts'}
+					<ul class="notes">
+						{#each section.posts as post (post.uri)}
 							<li>
-								{#if dated}<span class="when">{span(edu.startDate, edu.endDate)}</span>{/if}
-								<span class="what">
-									<strong>{edu.school ?? 'Study'}</strong>
-									{#if edu.degree}<span class="org">{edu.degree}</span>{/if}
-								</span>
+								<p>{#each post.segments as segment}{#if segment.url}<a href={segment.url}>{segment.text}</a>{:else}{segment.text}{/if}{/each}</p>
+								{#if post.url}
+									<a class="when" href={post.url}
+										><time datetime={post.createdAt}>{formatDate(post.createdAt)}</time
+										>{#if post.hasEmbed}&nbsp;· view on Bluesky{/if} ↗</a
+									>
+								{:else}
+									<span class="when"
+										><time datetime={post.createdAt}>{formatDate(post.createdAt)}</time></span
+									>
+								{/if}
 							</li>
 						{/each}
 					</ul>
-				{/if}
-				{#if section.skills.length > 0}
-					<ul class="chips">
-						{#each section.skills.slice(0, SKILL_CAP) as skill (skill.uri)}
-							<li>{skill.name}</li>
+				{:else if section.kind === 'pages'}
+					<ul class="log">
+						{#each section.pages as page (page.rkey)}
+							<li>
+								<span class="when">{page.path}</span>
+								<span class="what">
+									<a href="{base}{page.path}">{page.title}</a>
+									{#if page.description}<span class="org">{page.description}</span>{/if}
+								</span>
+							</li>
 						{/each}
 					</ul>
-					{#if section.skills.length > SKILL_CAP}
-						<details class="more-skills">
-							<summary>+ {section.skills.length - SKILL_CAP} more</summary>
-							<ul class="chips">
-								{#each section.skills.slice(SKILL_CAP) as skill (skill.uri)}
-									<li>{skill.name}</li>
-								{/each}
-							</ul>
-						</details>
-					{/if}
 				{/if}
-			{:else if section.kind === 'posts'}
-				<ul class="notes">
-					{#each section.posts as post (post.uri)}
-						<li>
-							<p>{#each post.segments as segment}{#if segment.url}<a href={segment.url}>{segment.text}</a>{:else}{segment.text}{/if}{/each}</p>
-							{#if post.url}
-								<a class="when" href={post.url}
-									><time datetime={post.createdAt}>{formatDate(post.createdAt)}</time
-									>{#if post.hasEmbed}&nbsp;· view on Bluesky{/if} ↗</a
-								>
-							{:else}
-								<span class="when"
-									><time datetime={post.createdAt}>{formatDate(post.createdAt)}</time></span
-								>
-							{/if}
-						</li>
-					{/each}
-				</ul>
-			{:else if section.kind === 'pages'}
-				<ul class="log">
-					{#each section.pages as page (page.rkey)}
-						<li>
-							<span class="when">{page.path}</span>
-							<span class="what">
-								<a href="{base}{page.path}">{page.title}</a>
-								{#if page.description}<span class="org">{page.description}</span>{/if}
-							</span>
-						</li>
-					{/each}
-				</ul>
-			{/if}
-		</div>
-	</section>
+			</div>
+		</section>
+	{/if}
 {/each}
 
 <style>
+	/* ——— hero ——— */
+
+	.banner-band {
+		position: relative;
+		/* Escape main's padding: the banner spans the full viewport width. */
+		margin: calc(-1 * clamp(1.75rem, 3vw, 2.75rem)) calc(-1 * var(--pad)) 0;
+	}
+
+	.banner-band.with-avatar {
+		margin-bottom: 4.75rem;
+	}
+
+	.banner {
+		display: block;
+		width: 100%;
+		height: clamp(9rem, 24vw, 18rem);
+		object-fit: cover;
+		border-top: 1px solid var(--rule);
+		border-bottom: 1px solid var(--rule);
+	}
+
+	.banner-band .avatar.overlap {
+		position: absolute;
+		left: max(var(--pad), calc(50% - var(--shell) / 2));
+		bottom: -4rem;
+	}
+
+	.avatar {
+		display: block;
+		width: 128px;
+		height: 128px;
+		border-radius: 50%;
+		object-fit: cover;
+		/* A pressed-in plate rather than a floating circle. */
+		box-shadow: 0 0 0 1px var(--rule), 0 0 0 6px var(--paper), 0 0 0 7px var(--rule);
+	}
+
+	.avatar.large {
+		width: 184px;
+		height: 184px;
+		flex-shrink: 0;
+		margin-top: 0.75rem;
+		box-shadow: 0 0 0 1px var(--rule), 0 0 0 8px var(--paper), 0 0 0 9px var(--rule);
+	}
+
+	.hero {
+		max-width: var(--shell);
+		margin-inline: auto;
+		padding: 1.5rem 0 2.75rem;
+		animation: rise 620ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
+		animation-delay: calc(var(--step) * 90ms);
+	}
+
+	.band-hero {
+		display: grid;
+		grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
+		gap: 0 3.5rem;
+		align-items: start;
+	}
+
+	.band-hero .aside {
+		border-left: 1px solid var(--rule);
+		padding-left: 1.5rem;
+		margin-top: 0.9rem;
+	}
+
+	.band-hero .aside .bio {
+		margin-top: 0;
+	}
+
+	.postcard-hero {
+		display: flex;
+		gap: 3.5rem;
+		align-items: flex-start;
+	}
+
+	.postcard-hero .lede {
+		max-width: var(--measure);
+	}
+
+	.postcard-hero .avatar {
+		width: 112px;
+		height: 112px;
+		margin-bottom: 1.5rem;
+	}
+
+	.postcard {
+		margin: 1.75rem 0 0;
+		flex-shrink: 0;
+		transform: rotate(1.6deg);
+		background: var(--paper-sunk);
+		padding: 12px 12px 40px;
+		box-shadow: 0 0 0 1px var(--rule), 0 14px 28px color-mix(in srgb, var(--ink) 12%, transparent);
+	}
+
+	.postcard img {
+		display: block;
+		width: clamp(14rem, 24vw, 23.75rem);
+		aspect-ratio: 8 / 5;
+		object-fit: cover;
+	}
+
+	.plain-hero {
+		display: flex;
+		gap: 3.5rem;
+		align-items: flex-start;
+	}
+
+	.plain-hero .lede {
+		max-width: var(--measure);
+	}
+
+	.plain-hero .avatar:not(.large) {
+		margin-bottom: 1.5rem;
+	}
+
+	@media (max-width: 52rem) {
+		.band-hero {
+			grid-template-columns: minmax(0, 1fr);
+			gap: 1.25rem;
+		}
+
+		.band-hero .aside {
+			border-left: 0;
+			padding-left: 0;
+			margin-top: 0;
+		}
+
+		.banner-band .avatar.overlap {
+			width: 88px;
+			height: 88px;
+			bottom: -2.75rem;
+			box-shadow: 0 0 0 1px var(--rule), 0 0 0 5px var(--paper), 0 0 0 6px var(--rule);
+		}
+
+		.banner-band.with-avatar {
+			margin-bottom: 3.5rem;
+		}
+
+		.postcard-hero {
+			flex-direction: column;
+			gap: 2rem;
+		}
+
+		.plain-hero {
+			flex-direction: column;
+			gap: 1.75rem;
+		}
+
+		.avatar.large {
+			width: 128px;
+			height: 128px;
+		}
+	}
+
+	.name-row {
+		display: flex;
+		align-items: baseline;
+		gap: 0.9rem;
+	}
+
+	.name-row h1 {
+		margin: 0;
+		font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
+		/* Display names can be one long unbreakable cluster. */
+		overflow-wrap: anywhere;
+		min-width: 0;
+	}
+
+	.pronouns {
+		font-family: var(--font-mono);
+		font-size: 0.78rem;
+		letter-spacing: 0.04em;
+		color: var(--muted);
+	}
+
+	.tagline {
+		margin: 0.6rem 0 0;
+		font-size: 1.2rem;
+		color: var(--accent);
+		text-wrap: balance;
+	}
+
+	.bio {
+		margin: 1.1rem 0 0;
+		color: var(--muted);
+		white-space: pre-line;
+	}
+
+	/* ——— sections ——— */
+
 	.band {
 		display: grid;
-		grid-template-columns: var(--rail) minmax(0, var(--measure));
+		grid-template-columns: var(--rail) minmax(0, 43rem);
 		gap: 0 2.5rem;
 		padding: 2.75rem 0;
+		max-width: var(--shell);
+		margin-inline: auto;
 		border-top: 1px solid var(--rule);
 		animation: rise 620ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
 		animation-delay: calc(var(--step) * 90ms);
 	}
 
-	.band.hero {
-		border-top: 0;
-		padding-top: 1.5rem;
-	}
-
 	@media (max-width: 52rem) {
 		.band {
 			grid-template-columns: minmax(0, 1fr);
@@ -200,7 +460,8 @@
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.band {
+		.band,
+		.hero {
 			animation: none;
 		}
 	}
@@ -228,33 +489,58 @@
 		}
 	}
 
-	.intro h1 {
+	/* ——— career ——— */
+
+	.about {
 		margin: 0;
-		font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
+		max-width: var(--measure);
+		white-space: pre-line;
 	}
 
-	.avatar {
-		display: block;
-		width: 88px;
-		height: 88px;
-		border-radius: 50%;
-		object-fit: cover;
-		margin-bottom: 1.5rem;
-		/* A pressed-in plate rather than a floating circle. */
-		box-shadow: 0 0 0 1px var(--rule), 0 0 0 6px var(--paper), 0 0 0 7px var(--rule);
+	.open-to {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 0.4rem;
+		margin: 1.1rem 0 1.6rem;
 	}
 
-	.tagline {
-		margin: 0.6rem 0 0;
-		font-size: 1.2rem;
+	.about + .open-to {
+		margin-top: 1.1rem;
+	}
+
+	.open-to-label {
+		font-family: var(--font-mono);
+		font-size: 0.68rem;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		color: var(--muted);
+		margin-right: 0.4rem;
+	}
+
+	.open-to ul {
+		display: contents;
+	}
+
+	.open-to li {
+		list-style: none;
+		padding: 0.2rem 0.55rem;
+		border: 1px solid var(--accent);
+		border-radius: 2px;
 		color: var(--accent);
-		text-wrap: balance;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		letter-spacing: 0.04em;
 	}
 
-	.bio {
-		margin: 1.1rem 0 0;
+	.sublabel {
+		margin: 1.5rem 0 0.25rem;
+		font-family: var(--font-mono);
+		font-size: 0.68rem;
+		font-weight: 500;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
 		color: var(--muted);
-		white-space: pre-line;
 	}
 
 	.log {
@@ -263,6 +549,11 @@
 		padding: 0;
 	}
 
+	.about ~ .log,
+	.open-to ~ .log {
+		border-top: 1px solid var(--rule);
+	}
+
 	.log:last-child {
 		margin-bottom: 0;
 	}
@@ -301,6 +592,10 @@
 		overflow-wrap: anywhere;
 	}
 
+	.when.current {
+		color: var(--accent);
+	}
+
 	.what {
 		display: flex;
 		flex-wrap: wrap;
@@ -322,7 +617,7 @@
 		flex-wrap: wrap;
 		gap: 0.4rem;
 		list-style: none;
-		margin: 0;
+		margin: 1.6rem 0 0;
 		padding: 0;
 		font-family: var(--font-mono);
 		font-size: 0.72rem;
@@ -358,10 +653,71 @@
 		display: none;
 	}
 
-	.more-skills[open] > .chips {
+	.more-skills > .chips {
 		margin-top: 0.4rem;
 	}
 
+	/* ——— writing ——— */
+
+	.articles {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.articles li {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		padding: 1rem 0;
+		border-bottom: 1px dotted var(--rule);
+	}
+
+	.articles li:first-child {
+		padding-top: 0;
+	}
+
+	.articles li:last-child {
+		border-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	.articles .title {
+		font-size: 1.3rem;
+		font-weight: 600;
+		line-height: 1.25;
+		letter-spacing: -0.012em;
+		color: var(--ink);
+		text-decoration: none;
+		text-wrap: balance;
+	}
+
+	.articles a.title:hover,
+	.articles a.title:focus-visible {
+		color: var(--accent);
+	}
+
+	.articles .excerpt {
+		margin: 0.15rem 0 0;
+		max-width: var(--measure);
+		color: var(--muted);
+	}
+
+	.articles .meta {
+		margin-top: 0.35rem;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		letter-spacing: 0.04em;
+		color: var(--muted);
+	}
+
+	.articles .meta a {
+		color: var(--accent);
+		text-decoration: none;
+	}
+
+	/* ——— posts ——— */
+
 	.notes {
 		list-style: none;
 		margin: 0;
@@ -379,6 +735,7 @@
 
 	.notes p {
 		margin: 0 0 0.3rem;
+		max-width: var(--measure);
 		white-space: pre-line;
 	}
 
diff --git a/apps/web/src/lib/server/atmosphere/atmosphere.test.ts b/apps/web/src/lib/server/atmosphere/atmosphere.test.ts
index ca3be81..a62eba2 100644
--- a/apps/web/src/lib/server/atmosphere/atmosphere.test.ts
+++ b/apps/web/src/lib/server/atmosphere/atmosphere.test.ts
@@ -110,18 +110,20 @@ describe('bluesky adapter', () => {
 		expect(posts[0].hasEmbed).toBe(true);
 	});
 
-	it('reads the profile and serves the avatar from the PDS', async () => {
+	it('reads the profile and serves the avatar and banner from the PDS', async () => {
 		const ctx = fakeCtx({
 			records: {
 				'app.bsky.actor.profile/self': {
 					displayName: 'Test Pilot',
-					avatar: { $type: 'blob', ref: { $link: 'bafyavatar' }, mimeType: 'image/png' }
+					avatar: { $type: 'blob', ref: { $link: 'bafyavatar' }, mimeType: 'image/png' },
+					banner: { $type: 'blob', ref: { $link: 'bafybanner' }, mimeType: 'image/jpeg' }
 				}
 			}
 		});
 		const profile = await fetchBlueskyProfile(ctx);
 		expect(profile?.displayName).toBe('Test Pilot');
 		expect(profile?.avatarUrl).toContain('cid=bafyavatar');
+		expect(profile?.bannerUrl).toContain('cid=bafybanner');
 	});
 
 	it('returns undefined when there is no profile record', async () => {
@@ -249,7 +251,7 @@ describe('standard.site adapter', () => {
 		const ctx = fakeCtx({
 			collections: {
 				'site.standard.document': [
-					{ title: 'Joined', site: 'at://did:plc:test123/site.standard.publication/rkey0', path: '/joined' },
+					{ title: 'Joined', description: 'A short excerpt.', site: 'at://did:plc:test123/site.standard.publication/rkey0', path: '/joined' },
 					{ title: 'Own URL', site: 'at://did:plc:test123/site.standard.publication/rkey0', path: '/x', url: 'https://own.example/x' },
 					{ title: 'No publication', path: '/orphan' }
 				],
@@ -257,10 +259,11 @@ describe('standard.site adapter', () => {
 			}
 		});
 		const docs = await fetchDocuments(ctx);
-		const byTitle = new Map(docs.map((d) => [d.title, d.url]));
-		expect(byTitle.get('Joined')).toBe('https://blog.example/joined');
-		expect(byTitle.get('Own URL')).toBe('https://own.example/x');
-		expect(byTitle.get('No publication')).toBeUndefined();
+		const byTitle = new Map(docs.map((d) => [d.title, d]));
+		expect(byTitle.get('Joined')?.url).toBe('https://blog.example/joined');
+		expect(byTitle.get('Joined')?.description).toBe('A short excerpt.');
+		expect(byTitle.get('Own URL')?.url).toBe('https://own.example/x');
+		expect(byTitle.get('No publication')?.url).toBeUndefined();
 	});
 
 	it('filters by publication when asked', async () => {
@@ -286,6 +289,33 @@ describe('sifa adapter', () => {
 		expect(await fetchSifaProfile(fakeCtx({}))).toBeUndefined();
 	});
 
+	it('maps pronouns and openTo tokens to display values', async () => {
+		const ctx = fakeCtx({
+			records: {
+				'id.sifa.profile.self/self': {
+					headline: 'Airship captain',
+					pronouns: 'he/him',
+					openTo: [
+						'id.sifa.defs#fullTimeRoles',
+						'id.sifa.defs#mentoringOthers',
+						'id.sifa.defs#speakingGigs',
+						42
+					]
+				}
+			}
+		});
+		const profile = await fetchSifaProfile(ctx);
+		expect(profile?.pronouns).toBe('he/him');
+		expect(profile?.openTo).toEqual(['Full-time roles', 'Mentoring', 'Speaking gigs']);
+	});
+
+	it('leaves openTo unset when the record has none', async () => {
+		const ctx = fakeCtx({
+			records: { 'id.sifa.profile.self/self': { headline: 'x' } }
+		});
+		expect((await fetchSifaProfile(ctx))?.openTo).toBeUndefined();
+	});
+
 	it('reads dates from either startDate/endDate or sifa startedAt/endedAt', async () => {
 		const ctx = fakeCtx({
 			collections: {
diff --git a/apps/web/src/lib/server/atmosphere/bluesky.ts b/apps/web/src/lib/server/atmosphere/bluesky.ts
index dd39d1d..f3b9017 100644
--- a/apps/web/src/lib/server/atmosphere/bluesky.ts
+++ b/apps/web/src/lib/server/atmosphere/bluesky.ts
@@ -17,6 +17,8 @@ export interface BlueskyProfile {
 	description?: string;
 	/** URL serving the avatar blob from the user's PDS. */
 	avatarUrl?: string;
+	/** URL serving the banner blob from the user's PDS. */
+	bannerUrl?: string;
 }
 
 export interface BlueskyPost {
@@ -103,10 +105,12 @@ export async function fetchBlueskyProfile(
 	const record = await getRecord(ctx, 'app.bsky.actor.profile', 'self');
 	if (!record) return undefined;
 	const avatarCid = blobRefCid(record.value, 'avatar');
+	const bannerCid = blobRefCid(record.value, 'banner');
 	return {
 		displayName: str(record.value, 'displayName'),
 		description: str(record.value, 'description'),
-		avatarUrl: avatarCid ? blobUrl(ctx, avatarCid) : undefined
+		avatarUrl: avatarCid ? blobUrl(ctx, avatarCid) : undefined,
+		bannerUrl: bannerCid ? blobUrl(ctx, bannerCid) : undefined
 	};
 }
 
diff --git a/apps/web/src/lib/server/atmosphere/sifa.ts b/apps/web/src/lib/server/atmosphere/sifa.ts
index 31902ad..5413689 100644
--- a/apps/web/src/lib/server/atmosphere/sifa.ts
+++ b/apps/web/src/lib/server/atmosphere/sifa.ts
@@ -8,6 +8,28 @@ import { type AtmosphereContext, getRecord, listAllRecords, str, type ListedReco
 export interface SifaProfile {
 	headline?: string;
 	summary?: string;
+	pronouns?: string;
+	/** Display labels mapped from the record's id.sifa.defs tokens. */
+	openTo?: string[];
+}
+
+const OPEN_TO_LABELS: Record<string, string> = {
+	fullTimeRoles: 'Full-time roles',
+	partTimeRoles: 'Part-time roles',
+	contractRoles: 'Contract roles',
+	mentoringOthers: 'Mentoring',
+	beingMentored: 'Being mentored',
+	collaborations: 'Collaborations'
+};
+
+/** "id.sifa.defs#fullTimeRoles" → "Full-time roles"; unknown tokens split on camelCase. */
+export function openToLabel(token: string): string | undefined {
+	const name = token.split('#')[1];
+	if (!name) return undefined;
+	const known = OPEN_TO_LABELS[name];
+	if (known) return known;
+	const words = name.replace(/([a-z0-9])([A-Z])/g, '$1 $2').toLowerCase();
+	return words.charAt(0).toUpperCase() + words.slice(1);
 }
 
 export interface SifaPosition {
@@ -34,9 +56,17 @@ export interface SifaSkill {
 export async function fetchSifaProfile(ctx: AtmosphereContext): Promise<SifaProfile | undefined> {
 	const record = await getRecord(ctx, 'id.sifa.profile.self', 'self');
 	if (!record) return undefined;
+	const openTo = Array.isArray(record.value.openTo)
+		? record.value.openTo
+				.filter((t): t is string => typeof t === 'string')
+				.map(openToLabel)
+				.filter((label): label is string => label !== undefined)
+		: [];
 	return {
 		headline: str(record.value, 'headline'),
-		summary: str(record.value, 'summary') ?? str(record.value, 'about')
+		summary: str(record.value, 'summary') ?? str(record.value, 'about'),
+		pronouns: str(record.value, 'pronouns'),
+		openTo: openTo.length > 0 ? openTo : undefined
 	};
 }
 
diff --git a/apps/web/src/lib/server/atmosphere/standard-site.ts b/apps/web/src/lib/server/atmosphere/standard-site.ts
index f2073f0..05eed0b 100644
--- a/apps/web/src/lib/server/atmosphere/standard-site.ts
+++ b/apps/web/src/lib/server/atmosphere/standard-site.ts
@@ -8,6 +8,7 @@ import { type AtmosphereContext, listAllRecords, str } from './xrpc';
 export interface WritingDocument {
 	uri: string;
 	title: string;
+	description?: string;
 	publishedAt?: string;
 	/** AT-URI of the site.standard.publication this document belongs to. */
 	publicationUri?: string;
@@ -53,6 +54,7 @@ export async function fetchDocuments(
 			{
 				uri: record.uri,
 				title,
+				description: str(record.value, 'description'),
 				publishedAt: str(record.value, 'publishedAt'),
 				publicationUri: str(record.value, 'site'),
 				path: str(record.value, 'path'),
diff --git a/apps/web/src/lib/server/render/render.test.ts b/apps/web/src/lib/server/render/render.test.ts
index 63b915a..8e2ab40 100644
--- a/apps/web/src/lib/server/render/render.test.ts
+++ b/apps/web/src/lib/server/render/render.test.ts
@@ -153,10 +153,25 @@ describe('resolveSections', () => {
 		];
 		expect(resolveSections(sections, ['bluesky'])).toEqual([
 			{ kind: 'pages', title: 'Notes' },
-			{ kind: 'hero', title: undefined, tagline: 'Moored, not anchored.', showAvatar: true }
+			{
+				kind: 'hero',
+				title: undefined,
+				tagline: 'Moored, not anchored.',
+				showAvatar: true,
+				style: 'band'
+			}
 		]);
 	});
 
+	it('parses the hero style, falling back to band on unknown values', () => {
+		const hero = (style: unknown) =>
+			resolveSections([{ $type: 'page.mooring.site#heroSection', style }], [])[0];
+		expect(hero('postcard').style).toBe('postcard');
+		expect(hero('band').style).toBe('band');
+		expect(hero('mural').style).toBe('band');
+		expect(hero(undefined).style).toBe('band');
+	});
+
 	it('skips section types from other lexicons, since the union is open', () => {
 		const sections = [
 			{ $type: 'com.example.custom#weatherSection', station: 'KSEA' },
diff --git a/apps/web/src/lib/server/render/sections.ts b/apps/web/src/lib/server/render/sections.ts
index 6171f2c..331136e 100644
--- a/apps/web/src/lib/server/render/sections.ts
+++ b/apps/web/src/lib/server/render/sections.ts
@@ -13,6 +13,7 @@ export interface SectionSpec {
 	/** heroSection */
 	tagline?: string;
 	showAvatar?: boolean;
+	style?: 'band' | 'postcard';
 	/** postsSection, writingSection */
 	limit?: number;
 	/** writingSection */
@@ -56,6 +57,8 @@ function toSpec(entry: unknown): SectionSpec | undefined {
 	if (kind === 'hero') {
 		spec.tagline = str(section.tagline);
 		spec.showAvatar = section.showAvatar !== false;
+		// The value space is open; unknown styles fall back to the default.
+		spec.style = section.style === 'postcard' ? 'postcard' : 'band';
 	}
 	if (kind === 'posts' || kind === 'writing') spec.limit = int(section.limit);
 	if (kind === 'writing') spec.publicationUri = str(section.publication);
diff --git a/apps/web/src/lib/server/render/site.ts b/apps/web/src/lib/server/render/site.ts
index c8cc8f3..5a8b759 100644
--- a/apps/web/src/lib/server/render/site.ts
+++ b/apps/web/src/lib/server/render/site.ts
@@ -78,7 +78,13 @@ async function renderSection(
 ): Promise<RenderedSection> {
 	switch (spec.kind) {
 		case 'hero':
-			return { kind: 'hero', title: spec.title, tagline: spec.tagline, showAvatar: spec.showAvatar !== false };
+			return {
+				kind: 'hero',
+				title: spec.title,
+				tagline: spec.tagline,
+				showAvatar: spec.showAvatar !== false,
+				style: spec.style ?? 'band'
+			};
 		case 'posts':
 			return {
 				kind: 'posts',
diff --git a/apps/web/src/lib/site-view.ts b/apps/web/src/lib/site-view.ts
index 3a9e61e..1d9c0f6 100644
--- a/apps/web/src/lib/site-view.ts
+++ b/apps/web/src/lib/site-view.ts
@@ -24,11 +24,15 @@ export interface ProfileView {
 	displayName?: string;
 	description?: string;
 	avatarUrl?: string;
+	bannerUrl?: string;
 }
 
 export interface SifaProfileView {
 	headline?: string;
 	summary?: string;
+	pronouns?: string;
+	/** Display labels, already mapped from the record's tokens. */
+	openTo?: string[];
 }
 
 /** A run of text, linked when `url` is present. */
@@ -51,6 +55,7 @@ export interface PostView {
 export interface DocumentView {
 	uri: string;
 	title: string;
+	description?: string;
 	publishedAt?: string;
 	url?: string;
 	legacy: boolean;
@@ -78,7 +83,14 @@ export interface SkillView {
 }
 
 export type RenderedSection =
-	| { kind: 'hero'; title?: string; tagline?: string; showAvatar: boolean }
+	| {
+			kind: 'hero';
+			title?: string;
+			tagline?: string;
+			showAvatar: boolean;
+			/** Banner treatment; only meaningful when the profile carries a banner. */
+			style: 'band' | 'postcard';
+	  }
 	| { kind: 'posts'; title?: string; posts: PostView[] }
 	| { kind: 'writing'; title?: string; documents: DocumentView[] }
 	| {
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 5611498..445cada 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -15,8 +15,8 @@
 		{/if}
 		<meta property="og:title" content={data.site.name} />
 		<meta property="og:type" content="profile" />
-		{#if data.site.avatarUrl}
-			<meta property="og:image" content={data.site.avatarUrl} />
+		{#if data.site.profile?.bannerUrl ?? data.site.avatarUrl}
+			<meta property="og:image" content={data.site.profile?.bannerUrl ?? data.site.avatarUrl} />
 		{/if}
 		{#if !data.site.discoverable}
 			<meta name="robots" content="noindex, nofollow" />
diff --git a/apps/web/src/routes/s/[handle]/+page.svelte b/apps/web/src/routes/s/[handle]/+page.svelte
index 07d4cec..8fc6ca0 100644
--- a/apps/web/src/routes/s/[handle]/+page.svelte
+++ b/apps/web/src/routes/s/[handle]/+page.svelte
@@ -14,8 +14,8 @@
 	{/if}
 	<meta property="og:title" content={data.site.name} />
 	<meta property="og:type" content="profile" />
-	{#if data.site.avatarUrl}
-		<meta property="og:image" content={data.site.avatarUrl} />
+	{#if data.site.profile?.bannerUrl ?? data.site.avatarUrl}
+		<meta property="og:image" content={data.site.profile?.bannerUrl ?? data.site.avatarUrl} />
 	{/if}
 	{#if !data.site.discoverable}
 		<meta name="robots" content="noindex, nofollow" />
diff --git a/docs/NEXT.md b/docs/NEXT.md
index 6e0ee01..17d4883 100644
--- a/docs/NEXT.md
+++ b/docs/NEXT.md
@@ -2,7 +2,7 @@
 
 The flight plan. Each item carries enough context to start cold; update this file whenever an item lands (move it to "Done") or a new one is queued. Decisions made while working an item still go through `decisions/` as usual.
 
-_Last updated: 2026-08-24 (**theme UX overhaul queued** from a dual-assessment critique of the live jzweifel.dev; design mockups approved-in-principle on a Claude Design canvas. The deletion-honoring cache stays gated on real traffic)._
+_Last updated: 2026-08-24 (**theme UX overhaul landed** — PR #20 merged, hero/IA PR in review. Remaining tail: /about content, lexicon republication for `heroSection.style`, re-critique after deploy)._
 
 ## Where things stand
 
@@ -14,12 +14,10 @@ Feasibility is done and the verdict was **build it** (see `FEASIBILITY.md`). All
 
 Done so far: OAuth login (loopback dev client; hosted-client path ready pending a real key + deploy) with D1-backed state/session stores; lexicon convention tests; **read-only adapters** for Bluesky (profile + posts, replies filtered), standard.site (documents/publications, `pub.leaflet.document` fallback only when no standard.site docs exist), and sifa (profile/positions/education/skills, defensively parsed) — fetch-injected modules in `apps/web/src/lib/server/atmosphere/` with unit tests, plus `detectSources` (drives the ADR 0012 default section order) and a source-overview admin page; **site/page authoring** — record builders, PDS writes through the OAuth session, and the `/admin` + `/admin/pages` CRUD routes; **the professional-presence theme** — the render pipeline in `apps/web/src/lib/server/render/` and the public routes at `/s/[handle]`. Remaining, roughly in dependency order:
 
-- **Theme UX overhaul** (queued 2026-08-24 from a structured critique of live jzweifel.dev — snapshot in `.impeccable/critique/2026-08-24T20-14-08Z__jzweifel-dev.md`; scored 25/40; design mockups on the "Mooring Theme Redesign" Claude Design canvas artifact). Direction decided with Jacob: banner+avatar hero **by default** (typographic hero as the no-banner fallback), career curation via **smart defaults + existing `careerSection` config**, full scope. Two PRs, then content:
-  1. *Mechanical fixes* — (a) CSS bugs: `.site :global(a)` out-specifies the scoped `nav a`/`footer a` rules (muted nav + hover styles are dead code), and `body` background computes transparent (`--paper` lives on `.site`) so overscroll flashes white; (b) linkify: bsky.app permalinks from `PostView.uri`, render Bluesky facets in post text (currently discarded, so URLs are dead text), auto-link URLs in the bio ourselves — profile descriptions carry no facets, and Jacob's bio holds a bare `jzweifel.dev`, so bare-domain detection is needed; the bio otherwise renders verbatim as one free-text blob ("Boston area" is a line inside it, not a structured field — sifa has no location/website fields either) — link footer `@handle`, link writing entries to `doc.url` or hide them, "view on Bluesky" for `hasEmbed` posts; (c) dates: `Intl.DateTimeFormat` in `<time>` elements, and root-cause why every sifa career date renders empty; (d) career guardrails: collapse the empty date rail, cap skills (~10, `careerSection` override), suppress the Pages section when it duplicates the nav; (e) a11y + meta: authored `:focus-visible` styles, `aria-current`, skip link, CRLF-clean meta description, `og:image`.
-  2. *Hero + IA* — fetch the `banner` blob in `fetchBlueskyProfile` (one `blobRefCid` call, currently avatar-only); **two banner hero styles, chosen per site** (decided 2026-08-24): `band` (full-bleed banner strip, 128px avatar overlapping its lower edge — the default when a banner exists) and `postcard` (banner mounted as a framed photograph beside the type block), via a new optional `style` field on `page.mooring.site#heroSection` (add-optional-only compliant); no-banner fallback is a media-object hero with a **184px avatar** beside the type block; center the content column and split the hero two-column (name+tagline left, bio right of a hairline rule) to fix the dead right field; avatar `srcset` (2000px blob currently serves an 88px slot); per-section grammar differentiation (writing title-first with excerpt; career date-first; posts as notes with linked dates).
-  3. *Content* — replace the "TODO TODO" placeholder on jzweifel.dev/about; the reference instance demos the product.
-
-  Decided with Jacob 2026-08-24: the unrendered sifa fields enter the theme in PR 2 — the `about` (already fetched as `summary`) renders verbatim as the Career section's opening prose, `openTo` renders as accent-outline chips under it (labels mapped from the `id.sifa.defs` tokens), and `pronouns` sits beside the h1 in every hero variant. `openTo` and `pronouns` need adapter + `SifaProfileView`/`SiteView` additions; all three are optional fields and absent values render nothing.
+- **Theme UX overhaul, remaining tail** (the overhaul itself landed 2026-08-24 — see Done; design mockups on the "Mooring Theme Redesign" Claude Design canvas artifact, critique snapshot in `.impeccable/critique/`):
+  1. *Content* — replace the "TODO TODO" placeholder on jzweifel.dev/about; the reference instance demos the product.
+  2. *Lexicon republication* — `page.mooring.site#heroSection` gained an optional `style` field (`band` | `postcard`); the renderer already honours it and resolving PDSes tolerate the unknown field, but the on-network schema record should be republished when convenient (runbook §§3–4).
+  3. *Re-critique* — re-run the structured critique against the deployed site to move the 25/40 baseline; remaining known gaps: no RSS, no avatar downscaling (PDS serves the full-res blob; needs an image-resizing path if it ever matters), postcard hero unexercised by a real site record.
 - **Thin deletion-honoring cache** over the direct PDS reads (ADR 0010 §4) — deliberately reordered below hosting on 2026-08-07: rendering reads live per request, which is correct until there is traffic to cache. Revisit once sites are actually served; when it comes up, start from Jetstream v2's snapshot+tail replay (`research/2026-08-14-bluesky-protocol-services.md`) rather than a relay consumer.
 - Later, when token-refresh races become real: a Durable-Object `requestLock` for the OAuth client.
 
@@ -32,6 +30,7 @@ Done so far: OAuth login (loopback dev client; hosted-client path ready pending
 
 ## Done
 
+- 2026-08-24 — **Theme UX overhaul landed** (PR #20 merged: linkification everywhere, two CSS specificity/background bugs, sifa `startedAt`/`endedAt` date fix, writing URLs joined from publication url + doc path, skill cap, dates in `<time>`, a11y/meta; second PR: banner heroes). The hero now renders the Bluesky banner — `band` full-width strip with overlapping avatar by default, `postcard` framed-photo variant via the new optional `heroSection.style` field, media-object 184px-avatar fallback without a banner; pronouns (sifa) sit beside the name; the career section opens with the sifa `about` and "Open to" chips mapped from `openTo` tokens; writing is title-first with the document description as excerpt and a Read link; education sits under a Study sublabel with the current role's date in accent; the content column centres on a `--shell` width and the hero splits name/tagline | bio to use the field right of the headlines; `og:image` prefers the banner. Design direction was mocked and approved on a Claude Design canvas against Jacob's real PDS data before implementation. Verified locally against jzweifel.dev (band hero, all sifa fields) and malpercio.dev (no sifa, Zalgo display name — no overflow).
 - 2026-08-21 — **PR #18 merged and deployed** (version `8ca9e402`). Post-deploy smoke test: the apex, `malpercio.mooring.page` and its `/about` all serve, and `/admin` still 404s on the tenant origin. The backfill is pending a signed-in write — `did:web:malpercio.dev` still has no `page.mooring.site` record, and will get one on its next page edit or settings save.
 - 2026-08-21 — **The site record is created lazily, not by a button.** Verified against the live PDSes that **no `page.mooring.site` record ever existed** in any of Jacob's repos (only `did:web:malpercio.dev` had a `page.mooring.page` record, from 2026-08-12). The write path was never broken — the empty record validates against the *published* lexicon, `page.mooring.authSite` covers the collection, and `putRecord` demonstrably works for page edits. The record was simply never required: `SiteView.exists` was computed and read by nothing, and pages, hosting and rendering all work without a site record, so a missed "Create site" click had no consequence. Worse, `/admin`'s links to Pages and Hosting lived *inside* the `{#if site}` branch, so the no-site state was also the state with no navigation — the runbook's "create the site, author a page" step was reached by URL and checked off because the page rendered. **This reverses the 2026-08-07 "Create is explicit" decision**: `ensureSite()` in `lib/server/mooring/repo.ts` upserts `site/self`, and the writes that imply a site (authoring a page, claiming a subdomain) call it first. First login still writes nothing to the user's repo. The explicit "Create site" button and the `{#if site}` branch are gone — the settings form and nav always render, and `saveSite` upserts. Dead `exists` field removed. 2 new unit tests (160 in `web`). Existing accounts backfill themselves on their next page edit or settings save.
 - 2026-08-17 — **PR #16 merged.** The lexicon-publication session's code is on `main`: ADR 0014 (Accepted), the `publish-lexicons`/`check-live-records` tooling, the `OAUTH_SCOPE` wrangler var, and lowercase page paths. Repo housekeeping same day: stale worktrees and gone local branches pruned, `main` fast-forwarded everywhere.
diff --git a/lexicons/page/mooring/site.json b/lexicons/page/mooring/site.json
index db79249..9b7cfdd 100644
--- a/lexicons/page/mooring/site.json
+++ b/lexicons/page/mooring/site.json
@@ -78,6 +78,11 @@
         "showAvatar": {
           "type": "boolean",
           "description": "Default true when absent."
+        },
+        "style": {
+          "type": "string",
+          "knownValues": ["band", "postcard"],
+          "description": "Banner treatment when the profile carries a banner: 'band' renders it full-width above the heading, 'postcard' renders it as a framed photograph beside the heading. Default 'band'. Without a banner both fall back to the avatar-led hero."
         }
       }
     },
-- 
2.51.2