/* ==========================================================================
   MOJO MOMO — SITE 3 "RAIN"
   Dark, cinematic, film-first. Built for desktop and fluid across it:
   every fixed pixel value that used to assume a 1440px window is now a
   clamp() or a fraction, so the layout holds from a 1024px laptop up to an
   ultrawide without the film ever being cropped.
   ========================================================================== */

:root{
  --orange: #F57920;
  --black:  #0E0E0E;
  --gold:   #FDB913;
  --cream:  #FDF3E7;

  --ink:    #0A0A0A;              /* a touch deeper than brand black, for the film bed */
  --muted:  rgba(253,243,231,.52);
  --rule:   rgba(253,243,231,.14);

  --display: 'Anton', 'Archivo Black', 'Haettenschweiler', Impact, sans-serif;
  --body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* the brand mark's own lettering — fat, bubbly, tiny counters. Closest thing
     on Google Fonts to the face in UI Images/Logo.jpg. Used as an accent only. */
  --logo:    'Titan One', 'Archivo Black', sans-serif;

  /* the two numbers the whole page is measured from */
  --gutter: clamp(28px, 5vw, 96px);
  --max:    1520px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* NB: no overflow-x:hidden here - it makes body a scroll container and
     silently breaks position:sticky, which the entire hero depends on. */
}

/* Lenis drives scroll position itself */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:400; letter-spacing:.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--orange); color:#fff; }

.shell{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

.eyebrow{
  display:inline-block;
  font-size:11px; font-weight:600;
  letter-spacing:.32em; text-indent:.16em; text-transform:uppercase;
  color:var(--orange);
}
.eyebrow--dark{ color:#B4551A; }


/* ==========================================================================
   LOADER
   ========================================================================== */

.loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--black);
  transition:opacity .3s ease;
}
.loader.is-done{ opacity:0; pointer-events:none; }
.loader.is-gone{ display:none; }

.loader__inner{ text-align:center; }

.loader__logo{
  width:112px; height:112px;
  margin:0 auto;
  border-radius:22px;
  box-shadow:0 20px 60px rgba(245,121,32,.28);
}

.loader__pct{
  margin-top:38px;
  font-family:var(--display);
  font-size:20px;
  letter-spacing:.22em;
  color:var(--muted);
}

.loader__bar{
  width:min(260px, 60vw); height:2px; margin:18px auto 0;
  background:rgba(253,243,231,.13);
  overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0%;
  background:var(--orange);
  transition:width .18s linear;
}


/* ==========================================================================
   CORNER FURNITURE — no nav bar on this site, by design
   ========================================================================== */

