refactor: CSS task 10 — final layer numbering, merge essay into layout

Rename all layers to target numbering scheme:
  02-typography, 05-components, 07-data-attrs, 08-utilities,
  09-charts, 10-chroma, 11-layout, 12-landing

Merge 08a-essay.css into 11-layout.css.
13 clean layers, 00 through 12.

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

src/layers/08a-essay.css

@@ -1,84 +0,0 @@
-/**
- * 08-paper.css
- * Long-form research / essay content type — article[data-paper]
- * Promoted from lab/hugo-demo paper/single.html inline <style> block.
- * Part of: Agentic Semantic Web
- */
-
-/* ── Reading column ─────────────────────────────────────────────────── */
-
-article[data-paper] {
-  max-width: 68ch;
-  margin-inline: auto;
-}
-
-/* ── Centred masthead ───────────────────────────────────────────────── */
-
-article[data-paper] > header {
-  text-align: center;
-  padding-bottom: var(--space-6);
-  margin-bottom: var(--space-6);
-  border-bottom: var(--border-width) solid var(--border-subtle);
-}
-
-article[data-paper] > header h1 {
-  font-size: clamp(1.6rem, 4vw, 2.4rem);
-  font-weight: var(--weight-light);
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-  margin-bottom: var(--space-4);
-}
-
-/* ── Abstract / description ─────────────────────────────────────────── */
-
-article[data-paper] > header [data-abstract] {
-  font-size: var(--text-base);
-  color: var(--text-2);
-  max-width: 52ch;
-  margin-inline: auto;
-  margin-bottom: var(--space-4);
-  line-height: var(--leading);
-  font-style: italic;
-}
-
-/* ── Byline ─────────────────────────────────────────────────────────── */
-
-article[data-paper] > header [data-byline] {
-  font-size: var(--text-sm);
-  color: var(--text-3);
-  font-family: var(--font-mono);
-  margin-bottom: var(--space-3);
-}
-
-article[data-paper] > header [data-byline] time {
-  font-variant-numeric: tabular-nums;
-}
-
-/* ── Tags beneath byline ────────────────────────────────────────────── */
-
-article[data-paper] > header nav[data-role="tag-cloud"] {
-  justify-content: center;
-  margin-top: var(--space-3);
-  margin-bottom: 0;
-}
-
-/* ── Footer prev/next ───────────────────────────────────────────────── */
-
-article[data-paper] > footer {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-4);
-  margin-top: var(--space-8);
-  padding-top: var(--space-5);
-  border-top: var(--border-width) solid var(--border-subtle);
-  font-size: var(--text-sm);
-}
-
-article[data-paper] > footer a {
-  color: var(--text-2);
-  text-decoration: none;
-}
-
-article[data-paper] > footer a:hover {
-  color: var(--text);
-}

src/layers/11-layout.css

@@ -498,3 +498,88 @@ article[data-layout="prose"],
     display: none !important;
   }
 }
+
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Essay / Paper layout — article[data-paper]
+   Long-form research content with centred masthead.
+   (Merged from 08a-essay.css)
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Reading column ─────────────────────────────────────────────────── */
+
+article[data-paper] {
+  max-width: 68ch;
+  margin-inline: auto;
+}
+
+/* ── Centred masthead ───────────────────────────────────────────────── */
+
+article[data-paper] > header {
+  text-align: center;
+  padding-bottom: var(--space-6);
+  margin-bottom: var(--space-6);
+  border-bottom: var(--border-width) solid var(--border-subtle);
+}
+
+article[data-paper] > header h1 {
+  font-size: clamp(1.6rem, 4vw, 2.4rem);
+  font-weight: var(--weight-light);
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin-bottom: var(--space-4);
+}
+
+/* ── Abstract / description ─────────────────────────────────────────── */
+
+article[data-paper] > header [data-abstract] {
+  font-size: var(--text-base);
+  color: var(--text-2);
+  max-width: 52ch;
+  margin-inline: auto;
+  margin-bottom: var(--space-4);
+  line-height: var(--leading);
+  font-style: italic;
+}
+
+/* ── Byline ─────────────────────────────────────────────────────────── */
+
+article[data-paper] > header [data-byline] {
+  font-size: var(--text-sm);
+  color: var(--text-3);
+  font-family: var(--font-mono);
+  margin-bottom: var(--space-3);
+}
+
+article[data-paper] > header [data-byline] time {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Tags beneath byline ────────────────────────────────────────────── */
+
+article[data-paper] > header nav[data-role="tag-cloud"] {
+  justify-content: center;
+  margin-top: var(--space-3);
+  margin-bottom: 0;
+}
+
+/* ── Footer prev/next ───────────────────────────────────────────────── */
+
+article[data-paper] > footer {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-top: var(--space-8);
+  padding-top: var(--space-5);
+  border-top: var(--border-width) solid var(--border-subtle);
+  font-size: var(--text-sm);
+}
+
+article[data-paper] > footer a {
+  color: var(--text-2);
+  text-decoration: none;
+}
+
+article[data-paper] > footer a:hover {
+  color: var(--text);
+}

src/main.css

@@ -13,15 +13,14 @@
 /* 2. Framework layers */
 @import "./layers/00-reset.css";
 @import "./layers/01-tokens.css";
-@import "./layers/02-semantic.css";
+@import "./layers/02-typography.css";
 @import "./layers/03-landmarks.css";
 @import "./layers/04-forms.css";
-@import "./layers/03-components.css";
+@import "./layers/05-components.css";
 @import "./layers/06-navigation.css";
-@import "./layers/04-data-attrs.css";
-@import "./layers/05-utilities.css";
-@import "./layers/06-charts.css";
-@import "./layers/07-chroma.css";
-@import "./layers/08-layout.css";
-@import "./layers/08a-essay.css";
-@import "./layers/09-landing.css";
+@import "./layers/07-data-attrs.css";
+@import "./layers/08-utilities.css";
+@import "./layers/09-charts.css";
+@import "./layers/10-chroma.css";
+@import "./layers/11-layout.css";
+@import "./layers/12-landing.css";