@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(../fonts/lato-latin-100-normal.woff2) format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/lato-latin-300-normal.woff2) format('woff2');
}

:root {
    --text: #222;
    --muted: #777;
}

html, body {
    margin: 0;
    min-height: 100%;
    background: #fff;
    color: var(--text);
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

a { color: inherit; }

/* Holding page: the domain name in the middle of the screen, as on the old site */
.holding {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.holding main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
}

.title {
    font-size: 96px;
    font-weight: 100;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.caption {
    font-size: 23px;
    margin-top: 12px;
}

.offer {
    margin-top: 32px;
    font-size: 17px;
    max-width: 480px;
}

.offer label { display: block; margin-bottom: 10px; }

.offer input[type=email] {
    font: inherit;
    padding: 8px 10px;
    border: 1px solid #bbb;
    border-radius: 4px;
    width: 260px;
    max-width: 100%;
}

.offer button,
.offer input[type=submit] {
    font: inherit;
    padding: 8px 18px;
    margin-top: 10px;
    border: 1px solid var(--text);
    border-radius: 4px;
    background: var(--text);
    color: #fff;
    cursor: pointer;
}

.offer .form-field { margin-bottom: 4px; }
.offer .form-errors,
.offer .form-message-error { color: #b00020; }
.offer .notices,
.offer .form-message { margin-bottom: 16px; }

footer {
    text-align: center;
    padding: 16px;
    font-size: 13px;
    color: var(--muted);
}

/* Privacy page */
.text main {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 16px;
    font-size: 16px;
    line-height: 1.6;
}

.text h1 { font-weight: 100; font-size: 2.6em; }
.text h2 { font-size: 1.15em; font-weight: 700; margin-top: 1.6em; }

@media (max-width: 600px) {
    .title { font-size: 48px; }
    .caption { font-size: 18px; }
}