/* Bánh Mì EM - two-ink screenprint.
   Replaces the shared stylesheet entirely.

   The premise: this page is printed with exactly two inks, green and orange,
   on yellowed stock. Their logo is already a flat two-colour enamel badge, so
   the whole system extends that mark rather than sitting next to it.

   Green leads (it's their ink); orange is the second plate. The signature is
   misregistration - the display type carries an offset orange ghost, the way
   a two-colour press slips out of alignment. */

:root {
  --green:       #3f8f2c;
  --green-deep:  #235c1c;
  --green-dark:  #163d12;
  --orange:      #e2621a;
  --orange-deep: #b8460c;

  --paper:       #f2e5c6;   /* yellowed stock, not editorial cream */
  --paper-deep:  #e6d3a8;
  --ink:         #241a0e;
  --knock:       #fdf8ec;   /* knockout white, warmed to match the paper */

  --rule: 3px;
  --wrap: 880px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--paper);
  /* halftone dot screen - the texture is what separates print from editorial */
  background-image: radial-gradient(var(--paper-deep) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  color: var(--ink);
  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: var(--green-deep); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 46px 20px; }

/* Utility label type - small, wide, uppercase, like printed caption stock. */
.eyebrow, .hours caption, .item__flag, .band__meta {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .18em; font-weight: 700;
}

/* ---------- the signboard ---------- */

.sign {
  background: var(--green);
  border-bottom: var(--rule) solid var(--green-dark);
  color: var(--knock);
  position: relative;
  overflow: hidden;
}

/* Their banner photo, printed as a single-colour plate: stripped of its own
   colour so the green panel reads through it. Kept dark enough that the
   knockout type stays legible over any part of the image. */
.sign__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(.72);
  opacity: .55;
}

/* Ink coverage is never perfectly flat on a press. */
.sign::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(rgba(0,0,0,.16) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  pointer-events: none;
}
.sign__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 40px 20px 34px;
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; align-items: center;
}
/* A grid item's min-content width is its floor - the nowrap rating row below
   would otherwise push the whole signboard past the viewport, and .sign's
   overflow:hidden clips that off silently rather than scrolling it. */
.sign__inner > div { min-width: 0; }
.sign__lang { float: right; margin: .5em 0 0 1em; position: relative; z-index: 2; }
.sign__lang .langs__open { gap: .5em; font-size: 1.25em; }

/* The misregistered plate. The orange copy sits behind, offset, as if the
   second run landed 3px off. */
.sign__name {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height: .92;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  position: relative;
  color: var(--knock);
  /* Without its own stacking context the z-index:-1 ghost below would paint
     behind the green panel and disappear. isolate keeps it inside the h1,
     above the panel background but under the white text. */
  isolation: isolate;
}
.sign__name::before {
  content: attr(data-name);
  position: absolute; left: 3px; top: 3px;
  color: var(--orange);
  z-index: -1;
}

.sign__sub {
  margin: 8px 0 18px;
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 700; color: rgba(253,248,236,.85);
}

.sign__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.sign__rating { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 20px; }
@media (max-width: 640px) {
  .sign__rating { flex-wrap: nowrap; gap: 12px; }
  .sign__rating .grating { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: .7rem; gap: 5px; }
  .sign__rating .grating__score { font-size: .86rem; }
}
/* Below this the two star blocks and their labels cannot share a line. The
   score and its source carry the claim, so the glyphs go rather than the row
   wrapping and reading as two separate claims. */
@media (max-width: 420px) {
  .sign__rating .grating__stars { display: none; }
}

/* Open/closed reads as a rubber stamp, tilted off-axis. */
.status {
  display: inline-block;
  padding: 6px 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
  font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  transform: rotate(-1.5deg);
  background: rgba(253,248,236,.1);
}
.status--open   { color: var(--knock); background: var(--orange); border-color: var(--orange-deep); }
.status--closed { color: var(--knock); background: var(--green-dark); }
.status--unknown { opacity: .7; }

.rating {
  color: var(--knock); font-size: .84rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.dot { opacity: .5; }
.sign__note { margin: 14px 0 0; font-size: .88rem; color: rgba(253,248,236,.85); }

/* ---------- buttons: printed blocks, hard edges, no radius ---------- */

.cta { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 20px;
  border: 2px solid var(--green-dark);
  background: var(--knock);
  color: var(--green-dark);
  font-weight: 800; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--green-dark);
  transition: transform .08s linear, box-shadow .08s linear;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--green-dark); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }

