/* ============================================================
   DELHI GARDEN — "Old Delhi, on Route 27"
   Design system
   ============================================================ */
:root{
  /* Brand: the wordmark on the current site sets "Delhi" in blue and
     "Garden" in yellow. Those two are the palette. No red, no green. */
  --blue:#15497F;        /* primary — "Delhi"        */
  --blue-d:#0E3358;      /* pressed / hover          */
  --navy:var(--blue);    /* footer uses the same blue as 'Delhi' */
  --yellow:#F0B429;      /* secondary — "Garden"     */
  --yellow-d:#CF9412;

  --khadi:#F4EDE1;       /* paper ground        */
  --chalk:#FBF7F0;       /* card surface        */
  --ink:#17130F;         /* text / dark ground  */
  --ink-2:#2A231C;
  --mute:#7A6A57;

  /* legacy aliases — the stylesheet was written against these names */
  --sindoor:var(--blue);
  --sindoor-d:var(--blue-d);
  --marigold:var(--yellow);
  --marigold-d:var(--yellow-d);
  --neem:var(--navy);

  --serif:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Archivo',ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
  --deva:'Yatra One','Noto Serif Devanagari',var(--serif);

  --pad:clamp(20px,5vw,84px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background-color:var(--khadi);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;
}
html{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---- type primitives ---- */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sindoor);
  display:flex;align-items:center;gap:.7em;margin:0 0 clamp(16px,2vw,26px);
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;flex:none}
.eyebrow.c{justify-content:center}
.eyebrow.c::after{content:"";width:26px;height:1.5px;background:currentColor;flex:none}

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;
  font-variation-settings:"opsz" 100;letter-spacing:-.018em;line-height:.98}
h2{font-size:clamp(34px,5.4vw,72px)}
h3{font-size:clamp(21px,2.1vw,29px);line-height:1.1}
p{margin:0 0 1.15em}
.lede{font-size:clamp(18px,1.55vw,22px);line-height:1.62;color:#4A3D31}
h2+.lede,h2+p{margin-top:clamp(18px,2vw,28px)}

/* ---- letterpress rule ---- */
.rule{height:1px;background:var(--ink);opacity:.16;border:0;margin:0}
.rule.thick{height:2px;opacity:.85}

/* ---- grain overlay ---- */
/* Grain: a tiled bitmap, not a full-viewport SVG filter with mix-blend-mode.
   The SVG version forced a full recomposite on every scroll frame, which made
   the ticker animation stutter. */
.grain{display:none}
/* inset:0 rather than 100vw/100vh — 100vw includes the scrollbar gutter, so it
   overflows the viewport horizontally and the page reads as too wide. */
/* Tiled on the body rather than a fixed, half-opaque, full-viewport overlay.
   The fixed version had to be re-composited on every scroll frame at 2x DPI,
   which was the main source of the scroll jank. */
body{background-image:url(noise.webp);background-size:160px 160px;background-repeat:repeat}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  padding:16px 28px;border-radius:999px;
  transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--fill{background:var(--sindoor);color:var(--khadi)}
.btn--fill:hover{background:var(--sindoor-d)}
.btn--gold{background:var(--marigold);color:var(--ink)}
.btn--gold:hover{background:var(--marigold-d)}
.btn--ghost{border:1.5px solid currentColor}
.btn--ghost:hover{background:var(--ink);color:var(--khadi);border-color:var(--ink)}
.btn--ghost-l{border:1.5px solid rgba(244,237,225,.45);color:var(--khadi)}
.btn--ghost-l:hover{background:var(--khadi);color:var(--ink);border-color:var(--khadi)}

/* ============================================================
   TICKER
   ------------------------------------------------------------
   The header spans the full width so its stuck background can
   bleed edge to edge, but its CONTENT has to line up with the
   hero and every .wrap section below it. Those are max-width
   boxes, so past 1440px they stop moving outward while flat
   padding keeps going: at 1700px the wordmark sat at 84px while
   the hero text sat at 214px. The gutter below resolves to the
   plain pad on narrow screens and to the container inset on wide
   ones, which puts all three on one line.
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;overflow:hidden}
.topbar.is-stuck{background:var(--khadi)}
.ticker{background:var(--blue);color:var(--khadi);padding:9px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  position:relative;z-index:2}
.topbar.is-stuck .ticker{display:none}
.ticker__in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 26px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.ticker__status{display:inline-flex;align-items:center;gap:8px}
.ticker__status::before{content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(244,237,225,.5);flex:none}
.ticker__status.is-open::before{background:#5FD08A;
  box-shadow:0 0 0 3px rgba(95,208,138,.25)}
.ticker__status[data-loading]{opacity:.5}
/* The announcement was marigold text on the blue bar: 4.92:1, the LEAST legible
   thing in a strip whose ordinary text runs at 7.88:1 — backwards for the one
   line that is meant to be noticed. A filled badge puts ink on marigold at
   9.91:1 and reads as a notice rather than as more micro-type. */
.ticker__note{background:var(--marigold);color:var(--ink);font-weight:700;
  padding:3px 10px;border-radius:2px;margin:-2px 0}
.ticker__note::before{content:"Announcement: "}
.ticker__link{margin-left:auto;opacity:.85;transition:opacity .2s,color .2s}
.ticker__link+.ticker__link{margin-left:0}
.ticker__link:hover{opacity:1;color:var(--yellow)}
@media(max-width:820px){
  .ticker__in{gap:6px 16px;font-size:9.5px;letter-spacing:.12em}
  .ticker__link{margin-left:0}
  .ticker__link:last-child{display:none}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  transition:background .45s var(--ease),box-shadow .45s,padding .45s var(--ease),color .3s;
  color:var(--khadi);
}
.nav.is-stuck{background:rgba(244,237,225,.94);backdrop-filter:blur(14px) saturate(1.3);
  color:var(--ink);padding:10px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));box-shadow:0 1px 0 rgba(23,19,15,.14)}
.brand{display:flex;flex-direction:column;line-height:1;flex:none}
.brand__name{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;font-variation-settings:"opsz" 24}
.brand__sub{font-size:8.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  opacity:.62;margin-top:5px}
.nav__links{display:flex;gap:clamp(18px,2.2vw,34px);align-items:center}
.nav__links a{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  position:relative;padding:6px 0;opacity:.88;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:currentColor;transition:width .4s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:14px;flex:none}
.nav .btn{padding:12px 22px;font-size:10.5px}
.nav__tel{font-size:11.5px;font-weight:700;letter-spacing:.1em}
.burger{display:none;width:38px;height:38px;align-items:center;justify-content:center}
.burger i{display:block;width:20px;height:1.8px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:1.8px;background:currentColor}
.burger i::before{top:-6px}.burger i::after{top:6px}

/* ============================================================
   HERO
   ============================================================ */
/* The header is position:fixed, so it takes no space in the flow. The hero has
   to reserve that space itself: without it, a hero whose content is taller than
   the viewport (any phone, or a laptop under ~850px tall) stops honouring
   justify-content:flex-end, starts at y=0, and draws the Devanagari and the
   address line straight through the wordmark. --topbar-h0 is the header's
   height in its *unstuck* state, so this padding stays put when the header
   shrinks on scroll. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;color:var(--khadi);overflow:hidden;isolation:isolate;
  padding-top:calc(var(--topbar-h0,108px) + 10px)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  animation:kb 26s ease-out forwards}
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}
/* the loop sits over the still, which stays as the fallback underneath.
   No ken-burns here — the footage already carries its own motion. */
.hero__vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
@media (prefers-reduced-motion: reduce){.hero__vid{display:none}}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(10,7,5,.94) 0%,rgba(10,7,5,.62) 34%,rgba(10,7,5,.26) 62%,rgba(10,7,5,.55) 100%),
    radial-gradient(120% 80% at 20% 90%,rgba(21,73,127,.34),transparent 60%)}
.hero__inner{padding:0 var(--pad) clamp(28px,3.4vw,52px);max-width:var(--maxw);
  margin:0 auto;width:100%}
.hero__deva{font-family:var(--deva);color:var(--marigold);
  font-size:clamp(26px,3.6vw,50px);line-height:1;margin-bottom:clamp(12px,1.4vw,20px);
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero .eyebrow{color:var(--marigold);opacity:.95}
.hero h1{font-size:clamp(46px,9.4vw,148px);line-height:.86;letter-spacing:-.032em;
  font-weight:600;text-wrap:balance;margin-bottom:clamp(18px,2vw,30px);
  text-shadow:0 4px 60px rgba(0,0,0,.4)}
.hero h1 em{font-style:normal;color:var(--marigold)}
.hero__lede{max-width:44ch;font-size:clamp(16px,1.35vw,20px);line-height:1.6;
  color:rgba(244,237,225,.82);margin-bottom:clamp(26px,3vw,38px)}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px}
