:root {
  --cream: #faf5ec;
  --cream-2: #f3ead9;
  --espresso: #3b2a20;
  --copper: #b4632c;
  --copper-dark: #8f4c1f;
  --line: #e2d5bf;
}

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

body {
  background: var(--cream);
  color: var(--espresso);
  font-family: "Inter", sans-serif;
  line-height: 1.65;
}

h1, h2, h3, .wordmark, blockquote, em {
  font-family: "Fraunces", serif;
  font-weight: 500;
}

.topbar {
  text-align: center; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 9px 14px;
  background: var(--espresso); color: var(--cream);
}

.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px min(6vw, 60px); border-bottom: 1px solid var(--line);
}
.wordmark {
  font-size: 1.6rem; color: var(--espresso); text-decoration: none;
  letter-spacing: 0.01em;
}
.nav-side { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8a715c; }
.nav-cta { justify-self: end; text-decoration: none; border-bottom: 1.5px solid var(--copper); color: var(--copper-dark); padding-bottom: 2px; }
.nav-cta:hover { color: var(--espresso); border-color: var(--espresso); }

/* Hero */
.hero { text-align: center; padding: 76px 6vw 60px; }
.kicker {
  font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; letter-spacing: -0.01em; }
.hero em { color: var(--copper); font-style: italic; }
.hero-sub { max-width: 44ch; margin: 24px auto 0; color: #6b5745; font-size: 1.05rem; }

.hero-art {
  display: flex; justify-content: center; gap: 20px; margin-top: 52px; flex-wrap: wrap;
}
.art-tile {
  width: 150px; height: 190px; border-radius: 90px 90px 14px 14px;
  display: flex; align-items: center; justify-content: center; font-size: 3rem;
  border: 1px solid var(--line);
}
.t1 { background: linear-gradient(160deg, #e9d3b5, #d9b98c); transform: rotate(-3deg); }
.t2 { background: linear-gradient(160deg, #ddb08a, #c68d5c); transform: translateY(14px); }
.t3 { background: linear-gradient(160deg, #efe0c8, #dcc49e); transform: rotate(3deg); }

/* Menu */
.menu-section { max-width: 880px; margin: 0 auto; padding: 70px 6vw; }
h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 34px; text-align: center; }
h2 span { font-style: italic; color: var(--copper); }

.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.menu-col h3 {
  font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-family: "Inter", sans-serif; font-weight: 600; color: #8a715c;
  margin-bottom: 18px;
}
.menu-item { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; }
.dish { font-size: 1.02rem; }
.dots { flex: 1; border-bottom: 2px dotted var(--line); }
.price { font-family: "Fraunces", serif; color: var(--copper-dark); }

/* Quote */
.pull-quote {
  background: var(--cream-2); border-block: 1px solid var(--line);
  text-align: center; padding: 64px 6vw;
}
blockquote { font-size: clamp(1.4rem, 3vw, 2rem); font-style: italic; max-width: 26em; margin: 0 auto 14px; }
cite { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a715c; font-style: normal; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); }
.g-tile { aspect-ratio: 1; }
.g1 { background: linear-gradient(145deg, #c68d5c, #a96f3f); }
.g2 { background: linear-gradient(145deg, #3b2a20, #5d4433); }
.g3 { background: linear-gradient(145deg, #e9d3b5, #cdae7f); }
.g4 { background: linear-gradient(145deg, #8f4c1f, #b4632c); }

/* Visit */
.visit { padding: 76px 6vw; max-width: 980px; margin: 0 auto; }
.visit h2 { text-align: left; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.addr { font-size: 1.15rem; font-family: "Fraunces", serif; margin-bottom: 14px; }
.hours { color: #6b5745; }

.visit-card {
  background: var(--espresso); color: var(--cream);
  padding: 36px; border-radius: 14px;
}
.visit-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.visit-card p { color: #d8c8b4; font-size: 0.95rem; margin-bottom: 22px; }
.btn {
  display: inline-block; background: var(--copper); color: #fff;
  text-decoration: none; padding: 12px 24px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; transition: background 0.15s ease;
}
.btn:hover { background: #c9722f; }

/* Footer */
.footer {
  border-top: 1px solid var(--line); padding: 26px 6vw; text-align: center;
  font-size: 0.85rem; color: #8a715c;
}
.credit a { color: var(--copper-dark); }

@media (max-width: 720px) {
  .menu-cols, .visit-grid { grid-template-columns: 1fr; gap: 34px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-side:first-child { display: none; }
}