<template>
  <header class="site-header sticky top-0 z-20 backdrop-blur">
    <div class="site-header__inner mx-auto flex h-full max-w-[1294px] items-center justify-between px-4 lg:px-0">
      <NuxtLink class="site-header__brand flex items-center gap-2 text-[18px] font-semibold tracking-normal" to="/">
        <span class="site-header__brand-mark inline-block h-5 w-4 rounded-sm bg-[var(--site-text)]" />
        sori.studio
      </NuxtLink>
      <div class="site-header__search hidden h-9 w-[470px] items-center rounded-lg px-3 text-sm md:flex site-input">
        <span class="site-header__search-icon mr-2 text-lg leading-none">⌕</span>
        <span class="site-header__search-text site-soft">Search</span>
        <span class="site-header__search-key ml-auto rounded-md px-2 text-xs site-soft site-input">/</span>
      </div>
      <nav class="site-header__nav flex items-center gap-3 text-sm">
        <NuxtLink class="site-header__buy site-accent-button rounded-lg px-4 py-2 font-semibold" to="/pages/about">
          Subscribe
        </NuxtLink>
        <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/about">
          Account
        </NuxtLink>
      </nav>
    </div>
  </header>
</template>
