:root {
  --bg: #FBF6EC;
  --surface: #FFFFFF;
  --ink: #23301F;
  --green: #23402A;
  --terracotta: #C1633B;
  --gold: #C89A4A;
  --grey: #7A7565;
  --border: #E7DFCB;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.1; margin: 0 0 0.4em; color: var(--green); }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.muted { color: var(--grey); }

.demo-banner {
  background: var(--green); color: #EFE9D8; text-align: center; padding: 10px 16px; font-size: 0.82rem;
}
.demo-banner a { text-decoration: underline; font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px;
  font-weight: 600; font-size: 0.92rem; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease;
}
.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: #A6512D; transform: translateY(-2px); }
.btn-outline { border-color: var(--green); color: var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }

/* Header */
.bistrot-header {
  position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.bistrot-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.bistrot-logo { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--green); }
.bistrot-nav { display: flex; gap: 28px; }
.bistrot-nav a { font-size: 0.9rem; color: var(--ink); }
.bistrot-nav a:hover { color: var(--terracotta); }

/* Hero */
.bistrot-hero {
  position: relative; padding: 110px 0 90px; overflow: hidden;
  background: radial-gradient(circle at 85% 15%, rgba(193,99,59,0.16), transparent 45%),
              radial-gradient(circle at 10% 90%, rgba(35,64,42,0.14), transparent 40%);
}
.bistrot-hero .eyebrow {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem;
  color: var(--terracotta); font-weight: 700; margin-bottom: 14px; display: block;
}
.bistrot-hero p.lead { font-size: 1.15rem; color: var(--grey); max-width: 46ch; margin-bottom: 30px; }
.bistrot-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-plate {
  margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.plate {
  aspect-ratio: 4/3; border-radius: 18px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 16px; color: #fff; font-family: var(--serif); font-size: 1.05rem;
}
.plate::before { content: ""; position: absolute; inset: 0; opacity: 0.9; }
.plate.p1::before { background: linear-gradient(160deg, #C1633B, #8C3F22); }
.plate.p2::before { background: linear-gradient(160deg, #4F6B44, #23402A); }
.plate.p3::before { background: linear-gradient(160deg, #C89A4A, #8A6A2C); }
.plate span { position: relative; }

/* Section rhythm */
.section { padding: 90px 0; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: none; }
.section.alt { background: var(--surface); }
.section-head { max-width: 640px; margin-bottom: 48px; }

/* Menu */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.menu-cat h3 { font-size: 1.3rem; border-bottom: 2px solid var(--gold); display: inline-block; padding-bottom: 6px; margin-bottom: 20px; }
.menu-item { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; align-items: baseline; }
.menu-item .name { font-weight: 600; }
.menu-item .desc { display: block; color: var(--grey); font-size: 0.85rem; margin-top: 2px; }
.menu-item .price { font-family: var(--serif); color: var(--terracotta); font-weight: 700; white-space: nowrap; }
.menu-item .dots { flex: 1; border-bottom: 1px dotted var(--border); margin: 0 8px 6px; }

/* About / chef */
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.chef-photo {
  aspect-ratio: 4/5; border-radius: 20px; background: linear-gradient(160deg, #4F6B44, #23402A);
  position: relative; overflow: hidden;
}
.chef-photo::after {
  content: "👨‍🍳"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem;
}

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-grid .g { aspect-ratio: 1; border-radius: 14px; }
.gallery-grid .g:nth-child(4n+1) { background: linear-gradient(160deg, #C1633B, #8C3F22); }
.gallery-grid .g:nth-child(4n+2) { background: linear-gradient(160deg, #4F6B44, #23402A); }
.gallery-grid .g:nth-child(4n+3) { background: linear-gradient(160deg, #C89A4A, #8A6A2C); }
.gallery-grid .g:nth-child(4n+4) { background: linear-gradient(160deg, #7A7565, #4B473C); }

/* Reservation / info */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.map-placeholder {
  aspect-ratio: 16/10; border-radius: 16px; background: repeating-linear-gradient(45deg, #E7DFCB, #E7DFCB 10px, #F3EDDC 10px, #F3EDDC 20px);
  display: flex; align-items: center; justify-content: center; color: var(--grey); font-size: 0.85rem; border: 1px solid var(--border);
}
.reserve-form { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px; }
.reserve-form label { font-size: 0.82rem; font-weight: 600; }
.reserve-form input, .reserve-form select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); font-family: inherit; background: var(--bg);
}
.reserve-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px; }
.testimonial .stars { color: var(--gold); margin-bottom: 10px; letter-spacing: 2px; }
.testimonial .author { margin-top: 14px; font-weight: 700; font-size: 0.85rem; }

/* Footer */
.bistrot-footer { background: var(--green); color: #DCE3D4; padding: 56px 0 24px; }
.bistrot-footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.bistrot-footer h4 { font-family: var(--serif); color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
.bistrot-footer .footer-heading { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: #9FB093; margin-bottom: 12px; }
.bistrot-footer a { color: #DCE3D4; display: block; margin-bottom: 8px; font-size: 0.9rem; }
.bistrot-footer a:hover { color: #fff; }
.bistrot-footer .bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 0.78rem; color: #9FB093; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.bistrot-footer .bottom a { display: inline; text-decoration: underline; }

@media (max-width: 900px) {
  .menu-grid, .about-grid, .info-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .hero-plate { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .bistrot-nav { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}