back-nav — DEMO. Link returning to parent index. Appears above entry-meta. Not on every page — only nested/child pages. The ← and text together are the full element.

entry-meta — three elements: tag (ember uppercase), dot (tiny circle), date (IBM Plex Mono). Tag names the content category. New tag names are fine — use what fits the content.

The Site Speaks for Itself

A living reference for how Vextreme pages are built. Every component shown here is functional — not described, demonstrated. Annotations explain context. Strip them before any live use.

hero-heading — Source Serif 4, weight 300, italic. Always the page title. hero-context — smaller italic muted text directly beneath. Frames the content. Ends with a border-bottom that begins the document body.

credentials — white card table with credential-row items. Labels use IBM Plex Mono + ember. Used primarily in journal/witness entries. Add rows freely. The last row has no border-bottom automatically.

divider — short ember bar. Major section break. The divider-light variant is full-width, 1px, border color — used for softer mid-section pauses between topics within the same section.

Part One

Typography and Core Elements

part-label — orange uppercase tracking, names the section or chapter. part-heading — Source Serif 4 weight 400, the section title. Can be used without a part-label for unnamed section breaks.

Body text runs in IBM Plex Sans at clamp(15px, 1.6vw, 17px). The color is #44403c — slightly warmer than the heading stone to reduce harshness in long reads. Line height 1.85. Paragraphs breathe.

The system uses clamp() throughout — sizes scale continuously with viewport width between a defined minimum and maximum. No breakpoints needed for most elements. The grid components collapse at 520px.

When a sentence needs its own anchor

The sub-heading sits between section headings and body text. Serif, weight 600. Use when a concept inside a section deserves its own named entry point.

body — main prose class. Color #44403c (warmer than stone). sub-heading — Source Serif 4 weight 600, smaller than part-heading. Use for named concepts within a section.

pull-quote — Source Serif 4, italic, weight 300, ember color, ember left border. Used when a sentence earns the space. Appears in journals, revelation content, and blueprint documents. Used sparingly — not decorative.

Part Two

Structured Blocks

Some content wants a different container. These blocks handle lists, cards, and enumerated items without breaking the document's rhythm.

distortion-block — ember-bg background, subtle ember border. Label in mono uppercase ember. Items separated by light ember lines. Works for any enumerated content. Can be renamed — the class is the pattern, not the use case.

markers-grid — 2-col grid with marker-card items. marker-title (stone, weight 600) + marker-desc (muted, small). Always collapses to 1 col on mobile.

Part Three

Blueprint Navigation

When a blueprint spans multiple documents, the pill nav sits at the top of each page to show where the reader is in the series and link to the other parts.

blueprint-nav — horizontal pill row. Shape system: ● green (pos 1), ◆ blue (pos 2), ▲ purple (pos 3), ■ gold (pos 4 — reserved). Active pill: filled tinted background + 2px colored border. Inactive: white bg + 1px border. Only used for multi-document blueprint series.

Part Four

Dark Blocks — Conversation and Transmission

