wip: highlight spec clauses on anchor link activation

Redesign the website with a more modern look.

.claude/settings.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(bun install:*)",
+      "Bash(bun run build:*)",
+      "Bash(bun run update:*)",
+      "Bash(bun update:*)"
+    ]
+  }
+}

.mise.toml

@@ -0,0 +1,2 @@
+[tools]
+bun = "1"

.prettierignore

@@ -0,0 +1,4 @@
+docs/
+.astro/
+node_modules/
+bun.lock

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "bun run dev",
+      "name": "dev server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

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-specs
 ```
 
 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

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()],
   },

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.qe8PXlQZ.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>

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);

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);

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};

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>

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.qe8PXlQZ.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="#clause-1" 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="clause-1"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#clause-2" 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="clause-2"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Changes</span> </a><a href="#clause-3" 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="clause-3"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Git Best Practices</span> </a><a href="#clause-4" 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="clause-4"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#clause-5" 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="clause-5"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#clause-6" 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="clause-6"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#clause-7" 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="clause-7"> <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="#clause-1" 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="#clause-2" 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="#clause-3" 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="#clause-4" 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="#clause-5" 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="#clause-6" 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="#clause-7" 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,153 +194,150 @@ 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="clause-1"><a href="#clause-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.</a>The Master Branch
 <ol>
-<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
+<li id="clause-1-1"><a href="#clause-1-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.1.</a>A branch named "master" MUST exist and it MUST be referred to as the
+"master branch".</li>
+<li id="clause-1-2"><a href="#clause-1-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.2.</a>The master branch MUST be considered bleeding edge.</li>
+<li id="clause-1-3"><a href="#clause-1-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.3.</a>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 id="clause-1-4"><a href="#clause-1-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.4.</a>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="clause-2"><a href="#clause-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.</a>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
+<li id="clause-2-1"><a href="#clause-2-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.1.</a>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.</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
+<li id="clause-2-2"><a href="#clause-2-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.2.</a>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.</li>
-<li>Change branches MUST be regularly updated with any changes from their
+<li id="clause-2-3"><a href="#clause-2-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.3.</a>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.</li>
-<li>After rebasing a change branch on top of its source branch you MUST push
+<li id="clause-2-4"><a href="#clause-2-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.4.</a>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>
-<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
+push, and you SHOULD use the "--force-with-lease" git push option.</li>
+<li id="clause-2-5"><a href="#clause-2-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.5.</a>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.</li>
-<li>A pull request MUST only be merged when the change branch is up-to-date
+<li id="clause-2-6"><a href="#clause-2-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.6.</a>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.</li>
-<li>To get feedback, help, or generally just discuss a change branch with
+<li id="clause-2-7"><a href="#clause-2-7" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.7.</a>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.</li>
 </ol>
 </li>
-<li>Git Best Practices
+<li id="clause-3"><a href="#clause-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.</a>Git Best Practices
 <ol>
-<li>All commit messages SHOULD follow the Commit Guidelines and format from
+<li id="clause-3-1"><a href="#clause-3-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.1.</a>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 id="clause-3-2"><a href="#clause-3-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.2.</a>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
+<li id="clause-3-3"><a href="#clause-3-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.3.</a>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 id="clause-3-4"><a href="#clause-3-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.4.</a>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 id="clause-3-5"><a href="#clause-3-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.5.</a>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="clause-4"><a href="#clause-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.</a>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”
+<li id="clause-4-1"><a href="#clause-4-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.1.</a>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.</li>
-<li>If you are using a “VERSION” file in the root of the project, this MUST
+<li id="clause-4-2"><a href="#clause-4-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.2.</a>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
+<li id="clause-4-3"><a href="#clause-4-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.3.</a>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="clause-5"><a href="#clause-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.</a>Releases
 <ol>
-<li>To create a new release, you MUST create a “version bump” commit directly
+<li id="clause-5-1"><a href="#clause-5-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.1.</a>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>The release tag on the version bump commit MUST be named exactly the same
+<li id="clause-5-2"><a href="#clause-5-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.2.</a>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 id="clause-5-3"><a href="#clause-5-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.3.</a>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>
-<li>It is RECOMMENDED that release tags are lightweight tags, but you can
+"v". For example the tag name can be either "2.11.4" or "v2.11.4".</li>
+<li id="clause-5-4"><a href="#clause-5-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.4.</a>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
+<li id="clause-5-5"><a href="#clause-5-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.5.</a>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.</li>
 </ol>
 </li>
-<li>Bug Fixes &#x26; Rollback
+<li id="clause-6"><a href="#clause-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.</a>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
+<li id="clause-6-1"><a href="#clause-6-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.1.</a>You MUST NOT under any circumstances force push to the master branch.</li>
+<li id="clause-6-2"><a href="#clause-6-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.2.</a>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.</li>
-<li>If a change branch is wrongfully merged in to master, or for any other
+<li id="clause-6-3"><a href="#clause-6-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.3.</a>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.</li>
 </ol>
 </li>
-<li>Maintenance Releases
+<li id="clause-7"><a href="#clause-7" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.</a>Maintenance Releases
 <ol>
-<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
+<li id="clause-7-1"><a href="#clause-7-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.1.</a>Any branch that has a name starting with "stable-" SHOULD be referred to
+as a "maintenance branch".</li>
+<li id="clause-7-2"><a href="#clause-7-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.2.</a>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 id="clause-7-3"><a href="#clause-7-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.3.</a>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 MUST be created from the relevant release tag. For
+<li id="clause-7-4"><a href="#clause-7-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.4.</a>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 id="clause-7-5"><a href="#clause-7-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.</a>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>
-<li>When working on a maintenance release, the relevant maintenance branch
+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 id="clause-7-6"><a href="#clause-7-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.6.</a>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
+<li id="clause-7-7"><a href="#clause-7-7" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.7.</a>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.</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> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <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>

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.qe8PXlQZ.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="#clause-1" 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="clause-1"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#clause-2" 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="clause-2"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Change Branches</span> </a><a href="#clause-3" 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="clause-3"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Pull Requests</span> </a><a href="#clause-4" 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="clause-4"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#clause-5" 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="clause-5"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#clause-6" 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="clause-6"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Release Branches</span> </a><a href="#clause-7" 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="clause-7"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#clause-8" 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="clause-8"> <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="#clause-1" 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="#clause-2" 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="#clause-3" 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="#clause-4" 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="#clause-5" 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="#clause-6" 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="#clause-7" 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="#clause-8" 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,192 +189,189 @@ 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="clause-1"><a href="#clause-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.</a>The Master Branch
 <ol>
-<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
+<li id="clause-1-1"><a href="#clause-1-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.1.</a>A branch named "master" MUST exist and it MUST be referred to as the
+"master branch".</li>
+<li id="clause-1-2"><a href="#clause-1-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.2.</a>The master branch MUST be considered bleeding edge.</li>
+<li id="clause-1-3"><a href="#clause-1-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.3.</a>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 id="clause-1-4"><a href="#clause-1-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.4.</a>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="clause-2"><a href="#clause-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.</a>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
+<li id="clause-2-1"><a href="#clause-2-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.1.</a>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.</li>
-<li>You MUST create separate change branches for each distinctly different
+<li id="clause-2-2"><a href="#clause-2-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.2.</a>You MUST create separate change branches for each distinctly different
 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
+<li id="clause-2-3"><a href="#clause-2-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.3.</a>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.</li>
-<li>Change branches MUST be regularly updated with any changes from their
+<li id="clause-2-4"><a href="#clause-2-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.4.</a>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
+<li id="clause-2-5"><a href="#clause-2-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.5.</a>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="clause-3"><a href="#clause-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.</a>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>A pull request MUST only be merged when the change branch is up-to-date
+<li id="clause-3-1"><a href="#clause-3-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.1.</a>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 id="clause-3-2"><a href="#clause-3-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.2.</a>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.</li>
-<li>To get feedback, help, or generally just discuss a change branch with
+<li id="clause-3-3"><a href="#clause-3-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.3.</a>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.</li>
 </ol>
 </li>
-<li>Versioning
+<li id="clause-4"><a href="#clause-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.</a>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”
+<li id="clause-4-1"><a href="#clause-4-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.1.</a>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.</li>
-<li>If you are using a “VERSION” file in the root of the project, this MUST
+<li id="clause-4-2"><a href="#clause-4-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.2.</a>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
+<li id="clause-4-3"><a href="#clause-4-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.3.</a>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="clause-5"><a href="#clause-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.</a>Releases
 <ol>
-<li>To create a new release, you MUST create a “version bump” commit which
+<li id="clause-5-1"><a href="#clause-5-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.1.</a>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
+<li id="clause-5-2"><a href="#clause-5-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.2.</a>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 release tag on the version bump commit MUST be named exactly the same
+<li id="clause-5-3"><a href="#clause-5-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.3.</a>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 id="clause-5-4"><a href="#clause-5-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.4.</a>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
+<li id="clause-5-5"><a href="#clause-5-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.5.</a>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
+<li id="clause-5-6"><a href="#clause-5-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.6.</a>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.</li>
 </ol>
 </li>
-<li>Release Branches
+<li id="clause-6"><a href="#clause-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.</a>Release Branches
 <ol>
-<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
+<li id="clause-6-1"><a href="#clause-6-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.1.</a>Any branch that has a name starting with "release-" SHOULD be referred to
+as a "release branch".</li>
+<li id="clause-6-2"><a href="#clause-6-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.2.</a>Use of release branches is OPTIONAL.</li>
+<li id="clause-6-3"><a href="#clause-6-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.3.</a>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.</li>
-<li>There are two types of release branches; short-term, and long-term.</li>
-<li>Short-Term Release Branches
+<li id="clause-6-4"><a href="#clause-6-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.4.</a>There are two types of release branches; short-term, and long-term.</li>
+<li id="clause-6-5"><a href="#clause-6-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.</a>Short-Term Release Branches
 <ol>
-<li>Used for creating a specific versioned release.</li>
-<li>A short-term release branch is RECOMMENDED if there is a lengthy
+<li id="clause-6-5-1"><a href="#clause-6-5-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.1.</a>Used for creating a specific versioned release.</li>
+<li id="clause-6-5-2"><a href="#clause-6-5-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.2.</a>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>When using a short-term release branch, the version bump commit and
+<li id="clause-6-5-3"><a href="#clause-6-5-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.3.</a>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 id="clause-6-5-4"><a href="#clause-6-5-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.4.</a>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
+<li id="clause-6-5-5"><a href="#clause-6-5-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.5.</a>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.</li>
-<li>After the version bump commit and release tag have been created, the
+<li id="clause-6-5-6"><a href="#clause-6-5-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.6.</a>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.</li>
 </ol>
 </li>
-<li>Long-Term Release Branches
+<li id="clause-6-6"><a href="#clause-6-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.6.</a>Long-Term Release Branches
 <ol>
-<li>Used for work on versions which are not currently part of the master
+<li id="clause-6-6-1"><a href="#clause-6-6-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.6.1.</a>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.</li>
-<li>The branch name MUST have a non-specific version number. For example
+<li id="clause-6-6-2"><a href="#clause-6-6-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.6.2.</a>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>
-<li>To create a new release from a long-term release branch, you MUST
+named "release-2.9".</li>
+<li id="clause-6-6-3"><a href="#clause-6-6-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.6.3.</a>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
+<li id="clause-6-6-4"><a href="#clause-6-6-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.6.4.</a>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="clause-7"><a href="#clause-7" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.</a>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
+<li id="clause-7-1"><a href="#clause-7-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.1.</a>You MUST NOT under any circumstances force push to the master branch.</li>
+<li id="clause-7-2"><a href="#clause-7-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.2.</a>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.</li>
-<li>If a change branch is wrongfully merged into master, or for any other
+<li id="clause-7-3"><a href="#clause-7-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.3.</a>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.</li>
 </ol>
 </li>
-<li>Git Best Practices
+<li id="clause-8"><a href="#clause-8" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.</a>Git Best Practices
 <ol>
-<li>All commit messages SHOULD follow the Commit Guidelines and format from
+<li id="clause-8-1"><a href="#clause-8-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.1.</a>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 id="clause-8-2"><a href="#clause-8-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.2.</a>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 id="clause-8-3"><a href="#clause-8-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.3.</a>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
+<li id="clause-8-4"><a href="#clause-8-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.4.</a>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 id="clause-8-5"><a href="#clause-8-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.5.</a>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 id="clause-8-6"><a href="#clause-8-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.6.</a>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> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <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>

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.qe8PXlQZ.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="#clause-1" 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="clause-1"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>TL;DR</span> </a><a href="#clause-2" 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="clause-2"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>The Master Branch</span> </a><a href="#clause-3" 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="clause-3"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Change Branches</span> </a><a href="#clause-4" 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="clause-4"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Pull Requests</span> </a><a href="#clause-5" 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="clause-5"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Versioning</span> </a><a href="#clause-6" 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="clause-6"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Releases</span> </a><a href="#clause-7" 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="clause-7"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Release Branches</span> </a><a href="#clause-8" 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="clause-8"> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 8. </span> <span>Bug Fixes &amp; Rollback</span> </a><a href="#clause-9" 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="clause-9"> <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="#clause-1" 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="#clause-2" 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="#clause-3" 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="#clause-4" 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="#clause-5" 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="#clause-6" 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="#clause-7" 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="#clause-8" 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="#clause-9" 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,200 +190,197 @@ 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="clause-1"><a href="#clause-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.</a>TL;DR
 <ol>
-<li>Don’t break the master branch.</li>
-<li>A release is a git tag.</li>
+<li id="clause-1-1"><a href="#clause-1-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.1.</a>Don't break the master branch.</li>
+<li id="clause-1-2"><a href="#clause-1-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>1.2.</a>A release is a git tag.</li>
 </ol>
 </li>
-<li>The Master Branch
+<li id="clause-2"><a href="#clause-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.</a>The Master Branch
 <ol>
-<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
+<li id="clause-2-1"><a href="#clause-2-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.1.</a>A branch named "master" MUST exist and it MUST be referred to as the
+"master branch".</li>
+<li id="clause-2-2"><a href="#clause-2-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.2.</a>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
+<li id="clause-2-3"><a href="#clause-2-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.3.</a>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 id="clause-2-4"><a href="#clause-2-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>2.4.</a>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="clause-3"><a href="#clause-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.</a>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
+<li id="clause-3-1"><a href="#clause-3-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.1.</a>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.</li>
-<li>You MUST create separate change branches for each distinctly different
+<li id="clause-3-2"><a href="#clause-3-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.2.</a>You MUST create separate change branches for each distinctly different
 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
+<li id="clause-3-3"><a href="#clause-3-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.3.</a>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.</li>
-<li>Change branches MUST be regularly updated with any changes from their
+<li id="clause-3-4"><a href="#clause-3-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.4.</a>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
+<li id="clause-3-5"><a href="#clause-3-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>3.5.</a>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="clause-4"><a href="#clause-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.</a>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>A pull request MUST only be merged when the change branch is up-to-date
+<li id="clause-4-1"><a href="#clause-4-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.1.</a>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 id="clause-4-2"><a href="#clause-4-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.2.</a>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.</li>
-<li>To get feedback, help, or generally just discuss a change branch with
+<li id="clause-4-3"><a href="#clause-4-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>4.3.</a>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.</li>
 </ol>
 </li>
-<li>Versioning
+<li id="clause-5"><a href="#clause-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.</a>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”
+<li id="clause-5-1"><a href="#clause-5-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.1.</a>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.</li>
-<li>If you are using a “VERSION” file in the root of the project, this MUST
+<li id="clause-5-2"><a href="#clause-5-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.2.</a>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
+<li id="clause-5-3"><a href="#clause-5-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>5.3.</a>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="clause-6"><a href="#clause-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.</a>Releases
 <ol>
-<li>To create a new release, you MUST create a “version bump” commit which
+<li id="clause-6-1"><a href="#clause-6-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.1.</a>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
+<li id="clause-6-2"><a href="#clause-6-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.2.</a>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 release tag on the version bump commit MUST be named exactly the same
+<li id="clause-6-3"><a href="#clause-6-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.3.</a>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 id="clause-6-4"><a href="#clause-6-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.4.</a>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
+<li id="clause-6-5"><a href="#clause-6-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.5.</a>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
+<li id="clause-6-6"><a href="#clause-6-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>6.6.</a>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.</li>
 </ol>
 </li>
-<li>Release Branches
+<li id="clause-7"><a href="#clause-7" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.</a>Release Branches
 <ol>
-<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
+<li id="clause-7-1"><a href="#clause-7-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.1.</a>Any branch that has a name starting with "release-" SHOULD be referred to
+as a "release branch".</li>
+<li id="clause-7-2"><a href="#clause-7-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.2.</a>Use of release branches is OPTIONAL.</li>
+<li id="clause-7-3"><a href="#clause-7-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.3.</a>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.</li>
-<li>There are two types of release branches; short-term, and long-term.</li>
-<li>Short-Term Release Branches
+<li id="clause-7-4"><a href="#clause-7-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.4.</a>There are two types of release branches; short-term, and long-term.</li>
+<li id="clause-7-5"><a href="#clause-7-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.</a>Short-Term Release Branches
 <ol>
-<li>Used for creating a specific versioned release.</li>
-<li>A short-term release branch is RECOMMENDED if there is a lengthy
+<li id="clause-7-5-1"><a href="#clause-7-5-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.1.</a>Used for creating a specific versioned release.</li>
+<li id="clause-7-5-2"><a href="#clause-7-5-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.2.</a>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>When using a short-term release branch, the version bump commit and
+<li id="clause-7-5-3"><a href="#clause-7-5-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.3.</a>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 id="clause-7-5-4"><a href="#clause-7-5-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.4.</a>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
+<li id="clause-7-5-5"><a href="#clause-7-5-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.5.</a>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.</li>
-<li>After the version bump commit and release tag have been created, the
+<li id="clause-7-5-6"><a href="#clause-7-5-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.5.6.</a>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.</li>
 </ol>
 </li>
-<li>Long-Term Release Branches
+<li id="clause-7-6"><a href="#clause-7-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.6.</a>Long-Term Release Branches
 <ol>
-<li>Used for work on versions which are not currently part of the master
+<li id="clause-7-6-1"><a href="#clause-7-6-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.6.1.</a>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.</li>
-<li>The branch name MUST have a non-specific version number. For example
+<li id="clause-7-6-2"><a href="#clause-7-6-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.6.2.</a>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>
-<li>To create a new release from a long-term release branch, you MUST
+named "release-2.9".</li>
+<li id="clause-7-6-3"><a href="#clause-7-6-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.6.3.</a>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
+<li id="clause-7-6-4"><a href="#clause-7-6-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>7.6.4.</a>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="clause-8"><a href="#clause-8" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.</a>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
+<li id="clause-8-1"><a href="#clause-8-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.1.</a>You MUST NOT under any circumstances force push to the master branch.</li>
+<li id="clause-8-2"><a href="#clause-8-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.2.</a>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.</li>
-<li>If a change branch is wrongfully merged into master, or for any other
+<li id="clause-8-3"><a href="#clause-8-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>8.3.</a>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.</li>
 </ol>
 </li>
-<li>Git Best Practices
+<li id="clause-9"><a href="#clause-9" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>9.</a>Git Best Practices
 <ol>
-<li>All commit messages SHOULD follow the Commit Guidelines and format from
+<li id="clause-9-1"><a href="#clause-9-1" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>9.1.</a>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 id="clause-9-2"><a href="#clause-9-2" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>9.2.</a>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 id="clause-9-3"><a href="#clause-9-3" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>9.3.</a>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
+<li id="clause-9-4"><a href="#clause-9-4" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>9.4.</a>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 id="clause-9-5"><a href="#clause-9-5" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>9.5.</a>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 id="clause-9-6"><a href="#clause-9-6" class="clause-link" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="clause-link-icon" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>9.6.</a>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> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <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>

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: "^_" },
+      ],
+    },
+  },
+);

package.json

@@ -1,23 +1,46 @@
 {
   "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-specs": "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",
+    "semver": "^7.7.3",
+    "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",
+    "@types/bun": "^1.3.5",
+    "@types/semver": "^7.7.1",
+    "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"
   }
 }

prettier.config.js

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

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>

scripts/update-specs.ts

@@ -2,43 +2,87 @@
  * 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.
+ * Versions are discovered from git tags and filtered based on config.
  */
 
 import * as fs from "node:fs";
 import * as path from "node:path";
+import * as semver from "semver";
+import { $ } from "bun";
+import { config } from "../src/config";
 
-const config = {
-  currentVersion: "1.0.0-rc.5",
-  versions: [
-    "1.0.0-rc.5",
-    "1.0.0-rc.4",
-    "1.0.0-rc.3",
-    "1.0.0-rc.2",
-    "1.0.0-rc.1",
-  ],
-  update: {
-    urlTemplate:
-      "https://github.com/jimeh/common-flow/raw/{{version}}/{{file}}",
-    bodyTemplate: `---
+const updateConfig = {
+  bodyTemplate: `---
 title: {{title}}
 version: {{version}}
 ---
 {{content}}`,
-    imgTemplate:
-      '<img src="/spec/{{file}}" alt="{{title}} diagram" width="100%" />',
-    outputDir: "src/content/spec",
-    publicDir: "public/spec",
-    files: {
-      document: "common-flow.md",
-      diagram: "common-flow.svg",
-    },
-  },
+  outputDir: "src/content/spec",
+  publicDir: "public/spec",
 };
 
