:root {
    --space-xs: clamp(0.4375rem, 0.41rem + 0.11vw, 0.5rem);
    --space-s: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
    --space-m: clamp(1.3125rem, 1.24rem + 0.33vw, 1.5rem);
    --space-l: clamp(2.1875rem, 2.07rem + 0.56vw, 2.5rem);
    --space-xl: clamp(3.0625rem, 2.90rem + 0.78vw, 3.5rem);
    --space-2xl: clamp(3.5rem, 3.32rem + 0.89vw, 4rem);
    --space-3xl: clamp(4.375rem, 4.15rem + 1.11vw, 5rem);
    --space-4xl: clamp(6.5625rem, 6.22rem + 1.67vw, 7.5rem);
    --space-5xl: clamp(8.75rem, 8.29rem + 2.22vw, 10rem);
    --space-xs-l: clamp(0.4375rem, -0.32rem + 3.67vw, 2.5rem);
    --space-2xl-4xl: clamp(3.5rem, 2.03rem + 7.11vw, 7.5rem);
    --size-step-000: clamp(0.740625rem, 0.73rem + 0.07vw, 0.78125rem);
    --size-step-00: clamp(0.833125rem, 0.79rem + 0.19vw, 0.9375rem);
    --size-step-0: clamp(0.9375rem, 0.87rem + 0.33vw, 1.125rem);
    --size-step-1: clamp(1.055rem, 0.95rem + 0.52vw, 1.35rem);
    --size-step-2: clamp(1.18625rem, 1.03rem + 0.77vw, 1.62rem);
    --size-step-3: clamp(1.335rem, 1.11rem + 1.08vw, 1.94375rem);
    --size-step-4: clamp(1.501875rem, 1.20rem + 1.48vw, 2.3325rem);
    --size-step-5: clamp(1.689375rem, 1.28rem + 1.97vw, 2.799375rem);
    --size-step-6: clamp(1.900625rem, 1.37rem + 2.59vw, 3.359375rem);
    --size-step-7: clamp(2.138125rem, 1.44rem + 3.37vw, 4.03125rem);
    --size-step-8: clamp(2.405625rem, 1.51rem + 4.32vw, 4.8375rem);
    --size-step-9: clamp(2.70625rem, 1.57rem + 5.51vw, 5.805rem);
    --size-step-10: clamp(3.03125rem, 1.59rem + 6.99vw, 6.965625rem);
    --size-step-11: clamp(3.78875rem, 1.35rem + 11.84vw, 10.448125rem);
    --size-step-12: clamp(4.735625rem, 0.73rem + 19.44vw, 15.671875rem);

    --bg-colour-dark: black;
    --bg-colour-light: white;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-weight: 900;

    article {
        display: flex;
        align-items: center;
        min-height: 100vh;

        h1 {
            margin: 0;
            padding: var(--space-xl);
        }

        h1::before,
        h1::after {
            content: "" / "A moon";
            position: absolute;
            top: var(--space-xl);
            left: var(--space-xl);
            width: 10vw;
            height: 10vw;
            background-color: var(--bg-colour-light);
            border-radius: 999px;
        }

        h1::after {
            background-color: var(--bg-colour-dark);
            transform: translateX(25%);
            width: 12vw;
        }
    }


}

.container-fill-text {
    --container-fill-text-captured-length: initial;

    display: flex;
    container-type: inline-size;

    /* Overrides a global style on headings */
    max-width: unset;

    line-height: var(--leading-micro);
    font-weight: var(--font-black);
    width: 100%;
}

.container-fill-text__reference {
    visibility: hidden;
}

.container-fill-text__container {
    --container-fill-text-captured-length: 100cqi;
    --container-fill-text-available-space: var(--container-fill-text-captured-length);

    flex-grow: 1;
    container-type: inline-size;
}

.container-fill-text__display {
    --container-fill-text-captured-length: 100cqi;
    --container-fill-text-ratio: tan(atan2(var(--container-fill-text-available-space),
                var(--container-fill-text-available-space) - var(--container-fill-text-captured-length)));

    display: block;

    /* AKA, width */
    inline-size: var(--container-fill-text-available-space);

    /* Apply the calculated size with sensible fallbacks for no support */
    font-size: var(--size-step-11);

    /* The initial fallback value for no support now becomes our minimum clamp value */
    font-size: clamp(var(--size-step-11),
            1em * var(--container-fill-text-ratio),
            var(--container-fill-text-max-font-size, infinity * 1px));
}

@property --container-fill-text-captured-length {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
}