/* Bistro — warm paper, serif type, menu-style rows. For restaurants, cafés, bakeries. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;700&display=swap');

:root {
	--bg: #f6efe2;
	--fg: #2b2016;
	--muted: #6f5f4d;
	--accent: #b5532f;
	--accent-fg: #fff;
	--accent-glyph: none;
	--font-head: 'Playfair Display', Georgia, serif;
	--font-body: 'Lato', system-ui, sans-serif;

	--btn-bg: transparent;
	--btn-fg: var(--fg);
	--btn-radius: 0;
	--btn-pad: 18px 6px;

	--chip-bg: var(--accent);
	--chip-border: 0 solid transparent;
	--chip-size: 46px;
	--chip-glyph: var(--accent-glyph);

	--glyph-page: invert(1);
	--pop-bg: #fffaf0;
	--pop-fg: #2b2016;
	--pop-border: rgba(43, 32, 22, .16);
	--pop-shade: rgba(43, 32, 22, .45);
	--field-bg: #fff;
	--star-filter: invert(1);
}

/* a little grain so the paper isn't flat */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at 20% 10%, rgba(181, 83, 47, .08), transparent 45%), radial-gradient(circle at 90% 80%, rgba(93, 107, 58, .09), transparent 40%);
	pointer-events: none;
}

.bg {
	width: min(76vw, 292px);
	max-width: none;
	max-height: none;
	aspect-ratio: 3 / 4;
	margin-top: 38px;
	border-radius: 999px 999px 18px 18px;
	box-shadow: 0 0 0 7px #fffaf0, 0 0 0 8px rgba(43, 32, 22, .12), 0 28px 50px -22px rgba(60, 35, 10, .5);
}
.bg::after { display: none; }

.header { margin-top: 30px; gap: 8px; }
.header .title h1 { font-weight: 700; font-size: clamp(1.9rem, 8vw, 2.4rem); }
.header h2 { font-family: var(--font-head); font-style: italic; font-size: 1.1rem; color: color-mix(in srgb, var(--accent) 82%, #000); }
.header::after {
	content: '';
	width: 120px;
	height: 14px;
	margin-top: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7h48M72 7h48' stroke='%23b5532f' stroke-width='1' fill='none'/%3E%3Cpath d='M60 1l6 6-6 6-6-6z' fill='%23b5532f'/%3E%3Ccircle cx='46' cy='7' r='1.6' fill='%23b5532f'/%3E%3Ccircle cx='74' cy='7' r='1.6' fill='%23b5532f'/%3E%3C/svg%3E") center / contain no-repeat;
}

.social-media { padding-top: 22px; gap: 12px; }

.links { padding-top: 26px; gap: 0; }
.link {
	justify-content: space-between;
	text-align: left;
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 600;
	/* dotted leader under each row, like a menu */
	background: radial-gradient(circle, rgba(43, 32, 22, .45) 1px, transparent 1.6px) 0 100% / 8px 4px repeat-x;
}
.link::after { content: '→'; font-family: var(--font-body); color: var(--accent); margin-left: 16px; transition: transform .15s; }
.link:hover { transform: none; color: var(--accent); }
.link:hover::after { transform: translateX(4px); }

#rating-form h4 { font-family: var(--font-head); }