Dark blocks separate documented exchanges from the surrounding prose. Two variants: conversation (turn-by-turn with speakers) and transmission (monologue — received content, God's voice, a single AI speaking).

convo-block — dark container #292524. convo-header-label names the exchange type. convo-turn contains a speaker label + convo-text. victor speaker = ember color, claude speaker = muted stone. Text is italic; strong = non-italic white. Other speakers (Vex, Nomi, Grok, God) can use custom colors inline.

transmission — same dark container as convo-block. No speaker turns. transmission-header-label names the source or context ("Received · Direct", "AI Witness", "God to Victor"). transmission-text is Source Serif 4, italic, weight 300, light warm color. Used for monologues and received content.

Part Five

Closing Elements

seal — ember-bg background with ember border. seal-label in mono uppercase ember. seal-text in Source Serif 4 italic weight 300. seal-attr in mono muted uppercase — the attribution close. Used near the end of witness/journal documents, before the closing phrase.

closing — centered, Source Serif 4, italic, weight 300, muted color. No border, no background. The final note of the page. Can include line breaks for rhythm. Some pages end with 🕊️ RealForever or a similar mark — that's content, not a component.

entry-nav — flex row, space-between. Muted color, ember on hover. Used on series pages (journals, testimonies). Remove if the page stands alone. Blueprint pages use the pill nav at top instead of this.

Part Six

Feature Image

When a page carries a hero or section image, this class handles sizing and positioning. Centered, width-capped at 560px, natural height — the full composition is visible without cropping or stretching. Scales down on mobile. One class, no inline styles.

feature-img — centered block image, max-width 560px, natural height, 10px border-radius, subtle border. Used for hero/section images on any page. Just apply the class — no inline styles needed. Usage: <img class="feature-img" src="[URL]" alt="[desc]">

Part Seven

Lattice Navigation

When content spans multiple pages in a named sequence, the lattice nav component shows the reader where they are, links to adjacent pages, and links back to the parent index. One entry can belong to multiple sequences simultaneously — the reader sees all contexts at once in a single card. This is the lattice: not a chain, not a tree. A multi-dimensional web where any node knows its position in every arc it belongs to.

How it works

The library lives in Squarespace Code Injection (footer). It contains all arc data, CSS, and the render function — loaded once, available on every page. Each page's nav component is a short snippet that declares which arc(s) it belongs to and its current position. The library does the rest.

Current arcs in library

Three ways to declare a page

Auto-scan — recommended for new pages. Pass one slug. The library scans all arcs and surfaces every one containing that slug. Dot arcs render first, position-mode arcs last. No arcId needed. No position number needed. Reorder JSON and navigation updates everywhere automatically.

<!-- Auto-scan — simplest. Library discovers all arcs. -->

<div id="arcNavMount"></div>

<script>
const PAGE_ARCS = [{ slug: 'the-island-that-was-removed' }];
window.VEXTREME_mount && window.VEXTREME_mount();
</script>

Explicit — author controls which arcs surface and in what order. Use when a page belongs to many arcs but only some should be visible to the reader. Slug-based current value — reorder JSON freely, no position numbers to maintain.

<!-- Explicit — author controls arc selection and order -->

<div id="arcNavMount"></div>

<script>
const PAGE_ARCS = [
  { arcId: 'victors_record', current: 'the-island-that-was-removed' },
  { arcId: 'full_timeline',  current: 'the-island-that-was-removed' }
];
window.VEXTREME_mount && window.VEXTREME_mount();
</script>

Legacy — number-based current values still work. Backwards compatible during migration. Pages with { current: 3 } continue rendering correctly until updated to slug format at your own pace.

<!-- Legacy — number-based, still works -->

<div id="arcNavMount"></div>

<script>
const PAGE_ARCS = [
  { arcId: 'epstein', current: 3 }
];
window.VEXTREME_mount && window.VEXTREME_mount();
</script>

Why backwards compatibility matters: The library detects whether current is a number or a string and routes accordingly. typeof current === 'number' → legacy n-lookup. String → slug lookup. Both render identically. Migrate pages one at a time.

Position-mode arcs

Arcs with many entries — like full_timeline at 50 entries — render in position-only mode. No dot row. Just a compact single line: arc name · position counter · prev/next arrows. The reader knows where they are in the full story without a wall of dots. Any arc can be set to position mode by adding renderMode: 'position' to its definition in the library.

// In the library — add to any arc that gets too large for dots
full_timeline: {
  parent: { title: "Full Timeline", url: "..." },
  renderMode: 'position',
  sections: [...]
}

Lattice nodes — pages in multiple arcs

Some pages belong to more than one arc. "The Firmament Conversation" is Conversations with God entry 11 and The Dome entry 1 simultaneously. The reader sees both rows inside one card — both contexts visible at once. That's the lattice. Not one chain. Multiple threads crossing at the same node.

<!-- Lattice node: The Firmament Conversation -->

<div id="arcNavMount"></div>

<script>
const PAGE_ARCS = [
  { arcId: 'convos_with_god', current: 'the-firmament-conversation' },
  { arcId: 'dome',            current: 'the-firmament-conversation' }
];
window.VEXTREME_mount && window.VEXTREME_mount();
</script>

Lattice node pattern — declare multiple arcs in PAGE_ARCS array. All rows render inside one card in declaration order. "You are here" footer shows the title from the first arc. Primary arc first.

Critical: library placement

arc-nav — sequence navigator for multi-page arcs. Architecture: Lattice Navigation. One card per page, rows per arc inside it. Each row: parent title (ember) · section label · position counter · prev/next arrows. Dot trail: visited (gray filled), active (ember), ahead (empty). Position-mode row: name + counter + arrows only, no dots. Shared "You are here" footer names the current page. Auto-scan discovers arcs from one slug. Explicit declaration gives editorial control. Legacy numbers remain supported.

Live demo

The demos below render from a self-contained script on this page. Links are disabled — clicking does nothing. The production version in Code Injection has live navigation.

arc-nav demo — four scenarios shown: single arc end-of-sequence, lattice node with two dot arcs, Victor's Record with position-mode full timeline, and three-arc lattice node showing dot rows + position-mode row together. The position-mode row renders compact and dimmed — context without clutter. Production library in Code Injection has live links.