.btn--primary {
  background: var(--orange); color: var(--knock);
  border-color: var(--orange-deep); box-shadow: 4px 4px 0 var(--orange-deep);
}
.btn--primary:hover { box-shadow: 2px 2px 0 var(--orange-deep); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- circular stamp headings ---------- */

.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 118px; height: 118px; padding: 10px 14px;
  border: var(--rule) solid var(--green); border-radius: 50%;
  color: var(--green-deep);
  font-size: .84rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  text-align: center; line-height: 1.15;
  transform: rotate(-2deg);
  background: var(--paper);
}

/* ---------- menu as a printed price list ---------- */

.menu__head { margin: 0 0 6px; font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.allergen {
  border-left: var(--rule) solid var(--orange);
  padding: 8px 0 8px 14px; margin: 0 0 34px;
  font-size: .88rem; max-width: 60ch;
}

.course { margin-bottom: 40px; }
.course__head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.course__rule { flex: 1; height: 0; border-top: var(--rule) double var(--green); }

/* Photo-led cards. Photos stay full colour - the food has to sell itself, and
   a duotone treatment would make it look inedible - but they are framed the
   way everything else here is: a green plate edge with the orange plate
   slipped behind it, the same misregistration as the display type. */
.items {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 30px 26px;
  grid-template-columns: repeat(3, 1fr);
}
/* An item left over on the last row sits in the middle of it, at a normal
   card's width. */
.item:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1; justify-self: center; width: calc((100% - 52px) / 3);
}
.item { display: flex; flex-direction: column; }
.item--out { opacity: .5; }

.item__frame { position: relative; display: block; }
.item__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: translate(6px, 6px); background: var(--orange);
}
.item__img, .item__noimg {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border: var(--rule) solid var(--green-dark); background: var(--paper-deep);
}
.item__noimg { border-style: dashed; }

/* The price is a tab on the second plate, printed into the corner. */
.item__price {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--orange); color: var(--knock);
  padding: 7px 14px;
  font-weight: 900; font-size: .95rem; font-variant-numeric: tabular-nums;
}

/* The whole photograph is the tap target. */
.item__open { position: absolute; inset: 0; z-index: 3; }
.item__frame:hover .item__img { filter: brightness(.94); }
.item__text { padding: 14px 2px 0; }
.item__name {
  margin: 0 0 4px; font-weight: 900; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--green-deep);
}
/* Kept, but clamped: it says what is in the roll, which is worth reading,
   and is not what the card is for. */
