/* ===== DINER COUNTER SPREAD ===== */
/* ============================================================
   GRUB MONKEYS — DINER COUNTER SPREAD V2
   One composition: social proof + order conversion + final CTA.
   Red is an accent, not half the section.
   ============================================================ */

.diner-counter-spread{
  --counter-cream:var(--gm-white,#F0EFE9);
  --counter-grey:var(--gm-grey,#3A3A3A);
  --counter-red:var(--gm-red,#EB0000);
  --counter-teal:var(--gm-teal,#00DDC2);

  padding:clamp(44px,5vw,64px) var(--pad-x);
  background:var(--counter-grey);
  color:var(--counter-grey);
  overflow:hidden;
}

.counter-shell{
  position:relative;
  width:min(1220px,100%);
  min-height:540px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(330px,.36fr) minmax(0,.64fr);
  grid-template-areas:
    "proof order"
    "fascia fascia";
  border:4px solid #242424;
  background:var(--counter-cream);
  box-shadow:12px 14px 0 rgba(235,0,0,.72);
  isolation:isolate;
}

.counter-chrome-edge{
  position:absolute;
  z-index:20;
  left:-4px;
  right:-4px;
  top:-13px;
  height:13px;
  overflow:hidden;
  border:2px solid #252525;
  background:
    linear-gradient(
      180deg,
      #575755 0%,
      #faf9f4 20%,
      #aaa9a6 43%,
      #f9f8f3 64%,
      #686866 100%
    );
}

.counter-chrome-edge span{
  position:absolute;
  inset:-10px auto -10px -18%;
  width:7%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:gmCounterChromeSweep 11.8s ease-in-out infinite;
}

@keyframes gmCounterChromeSweep{
  0%,77%{left:-18%;opacity:0}
  82%{opacity:.65}
  95%{left:112%;opacity:.35}
  100%{left:112%;opacity:0}
}

/* ------------------------------------------------------------
   LEFT: REVIEW NOTE
   ------------------------------------------------------------ */
.counter-proof{
  grid-area:proof;
  position:relative;
  padding:clamp(28px,3vw,38px);
  background:#292929;
  border-right:3px solid #242424;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.counter-proof::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:
    repeating-linear-gradient(0deg,transparent 0 80px,rgba(240,239,233,.12) 80px 81px),
    repeating-linear-gradient(90deg,transparent 0 136px,rgba(240,239,233,.06) 136px 137px);
}

.counter-proof__label{
  position:absolute;
  z-index:3;
  left:24px;
  top:18px;
  padding:7px 9px 6px;
  border:2px solid var(--counter-grey);
  background:var(--counter-teal);
  color:var(--counter-grey);
  font-size:.49rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  transform:rotate(-1deg);
}

.counter-review-note{
  position:relative;
  z-index:2;
  width:100%;
  min-height:360px;
  margin-top:24px;
  padding:32px 30px 24px;
  background:#fffdf6;
  border:2px solid rgba(58,58,58,.28);
  box-shadow:7px 8px 0 rgba(0,0,0,.2);
  transform:rotate(-.45deg);
  transform-origin:50% 0;
  display:flex;
  flex-direction:column;
  opacity:1;
}

.counter-review-pin{
  position:absolute;
  z-index:4;
  top:10px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--counter-red);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.2),
    0 2px 2px rgba(0,0,0,.14);
}
.counter-review-pin--left{left:18px}
.counter-review-pin--right{right:18px}

.counter-review-note .sec-num{
  margin:0 0 14px;
}

.counter-review-stage{
  position:relative;
  flex:1;
  min-height:210px;
  overflow:hidden;
}

.counter-review-stage .review-slide{
  display:none;
  position:relative;
  margin:0;
  animation:none!important;
}

.counter-review-stage .review-slide.active{
  display:block;
}

.counter-review-stage .review-slide.is-leaving,
.counter-review-stage .review-slide.is-entering{
  position:absolute;
  inset:0;
  display:block;
}

.counter-review-stage.to-next .review-slide.is-leaving{
  animation:gmReviewLeaveNext 260ms cubic-bezier(.22,.8,.28,1) both!important;
}
.counter-review-stage.to-next .review-slide.is-entering{
  animation:gmReviewEnterNext 260ms cubic-bezier(.22,.8,.28,1) both!important;
}
.counter-review-stage.to-prev .review-slide.is-leaving{
  animation:gmReviewLeavePrev 260ms cubic-bezier(.22,.8,.28,1) both!important;
}
.counter-review-stage.to-prev .review-slide.is-entering{
  animation:gmReviewEnterPrev 260ms cubic-bezier(.22,.8,.28,1) both!important;
}

@keyframes gmReviewLeaveNext{
  to{opacity:0;transform:translateX(-13px)}
}
@keyframes gmReviewEnterNext{
  from{opacity:0;transform:translateX(13px)}
  to{opacity:1;transform:none}
}
@keyframes gmReviewLeavePrev{
  to{opacity:0;transform:translateX(13px)}
}
@keyframes gmReviewEnterPrev{
  from{opacity:0;transform:translateX(-13px)}
  to{opacity:1;transform:none}
}

.review-stars{
  margin:0 0 8px;
  color:var(--counter-red);
  font-size:.82rem;
  line-height:1;
  letter-spacing:.09em;
}

.counter-review-note .review-quote{
  max-width:29ch;
  margin:0;
  color:var(--counter-grey);
  font-family:var(--f-display);
  font-size:clamp(1.55rem,2.45vw,2.55rem);
  line-height:1.06;
  text-transform:none;
}

.counter-review-note .review-meta{
  max-width:45ch;
  margin-top:14px;
  color:#6c645c;
  font-size:.61rem;
  line-height:1.45;
  letter-spacing:.035em;
  text-transform:uppercase;
  font-weight:700;
}

.counter-review-note .review-meta a{
  color:var(--counter-red);
  text-underline-offset:2px;
}

.counter-review-note .review-nav{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

.counter-review-note .review-arrow{
  width:36px;
  height:36px;
  border:2px solid var(--counter-grey);
  background:transparent;
  color:var(--counter-grey);
}

.counter-review-note .review-arrow:hover,
.counter-review-note .review-arrow:focus-visible{
  background:var(--counter-grey);
  color:var(--counter-cream);
}

.review-source-chip{
  margin-left:auto;
  padding:6px 7px 5px;
  border:1px solid rgba(58,58,58,.32);
  color:#72695f;
  font-size:.43rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}

/* Paper moves only when the person interacts with it. */
.counter-review-note:hover{
  animation:gmPaperEdgeFlutter 420ms ease-out both;
}
@keyframes gmPaperEdgeFlutter{
  0%,100%{transform:rotate(-.45deg) translateY(0)}
  38%{transform:rotate(-.15deg) translateY(-1px)}
  68%{transform:rotate(-.62deg) translateY(0)}
}

/* ------------------------------------------------------------
   RIGHT: ORDER COUNTER
   ------------------------------------------------------------ */
.counter-order-main{
  grid-area:order;
  position:relative;
  min-width:0;
  padding:clamp(34px,4vw,52px);
  padding-top:clamp(42px,4.5vw,58px);
  background-color:#f3f0e7;
  background-image:
    radial-gradient(circle at 12% 17%,rgba(58,58,58,.09) 0 .65px,transparent .9px),
    radial-gradient(circle at 70% 49%,rgba(235,0,0,.055) 0 .65px,transparent .9px);
  background-size:31px 27px,43px 39px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.counter-order-main::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  background:var(--counter-red);
}

.counter-order-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
}

.counter-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--counter-red);
  font-size:.56rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
}

.counter-order-head h2{
  max-width:8ch;
  margin:0;
  color:var(--counter-grey);
  font-family:var(--f-display);
  font-size:clamp(3.8rem,6.2vw,6.7rem);
  line-height:.77;
  font-weight:400;
  text-transform:uppercase;
}

.counter-order-head h2 em{
  color:var(--counter-red);
  font-style:normal;
}

.counter-service-status{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 8px 6px;
  border:2px solid var(--counter-grey);
  color:var(--counter-grey);
  background:rgba(240,239,233,.72);
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.12em;
}

.counter-service-lamp{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--counter-teal);
  box-shadow:0 0 10px rgba(0,221,194,.45);
}

.counter-service-lamp.is-pulsing{
  animation:gmCounterLampPulse 420ms ease-out 1;
}

@keyframes gmCounterLampPulse{
  0%{transform:scale(.7);filter:brightness(.7)}
  45%{transform:scale(1.4);filter:brightness(1.25)}
  100%{transform:scale(1);filter:none}
}

.counter-order-copy{
  max-width:54ch;
  margin:20px 0 24px;
  color:#6b6259;
  font-size:.78rem;
  line-height:1.6;
}

.counter-order-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:end;
}

.counter-order-tickets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.counter-order-ticket{
  position:relative;
  min-height:88px;
  padding:15px 42px 14px 15px;
  border:3px solid var(--counter-grey);
  background:var(--counter-cream);
  color:var(--counter-grey);
  text-decoration:none;
  box-shadow:4px 5px 0 var(--counter-grey);
  display:grid;
  align-content:center;
  gap:5px;
  transition:
    transform 150ms cubic-bezier(.2,.85,.2,1),
    box-shadow 150ms cubic-bezier(.2,.85,.2,1),
    background 150ms ease,
    color 150ms ease;
}

.counter-order-ticket:nth-child(2){
  background:var(--counter-grey);
  color:var(--counter-cream);
  box-shadow:4px 5px 0 var(--counter-red);
}

.counter-order-ticket:hover,
.counter-order-ticket:focus-visible{
  transform:translateY(-2px);
}

.counter-order-ticket.is-pressed,
.counter-order-ticket:active{
  transform:translateY(3px);
  box-shadow:4px 1px 0 var(--counter-grey);
}

.counter-order-ticket:nth-child(2).is-pressed,
.counter-order-ticket:nth-child(2):active{
  box-shadow:4px 1px 0 var(--counter-red);
}

.counter-order-ticket__micro{
  font-size:.43rem;
  line-height:1;
  letter-spacing:.12em;
  font-weight:900;
  opacity:.62;
}

.counter-order-ticket strong{
  font-family:var(--f-display);
  font-size:1rem;
  line-height:.95;
  font-weight:400;
  text-transform:uppercase;
}

.counter-order-ticket__arrow{
  position:absolute;
  right:13px;
  bottom:13px;
  color:var(--counter-red);
  font-size:1.1rem;
  transition:transform 150ms ease;
}

.counter-order-ticket:nth-child(2) .counter-order-ticket__arrow{
  color:var(--counter-teal);
}

.counter-order-ticket:hover .counter-order-ticket__arrow{
  transform:translateX(3px);
}

.counter-bell-station{
  width:112px;
  min-height:116px;
  margin:0;
  padding:8px 8px 7px;
  border:3px solid var(--counter-grey);
  background:#ddd8cd;
  color:var(--counter-grey);
  box-shadow:4px 5px 0 rgba(58,58,58,.24);
  display:grid;
  justify-items:center;
  align-content:center;
  gap:4px;
}

.counter-bell-station .order-ticket{
  position:static;
  display:block;
  opacity:.48;
  transform:none;
  margin:0 0 2px;
  padding:3px 5px;
  border:1px solid var(--counter-grey);
  background:var(--counter-cream);
  color:var(--counter-red);
  font-size:.43rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}

.counter-bell-station .order-bell{
  transform:scale(.82);
}

.counter-bell-caption{
  font-size:.39rem;
  line-height:1;
  letter-spacing:.11em;
  font-weight:900;
}

.counter-bell-station.ring .order-ticket{
  animation:gmOrderUpFlash 760ms ease both;
}

@keyframes gmOrderUpFlash{
  0%,100%{opacity:.48;background:var(--counter-cream)}
  18%,60%{opacity:1;background:var(--counter-teal)}
}

.counter-detail-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  color:#82776c;
  font-size:.45rem;
  font-weight:900;
  letter-spacing:.12em;
}

.counter-detail-line i{
  flex:1;
  height:1px;
  background:rgba(58,58,58,.22);
}

/* Existing counter tray stays functional but is compressed into a small
   secondary control row so it never competes with the order conversion. */
.diner-counter-spread .gm-counter-tray{
  width:100%;
  margin-top:16px;
  padding:9px 10px 10px;
  border:2px solid rgba(58,58,58,.42);
  border-radius:0;
  background:rgba(58,58,58,.045);
  box-shadow:none;
  transform:none;
  opacity:1;
}

.diner-counter-spread .gm-counter-tray.in{
  animation:none;
}

.diner-counter-spread .gm-tray-ticket{
  margin-bottom:7px;
  color:#766d64;
  font-size:.43rem;
}

