@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/theme.light.switch.min.css";

:root {
	/* Colors: */
	--color-1: #AEBEC7;
	--color-2: #2C474F;
}

:where(p) {
	font-size: var(--font-size-4);
}

@font-face {
	font-family: "Everett"; /* Reference name for the font */
	src: url("assets/TWKEverett-Light.woff2") format("woff2"),  
	   url("assets/TWKEverett-Light.woff") format("woff"); /* Fallback for older browsers */
	font-weight: 200;
	font-stretch: 100%;
	font-display: swap;
}

@font-face {
	font-family: "Everett"; /* Reference name for the font */
	src: url("assets/TWKEverett-Bold.woff2") format("woff2"),  
	   url("assets/TWKEverett-Bold.woff") format("woff"); /* Fallback for older browsers */
	font-weight: 700;
	font-stretch: 100%;
	font-display: swap;
}

@keyframes fadeOutLogo {
  to { opacity: 0; }
}

html, body {
	font-family: Everett, Roboto, Helvetica, Arial, sans-serif;
	font-weight: 200;
}

header, section { max-width: 1226px; margin: 0 auto;}

header {
	display: flex;
	flex-direction: column;
	.header { margin-top: 255px; display: block;}
	.logo { 
		pointer-events: none;
		max-width: 860px; 
		margin-top: 100px; 
		position: absolute;
		top: 0;
	
		@supports (animation-timeline: scroll()) {
			position: fixed; 
			animation: fadeOutLogo linear; 
			animation-timeline: scroll();
			animation-range: 0 600px;
			animation-fill-mode: forwards;
		}
	}
	.badge { 
		background: var(--color-1) 0% 0% no-repeat padding-box; 
		border-radius: 50%; 
		width: 285px; 
		height: 285px; 
		text-align: center; 
		display: flex;
		flex-direction: column;
		justify-content: center;
		transform: matrix(0.98, -0.19, 0.19, 0.98, 0, 0);
		margin-left: auto;
		margin-top: -170px;
		margin-right: 40px;
	}
}

b { font-weight: 700; }
h1, h2, h3, h4, h5, b {
	span { font-weight: 200; }
}

div.columns { 
	display: flex; 
}

.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

section[role=content] {
	margin-top: -70px;

	p { margin-bottom: 16px; font-size: var(--font-size-3) }
	.sm { font-size: var(--font-size-1) }
	div.columns { 
		margin-top: 100px;
		>div { width: 400px; }
	}
	p>b { font-size: var(--font-size-3) }

	h4 { 
		margin-top: 100px;
		padding-bottom: 30px;
		span { font-size: var(--font-size-3) }
	}
	a.button {
		border: 1px solid var(--color-2);
		border-radius: 22px;
		opacity: 1;
		padding: 12px;
		color: var(--color-2);
		span { padding-left: 12px; transition: padding-left .3s ease-out }
		&:hover { 
			background-color: var(--color-2);
			text-decoration: none;
			color: #fff; 
			span { padding-left: 18px; }
		}
	}
}

footer {
	margin-top: 100px;
	background: var(--color-2) 0% 0% no-repeat padding-box;
	padding: 100px 0;
	color: #fff;

	a { color: #fff; text-decoration: underline; }
	p { font-size: var(--font-size-1); }

	div.columns {
        justify-content: space-between;
        &:first-child {margin-bottom: 50px;}
		img { width: 115px; }
		.big { font-weight: 700; text-align: right; font-size: var(--font-size-4)}
	}
}

@media (max-width: 1024px) {
	.hide-m { display: none; }
	body { margin: 36px; }
	header .header { margin-top: 72px; }
	header .logo { margin-top: 45px; animation-range: 0 150px; max-width: calc(100vw - 86px); }
	header .badge { width: 180px; height: 180px; margin-top: -95px; margin-right: 36px; }
	header .badge p { font-size: var(--font-size-1); }
	section[role=content] { margin-top: 0; }
	section[role=content] h2 { font-size: var(--font-size-4); text-wrap: pretty; }
	footer { margin-left: -36px; margin-right: -36px; padding: 36px; }
	footer .columns.first a { display: block; }
	footer .columns.second { flex-direction: column-reverse; gap: 36px;}
	footer .columns.second .big { text-align: left; }
}

@media (max-width: 768px) {
	div.columns:not(.is-mobile) { display: block; }
	header .badge { width: 133px; height: 133px; margin-top: -70px; margin-right: 18px; }
	header .badge p { font-size: var(--font-size-0); }
	section[role=content] div.columns { margin-top: 50px; }
	section[role=content] div.columns>div { width: auto; }
	section[role=content] div.columns>div:first-child>p:first-child { margin-bottom: -18px; }
	footer .columns.second .big { text-align: left; font-size: var(--font-size-3) }
}