/* ==========================================================================
   Jerusalem Shawarma: site-wide styles
   The frame (sidebar, hero, buttons, section heads, dish lists, cards) shared
   by every page. Colours, sizes, spacing and timings come from the Our Menu
   design handoff; the whole site is set in Georgia (the logo face). Arabic
   text uses a self-hosted Noto Naskh Arabic. Page-specific rules for the
   menu chapters live in our-menu.css.
   ========================================================================== */

/* Arabic face for bilingual menus. One variable file, Arabic subset only
   (SIL Open Font License), so Latin text and digits inside an Arabic span
   still fall through to Georgia. */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/noto-naskh-arabic-var.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* colour */
  --bg: #101010;
  --bg-sidebar: #121110;
  --surface: #181614;
  --surface-tab: #1a1815;
  --orange: #f7941d;
  --orange-hover: #ffb45a;
  --on-orange: #141210;
  --text: #eee;
  --text-name: #f0ede8;
  --text-2: #999;
  --text-3: #9a938a;
  --text-4: #8d867d;
  --prose: #cfcac3;
  --muted-1: #77716a;
  --muted-2: #6f6a63;
  --muted-3: #5c5852;
  --hair-06: rgba(255, 255, 255, .06);
  --hair-07: rgba(255, 255, 255, .07);
  --hair-08: rgba(255, 255, 255, .08);
  --hair-14: rgba(255, 255, 255, .14);
  --hair-22: rgba(255, 255, 255, .22);
  --orange-14: rgba(247, 148, 29, .14);
  --orange-25: rgba(247, 148, 29, .25);
  --orange-35: rgba(247, 148, 29, .35);
  --orange-55: rgba(247, 148, 29, .55);
  --orange-85: rgba(247, 148, 29, .85);

  /* type */
  --serif: Georgia, "Times New Roman", serif;
  --body: var(--serif);
  --arabic: "Noto Naskh Arabic", "Geeza Pro", "Al Bayan", "Noto Naskh Arabic UI", "Segoe UI", Tahoma, serif;

  /* shape and layout */
  --chamfer: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  --sidebar-w: 290px;
  --gutter: 48px;
  --max: 1240px;
  --wrap: calc(var(--max) + 2 * var(--gutter));   /* content column, centred in the main area */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* height:auto matters: every photo carries width/height attributes for
   layout stability, and without it the attribute height would win over
   the CSS aspect-ratio and stretch the picture. */
