Opening section title

Opening paragraph. The first h2 in .article-body has no top border. All subsequent h2s get an automatic top border and padding.

Use em tags for accent-colored emphasis. Use strong tags for heading-colored bold text. Standard paragraph spacing is automatic.

Blockquotes are styled with a gold left border and dimmed background. Use them for Bible quotations and Socratic questions that break up the prose.

Subheading (h3)

Use h3 for subsections within a main section. They get slightly smaller text and tighter margins than h2.

  • Bullet list item one. Bold labels with plain descriptions work well for multi-point arguments.
  • Bullet list item two. Keep list items substantive – not single words.
  • Bullet list item three. Lists break up prose and improve scan-ability.
  1. Ordered lists work the same way.
  2. Use them when sequence matters.
  3. Both ul and ol get consistent padding and spacing.

Mirror Grid – two-column comparison

Use .mirror-grid for side-by-side comparisons. Two columns: left is muted, right is primary text. Headers get accent styling.

Column A Header
Column B Header
Left cell row 1
Right cell row 1
Left cell row 2
Right cell row 2
Left cell row 3
Right cell row 3

Translation Split – word fork diagram

Use .translation-split to show one word/concept splitting into two different translations or meanings.

Original Word Description of what this word means or where it appears.
↓ "Translation A" Source A when used in context A
↓ "Translation B" Source B when used in context B

Data Table – forty-table

Use .forty-table for structured data with column headers. The last row auto-highlights. Column helper classes: .ft-who (bold), .ft-dur (accent), .ft-purp (muted), .ft-out (normal).

Who Duration Purpose Outcome
Person A 40 days Purpose description Outcome description
Person B 40 years Purpose description Outcome description
Highlighted Final row Auto-highlighted Gold background

Tetra Grid – three-column label + two comparisons

Use .tetra-grid for three-column comparisons where the first column is a label/category. All three headers show in accent color.

Label
Column A
Column B
Row 1
Value A1 (muted)
Value B1 (bold)
Row 2
Value A2
Value B2
Row 3
Value A3
Value B3

Inversion Grid – three-column before/after

Use .inversion-grid for before/after or old/new comparisons. First column is accent label. Second is muted (before). Third is primary (after). The first header has no explicit color; the second is muted; the third is accent.

Category
Before
After
Item 1
Old state or behavior
New state or result
Item 2
Old state
New state
Item 3
Old state
New state

Pattern Grid – label + citation + description

Use .pattern-grid for structured lists where each item has a label, a citation/reference, and a description. The first row with .pg-header acts as a column header.

Category Reference Description
Item One Book 1:1 Brief description of what this item demonstrates
Item Two Book 2:3 Brief description of the second point
Item Three Book 3:5 Brief description of the third point

Expandable panels

Two types of expandable panels: details.more-context for supplementary information, and details.what-about for objections and counter-arguments.

More context Title of the context panel

First paragraph of expanded content. Uses accent emphasis and heading-colored bold just like the article body.

Second paragraph. Add as many paragraphs as needed. The last paragraph auto-removes its bottom margin.

"Common objection or question phrased as a quote"

End each major section with a Socratic question in a blockquote. These break up the text and give the reader something to sit with before continuing.