@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400&family=Archivo+Black&family=Big+Shoulders+Display:wght@800&display=swap');
@import url('tokens.css');

*{box-sizing:border-box}

body{
	margin:0;
	background:var(--bg-primary);
	font-family:var(--font-body);
	color:var(--text-primary);
}

a{text-decoration:none}

.bar{
	height:var(--bar-thumbnail);
	background:var(--accent-primary);
}

.wrap{
	max-width:600px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:var(--space-6);
	padding:var(--space-9) var(--space-5) var(--space-9);
}

.brand{
	display:flex;
	align-items:center;
	gap:var(--space-2);
}

.brand img{width:24px;height:24px;display:block}

.brand span{
	font:400 18px var(--font-display);
	letter-spacing:.07em;
}

h1{
	align-self:stretch;
	margin:12px 0 0;
	font:400 46px/1.05 var(--font-display);
	letter-spacing:var(--tracking-display);
	text-transform:uppercase;
}

.sub{
	align-self:stretch;
	margin:0;
	font:400 var(--text-body)/1.5 var(--font-body);
	color:var(--text-secondary);
}

.rule{
	width:var(--space-8);
	height:var(--line-hairline);
	background:var(--border-technical);
}

.body-text{
	align-self:stretch;
	margin:0 auto;
	font:400 16.5px/1.62 var(--font-body);
	max-width:520px;
}

.cta{
	margin-top:6px;
	font:var(--font-weight-accent) 20px var(--font-accent);
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--accent-primary);
	border-bottom:var(--line-hairline) solid var(--accent-primary);
	padding-bottom:4px;
}

.cta:hover{
	color:var(--accent-primary-hover);
	border-color:var(--accent-primary-hover);
}

footer{
	border-top:var(--line-hairline) solid var(--border-technical);
	padding:var(--space-7) var(--space-8) 0;
}

.cols{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto auto;
	gap:var(--space-8);
	padding-bottom:var(--space-6);
	max-width:1100px;
	margin:0 auto;
}

.col{
	display:flex;
	flex-direction:column;
	gap:var(--space-2);
}

.col .brand span{font-size:15px}
.col .brand img{width:20px;height:20px}

.col .tagline{
	font:400 13px var(--font-body);
	color:var(--text-secondary);
}

.col .kicker{
	font:var(--font-weight-accent) var(--text-accent-micro) var(--font-accent);
	letter-spacing:.08em;
	color:var(--text-secondary);
}

.col a{
	font:400 var(--text-body-sm) var(--font-body);
	color:var(--text-primary);
}

.col a:hover{color:var(--accent-primary)}

.copyline{
	border-top:var(--line-hairline) solid var(--border-technical);
	padding:var(--space-4) 0;
	max-width:1100px;
	margin:0 auto;
}

.copyline span{
	font:400 12px var(--font-body);
	color:#79808A;
}

@media (max-width:640px){
	.cols{grid-template-columns:1fr}
	h1{font-size:34px}
	footer{padding:var(--space-6) var(--space-5) 0}
}