/* ============================================================
   CUSTOM — Per-store overrides for Template TF
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* Slab fallback for the hero tagline: "brix-slab" is an Adobe Fonts
   family, so it only renders once a Typekit kit is loaded on the page.
   Roboto Slab keeps the intended slab-serif look until then. */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700;800&display=swap");

/* Contact page: the hours card heading is an <h2> so the page keeps a
   valid h1 -> h2 outline. Rendering is identical to the template's
   .hours-table h3 — no visual change. */
.hours-table h2 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

/* Takeout tag page: dish/category cards carry an h4 sub-label under
   the card's h3, so the page keeps a clean h2 -> h3 -> h4 outline. */
.related-dish-card h4 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0.35rem;
}

/* ------------------------------------------------------------
   Location box — long-tail service pages under tags/
   (steakhouse takeout + delivery). Google map on the left,
   address, phone and hours on the right, action buttons pinned
   to the bottom corner. Visuals reuse the existing .map-frame,
   .btn and .btn-line tokens, so no new look is introduced.
   ------------------------------------------------------------ */
.location-box {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: stretch;
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 901px) {
  .location-box {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.location-box .map-frame {
  min-height: 380px;
  box-shadow: var(--shadow-sm);
}

.location-box__info {
  display: flex;
  flex-direction: column;
}

.location-box__info h3 {
  font-size: 1.35rem;
  color: var(--basil);
  margin-bottom: 0.35rem;
}

.location-box__info > p {
  color: var(--muted);
  font-size: 0.92rem;
}

.location-details {
  margin: 1.1rem 0 1.5rem;
}

.location-details > li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.location-details > li:last-child {
  border-bottom: none;
}

.location-details h4 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.location-details > li > p,
.location-details > li > address {
  font-style: normal;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.5;
}

.location-details a {
  color: var(--chili-dark);
  font-weight: 700;
}

.location-details a:hover {
  text-decoration: underline;
}

.location-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.22rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.location-hours li span:last-child {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.location-box__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

@media (max-width: 560px) {
  .location-box__actions .btn,
  .location-box__actions .btn-line {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------
   FAQ answer links (home page #faq)
   The global reset sets `a { color: inherit; text-decoration:
   none }`, so links inside FAQ answers are invisible without
   explicit styling. Every page under tags/ (dish pages, service
   area pages, delivery + takeout) is linked from this section,
   so these need to read clearly as links and pass focus /
   contrast checks. Built only from existing design tokens.
   ------------------------------------------------------------ */
.qa .qa-body a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--chili) 45%, transparent);
  border-radius: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.qa .qa-body a:hover {
  color: var(--chili);
  text-decoration-color: currentColor;
}

.qa .qa-body a:focus-visible {
  color: var(--chili);
  text-decoration-color: currentColor;
  outline: 2px solid var(--chili);
  outline-offset: 2px;
}

/* Neighbourhood link lists — 21 service-area pages read better as
   a wrapping pill grid than as a long single-file bullet column. */
.qa .qa-body:has(.qa-links) {
  max-width: 66ch;
}

.qa .qa-body ul.qa-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding-left: 0;
}

.qa .qa-body ul.qa-links li {
  margin-bottom: 0;
}

.qa .qa-body ul.qa-links a {
  display: inline-block;
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease;
}

.qa .qa-body ul.qa-links a:hover,
.qa .qa-body ul.qa-links a:focus-visible {
  background: var(--chili-soft);
  border-color: var(--chili);
  color: var(--chili-dark);
  text-decoration: none;
}

/* Dish link lists — the dish name carries the link, followed by a
   short em-dash descriptor, so give the rows a little more air. */
.qa .qa-body ul.qa-dishes li {
  margin-bottom: 0.5rem;
}

/* Home page: the "Find us" / map section at the end of index.html uses
   the same vertical rhythm as the template's other home sections
   (.plates, .story, .quotes, .faq) so the visit box sits evenly between
   the CTA band and the footer. No new visual language is introduced. */
#visit-us {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* ------------------------------------------------------------
   Visit box — map (left) + address, contact & hours (right)
   Used on the Calgary city + cuisine landing page. Built only
   from existing design tokens so it matches the template skin.
   ------------------------------------------------------------ */
.visit-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 2rem;
}

.visit-box__map {
  position: relative;
  min-height: 420px;
  background: var(--sand);
}

.visit-box__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.visit-box__info {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.visit-box__info h3 {
  font-size: 1.4rem;
  color: var(--basil);
}

.visit-box__info h4 {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.visit-box__info p,
.visit-box__info address {
  font-style: normal;
  font-size: 0.97rem;
  color: var(--muted);
  line-height: 1.6;
}

.visit-box__info a {
  color: var(--chili-dark);
  font-weight: 600;
}

.visit-box__info a:hover {
  text-decoration: underline;
}

.visit-box__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.93rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.visit-box__hours li:last-child {
  border-bottom: none;
}

.visit-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.5rem;
}

.visit-box__actions .btn,
.visit-box__actions .btn-secondary {
  padding: 0.8rem 1.4rem;
  font-size: 0.95rem;
}

.visit-box__actions .btn-secondary {
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .visit-box {
    grid-template-columns: 1fr;
  }

  .visit-box__map {
    min-height: 320px;
  }

  .visit-box__actions {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------
   Menu service tabs — Brunch / Lunch / Dinner switcher on
   menu.html. Loads menu-<name>.js on click by reloading with
   ?menu=<name>. Built from existing tokens only.
   ------------------------------------------------------------ */
.menu-service {
  padding: 1.25rem 0 0.5rem;
}

.menu-service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.55rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.menu-service-tab {
  flex: 1 1 0;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-lg, 14px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.menu-service-tab .mst-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.menu-service-tab .mst-note {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.menu-service-tab:hover {
  background: var(--sand);
  color: var(--ink);
  border-color: var(--line);
}

.menu-service-tab:focus-visible {
  outline: 2px solid var(--chili);
  outline-offset: 2px;
}

.menu-service-tab.is-active {
  background: var(--chili);
  border-color: var(--chili);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.menu-service-tab.is-active .mst-label,
.menu-service-tab.is-active .mst-note {
  color: #fff;
}

.menu-service-tab.is-active .mst-note {
  opacity: 0.9;
}

@media (max-width: 640px) {
  .menu-service-tabs {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .menu-service-tab {
    min-width: 0;
    padding: 0.7rem 0.5rem;
  }

  .menu-service-tab .mst-label {
    font-size: 1rem;
  }

  .menu-service-tab .mst-note {
    font-size: 0.7rem;
  }
}

/* ============================================================
   Reservations page — Tock booking widget
   Reuses existing tokens (.page-hero, .info-cards); the shell
   just frames the third-party widget so no new look is added.
   ============================================================ */
.reserve-sec {
  padding: 0 0 clamp(2rem, 4vw, 3rem);
}

.reserve-sec .tock-shell {
  /* reserve space so the page doesn't jump while Tock loads */
  min-height: 120px;
}

.reserve-sec .reserve-fallback {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.85;
}

.reserve-notes {
  padding: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.reserve-notes .info-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .reserve-notes .info-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .reserve-notes .info-cards {
    grid-template-columns: 1fr;
  }
}

/* ============ homepage reserve band (Tock bar) ============ */
.reserve-band {
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  background: linear-gradient(180deg, var(--sand) 0%, transparent 100%);
}

.reserve-band .wrap {
  text-align: center;
}

.reserve-band__head h2 {
  margin: 0.75rem 0 1.5rem;
}

.reserve-band #Tock_widget_container {
  /* reserve space so the page doesn't jump while Tock loads */
  min-height: 90px;
}

.reserve-band__note {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   HOME HERO — brand tagline
   The kicker, h1 and intro paragraph stay in the markup (crawlers
   and the no-CSS fallback still read them) but are hidden from the
   rendered page; the slab tagline takes their place.
   ------------------------------------------------------------ */
.hero-full__content .kicker--light,
.hero-full__tag,
.hero-full h1 {
  display: none;
}

/* The tagline is a direct child of .hero-full (a flex column), placed
   above .hero-full__content so it pins to the TOP of the hero section.
   The content block keeps margin-block: auto, so the buttons still
   centre in whatever space is left below.
   Type scale is lifted from the template's .hero-full h1 (style.css). */
.hero-slab-tag {
  font-family: "brix-slab", "Roboto Slab", Rockwell, Georgia, serif;
  font-size: clamp(3.1rem, 5vw, 6rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(24, 20, 16, 0.45);
  /* auto keeps .wrap's horizontal centring; the top pad clears the
     transparent fixed header that sits over the hero */
  margin: 0 auto;
  padding-top: clamp(1.5rem, 10vw, 5rem);
}

/* the tagline above now carries the header clearance */
.hero-full__content {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-slab-tag span {
  display: block;
}

/* .hero-actions carries margin-top: 10rem (style.css) to push the home
   hero buttons clear of the tagline pinned at the top of the section.
   On mobile the hero is much shorter and the buttons stack, so that
   gap just pushes them off-screen — drop it below the 900px nav
   breakpoint. */
@media (max-width: 900px) {
  .hero-actions {
    margin-top: 0;
  }
}

/* ============================================================
   Events & Private Dining page
   Reuses .page-hero--split, .bd-card, .info-cards, .faq and
   .cta-band; only the 2-up card grid and the package callout
   are new, and both are built from existing tokens.
   ============================================================ */

/* .bd-list is 3-up by default (menu page); this page has two rooms */
.bd-list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.events-package {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.35rem, 3vw, 2.1rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.events-package h3 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}

.events-package p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
}

@media (max-width: 900px) {
  .bd-list--two {
    grid-template-columns: 1fr;
  }

  .events-package {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Gift Cards page — third-party eGift frame (vgdelivery.com)
   Reuses .page-hero, .info-cards, .faq and .cta-band; the shell
   just frames the partner form so no new look is introduced.
   ============================================================ */
.giftcard-sec {
  padding: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.giftcard-shell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* the frame is cross-origin, so its height can't be measured from
     here — reserve a tall box and let the partner page scroll inside */
  height: clamp(900px, 118vh, 1500px);
}

.giftcard-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.giftcard-fallback {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* raised by the inline script when the partner frame never loads */
.giftcard-fallback.is-urgent {
  opacity: 1;
  font-weight: 600;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--chili-soft);
}

@media (max-width: 700px) {
  .giftcard-shell {
    /* narrow screens stack the partner form, so it runs taller */
    height: clamp(1050px, 145vh, 1700px);
    border-radius: var(--r-lg);
  }
}

/* ============================================================
   FLOATING CTA — half-and-half Reserve | Order pill, pinned to
   the bottom-right corner on BOTH desktop and mobile.
   Replaces the template's mobile-only full-width bottom bar
   (style.css "floating mobile order bar"). custom.css loads
   last, and media queries add no specificity, so these plain
   rules win over the template's @media ones.
   The second half is injected by components.js.
   ============================================================ */
.floating-btn-wrapper {
  display: flex;
  align-items: stretch;
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  left: auto;
  z-index: 70;
  /* each half paints its own background; the bar itself is just
     the rounded clip + shadow */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 0;
  padding: 0;
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.float-cta {
  /* 1 1 0 (not 50%) so both halves are exactly equal width
     regardless of label length */
  flex: 1 1 0;
  min-width: 8.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.9rem 1.15rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.float-cta .ico {
  flex: none;
  font-size: 1.05em;
}

.float-cta--reserve {
  background: var(--basil);
}

.float-cta--reserve:hover,
.float-cta--reserve:focus-visible {
  background: var(--basil-deep);
  color: #fff;
}

.float-cta--order {
  background: var(--chili);
  /* hairline between the two halves */
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22);
}

.float-cta--order:hover,
.float-cta--order:focus-visible {
  background: var(--chili-dark);
  color: #fff;
}

/* the back-to-top button shares this corner — lift it above the pill
   at every width (the template only did this under 768px) */
.to-top {
  bottom: 5.4rem;
}

/* no-JS / failed-injection fallback: the page's original single
   button keeps working, just sized for the corner pill */
.btn.order-float {
  width: auto;
  max-width: none;
}

/* ------------------------------------------------------------
   Mobile keeps the template's original treatment: a full-width
   translucent bar pinned to the bottom edge. The only change is
   that the single button inside it is now the two halves, which
   together match the old button's 24rem max width.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .floating-btn-wrapper {
    inset: auto 0 0 0;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 0.65rem 1rem;
    /* the bar is square to the screen edges; the pill is the
       two halves inside it, so they carry the rounding */
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  .float-cta {
    min-width: 0;
    max-width: 12rem; /* 2 x 12rem = the old button's 24rem cap */
    padding: 0.85rem 0.6rem;
    font-size: 0.88rem;
  }

  .float-cta--reserve {
    border-radius: var(--r-pill) 0 0 var(--r-pill);
  }

  .float-cta--order {
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
  }

  body {
    padding-bottom: 4.5rem;
  }
}

@media (max-width: 360px) {
  .float-cta {
    gap: 0.35rem;
    padding: 0.85rem 0.4rem;
    font-size: 0.82rem;
  }
}

/* ============================================================
   PROMO RAIL (home) — centre-focused banner carousel.
   Native horizontal scroller so touch swipe is free; the
   neighbouring slides stay visible either side of the active
   one and are dimmed/scaled back. Advanced every 3s by the
   promo rail block in script.js.
   Slides use a fixed HEIGHT with auto width, because the
   ban1-8 sources are mixed ratios (~2.5:1 and ~1.28:1) —
   sizing by height shows every banner uncropped.
   ============================================================ */
.promo-rail {
  --promo-h: clamp(280px, 40vw, 520px);
  --promo-gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--basil);
  color: #fff;
  overflow: hidden;
}

.promo-rail__head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.promo-rail__head h2 {
  margin-top: 0.75rem;
  color: #fff;
}

.promo-rail__head h2 em {
  font-style: normal;
  color: var(--gold);
}

.promo-rail__viewport {
  /* style.css sets `section { position: relative }`, so without this the
     slides' offsetLeft would resolve against .promo-rail instead of the
     scroll container and the centring maths in script.js would drift */
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.promo-rail__viewport::-webkit-scrollbar {
  display: none;
}

/* Chrome ignores smooth scrollTo while mandatory snap is on —
   same workaround the plates carousel uses */
.promo-rail__viewport.snap-off {
  scroll-snap-type: none;
}

.promo-rail__viewport:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.promo-rail__track {
  display: flex;
  align-items: center;
  gap: var(--promo-gap);
  width: max-content;
}

.promo-slide {
  flex: 0 0 auto;
  height: var(--promo-h);
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-snap-align: center;
  opacity: 0.45;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.promo-slide.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow-lg);
}

/* linked slides: the <a> must fill the figure, otherwise the img's
   height: 100% resolves against an auto-height inline box and collapses */
.promo-slide a {
  display: block;
  height: 100%;
}

.promo-slide img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

.promo-rail__nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
}

.promo-rail__nav .arrow-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.promo-rail__nav .arrow-btn:hover {
  background: var(--gold);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .promo-slide {
    transition: none;
  }
}

/* ============================================================
   SERVICE MOSAIC (home) — Dinner / Brunch / Lunch.
   Asymmetric grid: Dinner leads at 2 rows tall on the left,
   Brunch and Lunch stack beside it. Each card is one <a>, so
   the whole tile is clickable and keyboard-reachable.
   ============================================================ */
.services {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.services-note {
  align-self: end;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.svc-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  /* the lead card sets the height; the stacked pair splits it */
  min-height: clamp(30rem, 46vw, 40rem);
}

.svc-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--basil);
  isolation: isolate;
}

.svc-card--lead {
  grid-row: span 2;
}

.svc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* scrim: transparent at the top, deep at the label so the type
   stays readable over any photo */
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(24, 20, 16, 0) 30%,
    rgba(24, 20, 16, 0.72) 78%,
    rgba(24, 20, 16, 0.9) 100%
  );
  transition: opacity 0.4s ease;
}

.svc-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  color: #fff;
}

.svc-card__meta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--canvas);
}

.svc-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
}

.svc-card--lead .svc-card__title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 0.5rem;
  padding-bottom: 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* underline drawn as a background so it can sweep in on hover */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.svc-card:hover img,
.svc-card:focus-visible img {
  transform: scale(1.06);
}

.svc-card:hover::after,
.svc-card:focus-visible::after {
  opacity: 0.86;
}

.svc-card:hover .svc-card__cta,
.svc-card:focus-visible .svc-card__cta {
  background-size: 0 1px;
  background-position: 100% 100%;
}

.svc-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }

  .svc-card {
    /* no row stretching once stacked — give each card its own shape */
    aspect-ratio: 16 / 10;
  }

  .svc-card--lead {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 520px) {
  .svc-card,
  .svc-card--lead {
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card img,
  .svc-card__cta {
    transition: none;
  }

  .svc-card:hover img {
    transform: none;
  }
}

/* ---------- footer photography credits ---------- */
.foot-photo-credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}

.foot-photo-credits a {
  color: rgba(255, 255, 255, 0.7);
}

.foot-photo-credits a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   "Now Open Mondays" announcement popup (injected by
   components.js, shown once per browser session).
   ------------------------------------------------------------ */
.mp-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: rgba(31, 28, 25, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mp-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mp-card {
  position: relative;
  width: min(26rem, 100%);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.3s ease;
}

.mp-overlay.is-open .mp-card {
  transform: translateY(0) scale(1);
}

.mp-close {
  position: absolute;
  top: 0.65rem;
  right: 0.8rem;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.mp-close:hover,
.mp-close:focus-visible {
  color: var(--ink);
}

.mp-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.mp-title {
  margin: 0.5rem 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.5vw, 1.9rem);
  color: var(--ink);
}

.mp-text {
  margin: 0 0 1.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

.mp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.mp-btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: background 0.2s ease;
}

.mp-btn:hover,
.mp-btn:focus-visible {
  background: var(--chili-dark);
  color: #fff;
}

.mp-btn--line {
  background: none;
  border: 2px solid var(--brand);
  color: var(--brand);
  padding: calc(0.8rem - 2px) 2rem;
}

.mp-btn--line:hover,
.mp-btn--line:focus-visible {
  background: var(--brand);
  color: #fff;
}

.mp-later {
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mp-later:hover,
.mp-later:focus-visible {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .mp-overlay,
  .mp-card {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Ember Hour page — menu photo, price lists and promo cards.
   Reuses theme tokens; no new colors introduced.
   ------------------------------------------------------------ */
.ember-sec {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.ember-sec .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.ember-photo {
  margin: 2rem 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}

.ember-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: cover;
}

.ember-photo figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.45rem 1rem;
  background: rgba(34, 30, 26, 0.82);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

.ember-menus {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 2rem;
}

@media (min-width: 821px) {
  .ember-menus {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.ember-card {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.ember-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 1rem;
}

.ember-card h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
  margin: 1.25rem 0 0.6rem;
}

.ember-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ember-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}

.ember-list li:last-child {
  border-bottom: 0;
}

.ember-list em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.85em;
}

.ember-list small {
  color: var(--muted);
  font-size: 0.82rem;
}

.ember-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}

.ember-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

.ember-note a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-duo {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 2rem;
}

@media (min-width: 821px) {
  .promo-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.promo-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.promo-card img {
  display: block;
  width: 100%;
  height: 15rem;
  object-fit: cover;
}

.promo-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.promo-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
}

.promo-card__body p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* ==========================================================
   Centered page hero (plain variant only)
   Centers the hero band on ember-hour, reservations,
   gift-cards and contact-us; .page-hero--split keeps its
   two-column left-aligned layout.
   ========================================================== */

.page-hero:not(.page-hero--split) .wrap {
  text-align: center;
}

.page-hero:not(.page-hero--split) h1,
.page-hero:not(.page-hero--split) .lede {
  margin-inline: auto;
}

.page-hero:not(.page-hero--split) .hero-actions {
  justify-content: center;
}

/* mirror the kicker's dash so it reads balanced when centered */
.page-hero:not(.page-hero--split) .kicker::after {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--chili);
}

/* ------------------------------------------------------------
   Desktop header: logo left, nav links centred, Order button
   right. The template right-aligns the nav (margin-left: auto);
   letting it fill the middle and centre its links instead.
   Mobile (<= 900px) keeps the slide-down panel untouched.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .site-header .wrap {
    gap: clamp(1rem, 2vw, 2rem);
  }

  .site-header .site-nav {
    flex: 1 1 auto;
    justify-content: center;
    margin-left: 0;
  }

  .site-header .brand,
  .site-header .header-cta {
    flex: none;
  }
}

/* Keep every nav label on one line; tighten spacing on narrower
   desktops (901–1280px) so the 8 links + button still fit. */
@media (min-width: 901px) {
  .site-header .site-nav > a {
    white-space: nowrap;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .site-header .site-nav {
    gap: 0.15rem;
  }

  .site-header .site-nav > a {
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
  }
}

/* Small desktops / landscape tablets (901–1100px): one more notch
   tighter so the Order button never clips off the right edge. */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header .site-nav {
    gap: 0;
    min-width: 0;
  }

  .site-header .site-nav > a {
    font-size: 0.82rem;
    padding: 0.45rem 0.5rem;
  }

  .site-header .brand img {
    height: 3.6rem;
  }

  .site-header .header-cta .btn {
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
  }
}