.corner-logo{
  position:fixed; top:clamp(20px,2.6vw,38px); left:var(--gutter); z-index:140;
  display:block;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.corner-logo img{
  width:clamp(52px,4.4vw,66px);
  height:auto;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.corner-logo:hover{ transform:translateY(-2px) rotate(-2deg); }

.burger{
  position:fixed; top:clamp(28px,3.2vw,44px); right:var(--gutter); z-index:140;
  width:46px; height:34px; padding:0;
  background:none; border:0; cursor:pointer;
  display:grid; align-content:center; gap:9px;
}
.burger i{
  display:block; height:2px; width:100%;
  background:var(--cream);
  transition:transform .32s cubic-bezier(.7,0,.2,1), opacity .2s, background .2s;
}
.burger:hover i{ background:var(--orange); }
.burger.is-open i:first-child{ transform:translateY(5.5px) rotate(45deg); }
.burger.is-open i:last-child{  transform:translateY(-5.5px) rotate(-45deg); }


/* ---------------------------- overlay menu ---------------------------- */

.overlay{
  position:fixed; inset:0; z-index:130;
  background:var(--black);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;   /* keeps the big links out of the tab order when closed */
  transition:clip-path .62s cubic-bezier(.76,0,.24,1), visibility 0s linear .62s;
  pointer-events:none;
}
.overlay.is-open{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  pointer-events:auto;
  transition:clip-path .62s cubic-bezier(.76,0,.24,1), visibility 0s;
}

.overlay__list{ width:100%; max-width:var(--max); margin-inline:auto; }

.overlay__list li{
  overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.overlay__list li:first-child{ border-top:1px solid var(--rule); }

.overlay__list a{
  display:block;
  position:relative;
  font-family:var(--display);
  font-size:clamp(34px, 5.4vw, 72px);
  line-height:1.32;
  color:var(--cream);
  transform:translateY(110%);
  transition:transform .6s cubic-bezier(.76,0,.24,1), color .3s;
}
.overlay.is-open .overlay__list a{ transform:translateY(0); }
.overlay__list li:nth-child(1) a{ transition-delay:.10s; }
.overlay__list li:nth-child(2) a{ transition-delay:.15s; }
.overlay__list li:nth-child(3) a{ transition-delay:.20s; }
.overlay__list li:nth-child(4) a{ transition-delay:.25s; }
.overlay__list li:nth-child(5) a{ transition-delay:.30s; }

.overlay__list a::after{
  content:attr(data-n);
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  font-family:var(--body);
  font-size:13px; font-weight:600;
  letter-spacing:.16em;
  color:var(--orange);
  opacity:0;
  transition:opacity .3s;
}
.overlay__list a:hover{ color:var(--orange); }
.overlay__list a:hover::after{ opacity:1; }

.overlay__foot{
  position:absolute; left:var(--gutter); bottom:clamp(32px,5vh,56px);
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,64px);
  font-size:13px; line-height:1.7;
  color:var(--muted);
  opacity:0;
  transition:opacity .4s .4s;
}
.overlay.is-open .overlay__foot{ opacity:1; }
.overlay__foot a:hover{ color:var(--orange); }


/* ==========================================================================
   HERO — 400vh runway, sticky 100vh stage

   The source film is 720x1280 portrait. Stretching that to cover a landscape
   desktop viewport meant a 2x scale-up and a brutal centre crop — the reason
   the old hero looked zoomed in. Instead the film keeps its own 9:16 frame on
   the right, and a blurred, darkened copy of the same frame fills the rest of
   the screen so the composition still reads full-bleed.
   ========================================================================== */

.hero{
  position:relative;
  height:400vh;              /* the scroll runway */
  background:var(--black);
}

.hero__stage{
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
  background:var(--black);
}

/* --- the film ---------------------------------------------------------- */

.hero__film,
.hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  display:block;
}
.hero__video{ object-fit:cover; object-position:50% 56%; display:none; }
.hero__stage.is-video .hero__film{ display:none; }
.hero__stage.is-video .hero__video{ display:block; }

/* The source is 720x1280. Filling a landscape desktop viewport means scaling it
   about 2x, which softens it. A fine grain layer is the standard fix — it gives
   the eye real high-frequency detail to hold onto, so the upscale reads as film
   stock rather than as a blurry image. It also suits a rainy night scene. */
.hero__grain{
  position:absolute; inset:-120px; z-index:1; pointer-events:none;
  opacity:.19;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%   { transform:translate3d(0,0,0); }
  25%  { transform:translate3d(-38px,22px,0); }
  50%  { transform:translate3d(26px,-34px,0); }
  75%  { transform:translate3d(-18px,-14px,0); }
  100% { transform:translate3d(0,0,0); }
}

/* Vignette plus a heavy left-hand gradient — the copy column sits over the
   film now, so it needs its own bed to stay legible against a lit skyline. */
.hero__wash{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right, rgba(6,8,14,.90) 0%, rgba(6,8,14,.62) 30%, rgba(6,8,14,.10) 58%, rgba(6,8,14,.22) 100%),
    radial-gradient(130% 92% at 50% 46%, rgba(6,8,14,0) 42%, rgba(6,8,14,.74) 100%),
    linear-gradient(to bottom, rgba(6,8,14,.62) 0%, rgba(6,8,14,0) 24%, rgba(6,8,14,0) 56%, rgba(6,8,14,.82) 100%);
}

.hero__rain{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}

/* ------------------------------ steam ------------------------------ */

.steam{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.steam i{
  position:absolute;
  left:var(--x); bottom:-16%;
  width:var(--w); height:var(--w);
  border-radius:50%;
  background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.30), rgba(255,255,255,0) 68%);
  filter:blur(26px);
  opacity:0;
  animation:wisp var(--s) linear var(--d) infinite;
}
@keyframes wisp{
  0%   { transform:translate3d(0,0,0) scale(.72);        opacity:0;   }
  14%  {                                                  opacity:.5;  }
  60%  { transform:translate3d(38px,-58vh,0) scale(1.25); opacity:.34; }
  100% { transform:translate3d(-16px,-118vh,0) scale(1.7);opacity:0;   }
}

/* ---------------------------- hero layout ---------------------------- */

