wip: add icons to navbar links

wip: center align hero grid
wip: swap inline SVG icons for astro-icons library
2026-02-19 05:46:40 +00:00 · 2026-01-11 02:32:27 +00:00 · 2026-01-11 02:29:00 +00:00 · 2026-01-11 02:27:08 +00:00 · 2026-01-11 02:16:23 +00:00 · 2026-01-11 01:53:24 +00:00
68 changed files with 6094 additions and 8859 deletions
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(bun install:*)",
+      "Bash(bun run build:*)",
+      "Bash(bun run update:*)",
+      "Bash(bun update:*)"
+    ]
+  }
+}
--- a/.mise.toml
+++ b/.mise.toml
@@ -0,0 +1,2 @@
+[tools]
+bun = "1"
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+docs/
+.astro/
+node_modules/
+bun.lock
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "bun run dev",
+      "name": "dev server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -12,20 +12,33 @@ that combines GitHub Flow with versioned releases.
 ## Build Commands

 ```bash
+# Install tooling (bun) via mise
+mise install
+
 # Install dependencies
-npm install
+bun install

 # Development server
-npm run dev
+bun run dev

 # Build site (outputs to docs/ directory)
-npm run build
+bun run build

 # Preview built site
-npm run preview
+bun run preview
+
+# Type checking
+bun run check
+
+# Linting
+bun run lint
+
+# Formatting
+bun run format
+bun run format:check

 # Update specs from upstream (fetches from github.com/jimeh/common-flow)
-npm run update
+bun run update
 ```

 The site is built to `docs/` for GitHub Pages hosting.
@@ -34,16 +47,34 @@ The site is built to `docs/` for GitHub Pages hosting.

 - **Astro 5.x** static site generator
 - **Tailwind CSS 4.x** for styling with dark mode support
+- **astro-icon** with Heroicons and Simple Icons for icons
 - **Content Collections** for spec markdown files
 - **TypeScript** throughout
+- **Bun** as JavaScript runtime and package manager (managed via mise)

 ### Key Files

 - `src/config.ts` - Site configuration with version list
 - `src/content.config.ts` - Astro content collection definition
- `src/layouts/Default.astro` - Main layout with sidebar
- `src/components/` - Sidebar, MenuToggle, ThemeToggle components
+- `src/layouts/BaseLayout.astro` - Base layout with head, meta tags, theme scripts
+- `src/layouts/SpecLayout.astro` - Spec page layout composing all sections
+- `src/components/` - UI components:
+  - `Header.astro` - Site header with navigation
+  - `Footer.astro` - Site footer
+  - `Hero.astro` - Landing page hero section
+  - `AboutSection.astro` - About Common-Flow section
+  - `FAQSection.astro` - FAQ section
+  - `SectionHeader.astro` - Reusable section header (title + subtitle)
+  - `SpecSection.astro` - Spec section with terminology and specification
+  - `SpecSidebar.astro` - Spec page table of contents sidebar
+  - `TocLink.astro` - Reusable TOC link component
+  - `ThemeToggle.astro` - Dark/light mode toggle
+  - `VersionSelector.astro` - Spec version dropdown
+- `src/scripts/activeSectionTracker.ts` - Shared scroll-based active section tracking
+- `src/pages/index.astro` - Landing page
+- `src/pages/404.astro` - 404 error page
 - `src/pages/spec/[version].astro` - Dynamic route for spec versions
+- `src/utils/parseSpecContent.ts` - Markdown parsing utilities
 - `src/content/spec/*.md` - Versioned spec documents
 - `public/spec/*.svg` - SVG diagrams for each version
 - `scripts/update-specs.ts` - Fetches specs from GitHub
@@ -52,5 +83,5 @@ The site is built to `docs/` for GitHub Pages hosting.

 1. Add new version to `versions` array in `src/config.ts`
 2. Update `currentVersion` if this is the new default
-3. Run `npm run update` to fetch specs from GitHub
-4. Run `npm run build` to rebuild the site
+3. Run `bun run update` to fetch specs from GitHub
+4. Run `bun run build` to rebuild the site
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,11 +1,12 @@
 import { defineConfig } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
