:root{
  /* ---- Monochrome wood system : one hue, one story ---- */
  --wood-950:#1b1108;   /* charred oak — deepest ground   */
  --wood-900:#26160c;
  --wood-800:#3a2314;   /* walnut                          */
  --wood-700:#4f2f19;
  --wood-600:#6b4226;   /* teak                            */
  --wood-500:#8a5a34;
  --wood-400:#a9764a;   /* honey oak                       */
  --wood-300:#c99a6b;
  --wood-200:#e0bd91;   /* pale pine                       */
  --wood-100:#f1e0c5;   /* planed sapwood                  */
  --wood-050:#f8ecd9;   /* whitewashed birch — page ground */

  --ink:       var(--wood-950);
  --paper:     var(--wood-050);
  --line:      rgba(27,17,8,0.16);

  --display: "Fraunces", serif;
  --body: "Cormorant Garamond", serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-feature-settings:"liga" 1,"dlig" 1;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }

::selection{ background:var(--wood-800); color:var(--wood-050); }

/* ---------- shared wood-grain texture ---------- */
.grain{ position:relative; isolation:isolate; }
.grain::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(178deg,
      rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(2deg,
      rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 2px,
      transparent 2px, transparent 26px);
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}

.eyebrow{
  font-family:var(--body);
  font-style:italic;
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--wood-500);
}
section .eyebrow{ margin:0 0 1.1rem; }

h1,h2,h3{ font-family:var(--display); margin:0; font-weight:600; }

a{ color:inherit; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 6vw; }

/* ================= LIGATURE MARK ================= *
 * Bespoke merge of the two O's in FOOD — a felled
 * cross-section of wood, rings shared between letters. */
.ring-o{
  display:inline-block;
  vertical-align:-0.09em;
}

/* ================= NAV ================= */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(248,236,217,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(27,17,8,0.1);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:0 6vw;
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{
  display:flex; align-items:center; gap:0.55rem;
  font-family:var(--display);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:0.24em;
  color:var(--wood-950);
  text-decoration:none;
  text-transform:uppercase;
}
.brand-logo {
  height: 48px;
  width: auto;
  display: block;
}
nav.links{ display:flex; gap:2.6rem; }
nav.links a{
  font-family:var(--body);
  font-size:0.98rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--wood-800);
  text-decoration:none;
  position:relative;
  padding-bottom:4px;
  transition: color 0.35s ease;
}
nav.links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--wood-800);
  transition:right 0.35s ease;
}
nav.links a:hover{
  color: var(--wood-950);
}
nav.links a:hover::after{ right:0; }
.nav-cta{
  border:1px solid var(--wood-800);
  color:var(--wood-800);
  padding:0.55rem 1.3rem;
  font-size:0.85rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-decoration:none;
  font-family:var(--body);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.nav-cta:hover{
  background: var(--wood-800);
  color: var(--wood-050);
  border-color: var(--wood-800);
}
.menu-toggle{ display:none; }

/* ================= HERO ================= */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:11rem 6vw 6rem;
  color:var(--wood-050);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(169,118,74,0.28), transparent 60%),
    linear-gradient(180deg, var(--wood-950) 0%, var(--wood-900) 55%, var(--wood-800) 100%);
  position:relative; overflow:hidden;
}
.hero-rings{
  position:absolute; z-index:0; opacity:0.16;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(140vw,1400px); height:min(140vw,1400px);
}
.hero-rings g {
  stroke: var(--wood-100) !important;
}
.hero > *{ position:relative; z-index:2; }
.hero .eyebrow{ color:var(--wood-300); }
.hero-title {
  font-family: var(--display);
  font-size: clamp(3.4rem, 9vw, 8.2rem);
  line-height: 0.94;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wood-050);
  margin-top: 0.6rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  font-weight: 600;
}
.hero-title small {
  display: block;
  font-size: 0.42em;
  letter-spacing: 0.5em;
  font-weight: 500;
  font-style: italic;
  color: var(--wood-300);
  margin-top: 0.9rem;
}
.hero-sub{
  max-width:36ch;
  margin:2.3rem auto 0;
  font-size:1.5rem;
  line-height:1.5;
  font-style:italic;
  color:var(--wood-100);
}
.hero-locale{
  margin-top:2.6rem;
  display:flex; gap:1.4rem; align-items:center;
  font-family:var(--body);
  letter-spacing:0.3em;
  text-transform:uppercase;
  font-size:0.85rem;
  color:var(--wood-300);
}
.hero-locale .bar{ width:44px; height:1px; background:var(--wood-500); }

.scroll-cue{
  position:absolute; bottom:2.6rem; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  color:var(--wood-300);
}
.scroll-cue span{ font-size:0.72rem; letter-spacing:0.3em; text-transform:uppercase; }
.scroll-cue .stem{
  width:1px; height:34px; background:linear-gradient(var(--wood-500), transparent);
  animation:drip 2.4s ease-in-out infinite;
}
@keyframes drip{ 0%,100%{ transform:scaleY(1); opacity:0.8;} 50%{ transform:scaleY(0.6); opacity:0.3;} }

/* ================= SECTION SHELL ================= */
section{ padding:8.5rem 0; }
.section-head{ max-width:640px; margin-bottom:4rem; }
.section-head h2{
  font-size:clamp(2.3rem, 4.2vw, 3.4rem);
  letter-spacing:0.02em;
  line-height:1.08;
}

