Models 44

MiMo-V2.6-Flash

by Xiaomireasoning defaultClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
5 min 19 s
Cost
$0.0070
Output tokens
25,151
Spent thinking
11,258 tokens
Speed
78.8 tok/s
Console errors
0
First token after
431 ms
First visible text after
3 min 31 s
Prompt tokens
365
Code size
40.2 KB
Finish reason
stop
Served by
Cohere
Model id
xiaomi/mimo-v2.6-flash
Reasoning sent
model default
Max output
131,072 tokens
Generated
Nov 13, 2026

What it was asked

The prompt
“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 810 lines

<!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, Los Angeles</title>
<meta name="description" content="Kimchi Loco is a Korean taco truck in Los Angeles. Seoul heat, locally made. Find the truck, see today's hours, order at the window.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* ============ TOKENS ============ */
:root{
  --canvas:#111111;
  --surface:#1D1D1B;
  --line:#3A3935;
  --paper:#F1E8D4;
  --paper-line:#B8B09F;
  --ink:#F7F3EA;
  --ink-dark:#171716;
  --red:#F0442E;
  --lime:#D7EF3D;
  --orange:#F3A43B;
  --gutter:32px;
  --rail:48px;
  --max:1440px;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-hover:cubic-bezier(0.2,0.8,0.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.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{position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--ink-dark);padding:12px 18px;font-weight:700;z-index:200}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.util{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}

/* ============ RAIL ============ */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);
  border-right:1px solid var(--line);
  background:var(--canvas);
  z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:14px 0 16px;
}
.rail-mark{
  width:var(--rail);height:var(--rail);background:var(--red);
  display:grid;place-items:center;margin:-14px 0 0;
}
.rail-mark svg{width:22px;height:22px}
.rail-mid{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#8A877F;
}
.rail-mid b{color:var(--ink);font-weight:700}
.rail-foot{display:flex;flex-direction:column;align-items:center;gap:10px}
.rail-foot .wordmark-v{
  writing-mode:vertical-rl;font-family:var(--display);font-weight:800;
  font-size:15px;letter-spacing:.14em;color:#6E6B64;text-transform:uppercase;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--lime);animation:pulse 1800ms ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.7}}
.rail-line{width:1px;flex:1;background:linear-gradient(var(--line),transparent);margin:16px 0}

.shell{margin-left:var(--rail)}

/* ============ MOBILE STATUS STRIP ============ */
.mstatus{display:none;background:var(--surface);border-bottom:1px solid var(--line);padding:9px var(--gutter);align-items:center;gap:9px}
.mstatus span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mstatus .lit{color:var(--lime)}

/* ============ HEADER ============ */
header.top{
  position:sticky;top:0;z-index:110;
  background:rgba(17,17,17,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brandmark{display:flex;align-items:baseline;gap:10px}
.brandmark .kl{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.brandmark .kl em{font-style:normal;color:var(--red)}
.brandmark .sub{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8A877F}
nav.main{display:flex;align-items:center;gap:28px}
nav.main a.navlink{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#B9B5AC;padding:8px 0;position:relative;transition:color 150ms ease-out;
}
nav.main a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-hover)}
nav.main a.navlink:hover{color:var(--ink)}
nav.main a.navlink:hover::after{transform:scaleX(1)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:0;cursor:pointer;border:0;text-align:center;
}
.btn-primary{background:var(--red);color:var(--ink-dark);height:52px;padding:0 24px;transition:background 150ms ease-out}
.btn-primary svg{transition:transform 150ms ease-out}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--lime)}
.btn-primary:hover svg{transform:translateX(6px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);height:48px;padding:0 20px;transition:background 150ms ease-out,color 150ms ease-out}
.btn-ghost:hover{background:var(--ink);color:var(--ink-dark)}
.btn-ghost.dark{border-color:var(--ink-dark);color:var(--ink-dark)}
.btn-ghost.dark:hover{background:var(--ink-dark);color:var(--paper)}
.btn-sm{height:44px;padding:0 18px;font-size:13px}

/* ============ HERO ============ */
.hero{position:relative;padding:64px 0 0;overflow:visible}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;grid-template-rows:auto auto}
.hero-brand{grid-column:1/7;grid-row:1;position:relative;z-index:2}
.hero-text{grid-column:1/7;grid-row:2;padding-top:26px;position:relative;z-index:2}
.hero-media{grid-column:7/13;grid-row:1/3;position:relative;height:55vh;min-height:430px;margin-right:calc(-1 * var(--gutter))}

.eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime);margin-bottom:20px}
.eyebrow .bar{width:34px;height:2px;background:var(--lime);display:block}

h1.wordmark{
  font-family:var(--display);font-weight:800;
  font-size:clamp(64px,13vw,196px);line-height:.78;letter-spacing:-.01em;
  text-transform:uppercase;margin:0;position:relative;z-index:2;
}
h1.wordmark span{display:block;overflow:hidden}
h1.wordmark i{display:block;font-style:normal;animation:rise 900ms var(--ease-out) both}
h1.wordmark span:nth-child(2) i{animation-delay:60ms;color:var(--ink)}
h1.wordmark span:nth-child(3) i{animation-delay:120ms;-webkit-text-stroke:2px var(--ink);color:transparent}
@keyframes rise{from{transform:translateY(36px);opacity:0}to{transform:translateY(0);opacity:1}}

.chopsticks{position:absolute;left:-10px;top:20px;width:min(560px,90%);height:auto;z-index:1;pointer-events:none}
.chopsticks line{stroke:var(--orange);stroke-width:1.5;stroke-dasharray:620;stroke-dashoffset:620;animation:draw 900ms var(--ease-out) 260ms forwards}
.chopsticks line:nth-child(2){animation-delay:340ms}
@keyframes draw{to{stroke-dashoffset:0}}

.tagline{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,3.4vw,52px);line-height:.94;margin:0 0 16px;letter-spacing:.005em;
}
.tagline em{font-style:normal;color:var(--red)}
.hero-text p.lead{max-width:44ch;color:#C9C5BC;margin:0 0 26px;font-size:16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-status{
  display:flex;align-items:center;gap:10px;margin-top:24px;padding-top:18px;
  border-top:1px solid var(--line);
}
.hero-status .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.hero-status .txt{font-size:13px;color:#B9B5AC}

.shot{position:relative;overflow:hidden;height:100%;background:var(--surface)}
.shot img{width:100%;height:100%;object-fit:cover;animation:wipe 900ms var(--ease-out) 180ms both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.detail-crop{
  position:absolute;left:24px;bottom:24px;width:160px;height:160px;border-radius:50%;
  overflow:hidden;border:3px solid var(--paper);
  animation:rise 700ms var(--ease-out) 700ms both,drift 6000ms ease-in-out 1600ms infinite alternate;
}
.detail-crop img{width:100%;height:100%;object-fit:cover}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.note{
  position:absolute;top:24px;right:24px;background:var(--paper);color:var(--ink-dark);
  padding:12px 16px 12px 14px;border-left:6px solid var(--red);
  display:flex;align-items:center;gap:12px;max-width:330px;
  animation:rise 700ms var(--ease-out) 900ms both;
}
.note .sq{width:10px;height:10px;background:var(--lime);flex:none}
.note strong{display:block;font-family:var(--display);font-size:20px;font-weight:800;text-transform:uppercase;line-height:1}
.note span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4A473F}

/* ============ TICKER ============ */
.ticker{
  margin-top:72px;background:var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  height:56px;overflow:hidden;display:flex;align-items:center;
}
.ticker-track{display:flex;flex:none;will-change:transform;animation:slide 24000ms linear infinite}
.ticker-track span{
  flex:none;padding-right:0;font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.2vw,30px);letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.ticker-track span b{color:var(--red);font-weight:800;margin:0 14px}
.ticker-track span i{color:var(--orange);font-style:normal;margin:0 14px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-20%)}}

