/* Samusi Hibachi. Concept: the flattop. The menu is laid out along one long brushed-steel griddle that you
   scroll sideways, the way the chef lines bowls up on the grill. Char black, leaf green from their truck wrap,
   flame orange. Unbounded for display, Archivo for reading.
   Reference ideas: pinned horizontal "flying media" strip and a cursor-following image on the sides list
   (details.so); the headline letters sear in orange and cool to white (designspells-style detail). */
:root {
  --bg: #0b0c0a;
  --surface: #15181a;
  --steel: #2a2e33;
  --ink: #f2f4ee;
  --muted: #9aa09a;
  --accent: #3fae5a;
  --accent2: #ff6a1a;
  --light: #f2f4ee;
  --font-display: "Unbounded";
  --font-body: "Archivo";
}
html { background: var(--bg); }
body { color: var(--ink); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; line-height: .95; }
h2 { font-size: clamp(2rem, 1.2rem + 4.2vw, 4.6rem); }
h2 span { color: var(--accent); }
.wrap { width: min(1400px, 100% - var(--gutter) * 2); }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 16px var(--gutter); }
.top.is-solid { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); text-decoration: none; letter-spacing: -.02em; margin: 0; }
.wordmark span { color: var(--accent); }
.top-nav { display: none; gap: 26px; margin-left: auto; font-size: var(--step--1); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.top-nav a { text-decoration: none; color: var(--muted); }
.top-nav a:hover { color: var(--ink); }
.top > .btn { margin-left: auto; }
.top-nav + .btn { margin-left: 0; }
@media (min-width: 900px) { .top-nav { display: flex; } }

/* buttons: the fire button fills like a spatula swipe */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 6px; text-decoration: none;
  font-weight: 700; font-size: var(--step--1); letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate; }
.btn--fire { background: var(--accent2); color: #1a0d05; }
.btn--fire::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform .45s var(--ease-out); z-index: -1; }
.btn--fire:hover::before { transform: translateX(0); }
.btn--ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--wide { justify-self: stretch; padding: 18px 24px; }

