/* Bars' websites (docs/outreach/website-service.md), built by
   deploy/sites/build.py: the demos at /sites/ and the sites bars run on their
   own domains, each of which carries a copy of this file.
   One stylesheet for every site; each page sets its own colours and display
   face as custom properties, so a bar's site wears its own brand. Mobile
   first: most visitors to a bar's site are on a phone, deciding whether to
   come in tonight. Nothing on the page may scroll sideways. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #111;
  --ink: #fff;
  --accent: #e8b03a;
  --display: Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --panel: color-mix(in srgb, var(--ink) 6%, var(--bg));
  --panel-2: color-mix(in srgb, var(--ink) 10%, var(--bg));
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --muted: color-mix(in srgb, var(--ink) 66%, var(--bg));
  --on-accent: #111;
  --radius: 14px;
  --gutter: 20px;
  --max: 1160px;
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  /* The header. site.js measures it; the number is for a page without. */
  scroll-padding-top: var(--header-h, 72px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* site.js hides what has nothing to show (a section with no specials, the
   live stamp on a static site), and a class that sets display would
   otherwise beat the attribute. */
[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: var(--display-weight, 700);
  line-height: 1.08;
  margin: 0;
  letter-spacing: var(--display-tracking, 0);
  text-wrap: balance;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── The demo notice ─────────────────────────────────────────────────
   Every page says what it is, above everything else: a demonstration we
   built, not the bar's own site. */
.demo-ribbon {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px var(--gutter);
}
.demo-ribbon a {
  color: inherit;
}

/* ── Header ──────────────────────────────────────────────────────────── */
/* Solid, not frosted. A blur behind a sticky header is redrawn from the
   photographs under it on every frame of a scroll, and on a large desktop
   screen that is the jitter people see. */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
}
.brand {
  font-family: var(--display);
  font-weight: var(--display-weight, 700);
  font-size: 21px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin-right: auto;
}
/* The pages. On a phone or a tablet they are in the panel behind the menu
   button below, a list to tap; from a laptop up, a row in the header.
   Neither ever slides sideways. */
.nav {
  display: none;
  gap: 22px;
}
.nav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding: 6px 0;
}
.nav a:hover {
  color: var(--ink);
}
.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.top .call,
.top .action {
  flex: none;
}
/* On a phone the actions (Order, Reserve) are in the panel; the header
   keeps the name, Call and the menu button. */
.top .action {
  display: none;
}
/* With Order in the panel, Call is the header's one button, so it is the
   filled one; beside Order on a laptop it steps back to an outline. */
@media (max-width: 1023px) {
  .top .call.ghost {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
}

/* ── The menu button and its panel (phones and tablets) ─────────────── */
.nav-menu {
  flex: none;
}
.nav-menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker {
  display: none;
}
.nav-menu .bars,
.nav-menu .bars::before,
.nav-menu .bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-menu .bars {
  position: relative;
}
.nav-menu .bars::before,
.nav-menu .bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-menu .bars::before {
  top: -6px;
}
.nav-menu .bars::after {
  top: 6px;
}
.nav-menu[open] .bars {
  background: transparent;
}
.nav-menu[open] .bars::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-menu[open] .bars::after {
  transform: translateY(-6px) rotate(-45deg);
}
.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
  padding: 8px var(--gutter) 20px;
}
.nav-panel nav {
  display: grid;
}
.nav-panel nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--rule);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.nav-panel nav a[aria-current="page"] {
  color: var(--accent);
}
.nav-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn.ghost {
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  color: var(--ink);
}
.btn.small {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, color-mix(in srgb, var(--bg) 70%, transparent) 38%, transparent 75%),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 55%, transparent), transparent 70%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: 44px;
}
.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.hero h1 {
  font-size: clamp(40px, 9vw, 84px);
  max-width: 12ch;
}
/* Over a photograph the accent colour can vanish into the picture (Cole's
   green over their green-lit bar), so the hero's words are ink, lifted off
   the photo by a shadow; the accent stays as a rule. */