img { display: block; max-width: 100%; height: auto; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hover); }
button { font: inherit; color: inherit; }
iframe { display: block; border: 0; }
[hidden] { display: none !important; }
::selection { background: var(--orange); color: var(--bg); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.ar { font-family: var(--arabic); }

/* Keyboard users can jump past the sidebar */
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  background: var(--orange);
  color: var(--on-orange);
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.skip:focus { top: 16px; color: var(--on-orange); }

/* --------------------------------------------------------------------------
   Frame
   -------------------------------------------------------------------------- */
.site { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--orange-14);
  display: flex;
  flex-direction: column;
  padding: 44px 36px 32px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sidebar-toggle { display: none; }

/* Logo: the site's own logo file (wp-content/uploads/2022/09/jerusalem-logo-16-1.png) */
.logo { display: block; margin-bottom: 44px; }
.logo img { width: 100%; height: auto; }

/* Primary nav, centred in the space between the logo and the footer. Each
   entry is a link; on the menu page "Our menu" is a button that opens the
   chapter drawer instead. */
.nav { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1; }
.nav-link {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 15px 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  color: var(--text-name);                  /* near white, so the tabs read at a glance */
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hair-06);
  cursor: pointer;
  transition: color .25s;
}
.nav > .nav-link:last-child { border-bottom: 0; }
.nav-link:hover { font-weight: 700; color: #fff; }
.nav-link.is-current { color: var(--orange); font-weight: 700; }
.nav-link--brand { font-size: 19px; font-weight: 700; letter-spacing: 1.5px; }

/* The "tab indent" line. Only the current page's item carries .is-on. On
   the menu page it follows the drawer (open = on, closed = off). */
.nav-line {
  background: var(--orange);
  display: inline-block;
  flex: none;
  width: 0;
  height: 0;
  opacity: 0;
  margin-right: 0;
}
.nav-line.is-on {
  width: 18px;
  height: 2px;
  opacity: 1;
  margin-right: 10px;
  animation: dashClose .55s ease forwards;
}
.nav-line.is-off { animation: dashOpen .55s ease forwards; }

/* Our Menu drawer (menu page only) */
.drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}
.drawer.is-open { grid-template-rows: 1fr; }
.drawer-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;                       /* keeps collapsed links out of the tab order */
  transition: visibility 0s linear .45s;
}
.drawer.is-open .drawer-inner { visibility: visible; transition-delay: 0s; }
.drawer-rail {
  padding: 8px 0 10px 9px;
  border-left: 1px solid var(--orange-35);
  margin: 6px 0 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sub-link {
  display: block;
  padding: 10px 0 10px 10px;
  color: #d9d4cd;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s ease 0s, transform .35s ease 0s, color .25s;
}
.sub-link:nth-child(1) { --i: 0; }
.sub-link:nth-child(2) { --i: 1; }
.sub-link:nth-child(3) { --i: 2; }
.sub-link:nth-child(4) { --i: 3; }
.drawer.is-open .sub-link {
  opacity: 1;
  transform: none;
  transition-delay: calc(.08s + var(--i) * .07s), calc(.08s + var(--i) * .07s), 0s;
}
.sub-link:hover { font-weight: 700; color: #fff; }
.sub-link.is-active { color: var(--orange); font-weight: 700; }

/* Sidebar footer */
.sidebar-foot { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.foot-rule { width: 34px; height: 1px; background: var(--orange); margin-bottom: 4px; }
.foot-link { color: var(--text-2); transition: color .25s; }
.foot-link--tel { color: #ddd; }
.foot-link:hover { color: var(--orange); }
.legal { display: flex; gap: 16px; margin-top: 10px; }
.legal a {
  color: var(--muted-1);
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .25s, color .25s;
}
.legal a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.copyright { font-size: 11px; color: var(--muted-3); margin-top: 2px; }
/* Designer credit under the copyright, same light grey link as before */
.credit a { color: #ddd; transition: color .25s; }
.credit a:hover { color: var(--orange); }

/* Page footer: only shown under 900px, where the sidebar collapses and its
   footer would otherwise be hidden inside the closed nav. */
.page-foot { display: none; }

/* --------------------------------------------------------------------------
   Hero: a photo band with the page title on it
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(260px, 34vh, 340px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--surface);
}
.hero--tall { min-height: clamp(440px, 64vh, 640px); }
.hero--short { min-height: clamp(220px, 28vh, 300px); }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 16, .25) 0%, rgba(16, 16, 16, .45) 45%, rgba(16, 16, 16, .92) 85%, var(--bg) 100%);
  pointer-events: none;
}
.hero--tall::after {
  background: linear-gradient(180deg, rgba(16, 16, 16, .15) 0%, rgba(16, 16, 16, .35) 40%, rgba(16, 16, 16, .9) 82%, var(--bg) 100%);
}
.landing-head {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 36px var(--gutter) 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.kicker {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--orange);
  font-weight: 600;
  text-transform: uppercase;
}
.landing-head .kicker { margin-bottom: 10px; }
.landing-head h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  color: #fff;
  text-wrap: balance;
}
.hero--tall .landing-head h1 { font-size: 54px; max-width: 640px; }
.landing-intro { font-size: 14.5px; color: #bdb7ae; max-width: 360px; line-height: 1.7; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* Plain header for text pages that have no photo */
.page-head { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gutter) 0; }
.page-head .kicker { margin-bottom: 12px; }
.page-head h1 { font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1.15; color: #fff; }

/* --------------------------------------------------------------------------
   Buttons and chips
   -------------------------------------------------------------------------- */
.btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 14px 28px;
  clip-path: var(--chamfer);
  background: var(--orange);
  color: var(--on-orange);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.btn:hover { background: var(--orange-hover); color: var(--on-orange); }
/* Ghost buttons sit on photos and near-black grounds, so they carry a
   translucent fill and a hairline edge (inset, so the chamfer keeps it). */
.btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--on-orange); }
.btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }

/* Inline text link with the orange rule, as on the landing panels */
.explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--orange);
  font-weight: 600;
  text-transform: uppercase;
}
.explore::after { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--orange); transition: width .25s; }
a.explore:hover::after { width: 40px; }