.diner-counter-spread .gm-tray-items{
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.diner-counter-spread .gm-tray-item{
  min-height:37px;
  border:2px solid var(--counter-grey);
  background:var(--counter-cream);
  font-family:var(--f-content);
  font-size:.49rem;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:2px 2px 0 rgba(58,58,58,.25);
}

.diner-counter-spread .gm-tray-item::before{
  display:none;
}

/* Existing status workflow becomes an overlay, never layout height. */
.diner-counter-spread .gm-order-status{
  right:18px;
  bottom:18px;
  width:min(310px,calc(100% - 36px));
  border:2px solid var(--counter-cream);
  box-shadow:5px 6px 0 rgba(58,58,58,.2);
}

/* ------------------------------------------------------------
   BOTTOM: ONE COUNTER FASCIA
   ------------------------------------------------------------ */
.counter-fascia{
  grid-area:fascia;
  position:relative;
  min-height:118px;
  padding:23px clamp(26px,3vw,42px);
  border-top:5px solid var(--counter-red);
  background:var(--counter-grey);
  color:var(--counter-cream);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  overflow:hidden;
}

.counter-fascia::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:7px;
  background:
    linear-gradient(180deg,#f7f6f2,#8a8a88 45%,#efeee9 70%,#5f5f5d);
  opacity:.82;
}

.counter-fascia__copy{
  min-width:0;
}

.counter-fascia__copy > span{
  display:block;
  margin-bottom:5px;
  color:var(--counter-teal);
  font-size:.48rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
}

.counter-fascia h3{
  margin:0;
  color:var(--counter-cream);
  font-family:var(--f-display);
  font-size:clamp(2.3rem,4.2vw,4.4rem);
  line-height:.8;
  font-weight:400;
  text-transform:uppercase;
}

.counter-fascia__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.counter-fascia-btn{
  min-height:44px;
  padding:12px 14px;
  border:2px solid var(--counter-cream);
  background:var(--counter-cream);
  color:var(--counter-grey);
  text-decoration:none;
  font-size:.54rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  transition:transform 150ms ease,background 150ms ease,color 150ms ease;
}

.counter-fascia-btn--outline{
  background:transparent;
  color:var(--counter-cream);
}

.counter-fascia-btn:hover,
.counter-fascia-btn:focus-visible{
  transform:translateY(-2px);
  background:var(--counter-teal);
  color:var(--counter-grey);
  border-color:var(--counter-teal);
}

.counter-fascia__glint{
  position:absolute;
  top:0;
  bottom:0;
  left:-18%;
  width:7%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:gmFasciaGlint 12.4s ease-in-out infinite;
}

@keyframes gmFasciaGlint{
  0%,78%{left:-18%;opacity:0}
  83%{opacity:.55}
  96%{left:112%;opacity:.25}
  100%{left:112%;opacity:0}
}

/* ------------------------------------------------------------
   ONE-TIME ENTRY: quiet mechanical assembly, then still.
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:no-preference){
  .diner-counter-spread .counter-review-note,
  .diner-counter-spread .counter-order-head,
  .diner-counter-spread .counter-order-copy,
  .diner-counter-spread .counter-order-row,
  .diner-counter-spread .counter-detail-line,
  .diner-counter-spread .gm-counter-tray,
  .diner-counter-spread .counter-fascia{
    opacity:0;
  }

  .diner-counter-spread .counter-review-note{
    transform:rotate(-.45deg) translateY(-12px);
  }

  .diner-counter-spread .counter-order-head,
  .diner-counter-spread .counter-order-copy,
  .diner-counter-spread .counter-order-row,
  .diner-counter-spread .counter-detail-line,
  .diner-counter-spread .gm-counter-tray{
    transform:translateY(8px);
  }

  .diner-counter-spread .counter-fascia{
    transform:translateY(18px);
  }

  .diner-counter-spread.is-entered .counter-review-note{
    animation:gmCounterNoteSettle 480ms cubic-bezier(.2,.9,.23,1.18) 70ms both;
  }

  .diner-counter-spread.is-entered .counter-order-head{
    animation:gmCounterOrderRise 380ms cubic-bezier(.2,.85,.2,1) 140ms both;
  }
  .diner-counter-spread.is-entered .counter-order-copy{
    animation:gmCounterOrderRise 380ms cubic-bezier(.2,.85,.2,1) 200ms both;
  }
  .diner-counter-spread.is-entered .counter-order-row{
    animation:gmCounterOrderRise 380ms cubic-bezier(.2,.85,.2,1) 260ms both;
  }
  .diner-counter-spread.is-entered .counter-detail-line{
    animation:gmCounterOrderRise 380ms cubic-bezier(.2,.85,.2,1) 320ms both;
  }
  .diner-counter-spread.is-entered .gm-counter-tray{
    animation:gmCounterOrderRise 380ms cubic-bezier(.2,.85,.2,1) 360ms both;
  }

  .diner-counter-spread.is-entered .counter-fascia{
    animation:gmCounterFasciaRise 420ms cubic-bezier(.2,.85,.2,1) 360ms both;
  }
}

@keyframes gmCounterNoteSettle{
  0%{opacity:0;transform:rotate(-1.4deg) translateY(-12px)}
  68%{opacity:1;transform:rotate(-.18deg) translateY(2px)}
  100%{opacity:1;transform:rotate(-.45deg) translateY(0)}
}

@keyframes gmCounterOrderRise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@keyframes gmCounterFasciaRise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */
@media(max-width:980px){
  .counter-shell{
    grid-template-columns:minmax(280px,.42fr) minmax(0,.58fr);
  }

  .counter-order-head h2{
    font-size:clamp(3.3rem,7vw,5.4rem);
  }

  .counter-order-row{
    grid-template-columns:1fr;
  }

  .counter-bell-station{
    width:100%;
    min-height:74px;
    grid-template-columns:auto auto auto;
    justify-content:center;
    gap:12px;
  }

  .counter-bell-station .order-bell{
    transform:scale(.63);
  }

  .review-source-chip{
    display:none;
  }
}

/* ------------------------------------------------------------
   MOBILE: conversion first, then proof, then final CTA.
   ------------------------------------------------------------ */
@media(max-width:760px){
  .diner-counter-spread{
    padding:34px 0;
  }

  .counter-shell{
    width:100%;
    min-height:0;
    grid-template-columns:1fr;
    grid-template-areas:
      "order"
      "proof"
      "fascia";
    border-left:0;
    border-right:0;
    box-shadow:none;
  }

  .counter-order-main{
    padding:42px var(--pad-x) 34px;
  }

  .counter-order-head h2{
    max-width:7ch;
    font-size:clamp(3.65rem,16vw,5.4rem);
  }

  .counter-order-copy{
    margin:16px 0 20px;
  }

  .counter-order-tickets{
    grid-template-columns:1fr 1fr;
  }

  .counter-order-ticket{
    min-height:78px;
  }

  .counter-proof{
    padding:32px var(--pad-x) 36px;
    border-right:0;
    border-top:3px solid #242424;
  }

  .counter-proof__label{
    left:var(--pad-x);
    top:16px;
  }

  .counter-review-note{
    min-height:325px;
    margin-top:24px;
    padding:30px 24px 22px;
  }

  .counter-review-stage{
    min-height:185px;
  }

  .counter-review-note .review-quote{
    max-width:none;
    font-size:clamp(1.55rem,7vw,2.15rem);
  }

  .counter-fascia{
    min-height:0;
    padding:24px var(--pad-x) 28px;
    grid-template-columns:1fr;
    gap:16px;
  }

  .counter-fascia__actions{
    width:100%;
  }

  .counter-fascia-btn{
    flex:1;
    justify-content:space-between;
  }
}

@media(max-width:470px){
  .counter-order-tickets{
    grid-template-columns:1fr;
  }

  .counter-order-head{
    display:block;
  }

  .counter-service-status{
    width:max-content;
    margin-top:15px;
  }

  .counter-detail-line{
    font-size:.4rem;
  }

  .diner-counter-spread .gm-tray-items{
    grid-template-columns:1fr 1fr 1fr;
  }

  .counter-fascia__actions{
    display:grid;
    grid-template-columns:1fr;
  }
}

/* ------------------------------------------------------------
   ACCESSIBILITY / REDUCED MOTION
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .counter-chrome-edge span,
  .counter-fascia__glint,
  .counter-review-note:hover,
  .counter-bell-station.ring .order-ticket,
  .counter-service-lamp.is-pulsing{
    animation:none!important;
  }

  .counter-order-ticket,
  .counter-order-ticket__arrow{
    transition:none!important;
  }

  .counter-review-stage .review-slide.is-leaving,
  .counter-review-stage .review-slide.is-entering{
    animation:none!important;
  }
}


/* ===== INTERACTIVE DINER ===== */
/* ============================================================
   GRUB MONKEYS — INTERACTIVE DINER PATCH V2
   Target: V11 + KOT 069 + live motion patch
   New visuals are HTML/CSS. JS only manages state, real time/session,
   interaction triggers, and URL/menu selection.
   No GIF/Lottie/Canvas/animation library required.
   ============================================================ */

:root{
  --gm-id-red: var(--gm-red,#EB0000);
  --gm-id-grey: var(--gm-grey,#3A3A3A);
  --gm-id-white: var(--gm-white,#F0EFE9);
  --gm-id-teal: var(--gm-teal,#00DDC2);
  --gm-id-paper: var(--gm-paper,#fff9ee);
  --gm-id-ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- SESSION / TABLE ID ---------- */
.gm-session-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:2px solid currentColor;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.gm-session-chip::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--gm-id-teal);
  box-shadow:0 0 9px rgba(0,221,194,.5);
  animation:gmSessionLamp 2.8s steps(2,end) infinite;
}
@keyframes gmSessionLamp{50%{opacity:.35}}

/* ---------- WHAT SHOULD I ORDER? FORTUNE MACHINE ---------- */
.gm-fortune-section{
  background:var(--gm-id-white);
  color:var(--gm-id-grey);
  padding:clamp(70px,8vw,110px) var(--pad-x,5vw);
  overflow:hidden;
}
.gm-fortune-shell{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(430px,1.28fr);
  gap:clamp(32px,7vw,90px);
  align-items:center;
}
.gm-fortune-copy .gm-machine-code{
  display:inline-block;
  margin-bottom:14px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gm-id-red);
}
.gm-fortune-copy h2{
  margin:0;
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:clamp(3rem,7vw,6.4rem);
  line-height:.82;
  text-transform:uppercase;
}
.gm-fortune-copy h2 em{color:var(--gm-id-red);font-style:normal}
.gm-fortune-copy p{max-width:44ch;line-height:1.7;font-size:.86rem;margin-top:18px}
.gm-fortune-machine{
  position:relative;
  border:5px solid var(--gm-id-grey);
  background:var(--gm-id-red);
  padding:24px;
  box-shadow:12px 14px 0 var(--gm-id-grey);
}
.gm-fortune-machine::before{
  content:"WHAT SHOULD I ORDER?";
  display:block;
  margin-bottom:18px;
  color:var(--gm-id-white);
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:1.3rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.gm-fortune-controls{display:grid;gap:18px}
.gm-fortune-group{display:grid;gap:8px}
.gm-fortune-group>span{
  color:var(--gm-id-white);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.gm-selector-row{display:flex;flex-wrap:wrap;gap:7px}
.gm-selector-btn{
  border:2px solid var(--gm-id-white);
  background:var(--gm-id-grey);
  color:var(--gm-id-white);
  padding:10px 11px;
  min-height:42px;
  font:inherit;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 4px 0 #202020;
  transition:transform .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease;
}
.gm-selector-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #202020}
.gm-selector-btn[aria-pressed="true"]{background:var(--gm-id-teal);color:var(--gm-id-grey)}
.gm-fortune-pull{
  margin-top:4px;
  width:100%;
  border:3px solid var(--gm-id-grey);
  background:var(--gm-id-white);
  color:var(--gm-id-grey);
  padding:13px 15px;
  font:inherit;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 5px 0 var(--gm-id-grey);
}
.gm-fortune-pull:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gm-id-grey)}
.gm-card-slot{
  position:relative;
  height:20px;
  margin:22px 20px 0;
  border-radius:999px;
  background:#1d1d1d;
  box-shadow:inset 0 3px 4px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.32);
}
.gm-fortune-card-window{position:relative;height:0;overflow:visible;z-index:4}
.gm-fortune-card{
  position:absolute;
  left:8%;right:8%;top:-4px;
  min-height:190px;
  padding:20px;
  background:var(--gm-id-paper);
  color:var(--gm-id-grey);
  border:2px solid var(--gm-id-grey);
  transform:translateY(-102%) rotateX(-92deg);
  transform-origin:top center;
  opacity:0;
  box-shadow:8px 10px 0 rgba(58,58,58,.18);
}
.gm-fortune-machine.is-dispensing .gm-fortune-card{
  animation:gmFortuneDispense .72s var(--gm-id-ease) forwards;
}
.gm-fortune-card strong{display:block;font-family:var(--f-display,"Arial Black",sans-serif);font-size:1.45rem;line-height:1;text-transform:uppercase}
.gm-fortune-card ul{list-style:none;padding:0;margin:14px 0 10px;display:grid;gap:6px;font-size:.78rem;font-weight:700}
.gm-fortune-card small{display:block;border-top:1px dashed rgba(58,58,58,.45);padding-top:10px;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase}
@keyframes gmFortuneDispense{
  0%{opacity:0;transform:translateY(-102%) rotateX(-92deg)}
  45%{opacity:1;transform:translateY(20px) rotateX(10deg)}
  72%{transform:translateY(14px) rotateX(-4deg)}
  100%{opacity:1;transform:translateY(16px) rotateX(0)}
}

/* The Sauce Heat Meter's styles live at the end of this file, in the
   approved `gm-sauce-meter__` namespace. The old `.gm-heat-*` / `.gm-gauge-*`
   ruleset that used to sit here was removed with that replacement. */

/* ---------- COUNTER TRAY ---------- */
.gm-counter-tray{
  position:relative;
  flex:1 1 100%;
  width:min(620px,100%);
  margin-top:28px;
  padding:20px 22px 18px;
  border:4px solid var(--gm-id-grey);
  border-radius:18px 18px 8px 8px;
  background:var(--gm-id-red);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.14),12px 14px 0 rgba(58,58,58,.24);
  transform:translateX(120%);
  opacity:0;
}
.gm-counter-tray.in{animation:gmTraySlide .75s var(--gm-id-ease) forwards}
.gm-tray-ticket{display:flex;justify-content:space-between;gap:16px;color:var(--gm-id-white);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.gm-tray-items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gm-tray-item{
  position:relative;
  min-height:88px;
  border:3px solid var(--gm-id-grey);
  background:var(--gm-id-white);
  color:var(--gm-id-grey);
  font:inherit;
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:1rem;
  text-transform:uppercase;
  box-shadow:4px 5px 0 rgba(58,58,58,.5);
  overflow:hidden;
}
.gm-tray-item::before{
  content:"";
  position:absolute;
  left:12px;right:12px;top:15px;height:6px;
  background:var(--gm-id-teal);
  transform:scaleX(.35);
  transform-origin:left;
  transition:transform .2s ease;
}
.gm-tray-item:hover::before,.gm-tray-item:focus-visible::before{transform:scaleX(1)}
.gm-tray-item:active{transform:translateY(3px);box-shadow:4px 2px 0 rgba(58,58,58,.5)}
@keyframes gmTraySlide{0%{opacity:0;transform:translateX(120%)}70%{opacity:1;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}

/* ---------- ORDER STATUS BOARD ---------- */
.gm-order-status{
  position:absolute;
  right:clamp(16px,4vw,58px);
  bottom:22px;
  width:min(350px,calc(100% - 32px));
  border:3px solid var(--gm-id-white);
  background:#202020;
  color:var(--gm-id-white);
  transform:translateY(18px);
  opacity:0;
  pointer-events:none;
  z-index:7;
}
.gm-order-status.show{animation:gmStatusIn .2s ease forwards}
.gm-order-status-head{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:2px solid rgba(240,239,233,.24);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase}
.gm-order-status-line{padding:14px 12px;font-family:var(--f-display,"Arial Black",sans-serif);font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase}
.gm-order-status-line::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gm-id-teal);margin-right:10px;box-shadow:0 0 10px rgba(0,221,194,.5)}
@keyframes gmStatusIn{to{opacity:1;transform:translateY(0)}}

/* ---------- JUKEBOX SELECTOR: UPGRADE EXISTING JUKEBOX, NO SECOND JUKEBOX ---------- */
.gm-juke-selector{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin:2px 0 8px;
}
.gm-juke-select{
  border:2px solid var(--gm-id-white);
  background:#222;
  color:var(--gm-id-white);
  min-height:44px;
  font:inherit;
  font-weight:800;
  font-size:.58rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;
}
.gm-juke-select::before{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#585858}
.gm-juke-select[aria-pressed="true"]{background:var(--gm-id-red);color:var(--gm-id-white);transform:translateY(2px)}
.gm-juke-select[aria-pressed="true"]::before{background:var(--gm-id-teal);box-shadow:0 0 8px rgba(0,221,194,.65)}
.gm-juke-select[aria-disabled="true"],.gm-juke-select:disabled{opacity:.45;cursor:not-allowed}
.gm-juke-selection-note{grid-column:1/-1;color:rgba(240,239,233,.58);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- PHOTO BOOTH MODE: REUSE EXISTING GRUB IRL PHOTOS ---------- */
.gm-photobooth-trigger{
  border:2px solid var(--gm-id-white);
  background:var(--gm-id-red);
  color:var(--gm-id-white);
  padding:10px 12px;
  font:inherit;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:4px 4px 0 #151515;
}
.gm-photobooth-stage{
  position:relative;
  max-width:760px;
  margin:36px auto 0;
  height:0;
  overflow:hidden;
  transition:height .45s var(--gm-id-ease);
}
.gm-photobooth-stage.open{height:470px}
.gm-booth-machine{position:relative;height:100%;display:grid;place-items:center;background:#222;border:4px solid var(--gm-id-white);box-shadow:10px 12px 0 var(--gm-id-red);overflow:hidden}
.gm-booth-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.gm-photobooth-stage.shooting .gm-booth-flash{animation:gmBoothFlash 1.4s steps(1,end)}
.gm-photo-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  width:88%;
  padding:10px 10px 38px;
  background:#fffaf0;
  transform:translateY(-120%);
  opacity:0;
  border:2px solid var(--gm-id-grey);
}
.gm-photo-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.gm-photobooth-stage.done .gm-photo-strip{animation:gmStripOut .75s var(--gm-id-ease) forwards}
.gm-photo-strip::after{content:"GRUB MONKEYS · PHOTO BOOTH · CHANNEL 69";position:absolute;left:0;right:0;bottom:11px;text-align:center;color:var(--gm-id-grey);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase}
@keyframes gmBoothFlash{0%,10%,28%,45%,62%,78%,100%{opacity:0}6%,24%,41%,58%{opacity:.9}}
@keyframes gmStripOut{0%{opacity:0;transform:translateY(-120%)}100%{opacity:1;transform:translateY(0)}}

/* ---------- KOT RECEIPT TEAR: EXTEND EXISTING KOT, DO NOT ADD ANOTHER PRINTER ---------- */
#kotTerminal .kot-tear{cursor:pointer;user-select:none;position:relative;padding:9px 0}
#kotTerminal .kot-tear::after{content:"CLICK TO TEAR";display:block;margin-top:4px;font-size:.44rem;font-weight:800;color:var(--gm-id-red);letter-spacing:.08em}
#kotTerminal.is-torn .kot-ticket-action{
  animation:gmCouponTear .55s var(--gm-id-ease) forwards;
  transform-origin:top left;
  border:2px dashed var(--gm-id-grey);
  padding:9px;
  background:var(--gm-id-white);
}
@keyframes gmCouponTear{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(8px) rotate(-4deg)}100%{transform:translateY(18px) rotate(2deg)}}

/* ---------- CONDIMENTS: CSS SHAPES ONLY ---------- */
.gm-condiment-pair{display:flex;align-items:flex-end;gap:12px;flex:0 0 auto}
.gm-condiment{
  position:relative;
  width:52px;height:108px;
  border:3px solid var(--gm-id-grey);
  border-radius:48% 48% 16% 16% / 26% 26% 12% 12%;
  display:grid;place-items:center;
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:.9rem;
  color:var(--gm-id-white);
  transform-origin:50% 100%;
  transition:transform .26s var(--gm-id-ease);
}
.gm-condiment::before{content:"";position:absolute;left:50%;top:-18px;width:18px;height:24px;transform:translateX(-50%);background:inherit;border:3px solid var(--gm-id-grey);border-bottom:none}
.gm-condiment.ketchup{background:var(--gm-id-red)}
.gm-condiment.mustard{background:#e5b72e;color:var(--gm-id-grey)}
.gm-condiment:hover,.gm-condiment:focus-visible{transform:rotate(-7deg) scaleY(.94)}
.gm-condiment.mustard:hover,.gm-condiment.mustard:focus-visible{transform:rotate(7deg) scaleY(.94)}
.gm-condiment::after{content:"";position:absolute;left:50%;top:38%;width:10px;height:20px;border-radius:50%;transform:translateX(-50%) scale(0);background:rgba(255,255,255,.42);transition:transform .22s ease}
.gm-condiment:hover::after,.gm-condiment:focus-visible::after{transform:translateX(-50%) scale(1)}

/* Existing mechanical board becomes ONE session special, not a second board */
.flipboard-band.gm-special-board .flip-kicker::after{content:" / DAILY PICK"}

/* Current motel tag is the location selector. Do not add a second booth selector. */
.motel-keytag.gm-location-picked::after{
  content:"PICKED";
  position:absolute;
  right:-13px;bottom:9px;
  background:var(--gm-id-teal);
  color:var(--gm-id-grey);
  border:2px solid var(--gm-id-grey);
  padding:4px 6px;
  font-size:.45rem;
  font-weight:900;
  letter-spacing:.1em;
}

@media(max-width:900px){
  .gm-fortune-shell{grid-template-columns:1fr}
  .gm-fortune-machine{max-width:620px}
  .gm-photobooth-stage.open{height:410px}
  .gm-photo-strip{grid-template-columns:repeat(4,1fr);width:94%}
}
@media(max-width:640px){
  .gm-fortune-section{padding-left:20px;padding-right:20px}
  .gm-fortune-machine{padding:18px;box-shadow:8px 9px 0 var(--gm-id-grey)}
  .gm-selector-row{display:grid;grid-template-columns:1fr 1fr}
  .gm-selector-row .gm-selector-btn:last-child:nth-child(odd){grid-column:1/-1}
  .gm-tray-items{grid-template-columns:1fr}
  .gm-counter-tray{padding:16px}
  .gm-order-status{right:16px;bottom:12px}
  .gm-juke-selector{grid-template-columns:repeat(2,1fr)}
  .gm-photobooth-stage.open{height:620px}
  .gm-photo-strip{grid-template-columns:repeat(2,1fr);width:88%}
}

@media(prefers-reduced-motion:reduce){
  .gm-session-chip::before,
  .gm-fortune-machine.is-dispensing .gm-fortune-card,
  .gm-counter-tray.in,.gm-order-status.show,
  .gm-photobooth-stage.shooting .gm-booth-flash,
  .gm-photobooth-stage.done .gm-photo-strip,
  #kotTerminal.is-torn .kot-ticket-action{
    animation:none!important;
    transition:none!important;
  }
  .gm-fortune-machine.is-dispensing .gm-fortune-card{opacity:1;transform:translateY(16px) rotateX(0)}
  .gm-counter-tray.in{opacity:1;transform:none}
  .gm-order-status.show{opacity:1;transform:none}
  .gm-photobooth-stage.done .gm-photo-strip{opacity:1;transform:none}
}

/* Small integration corrections */
.gm-fortune-machine{transition:padding-bottom .35s var(--gm-id-ease)}
.gm-fortune-machine.is-dispensing{padding-bottom:255px}
.gm-photo-strip{position:relative}
#m1 .gm-sauce-meter{grid-column:1/-1;margin:30px 0 36px}
#m1 .menu-row.gm-heat-match{background:rgba(0,221,194,.09);box-shadow:inset 4px 0 0 var(--gm-id-teal);padding-left:8px;transition:background .18s ease,box-shadow .18s ease,padding-left .18s ease}


/* =========================================================
   GRUB MONKEYS — APPROVED LIVE CSS SAUCE HEAT METER
   Namespaced production version.
   ========================================================= */

.gm-sauce-meter{
  --gm-sm-red:var(--gm-red,#EB0000);
  --gm-sm-grey:var(--gm-grey,#3A3A3A);
  --gm-sm-paper:var(--gm-white,#F0EFE9);
  --gm-sm-teal:var(--gm-teal,#00DDC2);
  --gm-sm-ink:#202020;
  --gm-sm-warm:#E5A12A;
  --gm-sm-orange:#E95C22;
  --gm-sm-needle:-160deg;
  --gm-sm-active:#00DDC2;

  position:relative;
  overflow:hidden;
  padding:clamp(18px,2.5vw,28px);
  border:3px solid var(--gm-sm-grey);
  background:var(--gm-sm-paper);
  color:var(--gm-sm-ink);
  box-shadow:12px 12px 0 var(--gm-sm-grey);
}

.gm-sauce-meter::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 12px,
      var(--gm-sm-grey) 12px 13px
    );
}

.gm-sauce-meter__head{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.gm-sauce-meter__eyebrow{
  margin:0 0 6px;
  color:var(--gm-sm-red);
  font-family:var(--f-body,"Lexend",Arial,sans-serif);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.gm-sauce-meter__head h3{
  margin:0;
  font-family:var(--f-display,"Jaro","Arial Black",sans-serif);
  font-size:clamp(2.8rem,6vw,5.4rem);
  font-weight:400;
  line-height:.84;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.gm-sauce-meter__live{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:8px 10px;
  border:2px solid var(--gm-sm-grey);
  background:#fffdf6;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.16em;
}

.gm-sauce-meter__live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gm-sm-teal);
  box-shadow:
    0 0 0 4px rgba(0,221,194,.12),
    0 0 16px rgba(0,221,194,.55);
  animation:gmSauceBlink 1.8s steps(2,end) infinite;
}

@keyframes gmSauceBlink{
  50%{opacity:.35}
}

.gm-sauce-meter__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(470px,1.28fr);
  gap:clamp(22px,3vw,32px);
  align-items:stretch;
}

.gm-sauce-meter__photo{
  position:relative;
  min-height:560px;
  margin:0;
  overflow:hidden;
  border:3px solid var(--gm-sm-grey);
  background:#111;
  box-shadow:8px 8px 0 var(--gm-sm-red);
}

.gm-sauce-meter__photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.02);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}

.gm-sauce-meter__photo:hover img{
  transform:scale(1.045);
}

.gm-sauce-meter__photo::after{
  content:"";
  position:absolute;
  inset:-10% -50%;
  pointer-events:none;
  background:
    linear-gradient(
      110deg,
      transparent 35%,
      rgba(255,255,255,.18) 48%,
      transparent 58%
    );
  transform:translateX(-70%);
  animation:gmSaucePhotoSweep 7s ease-in-out infinite;
}

@keyframes gmSaucePhotoSweep{
  0%,70%{transform:translateX(-70%)}
  92%,100%{transform:translateX(70%)}
}

.gm-sauce-meter__photo-label{
  position:absolute;
  left:14px;
  bottom:14px;
  display:grid;
  gap:2px;
  padding:9px 11px;
  border:2px solid var(--gm-sm-paper);
  background:var(--gm-sm-red);
  color:var(--gm-sm-paper);
  box-shadow:4px 4px 0 var(--gm-sm-grey);
  text-transform:uppercase;
}

.gm-sauce-meter__photo-label span{
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.15em;
}

.gm-sauce-meter__photo-label strong{
  font-family:var(--f-display,"Jaro","Arial Black",sans-serif);
  font-size:1.12rem;
  font-weight:400;
  letter-spacing:.04em;
}

.gm-sauce-meter__instrument{
  position:relative;
  overflow:hidden;
  padding:24px 22px 22px;
  border:4px solid #252525;
  background:
    linear-gradient(
      108deg,
      #8d8d89 0%,
      #f3f2eb 13%,
      #a09f9a 27%,
      #f8f7ef 43%,
      #8b8a86 57%,
      #ecebe5 71%,
      #9d9c97 88%,
      #efeee8 100%
    );
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.66),
    inset 0 0 0 7px rgba(58,58,58,.14);
}

.gm-sauce-meter__instrument::after{
  content:"";
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:-35%;
  width:20%;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.62),
      transparent
    );
  transform:skewX(-18deg);
  animation:gmSauceChrome 6s ease-in-out infinite;
}

