/* Blush — soft rose-to-lilac gradient, italic serif, frosted pills. For beauty, nails, spa, bridal, wellness. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=Jost:wght@400;500;600&display=swap');

:root {
	--bg: #f8dfe1;
	--fg: #3b2432;
	--muted: #7d5a69;
	--accent: #b8486f;
	--accent-fg: #fff;
	--accent-glyph: none;
	--font-head: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Jost', system-ui, sans-serif;

	--btn-bg: rgba(255, 255, 255, .6);
	--btn-fg: var(--fg);
	--btn-border: 1px solid rgba(255, 255, 255, .85);
	--btn-radius: 999px;
	--btn-shadow: 0 12px 28px -14px rgba(192, 87, 124, .55);
	--btn-pad: 17px 24px;

	--chip-bg: rgba(255, 255, 255, .62);
	--chip-border: 1px solid rgba(255, 255, 255, .9);
	--chip-size: 50px;
	--chip-glyph: invert(1) brightness(.4);

	--glyph-page: invert(1);
	--pop-bg: #fff6f6;
	--pop-fg: #3b2432;
	--pop-border: rgba(192, 87, 124, .3);
	--pop-shade: rgba(59, 36, 50, .4);
	--field-bg: #fff;
	--star-filter: invert(1);
}

html, body { background: linear-gradient(165deg, #fde8e4 0%, #f7d6dc 42%, #e9d3ee 100%) fixed; }
/* soft blurred blobs */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: radial-gradient(260px 260px at 12% 8%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(300px 300px at 92% 62%, rgba(192, 87, 124, .22), transparent 70%);
	pointer-events: none;
}

.bg {
	width: 214px;
	height: 214px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 54px;
	border-radius: 50%;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, .6), 0 0 0 8px rgba(255, 255, 255, .9), 0 26px 50px -12px rgba(192, 87, 124, .55);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 30px; gap: 6px; }
.header .title h1 { font-weight: 700; font-style: italic; font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
.header h2 { font-size: .8rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 78%, #000); }

.social-media { padding-top: 22px; }
.social-media > a { box-shadow: 0 10px 22px -12px rgba(192, 87, 124, .6); }

.links { padding-top: 26px; gap: 12px; }
.link { backdrop-filter: blur(10px); font-weight: 500; font-size: 1rem; }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); border-color: transparent; backdrop-filter: none; }
.link:hover { background: rgba(255, 255, 255, .85); }
.links .link:first-child:hover { background: var(--accent); filter: brightness(1.07); }
#rating-form h4 { font-style: italic; font-size: 1.35rem; font-weight: 700; }