+import icon from "astro-icon";

 export default defineConfig({
  site: "https://commonflow.org",
  outDir: "./docs",
-  integrations: [sitemap()],
+  integrations: [sitemap(), icon()],
  vite: {
    plugins: [tailwindcss()],
  },
--- a/bun.lock
+++ b/bun.lock
--- a/docs/404.html
+++ b/docs/404.html
@@ -1,30 +1,24 @@
-<!DOCTYPE html><html lang="en" data-astro-cid-jwirc66j> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/404/"><title>Page Not Found | Git Common Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Page Not Found | Git Common Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/404/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Page Not Found | Git Common Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><!-- Prevent flash of wrong theme --><script>
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/404/"><title>Page Not Found | Git Common-Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Page Not Found | Git Common-Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/404/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Page Not Found | Git Common-Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Favicon --><link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- Prevent flash of wrong theme --><script>
      (function () {
-        const theme = localStorage.getItem("theme");
-        if (
-          theme === "dark" ||
-          (!theme &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches)
-        ) {
+        const mode = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (mode === "dark" || (mode !== "light" && prefersDark)) {
          document.documentElement.classList.add("dark");
        }
      })();
-    </script><link rel="stylesheet" href="/_astro/_version_.BDyAzQHc.css">
-<style>.not-found[data-astro-cid-zetdm5md]{text-align:center;padding-top:4rem}.not-found[data-astro-cid-zetdm5md] h1[data-astro-cid-zetdm5md]{font-size:6rem;margin-bottom:.5rem;color:#999}.dark[data-astro-cid-zetdm5md] .not-found[data-astro-cid-zetdm5md] h1[data-astro-cid-zetdm5md]{color:#666}.not-found[data-astro-cid-zetdm5md] p[data-astro-cid-zetdm5md]{font-size:1.25rem;margin-bottom:1rem}.not-found[data-astro-cid-zetdm5md] a[data-astro-cid-zetdm5md]{color:#1f8dd6;text-decoration:none}.not-found[data-astro-cid-zetdm5md] a[data-astro-cid-zetdm5md]:hover{text-decoration:underline}.dark[data-astro-cid-zetdm5md] .not-found[data-astro-cid-zetdm5md] a[data-astro-cid-zetdm5md]{color:#4da6e8}
-</style></head> <body data-astro-cid-jwirc66j> <div id="layout" data-astro-cid-jwirc66j> <a href="#menu" id="menuLink" class="menu-link" data-astro-cid-jyixok4n> <span data-astro-cid-jyixok4n></span> </a>  <script type="module">function c(){const e=document.getElementById("layout"),n=document.getElementById("menu"),t=document.getElementById("menuLink"),s=document.getElementById("main");function i(o){o.preventDefault(),e?.classList.toggle("active"),n?.classList.toggle("active"),t?.classList.toggle("active")}function a(){e?.classList.remove("active"),n?.classList.remove("active"),t?.classList.remove("active")}t?.addEventListener("click",i),s?.addEventListener("click",()=>{e?.classList.contains("active")&&a()})}c();document.addEventListener("astro:after-swap",c);</script> <div id="menu" data-astro-cid-ssfzsv2f> <div class="menu-inner" data-astro-cid-ssfzsv2f> <ul class="menu-list" data-astro-cid-ssfzsv2f> <li class="menu-label" data-astro-cid-ssfzsv2f>Versions:</li> <li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.5" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.5 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.4" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.4 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.3" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.3 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.2" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.2 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.1" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.1 </a> </li> </ul> </div> <div class="links" data-astro-cid-ssfzsv2f> <a href="https://github.com/jimeh/common-flow" aria-label="View on GitHub" class="github-link" data-astro-cid-ssfzsv2f> <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-ssfzsv2f> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839
-             9.504.5.092.682-.217.682-.483
-             0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
-             1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
-             2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951
-             0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65
-             0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004
-             1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546
-             1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028
-             2.688 0 3.848-2.339 4.695-4.566
-             4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012
-             2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22
-             6.484 17.522 2 12 2z" clip-rule="evenodd" data-astro-cid-ssfzsv2f></path> </svg> </a> <button id="theme-toggle" type="button" class="p-2 text-[color:var(--color-text-muted)] hover:text-white
-         transition-colors duration-200" aria-label="Toggle dark mode"> <!-- Sun icon (shown in dark mode) --> <svg id="sun-icon" class="hidden w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
-         6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
-         12a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> <!-- Moon icon (shown in light mode) --> <svg id="moon-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
-         9.003 0 008.354-5.646z"></path> </svg> </button> <script type="module">function c(){const d=document.getElementById("theme-toggle"),n=document.getElementById("sun-icon"),o=document.getElementById("moon-icon");function s(e){e?(n?.classList.remove("hidden"),o?.classList.add("hidden")):(n?.classList.add("hidden"),o?.classList.remove("hidden"))}function a(){const e=localStorage.getItem("theme");return e==="dark"||e==="light"?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function t(e){localStorage.setItem("theme",e),document.documentElement.classList.toggle("dark",e==="dark"),s(e==="dark")}const i=a();t(i),d?.addEventListener("click",()=>{const e=document.documentElement.classList.contains("dark");t(e?"light":"dark")}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||t(e.matches?"dark":"light")})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div>  <div id="main" data-astro-cid-jwirc66j> <div class="content" data-astro-cid-jwirc66j>  <div class="not-found" data-astro-cid-zetdm5md> <h1 data-astro-cid-zetdm5md>404</h1> <p data-astro-cid-zetdm5md>Page not found.</p> <p data-astro-cid-zetdm5md> <a href="/" data-astro-cid-zetdm5md>Go to the homepage</a> </p> </div>  </div> </div> </div> </body></html> 
+    </script><link rel="stylesheet" href="/_astro/index.DF_wxGza.css"></head> <body class="min-h-screen">  <div class="flex flex-col items-center justify-center min-h-screen p-8"> <div class="text-center"> <h1 class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
+               text-gray-300 dark:text-neutral-700">
+404
+</h1> <p class="text-xl mb-2 text-gray-600 dark:text-neutral-400">
+Page not found
+</p> <p class="text-gray-500 dark:text-neutral-500">
+The page you're looking for doesn't exist.
+</p> <a href="/" class="inline-flex items-center justify-center gap-2 mt-8
+               px-5 py-2.5 text-sm font-medium rounded-lg
+               transition-all cursor-pointer
+               bg-sky-600 text-white
+               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md">
+Go to homepage
+</a> </div> </div>  <!-- Re-init theme on Astro page transitions --> <script type="module">document.addEventListener("astro:after-swap",()=>{const e=localStorage.getItem("theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;e==="dark"||e!=="light"&&t?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")});</script> </body> </html>
--- a/docs/_astro/Header.astro_astro_type_script_index_0_lang.ClIJVJFM.js
+++ b/docs/_astro/Header.astro_astro_type_script_index_0_lang.ClIJVJFM.js
@@ -0,0 +1 @@
+import{i as o}from"./activeSectionTracker.CGlk-3e6.js";function a(){const e=document.getElementById("site-header"),d=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),t=document.getElementById("mobile-nav");if(!e||!d)return;const i=64;function n(){e&&(window.scrollY>=i?(e.classList.remove("translate-y-[-100%]","border-transparent"),e.classList.add("border-gray-200","dark:border-neutral-800")):(e.classList.add("translate-y-[-100%]","border-transparent"),e.classList.remove("border-gray-200","dark:border-neutral-800")))}window.addEventListener("scroll",n,{passive:!0}),n(),r&&t&&(r.addEventListener("click",()=>{t.classList.toggle("hidden")}),t.querySelectorAll("a").forEach(s=>{s.addEventListener("click",()=>{t.classList.add("hidden")})})),o({linkSelector:"[data-nav-link]",defaultToFirst:!1})}a();document.addEventListener("astro:after-swap",a);
--- a/docs/_astro/SpecSidebar.astro_astro_type_script_index_0_lang.BQBj5HuJ.js
+++ b/docs/_astro/SpecSidebar.astro_astro_type_script_index_0_lang.BQBj5HuJ.js
@@ -0,0 +1 @@
+import{i as v}from"./activeSectionTracker.CGlk-3e6.js";function s(){v({linkSelector:"[data-sidebar-link]"});const t=document.getElementById("spec-toc-toggle"),e=document.getElementById("spec-toc-drawer"),r=e?.querySelector("[data-toc-backdrop]"),d=e?.querySelector("[data-toc-close]"),i=e?.querySelectorAll("[data-toc-link]");function a(){e?.classList.remove("hidden"),document.body.style.overflow="hidden"}function c(){e?.classList.add("hidden"),document.body.style.overflow=""}t?.addEventListener("click",a),r?.addEventListener("click",c),d?.addEventListener("click",c),i?.forEach(o=>{o.addEventListener("click",c)});const n=document.getElementById("spec");n&&t&&new IntersectionObserver(([l])=>{t.classList.toggle("hidden",!l.isIntersecting)},{threshold:0}).observe(n)}s();document.addEventListener("astro:after-swap",s);
--- a/docs/_astro/_version_.BDyAzQHc.css
+++ b/docs/_astro/_version_.BDyAzQHc.css
--- a/docs/_astro/activeSectionTracker.CGlk-3e6.js
+++ b/docs/_astro/activeSectionTracker.CGlk-3e6.js
@@ -0,0 +1 @@
+function m(l){const{linkSelector:a,sectionIdAttr:o="data-section-id",headerOffset:f=100,defaultToFirst:u=!0}=l,s=document.querySelectorAll(a),i=[],r=new Set;s.forEach(n=>{const t=n.getAttribute(o);if(t&&!r.has(t)){r.add(t);const e=document.getElementById(t);e&&i.push({id:t,element:e})}});function d(){let n=u?i[0]?.id:null;for(const{id:t,element:e}of i)e.getBoundingClientRect().top<=f&&(n=t);s.forEach(t=>{const e=t.getAttribute(o);t.classList.toggle("active",e===n)})}let c=!1;window.addEventListener("scroll",()=>{c||(requestAnimationFrame(()=>{d(),c=!1}),c=!0)}),d()}export{m as i};
--- a/docs/_astro/bricolage-grotesque-latin-ext-wght-normal.CcLUaPy7.woff2
+++ b/docs/_astro/bricolage-grotesque-latin-ext-wght-normal.CcLUaPy7.woff2
--- a/docs/_astro/bricolage-grotesque-latin-wght-normal.DLoelf7F.woff2
+++ b/docs/_astro/bricolage-grotesque-latin-wght-normal.DLoelf7F.woff2
--- a/docs/_astro/bricolage-grotesque-vietnamese-wght-normal.BUzh504Q.woff2
+++ b/docs/_astro/bricolage-grotesque-vietnamese-wght-normal.BUzh504Q.woff2
--- a/docs/_astro/dm-sans-latin-ext-wght-normal.BOFOeGcA.woff2
+++ b/docs/_astro/dm-sans-latin-ext-wght-normal.BOFOeGcA.woff2
--- a/docs/_astro/dm-sans-latin-wght-normal.Xz1IZZA0.woff2
+++ b/docs/_astro/dm-sans-latin-wght-normal.Xz1IZZA0.woff2
--- a/docs/_astro/index.DF_wxGza.css
+++ b/docs/_astro/index.DF_wxGza.css
--- a/docs/_astro/jetbrains-mono-cyrillic-wght-normal.D73BlboJ.woff2
+++ b/docs/_astro/jetbrains-mono-cyrillic-wght-normal.D73BlboJ.woff2
--- a/docs/_astro/jetbrains-mono-greek-wght-normal.Bw9x6K1M.woff2
+++ b/docs/_astro/jetbrains-mono-greek-wght-normal.Bw9x6K1M.woff2
--- a/docs/_astro/jetbrains-mono-latin-ext-wght-normal.DBQx-q_a.woff2
+++ b/docs/_astro/jetbrains-mono-latin-ext-wght-normal.DBQx-q_a.woff2
--- a/docs/_astro/jetbrains-mono-latin-wght-normal.B9CIFXIH.woff2
+++ b/docs/_astro/jetbrains-mono-latin-wght-normal.B9CIFXIH.woff2
--- a/docs/_astro/jetbrains-mono-vietnamese-wght-normal.Bt-aOZkq.woff2
+++ b/docs/_astro/jetbrains-mono-vietnamese-wght-normal.Bt-aOZkq.woff2
--- a/docs/apple-touch-icon.png
+++ b/docs/apple-touch-icon.png
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/favicon.svg
+++ b/docs/favicon.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Main horizontal line -->
+  <path d="M 4 10 L 28 10" fill="none" stroke="currentColor" stroke-width="2"/>
+
+  <!-- Branch line: down from left, curve, up to right -->
+  <path d="M 8 10 L 8 16 Q 8 22 16 22 Q 24 22 24 16 L 24 10"
+        fill="none" stroke="currentColor" stroke-width="2"/>
+
+  <!-- Left dot on main line -->
+  <circle cx="8" cy="10" r="3" fill="currentColor"/>
+
+  <!-- Right dot on main line -->
+  <circle cx="24" cy="10" r="3" fill="currentColor"/>
+
+  <!-- Middle dot on branch -->
+  <circle cx="16" cy="22" r="3" fill="currentColor"/>
+</svg>
--- a/docs/index.html
+++ b/docs/index.html
--- a/docs/spec/1.0.0-rc.1/index.html
+++ b/docs/spec/1.0.0-rc.1/index.html
@@ -1,45 +1,178 @@
-<!DOCTYPE html><html lang="en" data-astro-cid-jwirc66j> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/spec/1.0.0-rc.1/"><title>Git Common-Flow 1.0.0-rc.1 | Git Common Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Git Common-Flow 1.0.0-rc.1 | Git Common Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/spec/1.0.0-rc.1/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Git Common-Flow 1.0.0-rc.1 | Git Common Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><!-- Prevent flash of wrong theme --><script>
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/spec/1.0.0-rc.1/"><title>Git Common-Flow 1.0.0-rc.1 | Git Common-Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Git Common-Flow 1.0.0-rc.1 | Git Common-Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/spec/1.0.0-rc.1/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Git Common-Flow 1.0.0-rc.1 | Git Common-Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Favicon --><link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- Prevent flash of wrong theme --><script>
      (function () {
-        const theme = localStorage.getItem("theme");
-        if (
-          theme === "dark" ||
-          (!theme &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches)
-        ) {
+        const mode = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (mode === "dark" || (mode !== "light" && prefersDark)) {
          document.documentElement.classList.add("dark");
        }
      })();
-    </script><link rel="stylesheet" href="/_astro/_version_.BDyAzQHc.css">
-<style>.spec-content h1{margin-bottom:.5em}.spec-content h2{margin-top:2em;margin-bottom:.75em;padding-bottom:.3em;border-bottom:1px solid #eee}.dark .spec-content h2{border-bottom-color:#333}.spec-content h3{margin-top:1.5em;margin-bottom:.5em}.spec-content p{margin-bottom:1em}.spec-content ul,.spec-content ol{margin-bottom:1em;padding-left:2em}.spec-content li{margin-bottom:.25em}.spec-content a{color:#1f8dd6;text-decoration:none}.spec-content a:hover{text-decoration:underline}.dark .spec-content a{color:#4da6e8}.spec-content img{max-width:100%;height:auto;margin:1em 0}.spec-content blockquote{margin:1em 0;padding-left:1em;border-left:4px solid #ddd;color:#666}.dark .spec-content blockquote{border-left-color:#444;color:#aaa}.spec-content hr{margin:2em 0;border:none;border-top:1px solid #eee}.dark .spec-content hr{border-top-color:#333}
-</style></head> <body data-astro-cid-jwirc66j> <div id="layout" data-astro-cid-jwirc66j> <a href="#menu" id="menuLink" class="menu-link" data-astro-cid-jyixok4n> <span data-astro-cid-jyixok4n></span> </a>  <script type="module">function c(){const e=document.getElementById("layout"),n=document.getElementById("menu"),t=document.getElementById("menuLink"),s=document.getElementById("main");function i(o){o.preventDefault(),e?.classList.toggle("active"),n?.classList.toggle("active"),t?.classList.toggle("active")}function a(){e?.classList.remove("active"),n?.classList.remove("active"),t?.classList.remove("active")}t?.addEventListener("click",i),s?.addEventListener("click",()=>{e?.classList.contains("active")&&a()})}c();document.addEventListener("astro:after-swap",c);</script> <div id="menu" data-astro-cid-ssfzsv2f> <div class="menu-inner" data-astro-cid-ssfzsv2f> <ul class="menu-list" data-astro-cid-ssfzsv2f> <li class="menu-label" data-astro-cid-ssfzsv2f>Versions:</li> <li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.5" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.5 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.4" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.4 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.3" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.3 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.2" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.2 </a> </li><li class="menu-item selected" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.1" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.1 </a> </li> </ul> </div> <div class="links" data-astro-cid-ssfzsv2f> <a href="https://github.com/jimeh/common-flow" aria-label="View on GitHub" class="github-link" data-astro-cid-ssfzsv2f> <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-ssfzsv2f> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839
-             9.504.5.092.682-.217.682-.483
-             0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
-             1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
-             2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951
-             0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65
-             0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004
-             1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546
-             1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028
-             2.688 0 3.848-2.339 4.695-4.566
-             4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012
-             2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22
-             6.484 17.522 2 12 2z" clip-rule="evenodd" data-astro-cid-ssfzsv2f></path> </svg> </a> <button id="theme-toggle" type="button" class="p-2 text-[color:var(--color-text-muted)] hover:text-white
-         transition-colors duration-200" aria-label="Toggle dark mode"> <!-- Sun icon (shown in dark mode) --> <svg id="sun-icon" class="hidden w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
-         6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
-         12a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> <!-- Moon icon (shown in light mode) --> <svg id="moon-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
-         9.003 0 008.354-5.646z"></path> </svg> </button> <script type="module">function c(){const d=document.getElementById("theme-toggle"),n=document.getElementById("sun-icon"),o=document.getElementById("moon-icon");function s(e){e?(n?.classList.remove("hidden"),o?.classList.add("hidden")):(n?.classList.add("hidden"),o?.classList.remove("hidden"))}function a(){const e=localStorage.getItem("theme");return e==="dark"||e==="light"?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function t(e){localStorage.setItem("theme",e),document.documentElement.classList.toggle("dark",e==="dark"),s(e==="dark")}const i=a();t(i),d?.addEventListener("click",()=>{const e=document.documentElement.classList.contains("dark");t(e?"light":"dark")}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||t(e.matches?"dark":"light")})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div>  <div id="main" data-astro-cid-jwirc66j> <div class="content" data-astro-cid-jwirc66j>  <article class="spec-content"> <h1 id="git-common-flow-100-rc1">Git Common-Flow 1.0.0-rc.1</h1>
-<img src="/spec/1.0.0-rc.1.svg" alt="Git Common-Flow 1.0.0-rc.1 diagram" width="100%">
-<h2 id="summary">Summary</h2>
-<p>Common-Flow is an attempt to gather a sensible selection of the most common
+    </script><link rel="stylesheet" href="/_astro/index.DF_wxGza.css"></head> <body class="min-h-screen">  <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
+         translate-y-[-100%] transition-transform duration-300
+         backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
+               text-gray-950 dark:text-neutral-50
+               hover:text-sky-600 transition-colors"> <span class="font-display font-bold text-lg tracking-tight">
+Git Common-Flow
+</span> </a> <div class="hidden md:block"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.1</span> <svg width="1em" height="1em" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <symbol id="ai:heroicons:chevron-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m19.5 8.25l-7.5 7.5l-7.5-7.5"/></symbol><use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.1 </a> </div> </div> <script type="module">function c(){document.querySelectorAll("[data-version-selector]").forEach(e=>{if(e.dataset.initialized)return;e.dataset.initialized="true";const t=e.querySelector("[data-version-trigger]"),a=e.querySelector("[data-version-dropdown]"),n=e.querySelector("[data-arrow-icon]");if(!t||!a)return;const l=()=>{a.dataset.open="true",t.setAttribute("aria-expanded","true"),n&&(n.style.transform="rotate(180deg)")},o=()=>{delete a.dataset.open,t.setAttribute("aria-expanded","false"),n&&(n.style.transform="")};t.addEventListener("click",r=>{r.stopPropagation();const u=a.dataset.open==="true";document.querySelectorAll("[data-version-dropdown][data-open]").forEach(s=>{delete s.dataset.open;const i=s.previousElementSibling;i?.setAttribute("aria-expanded","false");const d=i?.querySelector("[data-arrow-icon]");d&&(d.style.transform="")}),u?o():l()}),document.addEventListener("click",r=>{e.contains(r.target)||o()}),document.addEventListener("keydown",r=>{r.key==="Escape"&&a.dataset.open==="true"&&(o(),t.focus())})})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div> <!-- Desktop Navigation --> <nav class="hidden md:flex items-center gap-1"> <a href="#about" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="about"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:information-circle">   <symbol id="ai:heroicons:information-circle" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/></symbol><use href="#ai:heroicons:information-circle"></use>  </svg> About </a><a href="#spec" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="spec"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:document-text">   <symbol id="ai:heroicons:document-text" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"/></symbol><use href="#ai:heroicons:document-text"></use>  </svg> Spec </a><a href="#faq" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="faq"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:question-mark-circle">   <symbol id="ai:heroicons:question-mark-circle" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712q-.308.268-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z"/></symbol><use href="#ai:heroicons:question-mark-circle"></use>  </svg> FAQ </a> </nav> <!-- Right side: Theme, GitHub --> <div class="flex items-center gap-3"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
+           text-gray-500 dark:text-neutral-500
+           hover:text-gray-950 dark:hover:text-neutral-50
+           hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle theme"> <svg width="1em" height="1em" data-theme-icon="light" class="hidden w-5 h-5" data-icon="heroicons:sun">   <symbol id="ai:heroicons:sun" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0a3.75 3.75 0 0 1 7.5 0"/></symbol><use href="#ai:heroicons:sun"></use>  </svg> <svg width="1em" height="1em" data-theme-icon="dark" class="hidden w-5 h-5" data-icon="heroicons:moon">   <symbol id="ai:heroicons:moon" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.752 15.002A9.7 9.7 0 0 1 18 15.75A9.75 9.75 0 0 1 8.25 6c0-1.33.266-2.597.748-3.752A9.75 9.75 0 0 0 3 11.25A9.75 9.75 0 0 0 12.75 21a9.75 9.75 0 0 0 9.002-5.998"/></symbol><use href="#ai:heroicons:moon"></use>  </svg> <svg width="1em" height="1em" data-theme-icon="auto" class="hidden w-5 h-5" data-icon="heroicons:computer-desktop">   <symbol id="ai:heroicons:computer-desktop" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/></symbol><use href="#ai:heroicons:computer-desktop"></use>  </svg> </button> <!-- Tooltip --> <div class="absolute left-1/2 -translate-x-1/2 top-full mt-2
+           px-2 py-1 text-xs font-medium whitespace-nowrap rounded-md shadow-sm
+           bg-gray-900 text-white dark:bg-white dark:text-gray-900
+           opacity-0 group-hover:opacity-100
+           transition-opacity duration-200 pointer-events-none"> <span data-tooltip-text="light" class="hidden">Light</span> <span data-tooltip-text="dark" class="hidden">Dark</span> <span data-tooltip-text="auto" class="hidden">System</span> </div> </div> <script type="module">function r(){const c=document.querySelectorAll("[data-theme-toggle]");function n(){const e=localStorage.getItem("theme");return e==="dark"||e==="light"||e==="auto"?e:"auto"}function i(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function d(e){return e==="auto"?i():e}function s(e){document.querySelectorAll("[data-theme-icon]").forEach(t=>{const a=t.dataset.themeIcon;t.classList.toggle("hidden",a!==e)}),document.querySelectorAll("[data-tooltip-text]").forEach(t=>{const a=t.dataset.tooltipText;t.classList.toggle("hidden",a!==e)})}function o(e){d(e)==="dark"?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),s(e)}function u(e){localStorage.setItem("theme",e),o(e)}function l(){const e=n();return e==="light"?"dark":e==="dark"?"auto":"light"}const f=n();o(f),c.forEach(e=>{e.dataset.initialized||(e.dataset.initialized="true",e.addEventListener("click",()=>{u(l())}))}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{n()==="auto"&&o("auto")})}r();document.addEventListener("astro:after-swap",r);</script> <a href="https://github.com/jimeh/common-flow" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="View on GitHub"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="simple-icons:github">   <symbol id="ai:simple-icons:github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></symbol><use href="#ai:simple-icons:github"></use>  </svg> </a> <!-- Mobile menu button --> <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg
+               text-gray-500 dark:text-neutral-500
+               hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle menu"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:bars-3">   <symbol id="ai:heroicons:bars-3" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></symbol><use href="#ai:heroicons:bars-3"></use>  </svg> </button> </div> </div> <!-- Mobile Navigation --> <nav id="mobile-nav" class="md:hidden hidden border-t border-gray-200 dark:border-neutral-800"> <div class="px-4 py-3 space-y-1 text-center"> <div class="py-2 flex justify-center"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.1</span> <svg width="1em" height="1em" viewBox="0 0 24 24" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.1 </a> </div> </div>  </div> <a href="#about" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="about"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:information-circle">   <use href="#ai:heroicons:information-circle"></use>  </svg> About </a><a href="#spec" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="spec"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:document-text">   <use href="#ai:heroicons:document-text"></use>  </svg> Spec </a><a href="#faq" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="faq"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:question-mark-circle">   <use href="#ai:heroicons:question-mark-circle"></use>  </svg> FAQ </a> </div> </nav> </header> <script type="module" src="/_astro/Header.astro_astro_type_script_index_0_lang.ClIJVJFM.js"></script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+         px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
+           from-gray-100 to-gray-50
+           dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
+           bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
+           dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
+           bg-[size:60px_60px] bg-center
+           [-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
+           [mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 z-20 flex items-center justify-between
+           px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.1</span> <svg width="1em" height="1em" viewBox="0 0 24 24" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.1 </a> </div> </div>  </div> <div class="flex items-center gap-2"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
+           text-gray-500 dark:text-neutral-500
+           hover:text-gray-950 dark:hover:text-neutral-50
+           hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle theme"> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="light" class="hidden w-5 h-5" data-icon="heroicons:sun">   <use href="#ai:heroicons:sun"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="dark" class="hidden w-5 h-5" data-icon="heroicons:moon">   <use href="#ai:heroicons:moon"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="auto" class="hidden w-5 h-5" data-icon="heroicons:computer-desktop">   <use href="#ai:heroicons:computer-desktop"></use>  </svg> </button> <!-- Tooltip --> <div class="absolute left-1/2 -translate-x-1/2 top-full mt-2
+           px-2 py-1 text-xs font-medium whitespace-nowrap rounded-md shadow-sm
+           bg-gray-900 text-white dark:bg-white dark:text-gray-900
+           opacity-0 group-hover:opacity-100
+           transition-opacity duration-200 pointer-events-none"> <span data-tooltip-text="light" class="hidden">Light</span> <span data-tooltip-text="dark" class="hidden">Dark</span> <span data-tooltip-text="auto" class="hidden">System</span> </div> </div>  <a href="https://github.com/jimeh/common-flow" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-white/50 dark:hover:bg-neutral-800/50" aria-label="View on GitHub"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5" data-icon="simple-icons:github">   <use href="#ai:simple-icons:github"></use>  </svg> </a> </div> </div> <!-- Main content --> <div class="relative z-10 w-full max-w-4xl mx-auto text-center"> <!-- Title --> <h1 class="animate-fade-in-up mb-4
+             text-gray-950 dark:text-neutral-50">
+Git Common-Flow
+</h1> <!-- Tagline --> <p class="animate-fade-in-up delay-100
+             text-lg sm:text-xl max-w-2xl mx-auto mb-8
+             text-gray-600 dark:text-neutral-400">
+A sensible git workflow for teams who ship
+</p> <!-- Version badge --> <div class="animate-fade-in-up delay-200 mb-10"> <span class="inline-flex items-center px-3 py-1 font-mono text-xs font-medium
+               rounded-full border
+               bg-gray-100 border-gray-200 text-gray-500
+               dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
+v1.0.0-rc.1 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
+             relative mx-auto mb-12 p-4 sm:p-8
+             bg-white dark:bg-neutral-900
+             rounded-2xl shadow-lg dark:shadow-none
+             border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.1.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
+               dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
+             flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
+About
+</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               bg-sky-600 text-white
+               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md">
+Read the Spec
+</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
+FAQ
+</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
+           animate-fade-in delay-700
+           text-gray-500 dark:text-neutral-500
+           hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down">   <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use>  </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
+                 text-gray-950 dark:text-neutral-50">
+Key Principles
+</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
 the <a href="http://scottchacon.com/2011/08/31/github-flow.html">original variant</a>
 of <a href="https://guides.github.com/introduction/flow/">GitHub Flow</a>, while taking
 into account how a lot of open source projects use git.</p>
 <p>TL;DR: Common-Flow is basically GitHub Flow with the addition of versioned
 releases, maintenance releases for old versions, and without the requirement to
-deploy to production all the time.</p>
-<h2 id="terminology">Terminology</h2>
-<ul>
+deploy to production all the time.</p></div> </div> <!-- Feedback & License --> <div class="pt-8 border-t border-gray-200 dark:border-neutral-800"> <div class="grid sm:grid-cols-2 gap-8"> <div> <h4 class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500">
+Feedback
+</h4> <p class="text-gray-600 dark:text-neutral-400">
+Please  <a href="https://github.com/jimeh/common-flow/issues" class="text-sky-600 hover:text-sky-400" target="_blank" rel="noopener noreferrer">open an issue on GitHub</a>.
+</p> </div> <div> <h4 class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500">
+License
+</h4> <div class="text-gray-600 dark:text-neutral-400"><p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p></div> </div> </div> </div> </div> </div> </section> <section id="spec" class="py-20 sm:py-28"> <div class="section-container"> <div class="mb-12 text-center max-w-3xl mx-auto"> <h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> The complete Git Common-Flow specification </p> </div> <!-- Content with sidebar --> <div class="lg:flex lg:gap-8"> <!-- Sidebar --> <div class="lg:w-64 lg:flex-shrink-0"> <aside id="spec-sidebar" class="hidden lg:block lg:sticky lg:top-24 lg:self-start
+         lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto
+         lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-neutral-800"> <nav class="space-y-1 py-2"> <div class="text-xs font-semibold uppercase tracking-wider mb-4
+             text-gray-500 dark:text-neutral-500">
+Table of Contents
+</div> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-sidebar-link data-section-id="terminology">  <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-sidebar-link data-section-id="specification">  <span>Specification</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-the-master-branch"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#spec-changes" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-changes"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Changes</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-git-best-practices"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Git Best Practices</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-versioning"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-releases"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-bug-fixes-rollback"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#spec-maintenance-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-maintenance-releases"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Maintenance Releases</span> </a> </nav> </aside> <!-- Mobile floating button --> <button id="spec-toc-toggle" class="lg:hidden fixed bottom-6 right-6 z-40
+         w-12 h-12 rounded-full shadow-lg
+         bg-sky-600 text-white
+         flex items-center justify-center
+         hover:bg-sky-500
+         transition-all duration-200" aria-label="Jump to section"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:bars-3-bottom-left">   <symbol id="ai:heroicons:bars-3-bottom-left" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/></symbol><use href="#ai:heroicons:bars-3-bottom-left"></use>  </svg> </button> <!-- Mobile TOC drawer --> <div id="spec-toc-drawer" class="lg:hidden fixed inset-0 z-50 hidden" data-toc-drawer> <!-- Backdrop --> <div class="absolute inset-0 bg-black/50" data-toc-backdrop></div> <!-- Drawer --> <div class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
+           bg-gray-50 dark:bg-neutral-950
+           rounded-t-2xl shadow-xl p-6"> <div class="flex items-center justify-between mb-4"> <span class="text-sm font-semibold uppercase tracking-wider
+               text-gray-500 dark:text-neutral-500">
+Jump to Section
+</span> <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800" data-toc-close aria-label="Close"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:x-mark">   <symbol id="ai:heroicons:x-mark" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></symbol><use href="#ai:heroicons:x-mark"></use>  </svg> </button> </div> <nav class="space-y-1"> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link>  <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link>  <span>Specification</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#spec-changes" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Changes</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Git Best Practices</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#spec-maintenance-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Maintenance Releases</span> </a> </nav> </div> </div> <script type="module" src="/_astro/SpecSidebar.astro_astro_type_script_index_0_lang.BQBj5HuJ.js"></script> </div> <!-- Main content --> <div class="flex-1 min-w-0"> <article class="prose-spec"> <!-- Terminology --> <section id="terminology"> <h2>Terminology</h2> <ul>
 <li><strong>Master Branch</strong> - Must always have passing tests, is considered bleeding
 edge, and must be named <code>master</code>.</li>
 <li><strong>Change Branches</strong> - Any branch that introduces changes like a new feature, a
@@ -61,33 +194,31 @@ and a git tag named according to the new version string placed on said commit.</
 <li><strong>Maintenance Release</strong> - Just like a regular release, except the version bump
 commit and release tag are on a maintenance branch instead of the master
 branch.</li>
-</ul>
-<h2 id="git-common-flow-specification-common-flow">Git Common-Flow Specification (Common-Flow)</h2>
-<p>The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
-“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be
+</ul> </section> <!-- Main specification --> <section id="specification"> <h2>Specification</h2> <p>The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
+"SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in <a href="https://tools.ietf.org/html/rfc2119">RFC 2119</a>.</p>
 <ol>
-<li>The Master Branch
+<li id="spec-the-master-branch">The Master Branch
 <ol>
-<li>A branch named “master” MUST exist and it MUST be referred to as the
-“master branch”.</li>
+<li>A branch named "master" MUST exist and it MUST be referred to as the
+"master branch".</li>
 <li>The master branch MUST be considered bleeding edge.</li>
 <li>The master branch MUST always be in a non-broken state with its test
 suite passing.</li>
-<li>The master branch SHOULD always be in a “as near as possible ready for
-release/production” state to reduce the friction of creating a new
+<li>The master branch SHOULD always be in a "as near as possible ready for
+release/production" state to reduce the friction of creating a new
 release.</li>
 </ol>
 </li>
-<li>Changes
+<li id="spec-changes">Changes
 <ol>
 <li>Changes MUST be performed on a separate branch that SHOULD be referred to
-as a “change branch”. All change branches MUST have descriptive names. It
+as a "change branch". All change branches MUST have descriptive names. It
 is RECOMMENDED that you commit often locally, and you SHOULD regularly
 push your work to the same named branch on the remote server.</li>
 <li>When a change branch is created, the branch that it is created from
-SHOULD be referred to as the “source branch”. Each change branch also
-needs a designated “merge target branch”, typically this will be the same
+SHOULD be referred to as the "source branch". Each change branch also
+needs a designated "merge target branch", typically this will be the same
 as the source branch.</li>
 <li>Change branches MUST be regularly updated with any changes from their
 source branch. This MUST be done by rebasing the change branch on top of
@@ -95,9 +226,9 @@ the source branch. To be clear you MUST NOT merge a source branch into a
 change branch.</li>
 <li>After rebasing a change branch on top of its source branch you MUST push
 the change branch to the remote server. This will require you do a force
-push, and you SHOULD use the “—force-with-lease” git push option.</li>
+push, and you SHOULD use the "--force-with-lease" git push option.</li>
 <li>To merge a change branch into its merge target branch, you MUST open a
-“pull request” (or equivalent) so others can review and approve your
+"pull request" (or equivalent) so others can review and approve your
 changes.</li>
 <li>A pull request MUST only be merged when the change branch is up-to-date
 with its source branch, the test suite is passing, and you and others are
@@ -108,62 +239,62 @@ others, it is RECOMMENDED you do this by creating a pull request and
 discuss the changes with others there.</li>
 </ol>
 </li>
-<li>Git Best Practices
+<li id="spec-git-best-practices">Git Best Practices
 <ol>
 <li>All commit messages SHOULD follow the Commit Guidelines and format from
 the official git
 documentation:
 <a href="https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project">https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project</a></li>
-<li>You SHOULD always use “—force-with-lease” when doing a force push. The
-plain “—force” option is dangerous and destructive. More
+<li>You SHOULD always use "--force-with-lease" when doing a force push. The
+plain "--force" option is dangerous and destructive. More
 information:
 <a href="https://developer.atlassian.com/blog/2015/04/force-with-lease/">https://developer.atlassian.com/blog/2015/04/force-with-lease/</a></li>
 <li>You SHOULD understand and be comfortable with
 rebasing: <a href="https://git-scm.com/book/en/v2/Git-Branching-Rebasing">https://git-scm.com/book/en/v2/Git-Branching-Rebasing</a></li>
-<li>It is RECOMMENDED that you always do “git pull —rebase” instead of “git
-pull” to avoid unnecessary merge commits. You can make this the default
-behavior of “git pull” with “git config —global pull.rebase true”.</li>
-<li>It is RECOMMENDED that all branches be merged using “git merge —no-ff”.
+<li>It is RECOMMENDED that you always do "git pull --rebase" instead of "git
+pull" to avoid unnecessary merge commits. You can make this the default
+behavior of "git pull" with "git config --global pull.rebase true".</li>
+<li>It is RECOMMENDED that all branches be merged using "git merge --no-ff".
 This makes sure the reference to the original branch is kept in the commits,
 allows one to revert a merge by reverting a single merge commit, and creates
 a merge commit to mark the integration of the branch with master.</li>
 </ol>
 </li>
-<li>Versioning
+<li id="spec-versioning">Versioning
 <ol>
 <li>The project MUST have its version hard-coded somewhere in the
-code-base. It is RECOMMENDED that this is done in a file called “VERSION”
+code-base. It is RECOMMENDED that this is done in a file called "VERSION"
 located in the root of the project.</li>
-<li>If you are using a “VERSION” file in the root of the project, this MUST
+<li>If you are using a "VERSION" file in the root of the project, this MUST
 only contain the exact version string.</li>
 <li>The version string SHOULD follow the Semantic Versioning
 (<a href="http://semver.org/">http://semver.org/</a>) format. Use of Semantic Versioning is OPTIONAL,
-but the version string MUST NOT have a “v” prefix. For example “v2.11.4”
-is bad, and “2.11.4” is good.</li>
+but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
+is bad, and "2.11.4" is good.</li>
 </ol>
 </li>
-<li>Releases
+<li id="spec-releases">Releases
 <ol>
-<li>To create a new release, you MUST create a “version bump” commit directly
+<li>To create a new release, you MUST create a "version bump" commit directly
 on the master branch which changes the hard-coded version value of the
 project. The version bump commit MUST have a git tag created on it and
 named as the exact version string.</li>
-<li>A version bump commit MUST have a commit message title of “Bump version
-to VERSION”. For example, if the new version string is “2.11.4”, the
-first line of the commit message MUST read: “Bump version to 2.11.4”</li>
+<li>A version bump commit MUST have a commit message title of "Bump version
+to VERSION". For example, if the new version string is "2.11.4", the
+first line of the commit message MUST read: "Bump version to 2.11.4"</li>
 <li>The release tag on the version bump commit MUST be named exactly the same
 as the version string. The tag name can OPTIONALLY be prefixed with
-“v”. For example the tag name can be either “2.11.4” or “v2.11.4”.</li>
+"v". For example the tag name can be either "2.11.4" or "v2.11.4".</li>
 <li>It is RECOMMENDED that release tags are lightweight tags, but you can
 OPTIONALLY use annotated tags if you want to include changelog
 information in the release tag itself.</li>
 <li>If you use annotated release tags, the first line of the annotation MUST
-read “Release VERSION”. For example for version “2.11.4” the first line
-of the tag annotation would read “Release 2.11.4”. The second line must
+read "Release VERSION". For example for version "2.11.4" the first line
+of the tag annotation would read "Release 2.11.4". The second line must
 be blank, and the changelog MUST start on the third line.</li>
 </ol>
 </li>
-<li>Bug Fixes &#x26; Rollback
+<li id="spec-bug-fixes-rollback">Bug Fixes &#x26; Rollback
 <ol>
 <li>You MUST NOT under any circumstances force push to the master branch.</li>
 <li>If a change branch which has been merged in to the master branch is found
@@ -176,24 +307,24 @@ merge commit itself. Effectively creating a new commit that reverses all
 the relevant changes.</li>
 </ol>
 </li>
-<li>Maintenance Releases
+<li id="spec-maintenance-releases">Maintenance Releases
 <ol>
-<li>Any branch that has a name starting with “stable-” SHOULD be referred to
-as a “maintenance branch”.</li>
+<li>Any branch that has a name starting with "stable-" SHOULD be referred to
+as a "maintenance branch".</li>
 <li>Maintenance branches are used for managing new releases of older
 versions. Typically this is used to provide security updates for older
 versions when the master branch has moved on to a point that a new
 release for the old version cannot be made from the master branch.</li>
-<li>A “maintenance release” is identical to a regular release, except the
+<li>A "maintenance release" is identical to a regular release, except the
 version bump commit and the release tag are placed on the maintenance
 branch instead of on the master branch.</li>
-<li>A maintenance branch SHOULD follow a “stable-X.Y” naming pattern, where
-“X” is the MAJOR version and “Y” is the minor version.</li>
+<li>A maintenance branch SHOULD follow a "stable-X.Y" naming pattern, where
+"X" is the MAJOR version and "Y" is the minor version.</li>
 <li>A maintenance branch MUST be created from the relevant release tag. For
 example if there is a security fix for all 2.9.x releases, the latest of
-which is “2.9.7”, we create a new branch called “stable-2.9” off of the
-“2.9.7” release tag. The security fix release will then end up being
-version “2.9.8”.</li>
+which is "2.9.7", we create a new branch called "stable-2.9" off of the
+"2.9.7" release tag. The security fix release will then end up being
+version "2.9.8".</li>
 <li>When working on a maintenance release, the relevant maintenance branch
 MUST be thought of as the master branch for that maintenance work.</li>
 <li>Changes in a maintenance branch SHOULD typically come from work being
@@ -203,11 +334,10 @@ into the master branch, that work should have happened against the master
 branch in the first place.</li>
 </ol>
 </li>
-</ol>
-<h2 id="about">About</h2>
-<p>The Git Common-Flow specification is authored
-by <a href="http://jimeh.me">Jim Myhrberg</a>.</p>
-<p>If you’d like to leave feedback,
-please <a href="https://github.com/jimeh/common-flow/issues">open an issue on GitHub</a>.</p>
-<h2 id="license">License</h2>
-<p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p> </article>  </div> </div> </div> </body></html> 
+</ol> </section> </article> </div> </div> </div> </section> <section id="faq" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0">  </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
+         text-gray-500 dark:text-neutral-500
+         border-t border-gray-200 dark:border-neutral-800"> <div class="section-container flex flex-col sm:flex-row
+           sm:justify-between sm:items-center gap-2"> <p>
+License:
+<a href="https://creativecommons.org/licenses/by/4.0/" class="hover:text-sky-600" target="_blank" rel="noopener noreferrer"> CC BY 4.0 </a> </p> <p> Git Common-Flow by
+<a href="https://jimeh.me/" class="hover:text-sky-600" target="_blank" rel="noopener noreferrer"> Jim Myhrberg </a> </p> </div> </footer>  <!-- Re-init theme on Astro page transitions --> <script type="module">document.addEventListener("astro:after-swap",()=>{const e=localStorage.getItem("theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;e==="dark"||e!=="light"&&t?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")});</script> </body> </html>
--- a/docs/spec/1.0.0-rc.2/index.html
+++ b/docs/spec/1.0.0-rc.2/index.html
@@ -1,45 +1,178 @@
-<!DOCTYPE html><html lang="en" data-astro-cid-jwirc66j> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/spec/1.0.0-rc.2/"><title>Git Common-Flow 1.0.0-rc.2 | Git Common Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Git Common-Flow 1.0.0-rc.2 | Git Common Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/spec/1.0.0-rc.2/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Git Common-Flow 1.0.0-rc.2 | Git Common Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><!-- Prevent flash of wrong theme --><script>
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/spec/1.0.0-rc.2/"><title>Git Common-Flow 1.0.0-rc.2 | Git Common-Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Git Common-Flow 1.0.0-rc.2 | Git Common-Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/spec/1.0.0-rc.2/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Git Common-Flow 1.0.0-rc.2 | Git Common-Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Favicon --><link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- Prevent flash of wrong theme --><script>
      (function () {
-        const theme = localStorage.getItem("theme");
-        if (
-          theme === "dark" ||
-          (!theme &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches)
-        ) {
+        const mode = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (mode === "dark" || (mode !== "light" && prefersDark)) {
          document.documentElement.classList.add("dark");
        }
      })();
-    </script><link rel="stylesheet" href="/_astro/_version_.BDyAzQHc.css">
-<style>.spec-content h1{margin-bottom:.5em}.spec-content h2{margin-top:2em;margin-bottom:.75em;padding-bottom:.3em;border-bottom:1px solid #eee}.dark .spec-content h2{border-bottom-color:#333}.spec-content h3{margin-top:1.5em;margin-bottom:.5em}.spec-content p{margin-bottom:1em}.spec-content ul,.spec-content ol{margin-bottom:1em;padding-left:2em}.spec-content li{margin-bottom:.25em}.spec-content a{color:#1f8dd6;text-decoration:none}.spec-content a:hover{text-decoration:underline}.dark .spec-content a{color:#4da6e8}.spec-content img{max-width:100%;height:auto;margin:1em 0}.spec-content blockquote{margin:1em 0;padding-left:1em;border-left:4px solid #ddd;color:#666}.dark .spec-content blockquote{border-left-color:#444;color:#aaa}.spec-content hr{margin:2em 0;border:none;border-top:1px solid #eee}.dark .spec-content hr{border-top-color:#333}
-</style></head> <body data-astro-cid-jwirc66j> <div id="layout" data-astro-cid-jwirc66j> <a href="#menu" id="menuLink" class="menu-link" data-astro-cid-jyixok4n> <span data-astro-cid-jyixok4n></span> </a>  <script type="module">function c(){const e=document.getElementById("layout"),n=document.getElementById("menu"),t=document.getElementById("menuLink"),s=document.getElementById("main");function i(o){o.preventDefault(),e?.classList.toggle("active"),n?.classList.toggle("active"),t?.classList.toggle("active")}function a(){e?.classList.remove("active"),n?.classList.remove("active"),t?.classList.remove("active")}t?.addEventListener("click",i),s?.addEventListener("click",()=>{e?.classList.contains("active")&&a()})}c();document.addEventListener("astro:after-swap",c);</script> <div id="menu" data-astro-cid-ssfzsv2f> <div class="menu-inner" data-astro-cid-ssfzsv2f> <ul class="menu-list" data-astro-cid-ssfzsv2f> <li class="menu-label" data-astro-cid-ssfzsv2f>Versions:</li> <li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.5" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.5 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.4" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.4 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.3" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.3 </a> </li><li class="menu-item selected" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.2" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.2 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.1" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.1 </a> </li> </ul> </div> <div class="links" data-astro-cid-ssfzsv2f> <a href="https://github.com/jimeh/common-flow" aria-label="View on GitHub" class="github-link" data-astro-cid-ssfzsv2f> <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-ssfzsv2f> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839
-             9.504.5.092.682-.217.682-.483
-             0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
-             1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
-             2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951
-             0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65
-             0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004
-             1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546
-             1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028
-             2.688 0 3.848-2.339 4.695-4.566
-             4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012
-             2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22
-             6.484 17.522 2 12 2z" clip-rule="evenodd" data-astro-cid-ssfzsv2f></path> </svg> </a> <button id="theme-toggle" type="button" class="p-2 text-[color:var(--color-text-muted)] hover:text-white
-         transition-colors duration-200" aria-label="Toggle dark mode"> <!-- Sun icon (shown in dark mode) --> <svg id="sun-icon" class="hidden w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
-         6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
-         12a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> <!-- Moon icon (shown in light mode) --> <svg id="moon-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
-         9.003 0 008.354-5.646z"></path> </svg> </button> <script type="module">function c(){const d=document.getElementById("theme-toggle"),n=document.getElementById("sun-icon"),o=document.getElementById("moon-icon");function s(e){e?(n?.classList.remove("hidden"),o?.classList.add("hidden")):(n?.classList.add("hidden"),o?.classList.remove("hidden"))}function a(){const e=localStorage.getItem("theme");return e==="dark"||e==="light"?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function t(e){localStorage.setItem("theme",e),document.documentElement.classList.toggle("dark",e==="dark"),s(e==="dark")}const i=a();t(i),d?.addEventListener("click",()=>{const e=document.documentElement.classList.contains("dark");t(e?"light":"dark")}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||t(e.matches?"dark":"light")})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div>  <div id="main" data-astro-cid-jwirc66j> <div class="content" data-astro-cid-jwirc66j>  <article class="spec-content"> <h1 id="git-common-flow-100-rc2">Git Common-Flow 1.0.0-rc.2</h1>
-<img src="/spec/1.0.0-rc.2.svg" alt="Git Common-Flow 1.0.0-rc.2 diagram" width="100%">
-<h2 id="summary">Summary</h2>
-<p>Common-Flow is an attempt to gather a sensible selection of the most common
+    </script><link rel="stylesheet" href="/_astro/index.DF_wxGza.css"></head> <body class="min-h-screen">  <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
+         translate-y-[-100%] transition-transform duration-300
+         backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
+               text-gray-950 dark:text-neutral-50
+               hover:text-sky-600 transition-colors"> <span class="font-display font-bold text-lg tracking-tight">
+Git Common-Flow
+</span> </a> <div class="hidden md:block"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.2</span> <svg width="1em" height="1em" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <symbol id="ai:heroicons:chevron-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m19.5 8.25l-7.5 7.5l-7.5-7.5"/></symbol><use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.1 </a> </div> </div> <script type="module">function c(){document.querySelectorAll("[data-version-selector]").forEach(e=>{if(e.dataset.initialized)return;e.dataset.initialized="true";const t=e.querySelector("[data-version-trigger]"),a=e.querySelector("[data-version-dropdown]"),n=e.querySelector("[data-arrow-icon]");if(!t||!a)return;const l=()=>{a.dataset.open="true",t.setAttribute("aria-expanded","true"),n&&(n.style.transform="rotate(180deg)")},o=()=>{delete a.dataset.open,t.setAttribute("aria-expanded","false"),n&&(n.style.transform="")};t.addEventListener("click",r=>{r.stopPropagation();const u=a.dataset.open==="true";document.querySelectorAll("[data-version-dropdown][data-open]").forEach(s=>{delete s.dataset.open;const i=s.previousElementSibling;i?.setAttribute("aria-expanded","false");const d=i?.querySelector("[data-arrow-icon]");d&&(d.style.transform="")}),u?o():l()}),document.addEventListener("click",r=>{e.contains(r.target)||o()}),document.addEventListener("keydown",r=>{r.key==="Escape"&&a.dataset.open==="true"&&(o(),t.focus())})})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div> <!-- Desktop Navigation --> <nav class="hidden md:flex items-center gap-1"> <a href="#about" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="about"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:information-circle">   <symbol id="ai:heroicons:information-circle" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/></symbol><use href="#ai:heroicons:information-circle"></use>  </svg> About </a><a href="#spec" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="spec"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:document-text">   <symbol id="ai:heroicons:document-text" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"/></symbol><use href="#ai:heroicons:document-text"></use>  </svg> Spec </a><a href="#faq" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="faq"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:question-mark-circle">   <symbol id="ai:heroicons:question-mark-circle" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712q-.308.268-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z"/></symbol><use href="#ai:heroicons:question-mark-circle"></use>  </svg> FAQ </a> </nav> <!-- Right side: Theme, GitHub --> <div class="flex items-center gap-3"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
+           text-gray-500 dark:text-neutral-500
+           hover:text-gray-950 dark:hover:text-neutral-50
+           hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle theme"> <svg width="1em" height="1em" data-theme-icon="light" class="hidden w-5 h-5" data-icon="heroicons:sun">   <symbol id="ai:heroicons:sun" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0a3.75 3.75 0 0 1 7.5 0"/></symbol><use href="#ai:heroicons:sun"></use>  </svg> <svg width="1em" height="1em" data-theme-icon="dark" class="hidden w-5 h-5" data-icon="heroicons:moon">   <symbol id="ai:heroicons:moon" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.752 15.002A9.7 9.7 0 0 1 18 15.75A9.75 9.75 0 0 1 8.25 6c0-1.33.266-2.597.748-3.752A9.75 9.75 0 0 0 3 11.25A9.75 9.75 0 0 0 12.75 21a9.75 9.75 0 0 0 9.002-5.998"/></symbol><use href="#ai:heroicons:moon"></use>  </svg> <svg width="1em" height="1em" data-theme-icon="auto" class="hidden w-5 h-5" data-icon="heroicons:computer-desktop">   <symbol id="ai:heroicons:computer-desktop" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/></symbol><use href="#ai:heroicons:computer-desktop"></use>  </svg> </button> <!-- Tooltip --> <div class="absolute left-1/2 -translate-x-1/2 top-full mt-2
+           px-2 py-1 text-xs font-medium whitespace-nowrap rounded-md shadow-sm
+           bg-gray-900 text-white dark:bg-white dark:text-gray-900
+           opacity-0 group-hover:opacity-100
+           transition-opacity duration-200 pointer-events-none"> <span data-tooltip-text="light" class="hidden">Light</span> <span data-tooltip-text="dark" class="hidden">Dark</span> <span data-tooltip-text="auto" class="hidden">System</span> </div> </div> <script type="module">function r(){const c=document.querySelectorAll("[data-theme-toggle]");function n(){const e=localStorage.getItem("theme");return e==="dark"||e==="light"||e==="auto"?e:"auto"}function i(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function d(e){return e==="auto"?i():e}function s(e){document.querySelectorAll("[data-theme-icon]").forEach(t=>{const a=t.dataset.themeIcon;t.classList.toggle("hidden",a!==e)}),document.querySelectorAll("[data-tooltip-text]").forEach(t=>{const a=t.dataset.tooltipText;t.classList.toggle("hidden",a!==e)})}function o(e){d(e)==="dark"?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),s(e)}function u(e){localStorage.setItem("theme",e),o(e)}function l(){const e=n();return e==="light"?"dark":e==="dark"?"auto":"light"}const f=n();o(f),c.forEach(e=>{e.dataset.initialized||(e.dataset.initialized="true",e.addEventListener("click",()=>{u(l())}))}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{n()==="auto"&&o("auto")})}r();document.addEventListener("astro:after-swap",r);</script> <a href="https://github.com/jimeh/common-flow" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="View on GitHub"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="simple-icons:github">   <symbol id="ai:simple-icons:github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></symbol><use href="#ai:simple-icons:github"></use>  </svg> </a> <!-- Mobile menu button --> <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg
+               text-gray-500 dark:text-neutral-500
+               hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle menu"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:bars-3">   <symbol id="ai:heroicons:bars-3" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></symbol><use href="#ai:heroicons:bars-3"></use>  </svg> </button> </div> </div> <!-- Mobile Navigation --> <nav id="mobile-nav" class="md:hidden hidden border-t border-gray-200 dark:border-neutral-800"> <div class="px-4 py-3 space-y-1 text-center"> <div class="py-2 flex justify-center"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.2</span> <svg width="1em" height="1em" viewBox="0 0 24 24" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.1 </a> </div> </div>  </div> <a href="#about" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="about"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:information-circle">   <use href="#ai:heroicons:information-circle"></use>  </svg> About </a><a href="#spec" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="spec"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:document-text">   <use href="#ai:heroicons:document-text"></use>  </svg> Spec </a><a href="#faq" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="faq"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:question-mark-circle">   <use href="#ai:heroicons:question-mark-circle"></use>  </svg> FAQ </a> </div> </nav> </header> <script type="module" src="/_astro/Header.astro_astro_type_script_index_0_lang.ClIJVJFM.js"></script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+         px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
+           from-gray-100 to-gray-50
+           dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
+           bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
+           dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
+           bg-[size:60px_60px] bg-center
+           [-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
+           [mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 z-20 flex items-center justify-between
+           px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.2</span> <svg width="1em" height="1em" viewBox="0 0 24 24" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.1 </a> </div> </div>  </div> <div class="flex items-center gap-2"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
+           text-gray-500 dark:text-neutral-500
+           hover:text-gray-950 dark:hover:text-neutral-50
+           hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle theme"> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="light" class="hidden w-5 h-5" data-icon="heroicons:sun">   <use href="#ai:heroicons:sun"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="dark" class="hidden w-5 h-5" data-icon="heroicons:moon">   <use href="#ai:heroicons:moon"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="auto" class="hidden w-5 h-5" data-icon="heroicons:computer-desktop">   <use href="#ai:heroicons:computer-desktop"></use>  </svg> </button> <!-- Tooltip --> <div class="absolute left-1/2 -translate-x-1/2 top-full mt-2
+           px-2 py-1 text-xs font-medium whitespace-nowrap rounded-md shadow-sm
+           bg-gray-900 text-white dark:bg-white dark:text-gray-900
+           opacity-0 group-hover:opacity-100
+           transition-opacity duration-200 pointer-events-none"> <span data-tooltip-text="light" class="hidden">Light</span> <span data-tooltip-text="dark" class="hidden">Dark</span> <span data-tooltip-text="auto" class="hidden">System</span> </div> </div>  <a href="https://github.com/jimeh/common-flow" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-white/50 dark:hover:bg-neutral-800/50" aria-label="View on GitHub"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5" data-icon="simple-icons:github">   <use href="#ai:simple-icons:github"></use>  </svg> </a> </div> </div> <!-- Main content --> <div class="relative z-10 w-full max-w-4xl mx-auto text-center"> <!-- Title --> <h1 class="animate-fade-in-up mb-4
+             text-gray-950 dark:text-neutral-50">
+Git Common-Flow
+</h1> <!-- Tagline --> <p class="animate-fade-in-up delay-100
+             text-lg sm:text-xl max-w-2xl mx-auto mb-8
+             text-gray-600 dark:text-neutral-400">
+A sensible git workflow for teams who ship
+</p> <!-- Version badge --> <div class="animate-fade-in-up delay-200 mb-10"> <span class="inline-flex items-center px-3 py-1 font-mono text-xs font-medium
+               rounded-full border
+               bg-gray-100 border-gray-200 text-gray-500
+               dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
+v1.0.0-rc.2 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
+             relative mx-auto mb-12 p-4 sm:p-8
+             bg-white dark:bg-neutral-900
+             rounded-2xl shadow-lg dark:shadow-none
+             border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.2.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
+               dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
+             flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
+About
+</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               bg-sky-600 text-white
+               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md">
+Read the Spec
+</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
+FAQ
+</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
+           animate-fade-in delay-700
+           text-gray-500 dark:text-neutral-500
+           hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down">   <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use>  </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
+                 text-gray-950 dark:text-neutral-50">
+Key Principles
+</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
 the <a href="http://scottchacon.com/2011/08/31/github-flow.html">original variant</a>
 of <a href="https://guides.github.com/introduction/flow/">GitHub Flow</a>, while taking
 into account how a lot of open source projects use git.</p>
 <p>TL;DR: Common-Flow is basically GitHub Flow with the addition of versioned
 releases, maintenance releases for old versions, and without the requirement to
-deploy to production all the time.</p>
-<h2 id="terminology">Terminology</h2>
-<ul>
+deploy to production all the time.</p></div> </div> <!-- Feedback & License --> <div class="pt-8 border-t border-gray-200 dark:border-neutral-800"> <div class="grid sm:grid-cols-2 gap-8"> <div> <h4 class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500">
+Feedback
+</h4> <p class="text-gray-600 dark:text-neutral-400">
+Please  <a href="https://github.com/jimeh/common-flow/issues" class="text-sky-600 hover:text-sky-400" target="_blank" rel="noopener noreferrer">open an issue on GitHub</a>.
+</p> </div> <div> <h4 class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500">
+License
+</h4> <div class="text-gray-600 dark:text-neutral-400"><p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p></div> </div> </div> </div> </div> </div> </section> <section id="spec" class="py-20 sm:py-28"> <div class="section-container"> <div class="mb-12 text-center max-w-3xl mx-auto"> <h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> The complete Git Common-Flow specification </p> </div> <!-- Content with sidebar --> <div class="lg:flex lg:gap-8"> <!-- Sidebar --> <div class="lg:w-64 lg:flex-shrink-0"> <aside id="spec-sidebar" class="hidden lg:block lg:sticky lg:top-24 lg:self-start
+         lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto
+         lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-neutral-800"> <nav class="space-y-1 py-2"> <div class="text-xs font-semibold uppercase tracking-wider mb-4
+             text-gray-500 dark:text-neutral-500">
+Table of Contents
+</div> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-sidebar-link data-section-id="terminology">  <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-sidebar-link data-section-id="specification">  <span>Specification</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-the-master-branch"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#spec-change-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-change-branches"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Change Branches</span> </a><a href="#spec-pull-requests" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-pull-requests"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Pull Requests</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-versioning"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-releases"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#spec-release-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-release-branches"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Release Branches</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-bug-fixes-rollback"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-git-best-practices"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 8. </span> <span>Git Best Practices</span> </a> </nav> </aside> <!-- Mobile floating button --> <button id="spec-toc-toggle" class="lg:hidden fixed bottom-6 right-6 z-40
+         w-12 h-12 rounded-full shadow-lg
+         bg-sky-600 text-white
+         flex items-center justify-center
+         hover:bg-sky-500
+         transition-all duration-200" aria-label="Jump to section"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:bars-3-bottom-left">   <symbol id="ai:heroicons:bars-3-bottom-left" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/></symbol><use href="#ai:heroicons:bars-3-bottom-left"></use>  </svg> </button> <!-- Mobile TOC drawer --> <div id="spec-toc-drawer" class="lg:hidden fixed inset-0 z-50 hidden" data-toc-drawer> <!-- Backdrop --> <div class="absolute inset-0 bg-black/50" data-toc-backdrop></div> <!-- Drawer --> <div class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
+           bg-gray-50 dark:bg-neutral-950
+           rounded-t-2xl shadow-xl p-6"> <div class="flex items-center justify-between mb-4"> <span class="text-sm font-semibold uppercase tracking-wider
+               text-gray-500 dark:text-neutral-500">
+Jump to Section
+</span> <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800" data-toc-close aria-label="Close"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:x-mark">   <symbol id="ai:heroicons:x-mark" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></symbol><use href="#ai:heroicons:x-mark"></use>  </svg> </button> </div> <nav class="space-y-1"> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link>  <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link>  <span>Specification</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#spec-change-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Change Branches</span> </a><a href="#spec-pull-requests" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Pull Requests</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#spec-release-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Release Branches</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 8. </span> <span>Git Best Practices</span> </a> </nav> </div> </div> <script type="module" src="/_astro/SpecSidebar.astro_astro_type_script_index_0_lang.BQBj5HuJ.js"></script> </div> <!-- Main content --> <div class="flex-1 min-w-0"> <article class="prose-spec"> <!-- Terminology --> <section id="terminology"> <h2>Terminology</h2> <ul>
 <li><strong>Master Branch</strong> - Must always have passing tests, is considered bleeding
 edge, and must be named <code>master</code>.</li>
 <li><strong>Change Branches</strong> - Any branch that introduces changes like a new feature, a
@@ -56,28 +189,26 @@ its merge target, allowing others to review, discuss and approve the changes.</l
 to the new version string placed on said commit.</li>
 <li><strong>Release Branches</strong> - Used both for short-term preparations of a release, and
 also for long-term maintenance of older version.</li>
-</ul>
-<h2 id="git-common-flow-specification-common-flow">Git Common-Flow Specification (Common-Flow)</h2>
-<p>The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
-“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be
+</ul> </section> <!-- Main specification --> <section id="specification"> <h2>Specification</h2> <p>The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
+"SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in <a href="https://tools.ietf.org/html/rfc2119">RFC 2119</a>.</p>
 <ol>
-<li>The Master Branch
+<li id="spec-the-master-branch">The Master Branch
 <ol>
-<li>A branch named “master” MUST exist and it MUST be referred to as the
-“master branch”.</li>
+<li>A branch named "master" MUST exist and it MUST be referred to as the
+"master branch".</li>
 <li>The master branch MUST be considered bleeding edge.</li>
 <li>The master branch MUST always be in a non-broken state with its test
 suite passing.</li>
-<li>The master branch SHOULD always be in a “as near as possibly ready for
-release/production” state to reduce any friction with creating a new
+<li>The master branch SHOULD always be in a "as near as possibly ready for
+release/production" state to reduce any friction with creating a new
 release.</li>
 </ol>
 </li>
-<li>Change Branches
+<li id="spec-change-branches">Change Branches
 <ol>
 <li>Each change (feature, bugfix, etc.) MUST be performed on separate
-branches that SHOULD be referred to as “change branches”. All change
+branches that SHOULD be referred to as "change branches". All change
 branches MUST have descriptive names. It is RECOMMENDED that you commit
 often locally, and you SHOULD regularly push your work to the same named
 branch on the remote server.</li>
@@ -85,21 +216,21 @@ branch on the remote server.</li>
 change. You MUST NOT include multiple unrelated changes into a single
 change branch.</li>
 <li>When a change branch is created, the branch that it is created from
-SHOULD be referred to as the “source branch”. Each change branch also
-needs a designated “merge target” branch, typically this will be the same
+SHOULD be referred to as the "source branch". Each change branch also
+needs a designated "merge target" branch, typically this will be the same
 as the source branch.</li>
 <li>Change branches MUST be regularly updated with any changes from their
 source branch. This MUST be done by rebasing the change branch on top of
 the source branch.</li>
 <li>After rebasing a change branch on top of its source branch you MUST push
 the change branch to the remote server. This will require you to do a
-force push, and you SHOULD use the “—force-with-lease” git push option.</li>
+force push, and you SHOULD use the "--force-with-lease" git push option.</li>
 </ol>
 </li>
-<li>Pull Requests
+<li id="spec-pull-requests">Pull Requests
 <ol>
-<li>To merge a change branch into its merge target, you MUST open a “pull
-request” (or equivalent) so others can review and approve your changes.</li>
+<li>To merge a change branch into its merge target, you MUST open a "pull
+request" (or equivalent) so others can review and approve your changes.</li>
 <li>A pull request MUST only be merged when the change branch is up-to-date
 with its source branch, the test suite is passing, and you and others are
 happy with the change. This is especially important if the merge target
@@ -109,48 +240,48 @@ others, the RECOMMENDED way to do so is by creating a pull request and
 discuss the changes with others there.</li>
 </ol>
 </li>
-<li>Versioning
+<li id="spec-versioning">Versioning
 <ol>
 <li>The project MUST have its version hard-coded somewhere in the
-code-base. It is RECOMMENDED that this is done in a file called “VERSION”
+code-base. It is RECOMMENDED that this is done in a file called "VERSION"
 located in the root of the project.</li>
-<li>If you are using a “VERSION” file in the root of the project, this MUST
+<li>If you are using a "VERSION" file in the root of the project, this MUST
 only contain the exact version string.</li>
 <li>The version string SHOULD follow the Semantic Versioning
 (<a href="http://semver.org/">http://semver.org/</a>) format. Use of Semantic Versioning is OPTIONAL,
-but the version string MUST NOT have a “v” prefix. For example “v2.11.4”
-is bad, and “2.11.4” is good.</li>
+but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
+is bad, and "2.11.4" is good.</li>
 </ol>
 </li>
-<li>Releases
+<li id="spec-releases">Releases
 <ol>
-<li>To create a new release, you MUST create a “version bump” commit which
+<li>To create a new release, you MUST create a "version bump" commit which
 changes the hard-coded version string of the project. The version bump
 commit MUST have a git tag created on it and named as the exact version
 string.</li>
 <li>If you are not using a release branch, then the version bump commit MUST
 be created directly on the master branch.</li>
-<li>The version bump commit MUST have a commit message title of “Bump version
-to VERSION”. For example, if the new version string is “2.11.4”, the
-first line of the commit message MUST read: “Bump version to 2.11.4”</li>
+<li>The version bump commit MUST have a commit message title of "Bump version
+to VERSION". For example, if the new version string is "2.11.4", the
+first line of the commit message MUST read: "Bump version to 2.11.4"</li>
 <li>The release tag on the version bump commit MUST be named exactly the same
 as the version string. The tag name can OPTIONALLY be prefixed with
-“v”. For example the tag name can be either “2.11.4” or “v2.11.4”. You
-MUST not use a mix of “v” prefixed and non-prefixed tags. Pick one form
+"v". For example the tag name can be either "2.11.4" or "v2.11.4". You
+MUST not use a mix of "v" prefixed and non-prefixed tags. Pick one form
 and stick to it.</li>
 <li>It is RECOMMENDED that release tags are lightweight tags, but you can
 OPTIONALLY use annotated tags if you want to include changelog
 information in the release tag itself.</li>
 <li>If you use annotated release tags, the first line of the annotation MUST
-read “Release VERSION”. For example for version “2.11.4” the first line
-of the tag annotation would read “Release 2.11.4”. The second line must
+read "Release VERSION". For example for version "2.11.4" the first line
+of the tag annotation would read "Release 2.11.4". The second line must
 be blank, and the changelog MUST start on the third line.</li>
 </ol>
 </li>
-<li>Release Branches
+<li id="spec-release-branches">Release Branches
 <ol>
-<li>Any branch that has a name starting with “release-” SHOULD be referred to
-as a “release branch”.</li>
+<li>Any branch that has a name starting with "release-" SHOULD be referred to
+as a "release branch".</li>
 <li>Use of release branches is OPTIONAL.</li>
 <li>Changes in a release branch SHOULD typically come from work being
 done against the master branch. Meaning changes SHOULD only trickle
@@ -164,8 +295,8 @@ branch in the first place. One exception to this is version bump commits.</li>
 <li>A short-term release branch is RECOMMENDED if there is a lengthy
 pre-release verification process to avoid a code freeze on the master
 branch.</li>
-<li>MUST have a name of “release-VERSION”. For example for version
-“2.11.4” the release branch name MUST be “release-2.11.4”.</li>
+<li>MUST have a name of "release-VERSION". For example for version
+"2.11.4" the release branch name MUST be "release-2.11.4".</li>
 <li>When using a short-term release branch, the version bump commit and
 release tag MUST be made directly on the release branch itself.</li>
 <li>Only very minor changes should be performed on a short-term release
@@ -185,21 +316,21 @@ branch. Typically this is useful when you need to create a new
 maintenance release for a older version.</li>
 <li>The branch name MUST have a non-specific version number. For example
 a long-term release branch for creating new 2.9.x releases would be
-named “release-2.9”.</li>
+named "release-2.9".</li>
 <li>To create a new release from a long-term release branch, you MUST
 create a version bump commit and release tag directly on the release
 branch.</li>
 <li>A long-term release branch MUST be created from the relevant release
 tag. For example if the master branch is on version 2.11.4 and there
 is a security fix for all 2.9.x releases, the latest of which is
-“2.9.7”. Create a new branch called “release-2.9” off of the “2.9.7”
+"2.9.7". Create a new branch called "release-2.9" off of the "2.9.7"
 release tag. The security fix release will then end up being version
-“2.9.8”.</li>
+"2.9.8".</li>
 </ol>
 </li>
 </ol>
 </li>
-<li>Bug Fixes &#x26; Rollback
+<li id="spec-bug-fixes-rollback">Bug Fixes &#x26; Rollback
 <ol>
 <li>You MUST NOT under any circumstances force push to the master branch.</li>
 <li>If a change branch which has been merged into the master branch is found
@@ -212,36 +343,35 @@ merge commit itself. Effectively creating a new commit that reverses all
 the relevant changes.</li>
 </ol>
 </li>
-<li>Git Best Practices
+<li id="spec-git-best-practices">Git Best Practices
 <ol>
 <li>All commit messages SHOULD follow the Commit Guidelines and format from
 the official git
 documentation:
 <a href="https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project">https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project</a></li>
-<li>You SHOULD never blindly commit all changes with “git commit -a”. It is
-RECOMMENDED you use “git add -i” to add individual changes to the staging
+<li>You SHOULD never blindly commit all changes with "git commit -a". It is
+RECOMMENDED you use "git add -i" to add individual changes to the staging
 area so you are fully aware of what you are committing.</li>
-<li>You SHOULD always use “—force-with-lease” when doing a force push. The
-regular “—force” option is dangerous and destructive. More
+<li>You SHOULD always use "--force-with-lease" when doing a force push. The
+regular "--force" option is dangerous and destructive. More
 information:
 <a href="https://developer.atlassian.com/blog/2015/04/force-with-lease/">https://developer.atlassian.com/blog/2015/04/force-with-lease/</a></li>
 <li>You SHOULD understand and be comfortable with
 rebasing: <a href="https://git-scm.com/book/en/v2/Git-Branching-Rebasing">https://git-scm.com/book/en/v2/Git-Branching-Rebasing</a></li>
-<li>It is RECOMMENDED that you always do “git pull —rebase” instead of “git
-pull” to avoid unnecessary merge commits. You can make this the default
-behavior of “git pull” with “git config —global pull.rebase true”.</li>
-<li>It is RECOMMENDED that all branches be merged using “git merge —no-ff”.
+<li>It is RECOMMENDED that you always do "git pull --rebase" instead of "git
+pull" to avoid unnecessary merge commits. You can make this the default
+behavior of "git pull" with "git config --global pull.rebase true".</li>
+<li>It is RECOMMENDED that all branches be merged using "git merge --no-ff".
 This makes sure the reference to the original branch is kept in the
 commits, allows one to revert a merge by reverting a single merge commit,
 and creates a merge commit to mark the integration of the branch with
 master.</li>
 </ol>
 </li>
-</ol>
-<h2 id="about">About</h2>
-<p>The Git Common-Flow specification is authored
-by <a href="http://jimeh.me">Jim Myhrberg</a>.</p>
-<p>If you’d like to leave feedback,
-please <a href="https://github.com/jimeh/common-flow/issues">open an issue on GitHub</a>.</p>
-<h2 id="license">License</h2>
-<p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p> </article>  </div> </div> </div> </body></html> 
+</ol> </section> </article> </div> </div> </div> </section> <section id="faq" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0">  </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
+         text-gray-500 dark:text-neutral-500
+         border-t border-gray-200 dark:border-neutral-800"> <div class="section-container flex flex-col sm:flex-row
+           sm:justify-between sm:items-center gap-2"> <p>
+License:
+<a href="https://creativecommons.org/licenses/by/4.0/" class="hover:text-sky-600" target="_blank" rel="noopener noreferrer"> CC BY 4.0 </a> </p> <p> Git Common-Flow by
+<a href="https://jimeh.me/" class="hover:text-sky-600" target="_blank" rel="noopener noreferrer"> Jim Myhrberg </a> </p> </div> </footer>  <!-- Re-init theme on Astro page transitions --> <script type="module">document.addEventListener("astro:after-swap",()=>{const e=localStorage.getItem("theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;e==="dark"||e!=="light"&&t?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")});</script> </body> </html>
--- a/docs/spec/1.0.0-rc.3/index.html
+++ b/docs/spec/1.0.0-rc.3/index.html
@@ -1,46 +1,179 @@
-<!DOCTYPE html><html lang="en" data-astro-cid-jwirc66j> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/spec/1.0.0-rc.3/"><title>Git Common-Flow 1.0.0-rc.3 | Git Common Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Git Common-Flow 1.0.0-rc.3 | Git Common Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/spec/1.0.0-rc.3/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Git Common-Flow 1.0.0-rc.3 | Git Common Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><!-- Prevent flash of wrong theme --><script>
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="canonical" href="https://commonflow.org/spec/1.0.0-rc.3/"><title>Git Common-Flow 1.0.0-rc.3 | Git Common-Flow</title><meta name="description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta name="author" content="Jim Myhrberg"><!-- Open Graph --><meta property="og:title" content="Git Common-Flow 1.0.0-rc.3 | Git Common-Flow"><meta property="og:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><meta property="og:type" content="website"><meta property="og:url" content="https://commonflow.org/spec/1.0.0-rc.3/"><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Git Common-Flow 1.0.0-rc.3 | Git Common-Flow"><meta name="twitter:description" content="An attempt to gather a sensible selection of the most common usage patterns of git into a single and concise specification."><!-- Favicon --><link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- Prevent flash of wrong theme --><script>
      (function () {
-        const theme = localStorage.getItem("theme");
-        if (
-          theme === "dark" ||
-          (!theme &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches)
-        ) {
+        const mode = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (mode === "dark" || (mode !== "light" && prefersDark)) {
          document.documentElement.classList.add("dark");
        }
      })();
-    </script><link rel="stylesheet" href="/_astro/_version_.BDyAzQHc.css">
-<style>.spec-content h1{margin-bottom:.5em}.spec-content h2{margin-top:2em;margin-bottom:.75em;padding-bottom:.3em;border-bottom:1px solid #eee}.dark .spec-content h2{border-bottom-color:#333}.spec-content h3{margin-top:1.5em;margin-bottom:.5em}.spec-content p{margin-bottom:1em}.spec-content ul,.spec-content ol{margin-bottom:1em;padding-left:2em}.spec-content li{margin-bottom:.25em}.spec-content a{color:#1f8dd6;text-decoration:none}.spec-content a:hover{text-decoration:underline}.dark .spec-content a{color:#4da6e8}.spec-content img{max-width:100%;height:auto;margin:1em 0}.spec-content blockquote{margin:1em 0;padding-left:1em;border-left:4px solid #ddd;color:#666}.dark .spec-content blockquote{border-left-color:#444;color:#aaa}.spec-content hr{margin:2em 0;border:none;border-top:1px solid #eee}.dark .spec-content hr{border-top-color:#333}
-</style></head> <body data-astro-cid-jwirc66j> <div id="layout" data-astro-cid-jwirc66j> <a href="#menu" id="menuLink" class="menu-link" data-astro-cid-jyixok4n> <span data-astro-cid-jyixok4n></span> </a>  <script type="module">function c(){const e=document.getElementById("layout"),n=document.getElementById("menu"),t=document.getElementById("menuLink"),s=document.getElementById("main");function i(o){o.preventDefault(),e?.classList.toggle("active"),n?.classList.toggle("active"),t?.classList.toggle("active")}function a(){e?.classList.remove("active"),n?.classList.remove("active"),t?.classList.remove("active")}t?.addEventListener("click",i),s?.addEventListener("click",()=>{e?.classList.contains("active")&&a()})}c();document.addEventListener("astro:after-swap",c);</script> <div id="menu" data-astro-cid-ssfzsv2f> <div class="menu-inner" data-astro-cid-ssfzsv2f> <ul class="menu-list" data-astro-cid-ssfzsv2f> <li class="menu-label" data-astro-cid-ssfzsv2f>Versions:</li> <li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.5" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.5 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.4" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.4 </a> </li><li class="menu-item selected" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.3" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.3 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.2" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.2 </a> </li><li class="menu-item" data-astro-cid-ssfzsv2f> <a href="/spec/1.0.0-rc.1" class="menu-link-item" data-astro-cid-ssfzsv2f> 1.0.0-rc.1 </a> </li> </ul> </div> <div class="links" data-astro-cid-ssfzsv2f> <a href="https://github.com/jimeh/common-flow" aria-label="View on GitHub" class="github-link" data-astro-cid-ssfzsv2f> <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-ssfzsv2f> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839
-             9.504.5.092.682-.217.682-.483
-             0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
-             1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
-             2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951
-             0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65
-             0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004
-             1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546
-             1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028
-             2.688 0 3.848-2.339 4.695-4.566
-             4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012
-             2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22
-             6.484 17.522 2 12 2z" clip-rule="evenodd" data-astro-cid-ssfzsv2f></path> </svg> </a> <button id="theme-toggle" type="button" class="p-2 text-[color:var(--color-text-muted)] hover:text-white
-         transition-colors duration-200" aria-label="Toggle dark mode"> <!-- Sun icon (shown in dark mode) --> <svg id="sun-icon" class="hidden w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
-         6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
-         12a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> <!-- Moon icon (shown in light mode) --> <svg id="moon-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
-         9.003 0 008.354-5.646z"></path> </svg> </button> <script type="module">function c(){const d=document.getElementById("theme-toggle"),n=document.getElementById("sun-icon"),o=document.getElementById("moon-icon");function s(e){e?(n?.classList.remove("hidden"),o?.classList.add("hidden")):(n?.classList.add("hidden"),o?.classList.remove("hidden"))}function a(){const e=localStorage.getItem("theme");return e==="dark"||e==="light"?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function t(e){localStorage.setItem("theme",e),document.documentElement.classList.toggle("dark",e==="dark"),s(e==="dark")}const i=a();t(i),d?.addEventListener("click",()=>{const e=document.documentElement.classList.contains("dark");t(e?"light":"dark")}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||t(e.matches?"dark":"light")})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div>  <div id="main" data-astro-cid-jwirc66j> <div class="content" data-astro-cid-jwirc66j>  <article class="spec-content"> <h1 id="git-common-flow-100-rc3">Git Common-Flow 1.0.0-rc.3</h1>
-<img src="/spec/1.0.0-rc.3.svg" alt="Git Common-Flow 1.0.0-rc.3 diagram" width="100%">
-<h2 id="summary">Summary</h2>
-<p>Common-Flow is an attempt to gather a sensible selection of the most common
+    </script><link rel="stylesheet" href="/_astro/index.DF_wxGza.css"></head> <body class="min-h-screen">  <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
+         translate-y-[-100%] transition-transform duration-300
+         backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
+               text-gray-950 dark:text-neutral-50
+               hover:text-sky-600 transition-colors"> <span class="font-display font-bold text-lg tracking-tight">
+Git Common-Flow
+</span> </a> <div class="hidden md:block"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.3</span> <svg width="1em" height="1em" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <symbol id="ai:heroicons:chevron-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m19.5 8.25l-7.5 7.5l-7.5-7.5"/></symbol><use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.1 </a> </div> </div> <script type="module">function c(){document.querySelectorAll("[data-version-selector]").forEach(e=>{if(e.dataset.initialized)return;e.dataset.initialized="true";const t=e.querySelector("[data-version-trigger]"),a=e.querySelector("[data-version-dropdown]"),n=e.querySelector("[data-arrow-icon]");if(!t||!a)return;const l=()=>{a.dataset.open="true",t.setAttribute("aria-expanded","true"),n&&(n.style.transform="rotate(180deg)")},o=()=>{delete a.dataset.open,t.setAttribute("aria-expanded","false"),n&&(n.style.transform="")};t.addEventListener("click",r=>{r.stopPropagation();const u=a.dataset.open==="true";document.querySelectorAll("[data-version-dropdown][data-open]").forEach(s=>{delete s.dataset.open;const i=s.previousElementSibling;i?.setAttribute("aria-expanded","false");const d=i?.querySelector("[data-arrow-icon]");d&&(d.style.transform="")}),u?o():l()}),document.addEventListener("click",r=>{e.contains(r.target)||o()}),document.addEventListener("keydown",r=>{r.key==="Escape"&&a.dataset.open==="true"&&(o(),t.focus())})})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div> <!-- Desktop Navigation --> <nav class="hidden md:flex items-center gap-1"> <a href="#about" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="about"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:information-circle">   <symbol id="ai:heroicons:information-circle" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/></symbol><use href="#ai:heroicons:information-circle"></use>  </svg> About </a><a href="#spec" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="spec"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:document-text">   <symbol id="ai:heroicons:document-text" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"/></symbol><use href="#ai:heroicons:document-text"></use>  </svg> Spec </a><a href="#faq" class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="faq"> <svg width="1em" height="1em" class="w-4 h-4" data-icon="heroicons:question-mark-circle">   <symbol id="ai:heroicons:question-mark-circle" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712q-.308.268-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z"/></symbol><use href="#ai:heroicons:question-mark-circle"></use>  </svg> FAQ </a> </nav> <!-- Right side: Theme, GitHub --> <div class="flex items-center gap-3"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
+           text-gray-500 dark:text-neutral-500
+           hover:text-gray-950 dark:hover:text-neutral-50
+           hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle theme"> <svg width="1em" height="1em" data-theme-icon="light" class="hidden w-5 h-5" data-icon="heroicons:sun">   <symbol id="ai:heroicons:sun" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0a3.75 3.75 0 0 1 7.5 0"/></symbol><use href="#ai:heroicons:sun"></use>  </svg> <svg width="1em" height="1em" data-theme-icon="dark" class="hidden w-5 h-5" data-icon="heroicons:moon">   <symbol id="ai:heroicons:moon" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.752 15.002A9.7 9.7 0 0 1 18 15.75A9.75 9.75 0 0 1 8.25 6c0-1.33.266-2.597.748-3.752A9.75 9.75 0 0 0 3 11.25A9.75 9.75 0 0 0 12.75 21a9.75 9.75 0 0 0 9.002-5.998"/></symbol><use href="#ai:heroicons:moon"></use>  </svg> <svg width="1em" height="1em" data-theme-icon="auto" class="hidden w-5 h-5" data-icon="heroicons:computer-desktop">   <symbol id="ai:heroicons:computer-desktop" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/></symbol><use href="#ai:heroicons:computer-desktop"></use>  </svg> </button> <!-- Tooltip --> <div class="absolute left-1/2 -translate-x-1/2 top-full mt-2
+           px-2 py-1 text-xs font-medium whitespace-nowrap rounded-md shadow-sm
+           bg-gray-900 text-white dark:bg-white dark:text-gray-900
+           opacity-0 group-hover:opacity-100
+           transition-opacity duration-200 pointer-events-none"> <span data-tooltip-text="light" class="hidden">Light</span> <span data-tooltip-text="dark" class="hidden">Dark</span> <span data-tooltip-text="auto" class="hidden">System</span> </div> </div> <script type="module">function r(){const c=document.querySelectorAll("[data-theme-toggle]");function n(){const e=localStorage.getItem("theme");return e==="dark"||e==="light"||e==="auto"?e:"auto"}function i(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function d(e){return e==="auto"?i():e}function s(e){document.querySelectorAll("[data-theme-icon]").forEach(t=>{const a=t.dataset.themeIcon;t.classList.toggle("hidden",a!==e)}),document.querySelectorAll("[data-tooltip-text]").forEach(t=>{const a=t.dataset.tooltipText;t.classList.toggle("hidden",a!==e)})}function o(e){d(e)==="dark"?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),s(e)}function u(e){localStorage.setItem("theme",e),o(e)}function l(){const e=n();return e==="light"?"dark":e==="dark"?"auto":"light"}const f=n();o(f),c.forEach(e=>{e.dataset.initialized||(e.dataset.initialized="true",e.addEventListener("click",()=>{u(l())}))}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{n()==="auto"&&o("auto")})}r();document.addEventListener("astro:after-swap",r);</script> <a href="https://github.com/jimeh/common-flow" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="View on GitHub"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="simple-icons:github">   <symbol id="ai:simple-icons:github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></symbol><use href="#ai:simple-icons:github"></use>  </svg> </a> <!-- Mobile menu button --> <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg
+               text-gray-500 dark:text-neutral-500
+               hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle menu"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:bars-3">   <symbol id="ai:heroicons:bars-3" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></symbol><use href="#ai:heroicons:bars-3"></use>  </svg> </button> </div> </div> <!-- Mobile Navigation --> <nav id="mobile-nav" class="md:hidden hidden border-t border-gray-200 dark:border-neutral-800"> <div class="px-4 py-3 space-y-1 text-center"> <div class="py-2 flex justify-center"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.3</span> <svg width="1em" height="1em" viewBox="0 0 24 24" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.1 </a> </div> </div>  </div> <a href="#about" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="about"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:information-circle">   <use href="#ai:heroicons:information-circle"></use>  </svg> About </a><a href="#spec" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="spec"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:document-text">   <use href="#ai:heroicons:document-text"></use>  </svg> Spec </a><a href="#faq" class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600" data-nav-link data-section-id="faq"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-icon="heroicons:question-mark-circle">   <use href="#ai:heroicons:question-mark-circle"></use>  </svg> FAQ </a> </div> </nav> </header> <script type="module" src="/_astro/Header.astro_astro_type_script_index_0_lang.ClIJVJFM.js"></script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
+         px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
+           from-gray-100 to-gray-50
+           dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
+           bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
+           dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
+           bg-[size:60px_60px] bg-center
+           [-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
+           [mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 z-20 flex items-center justify-between
+           px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"> <span>v1.0.0-rc.3</span> <svg width="1em" height="1em" viewBox="0 0 24 24" data-arrow-icon="true" class="w-3.5 h-3.5 transition-transform duration-150" data-icon="heroicons:chevron-down">   <use href="#ai:heroicons:chevron-down"></use>  </svg> </button> <!-- Dropdown menu --> <div data-version-dropdown role="listbox" aria-label="Select version" class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"> <a href="/spec/1.0.0-rc.5" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.5 </a><a href="/spec/1.0.0-rc.4" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
+v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
+v1.0.0-rc.1 </a> </div> </div>  </div> <div class="flex items-center gap-2"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
+           text-gray-500 dark:text-neutral-500
+           hover:text-gray-950 dark:hover:text-neutral-50
+           hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle theme"> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="light" class="hidden w-5 h-5" data-icon="heroicons:sun">   <use href="#ai:heroicons:sun"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="dark" class="hidden w-5 h-5" data-icon="heroicons:moon">   <use href="#ai:heroicons:moon"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-theme-icon="auto" class="hidden w-5 h-5" data-icon="heroicons:computer-desktop">   <use href="#ai:heroicons:computer-desktop"></use>  </svg> </button> <!-- Tooltip --> <div class="absolute left-1/2 -translate-x-1/2 top-full mt-2
+           px-2 py-1 text-xs font-medium whitespace-nowrap rounded-md shadow-sm
+           bg-gray-900 text-white dark:bg-white dark:text-gray-900
+           opacity-0 group-hover:opacity-100
+           transition-opacity duration-200 pointer-events-none"> <span data-tooltip-text="light" class="hidden">Light</span> <span data-tooltip-text="dark" class="hidden">Dark</span> <span data-tooltip-text="auto" class="hidden">System</span> </div> </div>  <a href="https://github.com/jimeh/common-flow" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-white/50 dark:hover:bg-neutral-800/50" aria-label="View on GitHub"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5" data-icon="simple-icons:github">   <use href="#ai:simple-icons:github"></use>  </svg> </a> </div> </div> <!-- Main content --> <div class="relative z-10 w-full max-w-4xl mx-auto text-center"> <!-- Title --> <h1 class="animate-fade-in-up mb-4
+             text-gray-950 dark:text-neutral-50">
+Git Common-Flow
+</h1> <!-- Tagline --> <p class="animate-fade-in-up delay-100
+             text-lg sm:text-xl max-w-2xl mx-auto mb-8
+             text-gray-600 dark:text-neutral-400">
+A sensible git workflow for teams who ship
+</p> <!-- Version badge --> <div class="animate-fade-in-up delay-200 mb-10"> <span class="inline-flex items-center px-3 py-1 font-mono text-xs font-medium
+               rounded-full border
+               bg-gray-100 border-gray-200 text-gray-500
+               dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
+v1.0.0-rc.3 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
+             relative mx-auto mb-12 p-4 sm:p-8
+             bg-white dark:bg-neutral-900
+             rounded-2xl shadow-lg dark:shadow-none
+             border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.3.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
+               dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
+             flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
+About
+</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               bg-sky-600 text-white
+               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md">
+Read the Spec
+</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
+FAQ
+</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
+           animate-fade-in delay-700
+           text-gray-500 dark:text-neutral-500
+           hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down">   <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use>  </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
+                 text-gray-950 dark:text-neutral-50">
+Key Principles
+</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
 the <a href="http://scottchacon.com/2011/08/31/github-flow.html">original variant</a>
 of <a href="https://guides.github.com/introduction/flow/">GitHub Flow</a>, while taking
 into account how a lot of open source projects use git.</p>
 <p>In short, Common-Flow is essentially GitHub Flow with the addition of versioned
 releases, optional release branches, and without the requirement to deploy to
-production all the time.</p>
-<h2 id="terminology">Terminology</h2>
-<ul>
-<li><strong>Master Branch</strong> - Must be named “master”, must always have passing tests,
+production all the time.</p></div> </div> <!-- Feedback & License --> <div class="pt-8 border-t border-gray-200 dark:border-neutral-800"> <div class="grid sm:grid-cols-2 gap-8"> <div> <h4 class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500">
+Feedback
+</h4> <p class="text-gray-600 dark:text-neutral-400">
+Please  <a href="https://github.com/jimeh/common-flow/issues" class="text-sky-600 hover:text-sky-400" target="_blank" rel="noopener noreferrer">open an issue on GitHub</a>.
+</p> </div> <div> <h4 class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500">
+License
+</h4> <div class="text-gray-600 dark:text-neutral-400"><p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p></div> </div> </div> </div> </div> </div> </section> <section id="spec" class="py-20 sm:py-28"> <div class="section-container"> <div class="mb-12 text-center max-w-3xl mx-auto"> <h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> The complete Git Common-Flow specification </p> </div> <!-- Content with sidebar --> <div class="lg:flex lg:gap-8"> <!-- Sidebar --> <div class="lg:w-64 lg:flex-shrink-0"> <aside id="spec-sidebar" class="hidden lg:block lg:sticky lg:top-24 lg:self-start
+         lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto
+         lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-neutral-800"> <nav class="space-y-1 py-2"> <div class="text-xs font-semibold uppercase tracking-wider mb-4
+             text-gray-500 dark:text-neutral-500">
+Table of Contents
+</div> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-sidebar-link data-section-id="terminology">  <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-sidebar-link data-section-id="specification">  <span>Specification</span> </a><a href="#spec-tldr" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-tldr"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>TL;DR</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-the-master-branch"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>The Master Branch</span> </a><a href="#spec-change-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-change-branches"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Change Branches</span> </a><a href="#spec-pull-requests" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-pull-requests"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Pull Requests</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-versioning"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-releases"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Releases</span> </a><a href="#spec-release-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-release-branches"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Release Branches</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-bug-fixes-rollback"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 8. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-sidebar-link data-section-id="spec-git-best-practices"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 9. </span> <span>Git Best Practices</span> </a> </nav> </aside> <!-- Mobile floating button --> <button id="spec-toc-toggle" class="lg:hidden fixed bottom-6 right-6 z-40
+         w-12 h-12 rounded-full shadow-lg
+         bg-sky-600 text-white
+         flex items-center justify-center
+         hover:bg-sky-500
+         transition-all duration-200" aria-label="Jump to section"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:bars-3-bottom-left">   <symbol id="ai:heroicons:bars-3-bottom-left" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/></symbol><use href="#ai:heroicons:bars-3-bottom-left"></use>  </svg> </button> <!-- Mobile TOC drawer --> <div id="spec-toc-drawer" class="lg:hidden fixed inset-0 z-50 hidden" data-toc-drawer> <!-- Backdrop --> <div class="absolute inset-0 bg-black/50" data-toc-backdrop></div> <!-- Drawer --> <div class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
+           bg-gray-50 dark:bg-neutral-950
+           rounded-t-2xl shadow-xl p-6"> <div class="flex items-center justify-between mb-4"> <span class="text-sm font-semibold uppercase tracking-wider
+               text-gray-500 dark:text-neutral-500">
+Jump to Section
+</span> <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800" data-toc-close aria-label="Close"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="heroicons:x-mark">   <symbol id="ai:heroicons:x-mark" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></symbol><use href="#ai:heroicons:x-mark"></use>  </svg> </button> </div> <nav class="space-y-1"> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link>  <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link>  <span>Specification</span> </a><a href="#spec-tldr" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>TL;DR</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>The Master Branch</span> </a><a href="#spec-change-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Change Branches</span> </a><a href="#spec-pull-requests" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Pull Requests</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Releases</span> </a><a href="#spec-release-branches" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Release Branches</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 8. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 9. </span> <span>Git Best Practices</span> </a> </nav> </div> </div> <script type="module" src="/_astro/SpecSidebar.astro_astro_type_script_index_0_lang.BQBj5HuJ.js"></script> </div> <!-- Main content --> <div class="flex-1 min-w-0"> <article class="prose-spec"> <!-- Terminology --> <section id="terminology"> <h2>Terminology</h2> <ul>
+<li><strong>Master Branch</strong> - Must be named "master", must always have passing tests,
 and is not guaranteed to always work in production environments.</li>
 <li><strong>Change Branches</strong> - Any branch that introduces changes like a new feature, a
 bug fix, etc.</li>
@@ -57,36 +190,34 @@ environments. Consists of a version bump commit, and a git tag named according
 to the new version string placed on said commit.</li>
 <li><strong>Release Branches</strong> - Used both for short-term preparations of a release, and
 also for long-term maintenance of older version.</li>
-</ul>
-<h2 id="git-common-flow-specification-common-flow">Git Common-Flow Specification (Common-Flow)</h2>
-<p>The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
-“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be
+</ul> </section> <!-- Main specification --> <section id="specification"> <h2>Specification</h2> <p>The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
+"SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in <a href="https://tools.ietf.org/html/rfc2119">RFC 2119</a>.</p>
 <ol>
-<li>TL;DR
+<li id="spec-tldr">TL;DR
 <ol>
-<li>Don’t break the master branch.</li>
+<li>Don't break the master branch.</li>
 <li>A release is a git tag.</li>
 </ol>
 </li>
-<li>The Master Branch
+<li id="spec-the-master-branch">The Master Branch
 <ol>
-<li>A branch named “master” MUST exist and it MUST be referred to as the
-“master branch”.</li>
+<li>A branch named "master" MUST exist and it MUST be referred to as the
+"master branch".</li>
 <li>The master branch MUST always be in a non-broken state with its test
 suite passing.</li>
 <li>The master branch IS NOT guaranteed to always work in production
 environments. Despite test suites passing it may at times contain
 unfinished work. Only releases may be considered safe for production use.</li>
-<li>The master branch SHOULD always be in a “as near as possibly ready for
-release/production” state to reduce any friction with creating a new
+<li>The master branch SHOULD always be in a "as near as possibly ready for
+release/production" state to reduce any friction with creating a new
 release.</li>
 </ol>
 </li>
-<li>Change Branches
+<li id="spec-change-branches">Change Branches
 <ol>
 <li>Each change (feature, bugfix, etc.) MUST be performed on separate
-branches that SHOULD be referred to as “change branches”. All change
+branches that SHOULD be referred to as "change branches". All change
 branches MUST have descriptive names. It is RECOMMENDED that you commit
 often locally, and you SHOULD regularly push your work to the same named
 branch on the remote server.</li>
@@ -94,21 +225,21 @@ branch on the remote server.</li>
 change. You MUST NOT include multiple unrelated changes into a single
 change branch.</li>
 <li>When a change branch is created, the branch that it is created from
-SHOULD be referred to as the “source branch”. Each change branch also
-needs a designated “merge target” branch, typically this will be the same
+SHOULD be referred to as the "source branch". Each change branch also
+needs a designated "merge target" branch, typically this will be the same
 as the source branch.</li>
 <li>Change branches MUST be regularly updated with any changes from their
 source branch. This MUST be done by rebasing the change branch on top of
 the source branch.</li>
 <li>After rebasing a change branch on top of its source branch you MUST push
 the change branch to the remote server. This will require you to do a
-force push, and you SHOULD use the “—force-with-lease” git push option.</li>
+force push, and you SHOULD use the "--force-with-lease" git push option.</li>
 </ol>
 </li>
-<li>Pull Requests
+<li id="spec-pull-requests">Pull Requests
 <ol>
-<li>To merge a change branch into its merge target, you MUST open a “pull
-request” (or equivalent) so others can review and approve your changes.</li>
+<li>To merge a change branch into its merge target, you MUST open a "pull
+request" (or equivalent) so others can review and approve your changes.</li>
 <li>A pull request MUST only be merged when the change branch is up-to-date
 with its source branch, the test suite is passing, and you and others are
 happy with the change. This is especially important if the merge target
@@ -118,48 +249,48 @@ others, the RECOMMENDED way to do so is by creating a pull request and
 discuss the changes with others there.</li>
 </ol>
 </li>
-<li>Versioning
+<li id="spec-versioning">Versioning
 <ol>
 <li>The project MUST have its version hard-coded somewhere in the
-code-base. It is RECOMMENDED that this is done in a file called “VERSION”
+code-base. It is RECOMMENDED that this is done in a file called "VERSION"
 located in the root of the project.</li>
-<li>If you are using a “VERSION” file in the root of the project, this MUST
+<li>If you are using a "VERSION" file in the root of the project, this MUST
 only contain the exact version string.</li>
 <li>The version string SHOULD follow the Semantic Versioning
 (<a href="http://semver.org/">http://semver.org/</a>) format. Use of Semantic Versioning is OPTIONAL,
-but the version string MUST NOT have a “v” prefix. For example “v2.11.4”
-is bad, and “2.11.4” is good.</li>
+but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
+is bad, and "2.11.4" is good.</li>
 </ol>
 </li>
-<li>Releases
+<li id="spec-releases">Releases
 <ol>
-<li>To create a new release, you MUST create a “version bump” commit which
+<li>To create a new release, you MUST create a "version bump" commit which
 changes the hard-coded version string of the project. The version bump
 commit MUST have a git tag created on it and named as the exact version
 string.</li>
 <li>If you are not using a release branch, then the version bump commit MUST
 be created directly on the master branch.</li>
-<li>The version bump commit MUST have a commit message title of “Bump version
-to VERSION”. For example, if the new version string is “2.11.4”, the
-first line of the commit message MUST read: “Bump version to 2.11.4”</li>
+<li>The version bump commit MUST have a commit message title of "Bump version
+to VERSION". For example, if the new version string is "2.11.4", the
+first line of the commit message MUST read: "Bump version to 2.11.4"</li>
 <li>The release tag on the version bump commit MUST be named exactly the same
 as the version string. The tag name can OPTIONALLY be prefixed with
-“v”. For example the tag name can be either “2.11.4” or “v2.11.4”. You
-MUST not use a mix of “v” prefixed and non-prefixed tags. Pick one form
+"v". For example the tag name can be either "2.11.4" or "v2.11.4". You
+MUST not use a mix of "v" prefixed and non-prefixed tags. Pick one form
 and stick to it.</li>
 <li>It is RECOMMENDED that release tags are lightweight tags, but you can
 OPTIONALLY use annotated tags if you want to include changelog
 information in the release tag itself.</li>
 <li>If you use annotated release tags, the first line of the annotation MUST
-read “Release VERSION”. For example for version “2.11.4” the first line
-of the tag annotation would read “Release 2.11.4”. The second line must
+read "Release VERSION". For example for version "2.11.4" the first line
+of the tag annotation would read "Release 2.11.4". The second line must
 be blank, and the changelog MUST start on the third line.</li>
 </ol>
 </li>
-<li>Release Branches
+<li id="spec-release-branches">Release Branches
 <ol>
-<li>Any branch that has a name starting with “release-” SHOULD be referred to
-as a “release branch”.</li>
+<li>Any branch that has a name starting with "release-" SHOULD be referred to
+as a "release branch".</li>
 <li>Use of release branches is OPTIONAL.</li>
 <li>Changes in a release branch SHOULD typically come from work being
 done against the master branch. Meaning changes SHOULD only trickle
@@ -173,8 +304,8 @@ branch in the first place. One exception to this is version bump commits.</li>
 <li>A short-term release branch is RECOMMENDED if there is a lengthy
 pre-release verification process to avoid a code freeze on the master
 branch.</li>
-<li>MUST have a name of “release-VERSION”. For example for version
-“2.11.4” the release branch name MUST be “release-2.11.4”.</li>
+<li>MUST have a name of "release-VERSION". For example for version
+"2.11.4" the release branch name MUST be "release-2.11.4".</li>
 <li>When using a short-term release branch, the version bump commit and
 release tag MUST be made directly on the release branch itself.</li>
 <li>Only very minor changes should be performed on a short-term release
@@ -194,21 +325,21 @@ branch. Typically this is useful when you need to create a new
 maintenance release for a older version.</li>
 <li>The branch name MUST have a non-specific version number. For example
 a long-term release branch for creating new 2.9.x releases would be
-named “release-2.9”.</li>
+named "release-2.9".</li>
 <li>To create a new release from a long-term release branch, you MUST
 create a version bump commit and release tag directly on the release
 branch.</li>
 <li>A long-term release branch MUST be created from the relevant release
 tag. For example if the master branch is on version 2.11.4 and there
 is a security fix for all 2.9.x releases, the latest of which is
-“2.9.7”. Create a new branch called “release-2.9” off of the “2.9.7”
+"2.9.7". Create a new branch called "release-2.9" off of the "2.9.7"
 release tag. The security fix release will then end up being version
-“2.9.8”.</li>
+"2.9.8".</li>
 </ol>
 </li>
 </ol>
 </li>
-<li>Bug Fixes &#x26; Rollback
+<li id="spec-bug-fixes-rollback">Bug Fixes &#x26; Rollback
 <ol>
 <li>You MUST NOT under any circumstances force push to the master branch.</li>
 <li>If a change branch which has been merged into the master branch is found
@@ -221,36 +352,35 @@ merge commit itself. Effectively creating a new commit that reverses all
 the relevant changes.</li>
 </ol>
 </li>
-<li>Git Best Practices
+<li id="spec-git-best-practices">Git Best Practices
 <ol>
 <li>All commit messages SHOULD follow the Commit Guidelines and format from
 the official git
 documentation:
 <a href="https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project#_commit_guidelines">https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project#_commit_guidelines</a></li>
-<li>You SHOULD never blindly commit all changes with “git commit -a”. It is
-RECOMMENDED you use “git add -i” to add individual changes to the staging
+<li>You SHOULD never blindly commit all changes with "git commit -a". It is
+RECOMMENDED you use "git add -i" to add individual changes to the staging
 area so you are fully aware of what you are committing.</li>
-<li>You SHOULD always use “—force-with-lease” when doing a force push. The
-regular “—force” option is dangerous and destructive. More
+<li>You SHOULD always use "--force-with-lease" when doing a force push. The
+regular "--force" option is dangerous and destructive. More
 information:
 <a href="https://developer.atlassian.com/blog/2015/04/force-with-lease/">https://developer.atlassian.com/blog/2015/04/force-with-lease/</a></li>
 <li>You SHOULD understand and be comfortable with
 rebasing: <a href="https://git-scm.com/book/en/v2/Git-Branching-Rebasing">https://git-scm.com/book/en/v2/Git-Branching-Rebasing</a></li>
-<li>It is RECOMMENDED that you always do “git pull —rebase” instead of “git
-pull” to avoid unnecessary merge commits. You can make this the default
-behavior of “git pull” with “git config —global pull.rebase true”.</li>
-<li>It is RECOMMENDED that all branches be merged using “git merge —no-ff”.
+<li>It is RECOMMENDED that you always do "git pull --rebase" instead of "git
+pull" to avoid unnecessary merge commits. You can make this the default
+behavior of "git pull" with "git config --global pull.rebase true".</li>
+<li>It is RECOMMENDED that all branches be merged using "git merge --no-ff".
 This makes sure the reference to the original branch is kept in the
 commits, allows one to revert a merge by reverting a single merge commit,
 and creates a merge commit to mark the integration of the branch with
 master.</li>
 </ol>
 </li>
-</ol>
-<h2 id="about">About</h2>
-<p>The Git Common-Flow specification is authored
-by <a href="http://jimeh.me">Jim Myhrberg</a>.</p>
-<p>If you’d like to leave feedback,
-please <a href="https://github.com/jimeh/common-flow/issues">open an issue on GitHub</a>.</p>
-<h2 id="license">License</h2>
-<p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p> </article>  </div> </div> </div> </body></html> 
+</ol> </section> </article> </div> </div> </div> </section> <section id="faq" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0">  </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
+         text-gray-500 dark:text-neutral-500
+         border-t border-gray-200 dark:border-neutral-800"> <div class="section-container flex flex-col sm:flex-row
+           sm:justify-between sm:items-center gap-2"> <p>
+License:
+<a href="https://creativecommons.org/licenses/by/4.0/" class="hover:text-sky-600" target="_blank" rel="noopener noreferrer"> CC BY 4.0 </a> </p> <p> Git Common-Flow by
+<a href="https://jimeh.me/" class="hover:text-sky-600" target="_blank" rel="noopener noreferrer"> Jim Myhrberg </a> </p> </div> </footer>  <!-- Re-init theme on Astro page transitions --> <script type="module">document.addEventListener("astro:after-swap",()=>{const e=localStorage.getItem("theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;e==="dark"||e!=="light"&&t?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")});</script> </body> </html>
--- a/docs/spec/1.0.0-rc.4/index.html
+++ b/docs/spec/1.0.0-rc.4/index.html
--- a/docs/spec/1.0.0-rc.5/index.html
+++ b/docs/spec/1.0.0-rc.5/index.html
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,21 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import astro from "eslint-plugin-astro";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...astro.configs.recommended,
+  {
+    ignores: ["docs/**", ".astro/**"],
+  },
+  {
+    rules: {
+      // Allow unused vars prefixed with _
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+    },
+  },
+);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,23 +1,43 @@
 {
  "name": "commonflow-org",
  "type": "module",
-  "version": "0.0.1",
+  "version": "2.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
-    "update": "tsx scripts/update-specs.ts",
+    "check": "astro check",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "update": "bun scripts/update-specs.ts",
    "astro": "astro"
  },
  "dependencies": {
-    "@astrojs/sitemap": "^3.2.1",
-    "astro": "^5.1.1"
+    "@astrojs/sitemap": "^3.6.1",
+    "@fontsource-variable/bricolage-grotesque": "^5.2.10",
+    "@fontsource-variable/dm-sans": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@iconify-json/heroicons": "^1.2.3",
+    "@iconify-json/simple-icons": "^1.2.65",
+    "astro": "^5.16.8",
+    "astro-icon": "^1.1.5",
+    "rehype-stringify": "^10.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "unified": "^11.0.5"
  },
  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
+    "@astrojs/check": "^0.9.6",
+    "@eslint/js": "^9.39.2",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
+    "eslint": "^9.39.2",
+    "eslint-plugin-astro": "^1.5.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-astro": "^0.14.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.52.0"
  }
 }
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Main horizontal line -->
+  <path d="M 4 10 L 28 10" fill="none" stroke="currentColor" stroke-width="2"/>
+
+  <!-- Branch line: down from left, curve, up to right -->
+  <path d="M 8 10 L 8 16 Q 8 22 16 22 Q 24 22 24 16 L 24 10"
+        fill="none" stroke="currentColor" stroke-width="2"/>
+
+  <!-- Left dot on main line -->
+  <circle cx="8" cy="10" r="3" fill="currentColor"/>
+
+  <!-- Right dot on main line -->
+  <circle cx="24" cy="10" r="3" fill="currentColor"/>
+
+  <!-- Middle dot on branch -->
+  <circle cx="16" cy="22" r="3" fill="currentColor"/>
+</svg>
--- a/scripts/update-specs.ts
+++ b/scripts/update-specs.ts
@@ -1,8 +1,6 @@
 /**
 * Fetches spec documents and diagrams from the common-flow GitHub repo
 * and writes them to the appropriate locations for Astro to consume.
- *
- * Equivalent to the Jekyll Rakefile's `rake update` task.
 */

 import * as fs from "node:fs";
@@ -38,7 +36,7 @@ version: {{version}}

 function buildFileUrl(
  fileType: "document" | "diagram",
-  version: string
+  version: string,
 ): string {
  const file = config.update.files[fileType];
  return config.update.urlTemplate
@@ -151,7 +149,7 @@ async function main(): Promise<void> {
    }
  }

-  console.log("\nDone! Run `npm run build` to rebuild the site.");
+  console.log("\nDone! Run `bun run build` to rebuild the site.");
 }

 main();
--- a/src/components/AboutSection.astro
+++ b/src/components/AboutSection.astro
@@ -0,0 +1,72 @@
+---
+import SectionHeader from "./SectionHeader.astro";
+import { config } from "../config";
+
+interface Props {
+  introduction: string;
+  summary: string;
+  license: string;
+}
+
+const { introduction, summary, license } = Astro.props;
+---
+
+<section id="about" class="py-20 sm:py-28">
+  <div class="section-container">
+    <div class="max-w-3xl mx-auto">
+      <SectionHeader
+        title="About Common-Flow"
+        subtitle="A practical git workflow that combines the best of GitHub Flow with versioned releases"
+      />
+
+      <!-- Introduction -->
+      <div class="prose-spec mb-12" set:html={introduction} />
+
+      <!-- Summary as feature cards -->
+      <div class="mb-16">
+        <h3
+          class="text-xl font-display font-semibold mb-6
+                 text-gray-950 dark:text-neutral-50"
+        >
+          Key Principles
+        </h3>
+        <div class="prose-spec" set:html={summary} />
+      </div>
+
+      <!-- Feedback & License -->
+      <div class="pt-8 border-t border-gray-200 dark:border-neutral-800">
+        <div class="grid sm:grid-cols-2 gap-8">
+          <div>
+            <h4
+              class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500"
+            >
+              Feedback
+            </h4>
+            <p class="text-gray-600 dark:text-neutral-400">
+              Please{" "}
+              <a
+                href={`${config.repoUrl}/issues`}
+                class="text-sky-600 hover:text-sky-400"
+                target="_blank"
+                rel="noopener noreferrer">open an issue on GitHub</a
+              >.
+            </p>
+          </div>
+          <div>
+            <h4
+              class="text-sm font-semibold uppercase tracking-wider mb-3
+                     text-gray-500 dark:text-neutral-500"
+            >
+              License
+            </h4>
+            <div
+              class="text-gray-600 dark:text-neutral-400"
+              set:html={license}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
--- a/src/components/FAQSection.astro
+++ b/src/components/FAQSection.astro
@@ -0,0 +1,92 @@
+---
+import { Icon } from "astro-icon/components";
+import SectionHeader from "./SectionHeader.astro";
+import type { FAQItem } from "../utils/parseSpecContent";
+
+interface Props {
+  items: FAQItem[];
+}
+
+const { items } = Astro.props;
+---
+
+<section id="faq" class="py-20 sm:py-28">
+  <div class="section-container">
+    <div class="max-w-3xl mx-auto">
+      <SectionHeader
+        title="FAQ"
+        subtitle="Common questions about Git Common-Flow"
+      />
+
+      <!-- FAQ Items -->
+      <div class="space-y-0">
+        {
+          items.map((item) => (
+            <div
+              class="border-b border-gray-200 dark:border-neutral-800"
+              data-faq-item
+            >
+              <button
+                class="flex justify-between items-center w-full py-6 text-left
+                       font-display text-lg font-semibold cursor-pointer
+                       transition-colors
+                       text-gray-950 dark:text-neutral-50
+                       hover:text-sky-600"
+                aria-expanded="false"
+                data-faq-trigger
+              >
+                <span class="pr-4">{item.question}</span>
+                <Icon
+                  name="heroicons:chevron-down"
+                  class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
+                  data-faq-icon
+                />
+              </button>
+              <div
+                class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
+                data-faq-content
+              >
+                <div class="overflow-hidden">
+                  <div
+                    class="pb-6 text-gray-600 dark:text-neutral-400 prose-spec"
+                    set:html={item.answer}
+                  />
+                </div>
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  function initFAQ() {
+    const items = document.querySelectorAll("[data-faq-item]");
+
+    items.forEach((item) => {
+      const trigger = item.querySelector("[data-faq-trigger]");
+      const content = item.querySelector("[data-faq-content]");
+      const icon = item.querySelector("[data-faq-icon]");
+
+      if (!trigger || !content || !icon) return;
+
+      trigger.addEventListener("click", () => {
+        const isExpanded = trigger.getAttribute("aria-expanded") === "true";
+
+        // Toggle current item
+        trigger.setAttribute("aria-expanded", isExpanded ? "false" : "true");
+        content.classList.toggle("grid-rows-[1fr]", !isExpanded);
+        content.classList.toggle("grid-rows-[0fr]", isExpanded);
+        icon.classList.toggle("rotate-180", !isExpanded);
+      });
+    });
+  }
+
+  // Initialize on load
+  initFAQ();
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener("astro:after-swap", initFAQ);
+</script>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -0,0 +1,37 @@
+---
+import { config } from "../config";
+---
+
+<footer
+  class="pt-12 pb-6 my-28 text-sm
+         text-gray-500 dark:text-neutral-500
+         border-t border-gray-200 dark:border-neutral-800"
+>
+  <div
+    class="section-container flex flex-col sm:flex-row
+           sm:justify-between sm:items-center gap-2"
+  >
+    <p>
+      License:
+      <a
+        href={config.license.url}
+        class="hover:text-sky-600"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {config.license.name}
+      </a>
+    </p>
+    <p>
+      {config.title} by
+      <a
+        href={config.authorUrl}
+        class="hover:text-sky-600"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {config.author}
+      </a>
+    </p>
+  </div>
+</footer>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -0,0 +1,187 @@
+---
+import { Icon } from "astro-icon/components";
+import VersionSelector from "./VersionSelector.astro";
+import ThemeToggle from "./ThemeToggle.astro";
+import { config } from "../config";
+
+interface Props {
+  version: string;
+}
+
+const { version } = Astro.props;
+
+const navItems = [
+  { id: "about", label: "About", icon: "heroicons:information-circle" },
+  { id: "spec", label: "Spec", icon: "heroicons:document-text" },
+  { id: "faq", label: "FAQ", icon: "heroicons:question-mark-circle" },
+];
+---
+
+<header
+  id="site-header"
+  class="fixed top-0 inset-x-0 z-50 border-b border-transparent
+         translate-y-[-100%] transition-transform duration-300
+         backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"
+>
+  <div
+    class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
+  >
+    <!-- Logo / Title + Version -->
+    <div class="flex items-center gap-3">
+      <a
+        href="#hero"
+        class="flex items-center gap-3 no-underline
+               text-gray-950 dark:text-neutral-50
+               hover:text-sky-600 transition-colors"
+      >
+        <span class="font-display font-bold text-lg tracking-tight">
+          Git Common-Flow
+        </span>
+      </a>
+      <div class="hidden md:block">
+        <VersionSelector
+          currentVersion={version}
+          versions={Array.from(config.versions)}
+        />
+      </div>
+    </div>
+
+    <!-- Desktop Navigation -->
+    <nav class="hidden md:flex items-center gap-1">
+      {
+        navItems.map((item) => (
+          <a
+            href={`#${item.id}`}
+            class="nav-link inline-flex items-center gap-1.5 px-4 py-2 text-sm
+                   font-medium rounded-lg transition-colors cursor-pointer
+                   text-gray-600 dark:text-neutral-400
+                   hover:bg-gray-100 hover:text-gray-950
+                   dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
+            data-nav-link
+            data-section-id={item.id}
+          >
+            <Icon name={item.icon} class="w-4 h-4" />
+            {item.label}
+          </a>
+        ))
+      }
+    </nav>
+
+    <!-- Right side: Theme, GitHub -->
+    <div class="flex items-center gap-3">
+      <ThemeToggle />
+
+      <a
+        href={config.repoUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-gray-100 dark:hover:bg-neutral-800"
+        aria-label="View on GitHub"
+      >
+        <Icon name="simple-icons:github" class="w-5 h-5" />
+      </a>
+
+      <!-- Mobile menu button -->
+      <button
+        id="mobile-menu-btn"
+        class="md:hidden p-2 rounded-lg
+               text-gray-500 dark:text-neutral-500
+               hover:bg-gray-100 dark:hover:bg-neutral-800"
+        aria-label="Toggle menu"
+      >
+        <Icon name="heroicons:bars-3" class="w-5 h-5" />
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile Navigation -->
+  <nav
+    id="mobile-nav"
+    class="md:hidden hidden border-t border-gray-200 dark:border-neutral-800"
+  >
+    <div class="px-4 py-3 space-y-1 text-center">
+      <div class="py-2 flex justify-center">
+        <VersionSelector
+          currentVersion={version}
+          versions={Array.from(config.versions)}
+        />
+      </div>
+      {
+        navItems.map((item) => (
+          <a
+            href={`#${item.id}`}
+            class="nav-link flex items-center justify-center gap-1.5 py-2
+                   text-gray-600 dark:text-neutral-400 hover:text-sky-600"
+            data-nav-link
+            data-section-id={item.id}
+          >
+            <Icon name={item.icon} class="w-4 h-4" />
+            {item.label}
+          </a>
+        ))
+      }
+    </div>
+  </nav>
+</header>
+
+<script>
+  import { initActiveSectionTracker } from "../scripts/activeSectionTracker";
+
+  function initHeader() {
+    const header = document.getElementById("site-header");
+    const hero = document.getElementById("hero");
+    const mobileMenuBtn = document.getElementById("mobile-menu-btn");
+    const mobileNav = document.getElementById("mobile-nav");
+
+    if (!header || !hero) return;
+
+    // Show/hide header based on scroll position
+    // Show header once scrolled down by the navbar height (64px)
+    const navbarHeight = 64;
+
+    function updateHeaderVisibility() {
+      if (!header) return;
+      if (window.scrollY >= navbarHeight) {
+        header.classList.remove("translate-y-[-100%]", "border-transparent");
+        header.classList.add("border-gray-200", "dark:border-neutral-800");
+      } else {
+        header.classList.add("translate-y-[-100%]", "border-transparent");
+        header.classList.remove("border-gray-200", "dark:border-neutral-800");
+      }
+    }
+
+    window.addEventListener("scroll", updateHeaderVisibility, {
+      passive: true,
+    });
+    updateHeaderVisibility();
+
+    // Mobile menu toggle
+    if (mobileMenuBtn && mobileNav) {
+      mobileMenuBtn.addEventListener("click", () => {
+        mobileNav.classList.toggle("hidden");
+      });
+
+      // Close menu when clicking a link
+      mobileNav.querySelectorAll("a").forEach((link) => {
+        link.addEventListener("click", () => {
+          mobileNav.classList.add("hidden");
+        });
+      });
+    }
+
+    // Active section tracking for nav links
+    initActiveSectionTracker({
+      linkSelector: "[data-nav-link]",
+      defaultToFirst: false,
+    });
+  }
+
+  // Initialize on load
+  initHeader();
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener("astro:after-swap", initHeader);
+</script>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -0,0 +1,162 @@
+---
+import { Icon } from "astro-icon/components";
+import VersionSelector from "./VersionSelector.astro";
+import ThemeToggle from "./ThemeToggle.astro";
+import { config } from "../config";
+
+interface Props {
+  version: string;
+  svgPath: string;
+}
+
+const { version, svgPath } = Astro.props;
+---
+
+<section
+  id="hero"
+  class="relative min-h-[75vh] flex flex-col items-center justify-center
+         px-6 pt-16 pb-24 overflow-hidden"
+>
+  <!-- Background gradient/texture -->
+  <div
+    class="absolute inset-0 bg-gradient-to-b
+           from-gray-100 to-gray-50
+           dark:from-neutral-900 dark:to-neutral-950"
+  >
+  </div>
+
+  <!-- Subtle grid pattern with fade -->
+  <div
+    class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
+           bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
+           dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
+           bg-[size:60px_60px] bg-center
+           [-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
+           [mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"
+  >
+  </div>
+
+  <!-- Top bar with version & theme -->
+  <div
+    class="absolute top-0 inset-x-0 z-20 flex items-center justify-between
+           px-6 py-4 animate-fade-in-down"
+  >
+    <div class="flex items-center gap-3">
+      <VersionSelector
+        currentVersion={version}
+        versions={Array.from(config.versions)}
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <ThemeToggle />
+      <a
+        href={config.repoUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="p-2 rounded-lg transition-colors
+               text-gray-500 dark:text-neutral-500
+               hover:text-gray-950 dark:hover:text-neutral-50
+               hover:bg-white/50 dark:hover:bg-neutral-800/50"
+        aria-label="View on GitHub"
+      >
+        <Icon name="simple-icons:github" class="w-5 h-5" />
+      </a>
+    </div>
+  </div>
+
+  <!-- Main content -->
+  <div class="relative z-10 w-full max-w-4xl mx-auto text-center">
+    <!-- Title -->
+    <h1
+      class="animate-fade-in-up mb-4
+             text-gray-950 dark:text-neutral-50"
+    >
+      Git Common-Flow
+    </h1>
+
+    <!-- Tagline -->
+    <p
+      class="animate-fade-in-up delay-100
+             text-lg sm:text-xl max-w-2xl mx-auto mb-8
+             text-gray-600 dark:text-neutral-400"
+    >
+      A sensible git workflow for teams who ship
+    </p>
+
+    <!-- Version badge -->
+    <div class="animate-fade-in-up delay-200 mb-10">
+      <span
+        class="inline-flex items-center px-3 py-1 font-mono text-xs font-medium
+               rounded-full border
+               bg-gray-100 border-gray-200 text-gray-500
+               dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400"
+      >
+        v{version}
+      </span>
+    </div>
+
+    <!-- SVG Diagram -->
+    <div
+      class="animate-fade-in-up delay-300
+             relative mx-auto mb-12 p-4 sm:p-8
+             bg-white dark:bg-neutral-900
+             rounded-2xl shadow-lg dark:shadow-none
+             border border-gray-200 dark:border-neutral-800"
+    >
+      <img
+        src={svgPath}
+        alt="Git Common-Flow diagram"
+        class="w-full h-auto max-w-3xl mx-auto
+               dark:invert dark:hue-rotate-180 dark:contrast-90"
+      />
+    </div>
+
+    <!-- Navigation links -->
+    <nav
+      class="animate-fade-in-up delay-400
+             flex flex-wrap items-center justify-center gap-4"
+    >
+      <a
+        href="#about"
+        class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
+      >
+        About
+      </a>
+      <a
+        href="#spec"
+        class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               bg-sky-600 text-white
+               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
+      >
+        Read the Spec
+      </a>
+      <a
+        href="#faq"
+        class="inline-flex items-center justify-center gap-2 px-6 py-3
+               text-base font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-neutral-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
+      >
+        FAQ
+      </a>
+    </nav>
+  </div>
+
+  <!-- Scroll indicator -->
+  <a
+    href="#about"
+    class="absolute bottom-8 left-1/2 -translate-x-1/2
+           animate-fade-in delay-700
+           text-gray-500 dark:text-neutral-500
+           hover:text-sky-600 transition-colors"
+    aria-label="Scroll to content"
+  >
+    <Icon name="heroicons:arrow-down" class="w-6 h-6 animate-bounce-subtle" />
+  </a>
+</section>
--- a/src/components/MenuToggle.astro
+++ b/src/components/MenuToggle.astro
@@ -1,100 +0,0 @@
---
-// Mobile hamburger menu toggle button
---
-
-<a href="#menu" id="menuLink" class="menu-link">
-  <span></span>
-</a>
-
-<style>
-  .menu-link {
-    position: fixed;
-    display: block;
-    top: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.7);
-    font-size: 10px;
-    z-index: 10;
-    width: 2em;
-    height: auto;
-    padding: 2.1em 1.6em;
-    transition: all 0.2s ease-out;
-  }
-
-  .menu-link:hover,
-  .menu-link:focus {
-    background: #000;
-  }
-
-  .menu-link span {
-    position: relative;
-    display: block;
-  }
-
-  .menu-link span,
-  .menu-link span:before,
-  .menu-link span:after {
-    background-color: #fff;
-    width: 100%;
-    height: 0.2em;
-  }
-
-  .menu-link span:before,
-  .menu-link span:after {
-    position: absolute;
-    margin-top: -0.6em;
-    content: " ";
-  }
-
-  .menu-link span:after {
-    margin-top: 0.6em;
-  }
-
-  /* Desktop: hide toggle and position at sidebar edge */
-  @media (min-width: 48em) {
-    .menu-link {
-      left: 150px;
-      display: none;
-    }
-  }
-
-  /* When menu is active, move toggle */
-  :global(#layout.active) .menu-link {
-    left: 150px;
-  }
-</style>
-
-<script>
-  function initMenuToggle() {
-    const layout = document.getElementById("layout");
-    const menu = document.getElementById("menu");
-    const menuLink = document.getElementById("menuLink");
-    const main = document.getElementById("main");
-
-    function toggleMenu(e: Event) {
-      e.preventDefault();
-      layout?.classList.toggle("active");
-      menu?.classList.toggle("active");
-      menuLink?.classList.toggle("active");
-    }
-
-    function closeMenu() {
-      layout?.classList.remove("active");
-      menu?.classList.remove("active");
-      menuLink?.classList.remove("active");
-    }
-
-    menuLink?.addEventListener("click", toggleMenu);
-    main?.addEventListener("click", () => {
-      if (layout?.classList.contains("active")) {
-        closeMenu();
-      }
-    });
-  }
-
-  // Run on initial load
-  initMenuToggle();
-
-  // Re-run on Astro page transitions
-  document.addEventListener("astro:after-swap", initMenuToggle);
-</script>
--- a/src/components/SectionHeader.astro
+++ b/src/components/SectionHeader.astro
@@ -0,0 +1,16 @@
+---
+interface Props {
+  title: string;
+  subtitle: string;
+  class?: string;
+}
+
+const { title, subtitle, class: className } = Astro.props;
+---
+
+<div class:list={["mb-12 text-center", className]}>
+  <h2 class="text-3xl sm:text-4xl mb-4">{title}</h2>
+  <p class="text-lg text-gray-600 dark:text-neutral-400">
+    {subtitle}
+  </p>
+</div>
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -1,163 +0,0 @@
---
-import { config } from "../config";
-import ThemeToggle from "./ThemeToggle.astro";
-
-interface Props {
-  currentVersion?: string;
-}
-
-const { currentVersion } = Astro.props;
---
-
-<div id="menu">
-  <div class="menu-inner">
-    <ul class="menu-list">
-      <li class="menu-label">Versions:</li>
-      {
-        config.versions.map((version) => (
-          <li
-            class:list={[
-              "menu-item",
-              { selected: version === currentVersion },
-            ]}
-          >
-            <a href={`/spec/${version}`} class="menu-link-item">
-              {version}
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  </div>
-  <div class="links">
-    <a
-      href={config.repoUrl}
-      aria-label="View on GitHub"
-      class="github-link"
-    >
-      <svg
-        class="w-12 h-12"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839
-             9.504.5.092.682-.217.682-.483
-             0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
-             1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
-             2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951
-             0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65
-             0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004
-             1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546
-             1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028
-             2.688 0 3.848-2.339 4.695-4.566
-             4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012
-             2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22
-             6.484 17.522 2 12 2z"
-          clip-rule="evenodd"></path>
-      </svg>
-    </a>
-    <ThemeToggle />
-  </div>
-</div>
-
-<style>
-  #menu {
-    margin-left: -150px;
-    width: 150px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 1000;
-    background: #191818;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    transition: all 0.2s ease-out;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .menu-inner {
-    flex: 1;
-  }
-
-  .menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    border-top: 1px solid #333;
-  }
-
-  .menu-label {
-    color: #999;
-    border: none;
-    padding: 0.6em 0 0.6em 0.6em;
-    font-size: 0.9em;
-  }
-
-  .menu-item {
-    border: none;
-  }
-
-  .menu-link-item {
-    display: block;
-    color: #999;
-    border: none;
-    padding: 0.6em 0 0.6em 0.6em;
-    text-decoration: none;
-    transition: background-color 0.15s ease;
-  }
-
-  .menu-link-item:hover,
-  .menu-link-item:focus {
-    background: #333;
-  }
-
-  .menu-item.selected {
-    background: #1f8dd6;
-  }
-
-  .menu-item.selected .menu-link-item {
-    color: #fff;
-  }
-
-  .links {
-    font-size: 50px;
-    padding: 10px 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  .github-link {
-    color: #555;
-    padding: 0;
-    position: relative;
-    text-decoration: none;
-    transition: color 0.15s ease;
-  }
-
-  .github-link:hover {
-    color: #777;
-  }
-
-  /* Desktop: show menu */
-  @media (min-width: 48em) {
-    #menu {
-      left: 150px;
-    }
-  }
-
-  /* When menu is active (mobile) */
-  :global(#layout.active) #menu {
-    left: 150px;
-    width: 150px;
-  }
-</style>
--- a/src/components/SpecSection.astro
+++ b/src/components/SpecSection.astro
@@ -0,0 +1,49 @@
+---
+import SectionHeader from "./SectionHeader.astro";
+import SpecSidebar from "./SpecSidebar.astro";
+import type { TocItem } from "../utils/parseSpecContent";
+
+interface Props {
+  terminology: string;
+  terminologyTitle: string;
+  specification: string;
+  tocItems: TocItem[];
+}
+
+const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
+---
+
+<section id="spec" class="py-20 sm:py-28">
+  <div class="section-container">
+    <SectionHeader
+      title="The Specification"
+      subtitle="The complete Git Common-Flow specification"
+      class="max-w-3xl mx-auto"
+    />
+
+    <!-- Content with sidebar -->
+    <div class="lg:flex lg:gap-8">
+      <!-- Sidebar -->
+      <div class="lg:w-64 lg:flex-shrink-0">
+        <SpecSidebar items={tocItems} />
+      </div>
+
+      <!-- Main content -->
+      <div class="flex-1 min-w-0">
+        <article class="prose-spec">
+          <!-- Terminology -->
+          <section id="terminology">
+            <h2>{terminologyTitle}</h2>
+            <Fragment set:html={terminology} />
+          </section>
+
+          <!-- Main specification -->
+          <section id="specification">
+            <h2>Specification</h2>
+            <Fragment set:html={specification} />
+          </section>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>
--- a/src/components/SpecSidebar.astro
+++ b/src/components/SpecSidebar.astro
@@ -0,0 +1,132 @@
+---
+import { Icon } from "astro-icon/components";
+import TocLink from "./TocLink.astro";
+import type { TocItem } from "../utils/parseSpecContent";
+
+interface Props {
+  items: TocItem[];
+}
+
+const { items } = Astro.props;
+---
+
+<aside
+  id="spec-sidebar"
+  class="hidden lg:block lg:sticky lg:top-24 lg:self-start
+         lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto
+         lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-neutral-800"
+>
+  <nav class="space-y-1 py-2">
+    <div
+      class="text-xs font-semibold uppercase tracking-wider mb-4
+             text-gray-500 dark:text-neutral-500"
+    >
+      Table of Contents
+    </div>
+    {items.map((item) => <TocLink item={item} trackActive />)}
+  </nav>
+</aside>
+
+<!-- Mobile floating button -->
+<button
+  id="spec-toc-toggle"
+  class="lg:hidden fixed bottom-6 right-6 z-40
+         w-12 h-12 rounded-full shadow-lg
+         bg-sky-600 text-white
+         flex items-center justify-center
+         hover:bg-sky-500
+         transition-all duration-200"
+  aria-label="Jump to section"
+>
+  <Icon name="heroicons:bars-3-bottom-left" class="w-5 h-5" />
+</button>
+
+<!-- Mobile TOC drawer -->
+<div
+  id="spec-toc-drawer"
+  class="lg:hidden fixed inset-0 z-50 hidden"
+  data-toc-drawer
+>
+  <!-- Backdrop -->
+  <div class="absolute inset-0 bg-black/50" data-toc-backdrop></div>
+
+  <!-- Drawer -->
+  <div
+    class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
+           bg-gray-50 dark:bg-neutral-950
+           rounded-t-2xl shadow-xl p-6"
+  >
+    <div class="flex items-center justify-between mb-4">
+      <span
+        class="text-sm font-semibold uppercase tracking-wider
+               text-gray-500 dark:text-neutral-500"
+      >
+        Jump to Section
+      </span>
+      <button
+        class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800"
+        data-toc-close
+        aria-label="Close"
+      >
+        <Icon name="heroicons:x-mark" class="w-5 h-5" />
+      </button>
+    </div>
+
+    <nav class="space-y-1">
+      {items.map((item) => <TocLink item={item} />)}
+    </nav>
+  </div>
+</div>
+
+<script>
+  import { initActiveSectionTracker } from "../scripts/activeSectionTracker";
+
+  function initSpecSidebar() {
+    // Active section tracking for sidebar links
+    initActiveSectionTracker({
+      linkSelector: "[data-sidebar-link]",
+    });
+
+    // Mobile TOC drawer
+    const toggleBtn = document.getElementById("spec-toc-toggle");
+    const drawer = document.getElementById("spec-toc-drawer");
+    const backdrop = drawer?.querySelector("[data-toc-backdrop]");
+    const closeBtn = drawer?.querySelector("[data-toc-close]");
+    const tocLinks = drawer?.querySelectorAll("[data-toc-link]");
+
+    function openDrawer() {
+      drawer?.classList.remove("hidden");
+      document.body.style.overflow = "hidden";
+    }
+
+    function closeDrawer() {
+      drawer?.classList.add("hidden");
+      document.body.style.overflow = "";
+    }
+
+    toggleBtn?.addEventListener("click", openDrawer);
+    backdrop?.addEventListener("click", closeDrawer);
+    closeBtn?.addEventListener("click", closeDrawer);
+    tocLinks?.forEach((link) => {
+      link.addEventListener("click", closeDrawer);
+    });
+
+    // Show/hide mobile toggle based on spec section visibility
+    const specSection = document.getElementById("spec");
+    if (specSection && toggleBtn) {
+      const specObserver = new IntersectionObserver(
+        ([entry]) => {
+          toggleBtn.classList.toggle("hidden", !entry.isIntersecting);
+        },
+        { threshold: 0 },
+      );
+      specObserver.observe(specSection);
+    }
+  }
+
+  // Initialize on load
+  initSpecSidebar();
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener("astro:after-swap", initSpecSidebar);
+</script>
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,95 +1,131 @@
 ---
-// Theme toggle component - sun/moon icon to switch between light and dark mode
+import { Icon } from "astro-icon/components";
 ---

-<button
-  id="theme-toggle"
-  type="button"
-  class="p-2 text-[color:var(--color-text-muted)] hover:text-white
-         transition-colors duration-200"
-  aria-label="Toggle dark mode"
->
-  <!-- Sun icon (shown in dark mode) -->
-  <svg
-    id="sun-icon"
-    class="hidden w-6 h-6"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    stroke-width="2"
+<div class="relative group">
+  <button
+    data-theme-toggle
+    type="button"
+    class="p-2 rounded-lg cursor-pointer transition-colors duration-200
+           text-gray-500 dark:text-neutral-500
+           hover:text-gray-950 dark:hover:text-neutral-50
+           hover:bg-gray-100 dark:hover:bg-neutral-800"
+    aria-label="Toggle theme"
  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
-         6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
-         12a4 4 0 11-8 0 4 4 0 018 0z"></path>
-  </svg>
-  <!-- Moon icon (shown in light mode) -->
-  <svg
-    id="moon-icon"
-    class="w-6 h-6"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    stroke-width="2"
+    <Icon
+      name="heroicons:sun"
+      data-theme-icon="light"
+      class="hidden w-5 h-5"
+    />
+    <Icon
+      name="heroicons:moon"
+      data-theme-icon="dark"
+      class="hidden w-5 h-5"
+    />
+    <Icon
+      name="heroicons:computer-desktop"
+      data-theme-icon="auto"
+      class="hidden w-5 h-5"
+    />
+  </button>
+  <!-- Tooltip -->
+  <div
+    class="absolute left-1/2 -translate-x-1/2 top-full mt-2
+           px-2 py-1 text-xs font-medium whitespace-nowrap rounded-md shadow-sm
+           bg-gray-900 text-white dark:bg-white dark:text-gray-900
+           opacity-0 group-hover:opacity-100
+           transition-opacity duration-200 pointer-events-none"
  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
-         9.003 0 008.354-5.646z"></path>
-  </svg>
-</button>
+    <span data-tooltip-text="light" class="hidden">Light</span>
+    <span data-tooltip-text="dark" class="hidden">Dark</span>
+    <span data-tooltip-text="auto" class="hidden">System</span>
+  </div>
+</div>

 <script>
+  type ThemeMode = "light" | "dark" | "auto";
+
  function initTheme() {
-    const toggle = document.getElementById("theme-toggle");
-    const sunIcon = document.getElementById("sun-icon");
-    const moonIcon = document.getElementById("moon-icon");
+    const toggles = document.querySelectorAll(
+      "[data-theme-toggle]",
+    ) as NodeListOf<HTMLButtonElement>;

-    function updateIcons(isDark: boolean) {
-      if (isDark) {
-        sunIcon?.classList.remove("hidden");
-        moonIcon?.classList.add("hidden");
-      } else {
-        sunIcon?.classList.add("hidden");
-        moonIcon?.classList.remove("hidden");
-      }
-    }
-
-    function getTheme(): "dark" | "light" {
+    function getStoredMode(): ThemeMode {
      const stored = localStorage.getItem("theme");
-      if (stored === "dark" || stored === "light") {
+      if (stored === "dark" || stored === "light" || stored === "auto") {
        return stored;
      }
+      return "auto";
+    }
+
+    function getSystemTheme(): "dark" | "light" {
      return window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light";
    }

-    function setTheme(theme: "dark" | "light") {
-      localStorage.setItem("theme", theme);
-      document.documentElement.classList.toggle("dark", theme === "dark");
-      updateIcons(theme === "dark");
+    function getEffectiveTheme(mode: ThemeMode): "dark" | "light" {
+      if (mode === "auto") {
+        return getSystemTheme();
+      }
+      return mode;
    }

-    // Initialize
-    const currentTheme = getTheme();
-    setTheme(currentTheme);
+    function updateAllIcons(mode: ThemeMode) {
+      document.querySelectorAll("[data-theme-icon]").forEach((icon) => {
+        const iconMode = (icon as HTMLElement).dataset.themeIcon;
+        icon.classList.toggle("hidden", iconMode !== mode);
+      });
+      document.querySelectorAll("[data-tooltip-text]").forEach((text) => {
+        const textMode = (text as HTMLElement).dataset.tooltipText;
+        text.classList.toggle("hidden", textMode !== mode);
+      });
+    }

-    // Toggle handler
-    toggle?.addEventListener("click", () => {
-      const isDark = document.documentElement.classList.contains("dark");
-      setTheme(isDark ? "light" : "dark");
+    function applyTheme(mode: ThemeMode) {
+      const effective = getEffectiveTheme(mode);
+      if (effective === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      updateAllIcons(mode);
+    }
+
+    function setMode(mode: ThemeMode) {
+      localStorage.setItem("theme", mode);
+      applyTheme(mode);
+    }
+
+    function cycleMode(): ThemeMode {
+      const current = getStoredMode();
+      // Cycle: light → dark → auto → light
+      if (current === "light") return "dark";
+      if (current === "dark") return "auto";
+      return "light";
+    }
+
+    // Initialize theme
+    const currentMode = getStoredMode();
+    applyTheme(currentMode);
+
+    // Attach click handlers to all toggle buttons
+    toggles.forEach((toggle) => {
+      // Avoid adding duplicate listeners
+      if (toggle.dataset.initialized) return;
+      toggle.dataset.initialized = "true";
+
+      toggle.addEventListener("click", () => {
+        setMode(cycleMode());
+      });
    });

-    // Listen for system preference changes
+    // Listen for system preference changes (only affects auto mode)
    window
      .matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", (e) => {
-        if (!localStorage.getItem("theme")) {
-          setTheme(e.matches ? "dark" : "light");
+      .addEventListener("change", () => {
+        if (getStoredMode() === "auto") {
+          applyTheme("auto");
        }
      });
  }
--- a/src/components/TocLink.astro
+++ b/src/components/TocLink.astro
@@ -0,0 +1,34 @@
+---
+import type { TocItem } from "../utils/parseSpecContent";
+
+interface Props {
+  item: TocItem;
+  trackActive?: boolean;
+}
+
+const { item, trackActive = false } = Astro.props;
+---
+
+<a
+  href={`#${item.id}`}
+  class:list={[
+    "sidebar-link block py-2 px-4 text-sm rounded-md",
+    "transition-colors",
+    "text-gray-500 hover:text-gray-950 hover:bg-gray-100",
+    "dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
+    item.level === 3 && "pl-6 text-[0.8125rem]",
+    item.clause && "flex",
+  ]}
+  data-sidebar-link={trackActive ? "" : undefined}
+  data-section-id={trackActive ? item.id : undefined}
+  data-toc-link={!trackActive ? "" : undefined}
+>
+  {
+    item.clause && (
+      <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600">
+        {item.clause}
+      </span>
+    )
+  }
+  <span>{item.title}</span>
+</a>
--- a/src/components/VersionSelector.astro
+++ b/src/components/VersionSelector.astro
@@ -0,0 +1,136 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  currentVersion: string;
+  versions: string[];
+}
+
+const { currentVersion, versions } = Astro.props;
+---
+
+<div class="relative" data-version-selector>
+  <!-- Trigger button -->
+  <button
+    type="button"
+    data-version-trigger
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-neutral-700
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-neutral-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"
+  >
+    <span>v{currentVersion}</span>
+    <Icon
+      name="heroicons:chevron-down"
+      data-arrow-icon
+      class="w-3.5 h-3.5 transition-transform duration-150"
+    />
+  </button>
+
+  <!-- Dropdown menu -->
+  <div
+    data-version-dropdown
+    role="listbox"
+    aria-label="Select version"
+    class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-neutral-900
+           border border-gray-200 dark:border-neutral-700
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"
+  >
+    {
+      versions.map((v) => (
+        <a
+          href={`/spec/${v}`}
+          role="option"
+          aria-selected={v === currentVersion}
+          class:list={[
+            "block px-3 py-2 font-mono text-sm rounded transition-colors",
+            "text-gray-600 dark:text-neutral-400",
+            "hover:bg-gray-100 dark:hover:bg-neutral-800",
+            "hover:text-gray-950 dark:hover:text-neutral-50",
+            v === currentVersion && [
+              "bg-sky-500/15 dark:bg-sky-500/20",
+              "text-sky-600 dark:text-sky-400",
+            ],
+          ]}
+        >
+          v{v}
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  function initVersionSelectors() {
+    const selectors = document.querySelectorAll("[data-version-selector]");
+
+    selectors.forEach((selector) => {
+      if ((selector as HTMLElement).dataset.initialized) return;
+      (selector as HTMLElement).dataset.initialized = "true";
+
+      const trigger = selector.querySelector(
+        "[data-version-trigger]",
+      ) as HTMLButtonElement;
+      const dropdown = selector.querySelector(
+        "[data-version-dropdown]",
+      ) as HTMLElement;
+      const arrow = selector.querySelector("[data-arrow-icon]") as HTMLElement;
+
+      if (!trigger || !dropdown) return;
+
+      const open = () => {
+        dropdown.dataset.open = "true";
+        trigger.setAttribute("aria-expanded", "true");
+        if (arrow) arrow.style.transform = "rotate(180deg)";
+      };
+
+      const close = () => {
+        delete dropdown.dataset.open;
+        trigger.setAttribute("aria-expanded", "false");
+        if (arrow) arrow.style.transform = "";
+      };
+
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = dropdown.dataset.open === "true";
+
+        // Close all other dropdowns
+        document
+          .querySelectorAll("[data-version-dropdown][data-open]")
+          .forEach((d) => {
+            delete (d as HTMLElement).dataset.open;
+            const t = d.previousElementSibling as HTMLElement;
+            t?.setAttribute("aria-expanded", "false");
+            const a = t?.querySelector("[data-arrow-icon]") as HTMLElement;
+            if (a) a.style.transform = "";
+          });
+
+        if (isOpen) {
+          close();
+        } else {
+          open();
+        }
+      });
+
+      document.addEventListener("click", (e) => {
+        if (!selector.contains(e.target as Node)) close();
+      });
+
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && dropdown.dataset.open === "true") {
+          close();
+          trigger.focus();
+        }
+      });
+    });
+  }
+
+  initVersionSelectors();
+  document.addEventListener("astro:after-swap", initVersionSelectors);
+</script>
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,12 +1,17 @@
 export const config = {
-  title: "Git Common Flow",
+  title: "Git Common-Flow",
  description:
    "An attempt to gather a sensible selection of the most common usage " +
    "patterns of git into a single and concise specification.",
  author: "Jim Myhrberg",
+  authorUrl: "https://jimeh.me/",
  hostname: "commonflow.org",
  url: "https://commonflow.org",
  repoUrl: "https://github.com/jimeh/common-flow",
+  license: {
+    name: "CC BY 4.0",
+    url: "https://creativecommons.org/licenses/by/4.0/",
+  },

  currentVersion: "1.0.0-rc.5",
  versions: [
--- a/src/content/spec/1.0.0-rc.1.md
+++ b/src/content/spec/1.0.0-rc.1.md
@@ -2,13 +2,12 @@
 title: Git Common-Flow 1.0.0-rc.1
 version: 1.0.0-rc.1
 ---
-Git Common-Flow 1.0.0-rc.1
-==============================
+
+# Git Common-Flow 1.0.0-rc.1

 <img src="/spec/1.0.0-rc.1.svg" alt="Git Common-Flow 1.0.0-rc.1 diagram" width="100%" />

-Summary
-------
+## Summary

 Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
@@ -20,8 +19,7 @@ TL;DR: Common-Flow is basically GitHub Flow with the addition of versioned
 releases, maintenance releases for old versions, and without the requirement to
 deploy to production all the time.

-Terminology
-----------
+## Terminology

 - **Master Branch** - Must always have passing tests, is considered bleeding
  edge, and must be named `master`.
@@ -45,131 +43,129 @@ Terminology
  commit and release tag are on a maintenance branch instead of the master
  branch.

-Git Common-Flow Specification (Common-Flow)
-------------------------------------------
+## Git Common-Flow Specification (Common-Flow)

 The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
 "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in [RFC 2119](https://tools.ietf.org/html/rfc2119).

 1. The Master Branch
-    1. A branch named "master" MUST exist and it MUST be referred to as the
-       "master branch".
-    2. The master branch MUST be considered bleeding edge.
-    3. The master branch MUST always be in a non-broken state with its test
-       suite passing.
-    4. The master branch SHOULD always be in a "as near as possible ready for
-       release/production" state to reduce the friction of creating a new
-       release.
+   1. A branch named "master" MUST exist and it MUST be referred to as the
+      "master branch".
+   2. The master branch MUST be considered bleeding edge.
+   3. The master branch MUST always be in a non-broken state with its test
+      suite passing.
+   4. The master branch SHOULD always be in a "as near as possible ready for
+      release/production" state to reduce the friction of creating a new
+      release.
 2. Changes
-    1. Changes MUST be performed on a separate branch that SHOULD be referred to
-       as a "change branch". All change branches MUST have descriptive names. It
-       is RECOMMENDED that you commit often locally, and you SHOULD regularly
-       push your work to the same named branch on the remote server.
-    2. When a change branch is created, the branch that it is created from
-       SHOULD be referred to as the "source branch". Each change branch also
-       needs a designated "merge target branch", typically this will be the same
-       as the source branch.
-    3. Change branches MUST be regularly updated with any changes from their
-       source branch. This MUST be done by rebasing the change branch on top of
-       the source branch. To be clear you MUST NOT merge a source branch into a
-       change branch.
-    4. After rebasing a change branch on top of its source branch you MUST push
-       the change branch to the remote server. This will require you do a force
-       push, and you SHOULD use the "--force-with-lease" git push option.
-    5. To merge a change branch into its merge target branch, you MUST open a
-       "pull request" (or equivalent) so others can review and approve your
-       changes.
-    6. A pull request MUST only be merged when the change branch is up-to-date
-       with its source branch, the test suite is passing, and you and others are
-       happy with the change. This is especially important if the merge target
-       is the master branch.
-    7. To get feedback, help, or generally just discuss a change branch with
-       others, it is RECOMMENDED you do this by creating a pull request and
-       discuss the changes with others there.
+   1. Changes MUST be performed on a separate branch that SHOULD be referred to
+      as a "change branch". All change branches MUST have descriptive names. It
+      is RECOMMENDED that you commit often locally, and you SHOULD regularly
+      push your work to the same named branch on the remote server.
+   2. When a change branch is created, the branch that it is created from
+      SHOULD be referred to as the "source branch". Each change branch also
+      needs a designated "merge target branch", typically this will be the same
+      as the source branch.
+   3. Change branches MUST be regularly updated with any changes from their
+      source branch. This MUST be done by rebasing the change branch on top of
+      the source branch. To be clear you MUST NOT merge a source branch into a
+      change branch.
+   4. After rebasing a change branch on top of its source branch you MUST push
+      the change branch to the remote server. This will require you do a force
+      push, and you SHOULD use the "--force-with-lease" git push option.
+   5. To merge a change branch into its merge target branch, you MUST open a
+      "pull request" (or equivalent) so others can review and approve your
+      changes.
+   6. A pull request MUST only be merged when the change branch is up-to-date
+      with its source branch, the test suite is passing, and you and others are
+      happy with the change. This is especially important if the merge target
+      is the master branch.
+   7. To get feedback, help, or generally just discuss a change branch with
+      others, it is RECOMMENDED you do this by creating a pull request and
+      discuss the changes with others there.
 3. Git Best Practices
-    1. All commit messages SHOULD follow the Commit Guidelines and format from
-       the official git
-       documentation:
-       <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project>
-    2. You SHOULD always use "--force-with-lease" when doing a force push. The
-       plain "--force" option is dangerous and destructive. More
-       information:
-       <https://developer.atlassian.com/blog/2015/04/force-with-lease/>
-    3. You SHOULD understand and be comfortable with
-       rebasing: <https://git-scm.com/book/en/v2/Git-Branching-Rebasing>
-    4. It is RECOMMENDED that you always do "git pull --rebase" instead of "git
-       pull" to avoid unnecessary merge commits. You can make this the default
-       behavior of "git pull" with "git config --global pull.rebase true".
-    5. It is RECOMMENDED that all branches be merged using "git merge --no-ff".
-       This makes sure the reference to the original branch is kept in the commits,
-       allows one to revert a merge by reverting a single merge commit, and creates
-       a merge commit to mark the integration of the branch with master.
+   1. All commit messages SHOULD follow the Commit Guidelines and format from
+      the official git
+      documentation:
+      <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project>
+   2. You SHOULD always use "--force-with-lease" when doing a force push. The
+      plain "--force" option is dangerous and destructive. More
+      information:
+      <https://developer.atlassian.com/blog/2015/04/force-with-lease/>
+   3. You SHOULD understand and be comfortable with
+      rebasing: <https://git-scm.com/book/en/v2/Git-Branching-Rebasing>
+   4. It is RECOMMENDED that you always do "git pull --rebase" instead of "git
+      pull" to avoid unnecessary merge commits. You can make this the default
+      behavior of "git pull" with "git config --global pull.rebase true".
+   5. It is RECOMMENDED that all branches be merged using "git merge --no-ff".
+      This makes sure the reference to the original branch is kept in the commits,
+      allows one to revert a merge by reverting a single merge commit, and creates
+      a merge commit to mark the integration of the branch with master.
 4. Versioning
-    1. The project MUST have its version hard-coded somewhere in the
-       code-base. It is RECOMMENDED that this is done in a file called "VERSION"
-       located in the root of the project.
-    2. If you are using a "VERSION" file in the root of the project, this MUST
-       only contain the exact version string.
-    3. The version string SHOULD follow the Semantic Versioning
-       (<http://semver.org/>) format. Use of Semantic Versioning is OPTIONAL,
-       but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
-       is bad, and "2.11.4" is good.
+   1. The project MUST have its version hard-coded somewhere in the
+      code-base. It is RECOMMENDED that this is done in a file called "VERSION"
+      located in the root of the project.
+   2. If you are using a "VERSION" file in the root of the project, this MUST
+      only contain the exact version string.
+   3. The version string SHOULD follow the Semantic Versioning
+      (<http://semver.org/>) format. Use of Semantic Versioning is OPTIONAL,
+      but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
+      is bad, and "2.11.4" is good.
 5. Releases
-    1. To create a new release, you MUST create a "version bump" commit directly
-       on the master branch which changes the hard-coded version value of the
-       project. The version bump commit MUST have a git tag created on it and
-       named as the exact version string.
-    2. A version bump commit MUST have a commit message title of "Bump version
-       to VERSION". For example, if the new version string is "2.11.4", the
-       first line of the commit message MUST read: "Bump version to 2.11.4"
-    3. The release tag on the version bump commit MUST be named exactly the same
-       as the version string. The tag name can OPTIONALLY be prefixed with
-       "v". For example the tag name can be either "2.11.4" or "v2.11.4".
-    4. It is RECOMMENDED that release tags are lightweight tags, but you can
-       OPTIONALLY use annotated tags if you want to include changelog
-       information in the release tag itself.
-    5. If you use annotated release tags, the first line of the annotation MUST
-       read "Release VERSION". For example for version "2.11.4" the first line
-       of the tag annotation would read "Release 2.11.4". The second line must
-       be blank, and the changelog MUST start on the third line.
+   1. To create a new release, you MUST create a "version bump" commit directly
+      on the master branch which changes the hard-coded version value of the
+      project. The version bump commit MUST have a git tag created on it and
+      named as the exact version string.
+   2. A version bump commit MUST have a commit message title of "Bump version
+      to VERSION". For example, if the new version string is "2.11.4", the
+      first line of the commit message MUST read: "Bump version to 2.11.4"
+   3. The release tag on the version bump commit MUST be named exactly the same
+      as the version string. The tag name can OPTIONALLY be prefixed with
+      "v". For example the tag name can be either "2.11.4" or "v2.11.4".
+   4. It is RECOMMENDED that release tags are lightweight tags, but you can
+      OPTIONALLY use annotated tags if you want to include changelog
+      information in the release tag itself.
+   5. If you use annotated release tags, the first line of the annotation MUST
+      read "Release VERSION". For example for version "2.11.4" the first line
+      of the tag annotation would read "Release 2.11.4". The second line must
+      be blank, and the changelog MUST start on the third line.
 6. Bug Fixes & Rollback
-    1. You MUST NOT under any circumstances force push to the master branch.
-    2. If a change branch which has been merged in to the master branch is found
-       to have a bug in it, the bug fix work MUST be done as a new separate
-       change branch and MUST follow the same workflow as any other change
-       branch.
-    3. If a change branch is wrongfully merged in to master, or for any other
-       reason the merge must be undone, you MUST undo the merge by reverting the
-       merge commit itself. Effectively creating a new commit that reverses all
-       the relevant changes.
+   1. You MUST NOT under any circumstances force push to the master branch.
+   2. If a change branch which has been merged in to the master branch is found
+      to have a bug in it, the bug fix work MUST be done as a new separate
+      change branch and MUST follow the same workflow as any other change
+      branch.
+   3. If a change branch is wrongfully merged in to master, or for any other
+      reason the merge must be undone, you MUST undo the merge by reverting the
+      merge commit itself. Effectively creating a new commit that reverses all
+      the relevant changes.
 7. Maintenance Releases
-    1. Any branch that has a name starting with "stable-" SHOULD be referred to
-       as a "maintenance branch".
-    2. Maintenance branches are used for managing new releases of older
-       versions. Typically this is used to provide security updates for older
-       versions when the master branch has moved on to a point that a new
-       release for the old version cannot be made from the master branch.
-    3. A "maintenance release" is identical to a regular release, except the
-       version bump commit and the release tag are placed on the maintenance
-       branch instead of on the master branch.
-    3. A maintenance branch SHOULD follow a "stable-X.Y" naming pattern, where
-       "X" is the MAJOR version and "Y" is the minor version.
-    4. A maintenance branch MUST be created from the relevant release tag. For
-       example if there is a security fix for all 2.9.x releases, the latest of
-       which is "2.9.7", we create a new branch called "stable-2.9" off of the
-       "2.9.7" release tag. The security fix release will then end up being
-       version "2.9.8".
-    5. When working on a maintenance release, the relevant maintenance branch
-       MUST be thought of as the master branch for that maintenance work.
-    6. Changes in a maintenance branch SHOULD typically come from work being
-       done against the master branch. Meaning changes SHOULD only trickle
-       downwards from the master branch. If a change needs to trickle back up
-       into the master branch, that work should have happened against the master
-       branch in the first place.
+   1. Any branch that has a name starting with "stable-" SHOULD be referred to
+      as a "maintenance branch".
+   2. Maintenance branches are used for managing new releases of older
+      versions. Typically this is used to provide security updates for older
+      versions when the master branch has moved on to a point that a new
+      release for the old version cannot be made from the master branch.
+   3. A "maintenance release" is identical to a regular release, except the
+      version bump commit and the release tag are placed on the maintenance
+      branch instead of on the master branch.
+   4. A maintenance branch SHOULD follow a "stable-X.Y" naming pattern, where
+      "X" is the MAJOR version and "Y" is the minor version.
+   5. A maintenance branch MUST be created from the relevant release tag. For
+      example if there is a security fix for all 2.9.x releases, the latest of
+      which is "2.9.7", we create a new branch called "stable-2.9" off of the
+      "2.9.7" release tag. The security fix release will then end up being
+      version "2.9.8".
+   6. When working on a maintenance release, the relevant maintenance branch
+      MUST be thought of as the master branch for that maintenance work.
+   7. Changes in a maintenance branch SHOULD typically come from work being
+      done against the master branch. Meaning changes SHOULD only trickle
+      downwards from the master branch. If a change needs to trickle back up
+      into the master branch, that work should have happened against the master
+      branch in the first place.

-About
-----
+## About

 The Git Common-Flow specification is authored
 by [Jim Myhrberg](http://jimeh.me).
@@ -177,7 +173,6 @@ by [Jim Myhrberg](http://jimeh.me).
 If you'd like to leave feedback,
 please [open an issue on GitHub](https://github.com/jimeh/common-flow/issues).

-License
-------
+## License

 [Creative Commons - CC BY 3.0](http://creativecommons.org/licenses/by/3.0/)
--- a/src/content/spec/1.0.0-rc.2.md
+++ b/src/content/spec/1.0.0-rc.2.md
@@ -2,13 +2,12 @@
 title: Git Common-Flow 1.0.0-rc.2
 version: 1.0.0-rc.2
 ---
-Git Common-Flow 1.0.0-rc.2
-==============================
+
+# Git Common-Flow 1.0.0-rc.2

 <img src="/spec/1.0.0-rc.2.svg" alt="Git Common-Flow 1.0.0-rc.2 diagram" width="100%" />

-Summary
-------
+## Summary

 Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
@@ -20,8 +19,7 @@ TL;DR: Common-Flow is basically GitHub Flow with the addition of versioned
 releases, maintenance releases for old versions, and without the requirement to
 deploy to production all the time.

-Terminology
-----------
+## Terminology

 - **Master Branch** - Must always have passing tests, is considered bleeding
  edge, and must be named `master`.
@@ -40,161 +38,159 @@ Terminology
 - **Release Branches** - Used both for short-term preparations of a release, and
  also for long-term maintenance of older version.

-Git Common-Flow Specification (Common-Flow)
-------------------------------------------
+## Git Common-Flow Specification (Common-Flow)

 The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
 "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in [RFC 2119](https://tools.ietf.org/html/rfc2119).

 1. The Master Branch
-    1. A branch named "master" MUST exist and it MUST be referred to as the
-       "master branch".
-    2. The master branch MUST be considered bleeding edge.
-    3. The master branch MUST always be in a non-broken state with its test
-       suite passing.
-    4. The master branch SHOULD always be in a "as near as possibly ready for
-       release/production" state to reduce any friction with creating a new
-       release.
+   1. A branch named "master" MUST exist and it MUST be referred to as the
+      "master branch".
+   2. The master branch MUST be considered bleeding edge.
+   3. The master branch MUST always be in a non-broken state with its test
+      suite passing.
+   4. The master branch SHOULD always be in a "as near as possibly ready for
+      release/production" state to reduce any friction with creating a new
+      release.
 2. Change Branches
-    1. Each change (feature, bugfix, etc.) MUST be performed on separate
-       branches that SHOULD be referred to as "change branches". All change
-       branches MUST have descriptive names. It is RECOMMENDED that you commit
-       often locally, and you SHOULD regularly push your work to the same named
-       branch on the remote server.
-    2. You MUST create separate change branches for each distinctly different
-       change. You MUST NOT include multiple unrelated changes into a single
-       change branch.
-    3. When a change branch is created, the branch that it is created from
-       SHOULD be referred to as the "source branch". Each change branch also
-       needs a designated "merge target" branch, typically this will be the same
-       as the source branch.
-    4. Change branches MUST be regularly updated with any changes from their
-       source branch. This MUST be done by rebasing the change branch on top of
-       the source branch.
-    5. After rebasing a change branch on top of its source branch you MUST push
-       the change branch to the remote server. This will require you to do a
-       force push, and you SHOULD use the "--force-with-lease" git push option.
+   1. Each change (feature, bugfix, etc.) MUST be performed on separate
+      branches that SHOULD be referred to as "change branches". All change
+      branches MUST have descriptive names. It is RECOMMENDED that you commit
+      often locally, and you SHOULD regularly push your work to the same named
+      branch on the remote server.
+   2. You MUST create separate change branches for each distinctly different
+      change. You MUST NOT include multiple unrelated changes into a single
+      change branch.
+   3. When a change branch is created, the branch that it is created from
+      SHOULD be referred to as the "source branch". Each change branch also
+      needs a designated "merge target" branch, typically this will be the same
+      as the source branch.
+   4. Change branches MUST be regularly updated with any changes from their
+      source branch. This MUST be done by rebasing the change branch on top of
+      the source branch.
+   5. After rebasing a change branch on top of its source branch you MUST push
+      the change branch to the remote server. This will require you to do a
+      force push, and you SHOULD use the "--force-with-lease" git push option.
 3. Pull Requests
-    1. To merge a change branch into its merge target, you MUST open a "pull
-       request" (or equivalent) so others can review and approve your changes.
-    2. A pull request MUST only be merged when the change branch is up-to-date
-       with its source branch, the test suite is passing, and you and others are
-       happy with the change. This is especially important if the merge target
-       is the master branch.
-    3. To get feedback, help, or generally just discuss a change branch with
-       others, the RECOMMENDED way to do so is by creating a pull request and
-       discuss the changes with others there.
+   1. To merge a change branch into its merge target, you MUST open a "pull
+      request" (or equivalent) so others can review and approve your changes.
+   2. A pull request MUST only be merged when the change branch is up-to-date
+      with its source branch, the test suite is passing, and you and others are
+      happy with the change. This is especially important if the merge target
+      is the master branch.
+   3. To get feedback, help, or generally just discuss a change branch with
+      others, the RECOMMENDED way to do so is by creating a pull request and
+      discuss the changes with others there.
 4. Versioning
-    1. The project MUST have its version hard-coded somewhere in the
-       code-base. It is RECOMMENDED that this is done in a file called "VERSION"
-       located in the root of the project.
-    2. If you are using a "VERSION" file in the root of the project, this MUST
-       only contain the exact version string.
-    3. The version string SHOULD follow the Semantic Versioning
-       (<http://semver.org/>) format. Use of Semantic Versioning is OPTIONAL,
-       but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
-       is bad, and "2.11.4" is good.
+   1. The project MUST have its version hard-coded somewhere in the
+      code-base. It is RECOMMENDED that this is done in a file called "VERSION"
+      located in the root of the project.
+   2. If you are using a "VERSION" file in the root of the project, this MUST
+      only contain the exact version string.
+   3. The version string SHOULD follow the Semantic Versioning
+      (<http://semver.org/>) format. Use of Semantic Versioning is OPTIONAL,
+      but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
+      is bad, and "2.11.4" is good.
 5. Releases
-    1. To create a new release, you MUST create a "version bump" commit which
-       changes the hard-coded version string of the project. The version bump
-       commit MUST have a git tag created on it and named as the exact version
-       string.
-    2. If you are not using a release branch, then the version bump commit MUST
-       be created directly on the master branch.
-    3. The version bump commit MUST have a commit message title of "Bump version
-       to VERSION". For example, if the new version string is "2.11.4", the
-       first line of the commit message MUST read: "Bump version to 2.11.4"
-    4. The release tag on the version bump commit MUST be named exactly the same
-       as the version string. The tag name can OPTIONALLY be prefixed with
-       "v". For example the tag name can be either "2.11.4" or "v2.11.4". You
-       MUST not use a mix of "v" prefixed and non-prefixed tags. Pick one form
-       and stick to it.
-    5. It is RECOMMENDED that release tags are lightweight tags, but you can
-       OPTIONALLY use annotated tags if you want to include changelog
-       information in the release tag itself.
-    6. If you use annotated release tags, the first line of the annotation MUST
-       read "Release VERSION". For example for version "2.11.4" the first line
-       of the tag annotation would read "Release 2.11.4". The second line must
-       be blank, and the changelog MUST start on the third line.
+   1. To create a new release, you MUST create a "version bump" commit which
+      changes the hard-coded version string of the project. The version bump
+      commit MUST have a git tag created on it and named as the exact version
+      string.
+   2. If you are not using a release branch, then the version bump commit MUST
+      be created directly on the master branch.
+   3. The version bump commit MUST have a commit message title of "Bump version
+      to VERSION". For example, if the new version string is "2.11.4", the
+      first line of the commit message MUST read: "Bump version to 2.11.4"
+   4. The release tag on the version bump commit MUST be named exactly the same
+      as the version string. The tag name can OPTIONALLY be prefixed with
+      "v". For example the tag name can be either "2.11.4" or "v2.11.4". You
+      MUST not use a mix of "v" prefixed and non-prefixed tags. Pick one form
+      and stick to it.
+   5. It is RECOMMENDED that release tags are lightweight tags, but you can
+      OPTIONALLY use annotated tags if you want to include changelog
+      information in the release tag itself.
+   6. If you use annotated release tags, the first line of the annotation MUST
+      read "Release VERSION". For example for version "2.11.4" the first line
+      of the tag annotation would read "Release 2.11.4". The second line must
+      be blank, and the changelog MUST start on the third line.
 6. Release Branches
-    1. Any branch that has a name starting with "release-" SHOULD be referred to
-       as a "release branch".
-    2. Use of release branches is OPTIONAL.
-    3. Changes in a release branch SHOULD typically come from work being
-       done against the master branch. Meaning changes SHOULD only trickle
-       downwards from the master branch. If a change needs to trickle back up
-       into the master branch, that work should have happened against the master
-       branch in the first place. One exception to this is version bump commits.
-    4. There are two types of release branches; short-term, and long-term.
-    5. Short-Term Release Branches
-        1. Used for creating a specific versioned release.
-        2. A short-term release branch is RECOMMENDED if there is a lengthy
-           pre-release verification process to avoid a code freeze on the master
-           branch.
-        3. MUST have a name of "release-VERSION". For example for version
-           "2.11.4" the release branch name MUST be "release-2.11.4".
-        4. When using a short-term release branch, the version bump commit and
-           release tag MUST be made directly on the release branch itself.
-        5. Only very minor changes should be performed on a short-term release
-           branch directly. Any larger changes SHOULD be done in the master
-           branch, and SHOULD be pulled into the release branch by rebasing it
-           on top of the master branch the same way a change branch pulls in
-           updates from its source branch.
-        6. After the version bump commit and release tag have been created, the
-           release branch MUST be merged back into its source branch and then
-           deleted. Typically the source branch will be the master branch.
-    6. Long-Term Release Branches
-        1. Used for work on versions which are not currently part of the master
-           branch. Typically this is useful when you need to create a new
-           maintenance release for a older version.
-        2. The branch name MUST have a non-specific version number. For example
-           a long-term release branch for creating new 2.9.x releases would be
-           named "release-2.9".
-        3. To create a new release from a long-term release branch, you MUST
-           create a version bump commit and release tag directly on the release
-           branch.
-        4. A long-term release branch MUST be created from the relevant release
-           tag. For example if the master branch is on version 2.11.4 and there
-           is a security fix for all 2.9.x releases, the latest of which is
-           "2.9.7". Create a new branch called "release-2.9" off of the "2.9.7"
-           release tag. The security fix release will then end up being version
-           "2.9.8".
+   1. Any branch that has a name starting with "release-" SHOULD be referred to
+      as a "release branch".
+   2. Use of release branches is OPTIONAL.
+   3. Changes in a release branch SHOULD typically come from work being
+      done against the master branch. Meaning changes SHOULD only trickle
+      downwards from the master branch. If a change needs to trickle back up
+      into the master branch, that work should have happened against the master
+      branch in the first place. One exception to this is version bump commits.
+   4. There are two types of release branches; short-term, and long-term.
+   5. Short-Term Release Branches
+      1. Used for creating a specific versioned release.
+      2. A short-term release branch is RECOMMENDED if there is a lengthy
+         pre-release verification process to avoid a code freeze on the master
+         branch.
+      3. MUST have a name of "release-VERSION". For example for version
+         "2.11.4" the release branch name MUST be "release-2.11.4".
+      4. When using a short-term release branch, the version bump commit and
+         release tag MUST be made directly on the release branch itself.
+      5. Only very minor changes should be performed on a short-term release
+         branch directly. Any larger changes SHOULD be done in the master
+         branch, and SHOULD be pulled into the release branch by rebasing it
+         on top of the master branch the same way a change branch pulls in
+         updates from its source branch.
+      6. After the version bump commit and release tag have been created, the
+         release branch MUST be merged back into its source branch and then
+         deleted. Typically the source branch will be the master branch.
+   6. Long-Term Release Branches
+      1. Used for work on versions which are not currently part of the master
+         branch. Typically this is useful when you need to create a new
+         maintenance release for a older version.
+      2. The branch name MUST have a non-specific version number. For example
+         a long-term release branch for creating new 2.9.x releases would be
+         named "release-2.9".
+      3. To create a new release from a long-term release branch, you MUST
+         create a version bump commit and release tag directly on the release
+         branch.
+      4. A long-term release branch MUST be created from the relevant release
+         tag. For example if the master branch is on version 2.11.4 and there
+         is a security fix for all 2.9.x releases, the latest of which is
+         "2.9.7". Create a new branch called "release-2.9" off of the "2.9.7"
+         release tag. The security fix release will then end up being version
+         "2.9.8".
 7. Bug Fixes & Rollback
-    1. You MUST NOT under any circumstances force push to the master branch.
-    2. If a change branch which has been merged into the master branch is found
-       to have a bug in it, the bug fix work MUST be done as a new separate
-       change branch and MUST follow the same workflow as any other change
-       branch.
-    3. If a change branch is wrongfully merged into master, or for any other
-       reason the merge must be undone, you MUST undo the merge by reverting the
-       merge commit itself. Effectively creating a new commit that reverses all
-       the relevant changes.
+   1. You MUST NOT under any circumstances force push to the master branch.
+   2. If a change branch which has been merged into the master branch is found
+      to have a bug in it, the bug fix work MUST be done as a new separate
+      change branch and MUST follow the same workflow as any other change
+      branch.
+   3. If a change branch is wrongfully merged into master, or for any other
+      reason the merge must be undone, you MUST undo the merge by reverting the
+      merge commit itself. Effectively creating a new commit that reverses all
+      the relevant changes.
 8. Git Best Practices
-    1. All commit messages SHOULD follow the Commit Guidelines and format from
-       the official git
-       documentation:
-       <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project>
-    2. You SHOULD never blindly commit all changes with "git commit -a". It is
-       RECOMMENDED you use "git add -i" to add individual changes to the staging
-       area so you are fully aware of what you are committing.
-    3. You SHOULD always use "--force-with-lease" when doing a force push. The
-       regular "--force" option is dangerous and destructive. More
-       information:
-       <https://developer.atlassian.com/blog/2015/04/force-with-lease/>
-    4. You SHOULD understand and be comfortable with
-       rebasing: <https://git-scm.com/book/en/v2/Git-Branching-Rebasing>
-    5. It is RECOMMENDED that you always do "git pull --rebase" instead of "git
-       pull" to avoid unnecessary merge commits. You can make this the default
-       behavior of "git pull" with "git config --global pull.rebase true".
-    6. It is RECOMMENDED that all branches be merged using "git merge --no-ff".
-       This makes sure the reference to the original branch is kept in the
-       commits, allows one to revert a merge by reverting a single merge commit,
-       and creates a merge commit to mark the integration of the branch with
-       master.
+   1. All commit messages SHOULD follow the Commit Guidelines and format from
+      the official git
+      documentation:
+      <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project>
+   2. You SHOULD never blindly commit all changes with "git commit -a". It is
+      RECOMMENDED you use "git add -i" to add individual changes to the staging
+      area so you are fully aware of what you are committing.
+   3. You SHOULD always use "--force-with-lease" when doing a force push. The
+      regular "--force" option is dangerous and destructive. More
+      information:
+      <https://developer.atlassian.com/blog/2015/04/force-with-lease/>
+   4. You SHOULD understand and be comfortable with
+      rebasing: <https://git-scm.com/book/en/v2/Git-Branching-Rebasing>
+   5. It is RECOMMENDED that you always do "git pull --rebase" instead of "git
+      pull" to avoid unnecessary merge commits. You can make this the default
+      behavior of "git pull" with "git config --global pull.rebase true".
+   6. It is RECOMMENDED that all branches be merged using "git merge --no-ff".
+      This makes sure the reference to the original branch is kept in the
+      commits, allows one to revert a merge by reverting a single merge commit,
+      and creates a merge commit to mark the integration of the branch with
+      master.

-About
-----
+## About

 The Git Common-Flow specification is authored
 by [Jim Myhrberg](http://jimeh.me).
@@ -202,7 +198,6 @@ by [Jim Myhrberg](http://jimeh.me).
 If you'd like to leave feedback,
 please [open an issue on GitHub](https://github.com/jimeh/common-flow/issues).

-License
-------
+## License

 [Creative Commons - CC BY 3.0](http://creativecommons.org/licenses/by/3.0/)
--- a/src/content/spec/1.0.0-rc.3.md
+++ b/src/content/spec/1.0.0-rc.3.md
@@ -2,13 +2,12 @@
 title: Git Common-Flow 1.0.0-rc.3
 version: 1.0.0-rc.3
 ---
-Git Common-Flow 1.0.0-rc.3
-===========================
+
+# Git Common-Flow 1.0.0-rc.3

 <img src="/spec/1.0.0-rc.3.svg" alt="Git Common-Flow 1.0.0-rc.3 diagram" width="100%" />

-Summary
-------
+## Summary

 Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
@@ -20,8 +19,7 @@ In short, Common-Flow is essentially GitHub Flow with the addition of versioned
 releases, optional release branches, and without the requirement to deploy to
 production all the time.

-Terminology
-----------
+## Terminology

 - **Master Branch** - Must be named "master", must always have passing tests,
  and is not guaranteed to always work in production environments.
@@ -41,166 +39,164 @@ Terminology
 - **Release Branches** - Used both for short-term preparations of a release, and
  also for long-term maintenance of older version.

-Git Common-Flow Specification (Common-Flow)
-------------------------------------------
+## Git Common-Flow Specification (Common-Flow)

 The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
 "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in [RFC 2119](https://tools.ietf.org/html/rfc2119).

 1. TL;DR
-    1. Don't break the master branch.
-    2. A release is a git tag.
+   1. Don't break the master branch.
+   2. A release is a git tag.
 2. The Master Branch
-    1. A branch named "master" MUST exist and it MUST be referred to as the
-       "master branch".
-    2. The master branch MUST always be in a non-broken state with its test
-       suite passing.
-    4. The master branch IS NOT guaranteed to always work in production
-       environments. Despite test suites passing it may at times contain
-       unfinished work. Only releases may be considered safe for production use.
-    5. The master branch SHOULD always be in a "as near as possibly ready for
-       release/production" state to reduce any friction with creating a new
-       release.
+   1. A branch named "master" MUST exist and it MUST be referred to as the
+      "master branch".
+   2. The master branch MUST always be in a non-broken state with its test
+      suite passing.
+   3. The master branch IS NOT guaranteed to always work in production
+      environments. Despite test suites passing it may at times contain
+      unfinished work. Only releases may be considered safe for production use.
+   4. The master branch SHOULD always be in a "as near as possibly ready for
+      release/production" state to reduce any friction with creating a new
+      release.
 3. Change Branches
-    1. Each change (feature, bugfix, etc.) MUST be performed on separate
-       branches that SHOULD be referred to as "change branches". All change
-       branches MUST have descriptive names. It is RECOMMENDED that you commit
-       often locally, and you SHOULD regularly push your work to the same named
-       branch on the remote server.
-    2. You MUST create separate change branches for each distinctly different
-       change. You MUST NOT include multiple unrelated changes into a single
-       change branch.
-    3. When a change branch is created, the branch that it is created from
-       SHOULD be referred to as the "source branch". Each change branch also
-       needs a designated "merge target" branch, typically this will be the same
-       as the source branch.
-    4. Change branches MUST be regularly updated with any changes from their
-       source branch. This MUST be done by rebasing the change branch on top of
-       the source branch.
-    5. After rebasing a change branch on top of its source branch you MUST push
-       the change branch to the remote server. This will require you to do a
-       force push, and you SHOULD use the "--force-with-lease" git push option.
+   1. Each change (feature, bugfix, etc.) MUST be performed on separate
+      branches that SHOULD be referred to as "change branches". All change
+      branches MUST have descriptive names. It is RECOMMENDED that you commit
+      often locally, and you SHOULD regularly push your work to the same named
+      branch on the remote server.
+   2. You MUST create separate change branches for each distinctly different
+      change. You MUST NOT include multiple unrelated changes into a single
+      change branch.
+   3. When a change branch is created, the branch that it is created from
+      SHOULD be referred to as the "source branch". Each change branch also
+      needs a designated "merge target" branch, typically this will be the same
+      as the source branch.
+   4. Change branches MUST be regularly updated with any changes from their
+      source branch. This MUST be done by rebasing the change branch on top of
+      the source branch.
+   5. After rebasing a change branch on top of its source branch you MUST push
+      the change branch to the remote server. This will require you to do a
+      force push, and you SHOULD use the "--force-with-lease" git push option.
 4. Pull Requests
-    1. To merge a change branch into its merge target, you MUST open a "pull
-       request" (or equivalent) so others can review and approve your changes.
-    2. A pull request MUST only be merged when the change branch is up-to-date
-       with its source branch, the test suite is passing, and you and others are
-       happy with the change. This is especially important if the merge target
-       is the master branch.
-    3. To get feedback, help, or generally just discuss a change branch with
-       others, the RECOMMENDED way to do so is by creating a pull request and
-       discuss the changes with others there.
+   1. To merge a change branch into its merge target, you MUST open a "pull
+      request" (or equivalent) so others can review and approve your changes.
+   2. A pull request MUST only be merged when the change branch is up-to-date
+      with its source branch, the test suite is passing, and you and others are
+      happy with the change. This is especially important if the merge target
+      is the master branch.
+   3. To get feedback, help, or generally just discuss a change branch with
+      others, the RECOMMENDED way to do so is by creating a pull request and
+      discuss the changes with others there.
 5. Versioning
-    1. The project MUST have its version hard-coded somewhere in the
-       code-base. It is RECOMMENDED that this is done in a file called "VERSION"
-       located in the root of the project.
-    2. If you are using a "VERSION" file in the root of the project, this MUST
-       only contain the exact version string.
-    3. The version string SHOULD follow the Semantic Versioning
-       (<http://semver.org/>) format. Use of Semantic Versioning is OPTIONAL,
-       but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
-       is bad, and "2.11.4" is good.
+   1. The project MUST have its version hard-coded somewhere in the
+      code-base. It is RECOMMENDED that this is done in a file called "VERSION"
+      located in the root of the project.
+   2. If you are using a "VERSION" file in the root of the project, this MUST
+      only contain the exact version string.
+   3. The version string SHOULD follow the Semantic Versioning
+      (<http://semver.org/>) format. Use of Semantic Versioning is OPTIONAL,
+      but the version string MUST NOT have a "v" prefix. For example "v2.11.4"
+      is bad, and "2.11.4" is good.
 6. Releases
-    1. To create a new release, you MUST create a "version bump" commit which
-       changes the hard-coded version string of the project. The version bump
-       commit MUST have a git tag created on it and named as the exact version
-       string.
-    2. If you are not using a release branch, then the version bump commit MUST
-       be created directly on the master branch.
-    3. The version bump commit MUST have a commit message title of "Bump version
-       to VERSION". For example, if the new version string is "2.11.4", the
-       first line of the commit message MUST read: "Bump version to 2.11.4"
-    4. The release tag on the version bump commit MUST be named exactly the same
-       as the version string. The tag name can OPTIONALLY be prefixed with
-       "v". For example the tag name can be either "2.11.4" or "v2.11.4". You
-       MUST not use a mix of "v" prefixed and non-prefixed tags. Pick one form
-       and stick to it.
-    5. It is RECOMMENDED that release tags are lightweight tags, but you can
-       OPTIONALLY use annotated tags if you want to include changelog
-       information in the release tag itself.
-    6. If you use annotated release tags, the first line of the annotation MUST
-       read "Release VERSION". For example for version "2.11.4" the first line
-       of the tag annotation would read "Release 2.11.4". The second line must
-       be blank, and the changelog MUST start on the third line.
+   1. To create a new release, you MUST create a "version bump" commit which
+      changes the hard-coded version string of the project. The version bump
+      commit MUST have a git tag created on it and named as the exact version
+      string.
+   2. If you are not using a release branch, then the version bump commit MUST
+      be created directly on the master branch.
+   3. The version bump commit MUST have a commit message title of "Bump version
+      to VERSION". For example, if the new version string is "2.11.4", the
+      first line of the commit message MUST read: "Bump version to 2.11.4"
+   4. The release tag on the version bump commit MUST be named exactly the same
+      as the version string. The tag name can OPTIONALLY be prefixed with
+      "v". For example the tag name can be either "2.11.4" or "v2.11.4". You
+      MUST not use a mix of "v" prefixed and non-prefixed tags. Pick one form
+      and stick to it.
+   5. It is RECOMMENDED that release tags are lightweight tags, but you can
+      OPTIONALLY use annotated tags if you want to include changelog
+      information in the release tag itself.
+   6. If you use annotated release tags, the first line of the annotation MUST
+      read "Release VERSION". For example for version "2.11.4" the first line
+      of the tag annotation would read "Release 2.11.4". The second line must
+      be blank, and the changelog MUST start on the third line.
 7. Release Branches
-    1. Any branch that has a name starting with "release-" SHOULD be referred to
-       as a "release branch".
-    2. Use of release branches is OPTIONAL.
-    3. Changes in a release branch SHOULD typically come from work being
-       done against the master branch. Meaning changes SHOULD only trickle
-       downwards from the master branch. If a change needs to trickle back up
-       into the master branch, that work should have happened against the master
-       branch in the first place. One exception to this is version bump commits.
-    4. There are two types of release branches; short-term, and long-term.
-    5. Short-Term Release Branches
-        1. Used for creating a specific versioned release.
-        2. A short-term release branch is RECOMMENDED if there is a lengthy
-           pre-release verification process to avoid a code freeze on the master
-           branch.
-        3. MUST have a name of "release-VERSION". For example for version
-           "2.11.4" the release branch name MUST be "release-2.11.4".
-        4. When using a short-term release branch, the version bump commit and
-           release tag MUST be made directly on the release branch itself.
-        5. Only very minor changes should be performed on a short-term release
-           branch directly. Any larger changes SHOULD be done in the master
-           branch, and SHOULD be pulled into the release branch by rebasing it
-           on top of the master branch the same way a change branch pulls in
-           updates from its source branch.
-        6. After the version bump commit and release tag have been created, the
-           release branch MUST be merged back into its source branch and then
-           deleted. Typically the source branch will be the master branch.
-    6. Long-Term Release Branches
-        1. Used for work on versions which are not currently part of the master
-           branch. Typically this is useful when you need to create a new
-           maintenance release for a older version.
-        2. The branch name MUST have a non-specific version number. For example
-           a long-term release branch for creating new 2.9.x releases would be
-           named "release-2.9".
-        3. To create a new release from a long-term release branch, you MUST
-           create a version bump commit and release tag directly on the release
-           branch.
-        4. A long-term release branch MUST be created from the relevant release
-           tag. For example if the master branch is on version 2.11.4 and there
-           is a security fix for all 2.9.x releases, the latest of which is
-           "2.9.7". Create a new branch called "release-2.9" off of the "2.9.7"
-           release tag. The security fix release will then end up being version
-           "2.9.8".
+   1. Any branch that has a name starting with "release-" SHOULD be referred to
+      as a "release branch".
+   2. Use of release branches is OPTIONAL.
+   3. Changes in a release branch SHOULD typically come from work being
+      done against the master branch. Meaning changes SHOULD only trickle
+      downwards from the master branch. If a change needs to trickle back up
+      into the master branch, that work should have happened against the master
+      branch in the first place. One exception to this is version bump commits.
+   4. There are two types of release branches; short-term, and long-term.
+   5. Short-Term Release Branches
+      1. Used for creating a specific versioned release.
+      2. A short-term release branch is RECOMMENDED if there is a lengthy
+         pre-release verification process to avoid a code freeze on the master
+         branch.
+      3. MUST have a name of "release-VERSION". For example for version
+         "2.11.4" the release branch name MUST be "release-2.11.4".
+      4. When using a short-term release branch, the version bump commit and
+         release tag MUST be made directly on the release branch itself.
+      5. Only very minor changes should be performed on a short-term release
+         branch directly. Any larger changes SHOULD be done in the master
+         branch, and SHOULD be pulled into the release branch by rebasing it
+         on top of the master branch the same way a change branch pulls in
+         updates from its source branch.
+      6. After the version bump commit and release tag have been created, the
+         release branch MUST be merged back into its source branch and then
+         deleted. Typically the source branch will be the master branch.
+   6. Long-Term Release Branches
+      1. Used for work on versions which are not currently part of the master
+         branch. Typically this is useful when you need to create a new
+         maintenance release for a older version.
+      2. The branch name MUST have a non-specific version number. For example
+         a long-term release branch for creating new 2.9.x releases would be
+         named "release-2.9".
+      3. To create a new release from a long-term release branch, you MUST
+         create a version bump commit and release tag directly on the release
+         branch.
+      4. A long-term release branch MUST be created from the relevant release
+         tag. For example if the master branch is on version 2.11.4 and there
+         is a security fix for all 2.9.x releases, the latest of which is
+         "2.9.7". Create a new branch called "release-2.9" off of the "2.9.7"
+         release tag. The security fix release will then end up being version
+         "2.9.8".
 8. Bug Fixes & Rollback
-    1. You MUST NOT under any circumstances force push to the master branch.
-    2. If a change branch which has been merged into the master branch is found
-       to have a bug in it, the bug fix work MUST be done as a new separate
-       change branch and MUST follow the same workflow as any other change
-       branch.
-    3. If a change branch is wrongfully merged into master, or for any other
-       reason the merge must be undone, you MUST undo the merge by reverting the
-       merge commit itself. Effectively creating a new commit that reverses all
-       the relevant changes.
+   1. You MUST NOT under any circumstances force push to the master branch.
+   2. If a change branch which has been merged into the master branch is found
+      to have a bug in it, the bug fix work MUST be done as a new separate
+      change branch and MUST follow the same workflow as any other change
+      branch.
+   3. If a change branch is wrongfully merged into master, or for any other
+      reason the merge must be undone, you MUST undo the merge by reverting the
+      merge commit itself. Effectively creating a new commit that reverses all
+      the relevant changes.
 9. Git Best Practices
-    1. All commit messages SHOULD follow the Commit Guidelines and format from
-       the official git
-       documentation:
-       <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project#_commit_guidelines>
-    2. You SHOULD never blindly commit all changes with "git commit -a". It is
-       RECOMMENDED you use "git add -i" to add individual changes to the staging
-       area so you are fully aware of what you are committing.
-    3. You SHOULD always use "--force-with-lease" when doing a force push. The
-       regular "--force" option is dangerous and destructive. More
-       information:
-       <https://developer.atlassian.com/blog/2015/04/force-with-lease/>
-    4. You SHOULD understand and be comfortable with
-       rebasing: <https://git-scm.com/book/en/v2/Git-Branching-Rebasing>
-    5. It is RECOMMENDED that you always do "git pull --rebase" instead of "git
-       pull" to avoid unnecessary merge commits. You can make this the default
-       behavior of "git pull" with "git config --global pull.rebase true".
-    6. It is RECOMMENDED that all branches be merged using "git merge --no-ff".
-       This makes sure the reference to the original branch is kept in the
-       commits, allows one to revert a merge by reverting a single merge commit,
-       and creates a merge commit to mark the integration of the branch with
-       master.
+   1. All commit messages SHOULD follow the Commit Guidelines and format from
+      the official git
+      documentation:
+      <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project#_commit_guidelines>
+   2. You SHOULD never blindly commit all changes with "git commit -a". It is
+      RECOMMENDED you use "git add -i" to add individual changes to the staging
+      area so you are fully aware of what you are committing.
+   3. You SHOULD always use "--force-with-lease" when doing a force push. The
+      regular "--force" option is dangerous and destructive. More
+      information:
+      <https://developer.atlassian.com/blog/2015/04/force-with-lease/>
+   4. You SHOULD understand and be comfortable with
+      rebasing: <https://git-scm.com/book/en/v2/Git-Branching-Rebasing>
+   5. It is RECOMMENDED that you always do "git pull --rebase" instead of "git
+      pull" to avoid unnecessary merge commits. You can make this the default
+      behavior of "git pull" with "git config --global pull.rebase true".
+   6. It is RECOMMENDED that all branches be merged using "git merge --no-ff".
+      This makes sure the reference to the original branch is kept in the
+      commits, allows one to revert a merge by reverting a single merge commit,
+      and creates a merge commit to mark the integration of the branch with
+      master.

-About
-----
+## About

 The Git Common-Flow specification is authored
 by [Jim Myhrberg](http://jimeh.me).
@@ -208,7 +204,6 @@ by [Jim Myhrberg](http://jimeh.me).
 If you'd like to leave feedback,
 please [open an issue on GitHub](https://github.com/jimeh/common-flow/issues).

-License
-------
+## License

 [Creative Commons - CC BY 3.0](http://creativecommons.org/licenses/by/3.0/)
--- a/src/content/spec/1.0.0-rc.4.md
+++ b/src/content/spec/1.0.0-rc.4.md
@@ -2,13 +2,12 @@
 title: Git Common-Flow 1.0.0-rc.4
 version: 1.0.0-rc.4
 ---
-Git Common-Flow 1.0.0-rc.4
-===========================
+
+# Git Common-Flow 1.0.0-rc.4

 <img src="/spec/1.0.0-rc.4.svg" alt="Git Common-Flow 1.0.0-rc.4 diagram" width="100%" />

-Summary
-------
+## Summary

 Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
@@ -20,8 +19,7 @@ In short, Common-Flow is essentially GitHub Flow with the addition of versioned
 releases, optional release branches, and without the requirement to deploy to
 production all the time.

-Terminology
-----------
+## Terminology

 - **Master Branch** - Must be named "master", must always have passing tests,
  and is not guaranteed to always work in production environments.
@@ -40,183 +38,182 @@ Terminology
 - **Release Branches** - Used both for short-term preparations of a release, and
  also for long-term maintenance of older version.

-Git Common-Flow Specification (Common-Flow)
-------------------------------------------
+## Git Common-Flow Specification (Common-Flow)

 The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
 "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in [RFC 2119](https://tools.ietf.org/html/rfc2119).

 1. TL;DR
-    1. Don't break the master branch.
-    2. A release is a git tag.
+   1. Don't break the master branch.
+   2. A release is a git tag.
 2. The Master Branch
-    1. A branch named "master" MUST exist and it MUST be referred to as the
-       "master branch".
-    2. The master branch MUST always be in a non-broken state with its test
-       suite passing.
-    4. The master branch IS NOT guaranteed to always work in production
-       environments. Despite test suites passing it may at times contain
-       unfinished work. Only releases may be considered safe for production use.
-    5. The master branch SHOULD always be in a "as near as possibly ready for
-       release/production" state to reduce any friction with creating a new
-       release.
+   1. A branch named "master" MUST exist and it MUST be referred to as the
+      "master branch".
+   2. The master branch MUST always be in a non-broken state with its test
+      suite passing.
+   3. The master branch IS NOT guaranteed to always work in production
+      environments. Despite test suites passing it may at times contain
+      unfinished work. Only releases may be considered safe for production use.
+   4. The master branch SHOULD always be in a "as near as possibly ready for
+      release/production" state to reduce any friction with creating a new
+      release.
 3. Change Branches
-    1. Each change (feature, bugfix, etc.) MUST be performed on separate
-       branches that SHOULD be referred to as "change branches".
-    2. All change branches MUST have descriptive names.
-    3. It is RECOMMENDED that you commit often locally, and that you try and
-       keep the commits reasonably structured to avoid a messy and confusing git
-       history.
-    4. You SHOULD regularly push your work to the same named branch on the
-       remote server.
-    5. You SHOULD create separate change branches for each distinctly different
-       change. You SHOULD NOT include multiple unrelated changes into a single
-       change branch.
-    6. When a change branch is created, the branch that it is created from
-       SHOULD be referred to as the "source branch". Each change branch also
-       needs a designated "merge target" branch, typically this will be the same
-       as the source branch.
-    7. Change branches MUST be regularly updated with any changes from their
-       source branch. This MUST be done by rebasing the change branch on top of
-       the source branch.
-    8. After updating a change branch from its source branch you MUST push the
-       change branch to the remote server. Due to the nature of rebasing, you
-       will be required to do a force push, and you MUST use the
-       "--force-with-lease" git push option when doing so instead of the regular
-       "--force".
-    9. If there is a truly valid technical reason to not use rebase when
-       updating change branches, then you can update change branches via merge
-       instead of rebase. The decision to use merge MUST only be taken after all
-       possible options to use rebase have been tried and failed. People not
-       understanding how to use rebase is NOT a valid reason to use merge. If
-       you do decide to use merge instead of rebase, you MUST NOT use a mixture
-       of both methods, pick one and stick to it.
+   1. Each change (feature, bugfix, etc.) MUST be performed on separate
+      branches that SHOULD be referred to as "change branches".
+   2. All change branches MUST have descriptive names.
+   3. It is RECOMMENDED that you commit often locally, and that you try and
+      keep the commits reasonably structured to avoid a messy and confusing git
+      history.
+   4. You SHOULD regularly push your work to the same named branch on the
+      remote server.
+   5. You SHOULD create separate change branches for each distinctly different
+      change. You SHOULD NOT include multiple unrelated changes into a single
+      change branch.
+   6. When a change branch is created, the branch that it is created from
+      SHOULD be referred to as the "source branch". Each change branch also
+      needs a designated "merge target" branch, typically this will be the same
+      as the source branch.
+   7. Change branches MUST be regularly updated with any changes from their
+      source branch. This MUST be done by rebasing the change branch on top of
+      the source branch.
+   8. After updating a change branch from its source branch you MUST push the
+      change branch to the remote server. Due to the nature of rebasing, you
+      will be required to do a force push, and you MUST use the
+      "--force-with-lease" git push option when doing so instead of the regular
+      "--force".
+   9. If there is a truly valid technical reason to not use rebase when
+      updating change branches, then you can update change branches via merge
+      instead of rebase. The decision to use merge MUST only be taken after all
+      possible options to use rebase have been tried and failed. People not
+      understanding how to use rebase is NOT a valid reason to use merge. If
+      you do decide to use merge instead of rebase, you MUST NOT use a mixture
+      of both methods, pick one and stick to it.
 4. Pull Requests
-    1. To merge a change branch into its merge target, you MUST open a "pull
-       request" (or equivalent).
-    2. The purpose of a pull request is to allow others to review your changes
-       and give feedback. You can then fix any issues, complaints, and more that
-       might arise, and then let people review again.
-    3. Before creating a pull request, it is RECOMMENDED that you consider the
-       state of your change branch's commit history. If it is messy and
-       confusing, it might be a good idea to rebase your branch with "git rebase
-       -i" to present a cleaner and easier to follow commit history for your
-       reviewers.
-    4. A pull request MUST only be merged when the change branch is up-to-date
-       with its source branch, the test suite is passing, and you and others are
-       happy with the change. This is especially important if the merge target
-       is the master branch.
-    5. To get feedback, help, or generally just discuss a change branch with
-       others, the RECOMMENDED way to do so is by creating a pull request and
-       discuss the changes with others there.
+   1. To merge a change branch into its merge target, you MUST open a "pull
+      request" (or equivalent).
+   2. The purpose of a pull request is to allow others to review your changes
+      and give feedback. You can then fix any issues, complaints, and more that
+      might arise, and then let people review again.
+   3. Before creating a pull request, it is RECOMMENDED that you consider the
+      state of your change branch's commit history. If it is messy and
+      confusing, it might be a good idea to rebase your branch with "git rebase
+      -i" to present a cleaner and easier to follow commit history for your
+      reviewers.
+   4. A pull request MUST only be merged when the change branch is up-to-date
+      with its source branch, the test suite is passing, and you and others are
+      happy with the change. This is especially important if the merge target
+      is the master branch.
+   5. To get feedback, help, or generally just discuss a change branch with
+      others, the RECOMMENDED way to do so is by creating a pull request and
+      discuss the changes with others there.
 5. Versioning
-    1. A "version string" is a typically mostly numeric string that identifies a
-       specific version of a project. The version string itself MUST NOT have a
-       "v" prefix, but the version string can be displayed with a "v" prefix to
-       indicate it is a version that is being referred to.
-    2. The source of truth for a project's version MUST be a git tag with a name
-       based on the version string. This kind of tag MUST be referred to as a
-       "release tag".
-    3. It is OPTIONAL, but RECOMMENDED to also keep the version string
-       hard-coded somewhere in the project code-base.
-    4. If you hard-code the version string into the code-base, it is RECOMMENDED
-       that you do so in a file called "VERSION" located in the root of the
-       project. But be mindful of the conventions of your programming language
-       and community when choosing if, where and how to hard-code the version
-       string.
-    5. If you are using a "VERSION" file in the root of the project, this file
-       MUST only contain the exact version string, meaning it MUST NOT have a
-       "v" prefix. For example "v2.11.4" is bad, and "2.11.4" is good.
-    6. It is OPTIONAL, but RECOMMENDED that that the version string follows
-       Semantic Versioning (<http://semver.org/>).
+   1. A "version string" is a typically mostly numeric string that identifies a
+      specific version of a project. The version string itself MUST NOT have a
+      "v" prefix, but the version string can be displayed with a "v" prefix to
+      indicate it is a version that is being referred to.
+   2. The source of truth for a project's version MUST be a git tag with a name
+      based on the version string. This kind of tag MUST be referred to as a
+      "release tag".
+   3. It is OPTIONAL, but RECOMMENDED to also keep the version string
+      hard-coded somewhere in the project code-base.
+   4. If you hard-code the version string into the code-base, it is RECOMMENDED
+      that you do so in a file called "VERSION" located in the root of the
+      project. But be mindful of the conventions of your programming language
+      and community when choosing if, where and how to hard-code the version
+      string.
+   5. If you are using a "VERSION" file in the root of the project, this file
+      MUST only contain the exact version string, meaning it MUST NOT have a
+      "v" prefix. For example "v2.11.4" is bad, and "2.11.4" is good.
+   6. It is OPTIONAL, but RECOMMENDED that that the version string follows
+      Semantic Versioning (<http://semver.org/>).
 6. Releases
-    1. To create a new release, you MUST create a git tag named as the exact
-       version string of the release. This kind of tag MUST be referred to as a
-       "release tag".
-    2. The release tag name can OPTIONALLY be prefixed with "v". For example the
-       tag name can be either "2.11.4" or "v2.11.4". It is however RECOMMENDED
-       that you do not use a "v" prefix. You MUST NOT use a mixture of "v"
-       prefixed and non-prefixed tags. Pick one form and stick to it.
-    3. If the version string is hard-coded into the code-base, you MUST create a
-       "version bump" commit which changes the hard-coded version string of the
-       project.
-    4. When using version bump commits, the release tag MUST be placed on the
-       version bump commit.
-    5. If you are not using a release branch, then the release tag, and if
-       relevant the version bump commit, MUST be created directly on the master
-       branch.
-    6. The version bump commit SHOULD have a commit message title of "Bump
-       version to VERSION". For example, if the new version string is "2.11.4",
-       the first line of the commit message SHOULD read: "Bump version to
-       2.11.4"
-    7. It is RECOMMENDED that release tags are lightweight tags, but you can
-       OPTIONALLY use annotated tags if you want to include changelog
-       information in the release tag itself.
-    8. If you use annotated release tags, the first line of the annotation
-       SHOULD read "Release VERSION". For example for version "2.11.4" the first
-       line of the tag annotation SHOULD read "Release 2.11.4". The second line
-       MUST be blank, and the changelog MUST start on the third line.
+   1. To create a new release, you MUST create a git tag named as the exact
+      version string of the release. This kind of tag MUST be referred to as a
+      "release tag".
+   2. The release tag name can OPTIONALLY be prefixed with "v". For example the
+      tag name can be either "2.11.4" or "v2.11.4". It is however RECOMMENDED
+      that you do not use a "v" prefix. You MUST NOT use a mixture of "v"
+      prefixed and non-prefixed tags. Pick one form and stick to it.
+   3. If the version string is hard-coded into the code-base, you MUST create a
+      "version bump" commit which changes the hard-coded version string of the
+      project.
+   4. When using version bump commits, the release tag MUST be placed on the
+      version bump commit.
+   5. If you are not using a release branch, then the release tag, and if
+      relevant the version bump commit, MUST be created directly on the master
+      branch.
+   6. The version bump commit SHOULD have a commit message title of "Bump
+      version to VERSION". For example, if the new version string is "2.11.4",
+      the first line of the commit message SHOULD read: "Bump version to
+      2.11.4"
+   7. It is RECOMMENDED that release tags are lightweight tags, but you can
+      OPTIONALLY use annotated tags if you want to include changelog
+      information in the release tag itself.
+   8. If you use annotated release tags, the first line of the annotation
+      SHOULD read "Release VERSION". For example for version "2.11.4" the first
+      line of the tag annotation SHOULD read "Release 2.11.4". The second line
+      MUST be blank, and the changelog MUST start on the third line.
 7. Short-Term Release Branches
-    1. Any branch that has a name starting with "release-" SHOULD be referred to
-       as a "release branch".
-    2. Any release branch which has a name ending with a specific version
-       string, MUST be referred to as a "short-term release branch".
-    3. Use of short-term release branches are OPTIONAL, and intended to be used
-       to create a specific versioned release.
-    4. A short-term release branch is RECOMMENDED if there is a lengthy
-       pre-release verification process to avoid a code freeze on the master
-       branch.
-    5. Short-term release branches MUST have a name of "release-VERSION". For
-       example for version "2.11.4" the release branch name MUST be
-       "release-2.11.4".
-    6. When using a short-term release branch to create a release, the release
-       tag and if used, version bump commit, MUST be placed directly on the
-       short-term release branch itself.
-    7. Only very minor changes should be performed on a short-term release
-       branch directly. Any larger changes SHOULD be done in the master branch,
-       and SHOULD be pulled into the release branch by rebasing it on top of the
-       master branch the same way a change branch pulls in updates from its
-       source branch.
-    8. After a release tag has been created, the release branch MUST be merged
-       back into its source branch and then deleted. Typically the source branch
-       will be the master branch.
+   1. Any branch that has a name starting with "release-" SHOULD be referred to
+      as a "release branch".
+   2. Any release branch which has a name ending with a specific version
+      string, MUST be referred to as a "short-term release branch".
+   3. Use of short-term release branches are OPTIONAL, and intended to be used
+      to create a specific versioned release.
+   4. A short-term release branch is RECOMMENDED if there is a lengthy
+      pre-release verification process to avoid a code freeze on the master
+      branch.
+   5. Short-term release branches MUST have a name of "release-VERSION". For
+      example for version "2.11.4" the release branch name MUST be
+      "release-2.11.4".
+   6. When using a short-term release branch to create a release, the release
+      tag and if used, version bump commit, MUST be placed directly on the
+      short-term release branch itself.
+   7. Only very minor changes should be performed on a short-term release
+      branch directly. Any larger changes SHOULD be done in the master branch,
+      and SHOULD be pulled into the release branch by rebasing it on top of the
+      master branch the same way a change branch pulls in updates from its
+      source branch.
+   8. After a release tag has been created, the release branch MUST be merged
+      back into its source branch and then deleted. Typically the source branch
+      will be the master branch.
 8. Long-term Release Branches
-    1. Any release branch which has a name ending with a non-specific version
-       string, MUST be referred to as a "long-term release branch". For example
-       "release-2.11" is a long-term release branch, while "release-2.11.4" is a
-       short-term release branch.
-    2. Use of long-term release branches are OPTIONAL, and intended for work on
-       versions which are not currently part of the master branch. Typically
-       this is useful when you need to create a new maintenance release for a
-       older version.
-    3. A long-term release branch MUST have a name with a non-specific version
-       number. For example a long-term release branch for creating new 2.9.x
-       releases MUST be named "release-2.9".
-    4. Long-term release branches for maintenance releases of older versions
-       MUST be created from the relevant release tag. For example if the master
-       branch is on version 2.11.4 and there is a security fix for all 2.9.x
-       releases, the latest of which is "2.9.7". Create a new branch called
-       "release-2.9" off of the "2.9.7" release tag. The security fix release
-       will then end up being version "2.9.8".
-    5. To create a new release from a long-term release branch, you MUST follow
-       the same process as a release from the master branch, except the
-       long-term release branch takes the place of the master branch.
-    7. A long-term release branch should be treated with the same respect as the
-       master branch. It is effectively the master branch for the release series
-       in question. Meaning it MUST always be in a non-broken state, MUST NOT be
-       force pushed to, etc.
+   1. Any release branch which has a name ending with a non-specific version
+      string, MUST be referred to as a "long-term release branch". For example
+      "release-2.11" is a long-term release branch, while "release-2.11.4" is a
+      short-term release branch.
+   2. Use of long-term release branches are OPTIONAL, and intended for work on
+      versions which are not currently part of the master branch. Typically
+      this is useful when you need to create a new maintenance release for a
+      older version.
+   3. A long-term release branch MUST have a name with a non-specific version
+      number. For example a long-term release branch for creating new 2.9.x
+      releases MUST be named "release-2.9".
+   4. Long-term release branches for maintenance releases of older versions
+      MUST be created from the relevant release tag. For example if the master
+      branch is on version 2.11.4 and there is a security fix for all 2.9.x
+      releases, the latest of which is "2.9.7". Create a new branch called
+      "release-2.9" off of the "2.9.7" release tag. The security fix release
+      will then end up being version "2.9.8".
+   5. To create a new release from a long-term release branch, you MUST follow
+      the same process as a release from the master branch, except the
+      long-term release branch takes the place of the master branch.
+   6. A long-term release branch should be treated with the same respect as the
+      master branch. It is effectively the master branch for the release series
+      in question. Meaning it MUST always be in a non-broken state, MUST NOT be
+      force pushed to, etc.
 9. Bug Fixes & Rollback
-    1. You MUST NOT under any circumstances force push to the master branch or
-       to long-term release branches.
-    2. If a change branch which has been merged into the master branch is found
-       to have a bug in it, the bug fix work MUST be done as a new separate
-       change branch and MUST follow the same workflow as any other change
-       branch.
-    3. If a change branch is wrongfully merged into master, or for any other
-       reason the merge must be undone, you MUST undo the merge by reverting the
-       merge commit itself. Effectively creating a new commit that reverses all
-       the relevant changes.
+   1. You MUST NOT under any circumstances force push to the master branch or
+      to long-term release branches.
+   2. If a change branch which has been merged into the master branch is found
+      to have a bug in it, the bug fix work MUST be done as a new separate
+      change branch and MUST follow the same workflow as any other change
+      branch.
+   3. If a change branch is wrongfully merged into master, or for any other
+      reason the merge must be undone, you MUST undo the merge by reverting the
+      merge commit itself. Effectively creating a new commit that reverses all
+      the relevant changes.
 10. Git Best Practices
    1. All commit messages SHOULD follow the Commit Guidelines and format from
       the official git
@@ -241,8 +238,7 @@ interpreted as described in [RFC 2119](https://tools.ietf.org/html/rfc2119).
       and creates a merge commit to mark the integration of the branch with
       master.

-FAQ
---
+## FAQ

 ### Why use Common-Flow instead of Git Flow, and how does it differ?

@@ -325,8 +321,7 @@ complicated task and you're short on time, a short-term release branch gives you
 a instant fix to the situation at hand, and let's you resolve the issues with
 the master branch when you have more time on your hands.

-About
-----
+## About

 The Git Common-Flow specification is authored
 by [Jim Myhrberg](http://jimeh.me).
@@ -334,7 +329,6 @@ by [Jim Myhrberg](http://jimeh.me).
 If you'd like to leave feedback,
 please [open an issue on GitHub](https://github.com/jimeh/common-flow/issues).

-License
-------
+## License

 [Creative Commons - CC BY 3.0](http://creativecommons.org/licenses/by/3.0/)
--- a/src/content/spec/1.0.0-rc.5.md
+++ b/src/content/spec/1.0.0-rc.5.md
@@ -2,13 +2,12 @@
 title: Git Common-Flow 1.0.0-rc.5
 version: 1.0.0-rc.5
 ---
-Git Common-Flow 1.0.0-rc.5
-===========================
+
+# Git Common-Flow 1.0.0-rc.5

 <img src="/spec/1.0.0-rc.5.svg" alt="Git Common-Flow 1.0.0-rc.5 diagram" width="100%" />

-Introduction
------------
+## Introduction

 Common-Flow is an attempt to gather a sensible selection of the most common
 usage patterns of git into a single and concise specification. It is based on
@@ -20,8 +19,7 @@ In short, Common-Flow is essentially GitHub Flow with the addition of versioned
 releases, optional release branches, and without the requirement to deploy to
 production all the time.

-Summary
-------
+## Summary

 - The "master" branch is the mainline branch with latest changes, and must not
  be broken.
@@ -34,8 +32,7 @@ Summary
 - Release branches can be used to avoid change freezes on master. They are not
  required, instead they are available if you need them.

-Terminology
-----------
+## Terminology

 - **Master Branch** - Must be named "master", must always have passing tests,
  and is not guaranteed to always work in production environments.
@@ -54,184 +51,183 @@ Terminology
 - **Release Branches** - Used both for short-term preparations of a release, and
  also for long-term maintenance of older version.

-Git Common-Flow Specification (Common-Flow)
-------------------------------------------
+## Git Common-Flow Specification (Common-Flow)

 The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
 "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be
 interpreted as described in [RFC 2119](https://tools.ietf.org/html/rfc2119).

 1. TL;DR
-    1. Do not break the master branch.
-    2. A release is a git tag.
+   1. Do not break the master branch.
+   2. A release is a git tag.
 2. The Master Branch
-    1. A branch named "master" MUST exist and it MUST be referred to as the
-       "master branch".
-    2. The master branch MUST always be in a non-broken state with its test
-       suite passing.
-    4. The master branch IS NOT guaranteed to always work in production
-       environments. Despite test suites passing it may at times contain
-       unfinished work. Only releases may be considered safe for production use.
-    5. The master branch SHOULD always be in a "as near as possibly ready for
-       release/production" state to reduce any friction with creating a new
-       release.
+   1. A branch named "master" MUST exist and it MUST be referred to as the
+      "master branch".
+   2. The master branch MUST always be in a non-broken state with its test
+      suite passing.
+   3. The master branch IS NOT guaranteed to always work in production
+      environments. Despite test suites passing it may at times contain
+      unfinished work. Only releases may be considered safe for production use.
+   4. The master branch SHOULD always be in a "as near as possibly ready for
+      release/production" state to reduce any friction with creating a new
+      release.
 3. Change Branches
-    1. Each change (feature, bugfix, etc.) MUST be performed on separate
-       branches that SHOULD be referred to as "change branches".
-    2. All change branches MUST have descriptive names.
-    3. It is RECOMMENDED that you commit often locally, and that you try and
-       keep the commits reasonably structured to avoid a messy and confusing git
-       history.
-    4. You SHOULD regularly push your work to the same named branch on the
-       remote server.
-    5. You SHOULD create separate change branches for each distinctly different
-       change. You SHOULD NOT include multiple unrelated changes into a single
-       change branch.
-    6. When a change branch is created, the branch that it is created from
-       SHOULD be referred to as the "source branch". Each change branch also
-       needs a designated "merge target" branch, typically this will be the same
-       as the source branch.
-    7. Change branches MUST be regularly updated with any changes from their
-       source branch. This MUST be done by rebasing the change branch on top of
-       the source branch.
-    8. After updating a change branch from its source branch you MUST push the
-       change branch to the remote server. Due to the nature of rebasing, you
-       will be required to do a force push, and you MUST use the
-       "--force-with-lease" git push option when doing so instead of the regular
-       "--force".
-    9. If there is a truly valid technical reason to not use rebase when
-       updating change branches, then you can update change branches via merge
-       instead of rebase. The decision to use merge MUST only be taken after all
-       possible options to use rebase have been tried and failed. People not
-       understanding how to use rebase is NOT a valid reason to use merge. If
-       you do decide to use merge instead of rebase, you MUST NOT use a mixture
-       of both methods, pick one and stick to it.
+   1. Each change (feature, bugfix, etc.) MUST be performed on separate
+      branches that SHOULD be referred to as "change branches".
+   2. All change branches MUST have descriptive names.
+   3. It is RECOMMENDED that you commit often locally, and that you try and
+      keep the commits reasonably structured to avoid a messy and confusing git
+      history.
+   4. You SHOULD regularly push your work to the same named branch on the
+      remote server.
+   5. You SHOULD create separate change branches for each distinctly different
+      change. You SHOULD NOT include multiple unrelated changes into a single
+      change branch.
+   6. When a change branch is created, the branch that it is created from
+      SHOULD be referred to as the "source branch". Each change branch also
+      needs a designated "merge target" branch, typically this will be the same
+      as the source branch.
+   7. Change branches MUST be regularly updated with any changes from their
+      source branch. This MUST be done by rebasing the change branch on top of
+      the source branch.
+   8. After updating a change branch from its source branch you MUST push the
+      change branch to the remote server. Due to the nature of rebasing, you
+      will be required to do a force push, and you MUST use the
+      "--force-with-lease" git push option when doing so instead of the regular
+      "--force".
+   9. If there is a truly valid technical reason to not use rebase when
+      updating change branches, then you can update change branches via merge
+      instead of rebase. The decision to use merge MUST only be taken after all
+      possible options to use rebase have been tried and failed. People not
+      understanding how to use rebase is NOT a valid reason to use merge. If
+      you do decide to use merge instead of rebase, you MUST NOT use a mixture
+      of both methods, pick one and stick to it.
 4. Pull Requests
-    1. To merge a change branch into its merge target, you MUST open a "pull
-       request" (or equivalent).
-    2. The purpose of a pull request is to allow others to review your changes
-       and give feedback. You can then fix any issues, complaints, and more that
-       might arise, and then let people review again.
-    3. Before creating a pull request, it is RECOMMENDED that you consider the
-       state of your change branch's commit history. If it is messy and
-       confusing, it might be a good idea to rebase your branch with "git rebase
-       -i" to present a cleaner and easier to follow commit history for your
-       reviewers.
-    4. A pull request MUST only be merged when the change branch is up-to-date
-       with its source branch, the test suite is passing, and you and others are
-       happy with the change. This is especially important if the merge target
-       is the master branch.
-    5. To get feedback, help, or generally just discuss a change branch with
-       others, it is RECOMMENDED you create a pull request and discuss the
-       changes with others there. This leaves a clear and visible history of
-       how, when, and why the code looks and behaves the way it does.
+   1. To merge a change branch into its merge target, you MUST open a "pull
+      request" (or equivalent).
+   2. The purpose of a pull request is to allow others to review your changes
+      and give feedback. You can then fix any issues, complaints, and more that
+      might arise, and then let people review again.
+   3. Before creating a pull request, it is RECOMMENDED that you consider the
+      state of your change branch's commit history. If it is messy and
+      confusing, it might be a good idea to rebase your branch with "git rebase
+      -i" to present a cleaner and easier to follow commit history for your
+      reviewers.
+   4. A pull request MUST only be merged when the change branch is up-to-date
+      with its source branch, the test suite is passing, and you and others are
+      happy with the change. This is especially important if the merge target
+      is the master branch.
+   5. To get feedback, help, or generally just discuss a change branch with
+      others, it is RECOMMENDED you create a pull request and discuss the
+      changes with others there. This leaves a clear and visible history of
+      how, when, and why the code looks and behaves the way it does.
 5. Versioning
-    1. A "version string" is a typically mostly numeric string that identifies a
-       specific version of a project. The version string itself MUST NOT have a
-       "v" prefix, but the version string can be displayed with a "v" prefix to
-       indicate it is a version that is being referred to.
-    2. The source of truth for a project's version MUST be a git tag with a name
-       based on the version string. This kind of tag MUST be referred to as a
-       "release tag".
-    3. It is OPTIONAL, but RECOMMENDED to also keep the version string
-       hard-coded somewhere in the project code-base.
-    4. If you hard-code the version string into the code-base, it is RECOMMENDED
-       that you do so in a file called "VERSION" located in the root of the
-       project. But be mindful of the conventions of your programming language
-       and community when choosing if, where and how to hard-code the version
-       string.
-    5. If you are using a "VERSION" file in the root of the project, this file
-       MUST only contain the exact version string, meaning it MUST NOT have a
-       "v" prefix. For example "v2.11.4" is bad, and "2.11.4" is good.
-    6. It is OPTIONAL, but RECOMMENDED that that the version string follows
-       Semantic Versioning (<http://semver.org/>).
+   1. A "version string" is a typically mostly numeric string that identifies a
+      specific version of a project. The version string itself MUST NOT have a
+      "v" prefix, but the version string can be displayed with a "v" prefix to
+      indicate it is a version that is being referred to.
+   2. The source of truth for a project's version MUST be a git tag with a name
+      based on the version string. This kind of tag MUST be referred to as a
+      "release tag".
+   3. It is OPTIONAL, but RECOMMENDED to also keep the version string
+      hard-coded somewhere in the project code-base.
+   4. If you hard-code the version string into the code-base, it is RECOMMENDED
+      that you do so in a file called "VERSION" located in the root of the
+      project. But be mindful of the conventions of your programming language
+      and community when choosing if, where and how to hard-code the version
+      string.
+   5. If you are using a "VERSION" file in the root of the project, this file
+      MUST only contain the exact version string, meaning it MUST NOT have a
+      "v" prefix. For example "v2.11.4" is bad, and "2.11.4" is good.
+   6. It is OPTIONAL, but RECOMMENDED that that the version string follows
+      Semantic Versioning (<http://semver.org/>).
 6. Releases
-    1. To create a new release, you MUST create a git tag named as the exact
-       version string of the release. This kind of tag MUST be referred to as a
-       "release tag".
-    2. The release tag name can OPTIONALLY be prefixed with "v". For example the
-       tag name can be either "2.11.4" or "v2.11.4". It is however RECOMMENDED
-       that you do not use a "v" prefix. You MUST NOT use a mixture of "v"
-       prefixed and non-prefixed tags. Pick one form and stick to it.
-    3. If the version string is hard-coded into the code-base, you MUST create a
-       "version bump" commit which changes the hard-coded version string of the
-       project.
-    4. When using version bump commits, the release tag MUST be placed on the
-       version bump commit.
-    5. If you are not using a release branch, then the release tag, and if
-       relevant the version bump commit, MUST be created directly on the master
-       branch.
-    6. The version bump commit SHOULD have a commit message title of "Bump
-       version to VERSION". For example, if the new version string is "2.11.4",
-       the first line of the commit message SHOULD read: "Bump version to
-       2.11.4"
-    7. It is RECOMMENDED that release tags are lightweight tags, but you can
-       OPTIONALLY use annotated tags if you want to include changelog
-       information in the release tag itself.
-    8. If you use annotated release tags, the first line of the annotation
-       SHOULD read "Release VERSION". For example for version "2.11.4" the first
-       line of the tag annotation SHOULD read "Release 2.11.4". The second line
-       MUST be blank, and the changelog MUST start on the third line.
+   1. To create a new release, you MUST create a git tag named as the exact
+      version string of the release. This kind of tag MUST be referred to as a
+      "release tag".
+   2. The release tag name can OPTIONALLY be prefixed with "v". For example the
+      tag name can be either "2.11.4" or "v2.11.4". It is however RECOMMENDED
+      that you do not use a "v" prefix. You MUST NOT use a mixture of "v"
+      prefixed and non-prefixed tags. Pick one form and stick to it.
+   3. If the version string is hard-coded into the code-base, you MUST create a
+      "version bump" commit which changes the hard-coded version string of the
+      project.
+   4. When using version bump commits, the release tag MUST be placed on the
+      version bump commit.
+   5. If you are not using a release branch, then the release tag, and if
+      relevant the version bump commit, MUST be created directly on the master
+      branch.
+   6. The version bump commit SHOULD have a commit message title of "Bump
+      version to VERSION". For example, if the new version string is "2.11.4",
+      the first line of the commit message SHOULD read: "Bump version to
+      2.11.4"
+   7. It is RECOMMENDED that release tags are lightweight tags, but you can
+      OPTIONALLY use annotated tags if you want to include changelog
+      information in the release tag itself.
+   8. If you use annotated release tags, the first line of the annotation
+      SHOULD read "Release VERSION". For example for version "2.11.4" the first
+      line of the tag annotation SHOULD read "Release 2.11.4". The second line
+      MUST be blank, and the changelog MUST start on the third line.
 7. Short-Term Release Branches
-    1. Any branch that has a name starting with "release-" SHOULD be referred to
-       as a "release branch".
-    2. Any release branch which has a name ending with a specific version
-       string, MUST be referred to as a "short-term release branch".
-    3. Use of short-term release branches are OPTIONAL, and intended to be used
-       to create a specific versioned release.
-    4. A short-term release branch is RECOMMENDED if there is a lengthy
-       pre-release verification process to avoid a code freeze on the master
-       branch.
-    5. Short-term release branches MUST have a name of "release-VERSION". For
-       example for version "2.11.4" the release branch name MUST be
-       "release-2.11.4".
-    6. When using a short-term release branch to create a release, the release
-       tag and if used, version bump commit, MUST be placed directly on the
-       short-term release branch itself.
-    7. Only very minor changes should be performed on a short-term release
-       branch directly. Any larger changes SHOULD be done in the master branch,
-       and SHOULD be pulled into the release branch by rebasing it on top of the
-       master branch the same way a change branch pulls in updates from its
-       source branch.
-    8. After a release tag has been created, the release branch MUST be merged
-       back into its source branch and then deleted. Typically the source branch
-       will be the master branch.
+   1. Any branch that has a name starting with "release-" SHOULD be referred to
+      as a "release branch".
+   2. Any release branch which has a name ending with a specific version
+      string, MUST be referred to as a "short-term release branch".
+   3. Use of short-term release branches are OPTIONAL, and intended to be used
+      to create a specific versioned release.
+   4. A short-term release branch is RECOMMENDED if there is a lengthy
+      pre-release verification process to avoid a code freeze on the master
+      branch.
+   5. Short-term release branches MUST have a name of "release-VERSION". For
+      example for version "2.11.4" the release branch name MUST be
+      "release-2.11.4".
+   6. When using a short-term release branch to create a release, the release
+      tag and if used, version bump commit, MUST be placed directly on the
+      short-term release branch itself.
+   7. Only very minor changes should be performed on a short-term release
+      branch directly. Any larger changes SHOULD be done in the master branch,
+      and SHOULD be pulled into the release branch by rebasing it on top of the
+      master branch the same way a change branch pulls in updates from its
+      source branch.
+   8. After a release tag has been created, the release branch MUST be merged
+      back into its source branch and then deleted. Typically the source branch
+      will be the master branch.
 8. Long-term Release Branches
-    1. Any release branch which has a name ending with a non-specific version
-       string, MUST be referred to as a "long-term release branch". For example
-       "release-2.11" is a long-term release branch, while "release-2.11.4" is a
-       short-term release branch.
-    2. Use of long-term release branches are OPTIONAL, and intended for work on
-       versions which are not currently part of the master branch. Typically
-       this is useful when you need to create a new maintenance release for a
-       older version.
-    3. A long-term release branch MUST have a name with a non-specific version
-       number. For example a long-term release branch for creating new 2.9.x
-       releases MUST be named "release-2.9".
-    4. Long-term release branches for maintenance releases of older versions
-       MUST be created from the relevant release tag. For example if the master
-       branch is on version 2.11.4 and there is a security fix for all 2.9.x
-       releases, the latest of which is "2.9.7". Create a new branch called
-       "release-2.9" from the "2.9.7" release tag. The security fix release will
-       then end up being version "2.9.8".
-    5. To create a new release from a long-term release branch, you MUST follow
-       the same process as a release from the master branch, except the
-       long-term release branch takes the place of the master branch.
-    7. A long-term release branch should be treated with the same respect as the
-       master branch. It is effectively the master branch for the release series
-       in question. Meaning it MUST always be in a non-broken state, MUST NOT be
-       force pushed to, etc.
+   1. Any release branch which has a name ending with a non-specific version
+      string, MUST be referred to as a "long-term release branch". For example
+      "release-2.11" is a long-term release branch, while "release-2.11.4" is a
+      short-term release branch.
+   2. Use of long-term release branches are OPTIONAL, and intended for work on
+      versions which are not currently part of the master branch. Typically
+      this is useful when you need to create a new maintenance release for a
+      older version.
+   3. A long-term release branch MUST have a name with a non-specific version
+      number. For example a long-term release branch for creating new 2.9.x
+      releases MUST be named "release-2.9".
+   4. Long-term release branches for maintenance releases of older versions
+      MUST be created from the relevant release tag. For example if the master
+      branch is on version 2.11.4 and there is a security fix for all 2.9.x
+      releases, the latest of which is "2.9.7". Create a new branch called
+      "release-2.9" from the "2.9.7" release tag. The security fix release will
+      then end up being version "2.9.8".
+   5. To create a new release from a long-term release branch, you MUST follow
+      the same process as a release from the master branch, except the
+      long-term release branch takes the place of the master branch.
+   6. A long-term release branch should be treated with the same respect as the
+      master branch. It is effectively the master branch for the release series
+      in question. Meaning it MUST always be in a non-broken state, MUST NOT be
+      force pushed to, etc.
 9. Bug Fixes & Rollback
-    1. You MUST NOT under any circumstances force push to the master branch or
-       to long-term release branches.
-    2. If a change branch which has been merged into the master branch is found
-       to have a bug in it, the bug fix work MUST be done as a new separate
-       change branch and MUST follow the same workflow as any other change
-       branch.
-    3. If a change branch is wrongfully merged into master, or for any other
-       reason the merge must be undone, you MUST undo the merge by reverting the
-       merge commit itself. Effectively creating a new commit that reverses all
-       the relevant changes.
+   1. You MUST NOT under any circumstances force push to the master branch or
+      to long-term release branches.
+   2. If a change branch which has been merged into the master branch is found
+      to have a bug in it, the bug fix work MUST be done as a new separate
+      change branch and MUST follow the same workflow as any other change
+      branch.
+   3. If a change branch is wrongfully merged into master, or for any other
+      reason the merge must be undone, you MUST undo the merge by reverting the
+      merge commit itself. Effectively creating a new commit that reverses all
+      the relevant changes.
 10. Git Best Practices
    1. All commit messages SHOULD follow the Commit Guidelines and format from
       the official git
@@ -256,8 +252,7 @@ interpreted as described in [RFC 2119](https://tools.ietf.org/html/rfc2119).
       and creates a merge commit to mark the integration of the branch with
       master.

-FAQ
---
+## FAQ

 ### Why use Common-Flow instead of Git Flow, and how does it differ?

@@ -346,8 +341,7 @@ complicated task and you're short on time, a short-term release branch gives you
 a instant fix to the situation at hand, and let's you resolve the issues with
 the master branch when you have more time on your hands.

-About
-----
+## About

 The Git Common-Flow specification is authored
 by [Jim Myhrberg](https://jimeh.me/).
@@ -355,7 +349,6 @@ by [Jim Myhrberg](https://jimeh.me/).
 If you'd like to leave feedback,
 please [open an issue on GitHub](https://github.com/jimeh/common-flow/issues).

-License
-------
+## License

 [Creative Commons - CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,76 @@
+---
+import "@fontsource-variable/bricolage-grotesque";
+import "@fontsource-variable/dm-sans";
+import "@fontsource-variable/jetbrains-mono";
+import "../styles/global.css";
+import { config } from "../config";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description = config.description } = Astro.props;
+const fullTitle = title === config.title ? title : `${title} | ${config.title}`;
+const canonicalUrl = Astro.url.href;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="canonical" href={canonicalUrl} />
+
+    <title>{fullTitle}</title>
+    <meta name="description" content={description} />
+    <meta name="author" content={config.author} />
+
+    <!-- Open Graph -->
+    <meta property="og:title" content={fullTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalUrl} />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={fullTitle} />
+    <meta name="twitter:description" content={description} />
+
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+    <!-- Prevent flash of wrong theme -->
+    <script is:inline>
+      (function () {
+        const mode = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (mode === "dark" || (mode !== "light" && prefersDark)) {
+          document.documentElement.classList.add("dark");
+        }
+      })();
+    </script>
+  </head>
+  <body class="min-h-screen">
+    <slot />
+
+    <!-- Re-init theme on Astro page transitions -->
+    <script>
+      document.addEventListener("astro:after-swap", () => {
+        const mode = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (mode === "dark" || (mode !== "light" && prefersDark)) {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      });
+    </script>
+  </body>
+</html>
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -1,116 +0,0 @@
---
-import "../styles/global.css";
-import { config } from "../config";
-import Sidebar from "../components/Sidebar.astro";
-import MenuToggle from "../components/MenuToggle.astro";
-
-interface Props {
-  title: string;
-  description?: string;
-  version?: string;
-}
-
-const { title, description = config.description, version } = Astro.props;
-const fullTitle = title === config.title ? title : `${title} | ${config.title}`;
---
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="canonical" href={Astro.url} />
-
-    <title>{fullTitle}</title>
-    <meta name="description" content={description} />
-    <meta name="author" content={config.author} />
-
-    <!-- Open Graph -->
-    <meta property="og:title" content={fullTitle} />
-    <meta property="og:description" content={description} />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content={Astro.url} />
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:title" content={fullTitle} />
-    <meta name="twitter:description" content={description} />
-
-    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
-      rel="stylesheet"
-    />
-
-    <!-- Prevent flash of wrong theme -->
-    <script is:inline>
-      (function () {
-        const theme = localStorage.getItem("theme");
-        if (
-          theme === "dark" ||
-          (!theme &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches)
-        ) {
-          document.documentElement.classList.add("dark");
-        }
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="layout">
-      <MenuToggle />
-      <Sidebar currentVersion={version} />
-
-      <div id="main">
-        <div class="content">
-          <slot />
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
-
-<style>
-  #layout {
-    position: relative;
-    left: 0;
-    padding-left: 0;
-    transition: all 0.2s ease-out;
-  }
-
-  #main {
-    min-height: 100vh;
-  }
-
-  .content {
-    margin: 0 auto;
-    padding: 0 2em;
-    max-width: 800px;
-    margin-bottom: 50px;
-    line-height: 1.6em;
-    padding-top: 80px;
-  }
-
-  /* Desktop layout */
-  @media (min-width: 48em) {
-    #layout {
-      padding-left: 150px;
-      left: 0;
-    }
-
-    .content {
-      padding-left: 2em;
-      padding-right: 2em;
-    }
-  }
-
-  /* Mobile: when menu is active */
-  @media (max-width: 48em) {
-    :global(#layout.active) {
-      position: relative;
-      left: 150px;
-    }
-  }
-</style>
--- a/src/layouts/SpecLayout.astro
+++ b/src/layouts/SpecLayout.astro
@@ -0,0 +1,56 @@
+---
+import type { CollectionEntry } from "astro:content";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+import BaseLayout from "./BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Hero from "../components/Hero.astro";
+import AboutSection from "../components/AboutSection.astro";
+import SpecSection from "../components/SpecSection.astro";
+import FAQSection from "../components/FAQSection.astro";
+import Footer from "../components/Footer.astro";
+import { parseSpecContent } from "../utils/parseSpecContent";
+
+interface Props {
+  spec: CollectionEntry<"spec">;
+}
+
+const { spec } = Astro.props;
+const version = spec.data.version;
+
+// Read the markdown file
+const filePath = path.join(process.cwd(), "src/content/spec", `${version}.md`);
+const content = fs.readFileSync(filePath, "utf-8");
+
+// Remove frontmatter
+const markdown = content.replace(/^---[\s\S]*?---\n/, "");
+
+// Parse the content into sections (handles markdown -> HTML internally)
+const parsed = await parseSpecContent(markdown, version);
+---
+
+<BaseLayout title={spec.data.title}>
+  <Header version={version} />
+
+  <main>
+    <Hero version={version} svgPath={parsed.svgPath} />
+
+    <AboutSection
+      introduction={parsed.introduction}
+      summary={parsed.summary}
+      license={parsed.license}
+    />
+
+    <SpecSection
+      terminology={parsed.terminology}
+      terminologyTitle={parsed.terminologyTitle}
+      specification={parsed.specification}
+      tocItems={parsed.tocItems}
+    />
+
+    <FAQSection items={parsed.faq} />
+  </main>
+
+  <Footer />
+</BaseLayout>
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,48 +1,32 @@
 ---
-import Default from "../layouts/Default.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
 ---

-<Default title="Page Not Found">
-  <div class="not-found">
-    <h1>404</h1>
-    <p>Page not found.</p>
-    <p>
-      <a href="/">Go to the homepage</a>
-    </p>
+<BaseLayout title="Page Not Found">
+  <div class="flex flex-col items-center justify-center min-h-screen p-8">
+    <div class="text-center">
+      <h1
+        class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
+               text-gray-300 dark:text-neutral-700"
+      >
+        404
+      </h1>
+      <p class="text-xl mb-2 text-gray-600 dark:text-neutral-400">
+        Page not found
+      </p>
+      <p class="text-gray-500 dark:text-neutral-500">
+        The page you're looking for doesn't exist.
+      </p>
+      <a
+        href="/"
+        class="inline-flex items-center justify-center gap-2 mt-8
+               px-5 py-2.5 text-sm font-medium rounded-lg
+               transition-all cursor-pointer
+               bg-sky-600 text-white
+               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
+      >
+        Go to homepage
+      </a>
+    </div>
  </div>
-</Default>
-
-<style>
-  .not-found {
-    text-align: center;
-    padding-top: 4rem;
-  }
-
-  .not-found h1 {
-    font-size: 6rem;
-    margin-bottom: 0.5rem;
-    color: #999;
-  }
-
-  .dark .not-found h1 {
-    color: #666;
-  }
-
-  .not-found p {
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-  }
-
-  .not-found a {
-    color: #1f8dd6;
-    text-decoration: none;
-  }
-
-  .not-found a:hover {
-    text-decoration: underline;
-  }
-
-  .dark .not-found a {
-    color: #4da6e8;
-  }
-</style>
+</BaseLayout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,17 @@
 ---
+import { getCollection } from "astro:content";
+
+import SpecLayout from "../layouts/SpecLayout.astro";
 import { config } from "../config";

-// Redirect to current version
-return Astro.redirect(`/spec/${config.currentVersion}`);
+// Render the current/latest version
+const version = config.currentVersion;
+const specs = await getCollection("spec");
+const spec = specs.find((s) => s.data.version === version);
+
+if (!spec) {
+  throw new Error(`Spec version ${version} not found`);
+}
 ---
+
+<SpecLayout spec={spec} />
--- a/src/pages/spec/[version].astro
+++ b/src/pages/spec/[version].astro
@@ -1,6 +1,7 @@
 ---
-import { getCollection, render } from "astro:content";
-import Default from "../../layouts/Default.astro";
+import { getCollection } from "astro:content";
+
+import SpecLayout from "../../layouts/SpecLayout.astro";

 export async function getStaticPaths() {
  const specs = await getCollection("spec");
@@ -11,92 +12,6 @@ export async function getStaticPaths() {
 }

 const { spec } = Astro.props;
-const { Content } = await render(spec);
 ---

-<Default title={spec.data.title} version={spec.data.version}>
-  <article class="spec-content">
-    <Content />
-  </article>
-</Default>
-
-<style is:global>
-  .spec-content {
-    /* Prose-like styling for spec content */
-  }
-
-  .spec-content h1 {
-    margin-bottom: 0.5em;
-  }
-
-  .spec-content h2 {
-    margin-top: 2em;
-    margin-bottom: 0.75em;
-    padding-bottom: 0.3em;
-    border-bottom: 1px solid #eee;
-  }
-
-  .dark .spec-content h2 {
-    border-bottom-color: #333;
-  }
-
-  .spec-content h3 {
-    margin-top: 1.5em;
-    margin-bottom: 0.5em;
-  }
-
-  .spec-content p {
-    margin-bottom: 1em;
-  }
-
-  .spec-content ul,
-  .spec-content ol {
-    margin-bottom: 1em;
-    padding-left: 2em;
-  }
-
-  .spec-content li {
-    margin-bottom: 0.25em;
-  }
-
-  .spec-content a {
-    color: #1f8dd6;
-    text-decoration: none;
-  }
-
-  .spec-content a:hover {
-    text-decoration: underline;
-  }
-
-  .dark .spec-content a {
-    color: #4da6e8;
-  }
-
-  .spec-content img {
-    max-width: 100%;
-    height: auto;
-    margin: 1em 0;
-  }
-
-  .spec-content blockquote {
-    margin: 1em 0;
-    padding-left: 1em;
-    border-left: 4px solid #ddd;
-    color: #666;
-  }
-
-  .dark .spec-content blockquote {
-    border-left-color: #444;
-    color: #aaa;
-  }
-
-  .spec-content hr {
-    margin: 2em 0;
-    border: none;
-    border-top: 1px solid #eee;
-  }
-
-  .dark .spec-content hr {
-    border-top-color: #333;
-  }
-</style>
+<SpecLayout spec={spec} />
--- a/src/scripts/activeSectionTracker.ts
+++ b/src/scripts/activeSectionTracker.ts
@@ -0,0 +1,64 @@
+export interface ActiveSectionTrackerOptions {
+  linkSelector: string;
+  sectionIdAttr?: string;
+  headerOffset?: number;
+  defaultToFirst?: boolean;
+}
+
+export function initActiveSectionTracker(
+  options: ActiveSectionTrackerOptions,
+): void {
+  const {
+    linkSelector,
+    sectionIdAttr = "data-section-id",
+    headerOffset = 100,
+    defaultToFirst = true,
+  } = options;
+
+  const links = document.querySelectorAll(linkSelector);
+  const sections: { id: string; element: Element }[] = [];
+
+  // Collect unique section IDs
+  const seenIds = new Set<string>();
+  links.forEach((link) => {
+    const id = link.getAttribute(sectionIdAttr);
+    if (id && !seenIds.has(id)) {
+      seenIds.add(id);
+      const section = document.getElementById(id);
+      if (section) {
+        sections.push({ id, element: section });
+      }
+    }
+  });
+
+  function updateActiveSection(): void {
+    let activeId: string | null = defaultToFirst ? sections[0]?.id : null;
+
+    for (const { id, element } of sections) {
+      const rect = element.getBoundingClientRect();
+      if (rect.top <= headerOffset) {
+        activeId = id;
+      }
+    }
+
+    links.forEach((link) => {
+      const linkId = link.getAttribute(sectionIdAttr);
+      link.classList.toggle("active", linkId === activeId);
+    });
+  }
+
+  // Update on scroll with throttling
+  let ticking = false;
+  window.addEventListener("scroll", () => {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        updateActiveSection();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  });
+
+  // Initial update
+  updateActiveSection();
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,65 +1,83 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";

+@custom-variant dark (&:where(.dark, .dark *));
+
@theme {
-  /* Colors */
-  --color-sidebar: #191818;
-  --color-sidebar-hover: #333;
-  --color-accent: #1f8dd6;
-  --color-text-primary: #1a1a1a;
-  --color-text-secondary: #777;
-  --color-text-muted: #999;
-  --color-bg-primary: #fdfdfd;
-  --color-bg-code: #f6f8fa;
-  --color-bg-code-inline: rgba(27, 31, 35, 0.05);
-  --color-border: #333;
+  /* Accent colors - using Tailwind sky palette */
+  --color-accent: theme(colors.sky.500);
+  --color-accent-light: theme(colors.sky.400);

-  /* Dark mode colors */
-  --color-dark-text-primary: #e5e5e5;
-  --color-dark-text-secondary: #a0a0a0;
-  --color-dark-bg-primary: #0d0d0d;
-  --color-dark-bg-code: #1a1a1a;
-  --color-dark-bg-code-inline: rgba(255, 255, 255, 0.1);
-
-  /* Fonts */
-  --font-sans: "Open Sans", Helvetica, Arial, sans-serif;
-  --font-heading: "Open Sans Condensed", Helvetica, Arial, sans-serif;
-  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
+  /* Fonts - self-hosted via fontsource */
+  --font-display: "Bricolage Grotesque Variable", system-ui, sans-serif;
+  --font-sans: "DM Sans Variable", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "SF Mono", Consolas, monospace;

  /* Sizing */
-  --sidebar-width: 150px;
+  --header-height: 4rem;
+  --sidebar-width: 260px;
+  --content-max-width: 800px;
+  --section-padding-y: 6rem;
+  --section-padding-x: 2rem;
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
+  --shadow-glow: 0 0 40px theme(colors.sky.500 / 15%);
+}
+
+/* Smooth scroll */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Scroll margin for anchor links */
+[id] {
+  scroll-margin-top: calc(var(--header-height) + 2rem);
 }

 /* Base styles */
@layer base {
  html {
    height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
-    line-height: 1.5;
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-primary);
+    line-height: 1.7;
+    overflow-x: hidden;
+    background-color: theme(colors.slate.50);
+    color: theme(colors.slate.950);
  }

  .dark body {
-    color: var(--color-dark-text-primary);
-    background-color: var(--color-dark-bg-primary);
+    background-color: theme(colors.neutral.950);
+    color: theme(colors.neutral.50);
  }

+  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
-    font-family: var(--font-heading);
+    font-family: var(--font-display);
    font-weight: 700;
-    color: #333;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    color: theme(colors.slate.950);
  }

  .dark h1,
@@ -68,68 +86,387 @@
  .dark h4,
  .dark h5,
  .dark h6 {
-    color: #e5e5e5;
+    color: theme(colors.neutral.50);
  }

  h1 {
-    font-size: 2.5em;
-    line-height: 1.2;
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+  }
+
+  h2 {
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h3 {
+    font-size: clamp(1.25rem, 2vw, 1.5rem);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  p {
+    margin-bottom: 1.25rem;
+  }
+
+  /* Links */
+  a {
+    color: var(--color-accent);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+    word-break: break-word;
+  }
+
+  a:hover {
+    color: var(--color-accent-light);
+  }
+
+  /* Code */
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    border-radius: 4px;
+    padding: 0.2em 0.4em;
+    background-color: theme(colors.slate.950 / 5%);
+  }
+
+  .dark code {
+    background-color: theme(colors.neutral.400 / 15%);
+  }
+
+  pre {
+    font-family: var(--font-mono);
+    border-radius: 8px;
+    padding: 1.25rem;
+    overflow-x: auto;
+    line-height: 1.6;
+    background-color: theme(colors.slate.200);
+  }
+
+  .dark pre {
+    background-color: theme(colors.neutral.900);
+  }
+
+  pre > code {
+    background-color: transparent !important;
+    padding: 0;
+    font-size: 0.875rem;
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    margin-bottom: 1.25rem;
+    padding-left: 1.5rem;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
  }

-  /* Nested list styling */
  ol ol,
  ul ol {
-    list-style-type: lower-roman;
+    list-style-type: decimal;
  }

  ul ul ol,
  ul ol ol,
  ol ul ol,
  ol ol ol {
-    list-style-type: lower-alpha;
+    list-style-type: decimal;
  }

-  a {
-    word-break: break-word;
+  /* Blockquotes */
+  blockquote {
+    border-left: 3px solid var(--color-accent);
+    padding-left: 1.5rem;
+    margin: 1.5rem 0;
+    font-style: italic;
+    color: theme(colors.slate.600);
  }

-  code {
-    background-color: var(--color-bg-code-inline);
-    border-radius: 3px;
-    font-family: var(--font-mono);
-    font-size: 85%;
-    margin: 0;
-    padding: 0.3em 0.4em 0.1em 0.4em;
+  .dark blockquote {
+    color: theme(colors.neutral.400);
  }

-  .dark code {
-    background-color: var(--color-dark-bg-code-inline);
+  /* Strong text */
+  strong {
+    font-weight: 600;
  }

-  pre {
-    background-color: var(--color-bg-code);
-    border-radius: 3px;
-    line-height: 1.45;
-    padding: 16px;
-  }
-
-  .dark pre {
-    background-color: var(--color-dark-bg-code);
-  }
-
-  pre > code {
-    background-color: transparent !important;
-    border-radius: 0;
-    font-size: 90%;
-    padding: 0;
+  /* Focus styles */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
  }
 }

-/* Layout transitions */
+/* Keyframe animations - defined outside layers for proper cascade */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounce-subtle {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+/* Animation utility classes */
+.animate-fade-in {
+  opacity: 0;
+  animation: fade-in 400ms ease-out forwards;
+}
+
+.animate-fade-in-up {
+  opacity: 0;
+  animation: fade-in-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-fade-in-down {
+  opacity: 0;
+  animation: fade-in-down 250ms ease-out forwards;
+}
+
+.animate-slide-in-left {
+  opacity: 0;
+  animation: slide-in-left 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-bounce-subtle {
+  animation: bounce-subtle 2s ease-in-out infinite;
+}
+
+/* Animation delays */
+.delay-100 {
+  animation-delay: 100ms;
+}
+
+.delay-200 {
+  animation-delay: 200ms;
+}
+
+.delay-300 {
+  animation-delay: 300ms;
+}
+
+.delay-400 {
+  animation-delay: 400ms;
+}
+
+.delay-500 {
+  animation-delay: 500ms;
+}
+
+.delay-600 {
+  animation-delay: 600ms;
+}
+
+.delay-700 {
+  animation-delay: 700ms;
+}
+
+.delay-800 {
+  animation-delay: 800ms;
+}
+
+/* Component styles */
@layer components {
-  #layout,
-  #menu,
-  .menu-link {
-    transition: all 0.2s ease-out;
+  /* Section container - uses CSS vars, keep here */
+  .section-container {
+    max-width: calc(var(--content-max-width) + var(--sidebar-width) + 4rem);
+    margin: 0 auto;
+    padding: 0 var(--section-padding-x);
+  }
+
+  /* Prose styling for markdown content - can't add classes to rendered HTML */
+  .prose-spec {
+    max-width: var(--content-max-width);
+  }
+
+  .prose-spec h2 {
+    font-size: 1.75rem;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid theme(colors.slate.200);
+  }
+
+  .dark .prose-spec h2 {
+    border-bottom-color: theme(colors.neutral.800);
+  }
+
+  .prose-spec h2:first-child {
+    margin-top: 0;
+  }
+
+  .prose-spec h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: theme(colors.slate.600);
+  }
+
+  .dark .prose-spec h3 {
+    color: theme(colors.neutral.400);
+  }
+
+  .prose-spec p {
+    color: theme(colors.slate.600);
+  }
+
+  .dark .prose-spec p {
+    color: theme(colors.neutral.400);
+  }
+
+  .prose-spec strong {
+    color: theme(colors.slate.950);
+  }
+
+  .dark .prose-spec strong {
+    color: theme(colors.neutral.50);
+  }
+
+  .prose-spec li {
+    color: theme(colors.slate.600);
+  }
+
+  .dark .prose-spec li {
+    color: theme(colors.neutral.400);
+  }
+
+  /* Nested ordered list counters (spec numbering: 1., 1.1., 1.2.) */
+  .prose-spec ol {
+    padding-left: 2.5rem;
+    counter-reset: item;
+    list-style: none;
+  }
+
+  .prose-spec ol > li {
+    counter-increment: item;
+    position: relative;
+  }
+
+  .prose-spec ol > li::before {
+    content: counters(item, ".") ".";
+    position: absolute;
+    left: -2.5rem;
+    width: 2rem;
+    text-align: right;
+    font-weight: 500;
+    color: theme(colors.slate.400);
+  }
+
+  .dark .prose-spec ol > li::before {
+    color: theme(colors.neutral.500);
+  }
+
+  .prose-spec img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 2rem 0;
+  }
+
+  .prose-spec p:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Nav link active state (toggled by JavaScript) */
+  .nav-link.active {
+    color: theme(colors.sky.700) !important;
+    background-color: theme(colors.sky.600 / 15%) !important;
+  }
+
+  .dark .nav-link.active {
+    color: theme(colors.sky.400) !important;
+    background-color: theme(colors.sky.600 / 20%) !important;
+  }
+
+  /* Sidebar link active state (toggled by JavaScript) */
+  .sidebar-link.active {
+    color: theme(colors.sky.700) !important;
+    background-color: theme(colors.sky.600 / 15%) !important;
+  }
+
+  .dark .sidebar-link.active {
+    color: theme(colors.sky.400) !important;
+    background-color: theme(colors.sky.600 / 20%) !important;
+  }
+
+  /* Sidebar scrollbar styling */
+  #spec-sidebar::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  #spec-sidebar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  #spec-sidebar::-webkit-scrollbar-thumb {
+    background-color: theme(colors.slate.200);
+    border-radius: 2px;
+  }
+
+  .dark #spec-sidebar::-webkit-scrollbar-thumb {
+    background-color: theme(colors.neutral.800);
  }
 }
--- a/src/utils/parseSpecContent.ts
+++ b/src/utils/parseSpecContent.ts
@@ -0,0 +1,414 @@
+/**
+ * Parses spec content using markdown AST for robust section extraction.
+ */
+
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import type { Root, RootContent, Heading, List, ListItem } from "mdast";
+import type { Root as HastRoot } from "hast";
+
+export interface TocItem {
+  id: string;
+  title: string;
+  level: number;
+  clause?: string;
+}
+
+export interface FAQItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export interface SpecSection {
+  id: string;
+  title: string;
+  content: string;
+  clause: string;
+}
+
+export interface ParsedSpec {
+  svgPath: string;
+  introduction: string;
+  summary: string;
+  terminology: string;
+  terminologyTitle: string;
+  specification: string;
+  specificationTitle: string;
+  specSections: SpecSection[];
+  faq: FAQItem[];
+  license: string;
+  tocItems: TocItem[];
+}
+
+/**
+ * Convert text to a URL-friendly ID
+ */
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .trim();
+}
+
+type MdastNode = Root | RootContent;
+
+/**
+ * Extract plain text from an mdast node tree
+ */
+function extractText(node: MdastNode): string {
+  if ("value" in node && typeof node.value === "string") {
+    return node.value;
+  }
+  if ("children" in node && Array.isArray(node.children)) {
+    return node.children.map((child) => extractText(child)).join("");
+  }
+  return "";
+}
+
+/**
+ * Find index of heading containing specific text
+ */
+function findHeadingIndex(
+  nodes: RootContent[],
+  text: string,
+  depth: number = 2,
+): number {
+  return nodes.findIndex(
+    (node) =>
+      node.type === "heading" &&
+      (node as Heading).depth === depth &&
+      extractText(node).toLowerCase().includes(text.toLowerCase()),
+  );
+}
+
+/**
+ * Extract nodes between two headings
+ */
+function extractSectionNodes(
+  nodes: RootContent[],
+  startText: string,
+  depth: number = 2,
+): RootContent[] {
+  const startIdx = findHeadingIndex(nodes, startText, depth);
+  if (startIdx === -1) return [];
+
+  // Find the next heading of same or higher level
+  let endIdx = nodes.length;
+  for (let i = startIdx + 1; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.type === "heading" && (node as Heading).depth <= depth) {
+      endIdx = i;
+      break;
+    }
+  }
+
+  // Return nodes after the heading (not including the heading itself)
+  return nodes.slice(startIdx + 1, endIdx);
+}
+
+/**
+ * Get the full heading text
+ */
+function getHeadingText(
+  nodes: RootContent[],
+  text: string,
+  depth: number = 2,
+): string {
+  const idx = findHeadingIndex(nodes, text, depth);
+  if (idx === -1) return text;
+  return extractText(nodes[idx]);
+}
+
+/**
+ * Convert mdast nodes to HTML string
+ */
+async function nodesToHtml(nodes: RootContent[]): Promise<string> {
+  if (nodes.length === 0) return "";
+
+  // Create a root node with these children
+  const root: Root = { type: "root", children: nodes };
+
+  const result = await unified()
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeStringify, { allowDangerousHtml: true })
+    .run(root);
+
+  const html = unified()
+    .use(rehypeStringify, { allowDangerousHtml: true })
+    .stringify(result as HastRoot);
+
+  return html;
+}
+
+/**
+ * Extract top-level list item titles from an ordered list
+ */
+function extractListItemTitles(list: List): string[] {
+  const titles: string[] = [];
+
+  for (const item of list.children) {
+    if (item.type !== "listItem") continue;
+
+    // Get the first paragraph or text content of the list item
+    // The title is the text before any nested list
+    let title = "";
+    for (const child of item.children) {
+      if (child.type === "list") break; // Stop at nested list
+      if (child.type === "paragraph") {
+        title = extractText(child);
+        break;
+      }
+      // Handle inline text directly in list item
+      title += extractText(child);
+    }
+
+    title = title.split("\n")[0].trim();
+    if (title) {
+      titles.push(title);
+    }
+  }
+
+  return titles;
+}
+
+/**
+ * Find the first ordered list in nodes and extract its structure
+ */
+function findSpecSections(nodes: RootContent[]): SpecSection[] {
+  const sections: SpecSection[] = [];
+
+  for (const node of nodes) {
+    if (node.type === "list" && (node as List).ordered) {
+      const titles = extractListItemTitles(node as List);
+      for (let i = 0; i < titles.length; i++) {
+        const title = titles[i];
+        sections.push({
+          id: `spec-${slugify(title)}`,
+          title,
+          content: "",
+          clause: `${i + 1}.`,
+        });
+      }
+      break; // Only process first ordered list
+    }
+  }
+
+  return sections;
+}
+
+/**
+ * Add anchor IDs to list items in the spec ordered list
+ */
+function addAnchorsToList(list: List, sections: SpecSection[]): void {
+  const titleMap = new Map(sections.map((s) => [s.title, s.id]));
+
+  for (const item of list.children) {
+    if (item.type !== "listItem") continue;
+
+    // Get the title of this item
+    let title = "";
+    for (const child of item.children) {
+      if (child.type === "list") break;
+      if (child.type === "paragraph") {
+        title = extractText(child).split("\n")[0].trim();
+        break;
+      }
+      title += extractText(child);
+    }
+    title = title.split("\n")[0].trim();
+
+    // Add ID as data attribute (will be processed by rehype)
+    const id = titleMap.get(title);
+    if (id) {
+      // Add hProperties for rehype to convert to HTML id attribute
+      (item as ListItem & { data?: { hProperties?: { id?: string } } }).data = {
+        hProperties: { id },
+      };
+    }
+  }
+}
+
+/**
+ * Extract FAQ items from FAQ section nodes
+ */
+function extractFAQFromNodes(nodes: RootContent[]): FAQItem[] {
+  const items: FAQItem[] = [];
+  let currentQuestion = "";
+  let currentId = "";
+
+  for (const node of nodes) {
+    if (node.type === "heading" && (node as Heading).depth === 3) {
+      // Save previous FAQ item if we had one
+      if (currentQuestion) {
+        items.push({
+          id: currentId,
+          question: currentQuestion,
+          answer: "", // Placeholder, will be filled later
+        });
+      }
+
+      currentQuestion = extractText(node);
+      currentId = `faq-${slugify(currentQuestion).slice(0, 50)}`;
+    }
+  }
+
+  // Don't forget the last item
+  if (currentQuestion) {
+    items.push({
+      id: currentId,
+      question: currentQuestion,
+      answer: "",
+    });
+  }
+
+  return items;
+}
+
+/**
+ * Build table of contents from parsed sections
+ */
+function buildTocItems(parsed: Partial<ParsedSpec>): TocItem[] {
+  const items: TocItem[] = [];
+
+  if (parsed.terminology) {
+    items.push({
+      id: "terminology",
+      title: parsed.terminologyTitle || "Terminology",
+      level: 2,
+    });
+  }
+  if (parsed.specification) {
+    items.push({
+      id: "specification",
+      title: "Specification",
+      level: 2,
+    });
+
+    if (parsed.specSections) {
+      for (const section of parsed.specSections) {
+        items.push({
+          id: section.id,
+          title: section.title,
+          level: 3,
+          clause: section.clause,
+        });
+      }
+    }
+  }
+
+  return items;
+}
+
+/**
+ * Main parsing function - takes markdown content and returns structured content
+ */
+export async function parseSpecContent(
+  markdown: string,
+  version: string,
+): Promise<ParsedSpec> {
+  const svgPath = `/spec/${version}.svg`;
+
+  // Parse markdown to AST
+  const tree = unified().use(remarkParse).parse(markdown) as Root;
+
+  // Remove title (h1) and SVG image from the tree
+  const nodes = tree.children.filter((node) => {
+    if (node.type === "heading" && (node as Heading).depth === 1) return false;
+    if (node.type === "paragraph") {
+      const text = extractText(node);
+      if (text.includes(".svg")) return false;
+    }
+    return true;
+  });
+
+  // Get heading titles
+  const terminologyTitle = getHeadingText(nodes, "Terminology");
+  const specificationTitle = getHeadingText(
+    nodes,
+    "Git Common-Flow Specification",
+  );
+
+  // Extract section nodes
+  const introNodes = extractSectionNodes(nodes, "Introduction");
+  const summaryNodes = extractSectionNodes(nodes, "Summary");
+  const terminologyNodes = extractSectionNodes(nodes, "Terminology");
+  const specNodes = extractSectionNodes(nodes, "Git Common-Flow Specification");
+  const faqNodes = extractSectionNodes(nodes, "FAQ");
+  const licenseNodes = extractSectionNodes(nodes, "License");
+
+  // Extract spec sections from the first ordered list
+  const specSections = findSpecSections(specNodes);
+
+  // Add anchor IDs to spec list items
+  for (const node of specNodes) {
+    if (node.type === "list" && (node as List).ordered) {
+      addAnchorsToList(node as List, specSections);
+      break;
+    }
+  }
+
+  // Extract FAQ items structure
+  const faqItems = extractFAQFromNodes(faqNodes);
+
+  // Collect FAQ answer nodes for each item
+  const faqAnswerNodes: RootContent[][] = [];
+  let currentAnswerNodes: RootContent[] = [];
+
+  for (const node of faqNodes) {
+    if (node.type === "heading" && (node as Heading).depth === 3) {
+      if (currentAnswerNodes.length > 0) {
+        faqAnswerNodes.push(currentAnswerNodes);
+      }
+      currentAnswerNodes = [];
+    } else {
+      currentAnswerNodes.push(node);
+    }
+  }
+  // Don't forget the last answer
+  if (currentAnswerNodes.length > 0) {
+    faqAnswerNodes.push(currentAnswerNodes);
+  }
+
+  // Convert sections to HTML
+  const [introduction, summary, terminology, specification, license] =
+    await Promise.all([
+      nodesToHtml(introNodes),
+      nodesToHtml(summaryNodes),
+      nodesToHtml(terminologyNodes),
+      nodesToHtml(specNodes),
+      nodesToHtml(licenseNodes),
+    ]);
+
+  // Convert FAQ answers to HTML
+  const faqAnswers = await Promise.all(
+    faqAnswerNodes.map((nodes) => nodesToHtml(nodes)),
+  );
+
+  // Assign FAQ answers
+  const faq = faqItems.map((item, i) => ({
+    ...item,
+    answer: faqAnswers[i] || "",
+  }));
+
+  const parsed: ParsedSpec = {
+    svgPath,
+    introduction,
+    summary,
+    terminology,
+    terminologyTitle,
+    specification,
+    specificationTitle,
+    specSections,
+    faq,
+    license,
+    tocItems: [],
+  };
+
+  parsed.tocItems = buildTocItems(parsed);
+
+  return parsed;
+}
Author	SHA1	Message	Date
Jim Myhrberg	1eab53b7ba	wip: add icons to navbar links	2026-01-11 02:32:27 +00:00
Jim Myhrberg	4ff9b012ad	wip: center align hero grid	2026-01-11 02:29:00 +00:00
Jim Myhrberg	8205cb3690	wip: swap inline SVG icons for astro-icons library	2026-01-11 02:27:08 +00:00
Jim Myhrberg	d2efcb01ba	wip: DRY up things	2026-01-11 02:16:23 +00:00
Jim Myhrberg	9f1af55602	refactor(spec): move spec page rendering to dedicated layout	2026-01-11 01:53:24 +00:00
Jim Myhrberg	88a8ba2f28	wip: toc clause numbers	2026-01-11 01:46:22 +00:00
Jim Myhrberg	e86b0de9fa	wip: add linters and formatters	2026-01-11 01:42:18 +00:00
Jim Myhrberg	230e76b2d5	wip: set site version to 2.0.0	2026-01-11 01:08:49 +00:00
Jim Myhrberg	a7325d2331	wip: bundle webfonts	2026-01-11 01:06:48 +00:00
Jim Myhrberg	20b1507c2b	wip: unifi layouts and improve footer	2026-01-11 00:58:53 +00:00
Jim Myhrberg	da9171686d	wip: simplify and add favicon	2026-01-11 00:36:23 +00:00
Jim Myhrberg	8c91e2028a	wip: more tweaks	2026-01-11 00:19:33 +00:00
Jim Myhrberg	f47ea792aa	wip: minor tweaks	2026-01-10 23:58:24 +00:00
Jim Myhrberg	d55ead82d7	wip: switch dark mode to pure black	2026-01-10 23:41:09 +00:00
Jim Myhrberg	7d06d18ccb	wip: getting closer	2026-01-10 23:26:30 +00:00
Jim Myhrberg	4722094f0c	wip: simplify CSS	2026-01-10 22:47:42 +00:00
Jim Myhrberg	b22cf35953	wip: getting close	2026-01-10 22:40:47 +00:00
Jim Myhrberg	1828ae6353	wip: more stuff	2026-01-10 22:15:29 +00:00
Jim Myhrberg	7c5c7691c3	wip: improve spec and faq	2026-01-10 22:05:40 +00:00
Jim Myhrberg	208219ca2c	wip: improve spec parsing	2026-01-10 21:52:45 +00:00
Jim Myhrberg	f1fa264ed7	fix: spec TOC	2026-01-10 21:31:06 +00:00
Jim Myhrberg	4fadbd111a	wip: even more tailwind alignment	2026-01-10 21:25:10 +00:00
Jim Myhrberg	de472c82a2	wip: more tailwind alignment	2026-01-10 21:10:50 +00:00
Jim Myhrberg	f5818933c7	wip: better version selector	2026-01-10 19:37:35 +00:00
Jim Myhrberg	69ea77d236	fix: show nav bar earlier	2026-01-10 19:33:24 +00:00
Jim Myhrberg	0a74d4eacd	feat(design): complete redesign of website Redesign the website with a more modern look.	2026-01-10 19:19:06 +00:00
Jim Myhrberg	a0359ef376	chore(deps): switch from Node.js to Bun	2026-01-10 18:57:40 +00:00
				`@@ -0,0 +1 @@`
				import{i as o}from"./activeSectionTracker.CGlk-3e6.js";function a(){const e=document.getElementById("site-header"),d=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),t=document.getElementById("mobile-nav");if(!e\|\|!d)return;const i=64;function n(){e&&(window.scrollY>=i?(e.classList.remove("translate-y-[-100%]","border-transparent"),e.classList.add("border-gray-200","dark:border-neutral-800")):(e.classList.add("translate-y-[-100%]","border-transparent"),e.classList.remove("border-gray-200","dark:border-neutral-800")))}window.addEventListener("scroll",n,{passive:!0}),n(),r&&t&&(r.addEventListener("click",()=>{t.classList.toggle("hidden")}),t.querySelectorAll("a").forEach(s=>{s.addEventListener("click",()=>{t.classList.add("hidden")})})),o({linkSelector:"[data-nav-link]",defaultToFirst:!1})}a();document.addEventListener("astro:after-swap",a);
				`@@ -0,0 +1 @@`
				import{i as v}from"./activeSectionTracker.CGlk-3e6.js";function s(){v({linkSelector:"[data-sidebar-link]"});const t=document.getElementById("spec-toc-toggle"),e=document.getElementById("spec-toc-drawer"),r=e?.querySelector("[data-toc-backdrop]"),d=e?.querySelector("[data-toc-close]"),i=e?.querySelectorAll("[data-toc-link]");function a(){e?.classList.remove("hidden"),document.body.style.overflow="hidden"}function c(){e?.classList.add("hidden"),document.body.style.overflow=""}t?.addEventListener("click",a),r?.addEventListener("click",c),d?.addEventListener("click",c),i?.forEach(o=>{o.addEventListener("click",c)});const n=document.getElementById("spec");n&&t&&new IntersectionObserver(([l])=>{t.classList.toggle("hidden",!l.isIntersecting)},{threshold:0}).observe(n)}s();document.addEventListener("astro:after-swap",s);
				`@@ -0,0 +1 @@`
				function m(l){const{linkSelector:a,sectionIdAttr:o="data-section-id",headerOffset:f=100,defaultToFirst:u=!0}=l,s=document.querySelectorAll(a),i=[],r=new Set;s.forEach(n=>{const t=n.getAttribute(o);if(t&&!r.has(t)){r.add(t);const e=document.getElementById(t);e&&i.push({id:t,element:e})}});function d(){let n=u?i[0]?.id:null;for(const{id:t,element:e}of i)e.getBoundingClientRect().top<=f&&(n=t);s.forEach(t=>{const e=t.getAttribute(o);t.classList.toggle("active",e===n)})}let c=!1;window.addEventListener("scroll",()=>{c\|\|(requestAnimationFrame(()=>{d(),c=!1}),c=!0)}),d()}export{m as i};