/* Sunset — a warm gradient sky, a glowing sun, frosted pills. For creators, events, lifestyle, travel. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@1,9..144,600;1,9..144,700&display=swap');

:root {
	--bg: #d6336c;
	--fg: #fff;
	--muted: rgba(255, 255, 255, .94);
	--bio-fg: rgba(255, 255, 255, .97);
	--accent: #d6336c;
	--accent-fg: #fff;
	--accent-glyph: none;
	--ink: #2b1040;
	--font-head: 'Fraunces', Georgia, serif;
	--font-body: 'DM Sans', system-ui, sans-serif;

	--btn-bg: rgba(43, 16, 64, .3);
	--btn-fg: #fff;
	--btn-border: 1px solid rgba(255, 255, 255, .45);
	--btn-radius: 999px;
	--btn-pad: 18px 26px;
	--btn-shadow: 0 14px 28px -18px rgba(70, 10, 80, .7);

	--chip-bg: rgba(43, 16, 64, .28);
	--chip-border: 1px solid rgba(255, 255, 255, .45);
	--chip-size: 50px;

	--pop-bg: #fff;
	--pop-fg: var(--ink);
	--pop-border: transparent;
	--pop-shade: rgba(43, 16, 64, .55);
	--field-bg: #fdf0f6;
	--star-filter: invert(1);
	--share-bg: rgba(255, 255, 255, .22);
}
/* cards are smoked glass, like the buttons, only deeper so the small text stays readable */
:root {
	--card-bg: rgba(43, 16, 64, .55);
	--card-border: 1px solid rgba(255, 255, 255, .4);
	--card-radius: 26px;
	--card-chip-bg: rgba(255, 255, 255, .2);
	--card-cta-bg: #fff;
	--card-cta-fg: var(--ink);
	--card-badge-bg: #ffd9e8;
	--card-badge-fg: var(--ink);
	--card-input-bg: rgba(255, 255, 255, .14);
}
.link.card, .subscribe { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }


html, body { background: linear-gradient(180deg, #d9480f 0%, var(--accent) 48%, #5b2fd1 100%) fixed; }
/* the sun, low on the horizon */
body::before {
	content: '';
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 55vh;
	z-index: -1;
	background: radial-gradient(60vmin 60vmin at 50% 100%, rgba(255, 236, 170, .75), rgba(255, 190, 120, .25) 45%, transparent 70%);
	pointer-events: none;
}

.bg {
	width: 118px;
	height: 118px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 56px;
	border-radius: 50%;
	border: 4px solid #fff;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .22), 0 22px 40px -14px rgba(60, 10, 70, .65);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 22px; gap: 4px; }
.header .title h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); font-weight: 700; font-style: italic; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(80, 10, 90, .35); }
.header h2 { font-size: 1rem; font-weight: 500; text-shadow: 0 1px 14px rgba(70, 10, 80, .45); }
.bio { text-shadow: 0 1px 14px rgba(70, 10, 80, .4); }

.social-media { padding-top: 22px; }
.social-media > a { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.social-media > a:hover { background: rgba(43, 16, 64, .45); }

.links { padding-top: 26px; gap: 14px; }
.link { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-weight: 600; font-size: 1.02rem; }
.link:hover { background: rgba(43, 16, 64, .45); }
.links .link:first-child { background: #fff; color: var(--ink); border-color: #fff; backdrop-filter: none; }
.links .link:first-child:hover { background: #fff7fb; }
footer { background: none; }
#rating-form h4 { font-style: italic; font-size: 1.3rem; }