/* Stage — the photo fills the whole screen, the name and icons sit over it and glass cards slide up across it. For creators, coaches, artists. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
	--bg: #0b0b0d;
	--fg: #fff;
	--muted: #d2d2d8;
	--bio-fg: #e6e6ea;
	--accent: #ff6b4a;
	--accent-fg: #000;
	--accent-glyph: invert(1);
	--font-head: 'Manrope', system-ui, sans-serif;
	--font-body: 'Manrope', system-ui, sans-serif;

	--max: 520px;

	--btn-bg: rgba(18, 18, 22, .5);
	--btn-fg: #fff;
	--btn-border: 1px solid rgba(255, 255, 255, .22);
	--btn-radius: 20px;
	--btn-pad: 17px 22px;

	--chip-bg: rgba(255, 255, 255, .16);
	--chip-border: 1px solid rgba(255, 255, 255, .3);
	--chip-size: 48px;

	--pop-bg: #17171b;
	--pop-border: rgba(255, 255, 255, .14);
	--share-bg: rgba(0, 0, 0, .4);

	--card-bg: rgba(16, 16, 20, .56);
	--card-fg: #fff;
	--card-muted: #cfcfd6;
	--card-border: 1px solid rgba(255, 255, 255, .2);
	--card-radius: 24px;
	--card-chip-bg: rgba(255, 255, 255, .16);
	--card-cta-bg: #fff;
	--card-cta-fg: #111;
	--card-badge-bg: var(--accent);
	--card-badge-fg: var(--accent-fg);
	--card-input-bg: rgba(255, 255, 255, .1);
}

/* the photo is the page's backdrop; everything else scrolls over it */
.bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	height: 100dvh;
	max-height: none;
	aspect-ratio: auto;
}
.bg > img { object-position: 50% 22%; }
.bg::after {
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .78) 82%, rgba(0, 0, 0, .9) 100%);
}

.header { margin-top: max(46dvh, 250px); gap: 6px; text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.header .title h1 { font-size: clamp(2.2rem, 11vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; text-wrap: balance; }
.header h2 { color: var(--muted); font-size: 1.02rem; font-weight: 500; }
.bio { color: var(--bio-fg); font-weight: 500; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }

.social-media { padding-top: 20px; gap: 12px; }
.social-media > a { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.social-media > a:hover { background: rgba(255, 255, 255, .28); }

.links { padding-top: 26px; gap: 12px; }
.link { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-weight: 700; }
.link:hover { background: rgba(18, 18, 22, .68); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.links .link:first-child:hover { background: var(--accent); filter: brightness(1.07); }
.links .link.card { backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.subscribe { backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }