/* =========================================================================
   The Grub Shack — visual design
   =========================================================================

   The brand was measured off the live site, not invented: oxblood #73000A and
   gold #CC992E on black, ROWLAND for display, Vintage Millenia as the script,
   and the GS_WOOD texture. Those are the restaurant's, and they stay.

   What changes is the execution. The Avada build renders the same section
   twice, ships 9 MB of images and has no consistent type scale or spacing.
   This is the same brand on a real grid.

   Type roles, and they are not interchangeable:
     ROWLAND           display serif, caps, section headings and item names
     Vintage Millenia  script — the tagline and section kickers ONLY. It is a
                       signature face; a price set in it is unreadable.
     system sans       body copy and every price, with tabular numerals

   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */

/* Poppins, for the homepage slider only — the face live's Slider Revolution
   sets it in. Self-hosted like the others (latin subset, from Google Fonts,
   SIL Open Font License), so no page view calls out to a third party. */
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rowland";
  src: url("/assets/fonts/Rowland.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vintage Millenia";
  src: url("/assets/fonts/Vintage-Millenia.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */

/* The DARK palette. :root carries it for the header, footer and every other
   wood band; .wood re-asserts it so a wood band inside the metal (the page
   banner, the hero, a callout) goes back to cream on black. */
:root, .wood {
  /* brand, as measured */
  --oxblood:      #73000a;   /* brand. A FILL only — as text on the dark ground it
                                is 1.4:1, invisible. */
  --oxblood-edge: #b8323f;   /* the same hue lifted to 3.2:1 — borders and other
                                non-text accents, where 3:1 is the bar */
  --alert:        #d4616f;   /* and lifted again to 5.2:1, for the few places
                                where something in that hue has to be READ:
                                "Price not set", the staging note, block errors */
  --gold:         #cc992e;
  --gold-bright:  #e3b552;
  --brand-gold:   #cc992e;   /* never flips: rules and frames on either ground */
  /* the tapered gold rule under headings and card titles (owner's call, 26 Sep
     2026): solid for half its run, then fading; and the centred form */
  --taper:        linear-gradient(to right, var(--brand-gold) 55%, transparent);
  --taper-centre: linear-gradient(to right, transparent, var(--brand-gold) 25% 75%, transparent);
  /* the same taper in garnet (the brand oxblood), beside the menu's headings —
     the owner's call, 27 Sep 2026 */
  --taper-garnet: linear-gradient(to right, var(--oxblood) 55%, transparent);

  /* ground and surfaces */
  --ground:       #12100e;
  --ground-deep:  #0a0908;
  --surface:      #1c1917;
  --surface-lift: #262220;
  --line:         #332d28;
  --line-strong:  #4a4139;

  /* text */
  --cream:        #f4ece0;
  --cream-muted:  #b3a89a;
  --cream-faint:  #9a8d7e;   /* 5.4:1 on --surface; the badges and row
                                subtitles set in it are small text */

  /* roles that differ between the two grounds */
  --price:        var(--gold);
  --on-gold:      var(--ground-deep);  /* text on a gold fill */

  /* text on an oxblood fill — the same on either ground */
  --on-fill:      #f4ece0;

  /* type */
  --display: "Rowland", "Playfair Display", Georgia, serif;
  --script:  "Vintage Millenia", "Brush Script MT", cursive;
  --sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* scale — 1.25 minor third, rounded */
  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.563rem;
  --step-3:  1.953rem;
  --step-4:  2.441rem;
  --step-5:  3.052rem;

  --measure: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 4px;
}

/* ----------------------------------------------------------------- base -- */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font: var(--step-0)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }

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

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* A wood band. The texture is a 33 KB crop of the brand's own GS_WOOD asset,
   dimmed hard so it reads as material rather than as a photograph. */
.wood {
  position: relative;
  color: var(--cream);
  background: var(--ground-deep);
  isolation: isolate;
}
.wood::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* mirrored 2x2 tile, so the repeat has no visible seam. Fixed to the
     viewport, as live's wood is: the header and the title band (or the home
     hero) under it then read as one surface, where separately tiled bands
     showed a seam along the join. */
  background: url("/assets/brand/wood.jpg") center/700px repeat fixed;
  opacity: .18;
  filter: saturate(.65) brightness(.5);
}

/* ----------------------------------------------------------- metal ground -- */

/* The content ground, as on the live site: the corrugated metal wall
   (aluminum-corrugated-metal-wallGS.jpg) under a white wash. The tile is the
   photo's top half over its own mirror image, so it repeats with no seam —
   the photo's top and bottom edges do not match, and showed as bands.
   Live runs the wash from 50% to 80–100% white, section by section. This is
   78% to 90%, fixed to the viewport so every screen reads alike — the heavy
   end of live's range on purpose. Measured over the darkest ridges, a 60% wash
   left body copy at 3.8:1 and gold text at 2.5:1; at 78% the worst ridge is
   #d3d3d3 and everything set directly on the metal passes AA.

   On it the palette turns over, and these are live's own choices on the metal:
   headings near-black, body #4a4e57, prices in oxblood. The brand gold as TEXT
   fails on a light ground, so text gold here is #6e4d0c (5.1:1 at the worst
   ridge); as a rule or a border it is still the brand gold's job.

   28 Sep 2026, the owner: "a touch grayer, more silver ... just to darken a
   touch" — and of four options, the darkest: brushed steel, a cool #dfe3e8
   wash at 74% to 86% ("go with D first and work backwards as needed"). The
   worst ridge is now about #b3b6ba, so the text on the metal goes a notch
   darker to keep AA there: body #414550 (4.7:1), faint #43464d (4.6:1), text
   gold #5e410a (4.6:1). Stepping back to a lighter wash needs none of that. */
.metal {
  --cream:        #16130f;
  --cream-muted:  #414550;
  --cream-faint:  #43464d;
  --surface:      rgb(255 255 255 / .8);
  --surface-lift: #e2e2e2;
  --line:         #c4c5c8;
  --line-strong:  #9ea0a4;
  --gold:         #5e410a;
  --gold-bright:  #503706;
  --alert:        #9e1a2a;
  --oxblood-edge: var(--oxblood);
  --price:        var(--oxblood);
  --on-gold:      #fff;

  color: var(--cream);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  background:
    linear-gradient(rgb(223 227 232 / .74), rgb(223 227 232 / .86)) fixed,
    #d6d6d6 url("/assets/brand/metal.jpg") center top / 1400px auto repeat;
}
/* A page that ends on a wood band (the About and Contact callouts) runs
   straight into the wood footer; the padding would leave a strip of metal
   between two wood bands. */
.metal:has(> .page > .wood:last-child) { padding-bottom: 0; }

/* --------------------------------------------------------------- header -- */

/* As on the live site: the menu split either side of the guitar pick. A
   three-column grid — the pick holds the middle column across both rows, and
   the nav takes the second row on a subgrid, so its two halves sit exactly
   either side of the pick at every width. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 1.1rem;
  padding-block: 1.4rem 1.1rem;
}

.site-head__toggle { display: none; }

.site-head__pick { grid-column: 2; grid-row: 1 / 3; display: block; }
.site-head__pick img {
  width: clamp(130px, 12vw, 176px);
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .55));
}

.site-head__left  { grid-column: 1; grid-row: 1; }
.site-head__right {
  grid-column: 3; grid-row: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: .7rem;
  text-align: right;
}

.site-head__phone {
  font-family: var(--display);
  font-size: clamp(var(--step-2), 2.4vw, var(--step-3));
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--cream);
  text-decoration: none;
}
.site-head__phone:hover { color: var(--gold); }
.site-head__note {
  margin: .3rem 0 0;
  font-family: var(--script);
  font-size: clamp(var(--step-1), 2vw, var(--step-2));
  color: var(--gold);
}

.site-head__addr span { white-space: nowrap; }
.site-head__addr {
  margin: 0;
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}
.site-nav__left  { grid-column: 1; }
.site-nav__right { grid-column: 3; }
/* Title case in the display face, as live sets it — not capitals */
.site-nav a {
  font-family: var(--display);
  font-size: clamp(var(--step-1), 1.9vw, var(--step-3));
  letter-spacing: .02em;
  color: var(--cream);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--gold); }

/* ---------------------------------------------------------------- pages -- */

main { display: block; }

/* The page title runs on from the header band, between two gold rules, the
   way live sets it under the pick. */
.page-head {
  text-align: center;
  padding-block: clamp(.5rem, 2vw, 1rem) clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 2px solid var(--brand-gold);
}
.page-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.page-head__inner::before,
.page-head__inner::after {
  content: "";
  height: 1px;
  background: linear-gradient(to left, var(--brand-gold), transparent);
}
.page-head__inner::after { background: linear-gradient(to right, var(--brand-gold), transparent); }
.page-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(var(--step-4), 8vw, var(--step-5));
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
}
.page-head__script {
  display: block;
  margin-top: .25rem;
  font-family: var(--script);
  font-size: clamp(var(--step-2), 5vw, var(--step-3));
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0;
}

/* -------------------------------------------------------------- banner --- */

.banner {
  margin: 0;
  padding: .85rem var(--gutter);
  background: var(--oxblood);
  color: var(--on-fill);
  text-align: center;
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-block: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ------------------------------------------------------------- sections -- */

/* NOTE for anything added below: `.section > *` centres children with
   margin-inline:auto. Use `margin-block` on those children, never the `margin`
   shorthand — the shorthand resets the inline margins and the element silently
   jumps to the left edge on any viewport wider than --measure. */

.menu > * + * { border-top: 1px solid var(--line); }

.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section > * { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.section__heading {
  margin-block: 0 .5rem;
  font-family: var(--display);
  font-size: clamp(var(--step-3), 5.5vw, var(--step-4));
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* the rule that runs out from the heading — a menu-board device, done in CSS
   so it never has to be maintained as an image */
.section__heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
}

.section__subheading {
  margin-block: 0 1rem;
  font-family: var(--script);
  font-size: var(--step-2);
  color: var(--gold);
}

.section__intro { color: var(--cream-muted); }
/* The measure goes on the paragraphs. Putting it on .section__intro made the
   block narrower than its container, and `.section > *`'s margin-inline:auto
   then centred it — so the copy sat indented from its own heading. */
.section__intro p { margin: .5rem 0; max-width: 58ch; }

/* ------------------------------------------------------------ item grid -- */

.grid {
  list-style: none;
  margin: 2rem auto 0;
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transition: none; transform: none; }
}

.card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-lift);
}

.card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.card__name {
  margin: 0;
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.15;
}
.card__name::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .45rem;
  background: var(--taper);
}
.card__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--cream-muted);
  /* long WooCommerce descriptions are novels; show the opening and let the
     item page carry the rest once there is one */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot { margin-top: auto; display: flex; align-items: baseline; gap: .6rem; }

.card--unavailable { opacity: .55; }
.card--unavailable .card__img { filter: grayscale(1); }

/* -------------------------------------------------------------- prices --- */

.price {
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1);
  color: var(--price);
  white-space: nowrap;
}
.price--missing {
  font-weight: 400;
  font-size: var(--step--1);
  font-style: italic;
  color: var(--alert);
}
.price--feature { font-size: var(--step-4); }
.price--group { font-size: var(--step-2); }

.badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--cream-faint);
}

.grid-empty {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  padding-inline: var(--gutter);
  color: var(--cream-faint);
  font-style: italic;
}

/* ------------------------------------------- the hand-typed menu boards -- */

/* These are the seven sections with no product grid. They are printed-menu
   content, so they are styled as menu boards rather than as cards. */

.feature, .price-list, .tier-list, .group-price, .chips {
  max-width: var(--measure);
  margin: 1.75rem auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  /* the stripe on the left in the primary gold, on every one of these boxes
     (owner, 28 Sep 2026) — on the metal --gold is the darker text gold */
  border-left: 3px solid var(--brand-gold);
  border-radius: var(--radius);
}

.feature__name, .price-list__name, .tier-list__for, .chips__heading {
  margin: 0;
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* NOT the script face. This content is written in caps ("JUST THE MEATS!",
   "STRIPPED PROTIEN") and a script set in caps is close to unreadable. The
   script is reserved for title-case signature lines — the tagline, "Grub Shack
   Kids", the Tiffany's credit. */
.feature__kicker, .price-list__kicker {
  margin: .35rem 0 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.feature__desc, .price-list__desc {
  margin: .75rem 0 0;
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--cream-muted);
}

.feature__contents {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: .03em;
}
.feature__contents li + li::before {
  content: "|";
  margin-right: 1rem;
  color: var(--gold);
}
.price--feature { margin: 1.25rem 0 0; }

/* Name, leader dots, price — the way a printed menu sets a line. The dots are
   a repeating gradient, so they reflow with the text instead of being typed in. */
dl { margin: 1rem 0 0; }
.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .5rem;
  padding-block: .55rem;
}
.row + .row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.row dt { margin: 0; font-size: var(--step-1); }
.row::after {
  content: "";
  height: 1px;
  margin-bottom: .25rem;
  background: repeating-linear-gradient(to right,
    var(--line-strong) 0 2px, transparent 2px 7px);
  order: 2;
}
.row dd { margin: 0; order: 3; }
.row dt { order: 1; }
.row__subtitle {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ------------------------------------------------------------ chip lists -- */

.chips ul, .group-price ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
}
.chips li, .group-price li {
  padding: .3rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--step--1);
  letter-spacing: .03em;
  color: var(--cream);
}


/* -------------------------------------------------------- notes, credits -- */

