/* ==========================================================================
   MALVAN TADKA — Seafood Kitchen & Bar
   Design system + components.  Hand-written; no framework, no build step.
   Palette is derived from the brand mark: a brass thali, a kokum-red
   Devanagari wordmark, a leaf-green script and the neon green of the signage.
   ========================================================================== */

/* ---------- tokens ---------------------------------------------------- */
:root {
  /* surface */
  --ink:        #0a0b0a;   /* deepest — hero, dark acts            */
  --ink-2:      #101210;   /* raised dark surface                  */
  --ink-3:      #1a1d1a;   /* hairlines on dark                    */
  --bone:       #f2ede3;   /* light acts — warm off-white          */
  --bone-2:     #e6dfd1;   /* raised light surface                 */
  --bone-3:     #d2c9b6;   /* hairlines on light                   */

  /* brand */
  --brass:      #b9913c;
  --brass-lt:   #dcc07c;
  --brass-dk:   #7d6026;
  --kokum:      #c4262e;   /* the red of मालवण                     */
  --kokum-lt:   #e04a4a;
  --leaf:       #1b7a45;   /* the green of the Malvan Tadka script */
  --neon:       #2fd46e;   /* the green of the shopfront signage   */

  /* text */
  --on-dark:    #f4f1ea;
  --on-dark-mid:#a8a49a;
  --on-light:   #14160f;
  --on-light-mid:#5d5a50;

  /* type */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --deva:    "Tiro Devanagari Marathi", "Noto Sans Devanagari", serif;

  /* fluid scale */
  --t-mega:  clamp(3rem, 13vw, 11.5rem);
  --t-h1:    clamp(2.5rem, 8.5vw, 7rem);
  --t-h2:    clamp(2rem, 5.5vw, 4.25rem);
  --t-h3:    clamp(1.5rem, 2.8vw, 2.25rem);
  --t-lead:  clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.05rem);
  --t-label: 0.7rem;

  /* rhythm */
  --gut:   clamp(1.25rem, 5vw, 5.5rem);   /* page side padding */
  --band:  clamp(4.5rem, 10vh, 9rem);     /* vertical section padding */
  --r:     2px;                           /* radius — deliberately sharp */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--neon); color: #04140a; padding: .75rem 1.25rem;
  font: 700 .8rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- type primitives ------------------------------------------ */
.display {
  font-family: var(--display);
  font-weight: 400;                 /* Anton ships a single weight */
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -0.015em;
  font-feature-settings: "kern" 1;
}
.mega { font-size: var(--t-mega); }
.h1   { font-size: var(--t-h1); }
.h2   { font-size: var(--t-h2); }
.h3   { font-size: var(--t-h3); }

.deva { font-family: var(--deva); font-weight: 400; letter-spacing: 0; line-height: 1.25; }

.label {
  font: 500 var(--t-label)/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--on-dark-mid); max-width: 46ch; }
.on-light .lead, .light .lead { color: var(--on-light-mid); }

.measure { max-width: 62ch; }

/* an outlined "ghost" display word, used as background texture */
.ghost {
  -webkit-text-stroke: 1px currentColor;
  color: transparent;
  opacity: .16;
}

/* ---------- layout --------------------------------------------------- */
.wrap { padding-inline: var(--gut); }
.band { padding-block: var(--band); }
.rule { height: 1px; background: var(--ink-3); border: 0; }
.light .rule, .on-light .rule { background: var(--bone-3); }

.light {
  background: var(--bone);
  color: var(--on-light);
}
.light .label { color: var(--on-light-mid); }

/* section eyebrow: index number + name + hairline */
.eyebrow {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1.75rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .22; }
.eyebrow .num { color: var(--brass); }