@keyframes gmSauceChrome{
  0%,66%{left:-35%;opacity:0}
  73%{opacity:.95}
  91%{left:115%;opacity:.75}
  100%{left:115%;opacity:0}
}

.gm-sauce-meter__screw{
  position:absolute;
  z-index:4;
  width:13px;
  height:13px;
  border:2px solid #5b5b58;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fff,#aaa 55%,#555);
  box-shadow:inset 0 0 1px #111;
}

.gm-sauce-meter__screw::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:50%;
  height:1px;
  background:#555;
  transform:rotate(-22deg);
}

.gm-sauce-meter__screw--1{top:10px;left:10px}
.gm-sauce-meter__screw--2{top:10px;right:10px}
.gm-sauce-meter__screw--3{bottom:10px;left:10px}
.gm-sauce-meter__screw--4{bottom:10px;right:10px}

.gm-sauce-meter__dial-wrap{
  position:relative;
  max-width:670px;
  margin:4px auto 18px;
  overflow:hidden;
  border:4px solid #242424;
  border-radius:360px 360px 22px 22px / 260px 260px 18px 18px;
  background:#151515;
  box-shadow:
    0 0 0 3px #f8f4e9,
    inset 0 0 28px rgba(0,0,0,.60);
}

.gm-sauce-meter__dial{
  position:relative;
  width:100%;
  aspect-ratio:2.05/1;
  overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(#fffdf5,#e9e4d6);
}

.gm-sauce-meter__ticks{
  position:absolute;
  width:93%;
  aspect-ratio:1;
  left:3.5%;
  top:15%;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from 221deg,
      var(--gm-sm-grey) 0deg 1.2deg,
      transparent 1.2deg 6.1deg
    );
  -webkit-mask:
    radial-gradient(circle,transparent 0 64%,#000 65% 69%,transparent 70%);
  mask:
    radial-gradient(circle,transparent 0 64%,#000 65% 69%,transparent 70%);
}

.gm-sauce-meter__segment{
  position:absolute;
  bottom:-72%;
  width:92%;
  left:4%;
  aspect-ratio:1;
  border-radius:50%;
  -webkit-mask:
    radial-gradient(circle,transparent 0 78%,#000 79% 85%,transparent 86%);
  mask:
    radial-gradient(circle,transparent 0 78%,#000 79% 85%,transparent 86%);
}

.gm-sauce-meter__segment--mild{
  background:
    conic-gradient(from 222deg,var(--gm-sm-teal) 0 34deg,transparent 34deg 360deg);
}

.gm-sauce-meter__segment--warm{
  background:
    conic-gradient(from 256deg,var(--gm-sm-warm) 0 35deg,transparent 35deg 360deg);
}

.gm-sauce-meter__segment--hot{
  background:
    conic-gradient(from 291deg,var(--gm-sm-orange) 0 35deg,transparent 35deg 360deg);
}

.gm-sauce-meter__segment--monkey{
  background:
    conic-gradient(from 326deg,var(--gm-sm-red) 0 34deg,transparent 34deg 360deg);
}

.gm-sauce-meter__dial-label{
  position:absolute;
  z-index:3;
  font-family:var(--f-body,"Lexend",Arial,sans-serif);
  font-size:clamp(.58rem,1.1vw,.78rem);
  font-weight:900;
  line-height:1;
  letter-spacing:.05em;
  text-align:center;
}

.gm-sauce-meter__dial-label--mild{
  left:7%;
  bottom:17%;
  color:#087a70;
}

.gm-sauce-meter__dial-label--warm{
  left:29%;
  top:18%;
}

.gm-sauce-meter__dial-label--hot{
  right:28%;
  top:18%;
  color:#c84816;
}

.gm-sauce-meter__dial-label--monkey{
  right:4%;
  bottom:15%;
  color:var(--gm-sm-red);
}

.gm-sauce-meter__needle{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:8%;
  width:39%;
  height:7px;
  border-radius:999px 2px 2px 999px;
  transform-origin:0 50%;
  transform:rotate(var(--gm-sm-needle));
  background:linear-gradient(90deg,var(--gm-sm-red),#870000);
  box-shadow:0 2px 3px rgba(0,0,0,.24);
  transition:
    transform 620ms cubic-bezier(.12,1.5,.2,1);
}

.gm-sauce-meter__needle::after{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:16px solid #870000;
}

.gm-sauce-meter__hub{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:8%;
  width:42px;
  height:42px;
  margin-left:-21px;
  margin-bottom:-18px;
  display:grid;
  place-items:center;
  border:5px solid var(--gm-sm-grey);
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fff,#b8b7b3 45%,#5b5b58);
  box-shadow:0 0 0 4px #f7f2e7;
}

.gm-sauce-meter__hub span{
  font-family:var(--f-display,"Jaro","Arial Black",sans-serif);
  font-size:.95rem;
  color:var(--gm-sm-red);
}

.gm-sauce-meter__glass{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at 50% 16%,
      rgba(255,255,255,.28),
      transparent 38%
    ),
    linear-gradient(
      112deg,
      transparent 22%,
      rgba(255,255,255,.23) 39%,
      transparent 50%
    );
  background-size:100% 100%,210% 100%;
  animation:gmSauceGlass 8s ease-in-out infinite;
}

@keyframes gmSauceGlass{
  0%,72%{background-position:0 0,170% 0}
  94%,100%{background-position:0 0,-120% 0}
}

.gm-sauce-meter__buttons{
  position:relative;
  z-index:11;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:16px;
}

.gm-sauce-meter__level{
  min-height:60px;
  display:grid;
  grid-template-columns:14px 1fr;
  gap:8px;
  align-items:center;
  padding:10px;
  border:3px solid var(--gm-sm-grey);
  border-radius:0;
  background:#f8f5eb;
  color:var(--gm-sm-grey);
  box-shadow:3px 4px 0 rgba(58,58,58,.34);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:
    transform 130ms ease,
    box-shadow 130ms ease,
    background 160ms ease,
    color 160ms ease;
}

.gm-sauce-meter__level:hover{
  transform:translateY(-1px);
}

.gm-sauce-meter__level:active{
  transform:translateY(3px);
  box-shadow:3px 1px 0 rgba(58,58,58,.34);
}

.gm-sauce-meter__level:focus-visible{
  outline:3px solid var(--gm-sm-teal);
  outline-offset:3px;
}

.gm-sauce-meter__level i{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#777;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}

.gm-sauce-meter__level span{
  font-size:.62rem;
  font-weight:900;
  line-height:1.05;
  letter-spacing:.05em;
}

.gm-sauce-meter__level.is-active{
  background:var(--gm-sm-grey);
  color:var(--gm-sm-paper);
}

.gm-sauce-meter__level.is-active i{
  background:var(--gm-sm-active);
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--gm-sm-active) 18%,transparent),
    0 0 14px color-mix(in srgb,var(--gm-sm-active) 75%,transparent);
  animation:gmSauceJewel 1.7s ease-in-out infinite;
}

@keyframes gmSauceJewel{
  50%{filter:brightness(.68)}
}

.gm-sauce-meter__printer{
  position:relative;
  z-index:11;
  padding-top:13px;
}

.gm-sauce-meter__slot{
  position:relative;
  z-index:4;
  height:22px;
  border:3px solid var(--gm-sm-grey);
  background:linear-gradient(#555,#1e1e1e);
}

.gm-sauce-meter__slot span{
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:5px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#050505;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.12);
}

.gm-sauce-meter__ticket{
  position:relative;
  width:calc(100% - 28px);
  margin:-2px auto 0;
  padding:16px 18px 20px;
  background:#fffdf6;
  box-shadow:0 12px 20px -16px rgba(0,0,0,.55);
  transform:rotate(-.25deg);
  transform-origin:top center;
}

.gm-sauce-meter__ticket.is-printing{
  animation:
    gmSauceTicketFeed 520ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes gmSauceTicketFeed{
  0%{
    opacity:.25;
    transform:translateY(-52px) rotate(0);
  }
  72%{
    opacity:1;
    transform:translateY(5px) rotate(-.65deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) rotate(-.25deg);
  }
}

.gm-sauce-meter__ticket::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:8px;
  background:
    linear-gradient(135deg,transparent 5px,#fffdf6 0) 0 0/10px 10px repeat-x,
    linear-gradient(45deg,transparent 5px,#fffdf6 0) 5px 0/10px 10px repeat-x;
}

.gm-sauce-meter__ticket-top,
.gm-sauce-meter__ticket footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.12em;
}

.gm-sauce-meter__ticket-top{
  padding-bottom:8px;
  border-bottom:1px dashed rgba(58,58,58,.38);
}

.gm-sauce-meter__ticket h4{
  margin:10px 0 8px;
  color:var(--gm-sm-red);
  font-family:var(--f-display,"Jaro","Arial Black",sans-serif);
  font-size:clamp(1.9rem,3vw,2.5rem);
  font-weight:400;
  line-height:.95;
  text-transform:uppercase;
}

.gm-sauce-meter__ticket ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 16px;
  margin:0;
  padding:0;
  list-style:none;
}

.gm-sauce-meter__ticket li{
  position:relative;
  padding-left:13px;
  font-size:.74rem;
  font-weight:800;
}

.gm-sauce-meter__ticket li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:6px;
  height:6px;
  background:var(--gm-sm-active);
}

.gm-sauce-meter__ticket footer{
  margin-top:13px;
  padding-top:8px;
  border-top:1px dashed rgba(58,58,58,.38);
  color:#666;
}

.gm-sauce-meter__hint{
  position:relative;
  margin:16px 0 0;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#5b5b58;
}

@media(max-width:920px){
  .gm-sauce-meter__grid{
    grid-template-columns:1fr;
  }

  .gm-sauce-meter__photo{
    min-height:360px;
    aspect-ratio:16/8;
  }
}

@media(max-width:600px){
  /* Full-bleed only where the meter sits directly in the page gutter. Inside the
     #m1 menu grid the negative margin would overflow the panel, so :not(#m1 *)
     keeps the bleed off the injected instance. */
  .gm-sauce-meter:not(#m1 .gm-sauce-meter){
    margin-inline:calc(var(--pad-x,18px) * -1);
    padding:18px var(--pad-x,18px);
    border-left:0;
    border-right:0;
    box-shadow:none;
  }

  #m1 .gm-sauce-meter{
    padding:18px 14px;
  }

  .gm-sauce-meter__head{
    align-items:flex-start;
  }

  .gm-sauce-meter__grid{
    gap:20px;
  }

  .gm-sauce-meter__photo{
    min-height:300px;
  }

  .gm-sauce-meter__instrument{
    padding:20px 12px;
  }

  .gm-sauce-meter__buttons{
    grid-template-columns:repeat(2,1fr);
  }

  .gm-sauce-meter__ticket ul{
    grid-template-columns:1fr;
  }

  .gm-sauce-meter__dial-label{
    font-size:.54rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .gm-sauce-meter__live-dot,
  .gm-sauce-meter__photo::after,
  .gm-sauce-meter__instrument::after,
  .gm-sauce-meter__glass,
  .gm-sauce-meter__level.is-active i,
  .gm-sauce-meter__ticket.is-printing{
    animation:none!important;
  }

  .gm-sauce-meter__needle,
  .gm-sauce-meter__photo img{
    transition:none!important;
  }
}

/* ------------------------------------------------------------------
   Container-relative responsive behaviour.

   The approved stylesheet stacks the meter at a *viewport* of 920px, which
   is correct for a section sitting in page flow. This instance is injected
   into the #m1 menu column, and from 1024px up `.menu-body` gains a 340px
   sticky preview column (styles.css) — so the space actually available to
   the meter collapses to roughly 480px while the viewport is still ~1024px.
   The viewport query never fires, the inner 250px + 470px minimums hold, and
   `overflow:hidden` silently clips the instrument in half.

   Keying the stack off the component's own inline size fixes that without
   touching the approved visual language. The viewport queries above are left
   in place as the fallback for browsers without container query support.
   ------------------------------------------------------------------ */
.gm-sauce-meter{
  container-type:inline-size;
  container-name:gmsauce;
}

/* Two columns need 250px + 470px + the grid gap; stack below that. */
@container gmsauce (max-width:780px){
  .gm-sauce-meter__grid{
    grid-template-columns:1fr;
  }

  .gm-sauce-meter__photo{
    min-height:360px;
    aspect-ratio:16/8;
  }
}

@container gmsauce (max-width:560px){
  .gm-sauce-meter__head{
    align-items:flex-start;
  }

  .gm-sauce-meter__grid{
    gap:20px;
  }

  .gm-sauce-meter__photo{
    min-height:300px;
  }

  .gm-sauce-meter__instrument{
    padding:20px 12px;
  }

  .gm-sauce-meter__buttons{
    grid-template-columns:repeat(2,1fr);
  }

  .gm-sauce-meter__ticket ul{
    grid-template-columns:1fr;
  }

  .gm-sauce-meter__dial-label{
    font-size:.54rem;
  }
}

/* The ticket's <footer> is a bare element, and styles.css:535 styles `footer`
   globally as the dark page footer (charcoal background, white text). That rule
   leaked in and painted the paper ticket's footer strip #3A3A3A behind the
   approved #666 text — near-illegible, and absent from the package's own preview
   because the standalone page has no global footer rule. Reset the inherited
   surface so the ticket reads as one piece of paper again. */
.gm-sauce-meter__ticket footer{
  background:transparent;
}

/* ============================================================
   CONTRAST — AA corrections for this stylesheet's components.
   These live here rather than in styles.css because interactive-diner.css
   loads second: an equal-specificity rule in styles.css would lose the
   cascade. Sorta White on Monkey Red is 4.02:1 at these small sizes;
   pure white on the same red is 4.63:1 and passes without touching the
   brand colour.
   ============================================================ */
.gm-session-chip,
.gm-fortune-group>span,
.gm-fortune-machine::before{
  color:#FFFFFF;
}

/* Remaining AA corrections, resolved against measured render paths.
   Sorta White on Monkey Red is 4.02:1; pure white on the same red is 4.63:1.
   Monkey Red as text on Sorta White is likewise 4.02:1; --gm-red-ink (#DC0000)
   is 4.51:1. Only genuinely red-backed elements are targeted — the plain
   .loc-row list sits on a light surface and is deliberately left alone; only
   .loc-row.featured is red. */
.matchbook-inside span,
.story-origin-poster .origin-copy span,
#motelKeytag #keyName,
#motelKeytag #keyNum,
.loc-row.featured .loc-row-tag,
.loc-row.featured .loc-row-address,
.loc-row.featured .loc-row-name,
.gm-juke-select[aria-pressed="true"],
.gm-photobooth-trigger,
.btn-ticket.on-dark,
.gm-tray-ticket span{
  color:#FFFFFF;
}

.gm-fortune-copy .gm-machine-code,
.loc-row.featured .loc-link,
.loc-row.featured .loc-link.outline{
  color:var(--gm-red-ink,#DC0000);
}

/* =========================================================
   WHAT SHOULD I ORDER? — RANDOM MENU RECOMMENDATION UPGRADE
   Appetite scales the number of real menu picks.
   ========================================================= */
.gm-hunger-guide{
  display:block;
  color:rgba(240,239,233,.82);
  font-size:.5rem;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:800;
}

.gm-fortune-machine.is-dispensing{
  padding-bottom:var(--gm-fortune-card-space,255px);
}

.gm-fortune-result-meta{
  margin-top:7px;
  font-size:.52rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gm-id-red);
}

.gm-fortune-card ul{
  gap:8px;
}

.gm-fortune-card li{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:9px;
  align-items:start;
}

.gm-fortune-card li span{
  display:inline-block;
  padding-top:2px;
  font-size:.48rem;
  line-height:1.15;
  letter-spacing:.1em;
  font-weight:900;
  text-transform:uppercase;
  color:var(--gm-id-red);
}

.gm-fortune-card li b{
  min-width:0;
  font-size:.78rem;
  line-height:1.28;
  font-weight:800;
}

.gm-fortune-machine[data-pick-count="4"] .gm-fortune-card{
  min-height:255px;
}

@media(max-width:640px){
  .gm-fortune-card li{
    grid-template-columns:64px minmax(0,1fr);
    gap:7px;
  }
  .gm-fortune-machine[data-pick-count="4"] .gm-fortune-card{
    min-height:275px;
  }
}

/* ============================================================
   COMPACT JUKEBOX SELECTOR
   The shell is now roughly half its original desktop width; keep every
   selector/function, but arrange the four choices as a readable 2×2 deck.
   ============================================================ */
#gmJukeboxPlayer .gm-juke-selector{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  margin:1px 0 5px;
}
#gmJukeboxPlayer .gm-juke-select{
  min-height:34px;
  padding:4px 5px;
  border-width:1px;
  font-size:.48rem;
  line-height:1.15;
  letter-spacing:.045em;
}
#gmJukeboxPlayer .gm-juke-select::before{
  top:4px;
  right:4px;
  width:5px;
  height:5px;
}
#gmJukeboxPlayer .gm-juke-selection-note{
  font-size:.43rem;
  line-height:1.35;
  letter-spacing:.055em;
}