/* hero */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: grid; align-items: end; }
.hero-slides { position: absolute; inset: 0; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,10,.4) 0%, rgba(11,12,10,.15) 30%, rgba(11,12,10,.7) 55%, rgba(11,12,10,.92) 82%, var(--bg) 100%); z-index: 2; }
.hero-copy { position: relative; z-index: 3; padding: 0 var(--gutter) 11svh; display: grid; gap: 18px; }
.hero-tag { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: #7fe39a; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.8); }
.hero h1 { font-size: clamp(3rem, 1rem + 12.5vw, 11.5rem); font-weight: 800; line-height: .9; letter-spacing: -.045em; max-width: 8ch; }
.hero h1 .split-char.sear { animation: sear 1.6s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + .3s); }
@keyframes sear { 0% { color: var(--accent2); text-shadow: 0 0 18px rgba(255,106,26,.9), 0 0 48px rgba(255,106,26,.5); } 60% { color: #ffb37a; text-shadow: 0 0 10px rgba(255,106,26,.5); } 100% { color: var(--ink); text-shadow: none; } }
.hero-sub { max-width: 42ch; font-size: var(--step-1); line-height: 1.45; color: color-mix(in srgb, var(--ink) 88%, transparent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-dots { position: absolute; right: var(--gutter); bottom: 32px; z-index: 3; }
@media (min-width: 900px) { .hero-copy { padding-bottom: 9svh; } .hero h1 { max-width: none; } }

/* the flattop */
.griddle { padding-top: clamp(80px, 10vw, 140px); background: var(--bg); }
.griddle-head { display: grid; gap: 16px; margin-bottom: 36px; }
.griddle-head h2 { max-width: 10ch; }
.griddle-head p { max-width: 50ch; color: var(--muted); font-size: var(--step-0); line-height: 1.55; }
.steel { position: relative; padding: 40px 0 56px; background:
  linear-gradient(180deg, #3a3f45 0%, #23272b 12%, #2c3136 40%, #1b1e22 70%, #2a2e33 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.6); }
.steel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px); mix-blend-mode: overlay; }
.steel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, transparent, var(--accent2), transparent); opacity: .7; filter: blur(2px); }
.track { padding: 0 var(--gutter); gap: clamp(16px, 2vw, 32px); align-items: end; }
.bowl { position: relative; flex: none; width: min(78vw, 360px); display: grid; gap: 14px; padding: 16px 16px 20px; background: rgba(11,12,10,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; backdrop-filter: blur(6px); }
.bowl figure { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 30px 50px -30px rgba(0,0,0,.9); }
.bowl img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.bowl:hover img { transform: scale(1.06) rotate(-3deg); }
.bowl h3 { font-size: var(--step-1); }
.bowl p { color: var(--muted); font-size: var(--step--1); line-height: 1.5; margin-top: 6px; }
.bowl .price { position: absolute; top: 10px; right: 10px; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); color: var(--accent2); background: var(--bg); padding: 6px 12px; border-radius: 999px; line-height: 1; }
.bowl .price::before { content: "$"; font-size: .55em; vertical-align: top; margin-right: 1px; }
.bowl--combo { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.bowl--combo h3::after { content: "combo"; font-family: var(--font-body); font-size: .5em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-left: 10px; vertical-align: middle; }
.track-end { flex: none; width: min(78vw, 320px); display: grid; gap: 18px; align-self: center; padding: 0 20px; color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.track-end .btn { justify-self: start; }
@media (min-width: 900px) {
  .griddle-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 6vw; margin-bottom: 48px; }
  .griddle-head p { justify-self: end; }
  .steel { padding: 56px 0 72px; }
  .bowl { width: 380px; }
  .bowl:nth-child(even) { margin-bottom: 40px; }
}

/* sides with cursor-following photo */
.sides { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.sides-grid { display: grid; gap: 36px; align-items: start; }
.sides-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sides-list li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "note price"; gap: 2px 20px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); align-items: center; cursor: default; }
.sides-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.sides-list span { grid-area: name; font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; transition: color .3s, transform .4s var(--ease-out); }
.sides-list small { grid-area: note; color: var(--muted); font-size: var(--step--1); }
.sides-list b { grid-area: price; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--accent2); }
.sides-list b::before { content: "$"; font-size: .6em; vertical-align: top; }
.sides-list li:hover span { color: var(--accent); transform: translateX(10px); }
.float-img { position: fixed; left: 0; top: 0; width: 220px; height: 220px; object-fit: cover; border-radius: 50%; pointer-events: none; z-index: 40;
  transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .3s, scale .3s; margin: -110px 0 0 -110px; transform-origin: center; }
.float-img.on { opacity: 1; transform: translate(0, 0) scale(1); }
@media (max-width: 899px) { .float-img { display: none; } }
@media (min-width: 900px) {
  .sides-grid { grid-template-columns: 4fr 7fr; gap: 8vw; }
  .sides-list li { grid-template-columns: 1fr 1fr auto; grid-template-areas: "name note price"; padding: 22px 0; }
}

/* the chef */
.chef { padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 140px); background: var(--surface); overflow: clip; }
.chef-grid { display: grid; gap: 32px; align-items: center; }
.chef-kicker { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.chef-text { display: grid; gap: 20px; }
.chef-text h2 { max-width: 16ch; }
.chef-text p { color: color-mix(in srgb, var(--ink) 80%, transparent); font-size: var(--step-0); line-height: 1.6; max-width: 56ch; }
.chef-photo { margin: 0; overflow: hidden; border-radius: 10px; }
.chef-photo img { width: 100%; height: 100%; object-fit: cover; }
.chef-photo--truck { aspect-ratio: 16/9; }
.chef-photo--leaf { aspect-ratio: 3/4; width: 60%; justify-self: end; }
@media (min-width: 900px) {
  .chef-grid { grid-template-columns: 5fr 5fr 2fr; gap: 4vw; }
  .chef-photo--truck { aspect-ratio: 4/3; margin-top: 12%; }
  .chef-photo--leaf { width: 100%; aspect-ratio: 3/5; margin-top: -30%; }
}

/* booking */
.book { padding: clamp(80px, 10vw, 150px) 0; background: var(--light); color: #0b0c0a; }
.book-grid { display: grid; gap: 40px; align-items: start; }
.book-text { display: grid; gap: 18px; }
.logo { width: 120px; height: auto; mix-blend-mode: multiply; }
.book-text h2 { max-width: 12ch; }
.book-text p { font-size: var(--step-1); line-height: 1.5; color: #3b3f3a; max-width: 44ch; }
.book-alt { font-size: var(--step-0) !important; }
.book-alt a { color: #0b0c0a; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.book-form { display: grid; gap: 14px; background: #fff; padding: clamp(22px, 3vw, 40px); border-radius: 12px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 30px 60px -40px rgba(0,0,0,.4); }
.book-form label { display: grid; gap: 6px; font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3b3f3a; }
.book-form input, .book-form textarea { width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid rgba(0,0,0,.18); background: #faf9f6; font-size: var(--step-0); letter-spacing: 0; text-transform: none; font-weight: 400; color: #0b0c0a; }
.book-form input:focus, .book-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.book-form textarea { resize: vertical; }
.two { display: grid; gap: 14px; }
@media (min-width: 600px) { .two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .book-grid { grid-template-columns: 5fr 6fr; gap: 8vw; } }

/* find */
.find { padding: clamp(80px, 10vw, 140px) 0; }
.find-grid { display: grid; gap: 32px; }
.find-links { display: grid; }
.find-links a { display: grid; gap: 4px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); text-decoration: none; transition: padding-left .4s var(--ease-out); }
.find-links a:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.find-links a:hover { padding-left: 12px; }
.find-links strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
.find-links strong::after { content: " ↗"; color: var(--accent2); }
.find-links span { color: var(--muted); }
@media (min-width: 900px) { .find-grid { grid-template-columns: 5fr 7fr; gap: 6vw; } }

/* footer */
.foot { background: var(--surface); padding: clamp(50px, 6vw, 80px) 0 160px; }
.foot-grid { display: grid; gap: 14px; }
.foot a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }
.foot-small { color: var(--muted); font-size: var(--step--1); }
.foot-small a { color: var(--muted); }
@media (min-width: 900px) { .foot { padding-bottom: 70px; } }

/* sticky call bar (phones) */
.callbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; gap: 8px; }
.callbar a { flex: 1; text-align: center; padding: 14px; border-radius: 8px; background: var(--accent2); color: #1a0d05; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; font-size: var(--step--1); }
.callbar a:first-child { background: var(--ink); color: var(--bg); }
@media (max-width: 899px) { .callbar { display: flex; } .top > .btn { display: none; } }