/* ---------- buttons -------------------------------------------------- */
.btn {
  --bg: var(--neon); --fg: #04140a;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--bg); color: var(--fg);
  padding: .95rem 1.6rem;
  border: 1px solid var(--bg); border-radius: 999px;
  font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost {
  --bg: transparent; --fg: currentColor;
  border-color: currentColor;
}
.btn--ghost:hover { background: currentColor; color: var(--ink); }
.light .btn--ghost:hover { color: var(--bone); }
.btn--brass { --bg: var(--brass); --fg: #17130a; }

/* ---------- header --------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--gut);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
/* when the pinned light act is behind it, the header inverts */
.hdr.is-light {
  background: color-mix(in srgb, var(--bone) 78%, transparent);
  color: var(--on-light);
  border-bottom-color: var(--bone-3);
}
.hdr.is-hidden { transform: translateY(-105%); }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font: 400 1.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.brand-txt span { font: 500 .55rem/1.4 var(--mono); letter-spacing: .2em; opacity: .65; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  font: 500 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  position: relative; padding-block: .35rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--neon); }
.hdr.is-light .nav a[aria-current="page"] { color: var(--leaf); }

.hdr-cta { display: flex; align-items: center; gap: .6rem; }
.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.burger span { display: block; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; gap: .25rem;
  padding: 5rem var(--gut) var(--band);
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
  overflow-y: auto;
}
.drawer.is-open { transform: none; }
.drawer a {
  font-family: var(--display); font-size: clamp(2rem, 9vw, 3.5rem);
  text-transform: uppercase; line-height: 1.05;
  border-bottom: 1px solid var(--ink-3); padding: .45rem 0;
}
.drawer a:hover { color: var(--neon); }
.drawer .drawer-foot { margin-top: 2rem; display: grid; gap: .75rem; }

@media (max-width: 900px) {
  .nav, .hdr-cta .btn { display: none; }
  .burger { display: block; }
}

/* ==========================================================================
   MOTION ENGINE PRIMITIVES
   A [data-scene] block publishes its own scroll progress as --p (0 → 1).
   Children remap sub-ranges purely in CSS, e.g.
       --e: clamp(0, (var(--p) - .30) / .40, 1)
   so there is no per-element JS.  One rAF loop drives every scene.
   ========================================================================== */
.scene { position: relative; --p: 0; }
.pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
}

/* full-bleed media layer that scroll-scrubs a slow push-in */
.scrub {
  position: absolute; inset: 0;
  --z: clamp(0, var(--p) / .55, 1);
}
.scrub img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.02 + var(--z) * .16));
  transform-origin: 50% 45%;
  will-change: transform;
}
.scrub::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,11,10,.72) 0%, rgba(10,11,10,.25) 38%, rgba(10,11,10,.88) 100%);
}

/* the hard panel wipe that turns a dark act into a light one */
.wipe {
  position: absolute; inset: 0;
  background: var(--bone);
  --w: clamp(0, (var(--p) - var(--wipe-from, .42)) / var(--wipe-len, .16), 1);
  transform: translate3d(calc((1 - var(--w)) * 101%), 0, 0);
  will-change: transform;
}

/* ---------- the exploded thali --------------------------------------- */
.thali {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
/* Everything here is sized from ONE length token, --stage.  No percentages:
   a percentage translate resolves against the element's own box, not the
   stage, which silently collapses the ring into the middle. */
.thali-stage {
  --stage: min(80vmin, 660px);
  position: relative;
  width: var(--stage);
  height: var(--stage);
  min-height: 0;               /* keep content from overriding the square */
  flex: 0 0 auto;
  --e: clamp(0, (var(--p) - .22) / .46, 1);   /* explode  */
  --s: clamp(0, var(--p) / .30, 1);           /* settle-in */
  transform: scale(calc(.9 + var(--s) * .1)) rotate(calc(var(--e) * 6deg));
  will-change: transform;
}
/* a warm pool of light under the plate so the ring reads as an object in a
   room rather than cut-outs floating on flat black */
.thali-stage::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: calc(var(--stage) * 1.05); height: calc(var(--stage) * 1.05);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,145,60,.24), rgba(185,145,60,0) 58%);
  opacity: calc(1 - clamp(0, (var(--p) - .40) / .16, 1));  /* fades with the wipe */
  pointer-events: none;
}

