/* ==========================================================================
   Base Styles — reset + global
   ========================================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
}

body {
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-dark-gray);
	background-color: var(--color-bg-header);
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#page {
	overflow-x: hidden;
	overflow-x: clip;
}

.site-header,
.section-hero,
.section-story,
.section-wine,
.section-cocktails,
.section-cta,
.section-footer {
	width: min(100%, var(--max-width-desktop));
	margin: 0 auto;
}

.section-hero,
.section-story,
.section-wine,
.section-cocktails,
.section-cta,
.section-footer {
	position: relative;
}

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

a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 768px) {
	.site-header,
	.section-hero,
	.section-story,
	.section-wine,
	.section-cocktails,
	.section-cta,
	.section-footer {
		width: 100%;
	}
}