@font-face {
    font-family: "Nunito";
    src: url("assets/fonts/nunito-latin.woff2") format("woff2");
    font-weight: 200 1000;
    font-display: swap;
}

:root {
    --bn-bg: #F4EFE6;
    --bn-ink: #1F2A37;
    --bn-muted: #8C96A3;
    --bn-lens: #FFFFFF;
    --bn-pupil: #1F2A37;
    --bn-text: #1F2A37;
    --bn-soft: #4A5566;
    --bn-btn-bg: #1F2A37;
    --bn-btn-fg: #F4EFE6;
    color-scheme: light;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--bn-bg);
    color: var(--bn-text);
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 48px 16px;
    text-align: center;
}

h1 {
    width: min(720px, 100%);
}

.bn-logo {
    display: block;
    width: 100%;
    height: auto;
}

.tagline {
    max-width: 24ch;
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.lede {
    max-width: 44ch;
    color: var(--bn-soft);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    font-weight: 500;
    line-height: 1.6;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 22px;
    border: 2px solid var(--bn-btn-bg);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.btn-primary {
    background-color: var(--bn-btn-bg);
    color: var(--bn-btn-fg);
}

.btn-youtube {
    border-color: #FF0000;
    background-color: #FF0000; /* YouTube red */
    color: #FFFFFF;
}

.btn-youtube:hover {
    border-color: #E00000;
    background-color: #E00000;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:focus-visible {
    outline: 3px solid var(--bn-muted);
    outline-offset: 3px;
}

footer {
    padding: 20px 16px 28px;
    color: var(--bn-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* Eyebrows drawn by script.js on this page only; the mood changes at random */
.bn-brow {
    fill: none;
    stroke: var(--bn-ink);
    stroke-linecap: round;
}

/* The father and the son blink now and then (script.js) */
.bn-pupil,
.bn-glint {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 90ms ease-in;
}

.bn-logo.blink-dad .bn-dad,
.bn-logo.blink-kid .bn-kid,
.bn-logo.blink-kid .bn-glint {
    transform: scaleY(0.12);
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .bn-pupil,
    .bn-glint {
        transition: none;
    }
}