DeepSeek V4.1 Flash 1017

Let me create a vibrant, appetizing food truck website for "Kimchi Loco" — Korean-Mexican fusion tacos. Should be visually rich, with CSS-drawn food illustrations (no external images), animations, menu, find-the-truck schedule, etc.

Design: bold colors — kimchi red, gochujang orange, warm cream, black. Big type. Animated steam, sizzling taco illustrations made with SVG/CSS.

Let me build:
- Sticky nav with logo
- Hero: huge headline, animated taco SVG, floating chili, steam, ticker
- Marquee band of "KIMCHI LOCO • SEOUL MEETS SINALOA •"
- Menu cards with SVG taco illustrations and prices, hover lift
- "Find the truck" schedule with today's location highlighted
- Story section
- Footer CTA

Must be responsive to 375px. No horizontal scroll — careful with marquee (use overflow hidden).

Add some interactivity: rotating "now serving" text, spicy level toggle? Keep it simple but polished.

Let me draw a taco with CSS: a shell using border-radius, fillings. Actually SVG is easier and crisper. I'll craft an SVG taco: shell (semicircle-ish), meat, kimchi bits, cilantro, lime.

Let me write the SVG taco carefully:

A taco viewed from the side: shell is a folded tortilla — draw a path like a "U" shape with slight tilt. Something like:

```svg
<svg viewBox="0 0 200 160">
  <!-- shell outer -->
  <path d="M20 130 C 20 60, 60 20, 100 20 C 140 20, 180 60, 180 130 Z" fill="#e8a33d"/>
  <!-- filling -->
  ...
</svg>
```

Hmm, a taco shell opening upward: semicircle with flat top. Fillings as blobs above the rim.

Path: M20,130 A80,80 0 0 1 180,130 Z — flat top at y=130? No, arc from (20,130) to (180,130) sweeping up. That gives a dome. Good: shell dome.

Then fillings: circles/blobs at y≈120-135 above... Actually fillings should sit above the dome's rim, i.e., along the flat top line y=130, spilling over. Let me put filling shapes clustered around y=118-132 spanning x=30..170, and then shell drawn on top for the front? Order: draw fillings first, then shell? No — fillings should be behind top edge... Simpler: draw shell dome, then draw filling cluster overlapping the top edge slightly, so it looks like it's inside/on top. That reads fine.

Guest meat color: gochujang red-brown #b3402a. Kimchi: #e04a2f with lighter #f47b5a. Cilantro: #4a8a3e. Lime: #a8d13c. Sesame seeds: tiny white dots.

Good.

Also a churro? Maybe not.

Let's do CSS animations: floating taco sway, steam wisps rising, marquee scroll.

Also add a little "order" popup? No localStorage; can use JS state.

Keep the page: 
1. Nav (logo KIMCHI LOCO with 🌮?) — avoid emoji? Emoji is fine but inconsistent. I'll use SVG/type.
2. Hero with big type "SEOUL MEETS SINALOA", subtext, buttons, taco art, floating badges ("GOCHUJANG GLAZED", "MADE FRESH DAILY"), animated steam.
3. Ticker marquee.
4. Menu: 4-5 taco cards on a warm paper background with detailed SVG art per item (variations: color of filling). Include price and spice meter (chili icons). Hover effects.
5. "Find us" — schedule cards for the week, with today's highlighted dynamically via JS Date.
6. Testimonial / quote strip.
7. Footer with big CTA and social placeholders.

Fonts: no external allowed (no network). Use system font stack with strong weights. Could use 'Georgia'/serif for accents and heavy sans for headlines. Use font-family: system-ui with font-weight 900 and letter-spacing tight. For a display feel, maybe use font-stretch... Let's do heavy sans + italic serif accents.

Colors:
--ink: #17110f
--cream: #FFF6E9
--kimchi: #E23E2C
--gochu: #F26B21
--deep: #2B1A14
--lime: #B7D64A

Let's write it.

Detail on layout responsiveness: use clamp() everywhere, grid with auto-fit minmax.

Hero: two-column grid on desktop, stacked on mobile.

