@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap");

:root {
  --ink: #171612;
  --cream: #f2eadb;
  --paper: #fbf6ec;
  --orange: #d55c2c;
  --moss: #334437;
  --line: rgba(23, 22, 18, 0.18);
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: #fffaf0;
  background: #171612;
}
.hero-photo,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-photo { object-fit: cover; object-position: center 68%; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(8,8,7,.86) 0%, rgba(8,8,7,.48) 46%, rgba(8,8,7,.12) 76%),
    linear-gradient(0deg, rgba(8,8,7,.82) 0%, transparent 45%);
}
.nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.7rem clamp(1.25rem, 4vw, 4.5rem);
}
.brand {
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: .12em;
}
.nav-links { display: flex; gap: 2rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .15em; }
.nav-cta {
  justify-self: end;
  padding: .82rem 1.35rem;
  background: var(--paper);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 2.5rem));
  padding: clamp(7rem, 18vh, 13rem) 0 9rem clamp(1.25rem, 6vw, 7rem);
}
.eyebrow {
  margin: 0 0 1.3rem;
  color: #e9b47b;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.eyebrow.dark { color: var(--orange); }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .92; }
h1 { font-size: clamp(4.1rem, 9.5vw, 9rem); letter-spacing: -.04em; }
h1 em, h2 em { color: #e9b47b; font-weight: 400; }
.hero-lede {
  max-width: 600px;
  margin: 2rem 0 0;
  color: rgba(255,250,240,.84);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.7;
}
.hero-actions, .visit-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1.55rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.button-light { background: var(--paper); color: var(--ink); }
.button-ghost { border: 1px solid rgba(255,255,255,.7); color: #fff; }
.hero-facts {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.25);
  background: rgba(10,10,8,.55);
  backdrop-filter: blur(10px);
}
.hero-facts div { padding: 1.2rem clamp(1.25rem, 4vw, 4.5rem); border-right: 1px solid rgba(255,255,255,.18); }
.hero-facts span { display: block; margin-bottom: .35rem; color: #d8a86d; font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; }
.hero-facts strong { font-size: .82rem; font-weight: 500; }

.section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 6vw, 7rem); }
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.story-photo-wrap { position: relative; }
.story-photo-wrap > img { height: min(760px, 72vw); object-fit: cover; }
.photo-note {
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: min(280px, 72%);
  padding: 1.4rem;
  background: var(--orange);
  color: #fff;
}
.photo-note span { display: block; margin-bottom: .5rem; font-size: .63rem; text-transform: uppercase; letter-spacing: .16em; }
.photo-note strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.story-copy h2, .food-intro h2 { font-size: clamp(3rem, 6.3vw, 6.7rem); letter-spacing: -.03em; }
.story-copy .lead { margin: 2rem 0 1rem; font-size: 1.22rem; line-height: 1.65; }
.story-copy > p:not(.eyebrow):not(.lead), .food-intro > p:not(.eyebrow) { color: #655f55; line-height: 1.75; }
.text-link { display: inline-block; margin-top: 1.5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ink); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }

.menu-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(3rem, 8vw, 8rem);
  background: var(--moss);
  color: var(--cream);
}
.menu-heading h2 { font-size: clamp(3.4rem, 7vw, 7.4rem); }
.menu-heading > p:last-child { max-width: 520px; color: rgba(242,234,219,.72); line-height: 1.7; }
.menu-columns { align-self: end; }
.menu-card { padding: 2rem 0; border-top: 1px solid rgba(242,234,219,.3); }
.menu-card:last-child { border-bottom: 1px solid rgba(242,234,219,.3); }
.menu-card-top { display: flex; justify-content: space-between; color: #e9b47b; font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; }
.menu-card ul { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.menu-card li { display: flex; justify-content: space-between; gap: 1rem; padding: .78rem 0; color: rgba(242,234,219,.9); }
.menu-card li span { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.75rem); }
.menu-card li strong { color: #e9b47b; font-weight: 500; }

.food-showcase {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(3rem, 7vw, 7rem);
}
.food-intro { align-self: center; }
.food-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1rem;
}
.food-card { margin: 0; }
.food-card-tall { grid-row: span 2; }
.food-placeholder {
  display: grid;
  place-items: center;
  min-height: 230px;
  background: #e9dfcf;
  border: 1px solid var(--line);
}
.food-card-tall .food-placeholder { height: 100%; min-height: 520px; }
.food-placeholder span { font-size: 4rem; }
.food-placeholder small { margin-top: -4rem; color: #8e8273; font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; }
.food-card p { margin: .8rem 0 0; font-family: var(--serif); font-size: 1.35rem; }

.visit {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(3rem, 8vw, 8rem);
  background: var(--orange);
  color: #fff8eb;
}
.visit h2 { font-size: clamp(3.6rem, 7.3vw, 7.6rem); }
.visit-copy > p:not(.eyebrow) { max-width: 620px; color: rgba(255,248,235,.82); line-height: 1.75; }
.hours { padding: clamp(2rem, 4vw, 4rem); background: var(--paper); color: var(--ink); }
.hours-title { margin: 0 0 1.6rem; font-family: var(--serif); font-size: 2rem; }
.hours dl { margin: 0; }
.hours dl div { display: flex; justify-content: space-between; padding: .82rem 0; border-bottom: 1px solid var(--line); }
.hours dt, .hours dd { margin: 0; font-size: .86rem; }
.hours dd { font-weight: 600; }
.hours small { display: block; margin-top: 1.2rem; color: #777066; line-height: 1.5; }

footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem clamp(1.25rem, 6vw, 7rem);
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: .72rem;
}

@media (max-width: 820px) {
  .nav { grid-template-columns: 1fr auto; padding: 1.2rem; }
  .nav-links { display: none; }
  .nav-cta { padding: .7rem 1rem; }
  .hero-photo { object-position: center 72%; }
  .hero-shade { background: linear-gradient(0deg, rgba(8,8,7,.9), rgba(8,8,7,.2) 72%); }
  .hero-copy { width: 100%; padding: 9rem 1.25rem 10.5rem; }
  h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
  .hero-lede { font-size: .98rem; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .hero-facts div { padding: .9rem 1.25rem; }
  .hero-facts div:nth-child(3) { display: none; }
  .story, .menu-section, .food-showcase, .visit { grid-template-columns: 1fr; }
  .story-photo-wrap > img { height: 72svh; }
  .photo-note { right: 0; bottom: -1.5rem; }
  .story-copy { padding-top: 1.5rem; }
  .food-grid { grid-template-columns: 1fr 1fr; }
  .food-card-tall { grid-column: span 2; grid-row: auto; }
  .food-card-tall .food-placeholder { min-height: 330px; }
  footer { grid-template-columns: 1fr; gap: .6rem; }
}

@media (max-width: 480px) {
  .section { padding: 4.5rem 1.15rem; }
  .hero-actions, .visit-actions { display: grid; }
  .button { width: 100%; }
  .menu-card li span { font-size: 1.15rem; }
  .food-grid { gap: .7rem; }
  .food-placeholder { min-height: 180px; }
}