Bundle CSS files to reduce render-blocking requests #98

Problem

The theme currently loads 10 separate CSS files via individual <link> tags in head.html:

• risotto.css
• typography.css
• layout.css
• header.css
• footer.css
• logo.css
• about.css
• colours.css
• palettes/*.css
• custom.css

This results in 10 render-blocking requests with a critical path latency of up to 2.3s on mobile
(measured via PageSpeed Insights). Each file adds a separate round-trip before the browser can
render anything.

Proposed Solution

Use Hugo's built-in asset pipeline to concatenate and minify CSS files into a single bundle:

{{ $styles := slice
  (resources.Get "css/risotto.css")
  (resources.Get "css/typography.css")
  (resources.Get "css/layout.css")
  ...
| resources.Concat "css/bundle.css"
| minify }}
<link rel="stylesheet" href="{{ $styles.Permalink }}">

The palette CSS could either be included conditionally based on the configured palette, or
delivered separately as it's small and only loaded once.

Expected Impact

Reduces render-blocking requests from 10 to 1-2, potentially saving 700-2300ms on the critical
rendering path.

Environment

• Hugo version: current
• Tested on: mobile (PageSpeed Insights simulation)