.item__desc {
  margin: 0; font-size: .86rem; line-height: 1.45; color: rgba(36,26,14,.72);
  white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.item__flag { margin: 8px 0 0; color: var(--orange-deep); }

/* ---------- catering band ---------- */

.band {
  background: var(--green-deep);
  color: var(--knock);
  border-top: var(--rule) solid var(--green-dark);
  border-bottom: var(--rule) solid var(--green-dark);
  max-width: none;
}
.band > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.band h2 { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; margin: 0 0 10px; }
.band p { max-width: 56ch; }
.band__meta { color: rgba(253,248,236,.8); }
.band .btn { border-color: var(--knock); box-shadow: 4px 4px 0 var(--green-dark); }
.band .btn:hover { box-shadow: 2px 2px 0 var(--green-dark); }

/* ---------- find us ---------- */

#find-us h2 { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; margin: 0 0 22px; }
.find { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.address { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.parking { font-size: .9rem; margin: 0 0 10px; }

.hours { border-collapse: collapse; width: 100%; max-width: 330px; margin: 20px 0; }
.hours caption { text-align: left; color: var(--green-deep); padding-bottom: 10px; }
.hours th, .hours td { padding: 7px 0; text-align: left; font-weight: 600; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr + tr { border-top: 1px dashed rgba(35,92,28,.4); }

/* Thick double rule around the map, like a printed plate border. */
.find__map { border: var(--rule) double var(--green-deep); background: var(--knock); }
.find__map iframe { width: 100%; height: 310px; border: 0; display: block; filter: saturate(.85); }
.find__maplink {
  display: block; padding: 9px 12px;
  border-top: 2px solid var(--green-deep);
  font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none; color: var(--green-deep);
}

/* ---------- footer ---------- */

.foot {
  background: var(--green-dark); color: rgba(253,248,236,.9);
  text-align: center; padding: 30px 20px 38px;
  font-size: .84rem;
}
.foot p { margin: 0 0 8px; }
.foot__social a { color: var(--knock); margin: 0 10px; }
.foot__credit { font-size: .75rem; opacity: .7; }
.foot__credit a { color: inherit; }

@media (max-width: 760px) {
  .find { grid-template-columns: 1fr; }
  .cta .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 520px) {
  .cta .btn { flex-basis: 100%; }
}

/* Google profile prompt - quiet, sits under the buttons. */
.review-ask { margin: 14px 0 0; font-size: .82rem; }
.review-ask a { color: var(--green-deep); font-weight: 700; }

/* ---------- testimonials: printed cards on the paper stock ---------- */

#reviews h2 { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; margin: 0 0 22px; }
.quotes {
  list-style: none; padding: 0 0 8px; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.quotes:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.quote {
  scroll-snap-align: start;
  background: var(--knock);
  border: 2px solid var(--green-deep);
  box-shadow: 5px 5px 0 var(--green-deep);
  padding: 20px;
}
.quote blockquote { margin: 0 0 14px; }
.quote blockquote p { margin: 0; font-size: 1.02rem; }
.quote blockquote p::before { content: "\201C"; color: var(--orange); font-weight: 900; }
.quote blockquote p::after  { content: "\201D"; color: var(--orange); font-weight: 900; }
.quote__by {
  margin: 0; font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--green-deep);
}
.quote__src { color: rgba(36,26,14,.6); font-weight: 700; }
.quote__more { margin: 18px 0 0; font-size: .84rem; }
.quote__more a { color: var(--green-deep); font-weight: 700; }

/* --- Gallery -------------------------------------------------------------
   The shared stylesheet is replaced wholesale by this file, so any new
   component there has to be re-cut here. Photos are the one full-colour thing
   on a two-ink page, so they're framed rather than bled: a green plate edge
   with the orange plate slipped behind it, same misregistration as the type. */
.gallery {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.gallery__fig { margin: 0; position: relative; }
.gallery__fig::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(6px, 6px);
  background: var(--orange); z-index: 0;
}
.gallery__img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: var(--rule) solid var(--green-dark);
  background: var(--paper-deep);
}
.gallery__cap {
  position: relative; z-index: 1;
  margin: .7rem 0 0; font-size: .82rem; line-height: 1.4;
  color: var(--green-deep); text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 700px) {
  .gallery { grid-template-columns: 1fr; gap: 1.9rem; }
}

/* --- Star ratings (hero) + carousel controls -----------------------------
   The hero sits on a photo, so the stars use the orange plate against a
   knocked-back white rather than the green ink, which would disappear
   against a dark banner. */
.grating {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: inherit;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  vertical-align: baseline;
}
.grating:hover .grating__meta { text-decoration: underline; }
.grating__stars {
  position: relative; display: inline-block;
  white-space: nowrap; letter-spacing: 2px; line-height: 1;
}
.grating__stars-bg { color: rgba(253, 248, 236, .4); }
.grating__stars-fg {
  position: absolute; left: 0; top: 0;
  overflow: hidden; white-space: nowrap; letter-spacing: 2px;
  color: var(--orange);
}
.grating__score { font-weight: 900; font-size: 1rem; letter-spacing: 0; }
.grating__meta { opacity: .9; }

.quotes__frame { position: relative; }
.stars {
  margin: 0 0 10px; color: var(--orange); letter-spacing: 3px; font-size: 1rem;
}
.quotes__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; z-index: 2;
  border: var(--rule) solid var(--green-dark); background: var(--knock);
  color: var(--green-deep); font-size: 1.4rem; font-weight: 900; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.quotes__nav:hover:not(:disabled) {
  background: var(--green-deep); color: var(--knock);
}
.quotes__nav:disabled { opacity: .3; cursor: default; }
.quotes__nav--prev { left: -10px; }
.quotes__nav--next { right: -10px; }
@media (max-width: 700px) { .quotes__nav { display: none; } }

/* --- Find us: full-bleed split -------------------------------------------
   Same layout as the shared template, cut for the two-ink system: the panel
   is the green plate rather than neutral charcoal, icons and the badge are
   the orange second plate. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.findus {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 440px; margin-top: 24px;
  border-top: var(--rule) solid var(--green-dark);
}
.findus__panel {
  background: var(--green-dark); color: var(--knock);
  display: flex; align-items: center; padding: 56px 20px;
}
.findus__inner { width: 100%; max-width: 400px; margin: 0 auto; }
.findus__badge {
  display: inline-block; margin: 0 0 16px; padding: 4px 11px;
  background: var(--orange); color: var(--knock);
  font-size: .72rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase;
}
.findus__phone {
  display: block; margin: 0 0 28px;
  font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; line-height: 1.05;
  letter-spacing: -.02em; color: var(--knock); text-decoration: none;
}
.findus__phone:hover { color: var(--orange); }
.findus__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.findus__row { display: flex; gap: 16px; align-items: flex-start; }
.findus__icon { width: 34px; height: 34px; flex: 0 0 34px; color: var(--orange); }
.findus__text p { margin: 0 0 3px; font-size: .95rem; line-height: 1.45; }
.findus__days { opacity: .75; }
.findus__parking { opacity: .6; font-size: .86rem; margin-top: 5px; }
.findus__social { display: flex; gap: 10px; margin-top: 28px; }
.findus__social a {
  width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; background: var(--knock); color: var(--green-dark);
}
.findus__social a:hover { background: var(--orange); color: var(--knock); }
.findus__social svg { width: 19px; height: 19px; }
.findus__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.btn--ghost {
  background: transparent; color: var(--knock);
  border: 2px solid rgba(253,248,236,.4);
}
.btn--ghost:hover { border-color: var(--knock); background: rgba(253,248,236,.1); }

.findus__map { position: relative; min-height: 440px; }
.findus__map iframe {
  width: 100%; height: 100%; border: 0; display: block; position: absolute; inset: 0;
}
.findus__maplink {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 6px 12px; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--knock); color: var(--green-deep); text-decoration: none;
  border: 2px solid var(--green-dark);
}
.findus__maplink:hover { background: var(--orange); color: var(--knock); }

@media (max-width: 860px) {
  .findus { grid-template-columns: 1fr; min-height: 0; }
  .findus__map { min-height: 320px; height: 320px; }
}

/* --- Location map: the isometric block on the Find us page --------------
   Printed in the same two inks: the block in paper tones, the shop in
   orange, its pin in green, and the landmarks with outline pins. */
/* Same box as .sign__inner, so the map lines up with the hero text. */
.isomap { max-width: var(--wrap); margin: 24px auto 0; padding: 0 20px; }
.isomap__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.isomap__badge {
  margin: 0; padding: 6px 14px;
  background: var(--orange); color: var(--knock);
  font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.isomap__where { margin: 0; font-size: 1rem; }
.isomap__svg { display: block; width: 100%; height: auto; margin: 8px 0 24px; }
.isomap__ground { fill: var(--paper-deep); }
.isomap__road { fill: var(--paper); }
.isomap__bldg path { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; stroke-linejoin: round; }
.isomap__roof { fill: var(--knock); fill-rule: evenodd; }
.isomap__wall-l { fill: #c9b88f; }
.isomap__wall-r { fill: #ddd0ad; }
.isomap__bldg--shop .isomap__roof { fill: var(--orange); }
.isomap__bldg--shop .isomap__wall-l { fill: var(--orange-deep); }
.isomap__bldg--shop .isomap__wall-r { fill: #cf5412; }
.isomap__bldg--shop path { stroke-opacity: .8; }
.isomap__pin path { fill: var(--green); stroke: var(--knock); stroke-width: 2.5; }
.isomap__pin circle { fill: var(--knock); }
.isomap a .isomap__pin { cursor: pointer; }
.isomap a:hover .isomap__pin path, .isomap a:focus-visible .isomap__pin path { fill: var(--orange); }
.isomap__pin .isomap__tap { fill: transparent; }
.isomap__pin--minor path { fill: var(--knock); stroke: var(--green-dark); stroke-width: 2.5; }
.isomap__pin--minor circle { fill: var(--green-dark); }
.isomap__pin text {
  fill: var(--green-dark); font-size: 22px; font-weight: 900;
  paint-order: stroke; stroke: var(--knock); stroke-width: 5px;
}
.isomap__street { fill: var(--ink); opacity: .6; font-size: 34px; letter-spacing: .16em; text-anchor: middle; dominant-baseline: middle; }
@media (max-width: 640px) {
  .isomap__street { font-size: 48px; }
  .isomap__pin text { font-size: 30px; }
}

/* --- Motion --------------------------------------------------------------
   Opt-out: under prefers-reduced-motion none of this runs. */
.sign__photo { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .sign__photo { transform: none !important; will-change: auto; }
}

/* --- Nav ------------------------------------------------------------------
   A printed card fixed to the top of the window, docked to the bottom on a
   phone where a thumb can reach it. Same tabs as before, on the paper stock
   rather than knocked out of the green, because off the signboard there is no
   green to knock out of. Rendered by the page templates: a fixed element
   inside the signboard cannot paint above the page. */
.nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  padding: 0 20px; display: flex; justify-content: center;
}
.nav__list {
  list-style: none; margin: 0; padding: 6px;
  display: flex; align-items: center; gap: 5px;
  background: var(--knock);
  border: 2px solid var(--green-dark);
  box-shadow: 5px 5px 0 var(--green-dark);
}
.nav__link {
  display: block; padding: 11px 16px;
  color: var(--green-dark); text-decoration: none;
  font-size: .78rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap;
}
.nav__link:hover { background: var(--paper-deep); }
.nav__link.is-current { color: var(--orange-deep); }
.nav__directions, .nav__directions:hover {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--knock);
}
.nav__directions:hover { background: var(--green-deep); }
.nav__directions svg { width: 17px; height: 17px; flex: none; }
.nav__order, .nav__order:hover {
  margin-left: 3px; padding: 11px 20px;
  background: var(--orange); color: var(--knock);
}
.nav__order:hover { background: var(--orange-deep); }

/* The signboard runs under the card, so it leaves the room the card needs. */
.sign { padding-top: 82px; }

@media (max-width: 640px) {
  .nav { top: auto; bottom: 10px; padding: 0 10px; }
  .nav__list { padding: 5px; gap: 3px; box-shadow: 4px 4px 0 var(--green-dark); }
  .nav__link { padding: 9px 11px; font-size: .72rem; }
  .nav__directions { padding: 9px 12px; }
  .nav__order { padding: 9px 14px; }
  .nav__directions .nav__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body { padding-bottom: 78px; }
  .sign { padding-top: 26px; }
}
@media (max-width: 380px) {
  .nav { padding: 0 6px; }
  .nav__list { gap: 1px; }
  .nav__link { padding: 9px 8px; letter-spacing: .04em; }
  .nav__directions { padding: 9px 10px; }
  .nav__order { padding: 9px 10px; }
}
@media (max-width: 340px) {
  .nav__link { padding: 9px 6px; font-size: .64rem; }
  .nav__directions { padding: 9px 8px; }
  .nav__order { padding: 9px 8px; }
}

/* --- Compact signboard for inner pages ------------------------------------ */
.sign--compact { min-height: 0; }
.sign--compact .sign__inner { padding-top: 16px; padding-bottom: 32px; }
.sign__home {
  margin: 0 0 4px; font-size: .78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em; color: var(--orange);
}
.sign__home a { color: inherit; text-decoration: none; }
.sign__home a:hover { text-decoration: underline; }
.sign__pagetitle {
  font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin: 0 0 8px;
  font-weight: 900; letter-spacing: -.02em; color: var(--knock);
}

/* --- Landing page section cards ------------------------------------------- */
/* Framed like the gallery: green plate edge, orange plate slipped behind. */
/* Fixed 2x2 - four big plates, not a thin row. */
.cards { list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: 2rem;
  grid-template-columns: repeat(2, 1fr); }
.card { position: relative; }
.card::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(7px, 7px); background: var(--orange); z-index: 0;
}
.card__link {
  position: relative; z-index: 1; display: block; text-decoration: none;
  color: var(--ink); background: var(--knock);
  border: var(--rule) solid var(--green-dark);
  transition: transform .2s ease;
}
.card__link:hover, .card__link:focus-visible { transform: translate(-3px, -3px); }
.card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  background: var(--paper-deep); }
.card__body { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 16px 19px; }
.card__name { font-weight: 900; font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  text-transform: uppercase; letter-spacing: .04em; color: var(--green-deep); }
.card__count { font-size: .82rem; color: rgba(36,26,14,.6); white-space: nowrap; }

@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; gap: 1.6rem; }
}
.cards__more { margin: 24px 0 0; }

/* --- Menu grid ------------------------------------------------------------
   Two across once three would be cramped, and two all the way down: one card
   per row turns a menu into a column of billboards to scroll past. */
@media (max-width: 800px) {
  .items { grid-template-columns: repeat(2, 1fr); }
  .item:last-child:nth-child(3n + 1) { grid-column: auto; justify-self: stretch; width: auto; }
  .item:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 26px) / 2);
  }
}
.course { scroll-margin-top: 20px; }

/* --- Sticky footer --------------------------------------------------------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .foot { margin-top: auto; }