docs layout: wrap sidebar+article+toc in <section data-layout="docs">

Docs and vault layouts need a wider grid container for the 3-column
layout (sidebar nav + article + TOC). Wrapped in <section> — a body
child that gets container rules but overrides to --docs-max-width.

Updated CSS selectors: aside:first-of-type → nav[data-nav="sidebar"]
to match the semantic HTML (sidebar IS navigation, not an aside).

assets/css/layers/08-layout.css

@@ -19,6 +19,7 @@
 body > nav,
 body > header,
 body > article,
+body > section,
 body > footer {
   width: 100%;
   margin-right: auto;
@@ -31,6 +32,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-sm);
     padding-right: 0;
@@ -42,6 +44,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-md);
   }
@@ -51,6 +54,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-lg);
   }
@@ -60,6 +64,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-xl);
   }
@@ -69,6 +74,7 @@ body > footer {
   body > nav,
   body > header,
   body > article,
+  body > section,
   body > footer {
     max-width: var(--width-2xl);
   }
@@ -144,7 +150,7 @@ nav[data-layout="actions"] a:hover {
 
 /* ── Left sidebar ───────────────────────────────────────────────────── */
 
-[data-layout="docs"] > aside:first-of-type {
+[data-layout="docs"] > nav[data-nav="sidebar"] {
   position: sticky;
   top: calc(var(--nav-height) + var(--space-4));
   max-height: calc(100vh - var(--size-px-10));
@@ -154,25 +160,24 @@ nav[data-layout="actions"] a:hover {
   scrollbar-color: var(--border) transparent;
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar {
   width: var(--scrollbar-size);
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-track {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-track {
   background: transparent;
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: var(--radius-full);
 }
 
-[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb:hover {
+[data-layout="docs"] > nav[data-nav="sidebar"]::-webkit-scrollbar-thumb:hover {
   background: var(--text-3);
 }
 
 /* Sidebar nav — vertical list, no top-bar chrome */
-[data-layout="docs"] > aside:first-of-type nav,
 nav[data-nav="sidebar"] {
   display: flex;
   flex-direction: column;
@@ -184,7 +189,7 @@ nav[data-nav="sidebar"] {
   gap: 0;
 }
 
-[data-layout="docs"] > aside:first-of-type nav small {
+nav[data-nav="sidebar"] small {
   display: block;
   color: var(--text-3);
   font-size: var(--text-xs);
@@ -196,11 +201,10 @@ nav[data-nav="sidebar"] {
   margin-top: var(--space-4);
 }
 
-[data-layout="docs"] > aside:first-of-type nav small:first-child {
+nav[data-nav="sidebar"] small:first-child {
   margin-top: 0;
 }
 
-[data-layout="docs"] > aside:first-of-type nav ul,
 nav[data-nav="sidebar"] ul {
   display: flex;
   flex-direction: column;
@@ -213,18 +217,18 @@ nav[data-nav="sidebar"] ul {
   font-size: var(--text-sm);
 }
 
-[data-layout="docs"] > aside:first-of-type nav ul li {
+nav[data-nav="sidebar"] ul li {
   margin: 0;
   padding: 0;
 }
 
 /* No pipe separators in sidebar */
-[data-layout="docs"] > aside:first-of-type nav ul li + li::before,
+nav[data-nav="sidebar"] ul li + li::before,
 nav[data-nav="sidebar"] ul li + li::before {
   display: none;
 }
 
-[data-layout="docs"] > aside:first-of-type nav a {
+[data-layout="docs"] > nav[data-nav="sidebar"] nav a {
   display: block;
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-md);
@@ -236,12 +240,12 @@ nav[data-nav="sidebar"] ul li + li::before {
   font-size: var(--text-sm);
 }
 
-[data-layout="docs"] > aside:first-of-type nav a:hover {
+[data-layout="docs"] > nav[data-nav="sidebar"] nav a:hover {
   background-color: var(--surface-hover);
   color: var(--text);
 }
 
-[data-layout="docs"] > aside:first-of-type nav a[aria-current] {
+[data-layout="docs"] > nav[data-nav="sidebar"] nav a[aria-current] {
   background-color: var(--accent-subtle);
   color: var(--accent);
 }
@@ -390,7 +394,7 @@ nav[data-nav="toc"] ul li + li::before {
     grid-template-columns: 1fr;
     padding: var(--space-4);
   }
-  [data-layout="docs"] > aside:first-of-type {
+  [data-layout="docs"] > nav[data-nav="sidebar"] {
     display: none;
   }
 }

layouts/docs/single.html

@@ -12,7 +12,8 @@
 {{ end }}
 
 {{ define "content" }}
-  {{/* Docs sidebar — this is navigation, not an aside */}}
+  <section data-layout="docs">
+
     <nav aria-label="Documentation" data-nav="sidebar">
       {{- $menu := index .Site.Menus "docs" -}}
       {{- if $menu -}}
@@ -84,4 +85,6 @@
       {{ . }}
     </aside>
     {{- end -}}
+
+  </section>
 {{ end }}

layouts/vault/single.html

@@ -12,7 +12,8 @@
 {{ end }}
 
 {{ define "content" }}
-  {{/* Vault sidebar navigation */}}
+  <section data-layout="docs">
+
     <nav aria-label="Vault" data-nav="sidebar">
       {{- $menuName := .Site.Params.vault_menu | default "vault" -}}
       {{- $menu := index .Site.Menus $menuName -}}
@@ -89,4 +90,6 @@
       {{ . }}
     </aside>
     {{- end -}}
+
+  </section>
 {{ end }}