/* ============================================================
   PRIME TACOS — styles.css
   Tokens, header scroll behaviour, the five animations,
   and every page layout. Plain CSS, no build step.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  --red:    #D1342B;
  --black:  #141110;
  --bone:   #FBF4E6;
  --yellow: #FFD23F;
  --panel:  #1E1917;

  --muted:  #BDB3A7;   /* body copy on dark, ~7:1 */
  --faint:  #98908a;   /* meta on dark, >=4.5:1   */
  --ink-muted: #5C554E;/* body copy on bone       */
  --line:   rgba(251,244,230,.10);
  --line-strong: rgba(251,244,230,.16);

  --gut: 44px;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Baloo 2", "Trebuchet MS", sans-serif;
  --slab: "Alfa Slab One", var(--display);

  --ease-out: cubic-bezier(.22,1,.36,1);
}
@media (max-width: 767px){
  :root{ --gut: 18px; }
}

/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-padding-top: 160px;
  -webkit-text-size-adjust: 100%;
}
body{
  margin:0;
  background: var(--black);          /* footer is the last pixel — no white below, ever */
  color: var(--bone);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
main{ flex: 1 0 auto; }
.site-footer{ flex-shrink: 0; }

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
address{ font-style: normal; }
button{ font: inherit; color: inherit; background:none; border:0; padding:0; cursor:pointer; }

h1,h2,h3,.display{
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .015em;
  margin: 0 0 .35em;
}
h1{ font-size: clamp(44px, 6.4vw, 84px); }
h2{ font-size: clamp(34px, 4.4vw, 58px); }
h3{ font-size: clamp(22px, 2.2vw, 28px); }

.container{
  width:100%;
  max-width:1360px;
  margin-inline:auto;
  padding-inline: var(--gut);
}
.container--narrow{ max-width:1028px; } /* 940px of content inside the gutters */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background: var(--yellow); color: var(--black);
  font-weight:800; padding:12px 20px; border-radius:0 0 6px 6px;
  text-decoration:none; transition: top .2s;
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.sec-bone :focus-visible,
.btn-yellow:focus-visible{ outline-color: var(--red); }
.sec-red :focus-visible{ outline-color: var(--black); }

.eyebrow{
  font-family: var(--body);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--yellow);
  margin:0 0 14px;
}
.eyebrow--red{ color: var(--red); }
.eyebrow--white{ color:#fff; }
.eyebrow--muted{ color: var(--faint); }
.sec-bone .eyebrow--muted{ color:#8a8178; }

.confirm{ white-space:nowrap; }

/* ------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding: 4px 28px 0;   /* top nudge optically centres Big Shoulders */
  font-family: var(--display);
  font-weight:800; font-size:18px;
  letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; border-radius:4px; border:0;
  cursor:pointer; white-space:nowrap;
}
.btn-yellow{ background:var(--yellow); color:var(--black); }
.btn-red{ background:var(--red); color:#fff; }
.btn-bone{ background:var(--bone); color:var(--black); }
.btn-outline{ background:transparent; border:2px solid var(--bone); color:var(--bone); }
.btn-outline-yellow{ background:transparent; border:2px solid var(--yellow); color:var(--yellow); }
.btn-outline-dark{ background:transparent; border:2px solid var(--black); color:var(--black); }
.btn:hover{ filter:brightness(1.07); }
.btn:active{ transform:translateY(1px); }

/* yellow button light sweep (home hero) */
.btn-sweep{ position:relative; overflow:hidden; isolation:isolate; }
.btn-sweep::after{
  content:""; position:absolute; inset:0; z-index:-0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.65) 50%, transparent 68%);
  transform:translateX(-130%);
  animation: sweep 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%   { transform:translateX(-130%); }
  55%  { transform:translateX(130%); }
  100% { transform:translateX(130%); }
}

.text-link{
  font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--red); text-decoration:none;
}
.text-link:hover{ text-decoration:underline; }
.text-link--yellow{ color: var(--yellow); }

/* ------------------------------------------------------------
   4. HEADER — transparent over hero, solid on scroll.
   Scroll-driven animation across the first 150px; JS adds a
   .scrolled fallback class only when the timeline is missing.
   ------------------------------------------------------------ */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  background:transparent;
  border-bottom:3px solid rgba(255,210,63,0);
  box-shadow:0 10px 26px rgba(0,0,0,0);
}
.utility-bar{
  background:var(--red); color:#fff;
  height:34px; overflow:hidden;
}
.utility-inner{
  height:34px; display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
}
.utility-inner a{ text-decoration:none; }
.utility-inner a:hover{ text-decoration:underline; }
.header-main{ height:104px; }
.header-inner{
  height:100%; display:flex; align-items:center; gap:28px;
}
.logo{ flex:none; display:block; }
.logo img{ width:220px; height:auto; flex:none; }
.main-nav{ flex:1; display:flex; justify-content:center; }
.nav-list{ display:flex; align-items:center; gap:34px; }
.nav-list > li{ position:relative; }
/* Big Shoulders here so the nav matches the buttons and headings
   rather than sitting in the body face on its own */
.nav-list a, .sub-toggle{
  font-family:var(--display);
  font-weight:800; font-size:18px; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; padding:8px 0;
}
.nav-list a:hover, .sub-toggle:hover{ color:var(--yellow); }
.nav-list a[aria-current="page"], .sub-toggle.active{ color:var(--yellow); }
.caret{ width:10px; height:7px; fill:currentColor; }
.sub-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:230px; padding:10px 0;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; translate:0 8px;
  transition: opacity .18s, visibility .18s, translate .18s;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu,
.has-sub.open .sub-menu{ opacity:1; visibility:visible; translate:0 0; }
.sub-menu a{ display:block; padding:10px 22px; font-size:16px; }
.sub-menu a:hover{ background:rgba(255,210,63,.08); }
.order-pill{
  flex:none; min-height:46px; border-radius:999px; font-size:16px;
  background:var(--red); color:#fff; padding-top:3px;
}
.burger{ display:none; }

