// Brand mark — official QASONIC logo, themed via CSS mask so it picks up currentColor.
function BrandMark({ size = 44, showWord = true, color = 'var(--brand-ink)' }) {
  const iconStyle = {
    height: size,
    width: size * (2220 / 1860),
    background: 'currentColor',
    WebkitMask: 'url(assets/qasonic-mark.svg) center/contain no-repeat',
    mask: 'url(assets/qasonic-mark.svg) center/contain no-repeat',
    display: 'inline-block',
    flexShrink: 0,
  };
  const wordStyle = {
    height: size * 0.62,
    width: size * 0.62 * (7260 / 1340),
    background: 'currentColor',
    WebkitMask: 'url(assets/qasonic-wordmark.svg) center/contain no-repeat',
    mask: 'url(assets/qasonic-wordmark.svg) center/contain no-repeat',
    display: 'inline-block',
    flexShrink: 0,
  };
  return (
    <span className="brand" aria-label="qasonic" style={{ color, display: 'inline-flex', alignItems: 'center', gap: size * 0.14 }}>
      <span className="brand__icon" style={iconStyle} aria-hidden="true" />
      {showWord && <span className="brand__word" style={wordStyle} role="img" aria-label="qasonic" />}
    </span>
  );
}
Object.assign(window, { BrandMark });