@sarimarcus/content-sites-ui 0.41.3 → 0.42.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.42.0 (2026-10-21)
+
+- `editorial`: `PersonPage` is rebuilt biography first: a `ContentHero` (warm, editorial overlay, short) with the role badges and `EraChip` in its badges slot, a lifespan line ("Lived c. 1138–1204 (about 66 years)", or "Born"/"Died" with one known year) and a monogram panel when there is no image; a key-facts strip (aliases, optional `contextFact`); the bio with a lead first paragraph at a 65ch measure; a `TableOfContents` only past four bio paragraphs; a featured full-story card (`fullStory.title`, else the old link line); places to see; the era timeline; then read more, capped at `readMoreLimit` (default 4). New optional props: `birthYear`, `deathYear`, `circa`, `lifespan`, `aliases`, `aliasesLabel`, `contextFact`, `monogram`, `fullStoryHeading`, `readMoreLimit`, `tocLabels`; `fullStory` gains `title`, `summary`, `image`, `fallbackSrc`, `imageAlt`. `PersonCard` gains `knownFor` (replaces the description line), `eraLabel` and a monogram tile when there is no image. New `monogram()` helper, internal `PersonSection` and `CardPlaceholder`; `RoleBadge` and `EraChip` gain `onImage`. `composed`: `QuickFacts` gains `variant="strip"`, an optional `icon` and `pagefindIgnore`; its other variants render identically. `layout`: `ContentHero` gains `monogram`, a dark panel with the initials when no image is set; existing heroes render identically. Copy defaults in `LABELS.personPage` (`lifespan`, `born`, `died`, `alsoKnownAs`, `fullStoryHeading`, `tocLabels`) (SLA-3290).
+
+### Breaking
+
+- `PersonPage`'s markup and section order change: after-body now renders before the full-story block, the timeline renders before read more, the bio is always wrapped in `<section data-person-section="biography">`, and the section ids are `person-<section>` with `person-<section>-heading` headings. `readMore` renders only its first four entries unless `readMoreLimit` says otherwise, so a route passing many cards should rank them first. No site selects on the old `data-person-*` contract and no site edit is needed, so there is no codemod.
+
 ## 0.41.3 (2026-10-21)
 
 - `editorial`: new `PersonChip` (a Chip link to a historical figure's page, name and life dates), `PersonCard` (an `EntityCard` poster teaser with portrait, dates, role badges and a clamped description) and `PersonPage` (the person page shell: portrait, roles, name, dates with the `EraChip`, short bio, "Read the full story" link to the primary article, places to see and related reading as `RelatedContentGrid`s, a `fallbackSrc` prop for a string `image`, and the era on a `ChronologyTimeline`; slots `breadcrumb`, `before-body`, `after-body`, `tail`). Copy defaults live in `LABELS.personChip`, `personCard` and `personPage`. No change to existing components' markup (SLA-3260).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.41.3",
+  "version": "0.42.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -50,6 +50,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.41.3"
+    "@sarimarcus/content-sites-core": "0.42.0"
   }
 }

package/src/composed/QuickFacts.astro

