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

:root {
  --bg: #f5f3ed;
  --ink: #0e0d0b;
  --gold: #e8a33c;
  --gold-hover: #f2b354;
  --green: #286a44;
  --green-2: #3f9b62;
  --green-3: #2f7d50;
  --muted: #8f8a7e;
  --muted-2: #75705f;
  --body: #b8b3a8;
  --line: #ddd7c8;
  --card-bg: #ffffff;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: #2b2620;
  font-family: Karla, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.serif {
  font-family: Bitter, Georgia, serif;
}

a { text-decoration: none; color: inherit; }

/* Navbar */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand {
  display: flex; align-items: baseline; gap: 8px;
  color: #fff; font-family: Bitter, Georgia, serif;
  font-weight: 700; font-size: 18px; letter-spacing: -.01em;
}
.nav-brand em { color: var(--gold); font-style: italic; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.nav-links a:not(.nav-cta) { color: #e8e5dd; font-size: 14.5px; font-weight: 500; }
.nav-links a:not(.nav-cta):hover { color: var(--gold); }
.nav-cta {
  background: var(--gold); color: #17140f; font-size: 14.5px; font-weight: 700;
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-hover); }

/* Hero */
.hero { background: var(--ink); position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background: url('/img/hero-bg.jpg') center 60% / cover no-repeat;
  opacity: .62; filter: grayscale(.15) contrast(.95);
}
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,13,11,.3) 0%, rgba(14,13,11,.55) 45%, rgba(14,13,11,.92) 88%, #0e0d0b 100%);
}
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(232,163,60,.16) 0%, rgba(232,163,60,0) 60%);
}
.hero-inner {
  position: relative; max-width: 840px; margin: 0 auto;
  padding: clamp(64px, 10vw, 116px) clamp(16px, 4vw, 32px) clamp(56px, 8vw, 96px);
  text-align: center;
}
.hero-overline {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px;
}
.hero-overline span:first-child, .hero-overline span:last-child { width: 36px; height: 1px; background: rgba(255,255,255,.25); }
.hero-overline span.mid { color: var(--green-2); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 {
  font-family: Bitter, Georgia, serif; font-weight: 700; color: #fff;
  font-size: clamp(38px, 7.4vw, 72px); line-height: 1.04; letter-spacing: -.025em;
}
.hero h1 em { color: var(--gold); font-style: italic; }
.hero-sub {
  margin: 22px auto 0; max-width: 520px; color: var(--body);
  font-size: clamp(16px, 2vw, 18.5px); line-height: 1.55;
}
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.btn-gold {
  background: var(--gold); color: #17140f; font-size: 16px; font-weight: 700;
  padding: 15px 30px; border-radius: 999px;
}
.btn-gold:hover { background: var(--gold-hover); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 16px; font-weight: 600;
  padding: 15px 30px; border-radius: 999px;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.hero-hours { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; color: var(--muted-2); font-size: 14.5px; }
.hero-hours strong { color: var(--gold); font-weight: 700; }
.hero-address { margin-top: 16px; color: var(--muted-2); font-size: 14px; }

/* Section headers */
.section-head { padding: clamp(56px, 8vw, 88px) 0 0; }
.section-head-inner { max-width: 900px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); text-align: center; }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.section-head h2 { margin: 14px 0 0; font-family: Bitter, Georgia, serif; font-weight: 700; font-size: clamp(32px, 5vw, 46px); letter-spacing: -.02em; }
.rule { width: 52px; height: 3px; background: var(--gold); margin: 20px auto 0; border-radius: 2px; }
.section-head p { margin: 22px 0 0; color: #6e685c; font-size: 16px; }
.section-head p a { font-weight: 700; }

/* Jump nav */
.jumpnav {
  position: sticky; top: 62px; z-index: 30;
  background: rgba(245, 243, 237, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e3ded1; margin-top: clamp(32px, 5vw, 52px);
}
.jumpnav-inner {
  max-width: 900px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px);
  height: 52px; display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); overflow-x: auto;
}
.jumpnav-inner a { color: #4a453b; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.jumpnav-inner a:hover { color: #b8791c; border-bottom-color: var(--gold); }

/* Menu */
.menu-body { max-width: 900px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 32px) clamp(56px, 8vw, 88px); }
.menu-section { scroll-margin-top: 124px; padding-bottom: clamp(40px, 6vw, 68px); }
.menu-section-title { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); }
.diamond { width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); flex: 0 0 auto; }
.menu-section-title h2 { font-family: Bitter, Georgia, serif; font-weight: 700; font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -.02em; white-space: nowrap; }
.menu-section-title .tline { flex: 1; height: 1px; background: var(--line); }