.note {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  padding-inline: var(--gutter);
  color: var(--cream-muted);
}
.note p { margin: .35rem 0; font-size: var(--step--1); }
.note__kicker {
  display: inline-block;
  margin: 0 .4rem .5rem 0;
  padding: .2rem .7rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

.credit {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.75rem auto 0;
  max-width: var(--measure);
  padding-inline: var(--gutter);
}
.credit__logo { width: 92px; flex: none; }
.credit p {
  margin: 0;
  font-family: var(--script);
  font-size: var(--step-2);
  color: var(--gold);
}

.figure { max-width: var(--measure); margin: 1.5rem auto 0; padding-inline: var(--gutter); }
.figure img { border-radius: var(--radius); }

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

/* Live's footer (measured 28 Sep 2026 at 1440): two ruled link lists in
   small white capitals, the small slider, the hours in gold Rowland — the
   days in italic, larger — and the white ALT logo, across one row on the
   wood band. */
.site-foot {
  border-top: 2px solid var(--gold);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.site-foot__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(8rem, 12rem)) minmax(8rem, 10rem) minmax(15rem, 1fr) auto;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  max-width: 82rem;     /* live's footer runs wider than the page's measure */
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-foot p { margin: 0; }
.site-foot__links ul { list-style: none; margin: 0; padding: 0; }
.site-foot__links li { border-bottom: 1px solid rgb(255 255 255 / .28); }
.site-foot__links a {
  display: block;
  padding: .8rem 0;
  font-family: var(--display);
  font-size: .9rem;
  letter-spacing: .1em;
  color: #fff;
  text-decoration: none;
}
.site-foot__links a:hover, .site-foot__links a:focus-visible { color: var(--gold); }
.site-foot__links a[aria-current="page"] { color: var(--gold); }   /* gold, as the header nav marks it (owner, 28 Sep 2026) */
.site-foot__fader { align-self: center; }
.site-foot__fader .fader { aspect-ratio: 8 / 5; }
.site-foot__when { align-self: center; text-align: center; }
.site-foot__addr {
  margin-top: clamp(1.25rem, 2.5vw, 2rem) !important;
  font-size: .95rem;
  line-height: 1.7;
  letter-spacing: .03em;
  color: #f4ece0;
}
.site-foot__addr a { font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em; color: #fff; text-decoration: none; }
.site-foot__addr a:hover, .site-foot__addr a:focus-visible { color: var(--gold); }
.site-foot__hours {
  align-self: center;
  text-align: center;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
  color: var(--gold);
}
.site-foot__hours span {
  display: block;
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
  font-style: italic;
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  text-transform: uppercase;
}
.site-foot__logo { width: clamp(9rem, 13vw, 11.5rem); height: auto; align-self: center; }
.site-foot__inner > .staging { grid-column: 1 / -1; }

@media (max-width: 64rem) {
  .site-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__fader, .site-foot__when, .site-foot__logo { grid-column: span 1; justify-self: center; }
  .site-foot__fader { width: min(12rem, 100%); }
}
@media (max-width: 30rem) {
  .site-foot__inner { grid-template-columns: 1fr; text-align: center; }
  .site-foot__hours { white-space: normal; }
  .site-foot__links a { padding: .65rem 0; }
  .site-foot__links--menu { display: none; }   /* the menu's links, off the phone footer (owner, 28 Sep 2026) */
}
.staging {
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--alert);
}

/* --------------------------------------------------------------- errors -- */

.block-error {
  max-width: var(--measure);
  margin-inline: auto;
  padding: .75rem 1rem;
  border: 1px solid var(--oxblood-edge);
  border-radius: var(--radius);
  color: var(--alert);
}

.routes { line-height: 2.2; }

/* ----------------------------------------------------------- responsive -- */

/* Narrow screens: a menu button and the pick, as live does it. The menu
   folds away only once the script has run (.is-collapsible), so with no
   JavaScript it simply stays open. */
@media (max-width: 52rem) {
  .site-head__inner { grid-template-columns: 1fr auto 1fr; row-gap: .9rem; padding-block: .9rem 1rem; }
  .site-head__pick { grid-row: 1; }
  .site-head__pick img { width: min(56vw, 220px); }
  .site-head__left, .site-head__right, .site-nav { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 36rem) {
  /* on a phone the floating ONLINE ORDER pill sits over the pick's top right:
     the pick a size down and started just under it (owner, 1 Oct 2026) */
  .site-head__pick { margin-top: 2.6rem; }
  .site-head__pick img { width: min(42vw, 160px); }
}
@media (max-width: 52rem) {
  .site-nav { grid-row: 2; display: flex; flex-direction: column; gap: .35rem; }
  .site-nav ul { flex-direction: column; align-items: center; gap: .35rem; }
  .site-nav a { font-size: var(--step-2); }
  .site-head__left  { grid-row: 3; }
  .site-head__right { grid-row: 4; align-items: center; }

  .is-collapsible .site-head__toggle {
    display: grid; place-items: center;
    grid-column: 1; grid-row: 1; justify-self: start; align-self: start;
    width: 2.75rem; height: 2.75rem;
    background: none; border: 0; color: var(--cream); cursor: pointer;
  }
  .site-head__bars, .site-head__bars::before, .site-head__bars::after {
    display: block; width: 1.6rem; height: 3px; border-radius: 2px; background: currentColor;
  }
  .site-head__bars { position: relative; }
  .site-head__bars::before, .site-head__bars::after { content: ""; position: absolute; left: 0; }
  .site-head__bars::before { top: -8px; }
  .site-head__bars::after  { top: 8px; }
  .is-open .site-head__bars { background: transparent; }
  .is-open .site-head__bars::before { top: 0; transform: rotate(45deg); }
  .is-open .site-head__bars::after  { top: 0; transform: rotate(-45deg); }

  .is-collapsible:not(.is-open) .site-head__left,
  .is-collapsible:not(.is-open) .site-head__right,
  .is-collapsible:not(.is-open) .site-nav { display: none; }
}

@media (max-width: 40rem) {
  .hero__inner { padding-block: 2.5rem; }
  .section__heading { display: block; }
  .section__heading::after { display: none; }
  .row { grid-template-columns: 1fr auto; }
  .row::after { display: none; }
  .credit { flex-direction: column; align-items: flex-start; }
}

@media print {
  .site-nav, .site-head__toggle, .staging, .banner { display: none; }
  body { background: #fff; color: #000; }
  .card, .feature, .price-list, .tier-list, .group-price, .chips { border-color: #999; }
}

/* =========================================================================
   Page components — home, about, contact
   ========================================================================= */

/* ------------------------------------------------------------------ hero -- */

.hero { border-bottom: 2px solid var(--gold); text-align: center; }
.hero__inner { padding-block: clamp(3rem, 10vw, 6rem); }

.hero__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--script);
  font-size: clamp(var(--step-2), 4vw, var(--step-3));
  color: var(--gold);
}
.hero__heading {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(var(--step-4), 11vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* under the hours: the musical Grub Shack logo on the left, the COOKED IN
   BEEF TALLOW barrel on the right (owner, 1 Oct 2026) */
.hero__marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 1.25rem;
}
.hero__logo { width: clamp(84px, 9.5vw, 116px); height: auto; }
.hero__badge {
  display: block;
  width: clamp(72px, 9vw, 100px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .5));
}
.hero__hours {
  margin: .75rem 0 0;
  font-size: clamp(var(--step-1), 3.5vw, var(--step-2));
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--cream);
}
.hero__sub {
  margin: .25rem 0 0;
  font-family: var(--display);
  font-size: clamp(var(--step-2), 4vw, var(--step-3));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Coming events | the hours | the specials (owner, 1 Oct 2026): NOW OPEN!
   came off, so the hours, a size up, hold the middle. */
.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 26rem) auto minmax(0, 26rem);
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /* full width: out of the page measure, kept a margin in from the screen's
     edges (owner, 1 Oct 2026) */
  margin-inline: calc(50% - 50vw + var(--gutter) + clamp(0rem, 6vw - 1.5rem, 4rem));  /* none on a phone */
}
.hero__row .hero__hours { font-size: clamp(var(--step-2), 3vw, var(--step-3)); }
.hero__row .hero__sub { font-size: clamp(var(--step-2), 3.4vw, 2.6rem); }
.hero__side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* no box: open on the wood, in the flow of the hours between them (owner,
     1 Oct 2026, option A); the specials read out to the right-hand edge */
  padding: .5rem 0;
  text-align: left;
}
.hero__side--specials { text-align: right; }
.hero__side--specials .hero__specials li { justify-items: center; text-align: center; }
/* Happy Hour centred in its column, its name a size up (owner, 1 Oct 2026) */
.hero__specials .hero__special-name { font-size: clamp(1.6rem, 2.4vw, 2rem); }
/* Happy Hour the feature of the specials (owner, 3 Oct 2026): bigger, in the
   gold script with a shadow, its line and note a size up */