/* scroll-driven header (no JS) */
@supports (animation-timeline: scroll()){
  .site-header, .utility-bar, .header-main, .logo img{
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 0px 150px;
  }
  .site-header{ animation-name: hdr-shell; }
  .utility-bar{ animation-name: hdr-util; }
  .header-main{ animation-name: hdr-row; }
  .logo img{ animation-name: hdr-logo; }
}
@keyframes hdr-shell{
  from{ background:rgba(20,17,16,0); box-shadow:0 10px 26px rgba(0,0,0,0); border-bottom:3px solid rgba(255,210,63,0); }
  to  { background:#141110;          box-shadow:0 10px 26px rgba(0,0,0,.5); border-bottom:2px solid #FFD23F; }
}
@keyframes hdr-util{ from{ height:34px; opacity:1; } to{ height:0; opacity:0; } }
@keyframes hdr-row{ from{ height:104px; } to{ height:62px; } }
@keyframes hdr-logo{ from{ width:220px; } to{ width:118px; } }

/* JS fallback: html.no-stl gets transitions + .scrolled end state */
html.no-stl .site-header{ transition: background .25s, box-shadow .25s, border-color .25s, border-width .25s; }
html.no-stl .utility-bar{ transition: height .25s, opacity .25s; }
html.no-stl .header-main{ transition: height .25s; }
html.no-stl .logo img{ transition: width .25s; }
html.no-stl.scrolled .site-header{
  background:#141110; box-shadow:0 10px 26px rgba(0,0,0,.5);
  border-bottom:2px solid var(--yellow);
}
html.no-stl.scrolled .utility-bar{ height:0; opacity:0; }
html.no-stl.scrolled .header-main{ height:62px; }
html.no-stl.scrolled .logo img{ width:118px; }

/* ------------------------------------------------------------
   5. MOBILE HEADER + DRAWER
   ------------------------------------------------------------ */
@media (max-width: 1099px){
  .utility-bar{ display:none; }
  .header-main{ height:72px; }
  .logo img{ width:150px; }
  .order-pill{ display:none; }

  /* the header is transparent over the hero and the red banners, so the
     button carries its own ground — that is what stops it reading as a
     stray mark floating near the top of the page */
  .burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:5px;
    width:46px; height:46px; margin-left:auto; padding:12px;
    z-index:130; position:relative;
    background:rgba(20,17,16,.55);
    border:1px solid rgba(251,244,230,.22);
    border-radius:12px;
    backdrop-filter:blur(6px);
    transition:background .2s, border-color .2s;
  }
  .burger:hover{ background:rgba(20,17,16,.78); border-color:rgba(251,244,230,.4); }
  html.drawer-open .burger{ background:transparent; border-color:transparent; backdrop-filter:none; }
  .burger span{
    display:block; height:2.5px; width:100%; background:#fff; border-radius:2px;
    transition: transform .25s, opacity .2s;
  }
  html.drawer-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  html.drawer-open .burger span:nth-child(2){ opacity:0; }
  html.drawer-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* With JS: the nav becomes a right-hand drawer */
  html.js .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px, 86vw);
    background:var(--panel); border-left:1px solid var(--line-strong);
    padding:110px 30px 40px; z-index:120;
    display:block; overflow-y:auto;
    transform:translateX(100%); visibility:hidden;
    transition: transform .3s var(--ease-out), visibility .3s;
  }
  html.js.drawer-open .main-nav{ transform:translateX(0); visibility:visible; }
  html.js .nav-list{ display:block; }
  html.js .nav-list > li{ border-bottom:1px solid var(--line); }
  html.js .nav-list a, html.js .sub-toggle{
    display:block; padding:16px 0; font-size:17px;
  }
  html.js .has-sub > .sub-toggle{ display:none; }   /* drawer shows the two links directly */
  html.js .sub-menu{
    position:static; transform:none; translate:0 0; opacity:1; visibility:visible;
    background:transparent; border:0; box-shadow:none; padding:0 0 6px;
  }
  html.js .sub-menu a{ padding:12px 0 12px 16px; font-size:15px; color:var(--muted); }
  html.js .drawer-order{ margin-top:26px; width:100%; }
  html.js .drawer-backdrop{
    position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s;
  }
  html.js.drawer-open .drawer-backdrop{ opacity:1; visibility:visible; }
  html.js.drawer-open body{ overflow:hidden; }
  /* the fixed header is its own stacking context at z 100, which would put
     the backdrop (110) over the drawer and swallow every tap — lift the
     whole header above the backdrop while the drawer is open */
  html.js.drawer-open .site-header{ z-index:140; }

  /* Without JS: plain wrapping nav row, everything reachable */
  html:not(.js) .header-main{ height:auto; padding:10px 0; }
  html:not(.js) .header-inner{ flex-wrap:wrap; }
  html:not(.js) .nav-list{ flex-wrap:wrap; gap:14px 20px; }
  html:not(.js) .burger{ display:none; }
}
@media (min-width: 1100px){
  .drawer-order{ display:none; }
  .drawer-backdrop{ display:none; }
}

/* ------------------------------------------------------------
   6. SECTIONS / SHARED BANDS
   ------------------------------------------------------------ */
