add charging snally img

Author: cak

README.md

@@ -1,2 +1,9 @@
 # snally-labs.github.io
-Landing page for Snally.com
+
+Landing page for [Snally.com](https://snally.com)
+
+## Snally Artwork
+
+Commissioned Snallygaster illustrations:
+
+- **[Charging Snally](assets/charging-snally.png)** by [Giodude1580](https://bsky.app/profile/giodude1580.bsky.social)

assets/charging-snally.png

@@ -37,12 +37,19 @@ <h1 class="title">Snally</h1>
             folklore trades campfire stories for JavaScript, CSS, and Quarto.
           </p>
 
-          <p>
-            Numbers here morph into playful visuals, and HTML stretches into
-            unexpected shapes. One week you might find a data driven journey
-            through long distance running, the next an interactive monster
-            sighting map or a retro inspired game.
-          </p>
+          <div class="flow-media">
+            <img
+              class="flow-media__img"
+              src="assets/charging-snally.png"
+              alt="Snallygaster illustration — a purple dragon-like cryptid with wide wings, glowing eyes, and fangs in a dynamic pose. Artwork by Giodude1580."
+            />
+            <p>
+              Numbers here morph into playful visuals, and HTML stretches into
+              unexpected shapes. One week you might find a data driven journey
+              through long distance running, the next an interactive monster
+              sighting map or a retro inspired game.
+            </p>
+          </div>
 
           <p>
             Think of it as a garage after midnight. Lights on, coffee brewing,

index.html

@@ -177,3 +177,34 @@ body {
     transform: none;
   }
 }
+
+.flow-media::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.flow-media__img {
+  float: right;
+  margin: 0 0 0.75rem 1rem;
+  width: clamp(180px, 32vw, 300px);
+  height: auto;
+  max-width: 100%;
+}
+
+@media (max-width: 700px) {
+  .flow-media__img {
+    float: none;
+    display: block;
+    margin: 0 auto 0.75rem;
+    width: min(80%, 360px);
+  }
+}
+
+.description p {
+  margin-top: 1.25rem;
+}
+
+.description p:first-child {
+  margin-top: 0;
+}