{{ define "main" }}
{{- $issue    := index (.Params.issues | default (slice "01")) 0 }}
{{- $issueURL := printf "/issues/%s/" $issue }}
<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
  <div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">
    № {{ $issue }} · {{ index (.Params.categories | default (slice "Plate")) 0 }}
  </div>
  <h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4"><em>{{ .Title }}</em></h1>
  <p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
    {{ .Params.description }}
    <a href="{{ $issueURL }}" class="border-b border-current ml-1">Return to issue →</a>
  </p>
</section>

<section id="grid" data-density="default"
         class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
  {{- $termPage := $.Site.GetPage (printf "/issues/%s" $issue) }}
  {{- $posts := cond (ne $termPage nil) $termPage.Pages .Site.RegularPages }}
  {{- range $i, $p := $posts }}
    {{- partial "card.html" (dict "Page" $p "Index" $i) }}
  {{- end }}
</section>

{{/* Tell JS which slug to open in the lightbox */}}
<script>window.__ROUX_OPEN_SLUG = "{{ .Params.slug }}";</script>
{{ end }}