/* ============================================================
   Oh!Mumbai — concept "FILM REEL" (cinematic)
   Full-bleed scroll-snap chapters, takeover menu + takeover booking.
   Self-contained. Brand palette + brand fonts only.
   ============================================================ */

:root{
  --choc:#4d362e;
  --choc-deep:#241915;
  --cream:#ede2d1;
  --terra:#b25b37;
  --terra-hover:#9c4b2c;
  --terra-light:#d2835c;
  --olive:#848a4d;
  --seashell:#faf6f1;
  --red:#600000;
  --reel-ease:cubic-bezier(.16,1,.3,1);
  /* desktop photo caps: no image may run wider than the measure or taller than the frame */
  --frame-max:1320px;
  /* ONE gutter for every layer: header, chapters, takeovers, thumb bar.
     The formula reproduces the centred .ch-in edge exactly, so the logo,
     the titles and the buttons all sit on the same two vertical lines. */
  --gut:clamp(20px,4vw,56px);
  --logo-w:clamp(112px,11vw,156px);
  --edge:max(var(--gut), calc((100vw - var(--frame-max)) / 2 + var(--gut)));
}

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

/* macOS Safari tints its toolbar from the canvas colour, and only goes dark
   when the page declares a dark colour-scheme — theme-color alone is an
   iOS/Android signal. Both are set here so the chrome takes the chocolate. */
:root{color-scheme:dark}
html{-webkit-text-size-adjust:100%;background:var(--choc-deep)}

body{
  background:var(--choc-deep);
  color:var(--cream);
  font-family:"Geometria",system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow:hidden;            /* the reel is the scroller */
  -webkit-user-select:none;user-select:none;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.skip-link{
  position:fixed;left:16px;top:-100px;z-index:200;
  background:var(--cream);color:var(--choc);
  padding:14px 20px;font-size:14px;line-height:1.5;
  transition:top .2s ease;
}
.skip-link:focus{top:16px}

:focus-visible{outline:2px solid var(--terra-light);outline-offset:4px}

.u-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 1. MINIMAL FIXED TOP ROW: logo + burger only ---------- */

.reel-top{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.2vw,26px) var(--edge);
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(36,25,21,.72),rgba(36,25,21,0));
}
.reel-top>*{pointer-events:auto}
/* a takeover covers the whole screen, so the burger — which doubles as the
   close — has to ride above it, or the X is painted over and invisible */
body.is-takeover .reel-top{z-index:90;background:none}
.reel-logo{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.reel-logo img{width:var(--logo-w);max-width:none;flex:none;height:auto;
  margin-left:calc(var(--logo-w) * -0.1645);
  margin-right:calc(var(--logo-w) * -0.1711)}

.reel-burger{
  min-width:44px;min-height:44px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;
  padding:0;
}
.reel-burger span{
  display:block;height:2px;width:30px;background:var(--cream);
  transition:transform .4s var(--reel-ease),opacity .25s ease,width .4s var(--reel-ease);
}
.reel-burger span:nth-child(2){width:20px}
.reel-burger:hover span{background:var(--terra-light)}
body.is-takeover .reel-burger span:nth-child(1){transform:translateY(9px) rotate(45deg);width:30px}
body.is-takeover .reel-burger span:nth-child(2){opacity:0}
body.is-takeover .reel-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg);width:30px}

/* ---------- 2. THE REEL: scroll-snap chapters ---------- */

.reel{
  height:100svh;height:100dvh;
  overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.reel::-webkit-scrollbar{display:none}

.ch{
  --pool:rgba(36,25,21,.62);
  position:relative;
  height:100svh;height:100dvh;
  scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;
  display:grid;
}

/* phone: full-bleed photo, hard edges, heavy scrim, high contrast */
.ch-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.ch-media img{
  width:100%;height:124%;margin-top:-12%;
  object-fit:cover;object-position:var(--pos,50% 42%);border-radius:0;
  filter:contrast(1.06) saturate(.94) brightness(.72);
  will-change:transform;
}
.ch::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(36,25,21,.72) 0%,rgba(36,25,21,.30) 42%,rgba(36,25,21,.92) 100%),
    radial-gradient(130% 95% at 50% 50%,rgba(36,25,21,.10) 30%,rgba(36,25,21,.62) 100%);
}