.hero__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-top:clamp(34px,4.4vw,64px);padding-top:18px;
  border-top:1px solid rgba(244,237,225,.22)}
.hero__foot div{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,237,225,.72)}
.hero__foot b{color:var(--marigold);font-weight:700}
/* A 13" laptop gives the page about 760px of height. The hours/scroll/cuisine
   strip is the one hero element that is nice-to-have, so it is what gives way
   on a short viewport — that alone brings the hero back inside the fold. */
@media(max-height:880px){.hero__foot{display:none}}
.scrollcue{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(244,237,225,.6)}
.scrollcue i{display:block;width:1px;height:26px;background:linear-gradient(var(--marigold),transparent);
  animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ============================================================
   BLOCK-PRINT DIVIDER
   ============================================================ */
.blockprint{display:block;width:100%;height:26px;opacity:.5}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,8.5vw,140px) var(--pad)}
.wrap--tight{padding-top:clamp(48px,5vw,84px);padding-bottom:clamp(48px,5vw,84px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  flex-wrap:wrap;margin-bottom:clamp(34px,4vw,60px)}
.sec-head h2{max-width:16ch;text-wrap:balance}
.sec-head p{max-width:38ch;margin:0;color:var(--mute);font-size:15px}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{background:var(--khadi);text-align:center}
.manifesto .wrap{max-width:1040px}
.manifesto blockquote{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.5vw,50px);line-height:1.18;letter-spacing:-.02em;
  font-variation-settings:"opsz" 100;text-wrap:balance}
.manifesto blockquote b{font-weight:600;color:var(--sindoor)}
.manifesto__deva{font-family:var(--deva);color:var(--marigold);
  font-size:clamp(20px,2.4vw,34px);margin-bottom:20px;line-height:1}
.sig{margin-top:clamp(26px,3vw,40px);font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* ============================================================
   UTILITY CARDS
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px)}
.card{position:relative;display:block;overflow:hidden;background:var(--ink);isolation:isolate}
.card__img{aspect-ratio:3/4;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s;filter:brightness(.86)}
.card:hover .card__img img{transform:scale(1.07);filter:brightness(.72)}
.card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,7,5,.9),rgba(10,7,5,.15) 55%,transparent)}
.card__body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(20px,2vw,32px);
  color:var(--khadi);display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.card__body h3{font-weight:600}
.card__body small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--marigold);margin-bottom:9px}
.card__ar{flex:none;width:42px;height:42px;border:1.5px solid rgba(244,237,225,.5);
  border-radius:50%;display:grid;place-items:center;
  transition:background .35s,color .35s,border-color .35s,transform .5s var(--ease)}
.card:hover .card__ar{background:var(--marigold);border-color:var(--marigold);
  color:var(--ink);transform:rotate(-45deg)}

/* ============================================================
   STORY
   ============================================================ */
.story{background:var(--chalk)}
.story__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(32px,5vw,90px);align-items:start}
.story__fig{margin:0}
.story__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story__fig figcaption{margin-top:12px;font-size:11px;line-height:1.5;color:var(--mute);
  letter-spacing:.03em}
.story__fig figcaption b{color:var(--ink);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:10px}
.pullquote{margin:clamp(28px,3vw,42px) 0;padding:0 0 0 clamp(20px,2.2vw,32px);
  border-left:2px solid var(--sindoor);font-family:var(--serif);font-weight:500;
  font-size:clamp(20px,2.1vw,30px);line-height:1.28;letter-spacing:-.015em;
  font-variation-settings:"opsz" 60;color:var(--ink)}
.attrib{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);display:block;margin-top:16px}
.factrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:clamp(30px,3.4vw,46px);padding-top:26px;border-top:1px solid rgba(23,19,15,.14)}
.fact b{display:block;white-space:nowrap;font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);
  font-weight:600;line-height:1;color:var(--sindoor);font-variation-settings:"opsz" 72}
.fact>span{display:block;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);line-height:1.4}

/* ============================================================
   DISH RAIL
   ============================================================ */
.rail{background:var(--blue);color:var(--khadi);overflow:hidden}
.rail .eyebrow{color:var(--marigold)}
.rail .sec-head p:not(.eyebrow){color:rgba(244,237,225,.7)}
.rail__scroll{display:flex;gap:clamp(14px,1.5vw,24px);overflow-x:auto;
  padding:4px var(--pad) 30px;
  -ms-overflow-style:none;scrollbar-width:none;cursor:grab}
.rail__scroll::-webkit-scrollbar{display:none}
.rail__scroll.is-drag{cursor:grabbing}
.dish{flex:none;width:clamp(230px,25vw,318px)}
.dish__img{overflow:hidden;aspect-ratio:1;background:var(--ink-2)}
.dish__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.dish:hover .dish__img img{transform:scale(1.06)}
.dish__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:16px;padding-bottom:9px;border-bottom:1px solid rgba(244,237,225,.22)}
.dish__row h3{font-size:clamp(18px,1.5vw,22px);font-weight:600;
  font-variation-settings:"opsz" 36}
.dish__price{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--marigold);flex:none}
.dish p{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:rgba(244,237,225,.68)}
.dish__tag{display:inline-block;margin-top:11px;font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,225,.78);
  border:1px solid rgba(244,237,225,.3);padding:4px 9px;border-radius:99px}
.railhint{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,225,.6)}

/* ============================================================
   MENU ON SINDOOR
   ============================================================ */
.menu{background:var(--sindoor);color:var(--khadi)}
.menu .eyebrow{color:var(--marigold)}
.menu .sec-head p{color:rgba(244,237,225,.72)}
.menu__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(32px,3.6vw,52px);
  padding-bottom:22px;border-bottom:1px solid rgba(244,237,225,.24)}
.tab{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:11px 20px;border-radius:99px;border:1.5px solid rgba(244,237,225,.35);
  color:rgba(244,237,225,.8);transition:all .3s var(--ease)}
.tab:hover{border-color:var(--khadi);color:var(--khadi)}
.tab.is-on{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}
.menu__panel{display:none;animation:fade .5s var(--ease)}
.menu__panel.is-on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.menu__list{columns:2;column-gap:clamp(40px,5vw,88px)}
.mi{break-inside:avoid;padding:13px 0;border-bottom:1px dotted rgba(244,237,225,.3)}
.mi__top{display:flex;align-items:baseline;gap:10px}
.mi__name{font-family:var(--serif);font-size:clamp(17px,1.35vw,20px);font-weight:500;
  font-variation-settings:"opsz" 36;letter-spacing:-.01em}
.mi__dots{flex:1;border-bottom:1px dotted rgba(244,237,225,.42);transform:translateY(-4px)}
.mi__price{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--marigold);flex:none}
.mi p{margin:5px 0 0;font-size:13px;line-height:1.5;color:rgba(244,237,225,.68);max-width:46ch}
.mi__v{display:inline-block;width:9px;height:9px;border:1.5px solid #86D08A;
  position:relative;margin-left:7px;transform:translateY(-1px);flex:none}
.mi__v::after{content:"";position:absolute;inset:1.5px;background:#86D08A;border-radius:50%}
.menu__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px;margin-top:clamp(34px,4vw,56px);padding-top:26px;
  border-top:1px solid rgba(244,237,225,.24)}
.menu__foot small{font-size:11.5px;line-height:1.6;color:rgba(244,237,225,.66);max-width:52ch;
  letter-spacing:.02em}

/* ============================================================
   STATEMENT BAND
   ============================================================ */
.band{position:relative;min-height:78svh;display:grid;place-items:center;
  color:var(--khadi);text-align:center;overflow:hidden;isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(10,7,5,.72),rgba(10,7,5,.82))}
.band__in{padding:clamp(60px,8vw,120px) var(--pad);max-width:1080px}
.band .eyebrow{color:var(--marigold)}
.band blockquote{margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,4.1vw,60px);line-height:1.13;letter-spacing:-.022em;
  font-variation-settings:"opsz" 100;text-wrap:balance}

/* ============================================================
   CATERING (marigold)
   ============================================================ */
.cater{background:var(--marigold);color:var(--ink)}
.cater .eyebrow{color:var(--sindoor-d)}
.cater__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);
  align-items:center}