@@ -25,7 +25,7 @@ import Icon from '../primitives/Icon.astro';
 import type { BrandTone } from '../types';
 
 interface QuickFactItem {
-  icon: string;
+  icon?: string;
   label: string;
   value: string;
   href?: string;
@@ -44,12 +44,15 @@ interface ActionLink {
 interface Props {
   title?: string;
   items: QuickFactItem[];
-  variant?: 'card' | 'muted';
+  /** `strip`: borderless rows divided by hairlines, label beside value on `sm`, for a quiet facts line. */
+  variant?: 'card' | 'muted' | 'strip';
   columns?: 2 | 3 | 4;
   links?: ActionLink[];
   headingLevel?: 'h2' | 'h3' | 'h4';
   /** Replaces the fact labels' size class. */
   labelSizeClass?: string;
+  /** `false` lets Pagefind index the facts (default: ignored). */
+  pagefindIgnore?: boolean;
   class?: string;
 }
 
@@ -61,16 +64,22 @@ const {
   links,
   headingLevel = 'h2',
   labelSizeClass = 'text-[0.8125rem]',
+  pagefindIgnore = true,
   class: className = '',
 } = Astro.props;
 
 const Heading = headingLevel;
 
-const containerClass = variant === 'card'
-  ? 'p-6 lg:p-8 bg-card rounded-2xl border border-accent/20'
-  : 'p-6 bg-primary/5 rounded-xl border border-primary/15';
+const strip = variant === 'strip';
+const containerClass = strip
+  ? ''
+  : variant === 'card'
+    ? 'p-6 lg:p-8 bg-card rounded-2xl border border-accent/20'
+    : 'p-6 bg-primary/5 rounded-xl border border-primary/15';
 
-const gridClass = columns === 4
+const gridClass = strip
+  ? 'divide-y divide-border border-y border-border'
+  : columns === 4
   ? 'grid sm:grid-cols-2 lg:grid-cols-4 gap-6'
   : columns === 3
     ? 'grid sm:grid-cols-2 lg:grid-cols-3 gap-6'
@@ -78,9 +87,13 @@ const gridClass = columns === 4
 
 const titleClass = 'text-2xl font-display font-semibold text-foreground mb-6 leading-tight';
 
-const labelClass = `${labelSizeClass} uppercase tracking-wider text-muted-foreground mb-1.5 leading-none`;
+const labelClass = strip
+  ? 'text-sm font-semibold text-muted-foreground'
+  : `${labelSizeClass} uppercase tracking-wider text-muted-foreground mb-1.5 leading-none`;
 
-const valueClass = variant === 'card'
+const valueClass = strip
+  ? 'text-foreground'
+  : variant === 'card'
   ? 'text-lg font-medium text-foreground leading-snug'
   : 'text-base font-medium text-foreground leading-snug';
 
@@ -92,14 +105,14 @@ const linkColorMap: Record<string, { bg: string; hover: string; text: string }>
 ---
 
 {items.length > 0 && (
-  <div class:list={[containerClass, className]} data-pagefind-ignore>
+  <div class:list={[containerClass, className]} data-pagefind-ignore={pagefindIgnore ? '' : undefined}>
     {title && <Heading class={titleClass}>{title}</Heading>}
 
     <dl class={gridClass}>
       {items.map((item) => (
-        <div class:list={['min-w-0', item.span === 2 && 'sm:col-span-2']}>
+        <div class:list={['min-w-0', item.span === 2 && 'sm:col-span-2', strip && 'grid gap-1 py-3 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-6']}>
           <dt class={`${labelClass} flex items-center gap-1.5`}>
-            <Icon name={item.icon} class="w-3.5 h-3.5 text-primary/60" />
+            {item.icon && <Icon name={item.icon} class="w-3.5 h-3.5 text-primary/60" />}
             {item.label}
           </dt>
           <dd class={`${valueClass} tabular-nums break-words`}>

package/src/editorial/CardPlaceholder.astro

@@ -0,0 +1,7 @@
+---
+// The EntityCard `fallback` slot tile for a card with no image: tinted panel, centred content (initials or an icon).
+---
+
+<div class="absolute inset-0 flex items-center justify-center bg-primary/10" aria-hidden="true">
+  <slot />
+</div>

package/src/editorial/EraChip.astro

@@ -15,6 +15,8 @@ interface Props {
   /** Accessible name; keep the visible label and range in it. */
   ariaLabel?: (era: EraDefinition) => string;
   icon?: string;
+  /** Opaque scrim tone for a chip laid over a photo or the hero overlay. */
+  onImage?: boolean;
   class?: string;
 }
 
@@ -23,6 +25,7 @@ const {
   basePath,
   ariaLabel = (e: EraDefinition) => LABELS.eraChip.ariaLabel(e.label, e.rangeLabel),
   icon = 'history',
+  onImage = false,
   class: className,
 }: Props = Astro.props;
 ---
@@ -32,7 +35,7 @@ const {
     as="a"
     href={eraHref(era, basePath)}
     size="md"
-    tone="tint"
+    tone={onImage ? 'onImage' : 'tint'}
     accent="primary"
     icon={icon}
     data-era={era.id}

package/src/editorial/PersonCard.astro

@@ -1,13 +1,17 @@
 ---
 /**
- * PersonCard — a historical figure's teaser card on EntityCard's poster frame: portrait, name, life dates, role
- * labels and a clamped description. Every string arrives as a prop (roles are the site's display labels); `ctaLabel`
- * falls back to LABELS. Without `image` or `fallbackSrc` the image block stays an empty placeholder.
+ * PersonCard — a historical figure's teaser card on EntityCard's poster frame: portrait, name, life dates, era label,
+ * role labels and a one-line "known for" hook. Every string arrives as a prop (roles are the site's display labels);
+ * `ctaLabel` falls back to LABELS. Without `image` or `fallbackSrc` the image block is a monogram tile (initials of
+ * the name, or `monogram`). `eraLabel` is plain text: the card is one link, so it cannot hold the linked EraChip.
  */
 import type { ImageMetadata } from 'astro';
 import EntityCard from '../composed/EntityCard.astro';
 import RoleBadge from './RoleBadge.astro';
 import ArrowLabel from '../primitives/ArrowLabel.astro';
+import Badge from '../primitives/Badge.astro';
+import { monogram as initialsOf } from './monogram';
+import CardPlaceholder from './CardPlaceholder.astro';
 import { LABELS } from '../internal/labels';
 
 interface Props {
@@ -19,6 +23,13 @@ interface Props {
   /** Life dates as displayed, e.g. core `formatLifeDates`. */
   dates?: string;
   roles?: readonly string[];
+  /** One-line hook, e.g. "Physician and philosopher of Averroism". Wins over `description`. */
+  knownFor?: string;
+  /** Era as displayed, e.g. "Almohad Caliphate · 1121–1269". */
+  eraLabel?: string;
+  /** Tile initials when there is no image; defaults to the initials of `name`. */
+  monogram?: string;
+  /** Deprecated: clamped fallback when `knownFor` is absent. */
   description?: string;
   ctaLabel?: string;
   headingLevel?: 2 | 3;
@@ -36,6 +47,9 @@ const {
   imageAlt,
   dates,
   roles = [],
+  knownFor,
+  eraLabel,
+  monogram,
   description,
   ctaLabel = LABELS.personCard.cta,
   headingLevel = 3,
@@ -46,6 +60,7 @@ const {
 } = Astro.props;
 
 const Heading = `h${headingLevel}` as 'h2' | 'h3';
+const initials = monogram ?? initialsOf(name);
 ---
 
 <EntityCard
@@ -60,15 +75,25 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3';
   footerJustify="end"
   class={className}
 >
+  {initials && (
+    <CardPlaceholder slot="fallback">
+      <span class="font-display text-6xl font-semibold text-primary/70 select-none">{initials}</span>
+    </CardPlaceholder>
+  )}
   <Heading class="text-xl font-display font-semibold text-foreground">{name}</Heading>
   {dates && <p class="mt-1 text-sm tabular-nums text-muted-foreground">{dates}</p>}
-  {roles.length > 0 && (
+  {(eraLabel || roles.length > 0) && (
     <div class="mt-3 flex flex-wrap gap-2">
+      {eraLabel && <Badge tone="primary" size="md" lines={0}><span class="tabular-nums">{eraLabel}</span></Badge>}
       {roles.map((role) => (
         <RoleBadge>{role}</RoleBadge>
       ))}
     </div>
   )}
-  {description && <p class="mt-3 text-sm leading-relaxed text-muted-foreground line-clamp-3">{description}</p>}
+  {knownFor ? (
+    <p class="mt-3 text-sm leading-relaxed text-foreground">{knownFor}</p>
+  ) : description ? (
+    <p class="mt-3 text-sm leading-relaxed text-muted-foreground line-clamp-3">{description}</p>
+  ) : null}
   <ArrowLabel slot="footer-cta" class="text-sm font-medium text-primary">{ctaLabel}</ArrowLabel>
 </EntityCard>

package/src/editorial/PersonPage.astro

@@ -1,29 +1,43 @@
 ---
 /**
- * PersonPage — the shell and shared body of a historical figure's page. The route keeps paths, data, SEO and schema
- * (core `historicalPersonSchema`), renders markdown to `bioHtml`, and wraps this template in the site Layout. Order:
- * portrait and roles, name, life dates with the era chip, the short bio, "Read the full story" to the person's
- * primary article, places to see and related reading (`RelatedContentGrid`, not `RelatedContent`: the person page
- * owns its headings and `RelatedContent` carries the carousel CSS), then the era on a ChronologyTimeline. Every string
- * is a prop or a LABELS default; a block with no data renders nothing. Slots:
- *   breadcrumb  — the site Breadcrumb, in the band under the header.
- *   before-body — site blocks between the header and the bio.
- *   after-body  — site blocks after the bio and the full-story link.
- *   tail        — full-width blocks after the column.
+ * PersonPage — the shell and shared body of a historical figure's page, biography first. The route keeps paths, data,
+ * SEO and schema (core `historicalPersonSchema`), renders markdown to `bioHtml`, and wraps this template in the site
+ * Layout. Order: the `ContentHero` (warm, editorial overlay, short: name as title, role badges and the era chip,
+ * the lifespan as typography; portrait as the backdrop, else a monogram panel), a quiet key-facts strip (aliases,
+ * optional `contextFact`), a short sticky ToC only when the bio runs past four paragraphs, the bio with its first
+ * paragraph as the lead, the featured full-story card, places to see, the era on a ChronologyTimeline, then up to
+ * four related reads (`RelatedContentGrid`, not `RelatedContent`: the person page owns its headings and
+ * `RelatedContent` carries the carousel CSS). Every string is a prop or a LABELS default; a block with no data
+ * renders nothing. The lifespan reads "Lived c. 1138–1204 (about 66 years)" from `birthYear`/`deathYear`/`circa`,
+ * or from a pre-formatted `lifespan` or `dates` (both shown as is). `readMore` is ranked by the caller: the first
+ * `readMoreLimit` (four) render, so the route passes the best reads first. Slots:
+ *   breadcrumb  — the site Breadcrumb, in the band above the hero.
+ *   before-body — site blocks between the key facts and the bio.
+ *   after-body  — site blocks after the bio, before the full-story card.
+ *   tail        — full-width blocks after the last section.
  */
 import type { ImageMetadata } from 'astro';
 import type { EraDefinition } from '@sarimarcus/content-sites-core/eras';
+import { lifeSpan } from '@sarimarcus/content-sites-core/people';
 import Container from '../layout/Container.astro';
 import BreadcrumbBand from '../layout/BreadcrumbBand.astro';
+import ContentHero from '../layout/ContentHero.astro';
 import RoleBadge from './RoleBadge.astro';
 import LinkArrow from '../primitives/LinkArrow.astro';
-import ResponsivePicture from '../primitives/ResponsivePicture.astro';
+import ArrowLabel from '../primitives/ArrowLabel.astro';
+import Icon from '../primitives/Icon.astro';
+import EntityCard from '../composed/EntityCard.astro';
+import TableOfContents from '../composed/TableOfContents.astro';
 import RelatedContentGrid from '../composed/RelatedContentGrid.astro';
 import type { RelatedItem } from '../composed/related';
 import type { TrustedHtml } from '../types';
 import EraChip from './EraChip.astro';
 import ChronologyTimeline from './ChronologyTimeline.astro';
 import type { TimelineItem } from './chronology';
+import { monogram as initialsOf } from './monogram';
+import PersonSection from './PersonSection.astro';
+import CardPlaceholder from './CardPlaceholder.astro';
+import QuickFacts from '../composed/QuickFacts.astro';
 import { LABELS } from '../internal/labels';
 
 type PersonImage =
@@ -38,8 +52,21 @@ type PersonImage =
 
 type Props = PersonImage & {
   name: string;
-  /** Life dates as displayed, e.g. core `formatLifeDates`. */
+  /** Life years as displayed, e.g. core `formatLifeDates`; used when no `birthYear`/`deathYear` is given. */
   dates?: string;
+  birthYear?: number;
+  deathYear?: number;
+  /** Marks the years as approximate ("c."). */
+  circa?: boolean;
+  /** The whole lifespan line, shown as is (wins over the computed one). */
+  lifespan?: string;
+  /** Other names, as displayed. */
+  aliases?: readonly string[];
+  aliasesLabel?: string;
+  /** One extra key-facts row, e.g. the person's place in the city's history. */
+  contextFact?: { label: string; value: string };
+  /** Tile initials when there is no portrait; defaults to the initials of `name`. */
+  monogram?: string;
   /** Role labels as displayed. */
   roles?: readonly string[];
   era?: EraDefinition;
@@ -47,20 +74,45 @@ type Props = PersonImage & {
   bioHtml: TrustedHtml;
   /** Prose modifiers after `prose`. */
   proseClass?: string;
-  /** The person's primary article; `label` falls back to LABELS. */
-  fullStory?: { href: string; label?: string };
+  /**
+   * The person's primary article. With a `title` it renders as a featured card under `fullStoryHeading`; without,
+   * as a link line (`label` falls back to LABELS).
+   */
+  fullStory?: {
+    href: string;
+    label?: string;
+    title?: string;
+    summary?: string;
+    image?: ImageMetadata;
+    fallbackSrc?: string;
+    imageAlt?: string;
+  };
+  fullStoryHeading?: string;
   places?: readonly RelatedItem[];
   placesHeading?: string;
+  /** Caller-ranked: the first `readMoreLimit` render. */
   readMore?: readonly RelatedItem[];
+  /** Cards shown under read more. */
+  readMoreLimit?: number;
   readMoreHeading?: string;
   /** The era in context: pass the person's era only, or the whole chronology. */
   timeline?: { eras: readonly EraDefinition[]; items: Record<string, readonly TimelineItem[]>; heading?: string };
+  /** Overrides of the ToC pill labels. */
+  tocLabels?: Partial<Record<'biography' | 'places' | 'timeline' | 'readMore', string>>;
   pagefindType?: string;
 };
 
 const {
   name,
   dates,
+  birthYear,
+  deathYear,
+  circa = false,
+  lifespan,
+  aliases = [],
+  aliasesLabel = LABELS.personPage.alsoKnownAs,
+  contextFact,
+  monogram,
   roles = [],
   image,
   fallbackSrc,
@@ -70,98 +122,159 @@ const {
   bioHtml,
   proseClass = 'prose-lg',
   fullStory,
+  fullStoryHeading = LABELS.personPage.fullStoryHeading,
   places = [],
   placesHeading = LABELS.personPage.placesHeading,
   readMore = [],
+  readMoreLimit = 4,
   readMoreHeading = LABELS.personPage.readMoreHeading,
   timeline,
+  tocLabels,
   pagefindType = 'person',
 } = Astro.props;
 
 const timelineHeading = timeline?.heading ?? LABELS.personPage.timelineHeading;
-const hasTimeline = timeline && Object.values(timeline.items).some((list) => list.length > 0);
+const hasTimeline = Boolean(timeline && Object.values(timeline.items).some((list) => list.length > 0));
+const readMoreItems = readMore.slice(0, readMoreLimit);
+
+const span = lifeSpan({ birthYear, deathYear });
+const lifespanByKind = {
+  range: () => LABELS.personPage.lifespan(span.years ?? '', circa, span.age),
+  born: () => LABELS.personPage.born(span.years ?? '', circa),
+  died: () => LABELS.personPage.died(span.years ?? '', circa),
+  none: () => undefined,
+};
+const derivedLifespan = lifespanByKind[span.kind]();
+const lifespanText = lifespan ?? derivedLifespan ?? dates;
+
+const facts = [
+  ...(aliases.length > 0 ? [{ label: aliasesLabel, value: aliases.join(', ') }] : []),
+  ...(contextFact ? [contextFact] : []),
+];
+
+const hasFullStoryCard = Boolean(fullStory?.title);
+const bioParagraphs = (String(bioHtml).match(/<p[\s>]/g) ?? []).length;
+const toc = {
+  biography: tocLabels?.biography ?? LABELS.personPage.tocLabels.biography,
+  places: tocLabels?.places ?? LABELS.personPage.tocLabels.places,
+  timeline: tocLabels?.timeline ?? LABELS.personPage.tocLabels.timeline,
+  readMore: tocLabels?.readMore ?? LABELS.personPage.tocLabels.readMore,
+};
+const showToc = bioParagraphs > 4;
+const tocItems = [
+  { label: toc.biography, href: '#person-biography' },
+  ...(places.length > 0 ? [{ label: toc.places, href: '#person-places' }] : []),
+  ...(hasTimeline ? [{ label: toc.timeline, href: '#person-timeline' }] : []),
+  ...(readMoreItems.length > 0 ? [{ label: toc.readMore, href: '#person-read-more' }] : []),
+];
+const heroMonogram = image || fallbackSrc ? undefined : (monogram ?? initialsOf(name));
 ---
 
 <BreadcrumbBand>
   <slot name="breadcrumb" />
 </BreadcrumbBand>
 
-<main class="pt-6 pb-12 lg:pt-8 lg:pb-20" data-person-page>
+<main class="pb-12 lg:pb-20" data-person-page>
   <div data-pagefind-body data-pagefind-meta={`type:${pagefindType}`}>
-    <Container size="measure">
-      <header class="flex flex-col gap-6 sm:flex-row sm:items-start">
-        {(image || fallbackSrc) && (
-          <div class="w-40 shrink-0 overflow-hidden rounded-xl bg-muted aspect-[4/5] sm:w-48">
-            {image ? (
-              <ResponsivePicture
-                src={image}
-                alt={imageAlt}
-                sizes="(min-width: 640px) 192px, 160px"
-                loading="eager"
-                fetchpriority="high"
-                decoding="async"
-                class="size-full object-cover"
-              />
-            ) : (
-              <img
-                src={fallbackSrc}
-                alt={imageAlt}
-                loading="eager"
-                fetchpriority="high"
-                decoding="async"
-                class="size-full object-cover"
-              />
-            )}
-          </div>
+    <ContentHero
+      title={name}
+      theme="warm"
+      overlay="editorial"
+      minHeight="short"
+      image={image}
+      imageFallback={fallbackSrc}
+      imageAlt={imageAlt ?? name}
+      monogram={heroMonogram}
+    >
+      <Fragment slot="badges">
+        {roles.map((role) => (
+          <RoleBadge onImage>{role}</RoleBadge>
+        ))}
+        <EraChip era={era} basePath={eraBasePath} onImage />
+      </Fragment>
+      <Fragment slot="subtitle">
+        {lifespanText && (
+          <p class="font-display text-lg tabular-nums text-overlay-foreground/90 sm:text-xl" data-person-dates>{lifespanText}</p>
         )}
-        <div class="min-w-0">
-          {roles.length > 0 && (
-            <div class="mb-3 flex flex-wrap gap-2">
-              {roles.map((role) => (
-                <RoleBadge>{role}</RoleBadge>
-              ))}
-            </div>
-          )}
-          <h1 class="font-display text-4xl leading-tight text-balance text-foreground">{name}</h1>
-          {(dates || era) && (
-            <div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2">
-              {dates && <p class="font-display text-xl tabular-nums text-secondary" data-person-dates>{dates}</p>}
-              <EraChip era={era} basePath={eraBasePath} />
-            </div>
-          )}
-        </div>
-      </header>
+      </Fragment>
+    </ContentHero>
+
+    <Container size="measure" class="pt-8 lg:pt-10">
+      <QuickFacts variant="strip" items={facts} class="mb-8" pagefindIgnore={false} />
 
       <slot name="before-body" />
 
-      <div class={`prose ${proseClass} mt-10 max-w-none`} data-person-bio set:html={bioHtml} />
+      {showToc && tocItems.length > 1 && (
+        <TableOfContents
+          class="mb-8"
+          showHeader={false}
+          items={tocItems}
+          sectionSelector="[data-person-section]"
+          hideMiniPastLastSection
+        />
+      )}
+
+      <section id="person-biography" class="scroll-mt-28" aria-label={toc.biography} data-person-section="biography">
+        <div
+          class={`prose ${proseClass} max-w-[65ch] [&>p:first-child]:text-[1.2em] [&>p:first-child]:leading-relaxed`}
+          data-person-bio
+          set:html={bioHtml}
+        />
+      </section>
 
-      {fullStory && (
+      <slot name="after-body" />
+
+      {fullStory && !hasFullStoryCard && (
         <p class="mt-6">
           <LinkArrow href={fullStory.href} size="base">{fullStory.label ?? LABELS.personPage.readFullStory}</LinkArrow>
         </p>
       )}
 
-      <slot name="after-body" />
+      {fullStory && hasFullStoryCard && (
+        <PersonSection section="full-story" heading={fullStoryHeading} class="mt-12">
+          <div class="max-w-md">
+            <EntityCard
+              href={fullStory.href}
+              variant="poster"
+              image={fullStory.image}
+              fallbackSrc={fullStory.fallbackSrc}
+              imageAlt={fullStory.imageAlt ?? fullStory.title ?? ''}
+              footerJustify="end"
+            >
+              <CardPlaceholder slot="fallback"><Icon name="book-open" class="size-10 text-primary/70" /></CardPlaceholder>
+              <h3 class="text-xl font-display font-semibold text-foreground">{fullStory.title}</h3>
+              {fullStory.summary && <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{fullStory.summary}</p>}
+              <ArrowLabel slot="footer-cta" class="text-sm font-medium text-primary">{fullStory.label ?? LABELS.personPage.readFullStory}</ArrowLabel>
+            </EntityCard>
+          </div>
+        </PersonSection>
+      )}
 
-      {[
-        { id: 'places', heading: placesHeading, items: places },
-        { id: 'read-more', heading: readMoreHeading, items: readMore },
-      ].map((group) => group.items.length > 0 && (
-        <section class="mt-12" aria-labelledby={`person-${group.id}`} data-person-section={group.id}>
-          <h2 id={`person-${group.id}`} class="mb-6 text-2xl font-display font-semibold text-foreground">{group.heading}</h2>
-          <RelatedContentGrid items={group.items} />
-        </section>
-      ))}
+      {places.length > 0 && (
+        <PersonSection section="places" heading={placesHeading} class="mt-12">
+          <RelatedContentGrid items={places} />
+        </PersonSection>
+      )}
     </Container>
   </div>
 
   {timeline && hasTimeline && (
     <Container size="content" class="mt-16">
-      <h2 class="mb-8 font-display text-2xl font-semibold text-foreground">{timelineHeading}</h2>
-      <ChronologyTimeline eras={timeline.eras} items={timeline.items} index={false} />
+      <PersonSection section="timeline" heading={timelineHeading} headingClass="mb-8">
+        <ChronologyTimeline eras={timeline.eras} items={timeline.items} index={false} />
+      </PersonSection>
     </Container>
   )}
 
+  {readMoreItems.length > 0 && (
+    <div data-pagefind-body data-pagefind-meta={`type:${pagefindType}`}>
+      <Container size="measure" class="mt-16">
+        <PersonSection section="read-more" heading={readMoreHeading}>
+          <RelatedContentGrid items={readMoreItems} />
+        </PersonSection>
+      </Container>
+    </div>
+  )}
+
   <slot name="tail" />
 </main>

package/src/editorial/PersonSection.astro

@@ -0,0 +1,21 @@
+---
+// A titled section of the person page: one shell for the full story, places, timeline and read-more blocks.
+interface Props {
+  section: string;
+  heading: string;
+  headingClass?: string;
+  class?: string;
+}
+
+const { section, heading, headingClass = 'mb-6', class: className } = Astro.props;
+---
+
+<section
+  id={`person-${section}`}
+  class:list={['scroll-mt-28', className]}
+  aria-labelledby={`person-${section}-heading`}
+  data-person-section={section}
+>
+  <h2 id={`person-${section}-heading`} class:list={['font-display text-2xl font-semibold text-foreground', headingClass]}>{heading}</h2>
+  <slot />
+</section>

package/src/editorial/RoleBadge.astro

@@ -1,6 +1,12 @@
 ---
 // The outlined label for a role or an area of expertise (person and author cards, person page).
 import Badge from '../primitives/Badge.astro';
+
+interface Props {
+  /** Opaque scrim tone for a badge laid over a photo or the hero overlay. */
+  onImage?: boolean;
+}
+const { onImage = false } = Astro.props;
 ---
 
-<Badge tone="outline" size="md" lines={0}><slot /></Badge>
+<Badge tone={onImage ? 'onImage' : 'outline'} size="md" lines={0}><slot /></Badge>

package/src/editorial/index.ts

@@ -29,6 +29,7 @@ export { default as AlsoExplore } from './AlsoExplore.astro';
 export { default as VisitTiming } from './VisitTiming.astro';
 export { default as ChronologyTimeline } from './ChronologyTimeline.astro';
 export { groupByEra, type TimelineItem } from './chronology';
+export { monogram } from './monogram';
 export type { AlsoExploreItem } from './AlsoExplore.astro';
 export type { VisitTimingData } from './VisitTiming.astro';
 export { default as AnswerBox } from './interludes/AnswerBox.astro';

package/src/editorial/monogram.ts

@@ -0,0 +1,21 @@
+const PARTICLES = new Set([
+  'al', 'el', 'ibn', 'ben', 'bin', 'bint', 'abu', 'd', 'de', 'del', 'della', 'di', 'da', 'do', 'dos', 'das', 'du', 'des',
+  'van', 'von', 'der', 'den', 'la', 'le', 'los', 'las', 'y', 'e', 'of', 'the',
+]);
+
+/**
+ * Initials for a name tile: first and last significant word, at most two letters. Particles (al, ibn, de, van...),
+ * diacritics, apostrophes and Roman numeral suffixes are ignored; one significant word gives one letter.
+ */
+export function monogram(name: string): string {
+  const words = name
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .split(/[\s\-'’‘ʻʿʾ]+/)
+    .map((w) => w.replace(/[^\p{L}]/gu, ''))
+    .filter(Boolean);
+  const kept = words.filter((w, i) => !PARTICLES.has(w.toLowerCase()) && !(i > 0 && /^[IVXLC]+$/.test(w)));
+  const pick = kept.length ? kept : words.slice(0, 1);
+  const letters = pick.length > 1 ? [pick[0], pick[pick.length - 1]] : pick;
+  return letters.map((w) => w[0].toUpperCase()).join('');
+}

package/src/internal/labels.ts

@@ -77,9 +77,16 @@ export const LABELS = {
   personCard: { cta: 'Read the profile' },
   personPage: {
     readFullStory: 'Read the full story',
+    fullStoryHeading: 'The full story',
     placesHeading: 'Places to see',
     readMoreHeading: 'Read more',
     timelineHeading: 'In their time',
+    alsoKnownAs: 'Also known as',
+    lifespan: (years: string, circa?: boolean, age?: number) =>
+      `Lived ${circa ? 'c. ' : ''}${years}${age ? ` (about ${age} years)` : ''}`,
+    born: (year: string, circa?: boolean) => `Born ${circa ? 'c. ' : ''}${year}`,
+    died: (year: string, circa?: boolean) => `Died ${circa ? 'c. ' : ''}${year}`,
+    tocLabels: { biography: 'Biography', places: 'Places', timeline: 'Timeline', readMore: 'Read more' },
   },
   articleTopicPager: {
     heading: (topic: string) => `Next in ${topic}`,

package/src/layout/ContentHero.astro

@@ -18,6 +18,8 @@ interface Props {
   imageAlt?: string;
   /** HTML title attribute of the hero image (tooltip / image SEO). */
   imageTitle?: string;
+  /** Initials drawn on a dark panel when the hero has no image of any kind. */
+  monogram?: string;
   /** Unknown names fall back to `dark` (`stone` and `nature` are such names on Granada). */
   theme?: string;
   /** Per-theme gradient classes layered over the built-in map, for a site whose theme looks differ. */
@@ -35,6 +37,7 @@ const {
   imagePlaceholder,
   imageAlt = title,
   imageTitle,
+  monogram,
   theme = 'dark',
   themeGradients: themeOverrides,
   overlay = 'themed',
@@ -109,6 +112,12 @@ const [badges, subtitle, info, actions, decoration] = await Promise.all(
         loading="eager"
         fetchpriority="high"
       />
+    ) : monogram ? (
+      <div class="absolute inset-0 bg-overlay" aria-hidden="true">
+        <span class="absolute right-6 bottom-0 font-display text-[11rem] leading-none text-overlay-foreground/10 select-none sm:right-12 sm:text-[16rem] lg:text-[22rem]">
+          {monogram}
+        </span>
+      </div>
     ) : null}
     {overlay === 'editorial' ? (
       <>