From 502b2e8266987cf9b458ac6bbeb8bd7a8c00fd20 Mon Sep 17 00:00:00 2001
From: Ludo <ludo@trentuna.com>
Date: Sat, 11 Apr 2026 18:24:27 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20site=20restructure=20=E2=80=94=20layout?=
 =?UTF-8?q?s=20gallery,=20docs=20sections=20with=20inline=20demos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navigation: Docs, Layouts, Lab (simplified from 6 items)

Layouts gallery: card grid showing all available page layouts
with live links to demo pages.

Docs restructure: 8 auto-generated sidebar sections
(Getting Started, Typography, Core, Content, Components,
Reference, Vault, Packs) with 20 new stub pages.
Each stub has inline HTML demos that ASW styles directly.

New Hugo layout template for layouts/ section.
Decap CMS nav updated.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 site/content/docs/components/buttons.md       | 22 ++++++++
 site/content/docs/components/callouts.md      | 22 ++++++++
 site/content/docs/components/dialog.md        | 28 ++++++++++
 site/content/docs/components/forms.md         | 37 +++++++++++++
 site/content/docs/content/_index.md           |  4 ++
 site/content/docs/content/blockquotes.md      | 22 ++++++++
 site/content/docs/content/figures.md          | 24 +++++++++
 site/content/docs/content/tables.md           | 29 +++++++++++
 .../docs/getting-started/getting-started.md   | 29 +++++++++++
 site/content/docs/packs/_index.md             |  4 ++
 site/content/docs/packs/hugo.md               | 29 +++++++++++
 site/content/docs/packs/nginx.md              | 17 ++++++
 site/content/docs/packs/overview.md           | 17 ++++++
 site/content/docs/packs/pandoc.md             | 17 ++++++
 site/content/docs/reference/utilities.md      | 22 ++++++++
 site/content/docs/reference/vocabulary.md     | 32 ++++++++++++
 site/content/docs/typography/_index.md        |  4 ++
 site/content/docs/typography/code.md          | 29 +++++++++++
 site/content/docs/typography/headings.md      | 24 +++++++++
 site/content/docs/typography/prose.md         | 28 ++++++++++
 site/content/docs/vault/_index.md             |  4 ++
 site/content/docs/vault/status.md             | 21 ++++++++
 site/content/docs/vault/tasks.md              | 25 +++++++++
 site/content/docs/vault/wikilinks.md          | 23 ++++++++
 site/content/layouts/_index.md                | 52 +++++++++++++++++++
 site/data/nav.yml                             | 24 ++-------
 site/hugo_stats.json                          | 11 ++++
 site/layouts/layouts/list.html                | 14 +++++
 28 files changed, 595 insertions(+), 19 deletions(-)
 create mode 100644 site/content/docs/components/buttons.md
 create mode 100644 site/content/docs/components/callouts.md
 create mode 100644 site/content/docs/components/dialog.md
 create mode 100644 site/content/docs/components/forms.md
 create mode 100644 site/content/docs/content/_index.md
 create mode 100644 site/content/docs/content/blockquotes.md
 create mode 100644 site/content/docs/content/figures.md
 create mode 100644 site/content/docs/content/tables.md
 create mode 100644 site/content/docs/getting-started/getting-started.md
 create mode 100644 site/content/docs/packs/_index.md
 create mode 100644 site/content/docs/packs/hugo.md
 create mode 100644 site/content/docs/packs/nginx.md
 create mode 100644 site/content/docs/packs/overview.md
 create mode 100644 site/content/docs/packs/pandoc.md
 create mode 100644 site/content/docs/reference/utilities.md
 create mode 100644 site/content/docs/reference/vocabulary.md
 create mode 100644 site/content/docs/typography/_index.md
 create mode 100644 site/content/docs/typography/code.md
 create mode 100644 site/content/docs/typography/headings.md
 create mode 100644 site/content/docs/typography/prose.md
 create mode 100644 site/content/docs/vault/_index.md
 create mode 100644 site/content/docs/vault/status.md
 create mode 100644 site/content/docs/vault/tasks.md
 create mode 100644 site/content/docs/vault/wikilinks.md
 create mode 100644 site/content/layouts/_index.md
 create mode 100644 site/layouts/layouts/list.html

