/* Noir — a black-and-white portrait, thin outlines, round thumbnails with a white button beside each offer. For photographers, consultants, models, coaches. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--bg: #000;
	--fg: #f5f5f5;
	--muted: #a3a3a3;
	--bio-fg: #c2c2c2;
	--accent: #fff;
	--accent-fg: #000;
	--accent-glyph: invert(1);
	--font-head: 'DM Serif Display', Georgia, serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--hero-ratio: 3 / 3.7;
	--hero-max: 66dvh;
	--header-pull: -84px;

	--btn-bg: transparent;
	--btn-fg: #fff;
	--btn-border: 1px solid rgba(255, 255, 255, .55);
	--btn-radius: 999px;
	--btn-pad: 16px 24px;

	--chip-bg: transparent;
	--chip-border: 1px solid rgba(255, 255, 255, .55);
	--chip-size: 46px;

	--pop-bg: #0e0e0e;
	--pop-border: rgba(255, 255, 255, .22);
	--glyph-page: none;

	--card-bg: transparent;
	--card-fg: #fff;
	--card-muted: #b0b0b0;
	--card-border: 1px solid rgba(255, 255, 255, .5);
	--card-radius: 20px;
	--card-pad: 12px;
	--card-chip-bg: rgba(255, 255, 255, .14);
	--card-thumb-size: 50px;
	--card-thumb-radius: 50%;
	--card-thumb-bg: var(--accent);
	--card-thumb-fg: var(--accent-fg);
	--card-cta-bg: var(--accent);
	--card-cta-fg: var(--accent-fg);
	--card-cta-flex: 0 0 auto;
	--card-badge-bg: var(--accent);
	--card-badge-fg: var(--accent-fg);
	--card-input-bg: transparent;
}

.bg > img { filter: grayscale(1) contrast(1.06); object-position: 50% 16%; }
.bg::after { height: 62%; background: linear-gradient(0deg, var(--bg) 4%, rgba(0, 0, 0, .55) 46%, transparent); }

.header .title h1 { font-weight: 400; font-size: clamp(2.2rem, 10.5vw, 3rem); letter-spacing: -.01em; line-height: 1.02; }
.header h2 { font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.bio { font-size: .95rem; }

.social-media { gap: 12px; padding-top: 24px; }
.social-media > a:hover { background: #fff; }
.social-media > a:hover > img { filter: invert(1); }

.links { padding-top: 28px; gap: 12px; }
.link { font-weight: 600; letter-spacing: .01em; }
.link:hover { background: #fff; color: #000; }
.link.card { padding-right: 12px; }
.links .link.card:hover { background: rgba(255, 255, 255, .06) !important; color: var(--_fg) !important; }
.link.card .lk-title { font-weight: 600; }
.link.card .lk-cta { min-height: 40px; padding: 9px 18px; font-size: .86rem; }

/* the button sits beside the title only when the card is just a title; with a description or a price row it drops under the text */
@supports selector(:has(a)) {
	.links .link.card:has(.lk-desc, .lk-meta) { --card-cta-flex: 1 1 100%; }
}