/* ═══════════════════════════════════════════════════════════
   POSUKI — Corpus Christi
   Design system + motion. Dark "ember" palette drawn from the
   restaurant's own flaming-wok logo mark.
   ═══════════════════════════════════════════════════════════ */

/* ── fonts ─────────────────────────────────────────────── */
@font-face{font-family:Anton;src:url(../fonts/anton.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif-italic.woff2)format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-var.woff2)format('woff2');font-weight:100 900;font-display:swap}

/* ── tokens ────────────────────────────────────────────── */
:root{
  --ink:#0A0908;
  --ink-2:#100E0D;
  --surface:#171413;
  --surface-2:#1F1B19;
  --line:rgba(246,240,232,.10);
  --line-2:rgba(246,240,232,.18);

  --cream:#F6F0E8;
  --muted:#9A9089;
  --dim:#6E655F;

  --ember:#E8382B;
  --ember-lo:#B62A20;
  --flame:#FF8A2B;
  --jade:#78C08A;

  --grad-fire:linear-gradient(100deg,var(--ember),var(--flame));

  --f-display:Anton,'Arial Narrow',sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1320px;
  --r:16px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.75s;
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--cream);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:4px}

/* ── image placeholders ────────────────────────────────────
   Every photo wrapper carries a 20px blurred copy of its own image as a
   background (see the generated #lqip stylesheet). A photo that is still
   downloading — or that fails outright — shows the blurred dish instead of an
   empty box or a broken-image glyph.
   `color:transparent` keeps alt text from spilling out of small thumbnails on
   a failed load; the alt is still there for screen readers.               */
.lqip{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--surface-2)}
.lqip>img{color:transparent}
.js .lqip>img{opacity:0;transition:opacity .55s var(--ease)}
.js .lqip>img.is-loaded{opacity:1}

/* ── ambient grain ─────────────────────────────────────── */
.grain{
  position:fixed;inset:-150%;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-5%,-5%)}
  33%{transform:translate(3%,-8%)} 50%{transform:translate(-4%,4%)}
  66%{transform:translate(6%,3%)} 83%{transform:translate(-3%,6%)}
}

/* ── scroll progress ───────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9997;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:0;background:var(--grad-fire);box-shadow:0 0 12px rgba(232,56,43,.7)}

/* ── custom cursor (pointer devices only) ──────────────── */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0;mix-blend-mode:difference}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--cream)}
.cursor__ring{width:38px;height:38px;border:1px solid rgba(246,240,232,.55);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s}
.cursor.is-hot .cursor__ring{width:66px;height:66px;border-color:var(--cream)}
.cursor.is-hot .cursor__dot{opacity:0}
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,.tilt,[data-cursor]{cursor:none}
  .cursor{opacity:1}
}

/* ═══ PRELOADER ═══════════════════════════════════════════ */
.loader{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:var(--ink);transition:opacity .7s var(--ease),visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{display:grid;justify-items:center;gap:1.4rem;width:min(300px,72vw)}
.loader__mark{width:56px;height:56px;overflow:visible}
.loader__bowl{fill:var(--cream)}
.loader__flame{fill:var(--ember);transform-origin:32px 40px;animation:flick 1.1s var(--ease) infinite alternate}
@keyframes flick{from{transform:scaleY(.86) scaleX(1.04);opacity:.75}to{transform:scaleY(1.06) scaleX(.96);opacity:1}}
.loader__word{display:flex;gap:.06em;font:400 clamp(2rem,9vw,2.9rem)/1 var(--f-display);letter-spacing:.06em}
.loader__word span{opacity:0;transform:translateY(90%);animation:lrise .6s var(--ease) forwards}
.loader__word span:nth-child(1){animation-delay:.05s}.loader__word span:nth-child(2){animation-delay:.11s}
.loader__word span:nth-child(3){animation-delay:.17s}.loader__word span:nth-child(4){animation-delay:.23s}
.loader__word span:nth-child(5){animation-delay:.29s}.loader__word span:nth-child(6){animation-delay:.35s}
@keyframes lrise{to{opacity:1;transform:none}}
.loader__bar{width:100%;height:2px;background:var(--line-2);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--grad-fire);transition:width .25s linear}
.loader__pct{font-size:.72rem;letter-spacing:.22em;color:var(--dim);font-variant-numeric:tabular-nums}

