<!-- Editorial / portfolio — text nav + primary CTA -->
{#snippet wordmark()}
    <div class="wordmark">
        <span class="material-symbols-outlined">hexagon</span>
        <span>ACME</span>
    </div>
{/snippet}

{#snippet actions()}
    <Button variant="naked">Work</Button>
    <Button variant="naked">About</Button>
    <Button variant="naked">Blog</Button>
    <Button variant="flat" size="sm">Contact</Button>
{/snippet}

<Header palette="tone" leading={wordmark} trailing={actions} />