/* ==========================================================================
   SIT 'N BULL SALOON — style.css
   --------------------------------------------------------------------------
   Mobile first: designed at 375px, scaled up with min-width queries.
   Everything snaps to a 4px grid. --u is one grid unit AND one sprite pixel.

   1. Tokens
   2. Reset + base
   3. Type
   4. Utilities ........ .sr-only · .skip-link · .sprite · .pixel-frame
   5. Wordmark
   6. Page sections .... (steps 2–4)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Palette -----------------------------------------------------------
     Contrast on --wood-dark (WCAG 2: body text needs 4.5:1, large text 3:1)
       --bone        14.4:1   body text
       --gold-light  10.4:1   body text
       --sign-gold    9.9:1   body text (wordmark lettering)
       --gold         8.0:1   body text, CTAs
       --turquoise    4.5:1   LARGE TEXT + UI ONLY (sits right on the line)
       --sage         3.8:1   large text + UI only
       --red-bright   3.0:1   FILL + DISPLAY ONLY
       --oxblood      1.9:1   FILL + DISPLAY ONLY
     USAGE RULES
       --oxblood, --red-bright: fills, shadows, borders, display type.
                                Never body text, never small labels.
       --turquoise:             large text (24px+) and UI only.
     --bone and --gold clear 4.5:1 as specced, so no token was adjusted.
     Live table: styleguide.html                                           */
  --wood-dark:  #241710;  /* barnwood shadow, page background */
  --wood:       #3D2A1C;  /* panels */
  --wood-mid:   #6B4A2F;  /* borders, texture */
  --oxblood:    #8C1C13;  /* the sign red — primary accent */
  --red-bright: #B8352A;  /* hovers */
  --gold:       #E8A317;  /* whiskey/lantern — CTA color */
  --gold-light: #F2C14E;
  --bone:       #F4E8D0;  /* body text on dark, card backgrounds */
  --sage:       #6E7B52;  /* cactus/scrub green */
  --turquoise:  #3E8E8C;  /* southwest accent, use sparingly */
  --night:      #14131F;  /* night sky sections */

  /* --- The sign ----------------------------------------------------------
     Sampled from ref/sign-day.png and ref/sign-night.png. Both photos are
     underexposed on the sign, so these keep the sampled hue + saturation
     and lift the brightness back up to paint. Wordmark only.              */
  --sign-gold:  #EDBA78;  /* lettering: gold-cream, hue ~32°, warmer than --gold */
  --sign-field: #4E1A16;  /* the stained field: dark oxblood-brown */
  --sign-ink:   var(--wood-dark);  /* outline around the letters */

  /* --- Grid --------------------------------------------------------------
     --u = 4px = one grid unit = one sprite pixel. Every padding, margin,
     gap, border width and radius is a multiple of it.
     --s-N = N units (--s-4 = 16px).                                       */
  --u: 4px;
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --radius: 4px;  /* the only non-zero radius allowed; most things are 0 */

  /* --- Type --------------------------------------------------------------
     Rye         display: wordmark, section headers
     Silkscreen  pixel UI: nav, labels, prices, buttons, badges. Short strings
                 only, never paragraphs. It is drawn on an 8-pixels-per-em
                 grid, so it is only crisp at 16 / 24 / 32px (at 32px one font
                 pixel = one sprite pixel). Letter-spacing in 2px steps.
     Bitter      body copy                                                 */
  --font-display: 'Rye', 'Rockwell', 'Georgia', serif;
  --font-ui:      'Silkscreen', 'Courier New', monospace;
  --font-body:    'Bitter', 'Georgia', serif;

  /* The notched corner: a u×u pixel knocked out of every corner.
     Shared clip shape for .pixel-frame and anything else that wants it.   */
  --notch: polygon(
    0 var(--u), var(--u) var(--u), var(--u) 0,
    calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u),
    100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%,
    var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u))
  );

  /* Two-step notch: the pixel "pill". Used by .pixel-btn. */
  --notch-2: polygon(
    0 calc(var(--u) * 2), var(--u) calc(var(--u) * 2), var(--u) var(--u), calc(var(--u) * 2) var(--u), calc(var(--u) * 2) 0,
    calc(100% - var(--u) * 2) 0, calc(100% - var(--u) * 2) var(--u), calc(100% - var(--u)) var(--u), calc(100% - var(--u)) calc(var(--u) * 2), 100% calc(var(--u) * 2),
    100% calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u) * 2) calc(100% - var(--u)), calc(100% - var(--u) * 2) 100%,
    calc(var(--u) * 2) 100%, calc(var(--u) * 2) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 2), 0 calc(100% - var(--u) * 2)
  );

  /* Hard pixel shadow: exactly 4px right, 4px down, zero blur. Headers and
     buttons share it so everything on the page is lit the same way. */
  --shadow-color: var(--oxblood);
  --shadow-hard: var(--u) var(--u) 0 var(--shadow-color);
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--wood-dark);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }

/* Raster images only ever show as chunky pixels (see .photo-slot, step 5). */
img { image-rendering: pixelated; }

/* A square 4px ring on the grid. */
:focus-visible {
  outline: var(--u) solid var(--gold);
  outline-offset: var(--u);
}


/* ==========================================================================
   3. TYPE
   Line-heights sit on the 4px grid too.
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--bone);
  text-shadow: var(--shadow-hard);   /* 4px right, 4px down, no blur */
  /* Grayscale antialiasing. On Windows, ClearType puts cyan/red fringes on
     Rye's little spur details, which reads as a soft emboss; its own
     compositing layer turns that off. */
  will-change: transform;
}
h1 { font-size: 40px; line-height: 48px; }
h2 { font-size: 32px; line-height: 40px; }
h3 { font-size: 24px; line-height: 32px; }

