/* Blocks — full-volume colour: a lime header block over cobalt, white pills, black details. For bold brands and creators. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&display=swap');

:root {
	--bg: #2a45ff;
	--fg: #fff;
	--muted: rgba(255, 255, 255, .82);
	--bio-fg: rgba(255, 255, 255, .92);
	--accent: #d2ff3a;
	--accent-fg: #0a0a0a;
	--accent-glyph: invert(1);
	--ink: #0a0a0a;
	--font-head: 'Archivo', system-ui, sans-serif;
	--font-body: 'Archivo', system-ui, sans-serif;

	--max: 560px;
	--btn-bg: #fff;
	--btn-fg: var(--ink);
	--btn-radius: 999px;
	--btn-pad: 18px 26px;
	--btn-shadow: 0 5px 0 rgba(10, 10, 10, .9);

	--chip-bg: var(--accent);
	--chip-border: 2.5px solid var(--ink);
	--chip-size: 52px;
	--chip-glyph: invert(1);

	--pop-bg: #fff;
	--pop-fg: var(--ink);
	--pop-border: var(--ink);
	--pop-shade: rgba(10, 10, 10, .6);
	--field-bg: #f1f3ff;
	--star-filter: invert(1);
	--share-bg: #fff;
	--share-fg: var(--ink);
	--share-border: 2.5px solid var(--ink);
}
/* cards are white tiles with the same hard shadow as the buttons */
:root {
	--card-bg: #fff;
	--card-fg: var(--ink);
	--card-muted: #3b3b3b;
	--card-border: 0 solid transparent;
	--card-border-color: rgba(10, 10, 10, .22);
	--card-shadow: 0 5px 0 rgba(10, 10, 10, .9);
	--card-radius: 24px;
	--card-chip-bg: #e6eaff;
	--card-cta-bg: var(--ink);
	--card-cta-fg: var(--accent);
	--card-badge-bg: var(--accent);
	--card-badge-fg: var(--accent-fg);
	--card-input-bg: #f1f3ff;
}


.bg {
	position: relative;
	z-index: 2;
	width: 124px;
	height: 124px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 44px;
	border-radius: 50%;
	border: 4px solid var(--ink);
	background: #fff;
	box-shadow: 5px 5px 0 var(--ink);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

/* the lime block stretches from the top of the page to under the name */
.header {
	z-index: 1;
	width: 100%;
	max-width: 640px;
	margin-top: -62px;
	padding: 78px 24px 26px;
	gap: 4px;
	color: var(--ink);
}
.header::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0; right: 0;
	top: -190px;
	bottom: 0;
	background: var(--accent);
	border-radius: 0 0 40px 40px;
	box-shadow: 0 6px 0 var(--ink);
}
.header .title h1 { color: var(--ink); font-size: clamp(1.7rem, 7.6vw, 2.4rem); font-weight: 900; letter-spacing: -.035em; text-transform: uppercase; }
.header .title > img { filter: invert(1); opacity: 1; }
.header h2 { color: rgba(10, 10, 10, .78); font-size: 1.05rem; font-weight: 700; }
.bio { margin-top: 24px; font-weight: 500; }

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

.links { padding-top: 26px; gap: 16px; }
.link { font-size: 1.05rem; font-weight: 800; }
.link:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(10, 10, 10, .9); }
.link:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(10, 10, 10, .9); }
.links .link:first-child { background: var(--ink); color: var(--accent); box-shadow: 0 5px 0 rgba(255, 255, 255, .35); }
footer { background: linear-gradient(0deg, var(--bg) 40%, transparent); }
#rating-form { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
#rating-form h4 { font-weight: 900; }