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

:root {
  --sage:#9ba591;
  --dark:#68725f;
  --cream:#f4f0eb;
  --ink:#202020;
  --white:#fff}

body {
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6}

header {
  background:var(--cream);
  text-align:center}

.logo-area {
  padding:24px 15px 18px}

.logo-area h1 {
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:500;
  letter-spacing:1px}

.logo-area h2 {
  font-size:clamp(1.15rem,2.5vw,1.7rem);
  font-weight:400}

nav {
  background:var(--sage);
  display:flex;
  justify-content:center;
  flex-wrap:wrap}

nav a {
  color:white;
  text-decoration:none;
  padding:11px 19px;
  font-size:.82rem;
  font-weight:bold}

nav a:hover {
  background:var(--dark)}

.hero {
  min-height:520px;
  background:url("../images/hero.jpeg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px}

.hero-box {
  background:rgba(244,240,235,.88);
  padding:35px 50px;
  border:1px solid rgba(0,0,0,.15)}

.hero-box h2 {
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:500}

.hero-box h3 {
  font-size:clamp(1.2rem,3vw,1.9rem);
  font-weight:400;
  margin-bottom:22px}

.hero-box p {
  font-size:1.45rem;
  margin-top:22px}

.btn {
  display:inline-block;
  background:var(--dark);
  color:#fff;
  text-decoration:none;
  border:0;
  padding:11px 24px;
  font-weight:bold;
  cursor:pointer}

main {
  max-width:1100px;
  margin:auto;
  padding:45px 22px}

.title {
  text-align:center;
  font-size:2rem;
  font-weight:500;
  margin-bottom:30px}

.two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:center}

.panel {
  background:#fff;
  border:1px solid #bbb;
  padding:25px}

.panel h3 {
  margin-bottom:12px}

.food-img {
  width:100%;
  height:340px;
  object-fit:cover}

.menu-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px}

.menu-item {
  background:#fff;
  padding:18px;
  border-bottom:4px solid var(--sage)}

.menu-item h3 {
  margin-bottom:6px}

.gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px}

.gallery img {
  width:100%;
  height:220px;
  object-fit:cover}

form {
  max-width:720px;
  margin:auto;
  background:#fff;
  padding:28px;
  border:1px solid #aaa}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}

label {
  font-weight:bold;
  font-size:.9rem}

input,select,textarea {
  width:100%;
  padding:11px;
  margin-top:5px;
  border:1px solid #999;
  font:inherit}

.full {
  grid-column:1/-1}

footer {
  background:var(--dark);
  color:#fff;
  text-align:center;
  padding:22px;
  margin-top:35px}

@media(max-width:760px) {
  .two,.menu-grid,.form-grid {
  grid-template-columns:1fr}
.gallery {
  grid-template-columns:1fr 1fr}
.hero {
  min-height:430px}
}

@media(max-width:480px) {
  nav {
  flex-direction:column}
nav a {
  width:100%;
  border-bottom:1px solid #abb2a4}
.gallery {
  grid-template-columns:1fr}
.hero-box {
  padding:25px 18px;
  width:94%}
}