roux/layouts/partials/footer.html

<footer class="border-t border-[var(--rule)] px-[var(--pad)] pt-9 pb-14
               grid gap-10 font-sans text-[12px] leading-[1.5] text-ink-soft
               [grid-template-columns:2fr_1fr_1fr_1fr]
               max-[820px]:[grid-template-columns:1fr_1fr]">

  {{/* ── Brand column ── */}}
  <div>
    <h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Roux</h4>

    {{/* Mark only — no wordmark */}}
    <svg class="block w-[42px] h-[42px] mb-[14px]" viewBox="0 0 64 64" aria-hidden="true">
      <defs>
        <radialGradient id="fBloom" cx="50%" cy="46%" r="58%">
          <stop offset="0"  stop-color="#b34a30"/>
          <stop offset=".6" stop-color="#8a3322"/>
          <stop offset="1"  stop-color="#5a1d15"/>
        </radialGradient>
      </defs>
      <g fill="#6e2519" transform="translate(32 32)">
        <ellipse cx="0" cy="-16" rx="10.5" ry="14"/>
        <ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(60)"/>
        <ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(120)"/>
        <ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(180)"/>
        <ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(240)"/>
        <ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(300)"/>
      </g>
      <g fill="url(#fBloom)" transform="translate(32 32) rotate(30)">
        <ellipse cx="0" cy="-11" rx="8" ry="11"/>
        <ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(60)"/>
        <ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(120)"/>
        <ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(180)"/>
        <ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(240)"/>
        <ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(300)"/>
      </g>
      <g fill="#9a3a26" transform="translate(32 32)">
        <ellipse cx="0" cy="-6" rx="5" ry="7.5"/>
        <ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(72)"/>
        <ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(144)"/>
        <ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(216)"/>
        <ellipse cx="0" cy="-6" rx="5" ry="7.5" transform="rotate(288)"/>
      </g>
      <circle cx="32" cy="32" r="3.2" fill="#3a120c"/>
      <circle cx="32" cy="31.4" r="1.2" fill="#c0573c" opacity=".7"/>
    </svg>

    <p>A slow-publishing fashion journal, gathered in Paris. One hundred photographs at a time, printed and unprinted.<br/>roux.pivoine.art</p>
  </div>

  {{/* ── Categories (top 5 by count) ── */}}
  <div>
    <h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Categories</h4>
    {{- range first 5 $.Site.Taxonomies.categories.ByCount }}
      {{- $tp := $.Site.GetPage (printf "/categories/%s" .Name) }}
      {{- if $tp }}
      <p><a class="hover:text-ink" href="{{ $tp.RelPermalink }}">{{ $tp.Title }}</a></p>
      {{- end }}
    {{- end }}
  </div>

  {{/* ── Tags (top 5 by count) ── */}}
  <div>
    <h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Index</h4>
    {{- range first 5 $.Site.Taxonomies.tags.ByCount }}
      {{- $tp := $.Site.GetPage (printf "/tags/%s" .Name) }}
      {{- if $tp }}
      <p><a class="hover:text-ink" href="{{ $tp.RelPermalink }}">{{ $tp.Title }}</a></p>
      {{- end }}
    {{- end }}
  </div>

  {{/* ── Colophon ── */}}
  <div>
    <h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Colophon</h4>
    <p>Set in Italiana &amp; Cormorant Garamond, with Outfit for typographic furniture. © Roux MMXXVI.</p>
    <p class="mt-[14px] text-ink">Press
      <span class="border border-[var(--rule)] px-[6px] py-[3px] rounded-[3px] font-mono text-[10px]">⌘K</span>
      from anywhere to search.
    </p>
  </div>
</footer>