/* =========================================================
   DARUCHINI - Base Design System
   Token system: colours drawn from the restaurant's real
   brick-and-terracotta building and spice-market palette.
   ========================================================= */

:root{
  /* --- Colour tokens --- */
  --ink:            #211509;   /* near-black roasted cinnamon bark */
  --ink-soft:       #33221163;
  --parchment:      #FBF2E4;   /* warm paper */
  --parchment-dim:  #F2E5D0;
  --cinnamon:       #9A4A28;   /* primary brand accent - bark brown-red */
  --cinnamon-dark:  #6E3319;
  --turmeric:       #D3A03C;   /* gold accent, spice bowls */
  --chili:          #A83226;   /* deep red, used sparingly for CTAs */
  --betel:          #4B6B49;   /* leaf green, used sparingly */
  --brick:          #B3603A;
  --line:           #E4D2B0;
  --line-dark:      #4A3220;
  --white:          #FFFDF9;

  /* --- Type --- */
  --font-display: "Fraunces", "Noto Serif Bengali", serif;
  --font-body:    "Work Sans", "Noto Sans Bengali", sans-serif;
  --font-bn-display: "Noto Serif Bengali", serif;
  --font-bn-body: "Hind Siliguri", "Noto Sans Bengali", sans-serif;

  /* --- Scale --- */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3.2vw, 4.6rem);
  --step-5:  clamp(3.6rem, 2.6rem + 4.8vw, 6.2rem);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  --shadow-soft: 0 18px 40px -22px rgba(33, 21, 9, 0.45);
  --shadow-tight: 0 6px 18px -10px rgba(33, 21, 9, 0.35);

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --dur: 480ms;
  --ease: cubic-bezier(.22,.68,.16,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Clip horizontal overflow at the root (e.g. the off-canvas mobile
     menu parked at translateX(100%)). `clip` avoids creating a scroll
     container, so opening the menu can't shift the fixed header. */
  overflow-x: clip;
}
body{
  margin:0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html[lang="bn"] body{
  font-family: var(--font-bn-body);
}
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font: inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Default editorial scale — many components set their own size on
   top of this (hero title, card headings, footer labels, etc.); this
   is the fallback for plain section headings, which previously had
   no explicit size at all and fell back to inconsistent browser
   defaults. */
h1{ font-size: var(--step-4); font-weight: 700; }
h2{ font-size: var(--step-3); font-weight: 700; }
h3{ font-size: var(--step-1); }
h4{ font-size: var(--step-0); }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4{
  font-family: var(--font-bn-display);
  letter-spacing: 0;
  line-height: 1.4;
}
html[lang="bn"] h1{ font-size: calc(var(--step-4) * 0.86); }
html[lang="bn"] h2{ font-size: calc(var(--step-3) * 0.88); }
html[lang="bn"] h3{ font-size: calc(var(--step-1) * 0.94); }
html[lang="bn"] h4{ font-size: calc(var(--step-0) * 0.96); }
p{ margin: 0 0 1em; text-wrap: pretty; }
:focus-visible{
  outline: 3px solid var(--turmeric);
  outline-offset: 3px;
}

.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--cinnamon-dark);
  font-weight: 600;
  margin-bottom: .9em;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: var(--chili);
  display:inline-block;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .03em;
  border: 1.5px solid transparent;
  transition: transform 220ms cubic-bezier(.34,1.4,.64,1), background 320ms ease, color 320ms ease, box-shadow 220ms cubic-bezier(.34,1.4,.64,1), border-color 320ms ease;
  cursor: pointer;
}
/* Primary: gradient drawn from the logo's cinnamon-brown roundel,
   with a soft warm glow instead of a hard offset "lip" — reads
   cleanly on both light and dark backgrounds. */
.btn-primary{
  background: linear-gradient(150deg, #B3603A 0%, var(--cinnamon) 48%, var(--cinnamon-dark) 100%);
  color: var(--white);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 22px -12px rgba(110,51,25,.55);
}
.btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.09) saturate(1.05);
  box-shadow: 0 14px 26px -12px rgba(110,51,25,.6);
}
.btn-primary:active{
  transform: translateY(1px);
  filter: brightness(.98);
  box-shadow: 0 6px 14px -10px rgba(110,51,25,.5);
}
.btn-ghost{
  background: rgba(251,242,228,.04);
  color: var(--parchment);
  border-color: rgba(251,242,228,.5);
}
.btn-ghost:hover{
  background: rgba(251,242,228,.14);
  border-color: rgba(251,242,228,.85);
  transform: translateY(-2px);
}
.btn-ghost:active{ transform: translateY(1px); }
.btn-outline{
  background: var(--white);
  color: var(--ink);
  border-color: rgba(33,21,9,.7);
  box-shadow: 0 2px 0 0 rgba(33,21,9,.12);
}
.btn-outline:hover{
  background: var(--ink);
  color: var(--parchment);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -14px rgba(33,21,9,.45);
}
.btn-outline:active{ transform: translateY(1px); box-shadow: 0 2px 8px -6px rgba(33,21,9,.3); }

.section{ padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-tight{ padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Dark feature sections (signature dishes, facilities): instead of a
   flat near-black slab, a warm cinnamon glow rises from the top-left
   with a faint turmeric ember at the opposite corner, over a deep
   roasted-brown base — richer, and it flatters the food photography. */
.section-dark{
  position: relative;
  background:
    radial-gradient(85% 65% at 12% 0%, rgba(154,74,40,.32), transparent 62%),
    radial-gradient(70% 55% at 92% 100%, rgba(211,160,60,.14), transparent 60%),
    linear-gradient(180deg, #2C1C0D 0%, var(--ink) 52%, #180E07 100%);
  color: var(--parchment-dim);
}
/* Faint jali-dot lattice over the glow, fading toward the middle so
   it frames the content without sitting behind the text. */
.section-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(211,160,60,.35) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity:.14;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 32%, transparent 68%, black);
  mask-image: linear-gradient(180deg, black, transparent 32%, transparent 68%, black);
}
.section-dark > *{ position: relative; }
.section-dark h2, .section-dark h3{ color: var(--white); }
/* …but not headings inside white cards sitting on the dark section,
   which were inheriting white-on-white and disappearing. */
.section-dark .card h3{ color: var(--ink); }

.grid{ display:grid; gap: clamp(1.2rem, 3vw, 2.4rem); }

.reveal{
  opacity:0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* ---- Jali brick-lattice motif : signature divider ---- */
.jali-divider{
  height: 34px;
  width: 100%;
  background-image: radial-gradient(var(--brick) 1.6px, transparent 1.7px);
  background-size: 18px 18px;
  background-position: center;
  opacity: .35;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, black 60%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 40%, black 60%, transparent);
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--ink); color:var(--white);
  padding: .8em 1.4em; z-index:200; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }

/* Language visibility
   !important here is deliberate: this is a cross-cutting rule that
   must always win regardless of a component's own `display` value
   (e.g. `.stat b{display:block}` or `.menu-group-title{...}`), since
   those set display for layout reasons that have nothing to do with
   language and would otherwise show both languages at once purely by
   having higher selector specificity. */
[data-bn]{ display: none !important; }
html[lang="bn"] [data-en]{ display: none !important; }
html[lang="bn"] [data-bn]{ display: revert !important; }
html[lang="bn"] [data-bn].inline{ display:inline !important; }
html[lang="bn"] [data-bn].block{ display:block !important; }
html[lang="bn"] [data-bn].flex{ display:flex !important; }
html[lang="bn"] [data-bn].grid-d{ display:grid !important; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}