/* phone first: generous top gap for the fixed logo row, bottom gap for the thumb bar */
.ch-in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  padding:118px var(--gut) 104px;
  padding-bottom:calc(104px + env(safe-area-inset-bottom));
  height:100%;
  max-width:var(--frame-max);width:100%;margin:0 auto;
}

/* --- asymmetry: one anchor corner per chapter --- */
.ch--tl .ch-in{align-items:flex-start;justify-content:flex-start;text-align:left}
.ch--tr .ch-in{align-items:flex-end;justify-content:flex-start;text-align:right}
.ch--bl .ch-in{align-items:flex-start;justify-content:flex-end;text-align:left}
.ch--br .ch-in{align-items:flex-end;justify-content:flex-end;text-align:right}
.ch--c  .ch-in{align-items:center;justify-content:center;text-align:center}

/* a soft pool of ground under the corner the words actually occupy */
.ch-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.ch--tl .ch-media::after{background:radial-gradient(90% 70% at 0% 0%,var(--pool),transparent 70%)}
.ch--tr .ch-media::after{background:radial-gradient(90% 70% at 100% 0%,var(--pool),transparent 70%)}
.ch--bl .ch-media::after{background:radial-gradient(90% 70% at 0% 100%,var(--pool),transparent 70%)}
.ch--br .ch-media::after{background:radial-gradient(90% 70% at 100% 100%,var(--pool),transparent 70%)}
.ch--c  .ch-media::after{background:radial-gradient(70% 60% at 50% 50%,var(--pool),transparent 75%)}

/* --- chapter slug (decorative numeral + label) --- */
.ch-slug{
  display:flex;align-items:center;gap:12px;
  font-size:14px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra-light);
  margin-bottom:clamp(14px,2vh,24px);
}
.ch--tr .ch-slug,.ch--br .ch-slug{flex-direction:row-reverse}
.ch-num{
  font-family:"TT Gertika",Georgia,serif;
  font-size:14px;letter-spacing:.1em;
  border:1px solid currentColor;padding:3px 9px;
}

/* --- the big display title --- */
.ch-title{ hyphens:none; overflow-wrap:normal; word-break:normal; text-wrap:balance;
  
  font-family:"TT Gertika",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.85rem,5.6vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--seashell);
  max-width:12ch;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(36,25,21,.6);
}
.ch--tr .ch-title,.ch--br .ch-title{margin-left:auto}
.ch-title--long{font-size:clamp(1.6rem,4.2vw,2.8rem);max-width:24ch}

/* letter / line reveal */
.rv-line{display:block;overflow:hidden}
.rv-line>span{
  display:block;
  transform:translateY(105%) rotate(2deg);
  opacity:0;
  transition:transform 1s var(--reel-ease),opacity .8s ease;
  transition-delay:var(--d,0ms);
}
.ch.is-live .rv-line>span{transform:none;opacity:1}

.rv-word{display:inline-block;white-space:pre-wrap}
.rv-ch{display:inline-block;white-space:pre;
  transform:translateY(60%);opacity:0;
  transition:transform .8s var(--reel-ease),opacity .5s ease;
  transition-delay:var(--d,0ms);
}
.ch.is-live .rv-ch{transform:none;opacity:1}

/* secondary copy under a title */
.ch-note{
  margin-top:clamp(16px,2.4vh,28px);
  font-size:clamp(16px,1.35vw,19px);line-height:1.6;
  max-width:46ch;color:var(--cream);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease .45s,transform .9s var(--reel-ease) .45s;
}
.ch--tr .ch-note,.ch--br .ch-note{margin-left:auto}
.ch--c .ch-note{margin-left:auto;margin-right:auto}
.ch.is-live .ch-note{opacity:1;transform:none}