/* Re-applied: the order status card is pinned bottom-right of .order-band,
   which clips; at bottom:12px its last 3px was shaved on phones. */
@media(max-width:900px){
  .gm-order-status{ bottom:20px; }
}

/* Re-applied: the appetite guide sits on the red machine at 8px / 0.82 alpha
   for 4.02:1. Full-opacity white reaches 4.63:1. */
.gm-hunger-guide{
  color:#FFFFFF;
}

/* ============================================================
   TAIL SECTIONS — RECLAIM RESERVED-BUT-UNPAINTED SPACE
   ============================================================ */

/* .order-band carries flex-wrap:wrap from its original row layout
   (justify-content:space-between, align-items:flex-end). Inside
   .proof-order-combo it is switched to flex-direction:column, but the
   wrap was never reset. A column flex container with a definite height
   wraps into COLUMNS, so the counter tray and the order-status toast
   were pushed into a second column beginning past the band's right edge
   and clipped away by overflow:hidden -- at 1440 the tray started 278px
   beyond that edge. They painted nothing at any width measured (1440,
   1280, 1100, 900, 390) yet still reserved ~300px of flow height, which
   set the combo row height and, through align-items:stretch, forced the
   review noticeboard to 906px for a 106px quote. Scoped to the combo so
   the standalone band on the menu page keeps its original wrapping. */
.proof-order-combo > .order-band{
  flex-wrap:nowrap;
}

/* With the band no longer inflated by invisible content, stop stretching
   the noticeboard to match it: size it to the quote it actually holds
   and centre it in the row. Only above the 1050px breakpoint, where the
   combo is still two columns. */
@media(min-width:1051px){
  .proof-order-combo{
    align-items:center;
  }
}

/* Gallery: 84px of padding at each end plus a 60px trailing gap under
   the polaroid strip. The 48px chin on each polaroid is the caption
   area of the photo frame, so that stays -- only the section padding
   and the strip's trailing gap come down. */
.social{
  padding-top:clamp(38px,4.4vw,58px);
  padding-bottom:clamp(30px,3.4vw,44px);
}
.social-strip{
  padding-bottom:26px;
}

/* Footer and franchise teaser: trim the leading/trailing bands that
   carry no type. */
.foot-tagline{
  padding-top:38px;
  padding-bottom:28px;
}
.foot-grid{
  padding-top:32px;
  padding-bottom:24px;
  gap:32px;
}
.franchise-teaser-home .fr-teaser{
  padding-top:24px;
  padding-bottom:24px;
}

/* Remaining slack in the red panel is the spacing between its blocks --
   the tray's leading margin and the band's flex gap. Everything below
   the tray is the kitchen-status readout, which does paint, so the panel
   is not padded out any further. */
@media(min-width:1051px){
  .proof-order-combo > .order-band{
    gap:6px;
  }
  .proof-order-combo .gm-counter-tray{
    margin-top:12px;
  }
}

/* ============================================================
   "HUNGRY YET?" SIGN MOVED UNDER THE NOTICEBOARD
   ============================================================ */

/* The sign and its approach rail were the last two blocks of the red
   panel. Moved into the reviews column so the panel gets shorter and the
   space under the cropped noticeboard is used. .reviews was a flex row
   holding a single board; it now stacks board, rail and sign. */
.proof-order-combo > .reviews{
  flex-direction:column;
  justify-content:center;
  gap:0;
}

.proof-order-combo > .reviews > .order-hungry-bridge{
  margin-top:14px;
}

.proof-order-combo > .reviews > .diner-sign--compact{
  margin-top:6px;
}

/* On the red panel the sign sat on a translucent dark tint. Against the
   grey column that tint is nearly invisible, so give it the red ground
   it used to borrow from its parent. */
.proof-order-combo > .reviews > .diner-sign--compact{
  background:var(--gm-red);
}

/* The rail alternated white and grey to read as stitching on red; on the
   grey column the grey segments disappear, so alternate against red. */
.proof-order-combo > .reviews > .order-hungry-bridge span:nth-child(even){
  background:var(--gm-red);
}

/* The ghost wordmark hangs off bottom:-12vh, which was harmless while it
   was (wrongly) in flow and the jukebox section was 1090px tall. Now that
   it is absolute again and the section is 542px, that offset pushed it
   108px into the gallery below. Pinned to the section's own bottom edge.
   Below 901px the existing rule already insets it, so this is scoped. */
@media(min-width:901px){
  .juke-ghost-code{
    bottom:0;
  }
}


/* ===== NEW MOTION ===== */
/* ============================================================
   GRUB MONKEYS — NEW MOTION PASS
   New motion languages only:
   condensation / carbonation / split-board / stool swivel /
   kitchen order rail / heat haze / camera exposure / sauce drip.
   No neon draw-on. No blind reveal.
   ============================================================ */