.cater p{color:#4A3418}
.cater__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(23,19,15,.22)}
.cstat{background:var(--marigold);padding:clamp(22px,2.6vw,36px)}
.cstat b{display:block;white-space:nowrap;font-family:var(--serif);font-size:clamp(30px,3.6vw,52px);
  font-weight:600;line-height:1;font-variation-settings:"opsz" 72}
.cstat>span{display:block;margin-top:10px;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#5C4520;line-height:1.45}

/* ============================================================
   REPUTATION
   ============================================================ */
.rep{background:var(--chalk);text-align:center}
.rep__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(23,19,15,.14);border:1px solid rgba(23,19,15,.14)}
.rep__cell{background:var(--chalk);padding:clamp(28px,3.4vw,48px) 20px}
.rep__cell b{display:block;white-space:nowrap;font-family:var(--serif);font-size:clamp(30px,3.4vw,48px);
  font-weight:600;line-height:1;color:var(--sindoor);font-variation-settings:"opsz" 72}
.rep__cell>span{display:block;margin-top:11px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.rep__note{margin:clamp(30px,3.4vw,46px) auto 0;max-width:60ch;font-family:var(--serif);
  font-size:clamp(18px,1.8vw,26px);line-height:1.4;font-weight:400;
  font-variation-settings:"opsz" 48;text-wrap:balance}

/* ============================================================
   VISIT
   ============================================================ */
.visit{background:var(--ink);color:var(--khadi)}
.visit .eyebrow{color:var(--marigold)}
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,86px)}
.addr{font-family:var(--serif);font-size:clamp(24px,2.6vw,38px);line-height:1.16;
  font-weight:500;font-variation-settings:"opsz" 60;letter-spacing:-.018em;margin-bottom:22px}
.visit__meta{display:flex;flex-direction:column;gap:9px;margin-bottom:30px}
.visit__meta a{font-size:14px;letter-spacing:.03em;color:rgba(244,237,225,.8);
  display:inline-flex;align-items:center;gap:10px;width:fit-content;transition:color .25s}
.visit__meta a:hover{color:var(--marigold)}
.hours{width:100%;border-collapse:collapse}
.hours tr{border-bottom:1px solid rgba(244,237,225,.16)}
.hours td{padding:14px 0;font-size:13.5px;letter-spacing:.02em;color:rgba(244,237,225,.78);
  vertical-align:baseline}
.hours td:first-child{font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;width:38%;color:rgba(244,237,225,.6)}
.hours tr.is-today td{color:var(--marigold)}
.hours tr.is-today td:first-child{color:var(--marigold)}
.hours tr.is-shut td{color:rgba(244,237,225,.38)}
.today-pill{display:inline-block;margin-left:9px;font-size:8.5px;font-weight:800;
  letter-spacing:.16em;background:var(--marigold);color:var(--ink);padding:3px 7px;border-radius:99px;
  vertical-align:middle}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--khadi);
  content-visibility:auto;contain-intrinsic-size:auto 480px}
.gal figure{margin:0;overflow:hidden;aspect-ratio:1;background:var(--ink-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .5s;
  filter:saturate(.94)}
.gal figure:hover img{transform:scale(1.08);filter:saturate(1.1)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--neem);color:rgba(244,237,225,.8)}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(26px,3.4vw,56px);
  padding-bottom:clamp(40px,4.4vw,64px);border-bottom:1px solid rgba(244,237,225,.18)}
.foot__deva{font-family:var(--deva);color:var(--marigold);font-size:clamp(28px,3.2vw,44px);
  line-height:1;margin-bottom:16px}
.foot__brand p{font-size:13.5px;line-height:1.65;color:rgba(244,237,225,.62);max-width:34ch}
.foot h4{margin:0 0 18px;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--marigold);font-family:var(--sans)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot ul a{font-size:13.5px;color:rgba(244,237,225,.72);transition:color .25s}
.foot ul a:hover{color:var(--khadi)}
.news{display:flex;border-bottom:1.5px solid rgba(244,237,225,.4);padding-bottom:9px;gap:10px}
.news input{flex:1;min-width:0;background:none;border:0;color:var(--khadi);font:inherit;
  font-size:14px;outline:none}
.news input::placeholder{color:rgba(244,237,225,.42)}
.news button{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--marigold);flex:none}
.foot__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  padding-top:26px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,237,225,.45)}
.foot__bot a:hover{color:var(--khadi)}

/* ============================================================
   MOBILE ORDER BAR
   ============================================================ */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:var(--ink);border-top:1px solid rgba(244,237,225,.16);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;
  transform:translateY(0);opacity:1;will-change:transform}
.mobar a{flex:1;justify-content:center;padding:15px 10px;font-size:11px}
/* Slide/fade rather than pop. Only armed once site.js has settled the
   opening state, so the bar never animates in on first paint. */
.mobar.is-anim{transition:transform .42s var(--ease),opacity .26s var(--ease),
  visibility 0s linear 0s}
/* Parked off-screen while the home hero — which carries its own
   "See the menu" — is still filling the viewport. visibility keeps the two
   buttons out of the tab order while they are parked. */
.mobar.is-parked{transform:translateY(115%);opacity:0;visibility:hidden;
  pointer-events:none}
.mobar.is-anim.is-parked{transition:transform .42s var(--ease),
  opacity .26s var(--ease),visibility 0s linear .42s}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1040px){
  .story__grid,.cater__grid,.visit__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .cards .card:last-child{grid-column:1/-1}
  .cards .card:last-child .card__img{aspect-ratio:16/9}
  .gal{grid-template-columns:repeat(3,1fr)}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav__links{display:none}
  .nav__tel{display:none}
  .burger{display:flex}
  .menu__list{columns:1}
  .mobar{display:flex}
  /* the space the bar occupies is reserved from its measured height —
     see --mobar-h at the end of this file */
  .hero__foot{display:none}
  .rep__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .cards .card:last-child .card__img{aspect-ratio:3/4}
  .gal{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:1fr}
  .factrow{grid-template-columns:1fr;gap:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
/* ============================================================
   LISTED & REVIEWED
   (.rev itself is styled in the REVIEWS block further down)
   ============================================================ */
.rev__quote{max-width:20ch;font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,3.2vw,46px);line-height:1.16;letter-spacing:-.022em;
  font-variation-settings:"opsz" 100;text-wrap:balance;margin:0}
.rev__cite{display:block;margin-top:20px;font-family:var(--sans);font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.rev__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);
  align-items:start}
.plat{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(23,19,15,.15);
  border:1px solid rgba(23,19,15,.15)}
.plat a{background:var(--chalk);padding:clamp(20px,2.2vw,28px);display:flex;
  flex-direction:column;gap:6px;transition:background .35s var(--ease)}
.plat a:hover{background:var(--khadi)}
.plat b{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);font-weight:600;
  line-height:1;color:var(--sindoor);font-variation-settings:"opsz" 72}
.plat u{text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:7px}
.plat u::after{content:"↗";font-weight:400;opacity:.4;transition:transform .35s var(--ease)}
.plat a:hover u::after{transform:translate(2px,-2px);opacity:1}
.plat span{font-size:11.5px;line-height:1.5;color:var(--mute)}
.plat__more{grid-column:1/-1;background:var(--chalk);padding:18px clamp(20px,2.2vw,28px);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.plat__more em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.plat__more a{background:none;padding:0;display:inline;font-size:12.5px;
  border-bottom:1px solid rgba(23,19,15,.25)}
.plat__more a:hover{background:none;border-color:var(--sindoor);color:var(--sindoor)}

/* ============================================================
   MENU PREVIEW (home)
   ============================================================ */
.mprev{background:var(--sindoor);color:var(--khadi)}
.mprev .eyebrow{color:var(--marigold)}
.mprev .sec-head p{color:rgba(244,237,225,.72)}
.mprev__cols{columns:3;column-gap:clamp(30px,4vw,64px);margin-bottom:clamp(32px,3.6vw,52px)}
.mprev__grp{break-inside:avoid;margin:0 0 26px}
.mprev__grp h3{font-size:15px;font-weight:700;font-family:var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--marigold);margin:0 0 12px;padding-bottom:9px;
  border-bottom:1px solid rgba(244,237,225,.28)}
.mprev__grp ul{list-style:none;margin:0;padding:0}
.mprev__grp li{display:flex;align-items:baseline;gap:9px;padding:6px 0;font-size:14.5px}
.mprev__grp li i{flex:1;border-bottom:1px dotted rgba(244,237,225,.32);transform:translateY(-4px)}
.mprev__grp li b{font-weight:600;color:var(--marigold);font-size:12.5px;flex:none}
.mprev__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding-top:26px;
  border-top:1px solid rgba(244,237,225,.24)}