.ch-link{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;margin-top:clamp(14px,2vh,26px);
  font-size:16px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;
  color:var(--terra-light);
  border-bottom:1px solid currentColor;
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease .6s,transform .9s var(--reel-ease) .6s,color .25s ease;
}
.ch.is-live .ch-link{opacity:1;transform:none}
.ch-link:hover{color:var(--seashell)}

.ch-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 30px;margin-top:clamp(18px,2.6vh,30px);
  background:var(--terra);color:var(--seashell);
  font-size:16px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;
  border-radius:100px;
  transition:background .25s ease;
}
.ch-cta:hover{background:var(--terra-hover)}

/* --- the dish chapter: big centred lines, no cards --- */
.reel-dishes{
  list-style:none;
  display:flex;flex-direction:column;
  gap:clamp(6px,1.1vh,14px);
  width:100%;max-width:980px;
}
.reel-dish{
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:10px;
  font-family:"TT Gertika",Georgia,serif;
  font-size:clamp(1.05rem,2.6vw,1.6rem);
  line-height:1.16;
  color:var(--seashell);
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .8s var(--reel-ease);
  transition-delay:var(--d,0ms);
}
.ch.is-live .reel-dish{opacity:1;transform:none}
.reel-dish b{font-weight:400}
.reel-dish i{
  flex:0 0 auto;font-style:normal;
  color:var(--terra-light);
  font-size:clamp(.95rem,1.4vw,1.1rem);
}
.reel-dish s{display:none}

/* --- last chapter: cinema-credits footer --- */
.reel-credits{
  margin-top:clamp(20px,3.4vh,40px);
  font-size:14px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);
  display:flex;flex-direction:column;align-items:center;
  gap:6px;max-width:70ch;
}
.rc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px}
/* legal notices are not part of the address block — small, quiet, cornered */
.rc-legal{
  position:absolute;z-index:3;
  left:var(--gut);right:auto;
  bottom:calc(100px + env(safe-area-inset-bottom));
  justify-content:flex-start;
  gap:2px 10px;max-width:calc(100% - var(--gut) * 2);
  font-size:12px;line-height:1.5;letter-spacing:.04em;text-transform:none;
}
.reel-credits .rc-legal a,.rc-legal a{color:var(--cream);opacity:.78;min-height:0;letter-spacing:.04em}
.reel-credits .rc-legal a:hover{opacity:1;color:var(--cream)}
.rc-legal em{opacity:.55;color:var(--cream)}
.rc-legal span{opacity:.78;color:var(--cream)}
@media (min-width:641px){ .rc-legal{bottom:clamp(20px,3vh,36px)} }
.reel-credits a{min-height:44px;display:inline-flex;align-items:center;color:var(--terra-light)}
.reel-credits .rc-addr{color:var(--seashell)}
.reel-credits .rc-addr:hover{color:var(--terra-light)}
.reel-credits a:hover{color:var(--seashell)}
.reel-credits em{font-style:normal;color:var(--terra-light)}

/* ---------- 3. PROGRESS INDICATOR (fixed to the right edge) ---------- */