.group { margin-bottom: clamp(34px, 5vw, 52px); }
.group h3 { font-family: Bitter, Georgia, serif; font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.group-note { margin: 8px 0 0; color: var(--green); font-size: 13.5px; line-height: 1.55; max-width: 680px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { border: 1px solid #e3ddcd; background: #faf8f3; color: #3d382e; font-size: 13.5px; padding: 6px 13px; border-radius: 999px; }

.numbered { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 20px; }
.num-item { display: flex; align-items: center; gap: 12px; background: #fbf9f4; border: 1px solid #e6e0d0; border-radius: 4px; padding: 12px 14px; }
.num-item:hover { border-color: var(--gold); background: #fff; }
.num-item .num { font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 26px; line-height: 1; color: var(--gold); flex: 0 0 auto; }
.num-item .name { font-size: 14.5px; font-weight: 600; color: #2b2620; line-height: 1.3; }

.pricehead { display: flex; align-items: baseline; gap: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.pricehead span.flex { flex: 1; }
.pricehead span.cell { width: clamp(66px, 9vw, 92px); text-align: right; flex: 0 0 auto; color: var(--green); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.item-row { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #eae5d9; }
.item-main { flex: 1; min-width: 0; }
.item-main .iname { display: block; font-size: 15.5px; font-weight: 600; color: #1c1a16; line-height: 1.35; }
.item-main .idesc { display: block; margin-top: 3px; font-size: 13px; color: #6e675a; line-height: 1.45; }
.price-cell { width: clamp(66px, 9vw, 92px); text-align: right; flex: 0 0 auto; font-size: 15.5px; font-weight: 700; color: #2b2318; }

.menu-cta { display: flex; justify-content: center; padding-top: 8px; }
.btn-outline { border: 1.5px solid var(--gold); color: #a86f14; font-size: 16px; font-weight: 700; padding: 15px 32px; border-radius: 999px; }
.btn-outline:hover { background: var(--gold); color: #17140f; }

/* About */
.about { background: #efece3; border-top: 1px solid #e3ded1; padding: clamp(56px, 8vw, 92px) 0; }
.about-inner { max-width: 980px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: clamp(36px, 5vw, 54px); }
.card { background: #fff; border: 1px solid #e6e1d4; border-radius: 4px; overflow: hidden; }
.card-img { aspect-ratio: 16/10; background-color: #e7e0d0; background-position: center; background-size: cover; filter: sepia(.62) saturate(1.15) contrast(1.04) brightness(1.06); }
.card-body { padding: 26px 28px 30px; }
.card-body h3 { font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 22px; }
.card-rule { width: 38px; height: 3px; margin: 14px 0 16px; border-radius: 2px; }
.card-rule.gold { background: var(--gold); }
.card-rule.green { background: var(--green-2); }
.card-body p { color: #5f594d; font-size: 15px; line-height: 1.65; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }
.stat { background: #fff; border: 1px solid #e6e1d4; border-radius: 4px; padding: 26px 20px; text-align: center; }
.stat .big { font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 34px; color: #b8791c; }
.stat .big.green { color: var(--green-3); }
.stat .star { font-size: 26px; letter-spacing: .12em; color: var(--gold); line-height: 1.3; }
.stat .lbl { margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7d7667; }

/* Footer */
.footer { background: var(--ink); color: var(--body); }
.footer-stripe { height: 3px; background: linear-gradient(90deg, #e8a33c 0%, #e8a33c 33%, #f5f3ed 33%, #f5f3ed 66%, #2f7d50 66%, #2f7d50 100%); }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: clamp(44px, 6vw, 64px) clamp(16px, 4vw, 32px); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 44px 56px; }
.footer h4 { font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 19px; color: #fff; line-height: 1.3; }
.footer h4 em { color: var(--gold); font-style: italic; }
.footer .about-txt { margin: 16px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--muted-2); }
.footer .col-title { color: var(--green-2); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.footer .col { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #d6d1c6; }
.footer .col a { color: #d6d1c6; }
.footer .col a:hover { color: var(--gold); }
.footer .cols { gap: 10px; }
.footer .ph-row { display: flex; justify-content: space-between; gap: 16px; max-width: 220px; }
.footer .ph-row span:last-child { color: var(--muted-2); }
.footer .ph { color: var(--gold); font-weight: 700; }
.footer-bottom { margin-top: clamp(36px, 5vw, 52px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer-bottom span { font-size: 13.5px; color: var(--muted-2); }
.footer .btn-sm { background: var(--gold); color: #17140f; font-size: 14px; font-weight: 700; padding: 11px 22px; border-radius: 999px; }
.footer .btn-sm:hover { background: var(--gold-hover); }

/* Responsive header: stack the brand and nav links into centered rows on
   narrow screens instead of overflowing a single 62px row. */
@media (max-width: 680px) {
  .nav-inner { height: auto; flex-wrap: wrap; padding: 12px clamp(16px, 5vw, 32px); row-gap: 10px; }
  .nav-brand { order: 1; width: 100%; justify-content: center; font-size: 18px; }
  .nav-links { order: 2; width: 100%; justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
  .nav-links a:not(.nav-cta) { font-size: 15px; }
  .nav-cta { padding: 9px 16px; font-size: 14px; }
}