.mprev__cta small{font-size:11.5px;color:rgba(244,237,225,.66);letter-spacing:.02em}

/* ============================================================
   ORDER
   ============================================================ */
.order{background:var(--khadi)}
.ordergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(10px,1.2vw,16px)}
.ocard{display:flex;flex-direction:column;gap:7px;padding:clamp(22px,2.4vw,32px);
  background:var(--chalk);border:1px solid rgba(23,19,15,.16);
  transition:transform .4s var(--ease),border-color .3s,background .3s}
.ocard:hover{transform:translateY(-4px);border-color:var(--ink)}
.ocard__k{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sindoor)}
.ocard__v{font-family:var(--serif);font-size:clamp(19px,1.8vw,25px);font-weight:600;
  line-height:1.1;font-variation-settings:"opsz" 36;display:flex;align-items:center;gap:8px}
.ocard__v::after{content:"→";font-family:var(--sans);font-size:.7em;opacity:.35;
  transition:transform .4s var(--ease)}
.ocard:hover .ocard__v::after{transform:translateX(4px);opacity:1}
.ocard__n{font-size:12.5px;line-height:1.5;color:var(--mute);margin-top:2px}

/* ============================================================
   CATERING (short)
   ============================================================ */
.cater__row{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);
  align-items:end}
.cater__row p{margin:0;max-width:52ch}
.cater__row p + p{margin-top:.85em}

/* ============================================================
   MENU PAGE
   ============================================================ */
.menupage{background:var(--khadi)}
.mhero{background:var(--ink);color:var(--khadi);padding:calc(clamp(70px,9vw,130px) + 84px)
  var(--pad) clamp(48px,5.5vw,84px)}
.mhero__in{max-width:var(--maxw);margin:0 auto}
.mhero__deva{font-family:var(--deva);color:var(--marigold);
  font-size:clamp(24px,3vw,42px);line-height:1;margin-bottom:16px}
.mhero .eyebrow{color:var(--marigold)}
.mhero h1{font-size:clamp(48px,8vw,116px);line-height:.9;letter-spacing:-.03em;
  margin-bottom:clamp(18px,2vw,26px)}
.mhero__lede{max-width:52ch;font-size:clamp(16px,1.3vw,19px);line-height:1.6;
  color:rgba(244,237,225,.75)}
.mhero__meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(26px,3vw,40px);
  padding-top:20px;border-top:1px solid rgba(244,237,225,.2)}
.mhero__meta span{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(244,237,225,.65)}

.vmark{display:inline-block;width:10px;height:10px;border:1.5px solid #4C9A52;
  position:relative;flex:none;vertical-align:middle;margin-left:8px}
.vmark::after{content:"";position:absolute;inset:1.5px;background:#4C9A52;border-radius:50%}
.mhero__meta .vmark{border-color:#86D08A;margin:0}
.mhero__meta .vmark::after{background:#86D08A}

.mnav{position:sticky;top:var(--topbar-h,52px);z-index:80;background:rgba(244,237,225,.95);
  backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(23,19,15,.16)}
/* The rail scrolls edge to edge across the full viewport. It used to be
   capped at --maxw and centred, so on a wide screen pills slid into the
   centring margin and disappeared behind the bar's own background. The first
   pill is aligned to the page's content column with a spacer instead, and a
   matching spacer trails — a flex scroll container drops its padding-right
   once scrolled to the end, so real padding cannot do that job. */
.mnav__in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:12px 0;margin:0;max-width:none;
  scroll-padding-inline:var(--rail-inset,var(--pad))}
.mnav__in::before,.mnav__in::after{content:"";flex:none;
  width:var(--rail-inset,var(--pad))}
.mnav__in::-webkit-scrollbar{display:none}
.mpill{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;border-radius:99px;border:1.5px solid rgba(23,19,15,.22);
  color:var(--ink);opacity:.72;transition:all .3s var(--ease);white-space:nowrap}
.mpill:hover{opacity:1;border-color:var(--ink)}
.mpill.is-on{background:var(--sindoor);border-color:var(--sindoor);color:var(--khadi);opacity:1}

.mwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.msec{
  padding:clamp(48px,6vw,86px) 0;border-bottom:1px solid rgba(23,19,15,.14);
  scroll-margin-top:calc(var(--topbar-h,52px) + var(--mnav-h,58px) + 16px)}
.msec:first-child{padding-top:clamp(34px,4vw,56px)}
.msec__head{margin-bottom:clamp(28px,3.2vw,44px)}
.msec__deva{font-family:var(--deva);color:var(--marigold);font-size:clamp(19px,2.1vw,30px);
  line-height:1;margin-bottom:10px}
.msec__head h2{font-size:clamp(30px,4.2vw,58px)}
.msec__note{margin:14px 0 0;max-width:56ch;font-size:14.5px;color:var(--mute);line-height:1.6}

.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(36px,4.5vw,80px)}
.mrow{display:flex;gap:clamp(14px,1.4vw,20px);padding:16px 0;align-items:flex-start;
  border-bottom:1px solid rgba(23,19,15,.12)}
.mrow__img{flex:none;width:clamp(78px,7vw,104px);aspect-ratio:1;overflow:hidden;
  background:var(--ink-2);border-radius:3px}
.mrow__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mrow:hover .mrow__img img{transform:scale(1.07)}
.mrow__txt{flex:1;min-width:0}
.mrow__top{display:flex;align-items:baseline;gap:10px}
.mrow__top h3{font-size:clamp(17px,1.4vw,21px);font-weight:600;letter-spacing:-.012em;
  font-variation-settings:"opsz" 36;display:flex;align-items:center}
.mrow__dots{flex:1;border-bottom:1px dotted rgba(23,19,15,.35);transform:translateY(-4px);
  min-width:14px}
.mrow__price{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.05em;
  color:var(--sindoor);flex:none}
.mrow p{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--mute)}

.morder h2{margin-bottom:clamp(30px,3.4vw,46px)}
.morder .ordergrid{text-align:left}
.morder__note{margin:clamp(24px,2.6vw,36px) 0 0;font-size:13.5px;color:var(--mute)}
.nav__links a.is-here{opacity:1}
.nav__links a.is-here::after{width:100%}

@media(max-width:1040px){
  .rev__grid{grid-template-columns:1fr}
  .mprev__cols{columns:2}
  .ordergrid{grid-template-columns:1fr 1fr}
  .mgrid{grid-template-columns:1fr}
  .cater__row{grid-template-columns:1fr;align-items:start}
}
@media(max-width:820px){
  .mprev__cols{columns:1}
  .ordergrid{grid-template-columns:1fr}
  .plat{grid-template-columns:1fr}
  .mhero{padding-top:calc(clamp(70px,9vw,130px) + 56px)}
}

/* menu hero — dish collage behind the title */
.mhero{position:relative;overflow:hidden;isolation:isolate}
.mhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.02)}
.mhero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(12,9,7,.95) 0%,rgba(12,9,7,.88) 46%,rgba(12,9,7,.8) 100%),
    radial-gradient(90% 120% at 8% 50%,rgba(21,73,127,.3),transparent 62%)}
.mhero__in{position:relative}

/* ---- embedded map ---- */
.visitmap{margin:clamp(34px,4vw,58px) 0 0;border:1px solid rgba(244,237,225,.22);
  background:var(--ink-2)}
.visitmap iframe{display:block;width:100%;height:clamp(280px,34vw,420px);border:0;
  filter:grayscale(.4) contrast(1.04) brightness(.96)}
.visitmap figcaption{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 24px;padding:16px clamp(16px,2vw,24px);
  border-top:1px solid rgba(244,237,225,.22);font-size:13px;
  color:rgba(244,237,225,.72);letter-spacing:.01em}
.visitmap figcaption b{color:var(--khadi);font-weight:600}
.visitmap figcaption a{display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--marigold);transition:gap .3s var(--ease)}
.visitmap figcaption a:hover{gap:12px}

/* ============================================================
   STORY PAGE
   ============================================================ */
.shero{position:relative;overflow:hidden;isolation:isolate;color:var(--khadi);
  padding:calc(clamp(90px,11vw,160px) + 84px) var(--pad) clamp(70px,8vw,120px)}
.shero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;z-index:-2}
.shero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(10,7,5,.95) 0%,rgba(10,7,5,.84) 48%,rgba(10,7,5,.6) 100%),
    radial-gradient(80% 110% at 6% 60%,rgba(21,73,127,.32),transparent 62%)}