.reel-progress{
  position:fixed;z-index:55;
  right:calc(var(--edge) - 44px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.reel-dot{
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:2px;
}
.reel-dot::after{
  content:"";display:block;width:2px;height:12px;background:rgba(237,226,209,.4);
  transition:height .45s var(--reel-ease),background .3s ease;
}
.reel-dot:hover::after{background:var(--cream)}
.reel-dot[aria-current="true"]::after{height:30px;background:var(--terra-light)}
body.is-takeover .reel-progress{opacity:0;pointer-events:none;transition:opacity .25s ease}

/* ---------- 4. TAKEOVERS (menu + booking share one family) ---------- */

.tk{
  position:fixed;inset:0;z-index:80;
  visibility:hidden;
  background:var(--choc-deep);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .72s var(--reel-ease),visibility 0s linear .72s;
}
.tk:focus{outline:none}
.tk.is-open{
  visibility:visible;
  clip-path:inset(0 0 0 0);
  transition:clip-path .72s var(--reel-ease),visibility 0s;
}

/* crossfading photo bed behind the huge links */
.tk-bed{position:absolute;inset:0;z-index:0;overflow:hidden}
.tk-bed img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
  opacity:0;transform:scale(1.06);
  filter:contrast(1.15) saturate(.9) brightness(.62);
  transition:opacity .7s ease,transform 1.4s var(--reel-ease);
}
.tk-bed img.is-shown{opacity:1;transform:scale(1)}
.tk-bed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(36,25,21,.82),rgba(36,25,21,.55) 45%,rgba(36,25,21,.9));
}

.tk-in{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:88px var(--gut) 40px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
  max-width:var(--frame-max);margin:0 auto;
  overflow-y:auto;
}
/* bottom-anchored, but via auto margin: with justify-content:flex-end a panel
   taller than the screen overflows past the top and can never be scrolled to */
.tk-in>*:first-child{margin-top:auto}
.tk-in>*:last-child{margin-bottom:auto}

.tk-label{
  font-size:14px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra-light);margin-bottom:clamp(16px,3vh,34px);
}

/* huge stacked display links */
.tk-nav{list-style:none;display:flex;flex-direction:column}
.tk-nav li{border-top:1px solid rgba(237,226,209,.16)}
.tk-nav li:last-child{border-bottom:1px solid rgba(237,226,209,.16)}
.tk-link{
  display:flex;align-items:baseline;gap:clamp(10px,2vw,26px);
  padding:clamp(10px,1.9vh,20px) 0;min-height:56px;
  font-family:"TT Gertika",Georgia,serif;
  font-size:clamp(1.6rem,4.6vw,2.6rem);
  line-height:1.06;letter-spacing:-.02em;
  color:var(--cream);
  transition:color .3s ease,transform .5s var(--reel-ease);
}
.tk-link em{
  font-style:normal;
  font-family:"Geometria",system-ui,sans-serif;
  font-size:14px;line-height:1.5;letter-spacing:.2em;
  color:var(--terra-light);
  flex:0 0 auto;
  display:none;
}
.tk-link:hover,.tk-link:focus-visible{color:var(--seashell);transform:translateX(clamp(6px,1.4vw,22px))}

/* booking takeover specifics */
.tk-phone{
  display:inline-block;
  font-family:"TT Gertika",Georgia,serif;
  font-size:clamp(1.25rem,2.6vw,1.7rem);
  line-height:1.06;letter-spacing:-.02em;
  color:var(--seashell);
  min-height:56px;
  transition:color .25s ease;
}
.tk-phone:hover{color:var(--terra-light)}
.tk-title{
  font-family:"TT Gertika",Georgia,serif;font-weight:400;
  font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.1;
  color:var(--cream);margin-bottom:clamp(18px,3vh,36px);
}
.tk-rows{list-style:none;margin-top:clamp(22px,4vh,46px)}
.tk-rows li{border-top:1px solid rgba(237,226,209,.16)}
.tk-rows li:last-child{border-bottom:1px solid rgba(237,226,209,.16)}
.tk-row{
  display:flex;align-items:center;gap:16px;
  min-height:72px;padding:14px 0;
  font-family:"TT Gertika",Georgia,serif;
  font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.15;
  color:var(--cream);
  transition:color .3s ease,transform .5s var(--reel-ease);
}
.tk-row:hover,.tk-row:focus-visible{color:var(--seashell);transform:translateX(clamp(6px,1.4vw,22px))}
.tk-row svg{flex:0 0 auto;width:26px;height:26px;fill:currentColor}
.tk-sub{
  margin-top:clamp(18px,3vh,34px);
  font-size:14px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);
}