/* ═══ NAV ════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:1.5rem;
  padding:1.1rem var(--pad);
  transition:background .45s var(--ease),backdrop-filter .45s,padding .45s var(--ease),border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,9,8,.72);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);padding-top:.7rem;padding-bottom:.7rem;
}
.nav.is-hidden{transform:translateY(-105%)}
.nav{transition:transform .5s var(--ease),background .45s var(--ease),padding .45s var(--ease),border-color .45s}
.nav__brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.nav__mark{width:30px;height:30px;flex:none}
.nav__bowl{fill:var(--cream)}
.nav__flame{fill:var(--ember);transform-origin:32px 40px;transition:transform .4s var(--ease)}
.nav__brand:hover .nav__flame{transform:scaleY(1.12)}
.nav__name{font:400 1.45rem/1 var(--f-display);letter-spacing:.04em}

.nav__links{display:flex;gap:1.7rem}
.nav__links a{position:relative;font-size:.82rem;font-weight:500;letter-spacing:.02em;color:var(--muted);transition:color .3s;overflow:hidden;display:block}
.nav__links a span{display:block;transition:transform .45s var(--ease)}
.nav__links a::after{
  content:attr(data-x);position:absolute;inset:0;
}
.nav__links a:hover,.nav__links a.is-active{color:var(--cream)}
.nav__links a::before{
  content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--ember);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav__links a:hover::before,.nav__links a.is-active::before{transform:scaleX(1);transform-origin:left}

.nav__end{display:flex;align-items:center;gap:.9rem}

/* status pill */
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none}
.status.is-open i{background:var(--jade);box-shadow:0 0 0 0 rgba(120,192,138,.6);animation:pulse 2.4s infinite}
.status.is-shut i{background:var(--ember)}
.status.is-open b{color:var(--jade)}
.status b{font-weight:600}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(120,192,138,0)}100%{box-shadow:0 0 0 0 rgba(120,192,138,0)}}
.status--lg{font-size:.78rem;padding:.5rem .9rem;border:1px solid var(--line-2);border-radius:99px;background:rgba(246,240,232,.03)}