+/**
+ * Fetch all tags from the GitHub repository.
+ */
+async function fetchTags(repository: string): Promise<string[]> {
+  const repoUrl = `https://github.com/${repository}.git`;
+  console.log(`Fetching tags from ${repoUrl}...`);
+
+  try {
+    const result = await $`git ls-remote --tags ${repoUrl}`.text();
+
+    return result
+      .split("\n")
+      .filter(Boolean)
+      .map((line: string) => line.match(/refs\/tags\/(.+)$/)?.[1])
+      .filter(
+        (tag: string | undefined): tag is string =>
+          tag !== undefined && !tag.endsWith("^{}"),
+      );
+  } catch (error) {
+    throw new Error(
+      `Failed to fetch tags: ${error instanceof Error ? error.message : String(error)}`,
+    );
+  }
+}
+
+/**
+ * Get the prerelease type of a version (e.g., "rc", "draft", or null for
+ * stable).
+ */
+function getPrereleaseType(version: string): string | null {
+  const prerelease = semver.prerelease(version);
+  if (!prerelease) return null;
+  return String(prerelease[0]);
+}
+
+/**
+ * Filter tags based on discovery configuration.
+ * Stable versions are always included; prereleases only if their type is in
+ * the includePrereleaseTypes list.
+ */
+function filterVersions(tags: string[]): string[] {
+  const { includePrereleaseTypes, excludeVersions } = config.update.discovery;
+
+  return tags.filter((tag) => {
+    // Must be valid semver
+    if (!semver.valid(tag)) return false;
+
+    // Check explicit exclusions
+    if (excludeVersions.includes(tag)) return false;
+
+    // Stable versions are always included
+    const prereleaseType = getPrereleaseType(tag);
+    if (prereleaseType === null) return true;
+
+    // Prereleases only if their type is in the list
+    return includePrereleaseTypes.includes(prereleaseType);
+  });
+}
+
 function buildFileUrl(
   fileType: "document" | "diagram",
-  version: string
+  version: string,
 ): string {
   const file = config.update.files[fileType];
   return config.update.urlTemplate
@@ -67,19 +111,36 @@ function writeFile(filePath: string, content: string, comment = ""): void {
   console.log(` - ${filePath}${comment}`);
 }
 
-function removeAllSpecs(): void {
-  console.log("\nRemoving existing spec files:");
+/**
+ * Remove spec files for versions not in the provided list.
+ * Files for versions in the list are left alone (they'll be overwritten).
+ */
+function removeStaleSpecs(versionsToKeep: string[]): void {
+  const keepSet = new Set(versionsToKeep);
+  let removedAny = false;
 
-  for (const dir of [config.update.outputDir, config.update.publicDir]) {
-    if (fs.existsSync(dir)) {
-      const files = fs.readdirSync(dir);
-      for (const file of files) {
+  for (const dir of [updateConfig.outputDir, updateConfig.publicDir]) {
+    if (!fs.existsSync(dir)) continue;
+
+    const files = fs.readdirSync(dir);
+    for (const file of files) {
+      // Extract version from filename (e.g., "1.0.0-rc.1.md" -> "1.0.0-rc.1")
+      const version = path.basename(file, path.extname(file));
+      if (!keepSet.has(version)) {
+        if (!removedAny) {
+          console.log("\nRemoving stale spec files:");
+          removedAny = true;
+        }
         const filePath = path.join(dir, file);
         fs.unlinkSync(filePath);
         console.log(`   ${filePath}`);
       }
     }
   }
+
+  if (!removedAny) {
+    console.log("\nNo stale spec files to remove.");
+  }
 }
 
 interface Spec {
@@ -106,16 +167,8 @@ async function fetchSpec(version: string): Promise<Spec> {
   // Extract title from first line (after version replacement)
   const title = document.split("\n", 1)[0];
 
-  // If diagram exists, inject image tag after the title
-  if (diagram) {
-    const imgTag = config.update.imgTemplate
-      .replace("{{file}}", `${version}.svg`)
-      .replace("{{title}}", title);
-    document = document.replace(/^(.*\n=+\n)/, `$1\n${imgTag}\n`);
-  }
-
   // Build body with frontmatter
-  const body = config.update.bodyTemplate
+  const body = updateConfig.bodyTemplate
     .replace("{{content}}", document)
     .replace("{{title}}", title)
     .replace("{{version}}", version);
@@ -129,21 +182,38 @@ async function fetchSpec(version: string): Promise<Spec> {
 }
 
 async function main(): Promise<void> {
-  removeAllSpecs();
+  // 1. Discover and filter versions
+  const tags = await fetchTags(config.update.repository);
+  console.log(`Found ${tags.length} tags`);
 
-  console.log("\nFetching configured spec versions:");
+  const filtered = filterVersions(tags);
+  const sorted = semver.rsort([...filtered]);
 
-  for (const version of config.versions) {
+  console.log(`\nIncluded ${sorted.length} versions after filtering:`);
+  console.log(`   ${sorted.join(", ")}`);
+
+  if (sorted.length === 0) {
+    console.error("\nNo versions to process. Exiting.");
+    process.exit(1);
+  }
+
+  // 2. Remove spec files for versions no longer in the list
+  removeStaleSpecs(sorted);
+
+  // 3. Fetch specs for all versions
+  console.log("\nFetching spec documents:");
+
+  for (const version of sorted) {
     try {
       const spec = await fetchSpec(version);
 
       // Write markdown file to content collection
-      const mdPath = path.join(config.update.outputDir, `${version}.md`);
+      const mdPath = path.join(updateConfig.outputDir, `${version}.md`);
       writeFile(mdPath, spec.body);
 
       // Write SVG diagram to public directory
       if (spec.diagram) {
-        const svgPath = path.join(config.update.publicDir, `${version}.svg`);
+        const svgPath = path.join(updateConfig.publicDir, `${version}.svg`);
         writeFile(svgPath, spec.diagram);
       }
     } catch (error) {
@@ -151,7 +221,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();

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>

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>

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>

src/components/Header.astro

@@ -0,0 +1,182 @@
+---
+import { Icon } from "astro-icon/components";
+import VersionSelector from "./VersionSelector.astro";
+import ThemeToggle from "./ThemeToggle.astro";
+import { config } from "../config";
+
+interface Props {
+  version: string;
+  versions: string[];
+}
+
+const { version, versions } = 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={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={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>

src/components/Hero.astro

@@ -0,0 +1,160 @@
+---
+import { Icon } from "astro-icon/components";
+import VersionSelector from "./VersionSelector.astro";
+import ThemeToggle from "./ThemeToggle.astro";
+import { config } from "../config";
+
+interface Props {
+  version: string;
+  versions: string[];
+  svgPath: string;
+}
+
+const { version, versions, 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={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>

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>

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>

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>

src/components/SpecSection.astro

@@ -0,0 +1,54 @@
+---
+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>
+
+<script>
+  import { initClauseHighlight } from "../scripts/clauseHighlight";
+  initClauseHighlight();
+</script>

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>

src/components/ThemeToggle.astro

@@ -1,95 +1,123 @@
 ---
-// 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");
         }
       });
   }

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>

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>

src/config.ts

@@ -1,30 +1,37 @@
 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: [
-    "1.0.0-rc.5",
-    "1.0.0-rc.4",
-    "1.0.0-rc.3",
-    "1.0.0-rc.2",
-    "1.0.0-rc.1",
-  ],
+  // Optional override for current version (null = auto-detect from specs)
+  currentVersionOverride: null as string | null,
 
   // Used by update script
   update: {
+    repository: "jimeh/common-flow",
     urlTemplate:
       "https://github.com/jimeh/common-flow/raw/{{version}}/{{file}}",
     files: {
       document: "common-flow.md",
       diagram: "common-flow.svg",
     },
+    // Version discovery settings
+    discovery: {
+      // Prerelease types to include (stable versions are always included)
+      includePrereleaseTypes: ["rc"] as string[],
+      // Explicit versions to exclude
+      excludeVersions: [] as string[],
+    },
   },
 } as const;
 

src/content.config.ts

@@ -2,7 +2,12 @@ import { defineCollection, z } from "astro:content";
 import { glob } from "astro/loaders";
 
 const spec = defineCollection({
-  loader: glob({ pattern: "**/*.md", base: "./src/content/spec" }),
+  loader: glob({
+    pattern: "**/*.md",
+    base: "./src/content/spec",
+    // Use filename (without extension) as ID to preserve version strings
+    generateId: ({ entry }) => entry.replace(/\.md$/, ""),
+  }),
   schema: z.object({
     title: z.string(),
     version: z.string(),

src/content/spec/1.0.0-rc.1.md

@@ -5,8 +5,6 @@ version: 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
 -------
 

src/content/spec/1.0.0-rc.2.md

@@ -5,8 +5,6 @@ version: 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
 -------
 

src/content/spec/1.0.0-rc.3.md

@@ -5,8 +5,6 @@ version: 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
 -------
 

src/content/spec/1.0.0-rc.4.md

@@ -5,8 +5,6 @@ version: 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
 -------
 

src/content/spec/1.0.0-rc.5.md

@@ -5,8 +5,6 @@ version: 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
 ------------
 

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>

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>

src/layouts/SpecLayout.astro

@@ -0,0 +1,57 @@
+---
+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">;
+  versions: string[];
+}
+
+const { spec, versions } = 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} versions={versions} />
+
+  <main>
+    <Hero version={version} versions={versions} 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>

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>

src/pages/index.astro

@@ -1,6 +1,17 @@
 ---
-import { config } from "../config";
+import { getCollection } from "astro:content";
 
-// Redirect to current version
-return Astro.redirect(`/spec/${config.currentVersion}`);
+import SpecLayout from "../layouts/SpecLayout.astro";
+import { getVersionInfo } from "../utils/versions";
+
+// Get version info and render the current/latest version
+const { versions, currentVersion } = await getVersionInfo();
+const specs = await getCollection("spec");
+const spec = specs.find((s) => s.data.version === currentVersion);
+
+if (!spec) {
+  throw new Error(`Spec version ${currentVersion} not found`);
+}
 ---
+
+<SpecLayout spec={spec} versions={versions} />

src/pages/spec/[version].astro

@@ -1,6 +1,8 @@
 ---
-import { getCollection, render } from "astro:content";
-import Default from "../../layouts/Default.astro";
+import { getCollection } from "astro:content";
+
+import SpecLayout from "../../layouts/SpecLayout.astro";
+import { getVersionInfo } from "../../utils/versions";
 
 export async function getStaticPaths() {
   const specs = await getCollection("spec");
@@ -11,92 +13,7 @@ export async function getStaticPaths() {
 }
 
 const { spec } = Astro.props;
-const { Content } = await render(spec);
+const { versions } = await getVersionInfo();
 ---
 
-<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} versions={versions} />

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();
+}

src/scripts/clauseHighlight.ts

@@ -0,0 +1,75 @@
+/**
+ * Highlights clause elements when navigating to them via anchor links.
+ * Works on both initial page load with hash and when clicking anchor links.
+ */
+
+const HIGHLIGHT_DURATION = 2000;
+const HIGHLIGHT_CLASS = "clause-highlight";
+
+/**
+ * Highlight a clause element briefly
+ */
+function highlightClause(element: Element): void {
+  // Remove any existing highlight
+  element.classList.remove(HIGHLIGHT_CLASS);
+
+  // Force reflow to restart animation if needed
+  void (element as HTMLElement).offsetWidth;
+
+  // Add highlight class
+  element.classList.add(HIGHLIGHT_CLASS);
+
+  // Remove after animation completes
+  setTimeout(() => {
+    element.classList.remove(HIGHLIGHT_CLASS);
+  }, HIGHLIGHT_DURATION);
+}
+
+/**
+ * Handle hash change and highlight target clause
+ */
+function handleHashChange(): void {
+  const hash = window.location.hash;
+  if (!hash || !hash.startsWith("#clause-")) return;
+
+  const targetId = hash.slice(1);
+  const element = document.getElementById(targetId);
+  if (element) {
+    // Small delay to let scroll complete
+    setTimeout(() => highlightClause(element), 100);
+  }
+}
+
+/**
+ * Initialize clause highlight behavior
+ */
+export function initClauseHighlight(): void {
+  // Handle clicks on clause links
+  document.addEventListener("click", (e) => {
+    const link = (e.target as Element).closest('a[href^="#clause-"]');
+    if (!link) return;
+
+    const href = link.getAttribute("href");
+    if (!href) return;
+
+    const targetId = href.slice(1);
+    const element = document.getElementById(targetId);
+    if (element) {
+      // Small delay to let scroll complete
+      setTimeout(() => highlightClause(element), 100);
+    }
+  });
+
+  // Handle hash changes (back/forward navigation)
+  window.addEventListener("hashchange", handleHashChange);
+
+  // Handle initial page load with hash
+  if (window.location.hash?.startsWith("#clause-")) {
+    // Wait for page to be fully ready
+    if (document.readyState === "complete") {
+      handleHashChange();
+    } else {
+      window.addEventListener("load", handleHashChange);
+    }
+  }
+}

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,472 @@
   .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 clause-highlight-pulse {
+  0% {
+    background-color: theme(colors.sky.500 / 15%);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
+@keyframes clause-highlight-pulse-dark {
+  0% {
+    background-color: theme(colors.sky.700 / 20%);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
+@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);
+  }
+
+  /* Spec clauses - ordered list with CSS counters and hover anchor links */
+  .prose-spec ol {
+    padding-left: 2.25rem;
+    counter-reset: item;
+    list-style: none;
+  }
+
+  .prose-spec ol>li {
+    counter-increment: item;
+    position: relative;
+    margin-bottom: 0.5rem;
+  }
+
+  .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);
+  }
+
+  /* Clause highlight effect using ::after pseudo-element */
+  .prose-spec ol>li::after {
+    content: "";
+    position: absolute;
+    inset: -0.25rem -0.5rem;
+    left: -2.75rem;
+    background-color: transparent;
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .prose-spec ol>li.clause-highlight::after {
+    animation: clause-highlight-pulse 2s ease-out forwards;
+  }
+
+  .dark .prose-spec ol>li.clause-highlight::after {
+    animation: clause-highlight-pulse-dark 2s ease-out forwards;
+  }
+
+  /* Anchor link with clause number - hidden by default, shown on hover */
+  .prose-spec .clause-link {
+    position: absolute;
+    right: 100%;
+    padding-right: 0.5rem;
+    font-weight: 500;
+    color: theme(colors.slate.400);
+    text-decoration: none;
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+  }
+
+  .dark .prose-spec .clause-link {
+    color: theme(colors.neutral.500);
+  }
+
+  /* Link icon in the anchor link */
+  .prose-spec .clause-link-icon {
+    flex-shrink: 0;
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* On hover: show anchor link, hide CSS counter */
+  .prose-spec ol>li:hover:not(:has(ol:hover))>.clause-link,
+  .prose-spec ol>li:hover:not(:has(ol:hover))>p>.clause-link,
+  .prose-spec .clause-link:hover {
+    opacity: 1;
+  }
+
+  .prose-spec ol>li:hover:not(:has(ol:hover))::before {
+    opacity: 0;
+  }
+
+  /* Orange color on direct hover of the link */
+  .prose-spec .clause-link:hover {
+    color: theme(colors.orange.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);
   }
 }

src/utils/parseSpecContent.ts

@@ -0,0 +1,449 @@
+/**
+ * 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 { getIconData, iconToSVG, iconToHTML } from "@iconify/utils";
+import heroicons from "@iconify-json/heroicons/icons.json";
+import type {
+  Root,
+  RootContent,
+  Heading,
+  List,
+  ListItem,
+  Html,
+} 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();
+}
+
+/**
+ * Generate link icon SVG from heroicons icon set
+ */
+function generateLinkIconSvg(): string {
+  const iconData = getIconData(heroicons, "link");
+  if (!iconData) {
+    return "";
+  }
+  const result = iconToSVG(iconData);
+  return iconToHTML(result.body, {
+    ...result.attributes,
+    class: "clause-link-icon",
+    stroke: "currentColor",
+    "stroke-width": "2",
+  });
+}
+
+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];
+        const clauseNum = i + 1;
+        sections.push({
+          id: `clause-${clauseNum}`,
+          title,
+          content: "",
+          clause: `${clauseNum}.`,
+        });
+      }
+      break; // Only process first ordered list
+    }
+  }
+
+  return sections;
+}
+
+/**
+ * Add anchor IDs and links to ordered list items recursively.
+ * Injects an invisible anchor link before content for hover-to-reveal behavior.
+ */
+function addClauseAnchors(list: List, prefix: string = ""): void {
+  for (let i = 0; i < list.children.length; i++) {
+    const item = list.children[i];
+    if (item.type !== "listItem") continue;
+
+    // Calculate clause number and ID
+    const clauseNum = prefix ? `${prefix}.${i + 1}` : `${i + 1}`;
+    const clauseId = `clause-${clauseNum.replace(/\./g, "-")}`;
+
+    // Add ID to the list item via hProperties
+    (item as ListItem & { data?: { hProperties?: { id?: string } } }).data = {
+      hProperties: { id: clauseId },
+    };
+
+    // Find the first paragraph in the item and prepend an anchor link
+    for (const child of item.children) {
+      if (child.type === "paragraph") {
+        // Create anchor link HTML with clause number text and link icon
+        const linkIcon = generateLinkIconSvg();
+        const anchorHtml: Html = {
+          type: "html",
+          value: `<a href="#${clauseId}" class="clause-link" aria-hidden="true">${linkIcon}${clauseNum}.</a>`,
+        };
+        // Prepend anchor to paragraph children
+        (child as { children: RootContent[] }).children.unshift(
+          anchorHtml as unknown as RootContent,
+        );
+        break;
+      }
+    }
+
+    // Recursively process nested ordered lists
+    for (const child of item.children) {
+      if (child.type === "list" && (child as List).ordered) {
+        addClauseAnchors(child as List, clauseNum);
+      }
+    }
+  }
+}
+
+/**
+ * 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) from the tree - it's displayed separately in the Hero
+  const nodes = tree.children.filter((node) => {
+    if (node.type === "heading" && (node as Heading).depth === 1) 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 and links to spec list items
+  for (const node of specNodes) {
+    if (node.type === "list" && (node as List).ordered) {
+      addClauseAnchors(node as List);
+      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;
+}

src/utils/versions.ts

@@ -0,0 +1,48 @@
+import { getCollection } from "astro:content";
+import * as semver from "semver";
+import { config } from "../config";
+
+export interface VersionInfo {
+  versions: string[];
+  currentVersion: string;
+}
+
+/**
+ * Get version information derived from available spec files.
+ * Returns all versions sorted newest-first and determines the current version.
+ */
+export async function getVersionInfo(): Promise<VersionInfo> {
+  const specs = await getCollection("spec");
+  const versions = specs
+    .map((s) => s.data.version)
+    .filter((v): v is string => semver.valid(v) !== null)
+    .sort((a, b) => semver.rcompare(a, b)); // newest first
+
+  const currentVersion =
+    config.currentVersionOverride ?? determineCurrentVersion(versions);
+
+  return { versions, currentVersion };
+}
+
+/**
+ * Determine the current version based on priority:
+ * 1. Latest stable version
+ * 2. Latest RC version
+ * 3. Newest available version
+ */
+function determineCurrentVersion(versions: string[]): string {
+  // Priority order: stable (null prerelease) first, then rc
+  const priority: (string | null)[] = [null, "rc"];
+
+  for (const type of priority) {
+    const match = versions.find((v) => {
+      const pre = semver.prerelease(v);
+      if (type === null) return pre === null;
+      return pre?.[0] === type;
+    });
+    if (match) return match;
+  }
+
+  // Fallback to newest overall
+  return versions[0] ?? "";
+}