.sec{ padding-block: clamp(64px, 8vw, 104px); }
.sec-bone{ background:var(--bone); color:var(--black); }
.sec-bone .eyebrow{ color:var(--red); }
.sec-red{ background:var(--red); color:#fff; }
.sec-panel{ background:var(--panel); }
.muted{ color:var(--muted); }
.sec-bone .muted{ color:var(--ink-muted); }

.page-banner{
  padding-top: clamp(130px, 16vw, 206px);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.page-banner .lede{
  max-width:620px; font-size:17px; margin:18px 0 0;
}
.banner-red{ background:var(--red); color:#fff; }
.banner-dark{ background:var(--black); }
.banner-dark .lede{ color:var(--muted); }

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; margin-bottom:40px;
}
.sec-head h2{ margin:0; }
.sec-head > div{ min-width:0; }

/* dashed placeholder frames */
.ph-frame{
  border:2px dashed rgba(251,244,230,.28);
  border-radius:14px;
  background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:28px;
  color:var(--faint);
}
.ph-frame .ph-title{
  font-family:var(--display); font-weight:800; font-size:21px;
  letter-spacing:.08em; text-transform:uppercase; color:#8f8276; margin:0;
}
.ph-frame .ph-meta{
  font-weight:800; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#6e675f; margin:0;
}
.play-dot{
  width:72px; height:72px; border-radius:50%; background:var(--red);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.play-dot::after{
  content:""; display:block; margin-left:5px;
  border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #fff;
}

/* ------------------------------------------------------------
   7. ANIMATION 1 + 2 — LOGO MARQUEES
   translateX(-50%) -> 0 reads as rightward drift. Two identical
   groups back-to-back make the loop seamless.
   ------------------------------------------------------------ */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex; width:max-content;
  transform:translateX(-50%);
  animation: marquee-right 42s linear infinite;
}
.marquee--festivals .marquee-track{ animation-duration: 54s; }
@keyframes marquee-right{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-group{
  display:flex; align-items:center;
  gap: clamp(56px, 7vw, 104px);
  padding-inline: clamp(28px, 3.5vw, 52px);
}
/* every logo is sized by optical area, never a shared box */
.marquee-group img{ width:auto; flex:none; }
.logo-abc7{ height:60px; }
.logo-wgntv{ height:38px; }
.logo-nbc5{ height:55px; }
.logo-wgnradio{ height:35px; }
.logo-dvnews{ height:32px; }
.logo-taste{ height:24px; }
.logo-lolla{ height:36px; }
.logo-lakeview{ height:92px; }
.logo-tyt{ height:57px; }
.logo-suenos{ height:44px; }  /* heavy solid wordmark — reads dense */
.logo-nc{ height:56px; }      /* solid disc — equal pixel area would look oversized */
.logo-smash{ height:66px; }   /* detailed sun lockup — needs size to stay legible */
@media (max-width: 767px){
  .logo-abc7{ height:46px; } .logo-wgntv{ height:30px; } .logo-nbc5{ height:42px; }
  .logo-wgnradio{ height:27px; } .logo-dvnews{ height:25px; }
  .logo-lakeview{ height:70px; } .logo-tyt{ height:44px; }
  .logo-suenos{ height:34px; } .logo-nc{ height:44px; } .logo-smash{ height:52px; }
}

.press-band{ padding-block:36px 42px; }
.press-band .eyebrow{ margin-bottom:24px; }

/* ------------------------------------------------------------
   8. ANIMATION 3 — FOLLOWER COUNT-UP
   CSS @property + view() preferred; .cnt-fallback carries the
   literal number so a real visitor never sees 0 or a blank.
   ------------------------------------------------------------ */
.stat-num{
  font-family:var(--display); font-weight:900; font-size:clamp(64px, 8vw, 104px);
  line-height:.9; letter-spacing:.015em; color:#fff; margin:0;
  font-variant-numeric: tabular-nums;
}
/* The count itself is JS-driven (IntersectionObserver + rAF in main.js):
   it plays once as a timed 1.8s count the moment the number is fully in
   view, instead of scrubbing with the scroll position. The literal number
   lives in the markup, so with no JS it simply reads 150K+ / 61K+. */

/* ------------------------------------------------------------
   9. ANIMATION 4 — FOOD TRUCK DIAGONAL MARQUEE
   Rotation lives on the parent, translate on the child.
   ------------------------------------------------------------ */
.ft-marquee-wrap{ overflow:hidden; padding-block:30px 44px; }
.ft-marquee{
  transform:rotate(-1.4deg);
  background:rgba(20,17,16,.08);
  width:112%; margin-left:-6%;
  overflow:hidden;
}
.ft-marquee-track{
  display:flex; width:max-content;
  animation: ft-slide 40s linear infinite;
}
@keyframes ft-slide{
  from{ transform:translateX(0); }
  to  { transform:translateX(-33.333%); }
}
.ft-marquee-copy{
  flex:none; display:flex; align-items:center;
  font-family:var(--slab); font-weight:400;
  font-size:58px; color:#fff; line-height:1;
  padding-block:14px; white-space:nowrap;
}
.ft-marquee-copy span{ padding-inline:34px; }
@media (max-width: 767px){
  .ft-marquee-copy{ font-size:34px; }
  .ft-marquee-copy span{ padding-inline:20px; }
}

/* ------------------------------------------------------------
   10. ANIMATION 5 — FLAME ON "HOT" + hero entrance
   ------------------------------------------------------------ */
.hero{
  position:relative; display:flex; align-items:center;
  /* tracks the 2720x1400 frame's own ratio so wide screens see the full
     composition and the red band never rides up over the burger */
  min-height: clamp(620px, 51vw, 100vh);
  min-height: clamp(620px, 51vw, 100svh);
  overflow:hidden;
}
.hero-bg, .hero-bg img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,8,7,.62) 0%, rgba(10,8,7,.28) 42%, rgba(10,8,7,0) 62%);
}
.hero-content{ position:relative; z-index:2; padding-block:120px 70px; }
.hero h1{ color:#fff; font-size:clamp(42px, 5vw, 68px); margin-bottom:34px; }
.hero .hl{ display:block; }

/* word-by-word rise out of a clipped line — visible by default,
   JS (html.anim) opts the animation in. */
/* the clip exists only while the entrance runs — html.anim-done releases it
   so the ember glow and flame are never boxed in afterwards; the headroom
   padding (cancelled by negative margins) keeps ascenders unclipped mid-rise */
.w{ display:inline-block; vertical-align:bottom; }
html.anim:not(.anim-done) .w{
  overflow:hidden;
  padding:.45em .3em 0; margin:-.45em -.3em 0;
}
.wi{ display:inline-block; }
html.anim .hero .wi{
  opacity:0; transform:translateY(106%);
  animation: word-rise .62s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes word-rise{
  to{ opacity:1; transform:translateY(0); }
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
html.anim .hero-ctas{
  opacity:0; transform:translateY(16px);
  animation: fade-up .6s var(--ease-out) forwards;
  animation-delay:.86s;
}
@keyframes fade-up{ to{ opacity:1; transform:translateY(0); } }

/* HOT stays brand red, no ember or flame — animation removed by request */
.hot{ color:var(--red); }

@media (max-width: 767px){
  .hero{ align-items:flex-end; min-height: 86svh; }
  /* on very short phones there is no room for header + burger + headline,
     so the type can land on the burger — this keeps it readable there and
     is invisible where the headline sits on the dark griddle */
  .hero h1{ text-shadow:0 2px 18px rgba(10,8,7,.8); }
  .hero::before{
    background:linear-gradient(180deg, rgba(10,8,7,.1) 30%, rgba(10,8,7,.72) 78%);
  }
  .hero-content{ padding-block:0 96px; }
}
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ------------------------------------------------------------
   11. HOME — sections
   ------------------------------------------------------------ */
.menu-cards{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:30px;
}
.menu-card{ display:block; text-decoration:none; color:inherit; }
.menu-card img{
  width:100%; aspect-ratio:1/1.06; object-fit:cover; border-radius:10px;
}
.menu-card h3{ margin:22px 0 10px; font-size:24px; font-weight:800; }
.menu-card p{ color:var(--ink-muted); font-size:15px; margin-bottom:14px; min-height:3.2em; }
.menu-card .text-link::after{ content:" \2192"; }
.menu-card:hover h3{ color:var(--red); }

.about-block{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
}
.about-block figure{ margin:0; }
/* the owners shot is a 4:5 portrait — show it at its own ratio so no faces crop */
.about-block img{ border-radius:12px; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
.pull-quote{
  border-left:4px solid var(--red);
  padding:4px 0 4px 24px; margin:28px 0 30px;
}
.pull-quote p{
  font-family:var(--display); font-weight:800; font-size:clamp(22px,2.2vw,30px);
  line-height:1.05; letter-spacing:.01em; margin:0 0 6px; color:#fff;
  text-transform:none;
}
.pull-quote cite{ font-style:normal; font-size:13px; color:var(--faint); font-weight:700; }

.press-rows{ border-top:1px solid var(--line); }
.press-row{
  display:flex; align-items:center; gap:30px;
  padding:24px 0; border-bottom:1px solid var(--line);
  text-decoration:none;
}
.press-row .pr-logo{ flex:none; width:118px; display:flex; }
.press-row .pr-logo img{ width:auto; max-width:118px; }
.pr-logo .logo-wgntv{ height:30px; } .pr-logo .logo-nbc5{ height:40px; }
.pr-logo .logo-abc7{ height:44px; } .pr-logo .logo-wgnradio{ height:27px; }
.pr-logo .logo-dvnews{ height:26px; }
.pr-logo .pr-text{
  font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; line-height:1;
}
.press-row h3, .press-row .pr-title{
  font-family:var(--display); font-weight:800; font-size:clamp(19px,1.8vw,24px);
  letter-spacing:.03em; text-transform:uppercase; margin:0; color:var(--bone); flex:1;
  min-width:0;
}
.press-row .pr-meta{
  display:block; font-family:var(--body); font-weight:800; font-size:11.5px;
  letter-spacing:.14em; color:var(--faint); margin-top:7px;
}
.press-row .pr-cta{
  flex:none; font-weight:800; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--yellow);
}
.press-row .pr-cta::after{ content:" \2192"; }
.press-row:hover .pr-title, .press-row:hover h3{ color:#fff; }
.press-row:hover .pr-cta{ text-decoration:underline; }

.truck-block{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
}
.truck-block img{ border-radius:12px; width:100%; aspect-ratio:16/9; object-fit:cover; }
.truck-block .btns{ display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }

/* ---- Social: copy on the left, a phone running stories on the right ----
   The bone slab is anchored to the phone, not the viewport, so the
   red/bone seam always falls at the same point across the handset no
   matter how wide the window gets. */
.social-sec{ --sec-pad: clamp(64px, 8vw, 104px); position:relative; overflow-x:clip; }
.social-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(30px, 4.6vw, 72px); align-items:center;
}
.social-copy{ min-width:0; }

.stats{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.6vw, 40px);
  padding-bottom:clamp(22px, 2.8vw, 32px);
  border-bottom:1px solid rgba(255,255,255,.24);
}
.social-copy .stat-num{ font-size:clamp(40px, 4.4vw, 74px); }
.stat-label{
  font-family:var(--display); font-weight:800; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; margin:9px 0 0; color:#fff;
}
.social-lead{ margin:clamp(22px, 2.8vw, 32px) 0 0; }
.social-lead p{ font-size:17px; margin:0 0 24px; max-width:46ch; }
.social-lead .btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* the bone half, bleeding off the right edge of the window */
.social-phone{ position:relative; display:flex; justify-content:flex-end; }
.social-phone::before{
  content:""; position:absolute; z-index:0;
  left:14%; right:-100vw;
  top:calc(-1 * var(--sec-pad)); bottom:calc(-1 * var(--sec-pad));
  background:var(--bone);
}

/* ---- The handset ----
   Every inset below is measured off Images/social/iphone-frame.png
   (692x1382, screen cut-out 612x1317 at 40,32). --u is one percent of
   the phone width, so the whole UI scales with the frame. */
.iph{
  --pw: clamp(282px, 28.5vw, 404px);
  --u: calc(var(--pw) / 100);
  --fs-s: clamp(9.5px, calc(var(--u) * 2.9), 12px);
  --fs-m: clamp(11px, calc(var(--u) * 3.5), 15px);
  position:relative; z-index:1;
  width:var(--pw); aspect-ratio:692 / 1382;
}
.iph-frame{
  position:absolute; inset:0; z-index:3; display:block; pointer-events:none;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.42));
}
.iph-frame img{ width:100%; height:100%; display:block; }
.iph-screen{
  position:absolute; z-index:1; overflow:hidden;
  left:5.78%; right:5.78%; top:2.32%; bottom:2.39%;
  border-radius:11.44% / 5.32%;
  background:#0B0908;
}

/* ---- Story reel ----
   Markup ships one stack of slides. main.js adds the progress bars, the
   tap zones, the caption slot and the sound toggle; without it the first
   story simply stands still with its own caption and link. */
.st{ position:absolute; inset:0; }
/* scrims that keep white chrome legible over any still */
.st::before, .st::after{
  content:""; position:absolute; left:0; right:0; z-index:2; pointer-events:none;
}
.st::before{ top:0; height:26%; background:linear-gradient(rgba(8,6,5,.62), transparent); }
.st::after{ bottom:0; height:46%; background:linear-gradient(transparent, rgba(8,6,5,.88)); }