/* --------------------------------------------------------------------------
   Page body and section heads
   -------------------------------------------------------------------------- */
.page { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 72px; animation: fadeUp .4s ease both; }
.block { margin-bottom: 72px; max-width: var(--max); }
.block:last-child { margin-bottom: 0; }
.chapter-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 6px; }
.chapter-head h1, .chapter-head h2 { font-family: var(--serif); font-weight: 700; font-size: 40px; color: #fff; }
.chapter-intro { font-size: 15px; color: var(--text-2); margin-bottom: 44px; max-width: 560px; line-height: 1.7; }

.prose { font-size: 16px; line-height: 1.75; color: var(--prose); max-width: 660px; text-wrap: pretty; }
.prose p + p { margin-top: 14px; }
.prose strong { color: var(--text-name); }

/* --------------------------------------------------------------------------
   Triptych: three photo panels that link onward
   -------------------------------------------------------------------------- */
.triptych {
  flex: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  padding: 28px var(--gutter) 56px;
  min-height: 560px;
}
.triptych--page { flex: none; padding: 0; min-height: 0; max-width: var(--max); }
.triptych--four { grid-template-columns: 1fr 1fr; }
.triptych--four .panel-photo { min-height: 280px; }
@media (min-width: 1500px) {
  .triptych--four { grid-template-columns: repeat(4, 1fr); }
}
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hair-07);
  color: inherit;
  cursor: pointer;
  transition: border-color .3s;
}
.panel:hover, .panel:focus-visible { border-color: var(--orange-55); color: inherit; outline: none; }
.panel-photo { position: relative; flex: 1; min-height: 340px; }
.triptych--page .panel-photo { min-height: 260px; }
.panel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0) 30%, rgba(16, 16, 16, .55) 78%, rgba(16, 16, 16, .82) 100%);
  pointer-events: none;
}
.panel-body { position: relative; padding: 26px 26px 30px; }
.panel-num {
  position: absolute;
  top: -46px;
  left: 26px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--orange);
  letter-spacing: 3px;
  pointer-events: none;
}
.panel-title { font-family: var(--serif); font-weight: 700; font-size: 26px; color: #fff; margin-bottom: 8px; }
.panel-blurb { font-size: 14px; color: var(--text-3); line-height: 1.65; margin-bottom: 18px; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Dish lists: printed-menu rows with a small photo. Used by the à la carte
   chapter and the catering page.
   -------------------------------------------------------------------------- */
.carte { columns: 2; column-gap: 72px; max-width: var(--max); }
/* scroll-margin keeps a deep-linked category clear of the menu page's sticky
   tab bar (--bar-stuck is set in our-menu.css; it is 0 on the catering page) */
.cat { break-inside: avoid; margin-bottom: 44px; scroll-margin-top: calc(var(--bar-stuck, 0px) + 24px); }
.cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.cat-head h3 { font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--orange); letter-spacing: .5px; }
.cat-head::after { content: ""; flex: 1; height: 1px; background: var(--orange-25); }
.cat-note { font-size: 13.5px; color: var(--text-4); line-height: 1.6; margin: -8px 0 18px; max-width: 92%; text-wrap: pretty; }
.cat-banner { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: 1px solid var(--hair-07); margin: -4px 0 18px; }
/* a section whose rows share a few photos (Arabi / Jerusalem Arabi style)
   shows each once, side by side, captioned with what its rows have in common */
.cat-photos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin: -4px 0 20px; }
.cat-photo { margin: 0; min-width: 0; }
.cat-photo .zoom { width: 100%; }
.cat-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--hair-07); background: var(--surface); }
.cat-photo figcaption { font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--muted-1); margin-top: 7px; line-height: 1.4; }
.dish { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.dish > .zoom { flex: none; }
.dish-thumb { width: 68px; height: 68px; flex: none; object-fit: cover; border: 1px solid var(--hair-07); background: var(--surface); }
.dish-body { flex: 1; min-width: 0; padding-top: 2px; }
.dish-row { display: flex; align-items: baseline; gap: 8px; }
.dish-name { font-size: 16px; font-weight: 600; color: var(--text-name); }
.leader { flex: 1; border-bottom: 1px dotted var(--hair-22); transform: translateY(-3px); min-width: 16px; }
.dish-price { font-size: 15.5px; color: var(--orange); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dish-desc { font-size: 13.5px; color: var(--text-4); line-height: 1.6; margin-top: 4px; max-width: 92%; text-wrap: pretty; }
.dish-note { font-size: 12.5px; color: var(--muted-1); line-height: 1.6; margin-top: 3px; }

/* Jump links to the categories of a long list */
.jump { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -22px 0 40px; max-width: var(--max); }
.jump a {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.jump a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* A boxed notice, for the allergy information */
.notice { max-width: 760px; background: var(--surface); border: 1px solid var(--hair-14); padding: 28px 30px; margin-top: 8px; }
.notice h3 { font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--orange); margin-bottom: 6px; }
.notice > p { font-size: 14px; color: var(--text-3); margin-bottom: 18px; line-height: 1.6; }
.notice-list li { font-size: 14.5px; color: var(--prose); line-height: 1.65; padding: 10px 0; border-top: 1px solid var(--hair-06); }
.notice-list strong { color: var(--text-name); font-weight: 600; }

/* --------------------------------------------------------------------------
   Cards, bands and grids used by the content pages
   -------------------------------------------------------------------------- */
/* Two-up: photo beside text */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; max-width: var(--max); }
.split--flip > :first-child { order: 2; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--hair-07); }
.split h3 { font-family: var(--serif); font-weight: 700; font-size: 28px; color: #fff; margin-bottom: 12px; text-wrap: balance; }
.split .prose { margin-bottom: 22px; }

/* Feature cards: photo on top, short text under */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; max-width: var(--max); }
.features--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.features--two .feature img { aspect-ratio: 16 / 9; }
.features--two .feature-body { padding: 26px 28px 30px; }
.features--two .feature p { font-size: 13.5px; margin-bottom: 8px; }
.feature .explore { margin-top: auto; }
.panel-blurb a { color: #ddd; }
.feature { background: var(--surface); border: 1px solid var(--hair-07); display: flex; flex-direction: column; transition: border-color .3s; }
.feature:hover { border-color: var(--orange-55); }
.feature img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feature > .zoom { width: 100%; }
.feature-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.feature h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; color: #fff; }
.feature h3 a { color: inherit; }
.feature h3 a:hover { color: var(--orange); }
.feature p { font-size: 14px; color: var(--text-3); line-height: 1.65; text-wrap: pretty; }

/* Photo grid */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; max-width: var(--max); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--hair-07); }

