feat: full-width images, Grebedoc badge, footer polish

- Make hero and infographic images full-width with minimal caption area
- Remove frosted glass card chrome from image figures (cleaner look)
- Add Grebedoc 88x31 banner to footer next to Zensical link
- Change 'Made with' to 'Built with Zensical'
- Right-align image captions, reduce font size for subtlety
- Add footer badge flex layout CSS

docs/stylesheets/extra.css

@@ -495,30 +495,25 @@ article h1, article h2, article h3 {
   max-height: 420px;
 }
 
-/* ── Page hero images ── */
+/* ── Page hero images — full-width, minimal chrome ── */
 .page-hero {
-  margin: 0.6rem 0 1.8rem;
+  margin: 0.6rem 0 1.4rem;
-  border-radius: 18px;
+  border-radius: 12px;
   overflow: hidden;
-  border: 1px solid var(--gp-card-border);
-  background: var(--gp-card-bg);
-  backdrop-filter: blur(10px) saturate(120%);
-  -webkit-backdrop-filter: blur(10px) saturate(120%);
-  box-shadow: var(--gp-card-shadow);
 }
 .page-hero img {
   display: block;
   width: 100%;
   height: auto;
-  max-height: 340px;
+  border-radius: 12px;
-  object-fit: cover;
 }
 .page-hero figcaption {
-  padding: 0.55rem 1rem;
+  padding: 0.35rem 0.6rem 0;
   color: var(--gp-text-muted);
-  font-size: 0.82rem;
+  font-size: 0.75rem;
   font-style: italic;
-  text-align: center;
+  text-align: right;
+  line-height: 1.3;
 }
 .page-hero figcaption a {
   color: var(--gp-primary);
@@ -528,9 +523,9 @@ article h1, article h2, article h3 {
 /* ── AI-generated image credit — cute and understated ── */
 .ai-credit {
   display: inline-block;
-  font-size: 0.78rem;
+  font-size: 0.72rem;
   color: var(--gp-text-muted);
-  opacity: 0.72;
+  opacity: 0.65;
   font-style: italic;
   letter-spacing: 0.01em;
 }
@@ -541,25 +536,42 @@ article h1, article h2, article h3 {
   content: " 🌸";
 }
 
-/* ── Infographic figure ── */
+/* ── Infographic figure — full-width, minimal chrome ── */
 .page-infographic {
-  margin: 1.4rem 0 2rem;
+  margin: 1.2rem 0 1.6rem;
-  border-radius: 18px;
+  border-radius: 12px;
   overflow: hidden;
-  border: 1px solid var(--gp-card-border);
-  background: var(--gp-card-bg);
-  backdrop-filter: blur(10px) saturate(120%);
-  -webkit-backdrop-filter: blur(10px) saturate(120%);
-  box-shadow: var(--gp-card-shadow);
 }
 .page-infographic img {
   display: block;
   width: 100%;
   height: auto;
+  border-radius: 12px;
 }
 .page-infographic figcaption {
-  padding: 0.5rem 1rem;
+  padding: 0.3rem 0.6rem 0;
-  text-align: center;
+  text-align: right;
+}
+
+/* ── Footer badges ── */
+.md-copyright__badges {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.md-copyright__zensical {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+}
+.md-copyright__grebedoc {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+.md-copyright__grebedoc img {
+  image-rendering: pixelated;
 }
 
 /* Print */

overrides/partials/copyright.html

@@ -0,0 +1,20 @@
+<div class="md-copyright">
+  {% if config.copyright %}
+    <div class="md-copyright__highlight">
+      {{ config.copyright }}
+    </div>
+  {% endif %}
+  {% if not config.extra.generator == false %}
+  <div class="md-copyright__badges">
+    <span class="md-copyright__zensical">
+      Built with
+      <a href="https://zensical.org/" target="_blank" rel="noopener">
+        Zensical
+      </a>
+    </span>
+    <a href="https://grebedoc.dev" class="md-copyright__grebedoc" title="served by Grebedoc">
+      <img src="https://grebedoc.dev/88x31.gif" alt="served by Grebedoc" style="image-rendering: pixelated; height: 31px; width: 88px;">
+    </a>
+  </div>
+  {% endif %}
+</div>