/* ==========================================================================
   Manjula Bite & Brew — manjulab.com
   Built with Brahmexa.

   THE IDEA
   A street food shop's real interface is the slate on the pavement. So this
   site is a slate: chalk on dark for the things that change today, printed
   card for the things that do not. The two surfaces are the whole design
   system, and everything else follows from which of the two a thing belongs
   on.

   THE COLOURS ARE THE SHOP'S OWN
   The purple is the plastic stool people eat off outside. The marigold is
   the fairy lights strung over the counter. The green, red, teal and yolk
   are lifted off the four brush-stroke bands on the shop's printed menu
   card. Nothing here was picked from a palette generator.

   TWO LANGUAGES, NOT ONE TRANSLATED
   Bengali is the default and the English is not its mirror. Elements carry
   .bn or .en and the html[data-lang] attribute decides which is in the flow.
   Both are always in the DOM, so the page still reads with JavaScript off.
   ========================================================================== */

/* ---------- tokens ---------- */

:root {
  /* chalkboard */
  --ink:        #14110e;
  --ink-2:      #201b16;
  --ink-3:      #2c251d;
  --chalk:      #f6f1e6;
  --chalk-dim:  #b6ab97;
  --chalk-fade: #7d7365;

  /* printed card */
  --paper:      #fbf7ee;
  --paper-2:    #f4ecdc;
  --paper-3:    #ece0c9;
  --rule:       #e2d5ba;
  --text:       #2a231b;
  --text-dim:   #6d6151;

  /* the shop's own accents */
  --stool:      #6d3fa8;   /* the purple stool outside */
  --stool-ink:  #4c2a78;
  --stool-soft: #f1eafb;
  --marigold:   #e0961a;   /* the fairy lights */
  --marigold-2: #f6c65a;
  --leaf:       #2f7d5b;
  --chilli:     #b8402f;
  --brew:       #1f6f8b;
  --yolk:       #d9761c;

  /* type */
  --display:    'Fraunces', Georgia, serif;
  /* Baloo Da 2 was here and had to go: it mis-shapes the ঞ্জ conjunct, which
     is in the shop's own name. A display face that cannot set MANJULA is not
     a display face for this site. Noto Serif Bengali shapes it correctly and
     suits the poetry the page carries. */
  --display-bn: 'Noto Serif Bengali', 'Hind Siliguri', system-ui, serif;
  --body:       'Inter', system-ui, -apple-system, sans-serif;
  --body-bn:    'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
  --serif-bn:   'Tiro Bangla', 'Hind Siliguri', serif;
  --hand:       'Caveat', cursive;

  --wrap: 1140px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(42, 35, 27, .06), 0 12px 30px -18px rgba(42, 35, 27, .35);
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[data-lang="bn"] body { font-family: var(--body-bn); line-height: 1.75; }

/* height:auto matters more than it looks. Every <img> here carries width and
   height attributes so the browser can reserve space before the file lands —
   but those attributes are also presentational hints, and a definite height
   beats aspect-ratio. Without this line the portraits ignored their 4/5 crop
   and rendered at their full intrinsic height, cropping the faces out of the
   frame. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- the language switch ---------- */

html[data-lang="bn"] .en { display: none !important; }
html[data-lang="en"] .bn { display: none !important; }
/* inline variants keep their inline-ness when shown */
.en-i, .bn-i { display: inline; }
html[data-lang="bn"] .en-i { display: none !important; }
html[data-lang="en"] .bn-i { display: none !important; }

.wrap { width: min(var(--wrap), 100% - 2.4rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2.4rem); margin-inline: auto; }

/* ==========================================================================
   Header
   ========================================================================== */

.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(20, 17, 14, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(246, 241, 230, .1);
  color: var(--chalk);
}
.top__in {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 0; min-height: 60px;
}
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; margin-right: auto; }
.brand__mark {
  font-family: var(--display-bn);
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--chalk); letter-spacing: .01em;
}
html[data-lang="en"] .brand__mark { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1; }
.brand__sub {
  font-family: var(--hand); font-size: 1.15rem; color: var(--marigold-2);
  letter-spacing: .02em;
}