/* Pixel UI voice. 16px = crisp (2 screen px per font pixel). */
.ui {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ui--lg { font-size: 24px; line-height: 32px; }   /* 3 screen px per font pixel */
.ui--xl { font-size: 32px; line-height: 40px; }   /* 4 = exactly one sprite pixel */

.small { font-size: 14px; line-height: 20px; }

@media (min-width: 768px) {
  body { font-size: 18px; line-height: 28px; }
  h1 { font-size: 64px; line-height: 72px; }
  h2 { font-size: 40px; line-height: 48px; }
  h3 { font-size: 28px; line-height: 36px; }
}


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */

/* --- Screen-reader only -------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Skip link: hidden until focused -------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: calc(-1 * var(--s-16));
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--gold);
  color: var(--wood-dark);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
}
.skip-link:focus { top: var(--s-4); }

/* --- Sprites --------------------------------------------------------------
   <span class="sprite" data-sprite="cactus"> is filled with an inline <svg>
   by js/sprites.js. The svg is drawn at 1 unit per sprite pixel and scaled
   by width/height, so edges stay razor sharp at any integer scale.        */
.sprite {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.sprite svg,
svg.sprite-svg {
  shape-rendering: crispEdges;
  overflow: visible;
  max-width: none;   /* never squash a sprite: its pixels must stay whole */
}

/* --- Pixel frame ----------------------------------------------------------
   A 4px drawn border with the corner pixels knocked out, so cards and panels
   read as sprite frames. Drawn with two layers BEHIND the content, so
   nothing inside the frame is ever clipped (focus rings, badges, etc.):

     ::before   the edge: full box, clipped to the notched shape
     ::after    the fill: inset 4px

   Recolor with --pf-edge / --pf-fill, or a modifier. Optional 4px bevel on
   the inside of the edge (lit top/left, shade bottom/right) via --pf-hi /
   --pf-lo; off by default. Padding: keep it --s-4 or more.

     <article class="pixel-frame pixel-frame--bone">…</article>            */
.pixel-frame {
  --pf-edge: var(--wood-mid);
  --pf-fill: var(--wood);
  --pf-hi:   transparent;
  --pf-lo:   transparent;

  position: relative;
  isolation: isolate;
  padding: var(--s-4);
}
.pixel-frame::before,
.pixel-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.pixel-frame::before {
  inset: 0;
  background: var(--pf-edge);
  clip-path: var(--notch);
}
.pixel-frame::after {
  inset: var(--u);
  background: var(--pf-fill);
  box-shadow:
    inset var(--u) var(--u) 0 0 var(--pf-hi),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--pf-lo);
}

/* Bone: the light card on the dark page (menu items, Top Picks). */
.pixel-frame--bone {
  --pf-fill: var(--bone);
  color: var(--wood-dark);
}

/* Gold edge: callouts, and the one thing on screen you should click. */
.pixel-frame--gold {
  --pf-edge: var(--gold);
}

/* Oxblood: brand moments. Edge and fill are the sign's rim and red. */
.pixel-frame--oxblood {
  --pf-edge: var(--red-bright);
  --pf-fill: var(--oxblood);
}

/* --- Pixel button ----------------------------------------------------------
   The "pill": a two-step notched shape (--notch-2), gold fill, dark
   Silkscreen label, and the same hard 4px/4px shadow as the headers.
   Like .pixel-frame, the shape is drawn by pseudo-elements behind the label,
   so the focus ring is never clipped. Pressing it drops it onto its shadow.

     <a class="pixel-btn" href="#menu">See the menu</a>                    */
.pixel-btn {
  --pb-fill:   var(--gold);
  --pb-hover:  var(--gold-light);
  --pb-text:   var(--wood-dark);
  --pb-shadow: var(--shadow-color);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--s-12);            /* 48px tap target */
  padding: var(--s-3) var(--s-5);
  border: 0;
  background: none;
  color: var(--pb-text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pixel-btn::before,
.pixel-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--notch-2);
  pointer-events: none;
}
.pixel-btn::before { z-index: -1; background: var(--pb-fill); }
.pixel-btn::after  { z-index: -2; background: var(--pb-shadow); translate: var(--u) var(--u); }
.pixel-btn:hover::before { background: var(--pb-hover); }
.pixel-btn:active { translate: var(--u) var(--u); }
.pixel-btn:active::after { translate: 0 0; }
.pixel-btn .sprite svg {
  width: calc(2px * var(--sprite-w, 0));   /* UI icons sit on Silkscreen's 2px pixel grid */
  height: calc(2px * var(--sprite-h, 0));
}


/* ==========================================================================
   5. WORDMARK
   One set of letters, two ways of wearing it:
     .brand     the nav. "SIT 'N BULL" in Rye, gold, flat. No plaque.
     .wordmark  the carved plaque. Hero and footer only.
   Both are built from .lettering and sized by --wm-u (4px; 8px on --lg),
   so every measurement stays on the grid.
   ========================================================================== */

/* --- 5a. Lettering ----------------------------------------------------------
   Big S and B like the sign's drop caps; the little 'N with its apostrophe
   up at cap height and the N sat on the baseline of IT.                    */
.lettering {
  /* Stem weight: the sign is routed into wood and its strokes have mass.
     Each letter is repeated 1px to the right in its own color (2px on
     --lg), which thickens the vertical stems without blurring or rounding
     the spur serifs the way a stroke would. */
  --stem: calc(var(--wm-u) / 4);

  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-shadow: var(--stem) 0 0 currentColor;
  will-change: transform;   /* grayscale AA, same reason as the headers */
}
.lettering__line { display: flex; align-items: center; }
.lettering__line--1 { font-size: calc(var(--wm-u) * 4.5); }                                    /* IT, ULL: 18px */
.lettering__line--2 { font-size: calc(var(--wm-u) * 3.75); margin-top: calc(var(--wm-u) * -1); } /* ALOON: 15px */
.lettering__line--1 .lettering__cap { font-size: calc(var(--wm-u) * 7.5); }                    /* S, B: 30px */
.lettering__line--2 .lettering__cap { font-size: calc(var(--wm-u) * 5.5); }                    /* S: 22px */
.lettering__apos { margin-left: calc(var(--wm-u) * 0.5); }
.lettering__n {
  margin: 0 var(--wm-u) 0 calc(var(--wm-u) * -0.5);
  font-size: 0.6em;
  translate: 0 0.24em;   /* where Rye's baseline lands for a 0.6em N */
}
.lettering__rope { margin: 0 var(--wm-u); }
.lettering .sprite svg {
  width: calc(var(--wm-u) * var(--sprite-w, 0));
  height: calc(var(--wm-u) * var(--sprite-h, 0));
}

/* --- 5b. Brand (nav) --------------------------------------------------------- */
.brand {
  --wm-u: var(--u);
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--sign-gold);
  text-decoration: none;
}

/* --- 5c. Wordmark plaque (hero + footer) --------------------------------------
   The carved sign rebuilt on the grid: a red routed rim lit from the
   upper-left, a stained oxblood field, a thin gold inlay line, notched
   corners, a crest carrying the lasso, and rope either side of SALOON.

   Every plaque layer is the same stepped silhouette (--wm-shape) on a box
   inset one more unit than the last, so the rim and inlay follow the
   notches and the crest by themselves:

     .wordmark__plaque            rim, shade side (bottom/right)
     .wordmark__plaque::before    rim, lit side (top/left): box 1u short at right + bottom
     .wordmark__plaque::after     field, inset 1u
     .wordmark__inlay             inlay line, inset 2u (+ ::before lit side)
     .wordmark__inlay::after      field, inset 3u
     .wordmark__crest             rope-flourish sprite (the lasso)
     .wordmark__type              the letters (.lettering)                 */