.shero__in{position:relative;max-width:var(--maxw);margin:0 auto}
.shero__deva{font-family:var(--deva);color:var(--marigold);
  font-size:clamp(24px,3vw,44px);line-height:1;margin-bottom:16px}
.shero .eyebrow{color:var(--marigold)}
.shero h1{font-size:clamp(44px,8vw,124px);line-height:.88;letter-spacing:-.032em;
  margin-bottom:clamp(20px,2.2vw,30px)}
.shero h1 em{font-style:normal;color:var(--marigold)}
.shero__lede{max-width:46ch;font-size:clamp(16px,1.35vw,20px);line-height:1.6;
  color:rgba(244,237,225,.8)}

.swords{background:var(--chalk)}
.swords__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,86px);align-items:start}
.sdrop{font-family:var(--serif);font-size:clamp(21px,2.3vw,32px);line-height:1.32;
  font-weight:400;letter-spacing:-.015em;font-variation-settings:"opsz" 60;color:var(--ink)}
.sdrop::first-letter{float:left;font-size:3.1em;line-height:.82;font-weight:600;
  margin:.06em .1em 0 0;color:var(--sindoor)}
.ssource{margin-top:22px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.sfig{margin:0}
.sfig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sfig figcaption{margin-top:12px;font-size:11px;color:var(--mute);letter-spacing:.03em}
.sfig figcaption b{color:var(--ink);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:10px}
.sbigquote{position:relative;margin:clamp(48px,6vw,90px) auto 0;max-width:22ch;
  text-align:center;font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,3.6vw,52px);line-height:1.16;letter-spacing:-.022em;
  font-variation-settings:"opsz" 100;text-wrap:balance}
.sbigquote__mark{display:block;font-size:2.2em;line-height:.5;color:var(--marigold);
  margin-bottom:.22em}
.sbigquote cite{display:block;margin-top:26px;font-family:var(--sans);font-style:normal;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.stoday{background:var(--khadi)}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(23,19,15,.15);border:1px solid rgba(23,19,15,.15)}
.scard{background:var(--khadi);padding:clamp(22px,2.4vw,32px)}
.scard b{display:block;font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);
  font-weight:600;line-height:1.15;font-variation-settings:"opsz" 36;margin-bottom:12px}
.scard p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mute)}

.svideo{background:var(--ink);color:var(--khadi)}
.svideo .eyebrow{color:var(--marigold)}
.svideo .sec-head p{color:rgba(244,237,225,.7)}
.svideo__frame{position:relative;aspect-ratio:16/9;background:var(--ink-2);
  border:1px solid rgba(244,237,225,.2);overflow:hidden}
.svideo__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.svideo__cap{margin:18px 0 0;font-size:13px;color:rgba(244,237,225,.6)}
.svideo__cap a{color:var(--marigold);border-bottom:1px solid rgba(240,180,41,.4)}
.svideo__cap a:hover{border-color:var(--marigold)}

.sment{background:var(--chalk)}
.mentgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.ment{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,28px);
  background:var(--khadi);border:1px solid rgba(23,19,15,.16);
  transition:transform .4s var(--ease),border-color .3s}
.ment:hover{transform:translateY(-4px);border-color:var(--ink)}
.ment__k{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sindoor);display:flex;align-items:center;gap:7px}
.ment__k::after{content:"↗";font-weight:400;opacity:.4}
.ment__t{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:600;
  line-height:1.18;font-variation-settings:"opsz" 36}
.ment__n{font-size:12.5px;line-height:1.5;color:var(--mute)}

.scta{background:var(--neem);color:var(--khadi)}
.scta h2{color:var(--khadi)}
.scta__row{display:grid;grid-template-columns:1fr auto;gap:clamp(26px,4vw,60px);
  align-items:end}

@media(max-width:1040px){
  .swords__grid{grid-template-columns:1fr}
  .scards,.mentgrid{grid-template-columns:1fr 1fr}
  .scta__row{grid-template-columns:1fr;align-items:start}
}
@media(max-width:820px){
  .scards,.mentgrid{grid-template-columns:1fr}
  .shero{padding-top:calc(clamp(90px,11vw,160px) + 56px)}
}

/* ============================================================
   PRELOADER
   ============================================================ */
.pre{position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
.pre.is-done{opacity:0;visibility:hidden}
.pre__in{text-align:center;padding:24px}
.pre__deva{font-family:var(--deva);color:var(--marigold);
  font-size:clamp(30px,5vw,60px);line-height:1;
  opacity:0;animation:preIn .9s var(--ease) .1s forwards}
.pre__name{margin-top:14px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(244,237,225,.6);
  opacity:0;animation:preIn .9s var(--ease) .3s forwards}
.pre__bar{margin:26px auto 0;width:min(220px,54vw);height:2px;
  background:rgba(244,237,225,.18);overflow:hidden}
.pre__bar i{display:block;height:100%;width:40%;background:var(--marigold);
  animation:preBar 1.15s var(--ease) infinite}
@keyframes preIn{to{opacity:1;transform:none}}
@keyframes preBar{0%{transform:translateX(-105%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){
  .pre__deva,.pre__name{opacity:1;animation:none}
  .pre__bar i{animation:none;width:100%}
}

/* ============================================================
   HERO RATING
   ============================================================ */
.hero__rating{display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(20px,2.4vw,30px);font-size:12.5px;letter-spacing:.04em;
  color:rgba(244,237,225,.78);transition:color .25s}
.hero__rating:hover{color:var(--khadi)}
/* the announcement, repeated in the hero as a readable sentence. Marigold on
   the hero scrim is 9.92:1, and the rule to its left ties it to the eyebrow
   above without shouting a second time. */
/* Same treatment as the strip at the top, so the two read as one notice
   rather than two different things that happen to say the same words. Sized
   to its content, not the column, so a short message stays a badge. */
.hero__note{display:block;width:-moz-fit-content;width:fit-content;max-width:46ch;
  margin:clamp(16px,1.8vw,22px) 0 0;padding:7px 13px;border-radius:2px;
  background:var(--marigold);color:var(--ink);
  font-size:clamp(12.5px,1vw,14px);font-weight:700;line-height:1.45;
  letter-spacing:.01em;text-shadow:none}
.hero__note::before{content:"Announcement: "}
.hero__rating b{font-weight:700;color:var(--khadi)}
/* partial-fill stars: 4 solid + the 5th 80% filled = 96% of the row */
.stars{position:relative;display:inline-block;font-size:13px;letter-spacing:.12em;
  color:rgba(244,237,225,.28);white-space:nowrap}
.stars i{position:absolute;left:0;top:0;width:96%;overflow:hidden;white-space:nowrap;
  color:var(--marigold);font-style:normal;letter-spacing:.12em}

/* ============================================================
   REVIEWS — stacked quote cards on the brand blue
   The section keeps the blue band on the home page; each review sits on it
   as a slightly deeper blue card with a hairline rule.
   ============================================================ */
.rev{background:var(--blue);color:var(--khadi);text-align:center}
.rev .eyebrow{color:var(--marigold)}

/* screen-reader-only helper (the star rows are decorative) */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the three customer quotes, stacked */
.revq__pair{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,18px);align-items:stretch;
  margin:clamp(24px,3vw,40px) auto 0;text-align:left}
.revq__pair blockquote{margin:0;display:flex;flex-direction:column;
  padding:clamp(24px,2.4vw,32px) clamp(22px,2.2vw,30px);
  background:var(--blue-d);
  border:1px solid color-mix(in srgb, var(--khadi) 14%, transparent);
  border-radius:12px;
  transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.revq__pair blockquote:hover{
  border-color:color-mix(in srgb, var(--marigold) 34%, transparent)}
.revq__stars{display:block;color:var(--marigold);
  font-size:clamp(14px,1.15vw,16px);letter-spacing:.24em;line-height:1}
.revq__text{margin:clamp(16px,1.7vw,22px) 0 0;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.32vw,21px);line-height:1.45;letter-spacing:-.006em;
  font-variation-settings:"opsz" 60;
  color:var(--khadi);text-wrap:pretty}
.revq__text::before{content:"\201C"}
.revq__text::after{content:"\201D"}
/* margin-top:auto pins the credit to the bottom of the card, but on the
   longest quote the text reaches it and the gap collapses to nothing —
   padding keeps a floor under it regardless of how full the card is. */
.revq__pair blockquote cite{margin-top:auto;padding-top:clamp(20px,2.2vw,30px)}
.revq__pair cite{display:block;margin-top:clamp(16px,1.8vw,22px);
  font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb, var(--marigold) 68%, var(--khadi))}
.revq__pair cite::before{content:"\2014\00a0"}
.revq__pair cite a{color:inherit;text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid color-mix(in srgb, var(--marigold) 34%, transparent);
  transition:color .25s,border-color .25s}
.revq__pair cite a:hover{color:var(--marigold);border-color:var(--marigold)}

/* ratings strip — sits on the same blue ground as the cards */
.ratestrip{display:flex;flex-wrap:wrap;justify-content:center;
  gap:0;margin:clamp(40px,4.4vw,64px) auto 0;max-width:780px;
  border-top:1px solid color-mix(in srgb, var(--khadi) 18%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--khadi) 18%, transparent)}
