:root {
    --ink: #190b2a;
    --paper: #fff7fd;
    --scene-w: min(100vw, 177.7778svh);
    --scene-h: min(100svh, 56.25vw);
    --scene-left: calc((100vw - var(--scene-w)) / 2);
    --scene-top: calc((100svh - var(--scene-h)) / 2);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at center, #005093 0%, #002953 100%);
    color: var(--paper);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.sky {
    position: relative;
    display: grid;
    min-height: 100svh;
    isolation: isolate;
    overflow: hidden;
}

.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
}

.copy {
    position: absolute;
    z-index: 1;
    left: calc(var(--scene-left) + min(5vw, 8.89svh));
    top: calc(var(--scene-top) + min(5svh, 2.82vw));
    width: min(42vw, 74.67svh, 560px);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .7);
}

.kicker {
    width: fit-content;
    margin: 0 0 8px;
    padding: 5px 8px;
    background: #fff14d;
    color: #23192f;
    box-shadow: 3px 3px 0 #13e7ff;
    font-size: clamp(.62rem, 1.15vw, .86rem);
    text-transform: uppercase;
    text-shadow: none;
}

h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, min(5.4vw, 9.6svh), 4.8rem);
    line-height: .9;
    letter-spacing: 0;
    text-shadow:
        3px 3px 0 #ff2f92,
        6px 6px 0 #24d9ff,
        9px 9px 0 rgba(18, 7, 32, .9);
}

.subtitle {
    max-width: 520px;
    margin: clamp(10px, 1.5vw, 18px) 0 0;
    color: #fff4a6;
    font-size: clamp(.78rem, min(1.5vw, 2.67svh), 1.12rem);
    line-height: 1.4;
}

.cat-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 0;
}

.cat-stage img {
    display: block;
    width: var(--scene-w);
    height: var(--scene-h);
    object-fit: contain;
}

.facts {
    position: absolute;
    z-index: 1;
    left: calc(var(--scene-left) + min(5vw, 8.89svh));
    bottom: calc(var(--scene-top) + min(7svh, 3.94vw));
    width: max-content;
    margin: 0;
}

.facts div {
    min-width: 0;
    padding: 6px 8px;
    background: rgba(0, 41, 83, .74);
    border: 2px solid rgba(255, 255, 255, .24);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .28);
}

.facts dt {
    margin: 0 0 3px;
    color: #9efbff;
    font-size: clamp(.5rem, .72vw, .62rem);
    text-transform: uppercase;
}

.facts dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: clamp(.56rem, .82vw, .76rem);
    line-height: 1.35;
}

@media (max-width: 760px) {
    h1 {
        font-size: clamp(1.8rem, 12vw, 4rem);
    }

    .subtitle {
        font-size: clamp(.72rem, 3.1vw, .96rem);
    }

    .copy {
        left: calc(var(--scene-left) + 5vw);
        top: calc(var(--scene-top) + 3.5vw);
        width: min(54vw, 360px);
    }

    .facts {
        left: calc(var(--scene-left) + 5vw);
        bottom: calc(var(--scene-top) + 3vw);
        width: max-content;
    }

    .facts div {
        padding: 5px 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}