.wordmark {
  --wm-u: var(--u);

  /* geometry, in units */
  --wm-w: 42;          /* plaque width */
  --wm-h: 26;          /* plaque height, crest included */
  --wm-crest-h: 8;     /* how far the crest rises above the body (room for the lasso) */
  --wm-crest-in: 5;    /* crest inset from each side */
  --wm-notch: 2;       /* corner bite on the body */
  --wm-crest-notch: 1; /* corner bite on the crest */
  --wm-crest-top: 3;   /* where the lasso sits, from the plaque top */

  /* colors */
  --wm-rim-lo:   var(--oxblood);
  --wm-rim-hi:   var(--red-bright);
  --wm-field:    var(--sign-field);
  --wm-inlay-lo: var(--sign-gold);
  --wm-inlay-hi: var(--sign-gold);
  --wm-letter:   var(--sign-gold);
  --wm-ink:      var(--sign-ink);

  /* derived lengths */
  --wm-n: calc(var(--wm-u) * var(--wm-notch));
  --wm-m: calc(var(--wm-u) * var(--wm-crest-notch));
  --wm-c: calc(var(--wm-u) * var(--wm-crest-h));
  --wm-l: calc(var(--wm-u) * var(--wm-crest-in));

  /* The silhouette, clockwise from the top-left bite. The same polygon fits
     every inset layer because the notches, the crest height and the crest's
     side offsets are all measured from the layer's own edges. */
  --wm-shape: polygon(
    0 calc(var(--wm-c) + var(--wm-n)),
    var(--wm-n) calc(var(--wm-c) + var(--wm-n)),
    var(--wm-n) var(--wm-c),
    var(--wm-l) var(--wm-c),
    var(--wm-l) var(--wm-m),
    calc(var(--wm-l) + var(--wm-m)) var(--wm-m),
    calc(var(--wm-l) + var(--wm-m)) 0,
    calc(100% - var(--wm-l) - var(--wm-m)) 0,
    calc(100% - var(--wm-l) - var(--wm-m)) var(--wm-m),
    calc(100% - var(--wm-l)) var(--wm-m),
    calc(100% - var(--wm-l)) var(--wm-c),
    calc(100% - var(--wm-n)) var(--wm-c),
    calc(100% - var(--wm-n)) calc(var(--wm-c) + var(--wm-n)),
    100% calc(var(--wm-c) + var(--wm-n)),
    100% calc(100% - var(--wm-n)),
    calc(100% - var(--wm-n)) calc(100% - var(--wm-n)),
    calc(100% - var(--wm-n)) 100%,
    var(--wm-n) 100%,
    var(--wm-n) calc(100% - var(--wm-n)),
    0 calc(100% - var(--wm-n))
  );

  position: relative;
  display: block;
  flex: none;
  width: calc(var(--wm-u) * var(--wm-w));
  height: calc(var(--wm-u) * var(--wm-h));
  color: var(--wm-letter);
  text-decoration: none;
}

.wordmark--lg { --wm-u: calc(var(--u) * 2); }

/* plaque layers */
.wordmark__plaque,
.wordmark__plaque::before,
.wordmark__plaque::after,
.wordmark__inlay,
.wordmark__inlay::before,
.wordmark__inlay::after {
  position: absolute;
  clip-path: var(--wm-shape);
}
.wordmark__plaque::before,
.wordmark__plaque::after,
.wordmark__inlay::before,
.wordmark__inlay::after { content: ""; }

.wordmark__plaque         { inset: 0;                            background: var(--wm-rim-lo); }
.wordmark__plaque::before { inset: 0 var(--wm-u) var(--wm-u) 0;  background: var(--wm-rim-hi); }
.wordmark__plaque::after  { inset: var(--wm-u);                  background: var(--wm-field); }
.wordmark__inlay          { inset: calc(var(--wm-u) * 2);        background: var(--wm-inlay-lo); }
.wordmark__inlay::before  { inset: 0 var(--wm-u) var(--wm-u) 0;  background: var(--wm-inlay-hi); }
.wordmark__inlay::after   { inset: var(--wm-u);                  background: var(--wm-field); }

/* the lasso, just inside the crest's inlay line */
.wordmark__crest {
  position: absolute;
  top: calc(var(--wm-u) * var(--wm-crest-top));
  left: 50%;
  translate: -50% 0;
}
.wordmark__crest svg {
  width: calc(var(--wm-u) * var(--sprite-w, 0));
  height: calc(var(--wm-u) * var(--sprite-h, 0));
}

/* the letters: stem weight, then a dark outline all round the thickened
   letter, then a deeper carve toward the bottom-right (lit upper-left) */
.wordmark__type {
  --o: calc(var(--wm-u) / 2);   /* outline: 2px, 4px on --lg */

  position: absolute;
  inset: calc(var(--wm-u) * (var(--wm-crest-h) + 3)) calc(var(--wm-u) * 3) calc(var(--wm-u) * 3);
  justify-content: center;
  text-shadow:
    var(--stem) 0 0 currentColor,
    calc(var(--o) * -1)                calc(var(--o) * -1)   0 var(--wm-ink),
    0                                  calc(var(--o) * -1)   0 var(--wm-ink),
    var(--stem)                        calc(var(--o) * -1)   0 var(--wm-ink),
    calc(var(--stem) + var(--o))       calc(var(--o) * -1)   0 var(--wm-ink),
    calc(var(--o) * -1)                0                     0 var(--wm-ink),
    calc(var(--stem) + var(--o))       0                     0 var(--wm-ink),
    calc(var(--o) * -1)                var(--o)              0 var(--wm-ink),
    0                                  var(--o)              0 var(--wm-ink),
    var(--stem)                        var(--o)              0 var(--wm-ink),
    calc(var(--stem) + var(--o))       var(--o)              0 var(--wm-ink),
    calc(var(--stem) + var(--o) * 1.5) calc(var(--o) * 1.5)  0 var(--wm-ink),
    calc(var(--stem) + var(--o) * 2)   calc(var(--o) * 2)    0 var(--wm-ink);
}


/* ==========================================================================
   6. PAGE SECTIONS
   Numbered to match the banner comments in index.html.
   ========================================================================== */



/* --- 1. Sticky top nav -----------------------------------------------------
   Phones: brand left; CALL pill + menu toggle right; the links drop down
   as a full-width panel under the bar. From 1024px: brand hard left, links
   centered, full CALL (708) 584-7053 pill hard right. Solid bar.
   Without JS the links simply stay visible (the toggle hides itself).     */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wood);
  box-shadow: 0 var(--u) 0 0 var(--night);   /* hard 4px edge under the bar */
}
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-2);
  max-width: 1280px;
  min-height: var(--s-16);
  margin: 0 auto;
  padding: var(--s-2) var(--s-4);
}
.site-header .brand     { order: 0; margin-right: auto; }
.site-header__call      { order: 1; }
.nav-toggle             { order: 2; }
.site-nav               { order: 3; flex-basis: 100%; }

.site-header__call-full { display: none; }

/* menu toggle (phones) */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--s-12);
  height: var(--s-12);
  margin-right: calc(var(--u) * -2);   /* optical: icon edge lines up with the gutter */
  padding: 0;
  border: 0;
  background: none;
  color: var(--bone);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--gold); }
.nav-toggle .sprite svg {
  width: calc(var(--u) * var(--sprite-w, 0));
  height: calc(var(--u) * var(--sprite-h, 0));
}
.nav-toggle__close { display: none; }
.site-header.is-open .nav-toggle__open  { display: none; }
.site-header.is-open .nav-toggle__close { display: inline-block; }
.no-js .nav-toggle { display: none; }

/* the links */
.js .site-nav { display: none; }
.js .site-header.is-open .site-nav { display: block; }
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0 var(--s-2);
}
.site-nav__list li + li { box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--wood-dark); }  /* 4px plank seam */
.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--s-12);
  padding: 0 var(--s-2);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav__list a:hover {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;   /* one Silkscreen pixel */
  text-underline-offset: 6px;
}

@media (min-width: 1024px) {
  .site-header__bar { flex-wrap: nowrap; column-gap: var(--s-6); }
  .site-header .brand { margin-right: 0; }
  .site-nav,
  .js .site-nav { display: block; order: 1; flex: 1 1 auto; }
  .site-header__call { order: 2; }
  .nav-toggle { display: none; }

  .site-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  .site-nav__list li + li { box-shadow: none; }
  .site-nav__list li + li::before {           /* the · between links */
    content: "·" / "";
    color: var(--wood-mid);
    font-family: var(--font-ui);
    font-size: 16px;
  }
  .site-nav__list a { display: inline-flex; padding: 0 var(--s-3); }

  .site-header__call-short { display: none; }
  .site-header__call-full  { display: inline; }
}