.tk-close{
  position:absolute;z-index:3;
  top:clamp(14px,2.2vw,26px);right:var(--edge);
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terra-light);
}
.tk-close:hover{color:var(--seashell)}
/* the burger itself doubles as the menu close, so only booking shows its own */
.tk-close{display:none}   /* the burger is the one close control */

body.is-takeover{overflow:hidden}

/* ---------- 5. THUMB BAR: the reel's controls live at the bottom of the phone ---------- */

.reel-jump{
  position:fixed;left:0;right:0;bottom:0;z-index:58;
  display:flex;align-items:center;gap:10px;
  padding:10px var(--gut);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(36,25,21,.92) 40%,rgba(36,25,21,0));
  transition:opacity .25s ease;
}
.reel-jump button{
  flex:1 1 0;min-height:48px;
  display:flex;align-items:center;justify-content:center;
  padding:0 14px;
  font-size:14px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;
  border-radius:100px;
  transition:background .25s ease,color .25s ease;
}
.reel-jump .rj-ghost{border:1px solid rgba(237,226,209,.45);color:var(--cream)}
.reel-jump .rj-ghost:hover{border-color:var(--cream);color:var(--seashell)}
.reel-jump .rj-solid{background:var(--terra);color:var(--seashell)}
.reel-jump .rj-solid:hover{background:var(--terra-hover)}
/* Safari samples every position:fixed element near an edge to tint its bottom
   bar — even a fully transparent one. A terracotta button parked down there
   turns the browser chrome orange, so a hidden thumb bar leaves the render
   tree entirely; allow-discrete keeps the glide-out visible on the way. */
.reel-jump{
  transition:opacity .45s var(--reel-ease),transform .55s var(--reel-ease),display .55s;
  transition-behavior:allow-discrete;
}
body.is-takeover .reel-jump{opacity:0;pointer-events:none;display:none}
/* on the booking slide the page's own button takes over, so the floating one
   glides down and out rather than doubling up */
.reel-jump.is-landed{
  opacity:0;pointer-events:none;display:none;
  transform:translateY(28px) scale(.96);
}

/* ---------- 6. LIST CHAPTERS (menu sections): bottom-anchored, scrollable inside ---------- */

.ch--list .ch-in{align-items:stretch;justify-content:flex-end;text-align:left}
.ch-sec{
  font-family:"TT Gertika",Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.06;letter-spacing:-.02em;
  color:var(--seashell);
  margin-bottom:14px;
}
.reel-list{
  list-style:none;width:100%;
  flex:0 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-top:1px solid rgba(237,226,209,.18);
}
.reel-list::-webkit-scrollbar{display:none}
.reel-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  min-height:52px;padding:10px 0;
  border-bottom:1px solid rgba(237,226,209,.18);
  font-family:"TT Gertika",Georgia,serif;
  font-size:clamp(1rem,2.4vw,1.35rem);line-height:1.2;
  color:var(--seashell);
  opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s var(--reel-ease);
  transition-delay:var(--d,0ms);
}
.ch.is-live .reel-row{opacity:1;transform:none}
.reel-row b{font-weight:400}
.reel-row i{
  flex:0 0 auto;font-style:normal;color:var(--terra-light);
  font-size:clamp(1rem,4vw,1.5rem);
}
.reel-row i span{margin-left:.25em}

/* a pulled quote as its own chapter */
.ch-quote{
  font-family:"TT Gertika",Georgia,serif;font-weight:400;
  font-size:clamp(1.25rem,3vw,2rem);line-height:1.22;
  letter-spacing:-.01em;color:var(--seashell);
  max-width:24ch;
  text-shadow:0 2px 40px rgba(36,25,21,.6);
}
.ch-cite{
  margin-top:18px;
  font-size:14px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terra-light);
}

