:root{
  --asphalt:#0d0b08; --asphalt-2:#161209;
  --brick:#e5372b; --brick-dark:#b3241a;
  --taxi:#f5b815; --taxi-glow:#ffd75e;
  --cash:#1e9e35;
  --paper:#f4e8ce; --ink:#241b10;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Barlow',system-ui,sans-serif;background:var(--asphalt);color:var(--paper);min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* .brand and .fav-card are buttons so they can be reached by Tab. They are not
   button shaped, so drop the UA padding and text centring. */
.brand,.fav-card{padding:0;text-align:inherit;font:inherit}
/* The site had no focus styles at all, which left keyboard users with no idea
   where they were. Taxi yellow reads against every surface here. */
:focus-visible{outline:3px solid var(--taxi);outline-offset:3px;border-radius:4px}
a{color:inherit;text-decoration:none}

.marquee{background:#050403;border-bottom:2px solid #221a0c;overflow:hidden;height:30px;display:flex;align-items:center}
.marquee-track{display:flex;white-space:nowrap;animation:scroll 28s linear infinite;
  font-family:'Barlow Condensed';font-weight:600;font-size:14px;letter-spacing:.22em;
  color:var(--taxi-glow);text-shadow:0 0 6px rgba(245,184,21,.75),0 0 18px rgba(245,184,21,.35);text-transform:uppercase}
.marquee-track span{padding:0 28px}
.marquee-track span:nth-child(even){color:#ff6a5e;text-shadow:0 0 6px rgba(229,55,43,.8),0 0 18px rgba(229,55,43,.35)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.awning{height:20px;background:repeating-linear-gradient(90deg,var(--brick) 0 46px,var(--paper) 46px 92px);position:relative;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;
  background:repeating-linear-gradient(90deg,var(--brick) 0 46px,var(--paper) 46px 92px);
  -webkit-mask:radial-gradient(12px at 23px 0,transparent 96%,#000) -23px 0/46px 100%;
  mask:radial-gradient(12px at 23px 0,transparent 96%,#000) -23px 0/46px 100%}

header{position:sticky;top:0;z-index:60;background:rgba(13,11,8,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(245,184,21,.18)}
.nav{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:12px}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.brand img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px var(--taxi),0 0 16px rgba(245,184,21,.35)}
.brand-txt{line-height:1}
.brand-txt .b1{font-family:'Alfa Slab One';font-size:17px;color:var(--taxi)}
.brand-txt .b2{font-family:'Yellowtail';font-size:16px;color:#ff8d55;margin-top:1px}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links button, .nav-links a.lnk{font-family:'Barlow Condensed';font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);padding:9px 15px;border-radius:999px;transition:background .2s,color .2s;display:inline-flex;align-items:center;gap:7px}
.nav-links button:hover, .nav-links a.lnk:hover{background:rgba(245,184,21,.12)}
.nav-links button.active{background:var(--taxi);color:var(--ink)}
.text-cta{background:var(--brick)!important;color:#fff!important;font-weight:700!important;
  box-shadow:0 4px 14px rgba(229,55,43,.4)}

.view{display:none;animation:fadein .35s ease}
.view.on{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hero{position:relative;overflow:hidden;padding:44px 18px 60px;text-align:center;
  background:radial-gradient(700px 420px at 50% -60px, rgba(245,184,21,.14), transparent 65%),var(--asphalt)}
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(to top, rgba(13,11,8,0) 0%, var(--asphalt) 100%),
    repeating-linear-gradient(0deg,#7a2c1c 0 22px,#5c1f13 22px 26px),
    repeating-linear-gradient(90deg,transparent 0 54px,#5c1f13 54px 58px);
  opacity:.35;z-index:0}
.hero-logo{width:min(290px,68vw);height:min(290px,68vw);object-fit:cover;border-radius:50%;
  margin:0 auto 14px;position:relative;z-index:1;
  box-shadow:0 0 0 3px var(--taxi),0 0 45px rgba(245,184,21,.35),0 22px 45px rgba(0,0,0,.55);
  animation:float 5.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-9px)}}
.hero h1{font-family:'Alfa Slab One';font-size:clamp(28px,6vw,52px);line-height:1.08;color:var(--paper);
  position:relative;z-index:1;text-shadow:3px 3px 0 var(--brick-dark)}
.hero h1 .yel{color:var(--taxi)}
.hero .tag{font-family:'Yellowtail';font-size:clamp(20px,3.4vw,29px);color:#ff8d55;margin:10px 0 12px;position:relative;z-index:1}
.hero-info{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.info-chip{font-family:'Barlow Condensed';font-weight:600;font-size:14.5px;letter-spacing:.06em;
  border:1.5px solid rgba(244,232,206,.3);border-radius:999px;padding:7px 15px;color:#e6d8b8;
  display:inline-flex;align-items:center;gap:7px;transition:border-color .2s}
.info-chip:hover{border-color:var(--taxi)}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.btn{font-family:'Barlow Condensed';font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;border-radius:999px;transition:transform .15s,box-shadow .2s;display:inline-flex;align-items:center;gap:9px}
.btn:active{transform:scale(.96)}
.btn-yel{background:var(--taxi);color:var(--ink);box-shadow:0 6px 20px rgba(245,184,21,.35)}
.btn-yel:hover{box-shadow:0 8px 26px rgba(245,184,21,.5)}
.btn-red{background:var(--brick);color:#fff;box-shadow:0 6px 20px rgba(229,55,43,.35)}
.btn[disabled]{background:#3a352c;color:#8d8776;cursor:not-allowed;box-shadow:none;opacity:.85}
.soon-pill{background:var(--taxi);color:var(--ink);font-size:11px;letter-spacing:.1em;padding:3px 9px;border-radius:999px;font-weight:700}

.section{max-width:1140px;margin:0 auto;padding:54px 18px}
.sec-eyebrow{font-family:'Barlow Condensed';font-weight:600;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--cash);margin-bottom:8px}
.sec-title{font-family:'Alfa Slab One';font-size:clamp(24px,4.2vw,37px);color:var(--paper);margin-bottom:12px;line-height:1.12}
.sec-title .scr{font-family:'Yellowtail';color:var(--taxi);font-size:1.12em;margin-left:4px}
.sec-sub{color:#c9bda0;font-size:16.5px;max-width:640px;line-height:1.6}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px;margin-top:32px}
.feat{background:var(--asphalt-2);border:1px solid rgba(245,184,21,.14);border-radius:var(--radius);padding:24px 22px;transition:transform .25s,border-color .25s}
.feat:hover{transform:translateY(-5px);border-color:rgba(245,184,21,.45)}
.feat .ic{font-size:32px;margin-bottom:12px}
.feat h3{font-family:'Barlow Condensed';font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--taxi);margin-bottom:7px}
.feat p{color:#c9bda0;font-size:15px;line-height:1.55}

/* favorites strip (photo cards, tap -> menu section) */
.fav-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:min(260px,76vw);gap:18px;overflow-x:auto;
  padding:26px 4px 18px;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.fav-scroll::-webkit-scrollbar{display:none}
.fav-scroll > *{scroll-snap-align:start}
/* Opaque on purpose. A translucent border lets the dish photo paint through it,
   so every card picked up a different edge colour from whatever was behind it.
   This is a muted taxi gold, same 1.5px, uniform across all cards. */
.fav-card{position:relative;border-radius:var(--radius);overflow:hidden;height:180px;cursor:pointer;
  box-shadow:var(--shadow);border:1.5px solid #a07d1f;
  background-size:cover;background-position:center;transition:transform .22s}
.fav-card:hover{transform:translateY(-5px)}
.fav-card .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  font-family:'Barlow Condensed';font-weight:700;font-size:19px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.fav-ctrl{display:flex;align-items:center;gap:10px;margin:10px 4px 0}
.fav-arrow{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(245,184,21,.08);
  border:2px solid var(--taxi);color:var(--taxi);font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(245,184,21,.18);
  transition:all .2s;padding-bottom:3px}
.fav-arrow:hover{background:var(--taxi);color:var(--ink)}
.fav-arrow:active{transform:scale(.9)}
.fav-arrow[disabled]{opacity:.25;cursor:default;box-shadow:none}
.fav-arrow[disabled]:hover{background:rgba(245,184,21,.08);color:var(--taxi)}
.fav-track{flex:1;height:5px;border-radius:99px;background:rgba(244,232,206,.12);position:relative;overflow:hidden}
.fav-thumb{position:absolute;top:0;bottom:0;left:0;border-radius:99px;
  background:linear-gradient(90deg,var(--taxi),var(--brick));box-shadow:0 0 10px rgba(245,184,21,.6);transition:width .15s}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
@media(max-width:720px){.split{grid-template-columns:1fr}}
.card-paper{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.card-paper h3{font-family:'Alfa Slab One';font-size:20px;margin-bottom:14px;color:var(--brick)}
.hours-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed rgba(36,27,16,.25);font-size:15.5px}
.hours-row b{font-weight:600}
.hours-row:last-child{border-bottom:none}
.card-paper p{font-size:15.5px;line-height:1.65}
.card-paper .big{font-family:'Barlow Condensed';font-weight:700;font-size:21px;margin:5px 0 10px}
.card-paper a{color:var(--brick);font-weight:700}

/* ================= BIG BOARD MENU ================= */
.jump-chips{display:flex;gap:9px;overflow-x:auto;padding:16px 18px 10px;max-width:1140px;margin:0 auto;
  scrollbar-width:none;position:sticky;top:calc(var(--nav-h) + 2px);
  background:linear-gradient(var(--asphalt) 82%,transparent);z-index:40}
.jump-chips::-webkit-scrollbar{display:none}
.jump-chip{font-family:'Barlow Condensed';font-weight:600;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;white-space:nowrap;border:1.5px solid rgba(244,232,206,.28);color:var(--paper);transition:all .2s}
.jump-chip:hover{border-color:var(--taxi);color:var(--taxi)}
.big-menu{max-width:1140px;margin:0 auto;padding:14px 18px 70px;display:grid;gap:30px}
.mcat{background:#0a0806;border:1.5px solid rgba(245,184,21,.22);border-radius:16px;
  padding:26px 24px 28px;box-shadow:var(--shadow);scroll-margin-top:130px;position:relative;overflow:hidden}
.mcat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brick),var(--taxi))}
.mcat-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.mcat-head h3{font-family:'Alfa Slab One';font-size:clamp(24px,3.6vw,34px);color:var(--paper);
  text-shadow:2px 2px 0 var(--brick-dark);letter-spacing:.01em}
.mcat-head .tag{background:var(--brick);color:#fff;font-family:'Barlow Condensed';font-weight:700;
  font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:6px;
  transform:rotate(-1.5deg);box-shadow:0 3px 10px rgba(229,55,43,.4)}
.mcat-note{color:#cdbb92;font-size:15px;line-height:1.6;margin-bottom:16px;max-width:820px}
.mcat-note b{color:var(--taxi)}
/* 240px floor, not 180px. Below that a wrapped column goes nearly square and
   crops the ends off a sandwich shot. Desktop column counts are unchanged. */
.mcat-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:6px 0 20px}
/* Each box matches the shape the photo was cut to, so nothing important gets
   cropped away. The single photo dishes (burger, wings, boars) are near square
   shots, rows of 2 are 1.9:1 and the 3 up subs are long and thin.
   max-width keeps a lone photo from stretching across the whole row: the files
   are 780px wide, so a 430px box still leaves 1.8x for retina screens.
   aspect-ratio rather than a fixed height means this holds at every width,
   phone included, with no breakpoint needed. */
.mphoto{position:relative;border-radius:11px;overflow:hidden;max-width:430px;aspect-ratio:1.3;
  background-size:cover;background-position:center;border:3px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.5);transform:rotate(-.6deg)}
.mcat-photos:has(.mphoto:nth-child(2)) .mphoto{aspect-ratio:1.38}
.mcat-photos:has(.mphoto:nth-child(3)) .mphoto{aspect-ratio:1.7}
.mphoto:nth-child(even){transform:rotate(.7deg)}
.mphoto .cap{position:absolute;left:8px;bottom:8px;background:#0a0806;color:#fff;
  font-family:'Barlow Condensed';font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:5px}
.mitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));gap:0 44px}
.mitem{padding:13px 2px;border-bottom:1.5px dashed rgba(244,232,206,.16);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mitem .nm{font-family:'Barlow Condensed';font-weight:700;font-size:22px;letter-spacing:.05em;text-transform:uppercase;color:#fdf6e4}
.mitem .szt{font-family:'Barlow Condensed';font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--taxi);border:1px solid rgba(245,184,21,.5);border-radius:999px;padding:2.5px 10px;white-space:nowrap}
.mitem .ds{flex-basis:100%;color:#b7a98c;font-size:15px;line-height:1.5;margin-top:2px}

footer{border-top:1px solid rgba(245,184,21,.15);padding:38px 18px calc(30px + var(--nav-h));text-align:center;background:#0a0806}
footer .f-logo{width:84px;height:84px;object-fit:cover;margin:0 auto 14px;border-radius:50%;box-shadow:0 0 0 2px var(--taxi)}
footer p{color:#7d7460;font-size:13.5px;line-height:1.8}
footer a{color:#b3a683;font-weight:600}

.tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(13,11,8,.96);backdrop-filter:blur(14px);
  border-top:1px solid rgba(245,184,21,.2);padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr 1fr 1fr;gap:6px}
.tabbar button, .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border-radius:12px;
  font-family:'Barlow Condensed';font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9c9078;
  transition:color .2s,background .2s}
.tabbar .ti{font-size:21px}
.tabbar button.active{color:var(--taxi);background:rgba(245,184,21,.1)}
@media(max-width:820px){.nav-links button:not(.keep), .nav-links a.lnk:not(.text-cta){display:none}.tabbar{display:grid}footer{padding-bottom:calc(38px + var(--nav-h))}}

/* On a phone the header holds the brand and the order button on one row, and at
   desktop sizes both wrapped onto two lines each. Scale them down and forbid the
   wrap rather than letting the row grow. */
@media(max-width:560px){
  .nav{padding:8px 12px;gap:10px}
  .brand{gap:8px}
  .brand img{width:38px;height:38px}
  .brand-txt .b1{font-size:14px;white-space:nowrap}
  .brand-txt .b2{font-size:13px;white-space:nowrap}
  .nav-links a.text-cta{font-size:13px;letter-spacing:.06em;padding:9px 13px;gap:6px;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}