---
/** The logo, as supplied. Sized by its height so it sits on the header's baseline grid.
    `inline` writes it into the page as a data URI, so it paints with the first frame instead of
    blinking in on every navigation; the header needs that, the footer does not. */
import logoInline from '../assets/logo.webp?inline';
import logoUrl from '../assets/logo.webp?url';

interface Props { class?: string; inline?: boolean }
const { class: className, inline = false } = Astro.props;
---
<img
  class:list={['wordmark', className]}
  src={inline ? logoInline : logoUrl}
  alt="CipherCell"
  width="311"
  height="72"
  loading={inline ? undefined : 'lazy'}
/>

<style>
  .wordmark {
    display: block;
    height: var(--space-5);
    width: auto;
  }
</style>