/* ---- Tokens (Dark "burnished" palette) ----
   Token names retained from the light variant so the stylesheet structure is shared.
   --cream     → primary surface (now deep warm charcoal)
   --cream-2   → alt surface (slightly lifted dark)
   --green     → primary accent (terracotta — also drives the About feature bg)
   --green-deep→ deepest surface (footer)
   --mustard   → warm gold accent
   --ink       → primary text (cream on dark) */
:root{
  --cream: #1B1612;
  --cream-2: #25201B;
  --green: #C66A3A;
  --green-deep: #0A0705;
  --mustard: #D9A047;
  --mustard-deep: #B07F2F;
  --ink: #F2EBDC;
  --ink-soft: rgba(242,235,220,0.65);
  --hairline: rgba(242,235,220,0.14);

  --display: "DM Serif Display", "Times New Roman", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --container: 1180px;
  --gutter: clamp(20px, 4.5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference){
  html { scroll-behavior: smooth; }
}

body{
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
::selection{ background: var(--mustard); color: var(--green); }

h1, h2, h3{
  font-family: var(--display);
  font-weight: 400;
  color: var(--green);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mustard-deep);
  font-weight: 700;
  margin-bottom: 14px;
}

/* ============ HEADER ============ */
.site-header{
  position: sticky; top: 0; z-index: 30;
  background: rgba(27,22,18,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.brand{
  font-family: var(--display);
  font-size: clamp(22px, 3.4vw, 26px);
  color: var(--green);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: baseline; gap: 6px;
  line-height: 1;
}
.brand .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mustard);
  display: inline-block;
  transform: translateY(-2px);
}
.call-cta{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--cream);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
  transition: background .15s ease, transform .15s ease;
}
.call-cta:hover{ background: var(--green-deep); }
.call-cta:active{ transform: translateY(1px); }
.call-cta .icon{ font-size: 14px; line-height: 1; }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
}
.hero-bg{ position: absolute; inset: 0; z-index: -2; }
.hero-bg img{ width: 100%; height: 100%; object-fit: cover; }
.hero::after{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(10,7,5,0.45) 0%,
    rgba(10,7,5,0.55) 50%,
    rgba(10,7,5,0.92) 100%);
}
.hero-body{
  padding-top: clamp(88px, 14vw, 160px);
  padding-bottom: clamp(48px, 8vw, 96px);
  width: 100%;
}
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mustard);
  font-weight: 700;
  margin-bottom: 20px;
}
.hero-eyebrow::before{
  content: ""; width: 28px; height: 1px; background: var(--mustard);
}
.hero h1{
  font-family: var(--display);
  font-size: clamp(56px, 13vw, 144px);
  color: var(--cream);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  max-width: 14ch;
}
.hero h1 em{
  font-style: italic;
  color: var(--mustard);
}
.hero-lede{
  max-width: 32ch;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.45;
  margin: 0 0 36px;
  color: rgba(246,239,224,0.96);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.hero-cta{
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--mustard); color: var(--green);
  padding: 18px 28px 18px 32px;
  border-radius: 999px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background .15s ease, transform .15s ease;
}
.hero-cta:hover{ background: var(--mustard-deep); }
.hero-cta:active{ transform: translateY(1px); }
.hero-cta .num{
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green);
}

/* ============ SECTIONS ============ */
section{
  padding-block: clamp(72px, 10vw, 128px);
}
.section-head{
  margin-bottom: clamp(40px, 6vw, 64px);
  max-width: 640px;
}
.section-head h2{
  font-size: clamp(38px, 5.4vw, 64px);
}

