/* Copied from extra.css. url() paths are relative to the site root. */
/* FP-0019 r3 (v3) Sipps On Wheels: r1f's "signal" layout and colours + v2's typography, element by element (see the r3 block at the end).
   Original r1 notes: "signal". Food-truck fish, wings & tacos, built the r4/r5 way.
   Their signature is the traffic light they put next to their name on Instagram, so the one bold move is a
   red / amber / green signal band plus giant condensed Anton headlines on an asphalt-black hero.
   White page, one red accent for links/buttons, amber only as a background for dark text.
   Colors come from content.json tokens (var(--c-*)); the three signal colors are the only raw hex here. */
.layout-signal{--sig-red:#C8102E;--sig-amber:#FFB81C;--sig-green:#1E9E4A;font-size:1.0625rem;line-height:1.6}
.layout-signal h1,.layout-signal h2,.layout-signal h3{font-weight:400;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.layout-signal h1{font-size:clamp(2.6rem,12.5vw,5rem);line-height:.98}
.layout-signal h2{font-size:clamp(1.9rem,8vw,3rem);line-height:1.02}
.layout-signal h3{font-size:1.35rem;line-height:1.15;letter-spacing:.02em}
.layout-signal section{padding-block:2.75rem}
.layout-signal p{max-width:40rem}
.layout-signal .section-intro{max-width:34rem}

/* the signal band: three bars, under the header and above the footer */
.layout-signal .site-header,.layout-signal .site-footer{position:relative}
.layout-signal .site-header::after,.layout-signal .site-footer::before{content:"";position:absolute;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--sig-red) 0 33.33%,var(--sig-amber) 33.33% 66.66%,var(--sig-green) 66.66% 100%)}
.layout-signal .site-header::after{bottom:-8px}
.layout-signal .site-footer::before{top:0}