.hero .kicker {
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero .kicker::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.hero .kicker,
.hero h1,
.hero .lede,
.hero .open-now {
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 18px rgb(0 0 0 / 0.35);
}
.hero .lede {
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 34ch;
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.open-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-weight: 600;
  font-size: 15px;
}
.open-now::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}
.open-now.is-open::before {
  background: #3ecf6e;
  box-shadow: 0 0 0 4px color-mix(in srgb, #3ecf6e 25%, transparent);
}
.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* ── A page's own title, on every page but home ──────────────────────── */
.page-head {
  padding: 56px 0 0;
}
.page-head h1 {
  font-size: clamp(40px, 8vw, 72px);
}
.page-head .intro {
  margin: 12px 0 0;
  color: var(--muted);
  max-width: 52ch;
  font-size: 17px;
}
.page-head .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 16px;
}
.page-head .count {
  font-weight: 700;
}
.page-head + section.block {
  padding-top: 36px;
}

/* ── Sections ────────────────────────────────────────────────────────── */
section.block {
  padding: 64px 0;
}
section.block.alt {
  background: var(--panel);
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 28px;
}
.section-head h2 {
  font-size: clamp(32px, 6vw, 52px);
}
.section-head p {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 52ch;
}

/* "See everything on tap": the home page shows the start of a list. */
.more {
  margin-top: 28px;
}
.empty {
  color: var(--muted);
  font-size: 17px;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ecf6e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3ecf6e 30%, transparent);
  /* Opacity only: the compositor runs it without repainting the page. */
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live::before {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ═══ The menu, shared with the QR menu (§6.8) ═══════════════════════
   Everything between this line and the matching end line is copied, byte
   for byte, into apps/api/src/tapline/templates/menu.css, which the QR
   menu inlines — one menu, one look, wherever a customer reads it.
   apps/api/tests/test_menu_css.py fails when the two differ. It relies
   only on the tokens both pages set: --bg --ink --accent --display
   --display-weight --panel --panel-2 --rule --muted --radius, and on
   --accent-text, which a page sets only where the accent would not read
   as text; neither does on a website today. */
/* ── On tap ──────────────────────────────────────────────────────────── */
.taps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tap {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.tap .num {
  grid-row: span 2;
  font-family: var(--display);
  font-weight: var(--display-weight, 700);
  font-size: 24px;
  color: var(--accent-text, var(--accent));
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tap .name {
  font-weight: 700;
  font-size: 18px;
  min-width: 0;
}
.tap .price {
  font-weight: 700;
  font-size: 17px;
  color: var(--accent-text, var(--accent));
  text-align: right;
  white-space: nowrap;
}
.tap .meta {
  grid-column: 2 / -1;
  font-size: 14px;
  color: var(--muted);
}
.tap .note {
  color: var(--accent-text, var(--accent));
  font-weight: 600;
}
.tap .desc {
  grid-column: 2 / -1;
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--muted);
  white-space: pre-line;
}
.tap.sold-out {
  opacity: 0.5;
}
.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--panel-2);
  color: var(--ink);
  vertical-align: 2px;
}

/* ── Specials ────────────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.card {
  background: var(--panel-2);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.card .body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card .when {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
}
.card h3 {
  font-size: 26px;
}
.card .price-text {
  font-weight: 700;
  color: var(--accent-text, var(--accent));
  font-size: 18px;
}
.card p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.card .cta {
  font-size: 14px;
  color: var(--muted);
}

/* ── Menu sections ────────────────────────────────────────────────── */
.menu-section + .menu-section {
  margin-top: 56px;
}
.menu-section > h2 {
  font-size: clamp(30px, 5vw, 42px);
  margin-bottom: 18px;
}
/* A section's dishes run down one column and on into the next, as a
   printed menu's do. Each category used to take a grid cell of its own,
   and most sections are one category, so the right half sat empty; where
   there were two, a short one beside a long one left a hole the long
   one's height. */
.menu-cats {
  column-gap: 48px;
}
.menu-cat + .menu-cat {
  margin-top: 34px;
}
.menu-cat h3 {
  font-size: 24px;
  margin-bottom: 6px;
  color: var(--accent-text, var(--accent));
  break-inside: avoid;
  break-after: avoid;
}
/* A heading never ends a column with its dishes in the next. It reserves
   room for a first row below it, so when a column has none left the
   heading moves over with its dishes: the same thing `break-after: avoid`
   asks for, for the browsers that ignore it inside columns. */