/* ============ MENU ============ */
.menu{background:var(--paper);color:var(--ink-dark);padding:144px 0}
.menu-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.menu-head{grid-column:1/5;position:relative}
.menu-list{grid-column:5/13}
.section-kicker{display:flex;align-items:center;gap:10px;color:#6B6759;margin-bottom:18px}
.section-kicker .bar{width:28px;height:2px;background:var(--red)}
h2.sec{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(44px,6vw,84px);line-height:.88;margin:0 0 20px;letter-spacing:-.005em;
}
.menu-head p{font-size:15px;color:#4A473F;max-width:30ch;margin:0 0 30px}
.heat-index{
  display:inline-flex;align-items:center;gap:10px;background:var(--red);color:var(--ink-dark);
  padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.heat-index svg{width:16px;height:16px}
.menu-row{
  display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"name price" "desc heat";
  gap:4px 24px;align-items:center;
  min-height:112px;padding:22px 18px;margin:0 -18px;
  border-bottom:1px solid var(--paper-line);
  transition:background 180ms ease-out,color 180ms ease-out;
}
.menu-row:first-child{border-top:1px solid var(--paper-line)}
.m-name{
  grid-area:name;font-family:var(--display);font-weight:800;font-size:34px;line-height:.95;
  text-transform:uppercase;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  transition:transform 180ms ease-out;
}
.m-desc{grid-area:desc;font-size:15px;color:#4A473F;max-width:52ch;transition:color 180ms ease-out}
.m-price{grid-area:price;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;text-align:right}
.m-heat{grid-area:heat;display:flex;align-items:center;justify-content:flex-end;gap:9px}
.m-action{
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);opacity:0;transform:translateX(-6px);transition:opacity 180ms ease-out,transform 180ms ease-out;
}
.heat-dot{
  width:24px;height:24px;border-radius:9999px;display:grid;place-items:center;flex:none;
  background:rgba(240,68,46,.14);border:1.5px solid var(--red);
}
.heat-dot svg{width:13px;height:13px}
.heat-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6B6759}
.menu-row:hover,.menu-row:focus-visible,.menu-row:focus-within{background:var(--surface);color:var(--ink)}
.menu-row:hover .m-name,.menu-row:focus-visible .m-name,.menu-row:focus-within .m-name{transform:translateX(8px)}
.menu-row:hover .m-desc,.menu-row:focus-visible .m-desc,.menu-row:focus-within .m-desc{color:#C9C5BC}
.menu-row:hover .m-action,.menu-row:focus-visible .m-action,.menu-row:focus-within .m-action{opacity:1;transform:translateX(0)}
.menu-row:hover .heat-label,.menu-row:focus-within .heat-label{color:#C9C5BC}
.menu-row:hover .heat-dot,.menu-row:focus-within .heat-dot{background:rgba(240,68,46,.3)}
.menu-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:34px}
.menu-foot p{font-size:13px;color:#4A473F;margin:0;max-width:46ch}

/* ============ STORY ============ */
.story{background:var(--canvas);padding:144px 0;position:relative;overflow:hidden}
.story::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 7px);
}
.story-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:48px;align-items:start;position:relative}
.story-copy{grid-column:1/6}
.story-media{grid-column:6/13}
.story-copy p{color:#C9C5BC;font-size:16px;max-width:40ch}
.facts{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.facts svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--orange)}
.facts b{display:block;font-family:var(--display);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.facts span{font-size:13px;color:#8A877F}

.stack{position:relative}
.stack img{object-fit:cover;border:2px solid var(--canvas);background:var(--surface)}
.p1{width:78%;margin-left:auto;aspect-ratio:4/5}
.p2{position:absolute;left:0;top:34%;width:42%;aspect-ratio:1/1;z-index:2}
.p3{width:66%;aspect-ratio:16/9;margin-top:-72px;position:relative;z-index:3}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}

/* ============ VISIT ============ */
.visit{background:var(--canvas);padding:0 0 144px}
.visit-head{text-align:center;max-width:900px;margin:0 auto}
.underline{position:relative;display:inline-block}
.underline::after{
  content:"";position:absolute;left:0;bottom:.02em;height:8px;width:0;background:var(--red);
  transition:width 900ms var(--ease-out) 200ms;
}
[data-reveal].in .underline::after,.underline.in::after{width:100%}
.visit-head p{color:#C9C5BC;max-width:56ch;margin:0 auto}

.status{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);padding:22px 24px;margin:44px 0 0;
}
.status .state{display:flex;align-items:center;gap:12px}
.status .state .txt strong{display:block;font-family:var(--display);font-size:26px;font-weight:800;text-transform:uppercase;line-height:1;color:var(--lime)}
.status .state .txt span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8A877F}
.status .mid{font-family:var(--display);font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.status .mid small{display:block;font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.1em;color:#8A877F}

.info{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:0}
.info-col{padding:34px 30px 34px 0;border-right:1px solid var(--line)}
.info-col:first-child{padding-left:0}
.info-col:last-child{border-right:0;padding-right:0}
.info-col{padding-left:30px}
.info-col:first-child{padding-left:0}
.info-head{display:flex;align-items:center;gap:10px;color:var(--lime);margin-bottom:16px}
.info-head svg{width:16px;height:16px}
.info-col h3{font-family:var(--display);font-size:26px;font-weight:800;text-transform:uppercase;margin:0 0 8px;line-height:1}
.info-col p{font-size:15px;color:#C9C5BC;margin:0 0 6px}
.info-col .sm{font-size:13px;color:#8A877F}

.orderbar{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  background:var(--red);color:var(--ink-dark);padding:26px 28px;margin-top:8px;
}
.orderbar .txt strong{display:block;font-family:var(--display);font-size:clamp(28px,3.4vw,44px);font-weight:800;text-transform:uppercase;line-height:.95}
.orderbar .txt span{font-size:13px;font-weight:500;color:#3A1A14}
.orderbar .btn-dark{background:var(--ink-dark);color:var(--ink);height:56px;padding:0 26px;transition:background 150ms ease-out,color 150ms ease-out}
.orderbar .btn-dark:hover{background:var(--lime);color:var(--ink-dark)}

/* ============ FOOTER ============ */
footer{background:var(--canvas);border-top:1px solid var(--line);padding:96px 0 40px}
.foot-state{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(44px,8vw,120px);line-height:.86;margin:0 0 44px;letter-spacing:-.01em;
}
.foot-state em{font-style:normal;color:var(--red)}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-top:34px;border-top:1px solid var(--line)}
.foot-a{grid-column:1/5}
.foot-b{grid-column:5/9}
.foot-c{grid-column:9/13;text-align:right}
.foot-grid h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A877F;margin:0 0 14px}
.foot-grid p{font-size:14px;color:#C9C5BC;margin:0 0 6px}
.foot-links{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-links a{font-size:14px;color:#C9C5BC;transition:color 150ms ease-out}
.foot-links a:hover{color:var(--lime)}
.foot-c .kl{font-family:var(--display);font-weight:800;font-size:40px;color:var(--red);text-transform:uppercase;line-height:.9}
.legal{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6E6B64}

/* ============ RESPONSIVE ============ */
@media (max-width:1023px){
  :root{--rail:0px;--gutter:24px}
  .rail{display:none}
  .shell{margin-left:0}
  .mstatus{display:flex}
  .hero{padding-top:44px}
  .hero-grid{gap:20px}
  .hero-brand{grid-column:1/8}
  .hero-text{grid-column:1/8}
  .hero-media{grid-column:8/13;height:52vh;min-height:360px}
  .detail-crop{width:120px;height:120px;left:16px;bottom:16px}
  .menu-grid{gap:32px}
  .menu-head{grid-column:1/13}
  .menu-list{grid-column:1/13}
  .story-grid{gap:32px}
  .story-copy{grid-column:1/6}
  .story-media{grid-column:6/13}
  .info{grid-template-columns:1fr 1fr}
  .info-col:nth-child(2){border-right:0}
  .info-col:nth-child(3){border-top:1px solid var(--line);padding-left:0}
  .foot-a{grid-column:1/6}.foot-b{grid-column:6/10}.foot-c{grid-column:10/13}
}
@media (max-width:767px){
  :root{--gutter:20px}
  nav.main a.navlink{display:none}
  .top-in{height:64px}
  .brandmark .kl{font-size:22px}
  .brandmark .sub{display:none}

  .hero{padding-top:32px}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-brand{order:1}
  .hero-media{order:2;height:auto;min-height:0;margin:26px calc(-1 * var(--gutter)) 0 0;width:calc(100% + var(--gutter))}
  .shot{height:44vh;min-height:270px;max-height:400px}
  .hero-text{order:3;padding-top:30px}
  .note{top:auto;bottom:16px;right:16px;left:16px;max-width:none;padding:10px 12px}
  .detail-crop{width:96px;height:96px;left:16px;top:16px;bottom:auto;border-width:2px}
  h1.wordmark{-webkit-text-stroke:0}
  h1.wordmark span:nth-child(3) i{-webkit-text-stroke:1.5px var(--ink)}
  .chopsticks{width:100%;top:8px;opacity:.7}
  .cta-row .btn{flex:1 1 100%}
  .ticker{height:44px;margin-top:48px}
  .ticker-track span{font-size:20px}

  .menu,.story{padding:88px 0}
  .visit{padding-bottom:88px}
  .menu-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"name price" "desc desc" "heat heat";
    min-height:132px;padding:20px 14px;margin:0 -14px;gap:6px 14px;
  }
  .m-name{font-size:28px}
  .m-price{font-size:28px;align-self:start}
  .m-desc{font-size:14px;max-width:none}
  .m-heat{justify-content:flex-start}
  .m-action{opacity:1;transform:none}

  .story-grid{display:flex;flex-direction:column;gap:28px}
  .stack{order:1}
  .story-copy{order:2}
  .p1{width:100%}
  .p2{position:static;width:62%;margin-top:-36px;aspect-ratio:1/1;z-index:2}
  .p3{width:84%;margin-top:-36px}

  .status{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
  .status .mid{font-size:21px}
  .info{grid-template-columns:1fr}
  .info-col{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .info-col:last-child{border-bottom:0}
  .info-col:nth-child(3){border-top:0}
  .orderbar{flex-direction:column;align-items:stretch;padding:22px 20px}
  .orderbar .btn-dark{width:100%}

  footer{padding:64px 0 32px}
  .foot-grid{display:flex;flex-direction:column;gap:32px}
  .foot-c{text-align:left}
  .legal{flex-direction:column;gap:8px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.12s!important;transition-delay:0s!important}
  h1.wordmark i{opacity:1;transform:none}
  .shot img{clip-path:none}
  .chopsticks line{stroke-dashoffset:0}
  .ticker-track{transform:none}
  [data-reveal]{opacity:1;transform:none}
  .underline::after{width:100%}
}
</style>
</head>
<body id="top">

<a class="skip" href="#menu">Skip to the menu</a>

<!-- ============ LEFT RAIL ============ -->
<aside class="rail" aria-label="Kimchi Loco service rail">
  <div class="rail-mark" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="#171716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3c1.6 2.6.6 4.2-.4 5.4C10.4 9.7 9.6 11 9.6 13a4.4 4.4 0 0 0 8.8.4c0-3.2-2-4.6-2.6-6.4"/>
      <path d="M12 21c-2.8 0-5-1.9-5-4.6 0-2 1.3-3.2 2.2-4.3"/>
    </svg>
  </div>
  <div class="rail-line" aria-hidden="true"></div>
  <div class="rail-mid"><b>Los Angeles</b> &nbsp;/&nbsp; Korean Tacos &nbsp;/&nbsp; Made to order</div>
  <div class="rail-foot">
    <span class="dot" aria-hidden="true"></span>
    <span class="wordmark-v" aria-hidden="true">Kimchi Loco</span>
  </div>
</aside>

<div class="shell">

  <!-- mobile status -->
  <div class="mstatus">
    <span class="dot" aria-hidden="true"></span>
    <span class="lit">Open now</span>
    <span>East Hollywood · 5:00–10:00 PM</span>
  </div>

  <!-- ============ HEADER ============ -->
  <header class="top">
    <div class="wrap top-in">
      <a class="brandmark" href="#top" aria-label="Kimchi Loco home">
        <span class="kl">Kimchi <em>Loco</em></span>
        <span class="sub">Korean tacos · LA</span>
      </a>
      <nav class="main" aria-label="Main">
        <a class="navlink" href="#menu">Menu</a>
        <a class="navlink" href="#story">Our story</a>
        <a class="navlink" href="#find">Find us</a>
        <a class="btn btn-primary btn-sm" href="#order">
          Order now
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13"/><path d="M13 6l6 6-6 6"/></svg>
        </a>
      </nav>
    </div>
  </header>

  <main>
    <!-- ============ HERO ============ -->
    <section class="hero">
      <div class="wrap hero-grid">

        <div class="hero-brand">
          <svg class="chopsticks" viewBox="0 0 560 260" fill="none" aria-hidden="true">
            <line x1="6" y1="40" x2="612" y2="150"/>
            <line x1="6" y1="96" x2="612" y2="206"/>
          </svg>
          <p class="eyebrow util"><span class="bar"></span> Now serving · Los Angeles</p>
          <h1 class="wordmark">
            <span><i>Kimchi</i></span>
            <span><i>Loco</i></span>
            <span><i>Truck</i></span>
          </h1>
        </div>

        <div class="hero-text">
          <p class="tagline">Seoul heat.<br><em>Locally made.</em></p>
          <p class="lead">Kimchi, salsa, and the good kind of mess. Korean-Mexican tacos built for the street and served until the griddle cools.</p>
          <div class="cta-row">
            <a class="btn btn-primary" href="#order">
              Order now
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13"/><path d="M13 6l6 6-6 6"/></svg>
            </a>
            <a class="btn btn-ghost" href="#find">
              See today’s location
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
            </a>
          </div>
          <p class="hero-status">
            <span class="dot" aria-hidden="true"></span>
            <span class="lbl">Open now</span>
            <span class="txt">Tonight: East Hollywood · 5:00–10:00 PM</span>
          </p>
        </div>

        <div class="hero-media">
          <div class="shot">
            <img src="https://images.unsplash.com/photo-1565299585323-38d6b0865b47?auto=format&fit=crop&w=1600&q=85"
                 alt="Three Korean tacos loaded with spicy pork, kimchi, scallions and sesame on a metal tray">
            <div class="detail-crop" aria-hidden="true">
              <img src="https://images.unsplash.com/photo-1565299585323-38d6b0865b47?auto=format&fit=crop&w=400&h=400&q=85" alt="">
            </div>
            <div class="note">
              <span class="sq" aria-hidden="true"></span>
              <span>
                <strong>Hot off the griddle</strong>
                <span>Walk-up window · Card &amp; cash</span>
              </span>
            </div>
          </div>
        </div>

      </div>

      <!-- ============ TICKER ============ -->
      <div class="ticker" aria-hidden="true">
        <div class="ticker-track">
          <span>Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b> Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b></span>
          <span>Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b> Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b></span>
          <span>Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b> Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b></span>
          <span>Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b> Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b></span>
          <span>Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b> Seoul heat <b>/</b> Los Angeles street <i>/</i> Made to order <b>/</b></span>
        </div>
      </div>
    </section>

    <!-- ============ MENU ============ -->
    <section class="menu" id="menu">
      <div class="wrap menu-grid">
        <div class="menu-head">
          <p class="section-kicker util"><span class="bar"></span> The lineup</p>
          <h2 class="sec">The<br>Menu</h2>
          <p>Four tacos, built to order. Order three, get sauce on your shirt. That’s the point.</p>
          <span class="heat-index">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c1.6 2.6.6 4.2-.4 5.4C10.4 9.7 9.6 11 9.6 13a4.4 4.4 0 0 0 8.8.4c0-3.2-2-4.6-2.6-6.4"/><path d="M12 21c-2.8 0-5-1.9-5-4.6 0-2 1.3-3.2 2.2-4.3"/></svg>
            Heat index · mild to hot
          </span>
        </div>

        <div class="menu-list">

          <a class="menu-row" href="#order">
            <span class="m-name">Seoul Sex <span class="m-action">Order →</span></span>
            <span class="m-desc">Spicy pork, kimchi salsa, scallion, sesame</span>
            <span class="m-price">$6</span>
            <span class="m-heat">
              <span class="heat-dot" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#F0442E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c1.6 2.6.6 4.2-.4 5.4C10.4 9.7 9.6 11 9.6 13a4.4 4.4 0 0 0 8.8.4c0-3.2-2-4.6-2.6-6.4"/></svg></span>
              <span class="heat-label">Med–hot</span>
              <span class="sr-only">Heat level 4 out of 5</span>
            </span>
          </a>

          <a class="menu-row" href="#order">
            <span class="m-name">Gangnam Fry <span class="m-action">Order →</span></span>
            <span class="m-desc">Crispy chicken, gochujang glaze, pickled radish</span>
            <span class="m-price">$7</span>
            <span class="m-heat">
              <span class="heat-dot" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#F0442E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c1.6 2.6.6 4.2-.4 5.4C10.4 9.7 9.6 11 9.6 13a4.4 4.4 0 0 0 8.8.4c0-3.2-2-4.6-2.6-6.4"/></svg></span>
              <span class="heat-label">Hot</span>
              <span class="sr-only">Heat level 5 out of 5</span>
            </span>
          </a>

          <a class="menu-row" href="#order">
            <span class="m-name">Kimchi Loco <span class="m-action">Order →</span></span>
            <span class="m-desc">Bulgogi beef, kimchi, avocado salsa, tortilla crisp</span>
            <span class="m-price">$7</span>
            <span class="m-heat">
              <span class="heat-dot" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#F0442E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c1.6 2.6.6 4.2-.4 5.4C10.4 9.7 9.6 11 9.6 13a4.4 4.4 0 0 0 8.8.4c0-3.2-2-4.6-2.6-6.4"/></svg></span>
              <span class="heat-label">Med–hot</span>
              <span class="sr-only">Heat level 3 out of 5</span>
            </span>
          </a>

          <a class="menu-row" href="#order">
            <span class="m-name">Bean There <span class="m-action">Order →</span></span>
            <span class="m-desc">Black bean, roasted corn, salsa verde, cotija</span>
            <span class="m-price">$6</span>
            <span class="m-heat">
              <span class="heat-dot" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#F0442E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c1.6 2.6.6 4.2-.4 5.4C10.4 9.7 9.6 11 9.6 13a4.4 4.4 0 0 0 8.8.4c0-3.2-2-4.6-2.6-6.4"/></svg></span>
              <span class="heat-label">Mild</span>
              <span class="sr-only">Heat level 1 out of 5</span>
            </span>
          </a>

          <div class="menu-foot">
            <p>Sides: kimchi fries $8 · tteok bites $6 · extra house sauce $1</p>
            <a class="btn btn-ghost dark" href="#order">
              Start an order
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13"/><path d="M13 6l6 6-6 6"/></svg>
            </a>
          </div>

        </div>
      </div>
    </section>

    <!-- ============ STORY ============ -->
    <section class="story" id="story">
      <div class="wrap story-grid">
        <div class="story-copy">
          <p class="section-kicker util" data-reveal style="--d:0s"><span class="bar"></span> Our story</p>
          <h2 class="sec" data-reveal style="--d:.06s">Two<br>cuisines.<br>One window.</h2>
          <p data-reveal style="--d:.14s">We put kimchi on the griddle, folded it into a tortilla, and stopped explaining ourselves. Everything is made to order in a truck the size of a one-car garage.</p>
          <ul class="facts">
            <li data-reveal style="--d:.2s">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="7"/><rect x="3" y="13" width="18" height="7"/><path d="M7 7.5h.01M7 16.5h.01"/></svg>
              <span><b>Cooked to order</b><span>Nothing sits under a heat lamp.</span></span>
            </li>
            <li data-reveal style="--d:.28s">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c1.6 2.6.6 4.2-.4 5.4C10.4 9.7 9.6 11 9.6 13a4.4 4.4 0 0 0 8.8.4c0-3.2-2-4.6-2.6-6.4"/><path d="M12 21c-2.8 0-5-1.9-5-4.6 0-2 1.3-3.2 2.2-4.3"/></svg>
              <span><b>House-fermented kimchi</b><span>Two weeks in the back of the truck.</span></span>
            </li>
            <li data-reveal style="--d:.36s">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
              <span><b>Local routes only</b><span>East Hollywood to Downtown, six nights a week.</span></span>
            </li>
          </ul>
        </div>

        <div class="story-media">
          <div class="stack">
            <img class="p1" data-reveal style="--d:.1s" loading="lazy"
                 src="https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?auto=format&fit=crop&w=1000&q=85"
                 alt="Close-up of a Korean-Mexican taco being assembled with meat, kimchi and herbs">
            <img class="p2" data-reveal style="--d:.2s" loading="lazy"
                 src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=900&q=85"
                 alt="Hands working over a hot griddle inside the food truck">
            <img class="p3" data-reveal style="--d:.3s" loading="lazy"
                 src="https://images.unsplash.com/photo-1565123409695-7b5ef63a2efb?auto=format&fit=crop&w=1400&q=85"
                 alt="Kimchi Loco food truck parked at night with the service window lit">
          </div>
        </div>
      </div>
    </section>

    <!-- ============ VISIT ============ -->
    <section class="visit" id="find">
      <div class="wrap">
        <div class="visit-head">
          <p class="section-kicker util" data-reveal style="justify-content:center"><span class="bar"></span> Find the truck</p>
          <h2 class="sec" data-reveal style="--d:.06s">Find the truck.<br>Follow the <span class="underline">heat</span>.</h2>
          <p data-reveal style="--d:.14s">We park where the night is already happening. Here’s where to find the red light this week.</p>
        </div>

        <div class="status" data-reveal style="--d:.18s">
          <span class="state">
            <span class="dot" aria-hidden="true"></span>
            <span class="txt"><strong>Open now</strong><span>Service window open · kitchen hot</span></span>
          </span>
          <span class="mid">Tonight: East Hollywood
            <small>5:00 PM–10:00 PM · Santa Monica Blvd &amp; North Heliotrope Dr</small>
          </span>
          <a class="btn btn-primary btn-sm" href="#order">
            Order now
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13"/><path d="M13 6l6 6-6 6"/></svg>
          </a>
        </div>

        <div class="info">
          <div class="info-col">
            <p class="info-head util">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
              Where
            </p>
            <h3>East Hollywood</h3>
            <p>Santa Monica Blvd &amp; North Heliotrope Dr</p>
            <p class="sm">Tue–Thu · curbside, north side of the boulevard</p>
            <p class="sm">Fri–Sat · Sunset &amp; Western, after 7 PM</p>
          </div>

          <div class="info-col">
            <p class="info-head util">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5.4l3.4 2"/></svg>
              Hours
            </p>
            <h3>Service window</h3>
            <p>Tuesday–Thursday · 5:00–10:00 PM</p>
            <p>Friday–Saturday · 5:00 PM–12:00 AM</p>
            <p class="sm">Sunday · 2:00–8:00 PM · Monday · dark</p>
          </div>

          <div class="info-col">
            <p class="info-head util">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="7"/><rect x="3" y="13" width="18" height="7"/><path d="M7 7.5h.01M7 16.5h.01"/></svg>
              How to order
            </p>
            <h3>Walk-up only</h3>
            <p>Say your order at the window. Card &amp; cash.</p>
            <p class="sm">Average wait 6 minutes · groups of 8+ call ahead</p>
          </div>
        </div>

        <div class="orderbar" id="order" data-reveal>
          <span class="txt">
            <strong>Order at the window</strong>
            <span>Six tacos, two hands, zero apps to download. Tap below for the pickup ticket.</span>
          </span>
          <a class="btn btn-dark" href="#menu">
            Build my order
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13"/><path d="M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </section>
  </main>

  <!-- ============ FOOTER ============ -->
  <footer>
    <div class="wrap">
      <p class="foot-state">Come hungry.<br>Leave with <em>kimchi</em><br>on your mind.</p>

      <div class="foot-grid">
        <div class="foot-a">
          <h4>Hours</h4>
          <p>Tue–Thu · 5:00–10:00 PM</p>
          <p>Fri–Sat · 5:00 PM–12:00 AM</p>
          <p>Sun · 2:00–8:00 PM · Mon closed</p>
        </div>
        <div class="foot-b">
          <h4>Truck</h4>
          <div class="foot-links">
            <a href="#menu">Menu</a>
            <a href="#story">Our story</a>
            <a href="#find">Find us</a>
            <a href="#order">Order now</a>
          </div>
        </div>
        <div class="foot-c">
          <h4>Say hello</h4>
          <p class="kl">Kimchi<br>Loco</p>
          <p style="margin-top:12px">hello@kimchiloco.la</p>
          <p><a href="https://www.instagram.com/" rel="noopener">@kimchiloco</a></p>
        </div>
      </div>

      <div class="legal">
        <span>© 2025 Kimchi Loco · Los Angeles, CA</span>
        <span>LA County Health Dept. permitted · SafeSport certified</span>
        <span>Seoul heat / Los Angeles street</span>
      </div>
    </div>
  </footer>

</div>

<script>
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var targets = document.querySelectorAll('[data-reveal], .visit-head h2');

  if (!('IntersectionObserver' in window) || reduce) {
    targets.forEach(function (el) { el.classList.add('in'); });
    return;
  }

  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('in');
        io.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });

  targets.forEach(function (el) { io.observe(el); });

  // smooth anchor scrolling with header offset
  document.querySelectorAll('a[href^="#"]').forEach(function (a) {
    a.addEventListener('click', function (e) {
      var id = a.getAttribute('href');
      if (id.length < 2) return;
      var t = document.querySelector(id);
      if (!t) return;
      e.preventDefault();
      var top = t.getBoundingClientRect().top + window.pageYOffset - 78;
      window.scrollTo({ top: top, behavior: reduce ? 'auto' : 'smooth' });
      if (t.hasAttribute('tabindex') === false) t.setAttribute('tabindex', '-1');
      t.focus({ preventScroll: true });
    });
  });
})();
</script>
</body>
</html>
Reasoning trace (11,258 tokens)
We need a high-impact, appetite-first website for Kimchi Loco, a Korean-Mexican taco truck in LA, designed to make passersby crave the food and immediately find the schedule.

**Who this is for.** A new Korean-Mexican taco truck in LA. The visitor is standing on a sidewalk or slouching on a couch, half-hungry, half-deciding. They don't want a brand story — they want to know what's in the taco, how hot it is, and where the truck is right now. So the site has to do two jobs at once: hit the appetite instantly, and then hand over practical service information without making anyone dig. Everything I decide below serves that split.

**The core metaphor.** I'm not designing a restaurant website. I'm designing a service window after dark: a black-painted truck panel, taped menu letters, a hand-painted sign, red order stickers, and one bright strip of light spilling onto the curb. That gives me the whole visual system — dark surface, hard edges, one signal color, one paper surface. No cards floating on gradients, no soft shadows, no rounded-everything SaaS layout. Flat, high-contrast, physical.

**Palette.** The canvas is `#111111` — near-black but not pure, so photography and paper sit on it without going flat. Elevated surfaces go to `#1D1D1B` for the truck-status strip and menu hover states; structural lines are `#3A3935`, thin and quiet. Text is `#F7F3EA` — warm off-white, never pure white, because pure white on black is a screen, not a painted panel. The menu chapter flips entirely onto paper `#F1E8D4` with `#171716` ink, which gives the page a physical break — you've walked from the night street up to the counter.

The signal color is `#F0442E`. It is the loudest thing on the page and I'm rationing it hard: the ORDER NOW block, the left rail accent, the open status square, the heat markers, and the hatch in the wordmark. Nowhere else. If red starts appearing as decoration it stops meaning "go here." Secondary is `#D7EF3D` lime, used only for freshness and location confirmations — the "we're here now" line, the current-stop marker, small metadata. Never a button background; red owns conversion. `#F3A43B` orange does exactly two jobs: the chopstick lines and the spice indicators.

**Typography.** Two voices. Barlow Condensed at weight 800 for everything that behaves like signage — the wordmark, headlines, section titles, menu names, the service ticker. It's condensed enough to go very large without breaking the grid, and it has that painted-on-metal density. DM Sans carries every functional word: descriptions, addresses, hours, buttons, labels. The rule I'm holding to is that condensed display type never carries a paragraph — the moment it does, it reads as decoration instead of signage.

Sizes: wordmark `clamp(64px, 13vw, 196px)` at line-height `0.78`, display `clamp(56px, 9vw, 136px)` at `0.84`, section headings `clamp(44px, 6vw, 84px)`, menu names `34px` desktop / `28px` mobile. Body is `16px/1.55`, small `14px/1.45`, utility `12px/700` uppercase with `0.08em` tracking, button `14px/700`. Hero headline is sentence case — uppercase is reserved for labels, nav, and the ticker.

**Layout system.** 1440px max width, `32px` gutters desktop / `20px` mobile. Twelve columns, `24px` gap. Base spacing unit 8; section rhythm 144px desktop, 88px mobile. Corners are `0px` everywhere except the circular heat indicators. Dividers are `1px solid #3A3935`. No shadows — depth comes from contrast, overlap, and photography.

The left rail is `48px` wide, fixed on desktop: a red block with a rotating menu label, a thin vertical line, the live service status, and a vertical wordmark. It's an orientation device, not decoration, so it collapses to a compact horizontal status strip under `1024px`.

**Hero.** The single most important composition on the site, and it has to be legible in three seconds: `KIMCHI LOCO` is unmistakable, there is food, there is a location, there is an action. I'm going `6 / 6` rather than the 7/5 I first sketched — the headline set at 13vw needs the full left half to break across two lines cleanly, and the photograph needs an equal share to be a real appetite object rather than a thumbnail. Image bleeds to the right viewport edge at `55vh` (min 430px), with a `160px` circular detail crop of the same shot overlapping its lower-left corner — that's my second-scale detail without needing a second asset. A paper note strip with red and lime blocks sits across the image edge at `24px` from its bottom.

Below the hero, a full-width ticker: `SEOUL HEAT / LOS ANGELES STREET / MADE TO ORDER`, repeating, running left over 24s, on `#1D1D1B` with hairlines top and bottom. It's the truck's signage, and it stays readable while it moves — 18% travel, no blur.

**Menu.** This is the appetite proof and it must not look like a software pricing table. It lands on paper, immediately after the hero. Left four columns hold the section title and the red vertical `HEAT INDEX` marker; right eight hold four rows at `112px` minimum, separated by `1px solid #B8B09F`. Name and description left, price and heat right. Hover paints the row `#1D1D1B`, flips text to paper, slides the name 8px right, and fades in a red "view detail" label — all inside 180ms, no height change, nothing hidden behind hover. Ingredients never get hidden; they're the reason someone orders.

**Story.** Back to night canvas, 5/7: copy left, and on the right three overlapping photographs — a `4:5` main dish, a `1:1` griddle detail dropped `-48px`, and a `16:9` truck shot at `-72px`, each separated by a `2px` canvas border instead of a shadow. This is the one section allowed to break the grid, and it earns it by reading like physical snapshots taped to the truck.

**Visit.** First half centered and oversized — `Find the truck. Follow the heat.` — with a red underline that draws in under "heat" when the heading lands. Second half is the operational truth: status strip on `#1D1D1B` with a lime dot, and an address/hours grid at 4/4/4 divided by hairlines. On mobile the status sits directly under the CTA so nobody scrolls to learn if the truck is open.

**Motion — "Steam to Street."** Expressive at two moments, silent otherwise. The signature is the load sequence: a dark mask lifts, wordmark lines rise 36px at 60ms stagger, the hero image opens via a rectangular clip-path wipe from `inset(0 100% 0 0)`, the orange chopstick lines draw left to right, and the location strip slides up last. `900ms`, `cubic-bezier(0.16, 1, 0.3, 1)`. Total under 1.6s. Beyond that: menu row hovers, the story heading and its three photographs entering at 16px with 100ms stagger, a continuous 8px/6s drift on the hero detail crop, and a two-step heat-dot pulse on the status marker. No continuous animation on text or food. Under `prefers-reduced-motion` the ticker and drift stop and everything renders at rest.

**Accessibility.** Focus ring `2px solid #D7EF3D` at `3px` offset, visible on both dark and paper. `44px` minimum touch targets. All icons inline SVG at `1.5px` stroke, `aria-hidden` when decorative. Location status exposed as text, not color alone.

Now, the build plan.

Key structure:
- Fixed left rail (desktop), collapses <1024px
- Header: nav + ORDER NOW
- Hero: wordmark KIMCHI LOCO, headline, copy, CTAs, image with clip-path reveal, circular detail crop, paper strip note
- Marquee ticker
- Menu section on paper background, 4/8 split, 4 rows, heat index
- Story section: 5/7 split, 3 overlapping photos
- Visit section: centered heading with red underline, status strip, 3-column info grid
- Footer with oversized closing statement

Fonts: Barlow Condensed + DM Sans from Google Fonts CDN. I'll load them via Google Fonts with robust system fallbacks.

Images: I'll use stable Unsplash URLs for the hero dish, detail crop, story dish, griddle, and truck exterior. Detail circle uses the hero image with different crop params.

Heat markers: circular red-orange indicators, accessible text (sr-only "3 out of 5 heat").

Order flow: ORDER NOW button — scroll to order/visit section. Menu item "order" reveal on hover — clicking a menu row could scroll to order. No alert(). A button with "ORDER NOW" scrolls to the "Visit/Order" section where there's an order panel with pickup info.

Let's build.

Details of layout:

Grid: `.wrap { max-width:1440px; margin:0 auto; padding:0 32px }`.

Rail: fixed left 0, width 48px, height 100vh, border-right 1px line, with red block at top (48x48 with a mark), a vertical text line, status dot at bottom. Body gets padding-left 48px on desktop.

Header: sticky top 0? Keep it non-sticky or sticky with backdrop. I'll make it sticky with dark background — careful with rail. Header inside the padded body, full width.

Hero: 12-col grid. Left 6.5, right 5.5 → grid-template-columns: repeat(12,1fr); left spans 1/7, right 7/13.

Wordmark huge: clamp(64px,13vw,196px), line-height .78, condensed 800. Two lines "KIMCHI" / "LOCO" — for KIMCHI LOCO at 13vw in a 6-col container, each word on its own line works nicely as a stack. Actually maybe wordmark on one line smaller and headline big? Let's do: small utility label "KOREAN TACOS / LOS ANGELES" above; then wordmark KIMCHI / LOCO stacked; then headline "SEOUL HEAT. LOCALLY MADE." at clamp(40px,4.4vw,72px); then paragraph; then CTAs.

Hmm, hero needs "Seoul heat. Locally made." display statement and wordmark. Let's do:
- eyebrow utility: "NOW SERVING · LOS ANGELES"
- H1 = wordmark "KIMCHI LOCO" (stacked two lines) — it's the biggest object.
- Then display line "Seoul heat. Locally made." smaller (~clamp(28px,3vw,46px)) in condensed.
- paragraph body
- CTAs: ORDER NOW (primary), SEE TODAY'S LOCATION (ghost with arrow)
- status line: lime dot + "Serving East Hollywood tonight · 5–10 PM"

Right: image block height 55vh min 430, object-fit cover, clipped reveal. Overlapping paper strip near bottom (position absolute bottom 24 left 24? partly over image). Circular detail crop 160px positioned bottom-left overlapping. And orange chopstick SVG lines behind headline (in the left area, absolute).

Marquee: full width, height 56, borders top/bottom, animation translateX.

Menu section: paper bg, padding 144 0. Grid 4/8: left title "THE MENU" + description + red vertical "HEAT INDEX" marker; right 4 rows.

Row: grid columns: name+desc | price | heat. Min-height 112. Border-bottom 1px solid rgba ink. Hover: bg #1D1D1B, text cream, name translateX 8px, right label "VIEW DETAIL" in red appears.

Careful: hover changes bg to dark — need padding on row so it looks intentional (negative margin padding 16px).

Story: canvas-dark, grid 5/7. Right photos overlapping with offsets: main 4/5, second 1/1 -48px left/top, third 16/9 -72px. Let's construct a relative container with three absolutely/floatingly placed items. Simpler: use a relative container height auto with grid areas. I'll do:

```
.photo-stack { position:relative; }
.photo-1 { width:72%; aspect-ratio:4/5; margin-left:auto; }
.photo-2 { position:absolute; width:44%; aspect-ratio:1/1; left:0; bottom:-? }
```
Let's do: photo-1 main right-aligned; photo-2 absolute left:-24px top:38%; photo-3 width:64% margin-top:-72px (margin-left: 0). With borders 2px solid #111.

Simplify:
```
<div class="stack">
  <img class="p1" ...>   (4/5, width 70%, margin-left auto)
  <img class="p2" ...>   absolute, 1/1, width 42%, left 0, top 30%
  <img class="p3" ...>   16/9, width 66%, margin-top -72px
</div>
```
p3 margin-top:-72px would pull it under p1. p1 is margin-left:auto so p3 sits left, overlapping below. Fine. Mobile: static flow, no absolute (media query).

Visit: centered heading with red underline drawing on "heat". Status strip dark with lime dot. 3 columns of info with dividers. Also order block: a red CTA "ORDER NOW" here too.

Footer: canvas-dark, oversized statement, red fill on "KIMCHI LOCO", hours line, legal.

Order section: I'll make the visit section include the status + hours + location + a primary order CTA. Add a small "order" panel: three steps? Keep simple: "ORDER AT THE WINDOW" with pickup details: "Walk-up only · Card & cash · Average wait 6 min". That satisfies "order flow and location information visible from every major section"? Not literally every section but nav has both.

Add sticky bottom bar on mobile? Not required. Keep nav visible.

Motion: IntersectionObserver for story reveal, heading underline. Hero load sequence via CSS animations with delays.

Reduced motion media query.

Accessibility: focus-visible outline 2px #D7EF3D offset 3px.

Keyboard: no game here. Fine.

Let me now write the code carefully.

Marquee implementation: track with duplicated content, animation translateX(-50%) 24s linear infinite; content set so it's seamless. Travel distance: 18% per cycle over 24000ms. If I set the track width to contain two identical spans and animate -50%, the travel is half the track. With a marquee whose total content is ~ (18% of viewport * something)... Easier: use a track with N spans; measure. I'll just make each span long enough (a phrase repeated a few times) and animate translateX(-25%) 24s linear infinite with 4 copies — travel = 25% of track = ... hmm.

Let's simplify: container width = viewport. Track contains two identical groups. If group width ≈ 2.2x viewport, translateX(-50%) of track = one group width ≈ 2.2 viewport widths in 24s — too fast (~92px/s). At 18% per cycle: 0.18*1280=230px/24s ≈ 9.6px/s. That's very slow, almost static, keeping it readable while it moves. But then it needs to be seamless: with travel 18% the content must repeat with period 18% of track width. Hmm complicated.

Alternative: make the phrase unit repeat such that unit width = 18% of viewport... too fiddly. I'll approximate: animate from translateX(0) to translateX(-18%) on a track that is much wider than viewport (with repeated phrases), and use two-phase? Not seamless unless track width - 18% is a multiple.

Practical approach: build track as a flex row of N identical spans, each span width = 18% of track... circular. Let's set track = flex with spans of equal text; total = N spans. Animate translateX(0 → -100%/N * k) where k such that it's seamless: translating by one span width (1/N of track) is seamless. So travel per cycle = trackWidth/N. If I want travel ≈ 18% of viewport and duration 24s: set track width via N spans of text; span width = trackWidth/N. Choose trackWidth = 100vw (span overflow), spans are inline text repeated.

Simplest: make the track contain 5 identical spans. trackWidth = W (auto, sum of 5 spans ≈ 5s where s = span width). One span = W/5 = 20% of W. If W ≈ 90% of viewport... Not controllable.

I'll do: track has many spans; animation translateX(0) → translateX(-10%) with the track having enough repeated content that a 10% shift still keeps seamless only if 10% of track = integer * span width. If track = 10 spans, 10% = exactly 1 span. Seamless! So: 10 identical spans, animate translateX(0) to -10% over duration where speed ~9.6px/s → duration = (0.1*W)/9.6. For W≈1280: 128px/9.6 ≈ 13.3s. I want 24000ms.

If duration is 24s and travel is 18%, speed = 0.18*W/24. For W=1400 → 10.5px/s. I'll choose: 10 spans, animate -18% — not seamless (18% isn't a multiple of 10%). Use 20 spans: 18% of track = 3.6 spans. Not integer.

Alternative: duration such that travel = 1/10 of track = 10%. Set duration = 24s? Speed = 0.1*1400/24 = 5.8px/s. Slow but readable-ish. Hmm, I could make travel 20% over 24s with 5 spans → speed 11.7px/s, and describe as such.

I'll go: 5 identical spans, translateX(0) → -20%, 24s linear infinite. Speed ≈ 0.2*W/24. For W=1400 → 11.7px/s. Fine and seamless. Traveling -20% over 24000ms in a 5-span track keeps seamlessness and stays around 18% of the track.

Actually wait — with 5 spans each equal, track width = 5s, 20% = 1s = one span. Seamless ✓.

But track must be at least 100vw + one span so no gap appears. With 5 spans of a long phrase (each phrase repeated ~3 times) total likely > 3x viewport. I'll make each span contain "SEOUL HEAT / LOS ANGELES STREET / MADE TO ORDER / " ×2 to be safe? If each span is long, then 20% of track is large → fast. Speed = 0.2*(5s)/24 = s/4... where s = span width. If span = 900px → 225px/24s ≈ 9.4px/s. Good: so each span ~ 900-1400px wide. A phrase "SEOUL HEAT / LOS ANGELES STREET / MADE TO ORDER / " at 24px condensed ≈ maybe 600px. Repeat it twice per span → 1200px. Good. Track total 6000px ≥ viewport+span ✓ (for spans up to 4600px).

OK.

Now hero chopstick lines SVG behind headline: two orange diagonal lines absolutely positioned, animated stroke-dashoffset drawing.

Let me write CSS variables.

```
:root{
--canvas:#111111; --surface:#1D1D1B; --line:#3A3935; --paper:#F1E8D4;
--ink:#F7F3EA; --ink-dark:#171716; --red:#F0442E; --lime:#D7EF3D; --orange:#F3A43B;
}
```

Fonts: `@import` vs `<link>`: use `<link>` in head — allowed (CDN). Barlow Condensed 700,800; DM Sans 400,500,700.

Now header nav on mobile: hide links, keep ORDER NOW. Add a compact status? Keep simple.

Let me write the whole HTML.

Hero heights: section min-height calc(100vh - header). Use padding.

I'll write it now, carefully, then check mobile.

Mobile hero: image first (order -1) then wordmark. Actually better: wordmark first then image, so brand shows immediately. I'll do wordmark first, then image, then copy/CTAs? Hmm, image early helps appetite. I'll order: eyebrow, wordmark, headline, image, copy, CTAs on mobile via flex order. Simpler: keep DOM order wordmark→headline→copy→CTAs→image, and on mobile use grid with image placed after wordmark... Let's just use CSS grid areas.

DOM: 
```
<div class="hero-copy">eyebrow, h1, tag, p, ctas, status</div>
<div class="hero-media">img, circle, strip</div>
```
On mobile: display flex column; hero-media order 2, hero-copy order 1 but then image at bottom. Better to split: put media between headline and rest? Easier: on mobile, media order:1 (first) — "image first or wordmark first depending on viewport height". I'll put wordmark+headline first (brand), then image, then copy+CTAs. To do that I'd need to split copy. Let's restructure hero as grid with named areas:

```
<div class="hero">
  <div class="hero-brand">eyebrow + h1 wordmark</div>
  <div class="hero-media">...</div>
  <div class="hero-text">tag line + p + ctas + status</div>
</div>
```
Desktop grid: columns 12; hero-brand: col 1/7 row 1; hero-text: col 1/7 row 2; hero-media: col 7/13 row 1/3.

Mobile: single column, order brand, media, text. 

Row heights: brand auto, text auto. Media spans both rows, align stretch with fixed height 55vh.

Good.

Now the paper strip over image and circular crop.

Circle: 160px, border-radius 50%, overflow hidden, position absolute, left:-80px, bottom:60px, border 2px solid #111. On mobile smaller (110px) and left:-24px? Could cause horizontal overflow. Set overflow-x hidden on body/hero.

Body overflow-x: hidden to be safe (no horizontal scrollbar).

Careful: `overflow-x:hidden` on body with sticky header can break sticky. Use `html,body{overflow-x:clip}`? `overflow-x:clip` is supported in Chrome and doesn't break position:sticky. I'll use `overflow-x:clip` on html and body.

Status dot pulse animation.

Story heading reveal: `.reveal` class with IntersectionObserver adding `.in`.

Heading underline: a span with ::after width 0 → 100% when .in.

Let's write.

Menu rows: make them `<a href="#order">`? They should be interactive with hover; clicking scrolls to order. Use `<a class="menu-row" href="#visit">`. Keyboard focus shows same states via :focus-visible/:focus-within.

Heat indicator: 5 small circles? I'll use circular heat indicators of 24px (radius 9999 only for heat indicators, not rectangular cards). I'll do a circular badge with a flame-ish? Simpler: circle 28px with number of heat? Let's do a row of 3 filled circles of 10px... but "24px" mentioned. I'll do a 28px circle containing chili count? Hmm.

Design: heat shown as a circle 32px with orange border and a small flame SVG inside, plus sr-only text "Heat 3 of 5" and visually the label "HEAT 3/5" in utility text next to it. Actually accessibility requires text alternative, so display text "MED–HOT" plus circle marker.

Let's do: `<span class="heat"><span class="heat-dots">3 filled /2 empty dots</span><span class="sr-only">Heat level 3 out of 5</span><span class="heat-label">MED–HOT</span></span>`. And the circular element: one 24px circle with flame icon per level? Simplest and pretty: five 12px circles? But heat dots should be circular indicators. I'll do a single 24px circle as the marker colored by level with a flame SVG, plus label + sr-only. Good: circular heat indicator 24px.

Actually nicer visual: a row of 5 small circles (10px) filled per level, wrapped, plus label. I'll do both: 24px circle marker with flame, and label text. Keep it.

Menu row grid: 
```
grid-template-columns: 1fr auto auto; gap 24; align-items:center
```
Right: price (Barlow 34px) and heat block. On mobile: stack price above desc — order: name, price, desc, heat.

Mobile layout for row:
```
.menu-row{grid-template-columns:1fr auto; }
name (col1), price(col2), desc (col1 span), heat(col2)
```
I'll structure DOM as: .m-main (name + desc), .m-price, .m-heat. Desktop: 3 cols. Mobile: grid-template-areas.

```
.m-main{grid-area:name}  -> no, desc inside main.
```
Mobile: .menu-row { grid-template-columns: 1fr auto; } .m-main{grid-column:1/-1; order:1}... but price must be above desc. So separate name and desc:
DOM: `.m-name`, `.m-desc`, `.m-price`, `.m-heat`.
Desktop grid: columns: 1fr auto auto; rows: name+price row1? Better:
```
grid-template-columns: 1fr auto;
grid-template-areas: "name price" "desc heat";
```
Desktop: name left, price right, desc left, heat right. That matches "price aligned right" and heat right. Nice and clean.
Mobile: 
```
grid-template-areas: "name price" "desc desc" "heat heat";
```
Actually fine.

Row hover dark bg — padding 16px 20px, margin -? Use padding and negative margin to keep alignment: just add padding: 20px 16px; margin: 0 -16px. Border-bottom remains.

Story section right stack.

Visit section: heading centered, red underline under "heat". Status strip. 3 columns.

Order block in visit: big red ORDER NOW + "Walk-up window · Card & cash · Avg wait 6 min".

Footer: statement "COME HUNGRY. LEAVE WITH..." with KIMCHI LOCO in red.

Wait footer statement: "COME HUNGRY. LEAVE WITH KIMCHI ON YOUR MIND." with KIMCHI LOCO in red — the phrase doesn't contain "KIMCHI LOCO" literally... I'll render "COME HUNGRY. LEAVE WITH KIMCHI LOCO ON YOUR MIND." Hmm awkward. Use: "COME HUNGRY. LEAVE WITH KIMCHI ON YOUR MIND." and separately wordmark KIMCHI LOCO in red above. I'll do: statement "COME HUNGRY. LEAVE WITH KIMCHI ON YOUR MIND." and the wordmark "KIMCHI LOCO" in red as the sign-off. Good.

Footer content: nav links, hours, legal (© 2025 Kimchi Loco · Los Angeles, CA · Health Dept. permitted), IG link.

Rail: red block top with "KL" mark? Rail: at top a 48px red square with a flame svg; middle vertical text "KIMCHI LOCO — LOS ANGELES"; bottom: lime dot + vertical "OPEN" or time. Use writing-mode vertical-rl.

Now hero load animations: `.hero-media img` clip-path animation from inset(0 100% 0 0) to inset(0 0 0 0), 900ms.

Wordmark lines rise: two spans with translateY(36px) opacity 0 → animate with delay.

I'll add class `is-loaded` to body on DOMContentLoaded (or just use CSS animations directly on load with animation-delay — safer, they run automatically). Use CSS animations with `both` fill mode. But screenshot at 3s — animations complete by then ✓.

Note: elements with animation from opacity 0 → if JS fails they still animate. Use pure CSS animations (no JS gating). Good for robustness.

Circle drift: animation 6s alternate infinite translate.

Reduced motion: disable all.

Now write the code. Also add `prefers-reduced-motion` overrides.

Nav links: MENU, OUR STORY, FIND US → anchors #menu, #story, #find.

Let me write it out.

CSS length manageable. Let's go.

One more: header sticky. `position:sticky; top:0; z-index:50; background:rgba(17,17,17,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)`. Since body has padding-left 48px for rail, sticky inside works.

Rail is `position:fixed; left:0; top:0; height:100vh`. Body wrapper padding-left:48px at ≥1024px.

Mobile: rail hidden, replaced by a horizontal status bar under header? I'll add a compact `.rail-mobile` inside header on mobile showing lime dot + "OPEN TONIGHT · 5–10 PM" small. Keep header not too tall: put it as a thin strip above header (order -1) full width. Fine.

Let's write final HTML.

Image URLs:
- hero: photo-1565299585323-38d6b0865b47
- circle detail: same photo w=400 different crop params: `&crop=entropy` — I'll reuse with w=400&h=400&fit=crop.
- story main: photo-1551504734-5ee1c4a1479b
- griddle: photo-1515003197210-e0cd71810b5f
- truck exterior: photo-1565123409695-7b5ef63a2efb (valid Unsplash photo id — yes that's a food truck photo I believe).

All with `?auto=format&fit=crop&w=...&q=85`.

Add `loading="lazy"` except hero. `onerror` fallback? Not needed but nice: set background color.

Now writing.

For the marquee span text: `SEOUL HEAT <i>/</i> LOS ANGELES STREET <i>/</i> MADE TO ORDER <i>/</i> ` ×2 per span, 5 spans.

Let me finalize sizes and write code.

Order section: I'll add id="order" on the visit's order block? Nav "ORDER NOW" → href="#find" maybe better goes to order panel. I'll give the order panel id="order" and hero CTA → #order. And #find for location. Actually combine: section id="find" contains status+location+order. Hero primary CTA → #order (the order panel), secondary → #find. Let's place order panel before location info inside the visit section: heading centered, then order CTA panel, then status strip, then 3-col info. Hmm ordering: heading → status strip → info grid → order CTA. For a food truck, order CTA should be near top after heading. Layout:

Visit section:
1. eyebrow "FIND THE TRUCK"
2. H2 "Find the truck. Follow the heat."
3. sub copy
4. status strip (lime dot, "OPEN NOW / TONIGHT: 5:00–10:00 PM")
5. grid 3 cols: LOCATION / HOURS / HOW TO ORDER
6. order row: red ORDER NOW button + "Walk-up window · Card & cash · Avg wait 6 min"

Good.

Let's write.

For the heat flame SVG icon, inline symbol repeated — I'll just write small inline svg each time (4 rows).

Let me write the code now.

Detail on hover "order action appears in red": `.m-action` opacity 0 → 1 on hover, positioned right of name maybe. I'll add under price? Put it in the name row: after name, a small red "ORDER →" label. On hover appears.

OK writing final.

Height of hero right: `height:55vh; min-height:430px`. On mobile `height:46vh; min-height:280px`.

Hero padding: `padding: 56px 0 72px`.

Now grid: `.hero-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start}`. brand: grid-column 1/7; text: 1/7; media: 7/13; rows: brand row1, text row2, media row 1/3 with `align-self:stretch`.

Set `grid-template-rows: auto auto`.

Media height 55vh min 430 might exceed; fine.

Actually with 2 rows and media spanning, media height determined by rows (stretch) — I set explicit height on media container so rows will match. Set `.hero-media{height:55vh;min-height:430px;position:relative}`. Grid stretch will make its row heights sum ≥ that. Fine.

The chopstick SVG: absolutely positioned in hero-brand area behind wordmark, pointer-events none, z-index 0; wordmark z-index 1.

Let's write it.

Also `SEE TODAY'S LOCATION` ghost button with arrow.

Finally: footer legal + "Instagram" link (href="#" — no target). Use `href="#"` might jump; use `https://instagram.com` external? It's a real URL, allowed (external link, not a resource fetch). I'll use `#` with no jump issue... clicking `#` scrolls to top. Use `<a href="#top">`? Just make IG a plain link to `https://www.instagram.com/` — that's fine, opens same tab. Keep simple.

Write the code.

Approx 700 lines. Go.

Accessibility sr-only class.

Let me be careful with focus-visible on dark/paper.

Code:

```html
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<a class="skip" href="#menu">Skip to menu</a>
<aside class="rail">...</aside>
<div class="shell">
 <header>...</header>
 <main>
   <section class="hero">...</section>
   <div class="ticker">...</div>
   <section id="menu" class="menu">...</section>
   <section id="story" class="story">...</section>
   <section id="find" class="visit">...</section>
 </main>
 <footer>...</footer>
</div>
</body>
```

Shell padding-left 48px on desktop (rail width).

Rail internal: red square at top with flame icon, vertical text center, status bottom.

Now full CSS. Write it.

For story reveal observer: elements with `[data-reveal]`, add `.in`.

Heading underline: `.underline{position:relative}` `.underline::after{content:'';position:absolute;left:0;bottom:-8px;height:6px;background:var(--red);width:0;transition:width .9s cubic-bezier(.16,1,.3,1)}` `.in .underline::after{width:100%}`.

Add stagger via transition-delay inline style or nth-child.

OK, writing final answer.

Mobile nav: hide `.nav-links` below 760px; keep ORDER NOW button (padding smaller). Also mobile status strip above header.

Let me write everything now.

For the paper strip over hero image: a small paper block with red top border? Paper strips across image near bottom at 24px from bottom: small note strip with lime accent square: text "TODAY 5–10 PM · HOOLYWOOD & SANTA MONICA" plus small red/lime blocks. Position absolute bottom:24px; left:24px; background paper; color ink-dark; padding 10px 14px; border-left 6px solid red.

But circle crop also bottom-left. Put circle at left:-72px bottom:96px (overlapping edge), strip at right? Put strip bottom:24px; left:24px; and circle at left:-80px, top:40px? Hmm. Let's: circle bottom: -60px? That would overflow hero into ticker.

Plan: circle positioned `left:-72px; bottom:72px` (overlaps image left edge, partially outside image). Strip at `right:24px; bottom:24px`. On mobile: circle `left:-28px; bottom:56px; width:112px`, strip left:16 right:16 bottom:16 font smaller.

Hmm circle overlapping outside image at left goes over hero text column — could collide with text at desktop. The hero text column ends at col 6 boundary; media starts col 7. Gap 24px. Circle 160px at left:-72 overlaps 72px into the gap+text. On desktop text is below/right... risk of overlap with CTA row. Safer: circle `left:-56px; bottom:56px` and ensure left column content (text) has enough bottom space. Or place circle at bottom-left INSIDE image: left:24px; bottom:24px, and strip to the right of it. That's clean and safe. But "overlapping" gives depth. I'll do circle at `left:-56px` on desktop only (≥1024) where text column width 6 cols and CTA row is above media bottom... Actually media spans both rows so it's full height; the text bottom might align with media bottom. The circle at bottom:56 could overlap the status line.

Decision: circle positioned `left:-56px; top:calc(55vh - 200px)`? Overthinking. Put circle at top-left of image: `left:-56px; top:32px` — overlaps the wordmark area? Wordmark is in col1-6, image col7-13; circle extends 56px left of image into the gap (24px) + 32px into text column at top where the wordmark's right side may reach. Wordmark at 13vw stacked two lines: "KIMCHI" width ~ 6 chars condensed at 196px ≈ 6*100=600px; column width at 1440-64-48 = 1328; 6/12 ≈ 640px. So wordmark nearly fills the column. Circle would overlap it.

Simplest safe: circle inside image bottom-left with slight overlap onto image edge: `left:-40px; bottom:32px` → overlaps 40px left, gap is 24, so 16px into text column at the very bottom where status line sits. 16px overlap is negligible and could even collide. Let me instead keep circle fully inside: `left:20px; bottom:88px` and strip at `bottom:20px; left:20px`... they'd stack (circle 160 tall from bottom 88 → top at 248 from bottom; strip height ~44 at bottom 20-64). No collision. Good: both inside the image, circle slightly overlapping the strip? no.

Do: circle `right:24px; top:24px`? The detail crop reads better near the food. I'll place circle bottom-left inside, strip bottom-right inside? Strip width text might be long.

Final: circle at `left:24px; bottom:24px` (inside), note strip at `top:24px; right:24px` (inside, paper). Clean, no overflow, layered feel. Plus the image bleeds to right edge. Good enough; I'll also give the circle a 3px paper border to make it pop.

Hmm but "overlapping image and typography" — the strip over the image qualifies. Fine.

Actually, let me add a small overlap: circle `left:-40px` only at ≥1200px where there's room... no, keep safe. Decision: inside.

Now write.

Ticker sits full-bleed under hero.

I think I'm ready. Write final code.

One more consideration: `.shell` — rail fixed 48px; shell margin-left 48px (desktop). Full-bleed ticker inside shell spans shell width (viewport-48) — acceptable.

Full-bleed elements: ticker background should reach edges; inside shell it reaches viewport minus rail. Fine.

Write.

For menu section paper: full width of shell.

Story stack CSS:

```
.stack{position:relative; padding-left:0}
.stack .p1{width:78%; margin-left:auto; aspect-ratio:4/5; display:block; object-fit:cover; border:2px solid var(--canvas)}
.stack .p2{position:absolute; left:0; top:34%; width:42%; aspect-ratio:1/1; object-fit:cover; border:2px solid var(--canvas)}
.stack .p3{width:66%; aspect-ratio:16/9; object-fit:cover; margin-top:-72px; border:2px solid var(--canvas); position:relative; z-index:2}
```
Wait p3 after p1 with negative margin -72 will overlap p1's bottom. p1 is right-aligned width 78%; p3 width 66% left aligned. Overlap region: p1 spans from 22% to 100%, p3 from 0 to 66% → overlap 22-66%. p3 z-index 2 sits over p1. Nice collage.

p2 absolute left 0 top 34% overlaps p1's left portion (p1 starts at 22%) — p2 spans 0-42%, overlaps 22-42% ✓.

Ensure stack has enough height: p1 aspect 4/5 at 78% width of ~700px = 546 → height 682. p3 with -72 margin adds. Total ~ 682 + (0.66*700*9/16=260) -72 = 870. p2 at top 34% of container... container height determined by flow (p1+p3). p2 absolute doesn't affect height; its height = 42%*700=294 → top 0.34*870=296 → bottom 590 < 870 ✓ inside.

Mobile (<768): static, p1 width 100%, p2 width 60% margin-top:-32px (or just stack), p3 width 80% margin-top:-32px. Set `.p2{position:static; width:60%; margin-top:-40px; margin-left:0}` etc.

Fine.

Now, write the code.

Reveal targets: `.story h2`, `.story .p1/.p2/.p3`, `.story .s-copy`.

IntersectionObserver with threshold 0.15, add `in`, unobserve.

Stagger: transition-delay via CSS nth or inline style attributes. I'll use inline `style="--d:.1s"` and `transition-delay:var(--d,0s)`.

Go.

Final check on "no horizontal scrollbar": overflow-x:clip on html/body.

Also the hero media bleeds to the right viewport edge — with shell padding 32 on wrap, media is inside wrap. To bleed: give hero-media `margin-right: calc(-1 * var(--gutter))` at desktop so it touches the edge. Nice touch. Do that (gutter 32px). Then it reaches viewport right edge exactly. ✓

**Locking it down:**

- **Colors:** canvas `#111111` · surface `#1D1D1B` · line `#3A3935` · paper `#F1E8D4` · paper-line `#B8B09F` · ink `#F7F3EA` · ink-dark `#171716` · red `#F0442E` · lime `#D7EF3D` · orange `#F3A43B`
- **Type:** Barlow Condensed 700/800 (display, wordmark, headings, prices, ticker) + DM Sans 400/500/700 (body, utility, buttons), Google Fonts with system fallbacks
- **Sizes:** wordmark `clamp(64px,13vw,196px)/0.78/800` · display `clamp(56px,9vw,136px)/0.84/800` · section `clamp(44px,6vw,84px)/0.88/800` · menu name `34px/0.95` desktop, `28px` mobile · body `16px/1.55` · small `14px/1.45` · utility `12px/700` uppercase `0.08em` · button `14px/700` uppercase
- **Grid:** 1440 max, gutters 32/20, 12 cols, 24px gap, spacing base 8, sections 144/88, radius 0 except heat circle, dividers `1px solid #3A3935`
- **Rail:** 48px fixed ≥1024px; compact status strip below
- **CTA primary:** bg `#F0442E`, text `#171716`, height 52, padding-x 24, radius 0; hover bg `#D7EF3D`, arrow +6px, 150ms ease-out · **secondary:** transparent, `1px solid #F7F3EA`, height 48, arrow inline, hover inverts
- **Menu row:** min-height 112, border-bottom `1px solid #B8B09F`, hover bg `#1D1D1B` / text `#F7F3EA` / name +8px / red order label fades in, 180ms ease-out
- **Heat indicator:** 24px circle + label (`MILD`/`MED–HOT`/`HOT`) + `sr-only` "Heat level N of 5"
- **Ticker:** 56px desktop / 44px mobile, 5 identical spans, `translateX(0 → -20%)`, 24000ms linear infinite (one span per cycle → seamless)
- **Motion:** load `cubic-bezier(0.16,1,0.3,1)` 900ms, 60ms stagger; hover `cubic-bezier(0.2,0.8,0.2,1)` 180ms; reveal 600ms / 100ms stagger; drift 6000ms alternate; pulse 1800ms; all disabled under reduced motion
- **Images (Unsplash CDN, stable IDs):** hero tacos `photo-1565299585323-38d6b0865b47` · story dish `photo-1551504734-5ee1c4a1479b` · griddle `photo-1515003197210-e0cd71810b5f` · truck exterior `photo-1565123409695-7b5ef63a2efb` — detail circle reuses the hero crop at `w=400&h=400`
- **Icons:** inline SVG only, 1.5px stroke — flame, pin, clock, arrow, window/menu
- **Delivery:** one self-contained HTML file, all CSS and JS inline

Everything is settled; let's build the page.