.hero__specials li { gap: .35rem; padding-block: .5rem; }
.hero__specials .hero__special-name {
  font-family: var(--script);
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  color: var(--brand-gold);
  text-shadow: 2px 2px 0 #000, 0 0 18px rgb(204 153 46 / .35);
}
.hero__specials .hero__special-detail { font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: .14em; color: #f4ece0; }
.hero__specials .hero__special-note { font-size: 1rem; }
.hero__side-title {
  margin: 0 0 .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgb(204 153 46 / .6);
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__side-empty { margin: 0; color: var(--cream-muted); }
.hero__shows, .hero__specials { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hero__show { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.hero__show img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgb(204 153 46 / .5);
}
.hero__show-text { display: grid; gap: .1rem; min-width: 0; }
.hero__show-name {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero__show:hover .hero__show-name, .hero__show:focus-visible .hero__show-name { color: var(--gold); }
.hero__show-date { font-size: .85rem; color: var(--cream-muted); }
.hero__side-more {
  margin-top: .9rem;          /* under the shows, not pushed to the column's foot */
  align-self: flex-start;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__specials li { display: grid; gap: .15rem; }
.hero__special-name { font-family: var(--display); font-size: 1.3rem; color: var(--cream); }
.hero__special-detail { letter-spacing: .08em; color: var(--gold); }
.hero__special-note { font-size: .85rem; font-style: italic; color: var(--cream-muted); }
/* The Money under Happy Hour, framed as the menu buttons are: a gold band,
   a thin white line inside it, on black (owner, 1 Oct 2026) */
.hero__feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  background: #000;
  border: 6px solid var(--brand-gold);
  border-radius: 16px;
  box-shadow: inset 0 0 0 3px #fff;
  color: inherit;
  text-decoration: none;
  text-align: left;
  transition: transform .15s ease;
}
.hero__feature:hover { transform: translateY(-2px); }
.hero__feature:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }
.hero__feature img { flex: none; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.hero__feature-text { display: grid; gap: .2rem; }
.hero__feature .hero__special-name { font-size: 1.4rem; }
.hero__feature:hover .hero__special-name { color: var(--gold); }
.hero__feature-price { font-weight: 700; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .hero__feature { transition: none; } }
@media (max-width: 60rem) {
  /* the hours first, then the two panels side by side under them */
  .hero__row { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .hero__row .hero__center { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 36rem) {
  .hero__row { grid-template-columns: 1fr; }
  /* stacked, both read from the left */
  .hero__side--specials { text-align: left; }

}
.hero__lede {
  max-width: 48ch;
  margin: 1.75rem auto 0;
  color: var(--cream-muted);
  font-size: var(--step-1);
}
.hero__card { max-width: 66rem; margin: 2.25rem auto 0; padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem); }
/* rounded as the buttons are (owner, 1 Oct 2026): a pill while it is one row;
   stacked, a big round corner, which leaves the words room. The sign behind
   is clipped to the shape. */
.hero__card.meats__card { border-radius: 999px; overflow: hidden; padding-inline: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 60rem) { .hero__card.meats__card { border-radius: 36px; } }
.hero__card.meats__card:not(.meats__card--plain)::before { background-size: 100% 100%; background-position: center; opacity: .05; }
.hero__card.meats__card:not(.meats__card--plain)::after {
  background:
    linear-gradient(rgb(250 250 251 / .93), rgb(250 250 251 / .93)),
    var(--meats-mark, none) center / 100% 100% no-repeat;
  -webkit-mask: var(--meats-mark, none) center / 100% 100% no-repeat;
          mask: var(--meats-mark, none) center / 100% 100% no-repeat;
}
.hero__features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-around;
  gap: .75rem 1.25rem;
  margin: 0;
  padding: 0;
}
.hero__features li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #16130f;
  text-align: left;
  white-space: nowrap;
}
.hero__features .meats__note { width: 1.4rem; margin: 0; }
/* each note a link (owner, 1 Oct 2026): the same look, gold on hover */
.hero__features a { display: inherit; align-items: inherit; gap: inherit; color: inherit; text-decoration: none; }
.hero__features a:hover span, .hero__features a:focus-visible span { color: var(--oxblood); text-decoration: underline; text-decoration-color: var(--brand-gold); text-underline-offset: .2em; }
.hero__features a:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 60rem) { .hero__features { grid-template-columns: repeat(2, auto); } .hero__features li { justify-content: flex-start; } }
@media (max-width: 36rem) {
  .hero__features { grid-template-columns: auto; justify-content: center; }
  .hero__features li { white-space: normal; }
}

/* --------------------------------------------------------------- buttons -- */

/* ONE button, everywhere — the pill the owner picked from the EATS card
   (26 Sep 2026): oxblood, a hairline of the brand gold, fully rounded, small
   Rowland capitals. The gold is --brand-gold, not --gold, so the border and
   the hover read the same on the wood, on the metal and on the dark card.
   The events tile's "Get Tickets" is a span inside a link, so it borrows the
   look without the class. */
.btn, .event__cta {
  display: inline-block;
  padding: .5rem 1.4rem;
  background: var(--oxblood);
  border: 1px solid var(--brand-gold);
  border-radius: 999px;
  color: var(--on-fill);
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible,
.event__link:hover .event__cta, .event__link:focus-visible .event__cta {
  background: var(--brand-gold);
  color: var(--ground-deep);
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.cta-row { margin-block: 2rem 0 0; }
.section .cta-row, .split__copy .cta-row { margin-top: 2rem; }

/* ------------------------------------------------------------ kicker ----- */
/* The small letterspaced label above a heading. Sans, never the script: this
   content is written in caps and a script set in caps is unreadable. */
.kicker {
  margin: 0 0 .4rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ----------------------------------------------------------------- split -- */

.split__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.split--flip .split__media { order: -1; }
.split--solo .split__inner { grid-template-columns: min(60ch, 100%); justify-content: center; text-align: center; }
.split--solo .cta-row { text-align: center; }

.split__heading {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-size: clamp(var(--step-3), 5vw, var(--step-4));
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.1;
}
.split__lede {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-size: var(--step-2);
  letter-spacing: .06em;
  color: var(--gold);
}
.split__body { color: var(--cream-muted); }
.split__body p { margin: 0 0 1rem; }
.split__footnote { margin: .5rem 0 0; font-size: var(--step--1); color: var(--cream-faint); }
.split__media img { border-radius: var(--radius); border: 1px solid var(--line); }

@media (max-width: 52rem) {
  .split__inner { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}

/* --------------------------------------------------------------- favorites */

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.favorites .section__heading { justify-content: flex-start; }
/* small cards, a quarter of the row each, the price beside the name; a click
   opens the description (owner, 1 Oct 2026) */
.favorites__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-block: 0;          /* margin-block, not margin: keep .section's centring */
  padding-block: 0;         /* and padding-block, so the page gutter still applies */
}
/* the box of specials and announcements on the left, the dishes to its right
   (owner, 1 Oct 2026) */
.favorites--board .favorites__row { grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr); align-items: stretch; gap: clamp(1.5rem, 3vw, 2.5rem); }
.favorites__main { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
.favorites__side { display: flex; flex-direction: column; }
.favorites__side .board { flex: 1; }
.awards--board { justify-content: center; margin-top: .9rem; }
.awards--board .award { color: var(--oxblood); }
.awards--board .award__kind { color: #8a6414; }
.favorites__main .section__heading { margin: 0; }
.favorites__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.favorites__grid > li { flex: 1 1 0; min-width: min(11rem, 100%); max-width: 15rem; }
.favorites--board .favorites__grid { justify-content: center; }   /* centred in their space (owner) */
.favorites--board .favorites__grid > li { max-width: 19rem; }
@media (max-width: 52rem) {
  .favorites--board .favorites__row { grid-template-columns: minmax(0, 1fr); }
  .favorites--board .favorites__grid { justify-content: center; }
}

/* the box: the menu buttons' frame — a gold band, a thin white line, black.
   Fixed colours: on the metal the site's cream and gold tokens turn dark. */
.board {
  padding: 1.5rem 1.6rem 1.6rem;
  background: #000;
  border: 6px solid var(--brand-gold);
  border-radius: 16px;
  box-shadow: inset 0 0 0 3px #fff;
  color: #f4ece0;
}
.board__title {
  margin: 0 0 1.1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgb(204 153 46 / .45);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cc992e;
}
.board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.board__item { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.board__item img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 10px; }
.board__item > span, .board__awards > span:last-child { display: grid; gap: .15rem; }
.board__name { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; color: #f4ece0; }
.board__item:hover .board__name, .board__item:focus-visible .board__name { color: #cc992e; }
.board__price { font-weight: 700; font-size: 1.1rem; color: #cc992e; }
.board__awards { display: flex; align-items: flex-start; gap: .6rem; padding-top: .8rem; border-top: 1px solid rgb(204 153 46 / .3); }
.board__awards .award__star { color: var(--brand-gold); font-size: 1.6rem; line-height: 1; }
.board__line { font-size: 1rem; font-style: italic; color: #cc992e; }
.fav__head { display: block; cursor: pointer; list-style: none; }
.fav__head::-webkit-details-marker { display: none; }
.fav__head:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
.fav .card__img { aspect-ratio: 4 / 3; }
.fav__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .85rem .75rem;
}
.fav .card__name { font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: #333; }
.fav .card__name::after { display: none; }
.fav .price { flex: none; font-size: 1rem; }
.fav__head:hover .card__name { color: var(--oxblood); }
.fav__desc {
  margin: 0;
  padding: .65rem .85rem .9rem;
  border-top: 1px solid rgb(204 153 46 / .45);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted, #54575e);
}

/* --------------------------------------------------------------- callout -- */

.callout { border-block: 2px solid var(--gold); text-align: center; }
.callout__inner { padding-block: clamp(2.5rem, 6vw, 4rem); }
.callout__heading {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(var(--step-3), 5vw, var(--step-4));
  font-weight: 400;
  letter-spacing: .03em;
}
.callout__phone { margin: 1rem 0 0; }

/* the photo form: live's Contact band — the photo under a wash from 25% to
   black, the copy left in white with gold shadows, the pick on the right */
.callout--photo { overflow: hidden; text-align: left; }
.callout--photo::before { display: none; }
.callout__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.callout--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgb(0 0 0 / .25), #000);
}
.callout--photo .callout__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.callout--photo .callout__heading {
  font-style: italic;
  font-size: clamp(2.2rem, 4.2vw, 3.75rem);
  color: #fff;
  text-shadow: 2px 1px 0 var(--brand-gold);
}
.callout--photo .kicker { margin-top: .6rem; color: var(--brand-gold); }
.callout--photo .callout__phone a {
  font-family: var(--script);
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  letter-spacing: 0;
  color: #fff;
  text-shadow: 3px 2px 0 var(--brand-gold);
}
.callout__mark { width: clamp(9rem, 16vw, 14rem); height: auto; }
.callout__phone a {
  font-family: var(--display);
  font-size: clamp(var(--step-3), 6vw, var(--step-5));
  letter-spacing: .04em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- contact -- */

/* Live's Contact page (measured at 1440, 27 Sep 2026): a ~265px column of
   photo, order button, menu links and the gold note, beside ~850px of phone,
   address and form. The phone is live's 90px Rowland with a hard oxblood
   shadow — set dark here, not live's white, which vanishes on this lighter
   metal; the digits under it in script; the address in oxblood. */
.contact-cols__grid {
  display: grid;
  grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.contact-cols__main > .section { padding: 0; }
.contact-cols__main > .section > * { max-width: none; padding-inline: 0; }
.contact-cols__main > .section + .section { margin-top: clamp(2rem, 4vw, 3rem); }

.contact-aside__photo { width: 100%; border-radius: var(--radius); }
.contact-aside__cta { margin: 1.75rem 0 0; text-align: center; }
.contact-aside__heading {
  margin: 2rem 0 .75rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--step-1);
  color: #000;
}
.contact-aside__browse ul { list-style: none; margin: 0; padding: 0; }
.contact-aside__browse li + li { border-top: 1px solid var(--line); }
.contact-aside__browse a {
  display: block;
  padding-block: .6rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .08em;
  color: #333;
  text-decoration: none;
}
.contact-aside__browse a:hover { color: var(--oxblood); }
.contact-aside__mark { width: min(12rem, 70%); margin: 2rem auto 0; }

/* The phone and the form titles take the homepage row's format — tagline
   above, heading in black Rowland italic with a gold shadow, the tapered gold
   rule under (the feature-row__kicker / __heading classes). Here only what
   differs: the phone runs larger, and its digits follow in script. */
.contact-details__phone a { color: inherit; text-decoration: none; }
.contact-details .feature-row__heading { font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
/* no rule under the phone (the owner's call); its digits sit straight under
   it, ending at its right edge */
.contact-details .feature-row__heading::after { display: none; }
/* the address and the number centred in their column (owner, 28 Sep 2026);
   the digits still end under the number's right edge */
.contact-details__addr { text-align: center; }
.contact-details__number { width: fit-content; max-width: 100%; margin-inline: auto; }
.contact-details__script {
  margin: .1rem 0 0;
  text-align: right;
  font-family: var(--script);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: #4a4e57;
  text-shadow: 1px 1px 0 var(--oxblood);
}

/* the small fading slideshow at the top of the left column: live's slider box
   (EATS sign, Grub Shack pick) with the burger photo in the rotation */
.fader {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: var(--radius);
}
.fader__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.fader__img--cover { object-fit: cover; }
.fader__img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fader__img { transition: none; } }

/* the form stacks, full width, as live's does */
.contact-cols .form { grid-template-columns: 1fr; padding-inline: 0; margin-top: 1.5rem; }

.form {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.field { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.field--wide, .form .cta-row { grid-column: 1 / -1; }
.field label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-muted);
}
.field .req { color: var(--gold); }
.field input, .field textarea {
  width: 100%;
  padding: .7rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--cream);
  font: inherit;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); outline: none; }

/* the honeypot must be unreachable, not merely invisible: display:none is
   skipped by some bots, and a sighted user must never land on it by tabbing */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--oxblood-edge);
  border-left: 3px solid var(--alert);
  border-radius: var(--radius);
  background: var(--surface);
}
.form-notice p { margin: 0 0 .5rem; }
.form-notice p:last-child { margin-bottom: 0; }

@media (max-width: 40rem) {
  .form { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- merch -- */

/* The live /merch/ page is one poster; this is it as a grid. Every image is a
   cutout — the deploy trims its transparent padding — so one height here gives
   every shirt the same size, and every koozie the same size. Without the trim
   they drew visibly different sizes, because each file was cropped separately.

   The light tile is the poster's own grey ground: half the shirts are black
   and disappear on the dark page. */

.merch__heading img { width: 3.5rem; height: auto; flex: none; }

.merch__grid {
  list-style: none;
  margin-block: 1.75rem 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}
.merch__grid--koozies {
  margin-block-start: 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}

/* The poster's own ground (GS_Merch_BG-02, the slice the Events page's merch
   box shows): charcoal fading to pale grey hills — the owner's call, 27 Sep
   2026 — in the gold frame the merch boxes carry. */
.merch__tile {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: #b9b8b8 url("/assets/brand/shack-shop-bg.webp") center bottom / cover no-repeat;
  border: 1px solid var(--brand-gold);     /* subtle, the owner's call */
  border-radius: 6px;
  box-shadow: 1px 1px 0 rgb(74 78 87 / .6);
}
.merch__grid--koozies .merch__tile { aspect-ratio: 1; }

/* back upper-right, front lower-left overlapping it — how the poster lays
   every shirt */
.merch__layer { position: absolute; height: 74%; width: auto; max-width: none; }
.merch__layer--back  { top: 6%;    right: 8%; }
.merch__layer--front { bottom: 6%; left: 8%; }

/* koozies stand side by side, the back one upper-left */
.merch__grid--koozies .merch__layer { height: 76%; }
.merch__grid--koozies .merch__layer--back  { top: 5%;    left: 12%; right: auto; }
.merch__grid--koozies .merch__layer--front { bottom: 5%; right: 12%; left: auto; }

@media (max-width: 40rem) {
  /* .section__heading drops to display:block on phones, which would stack the
     badge above the words */
  .merch__heading { display: flex; }
  .merch__heading img { width: 2.75rem; }
  .merch__grid { gap: .75rem; }
  .merch__grid--shirts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- events -- */

/* Shows pulled from QuixTix (lib/events.php). Each tile is one link to the
   show's QuixTix page, where tickets are bought. The gold-framed square art
   and the pill button follow the live tiles. */

.events__grid {
  list-style: none;
  margin-block: 1.75rem 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

.event__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 1.25rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  /* in the product boxes' gold edge and round corners (owner, 1 Oct 2026) */
  border: 1px solid rgb(204 153 46 / .6);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.event__link:hover { color: inherit; border-color: var(--brand-gold); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .event__link, .event__link:hover { transition: none; transform: none; }
}

.event__art {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-bottom: 3px solid var(--brand-gold);
  background: var(--surface-lift);
}
.event__art img { width: 100%; height: 100%; object-fit: cover; }

.event__name {
  margin: 1rem 1rem .4rem;
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.15;
}
.event__name::after {
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  margin: .45rem auto 0;
  background: var(--taper-centre);
}
.event__date {
  margin: 0 1rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.event__time {
  margin: .2rem 1rem 1.1rem;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--cream-muted);
}
.event__cta { margin-top: auto; align-self: center; }

.events__empty { margin-block: 1.5rem 0; font-size: var(--step-1); color: var(--cream-muted); }

/* The QuixTix band (the owner's layout, 27 Sep 2026): on the wood, "Powered
   by" and the QuixTix wordmark — drawn for a dark ground, it needs no backing
   here — with the line under it in the display face. */
.quix-band {
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-block: 2px solid var(--brand-gold);
  text-align: center;
}
.quix-band__by {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  font-family: var(--script);
  font-size: clamp(var(--step-1), 2.4vw, var(--step-3));
  color: var(--brand-gold);
}
.quix-band__by img { width: clamp(9rem, 16vw, 12.5rem); height: auto; }
.quix-band__by a:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 4px; }
.quix-band__line {
  margin: .9rem 0 0;
  font-family: var(--display);
  font-size: clamp(var(--step-0), 1.9vw, var(--step-2));
  letter-spacing: .05em;
  color: #fff;
}

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

/* The live homepage's WRAP — SAMMIE — SALAD band: white Rowland italic with a
   hard gold shadow (2px 1px 0 #cc992e, measured on live), short rules between
   the words, and the script line under them in live's #e2e2e2. */

.band {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-block: 2px solid var(--brand-gold);
}
.band__words {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem clamp(.55rem, 2.4vw, 2.25rem);
  font-family: var(--display);
  font-style: italic;
  /* scales with the screen so the three words hold one row on a phone — a
     wrapped row would start with a dangling rule */
  font-size: clamp(1.3rem, 6.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 2px 1px 0 var(--brand-gold);
}
.band__words span { display: inline-flex; align-items: center; gap: clamp(.55rem, 2.4vw, 2.25rem); }
.band__words span + span::before {
  content: "";
  width: clamp(.9rem, 4vw, 4rem);
  height: 1px;
  background: rgb(226 226 226 / .7);
  box-shadow: none;
}
.band__script {
  margin: .9rem 0 0;
  font-family: var(--script);
  font-size: clamp(var(--step-2), 3.6vw, 2.35rem);
  line-height: 1.25;
  color: #e2e2e2;
  text-shadow: 2px 1px 0 var(--brand-gold);
}
/* too narrow for one row: drop the rules and let the words wrap cleanly */
@media (max-width: 22rem) {
  .band__words span + span::before { display: none; }
}

/* ------------------------------------------------------------ EATS panel -- */

/* The live homepage's card: gold frame (5.6px, 18px corners, measured), the
   EATS sign behind, darkened by live's own wash — black 74% to 88% — so white
   type reads over the gold. Headings are white Rowland italic with the same
   hard gold shadow as the band. It is a dark island in the metal, so it sets
   its own colours rather than inheriting the light palette. */

.eats {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3.5vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.25rem);
  border: 5px solid var(--brand-gold);
  border-radius: 18px;
  box-shadow: 2px 1px 0 #4a4e57;
  background: #000;
  color: #fff;
  /* the brand gold, not the metal's darkened text gold: this card is dark */
  --gold: var(--brand-gold);
  --on-gold: var(--ground-deep);
}
.eats__sign {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: -2;
}
.eats::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgb(0 0 0 / .74), rgb(0 0 0 / .88));
}

.eats__entry + .eats__entry { margin-top: clamp(2rem, 5vw, 3rem); }

.eats__heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(var(--step-3), 3.4vw, 2.5rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 2px 1px 0 var(--brand-gold);
}
/* beside the heading, as the menu page's section headers set it */
.eats__heading::after {
  content: "";
  flex: 1 1 2rem;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(to right, var(--brand-gold), transparent);
}

.eats__line {
  display: grid;
  grid-template-columns: clamp(2.5rem, 6vw, 3.25rem) 1fr;
  align-items: center;
  column-gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: .9rem;
}
.eats__pick { width: 100%; }
.eats__note { width: 55%; justify-self: center; }

.eats__title, .eats__body, .eats__contents {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(var(--step-1), 2.3vw, var(--step-2));
  line-height: 1.3;
}
.eats__sub {
  margin: .3rem 0 0;
  font-size: var(--step--1);
  font-style: italic;
  letter-spacing: .02em;
}
.eats__contents {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .6rem;
}
.eats__contents li { white-space: nowrap; }
/* the bar trails its item, so a wrapped row starts with a word, not a bar */
.eats__contents li:not(:last-child)::after { content: "|"; margin-left: .6rem; }

.eats__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
}
.eats__price {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(var(--step-2), 3vw, var(--step-3));
  font-variant-numeric: tabular-nums;
  color: var(--brand-gold);
}

/* ---------------------------------------------------------------- notice -- */

/* The live homepage's "Please note:": the hard-hat pick beside the words, set
   in Rowland #333 with a 1px gold shadow (measured on live) — the lead bold,
   the rest italic. #333 is 8:1 on the metal's darkest ridge. */

/* Tucked up under the EATS card and kept small — it is a footnote to the
   card, not a section of its own (the owner's call, 26 Sep 2026). */
.section.eats-panel { padding-bottom: 1.25rem; }
.section.notice { padding-top: 0; }
.notice__inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
}
.notice__mark { width: clamp(3.25rem, 5.5vw, 4.75rem); flex: none; }
.notice__text {
  margin: 0;
  max-width: 68ch;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  line-height: 1.3;
  color: #333;
  text-shadow: 1px 1px 0 var(--brand-gold);
}
.notice__text strong { margin-right: .35em; }

/* ---------------------------------------------------------- home slider -- */

/* Live's Slider Revolution module, rebuilt (templates/blocks/promo-slider.php).
   Wide: every layer at its canvas position, sized in container units, so it
   scales as live's does. Narrow: the same slide, stacked. */

.promo {
  --wave-h: clamp(2.25rem, 6vw, 5.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0d0b09;
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  /* Cut the top edge to the front hill: above the curve the section is
     transparent, so the metal of <main> behind it runs straight down to the
     curve — no flat strip between the corrugation and the wave. */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M1440 14c-140 16-280 18-420 4S760 0 620 8 360 34 220 30 60 16 0 10V90H1440z'/%3E%3C/svg%3E") top / 100% var(--wave-h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M1440 14c-140 16-280 18-420 4S760 0 620 8 360 34 220 30 60 16 0 10V90H1440z'/%3E%3C/svg%3E") top / 100% var(--wave-h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
}
/* the overlay on the burger photo: heavier on the left, behind the headlines */
.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(0 0 0 / .66) 0%, rgb(0 0 0 / .5) 45%, rgb(0 0 0 / .38) 100%);
}
.promo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* the hills at the top edge, in the metal's colour, as live's section divider */
.promo__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--wave-h);
  fill: #eeeeee;
  z-index: -1;
}

.promo__stage {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  aspect-ratio: var(--canvas-ratio);
  container-type: inline-size;
}
.promo__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.promo__slide.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .promo__slide { transition: none; }
}

.promo__head, .promo__line, .promo__pic {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  margin: 0;
}
.promo__head {
  font-family: "Poppins", var(--sans);
  font-weight: 800;
  font-size: var(--fs);
  line-height: 1.125;          /* live: 90 on 80 */
  letter-spacing: -.05em;      /* live: -4 on 80 */
  color: #fff;
  text-shadow: var(--shadow);
}
.promo__line {
  font-family: "Poppins", var(--sans);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs);
  line-height: var(--lh);      /* live sets every line on a 90px line box */
  letter-spacing: -.03em;
  text-align: right;
  color: #fff;
  -webkit-text-stroke: 1px rgb(0 0 0 / .25);
}
.promo__pic { height: var(--h); object-fit: contain; }

