diff --git a/src/layers/03-components.css b/src/layers/03-components.css
index f89a6b4..3156d03 100644
--- a/src/layers/03-components.css
+++ b/src/layers/03-components.css
@@ -1,585 +1,16 @@
 /**
- * 03-components.css
- * UI component patterns (buttons, forms, nav, dialog, details)
+ * 03-components.css → will become 05-components.css in Task 10
+ * Compound UI patterns: accordion, dialog, breadcrumb, steps.
  * Part of: Agentic Semantic Web
  *
- * Ported from: Pico CSS v2.1.1
- * License: MIT
- *
- * Modernizations:
- * - Uses `accent-color` for checkbox/radio (simpler than background-image)
- * - Drops class-based button variants (.secondary, .contrast, .outline)
+ * Buttons/forms extracted to 04-forms.css
+ * Landmarks extracted to 03-landmarks.css
+ * Sidebar/TOC extracted to 06-navigation.css
  */
 
-/* ── Buttons ───────────────────────────────────────────────────────────*/
-
-button {
-  margin: 0;
-  overflow: visible;
-  font-family: inherit;
-  text-transform: none;
-}
-
-button,
-[type=submit],
-[type=reset],
-[type=button],
-[role=button] {
-
-
-
-  display: inline-block;
-  padding: var(--input-py) var(--input-px);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-md);
-  outline: none;
-  background-color: var(--surface);
-  color: var(--text);
-  font-weight: var(--weight-normal);
-  font-size: var(--text-base);
-  line-height: var(--leading);
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color var(--ease),
-              border-color var(--ease),
-              color var(--ease);
-}
-
-button:is(:hover, :active, :focus-visible),
-[type=submit]:is(:hover, :active, :focus-visible),
-[type=reset]:is(:hover, :active, :focus-visible),
-[type=button]:is(:hover, :active, :focus-visible),
-[role=button]:is(:hover, :active, :focus-visible) {
-  background-color: var(--surface-hover);
-  border-color: var(--border);
-  color: var(--text);
-}
-
-button:focus-visible,
-[type=submit]:focus-visible,
-[type=reset]:focus-visible,
-[type=button]:focus-visible,
-[role=button]:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) var(--accent-focus);
-}
-
-button[disabled],
-[type=submit][disabled],
-[type=reset][disabled],
-[type=button][disabled],
-[role=button][disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* ── Form Elements ─────────────────────────────────────────────────────*/
-
-input,
-optgroup,
-select,
-textarea {
-  margin: 0;
-  font-size: var(--text-base);
-  line-height: var(--leading);
-  font-family: inherit;
-  letter-spacing: inherit;
-}
-
-fieldset {
-  width: 100%;
-  margin: 0;
-  margin-bottom: var(--space-4);
-  padding: 0;
-  border: 0;
-}
-
-fieldset legend,
-label {
-  display: block;
-  margin-bottom: calc(var(--space-4) * 0.375);
-  color: var(--text);
-  font-weight: var(--weight-normal);
-}
-
-input:not([type=checkbox], [type=radio], [type=range], [type=file]),
-select,
-textarea {
-  width: 100%;
-  padding: var(--input-py) var(--input-px);
-  border: var(--border-width) solid var(--input-border);
-  border-radius: var(--radius-md);
-  outline: none;
-  background-color: var(--input-bg);
-  color: var(--text);
-  font-weight: var(--weight-normal);
-  transition: background-color var(--ease),
-              border-color var(--ease),
-              color var(--ease);
-}
-
-input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):is(:active, :focus-visible),
-select:not([readonly]):is(:active, :focus-visible),
-textarea:not([readonly]):is(:active, :focus-visible) {
-  border-color: var(--accent);
-  background-color: var(--input-active-bg);
-}
-
-input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):focus-visible,
-select:not([readonly]):focus-visible,
-textarea:not([readonly]):focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) var(--accent);
-}
-
-input:not([type=checkbox], [type=radio], [type=range], [type=file])[disabled],
-select[disabled],
-textarea[disabled] {
-  opacity: var(--disabled-opacity);
-  pointer-events: none;
-}
-
-input::placeholder,
-textarea::placeholder,
-select:invalid {
-  color: var(--text-3);
-  opacity: 1;
-}
-
-input:not([type=checkbox], [type=radio]),
-select,
-textarea {
-  margin-bottom: var(--space-4);
-}
-
-/* ── Select Dropdown ───────────────────────────────────────────────────*/
-
-select:not([multiple], [size]) {
-  padding-right: calc(var(--input-px) + 1.5rem);
-  background-image: var(--icon-chevron);
-  background-position: center right 0.75rem;
-  background-size: 1rem auto;
-  background-repeat: no-repeat;
-}
-
-select[multiple] option:checked {
-  background: var(--input-selected);
-  color: var(--text);
-}
-
-/* ── Textarea ──────────────────────────────────────────────────────────*/
-
-textarea {
-  display: block;
-  resize: vertical;
-}
-
-/* ── Checkboxes & Radios (Modern CSS) ──────────────────────────────────*/
-
-label:has([type=checkbox], [type=radio]) {
-  width: fit-content;
-  cursor: pointer;
-}
-
-[type=checkbox],
-[type=radio] {
-  width: 1.25em;
-  height: 1.25em;
-  margin-top: -0.125em;
-  margin-right: 0.5em;
-  vertical-align: middle;
-  cursor: pointer;
-
-  /* Modern CSS: use browser's native styling with our accent color */
-  accent-color: var(--accent);
-}
-
-[type=checkbox] ~ label,
-[type=radio] ~ label {
-  display: inline-block;
-  margin-bottom: 0;
-  cursor: pointer;
-}
-
-[type=checkbox] ~ label:not(:last-of-type),
-[type=radio] ~ label:not(:last-of-type) {
-  margin-right: 1em;
-}
-
-/* ── Validation States ─────────────────────────────────────────────────*/
-
-input[aria-invalid=false],
-select[aria-invalid=false],
-textarea[aria-invalid=false] {
-  border-color: var(--accent);
-}
-
-input[aria-invalid=false]:is(:active, :focus-visible),
-select[aria-invalid=false]:is(:active, :focus-visible),
-textarea[aria-invalid=false]:is(:active, :focus-visible) {
-  border-color: var(--accent-hover);
-  box-shadow: 0 0 0 var(--outline-width) var(--accent-focus) !important;
-}
-
-input[aria-invalid=true],
-select[aria-invalid=true],
-textarea[aria-invalid=true] {
-  border-color: var(--error);
-}
-
-input[aria-invalid=true]:is(:active, :focus-visible),
-select[aria-invalid=true]:is(:active, :focus-visible),
-textarea[aria-invalid=true]:is(:active, :focus-visible) {
-  border-color: var(--error-active);
-  box-shadow: 0 0 0 var(--outline-width) var(--error-focus) !important;
-}
-
-/* ── Helper Text ───────────────────────────────────────────────────────*/
-
-:where(input, select, textarea, fieldset) + small {
-  display: block;
-  width: 100%;
-  margin-top: calc(var(--space-4) * -0.75);
-  margin-bottom: var(--space-4);
-  color: var(--text-3);
-}
-
-:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
-  color: var(--accent);
-}
-
-:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
-  color: var(--accent-red);
-}
-
-label > :where(input, select, textarea) {
-  margin-top: calc(var(--space-4) * 0.25);
-}
-
-/* ── Navigation ────────────────────────────────────────────────────────*/
-/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
-
-/* Nav content centered at --width-xl without a wrapper element.
-   max() falls back to --container-padding on narrow viewports.   */
-body > nav {
-  padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
-}
-
-body > nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: var(--space-5);
-  padding-bottom: var(--space-5);
-
-  margin-bottom: var(--space-6);
-  border-bottom: var(--border-width) solid var(--border);
-}
-
-body > nav strong {
-  font-family: var(--font-mono);
-  font-weight: 700;
-  font-size: var(--text-base);
-  letter-spacing: -0.03em;
-}
-
-body > nav ul {
-  list-style: none;
-  display: flex;
-  gap: 0;
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-}
-
-body > nav ul li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-body > nav ul li + li::before {
-  content: "|";
-  color: var(--text-dim);
-  margin: 0 0.75rem;
-}
-
-body > nav a {
-  color: var(--text-2);
-  text-decoration: none;
-  transition: color var(--ease);
-}
-
-body > nav a:hover,
-body > nav a[aria-current="page"] {
-  color: var(--text);
-}
-
-/* Medium screens: allow links to wrap */
-@media (--nav-compact) {
-  body > nav ul {
-    flex-wrap: wrap;
-    gap: 0.25rem 0;
-  }
-}
-
-/* Small screens: stack brand above links */
-@media (--md-n-below) {
-  body > nav {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-2);
-  }
-
-  body > nav ul:last-child {
-    flex-wrap: wrap;
-  }
-
-  body > nav ul:last-child li + li::before {
-    display: none;
-  }
-}
-
-/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
-/* <details> inside <nav> becomes a dropdown menu. No classes needed.
-   Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
-
-body > nav li:has(details) {
-  display: flex;
-  align-items: center;
-}
-
-body > nav details {
-  position: relative;
-  margin: 0;
-}
-
-body > nav details summary {
-  color: var(--text-2);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  list-style: none;
-  cursor: pointer;
-  transition: color var(--ease);
-}
-
-body > nav details summary:hover {
-  color: var(--text);
-}
-
-/* Override accordion chevron in nav context */
-body > nav details summary::after {
-  content: "▾";
-  float: none;
-  margin-inline-start: 0.25rem;
-  transform: none;
-  font-size: var(--text-xs);
-}
-
-body > nav details[open] > summary::after {
-  content: "▴";
-  transform: none;
-}
-
-/* Dropdown panel */
-body > nav details > ul,
-body > nav details > div {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  left: 0;
-  min-width: var(--dropdown-min-width);
-  padding: 0.5rem 0;
-  margin: 0;
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-dropdown);
-  z-index: 20;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-}
-
-body > nav details > ul li {
-  margin: 0;
-  padding: 0;
-}
-
-/* Remove pipe separator in dropdown items */
-body > nav details > ul li + li::before {
-  display: none;
-}
-
-body > nav details > ul li a {
-  display: block;
-  padding: 0.35rem 1rem;
-  color: var(--text-2);
-  text-decoration: none;
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  transition: background-color var(--ease-fast), color var(--ease-fast);
-}
-
-body > nav details > ul li a:hover {
-  background: var(--border-subtle);
-  color: var(--text);
-}
-
-/* Close dropdown when clicking outside (CSS-only via :focus-within) */
-nav details:not(:focus-within) > ul,
-nav details:not(:focus-within) > div {
-  /* Allow browser default open/close behavior —
-     no forced hiding. Agent can add JS for click-outside. */
-}
-
-/* Mobile: dropdown becomes full-width */
-@media (--md-n-below) {
-  nav details > ul,
-  nav details > div {
-    position: static;
-    box-shadow: none;
-    border: none;
-    border-left: 2px solid var(--border);
-    margin-left: 0.5rem;
-    padding: 0.25rem 0 0.25rem 0.5rem;
-    background: transparent;
-  }
-}
-
-/* ── Articles & Cards ──────────────────────────────────────────────────*/
-/* Semantic article: <article><header><h3>Title</h3></header>Content</article> */
-/* Container query: layout adapts to article's own width, not viewport.
-   An article in a sidebar shrinks gracefully; at full width it expands. */
-
-article {
-  container-type: inline-size;
-  container-name: article;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: var(--space-4) var(--space-5a);
-  margin: var(--space-3) 0;
-}
-
-article > header {
-  margin: 0 0 var(--space-2) 0;
-  padding: 0 0 0.4rem 0;
-  border-bottom: 1px solid var(--border-subtle);
-  border-top: none;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-article header h3 {
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-3);
-}
-
-/* Narrow container: compact card (sidebar, grid cell) */
-@container article (max-width: 300px) {
-  article > header {
-    border-bottom: none;
-    padding-bottom: 0;
-    margin-bottom: 0.25rem;
-  }
-
-  article header h3 {
-    font-size: var(--text-xs);
-  }
-
-  article > :is(p, dl, ul, ol) {
-    font-size: var(--text-sm);
-  }
-}
-
-/* Wide container: spacious layout */
-@container article (min-width: 600px) {
-  article {
-    padding: var(--space-5) var(--space-6);
-  }
-
-  article > header {
-    margin-bottom: var(--space-3);
-    padding-bottom: var(--space-2);
-  }
-}
-
-/* ── Definition Lists ──────────────────────────────────────────────────*/
-/* Monospace data display for dt/dd pairs */
-
-dt {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--text-2);
-  margin-top: var(--space-3);
-}
-
-dd {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  color: var(--text);
-  margin-left: 0;
-  margin-top: 0.15rem;
-}
-
-article dt:first-of-type {
-  margin-top: 0;
-}
-
-/* ── Sections ──────────────────────────────────────────────────────────*/
-
-section + section {
-  padding-top: var(--space-5);
-  border-top: var(--border-width) solid var(--border-subtle);
-}
-
-hgroup p {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  color: var(--text-3);
-  margin-top: var(--space-1);
-}
-
-/* Section intro: hgroup as centered subtitle block */
-section > hgroup:first-child {
-  text-align: center;
-  margin-bottom: var(--space-6);
-}
-
-/* Card variant: navigation cards use UI font h3, not session-log monospace */
-article[data-role="card"] header h3 {
-  font-family: var(--font-ui);
-  font-size: var(--h3-size);
-  font-weight: var(--h3-weight);
-  text-transform: none;
-  letter-spacing: normal;
-  color: var(--text);
-}
-
-/* ── Footer ────────────────────────────────────────────────────────────*/
-
-body > footer,
-footer:last-child {
-  margin-top: 3rem;
-  padding-top: var(--space-5);
-  padding-bottom: var(--space-6);
-  border-top: var(--border-width) solid var(--border);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-3);
-}
-
 /* ── Accordion / Disclosure ────────────────────────────────────────────*/
 /* Standalone <details>/<summary> — no JS needed.
-   Nav dropdown variant lives in the Nav Dropdown section above.
+   Nav dropdown variant lives in 03-landmarks.css.
    Usage:
      <details>
        <summary>Title</summary>
@@ -960,92 +391,3 @@ dialog > footer {
 [data-role="steps"][data-layout="vertical"] > li > span {
   padding-inline: 0;
 }
-
-/* ── Sidebar nav ────────────────────────────────────────────────────── */
-
-nav[data-nav="sidebar"] h3 {
-  color: var(--text-3);
-  font-size: var(--text-xs);
-  font-family: var(--font-mono);
-  font-weight: var(--weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-top: var(--space-4);
-  margin-bottom: 0;
-}
-
-nav[data-nav="sidebar"] h3:first-child {
-  margin-top: 0;
-}
-
-nav[data-nav="sidebar"] ul {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--space-1);
-  font-family: var(--font-ui);
-  font-size: var(--text-sm);
-}
-
-nav[data-nav="sidebar"] a {
-  display: block;
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--radius-md);
-  color: var(--text-2);
-  text-decoration: none;
-  transition: background-color var(--ease), color var(--ease);
-}
-
-nav[data-nav="sidebar"] a:hover {
-  background-color: var(--surface-hover);
-  color: var(--text);
-}
-
-nav[data-nav="sidebar"] a[aria-current] {
-  background-color: var(--accent-subtle);
-  color: var(--accent);
-}
-
-/* ── TOC (aside) ────────────────────────────────────────────────────── */
-
-aside[data-toc] h3 {
-  color: var(--text-3);
-  font-size: var(--text-xs);
-  font-family: var(--font-mono);
-  font-weight: var(--weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: var(--space-2);
-  margin-top: 0;
-}
-
-aside[data-toc] nav ul {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--space-1);
-  font-size: var(--text-xs);
-}
-
-aside[data-toc] nav a {
-  display: block;
-  padding: var(--space-1) var(--space-2);
-  color: var(--text-3);
-  text-decoration: none;
-  border-left: var(--focus-ring-width) solid transparent;
-  transition: color var(--ease), border-color var(--ease);
-}
-
-aside[data-toc] nav a:hover {
-  color: var(--text);
-  border-left-color: var(--border);
-}
-
-aside[data-toc] nav a[aria-current] {
-  color: var(--accent);
-  border-left-color: var(--accent);
-}
diff --git a/src/layers/03-landmarks.css b/src/layers/03-landmarks.css
new file mode 100644
index 0000000..d70cbe9
--- /dev/null
+++ b/src/layers/03-landmarks.css
@@ -0,0 +1,328 @@
+/**
+ * 03-landmarks.css
+ * HTML landmark elements — structural bones of a page.
+ * Part of: Agentic Semantic Web
+ *
+ * Covers: body > nav, article, aside, section, hgroup, dt/dd, body > footer
+ */
+
+/* ── Navigation ────────────────────────────────────────────────────────*/
+/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
+
+/* Nav content centered at --width-xl without a wrapper element.
+   max() falls back to --container-padding on narrow viewports.   */
+body > nav {
+  padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
+}
+
+body > nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-5);
+
+  margin-bottom: var(--space-6);
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+body > nav strong {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: var(--text-base);
+  letter-spacing: -0.03em;
+}
+
+body > nav ul {
+  list-style: none;
+  display: flex;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+body > nav ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+body > nav ul li + li::before {
+  content: "|";
+  color: var(--text-dim);
+  margin: 0 0.75rem;
+}
+
+body > nav a {
+  color: var(--text-2);
+  text-decoration: none;
+  transition: color var(--ease);
+}
+
+body > nav a:hover,
+body > nav a[aria-current="page"] {
+  color: var(--text);
+}
+
+/* Medium screens: allow links to wrap */
+@media (--nav-compact) {
+  body > nav ul {
+    flex-wrap: wrap;
+    gap: 0.25rem 0;
+  }
+}
+
+/* Small screens: stack brand above links */
+@media (--md-n-below) {
+  body > nav {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
+  }
+
+  body > nav ul:last-child {
+    flex-wrap: wrap;
+  }
+
+  body > nav ul:last-child li + li::before {
+    display: none;
+  }
+}
+
+/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
+/* <details> inside <nav> becomes a dropdown menu. No classes needed.
+   Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
+
+body > nav li:has(details) {
+  display: flex;
+  align-items: center;
+}
+
+body > nav details {
+  position: relative;
+  margin: 0;
+}
+
+body > nav details summary {
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  list-style: none;
+  cursor: pointer;
+  transition: color var(--ease);
+}
+
+body > nav details summary:hover {
+  color: var(--text);
+}
+
+/* Override accordion chevron in nav context */
+body > nav details summary::after {
+  content: "▾";
+  float: none;
+  margin-inline-start: 0.25rem;
+  transform: none;
+  font-size: var(--text-xs);
+}
+
+body > nav details[open] > summary::after {
+  content: "▴";
+  transform: none;
+}
+
+/* Dropdown panel */
+body > nav details > ul,
+body > nav details > div {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  min-width: var(--dropdown-min-width);
+  padding: 0.5rem 0;
+  margin: 0;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-dropdown);
+  z-index: 20;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+
+body > nav details > ul li {
+  margin: 0;
+  padding: 0;
+}
+
+/* Remove pipe separator in dropdown items */
+body > nav details > ul li + li::before {
+  display: none;
+}
+
+body > nav details > ul li a {
+  display: block;
+  padding: 0.35rem 1rem;
+  color: var(--text-2);
+  text-decoration: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  transition: background-color var(--ease-fast), color var(--ease-fast);
+}
+
+body > nav details > ul li a:hover {
+  background: var(--border-subtle);
+  color: var(--text);
+}
+
+/* Close dropdown when clicking outside (CSS-only via :focus-within) */
+nav details:not(:focus-within) > ul,
+nav details:not(:focus-within) > div {
+  /* Allow browser default open/close behavior —
+     no forced hiding. Agent can add JS for click-outside. */
+}
+
+/* Mobile: dropdown becomes full-width */
+@media (--md-n-below) {
+  nav details > ul,
+  nav details > div {
+    position: static;
+    box-shadow: none;
+    border: none;
+    border-left: 2px solid var(--border);
+    margin-left: 0.5rem;
+    padding: 0.25rem 0 0.25rem 0.5rem;
+    background: transparent;
+  }
+}
+
+/* ── Articles & Cards ──────────────────────────────────────────────────*/
+/* Semantic article: <article><header><h3>Title</h3></header>Content</article> */
+/* Container query: layout adapts to article's own width, not viewport.
+   An article in a sidebar shrinks gracefully; at full width it expands. */
+
+article {
+  container-type: inline-size;
+  container-name: article;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4) var(--space-5a);
+  margin: var(--space-3) 0;
+}
+
+article > header {
+  margin: 0 0 var(--space-2) 0;
+  padding: 0 0 0.4rem 0;
+  border-bottom: 1px solid var(--border-subtle);
+  border-top: none;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+article header h3 {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-3);
+}
+
+/* Narrow container: compact card (sidebar, grid cell) */
+@container article (max-width: 300px) {
+  article > header {
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  article header h3 {
+    font-size: var(--text-xs);
+  }
+
+  article > :is(p, dl, ul, ol) {
+    font-size: var(--text-sm);
+  }
+}
+
+/* Wide container: spacious layout */
+@container article (min-width: 600px) {
+  article {
+    padding: var(--space-5) var(--space-6);
+  }
+
+  article > header {
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+  }
+}
+
+/* ── Definition Lists ──────────────────────────────────────────────────*/
+/* Monospace data display for dt/dd pairs */
+
+dt {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-2);
+  margin-top: var(--space-3);
+}
+
+dd {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text);
+  margin-left: 0;
+  margin-top: 0.15rem;
+}
+
+article dt:first-of-type {
+  margin-top: 0;
+}
+
+/* ── Sections ──────────────────────────────────────────────────────────*/
+
+section + section {
+  padding-top: var(--space-5);
+  border-top: var(--border-width) solid var(--border-subtle);
+}
+
+hgroup p {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text-3);
+  margin-top: var(--space-1);
+}
+
+/* Section intro: hgroup as centered subtitle block */
+section > hgroup:first-child {
+  text-align: center;
+  margin-bottom: var(--space-6);
+}
+
+/* Card variant: navigation cards use UI font h3, not session-log monospace */
+article[data-role="card"] header h3 {
+  font-family: var(--font-ui);
+  font-size: var(--h3-size);
+  font-weight: var(--h3-weight);
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--text);
+}
+
+/* ── Footer ────────────────────────────────────────────────────────────*/
+
+body > footer,
+footer:last-child {
+  margin-top: 3rem;
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-6);
+  border-top: var(--border-width) solid var(--border);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-3);
+}
diff --git a/src/layers/04-forms.css b/src/layers/04-forms.css
new file mode 100644
index 0000000..1cd33e9
--- /dev/null
+++ b/src/layers/04-forms.css
@@ -0,0 +1,250 @@
+/**
+ * 04-forms.css
+ * Form element styling: buttons, inputs, selects, textareas, checkboxes, radios.
+ * Part of: Agentic Semantic Web
+ *
+ * Ported from: Pico CSS v2.1.1 (MIT)
+ * Modernizations: accent-color for checkbox/radio, no class-based variants
+ */
+
+/* ── Buttons ───────────────────────────────────────────────────────────*/
+
+button {
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  text-transform: none;
+}
+
+button,
+[type=submit],
+[type=reset],
+[type=button],
+[role=button] {
+  display: inline-block;
+  padding: var(--input-py) var(--input-px);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  outline: none;
+  background-color: var(--surface);
+  color: var(--text);
+  font-weight: var(--weight-normal);
+  font-size: var(--text-base);
+  line-height: var(--leading);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--ease),
+              border-color var(--ease),
+              color var(--ease);
+}
+
+button:is(:hover, :active, :focus-visible),
+[type=submit]:is(:hover, :active, :focus-visible),
+[type=reset]:is(:hover, :active, :focus-visible),
+[type=button]:is(:hover, :active, :focus-visible),
+[role=button]:is(:hover, :active, :focus-visible) {
+  background-color: var(--surface-hover);
+  border-color: var(--border);
+  color: var(--text);
+}
+
+button:focus-visible,
+[type=submit]:focus-visible,
+[type=reset]:focus-visible,
+[type=button]:focus-visible,
+[role=button]:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) var(--accent-focus);
+}
+
+button[disabled],
+[type=submit][disabled],
+[type=reset][disabled],
+[type=button][disabled],
+[role=button][disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Form Elements ─────────────────────────────────────────────────────*/
+
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-size: var(--text-base);
+  line-height: var(--leading);
+  font-family: inherit;
+  letter-spacing: inherit;
+}
+
+fieldset {
+  width: 100%;
+  margin: 0;
+  margin-bottom: var(--space-4);
+  padding: 0;
+  border: 0;
+}
+
+fieldset legend,
+label {
+  display: block;
+  margin-bottom: calc(var(--space-4) * 0.375);
+  color: var(--text);
+  font-weight: var(--weight-normal);
+}
+
+input:not([type=checkbox], [type=radio], [type=range], [type=file]),
+select,
+textarea {
+  width: 100%;
+  padding: var(--input-py) var(--input-px);
+  border: var(--border-width) solid var(--input-border);
+  border-radius: var(--radius-md);
+  outline: none;
+  background-color: var(--input-bg);
+  color: var(--text);
+  font-weight: var(--weight-normal);
+  transition: background-color var(--ease),
+              border-color var(--ease),
+              color var(--ease);
+}
+
+input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):is(:active, :focus-visible),
+select:not([readonly]):is(:active, :focus-visible),
+textarea:not([readonly]):is(:active, :focus-visible) {
+  border-color: var(--accent);
+  background-color: var(--input-active-bg);
+}
+
+input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):focus-visible,
+select:not([readonly]):focus-visible,
+textarea:not([readonly]):focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) var(--accent);
+}
+
+input:not([type=checkbox], [type=radio], [type=range], [type=file])[disabled],
+select[disabled],
+textarea[disabled] {
+  opacity: var(--disabled-opacity);
+  pointer-events: none;
+}
+
+input::placeholder,
+textarea::placeholder,
+select:invalid {
+  color: var(--text-3);
+  opacity: 1;
+}
+
+input:not([type=checkbox], [type=radio]),
+select,
+textarea {
+  margin-bottom: var(--space-4);
+}
+
+/* ── Select Dropdown ───────────────────────────────────────────────────*/
+
+select:not([multiple], [size]) {
+  padding-right: calc(var(--input-px) + 1.5rem);
+  background-image: var(--icon-chevron);
+  background-position: center right 0.75rem;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+}
+
+select[multiple] option:checked {
+  background: var(--input-selected);
+  color: var(--text);
+}
+
+/* ── Textarea ──────────────────────────────────────────────────────────*/
+
+textarea {
+  display: block;
+  resize: vertical;
+}
+
+/* ── Checkboxes & Radios (Modern CSS) ──────────────────────────────────*/
+
+label:has([type=checkbox], [type=radio]) {
+  width: fit-content;
+  cursor: pointer;
+}
+
+[type=checkbox],
+[type=radio] {
+  width: 1.25em;
+  height: 1.25em;
+  margin-top: -0.125em;
+  margin-right: 0.5em;
+  vertical-align: middle;
+  cursor: pointer;
+
+  /* Modern CSS: use browser's native styling with our accent color */
+  accent-color: var(--accent);
+}
+
+[type=checkbox] ~ label,
+[type=radio] ~ label {
+  display: inline-block;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+[type=checkbox] ~ label:not(:last-of-type),
+[type=radio] ~ label:not(:last-of-type) {
+  margin-right: 1em;
+}
+
+/* ── Validation States ─────────────────────────────────────────────────*/
+
+input[aria-invalid=false],
+select[aria-invalid=false],
+textarea[aria-invalid=false] {
+  border-color: var(--accent);
+}
+
+input[aria-invalid=false]:is(:active, :focus-visible),
+select[aria-invalid=false]:is(:active, :focus-visible),
+textarea[aria-invalid=false]:is(:active, :focus-visible) {
+  border-color: var(--accent-hover);
+  box-shadow: 0 0 0 var(--outline-width) var(--accent-focus) !important;
+}
+
+input[aria-invalid=true],
+select[aria-invalid=true],
+textarea[aria-invalid=true] {
+  border-color: var(--error);
+}
+
+input[aria-invalid=true]:is(:active, :focus-visible),
+select[aria-invalid=true]:is(:active, :focus-visible),
+textarea[aria-invalid=true]:is(:active, :focus-visible) {
+  border-color: var(--error-active);
+  box-shadow: 0 0 0 var(--outline-width) var(--error-focus) !important;
+}
+
+/* ── Helper Text ───────────────────────────────────────────────────────*/
+
+:where(input, select, textarea, fieldset) + small {
+  display: block;
+  width: 100%;
+  margin-top: calc(var(--space-4) * -0.75);
+  margin-bottom: var(--space-4);
+  color: var(--text-3);
+}
+
+:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
+  color: var(--accent);
+}
+
+:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
+  color: var(--accent-red);
+}
+
+label > :where(input, select, textarea) {
+  margin-top: calc(var(--space-4) * 0.25);
+}
diff --git a/src/layers/06-navigation.css b/src/layers/06-navigation.css
new file mode 100644
index 0000000..40a78e0
--- /dev/null
+++ b/src/layers/06-navigation.css
@@ -0,0 +1,96 @@
+/**
+ * 06-navigation.css
+ * Navigation patterns beyond the basic nav landmark.
+ * Part of: Agentic Semantic Web
+ *
+ * Covers: sidebar navigation, table of contents (TOC)
+ */
+
+/* ── Sidebar nav ────────────────────────────────────────────────────── */
+
+nav[data-nav="sidebar"] h3 {
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: var(--weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-top: var(--space-4);
+  margin-bottom: 0;
+}
+
+nav[data-nav="sidebar"] h3:first-child {
+  margin-top: 0;
+}
+
+nav[data-nav="sidebar"] ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-1);
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+}
+
+nav[data-nav="sidebar"] a {
+  display: block;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  color: var(--text-2);
+  text-decoration: none;
+  transition: background-color var(--ease), color var(--ease);
+}
+
+nav[data-nav="sidebar"] a:hover {
+  background-color: var(--surface-hover);
+  color: var(--text);
+}
+
+nav[data-nav="sidebar"] a[aria-current] {
+  background-color: var(--accent-subtle);
+  color: var(--accent);
+}
+
+/* ── TOC (aside) ────────────────────────────────────────────────────── */
+
+aside[data-toc] h3 {
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: var(--weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-2);
+  margin-top: 0;
+}
+
+aside[data-toc] nav ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+}
+
+aside[data-toc] nav a {
+  display: block;
+  padding: var(--space-1) var(--space-2);
+  color: var(--text-3);
+  text-decoration: none;
+  border-left: var(--focus-ring-width) solid transparent;
+  transition: color var(--ease), border-color var(--ease);
+}
+
+aside[data-toc] nav a:hover {
+  color: var(--text);
+  border-left-color: var(--border);
+}
+
+aside[data-toc] nav a[aria-current] {
+  color: var(--accent);
+  border-left-color: var(--accent);
+}
diff --git a/src/main.css b/src/main.css
index 6fef13b..924e426 100644
--- a/src/main.css
+++ b/src/main.css
@@ -14,7 +14,10 @@
 @import "./layers/00-reset.css";
 @import "./layers/01-tokens.css";
 @import "./layers/02-semantic.css";
+@import "./layers/03-landmarks.css";
+@import "./layers/04-forms.css";
 @import "./layers/03-components.css";
+@import "./layers/06-navigation.css";
 @import "./layers/04-data-attrs.css";
 @import "./layers/05-utilities.css";
 @import "./layers/06-charts.css";