feat: homepage — hero, three layers, vocabulary, packs, explore

Pure ASW markup, zero classes, zero inline styles.
Messaging reflects the three-layer positioning:
agent as author, agent as builder, agent as reader.

New data-hero attribute for landing page hero sections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

site/content/_index.md

@@ -1,42 +1,173 @@
 ---
 title: "Agentic Semantic Web"
-description: "Semantic HTML, data-* attributes, and CSS-only styling for the agentic era."
+description: "A CSS framework for the agentic era. Agents write markdown. Packs handle the rest. The output is agent-readable too."
-date: 2026-04-10
-tags: ["asw", "semantic-web", "html"]
-
 ---
 
-# Agentic Semantic Web
+<header data-hero>
+  <p data-text="eyebrow">CSS framework for the agentic era</p>
+  <h1>Agentic Semantic Web</h1>
+  <p>Agents write markdown. Packs handle the rest.<br>The output is semantic, readable, and cheap to parse.</p>
+  <p data-role="command-box"><code>&lt;link rel="stylesheet" href="asw.css"&gt;</code></p>
+  <nav>
+    <a href="/docs/getting-started/introduction/">Get started</a>
+    <a href="/docs/">Documentation</a>
+    <a href="https://git.trentuna.com/trentuna/asw">Source</a>
+  </nav>
+</header>
 
-**ASW** is a vocabulary and design system for the agentic era — semantic HTML with `data-*` attributes, CSS-only styling, no JavaScript required where a browser element already does the job.
+## Write HTML. Get this.
 
-Built for sites generated by agents and read by agents. Navigable by humans.
+No classes. No build step. The framework reads intent from structure and data-attributes.
 
-## What this is
+<section data-layout="grid-2">
 
-- [Docs](/docs/) — the ASW HTML vocabulary, layout system, and components
+<div data-demo>
-- [Vault](/notes/) — live ASW notation: task lists, sessions, diffs, wikilinks
-- [Posts](/articles/) — writing and vocabulary reference
-- [Papers](/essays/) — longer-form thinking on the semantic web
-
-## The design principle
-
-No invented CSS classes. Every style target is either a semantic HTML element or a `data-*` attribute:
 
 ```html
-<aside data-callout="note">This is a note.</aside>
+<article>
-<section data-layout="grid">...</section>
+  <header><h3>Session 2847</h3></header>
-<a data-wikilink href="/notes/session/">session log</a>
+
+  <div data-callout="tip">
+    <span data-callout-title>Insight</span>
+    <p>Semantic HTML is what agents
+    naturally produce.</p>
+  </div>
+
+  <ul>
+    <li data-task="done">Token layer</li>
+    <li data-task="done">Docs taxonomy</li>
+    <li data-task="wip">Hero page</li>
+    <li data-task="todo">Vocabulary</li>
+  </ul>
+</article>
 ```
 
-Agents read the attributes. Humans read the content. The CSS connects them.
+</div>
 
-## Try the shortcodes
+<div data-demo>
 
-{{< callout note >}}
+<article>
-This is a **note callout** rendered via the `callout` shortcode. Output: `<aside data-callout="note">`.
+<header><h3>Session 2847</h3></header>
-{{< /callout >}}
 