.st-stage{ position:absolute; inset:0; }
.st-slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .42s var(--ease-out), visibility 0s linear .42s;
}
.st .st-slide:first-child{ opacity:1; visibility:visible; }   /* no-JS: story 1 */
.st--js .st-slide{ opacity:0; visibility:hidden; }
.st--js .st-slide[data-on]{
  opacity:1; visibility:visible; transition-delay:0s, 0s;
}
.st-media, .st-media img, .st-vid{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
/* A 9:16 reel is wider than this 1:2.15 screen. Rather than crop 17% off the
   sides, the clip is fitted by width and the blurred band baked into its
   poster shows above and below — which is what Instagram does. */
.st-vid{ object-fit:contain; background:transparent; }
.st-media img{ transform:scale(1.04); transition:transform 7s linear; }
.st--js .st-slide[data-on] .st-media img{ transform:scale(1); }  /* slow settle */
/* a clip's own motion is the motion — do not drift its poster underneath it */
.st-slide[data-video] .st-media img{ transform:none; transition:none; }
.st-vid{ opacity:0; transition:opacity .4s var(--ease-out); background:#0B0908; }
.st-slide[data-ready] .st-vid{ opacity:1; }

/* chip marking a slot the client still has to fill */
.st-chip{
  position:absolute; z-index:4; top:14%; left:calc(var(--u) * 5);
  font-family:var(--body); font-weight:800; font-size:var(--fs-s);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--black); background:var(--yellow);
  padding:calc(var(--u) * 1.1) calc(var(--u) * 2.6);
  border-radius:3px;
}

/* progress bars, clear of the notch */
.st-bars{
  position:absolute; z-index:5; top:4.9%; left:4.6%; right:4.6%;
  display:flex; gap:calc(var(--u) * .9); pointer-events:none;
}
.st-bar{
  flex:1 1 0; height:2.5px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.34);
}
.st-bar-fill{
  display:block; height:100%; border-radius:inherit; background:#fff;
  transform:scaleX(var(--p, 0)); transform-origin:left center;
  will-change:transform;
}

/* Instagram sets the handle row in the platform UI font, not a webfont.
   It lives on .st-head so every part of the row inherits the same face and
   size — the collab name included. */
.st-head{
  position:absolute; z-index:5; top:7.3%; left:4.6%; right:4.6%;
  display:flex; align-items:center; gap:calc(var(--u) * 2.4);
  pointer-events:none;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-size:var(--fs-s); letter-spacing:0; line-height:1.2;
}
/* a collab post shows both accounts, second avatar tucked under the first */
/* these carry display:block/flex, which outranks the UA rule for [hidden] */
.st-head [hidden]{ display:none !important; }
.st-faces{ flex:none; display:flex; align-items:center; }
.st-faces .st-ring--b{ margin-left:calc(var(--u) * -3.1); }
.st-row{ display:flex; align-items:center; gap:calc(var(--u) * 1.6); min-width:0; }
.st-ring{
  flex:none; display:block; border-radius:50%;
  width:calc(var(--u) * 8.6); height:calc(var(--u) * 8.6);
  padding:1.5px; background:linear-gradient(45deg, #FFD23F, #D1342B 55%, #8A2BE2);
}
.st-ring--b{ box-shadow:0 0 0 1.5px rgba(12,10,9,.85); }
.st-ring--b img{ object-fit:cover; padding:0; background:none; }
/* the client's own profile picture: the red wordmark on white, inset so the
   ends of PRIME TACOS clear the circle */
.st-ring img{
  width:100%; height:100%; border-radius:50%; display:block;
  background:#fff; object-fit:contain; padding:0 11%;
}
.st-who{ font-weight:600; color:#fff; }
.st-tick{
  flex:none; display:block; margin-left:calc(var(--u) * -1.1);
  width:calc(var(--u) * 3.2); height:calc(var(--u) * 3.2);
  min-width:11px; min-height:11px;
}
.st-with{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:400; color:rgba(255,255,255,.82);
}
.st-with b{ font-weight:600; color:#fff; }
.st-ago{ flex:none; font-weight:400; color:rgba(255,255,255,.72); }
.st-sound{
  margin-left:auto; pointer-events:auto; flex:none;
  width:calc(var(--u) * 8); height:calc(var(--u) * 8); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,10,9,.46); color:#fff;
  transition:background .2s, opacity .25s;
}
.st-sound svg{ width:52%; height:52%; fill:currentColor; display:block; }
.st-sound .ico-on{ display:none; }
.st-sound.is-on .ico-on{ display:block; }
.st-sound.is-on .ico-off{ display:none; }
.st-sound:hover{ background:rgba(12,10,9,.78); }
.st:not([data-vid]) .st-sound{ opacity:0; pointer-events:none; }

/* caption + link live above the tap zones so the link stays clickable */
.st-foot{
  position:absolute; z-index:5; left:5.4%; right:5.4%; bottom:5.2%;
  pointer-events:none;
}
.st-foot p{
  margin:0 0 calc(var(--u) * 3.2);
  font-size:var(--fs-m); line-height:1.32; font-weight:400; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  overscroll-behavior:contain;
}
/* expanded, a long caption scrolls inside the screen instead of growing
   past the handset */
.st-foot[data-open] p{
  max-height:calc(var(--u) * 78); overflow-y:auto; scrollbar-width:none;
}
.st-foot[data-open] p::-webkit-scrollbar{ display:none; }
/* the "more" / "less" toggle, inline at the end of the caption */
.st-more{
  pointer-events:auto; color:rgba(255,255,255,.72); font:inherit;
  font-weight:600; padding:0; margin-left:.35em;
}
.st-more:hover{ color:#fff; }
.st-link{
  pointer-events:auto; display:inline-block; text-decoration:none;
  font-family:var(--display); font-weight:800; font-size:var(--fs-s);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--black); background:#fff; border-radius:999px;
  padding:calc(var(--u) * 2) calc(var(--u) * 4.4);
  transition:background .2s, color .2s, transform .2s var(--ease-out);
}
.st-link:hover{ background:var(--yellow); transform:translateY(-1px); }
/* no-JS: the caption sits in the slide itself */
.st-cap{
  position:absolute; z-index:4; left:5.4%; right:5.4%; bottom:5.2%;
}
.st-cap p{
  margin:0 0 calc(var(--u) * 3.2);
  font-size:var(--fs-m); line-height:1.32; font-weight:400; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  /* no JS means no "more" toggle, so clamp it here instead of letting a
     300-character caption run off the handset */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
  overflow:hidden;
}
.st--js .st-cap{ display:none; }

/* tap zones: right two thirds forward, left third back, hold to pause */
.st-zone{
  position:absolute; z-index:3; top:0; bottom:0;
  background:transparent; border:0; -webkit-tap-highlight-color:transparent;
}
.st-zone--prev{ left:0; width:34%; cursor:w-resize; }
.st-zone--next{ right:0; width:66%; cursor:e-resize; }
/* while held, the chrome steps back the way Instagram does */
.st-bars, .st-head, .st-foot{ transition:opacity .22s var(--ease-out); }
.st.is-held .st-bars,
.st.is-held .st-head,
.st.is-held .st-foot{ opacity:0; }
.st.is-held::before, .st.is-held::after{ opacity:.25; transition:opacity .22s; }
.post-tiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.post-tile{
  display:block; border-radius:10px; overflow:hidden; text-decoration:none;
  background:var(--black);
}
.post-tile img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.post-tile .pt-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px;
}
.post-tile .pt-handle{ font-weight:700; font-size:13.5px; color:var(--bone); }
.post-tile .pt-view{
  font-weight:800; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow);
}
.post-tile:hover .pt-view{ text-decoration:underline; }

.findus{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
}
.findus h2{ font-size:clamp(40px,4.6vw,64px); }
.findus .hours{ color:var(--muted); margin:0 0 4px; }
.findus .btns{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }
.map-frame{ min-height:420px; }
.map-embed{
  display:block; width:100%; height:440px; border:0; border-radius:14px;
  background:var(--panel);
}
@media (max-width:767px){
  .map-embed{ height:320px; }
}

/* ------------------------------------------------------------
   12. FOOTER — ends the page flush, no dead space below
   ------------------------------------------------------------ */