/* "For catering orders": the one place the catering numbers live. Sits
   right under the hero on the catering page so no scrolling is needed,
   with the numbers set large enough to read across the room. */
.orders {
  max-width: var(--max);
  background: var(--surface);
  border: 1px solid var(--hair-14);
  padding: 40px 44px 42px;
}
.orders-title { font-family: var(--serif); font-weight: 700; font-size: 36px; line-height: 1.2; color: #fff; margin-bottom: 28px; text-wrap: balance; }
.orders-lines { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 56px; margin-bottom: 24px; }
.orders-line small { display: block; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: 8px; }
.orders-tel { font-family: var(--serif); font-weight: 700; font-size: 38px; line-height: 1.1; color: var(--text-name); letter-spacing: .5px; font-variant-numeric: tabular-nums; transition: color .25s; }
.orders-tel:hover { color: var(--orange); }
.orders-mail { font-size: 19px; font-weight: 600; color: var(--orange); border-bottom: 1px solid var(--orange-35); padding-bottom: 2px; overflow-wrap: anywhere; transition: border-color .25s; }
.orders-mail:hover { border-bottom-color: var(--orange); }
.orders-note { font-size: 16px; color: var(--prose); line-height: 1.65; max-width: 640px; text-wrap: pretty; }

/* Locations */
.locations { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px; max-width: var(--max); }
.loc { background: var(--surface); border: 1px solid var(--hair-07); padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.loc-name { font-family: var(--serif); font-weight: 700; font-size: 22px; color: #fff; }
.loc-addr { font-size: 15px; color: #ccc; line-height: 1.6; }
.loc-hours { display: flex; flex-direction: column; gap: 3px; }
.loc-hours small { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange); font-weight: 700; }
.loc-hours span { font-size: 15px; color: var(--text-name); }
.loc-rows { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--hair-08); padding-top: 14px; }
.loc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-3); }
.loc-row a { color: #ddd; }
.loc-row a:hover { color: var(--orange); }
.loc-map { width: 100%; aspect-ratio: 4 / 3; margin-top: 4px; border: 1px solid var(--hair-07); }  /* the embed keeps Google's own colours */

/* Location pages: details card beside the map, the weekly hours, the
   link tiles and the questions. */
address.loc-addr { font-style: normal; }
.loc-more { align-self: flex-start; margin-top: 2px; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--orange); border-bottom: 1px solid var(--orange-35); padding-bottom: 2px; }
.loc-more:hover { border-bottom-color: var(--orange); }
.loc-detail { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 2px; max-width: var(--max); }
.loc-detail .loc { gap: 16px; }
.loc-detail .btn { align-self: flex-start; margin-top: 4px; }
.loc-detail .loc-map { margin-top: 0; height: 100%; min-height: 380px; aspect-ratio: auto; }
.hours { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 5px 22px; font-size: 15px; color: var(--text-name); }
.hours dt { color: var(--text-3); }
.hours dd { margin: 0; }
.loc-note { font-size: 15px; color: #ccc; line-height: 1.6; }
.loc-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; max-width: var(--max); }
.loc-links a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--hair-07); padding: 20px 24px; font-family: var(--serif); font-weight: 700; font-size: 19px; color: #fff; }
.loc-links a:hover { border-color: var(--orange-35); color: var(--orange); }
.loc-links small { display: block; margin-bottom: 6px; font-family: inherit; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange); }
.faq h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; color: #fff; margin: 26px 0 6px; }
.faq h3:first-child { margin-top: 0; }
.faq a { color: var(--orange); }
@media (max-width: 900px) {
  .loc-detail { grid-template-columns: 1fr; }
  .loc-detail .loc-map { min-height: 300px; height: auto; aspect-ratio: 4 / 3; }
}
/* Social links: centred in the card, each with its logo */
.social { display: flex; justify-content: center; gap: 28px; margin-top: auto; padding-top: 4px; }
.social a { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-name); transition: color .25s; }
.social svg { width: 22px; height: 22px; flex: none; }
.social a:hover { color: var(--orange); }

