@certrev/cert-block 1.1.0 → 1.2.0-canary.0

package/src/builder/index.tsx

@@ -174,8 +174,11 @@ export {
 	CERT_FACE_FIELDS,
 	credentialLabel,
 	type EnvelopeCardOptions,
+	envelopeCardHtml,
 	envelopeCardInput,
 	faceFromDef,
+	isReaderFaceDef,
 	layoutFor,
+	READER_FACE,
 	themeFromDef,
 } from './envelope-face.js'

package/src/components/render-cert-block.ts

@@ -753,12 +753,9 @@ function floatingPill(facts: CertBlockFacts, placed: PlacedTest): string {
 // `data-certrev-*`-hooked building blocks the locked layouts use, so the custom face
 // carries the same markers as banner/sidebar and the crawl monitor reads them alike.
 //
-// NOT the ftc-guard, though — and the comment here claimed otherwise for as long as the
-// face has existed. `modal/ftc-guard.ts` looks for `data-ftc-line` / `data-ftc-disclosure`
-// hooks, which `CertBadge.tsx` and `render-badge-html.ts` emit and this renderer emits at
-// NONE of its three scope-line sites. The kill switch therefore cannot see anything
-// renderCertBlock produces, on ANY face. Whether it should is a live design question
-// (which surfaces the switch covers) — not something to settle by quietly adding hooks.
+// No runtime guard watches any of it: the `modal/ftc-guard.ts` kill switch (which never saw
+// this renderer's output anyway: it keyed on `.certrev-memo`) was removed in 1.1.1. Whether a
+// face shows its scope line is decided by its configuration, not policed in the page.
 // ─────────────────────────────────────────────────────────────────────────────
 
 function renderCustomFace(facts: CertBlockFacts, placed: PlacedTest, responsive = false): string {

package/src/modal/certrev-cert-modal.ts

@@ -23,6 +23,9 @@
  *    so the document-level delegate can't see the close controls.
  *  - Fonts inject at document level on first open (font faces don't scope into a
  *    shadow root); deferring to first open avoids loading them on every article view.
+ *  - A page can carry several faces, each with its own element (a WordPress Query Loop, a
+ *    related-posts block). A trigger opens its OWN face's element (`ownCertModal`), never the
+ *    document's first one, and a suppressed element hides only its own face's triggers.
  */
 
 import { type CertDeliveryArtifact, isTombstone } from '@certrev/cert-contract'
@@ -33,6 +36,44 @@ import { CERT_MODAL_CSS } from './certrev-cert-modal.styles.js'
 export const CERT_MODAL_TAG = 'certrev-cert-modal'
 type ModalKind = 'cert' | 'expert'
 
+/**
+ * One rendered face on a surface that can print several per page: the WordPress plugin wraps each
+ * face's card, memo and rail wraps in `<div data-certrev-cert="1">`. A trigger never reaches a
+ * `<certrev-cert-modal>` in another face root, and one outside every face root never reaches a
+ * modal inside one.
+ */
+export const FACE_ROOT_SELECTOR = '[data-certrev-cert]'
+
+/** The element a trigger opens, or why it has none. */
+export type OwnCertModal =
+	| { readonly modal: Element; readonly reason: null }
+	| { readonly modal: null; readonly reason: 'none' | 'ambiguous'; readonly count: number }
+
+/**
+ * The `<certrev-cert-modal>` that belongs to `trigger`'s face: the one in the SMALLEST subtree that
+ * holds both. Walk up from the trigger; the first ancestor holding a modal decides:
+ *  - exactly one → that is the face's modal. On Shopify the card wrap (badge + modal) and the memo
+ *    wrap (triggers only) are placed apart in the article, and their nearest common container holds
+ *    the page's one modal; a Builder page puts one modal beside the CMS content; a WordPress face root
+ *    holds its own.
+ *  - more than one → `ambiguous`: the trigger's face has no modal of its own and sits between other
+ *    faces'. Picking one would open another cert's certificate, so there is no answer.
+ * The walk never leaves the trigger's face root, and only counts modals in that same face root (or,
+ * for a trigger in none, modals in none), so a WordPress face without a modal resolves to `none`.
+ */
+export function ownCertModal(trigger: Element): OwnCertModal {
+	const face = trigger.closest(FACE_ROOT_SELECTOR)
+	for (let node: Element | null = trigger; node; node = node.parentElement) {
+		const found = Array.from(node.querySelectorAll(CERT_MODAL_TAG)).filter(
+			(m) => m.closest(FACE_ROOT_SELECTOR) === face,
+		)
+		if (found.length === 1) return { modal: found[0] as Element, reason: null }
+		if (found.length > 1) return { modal: null, reason: 'ambiguous', count: found.length }
+		if (node === face) break
+	}
+	return { modal: null, reason: 'none', count: 0 }
+}
+
 /** Shared constructable stylesheet (one per document lifetime). */
 let sharedSheet: CSSStyleSheet | null = null
 function supportsConstructableSheets(): boolean {
@@ -208,11 +249,13 @@ export class CertRevCertModal extends HTMLElement {
 	/**
 	 * The modal kill-switch: a fetched envelope is REVOKED/EXPIRED. Don't open;
 	 * mark the host suppressed (mirrors the badge revalidation's `data-certrev-suppressed`) and
-	 * hide the light-DOM triggers so a stale click can't re-open a pulled cert. Best-effort DOM.
+	 * hide THIS face's light-DOM triggers (those whose `ownCertModal` is this element) so a stale
+	 * click can't re-open a pulled cert. Another face's triggers on the page are not touched.
 	 */
 	private markSuppressed(): void {
 		this.setAttribute('data-certrev-suppressed', '')
-		for (const t of Array.from(document.querySelectorAll('[data-certrev-modal-open]'))) {
+		for (const t of Array.from(this.ownerDocument.querySelectorAll('[data-certrev-modal-open]'))) {
+			if (ownCertModal(t).modal !== this) continue
 			t.setAttribute('hidden', '')
 			t.setAttribute('aria-hidden', 'true')
 		}

package/src/modal/certrev-cert.entry.ts

@@ -10,7 +10,6 @@
 
 import type { ResolvePublicKeyByKid } from '@certrev/cert-contract'
 import './certrev-cert-modal.js' // registers the unified <certrev-cert-modal> element
-import { installFtcGuard } from './ftc-guard.js'
 import { initCertInteractionsOnReady } from './interactions.js'
 import { initCertPlacement } from './placement.js'
 import { initBadgeRevalidation } from './revalidate.js'
@@ -37,10 +36,9 @@ if (typeof document !== 'undefined') {
 	// in-article position — so the badge re-verify pass below finds `<certrev-badge>` already in
 	// place and never re-runs against a detached/re-attached node.
 	initCertPlacement(document)
+	// No disclosure guard since 1.1.1: nothing here hides, replaces or re-checks a face at load or on
+	// mutation, so a face that loads inside a closed <details>, tab or accordion renders when opened.
 	// Tap-to-expand contributor bios + the in-page certificate modal (progressive enhancement).
 	initCertInteractionsOnReady(document)
-	// FTC §3 anti-stripping: neutralize a memo whose verbatim disclosure was stripped/hidden/altered
-	// (restores the iframe kill switch in the native, in-DOM render). No-op when there's no memo.
-	installFtcGuard(document)
 	initBadgeRevalidation(document, { verify: createDeliveryVerifier(resolveKid) })
 }

package/src/modal/deprecated.ts

@@ -0,0 +1,25 @@
+/**
+ * Public names kept only so a patch release never breaks a compiling integration (the semver
+ * contract at the head of CHANGELOG.md). Each one does nothing it used to do; removal is for 2.0.
+ */
+
+/** Dispatched on the document, once per document, on the first call of a removed API, so a caller
+ *  that still relies on it can see that it does nothing. `detail: { api, removedIn }`. */
+export const DEPRECATED_API_EVENT = 'certrev:deprecated-api'
+
+/** Documents that have already been told, so repeated calls dispatch once. */
+const announcedDocs = new WeakSet<Document>()
+
+/**
+ * @deprecated Removed in 1.1.1: the runtime FTC disclosure guard is gone. This installs nothing,
+ * checks nothing and never hides or replaces a face; whether a face shows its disclosure is settled
+ * where the face is configured. The first call per document dispatches {@link DEPRECATED_API_EVENT}.
+ * Will be deleted in 2.0.
+ */
+export function installFtcGuard(doc: Document): void {
+	if (announcedDocs.has(doc)) return
+	announcedDocs.add(doc)
+	doc.dispatchEvent(
+		new CustomEvent(DEPRECATED_API_EVENT, { detail: { api: 'installFtcGuard', removedIn: '1.1.1' } }),
+	)
+}

package/src/modal/ftc-disclosure.ts

@@ -4,9 +4,13 @@
  * module. Legally load-bearing: the curly apostrophe (U+2019) in "article’s"
  * is byte-exact; a reword is a contract divergence.
  *
- * Kept as its OWN module (imported by both ftc-guard + display-strings, exactly as in portal) so
- * the browser bundle emits the same `var` structure as the deployed certrev-cert.js — do not merge
- * it into display-strings.ts (that consolidation drops one `var` and breaks byte-parity).
+ * Kept as its OWN module (imported by display-strings, exactly as in portal) so the browser bundle
+ * emits the same `var` structure as the deployed certrev-cert.js — do not merge it into
+ * display-strings.ts (that consolidation drops one `var` and breaks byte-parity).
+ *
+ * It is the text the faces RENDER, nothing more. Since 1.1.1 nothing in this package checks at
+ * runtime that it is present or visible (the `ftc-guard` kill switch is gone): whether a face shows
+ * its disclosure is settled where the face is configured, not by hiding or replacing it in the page.
  */
 
 export const FTC_DISCLOSURE_LINE =

package/src/modal/index.ts

@@ -6,8 +6,8 @@
  * storefront (`<script src=".../dist/modal/certrev-cert.js">`) instead of vendoring a copy.
  *
  * Importing this module as ESM has the SAME side effect as loading the IIFE: it registers the
- * `<certrev-cert-modal>` element and (in a browser) runs placement + interactions + FTC guard +
- * badge revalidation. Bundler users: `import '@certrev/cert-block/modal'`.
+ * `<certrev-cert-modal>` element and (in a browser) runs placement + interactions + badge
+ * revalidation (no FTC guard since 1.1.1). Bundler users: `import '@certrev/cert-block/modal'`.
  */
 
 // Side-effect: register the element + (in a browser) kick off the DOM passes.
@@ -23,7 +23,8 @@ export {
 
 // Composable entry points for advanced consumers (the IIFE wires these itself).
 export { CERT_MODAL_TAG } from "./certrev-cert-modal.js";
-export { installFtcGuard } from "./ftc-guard.js";
+/** @deprecated Since 1.1.1 a no-op (the runtime FTC guard was removed); deleted in 2.0. */
+export { installFtcGuard } from "./deprecated.js";
 export { initCertInteractionsOnReady } from "./interactions.js";
 export { initCertPlacement } from "./placement.js";
 export {

package/src/modal/interactions.ts

@@ -8,8 +8,8 @@
  *     (revealing the row's `.acc-bio` in place; the name caret rotates via CSS) and mirrors the
  *     state on `aria-expanded`. A click on a link inside the row (e.g. the "Compensated expert"
  *     cue) is NOT a toggle. Keyboard: Enter/Space on the role=button row.
- *   • In-page modals: a `[data-certrev-modal-open]` control opens the unified
- *     `<certrev-cert-modal>` element via its `.open('cert'|'expert')` method. Bare /
+ *   • In-page modals: a `[data-certrev-modal-open]` control opens its OWN face's
+ *     `<certrev-cert-modal>` element (`ownCertModal`) via its `.open('cert'|'expert')` method. Bare /
  *     `"cert"` opens the certificate dialog; `"expert"` opens the reviewer dialog. With no JS / no
  *     element / no envelope a link control falls back to its href (the certificate or the CertREV
  *     profile page). The element owns its OWN close plumbing (× / Close / backdrop / Esc) inside its
@@ -18,12 +18,18 @@
  * No crypto, no network — pure DOM. Idempotent install (guarded so a double-load can't double-bind).
  */
 
-import { CERT_MODAL_TAG } from './certrev-cert-modal.js'
+import { CERT_MODAL_TAG, ownCertModal } from './certrev-cert-modal.js'
 
 export const ACC_ATTR = 'data-certrev-acc'
 export const MODAL_OPEN_ATTR = 'data-certrev-modal-open'
 export const INITIALS_ATTR = 'data-certrev-initials'
 export const CARD_SELECTOR = '.certrev-card'
+/** Stamped on a control that could not tell which modal is its own (value: the reason), beside the
+ *  bubbling {@link MODAL_UNRESOLVED_EVENT}, so the miss is inspectable rather than a silent link. */
+export const MODAL_UNRESOLVED_ATTR = 'data-certrev-modal-unresolved'
+/** Dispatched on a control whose face has no modal of its own but sits between other faces'
+ *  (`ownCertModal` → `ambiguous`). `detail: { reason: 'ambiguous', modals }`. */
+export const MODAL_UNRESOLVED_EVENT = 'certrev:modal-unresolved'
 
 /** The dialog a `data-certrev-modal-open` control targets. */
 export type ModalKind = 'cert' | 'expert'
@@ -53,8 +59,10 @@ export function modalTargetKind(value: string | null): ModalKind {
 	return value === 'expert' ? 'expert' : 'cert'
 }
 
-/** Open a cert dialog via the `<certrev-cert-modal>` element. Returns false (so the caller lets an
- *  href fall back) when the element is absent or declines (no envelope + no fetch source). */
+/** Open a cert dialog via the document's FIRST `<certrev-cert-modal>` element: a page-level helper
+ *  for a page with one face. Controls go through `openOwnModal`, which finds their own face's element.
+ *  Returns false (so the caller lets an href fall back) when the element is absent or declines (no
+ *  envelope + no fetch source). */
 export function openModal(doc: Document, kind: ModalKind): boolean {
 	const el = doc.querySelector(CERT_MODAL_TAG) as CertModalElement | null
 	if (el && typeof el.open === 'function') return el.open(kind)
@@ -66,6 +74,28 @@ export function openCertModal(doc: Document): boolean {
 	return openModal(doc, 'cert')
 }
 
+/**
+ * Open a dialog of `control`'s OWN face's `<certrev-cert-modal>` (see `ownCertModal`), which is what
+ * the delegated click / key handlers do. Returns false (so a link control follows its own href) when
+ * the face has no modal, the element declines, or the control cannot tell which modal is its own; in
+ * that last case it is stamped `data-certrev-modal-unresolved="ambiguous"` and receives
+ * `certrev:modal-unresolved`, and another face's certificate is never opened in its place.
+ */
+export function openOwnModal(control: Element, kind: ModalKind): boolean {
+	const own = ownCertModal(control)
+	if (own.modal) {
+		const el = own.modal as CertModalElement
+		return typeof el.open === 'function' ? el.open(kind) : false
+	}
+	if (own.reason === 'ambiguous') {
+		control.setAttribute(MODAL_UNRESOLVED_ATTR, own.reason)
+		control.dispatchEvent(
+			new CustomEvent(MODAL_UNRESOLVED_EVENT, { bubbles: true, detail: { reason: own.reason, modals: own.count } }),
+		)
+	}
+	return false
+}
+
 function asElement(target: EventTarget | null): Element | null {
 	return target && (target as Element).closest ? (target as Element) : null
 }
@@ -111,7 +141,7 @@ export function initCertInteractions(doc: Document): void {
 		// (Close is owned by the <certrev-cert-modal> element inside its shadow root.)
 		const opener = el.closest(`[${MODAL_OPEN_ATTR}]`)
 		if (opener) {
-			if (openModal(doc, modalTargetKind(opener.getAttribute(MODAL_OPEN_ATTR)))) e.preventDefault()
+			if (openOwnModal(opener, modalTargetKind(opener.getAttribute(MODAL_OPEN_ATTR)))) e.preventDefault()
 			return
 		}
 
@@ -144,7 +174,7 @@ export function initCertInteractions(doc: Document): void {
 
 		const opener = el.closest(`[${MODAL_OPEN_ATTR}]`)
 		if (opener) {
-			if (openModal(doc, modalTargetKind(opener.getAttribute(MODAL_OPEN_ATTR)))) {
+			if (openOwnModal(opener, modalTargetKind(opener.getAttribute(MODAL_OPEN_ATTR)))) {
 				e.preventDefault()
 				return
 			}

package/src/reader/face.ts

@@ -0,0 +1,35 @@
+/**
+ * `certrev-reader-face`: the round avatar on a reader byline: the person's photo when there is one to show, the
+ * silhouette when there is not. The span carries a size class (`sm` for the author, none for the banner reviewer,
+ * `lg` for the memo and sidebar reviewer); the image is requested at `width` square through the asset resizer.
+ */
+import { avatarUrl, cleaned, esc, safeUrl } from './helpers.js'
+
+export type ReaderFaceSize = '' | 'sm' | 'lg'
+
+export interface ReaderFaceInput {
+	/** The photo URL on the envelope. */
+	readonly photo: unknown
+	/** Whether to ATTEMPT the photo: false never reads the URL (the silhouette shows). */
+	readonly show: boolean
+	readonly size: ReaderFaceSize
+	/** The pixel width the resizer is asked for. */
+	readonly width: number
+}
+
+const SILHOUETTE =
+	'<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><circle cx="20" cy="14.8" r="7"/><path d="M20 23.4c-6.9 0-12.6 4.8-13.8 11.2a20 20 0 0 0 27.6 0C32.6 28.2 26.9 23.4 20 23.4Z"/></svg>'
+
+const DIMENSION: Readonly<Record<ReaderFaceSize, number>> = { '': 42, sm: 36, lg: 46 }
+
+export function readerFace({ photo, show, size, width }: ReaderFaceInput): string {
+	const safe = show ? cleaned(safeUrl(photo)) : ''
+	const src = cleaned(avatarUrl(safe, width))
+	const dim = DIMENSION[size]
+	const cls = size === '' ? 'certrev-r-face' : `certrev-r-face ${esc(size)}`
+	const inner =
+		src !== ''
+			? `<img src="${esc(src)}" alt="" width="${dim}" height="${dim}" loading="lazy" decoding="async">`
+			: SILHOUETTE
+	return `<span class="${cls}">${inner}</span>`
+}

package/src/reader/helpers.ts

@@ -0,0 +1,178 @@
+/**
+ * The Liquid semantics the reader snippets lean on, as small pure functions.
+ *
+ * The reader face is a byte-for-byte twin of the Shopify `certrev-reader-*` snippets, so the helpers below are not
+ * "what a TypeScript author would write": each one reproduces what the Liquid filter or tag does with the same input
+ * (which value counts as `blank`, which `default` replaces, how `contains` reads a string, what `strip_html` removes).
+ * Where the snippets call another snippet (`certrev-safe-url`, `certrev-avatar-url`, `certrev-reader-first-name`,
+ * `certrev-reader-date`) the port is named for it.
+ *
+ * Like every helper in this package they NEVER throw on a hostile type: the envelope is verified for its signature,
+ * not its shape, so a number or an object can arrive where the contract promised a string. Values are read through
+ * `rec` and `asText`, never dereferenced bare.
+ */
+import { asText, escapeHtml } from '../components/escape.js'
+
+export type Rec = Readonly<Record<string, unknown>>
+
+const NO_FIELDS: Rec = Object.freeze({})
+
+/** An object's fields, or none: Liquid reads a missing field as nil, never an error. */
+export function rec(value: unknown): Rec {
+	return typeof value === 'object' && value !== null && !Array.isArray(value) ? (value as Rec) : NO_FIELDS
+}
+
+/** Liquid `escape` as Shopify (and this package) spell it: `&amp; &lt; &gt; &quot; &#39;`. */
+export const esc = (value: unknown): string => escapeHtml(asText(value))
+
+/** Liquid `default: fallback`: replaces nil, false and the empty string only (whitespace stays). */
+export function orDefault(value: unknown, fallback: string): unknown {
+	return value === undefined || value === null || value === false || value === '' ? fallback : value
+}
+
+/** `value | default: ''` read as text. */
+export const textOr = (value: unknown, fallback = ''): string => asText(orDefault(value, fallback))
+
+/** Liquid's `== blank` for the string-ish values the envelope carries: nil, false, empty or whitespace only. */
+export const isBlank = (value: unknown): boolean => asText(value).trim() === ''
+
+/** `{% if x %}` for a value read as a flag: Liquid treats only nil and false as false (the empty string is true). */
+export const isTruthy = (value: unknown): boolean => value !== undefined && value !== null && value !== false
+
+/** Whether a field carries a value after `| default: ''` (so `!= ''` in the snippet). */
+export const isPresent = (value: unknown): boolean =>
+	!(value === undefined || value === null || value === false || value === '')
+
+/** Liquid `contains`: an array holds the needle, a string includes it, anything else does not. */
+export function contains(container: unknown, needle: string): boolean {
+	if (Array.isArray(container)) return container.some((item) => item === needle)
+	if (typeof container === 'string') return container.includes(needle)
+	return false
+}
+
+/**
+ * Liquid `strip_html` as the portal's liquidjs harness runs it: raw-text blocks (`<script…</script>`, `<style…</style>`,
+ * `<!-- … -->`) and then any `<…>` tag are dropped; an opener with no closer is not a block, and once no opener fits
+ * the rest of the string is kept as it is. The snippets use it on every captured value because Shopify wraps each
+ * `{% render %}` of an app snippet in `<!-- BEGIN/END app snippet -->` comments that would corrupt an attribute.
+ */
+export function stripHtml(input: string): string {
+	const blocks = new Map<string, string>([
+		['<script', '</script>'],
+		['<style', '</style>'],
+		['<!--', '-->'],
+		['<', '>'],
+	])
+	let out = ''
+	let i = 0
+	while (i < input.length) {
+		const lt = input.indexOf('<', i)
+		if (lt < 0) return out + input.slice(i)
+		out += input.slice(i, lt)
+		for (const [opener, closer] of blocks) {
+			if (!input.startsWith(opener, lt)) continue
+			const end = input.indexOf(closer, lt + opener.length)
+			if (end >= 0) {
+				i = end + closer.length
+				break
+			}
+			blocks.delete(opener)
+		}
+		if (i <= lt) return out + input.slice(lt)
+	}
+	return out
+}
+
+/** `{% capture x %}…{% endcapture %}` then `x | strip_html | strip`, which every snippet applies to a captured value. */
+export const cleaned = (value: string): string => stripHtml(value).trim()
+
+/**
+ * `certrev-safe-url`: the trimmed URL when it is http(s), protocol-relative or site-relative (`/…`, `#…`), else ''.
+ * A `javascript:`, `data:` or other scheme collapses to '' so the caller's `!= ''` guard drops the link or the photo.
+ */
+export function safeUrl(url: unknown): string {
+	const u = textOr(url).trim()
+	if (u === '') return ''
+	const lower = u.toLowerCase()
+	if (
+		lower.startsWith('https://') ||
+		lower.startsWith('http://') ||
+		u.startsWith('//') ||
+		u.startsWith('/') ||
+		u.startsWith('#')
+	)
+		return u
+	return ''
+}
+
+const ASSET_HOSTS: readonly string[] = ['assets.certrev.com', 'staging-assets.certrev.com']
+
+/**
+ * `certrev-avatar-url`: a CertREV asset-host photo is requested through the host's `cdn-cgi/image` resizer at
+ * `width` square (the query string dropped, which the WAF allowlist pins to empty); any other URL, a lookalike host,
+ * an `http://` or `//` form, or a URL already carrying `cdn-cgi/image/`, is returned as it is.
+ */
+export function avatarUrl(url: string, width: number): string {
+	const u = url.trim()
+	if (!u.includes('assets.certrev.com/')) return u
+	const after = u.replace('https://', '')
+	const host = after.split('/')[0] ?? ''
+	if (!ASSET_HOSTS.includes(host)) return u
+	const path = after.replace(host, '').replace('/', '').split('?')[0] ?? ''
+	if (path.includes('cdn-cgi/image/')) return u
+	return `https://${host}/cdn-cgi/image/width=${width},height=${width},fit=cover,format=auto,onerror=redirect/${path}`
+}
+
+const HONORIFICS: readonly string[] = [
+	'dr.',
+	'dr',
+	'mr.',
+	'mr',
+	'mrs.',
+	'mrs',
+	'ms.',
+	'ms',
+	'prof.',
+	'prof',
+	'mx.',
+	'mx',
+]
+
+/**
+ * `certrev-reader-first-name`: the name's first word with a leading honorific (Dr., Mr., Mrs., Ms., Prof., Mx.,
+ * any case) dropped; '' when nothing is left, which the caller words as "View profile".
+ */
+export function firstName(name: string): string {
+	let clean = name.trim()
+	const firstWord = (clean.split(' ')[0] ?? '').toLowerCase()
+	if (HONORIFICS.includes(firstWord)) {
+		const honorific = clean.split(' ')[0] ?? ''
+		clean = clean.replace(honorific, '').trim()
+	}
+	return clean.split(' ')[0] ?? ''
+}
+
+const MONTHS: readonly string[] = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December',
+]
+
+/**
+ * `certrev-reader-date`: "June 20, 2026" for an ISO timestamp, read in UTC (the portal harness's `date` filter does
+ * the same). A value that is not a date prints nothing, so the caller's `!= ''` guard falls to the undated wording.
+ */
+export function longDate(iso: unknown): string {
+	const parsed = new Date(asText(iso))
+	if (Number.isNaN(parsed.getTime())) return ''
+	return `${MONTHS[parsed.getUTCMonth()]} ${parsed.getUTCDate()}, ${parsed.getUTCFullYear()}`
+}

package/src/reader/index.ts

@@ -0,0 +1,14 @@
+/**
+ * The reader face, react-free: `@certrev/cert-block/reader`.
+ *
+ * Importing this loads no React, so a server bundle that cannot load `./builder` (it creates a React context at import)
+ * can still render, and a stylesheet pipeline can still read the CSS. The Builder card reaches the same function
+ * through `envelopeCardHtml` (`./builder/face`); the stylesheet is also the package asset `./reader.css`.
+ */
+export { READER_CSS } from './reader-css.generated.js'
+export {
+	type ReaderFaceInput,
+	type ReaderLayout,
+	type ReaderPart,
+	renderReaderFace,
+} from './render.js'

package/src/reader/logo.ts

@@ -0,0 +1,28 @@
+/**
+ * The CertREV mark the reader face paints in the card cap (18px) and the memo footer (17px): the Liquid
+ * `certrev-reader-logo` snippet's inline SVG data URI, byte for byte, so a Builder page and a Shopify page carry the
+ * same image. White on a dark accent, black (the demo's logo-mono) on a light one.
+ *
+ * The four `d` strings below are the snippet's, copied rather than retyped; the golden tests compare the whole
+ * element, so a slipped digit fails there.
+ */
+import { escapeHtml } from '../components/escape.js'
+
+export type ReaderLogoInk = 'white' | 'mono'
+
+const MARK_PATHS: readonly string[] = [
+	'M67.59 221.77L138.77 292.95C145.8 299.98 145.8 311.44 138.77 318.47L123.02 334.22C116 341.25 104.54 341.25 97.5 334.22L26.32 263.04C19.29 256.01 19.29 244.55 26.32 237.52L42.07 221.77C49.1 214.74 60.56 214.74 67.59 221.77Z',
+	'M96.79 335.08L81.12 319.42C73.8 312.1 73.8 300.23 81.12 292.92L315.88 58.16C323.2 50.85 335.06 50.85 342.38 58.16L358.04 73.83C365.36 81.14 365.36 93.01 358.04 100.33L123.29 335.08C115.97 342.4 104.1 342.4 96.79 335.08Z',
+	'M203.5 335.14L187.83 319.48C180.52 312.16 180.52 300.29 187.83 292.98L315.88 164.93C323.2 157.62 335.06 157.62 342.38 164.93L358.04 180.6C365.36 187.92 365.36 199.78 358.04 207.1L230 335.14C222.68 342.46 210.82 342.46 203.5 335.14Z',
+	'M310.21 335.2L294.54 319.54C287.23 312.22 287.23 300.36 294.54 293.04L315.88 271.71C323.2 264.39 335.06 264.39 342.38 271.71L358.04 287.37C365.36 294.69 365.36 306.55 358.04 313.87L336.71 335.2C329.39 342.52 317.53 342.52 310.21 335.2Z',
+]
+
+/** The `<img>` for the mark: `size` is the pixel width and height, `alt` is '' where the words carry the meaning. */
+export function readerLogo(ink: ReaderLogoInk, size: number, alt: string): string {
+	const fill = ink === 'white' ? 'ffffff' : '000000'
+	const paths = MARK_PATHS.map((d) => `%3Cpath fill='%23${fill}' d='${d}'/%3E`).join('')
+	return (
+		`<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 375'%3E${paths}%3C/svg%3E" ` +
+		`alt="${escapeHtml(alt)}" width="${escapeHtml(String(size))}" height="${escapeHtml(String(size))}" decoding="async">`
+	)
+}

package/src/reader/reader-css.generated.ts

@@ -0,0 +1,5 @@
+// biome-ignore-all format: generated file
+// biome-ignore-all lint: generated file
+// GENERATED by scripts/refresh-reader.mjs from src/reader/reader.css (the portal reader stylesheet, byte for
+// byte). Do not edit: run the script. reader-css.test.ts asserts this string equals the .css file.
+export const READER_CSS = "/* CERTREV-READER-GEN:BEGIN */\n/* GENERATED by scripts/build-cert-reader-css.mjs from src/lib/cert-render/reader/site-snapshot/ (certrev.com,\n * component Reader, \"What your reader sees\"). DO NOT EDIT: run `pnpm build:cert-reader-css`. The face is driven by\n * four variables the Liquid root sets inline: --cr-ba accent, --cr-ba-fg accent foreground, --cr-br corner, --cr-bf\n * font. */\n.certrev-reader {\n\tcolor: #141414;\n\tfont-family: var(--cr-bf);\n\tfont-size: 16px;\n\tline-height: 1.65;\n\t-webkit-font-smoothing: antialiased;\n\ttext-rendering: optimizelegibility;\n}\n.certrev-reader,\n.certrev-reader *,\n.certrev-reader *:before,\n.certrev-reader *:after {\n\tbox-sizing: border-box;\n}\n.certrev-reader .certrev-r-card {\n\tz-index: 1;\n\tborder: 1px solid #14141421;\n\tborder-radius: calc(var(--cr-br) * 0.7);\n\tbackground: #fff;\n\tflex-shrink: 0;\n\tmargin: 12px 0 0;\n\tposition: relative;\n\toverflow: hidden;\n}\n.certrev-reader .certrev-r-card.pad {\n\tpadding: 15px 18px;\n\toverflow: visible;\n}\n.certrev-reader .certrev-r-card.pad .certrev-r-bys {\n\tgap: 14px;\n}\n.certrev-reader .certrev-r-cap {\n\twhite-space: nowrap;\n\tbackground: var(--cr-ba);\n\tcolor: var(--cr-ba-fg);\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\talign-items: center;\n\tgap: 11px;\n\tpadding: 14px 20px;\n\tfont-size: 10.5px;\n\tfont-weight: 700;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-cap.center {\n\tletter-spacing: 0.16em;\n\tjustify-content: center;\n\tpadding: 12px;\n}\n.certrev-reader .certrev-r-cap img {\n\tflex-shrink: 0;\n\twidth: 18px;\n\theight: 18px;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-cap-body {\n\tpadding: 15px 18px 13px;\n}\n.certrev-reader .certrev-r-bys {\n\tgrid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);\n\tgap: 20px;\n\tdisplay: grid;\n}\n.certrev-reader .certrev-r-by {\n\talign-items: flex-start;\n\tgap: 12px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-by > div {\n\tmin-width: 0;\n}\n.certrev-reader .certrev-r-by b {\n\tfont-size: 14.5px;\n\tfont-weight: 700;\n\tline-height: 1.3;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-by em {\n\tcolor: #1414148c;\n\tmargin-top: 4px;\n\tfont-size: 12.5px;\n\tfont-style: normal;\n\tline-height: 1.45;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-role {\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\tcolor: #14141459;\n\tmargin-top: 9px;\n\tfont-size: 9px;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-role.on {\n\tcolor: #141414;\n\tfont-weight: 700;\n}\n.certrev-reader .certrev-r-face {\n\tbackground: #14141412;\n\twidth: 42px;\n\theight: 42px;\n\tcolor: #141414;\n\tborder-radius: 50%;\n\tflex-shrink: 0;\n\tdisplay: block;\n\toverflow: hidden;\n}\n.certrev-reader .certrev-r-face.sm {\n\twidth: 36px;\n\theight: 36px;\n}\n.certrev-reader .certrev-r-face.lg {\n\twidth: 46px;\n\theight: 46px;\n}\n.certrev-reader .certrev-r-face svg {\n\tfill: currentColor;\n\topacity: 0.38;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-rule {\n\tbackground: #14141421;\n\theight: 1px;\n\tmargin: 15px 0 12px;\n}\n.certrev-reader .certrev-r-foot {\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 16px;\n\tfont-size: 12.5px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-foot span {\n\twhite-space: nowrap;\n}\n.certrev-reader .certrev-r-foot em {\n\tfont-style: normal;\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\tcolor: #1414148c;\n\tmargin-right: 9px;\n\tfont-size: 9.5px;\n}\n.certrev-reader .certrev-r-foot span + span {\n\tcolor: #1414148c;\n}\n.certrev-reader .certrev-r-kick {\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.16em;\n\ttext-transform: uppercase;\n\tcolor: #1414148c;\n\tmargin-bottom: 14px;\n\tfont-size: 9.5px;\n}\n.certrev-reader .certrev-r-memo {\n\tgap: 15px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-memo > div {\n\tflex: 1;\n\tmin-width: 0;\n}\n.certrev-reader .certrev-r-memo-name {\n\tcolor: #1414148c;\n\tmargin-bottom: 11px;\n\tfont-size: 15px;\n}\n.certrev-reader .certrev-r-memo-name b {\n\tcolor: #141414;\n\tfont-weight: 700;\n}\n.certrev-reader blockquote {\n\tborder-left: 3px solid var(--cr-ba);\n\tcolor: #141414b8;\n\ttext-wrap: pretty;\n\tmargin: 0;\n\tpadding-left: 16px;\n\tfont-size: 13.5px;\n\tfont-style: italic;\n\tline-height: 1.55;\n}\n.certrev-reader .certrev-r-links {\n\tgap: 22px;\n\tmargin-top: 14px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-links a {\n\tcolor: #141414;\n\twhite-space: nowrap;\n\tfont-size: 13.5px;\n\tfont-weight: 700;\n\ttext-decoration: none;\n}\n.certrev-reader .certrev-r-links a:hover {\n\tcolor: var(--cr-ba);\n}\n.certrev-reader .certrev-r-vfoot {\n\talign-items: baseline;\n\tgap: 16px;\n\tdisplay: flex;\n}\n.certrev-reader .certrev-r-vfoot .certrev-r-scope {\n\tflex: 1;\n\tmin-width: 0;\n\tmargin-top: 0;\n}\n.certrev-reader .certrev-r-verified {\n\tcolor: #141414b8;\n\tflex-shrink: 0;\n\talign-items: center;\n\tgap: 9px;\n\tfont-size: 12.5px;\n\tdisplay: inline-flex;\n}\n.certrev-reader .certrev-r-verified img {\n\tflex-shrink: 0;\n\twidth: 17px;\n\theight: 17px;\n\tdisplay: block;\n}\n.certrev-reader .certrev-r-verified b {\n\tfont-family: \"Plus Jakarta Sans\", -apple-system, system-ui, Helvetica, Arial, sans-serif;\n\tfont-weight: 800;\n}\n.certrev-reader .certrev-r-scope {\n\tcolor: #1414148c;\n\ttext-wrap: pretty;\n\tmargin-top: 9px;\n\tfont-size: 12.5px;\n\tline-height: 1.5;\n}\n.certrev-reader .certrev-r-scope em {\n\tfont-style: normal;\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n\tfont-size: 9.5px;\n}\n.certrev-reader .certrev-r-side {\n\tz-index: 1;\n\tfloat: right;\n\tborder: 1px solid #14141421;\n\tborder-radius: var(--cr-br);\n\twidth: 268px;\n\tbox-shadow: 0 4px 18px #14141412;\n\tbackground: #fff;\n\tmargin: 2px 0 18px 28px;\n\tposition: relative;\n\toverflow: hidden;\n}\n.certrev-reader .certrev-r-side-body {\n\tpadding: 18px;\n}\n.certrev-reader .certrev-r-side-body .certrev-r-by b {\n\tfont-size: 14px;\n}\n.certrev-reader .certrev-r-side-body p {\n\tcolor: #141414b8;\n\ttext-wrap: pretty;\n\tmargin: 15px 0 0;\n\tfont-size: 13px;\n\tline-height: 1.55;\n}\n.certrev-reader .certrev-r-side-body blockquote {\n\tmargin-top: 15px;\n\tpadding-left: 15px;\n\tfont-size: 13.5px;\n\tline-height: 1.55;\n}\n.certrev-reader .certrev-r-side-body .certrev-r-scope {\n\tmargin-top: 15px;\n\tfont-size: 11.5px;\n}\n.certrev-reader .certrev-r-side-links {\n\tborder-top: 1px solid #14141421;\n\tgrid-template-columns: 1fr 1fr;\n\tdisplay: grid;\n}\n.certrev-reader .certrev-r-side-links a {\n\ttext-align: center;\n\tcolor: #141414;\n\tpadding: 13px;\n\tfont-size: 13px;\n\tfont-weight: 700;\n\ttext-decoration: none;\n}\n.certrev-reader .certrev-r-side-links a:first-child {\n\tborder-right: 1px solid #14141421;\n}\n.certrev-reader .certrev-r-side-links a:hover {\n\tcolor: var(--cr-ba);\n}\n.certrev-reader .certrev-r-pill {\n\tz-index: 3;\n\tbackground: var(--cr-ba);\n\tcolor: var(--cr-ba-fg);\n\tborder-radius: 999px;\n\talign-items: center;\n\tgap: 13px;\n\tpadding: 12px 21px;\n\tdisplay: inline-flex;\n\tposition: absolute;\n\tbottom: 26px;\n\tright: 26px;\n\tbox-shadow: 0 10px 26px #14141429;\n}\n.certrev-reader .certrev-r-pill span {\n\twhite-space: nowrap;\n\tfont-family: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\tletter-spacing: 0.14em;\n\ttext-transform: uppercase;\n\tfont-size: 10.5px;\n\tfont-weight: 700;\n}\n.certrev-reader .certrev-r-pill a {\n\tcolor: inherit;\n\ttext-underline-offset: 3px;\n\tfont-size: 13.5px;\n\tfont-weight: 700;\n\ttext-decoration: underline;\n}\n.certrev-reader .certrev-r-pill i {\n\topacity: 0.42;\n\tfont-style: normal;\n}\n@media (max-width: 820px) {\n\t.certrev-reader .certrev-r-side {\n\t\tfloat: none;\n\t\twidth: auto;\n\t\tmargin: 20px 0;\n\t}\n\t.certrev-reader .certrev-r-bys {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 18px;\n\t}\n\t.certrev-reader .certrev-r-cap {\n\t\tletter-spacing: 0.1em;\n\t\tpadding: 12px 16px;\n\t\tfont-size: 9.5px;\n\t}\n\t.certrev-reader .certrev-r-cap-body,\n\t.certrev-reader .certrev-r-card.pad {\n\t\tpadding: 16px 18px;\n\t}\n\t.certrev-reader .certrev-r-pill {\n\t\tgap: 10px;\n\t\tpadding: 10px 16px;\n\t\tbottom: 20px;\n\t\tright: 20px;\n\t}\n}\n@media (max-width: 560px) {\n\t.certrev-reader .certrev-r-links {\n\t\tflex-direction: column;\n\t\tgap: 9px;\n\t}\n\t.certrev-reader .certrev-r-foot {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 6px;\n\t}\n\t.certrev-reader .certrev-r-foot span {\n\t\twhite-space: normal;\n\t}\n\t.certrev-reader .certrev-r-vfoot {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 10px;\n\t}\n\t.certrev-reader .certrev-r-vfoot .certrev-r-scope {\n\t\twidth: 100%;\n\t}\n\t.certrev-reader .certrev-r-cap {\n\t\twhite-space: normal;\n\t\tletter-spacing: 0.08em;\n\t\tpadding: 11px 14px;\n\t\tfont-size: 9px;\n\t}\n\t.certrev-reader .certrev-r-cap-body,\n\t.certrev-reader .certrev-r-card.pad {\n\t\tpadding: 14px 15px;\n\t}\n\t.certrev-reader .certrev-r-foot {\n\t\tflex-wrap: wrap;\n\t\tgap: 8px 14px;\n\t}\n\t.certrev-reader .certrev-r-links {\n\t\tflex-wrap: wrap;\n\t\tgap: 16px;\n\t}\n\t.certrev-reader .certrev-r-vfoot {\n\t\tflex-wrap: wrap;\n\t\tgap: 10px;\n\t}\n\t.certrev-reader .certrev-r-face.lg {\n\t\twidth: 38px;\n\t\theight: 38px;\n\t}\n\t.certrev-reader .certrev-r-side {\n\t\tmargin: 16px 0;\n\t}\n\t.certrev-reader .certrev-r-side-links a {\n\t\tpadding: 12px 8px;\n\t}\n\t.certrev-reader .certrev-r-pill {\n\t\ttext-align: center;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: center;\n\t\tgap: 6px 12px;\n\t\tpadding: 11px 14px;\n\t\tbottom: 14px;\n\t\tleft: 14px;\n\t\tright: 14px;\n\t}\n\t.certrev-reader .certrev-r-pill span {\n\t\twhite-space: normal;\n\t}\n}\n/* Theme-bleed armor (hand-written, not from the snapshot; see build-cert-reader-css.mjs). */\n.certrev-reader img {\n\tmargin: 0 !important;\n\tmax-width: 100% !important;\n\tfloat: none !important;\n}\n.certrev-reader a {\n\tbackground-image: none !important;\n}\n.certrev-reader .certrev-r-links a,\n.certrev-reader .certrev-r-side-links a {\n\ttext-decoration: none !important;\n}\n.certrev-reader .certrev-r-links a:not(:hover),\n.certrev-reader .certrev-r-side-links a:not(:hover) {\n\tcolor: #141414 !important;\n}\n.certrev-reader .certrev-r-links a:hover,\n.certrev-reader .certrev-r-side-links a:hover {\n\tcolor: var(--cr-ba) !important;\n}\n.certrev-reader .certrev-r-pill a {\n\tcolor: inherit !important;\n\ttext-decoration: underline !important;\n}\n.certrev-reader .certrev-r-face img {\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n.certrev-reader .certrev-r-bys.solo {\n\tgrid-template-columns: minmax(0, 1fr);\n}\n.certrev-reader .certrev-r-foot a {\n\tcolor: inherit !important;\n\ttext-decoration: underline !important;\n}\n.certrev-reader .certrev-r-pill {\n\tposition: fixed;\n\tmargin-bottom: env(safe-area-inset-bottom, 0px);\n}\n.certrev-memo-wrap[data-certrev-placement=\"rail\"] .certrev-reader .certrev-r-side {\n\tfloat: none;\n\twidth: auto;\n\tmargin: 0;\n}\n.certrev-memo-wrap[data-certrev-placement=\"body-fallback\"] .certrev-reader .certrev-r-side,\n.certrev-sidebar-wrap:not([data-certrev-placement]) .certrev-reader .certrev-r-side {\n\tfloat: none;\n\twidth: auto;\n\tmax-width: 360px;\n\tmargin: 0 auto;\n}\n.certrev-reader .certrev-r-side-links.single {\n\tgrid-template-columns: minmax(0, 1fr);\n}\n.certrev-reader .certrev-r-side-links.single a:first-child {\n\tborder-right: 0;\n}\n/* Reader-only font aliases (generated from the CERTREV-FONTS rules above: the same files and unicode ranges, only the family and\n * the weight range differ, so the reader paints weights the legacy card does not declare). */\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: normal;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-latin-ext.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: normal;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-latin.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: italic;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-italic-latin-ext.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Serif\";\n\tfont-style: italic;\n\tfont-weight: 400 700;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-playfair-italic-latin.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Grotesk\";\n\tfont-style: normal;\n\tfont-weight: 400 800;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-jakarta-latin-ext.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n@font-face {\n\tfont-family: \"CertREV Reader Grotesk\";\n\tfont-style: normal;\n\tfont-weight: 400 800;\n\tfont-display: swap;\n\tsrc: url(\"https://assets.certrev.com/fonts/cert-jakarta-latin.woff2\") format(\"woff2\");\n\tunicode-range:\n\t\tU+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* CERTREV-READER-GEN:END */\n"