/* Cinema — an immersive full-bleed portrait, a huge name over the photo, pill actions. For chefs, creators, public figures. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Inter:wght@400;500;600&display=swap');

:root {
	--bg: #050505;
	--fg: #fff;
	--muted: #a6a6a6;
	--bio-fg: #d6d6d6;
	--accent: #ffffff;
	--accent-fg: #050505;
	--accent-glyph: invert(1);
	--font-head: 'Bricolage Grotesque', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--max: 620px;
	--hero-w: 620px;

	--btn-bg: #1c1c1f;
	--btn-fg: #fff;
	--btn-radius: 999px;
	--btn-pad: 13px 20px;

	--chip-bg: #1c1c1f;
	--chip-border: 0 solid transparent;
	--chip-size: 46px;

	--pop-bg: #141416;
	--pop-border: rgba(255, 255, 255, .12);
}

.bg {
	aspect-ratio: auto;
	height: 78dvh;
	min-height: 440px;
	max-height: 720px;
}
.bg > img { object-position: 50% 14%; }
.bg::after { height: 62%; background: linear-gradient(0deg, var(--bg) 6%, rgba(5, 5, 5, .55) 45%, transparent); }

.header {
	align-items: flex-start;
	text-align: left;
	gap: 8px;
	margin-top: calc(-1 * clamp(150px, 27dvh, 230px));
}
.header .title h1 {
	font-size: clamp(2.4rem, 12.2vw, 3.5rem);
	font-weight: 800;
	line-height: .94;
	letter-spacing: -.04em;
	text-wrap: balance;
}
.header .title > img { width: 26px; height: 26px; margin-left: 12px; vertical-align: .12em; }
.header h2 { font-size: .98rem; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
.bio { text-align: left; max-width: var(--max); font-size: 1rem; color: var(--bio-fg); margin-top: 14px; }

.social-media { justify-content: flex-start; padding-top: 22px; gap: 10px; }
.social-media > a:hover { background: #2b2b30; }

.links { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding-top: 22px; gap: 10px; }
.link { width: auto; max-width: 100%; flex: 0 1 auto; font-size: .95rem; font-weight: 600; }
.link:hover { background: #2b2b30; }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); }
.links .link:first-child:hover { filter: brightness(.92); background: var(--accent); }