/* A boxed call to action */
.cta { max-width: 760px; background: var(--surface); border: 1px solid var(--hair-14); padding: 40px 44px; }
.cta h2 { font-family: var(--serif); font-weight: 700; font-size: 30px; color: #fff; margin-bottom: 12px; text-wrap: balance; }
.cta .prose { margin-bottom: 24px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Row variant: text left, button right, used inside the Full Menu chapter */
.cta--row {
  max-width: var(--max);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding: 24px 30px;
  margin: -12px 0 40px;
}
.cta--row h2 { font-size: 24px; margin-bottom: 4px; }
.cta--row .prose { margin-bottom: 0; max-width: 560px; font-size: 15px; }

/* Long-form text (press release, privacy policy) */
.article { max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--prose); text-wrap: pretty; }
.article-meta { margin-bottom: 28px; }
.article h2 { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--orange); margin: 36px 0 12px; }
.article h2:first-child { margin-top: 0; }
.article p { margin-bottom: 16px; }
.article ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.article li { margin-bottom: 8px; }
.article address { font-style: normal; margin-bottom: 16px; line-height: 1.7; }
.article a { border-bottom: 1px solid var(--orange-35); }
.article strong { color: var(--text-name); }

/* --------------------------------------------------------------------------
   Lightbox: food photos sit in .zoom buttons; site.js opens the large
   version in an overlay.
   -------------------------------------------------------------------------- */