.site-footer{
  background:var(--black);
  border-top:2px solid var(--yellow);
  padding:52px 0 46px;
  margin-top:0;
}
.footer-grid{
  display:grid; grid-template-columns:auto 1fr 1fr 1fr; gap:48px;
  align-items:start;
}
.footer-logo img{ width:118px; height:auto; flex:none; }
.f-label{
  font-weight:800; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px;
}
.site-footer address, .site-footer p.f-line{ color:var(--bone); font-size:15.5px; line-height:1.75; margin:0; }
.site-footer a{ color:var(--bone); text-decoration:none; }
.site-footer a:hover{ color:var(--yellow); }
.footer-tagline{
  text-align:right; margin:26px 0 0;
  font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow);
}

/* legal row — copyright + policy links, still flush to the page bottom */
.footer-legal{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 28px; flex-wrap:wrap;
  margin:30px 0 0; padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13.5px; color:var(--faint);
}
.footer-legal-links{ display:flex; gap:26px; flex-wrap:wrap; }
.site-footer .footer-legal a{ color:var(--faint); }
.site-footer .footer-legal a:hover{ color:var(--yellow); }
.site-footer .footer-legal a[aria-current="page"]{ color:var(--bone); }

/* ------------------------------------------------------------
   13. MOBILE ORDER BAR (home, menu, order)
   ------------------------------------------------------------ */
.order-bar{ display:none; }
@media (max-width: 767px){
  body.has-orderbar{ padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-orderbar .order-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
    background:rgba(20,17,16,.96);
    border-top:1px solid var(--line-strong);
    backdrop-filter:blur(8px);
  }
  .order-bar .btn{ min-height:50px; font-size:17px; padding-inline:10px; }
}

/* ------------------------------------------------------------
   14. MENU PAGE
   ------------------------------------------------------------ */
.order-now{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  flex-wrap:wrap; padding-top:34px;
}
.order-now h2{ margin:0 0 4px; font-size:34px; }
.order-now p{ margin:0; font-size:15.5px; }
.order-now .btns{ display:flex; gap:16px; flex-wrap:wrap; }

.menu-switch-bar{
  background:var(--black); border-bottom:1px solid var(--line);
  padding-block:22px;
}
.menu-switch-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.menu-switch{ display:flex; gap:12px; flex-wrap:wrap; }
.switch-btn{
  min-height:48px; padding:3px 24px 0;
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.05em;
  text-transform:uppercase; border-radius:4px; text-decoration:none;
  display:inline-flex; align-items:center;
  color:var(--bone); border:2px solid var(--line-strong); background:transparent;
}
.switch-btn[aria-pressed="true"], .switch-btn.active{
  background:var(--red); border-color:var(--red); color:#fff;
}
.menu-switch-addr{
  font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}
.pills-bar{ background:var(--black); padding-block:4px 20px; }
.pills{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:6px;
  -webkit-mask-image:linear-gradient(90deg,#000 92%, transparent);
          mask-image:linear-gradient(90deg,#000 92%, transparent);
  scrollbar-width:none;
}
.pills::-webkit-scrollbar{ display:none; }
.pill-link{
  flex:none; display:inline-flex; align-items:center;
  min-height:46px; padding:2px 22px 0; border-radius:999px;
  border:1.5px solid var(--line-strong);
  font-family:var(--display); font-weight:800; font-size:15.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--bone); text-decoration:none; white-space:nowrap;
}
.pill-link:hover{ border-color:var(--bone); }
.pill-link.active, .pill-link[aria-current="true"]{
  background:var(--red); border-color:var(--red); color:#fff;
}

.menu-panel{ padding-block:54px 68px; }
.cat-head{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  margin-bottom:38px;
}
.cat-num{
  font-family:var(--display); font-weight:800; font-size:30px; color:var(--red);
  letter-spacing:.04em;
}
.cat-head h2{ margin:0; font-size:clamp(34px,3.6vw,46px); }
.cat-note{
  margin-left:auto; font-weight:800; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.mi-grid{ columns:2; column-gap:60px; }
.mi{ break-inside:avoid; padding:14px 0 18px; border-bottom:1px solid var(--line); }
.mi-head{ display:flex; align-items:baseline; gap:10px; }
.mi-head h3{
  font-family:var(--body); font-weight:700; font-size:17px; letter-spacing:0;
  text-transform:none; margin:0; line-height:1.3;
}
.leader{
  flex:1; min-width:28px; border-bottom:2px dotted rgba(251,244,230,.26);
  transform:translateY(-5px);
}
.price{
  font-family:var(--display); font-weight:800; font-size:23px; color:var(--yellow);
  letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* an asterisk on a price: ask in store. Replaced the old degree mark, which
   stood for "online listing price" — that distinction is gone now. */
.ask{ font-size:.72em; font-weight:700; vertical-align:super; line-height:0; color:var(--yellow); }
.sec-bone .ask{ color:var(--red); }
.mi-badge{
  display:inline-block; margin:8px 0 0;
  font-weight:800; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow);
}
.mi-badge--red{ color:#ff8a80; }
.mi-desc{ margin:6px 0 0; font-size:14.5px; color:var(--muted); }
.cat-photos{ margin-top:46px; display:grid; gap:30px; }
.cat-photos--two{ grid-template-columns:1fr 1fr; }
.cat-photos--one{ justify-items:center; }
.cat-photos--one figure{ width:min(560px, 100%); }
.cat-photos figure{ position:relative; margin:0; }
.cat-photos img{ width:100%; aspect-ratio:8/5; object-fit:cover; border-radius:12px; }
.cat-photos--one img{ aspect-ratio:7/5; }
.cat-photos figcaption{
  position:absolute; left:22px; bottom:18px;
  font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.65);
}
.menu-footnote{
  padding-block:8px 60px; color:var(--faint); font-size:14px; max-width:760px;
}

/* chips used on festival items */
.chip{
  display:inline-block; vertical-align:middle; margin-left:12px;
  font-family:var(--body); font-weight:800; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 9px 3px; border-radius:3px;
}
.chip--red{ background:var(--red); color:#fff; }
.chip--yellow{ background:var(--yellow); color:var(--black); }

/* festival menu lists (menu page tab + food-truck page) */
.fest-groups{ display:grid; grid-template-columns:1fr 1fr; gap:0 64px; }
.fest-group-label{
  font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:34px 0 4px; padding-bottom:12px;
  border-bottom:1px solid var(--line-strong);
}
.fest-item{
  display:flex; align-items:baseline; gap:12px;
  padding:19px 0; border-bottom:1px solid var(--line);
}
.fest-item .fi-name{
  font-family:var(--display); font-weight:700; font-size:clamp(19px,1.8vw,24px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--bone);
}
.fest-item .price{ font-size:clamp(19px,1.8vw,24px); }

/* ------------------------------------------------------------
   15. FOOD TRUCK PAGE
   ------------------------------------------------------------ */
.ft-hero{ background:var(--red); color:#fff; padding-top:clamp(96px,12vw,150px); }
.ft-band{
  display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:center;
  padding-bottom:clamp(56px,7vw,88px);
}
.ft-band h1{ font-size:clamp(40px,4.6vw,66px); }
.ft-band p{ font-size:17px; max-width:46ch; }
.ft-band img{
  width:100%; aspect-ratio:16/9.6; object-fit:cover; border-radius:14px;
  border:10px solid var(--black); background:var(--black);
}
.book-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:start;
}
.book-grid h2{ font-size:clamp(30px,3vw,40px); }
.bullet-list li{
  position:relative; padding:0 0 14px 24px; font-size:16.5px; color:var(--muted);
}
.bullet-list li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--red);
}
.rather-call{
  border-top:2px solid var(--yellow); margin-top:26px; padding-top:26px;
}
.rather-call .big-phone{
  font-family:var(--display); font-weight:900; font-size:clamp(34px,3.4vw,52px);
  color:#fff; text-decoration:none; letter-spacing:.02em;
}
.rather-call .big-phone:hover{ color:var(--yellow); }

/* ---- Private events: what we work ----
   One running line of display type rather than a tile grid, so no single
   booking type gets arbitrarily highlighted. Wraps at any width on its own. */
.ev-list{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 0; margin:0; padding:0; list-style:none;
}
.ev-list li{
  display:inline-flex; align-items:center;
  font-family:var(--display); font-weight:800;
  font-size:clamp(18px, 2.1vw, 27px);
  line-height:1.15; letter-spacing:.03em; text-transform:uppercase;
  color:var(--bone);
}
/* separator trails each item so a wrapped line still starts flush left */
.ev-list li:not(:last-child)::after{
  content:""; flex:none;
  width:8px; height:8px; margin-inline:clamp(11px, 1.3vw, 18px);
  background:var(--red); transform:rotate(45deg);
}
/* catch-all closer */
.ev-list .ev-more{ color:var(--yellow); }
.ev-note{ color:var(--faint); font-size:14px; margin:30px 0 0; }

/* ---- Private events: food gallery ---- */
.ev-gallery{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px, 3vw, 34px);
  max-width:940px; margin:0 auto;
}
.ev-gallery figure{ position:relative; margin:0; }
.ev-gallery img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:14px; display:block;
}
.ev-gallery figcaption{
  position:absolute; left:20px; bottom:18px;
  font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.ev-menu-cta{ text-align:center; margin:clamp(30px, 4vw, 44px) 0 0; }
.ev-menu-cta--left{ text-align:left; margin-top:28px; }

/* ---- Two-up blocks with a photo or placeholder beside copy ---- */
.split-2{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px, 5vw, 64px); align-items:center;
}
.split-2 img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; }
.split-2 .ph-frame{ aspect-ratio:16/10; }

