css: move sidebar/TOC component styles out of layout, replace <small> with <h3>

- sidebar and TOC typography/colors moved from 08-layout.css to 03-components.css
- nav[data-nav="sidebar"] and aside[data-toc] layout-only rules remain in 08-layout.css
- <small> section labels replaced with <h3> in sidebar and TOC (semantic + accessible)
- dead selectors removed: nav[data-nav="sidebar"] nav a → nav[data-nav="sidebar"] a,
  nav[data-nav="toc"] (Hugo never outputs data-nav="toc")
- webkit scrollbar pseudo-elements removed (scrollbar-width/color sufficient)
- sidebar/TOC sticky top values split: sidebar top space-4, TOC top space-8 + padding-top
- max-height magic number (--size-px-10) replaced with token expression
- layer convention established: 03=component identity, 04=modifiers, 08=placement only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/layers/02-semantic.css

@@ -88,17 +88,17 @@ textarea {
   font-family: var(--font-ui);
 }
 
-/* ── Nav layout ─────────────────────────────────────────────────────── */
-/* Ported from Pico CSS, translated to ASW tokens.                       */
+/* ── Top nav layout ──────────────────────────────────────────────────── */
+/* Scoped to body > nav — sidebar and other navs are not affected.       */
 
-nav {
+body > nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   overflow: visible;
 }
 
-nav ul {
+body > nav ul {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -108,13 +108,13 @@ nav ul {
   list-style: none;
 }
 
-nav li {
+body > nav li {
   display: inline-block;
   margin: 0;
   padding: var(--space-2) var(--space-3);
 }
 
-nav li a {
+body > nav li a {
   display: inline-block;
   text-decoration: none;
   color: var(--text);
@@ -123,19 +123,19 @@ nav li a {
   border-radius: var(--radius-sm);
 }
 
-nav li a:hover {
+body > nav li a:hover {
   color: var(--accent);
   background: var(--surface-hover);
 }
 
-nav li strong,
-nav li b {
+body > nav li strong,
+body > nav li b {
   color: var(--text);
 }
 
 @media (--md-n-below) {
-  nav { flex-wrap: wrap; gap: var(--space-2); }
-  nav ul { flex-wrap: wrap; gap: var(--space-1); }
+  body > nav { flex-wrap: wrap; gap: var(--space-2); }
+  body > nav ul { flex-wrap: wrap; gap: var(--space-1); }
 }
 
 /* ── Typography: Paragraphs ────────────────────────────────────────── */