/* inset:0 + margin:auto centres a fixed-size absolute box with no transform,
   which leaves the transform free for the radial motion alone */
.thali-plate {
  position: absolute; inset: 0; margin: auto;
  width: calc(var(--stage) * .52);
  height: calc(var(--stage) * .52);
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .55));
  transform: rotate(calc(var(--e) * -14deg));
  will-change: transform;
}

/* A katori rides the radial vector --a.  At rest it sits ON the plate
   (--R is small), and flies out to --R × 3.45 as the act explodes — so the
   dishes visibly lift off the thali rather than merely drifting apart.
   --R is a plain number, read as a percentage of --stage. */
.katori {
  position: absolute; inset: 0; margin: auto;
  width: calc(var(--stage) * .175);
  height: calc(var(--stage) * .175);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(220, 192, 124, .34) inset;
  --rad: calc(var(--R) / 100 * var(--stage) * (1 + var(--e) * 2.45));
  transform:
    rotate(calc(var(--a) * 1deg))
    translateX(var(--rad))
    rotate(calc(var(--a) * -1deg))
    scale(calc(.86 + var(--e) * .14));
  will-change: transform;
}
.katori img { width: 100%; height: 100%; object-fit: cover; }

/* The legend replaces radial labels: six vectors around a circle cannot carry
   text without colliding with the header or each other, so the naming moves
   to a fixed column that lights up row by row as the ring opens. */
.thali-legend {
  position: absolute;
  right: var(--gut); top: 50%; translate: 0 -50%;
  z-index: 4;
  width: 15rem;
  display: grid; gap: .55rem;
  color: var(--on-light);
  pointer-events: none;
}
.thali-legend li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .7rem; align-items: baseline;
  border-top: 1px solid var(--bone-3);
  padding-top: .5rem;
  /* each row appears in turn across the second half of the act */
  --lo: clamp(0, (var(--p) - var(--at)) / .07, 1);
  opacity: var(--lo);
  translate: calc((1 - var(--lo)) * .9rem) 0;
}
.thali-legend .n { font: 500 .6rem/1.7 var(--mono); color: var(--kokum); }
.thali-legend b  { display: block; font: 400 1.02rem/1.05 var(--display); text-transform: uppercase; }
.thali-legend span { display: block; font: 500 .58rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .58; }

@media (max-width: 1180px) { .thali-legend { display: none; } }
.katori-label b { display: block; font: 400 1.05rem/1 var(--display); text-transform: uppercase; }
.katori-label span { display: block; font: 500 .6rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

/* the act titles that cross-fade over the pinned stage */
.act-title {
  position: absolute; left: var(--gut); bottom: clamp(2rem, 8vh, 5rem);
  z-index: 3; pointer-events: none;
}
.act-title--in {
  --t: clamp(0, (var(--p) - .58) / .2, 1);
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 2.5rem));
}
.act-title--out {
  --t: clamp(0, var(--p) / .22, 1);
  opacity: calc(1 - var(--t));
  transform: translateY(calc(var(--t) * -3rem));
}

/* ---------- reveal on enter ------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* clip-reveal for display headings */
[data-reveal="line"] { transform: translateY(2.5rem); }

/* ---------- marquee -------------------------------------------------- */
.marquee {
  --speed: 38s;
  overflow: hidden; display: flex;
  border-block: 1px solid var(--ink-3);
  padding-block: .9rem;
  user-select: none;
}
.light .marquee { border-color: var(--bone-3); }
.marquee__track {
  display: flex; flex: 0 0 auto; gap: 2.5rem; padding-right: 2.5rem;
  animation: slide var(--speed) linear infinite;
}
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > * {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2.5rem;
  font: 400 clamp(1.4rem, 3.4vw, 2.6rem)/1 var(--display);
  text-transform: uppercase; white-space: nowrap;
}
.marquee__track i { color: var(--brass); font-style: normal; }
@keyframes slide { to { transform: translateX(-100%); } }