/* burger */
.burger{display:none;width:34px;height:34px;position:relative;flex:none}
.burger i{position:absolute;left:7px;width:20px;height:1.5px;background:var(--cream);transition:transform .4s var(--ease),opacity .3s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:20px}
.burger.is-on i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-on i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* drawer */
.drawer{
  position:fixed;inset:0;z-index:890;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:6rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer__links{display:grid;gap:.4rem}
.drawer__links a{
  display:flex;align-items:baseline;gap:1rem;
  font:400 clamp(2.2rem,11vw,3.6rem)/1.1 var(--f-display);letter-spacing:.02em;
  opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer.is-open .drawer__links a{opacity:1;transform:none}
.drawer.is-open .drawer__links a:nth-child(1){transition-delay:.12s}
.drawer.is-open .drawer__links a:nth-child(2){transition-delay:.18s}
.drawer.is-open .drawer__links a:nth-child(3){transition-delay:.24s}
.drawer.is-open .drawer__links a:nth-child(4){transition-delay:.3s}
.drawer.is-open .drawer__links a:nth-child(5){transition-delay:.36s}
.drawer__links a:hover{color:var(--ember)}
.drawer__links em{font:600 .7rem/1 var(--f-body);color:var(--ember);font-style:normal;letter-spacing:.1em}
.drawer__foot{display:grid;gap:.35rem;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.4rem}

/* ═══ BUTTONS ════════════════════════════════════════════ */
.btn{
  --bg:var(--cream);--fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;border-radius:99px;background:var(--bg);color:var(--fg);
  font-size:.82rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s;
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;background:var(--grad-fire);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn--sm{padding:.62rem 1.15rem;font-size:.76rem}
.btn--lg{padding:1.05rem 2rem;font-size:.88rem}
.btn--full{width:100%}
.btn--ghost{--bg:transparent;--fg:var(--cream);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:transparent}

/* ═══ TYPE ═══════════════════════════════════════════════ */
.h2{
  font:400 clamp(2.1rem,1rem + 4.6vw,4.6rem)/1.02 var(--f-display);
  letter-spacing:-.005em;text-wrap:balance;margin-bottom:1.1rem;
}
.h2 em{font-family:var(--f-serif);font-style:italic;letter-spacing:-.01em;text-transform:none}
.sect-label{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.sect-label i{
  font-style:normal;color:var(--ember);font-size:.68rem;letter-spacing:.1em;
  padding-right:.7rem;border-right:1px solid var(--line-2);
}
.lede{font-size:clamp(1.02rem,.95rem + .4vw,1.22rem);line-height:1.6;color:#CFC6BC;max-width:52ch}
.body{color:var(--muted);max-width:56ch;margin-top:1rem}
.muted{color:var(--muted)}
.sect-head{padding:0 var(--pad);max-width:var(--maxw);margin:0 auto 3.4rem}
.sect-head--center{text-align:center}
.sect-head--center .sect-label{justify-content:center}
.sect-head--center .lede{margin-inline:auto}

/* line/char split animation */
[data-split]{overflow:hidden}
.line{display:block;overflow:hidden}
.line>i{display:block;font-style:normal;transform:translateY(105%);transition:transform .9s var(--ease)}
.is-in .line>i{transform:none}
.line:nth-child(2)>i{transition-delay:.08s}
.line:nth-child(3)>i{transition-delay:.16s}
.line:nth-child(4)>i{transition-delay:.24s}

/* ── reveal system ─────────────────────────────────────── */
.reveal{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal[data-reveal=up]{transform:translateY(30px)}
.reveal[data-reveal=fade]{transform:translateY(14px)}
.reveal[data-reveal=pop]{transform:scale(.9)}
.reveal.is-in{opacity:1;transform:none}
/* Curtain wipe rather than clip-path on the element itself: a clipped element
   reports a zero-area intersection rect, so it could never trigger its own reveal. */
.reveal-img{position:relative;overflow:hidden;border-radius:var(--r)}
.reveal-img::after{
  content:'';position:absolute;inset:0;z-index:2;background:var(--ink);
  transform-origin:bottom;transition:transform 1.05s var(--ease);
}
.reveal-img.is-in::after{transform:scaleY(0)}
.reveal-img img{transform:scale(1.16);transition:transform 1.4s var(--ease)}
.reveal-img.is-in img{transform:scale(1)}

/* ═══ HERO ═══════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:8rem var(--pad) 5rem;overflow:hidden;isolation:isolate;
}
.hero::after{
  content:'';position:absolute;inset:auto 0 0;height:38%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,var(--ink),transparent);
}
/* warm ember glow low-left, keeps the headline sitting on something */
.hero::before{
  content:'';position:absolute;left:-10%;bottom:-30%;width:70%;aspect-ratio:1;z-index:0;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(232,56,43,.13),transparent 62%);
}
.hero__embers{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:.85}
.hero__inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%}

.hero__eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero__eyebrow i{width:26px;height:1px;background:var(--ember)}

.hero__title{
  font:400 clamp(4.2rem,17vw,15rem)/.86 var(--f-display);
  letter-spacing:-.02em;margin:.14em 0 .1em;display:flex;flex-wrap:wrap;
}
.hero__title .ch{
  display:inline-block;transform:translateY(110%) rotate(6deg);opacity:0;
  transition:transform 1s var(--ease),opacity .7s var(--ease);
  background:linear-gradient(180deg,#FFF9F0 20%,#E9DFD2 70%,#B8ABA0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__title.is-in .ch{transform:none;opacity:1}

.hero__sub{font:400 clamp(1.1rem,.9rem + 1vw,1.9rem)/1 var(--f-serif);font-style:italic;color:var(--flame);letter-spacing:.01em}
.hero__sub b{color:var(--dim);font-weight:400;padding:0 .25em}
.hero__blurb{margin-top:1.3rem;max-width:44ch;color:#C6BCB2;font-size:clamp(1rem,.95rem + .3vw,1.14rem)}
.hero__blurb em{font-family:var(--f-serif);font-style:italic;color:var(--cream)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.hero__meta{display:flex;align-items:center;gap:1rem;margin-top:2rem;font-size:.84rem;color:var(--muted);flex-wrap:wrap}
.hero__meta a{transition:color .3s}.hero__meta a:hover{color:var(--cream)}
.hero__dot{width:4px;height:4px;border-radius:50%;background:var(--dim)}

/* floating dishes */
.hero__floats{position:absolute;inset:0;z-index:2;pointer-events:none}
.float{position:absolute;border-radius:50%;overflow:hidden;will-change:transform;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85);border:1px solid rgba(246,240,232,.09);
  opacity:0;animation:floatIn 1.2s var(--ease) forwards;
}
.float img{width:100%;height:100%;object-fit:cover}
@keyframes floatIn{to{opacity:1}}
/* kept inside the right third so they never sit under the headline or copy */
.float--1{width:clamp(120px,15vw,230px);aspect-ratio:1;top:12%;right:6%;animation-delay:.5s}
.float--2{width:clamp(84px,10vw,148px);aspect-ratio:1;top:44%;right:27%;animation-delay:.7s}
.float--3{width:clamp(96px,12vw,182px);aspect-ratio:1;bottom:12%;right:7%;animation-delay:.9s}
.float--4{width:clamp(62px,7vw,104px);aspect-ratio:1;top:18%;right:34%;animation-delay:1.05s}
@media (max-width:1200px){.float--2,.float--4{display:none}}
@media (max-width:900px){
  .float--3,.float--4{display:none}
  .float--1{top:6%;right:-6%;width:150px;opacity:.42!important}
  .float--2{display:block;top:auto;bottom:6%;right:-8%;width:130px;opacity:.32!important}
}

.hero__scroll{
  position:absolute;left:50%;bottom:1.6rem;z-index:4;transform:translateX(-50%);
  display:grid;justify-items:center;gap:.6rem;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);
}
.hero__scroll i{width:1px;height:40px;background:linear-gradient(var(--ember),transparent);animation:drop 1.9s var(--ease-io) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ═══ MARQUEE BAND ═══════════════════════════════════════ */
.band{
  border-block:1px solid var(--line);background:var(--ink-2);
  overflow:hidden;padding:1.15rem 0;
}
.band__track{display:flex;align-items:center;gap:2.2rem;width:max-content;will-change:transform}
.band__track span{font:400 clamp(1.1rem,.9rem + 1.1vw,2rem)/1 var(--f-display);letter-spacing:.03em;color:var(--cream);white-space:nowrap;text-transform:uppercase}
.band__track b{color:var(--ember);font-size:.9rem}

/* ═══ STORY ══════════════════════════════════════════════ */
.story{padding:clamp(5rem,11vw,9rem) var(--pad)}
.story__grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr 1fr;align-items:center}
.story__media{position:relative}
.story__media .reveal-img{aspect-ratio:4/5}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__badge{
  position:absolute;right:-1rem;bottom:-1.4rem;
  display:flex;align-items:center;gap:.85rem;padding:1rem 1.3rem;
  background:var(--ember);border-radius:var(--r);box-shadow:0 20px 50px -12px rgba(232,56,43,.5);
}
.story__badge em{font:400 2.1rem/1 var(--f-display);font-style:normal}
.story__badge span{font-size:.76rem;line-height:1.35;font-weight:500}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem;margin-top:2.6rem;border-top:1px solid var(--line);padding-top:2rem}
.stats b{display:block;font:400 clamp(2rem,1.4rem + 1.8vw,2.9rem)/1 var(--f-display);color:var(--cream);font-variant-numeric:tabular-nums}
.stats span{font-size:.78rem;color:var(--muted);letter-spacing:.02em}

/* ═══ SIGNATURE ══════════════════════════════════════════ */
.sig{padding:clamp(4rem,9vw,7rem) 0 clamp(5rem,10vw,8rem)}
.sig__row{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr)}
.dish{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);will-change:transform;transform-style:preserve-3d;
  transition:border-color .4s,box-shadow .5s var(--ease);
}
.dish:hover{border-color:var(--line-2);box-shadow:0 40px 70px -35px rgba(0,0,0,.9)}
.dish__img{position:relative;aspect-ratio:4/3;overflow:hidden}
.dish__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.dish:hover .dish__img img{transform:scale(1.07)}
.dish__img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.85),transparent 55%)}
.dish__rank{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,9,8,.6);backdrop-filter:blur(8px);border:1px solid var(--line-2);
  font:400 .95rem/1 var(--f-display);
}
.dish__body{padding:1.3rem 1.4rem 1.5rem;display:grid;gap:.45rem}
.dish__name{font:400 clamp(1.15rem,1rem + .5vw,1.5rem)/1.15 var(--f-display);letter-spacing:.01em}
.dish__desc{font-size:.85rem;color:var(--muted);min-height:1.2em}
.dish__price{display:flex;align-items:baseline;gap:.55rem;margin-top:.35rem}
.dish__price b{font-size:1.15rem;font-weight:600;color:var(--cream)}
.dish__price s{font-size:.85rem;color:var(--dim)}
.tag{
  display:inline-block;padding:.28rem .6rem;border-radius:99px;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(232,56,43,.14);color:#FF7C6E;border:1px solid rgba(232,56,43,.3);
}
.dish__tag{position:absolute;top:.9rem;right:.9rem;z-index:2;background:rgba(10,9,8,.66);backdrop-filter:blur(8px)}

