feat(hero): responsive srcset for carousel slides

Phones were downloading the full 1.5 MB / 2 MB hero JPEG. Now the
image macro emits a `srcset` ladder (480/768/1200/1600/2560/3840/5345 w)
with `sizes="100vw"`, so a 480 px-wide phone picks the ~19 KB variant
and 5K screens still get the native resolution.

Also drop `loading="lazy"` on the first slide — it is the LCP element
and should load eager.

Macro changes:
- Add `srcset_widths` (CSV string, since Tera macros only allow scalar
  defaults) and `sizes` parameters.
- Add `lazy=true` parameter; callers can pass `lazy=false` for
  above-the-fold images.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

templates/index.html

@@ -16,11 +16,18 @@
   <div class="carousel-inner" role="listbox">
     {% for slide in section.extra.slides %}
       <div class="item{% if loop.first %} active{% endif %}">
-        {# Serve the source image at full resolution — Bootstrap-3 only
-           constrains via `max-width: 100%`, so on viewports wider than
-           the natural image width the slide would otherwise sit short
-           of the column edge. Live does the same (no resize). #}
-        {{ image::render(src=slide.image, alt=slide.alt) }}
+        {# Bootstrap-3 only constrains hero images via `max-width: 100%`,
+           so the natural image width has to cover the widest viewport
+           we care about. We hand the browser a `srcset` ladder up to
+           5345 px (the source's native width) and let it pick — phones
+           grab ~480-800 px, desktops 1600-2560 px, 5K screens the full
+           file. The first slide is the LCP element, so it loads eager. #}
+        {{ image::render(
+             src=slide.image,
+             alt=slide.alt,
+             srcset_widths="480,768,1200,1600,2560,3840,5345",
+             sizes="100vw",
+             lazy=not loop.first) }}
         <div class="carousel-caption">
           <p>{{ slide.heading }}</p>
         </div>