feat: use img.html partial for hero banner (WebP + srcset) and update CSS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

layouts/index.html

@@ -12,13 +12,19 @@
   <!-- Background media — bundle banner.png first, fallback to front matter -->
   {{- $heroBanner := .Resources.GetMatch "banner.png" -}}
   {{- if not $heroBanner -}}{{- $heroBanner = .Resources.GetMatch "banner.*" -}}{{- end -}}
+  {{- if $heroBanner -}}
+  <div class="absolute inset-0">
+    {{- partial "img.html" (dict "res" $heroBanner "widths" (slice 1200 1920 2560) "sizes" "100vw" "class" "w-full h-full object-cover" "alt" "" "loading" "eager") -}}
+  </div>
+  {{- else -}}
   {{- $heroBannerSrc := "" -}}
-  {{- with $heroBanner }}{{ $heroBannerSrc = .RelPermalink }}{{ else }}{{ with $.Params.background }}{{ $heroBannerSrc = .src }}{{ else }}{{ with $.Params.banner }}{{ $heroBannerSrc = .src }}{{ end }}{{ end }}{{ end -}}
+  {{- with .Params.background }}{{ $heroBannerSrc = .src }}{{ else }}{{ with $.Params.banner }}{{ $heroBannerSrc = .src }}{{ end }}{{ end -}}
   {{- with $heroBannerSrc -}}
   <div class="absolute inset-0">
     <img src="{{ . }}" alt="" class="w-full h-full object-cover" loading="eager" decoding="async">
   </div>
   {{- end -}}
+  {{- end -}}
 
   <!-- Cinematic overlay -->
   <div class="absolute inset-0 overlay-gradient-hero"></div>