* {
		box-sizing: border-box
	}
	
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 100px
	}
	
	body {
		margin: 0;
		background: #f4eddf;
		color: #24291f;
		font-family: Arial, sans-serif;
		line-height: 1.65
	}
	
	a {
		color: inherit
	}
	
	header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 25px;
		padding: 20px 5%;
		background: #f4eddf;
		position: sticky;
		top: 0;
		z-index: 9;
		border-bottom: 1px solid #c7bdab
	}
	
	.brand {
		font-family: Georgia, serif;
		font-weight: bold;
		font-size: 23px;
		line-height: 1.1;
		text-decoration: none
	}
	
	.brand small {
		font: 10px Arial;
		letter-spacing: 3px
	}
	
	nav {
		display: flex;
		gap: 26px;
		align-items: center
	}
	
	nav a {
		text-decoration: none;
		font-size: 13px;
		font-weight: bold
	}
	
	.lang {
		border: 1px solid;
		padding: 7px 12px
	}
	
	.hero {
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-height: 690px
	}
	
	.hero-copy {
		padding: 65px 8% 65px 10%;
		display: flex;
		flex-direction: column;
		justify-content: center
	}
	
	.eyebrow {
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 2.6px;
		text-transform: uppercase;
		color: #9d3e25
	}
	
	h1,
	h2,
	h3 {
		font-family: Georgia, serif;
		font-weight: normal;
		line-height: 1.06
	}
	
	h1 {
		font-size: clamp(54px, 6.1vw, 90px);
		margin: 24px 0
	}
	
	h1 em {
		color: #a43d23
	}
	
	h2 {
		font-size: clamp(36px, 4.5vw, 60px);
		margin: 16px 0 25px
	}
	
	h3 {
		font-size: 28px
	}
	
	.hero p {
		max-width: 440px
	}
	
	.hero-photo {
		position: relative;
		background: #30291d
	}
	
	.hero-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute
	}
	
	.stamp {
		position: absolute;
		bottom: 32px;
		left: 32px;
		border-radius: 100%;
		width: 135px;
		height: 135px;
		display: grid;
		place-content: center;
		text-align: center;
		background: #e2ab40;
		color: #25291f;
		transform: rotate(-10deg);
		font: italic 21px Georgia;
		line-height: 1.2;
		border: 5px double #28291e
	}
	
	.actions {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		margin-top: 22px
	}
	
	.btn {
		background: #a43d23;
		color: #fff;
		padding: 13px 22px;
		text-decoration: none;
		font-size: 13px;
		font-weight: bold;
		display: inline-block
	}
	
	.outline {
		background: transparent;
		border: 1px solid #77715f;
		color: inherit
	}
	
	.ribbon {
		background: #293b2e;
		color: #f4eddf;
		display: flex;
		justify-content: space-around;
		gap: 20px;
		padding: 20px;
		font: italic 20px Georgia
	}
	
	.section {
		padding: 85px 7%;
		max-width: 1500px;
		margin: auto
	}
	
	.section-head {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 30px;
		margin-bottom: 35px
	}
	
	.section-head p {
		max-width: 360px
	}
	
	.menu {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 28px
	}
	
	.dish img {
		width: 100%;
		aspect-ratio: 1.15;
		object-fit: cover
	}
	
	.dish h3 {
		margin: 20px 0 10px
	}
	
	.dish p {
		font-size: 14px
	}
	
	.dish span {
		font-size: 11px;
		letter-spacing: 2px;
		color: #9d3e25
	}
	
	.story {
		background: #293b2e;
		color: #f4eddf;
		display: grid;
		grid-template-columns: 1fr 1fr
	}
	
	.story .words {
		padding: 70px 13%
	}
	
	.story img {
		width: 100%;
		height: 100%;
		max-height: 650px;
		object-fit: cover
	}
	
	.story .eyebrow {
		color: #e2ab40
	}
	
	.process {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
		margin-top: 35px;
		border-top: 1px solid #6c7b6c;
		padding-top: 20px
	}
	
	.process strong {
		color: #e2ab40;
		font: 30px Georgia
	}
	
	.press {
		background: #e9ddc8;
		padding: 36px 7%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 30px
	}
	
	.press strong {
		font: 28px Georgia
	}
	
	.reviews {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 35px
	}
	
	.reviews blockquote {
		margin: 0;
		padding-top: 20px;
		border-top: 1px solid #bbae96;
		font: 23px/1.5 Georgia
	}
	
	.reviews small {
		font: 12px Arial
	}
	
	.stars {
		color: #a43d23;
		letter-spacing: 3px
	}
	
	.visit {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 55px;
		background: #e9ddc8
	}
	
	.visit article {
		padding: 30px 0
	}
	
	.notice {
		font-size: 13px;
		border-left: 3px solid #a43d23;
		padding-left: 15px
	}
	
	.faq {
		max-width: 900px
	}
	
	details {
		border-bottom: 1px solid #c7bdab;
		padding: 20px 0
	}
	
	summary {
		font-weight: bold;
		cursor: pointer
	}
	
	footer {
		background: #242e25;
		color: #f4eddf;
		padding: 45px 7%;
		display: flex;
		justify-content: space-between;
		gap: 30px
	}
	
	footer small {
		font-size: 11px
	}
	
	.credits {
		font-size: 10px;
		color: #666
	}
	
	.skip {
		position: absolute;
		left: -9999px
	}
	
	.skip:focus {
		left: 0;
		z-index: 20;
		background: white
	}
	
	.place-gallery {
		display: grid;
		grid-template-columns: 1.35fr 1fr;
		gap: 25px;
		align-items: center
	}
	
	.dish img {
		object-fit: contain;
		background: #e9ddc8
	}
	
	.story img {
		object-fit: contain;
		background: #18281e
	}
	
	@media(max-width:750px) {
		.place-gallery {
			grid-template-columns: 1fr
		}
	}
	
	a:focus-visible,
	summary:focus-visible {
		outline: 3px solid #d29a31;
		outline-offset: 4px
	}
	
	@media(max-width:750px) {
		header {
			padding: 16px 5%
		}
		.brand {
			font-size: 19px
		}
		nav {
			gap: 12px
		}
		nav .desktop {
			display: none
		}
		.hero {
			grid-template-columns: 1fr
		}
		.hero-copy {
			padding: 40px 7%
		}
		.hero-photo {
			height: 440px
		}
		.ribbon {
			font-size: 15px;
			flex-wrap: wrap
		}
		.section {
			padding: 55px 7%
		}
		.menu,
		.reviews {
			grid-template-columns: 1fr
		}
		.section-head {
			display: block
		}
		.story {
			grid-template-columns: 1fr
		}
		.story .words {
			padding: 45px 7%
		}
		.story img {
			height: 400px
		}
		.press {
			display: block
		}
		.visit {
			grid-template-columns: 1fr;
			gap: 0
		}
		.visit article {
			padding: 10px 0
		}
		footer {
			flex-direction: column
		}
		h1 {
			font-size: 60px
		}
		.dish img {
			aspect-ratio: 1.4
		}
	}
	
	.restaurant-logo {
		display: block;
		width: 340px;
		max-width: 100%;
		height: auto;
		margin-bottom: 10px
	}
	
	header .restaurant-logo {
		filter: brightness(0) saturate(100%) invert(16%) sepia(12%) saturate(773%) hue-rotate(80deg) brightness(91%) contrast(90%)
	}
	
	footer .brand {
		max-width: 390px
	}
	
	footer .restaurant-logo {
		width: 390px
	}
	
	header .brand {
		flex-shrink: 0;
		width: 340px
	}
	
	@media(max-width:750px) {
		header .brand {
			width: 200px
		}
		.restaurant-logo {
			width: 200px
		}
		header .brand small {
			font-size: 8px;
			letter-spacing: 1.5px
		}
		header {
			gap: 12px
		}
		nav {
			gap: 9px
		}
		nav a {
			font-size: 11px
		}
	}
	
	@media(max-width:370px) {
		header .brand {
			width: 160px
		}
	}
	
	header .brand,
	footer .brand {
		display: flex;
		align-items: center;
		gap: 14px;
		width: auto;
		max-width: 480px
	}
	
	.brand-wording {
		display: block
	}
	
	.goat-mark {
		width: 85px;
		height: 78px;
		object-fit: contain;
		mix-blend-mode: multiply;
		flex-shrink: 0
	}
	
	.brand-wording .restaurant-logo {
		width: 310px;
		max-width: 100%
	}
	
	footer {
		background: #e9ddc8;
		color: #24291f
	}
	
	footer .restaurant-logo {
		filter: brightness(0) saturate(100%) invert(16%) sepia(12%) saturate(773%) hue-rotate(80deg) brightness(91%) contrast(90%)
	}
	
	footer .goat-mark {
		width: 100px;
		height: 90px
	}
	
	@media(max-width:1000px) {
		header .brand {
			max-width: 340px
		}
		header .brand-wording {
			max-width: 235px
		}
		header .goat-mark {
			width: 65px;
			height: 62px
		}
		nav {
			gap: 15px
		}
	}
	
	@media(max-width:750px) {
		header .brand {
			gap: 7px;
			max-width: 235px
		}
		header .brand-wording {
			max-width: 165px
		}
		header .goat-mark {
			width: 48px;
			height: 48px
		}
		header .brand small {
			font-size: 7px;
			letter-spacing: 1px
		}
		header nav {
			gap: 7px
		}
		header nav a {
			font-size: 10px
		}
		header .lang {
			padding: 6px
		}
		footer .brand {
			max-width: 100%;
			gap: 12px
		}
		footer .brand-wording {
			max-width: 250px
		}
		footer .goat-mark {
			width: 65px;
			height: 65px
		}
	}
	
	@media(max-width:380px) {
		header .brand-wording {
			max-width: 135px
		}
		header .brand small {
			font-size: 6px
		}
	}