/* GABU v2 — loud, hungry, physical. The logo is the mouth; every chapter is a scene with one ground colour. */
:root { --red: #c80e12; --mustard: #ffc21a; --char: #170806; --cream: #fff3dc; --pad: clamp(16px, 3vw, 44px);
  --lat: "Archivo Black", "Arial Black", sans-serif; --jp: "Dela Gothic One", sans-serif; --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; --mono: "DM Mono", ui-monospace, monospace; color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--red); color: var(--cream); font-family: var(--body); -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
ul, ol { list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img { display: block; max-width: 100%; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 50; background: var(--char); color: var(--mustard); padding: 10px 14px; } .skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.disp { font-family: var(--lat); line-height: .88; letter-spacing: -.035em; }
html[lang="ja"] .disp { font-family: var(--jp); line-height: 1.08; letter-spacing: -.01em; }
.ln { display: block; }

/* header */
.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 16px var(--pad); color: var(--cream); transition: color .3s; }
.bar.dark { color: var(--char); }
.logo { font-family: var(--lat); font-size: 24px; letter-spacing: -.03em; text-decoration: none; color: var(--mustard); }
.bar.dark .logo { color: var(--char); }
.bar nav ul { display: flex; gap: 22px; font-family: var(--mono); font-size: 13px; }
.bar nav a, .lang { text-decoration: none; padding: 6px 0; display: inline-block; }
.lang { margin-left: auto; font-family: var(--mono); font-size: 13px; }
.pill { background: var(--mustard); color: var(--char); padding: 10px 16px; border-radius: 99px; font-weight: 900; font-size: 13px; box-shadow: 0 4px 0 var(--char); transition: transform .15s, box-shadow .15s; min-height: 40px; }
.pill:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--char); }
.pill[aria-pressed="true"] { background: var(--char); color: var(--mustard); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.bar.dark .pill { box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.menu-btn { display: none; }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--mustard); color: var(--char); display: grid; align-content: center; gap: 6px; padding: 24px; }
.sheet[hidden] { display: none; }
.sheet a { font-family: var(--lat); font-size: 56px; letter-spacing: -.03em; text-decoration: none; display: block; line-height: 1.05; }
html[lang="ja"] .sheet a { font-family: var(--jp); font-size: 44px; }
.sheet-close { justify-self: start; margin-top: 18px; background: var(--char); color: var(--mustard); padding: 12px 22px; border-radius: 99px; }

/* ===== 1 hero: bite it. GA = upper jaw, BU = lower jaw ===== */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--red); touch-action: manipulation; }
.jaw { position: absolute; z-index: 1; font-family: var(--lat); font-size: min(29vw, 50svh); line-height: .74; letter-spacing: -.055em; color: var(--mustard); white-space: nowrap; pointer-events: none; will-change: transform; }
.jaw span { display: block; }
.ga { right: 5vw; top: 7svh; } .bu { right: 5vw; bottom: -1svh; }
.hero.chomp .jaw { z-index: 4; }
.biter { position: absolute; z-index: 3; left: 50%; top: 52%; width: min(70vw, 118svh); aspect-ratio: 1300 / 820; transform: translate(-56%, -50%); padding: 0; border-radius: 30px; -webkit-tap-highlight-color: transparent; }
.biter img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; filter: drop-shadow(0 30px 30px rgba(70,0,0,.4)); }
.biter img.on { opacity: 1; }
.biter .bod { position: absolute; inset: 0; transform-origin: 30% 92%; will-change: transform; }
.biter:focus-visible { outline: 4px solid var(--mustard); outline-offset: -10px; }
.crumbs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.ono { position: absolute; z-index: 6; left: 0; top: 0; font-family: var(--jp); font-size: min(9vw, 14svh); color: var(--cream); -webkit-text-stroke: .05em var(--char); paint-order: stroke fill; white-space: nowrap; pointer-events: none; opacity: 0; transform-origin: 50% 50%; }
html[lang="en"] .ono { font-family: var(--lat); letter-spacing: -.03em; }
.line { position: absolute; left: var(--pad); bottom: 7svh; z-index: 2; font-family: var(--lat); font-size: 5vw; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px var(--cream); white-space: nowrap; }
html[lang="ja"] .line { font-family: var(--jp); font-size: 4.2vw; letter-spacing: 0; }
.sticker { position: absolute; left: var(--pad); top: 14svh; z-index: 2; width: 136px; height: 136px; border-radius: 50%; background: var(--mustard); color: var(--char); display: grid; place-items: center; text-align: center; font-family: var(--jp); font-size: 15px; line-height: 1.25; box-shadow: 0 7px 0 var(--char); transform: rotate(-12deg); }
html[lang="en"] .sticker { font-family: var(--lat); font-size: 14px; letter-spacing: -.01em; }
.left { position: absolute; left: var(--pad); top: calc(14svh + 168px); z-index: 2; font-family: var(--jp); font-size: 22px; color: var(--mustard); }
html[lang="en"] .left { font-family: var(--lat); }
.hint { position: absolute; left: var(--pad); bottom: 3svh; z-index: 2; max-width: 34em; font-family: var(--mono); font-size: 12px; }
.again { position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--mustard); color: var(--char); font-family: var(--jp); font-size: 26px; padding: 18px 30px; border-radius: 99px; box-shadow: 0 6px 0 var(--char); min-height: 48px; }
html[lang="en"] .again { font-family: var(--lat); }
.again[hidden] { display: none; }