.marquee--mega .marquee__track > * { font-size: clamp(3rem, 12vw, 9rem); }

/* ---------- editorial card grid -------------------------------------- */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-2);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__idx {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  font: 500 .6rem/1 var(--mono); letter-spacing: .16em;
  color: var(--bone); mix-blend-mode: difference;
}
.card h3 { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2rem); text-transform: uppercase; line-height: .92; }
.card p  { color: var(--on-dark-mid); font-size: .92rem; }
.light .card p { color: var(--on-light-mid); }
.card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--ink-3); padding-top: .7rem; margin-top: auto;
}
.light .card__foot { border-color: var(--bone-3); }
.price { font: 500 .78rem/1 var(--mono); letter-spacing: .1em; color: var(--brass); }
.price--tbc { opacity: .55; }

.veg, .nonveg {
  display: inline-grid; place-items: center;
  width: .8rem; height: .8rem; border: 1.5px solid var(--leaf);
  vertical-align: middle; margin-left: .4rem;
}
.veg::before  { content: ""; width: .34rem; height: .34rem; border-radius: 50%; background: var(--leaf); }
.nonveg { border-color: var(--kokum); }
.nonveg::before { content: ""; width: 0; height: 0; border-left: .2rem solid transparent; border-right: .2rem solid transparent; border-bottom: .34rem solid var(--kokum); }

/* ---------- stat row ------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--ink-3); }
.light .stats { background: var(--bone-3); }
.stat { background: var(--ink); padding: clamp(1.25rem, 3vw, 2.25rem); }
.light .stat { background: var(--bone); }
.stat b { display: block; font: 400 clamp(2.25rem, 5.5vw, 4rem)/1 var(--display); color: var(--brass); }
.stat span { display: block; margin-top: .5rem; }

/* ---------- award / proof cards -------------------------------------- */
.proof { display: flex; flex-direction: column; gap: .9rem; }
.proof__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-2); }
.proof__media img { width: 100%; height: 100%; object-fit: cover; }
.proof b { font: 400 1.15rem/1.05 var(--display); text-transform: uppercase; display: block; }
.proof span { font: 500 .62rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

/* ---------- outlet list ---------------------------------------------- */
.outlet-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.field {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--ink-3); border-radius: 999px;
  padding: .6rem 1.1rem; background: var(--ink-2);
}
.light .field { border-color: var(--bone-3); background: var(--bone-2); }
.field input, .field select {
  background: none; border: 0; outline: none; min-width: 12rem;
  font: 500 .78rem/1 var(--mono); letter-spacing: .08em;
}
.field input::placeholder { color: var(--on-dark-mid); }
.light .field input::placeholder { color: var(--on-light-mid); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  border: 1px solid var(--ink-3); border-radius: 999px; background: none;
  padding: .5rem 1rem; cursor: pointer;
  font: 500 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.light .chip { border-color: var(--bone-3); }
.chip[aria-pressed="true"] { background: var(--neon); border-color: var(--neon); color: #04140a; }

.outlets { display: grid; gap: 1px; background: var(--ink-3); margin-top: 2rem; }
.light .outlets { background: var(--bone-3); }
.outlet {
  background: var(--ink); padding: clamp(1.1rem, 2.4vw, 1.9rem);
  display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem 1.4rem; align-items: start;
}
.light .outlet { background: var(--bone); }
.outlet[hidden] { display: none; }
.outlet__n { font: 500 .68rem/1.7 var(--mono); color: var(--brass); }
.outlet h3 { font: 400 clamp(1.3rem, 2.4vw, 1.85rem)/1 var(--display); text-transform: uppercase; }
.outlet address { font-style: normal; color: var(--on-dark-mid); font-size: .9rem; margin-top: .4rem; max-width: 52ch; }
.light .outlet address { color: var(--on-light-mid); }
.outlet__act { display: flex; flex-wrap: wrap; gap: .5rem; }
.outlet__tag {
  font: 500 .58rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--brass); color: var(--brass); padding: .35rem .6rem; border-radius: 999px;
  align-self: start;
}
@media (max-width: 720px) {
  .outlet { grid-template-columns: 2rem 1fr; }
  .outlet__act { grid-column: 1 / -1; }
}

/* ---------- quote ---------------------------------------------------- */
.quote blockquote {
  font-family: var(--display); font-size: clamp(1.6rem, 4vw, 3.1rem);
  text-transform: uppercase; line-height: .98; letter-spacing: -.01em;
}
.quote cite { display: block; margin-top: 1.5rem; font-style: normal; }

.tstml { display: flex; flex-direction: column; gap: 1rem; }
.tstml p { font-size: 1rem; }
.tstml__who { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--ink-3); padding-top: .9rem; }
.light .tstml__who { border-color: var(--bone-3); }
.tstml__av {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--brass); color: #17130a;
  font: 400 1rem/1 var(--display);
}
.stars { color: var(--brass); letter-spacing: .12em; font-size: .85rem; }

