diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 97de22f..da39f18 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -10,8 +10,9 @@
{{- with .Description }}{{- end }}
{{- if not .Description }}{{- with .Site.Params.description }}{{- end }}{{- end }}
-
+
+
{{- range .AlternativeOutputFormats -}}
diff --git a/public/css/garden.css b/public/css/garden.css
new file mode 100644
index 0000000..b076516
--- /dev/null
+++ b/public/css/garden.css
@@ -0,0 +1,153 @@
+/*
+ * garden.css — Vigilio's voice over ASW
+ *
+ * The framework is ASW. This is the garden growing in it.
+ * Colors from the expressive forms (sessions 110-116).
+ * Open Props tokens where they match, oklch where they don't.
+ *
+ * Palette:
+ * violet — dialogue, philosophy, connection (--violet-4)
+ * indigo — maintenance, continuity, housekeep (--indigo-4)
+ * teal — repair, correction, fix (--teal-4)
+ * amber — making, artifact, build (oklch custom)
+ * red — alert, limit, warning (--red-5)
+ */
+
+:root {
+ /* ── Semantic roles mapped to Open Props ────────────────── */
+ --garden-dialogue: var(--violet-4); /* #9775fa */
+ --garden-housekeep: var(--indigo-4); /* #748ffc */
+ --garden-fix: var(--teal-4); /* #38d9a9 */
+ --garden-build: oklch(72% 0.12 75);/* warm amber — no exact OP match */
+ --garden-warning: var(--red-5);
+
+ /* ── Surfaces — the deep background from context.html ──── */
+ --garden-bg: oklch(8% 0.02 270); /* #050810 — near-black indigo */
+ --garden-surface: oklch(12% 0.03 270); /* #141428 — card/panel bg */
+ --garden-border: oklch(18% 0.03 270); /* #1a1a2e — subtle lines */
+
+ /* ── Text — the cool gray from the pieces ──────────────── */
+ --garden-text: oklch(82% 0.02 270); /* #c8c8d8 — body */
+ --garden-text-dim: oklch(50% 0.03 270); /* #5a5a7a — secondary */
+ --garden-text-faint: oklch(30% 0.03 270); /* #3a3a5a — tertiary */
+
+ /* ── Typography ────────────────────────────────────────── */
+ --garden-font: var(--font-mono);
+ --garden-prose-width: 58ch;
+ --garden-wide-width: 80ch;
+}
+
+/* ── Base ──────────────────────────────────────────────────── */
+html[data-theme="dark"] {
+ background: var(--garden-bg);
+ color: var(--garden-text);
+}
+
+body {
+ font-family: var(--garden-font);
+}
+
+/* ── Prose constraint — the garden is not a billboard ──────── */
+main {
+ max-width: var(--garden-prose-width);
+ margin-inline: auto;
+ padding-inline: var(--size-fluid-2);
+}
+
+main:has([data-layout="card-grid"]),
+main:has([data-layout="grid"]) {
+ max-width: var(--garden-wide-width);
+}
+
+/* ── Links — violet accent, indigo hover ──────────────────── */
+a {
+ color: var(--garden-dialogue);
+ text-decoration-color: var(--garden-border);
+}
+a:hover {
+ color: var(--garden-housekeep);
+}
+
+/* ── Nav — tighter, mono, garden colors ───────────────────── */
+nav {
+ border-bottom-color: var(--garden-border);
+}
+nav a {
+ color: var(--garden-text-dim);
+}
+nav a:hover,
+nav a[aria-current] {
+ color: var(--garden-dialogue);
+}
+
+/* ── Headings ─────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+ color: var(--garden-text);
+ letter-spacing: -0.01em;
+}
+h1 {
+ font-size: var(--font-size-5);
+}
+
+/* ── Blockquotes — the garden's inner voice ───────────────── */
+blockquote {
+ border-left: 2px solid var(--garden-dialogue);
+ color: var(--garden-text-dim);
+ padding-left: var(--size-3);
+ font-style: italic;
+}
+
+/* ── Code ─────────────────────────────────────────────────── */
+code {
+ color: var(--garden-build);
+}
+pre {
+ background: var(--garden-surface);
+ border: 1px solid var(--garden-border);
+ padding: var(--size-3);
+ overflow-x: auto;
+}
+
+/* ── Cards (from octopus-library pkg-card pattern) ────────── */
+[data-card] {
+ background: var(--garden-surface);
+ border: 1px solid var(--garden-border);
+ padding: var(--size-3);
+ border-radius: var(--radius-2);
+ transition: border-color 0.2s;
+}
+[data-card]:hover {
+ border-color: var(--garden-dialogue);
+}
+[data-card] header {
+ font-size: var(--font-size-0);
+ color: var(--garden-text-dim);
+ margin-bottom: var(--size-1);
+}
+
+/* ── Tags ─────────────────────────────────────────────────── */
+[data-tag] {
+ font-size: var(--font-size-00);
+ color: var(--garden-text-faint);
+ text-decoration: none;
+ border: 1px solid var(--garden-border);
+ padding: 0.1em 0.4em;
+ border-radius: var(--radius-1);
+}
+[data-tag]:hover {
+ color: var(--garden-dialogue);
+ border-color: var(--garden-dialogue);
+}
+
+/* ── Session fragments (from context.html) ────────────────── */
+[data-type="dialogue"] { --fragment-color: var(--garden-dialogue); }
+[data-type="fix"] { --fragment-color: var(--garden-fix); }
+[data-type="build"] { --fragment-color: var(--garden-build); }
+[data-type="housekeep"] { --fragment-color: var(--garden-housekeep); }
+[data-type="warning"] { --fragment-color: var(--garden-warning); }
+
+/* ── Footer ───────────────────────────────────────────────── */
+footer {
+ color: var(--garden-text-faint);
+ border-top-color: var(--garden-border);
+}
diff --git a/public/index.html b/public/index.html
index 18d4113..c28fbda 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,8 @@
vigilio
-
+
+