/* ===== 2 build (from v1): assembled → exploded with inertia; receipt prints ===== */
.build { position: relative; height: 300svh; background: var(--mustard); }
.build .pin, .griddle .pin, .menu .pin, .end .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.build .pin { background: var(--g, var(--red)); }
.stack { position: absolute; right: 6vw; top: 50%; width: min(40vw, 60svh); aspect-ratio: 1024 / 1536; transform: translateY(-50%) scale(var(--k, 1)); }
.stack img { position: absolute; left: 0; width: 100%; height: auto; will-change: transform; transition: filter .2s; cursor: pointer; }
.stack img.lit { filter: drop-shadow(0 0 0 var(--char)) drop-shadow(0 10px 0 var(--char)); }
.receipt { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(560px, 44vw); color: var(--char); }
.receipt h2 { font-size: clamp(56px, 6.6vw, 118px); margin-bottom: 26px; }
html[lang="ja"] .receipt h2 { font-size: clamp(48px, 5.2vw, 92px); }
#rows { border-top: 3px solid var(--char); font-family: var(--mono); font-size: 14px; }
#rows li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 8px; margin: 0 -8px; border-bottom: 1.5px dashed rgba(23,8,6,.45); opacity: 0; transform: translateY(6px); cursor: pointer; }
#rows li b { font-family: var(--body); font-weight: 900; font-size: 17px; }
#rows li.on { opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
#rows li.hot { background: var(--char); color: var(--mustard); }
.tot { display: flex; justify-content: space-between; border-bottom: 3px solid var(--char); padding: 10px 0; font-family: var(--mono); font-size: 14px; opacity: 0; }
.tot b { font-family: var(--lat); font-size: 22px; } html[lang="ja"] .tot b { font-family: var(--jp); }
.tot.on { opacity: 1; }
.hint2 { display: inline-block; margin-top: 12px; padding: 4px 8px; background: var(--char); color: var(--cream); font-family: var(--mono); font-size: 12px; }