/* header: white, logo or name, nav wraps on phones (r1c: no cut-off at 320/360) */
.layout-signal .site-header{background:#fff;border-bottom:0;z-index:5}
.layout-signal .site-header .wrap{padding-block:.6rem .4rem;row-gap:.2rem}
.layout-signal .brand{font-family:var(--f-heading);text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;color:var(--c-text)}
.layout-signal .brand-wordmark img{--logo-h:40px}
.layout-signal .site-header .btn-order{border-radius:4px;font-weight:700}
.layout-signal .site-nav a{font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.04em}
.layout-signal .site-nav a[aria-current="page"]{color:var(--c-text);text-decoration:underline;text-decoration-color:var(--sig-red);text-decoration-thickness:3px;text-underline-offset:.35em}
@media (max-width:47.99rem){
  /* r1c: the whole nav fits: it wraps onto a second row if needed, tighter gap, every link a >=44px tap target */
  .layout-signal .site-nav{width:100%}
  .layout-signal .site-nav ul{flex-wrap:wrap;gap:0 .85rem;padding:0}
  .layout-signal .site-nav a{white-space:nowrap;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:.2rem .1rem}
}
@media (max-width:23rem){.layout-signal .site-nav ul{gap:0 .6rem}.layout-signal .site-nav a{font-size:.95rem;letter-spacing:.03em}}

/* buttons: square-ish, heavy, thumb-sized */
.layout-signal .btn{border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;min-height:52px;padding-inline:1.4rem;touch-action:manipulation}
.layout-signal .btn-primary{background:var(--c-primary);color:var(--c-on-primary,#fff)}
.layout-signal .hero .btn-secondary{color:var(--c-hero-text,#fff);border-color:currentColor;background:transparent}

/* hero: asphalt black, giant type; photo edge to edge on phones, side by side on desktop */
.layout-signal .hero{padding:0;background:var(--c-hero-bg);color:var(--c-hero-text)}
.layout-signal .hero h1{color:var(--c-hero-text)}
.layout-signal .hero .eyebrow{font-weight:700;font-size:1rem;color:var(--sig-amber);text-transform:none;letter-spacing:0;margin-bottom:.4rem}
.layout-signal .hero .wrap{display:grid;gap:1.4rem;padding-block:2.25rem 2.5rem}
.layout-signal .hero picture{order:-1;margin:-2.25rem -1.25rem 0}
.layout-signal .hero-art{width:100%;max-width:none;aspect-ratio:4/3;object-fit:cover}
.layout-signal .hero p.lead{font-size:1.15rem;opacity:.92;max-width:32rem}
@media (min-width:52rem){
  .layout-signal .hero .wrap{grid-template-columns:1fr 1.15fr;gap:3.5rem;align-items:center;padding-block:3.5rem}
  .layout-signal .hero picture{order:2;margin:0}
  .layout-signal .hero-art{border-radius:var(--radius);aspect-ratio:3/2}
}

/* today at the truck: amber band, live open/closed light */
.layout-signal .today-strip{background:var(--c-accent);color:var(--c-on-accent);padding-block:1.8rem 2rem}
.layout-signal .today-strip h2{color:var(--c-on-accent);font-size:clamp(1.7rem,7vw,2.4rem);margin-bottom:.35rem}
.layout-signal .today-strip .wrap{display:grid;gap:1rem 3rem}
@media (min-width:52rem){.layout-signal .today-strip .wrap{grid-template-columns:1.1fr 1fr;align-items:start}}
.layout-signal .today-now{font-weight:700;font-size:1.2rem;margin:0 0 .6rem}
.layout-signal .today-now:not([hidden]){display:flex;align-items:center;gap:.55rem}
.layout-signal .today-now::before{content:"";flex:none;width:.95rem;height:.95rem;border-radius:50%;background:var(--sig-red);box-shadow:0 0 0 3px #141414}
.layout-signal .today-now.is-open::before{background:var(--sig-green)}
.layout-signal .today-strip .today-now,.layout-signal .today-strip .today-now.is-open,.layout-signal .today-strip .today-now.is-closed,.layout-signal .today-strip .tz,.layout-signal .today-strip .hours th,.layout-signal .today-strip .hours td{color:var(--c-on-accent)}
.layout-signal .hours tr.is-today th,.layout-signal .hours tr.is-today td{box-shadow:none;border-color:#141414}
.layout-signal .hours{font-variant-numeric:tabular-nums;max-width:26rem}
.layout-signal .hours th{font-weight:700}
.layout-signal .hours td{text-align:right;white-space:nowrap}
.layout-signal .hours tr.is-today{background:rgba(255,255,255,.45)}
.layout-signal .today-strip .tz{font-size:.95rem}
.layout-signal .today-strip address{font-style:normal;font-weight:700;font-size:1.15rem;margin-bottom:.7rem}
.layout-signal .today-place{margin:0 0 .7rem;font-weight:700}
.layout-signal .today-dir{margin:0}
.layout-signal .today-strip .btn-secondary{background:#141414;color:#fff;border-color:#141414;min-height:48px}

/* dated specials: ticket card with a red edge; whole block disappears when nothing is current */
.layout-signal #specials{background:#fff;padding-block:2.25rem 2rem}
.layout-signal #specials .specials{gap:1rem}
.layout-signal #specials .special{background:var(--c-tag-bg);border:2px solid #141414;border-left:10px solid var(--sig-red);border-radius:var(--radius);box-shadow:none}
.layout-signal #specials .when{font-weight:700;color:var(--c-text);font-size:1rem;margin-bottom:.25rem}

/* gallery: 2-up squares on phones, 3 across on desktop */
.layout-signal #gallery{background:var(--c-hero-bg);color:var(--c-hero-text)}
.layout-signal #gallery h2{color:var(--c-hero-text)}
.layout-signal .gallery{grid-template-columns:1fr 1fr;gap:.6rem}
@media (min-width:52rem){.layout-signal .gallery{grid-template-columns:repeat(3,1fr);gap:1rem}}
.layout-signal .gallery img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.layout-signal .gallery figcaption{font-size:1rem;line-height:1.35;color:var(--c-hero-text);opacity:.9}

/* about */
.layout-signal #about{background:var(--c-surface)}
.layout-signal #about img{border-radius:var(--radius)}

/* follow strip */
.layout-signal .strip-sec{padding-block:1.6rem 1.8rem;border-block:1px solid var(--c-border)}
.layout-signal .strip-sec h2{font-size:1.6rem;margin-bottom:.4rem}

/* contact */
.layout-signal .link-list a{border-radius:4px;background:#fff;justify-content:flex-start;font-weight:700}
.layout-signal .link-list a:hover{border-color:var(--c-text)}

/* footer */
.layout-signal .site-footer{padding-top:calc(8px + 1.5rem);font-size:1rem}

/* menu page: board-style headings, no prices */
.layout-signal .menu-head{padding-block:2rem .75rem}
.layout-signal .menu-order a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-link);font-weight:700}
.layout-signal .cat-nav{background:#fff;box-shadow:none}
.layout-signal .cat-nav a{background:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.layout-signal .cat-nav a[aria-current="true"]{background:#141414;border-color:#141414;color:#fff}
.layout-signal .menu-cat h2{margin-bottom:.25rem;border-bottom:6px solid var(--sig-amber);display:inline-block;padding-bottom:.1rem}
.layout-signal .item{border-bottom:1px solid var(--c-border);padding-block:1.1rem}
.layout-signal .item h3{font-size:1.3rem}
.layout-signal .item .desc{font-size:1rem}

@media (prefers-reduced-motion:reduce){.layout-signal *{transition:none!important;animation:none!important}}

/* r1d: real weekly hours from Google (30 Oct) — the r1b one-line hours styling is gone; normal table again. */
.layout-signal #visit .hours{max-width:24rem}
.layout-signal #visit .hours td{text-align:right;white-space:nowrap}
.layout-signal #visit .tz{margin-top:.6rem;font-size:.95rem;opacity:.85}
/* r1c: hours line in the hero + location section (map, truck photo, pop-up note) */
.layout-signal .hero .hero-hours{font-weight:700;font-size:1.05rem;color:var(--sig-amber);max-width:32rem;margin:.9rem 0 0}
.layout-signal #visit .location-note{max-width:32rem}
.layout-signal #visit .map-embed{border-radius:4px}
.layout-signal #visit .map-embed iframe{height:300px}
@media (min-width:52rem){.layout-signal #visit .map-embed iframe{height:360px}}
.layout-signal #visit .visit-photo img{border-radius:4px;aspect-ratio:3/2;object-fit:cover;height:auto}
/* r1d: open-now line, rating, Good to know, home QR, DoorDash button */
.layout-signal #visit .today-now{font-size:1.15rem;margin:.1rem 0 .5rem}
.layout-signal #visit .today-now::before{box-shadow:0 0 0 2px #141414}
.layout-signal .hero .hero-rating a{color:var(--c-hero-text);text-decoration-color:var(--sig-amber)}
.layout-signal .hero .hero-rating .star{color:var(--sig-amber)}
.layout-signal #visit .good-to-know{margin:.25rem 0 1rem}
.layout-signal .hero .btn-row{flex-wrap:wrap}
/* r1d: today row in the white Hours block keeps a red marker (strip rule above removes it) */
.layout-signal #visit .hours tr.is-today th{box-shadow:inset 4px 0 0 var(--sig-red)}
/* r1e: Today's spot box: amber band under the hero, red pin badge, map on the right (desktop) / below (phone) */
.layout-signal .todays-spot{background:var(--sig-amber);color:#141414;border-bottom:3px solid #141414;padding-block:1.6rem 1.9rem}
.layout-signal .todays-spot h2{color:#141414;font-size:clamp(1.8rem,7.5vw,2.6rem);display:flex;align-items:center;gap:.6rem}
.layout-signal .todays-spot h2::before{content:"";flex:none;width:1rem;height:1rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--sig-red);box-shadow:0 0 0 3px #141414}
.layout-signal .todays-spot .spot-label{font-family:var(--font-body,inherit);text-transform:uppercase;letter-spacing:.04em;font-size:1rem}
.layout-signal .todays-spot address{font-weight:700;font-size:1.2rem}
.layout-signal .todays-spot .btn-primary{background:#141414;color:#fff}
.layout-signal .todays-spot .map-embed{border:3px solid #141414;border-radius:4px}
.layout-signal .todays-spot .map-embed iframe{height:260px}
@media (min-width:52rem){.layout-signal .todays-spot .map-embed iframe{height:300px}}
.layout-signal #visit .spot-ref a{font-weight:700}

/* ===== r3 / v3 (30 Oct 2026, Jason via Anna 19:51): r1f's layout, colours, photos and structure; every piece of lettering
   follows v2 (r2/extra.css "fishfry") exactly: same font per element, Title/sentence case (no r1f caps), same weights,
   sizes, line-heights and letter-spacing. Fonts: Alfa Slab One headings/brand/buttons/prices/review authors,
   Libre Franklin body + nav + chips (theme.fonts.body), Caveat Brush on the same elements as v2 only
   (hero eyebrow, spot label, special days, gallery captions, menu-category notes). Self-hosted, OFL. */
@font-face{font-family:"Caveat Brush";src:url("assets/fonts/CaveatBrush-Regular.subset.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.layout-signal{--hand:"Caveat Brush","Comic Sans MS",cursive;font-size:1.0625rem;line-height:1.62}
.layout-signal h1,.layout-signal h2,.layout-signal h3{font-weight:400;text-transform:none;letter-spacing:.005em}
.layout-signal h1{font-size:clamp(2.4rem,10.5vw,4.4rem);line-height:1.02}
.layout-signal h2,.layout-signal .today-strip h2,.layout-signal .todays-spot h2{font-size:clamp(1.85rem,7.4vw,2.7rem);line-height:1.08}
.layout-signal h3{font-size:1.25rem;line-height:1.2}
.layout-signal .strip-sec h2{font-size:1.5rem}
.layout-signal .item h3{font-size:1.2rem}
/* header */
.layout-signal .brand{font-family:var(--f-heading);text-transform:none;font-size:1.45rem;letter-spacing:normal}
.layout-signal .site-nav a{font-weight:700;font-size:1rem;text-transform:none;letter-spacing:.02em}
@media (max-width:23rem){.layout-signal .site-nav a{font-size:.95rem;letter-spacing:.02em}}
/* buttons: v2 sets them in the heading slab, normal weight, no caps */
.layout-signal .btn{font-family:var(--f-heading);font-weight:400;text-transform:none;letter-spacing:.02em}
/* hero */
.layout-signal .hero .eyebrow{font-family:var(--hand);font-weight:700;font-size:1.55rem;line-height:1.1;text-transform:none;letter-spacing:0;margin:0 0 .3rem}
.layout-signal .hero p.lead{font-size:1.15rem}
.layout-signal .hero .hero-hours{font-weight:700;font-size:1.0625rem}
/* today's spot */
.layout-signal .todays-spot .spot-label{font-family:var(--hand);font-weight:800;text-transform:none;letter-spacing:0;font-size:1.6rem;line-height:1.1;margin:.2rem 0 .3rem}
.layout-signal .todays-spot address{font-weight:700;font-size:1.2rem}
/* specials */
.layout-signal #specials .when,.layout-signal .special .when{font-family:var(--hand);font-weight:700;font-size:1.4rem;line-height:1.1;margin-bottom:.3rem}
/* gallery (r1f 4:3 crops of real photos; captions, where a variant has them, in Caveat Brush like v2) */
.layout-signal #gallery .section-intro{color:var(--sig-amber)} /* r1f/v3 colour, readable on the black gallery band (variant B intro) */
.layout-signal .gallery img{aspect-ratio:4/3}
.layout-signal .gallery figcaption{font-family:var(--hand);font-size:1.25rem;line-height:1.2;opacity:1;margin-top:.4rem}
/* reviews */
.layout-signal .review-stars{letter-spacing:.12em;font-size:1.15rem}
.layout-signal .review-card blockquote p{font-size:1.02rem}
.layout-signal .review-author{font-family:var(--f-heading);font-weight:400}
.layout-signal .review-src{font-weight:700}
/* visit */
.layout-signal #visit .today-now{font-size:1.15rem}
/* footer */
.layout-signal .site-footer{font-size:.95rem}
/* menu page */
.layout-signal .cat-nav a{font-weight:700;text-transform:none;letter-spacing:normal}
.layout-signal .price{font-family:var(--f-heading);font-weight:400;font-size:1.2rem}
.layout-signal .variants .price{font-size:1.05rem}
.layout-signal .item .desc{font-size:1rem}
.layout-signal .menu-cat .wrap>p{font-family:var(--hand);font-size:1.45rem;line-height:1.2;color:#9E0B23;margin:.2rem 0 .4rem}
.layout-signal .menu-order a{font-weight:700}

/* v3c design QA (30 Oct 2026, final check) */
/* 7-photo gallery with no orphan tile: the sharpest photo (boudin balls, 800x600) leads.
   Phones (2 across): it spans the full first row, then 3 rows of 2.
   >=52rem: 5 across, the lead photo spans 2x2, so 7 photos fill exactly 2 rows; smaller tiles also stay sharp at DPR 2. */
.layout-signal .gallery li:first-child{grid-column:span 2}
@media (min-width:52rem){
  .layout-signal .gallery{grid-template-columns:repeat(5,1fr)}
  .layout-signal .gallery li:first-child{grid-row:span 2}
  .layout-signal .gallery li:first-child figure,.layout-signal .gallery li:first-child picture{height:100%;display:block}
  .layout-signal .gallery li:first-child img{height:100%;aspect-ratio:auto}
}
/* tap targets >= 44px everywhere (desktop nav was 42px; text links in Find us, Today's spot line and footer were ~20px) */
@media (min-width:40rem){.layout-signal .site-nav a{min-height:44px;display:inline-flex;align-items:center}}
#visit address + p a,.spot-ref a,.site-footer p a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
/* about photo: its source is 488px wide, so never show it wider than that */
#about .grid-2 > div > picture img{max-width:30.5rem;width:100%}