@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');

:root {
	--ink: #17140f;
	--paper: #f7f6f2;
	--line: #cfcabf;
	--muted: #6f6a62;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 52px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	color: var(--ink);
	font-family: "Helvetica Neue", Arial, sans-serif;
	line-height: 1.45;
	background-color: #f7f7f7;
	background-image: url('images/wall.webp');
	background-repeat: repeat;
}

img { max-width: 100%; display: block; }

.site-header {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 1rem .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 4vw, 2.5rem);
}

.logo {
	width: clamp(110px, 26vw, 160px);
	height: auto;
	margin: 0;
	flex-shrink: 0;
}

.header-title {
	margin: 0;
	font-family: "Bowlby One SC", sans-serif;
	font-weight: 400;
	font-size: clamp(3.2rem, 15vw, 6.2rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-transform: uppercase;
}


.quick-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	padding: .6rem .75rem;
	background: rgba(247, 246, 242, .92);
	backdrop-filter: blur(4px);
	border-bottom: 1px solid var(--line);
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.quick-nav a {
	flex: none;
	white-space: nowrap;
	text-decoration: none;
	color: var(--ink);
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .45rem .8rem;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}

.quick-nav a.active,
.quick-nav a[aria-current="true"] {
	background: var(--ink);
	color: var(--paper);
}

main {
	max-width: 640px;
	margin: 0 auto;
}

.menu-section {
	padding: 2rem 1.1rem;
	border-bottom: 2px dashed var(--line);
}

.menu-section:last-of-type {
	border-bottom: none;
}

.menu-section h2 {
	font-family: "Bowlby One SC", sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 1.1rem;
	padding-bottom: .35rem;
	border-bottom: 3px solid var(--ink);
	display: inline-block;
}

.menu-section h3 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
	margin: 1.5rem 0 .75rem;
}

.menu-section h3:first-of-type {
	margin-top: .25rem;
}

.menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.item-row {
	display: flex;
	align-items: baseline;
	gap: .35rem;
}

.item-name {
	font-weight: 700;
	font-size: .95rem;
	text-transform: uppercase;
}

.dots {
	flex: 1 1 auto;
	min-width: 1em;
	border-bottom: 2px dotted var(--line);
	transform: translateY(-.3em);
}

.item-price {
	flex: none;
	font-weight: 800;
	white-space: nowrap;
}

.item-desc {
	margin: .3rem 0 0;
	font-size: .85rem;
	color: var(--muted);
}

.feature-section {
	color: var(--ink);
	border-radius: 16px;
	margin: 1.5rem .75rem;
	padding: 1.5rem 1.1rem 2rem;
	border: 1px solid var(--ink);
}

.feature-section h2 {
	border-bottom-color: var(--paper);
	color: var(--paper);
}



.feature-art {
	width:100%;
	max-width: 340px;
	height: auto;
	aspect-ratio: 340 / 303;
	margin: 0 auto -20%;
	border-radius: 10px;
	transform: translateY(-20%);
}

.pizza-panel {
	text-align: center;
	padding: 1.5rem 1rem;
}

.pizza-price {
	font-size: 1.6rem;
	font-weight: 800;
	margin: .25rem 0 .75rem;
}

.pizza-flavors {
	color: var(--muted);
	font-size: .9rem;
	margin: 0;
}

@media (min-width: 640px) {
	.menu-list.two-col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem 1.5rem;
	}
}

.live-music {
	text-align: center;
	padding: 2rem 1.1rem;
}


.live-music p {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	font-size: .85rem;
	color: var(--muted);
	margin: 0;
}

.site-footer {
	text-align: center;
	padding: 2rem 1.25rem 3rem;
	font-size: .8rem;
	color: var(--muted);
}

.site-footer a {
	color: var(--ink);
	font-weight: 700;
}

.site-footer p {
	margin: .35rem 0;
}