/* ---- Service / spec cards (how we show up, what arrives, why book us) ---- */
.svc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
/* a long nowrap run (e.g. a [Confirm] tag) must never push a column
   past the container — grid's auto minimum would otherwise allow it */
.svc-grid > *{ min-width:0; }
.svc-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 16px 30px;
}
.svc-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.svc-card .ph-frame{ aspect-ratio:16/10; }
.svc-card h3{ font-size:25px; margin:20px 0 10px; padding-inline:8px; }
.svc-card p{ color:var(--muted); font-size:14.5px; margin:0; padding-inline:8px; }

/* ---- Labelled spec list: good to know / before we can quote ---- */
.spec-list{ margin:0; padding:0; list-style:none; }
.spec-list li{ position:relative; padding:18px 0 18px 26px; border-bottom:1px solid var(--line); }
.spec-list li::before{
  content:""; position:absolute; left:2px; top:1.6em;
  width:8px; height:8px; border-radius:50%; background:var(--yellow);
}
.spec-list h3{
  font-family:var(--display); font-weight:800; font-size:18px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bone); margin:0 0 6px;
}
.spec-list p{ color:var(--muted); font-size:14.5px; margin:0; }
/* the same list on a bone band — the three service modes on events.html */
.sec-bone .spec-list li{ border-bottom-color:rgba(20,17,16,.13); }
.sec-bone .spec-list li::before{ background:var(--red); }
.sec-bone .spec-list h3{ color:var(--black); }
.sec-bone .spec-list p{ color:var(--ink-muted); }
.ev-min{ max-width:60ch; margin:34px 0 0; font-size:17px; }
.ask-note{ font-size:13px; line-height:1.5; margin:14px 0 0; color:var(--faint); }
.sec-bone .ask-note{ color:#8a8178; }
.form-reply{
  font-family:var(--display); font-weight:800; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--yellow);
  margin:16px 0 0;
}

/* ---- Festival logos beside the stand video (vendor page) ---- */
.biglots-grid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(36px, 5vw, 72px); align-items:center;
}
.biglots{ display:flex; align-items:center; gap:clamp(30px, 4vw, 56px); flex-wrap:wrap; }
.biglots img{ width:auto; flex:none; }
/* second row sits under the first, divided by a hairline */
.biglots--more{
  margin-top:30px; padding-top:30px;
  border-top:1px solid rgba(20,17,16,.14);
}
.lolla-video{
  margin:0; justify-self:center;
  width:min(290px, 100%); aspect-ratio:9/16;
  border-radius:16px; overflow:hidden; background:var(--black);
  box-shadow:0 24px 54px rgba(20,17,16,.28);
}
.lolla-video video{ display:block; width:100%; height:100%; object-fit:cover; }
/* ---- Press knockouts on dark (vendor page) ---- */
.press-logos{ display:flex; align-items:center; gap:clamp(26px, 4vw, 48px); flex-wrap:wrap; margin-top:34px; }
.press-logos img{ width:auto; flex:none; }
.press-logos .logo-abc7{ height:44px; }
.press-logos .logo-wgntv{ height:28px; }
.press-logos .logo-nbc5{ height:40px; }

/* ------------------------------------------------------------
   16. FORMS
   ------------------------------------------------------------ */
.form-head{ font-size:clamp(24px,2.2vw,30px); margin-bottom:28px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; }
.form-grid .span-2{ grid-column:1 / -1; }
.field label{
  display:block; font-weight:700; font-size:14.5px; margin-bottom:8px; color:var(--bone);
}
.field .req{ font-weight:400; color:var(--faint); font-size:13px; }
.field input, .field select, .field textarea{
  width:100%; min-height:52px; padding:12px 14px;
  background:var(--black); color:var(--bone);
  border:1px solid rgba(251,244,230,.18); border-radius:6px;
  font-family:var(--body); font-size:16px;   /* 16px stops iOS zoom-on-focus */
}
.field textarea{ min-height:130px; resize:vertical; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FBF4E6' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:42px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:3px solid var(--yellow); outline-offset:1px; border-color:transparent;
}
.field input::placeholder, .field textarea::placeholder{ color:#847c74; }
.check-row{
  display:flex; align-items:flex-start; gap:12px; font-size:14.5px; font-weight:600;
}
.check-row input{
  width:20px; height:20px; min-height:0; margin-top:2px; accent-color:var(--red); flex:none;
}
form .btn{ margin-top:6px; }

/* ------------------------------------------------------------
   17. CATERING PAGE
   ------------------------------------------------------------ */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.pkg{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:34px 32px 36px;
}
.pkg h3{ font-size:27px; margin-bottom:8px; }
.pkg .pkg-sub{ color:var(--muted); font-size:14.5px; margin:0 0 18px; }
.pkg .pkg-price{
  font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--yellow); margin:0 0 18px;
}
.pkg ul li{ padding:4px 0; color:var(--muted); font-size:15px; }
.strip-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px;
}
.strip-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.split-60{ display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:start; }
.vendor-sec{ background:var(--red); color:#fff; }
.vendor-sec .lede{ max-width:560px; }
.vendor-card{
  margin-top:44px; background:var(--black); border-radius:16px;
  padding:clamp(28px,4vw,48px); max-width:900px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}

/* ------------------------------------------------------------
   18. ABOUT PAGE — editorial timeline
   ------------------------------------------------------------ */
/* ---- Intro: centred, no side image, so the title reads as a lead-in ---- */
.tl-intro{ max-width:780px; margin:0 auto; text-align:center; }
.tl-intro h2{
  color:var(--red); font-size:clamp(32px, 4vw, 54px); margin:0 0 20px;
}
.tl-intro-copy{
  color:var(--muted); font-size:17px; max-width:60ch; margin:0 auto 24px;
}
.tl-intro-copy strong{ color:var(--bone); font-weight:700; }
.tl-cue{
  display:inline-block; text-decoration:none;
  font-weight:800; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); border-bottom:2px solid var(--red); padding-bottom:6px;
}
.tl-cue:hover{ color:var(--bone); border-bottom-color:var(--bone); }
.tl-squiggle{
  display:block; width:min(430px, 72%); height:auto;
  margin:24px auto 4px; color:var(--red);
}

/* ---- The rail ---- */
.tl{ position:relative; margin:0; padding:0; list-style:none; }
.tl::before{
  content:""; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:rgba(251,244,230,.18); transform:translateX(-50%);
}
.tl-row{
  position:relative; display:grid;
  grid-template-columns:1fr 150px 1fr;
  align-items:center; padding-block:30px;
}
.tl-text{ grid-column:1; grid-row:1; }
.tl-rail{ grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; gap:14px; }
.tl-media{ grid-column:3; grid-row:1; margin:0; }
/* even rows mirror: media left, copy right */
.tl-row:nth-child(even) .tl-text{ grid-column:3; }
.tl-row:nth-child(even) .tl-media{ grid-column:1; }
/* the year label always sits on the same side as that row's photo */
.tl-row:nth-child(even) .tl-rail{ flex-direction:row-reverse; }

