@cogenta/theme-magazine 1.1.2

package/src/render/blocks/accordion.ts

@@ -0,0 +1,51 @@
+import type { AccordionBlock, AccordionItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+  renderRichText,
+} from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). A reference dossier, not the reader mailbag:
+ * shares `faq`'s `<details>`/`<summary>` mechanics — expanding, keyboard
+ * operation and the announced expanded state all come from the browser, at
+ * zero bytes of JavaScript — but its own markup and class names (`cg-dossier`
+ * rather than `cg-mailbag`), a tab-style entry marker in the margin instead
+ * of a numeral, so the two blocks can diverge visually later without one
+ * depending on the other. "Accordion" and "frequently asked question" are
+ * different editorial intents even where the question/answer shape coincides.
+ */
+function renderItem(item: AccordionItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-dossier__entry' },
+    h(
+      'details',
+      { class: 'cg-dossier__details' },
+      h('summary', { class: 'cg-dossier__term' }, item.question),
+      h('div', { class: 'cg-dossier__definition' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+
+export function renderAccordion(block: AccordionBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-dossier', 'data-block': 'accordion' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('accordion') ?? 'h2',
+          { class: 'cg-dossier__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-dossier__entries' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}

package/src/render/blocks/collection-list.ts

@@ -0,0 +1,286 @@
+import type { CollectionListBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  buildCollectionListQuery,
+  type ContentEntry,
+  entryDate,
+  entryExcerpt,
+  entryHref,
+  entryImage,
+  entryTitle,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  nestedHeadingTag,
+  type RenderContext,
+  renderImageSource,
+} from '@cogenta/theme-kit'
+
+export { buildCollectionListQuery as query }
+
+/**
+ * A rubric label, read from whichever of the usual "section-like" field
+ * names a collection actually declares — the same "never invented, only the
+ * usual convention" rule `entryImage`/`entryExcerpt` (`@cogenta/theme-kit`)
+ * already follow, extended locally: contract D's `PageEntryMeta` only
+ * resolves *taxonomy* classifications into an eyebrow (`renderEntryHeader`),
+ * never an arbitrary `select` field, so a magazine whose "section" is a
+ * plain field (the `magazine` blueprint's own choice — see `blueprints/
+ * magazine.ts`, kept deliberately non-taxonomic so this exact value is
+ * readable raw here) can still show it on a card, where the full
+ * `ContentEntry` — unlike a rendered page's `PageEntryMeta` — is available.
+ */
+const SECTION_FIELDS = ['section', 'category', 'topic', 'department'] as const
+
+function entrySection(entry: ContentEntry): string | undefined {
+  for (const field of SECTION_FIELDS) {
+    const value = entry[field]
+    if (typeof value === 'string' && value.trim() !== '') return value
+  }
+  return undefined
+}
+
+function formatDate(iso: string, ctx: RenderContext, style: 'long' | 'medium'): string {
+  try {
+    return new Intl.DateTimeFormat(ctx.locale, { dateStyle: style }).format(new Date(iso))
+  } catch {
+    return iso
+  }
+}
+
+/**
+ * The "une": a large 16:9 cover, the section eyebrow (falling back to the
+ * generic "Featured" kicker when the entry carries none), a big headline and
+ * the full excerpt — the front-page treatment `layout: 'grid'` gives its
+ * first entry, per the L25 pro-pass brief.
+ */
+function renderLead(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const date = entryDate(entry)
+  const excerpt = entryExcerpt(entry)
+  const section = entrySection(entry)
+  const cover = entryImage(entry, ctx, { width: 1200, height: 675, fit: 'cover' })
+  return h(
+    'article',
+    { class: 'cg-issue__lead' },
+    cover === undefined
+      ? null
+      : h(
+          'a',
+          { class: 'cg-issue__lead-cover-link', href: entryHref(entry, ctx), tabindex: -1 },
+          renderImageSource(cover, {
+            className: 'cg-issue__lead-cover',
+            loading: 'eager',
+            sizes: '(min-width: 64rem) 76rem, 100vw',
+          }),
+        ),
+    h('div', { class: 'cg-issue__lead-body' }, [
+      h('p', { class: 'cg-issue__kicker' }, section ?? ctx.t('collection.featured')),
+      heading(
+        tag,
+        { class: 'cg-issue__lead-title' },
+        h('a', { class: 'cg-issue__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+      ),
+      excerpt === undefined ? null : h('p', { class: 'cg-issue__lead-excerpt' }, excerpt),
+      date === undefined
+        ? null
+        : h(
+            'time',
+            { class: 'cg-issue__lead-date', datetime: date },
+            formatDate(date, ctx, 'long'),
+          ),
+    ]),
+  )
+}
+
+/** A card in the "rest" 3-column grid: cover, section eyebrow, title, date — no excerpt (the lead alone carries one). */
+function renderCard(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const date = entryDate(entry)
+  const section = entrySection(entry)
+  const cover = entryImage(entry, ctx, { width: 480, height: 320, fit: 'cover' })
+  return h(
+    'li',
+    { class: 'cg-issue__card-item' },
+    h(
+      'article',
+      { class: 'cg-issue__card' },
+      cover === undefined
+        ? null
+        : h(
+            'a',
+            { class: 'cg-issue__card-cover-link', href: entryHref(entry, ctx), tabindex: -1 },
+            renderImageSource(cover, {
+              className: 'cg-issue__card-cover',
+              sizes: '(min-width: 64rem) 24rem, (min-width: 48rem) 45vw, 100vw',
+            }),
+          ),
+      section === undefined ? null : h('p', { class: 'cg-issue__card-eyebrow' }, section),
+      heading(
+        tag,
+        { class: 'cg-issue__card-title' },
+        h('a', { class: 'cg-issue__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+      ),
+      date === undefined
+        ? null
+        : h(
+            'time',
+            { class: 'cg-issue__card-date', datetime: date },
+            formatDate(date, ctx, 'medium'),
+          ),
+    ),
+  )
+}
+
+/**
+ * A rail row for `layout: 'list'` — a small square thumbnail (when the entry
+ * has one) beside the title and date, the "rubric rail" treatment; a plain
+ * numbered row (this theme's original front-page-index look) when the entry
+ * carries no image, so a collection with no cover field still reads as a
+ * considered contents strip rather than a broken thumbnail.
+ */
+function renderRow(
+  entry: ContentEntry,
+  ctx: RenderContext,
+  tag: HeadingTag,
+  index: number,
+): HtmlElement {
+  const date = entryDate(entry)
+  const cover = entryImage(entry, ctx, { width: 112, height: 112, fit: 'cover' })
+  return h(
+    'li',
+    { class: 'cg-issue__row' },
+    cover === undefined
+      ? h(
+          'span',
+          { class: 'cg-issue__row-number', 'aria-hidden': 'true' },
+          String(index).padStart(2, '0'),
+        )
+      : h(
+          'a',
+          { class: 'cg-issue__row-thumb-link', href: entryHref(entry, ctx), tabindex: -1 },
+          renderImageSource(cover, { className: 'cg-issue__row-thumb' }),
+        ),
+    h(
+      'div',
+      { class: 'cg-issue__row-body' },
+      heading(
+        tag,
+        { class: 'cg-issue__row-title' },
+        h('a', { class: 'cg-issue__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+      ),
+      date === undefined
+        ? null
+        : h(
+            'time',
+            { class: 'cg-issue__row-date', datetime: date },
+            formatDate(date, ctx, 'medium'),
+          ),
+    ),
+  )
+}
+
+/** A uniform frame for the horizontal-scroll `carousel` layout — a cover, the section eyebrow, title, date, excerpt. */
+function renderFrame(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const date = entryDate(entry)
+  const excerpt = entryExcerpt(entry)
+  const section = entrySection(entry)
+  const cover = entryImage(entry, ctx, { width: 480, height: 320, fit: 'cover' })
+  return h(
+    'li',
+    { class: 'cg-issue__frame' },
+    cover === undefined
+      ? null
+      : h(
+          'a',
+          { class: 'cg-issue__frame-cover-link', href: entryHref(entry, ctx), tabindex: -1 },
+          renderImageSource(cover, { className: 'cg-issue__frame-cover' }),
+        ),
+    section === undefined ? null : h('p', { class: 'cg-issue__card-eyebrow' }, section),
+    heading(
+      tag,
+      { class: 'cg-issue__frame-title' },
+      h('a', { class: 'cg-issue__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+    ),
+    date === undefined
+      ? null
+      : h(
+          'time',
+          { class: 'cg-issue__frame-date', datetime: date },
+          formatDate(date, ctx, 'medium'),
+        ),
+    excerpt === undefined ? null : h('p', { class: 'cg-issue__frame-excerpt' }, excerpt),
+  )
+}
+
+function renderGrid(entries: readonly ContentEntry[], ctx: RenderContext, tag: HeadingTag) {
+  const [first, ...rest] = entries
+  if (first === undefined) return null
+  return h(
+    'div',
+    { class: 'cg-issue__spread' },
+    renderLead(first, ctx, tag),
+    rest.length === 0
+      ? null
+      : h(
+          'ul',
+          { class: 'cg-issue__cards' },
+          rest.map((entry) => renderCard(entry, ctx, tag)),
+        ),
+  )
+}
+
+function renderList(entries: readonly ContentEntry[], ctx: RenderContext, tag: HeadingTag) {
+  return h(
+    'ul',
+    { class: 'cg-issue__rows' },
+    entries.map((entry, index) => renderRow(entry, ctx, tag, index + 1)),
+  )
+}
+
+export function renderCollectionList(
+  block: CollectionListBlock,
+  ctx: RenderContext,
+  entries: readonly ContentEntry[],
+): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const entryTag = nestedHeadingTag('collectionList', hasTitle)
+
+  const body =
+    entries.length === 0
+      ? h('p', { class: 'cg-issue__empty' }, ctx.t('collection.empty'))
+      : block.layout === 'grid'
+        ? renderGrid(entries, ctx, entryTag)
+        : block.layout === 'carousel'
+          ? h(
+              'div',
+              {
+                class: 'cg-issue__viewport',
+                role: 'region',
+                'aria-label': block.title ?? ctx.t('collection.carousel'),
+                tabindex: '0',
+              },
+              h(
+                'ul',
+                { class: 'cg-issue__frames' },
+                entries.map((entry) => renderFrame(entry, ctx, entryTag)),
+              ),
+            )
+          : renderList(entries, ctx, entryTag)
+
+  return h(
+    'section',
+    {
+      class: 'cg-block cg-issue',
+      'data-block': 'collectionList',
+      'data-layout': block.layout,
+    },
+    hasTitle
+      ? heading(
+          blockHeadingTag('collectionList') ?? 'h2',
+          { class: 'cg-issue__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    body,
+  )
+}

package/src/render/blocks/cta.ts

@@ -0,0 +1,33 @@
+import type { CtaBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * The subscription page a print magazine always carries: a panel framed by
+ * a heavy top-and-bottom rule rather than a rounded, shadowed card — the
+ * theme's one deliberately "loud" moment, reserved for the block whose whole
+ * job is to ask for something.
+ */
+export function renderCta(block: CtaBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-subscribe', 'data-block': 'cta' },
+    heading(
+      blockHeadingTag('cta') ?? 'h2',
+      { class: 'cg-subscribe__title', 'data-field': 'title' },
+      block.title,
+    ),
+    block.text === undefined
+      ? null
+      : h('p', { class: 'cg-subscribe__text', 'data-field': 'text' }, block.text),
+    // `actions` is required and non-empty for a `cta`, so this always renders;
+    // the null branch stays reachable only through invalid stored data.
+    actionList(ctx, block.actions, block.title),
+  )
+}

package/src/render/blocks/embed.ts

@@ -0,0 +1,99 @@
+import type { EmbedBlock } from '@cogenta/blocks'
+import { aspectRatio, type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * Nothing here contacts a third party before the visitor has consented — the
+ * same rule the reference theme enforces, reused verbatim: an iframe (or a
+ * thumbnail fetch) already hands the provider an IP address and a cookie,
+ * which is exactly the transfer consent is supposed to gate. No consent
+ * *button* ships either, because this theme ships no JavaScript to wire one
+ * to: granting consent is a site-wide decision for a future consent layer,
+ * not a block's.
+ */
+
+function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string | null {
+  const url = URL.parse(rawUrl)
+  if (url === null) return null
+  const segments = url.pathname.split('/').filter((segment) => segment !== '')
+
+  switch (provider) {
+    case 'youtube': {
+      const id = url.hostname.endsWith('youtu.be')
+        ? segments[0]
+        : (url.searchParams.get('v') ?? segments[1])
+      return id === undefined || id === null ? null : `https://www.youtube-nocookie.com/embed/${id}`
+    }
+    case 'vimeo': {
+      const id = segments.find((segment) => /^\d+$/.test(segment))
+      return id === undefined ? null : `https://player.vimeo.com/video/${id}`
+    }
+    case 'dailymotion': {
+      const id = url.hostname.endsWith('dai.ly') ? segments[0] : segments[segments.length - 1]
+      return id === undefined ? null : `https://geo.dailymotion.com/player.html?video=${id}`
+    }
+    case 'spotify': {
+      const [kind, id] = segments
+      return kind === undefined || id === undefined
+        ? null
+        : `https://open.spotify.com/embed/${kind}/${id}`
+    }
+    case 'soundcloud':
+      return `https://w.soundcloud.com/player/?url=${encodeURIComponent(rawUrl)}`
+    default:
+      // bluesky, mastodon, other: a post embed is a script tag this theme
+      // does not load. The sidebar note card is the rendering.
+      return null
+  }
+}
+
+/** A boxed sidebar note — dashed rule, small caps label — the editorial way of saying "not loaded here". */
+function noteCard(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-sidenote__box' },
+    h('p', { class: 'cg-sidenote__label' }, ctx.t('embed.label')),
+    h('p', { class: 'cg-sidenote__notice' }, reason),
+    h(
+      'a',
+      {
+        class: 'cg-sidenote__link',
+        href: ctx.link(block.url),
+        rel: 'noopener noreferrer nofollow',
+      },
+      ctx.t('embed.open', { provider: block.provider }),
+    ),
+  )
+}
+
+export function renderEmbed(block: EmbedBlock, ctx: RenderContext): HtmlElement {
+  const source = block.consentRequired ? null : frameSource(block.provider, block.url)
+  const ratio = aspectRatio(block.ratio) ?? '16 / 9'
+
+  return h(
+    'div',
+    {
+      class: 'cg-block cg-sidenote',
+      'data-block': 'embed',
+      'data-provider': block.provider,
+      'data-consent': block.consentRequired ? 'required' : 'not-required',
+      style: `--cg-ratio:${ratio}`,
+    },
+    source === null
+      ? noteCard(
+          block,
+          ctx,
+          block.consentRequired
+            ? ctx.t('embed.consentRequired', { provider: block.provider })
+            : ctx.t('embed.unsupported', { provider: block.provider }),
+        )
+      : h('iframe', {
+          class: 'cg-sidenote__frame',
+          src: source,
+          title: ctx.t('embed.title', { provider: block.provider }),
+          loading: 'lazy',
+          referrerpolicy: 'strict-origin-when-cross-origin',
+          allow: 'accelerometer; clipboard-write; encrypted-media; picture-in-picture; fullscreen',
+          allowfullscreen: true,
+        }),
+  )
+}

package/src/render/blocks/faq.ts

@@ -0,0 +1,58 @@
+import type { FaqBlock, FaqItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+  renderRichText,
+} from '@cogenta/theme-kit'
+
+/**
+ * A reader-mailbag column: numbered questions set in the display serif, the
+ * answer running underneath once opened. `<details>`/`<summary>` still does
+ * all the work — expand/collapse, keyboard operation and the announced
+ * expanded state all come from the browser at zero bytes of JavaScript,
+ * exactly as in the reference theme; only the typography and the numbering
+ * are this theme's own.
+ */
+function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-mailbag__item' },
+    h(
+      'details',
+      { class: 'cg-mailbag__details' },
+      h(
+        'summary',
+        { class: 'cg-mailbag__question' },
+        h(
+          'span',
+          { class: 'cg-mailbag__number', 'aria-hidden': 'true' },
+          String(index + 1).padStart(2, '0'),
+        ),
+        h('span', { class: 'cg-mailbag__question-text' }, item.question),
+      ),
+      h('div', { class: 'cg-mailbag__answer' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+
+export function renderFaq(block: FaqBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-mailbag', 'data-block': 'faq' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('faq') ?? 'h2',
+          { class: 'cg-mailbag__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-mailbag__items' },
+      block.items.map((item, index) => renderItem(item, ctx, index)),
+    ),
+  )
+}

package/src/render/blocks/feature-grid.ts

@@ -0,0 +1,61 @@
+import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  href,
+  nestedHeadingTag,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * A contents index, not a card grid: a bordered panel, a real newspaper
+ * `column-rule` between the columns it falls into at width, and each entry
+ * numbered by a CSS counter rather than an icon chip — this vocabulary's
+ * `icon` names a symbol no icon set this theme ships can resolve into
+ * markup, so a numeral the browser generates for free reads as considered
+ * rather than as a placeholder.
+ *
+ * The item's own title carries the link, exactly as in the reference theme:
+ * a bare "read more" repeated across a grid fails WCAG 2.4.4, and the block
+ * has no separate label field to fix that with.
+ */
+function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const title =
+    item.link === undefined
+      ? heading(tag, { class: 'cg-index__title' }, item.title)
+      : heading(
+          tag,
+          { class: 'cg-index__title' },
+          h('a', { class: 'cg-index__link', href: href(ctx, item.link) }, item.title),
+        )
+  return h(
+    'li',
+    { class: 'cg-index__item', 'data-icon': item.icon },
+    title,
+    item.text === undefined ? null : h('p', { class: 'cg-index__text' }, item.text),
+  )
+}
+
+export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const itemTag = nestedHeadingTag('featureGrid', hasTitle)
+  return h(
+    'section',
+    { class: 'cg-block cg-index', 'data-block': 'featureGrid' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('featureGrid') ?? 'h2',
+          { class: 'cg-index__heading', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ol',
+      { class: 'cg-index__items' },
+      block.items.map((item) => renderItem(item, ctx, itemTag)),
+    ),
+  )
+}

package/src/render/blocks/gallery.ts

@@ -0,0 +1,46 @@
+import type { GalleryBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * A contact sheet: numbered frames (a CSS counter, drawn in the negative
+ * space of the print corner) in a tight grid with hairline gutters, rather
+ * than the reference theme's rounded, shadowed tiles.
+ *
+ * The carousel layout ships **no JavaScript** — a scroll-snapping, focusable,
+ * labelled region gives keyboard, touch and trackpad scrolling for free
+ * (WCAG 2.4.3/4.1.2), with none of a scripted carousel's failure modes.
+ */
+export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElement {
+  const items = h(
+    'ul',
+    { class: 'cg-contactsheet__items' },
+    block.items.map((item) =>
+      h(
+        'li',
+        { class: 'cg-contactsheet__item' },
+        image(ctx, item.media, { sizes: '(min-width: 45rem) 18rem, 50vw' }),
+      ),
+    ),
+  )
+
+  return h(
+    'section',
+    {
+      class: 'cg-block cg-contactsheet',
+      'data-block': 'gallery',
+      'data-layout': block.layout,
+    },
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-contactsheet__viewport',
+            role: 'region',
+            'aria-label': ctx.t('gallery.carousel'),
+            tabindex: '0',
+          },
+          items,
+        )
+      : items,
+  )
+}

package/src/render/blocks/hero.ts

@@ -0,0 +1,54 @@
+import type { HeroBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  image,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * The cover story. `hero` carries the page's own `h1` (contract B's
+ * `headingLevel: 'h1'`), so this is the one place the masthead's front page
+ * lives: an eyebrow set as a kicker, a big serif headline, a dek, and the
+ * lead image on the other side of a hairline column rule — the two-column
+ * "story well" a print front page opens on, rather than a centred banner.
+ */
+export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
+  const tag = blockHeadingTag('hero') ?? 'h1'
+  return h(
+    'section',
+    { class: 'cg-block cg-hero', 'data-block': 'hero' },
+    h(
+      'div',
+      { class: 'cg-hero__grid' },
+      h(
+        'div',
+        { class: 'cg-hero__copy' },
+        block.eyebrow === undefined
+          ? null
+          : h('p', { class: 'cg-hero__eyebrow', 'data-field': 'eyebrow' }, block.eyebrow),
+        heading(tag, { class: 'cg-hero__title', 'data-field': 'title' }, block.title),
+        block.subtitle === undefined
+          ? null
+          : h('p', { class: 'cg-hero__subtitle', 'data-field': 'subtitle' }, block.subtitle),
+        actionList(ctx, block.actions, ctx.t('hero.actions')),
+      ),
+      block.media === undefined
+        ? null
+        : h(
+            'div',
+            { class: 'cg-hero__media' },
+            // The only image above the fold, so the only one loaded eagerly —
+            // lazy-loading it is a measured LCP regression, not a theory.
+            image(ctx, block.media, {
+              className: 'cg-hero__image',
+              loading: 'eager',
+              sizes: '(min-width: 64rem) 56vw, 100vw',
+            }),
+          ),
+    ),
+  )
+}