/* Prompt Font */
@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('./assets/fonts/Prompt-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* ZenOldMincho Font */
@font-face {
    font-family: 'ZenOldMincho';
    src: url('./assets/fonts/ZenOldMincho-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ZenOldMincho';
    src: url('./assets/fonts/ZenOldMincho-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'ZenOldMincho';
    src: url('./assets/fonts/ZenOldMincho-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'ZenOldMincho';
    src: url('./assets/fonts/ZenOldMincho-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'ZenOldMincho';
    src: url('./assets/fonts/ZenOldMincho-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

:root {
	--font-size--xs: 0.75rem;
	--font-size--sm: 0.875rem;
	--font-size--base: 1rem;
	--font-size--lg: 1.125rem;
	--font-size--xl: clamp(1rem, 0.7656rem + 0.7813vw, 1.25rem);
	--font-size--2-xl: clamp(1.125rem, 0.7734rem + 1.1719vw, 1.5rem);
	--font-size--3-xl: clamp(1.25rem, 0.6641rem + 1.9531vw, 1.875rem);
	--font-size--4-xl: clamp(1.5rem, 0.7969rem + 2.3438vw, 2.25rem);
	--font-size--5-xl: clamp(1.875rem, 0.8203rem + 3.5156vw, 3rem);
	--font-size--6-xl: clamp(2.25rem, 0.8438rem + 4.6875vw, 3.75rem);
	--font-size--7-xl: clamp(3rem, 1.5938rem + 4.6875vw, 4.5rem);
	--font-size--8-xl: clamp(3.75rem, 1.6406rem + 7.0313vw, 6rem);
	--font-size--9-xl: clamp(4.5rem, 1.2188rem + 10.9375vw, 8rem);

	--line-height--xs: 1rem;
	--line-height--sm: 1.25rem;
	--line-height--base: 1.5rem;
	--line-height--lg: 1.75rem;
	--line-height--xl: clamp(1.5rem, 1.2656rem + 0.7813vw, 1.75rem);
	--line-height--2-xl: clamp(1.75rem, 1.5156rem + 0.7813vw, 2rem);
	--line-height--3-xl: clamp(1.75rem, 1.2813rem + 1.5625vw, 2.25rem);
	--line-height--4-xl: clamp(2rem, 1.5313rem + 1.5625vw, 2.5rem);
	--line-height--5-xl: clamp(2.25rem, 1.5469rem + 2.3438vw, 3rem);
	--line-height--6-xl: 1;
	--line-height--7-xl: 1;
	--line-height--8-xl: 1;
	--line-height--9-xl: 1;

	--spacing--1: 1px;
	--spacing--2: 0.125rem;
	--spacing--4: 0.25rem;
	--spacing--8: 0.5rem;
	--spacing--12: 0.75rem;
	--spacing--16: 1rem;
	--spacing--20: 1.25rem;
	--spacing--24: 1.5rem;
	--spacing--32: 2rem;
	--spacing--36: 2.25rem;
	--spacing--40: 2.5rem;
	--spacing--48: 48px;
	--spacing--56: 3.5rem;
	--spacing--64: 4rem;
	--spacing--72: 4.5rem;
	--spacing--80: 5rem;
	--spacing--96: 6rem;
	--spacing--112: 7rem;
	--spacing--128: 8rem;
	--spacing--144: 9rem;
	--spacing--160: 10rem;
	--spacing--176: 11rem;
	--spacing--192: 12rem;
	--spacing--em: 1em;
	--spacing--em-1-5: 1.5em;
}

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	font-family: "ZenOldMincho", "Prompt", serif;
	background-color: #DBCDBD;
}

body {
	margin: 0;
	padding: 0;
}

*, *:before, *:after {
	box-sizing: inherit;
	transition: all 0.5s ease;
}

svg,
img {
	max-width: 100%;
	vertical-align: middle;
}

a {
	text-decoration: none;
}

.hidden {
	opacity: 0;
}

.container {
	padding-inline: var(--spacing--16);
	width: min(1200px, calc(100% - var(--spacing--32)));
	margin-inline: auto;
}

.site-header {
	background-color: #726350;
	text-align: center;
	padding-block: var(--spacing--24);
}

.hero-banner {
	background-image: url('./assets/img/hero-banner.webp');
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	background-attachment: fixed;
	text-align: center;
	padding-block: var(--spacing--96);
	min-height: 640px;
	position: relative;
}

.hero-banner::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
}

.hero-banner .container {
	position: relative;
	z-index: 1;
	color: #fff;
	width: min(720px, calc(100% - var(--spacing--32)));
}

.hero-banner .container h1 {
	font-size: var(--font-size--5-xl);
	line-height: var(--line-height--6-xl);
	margin-block: 0;
}

.hero-banner .container h2 {
	margin-block: var(--spacing--em) 0;
	font-weight: 400;
	font-size: var(--font-size--4-xl);
	line-height: var(--line-height--5-xl);
}

.content {
	text-align: center;
	font-size: var(--font-size--xl);
	line-height: var(--line-height--2-xl);
	font-weight: 400;
}

.content .container {
	width: min(720px, calc(100% - var(--spacing--32)));
	padding-block: var(--spacing--32);
}

.content .block {
	margin-block: var(--spacing--32);
}

.content h3 {
	font-size: var(--font-size--xl);
	line-height: var(--line-height--2-xl);
	font-weight: 400;
	margin: 0;
}

.content h3 strong {
	font-weight: 700;
	font-size: var(--font-size--4-xl);
	line-height: var(--line-height--5-xl);
}

.content p {
	margin: 0;
	text-wrap: balance;
}

.content .content-hours {
	width: 300px;
	margin-inline: auto;
	text-align: left;
}

.content .content-hours ul li span {
	display: inline-block;
	width: 115px;
}

.social-links {
	display: flex;
	justify-content: center;
	gap: var(--spacing--16);
	margin-block: 0 var(--spacing--32);
	padding-inline: var(--spacing--16);
	font-size: var(--font-size--4-xl);
	line-height: 1;
}

.social-links a {
	color: #726350;
}

.site-footer {
	position: sticky;
	z-index: 2;
	bottom: 0;
	background-color: #726350;
	color: #fff;
	text-align: center;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: 'reserve button line';
	font-size: var(--font-size--xl);
	line-height: var(--line-height--2-xl);
}

.site-footer .button-call {
	grid-area: button;
	display: inline-flex;
	padding: var(--spacing--16) var(--spacing--16);
	border: 1px solid #000;
	background-color: #000;
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
}

.site-footer .button-call span {
	display: none;
}

.site-footer .button-reserve {
	grid-area: reserve;
	color: #fff;
	place-self: center;
	text-transform: uppercase;
}

.site-footer .button-line {
	grid-area: line;
	color: #fff;
	place-self: center;
	text-transform: uppercase;
}

@media (width>=992px) {
	.site-footer {
		padding-block: 0 var(--spacing--32);
		width: 600px;
		margin-inline: auto;
		position: static;
		background: transparent;
		gap: var(--spacing--32);
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-template-areas: '. button button .'
		'reserve reserve line line';
	}

	.site-footer .button-call {
		display: block;
		width: 100%;
		margin-inline: auto;
		padding: var(--spacing--16) var(--spacing--16);
		border: 2px solid #726350;
		color: #726350;
		background-color: transparent;
		border-radius: 9999px;
		text-decoration: none;
	}

	.site-footer .button-call:is(:hover, :focus) {
		background-color: #726350;
		color: #fff;
	}

	.site-footer .button-call-icon {
		display: none;
	}

	.site-footer .button-call span {
		display: initial;
	}

	.site-footer .button-reserve,
	.site-footer .button-line {
		background-color: #726350;
		color: #fff;
		display: block;
		width: 100%;
		padding: var(--spacing--16) var(--spacing--16);
		border: 2px solid #726350;
		border-radius: 9999px;
		text-decoration: none;
	}

	.site-footer .button-reserve:is(:hover, :focus),
	.site-footer .button-line:is(:hover, :focus) {
		background-color: transparent;
		color: #726350;
	}
}