{{ define "main" }}
<div style="max-width:48rem;margin:0 auto;padding:3rem 1rem">
  <h1 style="font-family:var(--ifk-font);font-size:2.75rem;font-weight:600;margin-bottom:2rem">
    {{ .Title }}
  </h1>
  <div style="display:flex;flex-wrap:wrap;gap:0.75rem">
    {{ range .Pages }}
    <a href="{{ .Permalink }}" style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1.25rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;text-decoration:none;color:var(--ifk-text);font-family:system-ui,sans-serif;font-size:0.9rem;transition:all 0.15s">
      <span style="font-weight:600">{{ .Title }}</span>
      <span style="background:var(--ifk-accent);color:#fff;font-size:0.7rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:999px;min-width:1.25rem;text-align:center">{{ len .Pages }}</span>
    </a>
    {{ end }}
  </div>
</div>
{{ end }}