.hero__layout{
  position:absolute; inset:0; z-index:6;
  display:grid;
  grid-template-columns:minmax(0, 46ch);
  align-items:center;
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(96px,12vh,150px) clamp(80px,11vh,130px);
  pointer-events:none;
}

.hero__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(24px,4vh,44px);
  min-width:0;
  height:100%;
}

.hero__kicker{
  display:flex; align-items:center; gap:14px;
  font-size:11px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(253,243,231,.62);
}
.hero__kicker i{ display:block; width:38px; height:1px; background:var(--orange); }

/* the four milestone lines stack in one cell so they cross-fade in place */
.hero__lines{
  display:grid;
  min-height:clamp(190px, 26vh, 280px);
  align-content:center;
}

.hero__prog{
  width:min(320px, 100%); height:2px;
  background:rgba(253,243,231,.16);
  overflow:hidden;
}
.hero__prog i{
  display:block; height:100%; width:100%;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
}

.line{
  grid-area:1/1;                       /* all lines stack, so they cross-fade */
  align-self:center;
  font-family:var(--display);
  font-size:clamp(38px, 5.1vw, 90px);
  line-height:1.03;
  letter-spacing:.005em;
  color:var(--cream);
  text-shadow:0 4px 34px rgba(0,0,0,.72), 0 1px 5px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(20px);
  /* visibility is stepped, not eased, so a faded-out line can never keep
     swallowing clicks meant for the film (the Order button lives in one) */
  visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  will-change:opacity, transform;
}
.line.is-in{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  transition:opacity .15s ease, transform .15s ease, visibility 0s;
}

/* the one word that gets the logo's voice */
.accent{
  font-family:var(--logo);
  font-style:normal;
  font-size:.92em;          /* Titan One runs larger on the body than Anton */
  color:var(--orange);
  letter-spacing:-.005em;
}

.line--last{ display:grid; justify-items:start; gap:clamp(24px,3.4vh,40px); }

.order{
  pointer-events:auto;
  display:inline-block;
  padding:clamp(15px,1.7vh,19px) clamp(32px,3.2vw,46px);
  font-family:var(--display);
  font-size:clamp(15px,1.2vw,19px);
  letter-spacing:.2em;
  text-indent:.1em;
  text-transform:uppercase;
  color:#fff;
  background:var(--orange);
  border-radius:999px;
  box-shadow:0 0 0 rgba(245,121,32,.6), 0 12px 40px rgba(245,121,32,.34);
  animation:pulse 2.9s ease-in-out infinite;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .25s;
}
.order:hover{ transform:translateY(-3px) scale(1.04); background:#ff8a30; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,121,32,.42), 0 12px 40px rgba(245,121,32,.30); }
  50%    { box-shadow:0 0 0 18px rgba(245,121,32,0), 0 12px 46px rgba(245,121,32,.44); }
}

/* --------------------------- scroll hint --------------------------- */

.hero__hint{
  position:absolute; left:50%; bottom:clamp(20px,3vh,34px); z-index:7;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:12px;
  font-size:10px; font-weight:600;
  letter-spacing:.42em; text-indent:.21em; text-transform:uppercase;
  color:var(--muted);
  transition:opacity .4s;
}
.hero__hint i{
  width:1px; height:clamp(28px,4vh,46px);
  background:linear-gradient(to bottom, var(--cream), transparent);
  animation:drip 2.1s ease-in-out infinite;
  transform-origin:top;
}
@keyframes drip{
  0%       { transform:scaleY(0);   opacity:0; }
  38%      { transform:scaleY(1);   opacity:1; }
  100%     { transform:scaleY(1);   opacity:0; }
}
.hero__hint.is-hidden{ opacity:0; }


/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */

.sec-head{
  width:100%; max-width:var(--max);
  margin:0 auto clamp(48px,6vw,76px);
  padding-inline:var(--gutter);
  text-align:center;
}
.sec-head h2{
  margin-top:16px;
  font-size:clamp(40px,4.6vw,68px);
  line-height:1;
  color:var(--cream);
}
.sec-head p{
  margin-top:16px;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--muted);
}


/* ==========================================================================
   MENU STRIP — the five dishes, nothing else
   ========================================================================== */

.menu{
  position:relative; z-index:10;
  padding:clamp(110px,12vw,170px) 0 clamp(100px,10vw,150px);
  background:var(--ink);
}

