Add coding agent Git safety post

assets/main.scss

@@ -389,6 +389,16 @@ article.post {
             margin: 0 auto;
             display: block;
             width: 100%;
+            // A diagram scales as one piece, so its type tracks the column
+            // width: unreadable on a phone, oversized on a wide screen. Losing
+            // the 5em side padding and capping the width holds it at about
+            // body size wherever the column has room. Photographs are left
+            // alone, so nothing else on the site moves.
+            &.diagram {
+                padding-left: 0;
+                padding-right: 0;
+                max-width: 572px;
+            }
         }
     }
     a {

styling-and-components.md

@@ -136,4 +136,10 @@ a simple box
 | 3,000-9,999             | $1.75                                   | 
 | 10,000-19,999           | $1.50                                   | 
 | 20,000-49,999           | $1.25                                   | 
-| 50,000+                 | Oracle must be contacted for details    | 
+| 50,000+                 | Oracle must be contacted for details    | 
+
+## Diagrams
+
+Put `{:.diagram}` after an image to drop its side padding and cap its width, so the labels stay readable on a phone and do not stretch across a wide screen. Use it on drawn diagrams. Photographs keep the full column width.
+
+![Four safeguards against two kinds of push, a direct git push and a push made inside a script, with a tick or a cross in every cell.](/assets/posts/2026-08-28-coding-agent-git-safety/what-each-layer-sees.svg "The lower a safeguard sits, the less it depends on what the agent decides to type."){:.diagram}