Charter visual polish: Three Concepts cards, colored Adoption cards, nav cleanup

Charter page:
- Three Concepts table replaced with 3 colored cards
  (green=Philosophy/WHY, blue=Framework/HOW, red=Gap/WHAT)
- Company Adoption: 2x2 grid forced via CSS, petal colors
  (green Map, blue Identify, gold See, pink Plan)
- Individual Adoption: 3 cards with progression colors
- All colors from v8 poster palette for consistency

All pages:
- Left nav hidden on story and about pages (reading experience)
- Charter already had it hidden from prior commit

CSS additions:
- .concept-why/how/what card colors
- .company-cards 2-col grid override
- .individual-cards nth-child coloring

Author: Claude-Ops

docs/about.md

@@ -1,5 +1,7 @@
 ---
 description: "About Nikhil Singhal, author of the HIP Charter. CTO, VP Engineering, AI Practitioner and Governance Strategist."
+hide:
+  - navigation
 ---
 
 # About

docs/charter.md

@@ -57,13 +57,35 @@ The name itself carries the premise. "Human Intelligence Partnership Charter." N
 
 ## Three Concepts, One Thesis
 
-| Concept | What it answers | Level |
-|---------|----------------|-------|
-| **Just Intelligence** | WHY you design this way | Philosophy |
-| **The HIP Charter** | HOW you design this way | Framework |
-| **The Intent Layer** | WHAT is missing at every pattern | Gap |
+<div class="grid cards" markdown>
+
+-   :material-lightbulb:{ .lg .middle } __Just Intelligence__{.concept-why}
+
+    ---
+
+    **WHY** you design this way. The premise. Drop "artificial." Treat what you are working with as a different form of intelligence that deserves the same structural respect in communication.
+
+    *Philosophy*
+
+-   :material-view-grid:{ .lg .middle } __The HIP Charter__{.concept-how}
+
+    ---
+
+    **HOW** you design this way. The framework. Four patterns of partnership, extensible, with overlaps that create depth and a center that represents full collaboration.
 
-Separately, each is useful. Just Intelligence without the HIP Charter is philosophy with no blueprint. The HIP Charter without Just Intelligence is engineering with no soul. The Intent Layer without both is a problem statement with no solution direction.
+    *Framework*
+
+-   :material-alert-circle:{ .lg .middle } __The Intent Layer__{.concept-what}
+
+    ---
+
+    **WHAT** is missing at every pattern. The gap. The structural interface between human intent and machine execution that does not exist yet. Visible at every petal.
+
+    *Gap*
+
+</div>
+
+Separately, each is useful. Just Intelligence without the HIP Charter is philosophy with no blueprint. The HIP Charter without Just Intelligence is engineering with no soul. The Intent Layer without both is a problem statement with no direction.
 
 Together: a worldview (intelligence deserves structural respect), a framework (four patterns of partnership), and a gap (the structural interface between two intelligences). They are inseparable.
 
@@ -198,7 +220,7 @@ The HIP Charter is not just a description. It is a framework others can use.
 
 The charter becomes an AI adoption roadmap. Instead of the vague question "how do we adopt AI?", companies can use the map:
 
-<div class="grid cards" markdown>
+<div class="grid cards company-cards" markdown>
 
 -   :material-map-marker:{ .lg .middle } __Map__
 
@@ -230,7 +252,7 @@ The charter becomes an AI adoption roadmap. Instead of the vague question "how d
 
 The intersections become progression markers. Not a ladder to climb, but territory to explore.
 
-<div class="grid cards" markdown>
+<div class="grid cards individual-cards" markdown>
 
 -   :material-account-check:{ .lg .middle } __Where I Am__
 

docs/story.md

@@ -1,6 +1,8 @@
 ---
 title: "How the HIP Charter Was Made"
 description: "The 12-step naming process. 8 visual iterations. A year of daily partnership between human and AI intelligence. The story behind the charter."
+hide:
+  - navigation
 ---
 
 # How the HIP Charter Was Made

docs/stylesheets/extra.css

@@ -118,5 +118,62 @@
   font-size: 0.8rem;
 }
 
+/* --- Three Concepts Cards --- */
+.grid.cards .concept-why {
+  border-left: 4px solid var(--hip-foundation);
+  background: var(--hip-foundation-bg);
+}
+
+.grid.cards .concept-how {
+  border-left: 4px solid var(--hip-tooling);
+  background: var(--hip-tooling-bg);
+}
+
+.grid.cards .concept-what {
+  border-left: 4px solid #B91C1C;
+  background: #FEF2F2;
+}
+
+/* --- Adoption: Company Cards (2x2 grid, petal colors) --- */
+.company-cards > ul {
+  grid-template-columns: repeat(2, 1fr) !important;
+}
+
+.company-cards > ul > li:nth-child(1) {
+  border-left: 4px solid var(--hip-foundation);
+  background: var(--hip-foundation-bg);
+}
+
+.company-cards > ul > li:nth-child(2) {
+  border-left: 4px solid var(--hip-tooling);
+  background: var(--hip-tooling-bg);
+}
+
+.company-cards > ul > li:nth-child(3) {
+  border-left: 4px solid var(--hip-pipeline);
+  background: var(--hip-pipeline-bg);
+}
+
+.company-cards > ul > li:nth-child(4) {
+  border-left: 4px solid var(--hip-integration);
+  background: var(--hip-integration-bg);
+}
+
+/* --- Adoption: Individual Cards (progression colors) --- */
+.individual-cards > ul > li:nth-child(1) {
+  border-left: 4px solid var(--hip-foundation);
+  background: var(--hip-foundation-bg);
+}
+
+.individual-cards > ul > li:nth-child(2) {
+  border-left: 4px solid var(--hip-tooling);
+  background: var(--hip-tooling-bg);
+}
+
+.individual-cards > ul > li:nth-child(3) {
+  border-left: 4px solid var(--hip-pipeline);
+  background: var(--hip-pipeline-bg);
+}
+
 /* --- Import DM Serif Display for headings --- */
 @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');