/* --- 2. Announcement strip ---------------------------------------------------
   One line under the nav on anything wider than a phone; on a phone the
   two halves stack. Oxblood is the fill here; the text is bone (7.6:1).   */
.announce {
  background: var(--oxblood);
  color: var(--bone);
}
.announce__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--s-4);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
}
.announce__sep { display: none; color: var(--gold-light); }
@media (min-width: 640px) {
  .announce__sep { display: inline; }
}


/* --- 3. Hero -------------------------------------------------------------------
   A full-bleed sunset: the sky is the color block, drawn in stepped pixel
   bands with checker-dithered seams, all measured up from the horizon in
   scene pixels (--px), so the bands, the sun and the sprites share one grid.
   Copy sits up in the dark sky; the pixel scene stands on the horizon.
   --px is 4px on phones (the scene is 320px wide) and 8px from 768px.     */
.hero {
  --px: 4px;
  --ground: 8;          /* ground rows below the horizon */

  /* band tops, in scene px above the horizon */
  --b-gold-light: 3;
  --b-gold: 8;
  --b-red: 15;
  --b-oxblood: 24;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
}
@media (min-width: 768px) { .hero { --px: 8px; } }

/* sky: hard bands + a 2-row checker at every seam */
.hero__sky {
  --ck: calc(var(--px) * 2);
  position: absolute;
  inset: 0 0 calc(var(--px) * var(--ground)) 0;
  z-index: -1;
  background:
    conic-gradient(var(--gold) 25%, var(--gold-light) 0 50%, var(--gold) 0 75%, var(--gold-light) 0)
      left 0 bottom calc(var(--px) * (var(--b-gold-light) - 1)) / var(--ck) var(--ck) repeat-x,
    conic-gradient(var(--red-bright) 25%, var(--gold) 0 50%, var(--red-bright) 0 75%, var(--gold) 0)
      left 0 bottom calc(var(--px) * (var(--b-gold) - 1)) / var(--ck) var(--ck) repeat-x,
    conic-gradient(var(--oxblood) 25%, var(--red-bright) 0 50%, var(--oxblood) 0 75%, var(--red-bright) 0)
      left 0 bottom calc(var(--px) * (var(--b-red) - 1)) / var(--ck) var(--ck) repeat-x,
    conic-gradient(var(--night) 25%, var(--oxblood) 0 50%, var(--night) 0 75%, var(--oxblood) 0)
      left 0 bottom calc(var(--px) * (var(--b-oxblood) - 1)) / var(--ck) var(--ck) repeat-x,
    linear-gradient(to top,
      var(--gold-light) 0 calc(var(--px) * var(--b-gold-light)),
      var(--gold)       0 calc(var(--px) * var(--b-gold)),
      var(--red-bright) 0 calc(var(--px) * var(--b-red)),
      var(--oxblood)    0 calc(var(--px) * var(--b-oxblood)),
      var(--night)      0);
}

/* ground: sunlit dirt fading down into the page */
.hero__ground {
  height: calc(var(--px) * var(--ground));
  background:
    conic-gradient(var(--wood) 25%, var(--wood-mid) 0 50%, var(--wood) 0 75%, var(--wood-mid) 0)
      left 0 top calc(var(--px) * 2) / calc(var(--px) * 2) calc(var(--px) * 2) repeat-x,
    conic-gradient(var(--wood-dark) 25%, var(--wood) 0 50%, var(--wood-dark) 0 75%, var(--wood) 0)
      left 0 top calc(var(--px) * 5) / calc(var(--px) * 2) calc(var(--px) * 2) repeat-x,
    linear-gradient(
      var(--wood-mid)  0 calc(var(--px) * 3),
      var(--wood)      0 calc(var(--px) * 6),
      var(--wood-dark) 0);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-4) 0;
}
.hero__copy {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  max-width: 560px;
}
.hero__title { color: var(--bone); }
.hero__blurb { max-width: 60ch; }
.hero__copy .pixel-btn { margin-top: var(--s-2); }

.hero__scene {
  justify-self: center;
  align-self: end;
}

@media (min-width: 1152px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-12);
    padding-top: var(--s-16);
  }
  .hero__copy { align-self: start; padding-bottom: var(--s-16); }
}

/* --- the scene: sprites laid out in scene pixels ------------------------------
   Every item is placed with --x / --y (top-left, in scene px) and drawn at
   --px per sprite pixel. The plaque on the facade is the real .wordmark,
   drawn at the same pixel size.                                            */
.scene {
  position: relative;
  width: calc(var(--px) * var(--scene-w));
  height: calc(var(--px) * var(--scene-h));
}
.scene__item {
  position: absolute;
  left: calc(var(--px) * var(--x));
  top: calc(var(--px) * var(--y));
  line-height: 0;
}
.scene__item svg {
  width: calc(var(--px) * var(--sprite-w, 0));
  height: calc(var(--px) * var(--sprite-h, 0));
}
.scene .wordmark { --wm-u: var(--px); }


/* ==========================================================================
   7. THE ROOM (index.html)
   One continuous room: the wooden floor is the page, the bar runs across the
   top with its shadow on the floor and panels ("bays") on its back wall, and
   five tables stand on the floor as the navigation. No scrolling: the room
   is the whole page. Scoped to body.page-room so landing.html is untouched.

   SCALE: one whole number, --s, chosen from the window height and capped
   by its width in js/room.js (2x at 1920x1080, 3x at 2560x1440, 4x at
   3840x2160; always 2x-5x). EVERY size
   here is art pixels x --s, so one art pixel is always an s-by-s block.
   Never fractional, never cover/contain, pixelated everywhere.

     asset                 art px      at 3x
     assets/bar-strip      192 x 214   576 x 642   (tiles in x)
     assets/floor-tile     128 x 64    384 x 192   (tiles in x and y)
     assets/bar-shadow     192 x 46    576 x 138   (tiles in x)
     assets/bay-*           64 x 73    192 x 219
     assets/bay-sign       128 x 73    384 x 219
     assets/table-*        152 x 116   456 x 348   (word burnt in)
     assets/table-glow     198 x 114   594 x 342

   Positions (the sign, the bays, the grid phase, the tables) are worked out
   in js/room.js and written onto the elements; see the notes there.
   ========================================================================== */
.page-room {
  --s: 3;                            /* overwritten by js/room.js */
  --px: calc(var(--s) * 1px);        /* one art pixel on screen */
  --phase: 0px;                      /* where the wall's board grid starts (room.js) */

  margin: 0;
  height: 100vh;
  overflow: hidden;                  /* the page itself never scrolls */
  background: var(--wood-dark);
}

/* The room: pinned to the window and always live, even with a panel open
   over it (it only dims). 1. The floor is its background, running the full
   width and height of the window, behind everything. */
.room {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: url(../assets/floor-tile.png) 0 0 / calc(128 * var(--px)) calc(64 * var(--px)) repeat;
  transition: filter .45s ease;
}
.room.is-dim { filter: brightness(.62); }
.room,
.page-room .bar,
.page-room .bar__shadow,
.page-room .bay,
.page-room .table img { image-rendering: pixelated; }

/* 2. The bar: full width, 214 art px tall, tiling from --phase so its board
      seams line up with wherever the sign is. No background colour behind
      it: its lower rows are transparent so the floor shows under the stools.
      It must NOT create a stacking context (no z-index, opacity, transform,
      filter, isolation) or the shadow below stops sitting behind it.      */
