{{#extends "base"}}
{{#block "main"}}
<section class="hero" aria-labelledby="hero-heading">
  <div class="container hero-grid">
    <div class="hero-image">
      <picture>
        <source srcset="{{locale_path}}assets/images/portrait.webp" type="image/webp" />
        <img src="{{locale_path}}assets/images/portrait.jpg" alt="{{hero_alt}}" width="512" height="512" loading="eager" fetchpriority="high" />
      </picture>
    </div>
    <div class="stack">
      <p class="eyebrow">{{eyebrow}}</p>
      <h1 id="hero-heading">{{headline}}</h1>
      <p class="lead">{{lead}}</p>
      <div class="cta-row">
        <a class="btn btn-primary" href="{{locale_path}}projects/">View case studies</a>
        <a class="btn btn-secondary" href="{{locale_path}}apex.zip" download>Download .zip</a>
        <a class="btn btn-outline" href="{{locale_path}}apex.tar.gz" download>Download .tar.gz</a>
      </div>
    </div>
  </div>
</section>

<section class="section section-soft" aria-labelledby="metrics-heading">
  <div class="container stack">
    <div class="text-center stack">
      <h2 id="metrics-heading">Measured, not asserted</h2>
      <p class="lead mx-auto text-center">Every figure below is produced by a CI gate on each commit. Nothing here is a static badge.</p>
    </div>
    <div class="grid">
      <div class="card metric">
        <p class="metric-value">AA</p>
        <p class="metric-title">WCAG 2.2 conformance</p>
        <p>Verified by axe-core and <code>ssg audit</code>. Colour tokens additionally clear AAA 7:1 for text.</p>
      </div>
      <div class="card metric">
        <p class="metric-value">0</p>
        <p class="metric-title">Third-party requests</p>
        <p>No CDN, no webfont host, no analytics. Everything ships from your own origin.</p>
      </div>
      <div class="card metric">
        <p class="metric-value">&lt;7&nbsp;KB</p>
        <p class="metric-title">Heaviest page, compressed</p>
        <p>HTML plus the fingerprinted CSS and JS it references. Enforced at 20&nbsp;KB by <code>scripts/pageweight.py</code>.</p>
      </div>
      <div class="card metric">
        <p class="metric-value">0.00</p>
        <p class="metric-title">Cumulative layout shift</p>
        <p>Every image carries intrinsic dimensions; no late-loading webfont reflows the page.</p>
      </div>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="body-heading">
  <div class="container prose">
    <h2 id="body-heading" class="visually-hidden">About this theme</h2>
    {{!content}}
  </div>
</section>
{{/block}}