/* RESET */

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

/* DESIGN TOKENS */

:root{

    /* Colours */

    --color-background:#ffffff;
    --color-text:#111111;
    --color-muted:#6b6b6b;
    --color-border:#ececec;
    --color-accent:#000000;

    /* Typography */

    --font-primary:-apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    sans-serif;

    /* Layout */

    --container-width:1280px;

    /* Spacing */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:8rem;

}

body{

	font-family:var(--font-primary);
	background:var(--color-background);
	color:var(--color-text);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

img{

	max-width:100%;
	display:block;
}

a{

	color:inherit;
	text-decoration:none;
}

ul{

	list-style:none;
}

h1{

    font-size:clamp(2.5rem, 5vw, 4.5rem);
    font-weight:600;
    line-height:1.1;
}

h2{

    font-size:clamp(2rem, 4vw, 3rem);
}

p{

    color:var(--color-muted);
}
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}