:root {
	--felt: #1F6A45;
	--felt-deep: #154B32;
	--char: #101714;
	--ivory: #F2EEE3;
	--red: #C8242B;
	--muted: #5E6B63;
	--line: #DDD6C6;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ivory);
	color: var(--char);
	font: 400 17px/1.6 Barlow, system-ui, sans-serif;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

a { color: var(--felt); }

.felt {
	background: linear-gradient(180deg, var(--felt), var(--felt-deep));
	color: var(--ivory);
	padding: 40px 0 0;
}

.word {
	display: inline-flex;
	align-items: center;
	font: 800 40px/1 'Barlow Condensed', sans-serif;
	letter-spacing: .5px;
	color: var(--ivory);
	text-decoration: none;
}

.ball {
	display: inline-block;
	width: .6em;
	height: .6em;
	margin: .08em .02em 0;
	border-radius: 50%;
	position: relative;
}

.ball::after {
	content: '';
	position: absolute;
	left: 22%;
	top: 16%;
	width: 26%;
	height: 18%;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
}

.red { background: var(--red); }
.cue { background: var(--ivory); }

h1 {
	font: 800 clamp(40px, 7vw, 72px)/1.02 'Barlow Condensed', sans-serif;
	margin: 48px 0 16px;
	max-width: 12ch;
}

.lead { max-width: 60ch; font-size: 19px; color: rgba(242, 238, 227, .88); margin: 0; }

.baulk { display: block; width: 100%; height: 60px; margin-top: 32px; }

h2 { font: 800 26px/1.1 'Barlow Condensed', sans-serif; margin: 0 0 8px; }

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	padding: 48px 0;
	border-bottom: 1px solid var(--line);
}

.grid p { margin: 0; color: #2E3A33; }

.contact { padding: 40px 0; }

footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 24px 16px 40px;
	color: var(--muted);
	font-size: 15px;
	border-top: 1px solid var(--line);
}

.doc { max-width: 70ch; padding: 40px 16px 24px; }
.doc h1 { color: var(--char); font-size: 48px; margin: 0 0 8px; max-width: none; }
.doc h2 { margin-top: 32px; }
.doc .updated { color: var(--muted); margin-top: 0; }

.bar { background: var(--felt); padding: 20px 0; }
.bar .word { font-size: 30px; }