.bar {
  position: relative;
  /* on a short window the ceiling beam lifts off the top (js/room.js) */
  margin-top: calc(var(--lift, 0) * var(--px) * -1);
  height: calc(214 * var(--px));
  background: url(../assets/bar-strip.png) var(--phase) 0 / calc(192 * var(--px)) calc(214 * var(--px)) repeat-x;
  overflow-x: clip;                  /* panels past either edge are cut; the shadow
                                        can still fall below the bar */
}

/* 3. The shadow the bar throws on the floor, behind the stools. z-index -1
      puts it under the bar's own background but over the floor.           */
.bar__shadow {
  position: absolute;
  top: calc(180 * var(--px));
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(46 * var(--px));
  background: url(../assets/bar-shadow.png) var(--phase) 0 / calc(192 * var(--px)) calc(46 * var(--px)) repeat-x;
}

/* 4. The bays: wall panels hung just under the beam (art row 21). Their
      left edges are set by room.js: the sign at true centre, the others a
      whole number of boards from it. The sign is last in the markup, so it
      paints over anything that ever landed on it.                         */
.bay {
  position: absolute;
  top: calc(21 * var(--px));
  left: 0;
  width: calc(64 * var(--px));
  height: calc(73 * var(--px));
  max-width: none;                   /* never let the global img rule squash one */
  margin: 0;
}
.bay--sign { width: calc(128 * var(--px)); }
.bay--sign img { display: block; width: 100%; height: 100%; max-width: none; }

/* 5. The lobby: five tables on the floor, the site's navigation. Each is a
      real link whose table PNG has its word burnt into the top; the word
      is also in the DOM as .sr-only text. room.js places them by
      PERCENTAGE of the floor box (from the bar's floor line to the window
      bottom), staggered so they read as a room, not a toolbar, and stacks
      them by depth (--z): a table lower on screen is nearer, so it draws in
      front. The layer itself ignores the pointer; only the tables take
      clicks.                                                              */
.lobby {
  position: absolute;
  inset: 0;
  overflow: clip;           /* the outer tables sit flush with the window edges;
                               their glow must not make the page wider, or a
                               browser can scroll the whole room sideways to
                               show a focused table */
  pointer-events: none;
}
.lobby ul { list-style: none; margin: 0; padding: 0; }

.table {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z, 0);
  display: block;
  width: calc(152 * var(--px));
  height: calc(116 * var(--px));
  pointer-events: auto;
  text-decoration: none;
}
.table img {
  position: absolute;
  max-width: none;
}
.table__art {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The warm pool behind the table, centred on it: the hover and focus cue.
   The table itself never changes size. */
.table__glow {
  left: calc(-23 * var(--px));           /* (152 - 198) / 2 */
  top: var(--px);                        /* (116 - 114) / 2 */
  width: calc(198 * var(--px));
  height: calc(114 * var(--px));
  opacity: 0;
  transition: opacity .15s;
}
.table:hover .table__glow,
.table:focus-visible .table__glow { opacity: 1; }

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

/* 6. People around all five tables. js/people.js places them and
      runs the one shared animation loop. They draw at 2x the room scale
      (--pp = 2 x --s px per person-pixel): at 1x the two behind a table
      would vanish under it. The layer creates no stacking context, so each
      person's z-index (its foot line) sorts against the tables' (theirs):
      people pass behind far tables and in front of near ones. Decorative,
      and never clickable.                                                 */
.floor-people {
  --pp: calc(var(--s) * 2px);
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
.person {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(32 * var(--pp));
  height: calc(46 * var(--pp));
  background: var(--sprite) 0 0 / calc(32 * var(--pp)) calc(46 * var(--pp)) no-repeat;
  image-rendering: pixelated;
  will-change: transform;
}
/* The walk: a 4-frame strip, stepped, never smoothed. */
.person--walk {
  background-size: calc(128 * var(--pp)) calc(46 * var(--pp));
  animation: person-walk .52s steps(4) infinite;
}
@keyframes person-walk {
  to { background-position-x: calc(-128 * var(--pp)); }
}
/* One drag of smoke: sheet origin (4, 23) on the cigarette tip (22, 17). */
.person__puff {
  position: absolute;
  left: calc(18 * var(--pp));
  top: calc(-6 * var(--pp));
  width: calc(16 * var(--pp));
  height: calc(26 * var(--pp));
  background: url(../assets/people/smoke-puff.png) 0 0 / calc(96 * var(--pp)) calc(26 * var(--pp)) no-repeat;
  image-rendering: pixelated;
  visibility: hidden;
}
.floor-people.is-paused .person { animation-play-state: paused; }

/* The bartenders: behind the bar, cropped at the waist (js/people.js). Same
   2x scale as the people on the floor. */
.bartender {
  --pp: calc(var(--s) * 2px);
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--bw) * var(--pp));
  height: calc(var(--bh) * var(--pp));
  background: var(--sprite) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .floor-people:not(.force-motion) .person--walk { animation: none; }
}


/* ==========================================================================
   8. MENU AND ORDER (js/menu.js)
   Not a modal over a page: a barnwood panel that rides up over the floor
   from the table you clicked, while the room carries on above it, dimmed.
   Made of the room's own stuff: vertical boards, hard dark edges, burnt-gold
   lettering (assets/menu-heads/, at 1x or 2x only). Inside, a sheet of aged
   paper with the menu at real reading sizes: readable first, themed second.
   ========================================================================== */
.page-room {
  --paper:     #D9C49B;
  --paper-hi:  #E2CFA8;
  --paper-sh:  #BFA87A;
  --paper-ink: #3A2415;              /* body text on the paper (10.7:1) */
  --paper-dim: #5C4630;              /* descriptions, small print (6.9:1) */
  --paper-rule:#A89070;
  --burn:      #2A1608;              /* names and prices (13.4:1) */
  --edge:      #1A1410;              /* the dark edges everything's drawn with */
  --font-menu: 'Bitter', Georgia, 'Times New Roman', serif;
}

/* The burnt-gold heading art: its own width (--w) at 1x, or exactly 2x. */
.head-art {
  display: block;
  width: calc(var(--w) * 1px);
  height: 24px;
  max-width: none;
  image-rendering: pixelated;
}
@media (min-width: 1100px) and (min-height: 760px) {
  .head-art--big { width: calc(var(--w) * 2px); height: 48px; }
}

/* A click on the room above the panel closes it. */
.panel-catch {
  position: fixed;
  inset: 0;
  z-index: 15;
  cursor: pointer;
}