/* ═══ POKE BUILDER ═══════════════════════════════════════ */
.builder{padding:clamp(4rem,9vw,7rem) 0 clamp(5rem,10vw,8rem);background:var(--ink-2);border-block:1px solid var(--line)}
.bowl{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1.35fr .9fr;align-items:start}

.steps{display:grid;gap:1.1rem}
.step{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .4s}
.step.is-done{border-color:rgba(120,192,138,.35)}
.step__head{display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.2rem}
.step__n{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);font-size:.76rem;font-weight:700;color:var(--muted);
  transition:background .4s var(--ease),color .4s,border-color .4s;
}
.step.is-done .step__n{background:var(--jade);border-color:var(--jade);color:var(--ink)}
.step__t{font-weight:600;font-size:.95rem;letter-spacing:.01em}
.step__hint{margin-left:auto;font-size:.72rem;color:var(--dim);white-space:nowrap}
.step__opts{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.2rem 1.2rem}
.chip{
  position:relative;padding:.55rem .95rem;border-radius:99px;border:1px solid var(--line-2);
  font-size:.82rem;font-weight:500;color:#CFC6BC;overflow:hidden;isolation:isolate;
  transition:color .3s,border-color .3s,transform .25s var(--ease);
}
.chip::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--grad-fire);transform:scale(0);border-radius:99px;transition:transform .4s var(--ease)}
.chip:hover{border-color:var(--line-2);transform:translateY(-2px);color:var(--cream)}
.chip.is-on{color:#fff;border-color:transparent}
.chip.is-on::before{transform:scale(1)}
.chip em{font-style:normal;font-size:.72rem;opacity:.75;margin-left:.35rem}
.chip__x{font-size:.7rem;font-weight:700;margin-left:.4rem;opacity:.8}

/* receipt */
.receipt{
  position:sticky;top:6rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden;
}
.receipt__img{position:relative;aspect-ratio:16/11;overflow:hidden}
.receipt__img img{width:100%;height:100%;object-fit:cover}
.receipt__img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--surface),transparent 60%)}
.receipt__body{padding:1.2rem 1.35rem 1.4rem}
.receipt__t{font:400 1.5rem/1 var(--f-display);margin-bottom:.9rem}
.receipt__list{display:grid;gap:.55rem;min-height:5rem;margin-bottom:1rem}
.receipt__row{display:flex;gap:.8rem;font-size:.83rem;align-items:baseline}
.receipt__row dt{color:var(--dim);flex:none;width:5.6rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.receipt__row dd{color:#D8CFC5}
.receipt__row dd.empty{color:var(--dim);font-style:italic}
.receipt__total{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:.9rem;margin-bottom:1rem}
.receipt__total span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.receipt__total b{font:400 2rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.receipt__note{font-size:.72rem;color:var(--dim);margin-top:.8rem;line-height:1.45}
.pop{animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}

/* ═══ MENU ═══════════════════════════════════════════════ */
.menu{padding:clamp(4rem,9vw,7rem) 0 clamp(5rem,10vw,8rem)}
.tabs{
  position:sticky;top:0;z-index:80;background:rgba(10,9,8,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-block:1px solid var(--line);margin-bottom:2.8rem;
}
.tabs__scroll{display:flex;gap:.4rem;padding:.7rem var(--pad);overflow-x:auto;scrollbar-width:none;max-width:var(--maxw);margin:0 auto}
.tabs__scroll::-webkit-scrollbar{display:none}
.tab{
  padding:.5rem .95rem;border-radius:99px;white-space:nowrap;
  font-size:.79rem;font-weight:500;color:var(--muted);border:1px solid transparent;
  transition:color .3s,background .3s,border-color .3s;
}
.tab:hover{color:var(--cream)}
.tab.is-on{color:var(--ink);background:var(--cream);font-weight:600}

.menu__wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mgroup{margin-bottom:3.6rem;scroll-margin-top:5.5rem}
.mgroup__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.mgroup__name{font:400 clamp(1.5rem,1.2rem + 1.2vw,2.3rem)/1 var(--f-display);letter-spacing:.01em}
.mgroup__n{font-size:.72rem;color:var(--dim);letter-spacing:.1em}
.mgroup__desc{font-size:.82rem;color:var(--muted);margin:-.9rem 0 1.5rem;max-width:60ch}
.mgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.mcard{
  display:grid;grid-template-columns:88px 1fr;gap:1rem;align-items:center;
  padding:.75rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  transition:transform .45s var(--ease),border-color .35s,background .35s;
  opacity:0;transform:translateY(24px);
}
.mcard.is-in{opacity:1;transform:none}
.mcard:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-3px)}
.mcard__ph{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2);flex:none}
.mcard__ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mcard:hover .mcard__ph img{transform:scale(1.09)}
.mcard__b{display:grid;gap:.2rem;min-width:0}
.mcard__n{font-weight:600;font-size:.92rem;line-height:1.25}
.mcard__d{font-size:.75rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard__p{display:flex;align-items:baseline;gap:.5rem;margin-top:.25rem}
.mcard__p b{font-size:.95rem;font-weight:600}
.mcard__p s{font-size:.76rem;color:var(--dim)}
.mcard__v{font-size:.7rem;color:var(--dim)}
.deal{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--flame)}

/* ═══ GALLERY ════════════════════════════════════════════ */
.gallery{padding:clamp(3rem,7vw,5rem) 0;overflow:hidden;background:var(--ink-2);border-block:1px solid var(--line)}
.grow{display:flex;gap:1rem;width:max-content;will-change:transform;margin-bottom:1rem}
.grow:last-child{margin-bottom:0}
.grow figure{width:clamp(150px,20vw,260px);aspect-ratio:1;border-radius:14px;overflow:hidden;flex:none;position:relative;border:1px solid var(--line)}
.grow img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.grow figure:hover img{transform:scale(1.08)}
.grow figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .7rem;
  font-size:.74rem;font-weight:500;
  background:linear-gradient(to top,rgba(10,9,8,.9),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease);
}
.grow figure:hover figcaption{opacity:1;transform:none}