.ratestrip a{flex:1 1 150px;padding:20px 14px;display:flex;flex-direction:column;
  align-items:center;gap:4px;transition:background-color .3s var(--ease)}
.ratestrip a+a{border-left:1px solid color-mix(in srgb, var(--khadi) 14%, transparent)}
.ratestrip a:hover{background:color-mix(in srgb, var(--khadi) 7%, transparent)}
.ratestrip em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb, var(--khadi) 66%, transparent)}
.ratestrip b{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:600;
  line-height:1;color:var(--marigold);font-variation-settings:"opsz" 60}
.ratestrip span{font-size:11px;color:color-mix(in srgb, var(--khadi) 66%, transparent)}
@media(max-width:900px){
  /* below this the three columns are too narrow for the serif quote */
  .revq__pair{grid-template-columns:1fr;max-width:620px}
  .revq__text{font-size:clamp(18px,2.4vw,22px)}
}
@media(max-width:560px){
  .revq__pair{gap:8px}
  .revq__pair cite{font-size:10px;letter-spacing:.13em}
}

/* ============================================================
   BAND SUB
   ============================================================ */
.band__sub{margin:22px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--marigold)}

/* ============================================================
   MENU PREVIEW — real rows with photos
   ============================================================ */
.mprev__cols{columns:auto;column-gap:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,54px)}
.mprev__grp{margin:0}
.prow{display:flex;align-items:center;gap:13px;padding:11px 0;
  border-bottom:1px solid rgba(244,237,225,.18);transition:padding-left .35s var(--ease)}
.prow:hover{padding-left:6px}
.prow__img{flex:none;width:52px;height:52px;overflow:hidden;border-radius:3px;
  background:rgba(0,0,0,.2)}
.prow__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prow:hover .prow__img img{transform:scale(1.09)}
.prow__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.prow__t b{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.15;
  font-variation-settings:"opsz" 36;display:flex;align-items:center}
.prow__t em{font-style:normal;font-size:12px;line-height:1.4;
  color:rgba(244,237,225,.62);overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:1;-webkit-box-orient:vertical}
.prow__p{flex:none;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--marigold)}
.prow .vmark{border-color:#8FD694;width:9px;height:9px;margin-left:7px}
.prow .vmark::after{background:#8FD694}

/* ============================================================
   ORDER — dark ground, icon badges
   ============================================================ */
.order{background:var(--ink);color:var(--khadi)}
.order .eyebrow{color:var(--marigold)}
.order .sec-head p{color:rgba(244,237,225,.72)}
.order>.wrap>p{color:rgba(244,237,225,.55)!important}
.ocard{background:rgba(244,237,225,.05);border:1px solid rgba(244,237,225,.18);
  gap:9px;color:var(--khadi)}
.ocard:hover{background:rgba(244,237,225,.09);border-color:rgba(244,237,225,.5)}
.ocard__ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:6px;background:rgba(244,237,225,.1);color:var(--marigold);
  transition:background .35s,color .35s,transform .45s var(--ease)}
.ocard__ic svg{width:21px;height:21px}
.ocard:hover .ocard__ic{transform:translateY(-2px)}
.ocard__k{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--marigold)}
.ocard__v{font-family:var(--serif);font-size:clamp(18px,1.7vw,23px);font-weight:600;
  line-height:1.14;color:var(--khadi);word-break:break-word}
.ocard__n{font-size:12.5px;line-height:1.55;color:rgba(244,237,225,.62)}
.ocard--call .ocard__ic{background:rgba(240,180,41,.16);color:var(--marigold)}
.ocard--mail .ocard__ic{background:rgba(244,237,225,.12);color:var(--khadi)}
.ocard__v::after{content:none}

/* ============================================================
   SOCIAL BUTTONS
   ============================================================ */
.social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border:1px solid rgba(244,237,225,.28);border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,237,225,.85);transition:all .3s var(--ease)}
.social a svg{width:15px;height:15px;flex:none}
.social a:hover{background:var(--khadi);color:var(--ink);border-color:var(--khadi);
  transform:translateY(-2px)}

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.burger{position:relative;z-index:3}
.burger i{transition:transform .3s var(--ease),background .2s}
.burger i::before,.burger i::after{transition:transform .35s var(--ease),top .3s}
.burger.is-open i{background:transparent}
.burger.is-open i::before{top:0;transform:rotate(45deg)}
.burger.is-open i::after{top:0;transform:rotate(-45deg)}
.navdrawer{position:fixed;inset:0;z-index:95;background:var(--ink);
  padding:100px var(--pad) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.navdrawer.is-open{opacity:1;visibility:visible;transform:none}
.navdrawer nav{display:flex;flex-direction:column;
  border-top:1px solid rgba(244,237,225,.16)}
.navdrawer nav a{padding:20px 0;border-bottom:1px solid rgba(244,237,225,.16);
  font-family:var(--serif);font-size:30px;font-weight:600;color:var(--khadi);
  display:flex;align-items:center;justify-content:space-between}
.navdrawer nav a::after{content:"→";font-family:var(--sans);font-size:16px;
  color:var(--marigold)}
.navdrawer__cta{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.navdrawer__cta .btn{justify-content:center}
.navdrawer__meta{margin-top:30px;font-size:12.5px;line-height:1.7;
  color:rgba(244,237,225,.6)}
.navdrawer__meta b{color:var(--marigold);font-weight:700}
body.is-locked{overflow:hidden}

@media(max-width:1040px){
  .mprev__cols{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .mprev__cols{grid-template-columns:1fr}
  .ratestrip a{flex:1 1 45%}
  .ratestrip a+a{border-left:0}
  .ratestrip a:nth-child(odd):not(:last-child){
    border-right:1px solid color-mix(in srgb, var(--khadi) 14%, transparent)}
}

/* ---- gallery hover labels ---- */
.gal figure{position:relative}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:16px 14px 14px;
  color:var(--khadi);font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  background:linear-gradient(to top,rgba(10,7,5,.9),rgba(10,7,5,0));
  opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1;transform:none}

/* ---- footer + preloader wordmark (Latin, not Devanagari) ---- */
.foot__mark{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,34px);
  letter-spacing:.02em;line-height:1;color:var(--marigold);margin-bottom:16px;
  font-variation-settings:"opsz" 48}
.foot__brand p{font-size:13.5px;line-height:1.65;color:rgba(244,237,225,.62);max-width:34ch}
.pre__mark{font-family:var(--serif);font-weight:700;
  font-size:clamp(30px,5vw,58px);line-height:1;letter-spacing:.01em;color:var(--marigold);
  font-variation-settings:"opsz" 100;opacity:0;animation:preIn .9s var(--ease) .1s forwards}

/* ---- menu page: order block sits on ink like the homepage one ---- */
.morder{background:var(--ink);color:var(--khadi);padding:clamp(60px,7vw,110px) var(--pad)}
.morder__in{max-width:var(--maxw);margin:0 auto;text-align:center}
.morder .eyebrow{color:var(--marigold)}
.morder h2{color:var(--khadi)}
.morder__note{color:rgba(244,237,225,.6)!important}

/* ---- menu page: larger, easier-to-read item text ---- */
.mrow p{font-size:15px;line-height:1.6;color:#6B5B49}
.mrow__top h3{font-size:clamp(18px,1.5vw,23px)}
.mrow__price{font-size:13.5px}
.mrow{padding:18px 0}
.msec__note{font-size:16px;color:#6B5B49;line-height:1.65}
.mhero__lede{font-size:clamp(17px,1.4vw,20px)}

/* ---- email card: compose + copy ---- */
.ocard--mail{cursor:default}
.ocard--mail:hover{transform:none}
.ocard__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ocard__acts a,.ocard__acts .copybtn{
  font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;padding:9px 14px;border-radius:99px;
  border:1px solid rgba(244,237,225,.32);color:rgba(244,237,225,.9);
  transition:all .3s var(--ease);line-height:1}
.ocard__acts a:hover,.ocard__acts .copybtn:hover{
  background:var(--khadi);color:var(--ink);border-color:var(--khadi)}
.copybtn.is-copied{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}

/* ============================================================
   MENU PHOTO LIGHTBOX
   ============================================================ */
.mrow__img{position:relative;padding:0;border:0;cursor:zoom-in;display:block;
  width:clamp(88px,7.5vw,116px);aspect-ratio:1;overflow:hidden;border-radius:3px;
  background:var(--ink-2);flex:none}
.mrow__zoom{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,7,5,.55);color:var(--khadi);font-family:var(--sans);
  font-size:22px;font-weight:300;line-height:1;opacity:0;transition:opacity .3s var(--ease)}
.mrow__img:hover .mrow__zoom,.mrow__img:focus-visible .mrow__zoom{opacity:1}
.mrow__img:focus-visible{outline:2px solid var(--sindoor);outline-offset:3px}

/* ---- COMING SOON ----
   Dishes the kitchen has not photographed yet. The tile stays so the row keeps
   its rhythm and the image column does not collapse, and it says so plainly
   rather than showing a photograph of some other dish. Not a button: there is
   nothing to enlarge. */
.mrow__soon{display:grid;place-items:center;text-align:center;cursor:default;
  background:var(--ink-2);color:rgba(244,237,225,.62);font-family:var(--sans);
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.4}


.lb{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:rgba(10,7,5,.93);padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lb.is-open{opacity:1;visibility:visible}
.lb__fig{margin:0;max-width:min(760px,92vw);text-align:center;
  transform:scale(.97);transition:transform .4s var(--ease)}
.lb.is-open .lb__fig{transform:none}
.lb__fig img{width:100%;height:auto;max-height:68vh;object-fit:contain;
  background:var(--ink-2)}
.lb__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:8px 16px;margin-top:20px;color:var(--khadi)}
.lb__cap h3{font-family:var(--serif);font-size:clamp(21px,2.4vw,30px);font-weight:600;
  font-variation-settings:"opsz" 48}
.lb__cap b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--marigold)}
.lb__cap p{flex:1 0 100%;margin:6px 0 0;font-size:14.5px;line-height:1.55;
  color:rgba(244,237,225,.68)}
