/* Executive — midnight navy, brass hairlines, classical serif. For lawyers, advisers, accountants, firms. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Lato:wght@400;700&display=swap');

:root {
	--bg: #0c1624;
	--fg: #ebe5d5;
	--muted: #9fabbd;
	--accent: #bd9b5c;
	--accent-fg: #0c1624;
	--accent-glyph: invert(1);
	--font-head: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Lato', system-ui, sans-serif;

	--btn-bg: transparent;
	--btn-fg: var(--fg);
	--btn-border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
	--btn-radius: 0;
	--btn-pad: 17px 22px;

	--chip-bg: transparent;
	--chip-border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
	--chip-radius: 0;
	--chip-size: 46px;

	--pop-bg: #101c2e;
	--pop-border: color-mix(in srgb, var(--accent) 60%, transparent);
	--btn-radius-pop: 0;
}

.bg {
	width: min(72vw, 270px);
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 46px;
	overflow: visible;
}
.bg > img { position: relative; z-index: 1; filter: grayscale(.25) contrast(1.05); }
.bg::after {
	/* the offset brass frame behind the photo */
	inset: 14px -14px -14px 14px;
	width: auto; height: auto;
	background: none;
	border: 1px solid var(--accent);
}

.header { margin-top: 40px; gap: 10px; }
.header::before { content: ''; width: 54px; height: 1px; background: var(--accent); margin-bottom: 8px; }
.header .title h1 { font-weight: 600; font-size: clamp(2.1rem, 9.5vw, 2.8rem); letter-spacing: .04em; }
.header h2 { font-size: .74rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.header::after { content: ''; width: 54px; height: 1px; background: var(--accent); margin-top: 8px; }

.social-media { padding-top: 24px; gap: 12px; }
.social-media > a:hover { background: var(--accent); }
.social-media > a:hover > img { filter: var(--accent-glyph); }

.links { padding-top: 28px; gap: 12px; }
.link { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.link:hover { background: var(--accent); color: var(--accent-fg); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); }
.links .link:first-child:hover { filter: brightness(1.08); }
#rating-form, #rating .button { border-radius: 0; }
#rating-form h4 { font-weight: 600; font-size: 1.3rem; letter-spacing: .03em; }