/* ---------- footer --------------------------------------------------- */
.ftr { background: var(--ink-2); border-top: 1px solid var(--ink-3); }
.ftr-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.ftr h4 { font: 500 .66rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.1rem; }
.ftr a { color: var(--on-dark-mid); font-size: .9rem; display: block; padding-block: .3rem; transition: color .3s; }
.ftr a:hover { color: var(--on-dark); }
.ftr-base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  border-top: 1px solid var(--ink-3); padding-top: 1.5rem; margin-top: 2.5rem;
  font-size: .78rem; color: var(--on-dark-mid);
}

/* sticky mobile action bar — a restaurant lives on calls and directions */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none; gap: 1px; background: var(--ink-3);
  border-top: 1px solid var(--ink-3);
}
.callbar a {
  flex: 1; background: var(--ink); text-align: center; padding: .85rem .5rem;
  font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.callbar a.is-primary { background: var(--neon); color: #04140a; }
@media (max-width: 900px) {
  .callbar { display: flex; }
  body { padding-bottom: 3rem; }
}

/* ---------- utilities ------------------------------------------------ */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 860px) { .split--wide { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 1.25rem; justify-items: start; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.brass { color: var(--brass); }
.neon  { color: var(--neon); }
.kokum { color: var(--kokum); }
.center { text-align: center; }
.full-media { width: 100%; aspect-ratio: 16/7; object-fit: cover; }
.mt-a { margin-top: auto; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   FALLBACKS — the page must be complete and legible with no JS and with
   reduced motion.  Scenes collapse to ordinary stacked sections.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto !important; }
  .pin { position: static; height: auto; min-height: auto; padding-block: var(--band); }
  .scrub img { transform: none; }
  .wipe { display: none; }
  /* --p is parked at 1, so --e is already 1 and the ring is fully open;
     only the decorative stage tilt needs neutralising */
  .thali-stage { transform: none; }
  .thali-plate { transform: none; }
  .thali-legend li { opacity: 1; translate: none; }
  .act-title--out { display: none; }
  .act-title--in { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card__media img, .card:hover .card__media img { transition: none; transform: none; }
}

/* no-JS: scenes never receive --p, so pin nothing and show end-state */
.no-js .scene { height: auto !important; }
.no-js .pin { position: static; height: auto; padding-block: var(--band); }
.no-js .wipe { display: none; }
.no-js .act-title { position: static; }
.no-js .act-title--out { display: none; }
.no-js .act-title--in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .katori-label, .no-js .leader { opacity: 1; }
.no-js .drawer { display: none; }

/* on small screens the pinned thali needs more breathing room and the
   labels are moved to a static caption list instead of leader lines */
@media (max-width: 760px) {
  .thali-stage { --stage: min(84vmin, 380px); }
  .act-title { left: var(--gut); right: var(--gut); }
}

/* the thali act's title sits top-left so the open ring never collides with it */
.act-title--top {
  top: clamp(4.5rem, 12vh, 8rem);
  bottom: auto;
}

/* ---------- scene lengths --------------------------------------------
   Each scene's height sets how much scroll its choreography gets.       */
.scene--hero     { height: 200vh; }
.scene--thali    { height: 380vh; }
.scene--festival { height: 180vh; }
.scene--music    { height: 170vh; }
@media (max-width: 760px) {
  .scene--hero     { height: 160vh; }
  .scene--thali    { height: 300vh; }
  .scene--festival { height: 150vh; }
  .scene--music    { height: 140vh; }
}
/* the pinned acts need their layers ordered explicitly */
.pin > .wipe   { z-index: 1; }
.pin > .thali  { z-index: 2; }
.pin > .scrub  { z-index: 0; }

/* ---------- pinned acts on small screens -----------------------------
   The sticky call bar sits over the bottom of every pin, and a 100svh pin
   is tight once a label, a display heading, a lead and a button stack up.
   Reserve room for the bar and step the type down so nothing is clipped. */
@media (max-width: 760px) {
  .scene .pin { padding: 4.5rem var(--gut) 4.5rem; }
  .scene .pin .h1   { font-size: clamp(2rem, 10.5vw, 3rem); }
  .scene .pin .mega { font-size: clamp(2.4rem, 13vw, 4rem); }
  .scene .pin .lead { font-size: .98rem; max-width: 34ch; }
  .scene--thali .pin { padding-block: 3rem; }
}

/* text laid over photography needs a real scrim, not a hint of one — the
   neon interiors are bright enough to swallow white type */
.scrub--dim::after {
  background:
    linear-gradient(180deg, rgba(10,11,10,.80) 0%, rgba(10,11,10,.55) 42%, rgba(10,11,10,.92) 100%),
    linear-gradient(90deg, rgba(10,11,10,.72) 0%, rgba(10,11,10,.10) 62%);
}

/* ---------- secondary-page primitives -------------------------------- */
.pagehero { position: relative; display: grid; align-items: end; min-height: 60vh; overflow: clip; }
.pagehero .scrub { position: absolute; inset: 0; }
.pagehero .scrub img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.pagehero__in { position: relative; z-index: 2;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(2.5rem, 6vh, 4rem); }

.menu-nav { position: sticky; top: 0; z-index: 60; display: flex; gap: 1.35rem; overflow-x: auto;
  padding: .85rem var(--gut);
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--ink-3); scrollbar-width: none; }
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav a { flex: 0 0 auto; font: 500 .7rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; opacity: .58; padding-block: .3rem; }
.menu-nav a[aria-current="true"] { opacity: 1; color: var(--neon); }

.menu-split { display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; }
@media (max-width: 860px) { .menu-split { grid-template-columns: 1fr; } }
.menu-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.mlist { display: grid; }
.mitem { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  border-top: 1px solid var(--ink-3); padding: .9rem 0; }
.light .mitem { border-color: var(--bone-3); }
.mitem b { display: block; font: 400 clamp(1.1rem, 1.9vw, 1.45rem)/1.1 var(--display);
  text-transform: uppercase; }
.mitem span { display: block; font-size: .9rem; color: var(--on-dark-mid); margin-top: .2rem; max-width: 56ch; }
.light .mitem span { color: var(--on-light-mid); }

/* the enquiry forms stack full-width fields */
form.stack { width: 100%; }
form.stack > .field { width: 100%; }
form.stack .row .field { flex: 1 1 7rem; min-width: 0; }
form.stack .field input, form.stack .field select { min-width: 0; width: 100%; }