.tl-dot{
  width:11px; height:11px; border-radius:50%; flex:none;
  border:2px solid var(--red); background:var(--black);
}
.tl-row:first-child .tl-dot{ background:var(--red); }
.tl-yr{
  font-family:var(--display); font-weight:800; font-size:24px;
  letter-spacing:.06em; color:var(--red); white-space:nowrap;
}
.tl-text h3{ color:var(--red); font-size:clamp(21px, 2.1vw, 27px); margin:0 0 10px; }
.tl-text p{ color:var(--muted); font-size:15.5px; margin:0; max-width:46ch; }

/* 16/9 matches the native ratio of the garage, line and trailer shots, so
   none of them crop — it also keeps the garage photo's printed border intact */
.tl-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }
.tl-media .ph-frame{ aspect-ratio:16/9; padding:18px; }
/* the belt is a portrait plate — its own ratio so the whole belt shows */
.tl-media--tall img{ aspect-ratio:987/1594; max-width:264px; }
/* portrait stand shot, framed to keep the crew and the food in view */
.tl-media--crop img{ aspect-ratio:4/5; max-width:286px; object-position:center 20%; }
/* festival stand: 9:16 source cropped to 3/4 and pushed down the frame so the
   sky falls away and the menu board sits above the burger */
.tl-media--stand img{ aspect-ratio:3/4; max-width:300px; object-position:center 78%; }
/* low-res phone capture: hold the neon sign in frame */
.tl-media--sign img{ object-position:center 36%; }
/* portrait media hugs the rail-facing edge of its column */
.tl-row:nth-child(odd) .tl-media--tall img,
.tl-row:nth-child(odd) .tl-media--crop img,
.tl-row:nth-child(odd) .tl-media--stand img{ margin-right:auto; }
.tl-row:nth-child(even) .tl-media--tall img,
.tl-row:nth-child(even) .tl-media--crop img,
.tl-row:nth-child(even) .tl-media--stand img{ margin-left:auto; }

/* A video sits in the rail where a photo would. .vplayer brings its own
   position/aspect/overlay; .tl-media only has to place it in the grid and
   push it to the same edge the photos use on that side. */
.tl-media.vplayer{ width:min(248px, 100%); }
.tl-media.vplayer--45{ width:min(286px, 100%); aspect-ratio:4/5; }
.tl-row:nth-child(odd) .tl-media.vplayer{ justify-self:start; }
.tl-row:nth-child(even) .tl-media.vplayer{ justify-self:end; }
.tl-media.vplayer .vplayer-label{ font-size:19px; }
.tl-media.vplayer .play-dot{ width:58px; height:58px; }
.tl-media.vplayer .play-dot::after{ border-width:10px 0 10px 17px; margin-left:4px; }

/* TODAY — the rail ends here, so the row centres under the line and the dot
   caps it rather than sitting beside another photo. */
@media (min-width: 881px){
  .tl-row--today{
    grid-template-columns:1fr;
    justify-items:center; text-align:center;
    padding-top:16px;
  }
  .tl-row--today > *{ position:relative; z-index:1; }
  .tl-row--today .tl-rail{
    grid-column:1 !important; grid-row:1 !important;
    flex-direction:column !important; gap:14px;
  }
  .tl-row--today .tl-text{ grid-column:1 !important; grid-row:2; margin-top:24px; }
  .tl-row--today .tl-text p{ max-width:52ch; margin-inline:auto; }
  .tl-row--today .tl-chips{ justify-content:center; }
  .tl-row--today .tl-dot{ width:17px; height:17px; background:var(--red); }
  /* mask the shared rail from the dot down, so the line terminates on it */
  .tl-row--today::after{
    content:""; position:absolute; z-index:0;
    left:50%; transform:translateX(-50%);
    top:32px; bottom:0; width:3px; background:var(--black);
  }
}

.tl-chips{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.tl-chip{
  display:inline-flex; align-items:center; min-height:40px; padding:2px 20px 0;
  border-radius:999px; background:var(--yellow); color:var(--black);
  font-family:var(--display); font-weight:800; font-size:15px;
  letter-spacing:.05em; text-transform:uppercase;
}
.owners-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:12px; }
.owner img{ width:100%; aspect-ratio:4/4.4; object-fit:cover; border-radius:12px; }
.owner h3{ margin:24px 0 4px; font-size:32px; }
.owner .eyebrow{ margin-bottom:12px; }
/* the bios run to two paragraphs now, so they need space between them */
.owner p{ color:var(--muted); font-size:15.5px; margin:0 0 14px; max-width:46ch; }
.owner p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------
   19. NEWS PAGE
   ------------------------------------------------------------ */
.award-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center;
}
.award-grid h2{ font-size:clamp(34px,3.6vw,52px); }
.award-grid .small-note{ font-size:13.5px; color:rgba(255,255,255,.82); margin:16px 0 0; }

/* The 9:16 player drives this band's height, so the section carries
   tighter padding than the site default to keep the red block compact. */
.award-sec{ padding-block: clamp(40px, 4.5vw, 58px); }

/* ---- Award video: vertical 9:16 player ---- */
.vplayer{
  position:relative; margin:0; justify-self:center;
  width:min(248px, 100%); aspect-ratio:9/16;
  border-radius:16px; overflow:hidden; background:var(--black);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}
.vplayer-el{
  display:block; width:100%; height:100%; object-fit:cover; background:var(--black);
}
.vplayer-nosupport{ color:var(--bone); padding:20px; font-size:15px; }
/* Poster overlay: only shown once JS has taken the native controls off,
   so a no-JS visitor still gets a plain, working video element. */
.vplayer-play{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:linear-gradient(180deg, rgba(10,8,7,.12) 40%, rgba(10,8,7,.72));
  border:0; cursor:pointer; width:100%;
  transition: opacity .25s, visibility .25s;
}
.vplayer-play .play-dot{
  transition: transform .2s var(--ease-out);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.vplayer-play:hover .play-dot{ transform:scale(1.08); }
.vplayer-label{
  font-family:var(--display); font-weight:800; font-size:21px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.vplayer.playing .vplayer-play{
  opacity:0; visibility:hidden; pointer-events:none;
}
@media (max-width:767px){
  .vplayer{ width:min(260px, 100%); }
  .vplayer-label{ font-size:18px; }
}
.reel-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:28px;
}
.reel{
  aspect-ratio:9/16; border:2px dashed rgba(251,244,230,.22); border-radius:16px;
  background:radial-gradient(120% 90% at 50% 20%, #2a1512 0%, var(--panel) 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:18px; text-align:center;
}
.reel:nth-child(even){ transform:translateY(44px); }
.reel .play-dot{ width:58px; height:58px; }
.reel .play-dot::after{ border-width:9px 0 9px 15px; }
.reel .reel-title{
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; margin:0;
}
.reel .reel-handle{
  font-weight:800; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0;
}
.videos-sec .sec-head p{ max-width:54ch; margin:14px 0 0; }
@media (min-width:1100px){
  .videos-sec{ padding-bottom:150px; } /* room for the staggered frames */
}

/* ------------------------------------------------------------
   20. CONTACT PAGE
   ------------------------------------------------------------ */
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.contact-card{
  background:var(--panel); border-radius:12px; padding:40px 38px;
}
.contact-card--restaurant{ border:1px solid rgba(209,52,43,.55); }
.contact-card--truck{ border:1px solid rgba(255,210,63,.5); }
.contact-card h2{ font-size:clamp(28px,2.6vw,40px); }
.contact-card .big-line{
  font-family:var(--display); font-weight:800; font-size:clamp(24px,2.3vw,32px);
  letter-spacing:.02em; color:var(--yellow); text-decoration:none; display:inline-block;
  margin:4px 0 14px;
}
.contact-card .big-line:hover{ color:#fff; }
.contact-card p{ color:var(--muted); margin:0 0 4px; }
.contact-card .btns{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.contact-form-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:72px; align-items:start; }

/* ------------------------------------------------------------
   21. ORDER PAGE
   ------------------------------------------------------------ */
.pickup-card{
  display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--red); color:#fff;
  border:1px solid rgba(255,210,63,.55); border-radius:14px; overflow:hidden;
}
.pickup-card .pc-body{ padding:clamp(30px,4vw,54px); align-self:center; }
.pickup-card h2{ font-size:clamp(30px,3.4vw,48px); }
.pickup-card p{ max-width:44ch; }
.pickup-card .btns{ display:flex; gap:16px; flex-wrap:wrap; margin:26px 0 0; }
.pickup-card .fine{ font-size:13px; margin:18px 0 0; color:rgba(255,255,255,.85); }
.pickup-card img{ width:100%; height:100%; object-fit:cover; min-height:340px; }
.apps-grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
}
.app-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:34px 32px 36px;
}
.app-card h3{ font-size:26px; margin-bottom:6px; }
.app-card p{ color:var(--muted); font-size:14.5px; margin:0 0 22px; }