.menu__strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:clamp(14px,1.6vw,24px);
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.dish{
  position:relative;
  display:block;
  width:100%;
  font:inherit; color:inherit;
  padding:clamp(16px,1.4vw,22px) clamp(14px,1.2vw,20px) clamp(22px,2vw,30px);
  border-radius:18px;
  border:1px solid var(--rule);
  background:linear-gradient(to bottom, rgba(253,243,231,.055), rgba(253,243,231,.012));
  text-align:center;
  cursor:pointer;
  transition:border-color .4s, transform .4s cubic-bezier(.22,1,.36,1), background .4s;
}
.dish:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.dish__more{
  display:block;
  margin-top:14px;
  font-size:10px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--orange);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s, transform .35s;
}
.dish:hover .dish__more,
.dish:focus-visible .dish__more{ opacity:1; transform:translateY(0); }
.dish:hover{
  transform:translateY(-8px);
  border-color:rgba(245,121,32,.55);
  background:linear-gradient(to bottom, rgba(245,121,32,.12), rgba(253,243,231,.02));
}

.dish__art{
  position:relative;
  aspect-ratio:1 / 1;          /* the cutouts are tight-cropped, so this fills */
  display:grid; place-items:center;
  margin-bottom:18px;
  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(72% 60% at 50% 72%, rgba(245,121,32,.20), rgba(245,121,32,0) 70%);
}

.dish__art img{
  width:100%; height:100%;
  object-fit:contain;
  transform:scale(1);
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.dish:hover .dish__art img{ transform:scale(1.07); }

.dish__n{
  display:block;
  font-family:var(--display);
  font-size:12px;
  letter-spacing:.3em;
  color:var(--orange);
}

.dish h3{
  margin-top:6px;
  font-size:clamp(20px,1.8vw,26px);
  color:var(--cream);
  transition:color .3s;
}
.dish:hover h3{ color:var(--orange); }

.dish p{
  margin-top:7px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}


/* ==========================================================================
   DISH POPUP
   The card art is a transparent mascot cutout; the popup shows the real
   plated photograph from UI Images/Five momos. Two different kinds of image
   on purpose — the cutout reads as an icon in the row, the photo as the food.
   ========================================================================== */

.sheet{ position:fixed; inset:0; z-index:160; display:grid; place-items:center; }
.sheet[hidden]{ display:none; }

.sheet__scrim{
  position:absolute; inset:0;
  background:rgba(4,6,10,.78);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .3s ease;
}
.sheet.is-open .sheet__scrim{ opacity:1; }

.sheet__card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  width:min(940px, calc(100vw - 2 * var(--gutter)));
  max-height:min(86vh, 660px);
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(253,243,231,.14);
  background:#111317;
  box-shadow:0 50px 110px rgba(0,0,0,.7);
  transform:translateY(18px) scale(.97);
  opacity:0;
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.sheet.is-open .sheet__card{ transform:none; opacity:1; }

.sheet__shot{ margin:0; position:relative; overflow:hidden; background:#0b0d10; }
.sheet__shot img{ width:100%; height:100%; object-fit:cover; display:block; }

.sheet__body{
  padding:clamp(28px,3.4vw,46px);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.sheet__body h3{
  margin-top:12px;
  font-size:clamp(32px,3.6vw,52px);
  line-height:1;
  color:var(--cream);
}
.sheet__body > p{
  margin-top:16px;
  font-size:15px; line-height:1.7;
  color:rgba(253,243,231,.72);
}

.sheet__facts{ margin-top:24px; display:grid; gap:10px; }
.sheet__facts li{
  display:flex; justify-content:space-between; gap:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
  font-size:13px;
  color:rgba(253,243,231,.62);
}
.sheet__facts b{ color:var(--cream); font-weight:600; }

.sheet__body .order{ margin-top:auto; padding-top:0; justify-self:start; align-self:start; margin-block-start:28px; }

.sheet__x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(10,12,16,.72);
  color:var(--cream);
  font-size:15px;
  cursor:pointer;
  transition:transform .3s, background .3s;
}
.sheet__x:hover{ transform:rotate(90deg); background:var(--orange); }

@media (max-width: 820px){
  .sheet__card{ grid-template-columns:minmax(0,1fr); }
  .sheet__shot{ max-height:34vh; }
}


/* ==========================================================================
   STORY
   ========================================================================== */

.story{
  position:relative; z-index:10;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px, 30vw, 440px);
  align-items:center;
  gap:clamp(40px,6vw,90px);
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding:0 var(--gutter) clamp(110px,12vw,170px);
}

.story__text{ max-width:660px; }

.story__text h2{
  margin-top:18px;
  font-size:clamp(44px,5.4vw,80px);
  line-height:.98;
  color:var(--cream);
}
.story__text > p{
  margin-top:28px;
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.78;
  color:rgba(253,243,231,.72);
}

.story__facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:clamp(16px,2vw,28px);
  margin-top:38px;
}
.story__facts li{ border-top:1px solid var(--rule); padding-top:16px; }
.story__facts b{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,3.4vw,50px);
  line-height:1;
  color:var(--orange);
}
.story__facts span{
  display:block; margin-top:8px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}