.menu-cat h3::after {
  content: "";
  display: block;
  height: 64px;
  margin-bottom: -64px;
}
.menu-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-cat li {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.item-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.item-line .name {
  font-weight: 700;
  min-width: 0;
}
.item-line .dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 30%, transparent);
  min-width: 12px;
  transform: translateY(-4px);
}
.item-line .price {
  font-weight: 700;
  color: var(--accent-text, var(--accent));
  white-space: nowrap;
}
.menu-cat .desc {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
  white-space: pre-line;
}

/* ── A dish's photograph on the menu ─────────────────────────────────── */
.menu-cat li.has-photo {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
.menu-cat li.has-photo > :not(.item-photo) {
  grid-column: 2;
}
.item-photo {
  grid-row: span 2;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--panel-2);
}

/* ── Price columns, add-ons and notes (§49) ───────────────────────────
   A section whose menu names price columns (Cheese, Reg, Prem, Super Prem)
   draws a header row of labels over right-aligned price columns, and each
   dish puts its prices in them. A section without columns is untouched by
   anything here but its optional price line, note and footnote.

   **Nothing scrolls sideways, at any width (§47).** The columns are `auto`
   tracks of one grid that every row of the section shares (`subgrid`), so
   each is as wide as its widest price or label, and a label wraps before it
   widens one. The dish's name keeps at least 7.5rem. Where that and the
   columns cannot both fit, the container query below stacks each dish's
   prices under its name instead: "Cheese 37.50  Reg 4.00". How much room
   the columns need depends on how many there are, so each count has its own
   width, in rem because a price needs more room as the reader's text grows.
   It is the section's own width that is asked, not the screen's: from 720px
   a menu runs in two columns, each narrower than the phone it replaced. */
.cat-price-line {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--accent-text, var(--accent));
  break-after: avoid;
}
.cat-note {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
  white-space: pre-line;
  break-after: avoid;
}
.cat-footnote {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  white-space: pre-line;
}
/* An add-on belongs to the dish above it: smaller, italic, indented, and
   the dish's rule moves down to close the pair. */
.menu-cat li.addon {
  padding: 4px 0 8px 18px;
}
.menu-cat li:has(+ li.addon) {
  padding-bottom: 4px;
  border-bottom-color: transparent;
}
.menu-cat li.addon .name {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
}
.menu-cat li.addon .price {
  font-size: 14px;
}
/* A line of words between dishes: no price, no leader. */
.menu-cat li.note {
  padding: 10px 0;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}
.menu-cat li.note p {
  margin: 0;
  white-space: pre-line;
}

.menu-cat.has-cols {
  container-type: inline-size;
}
.cols-1 {
  --cols: 1;
}
.cols-2 {
  --cols: 2;
}
.cols-3 {
  --cols: 3;
}
.cols-4 {
  --cols: 4;
}
.cols-5 {
  --cols: 5;
}
.menu-cat.has-cols ul {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) repeat(var(--cols), auto);
  column-gap: 10px;
}
.menu-cat.has-cols li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
}
/* The name and the prices become the row's own cells. */
.menu-cat.has-cols .item-line,
.menu-cat.has-cols .prices {
  display: contents;
}
.menu-cat.has-cols .item-line .name {
  min-width: 0;
}
.menu-cat.has-cols .price {
  position: relative;
  text-align: right;
  white-space: nowrap;
}
/* The label a price sits under: for a screen reader, and for the stacked
   layout. A sighted reader of the columns has the header row. */
.menu-cat.has-cols .price .col-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu-cat.has-cols .desc {
  grid-column: 1 / -1;
}
/* An add-on has one price, at the end of its row. */
.menu-cat.has-cols li.addon .price {
  grid-column: -2;
}
.menu-cat.has-cols li.note {
  display: block;
}
/* A picture is not drawn in a section with columns: its row is a grid. */
.menu-cat.has-cols .item-photo {
  display: none;
}
/* Nor is the row laid out for one. The photo's second column is a price
   column here, so a dish's description went into it, widened every price
   column to its own width, and left "Homemade Chicken Tenders" three lines
   tall in the name's 7.5rem (Griffon, 2026-11-06). */