/* ================= ABOUT ================= */
.about{ background:var(--wood-050); }
.about-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:5vw; align-items:center;
}
.about-copy p{
  font-size:1.28rem; line-height:1.75; color:var(--wood-800);
  max-width:52ch;
}
.about-copy p + p{ margin-top:1.2rem; }
.stat-row{
  display:flex; gap:3rem; margin-top:2.6rem;
  padding-top:2.2rem; border-top:1px solid var(--line);
}
.stat b{
  display:block; font-family:var(--display); font-size:2.1rem; color:var(--wood-700);
}
.stat span{
  font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--wood-500);
}
.about-mark{ display:flex; justify-content:center; }
.about-stamp {
  width: min(70vw, 320px);
  height: auto;
  display: block;
}

/* ================= MENU ================= */
.menu{
  background:var(--wood-900);
  color:var(--wood-050);
}
.menu .section-head .eyebrow{ color:var(--wood-400); }
.menu .section-head h2{ color:var(--wood-050); }
.menu-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(241,224,197,0.14);
  border:1px solid rgba(241,224,197,0.14);
}
.dish{
  background:var(--wood-900);
  padding:2.6rem 2.4rem;
  position:relative;
  transition:background 0.4s ease;
}
.dish:hover{ background:var(--wood-800); }
.dish-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.dish-name{
  font-family:var(--display); font-size:1.5rem; letter-spacing:0.02em;
  color:var(--wood-050);
}
.dish-price{
  font-family:var(--body); font-style:italic; font-size:1.15rem; color:var(--wood-400);
  white-space:nowrap;
}
.dish-desc{
  margin-top:0.6rem; font-size:1.08rem; line-height:1.6; color:var(--wood-300);
  max-width:42ch;
}
.dish-tag{
  display:inline-block; margin-top:1rem;
  font-size:0.68rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--wood-500); border:1px solid var(--wood-700); padding:0.3rem 0.65rem;
}
.menu-note{
  margin-top:3rem; text-align:center; font-style:italic; color:var(--wood-400); font-size:1.05rem;
}


/* ================= VISIT / HOURS ================= */
.visit{
  background:var(--wood-800);
  color:var(--wood-050);
  position:relative;
}
.visit-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:5vw;
}
.visit .eyebrow{ color:var(--wood-400); }
.visit h2{ color:var(--wood-050); }
.hours-table{ width:100%; border-collapse:collapse; margin-top:2rem; }
.hours-table td{
  padding:0.85rem 0; border-bottom:1px solid rgba(241,224,197,0.16);
  font-size:1.15rem;
}
.hours-table td:first-child{
  letter-spacing:0.14em; text-transform:uppercase; font-size:0.85rem; color:var(--wood-300);
}
.hours-table td:last-child{ text-align:right; font-family:var(--display); font-style:italic; }
.addr{ margin-top:2.6rem; font-size:1.3rem; line-height:1.7; font-style:italic; color:var(--wood-100); }
.addr b{ display:block; font-family:var(--display); font-style:normal; font-size:1.05rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--wood-050); margin-bottom:0.5rem; }
.pin{ margin-top:2.2rem; display:flex; align-items:center; gap:0.8rem; color:var(--wood-300); }
.pin svg{ width:20px; height:20px; flex:none; }
.pin span{ font-size:0.95rem; letter-spacing:0.05em; }

.visit-cta{
  align-self:start;
  background:var(--wood-050);
  color:var(--wood-900);
  padding:3rem 2.6rem;
}
.visit-cta h3{
  font-size:1.7rem; letter-spacing:0.01em;
}
.visit-cta p{
  margin-top:1rem; font-size:1.08rem; line-height:1.6; color:var(--wood-700);
}
.btn{
  margin-top:1.8rem;
  display:inline-block;
  background:var(--wood-900); color:var(--wood-050);
  padding:1rem 2.2rem;
  font-family:var(--body); font-size:0.95rem; letter-spacing:0.2em; text-transform:uppercase;
  text-decoration:none;
  border: 1px solid var(--wood-900);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover{
  background: transparent;
  color: var(--wood-900);
}
.btn.ghost{
  background:transparent; color:var(--wood-900); border:1px solid var(--wood-900);
  margin-left:0.8rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn.ghost:hover{
  background: var(--wood-900);
  color: var(--wood-050);
}

/* ================= FOOTER ================= */
footer{
  background:var(--wood-100); color:var(--wood-700);
  padding:4.5rem 0 2.4rem;
  border-top:1px solid rgba(27, 17, 8, 0.08);
}
.foot-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
  padding-bottom:3rem; border-bottom:1px solid rgba(27,17,8,0.1);
}
.foot-brand{
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--display); font-size:1.3rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--wood-900);
}
.foot-logo {
  height: 60px;
  width: auto;
  display: block;
}
.foot-links{ display:flex; gap:3rem; }
.foot-col h4{
  font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--wood-600);
  margin-bottom:1rem; font-weight:600;
}
.foot-col a{ display:block; text-decoration:none; color:var(--wood-700); font-size:1rem; margin-bottom:0.55rem; transition: color 0.3s ease; }
.foot-col a:hover{ color:var(--wood-950); }
.foot-bottom{
  margin-top:2.2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:0.85rem; letter-spacing:0.05em; color:var(--wood-500);
}

/* ================= RESPONSIVE ================= */
@media (max-width:920px){
  nav.links{ display:none; }
  .about-grid{ grid-template-columns:1fr; }
  .about-mark{ order:-1; margin-bottom:1rem; }
  .menu-grid{ grid-template-columns:1fr; }
  .visit-grid{ grid-template-columns:1fr; gap:3rem; }
  .visit-cta{ margin-top:1rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scroll-cue .stem{ animation:none; }
}