.story__tag{
  margin-top:34px;
  font-family:var(--display);
  font-size:clamp(16px,1.4vw,19px);
  letter-spacing:.06em;
  color:var(--orange);
}

.story__mascot img{
  width:100%;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.6));
  animation:float 3s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(-10px); }
  50%    { transform:translateY(10px);  }
}


/* ==========================================================================
   HOURS — the one cream band, so the page is not a single dark tunnel
   ========================================================================== */

.hours{
  position:relative; z-index:10;
  background:var(--cream);
  color:var(--black);
  padding:clamp(80px,9vw,130px) 0;
}

.hours__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:center;
  gap:clamp(40px,6vw,90px);
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.hours__lead h2{
  margin-top:16px;
  font-size:clamp(40px,4.8vw,72px);
  line-height:.98;
  color:var(--black);
}

.hours__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(14px,1.6vw,20px) 0;
  border-bottom:1px solid rgba(14,14,14,.14);
}
.hours__row:first-child{ border-top:1px solid rgba(14,14,14,.14); }
.hours__row span{
  font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(14,14,14,.55);
}
.hours__row b{
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2vw,29px);
  letter-spacing:.01em;
  color:var(--black);
}

.order--dark{ margin-top:34px; pointer-events:auto; }


/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{
  position:relative; z-index:10;
  padding:clamp(64px,7vw,92px) var(--gutter) 34px;
  background:var(--black);
  border-top:1px solid var(--rule);
}

.foot__grid{
  display:grid;
  grid-template-columns:1.15fr .62fr .62fr minmax(280px, 520px);
  gap:clamp(28px,4vw,56px);
  align-items:start;
  width:100%; max-width:var(--max);
  margin-inline:auto;
}

.foot__logo{
  width:76px; height:76px;
  border-radius:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}

.foot__addr{
  margin-top:22px;
  font-size:14px; line-height:1.75;
  color:var(--muted);
}
.foot__phone{ margin-top:14px; font-size:14px; }
.foot__phone a:hover{ color:var(--orange); }

.foot__col h4{
  font-size:13px;
  font-family:var(--body);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px;
}
.foot__col ul li{ margin-bottom:11px; }
.foot__col ul a{
  font-size:15px;
  color:rgba(253,243,231,.72);
  transition:color .25s;
}
.foot__col ul a:hover{ color:var(--cream); }

.foot__col--map iframe{
  width:100%; height:clamp(190px,18vw,250px);
  border:1px solid var(--rule);
  border-radius:8px;
  filter:grayscale(1) invert(.92) contrast(.86);   /* map sits in the dark scheme */
  transition:filter .4s;
}
.foot__col--map iframe:hover{ filter:none; }

.foot__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  width:100%; max-width:var(--max);
  margin:clamp(44px,5vw,70px) auto 0;
  padding-top:26px;
  border-top:1px solid var(--rule);
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(253,243,231,.4);
}


/* ==========================================================================
   NARROW DESKTOP / TABLET — the film moves above the copy rather than
   squeezing the headline into a column it cannot hold.
   ========================================================================== */

@media (max-width: 1000px){
  .hero__layout{ grid-template-columns:minmax(0,1fr); }

  .story{ grid-template-columns:minmax(0,1fr); }
  .story__mascot{ max-width:360px; margin-inline:auto; }

  .hours__inner{ grid-template-columns:minmax(0,1fr); }

  .foot__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot__col--map{ grid-column:1 / -1; }
}


/* ==========================================================================
   REDUCED MOTION — drop the weather, keep the film
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .steam, .hero__rain{ display:none; }
  .hero__grain{ animation:none; }
  .order, .story__mascot img, .hero__hint i{ animation:none; }
  .line{ transition-duration:.01ms; }
  .dish__art img, .dish, .order{ transition:none; }
}