.restaurant-story {
  --story-ink: #24201c;
  --story-muted: #655b52;
  --story-red: #a92d23;
  color: var(--story-ink);
  background: #fbf8f2;
}
.restaurant-story .story-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  padding: 115px 24px 90px;
  background-position: center;
  background-size: cover;
  isolation: isolate;
}
.restaurant-story .story-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 17, 14, .85), rgba(22, 17, 14, .45));
  z-index: -1;
}
.restaurant-story .story-hero-inner,
.restaurant-story .story-container {
  width: min(1120px, 100%);
  margin-inline: auto;
}
.restaurant-story .story-eyebrow {
  display: block;
  margin-bottom: 20px;
  color: #f4c789;
  font: 600 13px/1.4 Jost, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.restaurant-story .story-hero h1 {
  max-width: 890px;
  margin: 0;
  color: #fff;
  font: 400 clamp(38px, 5vw, 68px)/1.12 Courgette, Georgia, serif;
  text-wrap: balance;
}
.restaurant-story .story-breadcrumb {
  background: #f1e9dc;
  padding: 15px 24px;
  font-size: 14px;
}
.restaurant-story .story-breadcrumb a { color: var(--story-red); }
.restaurant-story .story-intro,
.restaurant-story .story-section { padding: 72px 24px; }
.restaurant-story .story-intro { background: #fff; }
.restaurant-story .story-intro .story-container { max-width: 900px; }
.restaurant-story p,
.restaurant-story .story-copy { color: var(--story-muted); font: 400 18px/1.8 Jost, sans-serif; }
.restaurant-story p { margin: 0 0 20px; }
.restaurant-story .story-intro p:first-child { font-size: clamp(20px, 2.3vw, 25px); color: var(--story-ink); }
.restaurant-story .story-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.restaurant-story .story-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 22px;
  border-radius: 4px;
  background: var(--story-red);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.restaurant-story .story-actions a:nth-child(even) { background: #29211b; }
.restaurant-story .story-actions a:hover { background: #7c211b; transform: translateY(-2px); }
.restaurant-story .story-section:nth-of-type(even) { background: #f4ede2; }
.restaurant-story .story-section h2 {
  max-width: 900px;
  margin: 0 0 26px;
  color: var(--story-ink);
  font: 400 clamp(30px, 3.4vw, 44px)/1.23 Courgette, Georgia, serif;
}
.restaurant-story .story-section h2::after { content: ""; display: block; width: 66px; height: 3px; margin-top: 20px; background: var(--story-red); }
.restaurant-story .story-section h3 { margin: 34px 0 12px; color: var(--story-ink); font: 600 23px/1.3 Jost, sans-serif; }
.restaurant-story .story-section p { max-width: 920px; }
.restaurant-story .story-dish-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; max-width: 900px; margin: 20px 0 28px; padding: 0; list-style: none; }
.restaurant-story .story-dish-list li { border-left: 3px solid var(--story-red); background: #fff; padding: 14px 17px; color: var(--story-ink); font: 500 17px/1.4 Jost, sans-serif; }
.restaurant-story .story-section a:not(.story-actions a) { color: var(--story-red); text-decoration: underline; text-underline-offset: 3px; }
.restaurant-story .story-faq h3 { padding-top: 21px; border-top: 1px solid #d9cfc0; }
.restaurant-story a:focus-visible { outline: 3px solid #e8a54c; outline-offset: 3px; }
@media (max-width: 767px) {
  .restaurant-story .story-hero { min-height: 340px; padding: 75px 20px 65px; }
  .restaurant-story .story-intro, .restaurant-story .story-section { padding: 48px 20px; }
  .restaurant-story p { font-size: 17px; }
  .restaurant-story .story-dish-list { grid-template-columns: 1fr; }
}