/* ===== 3 griddle: photographs, cut on the action ===== */
.griddle { position: relative; height: 380svh; background: var(--char); }
.griddle .pin { background: var(--char); }
.shot { position: absolute; inset: 0; transform: scale(var(--zoom, 1)) translate(var(--sx, 0), var(--sy, 0)); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0; }
.shot img.on { opacity: 1; }
.griddle .pin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,8,6,.86) 0%, rgba(23,8,6,.55) 30%, rgba(23,8,6,0) 55%); pointer-events: none; }
.smoke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.ono2 { position: absolute; z-index: 3; left: 60%; top: 40%; font-family: var(--jp); font-size: min(12vw, 20svh); color: var(--mustard); -webkit-text-stroke: .04em var(--char); paint-order: stroke fill; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
html[lang="en"] .ono2 { font-family: var(--lat); }
.gcopy { position: absolute; z-index: 2; left: var(--pad); top: 0; bottom: 0; width: min(560px, 42vw); display: grid; align-content: center; gap: 2.4svh; }
.count { font-family: var(--lat); color: var(--mustard); line-height: .78; display: flex; align-items: baseline; gap: .1em; }
.count b { font-size: min(22vw, 40svh); letter-spacing: -.06em; font-variant-numeric: tabular-nums; font-weight: 400; }
.count small { font-family: var(--jp); font-size: 32px; } html[lang="en"] .count small { font-family: var(--lat); font-size: 28px; }
.griddle h2 { font-size: clamp(40px, 4.4vw, 76px); }
.steps { display: grid; gap: 14px; margin-top: 1svh; }
.steps li { font-size: 16px; line-height: 1.7; opacity: .55; transition: opacity .3s, transform .3s; }
.steps li.on { opacity: 1; transform: translateX(10px); } .steps li.on b { color: var(--mustard); }
.steps b { display: block; font-family: var(--lat); font-size: 28px; } html[lang="ja"] .steps b { font-family: var(--jp); font-size: 24px; }

/* ===== 4 menu: three trays, each its own scene ===== */
.menu { position: relative; height: 360svh; background: var(--char); }
.menu-h { position: absolute; z-index: 6; left: var(--pad); top: 76px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); mix-blend-mode: difference; }
.trays { position: absolute; inset: 0; }
.tray { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 100%); }
.tray.on, .tray.past { clip-path: inset(0 0 0 0); }
.tray.on { z-index: 2; } .tray.past { z-index: 1; }
.t-red { background: var(--red); --tc: var(--mustard); --ti: var(--cream); }
.t-mustard { background: var(--mustard); --tc: var(--red); --ti: var(--char); }
.t-char { background: var(--char); --tc: var(--mustard); --ti: var(--cream); }
.tname { position: absolute; left: -.04em; top: 50%; transform: translateY(-52%) translateX(var(--nx, 0)); font-family: var(--lat); font-size: min(26vw, 52svh); line-height: .8; letter-spacing: -.055em; color: var(--tc); white-space: nowrap; display: grid; }
html[lang="ja"] .tname { font-family: var(--jp); font-size: min(22vw, 44svh); line-height: .95; letter-spacing: -.02em; }
.tname span + span { padding-left: .5em; }
.food { position: absolute; z-index: 2; right: 4vw; top: 50%; width: min(52vw, 92svh); transform: translateY(calc(-50% + var(--fy, 0px))) rotate(var(--fr, 0deg)) scale(var(--fsx, 1), var(--fsy, 1)); transform-origin: 50% 90%; filter: drop-shadow(0 30px 26px rgba(0,0,0,.35)); }
.t-char .food { width: min(46vw, 84svh); }
.tinfo { position: absolute; z-index: 3; left: var(--pad); bottom: 12svh; color: var(--ti); max-width: 26em; }
.tinfo h3 { font-family: var(--jp); font-size: 22px; margin-bottom: 6px; } html[lang="en"] .tinfo h3 { font-family: var(--lat); }
.tinfo p { font-size: 16px; line-height: 1.7; }
.price { position: absolute; z-index: 4; right: 5vw; top: 15svh; width: 150px; height: 150px; border-radius: 50%; background: var(--tc); color: var(--char); display: grid; place-content: center; text-align: center; box-shadow: 0 7px 0 var(--char); transform: rotate(var(--pr, -10deg)) scale(var(--ps, 1)); }
.t-mustard .price { color: var(--cream); }
.price b { font-family: var(--lat); font-size: 34px; letter-spacing: -.03em; line-height: 1; } .price small { font-family: var(--jp); font-size: 15px; }
.mnote { position: absolute; z-index: 6; left: var(--pad); bottom: 4svh; font-family: var(--mono); font-size: 12px; color: var(--cream); mix-blend-mode: difference; }
.mdots { position: absolute; z-index: 6; right: var(--pad); bottom: 4svh; display: flex; gap: 8px; }
.mdots i { width: 28px; height: 6px; border-radius: 3px; background: var(--cream); opacity: .35; mix-blend-mode: difference; } .mdots i.on { opacity: 1; }

