/* ═══════════════════════════════════════════════════════════════
   MENU: the timber menu board, inside the barn.
   Relies on core tokens and the shared .section, .shell, .board,
   .window, .reveal, .btn, .eyebrow and .note classes from style.css.
   ═══════════════════════════════════════════════════════════════ */

.menu { --menu-pad: 1.5rem; --menu-rail-h: 56px; /* menu.js measures the real rail height */ }

/* ── 1. Painted wall heading ───────────────────────────────────── */
.menu__head {
  max-width: 64rem;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.menu__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* capped by the column so EVERYTHING never runs off a 320px phone */
  font-size: min(clamp(2.6rem, 7vw, 6rem), calc((100vw - 2 * var(--gutter)) / 7.4));
  line-height: .98;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 2px 3px 1px rgba(26, 20, 16, .6);
  text-wrap: balance;
}

/* ── 2. Category rail (sticky under the header) ────────────────── */
.menu__rail {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-rail);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(43, 24, 16, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-light);
}
.menu__rail.is-stuck { box-shadow: 0 12px 30px -16px rgba(26, 20, 16, .85); }
.menu__rail-sentinel { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.menu__rail-inner { max-width: var(--shell); margin-inline: auto; }

.menu__chips {
  position: relative;
  display: flex;
  gap: .15rem;
  padding: .35rem calc(var(--gutter) + 6px); /* 6px past the mask fade so the end chips' focus ring stays clear */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.menu__chips::-webkit-scrollbar { display: none; }
.menu__chips li { flex: none; }

.menu__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .7rem;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-soft);
  border-radius: 4px;
}
.menu__chip::after {
  content: '';
  position: absolute;
  left: .7rem; right: .7rem; bottom: 5px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
.menu__chip:hover { color: var(--cream); }
.menu__chip.is-active { color: var(--gold); }
.menu__chip.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  .menu__chip { transition: color var(--t) var(--ease); }
  .menu__chip::after { transition: transform var(--t) var(--ease-out); }
}

/* ── 3. The board ──────────────────────────────────────────────── */
.menu__board { padding: clamp(.6rem, 1.5vw, 1.1rem); }

.menu__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}

/* Groups: no card borders. A 1px timber seam is drawn into the 1px gap
   by each cell's spread shadow, plus a subtle inner border on the board. */
.menu__group {
  position: relative;
  min-width: 0;
  padding: var(--menu-pad);
  line-height: 1.4;
  /* Core html scroll-padding-top already covers var(--header-h) + 16px, so the
     margin only needs the rail: the group lands 12px under the stuck rail. */
  scroll-margin-top: calc(var(--menu-rail-h) - 4px);
  box-shadow: 0 0 0 1px var(--timber-2);
}

/* A group jumped to from the rail (or a deep link) reveals instantly (set by
   menu.js). Beats .js .reveal on specificity and cancels the --d delay too. */
.js .menu__group.menu__group--snap { transition: none; }

.menu__group-head {
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--brown);
}
.menu__group-title {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--brown);
}
.menu__board .menu__sub {
  margin: .3rem 0 0;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.menu__board .menu__sub--h4 { margin: -.1rem 0 .2rem; }

.menu__h4 {
  margin: 1.1rem 0 .15rem;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--brown);
}
.menu__group-head + .menu__h4,
.menu__group-head + div > .menu__h4:first-child,
.menu__main > .menu__h4:first-child,
.menu__cols > div:first-child > .menu__h4:first-child { margin-top: 0; }

/* ── 4. Items ──────────────────────────────────────────────────── */
.menu__list { display: grid; row-gap: .1rem; }