/* The name as artwork. Cut from Noto Serif Bengali at 300px and trimmed to
   the ink, so it is sized by height and lets its own width follow — never
   stretched, never re-shaped by whatever font a visitor's device falls back
   to. Alt text carries the word itself, so screen readers and search
   engines still read মঞ্জুলা. */
.wordmark { width: auto; height: 1.55rem; align-self: center; }
.wordmark--hero { height: clamp(3.4rem, 11vw, 6.6rem); margin-bottom: .1rem; }
.foot__brand { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.foot__brand .wordmark { height: 1.25rem; }

.top nav { display: flex; gap: .2rem; }
.top nav a {
  text-decoration: none; padding: .45rem .7rem; border-radius: 8px;
  font-size: .92rem; color: var(--chalk-dim); white-space: nowrap;
}
.top nav a:hover { color: var(--chalk); background: rgba(246, 241, 230, .08); }
@media (max-width: 880px) { .top nav { display: none; } }

/* language toggle */
.lang {
  display: inline-flex; border: 1px solid rgba(246, 241, 230, .25);
  border-radius: 999px; overflow: hidden; flex: none;
}
.lang button {
  border: 0; background: transparent; color: var(--chalk-dim);
  padding: .34rem .72rem; cursor: pointer; font-size: .86rem; line-height: 1.4;
}
.lang button[aria-pressed="true"] { background: var(--chalk); color: var(--ink); font-weight: 600; }
.lang button:first-child { font-family: var(--body-bn); }

/* ==========================================================================
   Hero — the chalkboard
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--chalk);
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
/* chalk dust: two soft washes and a fine grain, no image files */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at 18% 8%,  rgba(224, 150, 26, .17), transparent 62%),
    radial-gradient(52vmax 40vmax at 88% 92%, rgba(109, 63, 168, .26), transparent 62%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(246,241,230,.022) 0 1px, transparent 1px 3px);
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--marigold-2); margin: 0 0 1.1rem;
}
html[data-lang="bn"] .eyebrow { letter-spacing: .08em; text-transform: none; font-size: .84rem; }
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--marigold);
  animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224,150,26,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(224,150,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,150,26,0); }
}

.hero h1 {
  margin: 0 0 .35rem;
  font-family: var(--display-bn);
  font-size: clamp(3rem, 11vw, 6.2rem);
  line-height: .95; font-weight: 700; letter-spacing: -.01em;
}
html[data-lang="en"] .hero h1 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 90;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
}
.hero__tag {
  font-family: var(--hand); font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--marigold-2); margin: 0 0 1.4rem;
}
.hero__lede {
  font-size: clamp(1.02rem, 2.3vw, 1.2rem); color: var(--chalk-dim);
  max-width: 46ch; margin: 0 0 1.8rem;
}
.hero__lede strong { color: var(--chalk); font-weight: 600; }

