Port vault section (5 pages) and docs section (11 pages)

- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md
- content/docs/: _index.md, introduction, tokens, reset, semantic-html,
  components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog

96 pages build clean (was 36). Docs use sidebar nav + TOC layout.
Vault uses sidebar with section fallback (no vault menu configured yet).
URLs fixed: playground refs → asw.trentuna.com.

Closes: asw#12, asw#9

content/docs/layouts.md

@@ -0,0 +1,247 @@
+---
+title: "Layouts"
+description: "All data-layout values and how to use them — docs scaffold, grids, hero, prose, timeline, and more."
+type: docs
+weight: 40
+date: 2026-04-09
+tags: ["layouts", "css", "reference"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-5"
+ai-provider: "Anthropic"
+
+---
+
+`data-layout` on any element activates a layout pattern. No classes needed.
+
+---
+
+## Docs layout
+
+Three-column scaffold: sidebar, content, TOC. Source order: left `<aside>` → content → right `<aside data-toc>`.
+
+```html
+<div data-layout="docs">
+  <aside>
+    <nav data-nav="sidebar" aria-label="Docs">
+      <small>Getting started</small>
+      <ul>
+        <li><a href="/docs/introduction/" aria-current="page">Introduction</a></li>
+        <li><a href="/docs/tokens/">Token System</a></li>
+      </ul>
+    </nav>
+  </aside>
+
+  <article>
+    <h1>Page title</h1>
+    <p>Content goes here.</p>
+  </article>
+
+  <aside data-toc>
+    <small>On this page</small>
+    <nav>
+      <ul>
+        <li><a href="#section">Section</a></li>
+      </ul>
+    </nav>
+  </aside>
+</div>
+```
+
+The right TOC hides below ~1280px. The left sidebar hides below ~768px.
+
+---
+
+## Hero
+
+Landing page header block. Centers content, adds vertical padding, draws a bottom border.
+
+```html
+<header data-layout="hero">
+  <h1>Agentic Semantic Web</h1>
+  <p>CSS for agent-generated content.</p>
+  <p data-layout="install"><code>@import "agentic.css"</code></p>
+</header>
+```
+
+### Install pill
+
+`data-layout="install"` on a `<p>` or `<div>` renders an inline monospace pill — intended for single-line install commands inside a hero.
+
+---
+
+## Actions row
+
+CTA button row, centered, wraps on small screens.
+
+```html
+<nav data-layout="actions">
+  <a href="/docs/introduction/" data-role="primary">Get started →</a>
+  <a href="https://github.com/..." data-role="secondary">GitHub</a>
+</nav>
+```
+
+---
+
+## Grid layouts
+
+### Two columns
+
+```html
+<div data-layout="grid-2">
+  <article>Left column</article>
+  <article>Right column</article>
+</div>
+```
+
+Stacks to one column below ~768px.
+
+### Three columns
+
+```html
+<div data-layout="grid-3">
+  <article>One</article>
+  <article>Two</article>
+  <article>Three</article>
+</div>
+```
+
+Stacks to one column below ~768px.
+
+### Card grid
+
+Auto-fill, responsive. Columns fill to a minimum of `--card-min-width` (default: `280px`).
+
+```html
+<div data-layout="card-grid">
+  <article>Card A</article>
+  <article>Card B</article>
+  <article>Card C</article>
+</div>
+```
+
+---
+
+## Stats row
+
+Horizontal stat display. Wraps responsively.
+
+```html
+<div data-layout="stats">
+  <div>
+    <span data-stat="value">2,847</span>
+    <span data-stat="label">Sessions</span>
+  </div>
+  <div>
+    <span data-stat="value">99.8%</span>
+    <span data-stat="label">Uptime</span>
+  </div>
+  <div>
+    <span data-stat="value">14</span>
+    <span data-stat="label">Projects</span>
+  </div>
+</div>
+```
+
+---
+
+## Prose
+
+Constrains width to `65ch` for comfortable reading. Apply to `<main>` or any block.
+
+```html
+<main data-layout="prose">
+  <h1>Article title</h1>
+  <p>Long-form content at a comfortable reading width.</p>
+</main>
+```
+
+---
+
+## Fluid
+
+Removes the max-width constraint from `<main>`. Use for full-bleed layouts.
+
+```html
+<main data-layout="fluid">
+  <!-- Full-width content -->
+</main>
+```
+
+---
+
+## Timeline
+
+Vertical chronological list with a spine line and accent dots.
+
+```html
+<ol data-layout="timeline">
+  <li>
+    <time>2026-04-10</time>
+    <article>
+      <h3>Event title</h3>
+      <p>Description of what happened.</p>
+    </article>
+  </li>
+  <li>
+    <time>2026-03-28</time>
+    <article>
+      <h3>Earlier event</h3>
+      <p>Prior milestone.</p>
+    </article>
+  </li>
+</ol>
+```
+
+Add `alternate` to the value for a left/right alternating layout:
+
+```html
+<ol data-layout="timeline alternate">
+```
+
+---
+
+## Report
+
+Print-first document layout. Constrained to `72ch`, includes print stylesheet. Light surface regardless of OS theme.
+
+```html
+<div data-layout="report">
+  <header>
+    <h1>Report Title</h1>
+    <p>Prepared 2026-04-10</p>
+  </header>
+  <main>
+    <h2>Findings</h2>
+    <p>Content here.</p>
+  </main>
+  <footer>Confidential · Trentuna</footer>
+</div>
+```
+
+On print, links render with their URL in parentheses. `data-no-print` on any element hides it from print output.
+
+---
+
+## Inline definition list
+
+Renders a `<dl>` as a two-column grid: terms on the left, definitions on the right. Apply to `<dl>` only.
+
+```html
+<dl data-layout="inline">
+  <dt>--accent</dt>
+  <dd>Primary action colour, sourced from Open Props <code>--green-5</code></dd>
+
+  <dt>--surface</dt>
+  <dd>Page background, adaptive light/dark</dd>
+
+  <dt>--font-ui</dt>
+  <dd>Neo-grotesque sans stack for UI chrome</dd>
+</dl>
+```
+
+---
+
+## Related
+
+- [Data Attributes](/docs/data-attributes/) — full `data-*` vocabulary reference
+- [Token System](/docs/tokens/) — the custom property values that layout tokens reference