:root{
  --motion-red:var(--gm-red,#EB0000);
  --motion-grey:var(--gm-grey,#3A3A3A);
  --motion-cream:var(--gm-white,#F0EFE9);
  --motion-teal:var(--gm-teal,#00DDC2);
}

/* ------------------------------------------------------------
   1. DINER WINDOW CONDENSATION
   ------------------------------------------------------------ */
.condensation-reveal{
  --wipe-x:50%;
  --wipe-y:54%;
  cursor:crosshair;
}

.diner-condensation{
  position:absolute;
  z-index:7;
  inset:0;
  pointer-events:none;
  opacity:.56;
  background:
    radial-gradient(circle at 14% 21%,rgba(255,255,255,.24) 0 1px,transparent 1.6px),
    radial-gradient(circle at 78% 44%,rgba(255,255,255,.18) 0 1.3px,transparent 2px),
    linear-gradient(180deg,rgba(244,247,244,.25),rgba(230,236,232,.13));
  background-size:29px 31px,43px 47px,100% 100%;
  backdrop-filter:blur(3px) saturate(.74);
  -webkit-backdrop-filter:blur(3px) saturate(.74);
  -webkit-mask:
    radial-gradient(circle 0px at var(--wipe-x) var(--wipe-y),transparent 0 1px,#000 2px);
  mask:
    radial-gradient(circle 0px at var(--wipe-x) var(--wipe-y),transparent 0 1px,#000 2px);
  transition:opacity .4s ease;
}

.condensation-reveal.is-wiping .diner-condensation{
  -webkit-mask:
    radial-gradient(circle 112px at var(--wipe-x) var(--wipe-y),transparent 0 68px,rgba(0,0,0,.22) 88px,#000 112px);
  mask:
    radial-gradient(circle 112px at var(--wipe-x) var(--wipe-y),transparent 0 68px,rgba(0,0,0,.22) 88px,#000 112px);
}

.diner-condensation__scribble{
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) rotate(-4deg);
  width:max-content;
  max-width:76%;
  color:rgba(58,58,58,.52);
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:clamp(1rem,3vw,2.2rem);
  line-height:1;
  letter-spacing:.02em;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.58);
  opacity:.72;
}

.diner-condensation i{
  position:absolute;
  width:3px;
  height:36px;
  border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,0));
  opacity:.38;
}
.diner-condensation i:nth-of-type(1){left:12%;top:8%;height:54px}
.diner-condensation i:nth-of-type(2){left:31%;top:72%;height:28px}
.diner-condensation i:nth-of-type(3){left:58%;top:12%;height:43px}
.diner-condensation i:nth-of-type(4){left:77%;top:66%;height:58px}
.diner-condensation i:nth-of-type(5){left:88%;top:21%;height:31px}
.diner-condensation i:nth-of-type(6){left:45%;top:81%;height:22px}

.condensation-reveal.is-mobile-clear .diner-condensation{
  animation:gmCondensationClear 1.25s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes gmCondensationClear{
  0%{opacity:1;backdrop-filter:blur(3px) saturate(.74)}
  62%{opacity:.32;backdrop-filter:blur(1.5px) saturate(.9)}
  100%{opacity:.08;backdrop-filter:blur(0) saturate(1)}
}

/* ------------------------------------------------------------
   2. FOUNTAIN CARBONATION / PBJ FRAME + A8 PREVIEW
   ------------------------------------------------------------ */
.fountain-carbonation,
.menu-fountain-fizz{
  position:absolute;
  z-index:7;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.56;
}

.fountain-carbonation i,
.menu-fountain-fizz i{
  position:absolute;
  bottom:-18px;
  width:7px;
  height:7px;
  border:1px solid rgba(240,239,233,.82);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 4px rgba(255,255,255,.26);
  animation:gmFountainBubble 6.4s ease-in infinite;
}

.fountain-carbonation i:nth-child(1),
.menu-fountain-fizz i:nth-child(1){left:10%;animation-delay:-1.6s;transform:scale(.75)}
.fountain-carbonation i:nth-child(2),
.menu-fountain-fizz i:nth-child(2){left:24%;animation-delay:-4.1s;transform:scale(1.2)}
.fountain-carbonation i:nth-child(3),
.menu-fountain-fizz i:nth-child(3){left:39%;animation-delay:-2.4s;transform:scale(.55)}
.fountain-carbonation i:nth-child(4),
.menu-fountain-fizz i:nth-child(4){left:57%;animation-delay:-5.3s;transform:scale(.9)}
.fountain-carbonation i:nth-child(5),
.menu-fountain-fizz i:nth-child(5){left:70%;animation-delay:-.7s;transform:scale(1.35)}
.fountain-carbonation i:nth-child(6),
.menu-fountain-fizz i:nth-child(6){left:83%;animation-delay:-3.4s;transform:scale(.68)}
.fountain-carbonation i:nth-child(7),
.menu-fountain-fizz i:nth-child(7){left:92%;animation-delay:-4.8s;transform:scale(.5)}

@keyframes gmFountainBubble{
  0%{transform:translateY(0) translateX(0) scale(.55);opacity:0}
  16%{opacity:.45}
  55%{transform:translateY(-46vh) translateX(5px) scale(.9);opacity:.38}
  100%{transform:translateY(-82vh) translateX(-5px) scale(1.18);opacity:0}
}

.fountain-hiss,
.menu-fountain-fizz span{
  position:absolute;
  right:10px;
  top:10px;
  padding:4px 6px;
  border:1px solid rgba(240,239,233,.66);
  background:rgba(58,58,58,.64);
  color:var(--motion-cream);
  font-size:.42rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  opacity:0;
  transform:translateY(3px);
}

.sig-item.c:hover .fountain-hiss{
  animation:gmHissPop .48s ease-out both;
}

.sig-item.c:hover .fountain-carbonation{
  opacity:.88;
}

@keyframes gmHissPop{
  0%{opacity:0;transform:translateY(4px)}
  28%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-3px)}
}

/* Menu A8: only visible for the Drinks & Shakes state. */
.menu-fountain-fizz{
  opacity:0;
  transition:opacity .2s ease;
}
.menu-preview-sticky.is-fizzing .menu-fountain-fizz{opacity:.72}
.menu-preview-sticky.is-fizzing .menu-fountain-fizz span{
  animation:gmMenuFizzTag .7s ease-out both;
}
@keyframes gmMenuFizzTag{
  0%{opacity:0;transform:translateY(4px)}
  28%,68%{opacity:.86;transform:none}
  100%{opacity:0;transform:translateY(-3px)}
}

/* ------------------------------------------------------------
   3. WINGS HEAT HAZE
   Optical shimmer only over the food image.
   ------------------------------------------------------------ */
.wing-heat-haze,
.menu-preview-heat{
  position:absolute;
  z-index:6;
  left:6%;
  right:6%;
  top:14%;
  bottom:7%;
  pointer-events:none;
  overflow:hidden;
  opacity:.11;
  transition:opacity .35s ease;
}

.wing-heat-haze i,
.menu-preview-heat i{
  position:absolute;
  bottom:-18%;
  width:19%;
  height:72%;
  border-radius:50%;
  backdrop-filter:blur(1.3px);
  -webkit-backdrop-filter:blur(1.3px);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.035),transparent);
  animation:gmWingHeatRise 2.7s ease-in-out infinite;
}
.wing-heat-haze i:nth-child(1),
.menu-preview-heat i:nth-child(1){left:16%;animation-delay:-.4s}
.wing-heat-haze i:nth-child(2),
.menu-preview-heat i:nth-child(2){left:43%;animation-delay:-1.45s;width:14%}
.wing-heat-haze i:nth-child(3),
.menu-preview-heat i:nth-child(3){left:68%;animation-delay:-2.1s;width:21%}

@keyframes gmWingHeatRise{
  0%{transform:translateY(14%) skewX(-3deg) scaleX(.9);opacity:.15}
  50%{transform:translateY(-8%) skewX(4deg) scaleX(1.08);opacity:.6}
  100%{transform:translateY(-23%) skewX(-2deg) scaleX(.94);opacity:.08}
}

.sig-item.b.is-heated .wing-heat-haze,
.sig-item.b:hover .wing-heat-haze{
  opacity:.34;
}

.menu-preview-heat{opacity:0}
.menu-preview-sticky.is-wing-heat .menu-preview-heat{opacity:.27}

/* ------------------------------------------------------------
   4. PARTIAL DINER STOOL SWIVEL
   ------------------------------------------------------------ */
.edge-diner-stool{
  position:absolute;
  z-index:4;
  right:-42px;
  bottom:-18px;
  width:128px;
  height:190px;
  pointer-events:none;
  transform-origin:50% 42px;
}

.edge-diner-stool__seat{
  position:absolute;
  z-index:3;
  left:4px;
  top:8px;
  width:116px;
  height:38px;
  border:4px solid var(--motion-grey);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 35%,#fb2727 0 38%,#c80000 65%,#830000 100%);
  box-shadow:
    inset 0 -5px 0 rgba(58,58,58,.18),
    0 5px 0 #c5c5c1,
    0 8px 0 var(--motion-grey);
  transform:rotate(-12deg);
  transform-origin:50% 50%;
}

.edge-diner-stool__post{
  position:absolute;
  left:58px;
  top:48px;
  width:11px;
  height:105px;
  border:2px solid #515150;
  background:linear-gradient(90deg,#6c6c6a,#fff 40%,#9d9d9a 65%,#555);
}

.edge-diner-stool__ring{
  position:absolute;
  left:29px;
  top:101px;
  width:70px;
  height:34px;
  border:5px solid #8d8d8a;
  border-top-color:#f6f5ef;
  border-radius:50%;
  transform:rotate(-4deg);
}

.edge-diner-stool__base{
  position:absolute;
  left:27px;
  bottom:1px;
  width:76px;
  height:17px;
  border:3px solid var(--motion-grey);
  border-radius:50%;
  background:linear-gradient(180deg,#f4f3ee,#8f8f8c);
}

.edge-diner-stool.is-swiveled .edge-diner-stool__seat{
  animation:gmStoolSwivel .88s cubic-bezier(.2,.86,.25,1.18) both;
}

@keyframes gmStoolSwivel{
  0%{transform:rotate(-12deg)}
  42%{transform:rotate(4deg)}
  68%{transform:rotate(-17deg)}
  84%{transform:rotate(-9deg)}
  100%{transform:rotate(-12deg)}
}

/* ------------------------------------------------------------
   5. KITCHEN PASS / ORDER RAIL
   ------------------------------------------------------------ */
.kitchen-pass-rail{
  position:absolute;
  z-index:34;
  left:39%;
  right:4%;
  top:-39px;
  height:38px;
  pointer-events:none;
}

.kitchen-pass-rail__bar{
  position:absolute;
  left:0;
  right:0;
  top:5px;
  height:7px;
  border:1px solid #4f4f4e;
  background:linear-gradient(180deg,#6c6c69,#f7f6f0 31%,#969693 65%,#555);
  box-shadow:0 2px 0 rgba(0,0,0,.16);
}

.kitchen-pass-rail__clip{
  position:absolute;
  z-index:3;
  left:68%;
  top:0;
  width:16px;
  height:22px;
  border:2px solid var(--motion-grey);
  border-radius:4px 4px 8px 8px;
  background:linear-gradient(90deg,#8c8c89,#f7f6ef 48%,#777);
}

.kitchen-pass-ticket{
  position:absolute;
  z-index:2;
  left:-110px;
  top:12px;
  width:124px;
  min-height:58px;
  padding:8px 9px 10px;
  border:1px solid rgba(58,58,58,.28);
  background:#fffdf6;
  color:var(--motion-grey);
  box-shadow:5px 6px 0 rgba(58,58,58,.18);
  transform:rotate(-1deg);
  opacity:0;
}

.kitchen-pass-ticket small{
  display:block;
  padding-bottom:5px;
  border-bottom:1px dashed rgba(58,58,58,.32);
  font-size:.42rem;
  line-height:1;
  letter-spacing:.1em;
  font-weight:900;
}

.kitchen-pass-ticket strong{
  display:block;
  margin-top:7px;
  color:var(--motion-red);
  font-family:var(--f-display,"Arial Black",sans-serif);
  font-size:.73rem;
  line-height:.94;
  font-weight:400;
}

.diner-counter-spread.is-pass-ready .kitchen-pass-ticket{
  animation:gmTicketAlongRail .82s cubic-bezier(.18,.88,.22,1) forwards;
}

@keyframes gmTicketAlongRail{
  0%{left:-110px;opacity:0;transform:rotate(-5deg) translateY(-3px)}
  22%{opacity:1}
  72%{left:calc(68% - 54px);transform:rotate(1.5deg) translateY(0)}
  100%{left:calc(68% - 54px);opacity:1;transform:rotate(-1deg) translateY(0)}
}

.kitchen-pass-ticket.is-dispatching{
  animation:gmTicketDispatch .56s cubic-bezier(.4,0,.7,.2) both!important;
}

@keyframes gmTicketDispatch{
  0%{left:calc(68% - 54px);opacity:1;transform:rotate(-1deg)}
  26%{transform:rotate(3deg) translateY(-2px)}
  100%{left:calc(100% + 28px);opacity:0;transform:rotate(7deg) translateY(-5px)}
}

/* ------------------------------------------------------------
   6. GRUB IRL CAMERA EXPOSURE FLASH
   ------------------------------------------------------------ */
.camera-shot{
  isolation:isolate;
}

.camera-shot::after{
  content:"";
  position:absolute;
  z-index:8;
  inset:10px 10px 48px;
  pointer-events:none;
  background:#fff;
  opacity:0;
}

.camera-shot.is-flashing::after{
  animation:gmLocalCameraFlash .19s ease-out both;
}

.camera-shot.is-flashing img{
  animation:gmExposureSettle .44s ease-out both;
}

@keyframes gmLocalCameraFlash{
  0%{opacity:0}
  34%{opacity:.88}
  100%{opacity:0}
}

@keyframes gmExposureSettle{
  0%{filter:brightness(1.28) contrast(.88) saturate(.76)}
  44%{filter:brightness(1.06) contrast(.96) saturate(.9)}
  100%{filter:none}
}

/* ------------------------------------------------------------
   7. MECHANICAL MENU SPLIT BOARD
   ------------------------------------------------------------ */
.menu-head{
  position:relative;
}

.menu-split-board{
  position:absolute;
  right:var(--pad-x);
  bottom:2px;
  width:min(330px,34vw);
  padding:8px;
  border:3px solid #1f1f1f;
  background:#171717;
  color:var(--motion-cream);
  box-shadow:6px 7px 0 rgba(235,0,0,.35);
}

.menu-split-board__label{
  display:block;
  margin-bottom:5px;
  color:var(--motion-teal);
  font-size:.43rem;
  line-height:1;
  letter-spacing:.14em;
  font-weight:900;
}

.menu-split-board__window{
  position:relative;
  height:52px;
  overflow:hidden;
  border:2px solid #4c4c4a;
  background:#060606;
  perspective:550px;
}

.menu-split-board__face{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  transform-origin:50% 50%;
  backface-visibility:hidden;
}

.menu-split-board__face b{
  color:var(--motion-red);
  font-family:var(--f-display);
  font-size:1.45rem;
  font-weight:400;
  line-height:1;
}

.menu-split-board__face strong{
  min-width:0;
  overflow:hidden;
  color:var(--motion-cream);
  font-size:.63rem;
  line-height:1.05;
  letter-spacing:.05em;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.menu-split-board__face--old{transform:rotateX(0)}
.menu-split-board__face--new{transform:rotateX(90deg)}

.menu-split-board__hinge{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:#5f5f5d;
  box-shadow:0 1px 0 #000;
}

.menu-split-board.is-flipping .menu-split-board__face--old{
  animation:gmMenuFlipOld .18s ease-in forwards;
}
.menu-split-board.is-flipping .menu-split-board__face--new{
  animation:gmMenuFlipNew .22s .12s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes gmMenuFlipOld{
  to{transform:rotateX(-90deg);filter:brightness(.5)}
}
@keyframes gmMenuFlipNew{
  from{transform:rotateX(90deg);filter:brightness(.45)}
  to{transform:rotateX(0);filter:brightness(1)}
}

/* ------------------------------------------------------------
   8. SAUCE DRIP MICROINTERACTION
   The heat meter itself remains unchanged.
   ------------------------------------------------------------ */
.gm-sauce-meter__head h3{
  position:relative;
  display:inline-block;
}

.gm-sauce-meter__head h3::after{
  content:"";
  position:absolute;
  left:0;
  right:16%;
  bottom:-7px;
  height:4px;
  border-radius:99px;
  background:var(--motion-red);
  transform-origin:left center;
  transform:scaleX(.72);
  opacity:.82;
}

.gm-sauce-meter__head h3::before{
  content:"";
  position:absolute;
  z-index:3;
  right:18%;
  bottom:-9px;
  width:7px;
  height:9px;
  border-radius:50% 50% 58% 58%;
  background:var(--motion-red);
  opacity:0;
}

.gm-sauce-meter:hover .gm-sauce-meter__head h3::before,
.gm-sauce-meter:focus-within .gm-sauce-meter__head h3::before{
  animation:gmSingleSauceDrop .58s cubic-bezier(.42,0,.72,.24) both;
}

@keyframes gmSingleSauceDrop{
  0%{opacity:0;transform:translateY(0) scale(.78)}
  22%{opacity:1;transform:translateY(2px) scale(1)}
  76%{opacity:1;transform:translateY(13px) scale(.92)}
  100%{opacity:0;transform:translateY(18px) scale(.55)}
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:980px){
  .menu-split-board{
    position:relative;
    right:auto;
    bottom:auto;
    width:min(100%,360px);
    margin-top:16px;
  }

  .kitchen-pass-rail{
    left:47%;
    right:3%;
  }
}

@media(max-width:760px){
  .condensation-reveal{cursor:default}
  .diner-condensation__scribble{font-size:1.2rem}

  .edge-diner-stool{
    right:-58px;
    bottom:-25px;
    transform:scale(.78);
  }

  .kitchen-pass-rail{
    left:var(--pad-x);
    right:var(--pad-x);
    top:-31px;
    height:32px;
  }
  .kitchen-pass-ticket{
    width:112px;
    min-height:52px;
  }

  @keyframes gmTicketAlongRail{
    0%{left:-100px;opacity:0;transform:rotate(-5deg)}
    22%{opacity:1}
    72%{left:calc(65% - 50px);transform:rotate(1deg)}
    100%{left:calc(65% - 50px);opacity:1;transform:rotate(-1deg)}
  }

  .camera-shot::after{inset:10px 10px 48px}
}

@media(max-width:520px){
  .edge-diner-stool{display:none}
  .menu-split-board{width:100%}
  .menu-split-board__face strong{font-size:.56rem}
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .diner-condensation,
  .fountain-carbonation i,
  .menu-fountain-fizz i,
  .wing-heat-haze i,
  .menu-preview-heat i,
  .edge-diner-stool__seat,
  .kitchen-pass-ticket,
  .camera-shot::after,
  .camera-shot img,
  .menu-split-board__face,
  .gm-sauce-meter__head h3::before{
    animation:none!important;
    transition:none!important;
  }

  .condensation-reveal .diner-condensation{opacity:.08}
  .wing-heat-haze,.menu-preview-heat{opacity:.06!important}
}


/* ===== FINAL DETAIL PASS ===== */
/* =============================================================
   GRUB MONKEYS — FINAL DETAIL PASS
   Menu clarity + compact menu hero + 3 printer receipts
   + loose vinyls + red diner neon + racing checker motion.
   ============================================================= */

/* -------------------------------------------------------------
   MENU: stronger contrast and legibility.
   ------------------------------------------------------------- */
body[data-page="menu"] .menu-section#menu{
  background:#292929;
  color:#FFFFFF;
}

body[data-page="menu"] .menu-section#menu::before{
  opacity:.34;
}

body[data-page="menu"] .menu-tabs{
  border-top-color:rgba(255,255,255,.34);
  border-left-color:rgba(255,255,255,.34);
}

body[data-page="menu"] .menu-tab{
  color:rgba(255,255,255,.86);
  border-right-color:rgba(255,255,255,.30);
  border-bottom-color:rgba(255,255,255,.30);
  font-weight:800;
}

body[data-page="menu"] .menu-tab .jcode{
  color:#54F3DE;
}

body[data-page="menu"] .menu-tab:hover{
  color:#FFFFFF;
  background:rgba(255,255,255,.09);
}

body[data-page="menu"] .menu-tab[aria-selected="true"]{
  color:#FFFFFF;
  background:var(--gm-red);
}

body[data-page="menu"] .menu-group-title{
  color:#55F4DF;
  border-bottom-color:#FF3838;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

body[data-page="menu"] .menu-row{
  padding:8px 0;
  border-bottom-color:rgba(255,255,255,.18);
  font-size:.88rem;
}

body[data-page="menu"] .menu-row .name{
  color:#FFFFFF;
  font-weight:600;
  line-height:1.45;
}

body[data-page="menu"] .menu-row.multi .name{
  color:rgba(255,255,255,.93);
  font-size:.83rem;
  font-weight:550;
  line-height:1.55;
}

body[data-page="menu"] .menu-row .price{
  color:#FFFFFF;
  font-weight:800;
}

body[data-page="menu"] .menu-row .leader{
  border-bottom-color:rgba(255,255,255,.34);
}

body[data-page="menu"] .menu-note{
  color:rgba(255,255,255,.82);
  font-weight:500;
}

body[data-page="menu"] .dot.v{
  background:#6CD07A;
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
}

body[data-page="menu"] .dot.nv{
  background:#FF3535;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

/* -------------------------------------------------------------
   MENU HERO: less empty area above copy and smaller wings photo.
   ------------------------------------------------------------- */
@media(min-width:861px){
  body[data-page="menu"] .menu-page-hero{
    min-height:56svh;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    padding-top:74px;
  }

  body[data-page="menu"] .menu-page-hero .page-hero-copy{
    padding:
      clamp(28px,3.2vw,46px)
      var(--pad-x)
      clamp(34px,4vw,54px);
    justify-content:center;
  }

  body[data-page="menu"] .menu-page-hero .page-title{
    margin-top:10px;
    font-size:clamp(4rem,7.4vw,7rem);
    line-height:.78;
  }

  body[data-page="menu"] .menu-page-hero .page-hero-copy p{
    margin-top:18px;
  }

  body[data-page="menu"] .menu-page-hero>img{
    justify-self:end;
    align-self:center;
    width:88%;
    height:min(47svh,520px);
    min-height:0;
    margin-right:var(--pad-x);
    object-fit:cover;
    object-position:center 53%;
    border:4px solid var(--gm-grey);
    box-shadow:
      8px 9px 0 var(--gm-red),
      12px 13px 0 rgba(58,58,58,.14);
  }
}

@media(max-width:860px){
  body[data-page="menu"] .menu-page-hero{
    min-height:auto;
    padding-top:70px;
  }

  body[data-page="menu"] .menu-page-hero .page-hero-copy{
    padding:34px var(--pad-x) 28px;
  }

  body[data-page="menu"] .menu-page-hero .page-title{
    margin-top:9px;
  }

  body[data-page="menu"] .menu-page-hero>img{
    width:calc(100% - (var(--pad-x) * 2));
    height:34svh;
    min-height:280px;
    margin:0 var(--pad-x) 30px;
    border:3px solid var(--gm-grey);
    box-shadow:6px 7px 0 var(--gm-red);
    object-fit:cover;
    object-position:center 52%;
  }
}

/* -------------------------------------------------------------
   THREE IDENTICAL COUNTER RECEIPT ANIMATIONS.
   ------------------------------------------------------------- */
.receipt-trio-section{
  position:relative;
  overflow:hidden;
  padding:64px var(--pad-x) 78px;
  background:var(--gm-white);
  border-top:4px solid var(--gm-grey);
}

.receipt-trio-head{
  max-width:var(--max);
  margin:0 auto 38px;
}

.receipt-trio-head>span{
  display:block;
  margin-bottom:8px;
  color:var(--gm-red);
  font-size:.58rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
}

.receipt-trio-head h2{
  margin:0;
  color:var(--gm-grey);
  font-family:var(--f-display);
  font-size:clamp(2.6rem,5.4vw,5.2rem);
  line-height:.82;
  font-weight:400;
  text-transform:uppercase;
}

.receipt-trio-head h2 em{
  color:var(--gm-red);
  font-style:normal;
}

.receipt-trio-head p{
  max-width:48ch;
  margin:14px 0 0;
  color:#5a5650;
  font-size:.82rem;
  line-height:1.7;
}

.receipt-trio-grid{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,42px);
  align-items:start;
}

.receipt-trio-grid .receipt-wrap{
  min-width:0;
  padding:0 8px 34px;
  background:transparent;
}

.receipt-trio-grid .receipt-printer{
  width:min(100%,310px);
}

.receipt-trio-grid .receipt{
  width:min(100%,280px);
  min-height:292px;
  font-size:.73rem;
  line-height:1.74;
}

.receipt-trio-grid .receipt b{
  font-weight:900;
}

.receipt-kot-code{
  margin-top:3px;
  color:var(--gm-red);
  font-size:.52rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.09em;
}

.receipt-trio-grid .receipt:nth-child(1){
  transform:translateY(-72px) rotate(-1.6deg);
}

.receipt-station:nth-child(2) .receipt{
  transform:translateY(-72px) rotate(.9deg);
}
.receipt-station:nth-child(2) .receipt.in{
  animation-name:receiptPrintTwo;
}

.receipt-station:nth-child(3) .receipt{
  transform:translateY(-72px) rotate(-.4deg);
}
.receipt-station:nth-child(3) .receipt.in{
  animation-name:receiptPrintThree;
}

@keyframes receiptPrintTwo{
  0%{opacity:0;transform:translateY(-72px) rotate(.9deg)}
  45%{opacity:1;transform:translateY(-18px) rotate(.9deg)}
  100%{opacity:1;transform:translateY(0) rotate(.9deg)}
}
@keyframes receiptPrintThree{
  0%{opacity:0;transform:translateY(-72px) rotate(-.4deg)}
  45%{opacity:1;transform:translateY(-18px) rotate(-.4deg)}
  100%{opacity:1;transform:translateY(0) rotate(-.4deg)}
}

@media(max-width:860px){
  .receipt-trio-grid{
    grid-template-columns:1fr;
    max-width:360px;
    gap:28px;
  }

  .receipt-trio-grid .receipt-wrap{
    padding-bottom:12px;
  }
}

/* -------------------------------------------------------------
   JUKEBOX: four loose vinyl records only in negative space.
   Existing jukebox itself is untouched.
   ------------------------------------------------------------- */
.jukebox-section{
  isolation:isolate;
}

.juke-vinyl-field{
  position:absolute!important;
  z-index:0!important;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.jukebox-section .jukebox-copy,
.jukebox-section .gm-jukebox{
  position:relative;
  z-index:2;
}

.loose-vinyl{
  position:absolute;
  display:block;
  border:2px solid rgba(240,239,233,.22);
  border-radius:50%;
  background:
    repeating-radial-gradient(
      circle,
      #080808 0 2px,
      #202020 2px 4px,
      #0e0e0e 4px 7px
    );
  box-shadow:
    0 16px 24px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.06);
  opacity:.72;
}

.loose-vinyl::before{
  content:"";
  position:absolute;
  inset:35%;
  border-radius:50%;
  background:var(--gm-red);
  border:2px solid rgba(240,239,233,.42);
}

.loose-vinyl::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--gm-grey);
}

.loose-vinyl i{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--gm-white);
  font-family:var(--f-display);
  font-size:.5rem;
  font-style:normal;
  line-height:1;
}

.loose-vinyl--one{
  width:132px;
  height:132px;
  right:3.5%;
  top:7%;
  animation:looseVinylSpin 15s linear infinite;
}

.loose-vinyl--two{
  width:86px;
  height:86px;
  left:43%;
  top:12%;
  opacity:.54;
  animation:looseVinylSpinReverse 12s linear infinite;
}

.loose-vinyl--three{
  width:104px;
  height:104px;
  left:3.5%;
  bottom:6%;
  opacity:.46;
  animation:looseVinylSpin 20s linear infinite;
}

.loose-vinyl--four{
  width:70px;
  height:70px;
  right:32%;
  bottom:8%;
  opacity:.52;
  animation:looseVinylSpinReverse 10s linear infinite;
}

@keyframes looseVinylSpin{
  to{transform:rotate(360deg)}
}
@keyframes looseVinylSpinReverse{
  to{transform:rotate(-360deg)}
}

@media(max-width:900px){
  .loose-vinyl--one{width:88px;height:88px;right:4%;top:46%}
  .loose-vinyl--two{width:68px;height:68px;left:7%;top:51%}
  .loose-vinyl--three,
  .loose-vinyl--four{display:none}
}

@media(max-width:520px){
  .loose-vinyl{opacity:.28}
}

/* -------------------------------------------------------------
   WALK IN / STAY A WHILE: red neon elements in grey header only.
   ------------------------------------------------------------- */
.atmo-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}

.atmo-head-copy{
  min-width:0;
}

.atmo-neon-elements{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  min-height:72px;
  padding:8px 5px 4px 18px;
}

.atmo-neon{
  display:grid;
  place-items:center;
  color:transparent;
  -webkit-text-stroke:2px #ff2424;
  font-family:var(--f-display);
  filter:
    drop-shadow(0 0 3px rgba(235,0,0,.9))
    drop-shadow(0 0 9px rgba(235,0,0,.68))
    drop-shadow(0 0 18px rgba(235,0,0,.32));
  opacity:.94;
}

.atmo-neon--star{
  font-size:2.35rem;
  animation:atmoNeonBlink 6.8s steps(1,end) infinite;
}

.atmo-neon--bolt{
  font-size:3.2rem;
  transform:rotate(4deg);
  animation:atmoNeonFlicker 8.2s steps(1,end) 1.2s infinite;
}

.atmo-neon--sixty3{
  min-width:60px;
  padding:6px 8px 5px;
  border:2px solid #ff2424;
  border-radius:50%;
  color:#ff3838;
  -webkit-text-stroke:0;
  font-size:1.4rem;
  line-height:1;
  box-shadow:
    0 0 4px rgba(235,0,0,.9),
    inset 0 0 5px rgba(235,0,0,.5),
    0 0 14px rgba(235,0,0,.42);
  animation:atmoNeonBlink 9.1s steps(1,end) 2.4s infinite;
}

@keyframes atmoNeonBlink{
  0%,79%,83%,87%,100%{opacity:.96}
  80%,85%{opacity:.18;filter:none}
  81%,86%{opacity:.7}
}

@keyframes atmoNeonFlicker{
  0%,69%,73%,76%,80%,100%{opacity:.94}
  70%,74%,78%{opacity:.12;filter:none}
  71%,75%,79%{opacity:.66}
}

@media(max-width:760px){
  .atmo-head{
    align-items:flex-start;
  }
  .atmo-neon-elements{
    gap:10px;
    padding-left:0;
  }
  .atmo-neon--star{font-size:1.55rem}
  .atmo-neon--bolt{font-size:2.1rem}
  .atmo-neon--sixty3{min-width:44px;font-size:1rem}
}

@media(max-width:520px){
  .atmo-neon-elements{
    display:none;
  }
}

/* -------------------------------------------------------------
   RED TYPOGRAPHY PANEL: animated racing checker stripe.
   Restricted entirely to the red atmo-tags area.
   ------------------------------------------------------------- */
.atmo-tags{
  position:relative;
  overflow:hidden;
  padding-bottom:64px;
}

.atmo-race-strip{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:26px;
  overflow:hidden;
  border-top:3px solid var(--gm-grey);
  border-bottom:3px solid var(--gm-grey);
  background:var(--gm-white);
}

.atmo-race-strip::before{
  content:"";
  position:absolute;
  inset:0 -48px 0 0;
  background:
    conic-gradient(
      from 90deg,
      var(--gm-grey) 0 25%,
      var(--gm-white) 0 50%,
      var(--gm-grey) 0 75%,
      var(--gm-white) 0
    ) 0 0 / 26px 26px;
  animation:atmoCheckerRace 5.4s linear infinite;
}

.atmo-race-strip::after{
  content:"DINER 69";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  padding:3px 6px 2px;
  background:var(--gm-red);
  color:var(--gm-white);
  border:1px solid var(--gm-grey);
  font-size:.42rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.1em;
}

@keyframes atmoCheckerRace{
  to{transform:translateX(52px)}
}

/* -------------------------------------------------------------
   Reduced motion.
   ------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .loose-vinyl,
  .atmo-neon,
  .atmo-race-strip::before{
    animation:none!important;
  }

  .atmo-neon{
    opacity:.88;
  }
}


/* =============================================================
   SOCIAL / FRANCHISE / WALK-IN UPDATE
   ============================================================= */

/* Walk In. Stay A While. hero image swap */
.atmo-photo.big img{
  object-fit:cover;
  object-position:center center;
}

/* Grub IRL handle board */
.social-head{
  align-items:flex-start;
}

.irl-handle-board{
  position:relative;
  max-width:min(100%, 560px);
  margin-left:auto;
  padding:16px 18px 18px;
  background:linear-gradient(180deg, #fffaf0 0%, #f4ecdd 100%);
  border:3px solid var(--gm-teal);
  box-shadow:10px 10px 0 rgba(0,0,0,.22), inset 0 0 0 2px rgba(58,58,58,.08);
  transform:rotate(-1deg);
}

.irl-handle-board::before,
.irl-handle-board::after{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  width:10px;
  border-top:2px solid rgba(58,58,58,.18);
  border-bottom:2px solid rgba(58,58,58,.18);
  background:repeating-linear-gradient(180deg, rgba(58,58,58,.08) 0 8px, transparent 8px 16px);
}

.irl-handle-board::before{left:-8px;}
.irl-handle-board::after{right:-8px;}

.irl-handle-board__title{
  display:inline-block;
  margin-bottom:12px;
  padding:6px 10px 5px;
  background:var(--gm-red);
  color:var(--gm-white);
  border:2px solid var(--gm-grey);
  font-size:.62rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
}

.irl-handle-board__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.irl-handle-board__grid a{
  position:relative;
  display:block;
  padding:10px 12px;
  color:var(--gm-grey);
  background:rgba(255,255,255,.72);
  border:2px solid rgba(58,58,58,.16);
  font-size:.74rem;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.03em;
  text-decoration:none;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
}

.irl-handle-board__grid a::after{
  content:"↗";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-weight:900;
  color:var(--gm-red);
}

.irl-handle-board__grid a:hover,
.irl-handle-board__grid a:focus-visible{
  transform:translateY(-2px);
  background:#fff;
  border-color:var(--gm-red);
  outline:none;
}

@media(max-width:920px){
  .irl-handle-board{
    margin-left:0;
    width:100%;
    transform:none;
  }
}

@media(max-width:640px){
  .irl-handle-board__grid{
    grid-template-columns:1fr;
  }
}


/* =============================================================
   LIVE CSS TEAM BOARD
   Interactive recreation of the supplied team poster.
   ============================================================= */
.team-live-wrap{min-width:0;align-self:start}
.team-live-board{position:relative;overflow:hidden;min-height:100%;padding:clamp(22px,3vw,38px);color:var(--gm-grey);background:radial-gradient(circle at 20% 18%,rgba(58,58,58,.035) 0 1px,transparent 1.5px) 0 0/17px 17px,linear-gradient(180deg,#fffdf6 0%,#f1eadc 100%);border:6px solid #f5eee0;outline:4px solid var(--gm-red);outline-offset:-13px;box-shadow:0 0 0 4px #171717,10px 12px 0 rgba(58,58,58,.16);isolation:isolate}
.team-live-board::before{content:"";position:absolute;inset:18px;border:2px solid rgba(235,0,0,.14);pointer-events:none}
.team-live-board::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(174deg,transparent 0 48%,var(--gm-teal) 49% 60%,transparent 61%),linear-gradient(176deg,transparent 0 64%,var(--gm-red) 65% 100%);pointer-events:none}
.team-live-brand{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:8px 14px 14px}
.team-live-brand img{width:clamp(62px,7vw,92px);height:clamp(62px,7vw,92px);object-fit:contain;filter:drop-shadow(0 2px 0 rgba(58,58,58,.16))}
.team-live-brand__name{font-family:var(--f-display,"Arial Black",sans-serif);font-size:clamp(2rem,4.6vw,4.6rem);line-height:.8;font-weight:400;letter-spacing:.025em}
.team-live-brand__tag{margin-top:10px;color:#117f82;font-size:clamp(.52rem,.95vw,.78rem);line-height:1;font-weight:900;letter-spacing:.09em}
.team-live-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0 18px}
.team-live-rule span{flex:1 1 80px;height:2px;background:var(--gm-red)}
.team-live-rule i{color:var(--gm-red);font-style:normal;font-size:1rem}
.team-live-rule strong{font-family:var(--f-display,"Arial Black",sans-serif);font-size:clamp(1.3rem,2.5vw,2.25rem);line-height:1;font-weight:400;white-space:nowrap}
.team-live-people{position:relative;display:grid;grid-template-columns:1.22fr 1fr 1fr;gap:0;margin:10px 0 22px}
.team-person{position:relative;min-width:0;min-height:230px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:26px 18px 28px;color:var(--gm-grey);text-decoration:none;border-left:1px solid rgba(235,0,0,.65);transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1)}
.team-person:first-child{border-left:0}
.team-person--founder{align-items:flex-start;padding-left:8px;padding-right:28px}
.team-person__eyebrow{position:absolute;top:8px;left:8px;color:var(--gm-red);font-size:.58rem;line-height:1;font-weight:900;letter-spacing:.11em}
.team-person__star{display:block;margin-bottom:14px;color:var(--gm-red);font-size:1.15rem;line-height:1;transform-origin:50% 50%;transition:transform .25s cubic-bezier(.2,.9,.25,1.3)}
.team-person__name{position:relative;display:block;color:var(--gm-grey);font-family:var(--f-display,"Arial Black",sans-serif);font-size:clamp(1.22rem,2.55vw,2.3rem);line-height:.91;font-weight:400;text-align:center;letter-spacing:.015em;text-transform:uppercase;transition:transform .22s cubic-bezier(.22,1,.36,1),text-shadow .18s ease,color .18s ease}
.team-person--founder .team-person__name{color:var(--gm-red);font-size:clamp(2.55rem,5.5vw,5.2rem);line-height:.82;text-align:left}
.team-person__underline{display:block;width:56%;height:3px;margin-top:15px;background:var(--gm-teal);transform:scaleX(.58);transform-origin:left center;transition:transform .26s cubic-bezier(.22,1,.36,1)}
.team-person:not(.team-person--founder) .team-person__underline{transform-origin:center}
.team-person__linkedin{margin-top:9px;color:var(--gm-red);font-size:.48rem;line-height:1;font-weight:900;letter-spacing:.12em;opacity:0;transform:translateY(5px);transition:opacity .18s ease,transform .18s ease}
.team-person:hover,.team-person:focus-visible{transform:translateY(-3px);outline:2px solid transparent;outline-offset:4px}
.team-person:hover .team-person__name,.team-person:focus-visible .team-person__name{transform:translateY(-2px);text-shadow:2px 0 0 rgba(0,221,194,.52),-2px 0 0 rgba(235,0,0,.28);animation:teamRegistrationSnap .26s ease-out both}
.team-person:hover .team-person__star,.team-person:focus-visible .team-person__star{transform:rotate(14deg) scale(1.12)}
.team-person:hover .team-person__underline,.team-person:focus-visible .team-person__underline{transform:scaleX(1)}
.team-person:hover .team-person__linkedin,.team-person:focus-visible .team-person__linkedin{opacity:1;transform:translateY(0)}
.team-live-people:has(.team-person:hover) .team-person:not(:hover),.team-live-people:has(.team-person:focus-visible) .team-person:not(:focus-visible){opacity:.68}
@keyframes teamRegistrationSnap{0%{text-shadow:0 0 0 rgba(0,221,194,0),0 0 0 rgba(235,0,0,0)}46%{text-shadow:3px 0 0 rgba(0,221,194,.62),-3px 0 0 rgba(235,0,0,.36)}100%{text-shadow:2px 0 0 rgba(0,221,194,.52),-2px 0 0 rgba(235,0,0,.28)}}
.team-live-divider{display:flex;align-items:center;gap:12px;max-width:78%;margin:4px auto 20px}
.team-live-divider span{flex:1;height:2px;background:var(--gm-grey)}
.team-live-divider b{color:var(--gm-red);font-size:.78rem;letter-spacing:.22em}
.team-live-copy{position:relative;z-index:2;max-width:54ch;margin:0 auto;padding:0 18px 32px;color:var(--gm-grey);font-size:clamp(.72rem,1.15vw,.9rem);line-height:1.65;text-align:center}
.team-live-stars{position:absolute;left:24px;right:24px;bottom:42px;display:flex;justify-content:space-between;color:var(--gm-teal);font-size:2.2rem;opacity:.92;pointer-events:none}
.team-live-stars i{font-style:normal}
.team-archive-caption{margin-top:14px;padding:9px 12px 8px;border-left:4px solid var(--gm-red);color:var(--gm-grey);background:rgba(240,239,233,.62);font-size:.49rem;line-height:1;font-weight:900;letter-spacing:.13em}
@media(max-width:920px){.team-live-people{grid-template-columns:1fr}.team-person{min-height:auto;padding:24px 12px;border-left:0;border-top:1px solid rgba(235,0,0,.42)}.team-person:first-child{border-top:0}.team-person--founder{align-items:center;padding-left:12px;padding-right:12px}.team-person__eyebrow{position:static;margin-bottom:10px}.team-person--founder .team-person__name{text-align:center;font-size:clamp(2.8rem,12vw,4.9rem)}.team-person__linkedin{opacity:.72;transform:none}.team-person__underline{transform:scaleX(.9);transform-origin:center}.team-live-divider{max-width:92%}}
@media(max-width:560px){.team-live-board{padding:20px 16px 28px}.team-live-brand{grid-template-columns:54px 1fr;gap:12px;padding-inline:8px}.team-live-brand img{width:54px;height:54px}.team-live-brand__name{font-size:2rem}.team-live-brand__tag{font-size:.43rem}.team-live-rule{gap:7px}.team-live-rule strong{font-size:1.35rem}.team-live-rule i{font-size:.76rem}.team-live-copy{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.team-person,.team-person__name,.team-person__star,.team-person__underline,.team-person__linkedin{animation:none!important;transition:none!important}}


/* =============================================================
   TEAM BOARD — FOUNDER SCALE + WIDER FRAME
   Requested refinement:
   - Mueen Ahmed slightly larger
   - more breathing room between MUEEN / AHMED
   - wider team board on desktop and supported mobile widths
   ============================================================= */

@media(min-width:1101px){
  .story-v5 .story-grid:has(.team-live-board){
    grid-template-columns:1fr 1fr;
    gap:clamp(24px,2.6vw,40px);
  }

  .team-live-wrap{
    width:100%;
  }

  .team-person--founder .team-person__name{
    font-size:clamp(2.9rem,5.9vw,5.75rem);
    line-height:.92;
    letter-spacing:.018em;
  }
}

@media(min-width:861px) and (max-width:1100px){
  .story-v5 .story-grid:has(.team-live-board){
    grid-template-columns:1fr 1fr;
    gap:clamp(20px,3vw,32px);
  }

  .team-person--founder .team-person__name{
    font-size:clamp(2.8rem,6.5vw,5.25rem);
    line-height:.93;
  }
}

@media(max-width:860px){
  .team-live-wrap{
    width:calc(100% + 12px);
    margin-left:-6px;
  }

  .team-person--founder .team-person__name{
    font-size:clamp(3.15rem,13.2vw,5.35rem);
    line-height:.93;
    letter-spacing:.018em;
  }
}

@media(max-width:560px){
  .team-live-wrap{
    width:calc(100% + 8px);
    margin-left:-4px;
  }

  .team-person--founder .team-person__name{
    font-size:clamp(3rem,13.5vw,4.7rem);
    line-height:.94;
  }
}

/* QA: stronger keyboard focus on LinkedIn team names */
.team-person:focus-visible{
  outline:3px solid var(--gm-teal)!important;
  outline-offset:6px;
  box-shadow:0 0 0 2px var(--gm-grey);
}


/* =============================================================
   AUG 22 UPDATE — queued homepage refinements
   - hero image replacement
   - diner neon sign upgrade
   - purposeful matchbook stat
   - mustard bottle color
   - stool nudge
   - founder eyebrow scale
   - jukebox vinyl storage interaction
   - low-voltage teal indicator bulb
   ============================================================= */

/* Hero Korean Kong replacement: preserve existing layout, improve crop for the new portrait image,
   and keep it stable in both default and KOT-printed states. */
.hero-photo-panel--korean-kong{
  background:#6a1f14;
}
.hero-photo-panel--korean-kong .hero-photo-image--korean-kong{
  object-fit:cover;
  object-position:center 58%;
}
@media(max-width:900px){
  .hero-photo-panel--korean-kong .hero-photo-image--korean-kong{object-position:center 56%;}
}
@media(max-width:560px){
  .hero-photo-panel--korean-kong .hero-photo-image--korean-kong{object-position:center 54%;}
}

/* Counter mustard bottle update */
.mustard{
  background:#d9af33;
  color:var(--gm-grey);
}
.gm-condiment.mustard{
  background:#d9af33;
  color:var(--gm-id-grey);
}

/* Stool moved a little further into frame */
.edge-diner-stool{
  right:-16px;
}
@media(max-width:760px){
  .edge-diner-stool{
    right:-34px;
  }
}

/* Founded by emphasis */
.team-person__eyebrow{
  font-size:clamp(.72rem,1vw,.9rem);
  letter-spacing:.16em;
}
@media(max-width:920px){
  .team-person__eyebrow{margin-bottom:12px;}
}

/* Replace the cheap neon glyphs with the supplied American Diner sign */
.atmo-neon-elements{
  align-self:flex-start;
  margin-left:auto;
}
.atmo-neon-sign{
  display:block;
  width:clamp(240px,28vw,440px);
  max-width:100%;
}
.atmo-neon-sign img{
  display:block;
  width:100%;
  height:auto;
  filter:brightness(.96) drop-shadow(0 0 8px rgba(255,71,71,.26)) drop-shadow(0 0 18px rgba(255,71,71,.18));
  animation:americanDinerNeonTube 5.6s ease-in-out infinite;
}
@keyframes americanDinerNeonTube{
  0%,18%,28%,54%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(255,71,71,.28)) drop-shadow(0 0 20px rgba(255,71,71,.18));opacity:1}
  20%{filter:brightness(.9) drop-shadow(0 0 6px rgba(255,71,71,.2)) drop-shadow(0 0 14px rgba(255,71,71,.12));opacity:.96}
  22%{filter:brightness(.98) drop-shadow(0 0 9px rgba(255,71,71,.3)) drop-shadow(0 0 24px rgba(255,71,71,.2));opacity:1}
  24%{filter:brightness(.88) drop-shadow(0 0 5px rgba(255,71,71,.16)) drop-shadow(0 0 10px rgba(255,71,71,.08));opacity:.94}
  58%{filter:brightness(.92) drop-shadow(0 0 7px rgba(255,71,71,.24)) drop-shadow(0 0 16px rgba(255,71,71,.12));opacity:.97}
  62%{filter:brightness(1.04) drop-shadow(0 0 10px rgba(255,71,71,.34)) drop-shadow(0 0 28px rgba(255,71,71,.22));opacity:1}
}
@media(max-width:760px){
  .atmo-neon-sign{width:min(82vw,360px)}
}

/* Give the red story-side matchbook a real purpose */
.matchbook-deco--stat{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.matchbook-deco--stat .matchbook-inside{
  left:10px;
  right:10px;
  top:40px;
  bottom:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  color:var(--gm-white);
}
.matchbook-kicker{
  font-size:.5rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.24em;
}
.matchbook-stat{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2vw,1.85rem);
  line-height:.92;
  font-weight:400;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 2px 0 rgba(58,58,58,.16);
}
.matchbook-sub{
  font-size:.56rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
}
.matchbook-deco--stat .matchbook-brand{
  bottom:8px;
  font-size:.52rem;
  letter-spacing:.2em;
}
.matchbook-deco--stat .matchbook-lid{
  background:linear-gradient(180deg,#fff7ee 0%,#f6efe5 100%);
}
.matchbook-deco--stat:hover .matchbook-stat,
.matchbook-deco--stat:focus-within .matchbook-stat{
  transform:translateY(-1px);
}

/* Low-voltage teal indicator bulb — contained fully inside the red panel */
.atmo-tags{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-right:clamp(46px,6vw,82px);
}
.atmo-panel-indicator{
  position:absolute;
  right:24px;
  top:24px;
  width:12px;
  height:12px;
  border-radius:999px;
  background:#00DDC2;
  box-shadow:
    0 0 0 2px rgba(34,34,34,.44),
    0 0 5px rgba(0,221,194,.28),
    0 0 10px rgba(0,221,194,.12);
  filter:brightness(1);
  opacity:1;
  z-index:2;
  will-change:opacity,filter,box-shadow;
  animation:atmoLowVoltageBulb 4.35s linear infinite;
}
.atmo-panel-indicator::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  background:transparent;
  box-shadow:0 0 4px rgba(0,221,194,.18);
}
.atmo-panel-indicator::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  opacity:.94;
  filter:brightness(1.08);
  box-shadow:0 0 4px rgba(255,255,255,.22);
  animation:atmoLowVoltageBulbCore 4.35s linear infinite;
}
@keyframes atmoLowVoltageBulb{
  0%,18%,32%,57%,77%,100%{
    opacity:1;
    filter:brightness(1);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 5px rgba(0,221,194,.28),0 0 10px rgba(0,221,194,.12);
  }
  21%{
    opacity:.84;
    filter:brightness(.78);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 3px rgba(0,221,194,.14),0 0 6px rgba(0,221,194,.08);
  }
  48%{
    opacity:.9;
    filter:brightness(.84);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 4px rgba(0,221,194,.18),0 0 8px rgba(0,221,194,.09);
  }
  50%{
    opacity:.74;
    filter:brightness(.66);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 2px rgba(0,221,194,.1),0 0 4px rgba(0,221,194,.05);
  }
  52%{
    opacity:.88;
    filter:brightness(.82);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 4px rgba(0,221,194,.16),0 0 7px rgba(0,221,194,.08);
  }
  68%{
    opacity:.8;
    filter:brightness(.72);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 2px rgba(0,221,194,.1),0 0 4px rgba(0,221,194,.05);
  }
  71%{
    opacity:.96;
    filter:brightness(.9);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 4px rgba(0,221,194,.18),0 0 8px rgba(0,221,194,.09);
  }
}
@keyframes atmoLowVoltageBulbCore{
  0%,18%,32%,57%,77%,100%{opacity:.96;filter:brightness(1.08);box-shadow:0 0 4px rgba(255,255,255,.22)}
  21%{opacity:.4;filter:brightness(.76);box-shadow:0 0 1px rgba(255,255,255,.08)}
  48%{opacity:.68;filter:brightness(.88);box-shadow:0 0 2px rgba(255,255,255,.12)}
  50%{opacity:.28;filter:brightness(.68);box-shadow:0 0 1px rgba(255,255,255,.06)}
  52%{opacity:.52;filter:brightness(.82);box-shadow:0 0 2px rgba(255,255,255,.1)}
  68%{opacity:.34;filter:brightness(.7);box-shadow:0 0 1px rgba(255,255,255,.06)}
  71%{opacity:.84;filter:brightness(.96);box-shadow:0 0 3px rgba(255,255,255,.16)}
}

/* Replace loose floating records with a storage rack that opens around the jukebox */
.juke-vinyl-field{
  position:absolute!important;
  z-index:1!important;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.vinyl-rack{
  position:absolute;
  left:52%;
  top:56%;
  width:124px;
  height:152px;
  padding:18px 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border:3px solid rgba(240,239,233,.7);
  border-radius:22px 22px 18px 18px;
  background:linear-gradient(180deg,rgba(82,17,17,.95),rgba(48,9,9,.96));
  box-shadow:0 12px 24px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.06);
  transform:translate(-50%,-50%) rotate(-3deg);
  color:var(--gm-white);
  cursor:pointer;
  pointer-events:auto;
  overflow:hidden;
  transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease;
}
.vinyl-rack:hover,
.vinyl-rack:focus-visible{
  transform:translate(-50%,-52%) rotate(-1deg);
  box-shadow:0 16px 28px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.08);
  outline:none;
}
.vinyl-rack__hinge{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(180deg,#ece4d4,#978a74);
}
.vinyl-rack__title,
.vinyl-rack__subtitle{
  position:relative;
  z-index:2;
  display:block;
  text-align:center;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.vinyl-rack__title{font-size:.52rem;line-height:1.05;margin-top:12px;max-width:100%;white-space:nowrap}
.vinyl-rack__subtitle{font-size:.42rem;line-height:1.1;color:#55F4DF;margin-top:6px;white-space:nowrap}
.vinyl-rack__sleeves{
  position:absolute;
  left:15px;
  right:15px;
  bottom:10px;
  height:66px;
}
.vinyl-rack__sleeve{
  position:absolute;
  bottom:0;
  width:48px;
  height:56px;
  border:2px solid rgba(240,239,233,.72);
  border-radius:6px 6px 4px 4px;
  background:linear-gradient(180deg,#f4efe3,#ded4c3);
  box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.vinyl-rack__sleeve::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#b71414 0 36%,#111 37% 100%);
}
.vinyl-rack__sleeve--one{left:0;transform:rotate(-9deg)}
.vinyl-rack__sleeve--two{left:26px;z-index:1;transform:translateY(-4px)}
.vinyl-rack__sleeve--three{right:0;transform:rotate(9deg)}
.vinyl-rack-records{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.vinyl-card{
  position:absolute;
  display:grid;
  place-items:center;
  gap:4px;
  width:108px;
  height:108px;
  border-radius:50%;
  border:2px solid rgba(240,239,233,.28);
  background:
    radial-gradient(circle at center,#bd1d1d 0 18%,#101010 19% 42%,#1e1e1e 43% 52%,#0e0e0e 53% 100%);
  box-shadow:0 12px 22px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.05);
  color:var(--gm-white);
  text-align:center;
  opacity:0;
  transform:translate(0,0) scale(.4) rotate(0deg);
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .34s ease;
}
.vinyl-card::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#f1eadc;
}
.vinyl-card b,
.vinyl-card small{
  position:relative;
  z-index:1;
  display:block;
  line-height:1.05;
}
.vinyl-card b{font-size:.54rem;letter-spacing:.12em;font-weight:900}
.vinyl-card small{font-size:.38rem;letter-spacing:.14em;opacity:.82}
.juke-vinyl-field.is-open .vinyl-card{opacity:.95}
.juke-vinyl-field.is-open .vinyl-rack{transform:translate(-50%,-50%) rotate(0deg) scale(1.04)}
.juke-vinyl-field.is-open .vinyl-card--one{transform:translate(-72px,-196px) rotate(-16deg)}
.juke-vinyl-field.is-open .vinyl-card--two{transform:translate(66px,-214px) rotate(10deg)}
.juke-vinyl-field.is-open .vinyl-card--three{transform:translate(194px,-120px) rotate(18deg)}
.juke-vinyl-field.is-open .vinyl-card--four{transform:translate(200px,6px) rotate(12deg)}
.juke-vinyl-field.is-open .vinyl-card--five{transform:translate(-92px,-48px) rotate(-12deg)}
.vinyl-card--one,.vinyl-card--two,.vinyl-card--three,.vinyl-card--four,.vinyl-card--five{
  left:calc(52% - 54px);
  top:calc(56% - 54px);
}
@media(max-width:1100px){
  .vinyl-rack{left:58%;top:57%}
  .vinyl-card--one,.vinyl-card--two,.vinyl-card--three,.vinyl-card--four,.vinyl-card--five{left:calc(58% - 54px);top:calc(57% - 54px)}
  .juke-vinyl-field.is-open .vinyl-card--one{transform:translate(-86px,-182px) rotate(-16deg)}
  .juke-vinyl-field.is-open .vinyl-card--two{transform:translate(52px,-196px) rotate(10deg)}
  .juke-vinyl-field.is-open .vinyl-card--three{transform:translate(164px,-118px) rotate(16deg)}
  .juke-vinyl-field.is-open .vinyl-card--four{transform:translate(170px,-6px) rotate(10deg)}
  .juke-vinyl-field.is-open .vinyl-card--five{transform:translate(-104px,-30px) rotate(-12deg)}
}
@media(max-width:820px){
  .vinyl-rack{left:50%;top:71%;width:110px;height:140px}
  .vinyl-card{width:92px;height:92px}
  .vinyl-card--one,.vinyl-card--two,.vinyl-card--three,.vinyl-card--four,.vinyl-card--five{left:calc(50% - 46px);top:calc(71% - 46px)}
  .juke-vinyl-field.is-open .vinyl-card--one{transform:translate(-120px,-134px) rotate(-18deg)}
  .juke-vinyl-field.is-open .vinyl-card--two{transform:translate(8px,-156px) rotate(10deg)}
  .juke-vinyl-field.is-open .vinyl-card--three{transform:translate(118px,-96px) rotate(18deg)}
  .juke-vinyl-field.is-open .vinyl-card--four{transform:translate(124px,-2px) rotate(8deg)}
  .juke-vinyl-field.is-open .vinyl-card--five{transform:translate(-92px,-18px) rotate(-12deg)}
}
@media(max-width:560px){
  .vinyl-rack{top:74%}
  .vinyl-card--one,.vinyl-card--two,.vinyl-card--three,.vinyl-card--four,.vinyl-card--five{top:calc(74% - 46px)}
}

@media(prefers-reduced-motion:reduce){
  .atmo-neon-sign img,
  .atmo-panel-indicator,
  .atmo-panel-indicator::after,
  .vinyl-rack,
  .vinyl-card,
  .matchbook-stat{
    animation:none!important;
    transition:none!important;
  }
  .atmo-neon-sign img{
    filter:brightness(1) drop-shadow(0 0 8px rgba(255,71,71,.28)) drop-shadow(0 0 20px rgba(255,71,71,.18));
  }
  .atmo-panel-indicator{
    opacity:1;
    filter:brightness(.94);
    box-shadow:0 0 0 2px rgba(34,34,34,.44),0 0 4px rgba(0,221,194,.18),0 0 8px rgba(0,221,194,.09);
  }
  .atmo-panel-indicator::after{
    opacity:.78;
    filter:brightness(.95);
    box-shadow:0 0 2px rgba(255,255,255,.12);
  }
}


/* =============================================================
   STORY MILESTONE — LEGIBILITY REFINEMENT
   Keeps the existing story layout but gives the 10 LAKH+ counter
   enough physical room and clearer hierarchy.
   ============================================================= */

.matchbook-deco--stat{
  width:190px;
  height:124px;
  flex:0 0 190px;
  transform:rotate(-4deg);
}

.matchbook-deco--stat .matchbook-lid{
  height:34px;
}

.matchbook-deco--stat .matchbook-inside{
  left:14px;
  right:14px;
  top:43px;
  bottom:24px;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  justify-items:center;
  gap:5px;
  overflow:hidden;
}

.matchbook-kicker{
  font-size:.54rem;
  line-height:1;
  letter-spacing:.22em;
  white-space:nowrap;
}

.matchbook-stat{
  display:block;
  font-size:2rem;
  line-height:.88;
  letter-spacing:.01em;
  white-space:nowrap;
}

.matchbook-sub{
  font-size:.56rem;
  line-height:1;
  letter-spacing:.16em;
  white-space:nowrap;
}

.matchbook-deco--stat .matchbook-brand{
  left:14px;
  right:14px;
  bottom:8px;
  font-size:.44rem;
  line-height:1;
  letter-spacing:.17em;
  white-space:nowrap;
}

@media(max-width:920px){
  .matchbook-deco--stat{
    width:176px;
    height:116px;
    flex-basis:176px;
  }

  .matchbook-stat{
    font-size:1.82rem;
  }
}

@media(max-width:560px){
  .matchbook-deco--stat{
    width:164px;
    height:110px;
    flex-basis:164px;
  }

  .matchbook-deco--stat .matchbook-inside{
    top:40px;
    bottom:22px;
  }

  .matchbook-stat{
    font-size:1.68rem;
  }

  .matchbook-kicker{
    font-size:.48rem;
  }

  .matchbook-sub{
    font-size:.5rem;
  }
}


/* =============================================================
   GM CHROME DINER PANEL — WALK IN / STAY A WHILE
   Scoped redesign of the existing right red column only.
   Parent grid, image column, section dimensions and breakpoints untouched.
   ============================================================= */
.atmo-tags > .gm-chrome-panel{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  box-sizing:border-box;
  flex:1 1 auto;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-content:stretch;
  padding:clamp(24px,2.7vw,38px) clamp(22px,2.6vw,36px) clamp(68px,6vw,84px);
  border:3px solid #d6d6d2;
  border-radius:clamp(18px,2.2vw,30px);
  color:var(--gm-white);
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.05) 0 1px,transparent 1.4px) 0 0/19px 19px,
    radial-gradient(circle at 76% 74%,rgba(58,58,58,.07) 0 1px,transparent 1.5px) 0 0/23px 23px,
    linear-gradient(180deg,#d60707 0%,#c90000 48%,#b90000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.92),
    inset 0 0 0 5px #72726f,
    inset 0 0 0 7px rgba(245,245,239,.72),
    inset 0 -22px 34px rgba(58,58,58,.12);
}

.atmo-tags > .gm-chrome-panel::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:4;
  border:1px solid rgba(240,239,233,.82);
  border-radius:clamp(12px,1.7vw,22px);
  box-shadow:
    inset 0 0 0 1px rgba(58,58,58,.34),
    0 0 0 1px rgba(255,255,255,.16);
  pointer-events:none;
}

/* Narrow masked highlight: reflection travels only through the frame. */
.atmo-tags > .gm-chrome-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  padding:7px;
  border-radius:inherit;
  background:linear-gradient(108deg,transparent 22%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.56) 49%,rgba(255,255,255,.05) 60%,transparent 76%);
  background-size:240% 100%;
  background-position:160% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  animation:gmChromeFrameSweep 7.8s ease-in-out infinite;
}