/* ------------------------------------------------------------
   22. LEGAL PAGES — privacy, terms
   Long-form prose: headings keep the display face but drop far
   below the 58px marketing h2, and the measure is capped well
   short of .container--narrow so the lines stay readable.
   ------------------------------------------------------------ */
.legal{ max-width:720px; }

.legal h2{
  font-size:clamp(21px, 2.1vw, 27px);
  line-height:1.02;
  letter-spacing:.03em;
  margin:46px 0 14px;
}
.legal > h2:first-of-type{ margin-top:0; }

.legal p{
  font-size:16.5px; line-height:1.78;
  color:var(--ink-muted);
  margin:0 0 1.1em;
}
.legal p.legal-intro{
  font-size:18.5px; font-weight:600; line-height:1.7;
  color:var(--black);
  margin-bottom:34px; padding-bottom:30px;
  border-bottom:1px solid rgba(20,17,16,.13);
}

/* red diamond markers, the same device the events page list uses */
.legal ul{ list-style:none; margin:0 0 1.5em; padding:0; }
.legal li{
  position:relative; padding-left:24px; margin:0 0 12px;
  font-size:16.5px; line-height:1.72; color:var(--ink-muted);
}
.legal li:last-child{ margin-bottom:0; }
.legal li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:8px; height:8px; background:var(--red);
  transform:rotate(45deg);
}

.legal a{
  color:var(--red); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.legal a:hover{ color:var(--black); }

.legal-contact{ font-size:16.5px; line-height:1.9; color:var(--ink-muted); }

.legal p.legal-sibling{
  margin:48px 0 0; padding-top:26px;
  border-top:1px solid rgba(20,17,16,.13);
  font-size:15.5px;
}

@media (max-width: 767px){
  .legal h2{ margin-top:38px; }
  .legal p, .legal li, .legal-contact{ font-size:16px; }
  .legal p.legal-intro{ font-size:17.5px; }
}

/* ------------------------------------------------------------
   23. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1023px){
  .biglots-grid{ grid-template-columns:1fr; justify-items:start; }
  .lolla-video{ justify-self:start; width:min(260px, 100%); }
  .svc-grid{ grid-template-columns:1fr; max-width:560px; }
  .menu-cards{ grid-template-columns:repeat(2,1fr); }
  .post-tiles{ grid-template-columns:repeat(2,1fr); }
  .reel-row{ grid-template-columns:repeat(3,1fr); }
  .pkg-grid{ grid-template-columns:1fr; max-width:560px; }
  .strip-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 980px){
  /* stacked: the bone slab turns into a horizon the phone stands on */
  .social-grid{ grid-template-columns:1fr; gap:44px; justify-items:center; }
  .social-copy{ width:100%; }
  .social-phone{ justify-content:center; }
  .social-phone::before{
    left:-100vw; right:-100vw; top:19%; bottom:calc(-1 * var(--sec-pad));
  }
  .iph{ --pw: min(336px, 76vw); }
}
/* Rail timeline collapses to a single left-hand rail */
@media (max-width: 880px){
  .tl::before{ left:7px; transform:none; }
  .tl-row{ grid-template-columns:1fr; gap:14px; padding:22px 0 22px 34px; }
  .tl-rail{
    grid-column:1 !important; grid-row:1;
    justify-content:flex-start; flex-direction:row !important;
    gap:12px; margin-left:-34px; padding-left:2px;
  }
  .tl-text{ grid-column:1 !important; grid-row:2; }
  .tl-media{ grid-column:1 !important; grid-row:3; }
  .tl-text p{ max-width:none; }
  .tl-media--tall img{ max-width:224px; }
  .tl-media--crop img{ max-width:240px; }
  .tl-media--stand img{ max-width:250px; }
  .tl-row:nth-child(odd) .tl-media.vplayer,
  .tl-row:nth-child(even) .tl-media.vplayer{ justify-self:start; }
  /* the left-hand rail stops on the Today dot the same way */
  .tl-row--today{ position:relative; }
  .tl-row--today::after{
    content:""; position:absolute; z-index:0;
    left:6px; top:30px; bottom:0; width:3px; background:var(--black);
  }
  .tl-row--today > *{ position:relative; z-index:1; }
  .tl-row--today .tl-dot{ background:var(--red); }
  .tl-row:nth-child(even) .tl-media--tall img,
  .tl-row:nth-child(even) .tl-media--crop img,
  .tl-row:nth-child(even) .tl-media--stand img{ margin-left:0; }
  .tl-squiggle{ display:none; }
}
@media (max-width: 767px){
  .sec{ padding-block:56px; }
  .stats{ grid-template-columns:1fr; gap:16px; padding-bottom:24px; }
  .stat{ display:flex; align-items:baseline; gap:14px; }
  .stat-num, .social-copy .stat-num{ font-size:44px; }
  .stat-label{ margin:0; font-size:14px; }
  .social-lead p{ margin-bottom:20px; }
  .about-block, .truck-block, .findus,
  .book-grid, .split-60, .split-2, .award-grid, .contact-cards,
  .contact-form-grid, .owners-grid, .ft-band{
    grid-template-columns:1fr; gap:36px;
  }
  .biglots{ gap:26px; }
  .lolla-video{ width:min(240px, 100%); }
  .ev-gallery{ grid-template-columns:1fr; max-width:380px; }
  .ev-gallery figcaption{ font-size:18px; }
  .menu-cards, .post-tiles, .strip-grid, .apps-grid,
  .fest-groups, .cat-photos--two{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .span-2{ grid-column:auto; }
  .mi-grid{ columns:1; }
  .menu-card p{ min-height:0; }
  .pickup-card{ grid-template-columns:1fr; }
  .pickup-card img{ min-height:240px; }
  .press-row{ flex-wrap:wrap; gap:14px 22px; }
  .press-row .pr-logo{ width:96px; }
  .sec-head .btn{ margin-top:4px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .footer-tagline{ text-align:left; }
  .footer-legal{ justify-content:flex-start; }
  .hero h1{ font-size:clamp(40px,11vw,52px); }
  .videos-sec{ padding-bottom:56px; }
  .order-now{ padding-top:22px; }
  .menu-switch-inner{ flex-direction:column; align-items:flex-start; }
}

/* ------------------------------------------------------------
   24. REDUCED MOTION — everything rests in its final visible state
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .marquee-track, .ft-marquee-track, .btn-sweep::after,
  html.anim .hero .wi, html.anim .hero-ctas{
    animation:none !important;
  }
  html.anim:not(.anim-done) .w{ overflow:visible; padding:0; margin:0; }
  html.anim .hero .wi{ opacity:1; transform:none; }
  html.anim .hero-ctas{ opacity:1; transform:none; }
  .marquee-track{ transform:none; }
  .marquee{ overflow-x:auto; }
  .st-slide, .st-vid, .st-media img, .st-foot{ transition:none; }
  .st-media img{ transform:none; }
  /* header rests solid — its end state */
  .site-header{
    animation:none !important;
    background:#141110; box-shadow:0 10px 26px rgba(0,0,0,.5);
    border-bottom:2px solid var(--yellow);
  }
  .utility-bar, .header-main, .logo img{ animation:none !important; transition:none !important; }
  .header-main{ height:62px; }
  .logo img{ width:118px; }
  .utility-bar{ height:0; opacity:0; }
  html.js .main-nav{ transition:none; }
  *{ scroll-behavior:auto !important; }
}