.panel {
  position: fixed;
  /* Inset from the window's sides, so the saloon floor (and whoever's
     walking across it) shows down both sides of the menu. */
  left: clamp(24px, 4vw, 150px);
  right: clamp(24px, 4vw, 150px);
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  /* Its top sits on the bartop's bottom edge (BAR_BOT: 108 art px down the
     bar strip, times the room scale, from the top of the page), so the two
     bartenders stand right above the menu with nothing between. The height
     is whatever's left, but never less than a usable minimum on a short
     window (the panel then rises over the bar a little). */
  --bar-bot: calc((108 - var(--lift, 0)) * var(--px));
  height: max(calc(100vh - var(--bar-bot)), min(62vh, 480px));
  /* barnwood: vertical boards with dark seams, hard dark edges */
  background:
    repeating-linear-gradient(90deg, #4A3323 0 28px, var(--wood) 28px 32px, #44301F 32px 60px, var(--edge) 60px 64px);
  border: 4px solid var(--edge);
  border-bottom: 0;
  box-shadow: inset 0 4px 0 #6B4A2F;  /* the lit top board */
  color: var(--paper-ink);
  font-family: var(--font-menu);
  /* It rides up from the table it came from: it starts as wide as that
     table, right under it (--from-l / --from-r, set by js/menu.js), and
     opens out to the full width as it comes up. */
  transform: translateY(100%);
  clip-path: inset(0 var(--from-r, 0px) 0 var(--from-l, 0px));
  visibility: hidden;
  transition:
    transform .5s cubic-bezier(.16, .84, .32, 1),
    clip-path .5s cubic-bezier(.7, 0, .3, 1),
    visibility 0s linear .5s;
}
.panel.is-open {
  transform: none;
  clip-path: inset(0);
  visibility: visible;
  transition:
    transform .5s cubic-bezier(.16, .84, .32, 1),
    clip-path .5s cubic-bezier(.7, 0, .3, 1),
    visibility 0s;
}

/* the top rail: title, Menu/Order, the way back */
.panel__grip {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(#543924, var(--wood));
  border-bottom: 4px solid var(--edge);
}
.panel__title { margin: 0 auto 0 0; font-size: inherit; line-height: normal; }
.panel__title:focus { outline: none; }
.panel__title:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
.panel__modes { display: flex; gap: 8px; }
.panel__mode {
  display: block;
  padding: 8px 12px;
  background: linear-gradient(#5C4029, #42301F);
  border: 4px solid var(--edge);
}
.panel__mode[aria-current="true"] {
  background: linear-gradient(#B08A3C, #8A6B28);
  box-shadow: inset 0 4px 0 var(--gold-light);
}
.panel__mode:hover { background: linear-gradient(#6E4E33, #4E3825); }
.panel__mode[aria-current="true"]:hover { background: linear-gradient(#C29A48, #9A7830); }
.panel__shut {
  padding: 12px 16px;
  border: 4px solid var(--edge);
  background: linear-gradient(#5C4029, #42301F);
  color: var(--bone);
  font: 700 13px/1 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.panel__shut:hover { background: linear-gradient(#6E4E33, #4E3825); }

/* the paper */
.panel__sheet {
  display: grid;
  flex: 1;
  grid-template-columns: 206px minmax(0, 1fr);
  width: calc(100% - 32px);
  min-height: 0;
  margin: 16px auto;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--paper-hi), transparent 60%),
    repeating-linear-gradient(0deg, rgba(150, 120, 80, .05) 0 4px, transparent 4px 8px),
    var(--paper);
  border: 4px solid var(--edge);
  box-shadow: inset 0 0 0 4px var(--paper-sh);
}
.panel--order .panel__sheet { grid-template-columns: 206px minmax(0, 1fr) 320px; }

/* Focus on the paper: a burnt ring (10:1), not the gold one (1.3:1 on
   paper). On the wood strips (tab head, customiser title) it stays gold. */
.panel__sheet :focus-visible,
.cust :focus-visible { outline-color: var(--burn); }
.tab__head :focus-visible,
.cust__title:focus-visible { outline-color: var(--gold); outline-offset: -4px; }
.panel__cats a:focus-visible,
.panel__list:focus-visible { outline-offset: -4px; }
.tab__head .tab__title:focus-visible { outline-offset: 4px; }   /* outside the YOUR TAB art */
.tab__settle:focus-visible { outline-offset: -8px; }             /* inside: nothing clips it */

/* sections down the side */
.panel__cats {
  overflow-y: auto;
  padding: 16px 0;
  border-right: 2px solid var(--paper-rule);
}
.panel__cats a {
  display: block;
  padding: 12px 16px;
  border-left: 4px solid transparent;
  color: var(--paper-dim);
  font: 600 16.5px/1.3 var(--font-menu);
  text-decoration: none;
}
.panel__cats a:hover { color: var(--burn); background: rgba(160, 130, 90, .16); }
.panel__cats a[aria-current="true"] {
  color: var(--burn);
  border-left-color: var(--gold);
  background: rgba(232, 163, 23, .16);
}

/* the menu itself */
.panel__list {
  overflow-y: auto;
  padding: 20px 28px 40px;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}
/* The panel's headings are its own: none of the room page's Rye headers
   or hard oxblood shadow in here. */
.panel h1,
.panel h2,
.cust h2 { text-shadow: none; will-change: auto; }
.menu-sec { container-type: inline-size; }
.menu-sec + .menu-sec { margin-top: 32px; }
@media (min-width: 1500px) {
  .menu-cols { column-count: 2; column-gap: 52px; column-rule: 1px solid var(--paper-rule); }
  .menu-sec { break-inside: avoid-column; margin-bottom: 32px; }
  .menu-sec + .menu-sec { margin-top: 0; }
}
.menu-sec__head {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--paper-rule);
  scroll-margin-top: 16px;
}
.menu-sec__head:focus { outline: none; }
.menu-sec__head--text { font: 700 24px/1.2 var(--font-menu); color: var(--burn); }
.menu-items { margin: 4px 0 0; }

.mi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  padding: 11px 4px;
  border-bottom: 1px dotted rgba(80, 60, 35, .35);
}
.mi__name {
  display: flex;
  align-items: last baseline;
  align-self: last baseline;
  color: var(--burn);
  font: 600 19px/1.3 var(--font-menu);
}
.mi__name::after {                  /* the dot leader */
  content: "";
  flex: 1 1 24px;
  min-width: 24px;
  margin: 0 0 4px 8px;
  border-bottom: 2px dotted rgba(58, 36, 21, .5);
}
.mi__price {
  max-width: 18em;
  margin: 0;
  color: var(--burn);
  font: 600 18px/1.3 var(--font-menu);
  text-align: right;
  align-self: last baseline;
}
.mi__v { white-space: nowrap; }      /* one price and its label never split... */
.mi__n { white-space: nowrap; }      /* ...and on phones, where a long label has to
                                        wrap, the number keeps its last word */
.mi__desc {
  grid-column: 1;
  max-width: 46ch;                   /* wraps well before the price column */
  margin: 2px 0 0;
  color: var(--paper-dim);
  font: italic 15px/1.5 var(--font-menu);
}

/* Order mode: the whole row is the button */
.mi--pick { position: relative; }
.mi__pick {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mi__pick::after { content: ""; position: absolute; inset: 0; }
.mi__pick:focus-visible { outline: none; }
.mi--pick:hover,
.mi--pick:has(.mi__pick:focus-visible) {
  background: rgba(232, 163, 23, .16);
  box-shadow: inset 4px 0 0 var(--gold);
}
.mi--pick:has(.mi__pick:focus-visible) { outline: 4px solid var(--burn); outline-offset: -4px; }
.mi--pick .mi__v:last-child .mi__n::after {
  content: "+" / "";
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-left: 10px;
  border: 2px solid #7A5C1E;         /* a darker gold: 3.6:1 on the paper */
  background: rgba(232, 163, 23, .12);
  color: #7A5C1E;
  font: 700 19px/22px var(--font-menu);
  text-align: center;
  vertical-align: -4px;
}
.mi--pick:hover .mi__v:last-child .mi__n::after,
.mi--pick:has(.mi__pick:focus-visible) .mi__v:last-child .mi__n::after {
  border-color: var(--edge);
  background: var(--gold);
  color: var(--burn);
}

/* (These come after the item rules above, which they override.) */
/* A narrow section: an item with several prices gives the name the width
   and puts its prices on a line of their own. */
@container (max-width: 560px) {
  .mi--long { grid-template-columns: minmax(0, 1fr); }
  .mi--long .mi__name::after { display: none; }
  .mi--long .mi__price { grid-row: 2; max-width: none; margin-top: 2px; }
  .mi--long .mi__desc { grid-row: 3; }
}
/* Very narrow (phones): a long price label may wrap; its amount keeps the
   word before it. */
@container (max-width: 420px) {
  .mi__price { max-width: 10em; }
  .mi__v { white-space: normal; }
}

.menu-note {
  margin: 16px 0 0;
  padding: 12px;
  border: 2px solid var(--paper-rule);
  background: rgba(255, 255, 255, .22);
  color: var(--paper-dim);
  font: 14.5px/1.6 var(--font-menu);
}
.menu-note b { color: var(--burn); }
.menu-small {
  margin-top: 32px;
  color: var(--paper-dim);
  font: 14px/1.5 var(--font-menu);
}
.menu-small p { margin: 0 0 4px; }

.kitchen-closed {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--oxblood);
  border: 4px solid var(--edge);
  color: var(--bone);
  font: 600 16px/1.45 var(--font-menu);
}

/* YOUR TAB */
.tab {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(var(--paper-hi), #C9B289);
  border-left: 4px solid var(--edge);
}
.tab__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(#543924, var(--wood));
  border-bottom: 4px solid var(--edge);
}
.tab__title { margin: 0; }
.tab__toggle { display: none; }
.tab__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;                  /* SETTLE UP is always reachable */
}
.tab__lines {
  flex: 1 1 auto;
  min-height: 64px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 16px;
  list-style: none;
}
.tab__lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px dotted rgba(80, 60, 35, .4);
  font: 15px/1.4 var(--font-menu);
}
.tab__what small { color: var(--paper-dim); font-size: 14px; }
.tab__what { min-width: 0; overflow-wrap: anywhere; }
.tab__amt { font-weight: 600; white-space: nowrap; }
.tab__rm {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  color: var(--oxblood);
  font: 700 18px/1 var(--font-menu);
  cursor: pointer;
}
.tab__rm:hover { border-color: var(--oxblood); }
.tab__empty {
  flex: 1;
  margin: 0;
  padding: 20px 16px;
  color: var(--paper-dim);
  font: italic 15px/1.5 var(--font-menu);
  text-align: center;
}
.tab__closed {
  margin: 0;
  padding: 12px 16px;
  background: var(--oxblood);
  color: var(--bone);
  font: 600 14px/1.45 var(--font-menu);
}
.tab__sum {
  flex: none;
  margin: 0;
  padding: 12px 16px;
  border-top: 4px solid var(--edge);
  font: 14.5px/1.8 var(--font-menu);
}
.tab__sum div { display: flex; justify-content: space-between; }
.tab__sum dt, .tab__sum dd { margin: 0; }
.tab__total { color: var(--burn); font-size: 16px; font-weight: 700; }
.tab__settle {
  display: grid;
  flex: none;
  place-items: center;
  padding: 12px;
  border: 0;
  border-top: 4px solid var(--edge);
  background: linear-gradient(#B08A3C, #8A6B28);
  cursor: pointer;
}
.tab__settle:hover:not(:disabled) { background: linear-gradient(#D0A94C, #A37F2E); }
.tab__settle:disabled { background: #9C8B72; cursor: not-allowed; }
.tab__settle:disabled .head-art { opacity: .45; }
.tab__stub {
  margin: 0;
  padding: 12px 16px;
  border-top: 2px dotted rgba(80, 60, 35, .5);
  color: var(--burn);
  font: 14px/1.45 var(--font-menu);
}

/* The customiser */
.cust {
  width: min(480px, 92vw);
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
  border: 4px solid var(--edge);
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-menu);
}
.cust::backdrop { background: rgba(12, 8, 5, .55); }
/* A flex column: title and footer stay put, only the body scrolls, so ADD
   TO TAB is always in reach. */
.cust__form { display: flex; flex-direction: column; max-height: calc(88vh - 8px); }
.cust__title {
  flex: none;
  margin: 0;
  padding: 12px 16px;
  background: linear-gradient(#543924, var(--wood));
  border-bottom: 4px solid var(--edge);
  color: var(--paper-hi);
  font: 700 19px/1.3 var(--font-menu);
}
/* flex-basis auto: the body is as tall as what's in it, up to the room
   there is, then it scrolls (a 0 basis squashed it and cut off the notes
   label). Nothing in here is positioned or pulled up with a negative margin. */
.cust__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 20px; }
.cust__desc {
  display: block;
  margin: 0 0 20px;
  color: var(--paper-dim);
  font: italic 15px/1.5 var(--font-menu);
}
.cust fieldset { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.cust legend,
.cust__notes > .cg__label {
  padding: 0;
  color: var(--paper-dim);
  font: 700 13.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cust legend { margin-bottom: 6px; }
.cg__cap {
  margin-left: 6px;
  color: var(--paper-dim);           /* 5.2:1 on the paper */
  font: italic 400 13px/1.3 var(--font-menu);
  letter-spacing: 0;
  text-transform: none;
}
.cg--err legend .cg__label { color: var(--oxblood); }
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--burn);
  font: 16px/1.35 var(--font-menu);
  cursor: pointer;
}
.opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #7A5C1E; }  /* 3.6:1 on the paper */
.opt input:disabled { cursor: not-allowed; }
.opt:has(input:disabled) { color: var(--paper-dim); cursor: not-allowed; }
.opt:has(input:disabled) > span { opacity: .6; }
.opt__p { margin-left: auto; color: var(--paper-dim); font-size: 15px; white-space: nowrap; }
.cust__notes { display: block; margin: 0; }
.cust__notes textarea { display: block; margin-top: 6px; }
.cust__notes textarea {
  width: 100%;
  padding: 8px;
  border: 2px solid var(--paper-rule);
  background: rgba(255, 255, 255, .45);
  color: var(--paper-ink);
  font: 16px/1.4 var(--font-menu);
  letter-spacing: 0;
  text-transform: none;
  resize: vertical;
}
.cust__foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 4px solid var(--edge);
  background: rgba(160, 130, 90, .16);
}
.cust__qty { display: flex; align-items: center; border: 2px solid var(--edge); }
.cust__qty button {
  width: 36px;
  height: 36px;
  border: 0;
  background: #C9B289;
  color: var(--burn);
  font: 700 18px/1 var(--font-menu);
  cursor: pointer;
}
.cust__qty input {
  width: 44px;
  height: 36px;
  border: 0;
  background: var(--paper-hi);
  color: var(--burn);
  font: 700 16px/1 var(--font-menu);
  text-align: center;
  -moz-appearance: textfield;
}
.cust__qty input::-webkit-inner-spin-button,
.cust__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cust__cancel,
.cust__add {
  padding: 12px;
  border: 2px solid var(--edge);
  font: 700 13px/1 var(--font-menu);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.cust__cancel { background: #C9B289; color: var(--burn); }
.cust__add { flex: 1; background: linear-gradient(#D0A94C, #B08A3C); color: var(--burn); }
.cust__add:hover { background: linear-gradient(#DDB65A, #BE9544); }
.opt__err {
  margin: 0 0 4px;
  color: var(--oxblood);
  font: 700 15px/1.35 var(--font-menu);
}

/* Medium and narrow screens, and short ones (a phone on its side): one
   column. Sections become a sideways scroller, the tab spans the width
   along the bottom of the sheet and opens up on demand. */
@media (max-width: 1000px), (max-height: 560px) {
  .panel__sheet,
  .panel--order .panel__sheet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .panel--order .panel__sheet { grid-template-rows: auto minmax(0, 1fr) auto; }
  .panel__cats {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    border-right: 0;
    border-bottom: 2px solid var(--paper-rule);
  }
  .panel__cats a { flex: none; white-space: nowrap; border-left: 0; border-bottom: 4px solid transparent; }
  .panel__cats a[aria-current="true"] { border-bottom-color: var(--gold); }
  .tab { border-left: 0; border-top: 4px solid var(--edge); max-height: 40vh; }
  .tab__head { padding: 8px 12px; }
  .tab__toggle {
    display: block;
    padding: 8px 12px;
    border: 2px solid var(--edge);
    background: var(--paper-hi);
    color: var(--burn);
    font: 700 14px/1 var(--font-menu);
    cursor: pointer;
  }
  .tab__body { display: none; }
  .tab--open .tab__body { display: flex; }
  .tab__lines { flex: none; min-height: 0; overflow: visible; }
  .tab__settle { position: sticky; bottom: 0; }
}

/* Phones: an 8px inset, a single slim top bar (the title makes way: the
   pressed MENU / ORDER button says the same), a taller panel, narrower
   margins. */
@media (max-width: 760px) {
  .panel { left: 8px; right: 8px; }
  .panel__grip { flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px; }
  .panel__title,
  .panel__shut-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .panel__mode { padding: 6px 8px; }
  .panel__shut { padding: 10px 12px; }
  .panel__sheet,
  .panel--order .panel__sheet { width: calc(100% - 16px); margin: 8px auto; }
  .panel__list { padding: 16px; }
}
/* A narrow customiser: ADD TO TAB gets a row of its own, after quantity and
   Cancel (the same order it's reached with Tab). */
@media (max-width: 520px) {
  .cust__foot { flex-wrap: wrap; }
  .cust__add { flex: 1 1 100%; }
}

@media (max-width: 359px) {
  .panel__grip,
  .panel__modes { gap: 4px; }
  .panel__mode { padding: 4px; }
  .panel__shut { padding: 10px 8px; letter-spacing: .06em; }
}

/* Short screens: the minimum is most of the window, a little of the room
   still showing. */
@media (max-height: 560px) {
  .panel { height: max(calc(100vh - var(--bar-bot)), 86vh); }
  .panel__grip { padding-block: 4px; }
}

/* Very short (a phone on its side, or a zoomed-in window): nested
   scrollers get too small to use, so the whole panel scrolls as one
   column, the top bar stays put and the tab rides along the bottom. */
@media (max-height: 460px) {
  .panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 72px;          /* the sticky top bar */
    scroll-padding-bottom: 64px;       /* the sticky tab bar */
  }
  .panel__grip { position: sticky; top: 0; z-index: 2; }
  .panel__sheet,
  .panel--order .panel__sheet { display: block; flex: none; }
  .panel__list { overflow: visible; }
  .menu-sec { scroll-margin-top: 8px; }
  .tab { position: sticky; bottom: 0; z-index: 1; max-height: calc(86vh - 100px); }
}

@media (prefers-reduced-motion: reduce) {
  .room { transition: none; }
  .panel,
  .panel.is-open { transform: none; clip-path: none; transition: none; }
  .panel:not(.is-open) { visibility: hidden; }
  .panel__list { scroll-behavior: auto; }
}


/* ==========================================================================
   9. OTHER PANELS + ABOUT (js/menu.js "Other panels", js/about.js)
   ABOUT, GAMES and the like ride the menu's panel. In one of them the
   MENU / ORDER buttons, the section nav and YOUR TAB step aside and the
   paper sheet is a single page (#panel-page).
   ========================================================================== */
.panel--page .panel__sheet {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.panel__page {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 36px 40px;
  container-type: inline-size;
}
/* heading art that hasn't been cut yet: the word, the same height */
.head-text {
  display: block;
  color: var(--gold);
  font: 400 20px/24px var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 1100px) and (min-height: 760px) {
  .head-text--big { font-size: 40px; line-height: 48px; }
}

/* ABOUT: the story on the left, how to find us on the right (first on a
   phone, where tap-to-call and tap-for-directions matter most). */
.about {
  display: grid;
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
  color: var(--paper-ink);
  font-family: var(--font-menu);
}
@container (min-width: 820px) {
  .about { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
  .about__visit { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 0; }
  .about__story { grid-column: 1; grid-row: 1; }
}
.about__name {
  margin: 0;
  color: var(--burn);
  font: 400 34px/1.2 var(--font-display);
}
.about__est {
  margin: 4px 0 20px;
  color: var(--paper-dim);
  font: italic 16px/1.5 var(--font-menu);
}
.about__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 20px;
  font: 16px/1.4 var(--font-menu);
}
.about__facts div { display: flex; gap: 8px; }
.about__facts dt { color: var(--paper-dim); font-weight: 700; }
.about__facts dd { margin: 0; color: var(--burn); }
.about__story p {
  max-width: 64ch;
  margin: 0 0 16px;
  font: 17px/1.7 var(--font-menu);
}
.about__h {
  margin: 28px 0 10px;
  color: var(--paper-dim);
  font: 700 13.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.about__visit .about__h:first-child { margin-top: 0; }
.about__features {
  columns: 2 16em;
  column-gap: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  list-style: square;
  font: 16px/1.5 var(--font-menu);
}
.about__features li { margin: 0 0 8px; break-inside: avoid; }
.about__features li::marker { color: #7A5C1E; }
.about__story .about__small {
  margin: 28px 0 0;
  color: var(--paper-dim);
  font: 13px/1.5 var(--font-menu);
}

.about__visit {
  padding: 20px;
  border: 4px solid var(--edge);
  background: linear-gradient(var(--paper-hi), #CDB78E);
  box-shadow: inset 0 0 0 2px var(--paper-sh);
}
.about__address { display: grid; gap: 10px; font-style: normal; }
/* big, obvious tap targets: directions and a call */
.about__link {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--paper-rule);
  background: rgba(255, 255, 255, .35);
  color: var(--burn);
  text-decoration: none;
}
.about__link:hover { border-color: var(--edge); background: rgba(232, 163, 23, .18); }
.about__big { font: 700 19px/1.3 var(--font-menu); }
.about__hint {
  color: #6E4A12;
  font: 700 12px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.about__hours { margin: 0; font: 16px/1.5 var(--font-menu); }
.about__hours div { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 4px 0; }
.about__hours dt { color: var(--paper-dim); font-weight: 700; }
.about__hours dd { margin: 0; color: var(--burn); }
.about__social { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.about__social a { color: var(--burn); font: 700 16px/1.5 var(--font-menu); }

@media (max-width: 760px) {
  /* the top bar has room for the title again: no MENU / ORDER buttons */
  .panel--page .panel__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .panel__page { padding: 16px; }
  .about__name { font-size: 28px; }
  .about__story p { font-size: 16.5px; }
}
@media (max-height: 460px) {
  .panel__page { overflow: visible; }
}