/* "Landing Page v2" from Claude Design: the masthead photo full-bleed, with
   the logo in the top-right corner. */
html, body {
    margin: 0;
    height: 100%;
    background: #f3f2f2;
}

.masthead {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(20px, 4vw, 56px);
    box-sizing: border-box;
    background: url("bg-masthead.jpg") center 45% / cover no-repeat;
}

.logo {
    display: block;
    /* Scales with the window: 28% of its width, but no taller than about
       45% of its height (the logo is 1.19:1), so it shrinks on short
       windows too. The nudge up scales with it. */
    width: min(28vw, 53vh);
    height: auto;
    margin-top: -1.6vw;
}

/* Phones: 28% of a narrow screen is too small to read. */
@media (max-width: 600px) {
    .logo {
        width: min(60vw, 53vh);
    }
}