/* ===== 5 end: the receipt prints itself ===== */
.end { position: relative; height: 210svh; background: var(--char); }
.end .pin { background: var(--char); }
.last { position: absolute; left: -6vw; bottom: -8svh; width: min(68vw, 120svh); opacity: .96; }
.end h2 { position: absolute; left: var(--pad); top: 16svh; font-size: clamp(56px, 7.6vw, 140px); color: var(--mustard); }
html[lang="ja"] .end h2 { font-size: clamp(50px, 6.4vw, 118px); }
.slip { position: absolute; right: 8vw; top: 0; width: min(380px, 36vw); height: 100svh; overflow: hidden; }
.slip::before { content: ""; position: absolute; left: -16px; right: -16px; top: 0; height: 22px; background: #2b1410; border-radius: 0 0 8px 8px; z-index: 2; box-shadow: 0 6px 12px rgba(0,0,0,.4); }
.paper { position: absolute; left: 0; right: 0; top: 0; background: #fbf8f0; color: #1b1b1b; font-family: var(--mono); font-size: 14px; line-height: 1.6; padding: 36px 26px 34px; transform: translateY(calc(-100% + var(--pr, 0) * 1%)); box-shadow: 0 16px 30px rgba(0,0,0,.35);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x; }
.r-shop { font-family: var(--lat); font-size: 40px; letter-spacing: -.04em; text-align: center; line-height: 1; }
.r-date { text-align: center; font-size: 12px; margin: 6px 0 16px; }
.r-items li, .r-stands li, .r-total { display: flex; justify-content: space-between; gap: 12px; }
.r-items { border-top: 1.5px dashed #1b1b1b; padding-top: 10px; }
.r-total { border-top: 1.5px dashed #1b1b1b; border-bottom: 1.5px dashed #1b1b1b; margin: 10px 0; padding: 8px 0; font-size: 16px; }
.r-free { font-size: 13px; margin-bottom: 18px; font-weight: 500; }
.r-h { font-size: 12px; margin-bottom: 4px; }
.r-thanks { text-align: center; margin-top: 22px; font-family: var(--jp); font-size: 22px; } html[lang="en"] .r-thanks { font-family: var(--lat); font-size: 20px; }
.foot { background: var(--red); padding: 48px var(--pad) 56px; display: grid; gap: 6px; font-size: 13px; line-height: 1.8; }
.flogo { font-family: var(--lat); font-size: 64px; color: var(--mustard); letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; }

@media (max-width: 760px) {
  .bar { padding: 12px 16px; gap: 0; } .bar nav, .lang { display: none; } .pill { margin-left: auto; padding: 8px 12px; font-size: 12px; }
  .menu-btn { display: block; margin-left: 10px; font-family: var(--mono); font-size: 13px; padding: 10px 0 10px 6px; min-height: 44px; }
  .jaw { font-size: 52vw; } .ga { right: auto; left: 50%; top: 9svh; transform: translateX(-50%); } .bu { right: auto; left: 50%; bottom: 3svh; transform: translateX(-50%); }
  .biter { width: 164vw; top: 52%; transform: translate(-33%, -50%); }
  .sticker { width: 92px; height: 92px; font-size: 11px; left: auto; right: 3vw; top: calc(9svh + 34vw); } html[lang="en"] .sticker { font-size: 10.5px; }
  .left { top: calc(9svh + 37vw); font-size: 16px; }
  .line { display: none; }
  .hint { display: none; }
  .ono { font-size: 15vw; }
  .stack { right: 50%; transform: translate(50%, 0) scale(var(--k, 1)); transform-origin: 50% 60%; top: auto; bottom: 1svh; width: min(80vw, 40svh); }
  .receipt { left: 16px; right: 16px; width: auto; top: 70px; transform: none; }
  .receipt h2 { font-size: 40px; margin-bottom: 10px; } html[lang="ja"] .receipt h2 { font-size: 34px; }
  #rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; font-size: 11px; } #rows li { grid-template-columns: 20px 1fr; padding: 6px 4px; margin: 0; } #rows li .d { display: none; } #rows li b { font-size: 13.5px; }
  .tot, .hint2 { display: none; }
  .shot img { object-position: 64% 50%; }
  .griddle .pin::after { background: linear-gradient(180deg, rgba(23,8,6,.2) 0%, rgba(23,8,6,.0) 35%, rgba(23,8,6,.75) 62%, rgba(23,8,6,.92) 100%); }
  .gcopy { left: 16px; right: 16px; width: auto; top: auto; bottom: 4svh; align-content: end; gap: 1svh; }
  .count b { font-size: 34vw; } .count small { font-size: 22px; }
  .griddle h2 { font-size: 32px; } .steps { gap: 6px; } .steps li { font-size: 13px; line-height: 1.55; } .steps b { font-size: 20px; } html[lang="ja"] .steps b { font-size: 18px; }
  .ono2 { left: 50%; top: 30%; font-size: 22vw; }
  .tname { top: 20svh; transform: translateX(var(--nx, 0)); font-size: 25vw; } html[lang="ja"] .tname { font-size: 24vw; }
  .food { right: auto; left: 50%; top: 58%; width: 98vw; transform: translate(-50%, calc(-50% + var(--fy, 0px))) rotate(var(--fr, 0deg)) scale(var(--fsx, 1), var(--fsy, 1)); } .t-char .food { width: 92vw; }
  .price { right: 5vw; top: auto; bottom: 30svh; width: 110px; height: 110px; } .price b { font-size: 26px; }
  .tinfo { bottom: 10svh; right: 16px; } .tinfo p { font-size: 14px; }
  .end h2 { font-size: 12vw; top: 12svh; } html[lang="ja"] .end h2 { font-size: 10.5vw; }
  .slip { right: 6vw; left: 6vw; width: auto; top: 30svh; height: 70svh; }
  .last { width: 120vw; left: -30vw; bottom: -12svh; opacity: .5; }
  .paper { font-size: 13px; padding: 30px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .build, .griddle, .menu, .end { height: auto; } .build .pin, .griddle .pin, .menu .pin, .end .pin { position: relative; }
  .griddle .pin { height: 100svh; } .menu .pin { height: auto; } .trays { position: relative; } .tray { position: relative; height: 100svh; clip-path: none; }
  .end .pin { height: auto; min-height: 100svh; padding-bottom: 10svh; } .slip { position: relative; margin: 46svh 0 0 auto; height: auto; } .paper { position: relative; transform: none; }
}
/* v3 hybrid bite */
.h3gl, .h3burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.h3gl { filter: drop-shadow(0 30px 30px rgba(70,0,0,.4)); } .h3burst { z-index: 2; }
.bod.gl img { visibility: hidden; }

/* publication: fictional-brand label + about block (2026-10-11) */
.concept-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; opacity: .85; white-space: nowrap; }
.about { background: var(--char); color: var(--cream); padding: 56px var(--pad) 44px; display: grid; gap: 10px; font-size: 14px; line-height: 1.85; }
.about h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mustard); font-weight: 500; }
.about p { max-width: 44em; }
@media (max-width: 760px) { .concept-tag { position: absolute; left: 16px; top: 44px; font-size: 10px; text-shadow: 0 1px 6px rgba(23,8,6,.55); } }