/* ============ MENU ============ */
.menu{ background: var(--cream); }
.menu-gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  margin-bottom: clamp(40px, 5vw, 56px);
}
.menu-gallery img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
@media (max-width: 700px){
  .menu-gallery{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.menu-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
}
.menu-cat h3{
  font-family: var(--display);
  font-size: 28px;
  font-style: italic;
  color: var(--green);
  border-bottom: 2px solid var(--mustard);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.menu-cat ul{ display: flex; flex-direction: column; gap: 6px; }
.menu-item{
  display: flex; align-items: baseline; gap: 12px;
  font-size: 17px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--hairline);
}
.menu-item .name{ flex: 1; color: var(--ink); }
.menu-item .price{
  font-family: var(--display);
  font-size: 20px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.menu-note{
  margin-top: 40px;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}
.menu-intro{
  margin-top: 18px;
  font-size: 15px;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 56ch;
}
.menu-item .qual{
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

/* ============ FIND ============ */
.find{
  background-color: var(--cream-2);
  /* Light warm-cream noise on the dark surface — same paper-grain feel, inverted tint. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.95, 0 0 0 0 0.85, 0 0 0 0 0.65, 0 0 0 0.06 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}
.find-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: stretch;
}
.find-info{ display: flex; flex-direction: column; gap: 32px; }
.find-block h4{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mustard-deep);
  margin: 0 0 10px;
}
.find-block .where{
  font-family: var(--display);
  font-size: 24px;
  color: var(--green);
  line-height: 1.3;
  margin: 0;
}
.find-block .sublabel{
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}
.find-block .tel{
  font-family: var(--display);
  font-size: 28px;
  color: var(--green);
  border-bottom: 1px solid var(--mustard);
  padding-bottom: 4px;
}
.find-block .tel:hover{ color: var(--mustard-deep); }
.find-block .email{
  font-family: var(--display);
  font-size: 22px;
  color: var(--green);
  border-bottom: 1px solid var(--mustard);
  padding-bottom: 4px;
  word-break: break-word;
}
.find-block .email:hover{ color: var(--mustard-deep); }

.hours-list{ display: flex; flex-direction: column; }
.hours-list .day{
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 16px;
}
.hours-list .day:last-child{ border-bottom: 0; }
.hours-list .day .time{
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.placeholder-note{
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

.find-map{
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--green-deep);
  min-height: 320px;
  aspect-ratio: 4/3;
}
.find-map iframe{
  width: 100%; height: 100%; border: 0;
  filter: grayscale(0.4) contrast(0.85) brightness(0.78);
}

/* ============ ABOUT ============ */
.about{
  background: var(--green);
  color: var(--cream);
}
.about h2{ color: var(--cream); }
.about .eyebrow{ color: var(--mustard); }
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.about-copy p{
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(246,239,224,0.92);
  max-width: 48ch;
}
.about-copy p:last-of-type{ margin-bottom: 0; }
.about-copy .placeholder-note{ color: rgba(246,239,224,0.55); }

.about-taglines{
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(229,166,50,0.25);
  padding-top: 22px;
}
.about-taglines li{
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: var(--mustard);
}

.about-img{
  aspect-ratio: 4/5;
  background: var(--green-deep);
  border-radius: 4px;
  overflow: hidden;
}
.about-img img{ width: 100%; height: 100%; object-fit: cover; }

/* ============ CONTACT ============ */
.contact{
  background: var(--cream);
  text-align: center;
}
.contact h2{
  font-size: clamp(38px, 5vw, 60px);
  margin-bottom: 24px;
}
.contact-tel{
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(40px, 7.2vw, 76px);
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--mustard);
  padding-bottom: 8px;
  margin-bottom: 28px;
}
.contact-tel:hover{ color: var(--mustard-deep); }
.contact-meta{
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: center;
  font-size: 15px;
  color: var(--ink-soft);
}
.contact-meta a{
  border-bottom: 1px solid var(--mustard);
  padding-bottom: 2px;
  color: var(--ink);
}
.contact-meta a:hover{ color: var(--mustard-deep); }

/* ============ FOOTER ============ */
footer{
  background: var(--green-deep);
  color: rgba(246,239,224,0.7);
  padding: 28px 0;
  font-size: 13px;
}
.foot-row{
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.foot-row a{ color: rgba(246,239,224,0.85); }
.foot-row a:hover{ color: var(--mustard); }
.foot-credit{
  font-size: 12px;
  color: rgba(246,239,224,0.5);
  letter-spacing: 0.02em;
}
.foot-credit a{ color: rgba(246,239,224,0.7); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .menu-grid{ grid-template-columns: 1fr; gap: 36px; }
  .find-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; gap: 36px; }
  .about-img{ aspect-ratio: 5/4; max-height: 440px; }
}
@media (max-width: 640px){
  body{ font-size: 16px; }
  .call-cta{ padding: 8px 14px; font-size: 13px; }
  .call-cta .label{ display: none; }
  .hero-cta{ padding: 14px 22px; font-size: 12px; gap: 12px; }
  .hero-cta .num{ font-size: 15px; }
  .hero-lede{ font-size: 17px; }
  .menu-cat h3{ font-size: 24px; }
  .menu-item{ font-size: 16px; }
  .menu-item .price{ font-size: 18px; }
  .find-block .where{ font-size: 20px; }
  .find-block .tel{ font-size: 24px; }
  .find-map{ aspect-ratio: 1/1; min-height: 280px; }
  .contact-tel{ word-break: keep-all; }
}

/* ============ DARK-VARIANT CONTRAST FIXES ============
   The light stylesheet uses --cream as both the surface AND the "light text" colour in
   a few places. In the dark variant --cream is the dark surface, so those rules render
   dark-on-dark. These overrides put light text back where the original intent expected
   it, and fix the orange-on-orange hero CTA. */
.hero h1{ color: var(--ink); }
.call-cta{ color: var(--ink); }
.call-cta:hover{ background: #8E4A28; }
.hero-cta{ background: var(--green); color: var(--ink); }
.hero-cta:hover{ background: #8E4A28; }
.hero-cta .num{ color: var(--ink); }
.about,
.about h2{ color: var(--ink); }