bar/layouts/partials/footer.html

<footer class="border-t border-warm/10 bg-bg-deep pt-16 pb-10 mt-10 relative">
  <div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5">

    <div class="grid grid-cols-[1.6fr_1fr_1fr_1fr] gap-10 max-[860px]:grid-cols-2 max-[860px]:gap-8">

      <!-- Brand column -->
      <div>
        <a href="/" class="flex flex-col items-start gap-4 no-underline mb-5" aria-label="{{ .Site.Title }}">
          {{- partial "mark.html" (dict "size" 58) -}}
          <span class="font-serif text-[32px] font-medium tracking-[-0.01em] leading-none text-ink">Bar Pivoine</span>
        </a>
        <div class="w-full h-px bg-warm/10 mb-4"></div>
        {{- $count := len .Site.RegularPages -}}
        <p class="text-ink-mute text-sm leading-relaxed">A field guide to the good pour. {{ $count }} cocktail recipes, low light, honest measures, no garnish left behind.</p>
        <p class="font-mono text-[11px] text-ink-faint leading-relaxed mt-3">Recipes from the <a href="https://www.kaggle.com/datasets/aadyasingh55/cocktails" class="underline underline-offset-2 hover:text-ink-soft transition-colors duration-[180ms]">open cocktail dataset</a> · imagery via FLUX.2 pro</p>
      </div>

      <!-- Categories -->
      <div>
        <h5 class="font-mono text-[11px] tracking-[0.18em] uppercase text-gold mb-4">Categories</h5>
        {{- range first 6 (.Site.Taxonomies.categories.ByCount) -}}
          <a href="{{ .Page.RelPermalink }}" class="block text-ink-mute text-[14px] py-[5px] hover:text-ink transition-colors duration-[180ms]">
            {{ .Page.Title }}
          </a>
        {{- end -}}
      </div>

      <!-- Glassware -->
      <div>
        <h5 class="font-mono text-[11px] tracking-[0.18em] uppercase text-gold mb-4">Glassware</h5>
        {{- range first 6 (.Site.Taxonomies.glasses.ByCount) -}}
          <a href="{{ .Page.RelPermalink }}" class="block text-ink-mute text-[14px] py-[5px] hover:text-ink transition-colors duration-[180ms]">
            {{ .Page.Title }}
          </a>
        {{- end -}}
      </div>

      <!-- Ingredients -->
      <div>
        <h5 class="font-mono text-[11px] tracking-[0.18em] uppercase text-gold mb-4">Ingredients</h5>
        {{- range first 6 (.Site.Taxonomies.ingredients.ByCount) -}}
          <a href="{{ .Page.RelPermalink }}" class="block text-ink-mute text-[14px] py-[5px] hover:text-ink transition-colors duration-[180ms]">
            {{ .Page.Title }}
          </a>
        {{- end -}}
      </div>

    </div>

    <!-- Bottom bar -->
    <div class="flex justify-between items-center mt-[54px] pt-6 border-t border-warm/10">
      <span class="font-mono text-[11px] text-ink-faint tracking-[0.04em]">© 2026 Bar Pivoine</span>
      <div class="flex items-center gap-4 font-mono text-[11px] text-ink-faint tracking-[0.04em]">
        {{- range $i, $item := .Site.Menus.footer -}}
          {{- if $i }}<span class="text-warm/20">|</span>{{ end -}}
          <a href="{{ $item.URL }}" class="hover:text-ink transition-colors duration-[180ms]">{{ $item.Name }}</a>
        {{- end -}}
      </div>
    </div>

  </div>
</footer>