.promo__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
}
/* no dots and no pause on the band either, at any width (owner, 1 Oct 2026):
   it still holds while pointed at or focused, and for anyone asking for less motion */
.promo .promo__controls { display: none; }
.promo__dot {
  width: .7rem;
  height: .7rem;
  padding: 0;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.promo__dot[aria-current="true"] { background: var(--brand-gold); }
.promo__pause {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: .4rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* two bars when playing, a triangle when paused */
.promo__pause::before {
  content: "";
  width: .55rem;
  height: .6rem;
  border-inline: 3px solid currentColor;
}
.promo__pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-inline: 0;
  border-left: .55rem solid currentColor;
  border-block: .33rem solid transparent;
  margin-left: .15rem;
}

/* The entrances, from live's timeline (content-export/home-slider.json): each
   layer comes in from its own offset — the headline and pictures from above
   the slider, the lines from beyond its right edge — at its own delay, over
   its own duration. On the way out text fades and pictures sink as they fade.
   Only once the script has seen the slider on screen (.is-playing); before
   that, and without JavaScript, the slides simply show and hide. */
.promo.is-playing .promo__slide { opacity: 1; visibility: hidden; }
.promo.is-playing .promo__slide.is-active,
.promo.is-playing .promo__slide.is-leaving { visibility: visible; }
.promo.is-playing .promo__layer { opacity: 0; }
.promo.is-playing .promo__slide.is-active .promo__layer {
  animation: promo-in var(--in-ms, 1s) var(--ease, ease) var(--in-delay, 0s) both;
}
/* The exit is an animation too, not a transition: a browser will not
   transition away from a value an animation was holding, so the outgoing
   layers vanished instead of fading. The script holds .is-leaving on the old
   slide for as long as its longest exit. */
.promo.is-playing .promo__slide.is-leaving .promo__layer {
  animation: promo-out var(--out-ms, .3s) var(--ease, ease) both;
}
@keyframes promo-in {
  from { opacity: 0; transform: translate(var(--in-x, 0), var(--in-y, 0)); }
  to   { opacity: 1; transform: none; }
}
@keyframes promo-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(var(--out-y, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .promo.is-playing .promo__slide.is-active .promo__layer { animation: none; opacity: 1; }
  .promo.is-playing .promo__slide.is-leaving .promo__layer { animation: none; }
}

/* Narrow screens: live scales the whole canvas down, which leaves its lines
   ~10px tall on a phone. Stack the slide instead, at readable sizes. */
@media (max-width: 48rem) {
  .promo__stage { aspect-ratio: auto; display: grid; padding-inline: var(--gutter); }
  .promo__slide {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
  }
  .promo__head, .promo__line, .promo__pic { position: static; width: auto; }
  .promo__head { font-size: clamp(2.1rem, 11vw, 3.25rem); max-width: 9em; }
  .promo__line { font-size: clamp(1rem, 4.6vw, 1.4rem); line-height: 1.3; text-align: center; }
  .promo__pic { height: auto; max-width: min(78%, 22rem); max-height: 12rem; }
}

/* ------------------------------------------------------------ promo band -- */

/* The live homepage's Happy Hour! (measured at 1440, 26 Sep 2026): a wood band
   with grey edges; "JOIN US FOR" white Rowland italic and "Happy Hour!" 75px
   gold, both with a hard oxblood shadow; the two lines side by side; the
   footnote gold italic. The card is the bar photo under live's 20–50% wash in
   a gold frame, 8px corners; its title white Rowland italic with a GOLD
   shadow, and the GS pick placed where live places it. */

.promo-band {
  padding-block: clamp(3rem, 5vw, 4.4rem) clamp(2.5rem, 4vw, 3.1rem);
  border-block: 2px solid #9ea0a4;
}
.promo-band__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.promo-band__kicker, .promo-band__heading, .promo-band__lede,
.promo-band__body, .promo-band__footnote { margin: 0; font-family: var(--display); font-weight: 400; }

.promo-band__kicker {
  font-style: italic;
  font-size: clamp(1.6rem, 2.7vw, 2.35rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 2px 2px 0 var(--oxblood);
}
.promo-band__heading {
  font-size: clamp(3rem, 5.3vw, 4.7rem);
  line-height: 1;
  color: var(--brand-gold);
  text-shadow: 2px 2px 0 var(--oxblood);
  margin-block: .15em .5em;
}
.promo-band__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1rem;
}
.promo-band__lede { font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.75; color: #fff; }
.promo-band__body {
  font-size: clamp(1.5rem, 2.25vw, 2rem);
  line-height: 1.15;
  text-align: center;
  color: #fff;
  text-shadow: 2px 1px 0 var(--oxblood);
}
.promo-band__footnote {
  margin-top: 1.4rem;
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  text-align: center;
  color: var(--brand-gold);
  text-shadow: 2px 2px 0 var(--oxblood);
}

.promo-band__card {
  position: relative;
  margin: 0;
  aspect-ratio: 568 / 410;
  overflow: hidden;
  isolation: isolate;
  border: 2.5px solid var(--brand-gold);
  border-radius: 8px;
}
.promo-band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  z-index: -2;
}
.promo-band__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgb(0 0 0 / .2), rgb(0 0 0 / .5));
}
.promo-band__mark { position: absolute; left: 68.5%; top: 37%; width: 26.4%; }
.promo-band__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11.5%;
  display: flex;
  align-items: center;
  gap: .5em;
  padding-inline: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.9rem, 3.1vw, 2.8rem);
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 2px 2px 0 var(--brand-gold);
}
/* the thin rules live runs out either side of the title */
.promo-band__title::before,
.promo-band__title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: rgb(226 226 226 / .55);
}

@media (max-width: 52rem) {
  .promo-band__inner { grid-template-columns: 1fr; }
  .promo-band__copy { text-align: center; }
  .promo-band__lede { text-align: center; }
}
@media (max-width: 30rem) {
  .promo-band__pair { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- feature row -- */

/* The live homepage's Live Entertainment row (measured at 1440, 26 Sep 2026):
   a 500 x 400 box — live's LayerSlider 1 — in a gold frame, smoke looping on
   black behind the Notoriously Local logo; beside it "Live Entertainment" in
   black Rowland italic with a gold shadow, the subheading in oxblood with a
   white shadow and a short oxblood rule, the paragraph bold italic #4a4e57. */

.feature-row__inner {
  display: grid;
  grid-template-columns: minmax(15rem, 23rem) 1fr;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}
/* flipped: the copy first, then a larger box — live splits this row about
   evenly (576px of copy, a 571px box) where Live Entertainment's box is 363 */
.feature-row--flip .feature-row__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feature-row--flip .feature-row__media { order: 2; }

.feature-row__media {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  border: 2.5px solid var(--brand-gold);
  border-radius: 6px;
  box-shadow: 2px 2px 0 #4a4e57;
}
.feature-row__video, .feature-row__layer {
  position: absolute;
  max-width: none;
}
.feature-row__video { object-fit: cover; }
.feature-row__layer { object-fit: contain; }
.feature-row__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the layers' entrance, live's: one fade together (1s, easeInOutQuint), once
   the box is in view — the background and the video are there from the start */
.feature-row__media[data-inview] .feature-row__layer { opacity: 0; }
.feature-row__media.is-inview .feature-row__layer {
  opacity: 1;
  transition: opacity var(--fade, 1s) var(--ease, ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  .feature-row__media.is-inview .feature-row__layer { transition: none; }
}
.feature-row__media:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 4px; }

/* The tagline sits above the heading, and under the heading runs the same
   tapered gold rule as the page titles — the owner's call, 26 Sep 2026, in
   place of live's short oxblood bar. Full width of the copy, and 2px rather
   than the titles' 1px: on the light metal a hairline all but disappears. */
.feature-row__heading {
  margin: .35rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.2vw, 3.75rem);
  line-height: 1.05;
  color: #000;
  text-shadow: 2px 1px 0 var(--brand-gold);
}
.feature-row__heading::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .55rem;
  background: var(--taper);
}
.feature-row__kicker {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: .02em;
  color: var(--oxblood);
  text-shadow: 1px 1px 0 #fff;
}
.feature-row__body p {
  margin: 1.4rem 0 0;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.625rem);
  line-height: 1.65;
  color: var(--cream-muted);
}
.feature-row .cta-row { margin-top: 1.75rem; }

@media (max-width: 48rem) {
  .feature-row__inner,
  .feature-row--flip .feature-row__inner { grid-template-columns: 1fr; }
  .feature-row__media { max-width: 23rem; width: 100%; margin-inline: auto; }
  .feature-row--flip .feature-row__media { order: 0; }
}

/* ------------------------------------------------------ home slider, card -- */

/* Live's second slider (module 1): the same slides as a card on the metal —
   a 4.8px brand-gold frame, 8px corners and a hard grey shadow (all from the
   Avada column around it), the wood under Slider Revolution's line overlay
   (type 5: one black pixel row in three, --lines from the template). No wave
   and no photo wash: those belong to the band at the top. */
.promo-frame > .promo--card {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--measure) - 2 * var(--gutter));
  margin-inline: auto;
  padding: 0;
  -webkit-mask: none;
          mask: none;
  border: 5px solid var(--brand-gold);
  border-radius: 8px;
  box-shadow: 2px 2px 0 #4a4e57;
}
.promo--card::before { background: var(--lines, none); }
.promo--card .promo__stage { max-width: none; }
/* the card slider shows no dots and no pause, at any width (owner, 28 Sep 2026) */
.promo--card .promo__controls { display: none; }
@media (min-width: 48.01rem) {
  /* a third shorter (owner, 1 Oct 2026): the canvas is cropped to 430 high in
     the template, and 77.5% wide makes it 2/3 of live's 500-high card */
  .promo--card .promo__stage { width: 77.5%; }
  /* and its pictures smaller still, each round its own centre (owner, 1 Oct 2026);
     `scale`, not transform, so the entrances' transforms still run */
  .promo--card .promo__pic { scale: .8; }
}
@media (max-width: 48rem) {
  /* on a phone the card is a still picture of its first slide: no other
     slides to make room for, no dots, so the bottom comes up (owner, 28 Sep 2026) */
  .promo-frame > .promo--card { padding-block: 1.5rem; }
  .promo--card .promo__slide:not(:first-child) { display: none; }
  /* the band likewise: its first slide only, still, the bottom brought up
     (owner, 1 Oct 2026); the top keeps room for the hills */
  .promo .promo__slide:not(:first-child) { display: none; }
  .promo:not(.promo--card) { padding-bottom: 1.5rem; }
}

/* ---------------------------------------------------------- menu buttons -- */

/* Live's eight menu-header images, 4 x 2 (264 x 95 each at 1440), each opening
   its menu section in a modal. The modal is the section from /menu/ itself,
   on the metal, framed in the brand gold. */
.menu-buttons { padding-block: clamp(1.5rem, 3vw, 2.25rem); }   /* the same top and bottom (owner, 7 Oct 2026) */
.menu-buttons__grid {
  list-style: none;
  margin-block: 0;          /* margin-block, not margin: keep .section's centring */
  padding-block: 0;         /* and padding-block, so the page gutter still applies */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 2.5vw, 3rem) clamp(.75rem, 3vw, 3rem);
}
.menu-buttons__btn {
  display: block;
  border-radius: 12px;
  transition: transform .15s ease, filter .15s ease;
}
.menu-buttons__btn img { width: 100%; height: auto; }
.menu-buttons__btn:hover { transform: translateY(-2px); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25)); }
.menu-buttons__btn:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .menu-buttons__btn, .menu-buttons__btn:hover { transition: none; transform: none; }
}
@media (max-width: 48rem) {
  .menu-buttons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.menu-modal {
  width: min(64rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: hidden;
  border: 5px solid var(--brand-gold);
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 20px 60px rgb(0 0 0 / .5);
}
.menu-modal[open] { display: flex; flex-direction: column; }
.menu-modal::backdrop { background: rgb(10 9 8 / .72); }
.menu-modal__bar {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  margin: 0;
}
.menu-modal__close {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--on-fill);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.menu-modal__close:hover, .menu-modal__close:focus-visible { background: var(--brand-gold); color: var(--ground-deep); }
.menu-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 1.5rem;
}
.menu-modal__body .section { padding-block: clamp(1.75rem, 4vw, 2.5rem) 1rem; }
.menu-modal__more { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; margin: 1rem 0 0; }
/* A menu section's big decorative image (the Grub Shack pick on BURGERS, the
   GS pick on BEVERAGES) belongs to the long menu page; in a modal it filled
   the first screen before any food. Live's modals open straight onto the food. */
.menu-modal .figure { display: none; }

/* ------------------------------------------------- menu: beside layout -- */

/* Live's menu sections (measured at 1440, 26 Sep 2026): the heading and intro
   in a ~500px column — heading black Rowland italic with a hard oxblood
   shadow, intro bold italic #4a4e57 — and the items beside it as plain cards:
   a square photo, the name in Rowland, the price in oxblood. Under the heading,
   the tapered gold rule the owner chose for headings in place of live's short
   oxblood bar. */
.beside {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
/* The heading spans the section, above both columns, with the tapered gold
   rule running beside it the width of the page (owner, 27 Sep 2026). */
.beside__heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  color: #000;
  text-shadow: 2px 1px 0 var(--oxblood);
}
.beside__heading::after {
  content: "";
  flex: 1 1 2rem;
  min-width: 2rem;
  height: 2px;
  background: var(--taper-garnet);
}
.beside__intro p {
  margin: 0 0 1.1rem;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1.65;
  color: var(--cream-muted);
}

.grid--compact {
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr));
  gap: 1.5rem 1.25rem;
}
/* each card in a box, so it reads easily on the darker metal (owner, 28 Sep
   2026: "keep them just as they are, just put a box around") */
.grid--compact .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.grid--compact .card:hover { transform: none; border-color: var(--line-strong); }
.grid--compact .card__img { aspect-ratio: 1; }
.grid--compact .card:hover .card__img { filter: brightness(1.05); }
.grid--compact .card__body { padding: .8rem .85rem 1rem; gap: .35rem; }
.grid--compact .card__name { font-size: clamp(1.35rem, 2vw, 1.75rem); color: #333; }
.grid--compact .card__desc { -webkit-line-clamp: 2; }
.grid--compact .price { font-size: var(--step-0); color: var(--oxblood); }

@media (max-width: 52rem) {
  .beside { grid-template-columns: 1fr; }
}

/* flipped: the items first (live's Handhelds: 749px of cards, 499 of copy),
   with the section's logo under the intro */
.section--flip .beside { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.section--flip .beside__copy { order: 2; }
.beside__mark { width: min(16rem, 70%); height: auto; margin-top: 1.75rem; }
@media (max-width: 52rem) {
  .section--flip .beside { grid-template-columns: 1fr; }
  .section--flip .beside__copy { order: 0; }
  .beside__mark { display: none; }   /* on a phone the logo only pushes the food down */
}

/* lists that sit in the beside column (wing counts, sauces, dressings, cakes):
   the column's width, not the page measure, and no centring */
.beside__copy > :is(.feature, .price-list, .tier-list, .group-price, .chips, .note, .credit, .figure) {
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1rem, 2vw, 1.5rem);
}
.beside__copy > :is(.note, .credit, .figure) { padding-inline: 0; }
.beside__copy > * + * { margin-top: 1.25rem; }

/* Inside a menu modal: the section exactly as the menu page shows it (owner,
   29 Sep 2026) — the menu page's rules below are written for both. */
.menu-modal .beside__mark { display: none; }

@media (max-width: 48rem) {
  .contact-cols__grid { grid-template-columns: 1fr; }
  .contact-aside { order: 2; }          /* the phone and form first on a phone */
  .callout--photo .callout__inner { grid-template-columns: 1fr; text-align: center; }
  .callout__mark { margin-inline: auto; width: 9rem; }
}

/* ------------------------------------------------------ online ordering -- */

/* /order/ — live's order page (the Winston storefront on /new-menu/) in this
   site's own look: the menu headings of /menu/, cards on the metal, the cart
   in a bar along the bottom and the checkout in a panel from the right. */
.order { padding-bottom: 7rem; }             /* room for the cart bar */
.order__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: 1.5rem;
  color: var(--cream-muted);
  font-weight: 600;
}
.order__badge {
  padding: .2rem .8rem;
  border-radius: 999px;
  background: var(--oxblood);
  color: var(--on-fill);
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.order__empty, .order__paused {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--oxblood);
  background: var(--surface);
  font-weight: 600;
}