Let me write the code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kimchi Loco — Korean Tacos</title>
<style>...</style>
</head>
<body>
...
</body>
</html>
```

Steam animation: several divs with blur, translateY and opacity loop.

Marquee: two duplicated spans in a flex, animation translateX(-50%).

Now the taco SVG — I'll make it a reusable function? Since it's HTML, I'll write a template with <symbol> in a hidden svg and <use>? Colors vary per item — use <use> with CSS variables? Simpler: write a JS function that generates taco SVG markup with variable fill colors and toppings, injected into cards. That keeps HTML compact. But must render on first paint — JS runs immediately at end of body, fine.

Actually let me just write a JS array of menu items and render cards. Good.

Taco SVG generator:

```js
function tacoSVG({shell='#E8A33D', shellDark='#C97F26', meat='#B3402A', kimchi='#E23E2C', extra='#B7D64A', seed=true}) 
```

Hmm, let me design a fixed nice taco and vary palette.

Taco shape (viewBox 0 0 220 170):
- Shell back/dome: path M18,138 C18,68 58,26 110,26 C162,26 202,68 202,138 Z  fill shell
- Inner shadow: path smaller at bottom, fill shellDark with opacity, e.g., M40,138 C40,84 72,52 110,52 C148,52 180,84 180,138 Z... that's a lighter dome inside — actually that would be the "empty" inner. Hmm.

Alternative: The shell seen as a folded tortilla from the front: a semicircle. Add a rim highlight: a stroke along the top edge.

Simplest attractive approach: dome shell with a slightly darker inner dome at the top (like the far side of the shell), and the filling sits in the opening.

Let's do:
1. Far shell (darker): path dome, fill shellDark.
2. Filling cluster: blobs across y from 60 to 95, x 35..185.
3. Front shell (lighter): a path that covers the bottom half of the dome up to y≈95: M18,138 C18,100 40,84 110,84 C180,84 202,100 202,138 Z — hmm that's a shallow shape.

Honestly, an easier and very readable taco: side view = a "U" shape (tortilla folded), with fillings poking out the top.

Path for U: M30,30 C10,90 40,150 110,150 C180,150 210,90 190,30  — that's an outline. For a filled shell, the front face: M30,30 C10,90 40,150 110,150 C180,150 210,90 190,30 L165,30 C180,90 150,125 110,125 C70,125 40,90 55,30 Z — creating a crescent. That works as a tortilla seen from the side-front.

Then fillings above the top edge: blobs between y=10 and y=45, x 40..190.

I like that. Let's define:

Shell outer path:
`M28,42 C6,110 44,158 110,158 C176,158 214,110 192,42`
then inner return:
`L164,46 C182,104 152,134 110,134 C68,134 38,104 56,46 Z`

Hmm the inner top points at (164,46) and (56,46) — so the shell's top edge is around y=42-46, meat sits above. But then the shell crescent is thick. Fine.

Fillings drawn first (behind shell) so they appear to come out of the top: draw filling blobs at y 10..50, then draw shell on top. That gives nice layering — filling behind the front shell rim but visible above it. 

Filling: an irregular mound: path M52,50 C52,20 80,10 110,10 C142,10 168,22 168,50 Z fill meat. Plus kimchi chunks (rotated rects/circles) in red, jalapeño rings (green circles), cilantro (small green ellipse clusters), sesame seeds (white dots), crema drizzle (white wavy line).

Then shell over it. Since shell top edge is at y≈44 and the mound base is at y=50, the shell covers the bottom of the mound. 

Shell gradient: linearGradient from #F0B255 to #D08A2C.

Add a highlight arc.

Let's write the SVG carefully with viewBox "0 0 220 170".

Shell:
```
<path d="M28,42 C6,110 44,158 110,158 C176,158 214,110 192,42 L164,46 C180,104 152,134 110,134 C68,134 40,104 56,46 Z" fill="url(#shellGrad)"/>
```
Wait, the inner path direction: after reaching (192,42) we line to (164,46), then curve back to (56,46): "C180,104 152,134 110,134 C68,134 40,104 56,46". Control points: from (164,46) curve with cp1 (180,104) cp2 (152,134) to (110,134) — good. Then from (110,134) cp1 (68,134) cp2 (40,104) to (56,46). Good. Then Z closes to (28,42). 

Hmm, but this makes the crescent thick at top (from y=42 to y=46, that's 4px) — thin at top, thick at bottom. Actually at bottom: outer y=158, inner y=134, 24px thick. At the top corners, thickness ~4-8px. That's like a folded tortilla leaning. Fine, looks like a shell.

Maybe better: shell thickness more even. Let's just try visually reasoning — it should read as a taco shell. I think it's OK.

Meat mound behind: path M50,52 C50,18 78,6 110,6 C144,6 170,20 170,52 Z — fill #A8382A (gochujang beef). Add texture circles darker.

Kimchi bits: a few rounded rects rotated, fill #E8452C, and some #F2735A.

Cilantro: small leaves: ellipse rx=7 ry=4 rotated, fill #4E9A46.

Jalapeño rings: circle r=6 fill #7CB342 stroke #A5D65A.

Sesame: white circles r=1.6 scattered on shell.

Crema drizzle: path stroke white, dashed? A wavy line with stroke-width 4, stroke-linecap round, opacity .9.

OK. Now variations per menu item: change meat color and "fill" color set.

Menu items:
1. **Loco Original** — gochujang beef, kimchi, cilantro, $4.50, spice 2
2. **K-Town Bulgogi** — sweet soy bulgogi, pickled onion, sesame, $4.75, spice 1
3. **Sinaloa Seafood** — Baja shrimp, chipotle crema, cabbage slaw, $5.50, spice 2
4. **El Hongo** — gochujang mushrooms, lime crema, queso fresco, $4.25, spice 1 (veggie)
5. **Firebird** — fried chicken, fire sauce, scallion, $5.00, spice 3
6. **Elote Loco** — street corn side? Maybe make the menu 4 tacos + 2 sides in a second row.

Keep it to 4 taco cards + a "sides & sips" strip. Actually 5-6 cards in grid of 3 is fine. Let's do 6 cards in a 3-col grid (2 rows).

Hmm, keep it manageable: 6 cards.

Also a spice meter using chili glyphs — use small SVG or just "● ● ●"? I'll use a pepper SVG path, small.

Simplify: spice shown as repeated "🔥"? Emoji varies. Use small chili SVG inline (simple path). Or dots with kimchi color. I'll do 3 dots, filled = spicy.

Let's do dots — clean and reliable.

Find the truck: schedule list Mon–Sun with locations; JS highlights today and shows "OPEN NOW" if within hours? Compute today's index. Show a "TODAY" badge. Also live clock? Maybe a simple status "Open till 9pm".

Locations (fictional but flavorful):
- Mon — Downtown Arts District · 4th & Main · 11:30–3
- Tue — Riverside Tech Park · 11–2
- Wed — University Quad · 5–9 pm
- Thu — Old Town Night Market · 6–11 pm
- Fri — Brewery Row · 5–10 pm
- Sat — Farmers Market · 9–1pm + Sunset Cliffs 5–9
- Sun — Whatever's left / private events

Add a big map-ish card? Skip.

Testimonial strip: a quote in italic serif.

Final CTA: "Come hungry. Leave loco." with email signup (non-functional, but avoid forms that error—simple input + button that shows a thank you message inline via JS).

Also add a "hero" floating badges.

Let me also add a subtle animated background in hero (radial gradients).

Now write CSS.

```css
:root{
  --ink:#1A100C;
  --ink2:#2E1B14;
  --cream:#FFF3E2;
  --paper:#FFE9CF;
  --kimchi:#E23E2C;
  --gochu:#F26B21;
  --lime:#BAD24A;
  --gold:#F5B841;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--cream);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
```

Headline font: use `font-weight:900; letter-spacing:-0.04em;` with a serif italic accent using Georgia.

Nav: fixed top, blurred cream background, border-bottom.

Hero: min-height maybe 88vh, grid 1.1fr 1fr, gap. Padding top for nav.

Big title: clamp(3rem, 8vw, 7rem), line-height .85, uppercase.

Add "SEOUL" in kimchi red and "SINALOA" outlined? Text-stroke is supported in Chrome. Use -webkit-text-stroke for outline effect.

Yes: 
```
.outline{color:transparent;-webkit-text-stroke:2.5px var(--ink);}
```

Nice.

Ticker band: background ink, cream text, rotate -1.5deg? Rotated bands can cause horizontal overflow — but with body overflow-x hidden it's fine. Use a wrapper with overflow hidden and the band rotated slightly. Careful on mobile.

Simplify: full-width band, no rotation, but with a repeating pattern. Actually a slight rotation looks great; use `transform: rotate(-1.2deg) scale(1.02)` inside an overflow hidden container with extra padding. Fine.

Marquee content: "· KIMCHI LOCO · SEOUL MEETS SINALOA · GOCHUJANG GLAZED · MADE FRESH DAILY " repeated.

Menu cards: white-ish (#FFF8EE) with 2px ink border, radius 20, box-shadow offset hard shadow (4px 4px 0 ink) for a graphic look. Hover: translate + shadow grow.

Taco SVG inside card with hover wiggle.

Find-us section: dark background (--ink) with cream text, schedule rows with alternating hover.

Let me write the JS for schedule: array with day name, place, hours, address.

```js
const schedule=[
 {d:'Mon',place:'Arts District',addr:'4th & Main',time:'11:30a – 3p'},
 ...
];
const today=new Date().getDay(); // 0 Sun
```
Map Mon=1...Sun=0. Rows have index by day-of-week.

Render rows with data-day, then mark the matching one with class 'today' and a badge.

Fine.

Also add "Live now" pulsing dot.

Newsletter form: input + button; on submit add class and change text to "You're on the list — see you at the window 🌮" (emoji ok). Use preventDefault.

Also add a floating "sticky order" bar? Not necessary.

Let me also add scroll-reveal? Might risk items being hidden on first paint if IntersectionObserver misfires. I'll use a safe reveal that defaults to visible... Just skip reveals, or implement with `@media (prefers-reduced-motion)` no. Skip; keep everything visible.

Now, the hero taco art: big taco SVG ~ 420px wide, with steam wisps and floating chili/lime SVGs orbiting. Absolute positioned, gentle float animation.

Let me write the taco SVG generator in JS to avoid duplicating a big block; inject into `<div id="heroTaco">`.

Function:

```js
function tacoSVG(opts={}){
  const {shell1='#F3B45C', shell2='#D98A2E', meat='#B0402C', meatDark='#8C2E1F', kimchi='#E2402C', kimchiLite='#F47A5A', greens='#4E9A46', crema='#FFF6E4', id='g'+Math.random().toString(36).slice(2,7)} = opts;
  return `<svg viewBox="0 0 220 178" ...>`
}
```

Need unique gradient ids. Use a counter.

SVG content:

```svg
<defs>
  <linearGradient id="${id}" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="${shell1}"/>
    <stop offset="1" stop-color="${shell2}"/>
  </linearGradient>
</defs>
<!-- filling -->
<path d="M46,56 C46,20 76,8 110,8 C146,8 172,22 172,56 Z" fill="${meat}"/>
<circle cx="80" cy="34" r="9" fill="${meatDark}" opacity=".55"/>
<circle cx="128" cy="26" r="11" fill="${meatDark}" opacity=".45"/>
<circle cx="152" cy="46" r="7" fill="${meatDark}" opacity=".5"/>
<!-- kimchi -->
<g fill="${kimchi}">
  <rect x="58" y="18" width="26" height="16" rx="6" transform="rotate(-14 71 26)"/>
  <rect x="112" y="34" width="28" height="15" rx="6" transform="rotate(9 126 41)"/>
  <rect x="140" y="14" width="24" height="14" rx="6" transform="rotate(-18 152 21)"/>
</g>
<g fill="${kimchiLite}" opacity=".9">
  <rect x="70" y="40" width="20" height="12" rx="5" transform="rotate(12 80 46)"/>
</g>
<!-- greens -->
<g fill="${greens}">
  <ellipse cx="96" cy="14" rx="11" ry="5" transform="rotate(-20 96 14)"/>
  <ellipse cx="150" cy="34" rx="10" ry="4.5" transform="rotate(18 150 34)"/>
  <ellipse cx="64" cy="44" rx="9" ry="4" transform="rotate(10 64 44)"/>
</g>
<!-- crema drizzle -->
<path d="M56,30 C74,48 92,26 110,44 C128,60 146,32 164,46" fill="none" stroke="${crema}" stroke-width="7" stroke-linecap="round" opacity=".95"/>
<!-- shell -->
<path d="M28,42 C6,110 44,158 110,158 C176,158 214,110 192,42 L164,46 C180,104 152,134 110,134 C68,134 40,104 56,46 Z" fill="url(#${id})"/>
<!-- shell rim highlight -->
<path d="M28,42 C6,110 44,158 110,158" fill="none" stroke="#FFD79A" stroke-width="4" stroke-linecap="round" opacity=".55"/>
<!-- sesame -->
<g fill="#FFF1D4" opacity=".85">
  <circle cx="70" cy="104" r="2.2"/><circle cx="96" cy="122" r="2"/><circle cx="126" cy="112" r="2.2"/>
  <circle cx="150" cy="98" r="2"/><circle cx="112" cy="98" r="1.8"/><circle cx="86" cy="88" r="1.8"/>
</g>
```

Hmm the crema drizzle at y 26-46 is behind the shell? Shell drawn after, and shell's top area covers y>=42ish at the edges. The drizzle near x=110 y=44 would be covered partially. That's fine/OK.

Wait — is filling visible above shell? Shell top edge is at y=42 outer. Filling mound spans y=8..56. So yes visible from 8 to ~42. Good.

Actually the shell outer path starts at (28,42) and curves down to the left bottom. The top edge is a straight line from (28,42) to (192,42)? No — the path goes M28,42 then curve down to 110,158 etc. then up to 192,42 then L164,46 then inner curve back to 56,46, then Z which closes from (56,46) to (28,42). So the top closure is a straight line from (56,46) to (28,42) and from (192,42) to (164,46). So the shell has an open "notch" at the top? No! The shell region is the crescent between outer curve and inner curve, closed by tiny lines at the top left and right. So there's a gap between x=56..164 at the top... no wait, the region between the top of outer curve and the line... 

Let me think again. The path: outer arc from (28,42) down around to (192,42). Then line to (164,46). Then inner curve back to (56,46). Then close to (28,42).

The enclosed region: it's bounded by outer arc (bottom), then the segment from (192,42) to (164,46), then inner arc from (164,46) back through (110,134) to (56,46), then segment to (28,42). This encloses the crescent between the outer arc and the inner arc. The inner arc passes through (110,134), so the region is the crescent of thickness ~24 at the bottom center, tapering to ~4-6 at the top ends. So the shell is like a thin curved band — resembling the front face of a folded tortilla seen from the side? Actually a taco shell from the side looks like a "U" ring — yes! The crescent IS the ring of the shell. And the filling sits inside the U, visible in the middle... but the middle of the crescent is empty (transparent/hole) — showing whatever is behind, which would be the filling mound above. Hmm, but the filling mound only extends down to y=56; the hole region spans y from ~46 to 134. So we'd see through the hole to the background. That's wrong.

Fix: draw a back shell first (a filled dome, darker) that fills the area behind, i.e., the "inside" of the taco, then filling, then front crescent. Let's do:

1. Back shell (the inner surface, darker, slightly offset): path M56,46 C40,104 68,134 110,134 C152,134 180,104 164,46 Z... that's the hole shape. Fill with darker interior color, e.g., #7A4A22 (shadowed inside) or the shell inside color #C98A45.

Actually order: back shell dome, filling mound (which sits at the top, overlapping), then front crescent.

The hole in the front crescent is exactly the region bounded by inner arc and the top segment from (164,46) to (56,46). If I fill that region with a dark "inside" color, then the taco reads as a shell with a shaded interior. Then the filling mound at top overlaps the top of that interior. Good.

So: draw `<path d="M56,46 C40,104 68,134 110,134 C152,134 180,104 164,46 Z" fill="insideColor"/>` — wait, direction: start (56,46), curve to (110,134) with cps (40,104),(68,134), then curve to (164,46) with cps (152,134),(180,104), then Z back to (56,46). Yes that's the hole. 

Hmm but this region is bounded above by the line y≈46, so the interior is a dome shape. Good.

Then filling mound on top of that, then front crescent.

But then the filling mound (drawn on top of the interior) covers the top part. Perfect.

Order: interior → filling → front shell crescent. And sesame on front shell.

Colors: inside #A9631F (dark warm). Or use shell2 darkened.

Good. Let me finalize.

Also add a small shadow ellipse under the taco? Optional.

Now the hero: taco at large size, plus steam.

Steam: 3 divs with radial gradient blur rising. CSS:

```css
.steam{position:absolute;left:50%;top:-10px;width:14px;height:60px;background:linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,0));border-radius:50%;filter:blur(6px);animation:rise 3.4s ease-in-out infinite;}
```

With delays and offsets.

Now writing the whole thing. Keep code organized.

Sections:
- nav
- hero
- ticker
- menu (#menu)
- story / "why it's loco" 3 features
- find us (#find)
- quote strip
- CTA/footer

Maybe skip story to keep length reasonable, but a short "3 reasons" row adds desire. I'll include a compact band.

Let's write.

Hero content:
- eyebrow: "FOOD TRUCK · KOREAN × MEXICAN"
- h1: "SEOUL<br>MEETS<br>SINALOA" with one word outlined.
- p: "Gochujang-glazed bulgogi. Hand-pressed corn tortillas. Kimchi that's been fermenting since Tuesday. This is the taco you'll be thinking about at 2am."
- buttons: "Find the truck" (primary), "See the menu" (ghost)
- small stat row: "★ 4.9 (1,284 reviews)" "·" "10 tacos served every 9 seconds" etc.

Badges floating on the art: "GOCHUJANG GLAZED" chip top-left, "MADE FRESH DAILY" chip bottom-right.

Let me build HTML now.

For the nav on mobile: hide links, keep logo + "Find us" button.

Let's write CSS in a structured way.

```css
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
```
On mobile 375: 100% - 40 = 335. Fine.

Nav:
```css
header{position:sticky;top:0;z-index:50;background:rgba(255,243,226,.86);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.03em;font-size:1.15rem;text-transform:uppercase}
```

Logo mark: a small taco SVG in a circle.

Hero grid:
```css
.hero{position:relative;overflow:hidden;padding:clamp(28px,6vw,72px) 0 clamp(40px,6vw,80px);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
```

Hero background: radial gradients.

h1:
```css
.hero h1{font-size:clamp(2.9rem,7.4vw,6.2rem);line-height:.86;margin:.35em 0 .3em;letter-spacing:-.045em;font-weight:900;text-transform:uppercase}
```

On 375px: 2.9rem ≈ 46px, "SINALOA" 7 chars at 46px heavy ≈ 7*30 = 210px. Fits in 335. Good.

Buttons:
```css
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;border:2px solid var(--ink);text-decoration:none;cursor:pointer;transition:.2s}
.btn-primary{background:var(--kimchi);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
```

Ticker:
```css
.ticker{background:var(--ink);color:var(--cream);overflow:hidden;padding:14px 0;transform:rotate(-1.4deg);}
```
Rotated band inside a container may cause horizontal overflow → body overflow-x:hidden handles it. But it could add vertical gap. Fine.

Actually to prevent the rotated band from showing gaps at the edges, wrap in a div with overflow:hidden and margin -something. I'll do:

```css
.ticker-wrap{overflow:hidden;padding:18px 0;} 
.ticker{transform:rotate(-1.4deg) scale(1.05);}
```

Marquee:
```css
.ticker-track{display:flex;gap:0;width:max-content;animation:marquee 26s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
```
with two identical spans.

Each item: `<span>KIMCHI LOCO</span><span class="dot">✦</span>...`

Use text "✦" separator. Fine.

Menu section header: eyebrow + h2 "THE MENU" + p.

Cards grid:
```css
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.4vw,26px)}
```
On 375 → single column 335px wide, fine.

Card:
```css
.card{background:#FFF9F0;border:2px solid var(--ink);border-radius:22px;padding:18px 18px 22px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;transition:transform .18s, box-shadow .18s}
.card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)}
.card .art{background:var(--paper) radial-gradient(...);border-radius:16px;padding:8px 0;display:grid;place-items:center;border:2px dashed rgba(26,16,12,.15)}
```

Hmm — dashed border maybe. Keep simple.

Card art svg width 100%, max-width 190px.

Card title row: name + price.
Description small.
Footer: spice dots + tag ("VEG", "GF").

Prices in kimchi red bold.

Spice dots: `<i class="pip on"></i>` with 3 pips.

Find section (dark):
```css
.find{background:var(--ink);color:var(--cream);padding:clamp(48px,7vw,96px) 0}
```
Schedule list rows:
```css
.row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border:2px solid rgba(255,243,226,.18);border-radius:14px;margin-bottom:10px;transition:.2s}
.row.today{background:var(--kimchi);border-color:var(--kimchi);color:#fff;box-shadow:0 0 0 4px rgba(226,62,44,.25)}
```
On mobile, grid-template-columns: 52px 1fr; and time hidden or wraps. Let's do: on <520px, `grid-template-columns:52px 1fr; ` and put time inside the middle with block display.

Simpler: the middle cell contains place (bold) and addr+time small. The right cell shows time. On mobile hide right cell and show time in the small line. I'll just include time in the small line always and drop the right column on mobile.

Let me structure row: `<div class="row"><span class="day">Mon</span><div><strong>Arts District</strong><small>4th & Main · 11:30a–3p</small></div><span class="badge">TODAY</span></div>` where badge is empty for non-today. On mobile the badge could wrap. Use grid-template-columns: 56px 1fr auto.

OK.

Then a "live status" pill at the top of the section: "● Lights on now — Arts District till 3pm" computed by JS.

Keep JS simple: highlight today, set status text.

Quote strip: centered italic serif quote on gold background.

CTA: big "COME HUNGRY. LEAVE LOCO." plus email form.

Footer: logo, socials (text links), copyright.

Alright, write it.

JS:
1. Render taco art into hero.
2. Render menu cards.
3. Schedule.
4. Form handler.

Let me write out the menu data with palettes.

```js
const MENU=[
 {name:'Loco Original', tag:'SIGNATURE', price:'$4.50', spice:2,
  desc:'Gochujang-glazed beef, house kimchi, cilantro, onion, on a hand-pressed corn tortilla.',
  colors:{meat:'#A8392A',meatDark:'#7E281C',kimchi:'#E2402C',kimchiLite:'#F47A5A',shell1:'#F3B45C',shell2:'#D07E26'}},
 {name:'K-Town Bulgogi', tag:'FAN FAVE', price:'$4.75', spice:1,
  desc:'Sweet soy bulgogi, pickled red onion, toasted sesame, scallion, lime crema.',
  colors:{meat:'#8B4A2B',...}},
 {name:'Baja Seoul', tag:'SEAFOOD', price:'$5.50', spice:2,
  desc:'Crispy shrimp, chipotle-gochujang crema, cabbage slaw, avocado, lime.',
  colors:{meat:'#E08A4B',...}},
 {name:'El Hongo', tag:'VEGGIE', price:'$4.25', spice:1,
  desc:'Charred king oyster mushrooms, gochujang butter, queso fresco, cilantro.',
  colors:{meat:'#7A5A3E',...}},
 {name:'Firebird', tag:'🔥 HOT', price:'$5.00', spice:3,
  desc:'Double-fried chicken, fire sauce, pickled daikon, sesame, scallion.',
  colors:{meat:'#C4471F',...}},
 {name:'Elote Loco', tag:'SIDE', price:'$3.75', spice:2,
  desc:'Grilled street corn, gochujang mayo, cotija, chili crunch, lime.',
  colors:...}
]
```

Elote isn't a taco — maybe use a cup shape? Just use the taco SVG anyway... that's odd. Replace with "Kimchi Fries" also odd. Let's make the 6th item "Surf & Turf Loco" or keep all tacos: 6 tacos.

6th: "Dragon Breath" — spicy pork, habanero-kimchi, radish, spice 3.

Hmm, but having a side is nice. I'll do 6 tacos and add a small "Sides & Sips" line below: "Kimchi fries $5 · Elote $4 · Horchata $3.5 · Michelada $6".

Good.

For the "colors" I'll provide partial and merge with defaults.

Now write the code for real.

```js
let uid = 0;
function tacoSVG(c = {}){
  const o = Object.assign({
    shell1:'#F6BC6A', shell2:'#CE8128', inside:'#A2611F',
    meat:'#A8392A', meatDark:'#7E281C',
    kimchi:'#E2402C', kimchiLite:'#F47A5A',
    greens:'#4E9A46', crema:'#FFF6E4'
  }, c);
  const id = 'sh' + (++uid);
  return `<svg class="taco" viewBox="0 0 220 178" role="img" aria-label="Taco illustration">
  <defs>
    <linearGradient id="${id}" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="${o.shell1}"/><stop offset="1" stop-color="${o.shell2}"/>
    </linearGradient>
  </defs>
  <ellipse cx="110" cy="164" rx="78" ry="10" fill="#000" opacity=".08"/>
  <path d="M56,46 C40,104 68,134 110,134 C152,134 180,104 164,46 Z" fill="${o.inside}"/>
  <path d="M46,56 C46,20 76,8 110,8 C146,8 172,22 172,56 Z" fill="${o.meat}"/>
  ...
```

Careful: the interior path is drawn before the meat mound; the meat mound's bottom at y=56 sits above the interior top edge y=46 — overlapping part of it. Good, hides the flat top.

But wait, the interior region's top is the line from (56,46) to (164,46)... plus curves. Since the meat covers y up to 56 near the middle, the flat top edge is hidden. At the sides, interior top ends at x=56 and 164, and meat spans x 46..172 at the bottom. Fine.

Then front crescent drawn last covers the lower part.

Alright, also add sesame and chili threads on top of the front shell? Sesame on the shell looks good.

Let me write it all out now, carefully.

One more: I want subtle "wiggle" animation on card taco on hover.

CSS: `.card:hover .taco{animation:wiggle .5s ease-in-out}` — could be fine.

Let's write the final code.

For the hero art container:

```html
<div class="hero-art">
  <div class="steam s1"></div><div class="steam s2"></div><div class="steam s3"></div>
  <div class="taco-holder" id="heroTaco"></div>
  <div class="chip chip-a">GOCHUJANG GLAZED</div>
  <div class="chip chip-b">HAND-PRESSED TORTILLAS</div>
</div>
```

CSS:
```css
.hero-art{position:relative;display:grid;place-items:center;padding:20px 0}
.taco-holder{width:min(100%,440px);animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 24px 30px rgba(26,16,12,.25))}
```
Hmm the SVG has its own shadow ellipse. drop-shadow fine too. Keep drop-shadow subtle.

chips absolute positioned. On mobile they might overflow — position them within bounds (left:0 / right:0 with small offsets) and font small.

```css
.chip{position:absolute;background:var(--ink);color:var(--cream);font-size:.66rem;font-weight:800;letter-spacing:.12em;padding:8px 14px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.chip-a{top:6%;left:-4%;transform:rotate(-8deg);background:var(--kimchi);color:#fff}
.chip-b{bottom:8%;right:-2%;transform:rotate(5deg)}
```
left:-4% could overflow on mobile into the page edge... the .wrap has 20px padding; -4% of ~335 = -13px → could poke past. Use overflow hidden on hero. Set `.hero{overflow:hidden}`. But then chips are clipped. Use left:0 and right:0 percentages that stay inside. I'll use left:-2% and right:-2% but with the wrap padding of 20px it should be okay visually... risky for horizontal scrollbar. Use `left:0` / `right:0` and keep .hero overflow hidden as a safety. Actually let me just keep chips inside: `top:4%;left:0` and `bottom:6%;right:0`. Safe.

Fine.

Now the sticky header height. Hero padding-top accounts.

Let me write everything.

Also add `scroll-behavior:smooth` on html and anchor links.

Nav links: Menu, Find Us, Story.

Let me produce the final file.

One concern: `transform: rotate(-1.4deg) scale(1.05)` on ticker inside overflow hidden wrapper — the wrapper needs enough height. padding 18px 0 with ticker height ~50px. OK.

Let's write.

Marquee HTML:

```html
<div class="ticker-wrap">
  <div class="ticker">
    <div class="ticker-track" id="track"></div>
  </div>
</div>
```
JS fills track with two copies of the phrase list to get seamless -50% translate.

Simpler: write it in HTML twice manually:

```html
<div class="ticker-track">
  <span class="tk">KIMCHI LOCO</span><span class="sep">✦</span>
  ... (set of 8)
</div>
```
And duplicate the whole set for the second copy. That's a lot of HTML. Use JS to build:

```js
const words=['KIMCHI LOCO','SEOUL × SINALOA','GOCHUJANG GLAZED','HAND-PRESSED TORTILLAS','FERMENTED IN-HOUSE','MADE FRESH DAILY'];
const chunk = words.map(w=>`<span class="tk">${w}</span><span class="sep">✦</span>`).join('');
document.getElementById('track').innerHTML = chunk + chunk;
```
Wait animation translateX(-50%) requires the track to contain exactly 2 copies and width max-content. Yes.

Now the CSS `.ticker-track{display:flex;align-items:center;width:max-content;animation:marquee 30s linear infinite}` and `.tk{padding:0 22px;font-weight:900;letter-spacing:.16em;font-size:.85rem;text-transform:uppercase;white-space:nowrap}` `.sep{color:var(--gochu);font-size:.8rem}`.

Good.

Now writing the final answer. Let me be thorough but efficient.

For the hero h1 with mixed styles:

```html
<h1><span class="l1">Seoul</span><br><span class="out">Meets</span><br><span class="l2">Sinaloa</span></h1>
```
Hmm, "SEOUL MEETS SINALOA" — put "MEETS" outlined and smaller? Let's do:

```
SEOUL
MEETS  (outlined, smaller)
SINALOA  (kimchi red)
```

with text-transform uppercase.

CSS `.out{color:transparent;-webkit-text-stroke:2px var(--ink)}` — at large sizes 2px stroke looks thin; use 3px. On mobile smaller.

Use `-webkit-text-stroke: clamp(1.5px,0.35vw,3px) var(--ink);` Hmm clamp in stroke-width may not accept... it does accept a length. Fine.

Let me set font-size for .out slightly smaller (0.72em) and letter-spacing wider to add rhythm.

OK writing now. Also the `.l2` in kimchi color.

Hero paragraph max-width 44ch.

Stat row: small caps items separated by dots.

Let's finalize.

For "story"/features band — 3 columns with numbers:
1. "Fermented in-house" — "Our kimchi sits for 3 weeks before it ever touches a tortilla."
2. "Tortillas pressed to order" — "Nixtamalized corn, pressed and griddled in front of you."
3. "Two kitchens, one truck" — "Gochujang and chipotle, living in perfect harmony."

Nice, on a kraft-paper background band.

Alright, code time.

I'll write the CSS carefully to avoid overflow.

Potential horizontal overflow sources: rotated ticker (handled by overflow hidden on wrap), fixed widths, the hero grid. Should be fine.

Writing final.

Also make sure `body{overflow-x:hidden}`.

Let me write the whole document.

For nav mobile: 
```css
.nav-links{display:flex;gap:26px}
@media(max-width:760px){.nav-links{display:none}}
```
Keep the CTA button visible.

Final code:

Alright, also add a small pulsing dot class:

```css
.pulse{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(186,210,74,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(186,210,74,0)}100%{box-shadow:0 0 0 0 rgba(186,210,74,0)}}
```

Good.

Writing final HTML now. Being careful with template literals in JS containing backticks — fine.

Spice pips HTML: `'<span class="pips">' + [0,1,2].map(i=>`<i class="${i<n?'on':''}"></i>`).join('') + '</span>'`.

Now write.

Schedule data & rendering:

```js
const SCHEDULE=[
 ['Mon','Arts District','4th & Main St','11:30a – 3:00p',1],
 ['Tue','Riverside Tech Park','Lot C, River Rd','11:00a – 2:30p',2],
 ['Wed','University Quad','Campus Center Plaza','5:00p – 9:00p',3],
 ['Thu','Old Town Night Market','Grand Ave between 2nd & 3rd','6:00p – 11:00p',4],
 ['Fri','Brewery Row','880 Hop St','5:00p – 10:00p',5],
 ['Sat','Sunset Cliffs Market','Ocean Blvd','9:00a – 1:00p',6],
 ['Sun','Private events & pop-ups','DM us — we might be near you','Varies',0],
];
```
index 6 = day number (JS getDay: Sun=0).

Render:
```js
const today=new Date().getDay();
rows = SCHEDULE.map(([d,place,addr,time,dayNum])=>{
  const isToday = dayNum===today;
  return `<div class="row${isToday?' today':''}">
    <span class="day">${d}</span>
    <div class="where"><strong>${place}</strong><small>${addr} · ${time}</small></div>
    <span class="tag">${isToday?'TODAY':''}</span>
  </div>`;
});
```

Status line text: if today's entry, `Open today at ${place} · ${time}`.

Good.

Now the form:

```js
document.getElementById('signup').addEventListener('submit',e=>{
  e.preventDefault();
  const f=e.target;
  f.innerHTML='<p class="ok">You\'re on the list. Come say hi — first taco\'s on us. 🌮</p>';
});
```
Careful with apostrophes; use a different quoting. Use template literal.

Alright — write it.

Length is going to be substantial but fine.

One more consideration: font stack. To get a distinctive look without external fonts, use:
`font-family: "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;` with weight 900 and tight tracking. And Georgia italic for accents. Good.

Write it out.