.lb__x,.lb__nav{position:absolute;background:rgba(244,237,225,.1);color:var(--khadi);
  border:1px solid rgba(244,237,225,.28);border-radius:50%;
  width:46px;height:46px;display:grid;place-items:center;font-size:19px;line-height:1;
  transition:background .3s,color .3s,border-color .3s}
.lb__x:hover,.lb__nav:hover{background:var(--khadi);color:var(--ink);border-color:var(--khadi)}
.lb__x{top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__prev{left:clamp(10px,2vw,26px)}
.lb__next{right:clamp(10px,2vw,26px)}
@media(max-width:640px){.lb__nav{top:auto;bottom:16px;transform:none}}


/* ============================================================
   MENTIONS — TikTok row + everything else
   ============================================================ */
.sublabel{display:flex;align-items:center;gap:18px;margin:clamp(30px,3.4vw,46px) 0 clamp(18px,2vw,26px)}
.sublabel span{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);flex:none}
.sublabel::after{content:"";flex:1;height:1px;background:rgba(23,19,15,.18)}

.ttrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  content-visibility:auto;contain-intrinsic-size:auto 700px}
/* TikTok's embed needs ~325px to lay its own chrome out; drop to two up
   before the columns get narrower than that */
@media(max-width:1280px){.ttrow{grid-template-columns:1fr 1fr}
  /* the press card is not an embed, so it has no 325px floor — let it run
     full width under the two videos instead of being dropped */
  .ttrow .tt--video:last-child{display:none}
  .tt--press{grid-column:1 / -1}
  .tt--press .facade--tall{height:clamp(200px,26vw,270px)}}
.tt{margin:0;display:flex;flex-direction:column;background:var(--khadi);
  border:1px solid rgba(23,19,15,.16)}
.tt__player{position:relative;width:100%;height:clamp(540px,44vw,660px);
  overflow:hidden;background:#111}
.tt__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tt figcaption{padding:15px 18px;border-top:1px solid rgba(23,19,15,.14)}
.tt figcaption b{font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sindoor)}
.tt figcaption span{font-size:13.5px;line-height:1.5;color:var(--mute)}

.elsewhere{display:grid;grid-template-columns:340px minmax(0,1fr);
  gap:clamp(18px,2.4vw,36px);align-items:start}
.fbcard{margin:0;border:1px solid rgba(23,19,15,.16);background:var(--khadi);
  overflow:hidden;line-height:0}
.fbcard iframe{width:100%;height:520px;border:0;display:block}
.elsewhere__list{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(23,19,15,.15);border:1px solid rgba(23,19,15,.15);align-self:stretch}
.plink{background:var(--khadi);padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:6px;position:relative;
  transition:background .3s var(--ease)}
.plink:hover{background:var(--chalk)}
.plink b{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);font-weight:600;
  font-variation-settings:"opsz" 36;line-height:1}
.plink em{font-style:normal;font-size:13px;line-height:1.5;color:var(--mute);max-width:26ch}
.plink i{position:absolute;top:clamp(16px,1.8vw,22px);right:clamp(16px,1.8vw,22px);
  font-style:normal;font-size:13px;color:var(--mute);opacity:.5;
  transition:transform .35s var(--ease),opacity .3s}
.plink:hover i{transform:translate(2px,-2px);opacity:1}

@media(max-width:1040px){
  .elsewhere{grid-template-columns:1fr}
  .fbcard{max-width:360px}
}
@media(max-width:640px){
  .ttrow{grid-template-columns:1fr}
  .elsewhere__list{grid-template-columns:1fr}
}

/* ============================================================
   CLICK-TO-PLAY FACADES
   Third-party embeds are not loaded until asked for: five eager
   iframes (TikTok x3, Facebook, YouTube) made the page stutter and
   autoplayed video nobody asked to watch.
   ============================================================ */
.facade{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  overflow:hidden;background:var(--ink-2);color:var(--khadi);isolation:isolate}
.facade--wide{aspect-ratio:16/9}
.facade--tall{height:clamp(420px,38vw,520px)}
.facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease),filter .5s;filter:brightness(.72)}
.facade:hover img{transform:scale(1.04);filter:brightness(.58)}
.facade--tall{background:#14100C}
/* real poster frames: only darken enough to keep the play button legible */
.facade--tall img{filter:brightness(.82)}
.facade--tall:hover img{filter:brightness(.66)}
.facade__handle{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.facade__label{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.facade__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(244,237,225,.55);
  background:rgba(23,19,15,.4);backdrop-filter:blur(2px);
  transition:background .3s,border-color .3s,transform .4s var(--ease)}
.facade__play::after{content:"";position:absolute;top:50%;left:54%;
  transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--khadi);
  transition:border-color .3s}
.facade:hover .facade__play{background:var(--marigold);border-color:var(--marigold);
  transform:translate(-50%,-50%) scale(1.07)}
.facade:hover .facade__play::after{border-left-color:var(--ink)}
.facade__handle{position:absolute;left:0;right:0;top:clamp(20px,2.4vw,28px);
  text-align:center;font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--marigold)}
.facade__label{position:absolute;left:0;right:0;bottom:clamp(16px,2vw,22px);
  text-align:center;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(244,237,225,.62)}
.facade:focus-visible{outline:2px solid var(--marigold);outline-offset:3px}

/* press card: same slot as a video facade, but it links out instead of
   swapping in an embed — no play affordance, typography carries it */
.facade--press{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:clamp(14px,1.6vw,20px);
  padding:clamp(30px,3.4vw,48px);text-decoration:none}
.facade--press .facade__handle,.facade--press .facade__label{position:static}
.press__quote{font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,2vw,27px);line-height:1.28;color:var(--khadi);
  max-width:20ch;transition:color .3s var(--ease)}