/* the category pills: one sticky swipe strip, never a wall of buttons (live's
   pill wall stood 918px tall on a phone before its 0.3.1 fix) */
/* ...on a wood band, the full width of the page, that stays at the top as
   the list scrolls under it; arrows either side when there is more that way
   (owner, 28 Sep 2026) */
.section > .order__catbar {
  position: sticky;
  top: 0;
  z-index: 5;
  max-width: none;
  margin: 0 calc(50% - 50vw) 1.5rem;
  padding: 0;
  border-block: 2px solid var(--brand-gold);
}
/* 50vw counts the scrollbar, so the band ran ~8px past the page and the whole
   page scrolled sideways; clip that sliver (clip, not hidden: sticky still works) */
main:has(.order__catbar) { overflow-x: clip; }
.order__catbar-inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  /* the whole width of the band, not the page's measure: on a desktop every
     category shows and no arrow is needed (owner, 28 Sep 2026) */
  padding: .7rem var(--gutter);
}
.order__cats {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.order__arrow {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--on-fill);
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: .15rem;
  cursor: pointer;
}
.order__arrow:hover, .order__arrow:focus-visible { background: var(--brand-gold); color: var(--ground-deep); }
.order__arrow[hidden] { visibility: hidden; display: block; }
.order__cats::-webkit-scrollbar { display: none; }
.order__cat-pill {
  flex: none;
  padding: .35rem 1rem;
  border: 1px solid var(--brand-gold);
  border-radius: 999px;
  color: #f4ece0;
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.order__cat-pill:hover, .order__cat-pill:focus-visible { background: var(--brand-gold); color: var(--ground-deep); }

.order__cat { padding-block: 1.5rem; scroll-margin-top: 4.5rem; }
.order__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1.25rem;
}
.order-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.order-item.in-cart { border-color: var(--brand-gold); box-shadow: 0 0 0 1px var(--brand-gold); }
/* every product box — the menu's dishes, the modals', the order page's — in a
   slight gold edge with rounder corners (owner, 1 Oct 2026). In the cart, the
   ring above still makes it the full gold. */
.card, .grid--compact .card, .order-item {
  border: 1px solid rgb(204 153 46 / .6);
  border-radius: 10px;
}
.card:hover, .grid--compact .card:hover { border-color: var(--brand-gold); }
.order-item__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.order-item__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem; }
.order-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.order-item__name {
  margin: 0;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.2;
  color: #333;
}
.order-item__desc { margin: 0; color: var(--cream-muted); font-size: .95rem; line-height: 1.5; }
.order-item__foot { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.order-item__soldout { color: var(--alert); font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }
.order-item.is-86 .order-item__img { filter: grayscale(1); opacity: .6; }
.order-item.is-86 .order-item__name, .order-item.is-86 .price { opacity: .6; }

.stepper { display: flex; align-items: center; gap: .6rem; }
.stepper[hidden] { display: none; }
.stepper__btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--on-fill);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.stepper__btn:hover, .stepper__btn:focus-visible { background: var(--brand-gold); color: var(--ground-deep); }
.stepper__qty { min-width: 1.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-item__add[hidden] { display: none; }

/* the cart bar */
.section > .order-bar, .menu > .order-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(40rem, calc(100% - 2rem));
  max-width: none;
  margin: 0;
  padding: .75rem 1rem .75rem 1.5rem;
  border: 2px solid var(--brand-gold);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .45);
}
.section > .order-bar[hidden], .menu > .order-bar[hidden] { display: none; }
.order-bar__info { margin: 0; color: var(--cream); }
.order-bar__total { margin-left: .5rem; color: var(--gold); font-variant-numeric: tabular-nums; }