.zoom {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  display: block;
  cursor: zoom-in;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.zoom img { transition: opacity .25s; }
.zoom:hover img { opacity: .85; }
.zoom:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 8, 8, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
  animation: fadeIn .2s ease both;
}
.lightbox-fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox-fig img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; border: 1px solid var(--hair-14); cursor: default; }
.lightbox-cap { font-family: var(--serif); font-size: 18px; color: #fff; text-align: center; }
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s;
}
.lightbox-close:hover { background: var(--orange); color: var(--on-orange); }
body.has-lightbox { overflow: hidden; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dashOpen {
  0%   { width: 18px; height: 2px;  opacity: 1; margin-right: 10px; }
  55%  { width: 2px;  height: 14px; opacity: 1; margin-right: 10px; }
  100% { width: 0;    height: 0;    opacity: 0; margin-right: 0; }
}
@keyframes dashClose {
  0%   { width: 0;    height: 0;    opacity: 0; margin-right: 0; }
  45%  { width: 2px;  height: 14px; opacity: 1; margin-right: 10px; }
  100% { width: 18px; height: 2px;  opacity: 1; margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* --------------------------------------------------------------------------
   Under 900px: the sidebar becomes a top bar with a Menu button that reveals
   the nav, and a footer appears at the bottom of the page.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .site { display: block; }
  .sidebar {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 18px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--orange-14);
  }
  .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .logo { margin-bottom: 0; width: 150px; }
  /* Burger button: just three bars, no box, that fold into an orange X
     when the nav is open. No word on it, so it is never confused with the
     "Our menu" tab. The 46px hit area is invisible. */
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: -10px;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .burger, .burger::before, .burger::after {
    display: block;
    width: 26px;
    height: 2px;
    background: #f2eee8;
    transition: transform .3s, opacity .2s, background .25s;
  }
  .burger { position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -8px; }
  .burger::after { top: 8px; }
  .sidebar-toggle[aria-expanded="true"] .burger { background: transparent; }
  .sidebar-toggle[aria-expanded="true"] .burger::before { background: var(--orange); transform: translateY(8px) rotate(45deg); }
  .sidebar-toggle[aria-expanded="true"] .burger::after { background: var(--orange); transform: translateY(-8px) rotate(-45deg); }
  .sidebar-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .sidebar-panel { display: none; padding-top: 18px; }
  .sidebar.is-open .sidebar-panel { display: flex; }
  .sidebar-foot { display: none; }

  .page-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    padding: 24px var(--gutter) 32px;
    border-top: 1px solid var(--hair-07);
    font-size: 12.5px;
    color: var(--text-2);
    margin-top: auto;
  }
  .page-foot a { color: var(--text-2); }
  .page-foot a:hover { color: var(--orange); }
  .page-foot .copyright { width: 100%; }

  .hero { min-height: 300px; }
  .hero--tall { min-height: 460px; }
  .hero--short { min-height: 240px; }
  .landing-head { flex-direction: column; align-items: flex-start; padding-top: 32px; padding-bottom: 20px; }
  .landing-head h1, .hero--tall .landing-head h1, .page-head h1 { font-size: 34px; }
  .page-head { padding-top: 40px; }
  .triptych, .triptych--four { grid-template-columns: 1fr; min-height: 0; padding-top: 20px; padding-bottom: 40px; }
  .triptych--page { padding: 0; }
  .panel-photo, .triptych--page .panel-photo { min-height: 240px; }
  .page { padding-top: 36px; padding-bottom: 56px; }
  .block { margin-bottom: 56px; }
  .chapter-head h1, .chapter-head h2 { font-size: 32px; }
  .carte { columns: 1; }
  .split, .split--flip { grid-template-columns: 1fr; gap: 24px; }
  .split--flip > :first-child { order: 0; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .cta, .cta--row { padding: 24px; }
  .orders { padding: 28px 24px 30px; }
  .orders-title { font-size: 26px; }
  .orders-lines { flex-direction: column; gap: 12px; }
  .orders-tel { font-size: 30px; }
  /* Two-tier prices ("Reg $14.99 · Jumbo $19.99") are too wide for a phone
     row: let them break at the separator, one tier per line, right-aligned */
  .dish-price { white-space: normal; text-align: right; }
  .dish-price .tier { white-space: nowrap; }
  .lightbox { padding: 16px; }
  .lightbox-close { top: 10px; right: 10px; }
}

/* --------------------------------------------------------------------------
   Phones: feature cards turn into rows, photo on the left filling the
   card's height, text on the right. Shorter page, no tall pictures.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .features, .features--two { grid-template-columns: 1fr; gap: 8px; }
  .feature { flex-direction: row; }
  .feature > .zoom { position: relative; width: 38%; flex: none; min-height: 150px; }
  .feature img, .features--two .feature img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .feature-body, .features--two .feature-body { padding: 16px 18px 18px; gap: 6px; }
  .feature h3 { font-size: 17px; }
  .feature p, .features--two .feature p { font-size: 13px; line-height: 1.55; }
  .gallery { gap: 6px; }
}