{{ define "main" }}
<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">
    № {{ .Site.Params.issueNumber }} · {{ .Site.Params.issueSeason }} ·
    <a href="/issues/" class="border-b border-current ml-1">View all issues</a>
  </div>
  <h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4">
    An almanac<br/>of <em>fabric, light</em>,<br/>and gesture.
  </h1>
  <p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
    Roux is a slow-publishing fashion journal — one hundred photographs at a time,
    gathered from <em>ateliers, streets, glasshouses and quiet hotel corridors</em>.
    You are reading <em>{{ .Site.Params.issueName }}</em>, our № {{ .Site.Params.issueNumber }} issue.
  </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)]">
  {{- $posts := where .Site.RegularPages "Section" "posts" }}
  {{- range $i, $p := $posts }}
    {{- partial "card.html" (dict "Page" $p "Index" $i) }}
  {{- end }}
</section>
{{ end }}