/* the checkout: a panel from the right, full height */
.order-drawer {
  width: min(30rem, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 4px solid var(--brand-gold);
  background: #f4f2ee;
  color: #16130f;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.order-drawer::backdrop { background: rgb(10 9 8 / .72); }
.order-drawer__bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; margin: 0; padding: .75rem .75rem 0; }
.order-drawer__view { padding: 0 1.5rem 2rem; }
.order-drawer__view[hidden] { display: none; }
.order-drawer__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem 0 1rem;
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  font-style: italic;
  color: #000;
  text-shadow: 1px 1px 0 var(--oxblood);
}
.order-drawer__title::after { content: ""; flex: 1; height: 2px; background: var(--taper-garnet); }
.order-drawer__view > .order-drawer__title:not(:first-child) { margin-top: 2rem; }
.order-lines { margin: 0; padding: 0; list-style: none; }
.order-lines li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid #d8d4cc;
}
.order-lines__qty { font-weight: 700; }
.order-lines__amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.order-lines__remove { border: 0; background: none; color: #9e1a2a; cursor: pointer; font-size: 1rem; padding: .1rem .3rem; }
.order-drawer__subtotal { display: flex; justify-content: space-between; margin: 1rem 0 .25rem; font-size: var(--step-1); }
.order-drawer__amount { color: var(--oxblood); font-variant-numeric: tabular-nums; }
.order-drawer__note { margin: 0; color: #4a4e57; font-style: italic; }

.order-form { display: grid; gap: .9rem; }
.order-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.order-form input, .order-form select, .order-form textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid #9ea0a4;
  border-radius: var(--radius);
  background: #fff;
  color: #16130f;
  font: inherit;
  font-weight: 400;
}
.order-form__req { color: #9e1a2a; margin-left: .15rem; }
.order-form .order-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.order-form__error { margin: 0; padding: .6rem .8rem; border-left: 4px solid #9e1a2a; background: #fbeaec; color: #7a1020; font-weight: 600; }
.order-form__error[hidden] { display: none; }
.order-form__submit { justify-self: stretch; padding-block: .8rem; font-size: var(--step-0); }
.order-form__submit:disabled { opacity: .6; cursor: progress; }

.order-done { text-align: center; }
.order-done .order-drawer__title { justify-content: center; }
.order-done .order-drawer__title::after { display: none; }
.order-done__check {
  width: 4rem;
  height: 4rem;
  margin: 1rem auto 0;
  border-radius: 50%;
  background: var(--oxblood);
  color: #f4ece0;
  font-size: 2rem;
  line-height: 4rem;
}
.order-done__no { font-size: var(--step-1); }

@media (max-width: 40rem) {
  .order-drawer { width: 100%; border-left: 0; }
  .order-bar__info { font-size: .9rem; }
}

/* ------------------------------------------------------------------ admin -- */

/* /admin — plain and legible first; it may be a kitchen screen. */
body.admin { background: #f4f2ee; color: #16130f; }
.admin-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 72rem;
  margin-inline: auto;
  padding: .6rem var(--gutter);
}
.admin-head__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #f4ece0;
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: .06em;
  text-decoration: none;
}
.admin-head__nav { display: flex; align-items: center; gap: 1.25rem; }
.admin-head__nav a, .admin-head__nav button {
  color: #f4ece0;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.admin-head__nav a[aria-current] { color: var(--brand-gold); }
.admin-head__nav form { margin: 0; }
.admin-main { max-width: 72rem; margin-inline: auto; padding: 1.5rem var(--gutter) 4rem; }
.admin-main h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-3); }
.admin-main h2 { margin: 0 0 .5rem; font-size: var(--step-0); text-transform: uppercase; letter-spacing: .08em; }
.admin-card {
  margin: 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #d8d4cc;
  border-radius: var(--radius);
}
.admin-card p { margin: 0 0 .6rem; }
.admin-signin { max-width: 24rem; margin: 3rem auto; display: grid; gap: 1rem; }
.admin-signin label { display: grid; gap: .3rem; font-weight: 600; }
.admin-signin input { padding: .6rem .75rem; border: 1px solid #9ea0a4; border-radius: var(--radius); font: inherit; }
.admin-error { color: #9e1a2a; font-weight: 700; }
.admin-ok { color: #1d6b2c; }
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.admin-badge {
  display: inline-block;
  vertical-align: middle;
  padding: .15rem .7rem;
  border-radius: 999px;
  background: var(--oxblood);
  color: #f4ece0;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
}
.admin-link { color: #6e4d0c; font-weight: 600; }
.admin-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.admin-orders { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.admin-order { padding: 1rem 1.25rem; background: #fff; border: 1px solid #d8d4cc; border-left: 6px solid #9ea0a4; border-radius: var(--radius); }
.admin-order--new { border-left-color: var(--oxblood); }
.admin-order--in_progress { border-left-color: var(--brand-gold); }
.admin-order--ready { border-left-color: #1d6b2c; }
.admin-order--picked_up, .admin-order--cancelled { opacity: .7; }
.admin-order__head { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; }
.admin-order__no { font-size: var(--step-1); }
.admin-order__pickup { margin-left: auto; }
.admin-order__who { margin: .4rem 0; }
.admin-order__who a { color: #6e4d0c; }
.admin-order__lines { margin: .5rem 0; padding: 0; list-style: none; max-width: 32rem; }
.admin-order__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px dotted #d8d4cc; }
.admin-order__lines .admin-order__subtotal { font-weight: 700; border-bottom: 0; }
.admin-order__notes { margin: .4rem 0; padding: .4rem .6rem; background: #fdf6e3; }
.admin-order__sent { margin: .4rem 0; color: #54575e; font-size: .9rem; }
.admin-order__status { display: flex; align-items: center; gap: .75rem; margin: .6rem 0 0; }
.admin-order__status label { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.admin-order__status select { padding: .4rem .5rem; font: inherit; }
.admin-order__option { display: block; padding-left: 1.5rem; color: #6e4d0c; font-weight: 600; }

/* the choice a dish needs — its side, its dressing — asked as it goes in the cart */
.order-choose__form { display: grid; gap: 1rem; }
.order-choose__groups { display: grid; gap: 1.25rem; }
.order-choose__group { margin: 0; padding: 0; border: 0; display: grid; gap: .4rem; }
.order-choose__group legend { margin-bottom: .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.order-choose__option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .8rem;
  border: 1px solid #c4c5c8;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.order-choose__option:has(input:checked) { border-color: var(--oxblood); box-shadow: 0 0 0 1px var(--oxblood); }
.order-choose__option input { width: 1.15rem; height: 1.15rem; accent-color: var(--oxblood); margin: 0; }
.order-choose__price { margin-left: auto; font-weight: 700; color: var(--oxblood); font-variant-numeric: tabular-nums; }
.order-item__count { margin-right: auto; font-weight: 700; color: var(--oxblood); font-size: var(--step--1); }
.order-item__count[hidden] { display: none; }
.order-lines__option { display: block; font-size: .9rem; color: #6e4d0c; }

/* ------------------------------------------- ordering from the menu page -- */

/* /menu/ is also where to order (owner, 28 Sep 2026): "Add to order" beside
   every dish the POS sells, into the same cart bar and checkout as /order/. */

.menu[data-order-root] { padding-bottom: 5rem; }
.menu__paused { max-width: var(--measure); margin: 1.5rem auto 0; }

.order-add { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem .6rem; }
.order-add__btn { padding: .3rem .95rem; font-size: .72rem; white-space: nowrap; }
.order-add .order-item__count { margin: 0; font-size: .78rem; }

/* in a photo card: under the price */
.card .order-add, .card > .card__body > .order-item__soldout { margin-top: .5rem; }

/* in a printed row: a fourth column after the price */
.row:has(> .row__order) { grid-template-columns: auto 1fr auto auto; }
.row .row__order { order: 4; align-self: center; }

/* the ATM platter */
.feature .order-add { margin-top: .75rem; }

/* the cakes: a name and its button, still one chip */
.group-price li:has(.order-add) { display: inline-flex; align-items: center; gap: .6rem; padding-right: .35rem; }
.group-price .order-add__btn { padding: .2rem .7rem; font-size: .65rem; }

@media (max-width: 40rem) {
  .row:has(> .row__order) { grid-template-columns: 1fr auto; }
  .row .row__order { grid-column: 1 / -1; justify-self: end; }
}

/* ------------------------------------------------------ card payments -- */

/* Datacap's hosted card form. The frame does not scroll — overflow is cut —
   and on a phone Datacap stacks its fields, so 230px there clips the CVV row
   clean off (QuixTix measured it). 230 wide, 330 narrow. */
.order-pay { margin: 0; padding: 0; border: 0; }
.order-pay legend { margin-bottom: .3rem; font-weight: 600; font-size: .95rem; }
.order-pay__frame { display: block; width: 100%; min-height: 230px; border: 1px solid #9ea0a4; border-radius: var(--radius); background: #fff; }
@media (max-width: 40rem) { .order-pay__frame { min-height: 330px; } }
.order-drawer__fee, .order-drawer__tax, .order-drawer__total { display: flex; justify-content: space-between; margin: .25rem 0; }
.order-drawer__total { font-size: var(--step-1); }
.order-drawer__total-amount { color: var(--oxblood); font-variant-numeric: tabular-nums; }
.order-done__paid { font-weight: 700; color: #1d6b2c; }
.order-done__paid[hidden], .order-done__pay[hidden] { display: none; }
.admin-order__void { margin: .4rem 0 0; display: flex; gap: .75rem; align-items: center; }
.admin-link-btn { border: 0; background: none; padding: 0; color: #9e1a2a; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------- menu: NICE TO MEAT YOU! -- */

/* Live's section, measured 28 Sep 2026, on the site's own parallax wood
   band (.wood — the owner's call) with the WRAP band's gold edges: the
   heading in gold Rowland italic; one white card (20px corners, a gold frame
   with an oxblood edge) over the EATS sign washed 88-99% white. */
.meats {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
  border-block: 2px solid var(--brand-gold);
}
.meats__inner { max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); }
.meats__heading {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.05rem);
  line-height: 1.05;
  color: var(--brand-gold);
  text-shadow: 2px 2px 0 #fff3, 3px 3px 0 rgb(0 0 0 / .55);
}
.meats__card {
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.1rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border: 6px solid var(--brand-gold);
  border-radius: 20px;
  box-shadow: -3px -3px 0 var(--oxblood), 0 12px 40px rgb(0 0 0 / .45);
  background:
    linear-gradient(rgb(255 255 255 / .88), rgb(255 255 255 / .99)),
    var(--meats-mark, none) center 40% / 88% auto no-repeat,
    #fff;
  color: #16130f;
}
/* The EATS sign on corrugated metal, with some dimension (owner, 29 Sep
   2026): the site's metal under a light silver wash, the sign its own layer
   with a drop shadow so it stands off the wall, a soft inner shadow round
   the edge of the card. The type stays dark on a light ground. */
.meats__card:not(.meats__card--plain) {
  position: relative;
  isolation: isolate;
  box-shadow: -3px -3px 0 var(--oxblood), 0 12px 40px rgb(0 0 0 / .45), inset 0 0 24px rgb(0 0 0 / .28);
  background:
    /* "just a whisper of the corrugated behind" (owner, 29 Sep 2026) */
    linear-gradient(rgb(248 248 250 / .92), rgb(248 248 250 / .96)),
    #d6d6d6 url("/assets/brand/metal.jpg") center top / 1100px auto repeat;
}
/* The sign is solid, not see-through — no ridges show through it (owner,
   29 Sep 2026: "quiet down the EATS sign, don't show the corrugation behind
   it"): ::after is the sign under a heavy white wash, cut to the sign's own
   outline; ::before, under it, is its soft shadow. */
.meats__card:not(.meats__card--plain)::before,
.meats__card:not(.meats__card--plain)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.meats__card:not(.meats__card--plain)::before {
  z-index: -2;
  background: var(--meats-mark, none) center 40% / 88% auto no-repeat;
  filter: brightness(0) blur(5px);
  opacity: .08;
  transform: translate(3px, 6px);
}
.meats__card:not(.meats__card--plain)::after {
  z-index: -1;
  background:
    /* "just enough to be seen" (owner, 29 Sep 2026) */
    linear-gradient(rgb(250 250 251 / .95), rgb(250 250 251 / .95)),
    var(--meats-mark, none) center 40% / 88% auto no-repeat;
  -webkit-mask: var(--meats-mark, none) center 40% / 88% auto no-repeat;
          mask: var(--meats-mark, none) center 40% / 88% auto no-repeat;
}
.meats__entry + .meats__entry { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* the title, in the homepage row format: black Rowland italic with a gold
   shadow, a gold rule running out beside it */
.meats__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.1;
  color: #000;
  text-shadow: 2px 1px 0 var(--brand-gold);
}
.meats__title::after { content: ""; flex: 1 1 2rem; min-width: 2rem; height: 1px; background: var(--brand-gold); }

.meats__lead { display: flex; align-items: center; gap: 1.25rem; margin-bottom: .75rem; }
.meats__pick { width: clamp(3rem, 5vw, 4rem); height: auto; flex: none; }
.meats__kicker { margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.5rem); text-transform: uppercase; color: #000; }
.meats__desc { margin: .35rem 0 0; font-size: .85rem; font-style: italic; text-transform: uppercase; letter-spacing: .02em; color: #4a4e57; }

.meats__line, .meats__item { display: flex; align-items: flex-start; gap: .9rem; }
.meats__note { width: 1.9rem; height: auto; flex: none; margin-top: .3rem; }
.meats__contents { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.6rem); line-height: 1.35; color: #000; }

.meats__foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: .4rem; }
.meats__price {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  color: var(--oxblood);
  text-shadow: 1px 1px 0 rgb(0 0 0 / .15);
  font-variant-numeric: tabular-nums;
}

/* Look Good Naked: three across, each with its price under the name and a
   gold rule below */
.meats__grid {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--meats-cols, 3), minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4.5vw, 4.5rem);
}
.meats__item-sub { margin: .1rem 0 .2rem; font-size: .82rem; font-style: italic; text-transform: uppercase; color: var(--oxblood); }

/* Crumb Snatchers: the kids picture in a column at the left of the card
   (368 of 1216 at 1440, live), and a lighter card — a white wash over the
   wood, a 3px gold frame, 8px corners — where there is no sign behind it */
.meats__body { display: block; }
.meats--side .meats__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.meats__side { width: 100%; max-width: 23rem; height: auto; justify-self: center; filter: drop-shadow(0 10px 24px rgb(0 0 0 / .5)); }
.meats__card--plain {
  border-width: 3px;
  border-radius: 8px;
  /* the same whisper of corrugated metal as NICE TO MEAT YOU!'s card
     (owner, 29 Sep 2026) */
  box-shadow: 0 12px 40px rgb(0 0 0 / .45), inset 0 0 24px rgb(0 0 0 / .28);
  background:
    linear-gradient(rgb(248 248 250 / .92), rgb(248 248 250 / .96)),
    #d6d6d6 url("/assets/brand/metal.jpg") center top / 1100px auto repeat;
}
.meats__item { padding-block: .9rem; border-bottom: 1px solid var(--brand-gold); }
.meats__item-body { flex: 1; display: grid; gap: .15rem; }
.meats__item-name { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.2; color: #000; }
.meats__item .meats__price { justify-self: end; }
.meats__item .order-add { justify-self: end; margin-top: .3rem; }

.meats__notice {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  font-style: italic;
  color: #4a4e57;
}

@media (max-width: 52rem) {
  .meats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .meats--side .meats__body { grid-template-columns: 1fr; }
  .meats__side { max-width: 15rem; }
}
@media (max-width: 36rem) {
  .meats__grid { grid-template-columns: 1fr; }
  .meats__lead { align-items: flex-start; }
}

/* the wood band as a strip between two menu categories — live runs a 70px one
   between Handhelds and Burgers, Sides and Wings, and so on */
.menu__strip { height: clamp(2.75rem, 5vw, 4.4rem); border-block: 2px solid var(--brand-gold); }

/* the menu's photo cards open on a click (owner, 28 Sep 2026): closed, the
   description is two lines and "Add to order" is hidden; open, the whole
   description and the button. Only with the script running (.js-order) —
   without it nothing is hidden. A count of what is already in the cart
   shows either way. */
.js-order .card--expand { cursor: pointer; }
.js-order .card--expand:not(.is-open) .order-add__btn { display: none; }
.js-order .card--expand.is-open .card__desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.js-order .card--expand:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 4px; }

/* ------------------------------------------------------- menu: the drinks -- */

/* Live's drinks row (measured 28 Sep 2026 at 1440): the Soft Drinks panel,
   576 wide, beside the BEVERAGES write-up. The panel: the GS_Wood photo under
   a 75-65% black wash, a 2px gold frame, 8px corners; titles in cream Rowland
   italic with a gold shadow over a 1px rule; the credit in gold script; a
   20px GS note before each drink; prices small and gold at the right. */
.drinks__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* the two columns centred on each other: with the pick under it the write-up
     is the taller, so the wood box comes down to meet it (owner, 29 Sep 2026) */
  align-items: center;
}
.drinks__panel {
  padding: clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.25rem, 3.5vw, 3.25rem) clamp(2rem, 4vw, 3.5rem);
  border: 2px solid var(--brand-gold);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  background:
    linear-gradient(rgb(0 0 0 / .75), rgb(0 0 0 / .65)),
    var(--drinks-wood, none) center / cover no-repeat,
    #3a3a3a;
  color: #f4ece0;
}
.drinks__title {
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgb(255 255 255 / .45);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  color: #efe6d6;
  text-shadow: 2px 2px 0 var(--brand-gold);
}
.drinks__title--next { margin-top: clamp(2rem, 4vw, 3.25rem); }
.drinks__credit { margin: 0 0 .9rem; font-family: var(--script); font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--brand-gold); }
.drinks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.drinks__item { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.drinks__icon { width: 20px; height: 20px; flex: none; }
.drinks__name { font-family: var(--display); font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: #fff; }
.drinks__price { margin-left: auto; font-size: .85rem; color: var(--brand-gold); font-variant-numeric: tabular-nums; }
.drinks__item .order-add { flex-basis: 100%; justify-content: flex-end; }
.drinks__item .order-add .order-item__count { color: var(--brand-gold); }
.drinks__copy { padding-top: 0; }

@media (max-width: 52rem) {
  .drinks__row { grid-template-columns: 1fr; }
  .drinks__copy { order: -1; padding-top: 0; }
}

/* a dish with no photo that takes its category's picture — the Tiffany's Bakery
   logo on the desserts — shows it whole, centred, not cropped like a photo */
.order-item__img--logo { object-fit: contain; padding: 1.5rem; background: #fff; }

/* a heading inside a choice group — Sauces / Dry Rubs */
.order-choose__section { margin: .5rem 0 .1rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--oxblood); }

/* a category's plain cards follow its photo cards on a row of their own */
.order__grid + .order__grid { margin-top: 1.25rem; }

/* centred while they fit; from the left, scrollable, once they do not (auto
   margins, unlike justify-content: center, never push the first pill off the
   left edge) */
.order__cats > :first-child { margin-left: auto; }
.order__cats > :last-child { margin-right: auto; }
.order__cats .order__cat-pill { padding: .35rem .85rem; }

/* ----------------------------------------------------- header, spread out -- */

/* On a desktop the header runs the width of the screen, like a hero, rather
   than the page's measure: the phone and the address out towards the edges,
   a larger pick, more air (owner, 28 Sep 2026). Phones keep their layout. */
@media (min-width: 52.01rem) {
  /* spaced as live's (measured from its header at ~1750 wide, 28 Sep 2026):
     the phone and the address nearly at the screen's edges, each half of the
     nav centred in its side, about 50px between the words, the pick about
     170px; compact top to bottom */
  .site-head .site-head__inner {
    max-width: none;
    padding-inline: clamp(1rem, 1.2vw, 1.5rem);
    padding-block: clamp(.75rem, 1.2vw, 1.25rem) clamp(1rem, 1.6vw, 1.5rem);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: clamp(.75rem, 1.4vw, 1.25rem);
  }
  .site-head__pick img { width: clamp(130px, 9.7vw, 170px); }
  /* the pick a touch lower from the top (owner, 28 Sep 2026) */
  .site-head__pick { margin-top: clamp(.5rem, 1vw, 1rem); }
  .site-nav ul { gap: clamp(1.5rem, 2.9vw, 3.25rem); }
  /* each half of the nav brought in towards the pick, part of the way */
  .site-nav ul.site-nav__left  { justify-content: flex-end;   padding-right: clamp(2rem, 4.5vw, 5rem); }
  .site-nav ul.site-nav__right { justify-content: flex-start; padding-left:  clamp(2rem, 4.5vw, 5rem); }
}

/* the ONLINE ORDER pill that stays in reach once the header has scrolled away */
.order-float {
  position: fixed;
  top: 1rem;
  right: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  box-shadow: 0 6px 20px rgb(0 0 0 / .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.order-float.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}
@media (prefers-reduced-motion: reduce) { .order-float, .order-float.is-shown { transition: none; } }
@media print { .order-float { display: none; } }

/* the footer's third column, as live: the legal links, the small scroller under them */
.site-foot__third { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.site-foot__links--legal a { text-transform: none; letter-spacing: .06em; }

/* ------------------------------------------------------------ legal pages -- */

.legal__body { max-width: 46rem; }
.legal__body p, .legal__body li { color: var(--cream-muted); line-height: 1.7; }
.legal__body ul { padding-left: 1.25rem; }
.legal__heading {
  margin: 2.25rem 0 .5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-2);
  color: var(--cream);
}
.legal__updated { font-style: italic; }
.legal__draft {
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--oxblood);
  background: #fdf1d8;
  color: #16130f !important;
}
.legal__review { padding: 0 .2rem; background: #fde68a; color: #16130f; font-weight: 600; }

/* ------------------------------------------------------------ to the top -- */

/* round, oxblood in a gold ring — the order page's category arrows */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: 1.25rem;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--on-fill);
  box-shadow: 0 6px 18px rgb(0 0 0 / .4);
  cursor: pointer;
}
.to-top:hover, .to-top:focus-visible { background: var(--brand-gold); color: var(--ground-deep); }
.to-top[hidden] { display: none; }
/* above the cart bar, on the pages that have one, while it shows */
body:has(.order-bar:not([hidden])) .to-top { bottom: 6.25rem; }
@media print { .to-top { display: none; } }

/* a menu card's category picture (the Tiffany's logo) shown whole, not cropped */
.card__img--logo { object-fit: contain; padding: 1rem; background: #fff; }

/* a browse-only section's way to order: one line, one button (the desserts) */
.section > .section__order-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.25rem;
  margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--cream);
  text-align: center;
}

/* the way to order the cakes, in their box under the price */
.group-price__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.25rem 0 0; font-family: var(--display); font-size: 1.05rem; color: var(--cream); }

/* one ONLINE ORDER button under the wing sizes */
.tier-list__cta { margin: 1.25rem 0 0; }

/* two or more chip lists under a section, a row of their own, each half the
   full width — the wings' Sauce Flavors and Dry Rubs (owner, 28 Sep 2026) */
.section > .beside__below {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.beside__below > .chips { margin: 0; max-width: none; }
@media (max-width: 40rem) {
  .section > .beside__below { grid-template-columns: 1fr; }
}

/* the size step in the chooser (the wings) */
.order-choose__size { margin: 0 0 1.25rem; padding: 0; border: 0; display: grid; gap: .4rem; }
.order-choose__size legend { margin-bottom: .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.order-choose__for-size { display: grid; gap: 1.25rem; }

/* a category's plain cards on a row of their own, under its photo cards */
.grid + .grid { margin-top: 1.5rem; }

/* the About page's rows: a photo box, the row split half and half (owner: "the
   same layouts as the rest of the site", 28 Sep 2026) */
.feature-row--even .feature-row__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feature-row--even .feature-row__body p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
@media (max-width: 48rem) {
  .feature-row--even .feature-row__inner { grid-template-columns: 1fr; }
  .feature-row--even .feature-row__media { max-width: 36rem; }
}

/* ---------------------------------------------------------------- gallery -- */

/* live's About gallery: six across, each photo in the gold frame, opening
   larger in a lightbox */
.gallery__grid {
  list-style: none;
  margin-block: 0;          /* margin-block, not margin: keep .section's centring */
  padding-block: 0;         /* and padding-block, so the page gutter still applies */
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  gap: .75rem;
}
.gallery__tile {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--brand-gold);
  border-radius: 6px;
  box-shadow: 2px 2px 0 #4a4e57;
  background: #000;
}
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery__tile:hover img, .gallery__tile:focus-visible img { transform: scale(1.05); }
.gallery__tile:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gallery__tile img { transition: none; } }
@media (max-width: 64rem) { .gallery__grid { grid-template-columns: repeat(min(4, var(--cols, 6)), minmax(0, 1fr)); } }
@media (max-width: 30rem) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } }

.gallery__box {
  width: min(64rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 3px solid var(--brand-gold);
  border-radius: 8px;
  background: #000;
  overflow: hidden;
}
.gallery__box[open] { display: grid; place-items: center; }
.gallery__box::backdrop { background: rgb(10 9 8 / .85); }
.gallery__box .menu-modal__bar { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.gallery__big { max-width: 100%; max-height: calc(100dvh - 4rem); object-fit: contain; }
.gallery__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--on-fill);
  font-size: 2rem;
  line-height: 1;
  padding-bottom: .2rem;
  cursor: pointer;
}
.gallery__step:hover, .gallery__step:focus-visible { background: var(--brand-gold); color: var(--ground-deep); }
.gallery__step--prev { left: .75rem; }
.gallery__step--next { right: .75rem; }
.gallery__count {
  position: absolute;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .15rem .75rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .6);
  color: var(--cream);
  font-size: .9rem;
}

/* photos stacked beside the copy, each in the gold frame, landscape */
.feature-row__stack { display: grid; gap: 1.25rem; }
.feature-row__stack .feature-row__media { aspect-ratio: var(--stack-ratio, 4 / 3); }
.feature-row--flip .feature-row__stack { order: 2; }
@media (max-width: 48rem) {
  .feature-row__stack { max-width: 36rem; width: 100%; margin-inline: auto; }
  .feature-row--flip .feature-row__stack { order: 0; }
}

/* a stack as tall as the copy beside it: the photos share its height */
@media (min-width: 48.0625rem) {
  .feature-row__stack--fit {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(100%, 24rem);
    justify-self: center;
  }
  .feature-row__stack--fit .feature-row__media { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}

/* ------------------------------------------------ admin: menu, messages -- */

.admin-lede { max-width: 48rem; margin: .5rem 0 0; color: #414550; }
.admin-flash { margin: 1.25rem 0; padding: .75rem 1rem; background: #fdf6e3; border-left: 4px solid var(--brand-gold); border-radius: var(--radius); }
.admin-flash p { margin: .2rem 0; }
.admin-empty { margin: 2rem 0; color: #54575e; }
.btn--ghost { background: transparent; color: var(--oxblood); border-color: var(--oxblood); }

.admin-menu__jump { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 1.25rem 0 1.5rem; }
.admin-menu__jump a {
  padding: .3rem .75rem;
  border: 1px solid #d8d4cc;
  border-radius: 999px;
  background: #fff;
  color: #16130f;
  font-size: .9rem;
  text-decoration: none;
}
.admin-menu__jump a:hover, .admin-menu__jump a:focus-visible { border-color: var(--brand-gold); }

.admin-section {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid #d8d4cc;
  border-left: 6px solid var(--brand-gold);
  border-radius: var(--radius);
  scroll-margin-top: 1rem;
}
.admin-section.is-saved { border-left-color: #1d6b2c; }
.admin-section__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: .75rem; }
.admin-section__head h2 { margin: 0; font-family: var(--display); font-size: var(--step-1); text-transform: none; letter-spacing: 0; }
.admin-section__head .btn { margin-left: auto; }
.admin-saved { color: #1d6b2c; font-weight: 700; }
.admin-section__foot { margin: 1rem 0 0; text-align: right; }

.admin-field { display: grid; gap: .3rem; margin: 0 0 .75rem; }
.admin-field > span:first-child { font-weight: 600; font-size: .9rem; }
.admin-field input, .admin-field textarea, .admin-list input, .admin-rows input {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid #9ea0a4;
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: inherit;
}
.admin-field textarea { resize: vertical; line-height: 1.5; }
.admin-field--price input { max-width: 12rem; }
.admin-field input:focus, .admin-field textarea:focus, .admin-list input:focus, .admin-rows input:focus {
  outline: 2px solid var(--brand-gold);
  outline-offset: 1px;
  border-color: var(--brand-gold);
}
.admin-till { display: inline-block; padding: .45rem 0; font-weight: 700; color: var(--oxblood); }
.admin-till small { font-weight: 400; color: #54575e; }

.admin-block { margin: 0 0 1rem; padding: .75rem 1rem 1rem; border: 1px solid #e3dfd7; border-radius: var(--radius); }
.admin-block legend { padding: 0 .4rem; font-weight: 700; }
.admin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: .4rem .6rem; margin: 0 0 .75rem; padding: 0; border: 0; }
.admin-list legend { grid-column: 1 / -1; margin-bottom: .3rem; font-weight: 600; font-size: .9rem; }
.admin-list small, .admin-hint, .admin-check small { font-weight: 400; color: #54575e; font-size: .85rem; }
.admin-rows { width: 100%; border-collapse: collapse; }
.admin-rows th { padding: 0 .4rem .3rem 0; text-align: left; font-size: .85rem; }
.admin-rows td { padding: 0 .4rem .4rem 0; vertical-align: middle; }
.admin-rows td:last-child input { max-width: 10rem; }
.admin-hint { margin: .2rem 0 0; }

.admin-dishes__title { margin: 1.25rem 0 .5rem; font-size: var(--step-0); text-transform: uppercase; letter-spacing: .08em; }
.admin-dishes { display: grid; gap: 1rem; }
.admin-dish { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem 1rem; margin: 0; padding: .75rem 1rem; border: 1px solid #e3dfd7; border-radius: var(--radius); }
.admin-dish legend { padding: 0 .4rem; font-weight: 700; }
.admin-dish__img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--radius); }
.admin-dish__fields { grid-column: 2; }
.admin-dish:not(:has(.admin-dish__img)) .admin-dish__fields { grid-column: 1 / -1; }
.admin-check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.admin-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--oxblood); }
@media (max-width: 36rem) {
  .admin-dish { grid-template-columns: 1fr; }
  .admin-dish__fields { grid-column: 1; }
  .admin-rows thead { display: none; }
  .admin-rows td { display: block; }
}

.admin-message {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #d8d4cc;
  border-left: 6px solid #9ea0a4;
  border-radius: var(--radius);
}
.admin-message.is-new { border-left-color: var(--oxblood); }
.admin-message__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.admin-message__head h2 { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--step-1); }
.admin-message__head time { margin-left: auto; color: #54575e; }
.admin-message__from { margin: .4rem 0; }
.admin-message__from a { color: #6e4d0c; }
.admin-message__body { margin: .5rem 0; padding: .6rem .8rem; background: #f9f7f3; border-radius: var(--radius); white-space: normal; }
.admin-message__sent { margin: .4rem 0; color: #54575e; font-size: .9rem; }
.admin-message__actions { display: flex; gap: .6rem; margin: .5rem 0 0; }

/* the contact form's answer: a thank-you once stored, the mistake beside its field */
.form-notice--ok { border-color: #1d6b2c; border-left-color: #1d6b2c; }
.field__error { color: #9e1a2a; font-weight: 700; font-size: .9rem; }
.field--error input, .field--error textarea { border-color: #9e1a2a; }

/* ----------------------------------------------- menu: three across -- */

/* The menu's sections (owner, 29 Sep 2026, option D of four — "keep it
   clean" — then three across): the write-up runs the width of the page, the
   dishes three across under it, and a last row that does not come out even
   is centred — no fillers. A section marked `across: false` (Wings & Tenders) keeps the
   side-by-side. Below 52rem it is the grid as ever. */
@media (min-width: 52.0625rem) {
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .beside,
  :is(.menu, .menu-modal) .section--flip:not(.section--side) .beside { grid-template-columns: 1fr; gap: 1.5rem; }
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .beside__copy { order: 0; }
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .beside__intro p { max-width: none; }
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .beside__copy > .chips,
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .beside__copy > .tier-list,
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .beside__copy > .credit { max-width: 46rem; }
  /* the cake list on the wood runs the full width, as the sauce boxes do */
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .beside__copy > .group-price { max-width: none; }
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .grid--compact { display: flex; flex-wrap: wrap; justify-content: center; }
  :is(.menu, .menu-modal) .section--beside:not(.section--side) .grid--compact > li { flex: 0 0 calc((100% - 2 * 1.25rem) / 3); }
}

/* The side-by-side section (the wings) on the same three columns: its
   write-up one card wide, its dishes the other two, each the size of every
   other section's — the section is the container, so 100cqi is its width
   (owner, 29 Sep 2026). */
@media (min-width: 52.0625rem) {
  :is(.menu, .menu-modal) .section--side .beside { container-type: inline-size; grid-template-columns: calc((100% - 2 * 1.25rem) / 3) 1fr; column-gap: 1.25rem; }
  :is(.menu, .menu-modal) .section--side .grid--compact { grid-template-columns: repeat(auto-fill, calc((100cqi - 2 * 1.25rem) / 3)); }
}

/* Sauce Flavors and Dry Rubs on the site's wood, the bubbles centred (owner,
   29 Sep 2026): the wood band's texture (as .wood), light type on it, the
   gold stripe kept on the left. */
.beside__below > .chips, .list-card > .chips {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ground-deep);
  border-color: rgb(204 153 46 / .45);
  border-left-color: var(--brand-gold);
  color: #f4ece0;
}
.beside__below > .chips::before, .list-card > .chips::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/brand/wood.jpg") center/700px repeat fixed;
  opacity: .18;
  filter: saturate(.65) brightness(.5);
}
.beside__below > .chips .chips__heading, .list-card > .chips .chips__heading { color: #f4ece0; }
/* the choices as a printed menu writes them, not as bubbles — they read as
   buttons (owner, 29 Sep 2026, option B): the names in the display face, a
   small gold dot between them, a name never broken across a line */
.beside__below > .chips ul, .list-card > .chips ul { display: block; text-align: center; line-height: 2.1; }
.beside__below > .chips li, .list-card > .chips li {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: #f4ece0;
}
.beside__below > .chips li:not(:last-child)::after { content: "\2022"; margin: 0 .2rem 0 .7rem; color: var(--brand-gold); }
/* under each heading the tapered gold rule the menu's other headings carry */
.beside__below > .chips .chips__heading::after,
.list-card > .chips .chips__heading::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .55rem;
  background: var(--taper);
}
.list-card > .chips .chips__heading::after { background: var(--taper-centre); }

/* one list under the dishes (the dressings) takes the row */
.section > .beside__below > .chips:only-child { grid-column: 1 / -1; }


/* a list as a card among the dishes (the dressings): the card's size, on the
   wood, its heading centred over the choices stacked one above another */
.list-card { display: flex; }
.list-card > .chips { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 0; max-width: none; }
.list-card > .chips .chips__heading { text-align: center; }
.list-card > .chips ul { margin-top: 1rem; }
.list-card > .chips li { display: block; }   /* in the card, one above another */

/* The Tiffany's cake list the same way as the sauces (owner, 29 Sep 2026):
   on the wood, the names as a printed menu writes them with gold dots between,
   the price in gold, all centred. */
.group-price {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ground-deep);
  border-color: rgb(204 153 46 / .45);
  border-left-color: var(--brand-gold);
  color: #f4ece0;
  text-align: center;
}
.group-price::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/brand/wood.jpg") center/700px repeat fixed;
  opacity: .18;
  filter: saturate(.65) brightness(.5);
}
.group-price ul { display: block; margin-top: 0; text-align: center; line-height: 2.1; }
.group-price li {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: #f4ece0;
}
/* (no space between the names in this markup, so the dot carries its own on both sides) */
.group-price li:not(:last-child)::after { content: "\2022"; margin: 0 .7rem; color: var(--brand-gold); }
.group-price .price--group { color: var(--brand-gold); }
.group-price__cta { justify-content: center; color: #f4ece0; }

/* the white Eat @ the Shack pick under BEVERAGES' write-up, large, a soft
   shadow so the white stands off the light metal (owner, 29 Sep 2026) */
.drinks__mark {
  display: block;
  width: min(17rem, 70%);
  height: auto;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / .35));
}

/* ------------------------------------------------------------ sponsor -- */

/* "Sponsored by" and the sponsor's logo on a strip of the wood — the
   catering page's Notoriously Local credit (owner, 1 Oct 2026) */
.sponsor { margin-top: clamp(2rem, 4vw, 3rem); border-block: 2px solid var(--brand-gold); }
.sponsor__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.sponsor__text { margin: 0; font-family: var(--script); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--brand-gold); }
.sponsor__logo { width: clamp(7rem, 14vw, 10rem); height: auto; }

/* ------------------------------------------------- header: dropdown -- */

/* A link's dropdown — Catering under Events (owner, 1 Oct 2026). On a wide
   screen it opens below the link on hover or keyboard focus, on the wood in
   a gold frame; in the phone menu it is an indented line under its link. */
.site-nav .site-nav__has-sub { position: relative; }
/* the header above the page that follows it, or the dropdown slides under
   the hero (it is its own stacking context); below the cart bar and the
   floating ONLINE ORDER pill */
.site-head { z-index: 10; }
.site-nav ul.site-nav__sub { display: none; }
@media (min-width: 52.0625rem) {
  .site-nav ul.site-nav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    flex-direction: column;
    gap: 0;
    min-width: 11rem;
    padding: .5rem 0;
    /* the bands' wood (.wood), the grain a touch lighter (owner, 1 Oct 2026) */
    isolation: isolate;
    overflow: hidden;
    background: var(--ground-deep);
    border: 2px solid var(--brand-gold);
    border-radius: 999px;         /* a pill, as the site's buttons (owner, 1 Oct 2026) */
    box-shadow: 0 10px 30px rgb(0 0 0 / .45);
  }
  .site-nav ul.site-nav__sub::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/brand/wood.jpg") center/700px repeat fixed;
    opacity: .26;
    filter: saturate(.65) brightness(.55);
  }
  .site-nav__has-sub:hover > ul.site-nav__sub,
  .site-nav__has-sub:focus-within > ul.site-nav__sub { display: flex; }
  .site-nav__sub a { display: block; padding: .45rem 1.25rem; font-size: var(--step-1); white-space: nowrap; text-align: center; }
}
@media (max-width: 52rem) {
  .site-nav ul.site-nav__sub { display: flex; margin-top: .2rem; }
  .site-nav__sub a { font-size: var(--step-1); opacity: .85; }
  .site-nav__sub a::before { content: "\2014\00a0"; color: var(--brand-gold); }
}

/* the sponsor's smoke box: the feature row's media at a sponsor's size */
.sponsor__media { width: clamp(11rem, 22vw, 16rem); flex: none; }
/* no gold frame here — the box sits straight on the wood (owner, 1 Oct 2026) */
.sponsor__media.feature-row__media { border: 0; box-shadow: none; }

/* one big mark, centred — the catering page's closing Eat @ the Shack pick */
.big-mark { display: flex; justify-content: center; padding-block: clamp(2rem, 5vw, 4rem); }
.big-mark img { width: min(24rem, 70%); height: auto; filter: drop-shadow(0 12px 26px rgb(0 0 0 / .38)); }

/* a cutout graphic in a feature row's media place: no frame, a soft shadow
   under its own shape (the QuixTix ticket and poster, owner 1 Oct 2026) */
.feature-row__cutout { display: block; justify-self: center; }
.feature-row__cutout img { display: block; width: 100%; max-width: 23rem; height: auto; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .35)); }
a.feature-row__cutout:hover img, a.feature-row__cutout:focus-visible img { transform: rotate(-1deg) scale(1.02); transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) { a.feature-row__cutout img { transition: none; } }

/* admin: settings */
.admin-radios label { font-weight: 400; }
.admin-keys { margin: .75rem 0; padding-left: 1.25rem; }
.admin-tests { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-start; }
.admin-field small { font-weight: 400; color: #54575e; }

/* -------------------------------------------------- best of berkeley -- */

/* The winners scrolling under the header (owner, 1 Oct 2026): a slim black
   strip edged in gold, the list written twice and moved half its width, so
   it loops with no seam. It pauses under the pointer, and stands still for
   anyone who asks for less motion. */
.award-ticker {
  position: relative;
  overflow: hidden;
  background: #0b0908;
  border-bottom: 1px solid var(--brand-gold);
  color: var(--cream);
}
.award-ticker__track {
  display: flex;
  width: max-content;
  animation: award-ticker 70s linear infinite;
}
.award-ticker:hover .award-ticker__track,
.award-ticker:focus-within .award-ticker__track { animation-play-state: paused; }
@keyframes award-ticker { to { transform: translateX(-50%); } }
.award-ticker__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.award-ticker__list li {
  padding: .45rem 1.4rem;
  font-family: var(--display);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.award-ticker__lead { color: var(--gold); font-family: var(--script) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1.15rem !important; }
.award-ticker .award__star { color: var(--brand-gold); }
.award-ticker__kind { margin-left: .35rem; color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .award-ticker__track { animation: none; }
  .award-ticker { overflow-x: auto; }
  .award-ticker__list[aria-hidden="true"] { display: none; }
}

/* the awards where each fits — a credit line, not a control (owner, 1 Oct
   2026, option A): a gold star, the award in small capitals, "— Winner" in
   italic. Cream on the wood, the site's red on the metal. */
.awards {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin-block: .75rem 0;   /* block only: in a menu section, keep .section's centring and gutter */
  padding-block: 0;
  list-style: none;
}
.awards:not(.section > .awards) { padding-inline: 0; }   /* a section's own child keeps its gutter */
.award {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-family: var(--display);
  font-size: .85rem;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
}
.award__star { color: var(--brand-gold); font-size: 1rem; }
.award__kind { font-family: var(--sans); font-style: italic; font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--gold); }
.award__kind::before { content: "\2014\00a0"; }
/* on the light metal */
:is(.awards--menu, .awards--favorites, .awards--row) .award { color: var(--oxblood); }
:is(.awards--menu, .awards--favorites, .awards--row) .award__kind { color: #8a6414; }
.awards--hero { justify-content: center; }
/* in the hero's middle the awards take the column's width, never set it —
   otherwise they widen the middle and squeeze the sides */
.hero__center .awards { width: 0; min-width: 100%; }
.awards--meats { justify-content: center; margin-bottom: 1rem; }
.awards--favorites { margin-block: 1.25rem 0; justify-content: center; }
.awards--menu { margin-top: .5rem; }
.section__heading + .awards--menu { justify-content: flex-start; }

/* ----------------------------------------------------------------- videos -- */

/* A video from the shack's socials, as a poster (owner, 1 Oct 2026): the wood,
   the GS pick, the gold play button under it, the platform and the caption.
   Nothing from the platform loads until it is pressed (templates/video-dialog). */
.vposter {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 4px solid var(--brand-gold);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #fff;
  background: #000;
  color: #f4ece0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vposter__art { position: absolute; inset: 0; }
.vposter__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .15), rgb(0 0 0 / .78)); }
.vposter__art img { position: absolute; left: 50%; top: 34%; width: 44%; transform: translate(-50%, -50%); opacity: .92; z-index: 1; }
/* the play button under the pick (owner) */
.vposter__play {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 2;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--brand-gold);
  box-shadow: 0 4px 16px rgb(0 0 0 / .5);
  transform: translate(-50%, -50%);
  transition: transform .15s ease;
}
.vposter__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .6rem 0 .6rem 1rem;
  border-color: transparent transparent transparent #16130f;
}
.vposter:hover .vposter__play, .vposter:focus-visible .vposter__play { transform: translate(-50%, -50%) scale(1.08); }
.vposter:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }
.vposter__chip {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .65);
  font-size: .72rem;
  letter-spacing: .04em;
}
.vicon { width: .95rem; height: .95rem; flex: none; }
.vposter__cap { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 2; font-family: var(--display); font-size: 1rem; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .vposter__play { transition: none; } }

/* in the announcements box: a small tile beside its words */
.board__video { display: flex; align-items: center; gap: .9rem; padding-top: 1rem; border-top: 1px solid rgb(204 153 46 / .3); }
.vposter--mini { width: 88px; flex: none; border-width: 3px; border-radius: 10px; }
.vposter--mini .vposter__art img { top: 32%; width: 52%; }
.vposter--mini .vposter__play { width: 2rem; height: 2rem; top: 66%; }
.vposter--mini .vposter__play::after { border-width: .38rem 0 .38rem .62rem; }
.vposter--mini .vposter__chip, .vposter--mini .vposter__cap { display: none; }
.board__video-text { display: grid; gap: .2rem; }
.board__video-kicker { font-family: var(--display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #cc992e; }
.board__video-cap { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; color: #f4ece0; }
.board__video-src { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: #b3a89a; }

/* the homepage row: up to four across, two on a phone */
.socials__grid {
  list-style: none;
  margin-block: 1.5rem 0;   /* block only: keep .section's centring and gutter */
  padding-block: 0;
  display: grid;
  /* as many columns as videos, each a quarter of the row at most, centred */
  grid-template-columns: repeat(var(--count, 4), minmax(0, calc((100% - 3.75rem) / 4)));
  justify-content: center;
  gap: 1.25rem;
}
@media (max-width: 52rem) { .socials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the pop-up: the platform's player, tall for phone videos, wide for the rest */
.vmodal {
  width: min(420px, 92vw);
  max-height: 94vh;
  padding: 0;
  overflow: visible;
  border: 5px solid var(--brand-gold);
  border-radius: 16px;
  background: #000;
  color: #f4ece0;
}
.vmodal--wide { width: min(900px, 94vw); }
.vmodal::backdrop { background: rgb(10 9 8 / .8); }
.vmodal__frame { aspect-ratio: 9 / 16; max-height: calc(94vh - 4rem); border-radius: 11px 11px 0 0; overflow: hidden; background: #111; }
.vmodal--wide .vmodal__frame { aspect-ratio: 16 / 9; }
.vmodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; font-size: .9rem; }
.vmodal__link { flex: none; color: #cc992e; }
.vmodal__close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid var(--brand-gold);
  background: var(--oxblood);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* admin: videos */
.admin-videos__platforms { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.admin-videos__h { margin: 1.5rem 0 .25rem; font-family: var(--display); font-size: var(--step-1); }
.admin-video { margin: 0 0 1rem; padding: .9rem 1rem .5rem; border: 1px solid #e3dfd7; border-radius: var(--radius); }
.admin-video--new { border-style: dashed; }
.admin-video legend { padding: 0 .4rem; font-weight: 600; }
.admin-video__grid { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 6rem; gap: 0 1rem; }
@media (max-width: 40rem) { .admin-video__grid { grid-template-columns: 1fr; } }
.admin-video select { padding: .5rem; border: 1px solid #c9c4ba; border-radius: var(--radius); font: inherit; }
.admin-video__checks { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; margin: 0 0 .5rem; }
.admin-video__checks > span { font-weight: 600; font-size: .9rem; }
/* the shows in the scroller: links to their QuixTix pages (owner, 1 Oct 2026) */
.award-ticker__show { color: inherit; text-decoration: none; }
.award-ticker__show:hover .award-ticker__kind, .award-ticker__show:focus-visible .award-ticker__kind { text-decoration: underline; }

/* a photo's Before / After tag (owner, 3 Oct 2026) */
.feature-row__tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .25rem .8rem;
  border: 1px solid var(--brand-gold);
  border-radius: 999px;
  background: rgb(0 0 0 / .7);
  color: #cc992e;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

/* the gallery as a showcase (About, owner, 3 Oct 2026): one large photo, the
   rest a strip of thumbnails under it that scrolls sideways */
.gallery__stage {
  display: block;
  margin-block: 0 .75rem;
  overflow: hidden;
  border: 3px solid var(--brand-gold);
  border-radius: 10px;
  background: #000;
  cursor: zoom-in;
}
.gallery__main { display: block; width: 100%; height: clamp(16rem, 34vw, 27rem); object-fit: cover; }   /* kept short: the page, not the gallery */
.gallery--showcase .gallery__strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);   /* snap to the page margin, not past it */
  padding-bottom: .4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-gold) transparent;
}
.gallery--showcase .gallery__strip > li { flex: 0 0 clamp(5rem, 9vw, 7.5rem); scroll-snap-align: start; }
.gallery--showcase .gallery__tile { opacity: .7; transition: opacity .15s ease; }
.gallery--showcase .gallery__tile:hover, .gallery--showcase .gallery__tile.is-current { opacity: 1; }
.gallery--showcase .gallery__tile.is-current { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
@media (max-width: 40rem) { .gallery__main { height: auto; aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .gallery--showcase .gallery__tile { transition: none; } }

/* Happy Hour centred in its column, top to bottom, and more air above and
   below each part of the hero (owner, 3 Oct 2026) */
.hero__side--specials .hero__specials { flex: 1; align-content: center; }
.hero__side--specials .hero__specials li { padding-block: 1.25rem; gap: .6rem; }
.hero__side-title { margin-bottom: 1.4rem; }
.hero__shows { gap: 1rem; }
.hero__side-more { margin-top: 1.4rem; }
.hero__center .hero__eyebrow { margin-bottom: 1.4rem; }
.hero__center .hero__sub { margin-top: .6rem; }
.hero__center .hero__marks { margin-top: 2rem; }
.hero__center .awards--hero { margin-top: 1.25rem; }
.hero__lede { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.hero__card { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 36rem) {
  .hero__side--specials .hero__specials li { padding-block: .5rem; }
}

/* Shack Favorites as the one framed box (owner, 3 Oct 2026): two dishes
   showing, rolling through the top five sellers */
.favorites--box { text-align: left; }
.favorites--box .favorites__side { max-width: 34rem; margin-inline: auto; }
.favorites--box .cta-row { text-align: center; }
.board--favs .board__title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); text-align: center; }
.favs { overflow: hidden; }
.favs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.favs__list > li { padding-block: .7rem; box-sizing: border-box; display: flex; align-items: center; }
.favs__list > li > .board__item { width: 100%; }
.favs__list > li + li { border-top: 1px solid rgb(204 153 46 / .3); }
.favs.is-rolling .favs__list { transition: transform .7s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.board--favs .board__item img { width: 96px; height: 96px; }
@media (prefers-reduced-motion: reduce) {
  .favs { max-height: 15rem; overflow-y: auto; }
}

/* the Shack Favorites box with the EATS panel to its right (owner, 3 Oct 2026) */
.favorites--beside .favorites__pair {
  display: grid;
  grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.favorites--beside .favorites__side { max-width: none; margin: 0; }
.favorites__pair .section.eats-panel { padding: 0; }
.favorites__pair .section.eats-panel > * { max-width: none; padding-inline: 0; }
@media (max-width: 60rem) {
  .favorites--beside .favorites__pair { grid-template-columns: minmax(0, 1fr); }
  .favorites--beside .favorites__side { max-width: 34rem; margin-inline: auto; }
}
/* the box as tall as the panel beside it, its dishes centred in it */
@media (min-width: 60.01rem) {
  .favorites--beside .favorites__pair { align-items: stretch; }
  .favorites--beside .favorites__side { display: flex; flex-direction: column; }
  .favorites--beside .board--favs { flex: 1; display: flex; flex-direction: column; }
  .favorites--beside .board--favs .favs { margin-block: auto; }   /* the four dishes centred: equal space above and below (owner, 7 Oct 2026) */
}
@media (min-width: 60.01rem) {
  /* the two dishes a size up, to fill the taller box */
  .favorites--beside .board--favs .board__item img { width: 140px; height: 140px; border-radius: 12px; }
  .favorites--beside .board--favs .board__item { gap: 1.1rem; }
  .favorites--beside .board--favs .board__name { font-size: 1.65rem; }
  .favorites--beside .board--favs .board__price { font-size: 1.25rem; }
  .favorites--beside .favs__list > li { padding-block: .9rem; }
}

/* three dishes in view (owner, 3 Oct 2026): the rows a size down so three fit beside the panel */
@media (min-width: 60.01rem) {
  .favorites--beside .board--favs .board__item img { width: 104px; height: 104px; }
  .favorites--beside .board--favs .board__name { font-size: 1.4rem; }
  .favorites--beside .board--favs .board__price { font-size: 1.1rem; }
  .favorites--beside .favs__list > li { padding-block: .6rem; }
}
/* the "Please note" at the foot of the page, in small print (owner, 3 Oct 2026) */
.section.notice--small { padding-block: .75rem 1.25rem; }
.notice--small .notice__inner { gap: .6rem; justify-content: center; }
.notice--small .notice__mark { width: 28px; height: auto; }
.notice--small .notice__text { font-size: .78rem; line-height: 1.4; text-shadow: none; opacity: .85; max-width: 60rem; }
/* four dishes in view (owner, 3 Oct 2026): a touch smaller again to fit the panel's height */
@media (min-width: 60.01rem) {
  .favorites--beside .board--favs .board__item img { width: 88px; height: 88px; }
  .favorites--beside .board--favs .board__name { font-size: 1.3rem; }
  .favorites--beside .favs__list > li { padding-block: .5rem; }
}
@media (min-width: 60.01rem) {
  /* no extra margin under the heading here, so the space above the dishes matches the space below */
  .favorites--beside .board--favs .board__title { margin-bottom: 0; }
}

/* the welcome line under the Shack Favorites box (owner, 7 Oct 2026) */
.favorites__lede {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: var(--step-1);
  line-height: 1.55;
  color: #2b2722;
}
@media (min-width: 60.01rem) {
  /* three dishes in view: the rows a size up again */
  .favorites--beside .board--favs .board__item img { width: 104px; height: 104px; }
  .favorites--beside .board--favs .board__name { font-size: 1.4rem; }
  .favorites--beside .favs__list > li { padding-block: .6rem; }
}

/* Apple Pay (owner, 7 Oct 2026): Datacap's Wallet client draws the button into
   #apple-pay-button, in Safari with Apple Pay only; anywhere else it stays
   empty and the whole block, the "or" with it, is hidden. */
.order-pay__wallet { margin: 0 0 14px; }
.order-pay__wallet:has(#apple-pay-button:empty) { display: none; }
#apple-pay-button { min-height: 44px; }
.order-pay__or { margin: 10px 0 0; text-align: center; font-size: .9rem; color: var(--cream-muted, #6b6158); }

/* /admin -> Orders: the status as a row of buttons, the current one lit (owner, 7 Oct 2026) */
.admin-order__status { flex-wrap: wrap; }
.admin-order__status-label { font-weight: 600; }
.admin-statuses { display: flex; flex-wrap: wrap; gap: .4rem; }
.admin-statusbtn { font: inherit; font-size: .95rem; padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #b9ada0; background: #fff; color: #2b2722; }
.admin-statusbtn:hover, .admin-statusbtn:focus-visible { border-color: #73000a; }
.admin-statusbtn.is-current { background: #73000a; border-color: #73000a; color: #fff; font-weight: 600; }
.admin-statusbtn--ready.is-current { background: #1f6b3a; border-color: #1f6b3a; }
.admin-statusbtn--cancelled.is-current { background: #555; border-color: #555; }
.admin-order__told { margin-top: .25rem; }
/* the optional texts checkbox at checkout */
.order-form__check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.4; }
.order-form__check input { margin-top: .2rem; width: auto; flex: 0 0 auto; }

/* /admin on staging: a bar that cannot be missed (owner, 7 Oct 2026) */
.admin-staging { margin: 0; padding: .55rem 1rem; text-align: center; background: #f2c200; color: #1a1a1a; font-size: .95rem; letter-spacing: .02em; }
.admin-staging a { color: #1a1a1a; font-weight: 600; }

/* a voided or refunded order: its status buttons greyed out (owner, 7 Oct 2026) */
.admin-statusbtn:disabled { cursor: not-allowed; opacity: .45; border-color: #cfc6bb; background: #f1ede7; color: #6b6158; }
.admin-statusbtn.is-current:disabled { background: #8a8580; border-color: #8a8580; color: #fff; }
.admin-order__closed { font-size: .9rem; color: #6b6158; font-style: italic; }

/* /menu/: the owner's photos in the hand-typed blocks (7 Oct 2026) */
.price-list__photo { margin: 0 0 1rem; }
.price-list__photo img { display: block; width: 100%; max-height: 22rem; object-fit: cover; border-radius: 6px; }
.price-list__photo figcaption { margin-top: .35rem; font-size: .85rem; color: var(--cream-muted, #b3a89a); text-align: center; }
.group-price__photo { display: block; width: 100%; max-width: 24rem; height: auto; border-radius: 6px; margin: 0 auto 1rem; }
.meats__photo { margin: 1.25rem auto 0; max-width: 26rem; }
.meats__photo figcaption { color: #2b2722; }