/* open / closed, computed live in Kolkata time */
.status {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .95rem; border-radius: 999px;
  background: rgba(246,241,230,.07); border: 1px solid rgba(246,241,230,.16);
  font-size: .95rem; margin-bottom: 1.6rem;
}
.status__lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--chalk-fade); flex: none; }
.status.is-open  .status__lamp { background: #46c37b; box-shadow: 0 0 12px rgba(70,195,123,.8); }
.status.is-shut  .status__lamp { background: #c9564a; }

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; font-weight: 600; font-size: 1rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--call {
  background: var(--marigold); color: #1a1408;
  box-shadow: 0 10px 26px -12px rgba(224,150,26,.9);
}
.btn--call:hover { background: var(--marigold-2); }
.btn--wa { background: #1f9c5c; color: #fff; }
.btn--wa:hover { background: #23ad67; }
.btn--ghost { background: transparent; border-color: rgba(246,241,230,.3); color: var(--chalk); }
.btn--ghost:hover { background: rgba(246,241,230,.08); }
.btn--solid { background: var(--stool); color: #fff; box-shadow: 0 10px 26px -12px rgba(109,63,168,.9); }
.btn--solid:hover { background: var(--stool-ink); }

/* ---------- the reel ----------

   A phone in the hero, running the kitchen like a story: progress bars across
   the top, a scene every five seconds, tap either half to step back or on.

   Why a phone frame and not just a picture: this is how anyone under forty in
   Uttarpara already looks at food. The frame tells you, before you read a
   word, that the thing inside moves and that there is more of it.
*/

.reel { margin: 0; display: grid; justify-items: center; gap: 1rem; }

.phone {
  position: relative;
  width: clamp(240px, 26vw, 330px);
  aspect-ratio: 9 / 19.5;
  border-radius: 34px;
  padding: 8px;
  background: linear-gradient(160deg, #3a3129, #17130f 60%);
  box-shadow:
    inset 0 0 0 1px rgba(246,241,230,.16),
    0 40px 70px -28px rgba(0,0,0,.95);
}
.phone__screen {
  position: relative; height: 100%; border-radius: 27px; overflow: hidden;
  background: #0d0b09; isolation: isolate; cursor: pointer;
}

/* the scenes */
.reel__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .55s ease;
}
.reel__media.is-on { opacity: 1; }
.reel__img { transform: scale(1.06); }
/* Video already moves. The drift below is only for the stills, which would
   otherwise sit dead still next to five clips that do not. */
.reel__vid { transform: none; }
/* A reel moves. Stills that cross-fade are a slideshow, so every frame drifts
   the whole time it is up and is swapped out before it can settle. The
   animation restarts with the class, which is exactly when a scene arrives. */
@keyframes reel-drift-a { from { transform: scale(1.03) translate3d(1.2%, 1.5%, 0); }
                          to   { transform: scale(1.18) translate3d(-1.8%, -2.2%, 0); } }
@keyframes reel-drift-b { from { transform: scale(1.18) translate3d(-1.4%, -1.8%, 0); }
                          to   { transform: scale(1.03) translate3d(1.6%, 1.2%, 0); } }
.reel__img.is-on                 { animation: reel-drift-a 8s ease-out both; }
.reel__img:nth-child(even).is-on { animation-name: reel-drift-b; }

/* legibility under the caption, and a little warmth up top */
.phone__screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(transparent 46%, rgba(10,8,6,.82) 88%),
    radial-gradient(70% 40% at 30% 8%, rgba(255,214,150,.14), transparent 70%);
}

/* story bars */
.phone__bars {
  position: absolute; inset: 10px 10px auto; z-index: 4;
  display: flex; gap: 3px;
}
.phone__bars i {
  flex: 1; height: 2.5px; border-radius: 2px; background: rgba(246,241,230,.28);
  overflow: hidden;
}
.phone__bars i b { display: block; height: 100%; width: 0; background: var(--chalk); }
.phone__bars i.is-done b { width: 100%; }
.phone__bars i.is-on b { animation: bar 5s linear forwards; }
@keyframes bar { from { width: 0; } to { width: 100%; } }

/* the caption card */
.phone__card {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 1rem .95rem 1.05rem;
  display: grid; gap: .3rem;
}
.phone__scene { font-family: var(--hand); font-size: 1.2rem; color: var(--marigold-2); line-height: 1.15; }
html[data-lang="bn"] .phone__scene { font-family: var(--body-bn); font-size: .95rem; }
.phone__dish { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.phone__dish b { font-size: 1.02rem; color: var(--chalk); font-weight: 600; }
html[data-lang="bn"] .phone__dish b { font-size: .95rem; }
.phone__price {
  margin-left: auto; font-weight: 700; color: #0f0c08; background: var(--marigold);
  border-radius: 999px; padding: .1rem .6rem; font-size: .9rem; font-variant-numeric: tabular-nums;
}

/* scene chips under the phone */
.reel__tabs {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center;
  max-width: 30rem;
}
.reel__tabs button {
  border: 1px solid rgba(246,241,230,.22); background: transparent; color: var(--chalk-dim);
  border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; cursor: pointer;
  line-height: 1.4;
}
.reel__tabs button:hover { color: var(--chalk); background: rgba(246,241,230,.08); }
.reel__tabs button[aria-current="true"] {
  background: var(--marigold); border-color: var(--marigold); color: #17120a; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .reel__media { transition: none; }
  .reel__img.is-on, .reel__img:nth-child(even).is-on { animation: none; transform: scale(1.03); }
  .phone__bars i.is-on b { animation: none; width: 100%; }
}
@media (max-width: 900px) { .phone { width: clamp(250px, 68vw, 320px); } }

/* the hero photo, hung like a picture on the board */
.hero__shot {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 6px solid rgba(246,241,230,.9);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: rotate(-1.4deg);
}
/* Biased low in the frame: the top third of this photograph is bare wall,
   and a hero that leads with bare wall is not leading with anything. */
.hero__shot img {
  width: 100%; aspect-ratio: 4/5; max-height: 540px;
  object-fit: cover; object-position: center 72%;
}
.hero__shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  color: #fff; font-size: .82rem; font-family: var(--body);
}
html[data-lang="bn"] .hero__shot figcaption { font-family: var(--body-bn); }

/* ==========================================================================
   Section furniture
   ========================================================================== */

/* Scoped to the page's own bands. It used to be a bare `section {}`, which
   also caught the <section class="card"> elements the menu renders — every
   menu card came out with five rems of empty paper above its coloured
   header. Anything that is a section but not a band opts out below. */
main > section, .foot-band { padding: clamp(3rem, 8vw, 5rem) 0; }
.card { padding: 0; }
.sec-head { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.sec-head h2 {
  margin: 0 0 .5rem;
  font-family: var(--display-bn); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.1;
}
html[data-lang="en"] .sec-head h2 {
  font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
}
.sec-head p { margin: 0; color: var(--text-dim); max-width: 62ch; }
.on-ink .sec-head p { color: var(--chalk-dim); }
.kicker {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stool); font-weight: 600; margin: 0 0 .5rem;
}
html[data-lang="bn"] .kicker { letter-spacing: .06em; text-transform: none; font-size: .86rem; }
.on-ink .kicker { color: var(--marigold-2); }

/* the literary epigraphs — different authors in each language, by design */
.epigraph {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding-left: 1.15rem;
  border-left: 3px solid var(--marigold);
}
.epigraph blockquote {
  margin: 0 0 .45rem;
  font-family: var(--display); font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 30;
  font-style: italic; line-height: 1.4; color: var(--text);
}
html[data-lang="bn"] .epigraph blockquote {
  font-family: var(--serif-bn); font-style: normal; line-height: 1.7;
}
.epigraph cite {
  font-style: normal; font-size: .86rem; color: var(--text-dim); letter-spacing: .02em;
}
.on-ink .epigraph blockquote { color: var(--chalk); }
.on-ink .epigraph cite { color: var(--chalk-fade); }

/* ==========================================================================
   The slate
   ========================================================================== */

.slate-sec { background: var(--ink-2); color: var(--chalk); }

.slate-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 2.6rem);
  align-items: start;
}
@media (max-width: 900px) { .slate-grid { grid-template-columns: 1fr; } }

.board {
  background:
    linear-gradient(rgba(255,255,255,.02), rgba(0,0,0,.18)),
    #17140f;
  border: 10px solid #4b3a27;   /* the wooden frame the slate sits in */
  border-radius: 8px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6), 0 24px 50px -28px rgba(0,0,0,.9);
  position: relative;
}
.board::after { /* chalk smear */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: radial-gradient(80% 50% at 30% 20%, rgba(246,241,230,.05), transparent 70%);
}

.board__date {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-family: var(--hand); font-size: 1.25rem; color: var(--marigold-2);
  margin-bottom: .9rem;
}
.board__stamp {
  font-family: var(--body); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; border: 1px solid currentColor;
}
html[data-lang="bn"] .board__stamp { font-family: var(--body-bn); letter-spacing: .02em; text-transform: none; font-size: .78rem; }
.board__stamp.is-today { color: #6fd394; }
.board__stamp.is-old   { color: #e0a34a; }

.board__headline {
  font-family: var(--hand); font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  color: var(--chalk); line-height: 1.35;
  padding-bottom: .9rem; margin-bottom: .9rem;
  border-bottom: 1px dashed rgba(246,241,230,.28);
}
html[data-lang="bn"] .board__headline { font-family: var(--display-bn); font-size: clamp(1.1rem, 3vw, 1.45rem); }

.board ol { list-style: none; margin: 0; padding: 0; counter-reset: chalk; }
.board li {
  counter-increment: chalk;
  display: grid; grid-template-columns: 1.9rem 1fr auto; gap: .5rem 0.7rem;
  padding: .7rem 0; border-bottom: 1px dotted rgba(246,241,230,.16);
}
.board li:last-child { border-bottom: 0; }
.board li::before {
  content: counter(chalk) '.'; font-family: var(--hand); font-size: 1.3rem;
  color: var(--chalk-fade); line-height: 1.2;
}
.board__name { font-size: 1.1rem; font-weight: 600; color: var(--chalk); }
.board__note { grid-column: 2 / -1; font-size: .88rem; color: var(--chalk-dim); margin-top: .2rem; }
.board__price { font-family: var(--hand); font-size: 1.5rem; color: var(--marigold-2); white-space: nowrap; line-height: 1; }
.board__sizes { display: flex; gap: .8rem; font-family: var(--hand); font-size: 1.25rem; color: var(--marigold-2); white-space: nowrap; }
.board__sizes span small { font-family: var(--body); font-size: .68rem; color: var(--chalk-fade); display: block; }
html[data-lang="bn"] .board__sizes span small { font-family: var(--body-bn); }

/* what the page says when it does NOT know today's board */
.board__unknown {
  margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: 10px;
  background: rgba(224,150,26,.12); border: 1px solid rgba(224,150,26,.35);
  font-size: .95rem; color: var(--chalk);
}
.board__unknown a { color: var(--marigold-2); font-weight: 600; }

.slate-photo figure { margin: 0; }
.slate-photo img {
  width: 100%; border-radius: 8px; border: 5px solid rgba(246,241,230,.85);
  transform: rotate(1.2deg); box-shadow: 0 26px 50px -26px rgba(0,0,0,.9);
}
.slate-photo figcaption { margin-top: 1.4rem; font-size: .88rem; color: var(--chalk-dim); }

/* ==========================================================================
   Menu
   ========================================================================== */

.menu-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column;
}
.card__head {
  padding: .85rem 1.2rem; color: #fff;
  display: flex; align-items: baseline; gap: .6rem;
}
.card__head h3 {
  margin: 0; font-size: 1.25rem; font-weight: 700;
  font-family: var(--display-bn); letter-spacing: .01em;
}
html[data-lang="en"] .card__head h3 { font-family: var(--display); font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.card__head span { font-size: .82rem; opacity: .85; margin-left: auto; }
.card--ink    .card__head { background: #3c3228; }
.card--yolk   .card__head { background: var(--yolk); }
.card--leaf   .card__head { background: var(--leaf); }
.card--chilli .card__head { background: var(--chilli); }
.card--brew   .card__head { background: var(--brew); }

.card__note { padding: .7rem 1.2rem 0; color: var(--text-dim); font-size: .9rem; }
.card ul { list-style: none; margin: 0; padding: .6rem .6rem 1rem; }

.dish {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: .5rem .8rem; padding: .58rem .6rem; border-radius: 9px;
}
.dish:hover { background: var(--paper-2); }
.dish__name { font-weight: 500; }
.dish__meta { grid-column: 1 / -1; font-size: .82rem; color: var(--text-dim); margin-top: -.15rem; }
.dish__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__price small { font-weight: 400; color: var(--text-dim); font-size: .78rem; }

.add {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1px solid var(--rule); background: #fff; color: var(--stool);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.add:hover { background: var(--stool); color: #fff; border-color: var(--stool); }
.add:active { transform: scale(.9); }

.menu-scans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
@media (max-width: 700px) { .menu-scans { grid-template-columns: 1fr; } }
.menu-scans figure { margin: 0; }
.menu-scans img { width: 100%; border-radius: 10px; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.menu-scans figcaption { margin-top: .6rem; font-size: .85rem; color: var(--text-dim); }

/* ==========================================================================
   The shop, in five frames
   ========================================================================== */

.frames { background: var(--paper-2); }
.frames-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(6, 1fr);
}
.frames figure { margin: 0; }
.frames img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px; border: 5px solid #fff; box-shadow: var(--shadow);
}
.frames figcaption { margin-top: .55rem; font-size: .84rem; color: var(--text-dim); }
/* The wide one carries the shop's own hand-lettering, so it gets the room. */
.frames .f-wide  { grid-column: span 3; }
.frames .f-wide img  { aspect-ratio: 16/11; }
.frames .f-tall  { grid-column: span 3; }
.frames .f-tall img  { aspect-ratio: 16/11; }
.frames .f-third { grid-column: span 2; }
.frames .f-third img { aspect-ratio: 4/3; }
@media (max-width: 860px) {
  .frames-grid { grid-template-columns: repeat(2, 1fr); }
  .frames .f-wide, .frames .f-tall { grid-column: span 2; }
  .frames .f-third { grid-column: span 1; }
}

/* ==========================================================================
   The chit — an order becomes a phone call, never a payment
   ========================================================================== */

.chit-dock {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  display: none;
}
.chit-dock.is-on { display: block; }
.chit-open {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--stool); color: #fff; font-weight: 600;
  padding: .85rem 1.3rem; display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: 0 14px 34px -12px rgba(109,63,168,.95);
}
.chit-open b { background: #fff; color: var(--stool); border-radius: 999px; padding: 0 .5rem; font-variant-numeric: tabular-nums; }

.chit-panel {
  position: fixed; inset: auto 1rem 1rem auto; z-index: 71;
  width: min(370px, calc(100vw - 2rem));
  background: var(--paper); border-radius: 12px 12px 4px 4px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  display: none; overflow: hidden;
  /* torn paper foot */
  filter: drop-shadow(0 1px 0 var(--rule));
}
.chit-panel.is-open { display: block; }
.chit-panel::after {
  content: ''; display: block; height: 12px;
  background: repeating-linear-gradient(-45deg, var(--paper) 0 8px, transparent 8px 16px);
}
.chit-head {
  background: #3c3228; color: var(--chalk); padding: .8rem 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.chit-head h3 { margin: 0; font-size: 1rem; font-family: var(--display-bn); }
html[data-lang="en"] .chit-head h3 { font-family: var(--display); }
.chit-head button { margin-left: auto; background: transparent; border: 0; color: var(--chalk-dim); cursor: pointer; font-size: 1.3rem; line-height: 1; }
.chit-body { padding: .5rem 1rem; max-height: 44vh; overflow: auto; }
.chit-line { display: grid; grid-template-columns: auto 1fr auto auto; gap: .55rem; align-items: center; padding: .45rem 0; border-bottom: 1px dotted var(--rule); font-size: .93rem; }
.chit-line:last-child { border-bottom: 0; }
.chit-qty { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.chit-line .rm { background: transparent; border: 0; color: var(--chilli); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .2rem; }
.chit-total { display: flex; justify-content: space-between; padding: .7rem 1rem; border-top: 2px solid var(--text); font-weight: 700; }
.chit-actions { padding: 0 1rem 1rem; display: grid; gap: .5rem; }
.chit-actions .btn { justify-content: center; }
.chit-fine { padding: 0 1rem .9rem; font-size: .78rem; color: var(--text-dim); line-height: 1.45; }

/* ==========================================================================
   Story
   ========================================================================== */

.story { background: var(--paper-2); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 3.4rem); align-items: center; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }
.story p { max-width: 58ch; }
.story-photos { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.story-photos figure { margin: 0; }
/* Both portraits put the faces in the upper third, so a centred crop takes
   the tops of their heads off. Bias the frame upward. */
.story-photos img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 20%;
  border-radius: 10px; border: 5px solid #fff; box-shadow: var(--shadow);
}
.story-photos figure:first-child { transform: rotate(-1.6deg); }
.story-photos figure:last-child  { transform: rotate(1.4deg); }
.story-photos figcaption { margin-top: .5rem; font-size: .8rem; color: var(--text-dim); }

.namecard {
  margin: 1.6rem 0; padding: 1.2rem 1.4rem;
  background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--stool);
  border-radius: 10px; box-shadow: var(--shadow);
}
.namecard h4 { margin: 0 0 .35rem; font-size: 1.05rem; }
.namecard .sans { font-family: var(--serif-bn); font-size: 1.5rem; color: var(--stool-ink); }
.namecard p { margin: .35rem 0 0; font-size: .93rem; color: var(--text-dim); }
.namecard .src { display: block; margin-top: .6rem; font-size: .78rem; color: var(--text-dim); }

/* ==========================================================================
   Uttarpara — the walk
   ========================================================================== */

.walk { background: var(--ink); color: var(--chalk); }
.walk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(246,241,230,.14); border-radius: 12px; overflow: hidden; }
.walk-list li { background: var(--ink-2); padding: 1.15rem 1.3rem; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.walk-list li:hover { background: var(--ink-3); }
.walk__dist {
  font-family: var(--hand); font-size: 1.5rem; color: var(--marigold-2);
  min-width: 4.2rem; line-height: 1.1;
}
.walk__dist small { display: block; font-family: var(--body); font-size: .66rem; color: var(--chalk-fade); letter-spacing: .1em; text-transform: uppercase; }
html[data-lang="bn"] .walk__dist small { font-family: var(--body-bn); letter-spacing: 0; text-transform: none; font-size: .74rem; }
.walk__body h3 { margin: 0 0 .3rem; font-size: 1.12rem; font-weight: 600; }
.walk__body p { margin: 0; color: var(--chalk-dim); font-size: .94rem; max-width: 64ch; }
.walk__body .yr { color: var(--marigold-2); font-weight: 600; }

/* ==========================================================================
   Find us
   ========================================================================== */

.find-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .find-grid { grid-template-columns: 1fr; } }
.facts { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.facts dt, .facts .k { color: var(--text-dim); font-size: .88rem; }
.facts .v { font-weight: 500; }
.facts .v small { display: block; font-weight: 400; color: var(--text-dim); font-size: .84rem; margin-top: .15rem; }
.map { width: 100%; aspect-ratio: 4/3; border: 0; border-radius: 12px; box-shadow: var(--shadow); background: var(--paper-2); }
.hours-strip { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-radius: 12px; background: var(--stool-soft); border: 1px solid #ddd0f2; margin-bottom: 1.2rem; }
.hours-strip .big { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--stool-ink); font-variant-numeric: tabular-nums; }
html[data-lang="bn"] .hours-strip .big { font-family: var(--display-bn); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { background: var(--ink); color: var(--chalk-dim); padding: clamp(2.5rem, 6vw, 3.5rem) 0 2rem; font-size: .92rem; }
.foot a { color: var(--chalk); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2.2rem; }
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr; } }
.foot h4 { margin: 0 0 .6rem; color: var(--chalk); font-size: .95rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.built {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  padding-top: 1.4rem; border-top: 1px solid rgba(246,241,230,.14);
}
.built img { width: 38px; height: 38px; flex: none; }
.built__t { font-size: .9rem; }
.built__t b { color: var(--chalk); }
.built .lic { margin-left: auto; font-size: .78rem; color: var(--chalk-fade); text-align: right; }

/* ==========================================================================
   Utility
   ========================================================================== */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--marigold); color: #1a1408; padding: .7rem 1rem; z-index: 100; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; border-radius: 4px; }