.facade--press:hover .press__quote{color:var(--marigold)}
.facade--press .ar{transition:transform .3s var(--ease);display:inline-block}
.facade--press:hover .ar{transform:translate(2px,-2px)}
.tt__player{position:relative;width:100%;height:clamp(540px,44vw,660px);
  overflow:hidden;background:#111}
.tt__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- scroll performance ----
   backdrop-filter on a fixed bar repaints the blurred region on every frame;
   a solid fill is indistinguishable here and much cheaper. */
.nav.is-stuck{background:var(--khadi);backdrop-filter:none}
.mnav{backdrop-filter:none;background:var(--khadi)}
.svideo__live{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.svideo__live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.svideo__live video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

.ttmore{margin:clamp(22px,2.6vw,34px) 0 0;text-align:center}
.ttmore a{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sindoor);
  border-bottom:1px solid rgba(21,73,127,.3);padding-bottom:5px;transition:gap .3s var(--ease)}
.ttmore a:hover{gap:14px;border-color:var(--sindoor)}

/* ============================================================
   VISIT / CATERING PAGE HERO
   ============================================================ */
.ihero{background:var(--ink);color:var(--khadi);
  padding:calc(clamp(60px,7vw,100px) + 84px) var(--pad) clamp(48px,5.5vw,80px)}
.ihero__in{max-width:var(--maxw);margin:0 auto}
.ihero .eyebrow{color:var(--marigold)}
.ihero h1{font-size:clamp(40px,6.6vw,92px);line-height:.94;letter-spacing:-.03em;
  margin-bottom:clamp(18px,2vw,26px)}
.ihero h1 em{font-style:normal;color:var(--marigold)}
.ihero__lede{max-width:50ch;font-size:clamp(16px,1.35vw,20px);line-height:1.6;
  color:rgba(244,237,225,.78)}
.ihero__jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,38px)}
.ihero__jump a{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;border-radius:99px;border:1px solid rgba(244,237,225,.32);
  color:rgba(244,237,225,.85);transition:all .3s var(--ease)}
.ihero__jump a:hover{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}
/* anchored sections clear the sticky bar */
#catering,#order,#visit{scroll-margin-top:calc(var(--topbar-h,52px) + 24px)}

/* On mobile the brand block is flex:none and its address subtitle is long,
   so it pushed the CTA group — and the hamburger — clean off the right edge. */
@media(max-width:820px){
  /* .nav.is-stuck sets the padding shorthand, so the right padding has to be
     set on both or the header is spaced differently per page. */
  .nav,.nav.is-stuck{gap:12px;padding-left:var(--pad);padding-right:var(--pad)}
  .brand{min-width:0;flex:1 1 auto;overflow:hidden}
  .brand__sub{display:none}
  .brand__name{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav__cta{flex:none;gap:8px}
  .nav .btn{padding:11px 16px;font-size:10px}
  /* the glyph is 20px inside a 38px hit-box; pull the box out so the bars line
     up optically with the wordmark on the left */
  .burger{margin-left:2px;margin-right:-9px}
}
@media(max-width:380px){
  .nav .btn{display:none}
}

/* ---- paper tooth on the flat-color sections ----
   The original full-viewport fixed overlay looked right but had to be
   re-composited every scroll frame. Painting the same tile per section costs
   nothing on scroll and restores the texture on the dark/colored grounds. */
.mprev,.order,.visit,.cater,.svideo,.scta,.morder,.rev,.story,.stoday,
.sment,.swords,.rail,footer{
  background-image:url(noise.webp);
  background-size:160px 160px;
  background-repeat:repeat;
}


/* ---- ordering cards: these carry the phone number and email, so they are
   the most functional text on the site. Scale them up. ---- */
.ocard{gap:11px;padding:clamp(26px,3vw,40px)}
.ocard__ic{width:52px;height:52px}
.ocard__ic svg{width:25px;height:25px}
.ocard__k{font-size:11.5px;letter-spacing:.18em}
.ocard__v{font-size:clamp(23px,2.4vw,32px);line-height:1.12}
.ocard__n{font-size:15px;line-height:1.6;color:rgba(244,237,225,.78)}
.order .sec-head p,.morder__note{font-size:15px}

/* ---- keep adjacent blue grounds from merging ----
   .scta sat on --neem, which now aliases --blue — the same value as the
   footer. Stacked together they read as one continuous slab with no edge.
   Drop it a step darker and give the footer a hairline. */
.scta{background:var(--blue-d)}
footer{border-top:1px solid rgba(244,237,225,.16)}

/* address links: a single clean underline across the whole address, rather
   than the default rule breaking raggedly through the commas */
.addrlink,.foot ul a[href*="maps"]{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-skip-ink:none;
  text-decoration-color:rgba(244,237,225,.45);
  transition:text-decoration-color .25s,color .25s}
.addrlink:hover,.foot ul a[href*="maps"]:hover{
  color:var(--yellow);text-decoration-color:var(--yellow)}
/* .cater is the one light ground these land on: the khadi underline above
   disappears into the yellow, and the hover colour IS the yellow, so the
   link would erase itself. Ink underline, and the blue .cater__line uses. */
.cater .addrlink{text-decoration-color:rgba(23,19,15,.45)}
.cater .addrlink:hover{color:var(--blue);text-decoration-color:var(--blue)}


/* catering has a separate phone line from the restaurant */
.cater__line{margin-top:clamp(16px,1.8vw,22px);font-size:15px;line-height:1.65;
  padding:14px 18px;border-left:3px solid var(--ink);background:rgba(23,19,15,.06)}
.cater__line b{font-weight:700}
.cater__line a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cater__line a:hover{color:var(--blue)}


/* ============================================================
   FIXES FROM THE DESKTOP + MOBILE TEST PASS
   ============================================================ */

/* Photo-less rows sat 136px left of their neighbours on the desktop grid,
   which read as a bug rather than a deliberate text row. Reserve the column. */
@media(min-width:821px){
  .mrow--nopic::before{content:"";flex:none;width:clamp(88px,7.5vw,116px)}
}

/* The dotted price leader collapsed to a 14px stub on 33-57 rows at phone
   widths. It is decoration; drop it rather than ship a broken-looking dash. */
@media(max-width:820px){
  .mrow__dots{display:none}
  .mrow__top{gap:12px;justify-content:space-between}
  .mrow__top h3{flex:1;min-width:0}
}

/* The chat pill is opaque and fixed bottom-right; on a phone it covered a
   dish price or description at ~60% of scroll positions. Shrink it to a
   circular icon and lift it clear of the bottom bar. */
/* Floating it anywhere over a 128-row menu covered a price or a description
   at ~30% of scroll positions even once shrunk. Dock it into the bottom bar
   instead — then it can never sit on top of content. */
@media(max-width:820px){
  .mobar{gap:8px}
  .mobar .dgc__pill{position:static;width:52px;height:52px;padding:0;flex:none;
    border-radius:50%;justify-content:center;box-shadow:none}
  .mobar .dgc__pill span,.mobar .dgc__pill b{display:none}
  .mobar .dgc__pill svg{margin:0}
  .mobar .btn{flex:1}
}

/* The bottom bar and the chat pill floated above the open mobile drawer,
   duplicating its own Call / Order buttons. */
body.is-locked .mobar,
body.is-locked .dgc__pill{display:none}

/* The bar's height was hard-coded in two places (64px, then 76px) against a
   bar that had since changed size, so the last few pixels of the footer sat
   under it. site.js now measures the bar and publishes --mobar-h (which
   already includes env(safe-area-inset-bottom), because that is part of the
   bar's own padding). The literal is only the pre-JS fallback, and chat.css
   reads the same variable, so the three can no longer drift apart. */
@media(max-width:820px){
  body{padding-bottom:calc(
    var(--mobar-h, calc(72px + env(safe-area-inset-bottom))) + 8px)}
}

/* Landscape phones: a 73px bar is a fifth of a 375px-tall viewport. Trim it
   without dropping any tap target below 44px. */
@media(max-width:820px) and (max-height:480px){
  .mobar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .mobar a{padding:12px 10px}
  .mobar .dgc__pill{width:46px;height:46px}
}

/* Tap targets: 38-41px is under the 44px guideline. */
@media(max-width:820px){
  .burger{width:44px;height:44px}
  .nav .btn{padding:13px 18px}
  .mpill{padding:13px 18px}
  .foot ul a{display:inline-block;padding:5px 0}
}

/* "What people say" — these three quotes carry the section on their own. */
.rev .eyebrow{font-size:12px}

/* footer hours: a readable day-by-day list rather than one cramped line */
.foot__hours{display:block}
.foot__hours span{display:flex;gap:12px;align-items:baseline;padding:3px 0;
  font-size:13px;line-height:1.5;color:rgba(244,237,225,.72)}
.foot__hours b{flex:none;width:34px;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,237,225,.5)}
.foot__hours em{font-style:normal}
.foot__hours .is-shut,.foot__hours .is-shut b{color:rgba(244,237,225,.4)}