feat: site restructure — layouts gallery, docs sections with inline demos

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

@@ -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>

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>

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>

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>