.menu-cat.has-cols li.has-photo > :not(.item-photo) {
  grid-column: auto;
}
.menu-cat.has-cols li.has-photo > .desc {
  grid-column: 1 / -1;
}
.menu-cat.has-cols li.col-head {
  align-items: end;
  padding: 0 0 6px;
}
.col-head span {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Too narrow for the columns: the dish's prices stack under its name. Each
   count of columns stacks below its own width, and stacks the same way; the
   body is written out for each because a container query's width cannot come
   from a custom property. */
@container (max-width: 16rem) {
  .menu-cat.has-cols:is(.cols-1, .cols-2) :is(ul, li, .item-line) {
    display: block;
  }
  .menu-cat.has-cols:is(.cols-1, .cols-2) .col-head,
  .menu-cat.has-cols:is(.cols-1, .cols-2) .price.blank {
    display: none;
  }
  .menu-cat.has-cols:is(.cols-1, .cols-2) .prices {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1em;
  }
  .menu-cat.has-cols:is(.cols-1, .cols-2) .price .col-label {
    all: revert;
    margin-right: 0.25em;
    font-weight: 400;
    color: var(--muted);
  }
  .menu-cat.has-cols:is(.cols-1, .cols-2) li.addon .item-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
}
@container (max-width: 20rem) {
  .menu-cat.has-cols:is(.cols-3) :is(ul, li, .item-line) {
    display: block;
  }
  .menu-cat.has-cols:is(.cols-3) .col-head,
  .menu-cat.has-cols:is(.cols-3) .price.blank {
    display: none;
  }
  .menu-cat.has-cols:is(.cols-3) .prices {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1em;
  }
  .menu-cat.has-cols:is(.cols-3) .price .col-label {
    all: revert;
    margin-right: 0.25em;
    font-weight: 400;
    color: var(--muted);
  }
  .menu-cat.has-cols:is(.cols-3) li.addon .item-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
}
@container (max-width: 25rem) {
  .menu-cat.has-cols:is(.cols-4) :is(ul, li, .item-line) {
    display: block;
  }
  .menu-cat.has-cols:is(.cols-4) .col-head,
  .menu-cat.has-cols:is(.cols-4) .price.blank {
    display: none;
  }
  .menu-cat.has-cols:is(.cols-4) .prices {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1em;
  }
  .menu-cat.has-cols:is(.cols-4) .price .col-label {
    all: revert;
    margin-right: 0.25em;
    font-weight: 400;
    color: var(--muted);
  }
  .menu-cat.has-cols:is(.cols-4) li.addon .item-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
}
@container (max-width: 30rem) {
  .menu-cat.has-cols:is(.cols-5) :is(ul, li, .item-line) {
    display: block;
  }
  .menu-cat.has-cols:is(.cols-5) .col-head,
  .menu-cat.has-cols:is(.cols-5) .price.blank {
    display: none;
  }
  .menu-cat.has-cols:is(.cols-5) .prices {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1em;
  }
  .menu-cat.has-cols:is(.cols-5) .price .col-label {
    all: revert;
    margin-right: 0.25em;
    font-weight: 400;
    color: var(--muted);
  }
  .menu-cat.has-cols:is(.cols-5) li.addon .item-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
}

/* Two columns once there is room. */
@media (min-width: 720px) {
  .taps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .menu-cats {
    columns: 2;
  }
}
/* ═══ End of the menu shared with the QR menu ═════════════════════ */

/* ── Specials, on the website ──────────────────────────────────────── */
section.block:not(.alt) .card {
  background: var(--panel);
}

/* ── Menu ────────────────────────────────────────────────────────────── */
/* ── The menu: every section on one page, under a bar of their names that
   stays below the header and jumps to each. The bar slides sideways when
   a bar has more menus than fit, and lights the one being read. */
.menu-jump-bar {
  position: sticky;
  top: var(--header-h, 61px);
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
/* Below a laptop the sections are a picker, the phone's own list to choose
   from; from a laptop up, a row of names that wraps to a second line
   rather than sliding sideways. */
.menu-jump {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.menu-pick {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}
.menu-pick select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 0 44px 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: var(--panel);
  color: var(--ink);
  font: 600 16px/1.2 var(--body);
}
.menu-pick::after {
  content: "";
  position: absolute;
  right: calc(var(--gutter) + 20px);
  top: 50%;
  border: 6px solid transparent;
  border-top-color: var(--ink);
  transform: translateY(-20%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .menu-jump {
    display: flex;
  }
  .menu-pick {
    display: none;
  }
}
.menu-jump a {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.menu-jump a[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* Below the bar of names as well as the header, which the page's own
   scroll padding already allows for: the two add up. */
.menu-section {
  scroll-margin-top: calc(var(--jump-h, 66px) + 16px);
}
/* ── About ───────────────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.about img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about h2 {
  font-size: clamp(32px, 6vw, 52px);
  margin-bottom: 16px;
}
.about p {
  margin: 0 0 14px;
  font-size: 17px;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}

/* ── Visit ───────────────────────────────────────────────────────────── */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.visit .map {
  width: 100%;
  min-height: 300px;
  border: 0;
  border-radius: var(--radius);
  background: var(--panel-2);
}
.facts {
  display: grid;
  gap: 22px;
}
.facts h3 {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.facts p {
  margin: 0;
  font-size: 17px;
}
.facts a {
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.hours td {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.hours td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hours tr.today td {
  color: var(--accent);
  font-weight: 700;
}
.hours-note {
  margin-top: 8px !important;
  font-size: 14px !important;
  color: var(--muted);
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── The bar's own pages: parties, catering, jobs, parking ───────────── */
.content-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.content-page.form-only .inquiry {
  max-width: 680px;
}
.content-main {
  display: grid;
  gap: 34px;
  align-content: start;
}
.page-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.content-block h2 {
  font-size: clamp(26px, 4vw, 34px);
  margin-bottom: 12px;
}
.content-block p {
  margin: 0 0 12px;
  max-width: 62ch;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}
.content-block .note {
  font-size: 14px;
  color: var(--muted);
  margin-top: 12px;
}
.content-block .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
/* A page of like things as cards (`"cards": true`), as many across as fit,
   under a banner rather than a 16:9 photo that pushes them below the fold. */
.page-photo:has(+ .content-cards) {
  aspect-ratio: 5 / 2;
}
.content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.content-cards .content-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 24px 22px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.content-cards .content-block h2 {
  font-size: clamp(22px, 2.6vw, 28px);
}
.content-cards .content-block p {
  margin-bottom: 6px;
}
/* The buttons sit along the bottom, so the cards' rows line up. */
.content-cards .content-block .actions {
  margin-top: auto;
  padding-top: 16px;
}
.bullets {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}
.bullets li::marker {
  color: var(--accent);
}

/* ── Inquiry forms ───────────────────────────────────────────────────── */
.inquiry {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: grid;
  gap: 16px;
  align-self: start;
}
.inquiry h2 {
  font-size: 28px;
}
.form-intro {
  margin: 0;
  color: var(--muted);
}
.fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.field {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.field .req {
  color: var(--accent);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: 400 16px/1.4 var(--body);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: 11px 12px;
  min-height: 46px;
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
/* A field for bots, which people never see. */
.inquiry .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.inquiry button[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.form-status {
  margin: 0;
  font-weight: 600;
}
.form-status:empty {
  display: none;
}
.form-status.is-error {
  color: #ff8a80;
}

/* ── Gallery ─────────────────────────────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--panel-2);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: 34px 0 48px;
  font-size: 14px;
  color: var(--muted);
}
footer .wrap {
  display: grid;
  gap: 8px;
}
footer strong {
  color: var(--ink);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 6px 0;
}
.footer-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.footer-links a:hover {
  text-decoration: underline;
}
footer .socials {
  margin-bottom: 6px;
}

/* ── Wider screens ───────────────────────────────────────────────────── */
@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
  /* The home page's hours, address and phone, without the map: side by
     side once there is room. */
  .visit.no-map .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field.wide {
    grid-column: 1 / -1;
  }
  .inquiry {
    padding: 28px;
  }
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}
/* From a laptop up the pages fit in a row, at seven or fewer (the skill's
   rule): the menu button and its panel go, the actions come back. */
@media (min-width: 1024px) {
  .nav {
    display: flex;
    margin-right: 14px;
  }
  .top .action {
    display: inline-flex;
  }
  .nav-menu {
    display: none;
  }
  .top .wrap {
    gap: 8px;
  }
}
@media (min-width: 960px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .about {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
  }
  .visit {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .visit.no-map {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The page's words on the left, its form beside them. */
  .content-page.with-form {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
  }
  .content-page.with-form .inquiry {
    position: sticky;
    top: 88px;
  }
  section.block {
    padding: 88px 0;
  }
}