.gm-chrome-panel__eyebrow,
.gm-chrome-panel__headline,
.gm-chrome-panel__footer{
  position:relative;
  z-index:2;
}

.gm-chrome-panel__eyebrow{
  display:grid;
  grid-template-columns:minmax(18px,1fr) auto minmax(18px,1fr);
  align-items:center;
  gap:10px;
  margin:0 2px clamp(20px,2.7vw,30px);
  color:var(--gm-teal);
  font-family:var(--f-content);
  font-size:clamp(.48rem,.72vw,.62rem);
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-align:center;
  white-space:nowrap;
}
.gm-chrome-panel__eyebrow span{
  height:1px;
  background:rgba(0,221,194,.72);
}

.gm-chrome-panel__headline{
  align-self:center;
  min-width:0;
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2rem,3vw,3.1rem);
  line-height:.86;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.gm-chrome-panel__line{
  display:block;
  width:max-content;
  max-width:100%;
  text-shadow:0 2px 0 rgba(58,58,58,.14);
}
.gm-chrome-panel__line + .gm-chrome-panel__line{margin-top:.08em}
.gm-chrome-panel__line--cream{color:var(--gm-white)}
.gm-chrome-panel__line--dark{
  color:#272727;
  text-shadow:0 1px 0 rgba(255,255,255,.13);
}
.gm-chrome-panel__line--wide{
  font-size:.88em;
  letter-spacing:-.026em;
}

