{{- $cats := slice "Gothic" "Cyberpunk" "Dark Fantasy" "Urban" "Noir" "Fantasy" "Cultural" "Sci-Fi" "Boudoir" "Steampunk" "Luxury" "Action" "Lifestyle" "Nature" "Romantic" "Nightlife" "Elegant" "Adventure" "Mythology" }}
<header class="masthead" id="masthead">
  <div class="masthead__inner">
    <div class="masthead__left">
      <span class="masthead__date" id="mhDate">—</span>
      <span class="mh-issue">№ {{ .Site.Params.issueNumber }}</span>
      <span class="mh-sep" style="opacity:.5">·</span>
      <span class="mh-pub">Roux Quarterly</span>
    </div>

    <a class="masthead__logo" href="/" aria-label="Roux — home">
      {{- partial "logo.html" . }}
    </a>

    <div class="masthead__right">
      <a href="/issue/" class="mh-link">Issues</a>
      <span class="mh-sep" style="opacity:.5">·</span>
      <span class="mh-city">Paris</span>
    </div>
  </div>

  <div class="subhead" style="position:relative">
    <label class="subhead__search" for="searchInput">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
      <input id="searchInput" type="search" autocomplete="off" placeholder="Search the archive — silk, nocturne, atelier…" />
      <span class="subhead__kbd">⌘ K</span>
    </label>
    <div class="subhead__count" id="count"></div>
    <div class="searchpop" id="searchpop"></div>
  </div>

  <div class="tabs" id="tabs">
    <button data-cat="All" aria-pressed="true">All</button>
    {{- range $cats }}
    <button data-cat="{{ . }}" aria-pressed="false">{{ . }}</button>
    {{- end }}
  </div>
</header>