/* Design tokens */
:root {
  --cream: #fff8f0;
  --brown: #4b2e2b;
  --orange: #d77a3d;
  --brown-700: #3d2523;
  --brown-300: #7a5c58;
  --bg: var(--cream);
  --text: #2a2221;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(75, 46, 43, 0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.container.narrow { width: min(800px, 92vw); }
.small { font-size: .9rem; opacity: .8; }

/* Header / Nav */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cream) 96%, white 4%);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.logo { color: var(--brown); text-decoration: none; font-weight: 700; letter-spacing: .2px; }

.site-nav { display: flex; gap: 1rem; align-items: center; }
.site-nav a {
  color: var(--brown-700); text-decoration: none; padding: 8px 10px; border-radius: 8px;
}
.site-nav a:hover { background: rgba(215, 122, 61, 0.08); color: var(--brown); }
.site-nav .active { color: white; background: var(--orange); }

.nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; }
.nav-toggle .bar { display: block; width: 24px; height: 2px; background: var(--brown); margin: 5px 0; transition: .2s; }

/* Hero */
.hero {
  min-height: 62vh;
  background: var(--brown) center/cover no-repeat;
  background-image: var(--hero);
  display: grid; place-items: center; text-align: center; color: white;
}
.hero-inner { padding: 64px 0; }
.hero h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); margin: 0 0 10px; }
.hero .sub { font-size: clamp(1rem, 1.2vw + .9rem, 1.3rem); opacity: .95; margin: 0 0 20px; }

/* Sections */
.section { padding: 56px 0; }
.section h2, .section h1 { color: var(--brown); margin-top: 0; }
.lead { font-size: 1.15rem; color: var(--brown-700); }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.card { grid-column: span 12; background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .2s ease; }
.card:hover { transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: 16px; }

.specials .card { grid-column: span 12; }

/* Team avatars */
.avatar { aspect-ratio: 1/1; }
.avatar img { border-radius: 50%; }

/* Menu grid */
.menu-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.menu-card { grid-column: span 12; background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.menu-media { aspect-ratio: 4/3; overflow: hidden; }
.menu-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; }
.menu-card:hover .menu-media img { transform: scale(1.08); }
.menu-body { padding: 14px 16px 18px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; }
.menu-body h3 { margin: 0; color: var(--brown); }
.menu-body p { margin: 0; grid-column: 1 / -1; color: var(--brown-700); }
.price { color: var(--orange); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.contact-grid > div { grid-column: span 12; }
.contact-grid aside { grid-column: span 12; }
.contact-form .field { margin-bottom: 14px; }
.contact-form label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--brown); }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08);
  background: white; color: var(--text);
}
.map-embed iframe { width: 100%; height: 280px; border: 0; border-radius: 10px; box-shadow: var(--shadow); }

/* Buttons */
.btn { display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.btn-accent { background: var(--orange); color: white; box-shadow: 0 8px 18px rgba(215, 122, 61, .24); }
.btn-accent:hover { filter: brightness(0.95); }

/* Footer */
.site-footer { background: color-mix(in srgb, var(--brown) 6%, var(--cream) 94%); padding: 26px 0; margin-top: 36px; color: var(--brown-700); }
.footer-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 20px; }
.footer-grid > div { grid-column: span 12; }
.site-footer a { color: var(--brown-700); }

/* Responsive */
@media (min-width: 640px) {
  .specials .card { grid-column: span 6; }
  .team .card { grid-column: span 4; }
  .menu-card { grid-column: span 6; }
  .contact-grid > div { grid-column: span 7; }
  .contact-grid aside { grid-column: span 5; }
  .footer-grid > div { grid-column: span 3; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .site-nav { position: absolute; right: 4vw; top: 64px; background: white; padding: 10px; border-radius: 12px; box-shadow: var(--shadow); display: none; flex-direction: column; min-width: 180px; }
  .site-nav.open { display: flex; }
}