/* Bento — soft grey canvas, big rounded tiles, an indigo accent. For freelancers, shops, startups, anyone modern. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
	--bg: #e8e9ee;
	--fg: #14161c;
	--muted: #5e6270;
	--accent: #4f46e5;
	--accent-fg: #fff;
	--accent-glyph: none;
	--font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

	--max: 500px;
	--btn-bg: #fff;
	--btn-fg: var(--fg);
	--btn-radius: 26px;

	--chip-bg: #fff;
	--chip-border: 0 solid transparent;
	--chip-radius: 20px;
	--chip-size: 54px;
	--chip-glyph: invert(1);

	--glyph-page: invert(1);
	--pop-bg: #fff;
	--pop-fg: #14161c;
	--pop-border: transparent;
	--pop-shade: rgba(20, 22, 28, .5);
	--field-bg: #f1f2f6;
	--star-filter: invert(1);
}

.bg {
	width: calc(100% - 32px);
	max-width: 468px;
	aspect-ratio: 1.12;
	max-height: none;
	margin-top: 16px;
	border-radius: 34px;
	box-shadow: 0 24px 40px -26px rgba(20, 22, 28, .55);
}
.bg::after { display: none; }

.header {
	width: calc(100% - 32px);
	max-width: 468px;
	margin-top: 12px;
	padding: 20px 22px;
	align-items: flex-start;
	text-align: left;
	gap: 4px;
	background: #fff;
	border-radius: 30px;
}
.header .title { justify-content: flex-start; }
.header .title h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; color: #14161c; }
.header h2 { font-size: .95rem; font-weight: 500; }

.social-media { justify-content: flex-start; padding: 12px 16px 0; gap: 10px; }
.social-media > a { box-shadow: 0 6px 14px -10px rgba(20, 22, 28, .5); }
.social-media > a:hover { background: var(--accent); }
.social-media > a:hover > img { filter: none; }

.links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px 16px 0;
}
.link {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 118px;
	padding: 18px;
	text-align: left;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.link::after { content: '↗'; position: absolute; top: 14px; right: 18px; font-size: 1.1rem; font-weight: 600; opacity: .8; }
.link:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 84px; }
.link:nth-child(4n+1) { background: var(--accent); color: var(--accent-fg); }
.link:nth-child(4n+2) { background: #fff; color: #14161c; }
.link:nth-child(4n+3) { background: color-mix(in srgb, var(--accent) 16%, #fff); color: #14161c; }
.link:nth-child(4n) { background: #14161c; color: #fff; }
.link:hover { transform: translateY(-3px) rotate(-.4deg); }
#rating-form { border-radius: 28px; }
#rating-form h4 { font-weight: 800; }