// Wordmark — the name lockup. Bodoni display, a single ochre period as the
// only color event. Sits at the top-left of the composition.
function Wordmark({ size = 'header', onDark = false }) {
  const isHeader = size === 'header';
  const wmStyles = {
    name: {
      fontFamily: 'var(--font-display)',
      fontWeight: 500,
      fontSize: isHeader ? '21px' : 'clamp(56px, 9vw, 132px)',
      lineHeight: isHeader ? 1 : 0.92,
      letterSpacing: isHeader ? '0' : '-0.02em',
      color: onDark ? 'var(--fg-on-dark-1)' : 'var(--fg-1)',
      margin: 0,
      display: 'flex',
      alignItems: 'baseline',
    },
    dot: { color: 'var(--accent-deep)' },
  };
  return (
    <h1 style={wmStyles.name}>
      Josh&nbsp;Bairstow<span style={wmStyles.dot}>.</span>
    </h1>
  );
}
Object.assign(window, { Wordmark });