/* ═══ VISIT ══════════════════════════════════════════════ */
.visit{padding:clamp(5rem,10vw,8rem) 0}
.visit__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr);align-items:start}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:1.5rem 1.6rem 1.7rem;display:grid;gap:1rem;align-content:start}
.card__title{font:400 1.5rem/1 var(--f-display);letter-spacing:.01em}
.card__note{font-size:.74rem;color:var(--dim);line-height:1.5}
.card__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.card address{font-style:normal;line-height:1.7;font-size:.95rem}
.hours{display:grid;gap:.4rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;padding:.3rem 0;border-bottom:1px dashed rgba(246,240,232,.07)}
.hours li:last-child{border-bottom:0}
.hours li.is-today{color:var(--cream);font-weight:600}
.hours li.is-today span:first-child::before{content:'▸ ';color:var(--ember)}
.hours span:first-child{color:var(--muted)}
.hours li.is-today span:first-child{color:var(--cream)}
.ways{display:grid;gap:.85rem}
.ways li{display:grid;gap:.15rem;padding-left:1rem;border-left:2px solid var(--ember)}
.ways b{font-size:.9rem;font-weight:600}
.ways span{font-size:.78rem;color:var(--muted)}
.map{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);height:190px;background:var(--surface-2)}
.map iframe{position:relative;z-index:2;width:100%;height:100%;border:0;filter:invert(92%) hue-rotate(180deg) saturate(.5) contrast(.95)}
.map__fallback{
  position:absolute;inset:0;z-index:1;display:grid;align-content:center;justify-items:center;gap:.3rem;
  text-align:center;padding:1rem;
  background:
    radial-gradient(circle at 50% 42%,rgba(232,56,43,.18),transparent 60%),
    repeating-linear-gradient(0deg,rgba(246,240,232,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(246,240,232,.05) 0 1px,transparent 1px 26px);
}
.map__fallback b{font-size:.85rem;font-weight:600}
.map__fallback span{font-size:.74rem;color:var(--muted)}
.map__pin{width:12px;height:12px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 5px rgba(232,56,43,.22);margin-bottom:.45rem}
/* Items whose only supplied photo is unusable (the bottled-water shot is a
   screenshot of a transparent asset, checkerboard and all) get the house mark
   instead, so the tile reads as designed rather than broken. */
.mcard__ph--none{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 10c1.8 7.2-3.6 9.9-3.6 15.3a7.2 7.2 0 0 0 7.2 7.2c4.5 0 7.2-3.6 7.2-8.1 0 0 5.4 5.4 5.4 13.5a16.2 16.2 0 1 1-32.4 0C15.8 25.6 30.2 23.8 32 10Z' fill='%23E8382B' opacity='.55'/%3E%3Cpath d='M12 33h40c0 11.6-9.5 19.6-20 19.6S12 44.6 12 33Z' fill='%23F6F0E8' opacity='.3'/%3E%3C/svg%3E") center/48% no-repeat,
    radial-gradient(circle at 50% 45%,rgba(246,240,232,.07),transparent 62%),
    var(--surface-2);
}

/* ═══ FOOTER ═════════════════════════════════════════════ */
.foot{border-top:1px solid var(--line);background:var(--ink-2)}
.foot__cta{
  display:grid;justify-items:center;gap:1.6rem;text-align:center;
  padding:clamp(4rem,10vw,7.5rem) var(--pad);
}
.foot__big{
  font:400 clamp(3.4rem,14vw,11rem)/.9 var(--f-display);letter-spacing:-.02em;
  display:flex;flex-wrap:wrap;justify-content:center;
}
.foot__big .ch{
  display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform .9s var(--ease),opacity .6s;
  background:linear-gradient(180deg,#FFF9F0,#8E837A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot__big.is-in .ch{transform:none;opacity:1}
.foot__bar{
  max-width:var(--maxw);margin:0 auto;padding:1.6rem var(--pad) 2.4rem;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;font-size:.8rem;color:var(--muted);
}
.foot__bar strong{display:block;font:400 1.3rem/1 var(--f-display);color:var(--cream);margin-bottom:.25rem;letter-spacing:.03em}
.foot__links{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot__links a{transition:color .3s}.foot__links a:hover{color:var(--ember)}
.foot__bar small{width:100%;color:var(--dim);font-size:.72rem;border-top:1px solid var(--line);padding-top:1.1rem}

/* ═══ LIGHTBOX ═══════════════════════════════════════════ */
.lightbox{
  position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:5vmin;
  background:rgba(6,5,5,.94);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.lightbox.is-on{opacity:1;visibility:visible}
.lightbox figure{max-width:min(760px,90vw);display:grid;gap:.9rem;transform:scale(.94);transition:transform .5s var(--ease)}
.lightbox.is-on figure{transform:none}
.lightbox img{width:100%;border-radius:var(--r)}
.lightbox figcaption{text-align:center;font:400 1.4rem/1 var(--f-display);letter-spacing:.02em}
.lightbox__close{position:absolute;top:2vmin;right:3vmin;font-size:2.4rem;line-height:1;color:var(--muted);transition:color .3s}
.lightbox__close:hover{color:var(--cream)}

/* ═══ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width:1080px){
  .visit__grid{grid-template-columns:1fr 1fr}
  .card--ways{grid-column:1/-1}
  .bowl{grid-template-columns:1fr}
  .receipt{position:static}
  .sig__row{grid-template-columns:1fr 1fr}
  .dish:last-child{grid-column:1/-1}
}
@media (max-width:860px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__end .status{display:none}
  .story__grid{grid-template-columns:1fr}
  .story__media{order:-1;max-width:420px}
  .story__media .reveal-img{aspect-ratio:5/4}
}
@media (max-width:620px){
  .sig__row{grid-template-columns:1fr}
  .dish:last-child{grid-column:auto}
  .visit__grid{grid-template-columns:1fr}
  .stats{gap:1.3rem .8rem}
  .mgrid{grid-template-columns:1fr}
  .btn--sm span{font-size:.72rem}
  .hero{padding-top:6.5rem}
  .story__badge{right:auto;left:0;bottom:-1.2rem}
}

/* ═══ REDUCED MOTION ═════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .grain{display:none}
  .reveal,.mcard{opacity:1;transform:none}
  .reveal-img::after{transform:scaleY(0)}
  .reveal-img img{transform:none}
  .hero__title .ch,.foot__big .ch{transform:none;opacity:1}
  .line>i{transform:none}
  .float{opacity:1}
  .hero__embers{display:none}
  .band__track,.grow{animation:none}
}