@font-face {
    font-display: swap;
    font-family: Unbounded;
    font-style: normal;
    font-weight: 400;
    src: url(/assets/unbounded-400-latin.woff2) format('woff2');
}

html {
    background: #211684;
}

/* Three rows: the text block is centred in the full viewport (as in the Figma frames)
   and the logo sits at the bottom of the last row. On a viewport too short for both,
   the page scrolls instead of overlapping. */
body {
    color: #fff;
    display: grid;
    font-family: Unbounded, system-ui, sans-serif;
    font-weight: 400;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    margin: 0;
    min-height: 100vh; /* fallback for browsers without dvh */
    min-height: 100dvh;
    text-align: center;
}

/* Fixed so the cover image does not rescale when the mobile URL bar collapses. */
body::before {
    background: url(/assets/bg.webp) 50% 50% / cover no-repeat;
    content: "";
    inset: 0;
    position: fixed;
    z-index: -1;
}

main {
    grid-row: 2;
    padding: 0 16px;
}

/* 58.5px at the 1366px design width; floor equals the value at the 700px breakpoint. */
h1 {
    font-size: clamp(1.875rem, 4.28vw, 3.65625rem);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}

.bang {
    height: auto;
    margin-left: -0.05em;
    vertical-align: top;
    width: 1.385em;
}

.soon {
    color: rgb(255 255 255 / 0.5);
    font-size: clamp(1rem, 2.34vw, 2rem);
    margin: 0.5em 0 0;
}

.logo {
    align-self: end;
    grid-row: 3;
    height: auto;
    margin: 0 0 clamp(44px, 6.1vh, 80px);
    width: clamp(121px, 14.8vw, 202px);
}

@media (max-width: 700px) {
    h1 {
        font-size: clamp(1.25rem, 6.15vw, 1.75rem);
        white-space: normal;
    }

    h1 .line {
        display: block;
    }

    h1 .line-2 {
        font-size: 1.333em;
    }

    .bang {
        width: 1.0625em;
    }

    .soon {
        font-size: clamp(1rem, 5.13vw, 1.375rem);
    }

    .logo {
        margin-bottom: 80px;
    }
}