.gm-chrome-panel__footer{
  align-self:end;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-top:clamp(20px,3vw,34px);
  padding-bottom:4px;
}
.gm-chrome-panel__footer p{
  margin:0;
  color:rgba(240,239,233,.9);
  font-family:var(--f-content);
  font-size:clamp(.56rem,.78vw,.68rem);
  line-height:1.5;
  font-weight:700;
  letter-spacing:.12em;
}

.gm-chrome-panel__indicator{
  position:relative;
  flex:0 0 auto;
  width:44px;
  height:18px;
  margin:0 4px 3px 0;
  border:3px solid #4f4f4d;
  border-radius:7px;
  background:#00DDC2;
  opacity:.96;
  filter:brightness(1);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.58),
    0 0 0 1px rgba(240,239,233,.78),
    0 0 5px rgba(0,221,194,.28);
  animation:gmDashboardIndicator 4.7s ease-in-out infinite;
}
.gm-chrome-panel__indicator::before{
  content:"";
  position:absolute;
  left:50%;
  top:3px;
  width:13px;
  height:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  opacity:.78;
}
.gm-chrome-panel__indicator::after{
  content:"";
  position:absolute;
  left:-22px;
  right:-22px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,#a3a39f 0 15px,transparent 15px calc(100% - 15px),#a3a39f calc(100% - 15px));
  opacity:.78;
  pointer-events:none;
}

.gm-chrome-panel__ribs{
  position:absolute;
  z-index:3;
  left:12px;
  right:12px;
  bottom:14px;
  display:grid;
  gap:6px;
  pointer-events:none;
}
.gm-chrome-panel__ribs span{
  display:block;
  height:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#fafaf5 0%,#858582 42%,#3f3f3e 54%,#c9c9c5 76%,#f5f5f0 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.34);
}

@keyframes gmChromeFrameSweep{
  0%,24%{background-position:160% 0;opacity:.3}
  38%{opacity:.48}
  52%{background-position:-60% 0;opacity:.36}
  100%{background-position:-60% 0;opacity:.26}
}
@keyframes gmDashboardIndicator{
  0%,20%,50%,76%,100%{
    opacity:.96;
    filter:brightness(1);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.58),0 0 0 1px rgba(240,239,233,.78),0 0 5px rgba(0,221,194,.28);
  }
  34%{
    opacity:.82;
    filter:brightness(.82);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.38),0 0 0 1px rgba(240,239,233,.72),0 0 3px rgba(0,221,194,.16);
  }
  62%{
    opacity:1;
    filter:brightness(1.08);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.68),0 0 0 1px rgba(240,239,233,.8),0 0 7px rgba(0,221,194,.32);
  }
}