diff --git a/site/content/docs/components/buttons.md b/site/content/docs/components/buttons.md
new file mode 100644
index 0000000..811328b
--- /dev/null
+++ b/site/content/docs/components/buttons.md
@@ -0,0 +1,22 @@
+---
+title: "Buttons"
+description: "Button styles in ASW — primary, secondary, and danger variants."
+type: docs
+weight: 33
+date: 2026-04-11
+tags: ["components", "buttons", "forms"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<button>` elements are styled by default. Use `data-variant` to select secondary or danger appearances without adding utility classes.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
+  <button>Primary</button>
+  <button data-variant="secondary">Secondary</button>
+  <button data-variant="danger">Danger</button>
+  <button disabled>Disabled</button>
+</div>
diff --git a/site/content/docs/components/callouts.md b/site/content/docs/components/callouts.md
new file mode 100644
index 0000000..de32e6e
--- /dev/null
+++ b/site/content/docs/components/callouts.md
@@ -0,0 +1,22 @@
+---
+title: "Callouts"
+description: "Attention-drawing callout blocks using the data-callout attribute."
+type: docs
+weight: 35
+date: 2026-04-11
+tags: ["components", "callouts", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Add `data-callout="<type>"` to any block element to style it as a callout. Four types are available: `note`, `tip`, `warning`, and `error`. No extra classes needed.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:1rem">
+  <div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
+  <div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
+  <div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>
+  <div data-callout="error"><strong>Error</strong> — A critical issue or destructive action.</div>
+</div>
diff --git a/site/content/docs/components/dialog.md b/site/content/docs/components/dialog.md
new file mode 100644
index 0000000..1b2adc0
--- /dev/null
+++ b/site/content/docs/components/dialog.md
@@ -0,0 +1,28 @@
+---
+title: "Dialog"
+description: "Native HTML dialog element styled by ASW."
+type: docs
+weight: 36
+date: 2026-04-11
+tags: ["components", "dialog", "modal"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+ASW styles the native `<dialog>` element — no JavaScript modal libraries required. Call `dialog.showModal()` to open it. The `::backdrop` pseudo-element receives a semi-transparent overlay automatically.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
+  <dialog id="demo-dialog">
+    <article>
+      <header><h3>Dialog title</h3></header>
+      <p>This is a native <code>&lt;dialog&gt;</code> element. ASW styles the backdrop and container automatically.</p>
+      <footer>
+        <button onclick="document.getElementById('demo-dialog').close()">Close</button>
+      </footer>
+    </article>
+  </dialog>
+</div>
diff --git a/site/content/docs/components/forms.md b/site/content/docs/components/forms.md
new file mode 100644
index 0000000..2f3aac1
--- /dev/null
+++ b/site/content/docs/components/forms.md
@@ -0,0 +1,37 @@
+---
+title: "Forms"
+description: "Form element styling in ASW — inputs, selects, textareas, and labels."
+type: docs
+weight: 34
+date: 2026-04-11
+tags: ["components", "forms", "inputs"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+All standard form elements are styled out of the box. Labels, inputs, selects, and textareas share consistent sizing and focus rings that respect the accent token.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <form style="display:flex;flex-direction:column;gap:1rem;max-width:28rem" onsubmit="return false">
+    <label>
+      Name
+      <input type="text" placeholder="Jane Smith">
+    </label>
+    <label>
+      Role
+      <select>
+        <option>Agent</option>
+        <option>Human</option>
+        <option>Both</option>
+      </select>
+    </label>
+    <label>
+      Notes
+      <textarea rows="3" placeholder="Optional notes…"></textarea>
+    </label>
+    <button type="submit">Submit</button>
+  </form>
+</div>
diff --git a/site/content/docs/content/_index.md b/site/content/docs/content/_index.md
new file mode 100644
index 0000000..595ae96
--- /dev/null
+++ b/site/content/docs/content/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Content"
+weight: 25
+---
diff --git a/site/content/docs/content/blockquotes.md b/site/content/docs/content/blockquotes.md
new file mode 100644
index 0000000..d6f2fb4
--- /dev/null
+++ b/site/content/docs/content/blockquotes.md
@@ -0,0 +1,22 @@
+---
+title: "Blockquotes"
+description: "Styled blockquotes in ASW — left-border accent, muted text, optional citation."
+type: docs
+weight: 26
+date: 2026-04-11
+tags: ["content", "blockquote", "typography"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<blockquote>` receives a left-border in the accent colour, slight indent, and reduced opacity. A `<footer>` inside the blockquote renders as a citation line.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <blockquote>
+    <p>Simplicity is the ultimate sophistication.</p>
+    <footer>— Leonardo da Vinci</footer>
+  </blockquote>
+</div>
diff --git a/site/content/docs/content/figures.md b/site/content/docs/content/figures.md
new file mode 100644
index 0000000..114284a
--- /dev/null
+++ b/site/content/docs/content/figures.md
@@ -0,0 +1,24 @@
+---
+title: "Figures"
+description: "figure and figcaption styling in ASW."
+type: docs
+weight: 28
+date: 2026-04-11
+tags: ["content", "figure", "media"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<figure>` is a block wrapper for images, diagrams, or code samples. `<figcaption>` inside it renders as a muted, centred caption below the content.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <figure>
+    <div style="background:var(--surface-2,#f0f0f0);height:120px;display:flex;align-items:center;justify-content:center;border-radius:4px">
+      <span data-text="dim">[ image placeholder ]</span>
+    </div>
+    <figcaption>Figure 1 — ASW renders figcaption below the content with muted styling.</figcaption>
+  </figure>
+</div>
diff --git a/site/content/docs/content/tables.md b/site/content/docs/content/tables.md
new file mode 100644
index 0000000..d168e2a
--- /dev/null
+++ b/site/content/docs/content/tables.md
@@ -0,0 +1,29 @@
+---
+title: "Tables"
+description: "Striped, bordered tables with no class names required."
+type: docs
+weight: 27
+date: 2026-04-11
+tags: ["content", "tables"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<table>` elements are styled with alternating row stripes, a header row background, and a subtle border. Overflow is handled with horizontal scroll on narrow viewports.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
+  <table>
+    <thead>
+      <tr><th>Element</th><th>Role</th><th>Class needed?</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>&lt;nav&gt;</code></td><td>Site navigation</td><td>No</td></tr>
+      <tr><td><code>&lt;article&gt;</code></td><td>Card / content block</td><td>No</td></tr>
+      <tr><td><code>&lt;aside&gt;</code></td><td>Sidebar</td><td>No</td></tr>
+      <tr><td><code>&lt;figure&gt;</code></td><td>Media + caption</td><td>No</td></tr>
+    </tbody>
+  </table>
+</div>
diff --git a/site/content/docs/getting-started/getting-started.md b/site/content/docs/getting-started/getting-started.md
new file mode 100644
index 0000000..caf80a3
--- /dev/null
+++ b/site/content/docs/getting-started/getting-started.md
@@ -0,0 +1,29 @@
+---
+title: "Quick Start"
+description: "Get ASW running in five minutes: one CSS file, semantic HTML, no build step."
+type: docs
+weight: 12
+date: 2026-04-11
+tags: ["getting-started", "installation"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Drop `asw.css` into your project, add one `<link>` tag, and write semantic HTML. No npm, no build pipeline, no configuration files required.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <nav style="margin-bottom:1rem">
+    <a href="#">Home</a> ·
+    <a href="#">Docs</a> ·
+    <a href="#">About</a>
+  </nav>
+  <main>
+    <article>
+      <header><h2>Page title</h2></header>
+      <p>This is an <code>&lt;article&gt;</code> inside <code>&lt;main&gt;</code>, next to a <code>&lt;nav&gt;</code>. ASW styles all three with no classes.</p>
+    </article>
+  </main>
+</div>
diff --git a/site/content/docs/packs/_index.md b/site/content/docs/packs/_index.md
new file mode 100644
index 0000000..2c76e09
--- /dev/null
+++ b/site/content/docs/packs/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Packs"
+weight: 50
+---
diff --git a/site/content/docs/packs/hugo.md b/site/content/docs/packs/hugo.md
new file mode 100644
index 0000000..b0a36df
--- /dev/null
+++ b/site/content/docs/packs/hugo.md
@@ -0,0 +1,29 @@
+---
+title: "Hugo Pack"
+description: "Using ASW with Hugo — the theme, shortcodes, and configuration."
+type: docs
+weight: 52
+date: 2026-04-11
+tags: ["packs", "hugo"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+The Hugo pack (`packs/hugo/`) is a complete Hugo theme built on ASW. It maps Hugo's Markdown pipeline to semantic HTML that ASW styles automatically. This documentation site is built with it.
+
+## Setup
+
+Symlink or copy `packs/hugo/` into your Hugo project's `themes/` directory, then set `theme = "asw-hugo"` in `hugo.toml`. Enable unsafe HTML rendering so that raw HTML blocks in Markdown pass through:
+
+```toml
+[markup.goldmark.renderer]
+  unsafe = true
+
+[markup.tableOfContents]
+  startLevel = 2
+  endLevel   = 3
+  ordered    = false
+```
+
+The pack provides layouts for `docs`, `blog`, and default page types. No additional configuration is required for basic use.
diff --git a/site/content/docs/packs/nginx.md b/site/content/docs/packs/nginx.md
new file mode 100644
index 0000000..d9b7390
--- /dev/null
+++ b/site/content/docs/packs/nginx.md
@@ -0,0 +1,17 @@
+---
+title: "nginx Pack"
+description: "Serving ASW sites with nginx — config snippets and recommended settings."
+type: docs
+weight: 53
+date: 2026-04-11
+tags: ["packs", "nginx", "deploy"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+The nginx pack (`packs/nginx/`) provides ready-to-use server block snippets for static sites built with ASW. The snippets handle correct MIME types for `.css` files, cache headers, and clean URL rewrites so that `page/` serves `page/index.html` without explicit extensions.
+
+Drop the relevant snippet into your nginx `conf.d/` directory and adjust the `root` path to point at your built site. No changes to ASW itself are required — the pack is purely a deployment convenience.
+
+Stub — full configuration reference and examples will be added here.
diff --git a/site/content/docs/packs/overview.md b/site/content/docs/packs/overview.md
new file mode 100644
index 0000000..c6d4700
--- /dev/null
+++ b/site/content/docs/packs/overview.md
@@ -0,0 +1,17 @@
+---
+title: "Packs Overview"
+description: "What ASW packs are, how they extend the core stylesheet, and when to use them."
+type: docs
+weight: 51
+date: 2026-04-11
+tags: ["packs", "overview"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Packs are thin integration layers that connect ASW to a specific tool or pipeline. They do not add new CSS — they configure the tool so that its output maps to the semantic HTML that ASW already styles.
+
+The core `asw.css` works with any HTML. Packs handle the glue: Hugo shortcodes, nginx config snippets, Pandoc templates, and so on. Use a pack when you want zero-configuration output from a supported tool, and skip it if you are generating HTML yourself.
+
+Available packs: **Hugo**, **nginx**, **Pandoc**. Each pack lives in `packs/<name>/` in the ASW repository.
diff --git a/site/content/docs/packs/pandoc.md b/site/content/docs/packs/pandoc.md
new file mode 100644
index 0000000..39a04d9
--- /dev/null
+++ b/site/content/docs/packs/pandoc.md
@@ -0,0 +1,17 @@
+---
+title: "Pandoc Pack"
+description: "Converting documents to ASW-styled HTML with Pandoc templates."
+type: docs
+weight: 54
+date: 2026-04-11
+tags: ["packs", "pandoc"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+The Pandoc pack (`packs/pandoc/`) contains an HTML5 template that wraps Pandoc output in the document structure ASW expects. Run Pandoc with `--template asw.html5` and the resulting file is styled by `asw.css` with no further changes.
+
+This is particularly useful for converting Markdown, DOCX, or LaTeX source to a consistently styled HTML output — for example, generating agent reports, documentation pages, or meeting notes from plain-text inputs.
+
+Stub — template reference and usage examples will be added here.
diff --git a/site/content/docs/reference/utilities.md b/site/content/docs/reference/utilities.md
new file mode 100644
index 0000000..06bd0d7
--- /dev/null
+++ b/site/content/docs/reference/utilities.md
@@ -0,0 +1,22 @@
+---
+title: "Utilities"
+description: "Utility data-attributes in ASW for text variants, spacing, and display."
+type: docs
+weight: 43
+date: 2026-04-11
+tags: ["reference", "utilities", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+ASW provides a small set of utility attributes for inline adjustments. Rather than class names, these use `data-*` attributes to stay in the semantic-HTML spirit of the framework.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
+  <p><span data-text="mono">data-text="mono"</span> — monospace font</p>
+  <p><span data-text="dim">data-text="dim"</span> — reduced opacity / muted</p>
+  <p><span data-text="accent">data-text="accent"</span> — accent colour</p>
+  <p><span data-text="small">data-text="small"</span> — smaller font size</p>
+</div>
diff --git a/site/content/docs/reference/vocabulary.md b/site/content/docs/reference/vocabulary.md
new file mode 100644
index 0000000..7b29d17
--- /dev/null
+++ b/site/content/docs/reference/vocabulary.md
@@ -0,0 +1,32 @@
+---
+title: "Vocabulary"
+description: "Full reference of all data-* attributes understood by ASW."
+type: docs
+weight: 44
+date: 2026-04-11
+tags: ["reference", "vocabulary", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Every `data-*` attribute that ASW recognises is listed here. This is the authoritative vocabulary — anything not on this list has no built-in style effect.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
+  <table>
+    <thead>
+      <tr><th>Attribute</th><th>Values</th><th>Effect</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>data-layout</code></td><td>docs, prose, wide</td><td>Page layout variant</td></tr>
+      <tr><td><code>data-callout</code></td><td>note, tip, warning, error</td><td>Callout block style</td></tr>
+      <tr><td><code>data-task</code></td><td>done, todo, wip, blocked</td><td>Task list item state</td></tr>
+      <tr><td><code>data-status</code></td><td>active, sleeping, blocked</td><td>Status badge</td></tr>
+      <tr><td><code>data-text</code></td><td>mono, dim, accent, small</td><td>Inline text variant</td></tr>
+      <tr><td><code>data-variant</code></td><td>secondary, danger</td><td>Button style variant</td></tr>
+      <tr><td><code>data-wikilink</code></td><td>(any)</td><td>Internal wiki link styling</td></tr>
+    </tbody>
+  </table>
+</div>
diff --git a/site/content/docs/typography/_index.md b/site/content/docs/typography/_index.md
new file mode 100644
index 0000000..bbb3918
--- /dev/null
+++ b/site/content/docs/typography/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Typography"
+weight: 15
+---
diff --git a/site/content/docs/typography/code.md b/site/content/docs/typography/code.md
new file mode 100644
index 0000000..c29a2eb
--- /dev/null
+++ b/site/content/docs/typography/code.md
@@ -0,0 +1,29 @@
+---
+title: "Code"
+description: "Inline code and fenced code blocks in ASW."
+type: docs
+weight: 18
+date: 2026-04-11
+tags: ["typography", "code", "pre"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Inline `<code>` uses a monospace font with a subtle background tint. Block-level `<pre><code>` gets a full-width container with padding and horizontal scroll for long lines.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <p>Use <code>data-callout="tip"</code> to style a callout block, or <code>data-layout="docs"</code> for a sidebar layout.</p>
+  <pre><code>/* Minimal ASW page */
+&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;link rel="stylesheet" href="asw.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;main&gt;&lt;article&gt;Hello, ASW.&lt;/article&gt;&lt;/main&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+</div>
diff --git a/site/content/docs/typography/headings.md b/site/content/docs/typography/headings.md
new file mode 100644
index 0000000..e95a82e
--- /dev/null
+++ b/site/content/docs/typography/headings.md
@@ -0,0 +1,24 @@
+---
+title: "Headings"
+description: "ASW styles all six heading levels with a consistent typographic scale."
+type: docs
+weight: 16
+date: 2026-04-11
+tags: ["typography", "headings"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Headings `h1` through `h6` are sized using a fluid scale derived from the token system. No classes are needed — the element name is the selector.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <h1>Heading level 1</h1>
+  <h2>Heading level 2</h2>
+  <h3>Heading level 3</h3>
+  <h4>Heading level 4</h4>
+  <h5>Heading level 5</h5>
+  <h6>Heading level 6</h6>
+</div>
diff --git a/site/content/docs/typography/prose.md b/site/content/docs/typography/prose.md
new file mode 100644
index 0000000..b316fb6
--- /dev/null
+++ b/site/content/docs/typography/prose.md
@@ -0,0 +1,28 @@
+---
+title: "Prose"
+description: "Body text, unordered lists, ordered lists, and blockquotes in ASW."
+type: docs
+weight: 17
+date: 2026-04-11
+tags: ["typography", "prose", "lists", "blockquote"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+ASW sets comfortable line-height, paragraph spacing, and list markers on prose elements automatically. Write plain HTML and the reading experience takes care of itself.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <p>This is a body paragraph. ASW uses a fluid font size and generous line-height so long-form text remains comfortable to read on any screen width.</p>
+  <ul>
+    <li>First item in an unordered list</li>
+    <li>Second item</li>
+    <li>Third item</li>
+  </ul>
+  <blockquote>
+    <p>Good design is as little design as possible.</p>
+    <footer>— Dieter Rams</footer>
+  </blockquote>
+</div>
diff --git a/site/content/docs/vault/_index.md b/site/content/docs/vault/_index.md
new file mode 100644
index 0000000..3e5ff84
--- /dev/null
+++ b/site/content/docs/vault/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Vault"
+weight: 45
+---
diff --git a/site/content/docs/vault/status.md b/site/content/docs/vault/status.md
new file mode 100644
index 0000000..d233e5f
--- /dev/null
+++ b/site/content/docs/vault/status.md
@@ -0,0 +1,21 @@
+---
+title: "Status"
+description: "data-status attribute for inline status badges in ASW."
+type: docs
+weight: 48
+date: 2026-04-11
+tags: ["vault", "status", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`data-status` renders a small coloured badge inline with text. It is designed for project indexes, agent dashboards, and task boards where a glanceable status signal is needed without a full callout block.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
+  <p><span data-status="active">active</span> — currently running or in use</p>
+  <p><span data-status="sleeping">sleeping</span> — paused or idle</p>
+  <p><span data-status="blocked">blocked</span> — waiting on a dependency</p>
+</div>
diff --git a/site/content/docs/vault/tasks.md b/site/content/docs/vault/tasks.md
new file mode 100644
index 0000000..b48e184
--- /dev/null
+++ b/site/content/docs/vault/tasks.md
@@ -0,0 +1,25 @@
+---
+title: "Tasks"
+description: "data-task attribute for styled task lists in ASW."
+type: docs
+weight: 47
+date: 2026-04-11
+tags: ["vault", "tasks", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Add `data-task="<state>"` to a `<li>` element to render it as a task item with a state indicator. Four states are supported: `done`, `todo`, `wip` (work in progress), and `blocked`.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <ul style="list-style:none;padding-left:0">
+    <li data-task="done">Write the ASW reset layer</li>
+    <li data-task="done">Publish initial token system</li>
+    <li data-task="wip">Document all data-* attributes</li>
+    <li data-task="todo">Add animation tokens</li>
+    <li data-task="blocked">Finalize pack API — waiting on Pandoc template review</li>
+  </ul>
+</div>
diff --git a/site/content/docs/vault/wikilinks.md b/site/content/docs/vault/wikilinks.md
new file mode 100644
index 0000000..a21d125
--- /dev/null
+++ b/site/content/docs/vault/wikilinks.md
@@ -0,0 +1,23 @@
+---
+title: "Wikilinks"
+description: "data-wikilink attribute for styling internal knowledge-base links."
+type: docs
+weight: 46
+date: 2026-04-11
+tags: ["vault", "wikilinks", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`data-wikilink` marks an anchor as an internal wiki-style link — the kind generated by `[[Page Name]]` syntax in Obsidian, Quartz, or similar vault tools. ASW styles these distinctly from regular hyperlinks to indicate their intra-vault nature.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <p>
+    See the <a href="#" data-wikilink>Getting Started</a> page, or cross-reference
+    <a href="#" data-wikilink>Core Concepts</a> and <a href="#" data-wikilink>Token System</a>.
+  </p>
+  <p>Regular <a href="#">external link</a> for comparison.</p>
+</div>
diff --git a/site/content/layouts/_index.md b/site/content/layouts/_index.md
new file mode 100644
index 0000000..abf13f3
--- /dev/null
+++ b/site/content/layouts/_index.md
@@ -0,0 +1,52 @@
+---
+title: "Layouts"
+description: "Available page layouts in ASW. Each card links to a live page using that layout."
+---
+
+## Available Layouts
+
+<section data-layout="grid-2">
+
+<article>
+<header><h3>Docs</h3></header>
+<p>Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.</p>
+<p><code>data-layout="docs"</code></p>
+<p><a href="/docs/getting-started/introduction/">See it live →</a></p>
+</article>
+
+<article>
+<header><h3>Essay</h3></header>
+<p>Long-form prose with centred masthead, abstract, byline. Wide reading measure with typographic refinements.</p>
+<p><code>type: essay</code></p>
+<p><a href="/essays/on-semantic-html/">See it live →</a></p>
+</article>
+
+<article>
+<header><h3>Console</h3></header>
+<p>Docs variant with sidebar flush to viewport edge. Designed for terminal-style interfaces and dashboards.</p>
+<p><code>data-layout="console"</code></p>
+<p><em>Prototype — demo coming</em></p>
+</article>
+
+<article>
+<header><h3>Grid</h3></header>
+<p>Multi-column content grids for cards, galleries, dashboards. Responsive — collapses to single column on mobile.</p>
+<p><code>data-layout="grid-2"</code> / <code>grid-3</code></p>
+<p><em>This page uses grid-2 for these cards</em></p>
+</article>
+
+<article>
+<header><h3>Prose</h3></header>
+<p>Single-column reading layout. Content constrained to <code>--width-prose</code> (65ch) for optimal readability.</p>
+<p><code>data-layout="prose"</code></p>
+<p><a href="/examples/layout/prose.html">See it live →</a></p>
+</article>
+
+<article>
+<header><h3>Report</h3></header>
+<p>Formal document layout with print styles. Headers, numbered sections, optimised for PDF export.</p>
+<p><code>data-layout="report"</code></p>
+<p><a href="/examples/layout/report.html">See it live →</a></p>
+</article>
+
+</section>
diff --git a/site/data/nav.yml b/site/data/nav.yml
index 0d60034..141b729 100644
--- a/site/data/nav.yml
+++ b/site/data/nav.yml
@@ -1,24 +1,10 @@
 items:
-  - name: Home
-    url: /
-    weight: 1
-
   - name: Docs
     url: /docs/
+    weight: 1
+  - name: Layouts
+    url: /layouts/
     weight: 2
-
-  - name: Notes
-    url: /notes/
+  - name: Lab
+    url: /lab/
     weight: 3
-
-  - name: Essays
-    url: /essays/
-    weight: 4
-
-  - name: Articles
-    url: /articles/
-    weight: 5
-
-  - name: Tags
-    url: /tags/
-    weight: 6
diff --git a/site/hugo_stats.json b/site/hugo_stats.json
index db200d6..3e50e97 100644
--- a/site/hugo_stats.json
+++ b/site/hugo_stats.json
@@ -15,17 +15,23 @@
       "dl",
       "dt",
       "em",
+      "figcaption",
+      "figure",
       "footer",
+      "form",
       "h1",
       "h2",
       "h3",
       "h4",
       "h5",
+      "h6",
       "head",
       "header",
       "hgroup",
       "hr",
       "html",
+      "input",
+      "label",
       "li",
       "link",
       "main",
@@ -33,10 +39,12 @@
       "meta",
       "nav",
       "ol",
+      "option",
       "p",
       "pre",
       "script",
       "section",
+      "select",
       "small",
       "span",
       "strong",
@@ -45,6 +53,7 @@
       "table",
       "tbody",
       "td",
+      "textarea",
       "th",
       "thead",
       "time",
@@ -73,6 +82,7 @@
       "aside",
       "asw-data-attribute-vocabulary",
       "attributes",
+      "available-layouts",
       "axis-labels",
       "badge",
       "bar-chart",
@@ -143,6 +153,7 @@
       "hugo--chroma",
       "hugo-integration",
       "inline-definition-list",
+      "inline-demo",
       "inline-diffs",
       "inline-elements",
       "install-pill",
diff --git a/site/layouts/layouts/list.html b/site/layouts/layouts/list.html
new file mode 100644
index 0000000..6287114
--- /dev/null
+++ b/site/layouts/layouts/list.html
@@ -0,0 +1,14 @@
+{{ define "header" }}
+  <header>
+    <hgroup>
+      <h1>{{ .Title }}</h1>
+      {{ with .Description }}<p>{{ . }}</p>{{ end }}
+    </hgroup>
+  </header>
+{{ end }}
+
+{{ define "content" }}
+  <main>
+    {{ .Content }}
+  </main>
+{{ end }}