/* Brutal — thick black outlines, hard offset shadows, buttons that press into their own shadow. For streetwear, makers, indie brands. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Archivo+Black&display=swap');

:root {
	--bg: #ffe24a;
	--fg: #000;
	--muted: #000;
	--bio-fg: #000;
	--accent: #ff5c8a;
	--accent-fg: #000;
	--accent-glyph: invert(1);
	--font-head: 'Archivo Black', system-ui, sans-serif;
	--font-body: 'Space Grotesk', system-ui, sans-serif;

	--btn-bg: #fff;
	--btn-fg: #000;
	--btn-border: 3px solid #000;
	--btn-radius: 12px;
	--btn-pad: 17px 20px;
	--btn-shadow: 5px 5px 0 #000;

	--chip-bg: #fff;
	--chip-border: 3px solid #000;
	--chip-radius: 12px;
	--chip-size: 52px;
	--chip-glyph: invert(1);

	--glyph-page: invert(1);
	--pop-bg: #fff;
	--pop-fg: #000;
	--pop-border: #000;
	--pop-shade: rgba(0, 0, 0, .55);
	--field-bg: #fff4b8;
	--star-filter: invert(1);
	--share-bg: #fff;
	--share-fg: #000;
	--share-border: 3px solid #000;

	--card-bg: #fff;
	--card-border: 3px solid #000;
	--card-shadow: 5px 5px 0 #000;
	--card-muted: #2b2b2b;
	--card-chip-bg: #ffe24a;
	--card-radius: 14px;
	--card-cta-bg: var(--accent);
	--card-cta-fg: #000;
	--card-cta-radius: 10px;
	--card-input-bg: #fff4b8;
}

/* a quiet dotted halftone */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background: radial-gradient(rgba(0, 0, 0, .13) 1.3px, transparent 1.6px) 0 0 / 18px 18px;
	pointer-events: none;
}

.bg {
	width: 150px;
	height: 150px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 54px;
	border: 4px solid #000;
	border-radius: 18px;
	box-shadow: 7px 7px 0 #000;
	transform: rotate(-3deg);
	background: #fff;
}
.bg::after { display: none; }

.header { margin-top: 30px; gap: 12px; }
.header .title { position: relative; display: inline-block; max-width: 100%; }
.header .title h1 {
	display: block;
	padding: 6px 16px 8px;
	background: var(--accent);
	border: 3px solid #000;
	box-shadow: 5px 5px 0 #000;
	transform: rotate(1.5deg);
	font-size: clamp(1.6rem, 7.5vw, 2.1rem);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.header .title > img { position: absolute; top: -16px; right: -14px; z-index: 2; width: 36px; height: 36px; margin: 0; padding: 6px; background: #fff; border: 3px solid #000; border-radius: 50%; box-shadow: 2px 2px 0 #000; opacity: 1; transform: rotate(8deg); }
.header h2 { font-size: 1.05rem; font-weight: 700; }

.social-media { padding-top: 26px; gap: 12px; }
.social-media > a { box-shadow: 3px 3px 0 #000; }
.social-media > a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; background: var(--accent); }

.links { padding-top: 30px; gap: 18px; }
.link { font-size: 1.08rem; font-weight: 700; }
.link:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.link:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #000; }
.links .link:first-child { background: var(--accent); }
.link:focus-visible { outline: 3px dashed #000; outline-offset: 4px; }
#rating-form { border: 3px solid #000; border-radius: 14px; box-shadow: 7px 7px 0 #000; }
#rating-form h4 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; }
#rating .button { border: 3px solid #000; box-shadow: 3px 3px 0 #000; }