@media(max-width:860px){
  .atmo-tags > .gm-chrome-panel{
    padding:28px 24px 72px;
  }
  .gm-chrome-panel__headline{
    font-size:clamp(2.15rem,9vw,3.5rem);
  }
}

@media(max-width:520px){
  .atmo-tags > .gm-chrome-panel{
    padding:24px 20px 66px;
    border-radius:20px;
  }
  .gm-chrome-panel__eyebrow{
    grid-template-columns:1fr;
    gap:0;
    white-space:normal;
    line-height:1.35;
  }
  .gm-chrome-panel__eyebrow span{display:none}
  .gm-chrome-panel__headline{
    font-size:clamp(1.95rem,10vw,2.7rem);
  }
  .gm-chrome-panel__footer{
    gap:14px;
  }
  .gm-chrome-panel__indicator{
    width:38px;
    height:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .atmo-tags > .gm-chrome-panel::after,
  .gm-chrome-panel__indicator{
    animation:none!important;
  }
}


/* =============================================================
   MENU PAGE — PREMIUM UX PASS
   Approved: 1,2,3,4,5,6,7,8,11,12,14
   Explicitly NOT included: 9,10,13.
   Scoped to body[data-page="menu"].
   ============================================================= */

/* 1 + 8: clearer hierarchy; split board is a status display, not a second hero. */
body[data-page="menu"] .menu-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "num board"
    "title board";
  align-items:end;
  column-gap:clamp(24px,4vw,54px);
  row-gap:8px;
  padding-top:4px;
}

body[data-page="menu"] .menu-head > .sec-num{
  grid-area:num;
}

body[data-page="menu"] .menu-department-title{
  grid-area:title;
  max-width:10ch;
  margin:0;
  color:var(--gm-white);
  font-size:clamp(2.65rem,6vw,5.8rem);
  line-height:.86;
}

body[data-page="menu"] .menu-split-board{
  position:relative;
  right:auto;
  bottom:auto;
  grid-area:board;
  align-self:end;
  width:clamp(218px,24vw,270px);
  margin:0 0 2px;
  padding:7px;
  box-shadow:4px 5px 0 rgba(235,0,0,.26);
}

body[data-page="menu"] .menu-split-board__window{
  height:46px;
}

body[data-page="menu"] .menu-split-board__face{
  grid-template-columns:36px 1fr;
  gap:8px;
  padding:7px 9px;
}

body[data-page="menu"] .menu-split-board__face b{
  font-size:1.25rem;
}

body[data-page="menu"] .menu-split-board__face strong{
  font-size:.59rem;
}

/* 2 + 3: sticky A1–A8 selector with more diner-hardware character. */
body[data-page="menu"] .menu-tabs{
  position:sticky;
  top:72px;
  z-index:24;
  margin-top:28px;
  background:#222;
  border:1px solid rgba(240,239,233,.28);
  border-bottom:0;
  box-shadow:
    0 4px 0 rgba(0,0,0,.18),
    inset 0 -3px 0 rgba(240,239,233,.08);
}

body[data-page="menu"] .menu-tab{
  position:relative;
  min-height:54px;
  flex:1 1 145px;
  justify-content:center;
  padding:12px 15px 13px;
  color:rgba(255,255,255,.9);
  background:#242424;
  border-right:1px solid rgba(240,239,233,.25);
  border-bottom:3px solid #858583;
  font-size:.76rem;
  line-height:1.15;
  letter-spacing:.015em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.8);
}

body[data-page="menu"] .menu-tab:last-child{
  border-right:0;
}

body[data-page="menu"] .menu-tab::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  height:1px;
  opacity:.45;
  background:linear-gradient(90deg,#5e5e5c,#f4f3ed,#7b7b79);
}

body[data-page="menu"] .menu-tab .jcode{
  font-size:.9rem;
  flex:0 0 auto;
}

body[data-page="menu"] .menu-tab:hover{
  background:#30302f;
}

body[data-page="menu"] .menu-tab[aria-selected="true"]{
  background:var(--gm-red);
  border-bottom-color:#d7d6d0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(75,0,0,.32);
}

body[data-page="menu"] .menu-tab[aria-selected="true"]::after{
  opacity:.82;
}

body[data-page="menu"] .menu-tab:focus-visible{
  z-index:2;
  outline:3px solid var(--gm-teal);
  outline-offset:-3px;
}

/* 4 + 5: less price-sheet density; stronger scan rhythm. */
body[data-page="menu"] .menu-body{
  margin-top:34px;
}

body[data-page="menu"] .menu-panel.active{
  column-gap:clamp(42px,4.5vw,62px);
  row-gap:10px;
}

body[data-page="menu"] .menu-group{
  margin-bottom:26px;
}

body[data-page="menu"] .menu-group-title{
  margin-bottom:11px;
  padding-bottom:7px;
  font-size:1.22rem;
}

body[data-page="menu"] .menu-row{
  min-height:36px;
  padding:9px 0;
  gap:11px;
  font-size:.95rem;
  border-bottom-color:rgba(255,255,255,.12);
}

body[data-page="menu"] .menu-row .name{
  line-height:1.48;
}

body[data-page="menu"] .menu-row.multi{
  align-items:flex-start;
}

body[data-page="menu"] .menu-row.multi .name{
  font-size:.89rem;
  line-height:1.62;
}

body[data-page="menu"] .menu-row .leader{
  border-bottom:1px solid rgba(255,255,255,.14);
  transform:translateY(-5px);
}

body[data-page="menu"] .menu-row .price{
  flex:0 0 auto;
  min-width:58px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

body[data-page="menu"] .menu-note{
  margin-bottom:25px;
  padding:12px 14px;
  border-left:3px solid var(--gm-red);
  background:rgba(255,255,255,.045);
  line-height:1.65;
}

/* 6: Formica becomes background atmosphere rather than visual competition. */
body[data-page="menu"] .menu-section#menu::before{
  opacity:.18;
}

/* 7: same image size, better physical framing and category ID. */
@media(min-width:980px){
  body[data-page="menu"] .menu-preview-sticky{
    position:sticky;
    top:150px;
    aspect-ratio:auto;
    overflow:visible;
    border:0;
    background:transparent;
  }

  body[data-page="menu"] .menu-preview-media{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border:2px solid #d7d6cf;
    outline:3px solid #4a4a48;
    outline-offset:3px;
    background:#111;
    box-shadow:
      0 0 0 6px #8a8a87,
      0 0 0 7px #ecebe5,
      10px 11px 0 rgba(0,0,0,.22);
  }

  body[data-page="menu"] .menu-preview-media::before{
    content:"";
    position:absolute;
    z-index:4;
    inset:5px;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.28);
  }

  body[data-page="menu"] .menu-preview-media::after{
    content:"";
    position:absolute;
    z-index:5;
    left:0;
    right:0;
    top:0;
    height:2px;
    pointer-events:none;
    background:linear-gradient(90deg,#555,#faf9f3 36%,#8b8b88 64%,#f5f4ee);
    opacity:.78;
  }

  body[data-page="menu"] .menu-preview-media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  body[data-page="menu"] .menu-preview-plate{
    width:calc(100% - 26px);
    min-height:32px;
    margin:13px auto 0;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:10px;
    padding:7px 10px 6px;
    border:2px solid #585856;
    background:var(--gm-white);
    color:var(--gm-grey);
    box-shadow:4px 4px 0 var(--gm-red);
  }

  body[data-page="menu"] .menu-preview-plate span{
    color:var(--gm-red);
    font-family:var(--f-display);
    font-size:1.05rem;
    line-height:1;
  }

  body[data-page="menu"] .menu-preview-plate strong{
    min-width:0;
    overflow:hidden;
    font-size:.54rem;
    line-height:1.15;
    letter-spacing:.09em;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
}

/* 12: more editorial hero framing; dimensions and grid remain unchanged. */
@media(min-width:861px){
  body[data-page="menu"] .menu-page-hero>img{
    border:2px solid #f0efe9;
    outline:3px solid #5c5c59;
    outline-offset:3px;
    box-shadow:
      0 0 0 6px #9a9a96,
      0 0 0 7px #efeee8,
      10px 11px 0 rgba(58,58,58,.16);
  }
}

@media(max-width:860px){
  body[data-page="menu"] .menu-page-hero>img{
    border:2px solid #f0efe9;
    outline:2px solid #5c5c59;
    outline-offset:2px;
    box-shadow:
      0 0 0 4px #969692,
      7px 8px 0 rgba(58,58,58,.15);
  }
}

/* 11: selected-diner ordering context from the homepage pattern. */
body[data-page="menu"] .menu-order-band{
  display:grid;
  grid-template-columns:minmax(210px,.9fr) minmax(260px,1fr) auto;
  align-items:center;
  gap:clamp(24px,4vw,52px);
}

body[data-page="menu"] .menu-order-context{
  min-width:0;
  padding:14px 16px;
  border:1px solid rgba(240,239,233,.38);
  border-left:4px solid var(--gm-teal);
  background:rgba(25,25,25,.16);
}

body[data-page="menu"] .menu-order-context > span{
  display:block;
  margin-bottom:6px;
  color:var(--gm-teal);
  font-size:.52rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
}

body[data-page="menu"] .menu-order-context strong{
  display:block;
  color:var(--gm-white);
  font-size:.82rem;
  line-height:1.35;
  letter-spacing:.035em;
}

body[data-page="menu"] .menu-order-context small{
  display:block;
  margin-top:5px;
  color:rgba(240,239,233,.76);
  font-size:.58rem;
  line-height:1.35;
  font-weight:700;
}

body[data-page="menu"] .menu-order-context a{
  display:inline-block;
  margin-top:9px;
  color:var(--gm-white);
  border-bottom:1px solid var(--gm-teal);
  font-size:.52rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.08em;
  text-decoration:none;
}

body[data-page="menu"] .menu-order-actions{
  justify-content:flex-end;
}

body[data-page="menu"] .menu-order-actions [hidden]{
  display:none!important;
}

/* 14: dedicated mobile menu refinement. */
@media(max-width:860px){
  body[data-page="menu"] .menu-section{
    padding-top:68px;
  }

  body[data-page="menu"] .menu-head{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "num"
      "title"
      "board";
    gap:12px;
  }

  body[data-page="menu"] .menu-department-title{
    max-width:8.5ch;
    font-size:clamp(2.8rem,12vw,4.7rem);
  }

  body[data-page="menu"] .menu-split-board{
    width:min(100%,280px);
    justify-self:start;
    margin-top:2px;
  }

  body[data-page="menu"] .menu-tabs{
    top:68px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-top:22px;
    margin-left:calc(var(--pad-x) * -1);
    margin-right:calc(var(--pad-x) * -1);
    padding-left:var(--pad-x);
    padding-right:calc(var(--pad-x) + 28px);
    border-left:0;
    border-right:0;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0,
      #000 15px,
      #000 calc(100% - 28px),
      transparent 100%
    );
    mask-image:linear-gradient(
      90deg,
      transparent 0,
      #000 15px,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }

  body[data-page="menu"] .menu-tabs::-webkit-scrollbar{
    display:none;
  }

  body[data-page="menu"] .menu-tab{
    flex:0 0 auto;
    min-width:148px;
    min-height:58px;
    padding:13px 16px;
    font-size:.78rem;
  }

  body[data-page="menu"] .menu-body{
    margin-top:24px;
  }

  body[data-page="menu"] .menu-row{
    min-height:40px;
    padding:10px 0;
    font-size:.96rem;
  }

  body[data-page="menu"] .menu-row.multi .name{
    font-size:.91rem;
  }

  body[data-page="menu"] .menu-row .price{
    min-width:64px;
  }

  body[data-page="menu"] .menu-group{
    margin-bottom:29px;
  }

  body[data-page="menu"] .menu-order-band{
    grid-template-columns:1fr;
    gap:18px;
  }

  body[data-page="menu"] .menu-order-actions{
    justify-content:flex-start;
  }
}

@media(max-width:560px){
  body[data-page="menu"] .menu-page-hero .page-hero-copy{
    padding-top:24px;
  }

  body[data-page="menu"] .menu-page-hero>img{
    min-height:250px;
    height:31svh;
  }

  body[data-page="menu"] .menu-section{
    padding-top:58px;
  }

  body[data-page="menu"] .menu-tabs{
    top:64px;
  }

  body[data-page="menu"] .menu-tab{
    min-width:142px;
  }

  body[data-page="menu"] .menu-order-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  body[data-page="menu"] .menu-order-actions .btn{
    width:100%;
    justify-content:center;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="menu"] .menu-tab,
  body[data-page="menu"] .menu-preview-media{
    transition:none!important;
  }
}


/* =============================================================
   AUG 22 — TARGETED UI/UX REFINEMENTS
   ============================================================= */

/* MENU / NOW SERVING: larger, clearer board; remove the midline that crossed text. */
body[data-page="menu"] .menu-split-board{
  width:clamp(292px,28vw,348px);
  padding:9px;
}
body[data-page="menu"] .menu-split-board__label{
  margin-bottom:7px;
  font-size:.48rem;
}
body[data-page="menu"] .menu-split-board__window{
  height:60px;
}
body[data-page="menu"] .menu-split-board__face{
  grid-template-columns:48px minmax(0,1fr);
  gap:11px;
  padding:9px 12px;
}
body[data-page="menu"] .menu-split-board__face b{
  font-size:1.5rem;
}
body[data-page="menu"] .menu-split-board__face strong{
  font-size:.68rem;
  line-height:1.08;
}
body[data-page="menu"] .menu-split-board__hinge{
  display:none!important;
}
@media(max-width:860px){
  body[data-page="menu"] .menu-split-board{
    width:min(100%,340px);
  }
}

/* HOME / CONTROLLED LENGTH COMPRESSION
   Reduce accumulated scroll, not content. Photography, interactions and
   hierarchy remain intact; savings come from section height, row spacing and
   oversized media footprints. */
@media(min-width:901px){
  body[data-page="home"] .hero.hero-split{
    min-height:82svh;
  }
  body[data-page="home"] .hero-photo-panel{
    min-height:calc(82svh - 74px);
  }
  body[data-page="home"] .hero-copy{
    padding-top:clamp(38px,5.5vw,76px);
    padding-bottom:46px;
  }
  body[data-page="home"] .hero-kicker{margin-bottom:20px}
  body[data-page="home"] .hero-sub-split{margin-top:22px}
  body[data-page="home"] .hero-btns-split{margin-top:20px}
  body[data-page="home"] .hero-city-line{margin-top:28px}

  body[data-page="home"] .monkey-tv-section{
    padding-top:30px;
    padding-bottom:30px;
    gap:clamp(28px,4vw,58px);
  }
  body[data-page="home"] .crt-wrap{
    width:min(820px,62vw);
  }

  body[data-page="home"] .signature{
    padding-top:28px;
    padding-bottom:28px;
  }
  body[data-page="home"] .signature .sig-head{
    margin-bottom:18px;
  }

  body[data-page="home"] .atmosphere{
    padding-top:28px;
  }
  body[data-page="home"] .atmo-photo.big{
    min-height:clamp(280px,38svh,390px);
  }

  body[data-page="home"] .diner-counter{
    padding-top:20px;
    padding-bottom:20px;
    min-height:210px;
  }

  body[data-page="home"] .story.story-v5{
    padding-top:30px;
    padding-bottom:30px;
  }
  body[data-page="home"] .story-v5 .story-grid{
    gap:clamp(24px,3vw,40px);
  }
  body[data-page="home"] .story-text p{
    line-height:1.7;
    margin-bottom:.82rem;
  }
  body[data-page="home"] .story-decor-row{
    margin-top:22px;
  }
  body[data-page="home"] .team-live-board{
    padding:clamp(20px,2.4vw,30px);
  }
  body[data-page="home"] .team-live-rule{
    margin:14px 0 13px;
  }
  body[data-page="home"] .team-live-people{
    margin:7px 0 16px;
  }
  body[data-page="home"] .team-live-divider{
    margin-bottom:14px;
  }
  body[data-page="home"] .team-live-copy{
    padding-bottom:24px;
  }

  body[data-page="home"] .campaign-band{
    padding-top:18px;
    padding-bottom:18px;
  }
  body[data-page="home"] .flipboard-band{
    padding-top:18px;
    padding-bottom:18px;
  }

  body[data-page="home"] .locations{
    padding-top:38px;
    padding-bottom:42px;
  }
  body[data-page="home"] .loc-head{
    margin-bottom:26px;
  }
  body[data-page="home"] .locations-stage{
    gap:34px;
  }
  body[data-page="home"] .roadside-photo{
    height:300px;
  }
  body[data-page="home"] .roadside-sign{
    padding:18px;
  }
  body[data-page="home"] .loc-row{
    padding-top:16px;
    padding-bottom:16px;
  }

  body[data-page="home"] .jukebox-section{
    padding-top:34px;
    padding-bottom:34px;
    gap:clamp(30px,5vw,68px);
  }
  body[data-page="home"] .gm-jukebox{
    max-width:600px;
  }

  body[data-page="home"] .social{
    padding-top:40px;
    padding-bottom:54px;
  }
  body[data-page="home"] .social-head{
    margin-bottom:28px;
  }
  body[data-page="home"] .social-strip{
    max-width:1040px;
    padding-top:8px;
    padding-bottom:42px;
  }

  body[data-page="home"] .diner-counter-spread{
    padding-top:34px;
    padding-bottom:38px;
  }
  body[data-page="home"] .counter-shell{
    min-height:500px;
  }
  body[data-page="home"] .counter-review-note{
    min-height:330px;
  }
}

/* Mobile gets a gentler compression so stacked controls remain comfortable. */
@media(max-width:900px){
  body[data-page="home"] .monkey-tv-section,
  body[data-page="home"] .signature,
  body[data-page="home"] .story.story-v5,
  body[data-page="home"] .locations,
  body[data-page="home"] .jukebox-section,
  body[data-page="home"] .social,
  body[data-page="home"] .diner-counter-spread{
    padding-top:28px;
    padding-bottom:30px;
  }
  body[data-page="home"] .atmosphere{padding-top:24px}
  body[data-page="home"] .atmo-photo.big{min-height:clamp(230px,32svh,310px)}
  body[data-page="home"] .diner-counter{padding-top:18px;padding-bottom:18px}
  body[data-page="home"] .campaign-band{padding-top:16px;padding-bottom:16px}
  body[data-page="home"] .flipboard-band{padding-top:16px;padding-bottom:16px}
  body[data-page="home"] .loc-head{margin-bottom:22px}
  body[data-page="home"] .loc-row{padding-top:16px;padding-bottom:16px}
  body[data-page="home"] .social-head{margin-bottom:22px}
}