.menu__item {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr auto;
  column-gap: .5rem;
  align-items: baseline;
  padding: .45rem 0;
  min-width: 0;
}
.menu__name {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--brown);
  overflow-wrap: anywhere;
}
.menu__leader {
  min-width: 1.5rem;
  height: 0;
  border-bottom: 2px dashed var(--sage);
  transform: translateY(-2px);
}
.menu__price {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.menu__slash { color: var(--ink-soft); font-weight: 600; padding-inline: .05em; }
.menu__desc {
  grid-column: 1 / -1;
  margin-top: .15rem;
  max-width: 52ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Small sign tags: "Double $14.50", "Add tortilla bread $1.50", sauces */
.menu__tag {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-top: .45rem;
  padding: .2rem .55rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sign);
  color: var(--brown);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.menu__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.menu__tags .menu__tag { margin-top: 0; }
.menu__line + .menu__tag { margin-top: .7rem; }

/* Notes with a bold lead in */
.menu__board .menu__line {
  margin: .6rem 0 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.menu__board .menu__line b { color: var(--brown); font-weight: 700; }

/* "Make it a Feed" dark tag block, reused in three groups */
.menu__board .menu__feed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1rem;
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  background: var(--brown);
  border-radius: var(--r-sign);
  color: var(--cream);
  font-size: .92rem;
  line-height: 1.35;
}
.menu__board .menu__feed--stack { flex-direction: column; align-items: flex-start; gap: .25rem; }
.menu__feed-lead {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}
.menu__board .menu__feed-opt { color: var(--cream); }
.menu__board .menu__feed-opt b {
  margin-left: .2rem;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ── 5. Feature band and photos ────────────────────────────────── */
.menu__board .menu__band {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: calc(var(--menu-pad) * -1) calc(var(--menu-pad) * -1) 1.2rem;
  padding: .5rem var(--menu-pad);
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2rem; /* large text: cream on red passes AA at this size */
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}
.menu__band::after { content: ''; flex: 1; height: 1px; background: rgba(245, 238, 225, .4); }

.menu__group--bone .menu__name { font-size: 1.25rem; }
.menu__group--bone .menu__price { font-size: 1.7rem; line-height: 1; }
.menu__group--bone .menu__item { padding: .6rem 0; }

.menu__split { display: grid; gap: 1.25rem; min-width: 0; }
.menu__main { min-width: 0; }
.menu__photo { aspect-ratio: 4 / 3; align-self: start; }
.menu__photo picture, .menu__photo img { height: 100%; }

/* Little Barnies: chick and note */
.menu__group-head--kids {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.menu__board .menu__kids {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown);
}
.menu__chick {
  width: 38px; height: 38px; flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 6. CTA under the board ────────────────────────────────────── */
.menu__cta {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.menu__cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1rem;
}

/* ── 7. Layout: tablet (6 columns) ─────────────────────────────── */
@media (min-width: 760px) {
  .menu__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .menu__group { grid-column: span 6; }
  .menu__group--meals, .menu__group--schnitzel,
  .menu__group--beef, .menu__group--build,
  .menu__group--wrap, .menu__group--barnies { grid-column: span 3; }

  .menu__photo { aspect-ratio: 1; }
  .menu__split--bone { grid-template-columns: minmax(0, 1fr) minmax(200px, 38%); align-items: start; gap: 1.5rem; }
  .menu__split--wings { grid-template-columns: minmax(0, 1fr) minmax(180px, 34%); align-items: start; gap: 1.5rem; }
  .menu__split--chips { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
  .menu__split--sauces { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.25rem; }
  .menu__split--sauces .menu__photo { max-width: 280px; aspect-ratio: 4 / 3; }

  .menu__list--2,
  .menu__group--sides .menu__list,
  .menu__group--burgers .menu__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .menu__cols { display: grid; gap: .45rem 2rem; } /* row gap + h4 margin matches the other h4 rhythm */
}

/* ── 8. Layout: desktop (12 columns) ───────────────────────────── */
@media (min-width: 980px) {
  /* Mouse users get no hidden horizontal scroller: the rail wraps instead */
  .menu__chips {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    padding: .3rem var(--gutter);
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .menu__chip { min-height: 36px; padding: .3rem .55rem; font-size: .85rem; letter-spacing: .04em; }
  .menu__chip::after { left: .55rem; right: .55rem; bottom: 3px; }

  .menu__split--chips { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .menu__split--sauces { grid-template-columns: minmax(0, 1fr) minmax(150px, 42%); align-items: start; }
  .menu__split--sauces .menu__photo { max-width: none; aspect-ratio: 1; }

  .menu__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .menu__group { grid-column: span 12; }
  .menu__group--bone { grid-column: span 7; }
  .menu__group--meals { grid-column: span 5; }
  .menu__group--schnitzel { grid-column: span 4; }
  .menu__group--wings { grid-column: span 8; }
  .menu__group--burgers { grid-column: span 7; }
  .menu__group--beef { grid-column: span 5; }
  .menu__group--wrap, .menu__group--barnies { grid-column: span 6; }

  .menu__group--burgers .menu__list { grid-template-columns: minmax(0, 1fr); }
  .menu__group--wings .menu__main { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
  .menu__group--wings .menu__group-head,
  .menu__group--wings .menu__feed { grid-column: 1 / -1; }
  .menu__group--wings .menu__main > div > .menu__h4:first-child { margin-top: 0; }
  .menu__cols > div > .menu__h4:first-child { margin-top: 0; }
  .menu__cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 2.5rem; align-items: start; }
  .menu__board .menu__cols-feed .menu__feed { margin-top: 0; }
}

@media (min-width: 1200px) {
  .menu__group--wrap { grid-column: span 3; }
  .menu__group--barnies { grid-column: span 4; }
  .menu__group--sides { grid-column: span 5; }
  .menu__group--sides .menu__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── 9. Print: everything visible, no decoration ───────────────── */
@media print {
  .menu__rail { display: none; }
  .menu__title { color: #000; text-shadow: none; }
  .menu__board { background: none; box-shadow: none; color: #000; }
  .menu__group { box-shadow: none; border-top: 1px solid #999; break-inside: avoid; }
  .menu__group-title, .menu__name, .menu__price, .menu__h4 { color: #000; }
  .menu__board .menu__band { background: none; color: #000; border-bottom: 1px solid #000; }
  .menu__board .menu__feed { background: none; color: #000; border: 1px solid #000; }
  .menu__feed-lead, .menu__board .menu__feed-opt, .menu__board .menu__feed-opt b { color: #000; }
  .menu__leader { border-color: #999; }
  .menu .reveal { opacity: 1 !important; transform: none !important; }
  .menu .window--reveal > picture { clip-path: none !important; animation: none !important; }
  .menu__cta { display: none; }
}

/* The hen fence below rises about 78px above the join; keep room for it. */
#menu { padding-bottom: max(var(--section), 96px); }

/* ── 10. Phones: a shelf of signs, then one board at a time ────── */
/* Everything below only shows under 760px. On tablet and desktop the
   compact block, the tab rail, the pager and the sheet foot are display
   none, so the timber board above renders exactly as it always has.
   Ordering links now live in three places: the page order bar, the
   Hungry yet? buttons under the board, and the sheet foot here. */
.menu { --sheet-head-h: 60px; --menu-hen: 24px; }
.menu__compact, .menu__tabs-wrap, .menu__pager, .menu__fine, .menu__foot, .menu__stamp, .menu__live { display: none; }
.menu__sheet-head, .menu__close { display: none; }

@media (max-width: 759px) {
  .menu__head { margin-bottom: 1.1rem; }
  .menu__compact { display: block; }

  /* Marker note over the right end of the shelf (the third and last note on the site) */
  .menu__squiz {
    display: flex; justify-content: flex-end; align-items: flex-end; gap: .3rem;
    margin: 0 .5rem .15rem 0;
    font-size: 1.2rem;
    transform: rotate(-3deg);
  }
  .menu__squiz-arrow {
    width: 28px; height: 32px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transform: translateY(9px);
  }

  /* ── The shelf: timber signs standing along a gold fence rail ── */
  .menu__shelf { position: relative; margin: 0 calc(-1 * var(--gutter)); }
  .menu__signs {
    display: flex;
    gap: .55rem;
    padding: .4rem var(--gutter) 13px;   /* 13px: the rail runs under the signs */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--gutter) * .6), #000 calc(100% - 52px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 calc(var(--gutter) * .6), #000 calc(100% - 52px), transparent);
  }
  .menu__signs::-webkit-scrollbar { display: none; }
  .menu__signs li { flex: none; display: flex; scroll-snap-align: start; }

  .menu__sign {
    display: flex; flex-direction: column;
    width: 122px;
    min-height: 100%;
    border: 2px solid var(--brown);
    border-radius: var(--r-sign);
    background-color: var(--timber);
    background-image:
      repeating-linear-gradient(90deg, transparent 0 96px, rgba(74, 46, 24, .12) 96px 97px, transparent 97px 100px),
      var(--grain);
    background-size: auto, var(--grain-size);
    color: var(--brown);
    overflow: hidden;
    box-shadow: 0 10px 20px -12px rgba(26, 20, 16, .95), inset 0 1px 0 rgba(255, 255, 255, .35);
    -webkit-tap-highlight-color: transparent;
  }
  .menu__sign:active { transform: translateY(1px) scale(.985); }
  .menu__sign-pic {
    display: grid; place-items: center;
    height: 88px;
    border-bottom: 2px solid var(--brown);
  }
  .menu__sign-ico {
    width: 46px; height: 46px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .menu__sign--photo .menu__sign-pic {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--char);
  }
  .menu__sign--photo picture { position: absolute; inset: 0; }
  .menu__sign--photo img { width: 100%; height: 100%; object-fit: cover; }
  .menu__sign--photo .menu__sign-pic::after {
    /* the red steel window frame, as a rim over the photo */
    content: ''; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 3px var(--red-2);
    pointer-events: none;
  }
  .menu__sign-name {
    display: block;
    padding: .5rem .6rem 0;
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.05;
  }
  .menu__sign-meta {
    display: block;
    margin-top: auto;
    min-height: 1.15em;
    padding: .18rem .6rem .5rem;
    font-size: .74rem;
    line-height: 1.15;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }

  /* The rail the signs stand on: the walker rail's own picket line, in gold */
  .menu__shelf-rail {
    position: absolute; left: 0; right: 0; bottom: 3px;
    height: 8px;
    background: var(--wood);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8' shape-rendering='crispEdges'%3E%3Crect y='6' width='24' height='2' fill='%23000'/%3E%3Cpath d='M10 2l2-2 2 2v6h-4z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8' shape-rendering='crispEdges'%3E%3Crect y='6' width='24' height='2' fill='%23000'/%3E%3Cpath d='M10 2l2-2 2 2v6h-4z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-size: 24px 8px; mask-size: 24px 8px;
    pointer-events: none;
  }
  .menu__shelf::after {
    /* the rail's shade side */
    content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px;
    background: var(--wood-2);
    pointer-events: none;
  }

  /* ── The red painted sign: View full menu ──────────────────── */
  .menu__open {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: 64px;
    /* centred between the shelf's fence and the hen fence below the section: the gap below is
       the section's bottom padding, max(var(--section), 96px), less the half of the 60px phone
       fence that rises into it */
    margin-top: calc(max(var(--section), 96px) - 30px);
    padding: .8rem 1.5rem;
    background-color: var(--red);
    background-image: var(--grain);
    background-size: var(--grain-size);
    border: 2px solid var(--brown);
    border-radius: var(--r-sign);
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5rem;   /* 24px: large text, cream on red passes AA at this size */
    letter-spacing: .01em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 2px 3px 0 rgba(26, 20, 16, .45);
    box-shadow: 0 14px 28px -12px rgba(218, 31, 38, .85), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(26, 20, 16, .28);
    -webkit-tap-highlight-color: transparent;
  }
  .menu__open:active { transform: translateY(1px); }
  /* two gold nail heads in the top corners */
  .menu__open::before, .menu__open::after {
    content: ''; position: absolute; top: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #F6DC9C, var(--wood-2) 70%);
    box-shadow: 0 1px 1px rgba(26, 20, 16, .55);
  }
  .menu__open::before { left: 8px; }
  .menu__open::after { right: 8px; }

  /* ── The sheet: head, tab rail, one board, order foot ────────── */
  .js .menu__full { display: none; }
  .js .menu__full.is-open {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 85;
    background-color: var(--barn);
    background-image:
      repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 118px),
      var(--grain);
    background-size: auto, var(--grain-size);
  }
  .js .menu__full.is-open .menu__sheet-head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--sheet-head-h);
    padding: 0 calc(var(--gutter) - 6px) 0 var(--gutter);
    background-color: var(--brown);
    background-image: var(--grain);
    background-size: var(--grain-size);
    border-bottom: 1px solid var(--line-light);
  }
  .menu__sheet-title {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-display); font-weight: 400;
    font-size: 1.35rem; line-height: 1; color: var(--cream);
    text-shadow: 1px 2px 0 rgba(26, 20, 16, .5);
  }
  .menu__sheet-hen { width: 24px; height: 28px; fill: var(--cream); flex: none; }
  .js .menu__full.is-open .menu__close {
    display: grid; place-content: center; flex: none;
    width: 44px; height: 44px;
    border-radius: var(--r-sign);
    color: var(--cream);
  }
  .menu__close span {
    display: block; width: 22px; height: 3px; border-radius: 2px;
    background: var(--cream); grid-area: 1 / 1;
  }
  .menu__close span:first-child { transform: rotate(45deg); }
  .menu__close span:last-child { transform: rotate(-45deg); }
  .js .menu__full.is-open .menu__close:focus-visible { outline-offset: -3px; }

  /* Tab rail: painted timber tabs, the active one lifted, the pixel hen standing
     on the gold rail underneath it. The desktop chip rail is not used in the sheet. */
  .js .menu__full.is-open .menu__rail { display: none; }
  .js .menu__full.is-open .menu__tabs-wrap {
    display: block; flex: none;
    position: relative;
    background: rgba(43, 24, 16, .94);
    border-bottom: 2px solid var(--wood-2);
    box-shadow: 0 12px 30px -16px rgba(26, 20, 16, .85);
  }
  .menu__tabs {
    position: relative;
    display: flex;
    gap: .3rem;
    padding: 10px calc(var(--gutter) + 6px) calc(var(--menu-hen) + 6px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .menu__tabs::-webkit-scrollbar { display: none; }
  .menu__tabs li { flex: none; }
  .menu__tab {
    display: inline-flex; align-items: center;
    min-height: 44px;
    padding: .5rem .8rem;
    border: 2px solid transparent;
    border-radius: var(--r-sign);
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--paper-soft);
    -webkit-tap-highlight-color: transparent;
  }
  .menu__tab[aria-selected="true"] {
    color: var(--brown);
    border-color: var(--brown);
    background-color: var(--timber);
    background-image: var(--grain);
    background-size: var(--grain-size);
    box-shadow: 0 8px 16px -8px rgba(26, 20, 16, .95), inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  .menu__tab:focus-visible { outline-offset: -3px; }
  .menu__tabs-rail {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 8px;
    background: var(--wood);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8' shape-rendering='crispEdges'%3E%3Crect y='6' width='24' height='2' fill='%23000'/%3E%3Cpath d='M10 2l2-2 2 2v6h-4z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8' shape-rendering='crispEdges'%3E%3Crect y='6' width='24' height='2' fill='%23000'/%3E%3Cpath d='M10 2l2-2 2 2v6h-4z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-size: 24px 8px; mask-size: 24px 8px;
    pointer-events: none;
  }
  /* The hen (fence.js sprite) lives inside the scrolling list so she rides with the tabs */
  .menu__tabs .rail__hen {
    position: absolute; left: 0; bottom: 2px;
    width: var(--menu-hen); height: var(--menu-hen);
    margin-left: calc(var(--menu-hen) / -2);
    transform: none;
    pointer-events: none;
  }
  .menu__tabs .rail__hen.is-back { transform: scaleX(-1); }

  /* The panel is the only thing that scrolls */
  .js .menu__full.is-open .menu__panel {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    scroll-behavior: auto;
    padding: .9rem 0 1.25rem;
  }
  .js .menu__full.is-open .menu__panel:focus-visible { outline-offset: -3px; }
  .js .menu__full.is-open .menu__board { position: relative; }
  .js .menu__full.is-open .menu__grid { position: relative; z-index: 1; }
  .js .menu__full.is-open .menu__pager, .js .menu__full.is-open .menu__fine { position: relative; z-index: 1; }
  .js .menu__full.is-open .menu__group { display: none; scroll-margin-top: .5rem; }
  .js .menu__full.is-open .menu__group.is-current { display: block; }
  .js .menu__full.is-open .menu__cta { display: none; }

  /* Photo first on a board, cut to a 2:1 strip so the first price stays above the fold */
  .js .menu__full.is-open .menu__split .menu__photo { order: -1; aspect-ratio: 2 / 1; }
  .js .menu__full.is-open .menu__split--chips .menu__photo { order: 0; aspect-ratio: 2 / 1; }

  /* App sized rows: the price is the loudest thing on the row (portion board treatment) */
  .js .menu__full.is-open .menu__item { padding: .55rem 0; }
  .js .menu__full.is-open .menu__price {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.12rem;
    letter-spacing: 0;
  }
  .js .menu__full.is-open .menu__group--bone .menu__price { font-size: 1.5rem; }
  .js .menu__full.is-open .menu__group--bone .menu__item { padding: .5rem 0; }
  .js .menu__full.is-open .menu__group-title { font-size: 1.35rem; }

  /* Boards without a photo get the outlined hen burnt into the timber */
  .js .menu__full.is-open .menu__board--bare .menu__stamp {
    display: block;
    position: absolute; right: 8px; bottom: 6px; z-index: 0;   /* burnt into the timber, under the signs */
    width: 96px; height: 110px;
    fill: var(--brown);
    opacity: .1;
    pointer-events: none;
  }

  /* Previous and next boards: painted signs at the foot of the board */
  .js .menu__full.is-open .menu__pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;   /* both signs share the taller one's height */
    gap: .5rem;
    padding: 1rem var(--menu-pad) .2rem;
    border-top: 1px solid var(--timber-2);
  }
  .menu__pager-count { align-self: center; }
  .menu__pager-btn {
    display: flex; align-items: center; gap: .45rem;
    min-width: 0; max-width: 100%;
    min-height: 54px;
    padding: .45rem .7rem;
    border: 2px solid var(--brown);
    border-radius: var(--r-sign);
    background-color: var(--cream);
    background-image: var(--grain);
    background-size: var(--grain-size);
    color: var(--brown);
    text-align: left;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .5);
    -webkit-tap-highlight-color: transparent;
  }
  .menu__pager-btn--next { justify-self: end; text-align: right; }
  .menu__pager-btn--prev { justify-self: start; }
  @media (max-width: 359px) {
    /* narrow phones: the count takes its own row and the small caption goes */
    .js .menu__full.is-open .menu__pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: .6rem; }
    .menu__pager-count { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    .menu__pager-label small { display: none; }
    .menu__pager-btn { padding: .45rem .55rem; gap: .35rem; }
    .menu__pager-label b { font-size: .84rem; }
  }
  .menu__pager-btn .ico { width: 20px; height: 20px; stroke-width: 2.2; }
  .menu__pager-btn--prev .ico { transform: scaleX(-1); }
  .menu__pager-btn:active { transform: translateY(1px); }
  .menu__pager-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
  .menu__pager-label { display: grid; gap: .1rem; min-width: 0; line-height: 1.1; }
  .menu__pager-label small {
    font-family: var(--font-cond); font-weight: 700;
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .menu__pager-label b {
    font-family: var(--font-cond); font-weight: 700;
    font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
  }
  .menu__pager-count {
    font-family: var(--font-cond); font-weight: 700;
    font-size: .8rem; letter-spacing: .12em;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .js .menu__full.is-open .menu__fine {
    display: block;
    margin: .9rem var(--menu-pad) .4rem;
    text-align: center;
    font-size: .85rem; line-height: 1.45;
    color: var(--ink-soft);
  }
  .menu__fine a { color: var(--brown); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: .2em; }

  /* The sheet's own order foot, in the order bar's clothes (same buttons, same place) */
  .js .menu__full.is-open .menu__foot {
    display: flex; flex: none; gap: .5rem;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(74, 46, 24, .97);
    border-top: 2px solid var(--wood-2);
  }
  .js .menu__full.is-open .menu__live { display: block; }
}

/* ── 11. Phone motion ─────────────────────────────────────────── */
@media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
  /* Shelf entrance: signs rise one after another once the shelf is in view */
  .js .menu__shelf .menu__sign {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--ease-out) calc(var(--i, 0) * 45ms), transform 520ms var(--ease-out) calc(var(--i, 0) * 45ms);
  }
  .js .menu__shelf.is-in .menu__sign {
    opacity: 1; transform: none;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);   /* entrance done: quick press feedback */
  }
  .js .menu__shelf.is-in .menu__sign:active { transform: translateY(1px) scale(.985); }
  .js .menu__shelf-rail, .js .menu__shelf::after { opacity: 0; transition: opacity 240ms var(--ease-out) 300ms; }
  .js .menu__shelf.is-in .menu__shelf-rail, .js .menu__shelf.is-in::after { opacity: 1; }

  .menu__sign, .menu__open, .menu__pager-btn { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
  .menu__tab { transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease); }

  /* The sheet rises; the new board slides in from the side you are heading */
  .js .menu__full.is-open { animation: sheetIn 320ms var(--ease-out); }
  @keyframes sheetIn { from { opacity: 0; transform: translateY(28px); } }
  .js .menu__full.is-open .menu__grid.is-sliding { animation: boardIn 260ms var(--ease-out); }
  @keyframes boardIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 22px)); } }

  /* The hen walks the rail to the tab you picked */
  .menu__tabs .rail__hen { transition: left 420ms linear; }
}

@media print {
  .menu__compact, .menu__tabs-wrap, .menu__pager, .menu__fine, .menu__foot, .menu__stamp, .menu__live { display: none !important; }
  .js .menu__full { display: block !important; position: static !important; }
  .js .menu__full .menu__panel { overflow: visible !important; }
  .js .menu__full .menu__group { display: block !important; }
  .js .menu__full .menu__cta { display: none; }
}

/* ── 12. The dedicated menu page (/menu/) ──────────────────────── */
/* site/menu/index.html marks its section #menu.menu--page and its body
   .page-menu. Every rule here is scoped to that class, so the homepage never
   matches any of them. Tablet and desktop get the homepage board untouched.
   Phones get the whole board inline, one column, instead of the shelf and
   the sheet: the chip rail sticks under the header (menu.js runs its scroll
   spy at every width on this page) and the boards borrow the sheet's
   phone treatment so the two read as the same menu. */

/* Stable layout while the web fonts load (Core Web Vitals, CLS). The first
   paint uses fallback fonts, and the stock ones set much wider than Barlow
   Condensed: the desktop chip rail wrapped to two rows until the fonts landed
   (the whole board then jumped 36px, CLS 0.2) and a phone's page came out
   465px taller (deep links overshot). These faces stand in during the swap:
   a local font scaled (size-adjust) to the web font's average width over this
   page's own text, with the web font's ascent and descent (overrides are
   divided by the size-adjust, which scales them too). Arial covers Apple and
   Windows, Roboto covers Android; where neither exists the face fails and the
   stack goes on as before. Only .page-menu names these families, so the
   homepage never loads them. Widths measured in Chrome over the page's text at
   390 and 1350: Barlow 400 / 500 / 700 = Arial 95.8 / 97.0 / Arial Bold 91.8,
   Roboto 96.9 / 97.6 / 98.6; Barlow Condensed 600 / 700 = Arial Bold 68.3 /
   67.9, Roboto Bold 73.8 / 73.5; Alfa Slab One = Georgia Bold 103.6, Roboto
   Bold 115.1. Web font metrics: Barlow and Barlow Condensed ascent 100%,
   descent 20%; Alfa Slab One 103.6% and 33.3%; no line gap. */
@font-face { font-family: 'BH Barlow Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'); size-adjust: 95.8%; ascent-override: 104.38%; descent-override: 20.88%; line-gap-override: 0%; }
@font-face { font-family: 'BH Barlow Fallback'; font-weight: 500; src: local('Arial'), local('ArialMT'); size-adjust: 97%; ascent-override: 103.09%; descent-override: 20.62%; line-gap-override: 0%; }
@font-face { font-family: 'BH Barlow Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 94%; ascent-override: 106.38%; descent-override: 21.28%; line-gap-override: 0%; }
@font-face { font-family: 'BH Barlow Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 91.8%; ascent-override: 108.93%; descent-override: 21.79%; line-gap-override: 0%; }
@font-face { font-family: 'BH Barlow Fallback R'; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 96.9%; ascent-override: 103.2%; descent-override: 20.64%; line-gap-override: 0%; }
@font-face { font-family: 'BH Barlow Fallback R'; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), local('Roboto'), local('Roboto-Regular'); size-adjust: 97.6%; ascent-override: 102.46%; descent-override: 20.49%; line-gap-override: 0%; }
@font-face { font-family: 'BH Barlow Fallback R'; font-weight: 600 700; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 98.6%; ascent-override: 101.42%; descent-override: 20.28%; line-gap-override: 0%; }
@font-face { font-family: 'BH Condensed Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 68.3%; ascent-override: 146.41%; descent-override: 29.28%; line-gap-override: 0%; }
@font-face { font-family: 'BH Condensed Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 67.9%; ascent-override: 147.28%; descent-override: 29.46%; line-gap-override: 0%; }
@font-face { font-family: 'BH Condensed Fallback R'; font-weight: 600 700; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 73.6%; ascent-override: 135.87%; descent-override: 27.17%; line-gap-override: 0%; }
@font-face { font-family: 'BH Alfa Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 103.6%; ascent-override: 100%; descent-override: 32.14%; line-gap-override: 0%; }
@font-face { font-family: 'BH Alfa Fallback R'; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 115.1%; ascent-override: 90.01%; descent-override: 28.93%; line-gap-override: 0%; }
.page-menu {
  --font-display: 'Alfa Slab One', 'BH Alfa Fallback', 'BH Alfa Fallback R', 'Rockwell', 'Roboto Slab', serif;
  --font-sans:    'Barlow', 'BH Barlow Fallback', 'BH Barlow Fallback R', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cond:    'Barlow Condensed', 'BH Condensed Fallback', 'BH Condensed Fallback R', 'Barlow', system-ui, sans-serif;
}
/* The same measures in em: a ch is the width of the fallback's 0 until the
   fonts land (Barlow's 0 is .565em), so 52ch let the dish lines rewrap */
.menu--page .menu__desc { max-width: 29.38em; }   /* 52ch of Barlow */
.page-menu .lede { max-width: 30.51em; }          /* 54ch of Barlow */

@media (max-width: 759px) {
  /* Section 10 hides the board on phones until the sheet opens; not here */
  .js .page-menu .menu__full { display: block; }

  .menu--page { --menu-pad: 1.25rem; }

  /* The chip rail: no backdrop blur on phones (a blurred sticky bar repaints
     every scroll frame in iPhone Safari), a touch more opaque instead */
  .menu--page .menu__rail {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(43, 24, 16, .97);
    border-bottom: 2px solid var(--wood-2);
    margin-bottom: 1.25rem;
  }
  .menu--page .menu__chips { gap: .3rem; }
  .menu--page .menu__chip { padding: .45rem .75rem; }

  /* Boards: the sheet's app sized rows, the price the loudest thing on the row */
  .menu--page .menu__group-title { font-size: 1.35rem; }
  .menu--page .menu__item { padding: .55rem 0; }
  .menu--page .menu__price {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.12rem;
    letter-spacing: 0;
  }
  .menu--page .menu__group--bone .menu__price { font-size: 1.5rem; }
  .menu--page .menu__group--bone .menu__item { padding: .5rem 0; }

  /* Photos lead their board as a 2:1 strip, as in the sheet; the chips photo
     stays with the sauces it sits beside */
  .menu--page .menu__split .menu__photo { order: -1; aspect-ratio: 2 / 1; }
  .menu--page .menu__split--chips .menu__photo { order: 0; aspect-ratio: 2 / 1; }

  /* The fine print under the board (the sheet's, same words) */
  .menu--page .menu__fine {
    display: block;
    margin: 1rem var(--menu-pad) .5rem;
    text-align: center;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--ink-soft);
  }
}