/* Retro — a 70s sunburst of orange, mustard and rust over warm cream, soft chunky type. For cafés, vintage shops, makers, record stores. */
@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=DM+Sans:wght@400;500;700&display=swap');

:root {
	--bg: #f4e4c1;
	--fg: #3a2213;
	--muted: #7a5636;
	--bio-fg: #5a3b22;
	--accent: #c2410c;
	--accent-fg: #fff;
	--accent-glyph: none;
	--mustard: #f2a900;
	--rust: #9b3d12;
	--font-head: 'Shrikhand', Georgia, serif;
	--font-body: 'DM Sans', system-ui, sans-serif;

	--btn-bg: #3a2213;
	--btn-fg: #f4e4c1;
	--btn-radius: 999px;
	--btn-pad: 18px 26px;
	--btn-shadow: 0 5px 0 var(--accent);

	--chip-bg: #3a2213;
	--chip-border: 3px solid var(--bg);
	--chip-size: 50px;

	--glyph-page: invert(1);
	--pop-bg: #fbf1d8;
	--pop-fg: #3a2213;
	--pop-border: #3a2213;
	--pop-shade: rgba(58, 34, 19, .5);
	--field-bg: #fff8e6;
	--star-filter: invert(1);
	--share-bg: rgba(244, 228, 193, .7);
	--share-fg: #3a2213;
	--share-border: 2px solid #3a2213;
}

/* the sunburst: concentric arcs centred behind the avatar */
body::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 330px;
	background:
		repeating-radial-gradient(circle at 50% 130px, var(--accent) 0 18px, var(--mustard) 18px 36px, var(--rust) 36px 54px, #3a2213 54px 72px, var(--bg) 72px 90px);
	-webkit-mask-image: linear-gradient(#000 28%, transparent 80%);
	mask-image: linear-gradient(#000 28%, transparent 80%);
	opacity: .95;
}

.bg {
	width: 140px;
	height: 140px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 62px;
	border-radius: 50%;
	border: 6px solid var(--bg);
	box-shadow: 0 0 0 3px #3a2213, 0 18px 30px -12px rgba(58, 34, 19, .65);
	background: var(--bg);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 30px; gap: 6px; }
.header .title h1 { font-size: clamp(2rem, 9.5vw, 2.7rem); font-weight: 400; line-height: 1.05; text-shadow: 3px 3px 0 var(--mustard); }
.header .title > img { opacity: 1; }
.header h2 { font-size: .9rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); }

.social-media { padding-top: 24px; gap: 12px; }
.social-media > a { box-shadow: 0 4px 0 var(--accent); }
.social-media > a:hover { transform: translateY(-3px) rotate(-4deg); }

.links { padding-top: 28px; gap: 16px; }
.link { font-size: .92rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.link:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent); }
.link:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); box-shadow: 0 5px 0 #3a2213; }
.links .link:first-child:hover { box-shadow: 0 7px 0 #3a2213; }
#rating-form { border-width: 2px; border-radius: 22px; box-shadow: 6px 6px 0 #3a2213; }
#rating-form h4 { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; }