/* cm4.ai.
 *
 * The type is the design. One headline, set as large as the viewport allows,
 * in the monochrome palette Busy Bro uses (busybro/docs/arch/design-system.md):
 * near-black on white, inverted in dark mode, no colour anywhere.
 *
 * No web font. The Content-Security-Policy allows no third-party origin, and
 * Helvetica Neue / Helvetica / Arial are metric-compatible enough that the
 * sizing below holds on every platform.
 */

:root {
    --surface: #ffffff;
    --ink: #0a0a0a;
    --muted: #6e6e6e;

    --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Also the side margin the headline is sized against. */
    --gutter: clamp(1.25rem, 5vw, 4rem);
}

@media (prefers-color-scheme: dark) {
    :root {
        --surface: #0a0a0a;
        --ink: #fafafa;
        --muted: #949494;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Anchored bottom-left, like a poster. svh so mobile browser chrome does not
 * push the headline below the fold. */
main {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--gutter);
}

/* Sized so that COLLABORATION, the longest word, spans the width between the
 * gutters: it is about 8.4em wide in Helvetica Bold and Arial Bold at this
 * tracking, and 8.8 leaves room for fonts a little wider than either. The line
 * then breaks between words and never inside one — "SCALING AI" over
 * "COLLABORATION" on every screen from a small phone up. */
h1 {
    margin: 0;
    font-size: min(calc((100vw - 2 * var(--gutter)) / 8.8), 14rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    hyphens: none;
}

p {
    margin: 1.5rem 0 0;
    font-size: 1rem;
}

a {
    color: var(--muted);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--ink);
}