:root {
  --cream: #FAF6EF;
  --cream2: #F3ECDF;
  --ink: #1C1A17;
  --muted: #6E675C;
  --ember: #B3402A;
  --gold: #C9A227;
  --line: #E5DCCB;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
h1, h2, h3, .logo {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.15;
  margin: 0 0 .5em;
}
a { color: var(--ember); }
.site-head {
  display: flex; align-items: center; gap: 2em;
  padding: 1em 5vw; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(250, 246, 239, .95);
  backdrop-filter: blur(6px); z-index: 10;
}
.logo { font-size: 1.6em; letter-spacing: .08em; color: var(--ink); text-decoration: none; }
.logo span { color: var(--ember); }
.site-head nav { display: flex; gap: 1.4em; margin-left: auto; flex-wrap: wrap; }
.site-head nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.site-head nav a:hover { color: var(--ember); }
.btn {
  display: inline-block; background: var(--ember); color: #fff;
  padding: .8em 1.6em; border-radius: 999px; text-decoration: none;
  font-weight: 700; border: 0; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-small { padding: .55em 1.1em; font-size: .9em; white-space: nowrap; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
section { padding: 4em 5vw; max-width: 1100px; margin: 0 auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .8em; color: var(--ember); font-weight: 700; }
/* Hero with 3D depth */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3em; align-items: center; perspective: 1200px; }
.hero h1 { font-size: clamp(2.4em, 5.5vw, 4.2em); }
.hero p.lede { font-size: 1.2em; color: var(--muted); }
.hero-media {
  position: relative; border-radius: 24px; min-height: 340px;
  background: linear-gradient(140deg, #2B2320, #6B3A26 55%, #C9A227);
  transform-style: preserve-3d;
  box-shadow: 0 30px 60px rgba(28, 26, 23, .28);
  overflow: hidden; transition: transform .25s ease;
}
.hero-media .label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: Georgia, serif; font-size: 1.6em; text-align: center; padding: 1em;
  transform: translateZ(50px);
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rating-badge {
  display: inline-block; background: var(--ink); color: #fff;
  padding: .5em 1em; border-radius: 999px; font-weight: 700; margin-top: 1em;
}
/* Cards with 3D tilt */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5em; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(28, 26, 23, .08); transition: transform .25s ease;
}
.dish-img {
  height: 170px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--cream2), #E4D5B8);
  display: flex; align-items: center; justify-content: center;
}
.dish-img span { font-family: Georgia, serif; font-size: 1.2em; color: var(--muted); padding: 1em; text-align: center; }
.dish-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.2em 1.3em 1.4em; }
.card-body h3 { font-size: 1.15em; }
.price { font-weight: 800; color: var(--ember); font-size: 1.1em; }
.muted { color: var(--muted); }
/* Reviews */
.quote {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold);
  border-radius: 14px; padding: 1.4em 1.6em; margin: 0 0 1em;
}
.quote p { font-family: Georgia, serif; font-size: 1.15em; margin: 0 0 .4em; }
.quote cite { color: var(--muted); font-style: normal; font-size: .9em; }
/* Hours + visit */
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: .45em 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; font-weight: 600; }
/* Menu filter */
.filters { display: flex; gap: .6em; flex-wrap: wrap; margin: 1em 0 2em; }
.filters button {
  border: 1.5px solid var(--ink); background: transparent; border-radius: 999px;
  padding: .5em 1.1em; font-weight: 700; cursor: pointer;
}
.filters button.active { background: var(--ink); color: #fff; }
.menu-item { display: none; }
.menu-item.show { display: block; }
/* Reservation form */
form.res { max-width: 560px; }
.field { margin-bottom: 1.1em; }
.field label { display: block; font-weight: 700; margin-bottom: .3em; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8em; border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 1em; background: #fff;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.error { background: #FDECEA; border: 1px solid #E8AFAF; padding: 1em; border-radius: 12px; }
.confirm {
  background: #fff; border: 2px solid var(--gold); border-radius: 20px;
  padding: 2em; text-align: center;
}
.confirm .ref { font-size: 2em; font-weight: 900; letter-spacing: .06em; color: var(--ember); }
/* Staff table */
table.bookings { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
table.bookings th, table.bookings td { padding: .7em .9em; border-bottom: 1px solid var(--line); text-align: left; }
table.bookings form { display: inline; }
table.bookings button { border: 1px solid var(--line); background: var(--cream); border-radius: 8px; padding: .3em .8em; cursor: pointer; font-weight: 600; }
.site-foot { border-top: 1px solid var(--line); padding: 3em 5vw; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2em; max-width: 1100px; margin: 0 auto 2em; }
.foot-grid strong { color: var(--ink); }
.concept-note { max-width: 1100px; margin: 0 auto; font-size: .85em; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .site-head nav { display: none; }
  .row2 { grid-template-columns: 1fr; }
}