/* Luxe — a black band, a white sheet, gold hairlines and gold glyphs. For executives, jewellers, boutiques, premium services. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
	--bg: #0b0b0b;
	--sheet: #ffffff;
	--fg: #141414;
	--muted: #6a665e;
	--bio-fg: #55514a;
	--accent: #b8923a;
	--accent-fg: #17120a;
	--accent-glyph: invert(1);
	--font-head: 'Manrope', system-ui, sans-serif;
	--font-body: 'Manrope', system-ui, sans-serif;

	--glyph-color: var(--accent);
	--badge-color: var(--accent);

	--btn-bg: transparent;
	--btn-fg: #141414;
	--btn-border: 1.5px solid #141414;
	--btn-radius: 999px;
	--btn-pad: 16px 24px;

	--chip-bg: #fff;
	--chip-border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
	--chip-size: 54px;
	--chip-glyph: none;

	--glyph-page: invert(1);
	--pop-bg: #ffffff;
	--pop-fg: #141414;
	--pop-border: color-mix(in srgb, var(--accent) 50%, transparent);
	--pop-shade: rgba(11, 11, 11, .6);
	--field-bg: #f6f4ee;
	--star-filter: invert(1);
	--share-bg: rgba(255, 255, 255, .12);
	--share-border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
}

html { background: var(--bg); }
body { background: transparent; position: relative; }
/* the white sheet rises behind everything below the band */
body::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 188px; left: 0; right: 0; bottom: 0;
	max-width: 640px;
	margin: 0 auto;
	background: var(--sheet);
	border-radius: 34px 34px 0 0;
	box-shadow: 0 -1px 0 color-mix(in srgb, var(--accent) 60%, transparent);
}
footer { background: linear-gradient(0deg, var(--sheet) 30%, transparent); }

/* the band: a fine gold lattice that fades away */
body::after {
	content: '';
	position: absolute;
	z-index: -2;
	top: 0; left: 0; right: 0;
	height: 230px;
	background:
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 1px, transparent 1px 16px),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 1px, transparent 1px 16px);
	-webkit-mask-image: linear-gradient(#000, transparent);
	mask-image: linear-gradient(#000, transparent);
}

.bg {
	position: relative;
	z-index: 1;
	width: 156px;
	height: 156px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 110px;
	border-radius: 50%;
	border: 5px solid #fff;
	box-shadow: 0 0 0 1.5px var(--accent), 0 22px 36px -16px rgba(0, 0, 0, .55);
	background: #fff;
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 20px; gap: 6px; max-width: min(100%, 560px); }
.header .title h1 { font-size: clamp(1.7rem, 7.5vw, 2.15rem); font-weight: 800; letter-spacing: -.025em; }
.header .title > img { width: 24px; height: 24px; opacity: 1; }
.header h2 { font-size: .98rem; font-weight: 500; color: var(--muted); }
.header::after { content: ''; width: 44px; height: 2px; margin-top: 12px; background: var(--accent); border-radius: 2px; }

.social-media { padding-top: 22px; gap: 14px; }
.social-media > a:hover { background: color-mix(in srgb, var(--accent) 12%, #fff); }

.links { padding-top: 26px; gap: 12px; }
.link { font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.link:hover { background: #141414; color: #fff; }
.links .link:first-child { background: #141414; color: #fff; }
.links .link:first-child:hover { background: #2a2a2a; }
.link:focus-visible { outline-color: var(--accent); }
#rating-form h4 { font-weight: 800; }