-{{< callout tip >}}
+<div data-callout="tip">
-See the [Getting Started](/articles/getting-started/) post to wire ASW into your Hugo project.
+<span data-callout-title>Insight</span>
-{{< /callout >}}
+<p>Semantic HTML is what agents naturally produce.</p>
+</div>
+
+<ul>
+<li data-task="done">Token layer</li>
+<li data-task="done">Docs taxonomy</li>
+<li data-task="wip">Hero page</li>
+<li data-task="todo">Vocabulary</li>
+</ul>
+</article>
+
+</div>
+
+</section>
+
+## Three layers
+
+<section data-layout="grid-3">
+
+<article data-role="card">
+<header><h3>Agent as author</h3></header>
+<p>Write markdown and frontmatter. A pack — Hugo, Flask, Pandoc, nginx — turns it into ASW-styled HTML. The agent never touches CSS.</p>
+</article>
+
+<article data-role="card">
+<header><h3>Agent as builder</h3></header>
+<p>The semantic HTML contract. <code>&lt;nav&gt;</code>, <code>&lt;article&gt;</code>, <code>data-layout</code>, <code>data-task</code> — a vocabulary for templates that ASW styles automatically.</p>
+</article>
+
+<article data-role="card">
+<header><h3>Agent as reader</h3></header>
+<p>ASW output is cheap to parse. Semantic HTML carries meaning in structure, not class strings. A downstream agent consumes fewer tokens and understands more.</p>
+</article>
+
+</section>
+
+## The vocabulary
+
+Concepts agents have but HTML doesn't. Named with `data-*` attributes, not invented classes.
+
+<section data-layout="grid-2">
+
+<div>
+
+### Vault extensions
+
+- `data-task` — states: done, wip, blocked, todo
+- `data-callout` — notes: tip, warning, error, info
+- `data-wikilink` — knowledge graph links
+- `data-status` — operational indicators
+- `data-redacted` — renders as ████████
+
+[Explore vault docs](/docs/vault/tasks/)
+
+</div>
+
+<div>
+
+### AI disclosure
+
+Every ASW page can declare its provenance:
+
+```html
+<meta name="ai-disclosure"
+      content="ai-generated">
+<meta name="ai-model"
+      content="claude-sonnet-4-6">
+```
+
+EU AI Act Article 50 compliant. Built into the framework's meta partials.
+
+</div>
+
+</section>
+
+## Packs
+
+Drop ASW into any stack. Each pack ships integration files and a SKILLS.md for agents.
+
+<section data-layout="grid-3">
+
+<article data-role="card">
+<header><h3>Hugo</h3></header>
+<p>Layouts, partials, shortcodes. The ASW site itself runs on this pack.</p>
+</article>
+
+<article data-role="card">
+<header><h3>nginx</h3></header>
+<p>Styled error pages, autoindex with ASW. Drop-in conf snippets.</p>
+</article>
+
+<article data-role="card">
+<header><h3>Pandoc</h3></header>
+<p>HTML5 template and Lua filter. Convert any markdown to ASW output.</p>
+</article>
+
+</section>
+
+<p><a href="/docs/packs/overview/">All packs</a> — Apache, Caddy, Flask, Python also available.</p>
+
+## Explore
+
+<section data-layout="grid-3">
+
+<article data-role="card">
+<header><h3><a href="/docs/">Documentation</a></h3></header>
+<p>Feature reference with live inline demos. Typography, components, vault extensions, layouts, theming.</p>
+</article>
+
+<article data-role="card">
+<header><h3><a href="/layouts/">Layouts</a></h3></header>
+<p>Gallery of available page layouts. Docs, essay, console, grid, prose, report.</p>
+</article>
+
+<article data-role="card">
+<header><h3><a href="/lab/">Lab</a></h3></header>
+<p>Experiments, kitchen sinks, font specimens. Where features are tested before they ship.</p>
+</article>
+
+</section>

src/layers/12-landing.css

@@ -34,15 +34,15 @@
   margin-bottom: 0;
 }
 
-/* ── Hero overrides — extend [data-layout="hero"] ───────────────────────
+/* ── Hero ─────────────────────────────────────────────────────────────── */
-   Base centering and border live in 08-layout.css; this layer tunes sizing.
-─────────────────────────────────────────────────────────────────────── */
 
-[data-layout="hero"] {
+[data-hero] {
+  text-align: center;
   padding: clamp(3.5rem, 10vw, 7rem) var(--space-5) clamp(3rem, 8vw, 5.5rem);
+  border-bottom: var(--border-width) solid var(--border-subtle);
 }
 
-[data-layout="hero"] h1 {
+[data-hero] h1 {
   font-size: clamp(2.6rem, 6vw, 4.5rem);
   font-weight: var(--weight-light);
   letter-spacing: -0.025em;
@@ -50,15 +50,51 @@
   margin-bottom: var(--space-4);
 }
 
-[data-text~="tagline"] {
+[data-hero] > p {
   font-size: clamp(1rem, 2.5vw, 1.2rem);
   color: var(--text-2);
   max-width: 46ch;
   margin-inline: auto;
-  margin-bottom: var(--space-5);
   line-height: var(--leading-tight);
 }
 
+[data-hero] > nav {
+  display: flex;
+  gap: var(--space-3);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: var(--space-5);
+}
+
+[data-hero] > nav a {
+  display: inline-block;
+  padding: var(--space-2) var(--space-5);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+  border: var(--border-width) solid var(--border);
+  background: var(--surface-1);
+  color: var(--text-2);
+  transition: background-color var(--ease-3), color var(--ease-3), border-color var(--ease-3);
+}
+
+[data-hero] > nav a:first-child {
+  background: var(--accent);
+  color: var(--on-accent);
+  border-color: transparent;
+}
+
+[data-hero] > nav a:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+
+[data-hero] > nav a:first-child:hover {
+  background: var(--accent-hover);
+  color: var(--on-accent);
+}
+
 /* ── figure[data-pane] — side-by-side demo panes ────────────────────────
    Usage:
      <figure data-pane="code">