/* ---------- 7. WIDER SCREENS: the desktop treatment is added, never subtracted ---------- */

@media (min-width:641px){
  .tk-in{
    justify-content:flex-start;
    padding:clamp(88px,13vh,150px) var(--gut) clamp(40px,8vh,90px);
  }
  .ch-in{
    padding:clamp(132px,17vh,196px) var(--gut) clamp(112px,15vh,168px);
  }
  .ch-title{max-width:18ch}
  .reel-dish{flex-wrap:nowrap;gap:clamp(10px,2vw,26px)}
  .reel-dish s{
    display:block;flex:1 1 auto;min-width:18px;height:1px;
    background:rgba(237,226,209,.32);text-decoration:none;
    transform:translateY(-.32em);
  }
  .tk-link em{display:block}
  .reel-jump{
    left:auto;right:var(--edge);
    width:auto;gap:14px;padding:0 0 clamp(20px,3vh,36px);
    background:none;
  }
  .reel-jump button{flex:0 0 auto;min-width:180px}
  .ch-sec{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:20px}
  .reel-list{border-top:0}
  .reel-row{min-height:60px;padding:12px 0}
  .ch-quote{max-width:20ch}
}

@media (min-width:1024px){
  .reel-list{max-width:900px}
  .ch--list .ch-in{justify-content:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reel{scroll-behavior:auto}
  .ch-media img{height:100%;margin-top:0;transform:none!important}
  .rv-line>span,.rv-ch,.ch-note,.ch-link,.reel-dish,.reel-row{
    transform:none!important;opacity:1!important;transition:none!important;
  }
  .tk{transition:visibility 0s,clip-path 0s}
  .tk-bed img{transition:opacity .01s linear;transform:none}
  .tk-link:hover,.tk-row:hover{transform:none}
  .reel-burger span{transition:none}
}


/* ---------- 9. THE MENU PAGE: a plain, scannable document ----------
   Same chrome (fixed logo row, burger takeover, thumb bar, palette, type),
   but the dish facts are all on the surface: tabs switch the section in place
   and a Фото / PDF toggle swaps the photo list for a printable sheet. */

body.doc-page{
  overflow:auto;
  -webkit-user-select:auto;user-select:auto;
}
body.doc-page.is-takeover{overflow:hidden}
.reel-top--solid{background:linear-gradient(to bottom,rgba(36,25,21,.96) 55%,rgba(36,25,21,0))}

.doc{
  min-height:100svh;
  padding:124px var(--gut) 96px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.doc{max-width:var(--frame-max);margin-inline:auto}
.doc-hero,.doc-wrap{width:100%}
.doc-title{
  font-family:"TT Gertika",Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.08;letter-spacing:-.02em;
  color:var(--seashell);
}
.doc-lead{
  margin-top:14px;max-width:46ch;
  font-size:16px;line-height:1.6;color:var(--cream);
}

/* --- the production menu component, lightly re-skinned ---
   minimal.css supplies every .mn-* rule verbatim; this only re-grounds it on
   the deep chocolate of the reel and tucks the sticky bar under the logo row. */
body.doc-page{ --bg:var(--choc-deep); --accent-lt:var(--terra-light); }
.doc-wrap #menu-app{ margin-top:clamp(18px,3vh,30px) }
body.doc-page .mn-controls{
  position:sticky;top:86px;z-index:40;
  background:none;
  padding:12px 0;margin-inline:0;
  border-bottom:1px solid rgba(237,226,209,.18);
  margin-bottom:clamp(20px,3.4vh,32px);
}
body.doc-page .mn-controls{ align-items:center; justify-content:space-between; flex-direction:row; flex-wrap:nowrap; gap:12px; }
/* the production wheel picker is driven by minimal.js, which this concept does
   not load — so the phone tabs stay a plain, left-aligned scrolling row */
body.doc-page .mn-tabs{
  flex:1 1 0;min-width:0;justify-content:flex-start;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;
  width:auto;margin-inline:0;padding-inline:0;
  -webkit-mask-image:none;mask-image:none;
}
body.doc-page .mn-tabs::-webkit-scrollbar{display:none}
body.doc-page .mn-tab{ transform:none;opacity:1;white-space:nowrap }
body.doc-page .mn-view{ margin-left:auto;align-self:center;flex:0 0 auto }
body.doc-page .mn-tab{ letter-spacing:.06em; }
body.doc-page .mn-tab.is-active{ color:var(--seashell); background:var(--terra); }
body.doc-page .mn-name{ font-family:"TT Gertika",Georgia,serif; }
body.doc-page .mn-price{ color:var(--terra-light); }
body.doc-page .mn-img{ border-radius:14px; background:var(--choc); }
body.doc-page .mn-pdf-foot{
  max-width:820px;margin:18px auto 0;
  display:flex;justify-content:flex-start;
}
body.doc-page .mn-pdf-dl{
  min-height:44px;padding:10px 2px;border:0;border-radius:0;cursor:pointer;
  background:none;color:var(--terra-light);
  border-bottom:1px solid currentColor;
  font-family:"Geometria",system-ui,sans-serif;
  font-size:14px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;
  transition:color .25s ease;
}
body.doc-page .mn-pdf-dl:hover{ background:none;color:var(--seashell) }

.reel-jump--doc{justify-content:flex-end}

@media (min-width:641px){
  .doc{padding:clamp(140px,17vh,200px) var(--gut) clamp(80px,10vh,120px)}
  body.doc-page .mn-controls{ top:114px; padding:16px 0 }
}

@media print{
  .reel-top,.reel-jump,.tk,.skip-link,.doc-hero{display:none!important}
}

/* phones: the section scroller gets the full width, the view toggle its own
   line on the right gutter — both edges line up with the logo above them */
@media (max-width:600px){
  body.doc-page .mn-controls{ flex-direction:column; align-items:stretch; gap:10px }
  body.doc-page .mn-tabs{ flex:none;width:100% }
  body.doc-page .mn-view{ align-self:flex-end;margin-inline:0 }
}


/* ---------- 10. GALLERY CHAPTER ----------
   One chapter that holds many photos instead of several near-empty ones:
   a horizontal snap track, one photo per view, captions where copy exists. */
.ch--gal{overflow:hidden}
/* full-screen: the carousel IS the chapter, edge to edge, no inner frame */
.ch--gal .ch-in{padding:0;max-width:none;justify-content:stretch}
.ch--gal::after{display:none}
.gal{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:flex;gap:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.gal::-webkit-scrollbar{display:none}
.gal-slide{
  position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.gal-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 45%);
  filter:contrast(1.06) saturate(.94) brightness(.72);
}
.gal-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(36,25,21,.92),rgba(36,25,21,.25) 45%,rgba(36,25,21,.55));
}
.gal-cap{
  position:relative;z-index:2;
  margin:0 0 clamp(18px,3vh,30px);
  max-width:46ch;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--cream);
}
.gal-bar{
  position:absolute;z-index:3;left:0;right:0;
  bottom:calc(104px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;
  padding:0 var(--gut);
}
.gal-count{
  font-size:14px;line-height:1.5;letter-spacing:.2em;color:var(--terra-light);
  flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.gal-rail{flex:1 1 auto;height:2px;background:rgba(237,226,209,.22);position:relative;overflow:hidden}
.gal-rail i{position:absolute;inset:0 auto 0 0;background:var(--terra-light);transition:transform .35s var(--reel-ease);transform-origin:left}
.gal-arrows{display:flex;gap:8px;flex:0 0 auto}
.gal-arrows button{
  min-width:44px;min-height:44px;border:1px solid rgba(237,226,209,.45);border-radius:100px;
  display:flex;align-items:center;justify-content:center;color:var(--cream);
  transition:border-color .2s ease,color .2s ease;
}
.gal-arrows button:hover{border-color:var(--cream);color:var(--seashell)}
.gal-arrows svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (min-width:641px){
  .gal-bar{bottom:calc(clamp(56px,9vh,104px) + 34px)}
}

/* ---------- 11. MENU BACKDROP ----------
   Each section carries its own photograph, held far back behind the list. */
.doc-bed{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--choc-deep)}
.doc-bed img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  filter:grayscale(.05) brightness(.71);
  transition:opacity .8s ease,transform 1.6s var(--reel-ease);
}
.doc-bed img.is-shown{opacity:.72;transform:scale(1)}
.doc-bed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(36,25,21,.50),rgba(36,25,21,.69) 55%,rgba(36,25,21,.90));
}
/* the bed sits behind the page, so the ground colour moves up to <html> */
html:has(body.doc-page){background:var(--choc-deep)}
body.doc-page{background:transparent}
body.doc-page .mn-controls{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-motion:reduce){ .doc-bed img{transition:opacity .01s linear;transform:none} }

