/* Barber — black and gold, a serif headline, a barber-pole ribbon. For barbers, salons, grooming. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Lato:wght@400;700&display=swap');

:root {
	--bg: #0e0d0b;
	--fg: #f2e9d4;
	--muted: #b9ab8c;
	--accent: #c9a227;
	--accent-fg: #14110a;
	--font-head: 'Playfair Display', Georgia, serif;
	--font-body: 'Lato', system-ui, sans-serif;

	--btn-bg: transparent;
	--btn-fg: var(--accent);
	--btn-border: 1.5px solid var(--accent);
	--btn-radius: 3px;
	--btn-pad: 17px 22px;

	--chip-bg: transparent;
	--chip-border: 1.5px solid var(--accent);
	--chip-size: 50px;

	--pop-bg: #16130d;
	--pop-border: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* the pole */
body::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 10px;
	background: repeating-linear-gradient(135deg, #b3222a 0 14px, #f2e9d4 14px 28px, #1f3f8f 28px 42px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

.bg {
	width: 232px;
	height: 232px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 58px;
	border-radius: 50%;
	box-shadow:
		0 0 0 5px var(--bg),
		0 0 0 8px var(--accent),
		0 0 0 14px var(--bg),
		0 0 0 15px color-mix(in srgb, var(--accent) 55%, transparent),
		0 26px 50px -10px rgba(0, 0, 0, .8);
}
.bg > img { border-radius: 50%; object-position: 50% 20%; }
.bg::after { display: none; }

.header { margin-top: 34px; gap: 10px; }
.header .title h1 { font-weight: 800; font-size: clamp(1.9rem, 8.5vw, 2.5rem); letter-spacing: .01em; }
.header h2 {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--accent);
}
.header::after {
	content: '';
	width: 150px;
	height: 1px;
	margin-top: 10px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.social-media { padding-top: 24px; gap: 12px; }
.social-media > a:hover { background: var(--accent); }
.social-media > a:hover > img { filter: var(--accent-glyph); }

.links { padding-top: 30px; gap: 12px; }
.link {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.link:hover { background: var(--accent); color: var(--accent-fg); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); }
.links .link:first-child:hover { filter: brightness(1.08); }

#rating-form h4 { font-weight: 800; }