/* Public storefront: warm, image-led restaurant identity. Loaded after v3. */
:root {
  --fx-paper: #f7f3ec;
  --fx-card: #fffdf8;
  --fx-ink: #202720;
  --fx-body: #495249;
  --fx-muted: #626b61;
  --fx-rule: #dedbd1;
  --fx-sans: 'Karla', Arial, sans-serif;
  --fx-serif: 'Outfit', Arial, sans-serif;
  --fx-gap: clamp(58px, 7vw, 104px);
  --fe-canvas: #f7f3ec;
  --fe-sunken: #eee8dc;
  --fe-line: #dedbd1;
  --fe-heading: #202720;
  --fe-body: #495249;
  --fe-muted: #626b61;
  --fe-r: 10px;
  --fe-r-sm: 8px;
  --fp-accent: var(--fe-ink, #a1261e);
  --fp-dark: #202720;
  --fp-cream: #f7f3ec;
}
html { scroll-behavior: smooth; }
body { background: var(--fx-paper); color: var(--fx-body); }
h1, h2, h3, h4, h5, .fx-title, .fx-display, .fx-auth-title {
  color: var(--fx-ink);
  font-family: var(--fx-serif);
  font-weight: 600;
  letter-spacing: -.035em;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.main-header { background: var(--fx-paper); border-bottom: 1px solid var(--fx-rule); }
.fx-nav { min-height: 82px; }
.fx-nav-wordmark { color: var(--fx-ink); font-family: var(--fx-serif); font-size: 25px; }
.navbar .fx-nav-links .menu-item > a.fx-nav-link {
  color: var(--fx-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.main-header.header-light .navbar .fx-nav-link.active { color: var(--fp-accent); }
.fx-nav-trigger, .header-controls-inner .cart-trigger.fx-nav-cart { border-radius: 8px; }
.fx-nav .submenu.fx-nav-menu { border-radius: 8px; }
.fe3-promo { background: var(--fp-dark); color: #fffdf8; }

/* Split hero keeps the restaurant image visible without putting copy over it. */
.banner.banner-1.banner-4 { background: var(--fx-paper); }
.banner .banner-inner {
  display: flex;
  align-items: center;
  min-height: clamp(600px, 70vh, 760px);
  padding: 64px 0;
  background-color: var(--fx-paper);
  background-position: right center !important;
  background-size: 51% 100% !important;
  background-repeat: no-repeat !important;
}
.banner .banner-inner::before,
.banner .banner-inner::after { display: none !important; }
.banner .banner-inner > .container { width: 100%; }
.banner .banner-inner > .container > div {
  max-width: min(46%, 650px);
  gap: 0 !important;
}
.banner .banner-inner .title {
  max-width: 11ch;
  margin: 18px 0 20px;
  color: var(--fx-ink);
  font-family: var(--fx-serif);
  font-size: clamp(48px, 5.8vw, 88px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.banner .banner-inner .subtitle {
  max-width: 47ch;
  margin: 0 0 30px;
  color: var(--fx-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}
.fp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fp-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.fp-hero-kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.banner .fe3-open { align-self: flex-start; margin-top: 14px; border-radius: 6px; }
.banner .btn-custom.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  width: fit-content;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--fp-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 180ms ease, transform 180ms ease;
}
.banner .btn-custom.primary:hover { background: var(--fe-ink-hover); transform: translateY(-2px); }
.fp-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  width: fit-content;
  margin-top: 16px;
  color: var(--fx-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.fp-hero-secondary:hover { color: var(--fp-accent); }

.fp-highlights { padding: 42px 0; background: var(--fp-dark); color: #f7f3ec; }
.fp-highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.fp-highlight { display: flex; gap: 18px; padding: 10px 22px; border-left: 1px solid rgba(255,255,255,.25); }
.fp-highlight-number { color: #d5af79; font-family: var(--fx-serif); font-size: 24px; line-height: 1; }
.fp-highlight h2 { margin: 0 0 8px; color: #fffdf8; font-family: var(--fx-sans); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.fp-highlight p { max-width: 30ch; margin: 0; color: #e0ded6; font-size: 14px; line-height: 1.6; }
.fx-story, .fx-menu, .fx-gallery, .fx-about { background: var(--fx-paper); }
.fx-story-grid, .fx-about-grid { gap: clamp(36px, 6vw, 96px); }
.fx-story-figure img, .fx-about-figure img { aspect-ratio: 5 / 4; border-radius: 4px; outline: 1px solid rgba(0,0,0,.08); outline-offset: -1px; }
.fx-story-figure::before, .fx-about-figure::before { inset: 20px -20px -20px 20px; border-color: #bea77e; border-radius: 4px; }
.fx-eyebrow { color: var(--fp-accent); font-size: 12px; font-weight: 700; }
.fx-display { max-width: 14ch; font-size: clamp(39px, 5vw, 68px); line-height: 1.1; }
.fx-title { font-size: clamp(32px, 4vw, 50px); line-height: 1.13; }
.fx-lede { color: var(--fx-body); font-size: 17px; }
.fx-btn, .fx-btn-solid, .fx-btn-quiet { border-radius: 8px; letter-spacing: .02em; text-transform: none; }
.fx-btn-solid { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
.fx-btn-solid:hover { background: var(--fe-ink-hover); border-color: var(--fe-ink-hover); }
.fx-btn-quiet { border-color: #aaa89c; color: var(--fx-ink); }
.fx-menu { padding: var(--fx-gap) 0; background: #fffdf8; }
.fx-dishes { border-top: 1px solid var(--fx-rule); column-gap: 50px; }
.fx-dish { padding: 28px 0; }
.fx-dish-name { font-family: var(--fx-sans); font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; letter-spacing: -.02em; }
.fx-dish-price { font-family: var(--fx-sans); font-size: 18px; font-weight: 700; white-space: nowrap; }
.fx-dish-order { min-height: 44px; margin-top: 8px; color: var(--fp-accent); font-size: 12px; }
.fx-gallery { background: var(--fx-paper); }
.fx-shot img { aspect-ratio: 4 / 5; border-radius: 4px; }
.fx-nav-btn { border-radius: 8px; }
.fp-location-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; padding-block: var(--fx-gap); }
.fp-location-intro p { max-width: 50ch; margin-top: 18px; font-size: 17px; line-height: 1.65; }
.fp-location-details { display: grid; align-content: center; gap: 0; }
.fp-location-details > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--fx-rule); }
.fp-location-details strong { color: var(--fx-ink); font-size: 13px; }
.fp-location-details span, .fp-location-details a { color: var(--fx-body); overflow-wrap: anywhere; }
.fx-map iframe { height: 380px; filter: grayscale(.28); }
.fp-callout { padding: clamp(70px, 9vw, 130px) 0; background: var(--fp-dark); color: #fffdf8; }
.fp-callout-inner { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.fp-callout-kicker { display: block; margin-bottom: 18px; color: #d5af79; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.fp-callout h2 { max-width: 17ch; margin: 0; color: #fffdf8; font-size: clamp(36px, 4.3vw, 60px); line-height: 1.15; }
.fp-callout p { max-width: 55ch; margin: 18px 0 0; color: #deded4; font-size: 16px; }
.fp-callout-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; flex: 0 0 auto; min-height: 54px; padding: 0 24px; border-radius: 8px; background: #f7f3ec; color: var(--fp-dark); font-weight: 700; }
.fp-callout-button:hover { background: #e8dbc9; color: var(--fp-dark); }
.ct-footer.footer-dark { background: #171f1b; }
.ct-footer .footer-middle { padding-block: 72px; }
.ct-footer .widget-title { color: #fffdf8; font-family: var(--fx-sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.ct-footer .footer-widget p, .ct-footer .footer-widget a { color: #d2d9d1; }
.ct-footer .footer-widget a:hover { color: #fff; }
.ct-footer .social-links { display: none; }
.fp-social-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.fp-social-links a { min-height: 40px; display: inline-flex; align-items: center; color: #e5e9e2; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.fp-social-links a:hover { color: #fff; }
.ct-footer .footer-bottom { background: #111813; }
.ct-footer .footer-copyright p { color: #d2d9d1; }

/* One visual system across menu, forms, account, reservation, and checkout. */
.od-page, .fx-about, .fx-contact, .fx-resv, .fx-checkout, .fx-auth, .fx-item, .fx-related, .fx-od, .fx-success { background: var(--fx-paper); }
.od-bar { background: var(--fx-paper); border-bottom-color: var(--fx-rule); }
.od-cat { border-radius: 8px; background: #fffdf8; }
.od-cat.active { background: var(--fp-dark); border-color: var(--fp-dark); }
.od-item, .fx-card, .fx-contact-form, .fx-resv-form, .fx-auth-form, .fx-co-panel, .fx-od-card { border-radius: 10px; background: #fffdf8; }
.fx-contact-info .card, .fx-info-box { border-radius: 10px; background: #fffdf8; }
.fx-field .form-control, .fx-auth .form-control, .fx-resv .form-control, .fx-checkout .form-control { border-radius: 7px; background: #fffdf8; }
.fe3-cartbar-btn, .fx-atc-btn, .fx-auth-btn, .fx-resv-btn, .fx-contact-btn, .fx-pay-btn { border-radius: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 3px; }
@media (max-width: 991px) {
  .fx-nav { min-height: 64px; }
  .banner .banner-inner { min-height: 0; padding: 280px 0 66px; background-size: 100% 240px !important; background-position: center top !important; }
  .banner .banner-inner > .container > div { max-width: 690px; }
  .banner .banner-inner .title { max-width: 14ch; font-size: clamp(43px, 8vw, 70px); }
  .fp-highlights-grid { grid-template-columns: 1fr; gap: 0; }
  .fp-highlight { padding: 18px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .fp-highlight:last-child { border-bottom: 0; }
  .fp-location-intro { grid-template-columns: 1fr; gap: 26px; }
  .fp-callout-inner { align-items: start; flex-direction: column; }
}
@media (max-width: 575px) {
  .banner .banner-inner { padding-top: 242px; background-size: 100% 205px !important; }
  .banner .banner-inner .title { font-size: clamp(40px, 11vw, 54px); }
  .banner .banner-inner .subtitle { font-size: 16px; }
  .fx-story, .fx-menu, .fx-gallery, .fx-about { padding-block: 62px; }
  .fx-story-figure::before, .fx-about-figure::before { inset: 12px -10px -10px 10px; }
  .fp-location-intro { padding-block: 62px; }
  .fp-location-details > div { grid-template-columns: 1fr; gap: 4px; }
  .fp-callout { padding-block: 68px; }
  .fp-callout-button { width: 100%; }
  .fx-dish-line { flex-wrap: wrap; gap: 5px 12px; }
  .fx-dish-rule { display: none; }
}
.banner.banner-1.banner-4 .banner-inner {
  display: flex;
  min-height: clamp(600px, 70vh, 760px) !important;
  padding: 64px 0;
  text-align: left;
}
.banner.banner-1.banner-4 .banner-inner h1,
.banner.banner-1.banner-4 .banner-inner p {
  margin-left: 0;
  margin-right: 0;
}
.banner.banner-1.banner-4 .banner-inner h1.title { max-width: 11ch; color: var(--fx-ink); }
.banner.banner-1.banner-4 .banner-inner p.subtitle { max-width: 47ch; color: var(--fx-body); }
@media (max-width: 991px) {
  .banner.banner-1.banner-4 .banner-inner { min-height: 0 !important; padding: 280px 0 66px; }
}
@media (max-width: 575px) {
  .banner.banner-1.banner-4 .banner-inner { padding-top: 242px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .banner .btn-custom.primary { transition-duration: 1ms; }
}