/* a chapter that is mostly words: one lead paragraph set larger, then a
   supporting one — enough copy that the slide does not read as empty */
.ch-read{
  font-family:"TT Gertika",Georgia,serif;font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.75rem);line-height:1.35;letter-spacing:-.01em;
  color:var(--seashell);max-width:30ch;
  text-shadow:0 2px 40px rgba(36,25,21,.6);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease .1s,transform .9s var(--reel-ease) .1s;
}
.ch.is-live .ch-read{opacity:1;transform:none}
/* every paragraph on a reading chapter shares one measure */
.ch--read .ch-note{max-width:52ch}
.ch-note + .ch-note{margin-top:clamp(10px,1.6vh,18px)}


/* ---------- the closing slide on phones ----------
   Centred rows that wrap leave separators dangling at line ends and the legal
   pair marooned in a corner. Below 640px the whole block shares one left edge
   and each row becomes a clean stack. */
@media (max-width:640px){
  .ch--close .ch-in{align-items:flex-start;text-align:left}
  .ch--close .ch-title,.ch--close .ch-note{margin-left:0;margin-right:0}
  .reel-credits{align-items:flex-start;text-align:left;width:100%;justify-content:flex-start}
  .rc-row{flex-direction:column;align-items:flex-start;gap:2px;justify-content:flex-start}
  .rc-row em{display:none}
  .rc-legal{
    position:static;margin-top:20px;
    flex-direction:row;flex-wrap:wrap;gap:2px 10px;
  }
  .rc-legal em{display:inline}
}


/* ---------- the closing slide, phones ----------
   The floating bar is gone by the time this slide arrives, so the page's own
   button takes its place directly above the contact block, and the block
   itself can sit right down at the bottom edge. */
@media (max-width:640px){
  /* .rv-line clips its overflow for the reveal, so a nowrap title needs the
     whole column, not the 12ch measure the wrapping titles use */
  .ch-title--fit{ white-space:nowrap;max-width:none;font-size:min(7vw,1.8rem) }
  .ch--close .ch-in{ padding-bottom:calc(28px + env(safe-area-inset-bottom)) }
  /* reading order down the slide: the facts, open space, the button, then the
     small print — so the button sits within thumb reach above the legal line */
  .ch--close .ch-title{ order:0 }
  .ch--close .reel-credits{ order:1;margin-top:clamp(18px,2.6vh,28px) }
  .ch--close .ch-cta{ order:2;width:100%;margin-top:auto }
  .ch--close .rc-legal{ order:3;margin-top:clamp(14px,2vh,22px) }
  /* no fade on the way out: a transparent terracotta button lingering at the
     edge is exactly what tints Safari's bottom bar orange */
  .reel-jump{ transition:none }
}