:root{
  --kadak:#160C08;      /* brewed chai, the page base */
  --pot:#2A1810;        /* raised surfaces */
  --doodh:#F0DEC0;      /* milk-tea cream, primary text */
  --tan:#B8956A;        /* logo tan, secondary text + lines */
  --marigold:#F2A900;   /* highlight */
  --masala:#E0432B;     /* the one hot colour: primary action */
  --ink:#160C08;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --r-lg:22px; --r-md:14px; --r-pill:999px;
  --display:'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --body:'Baloo 2', 'Segoe UI', Roboto, system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--kadak);color:var(--doodh);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase}
h2{font-size:clamp(2.4rem,9vw,4rem);margin-bottom:.35em}
h2 .hi{font-family:var(--body);font-weight:800;text-transform:none;font-size:.42em;color:var(--marigold);display:block;letter-spacing:0;line-height:1.2;margin-bottom:.15em}
section{padding:56px 20px 20px}
.wrap{max-width:720px;margin:0 auto}
p.lead{font-size:1.1rem;max-width:34ch;color:var(--doodh)}
.muted{color:var(--tan)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 12px}
.fact{background:var(--pot);border-radius:var(--r-md);padding:14px 8px 12px;text-align:center}
.fact b{display:block;font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1;color:var(--marigold)}
.fact b i{font-style:normal;font-size:.6em;color:var(--tan)}
.fact span{font-size:.85rem;font-weight:600;color:var(--tan)}
.lineup{display:flex;flex-wrap:wrap;gap:6px}
.lineup span{padding:6px 12px;border-radius:var(--r-pill);border:1.5px solid var(--tan);font-size:.9rem;font-weight:600}

/* top bar */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(var(--kadak) 70%,transparent);pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em}
.brand img{width:38px;height:38px;border-radius:50%}
.wa{width:44px;height:44px;border-radius:50%;background:#25D366;color:#062b12;display:grid;place-items:center;box-shadow:var(--shadow)}
.wa svg{width:24px;height:24px}

/* hero */
.hero{position:relative;padding:0 0 28px;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
@property --dot{syntax:'<percentage>';inherits:false;initial-value:34%}
.hero .photo{position:absolute;inset:0 0 auto 0;height:64%;overflow:hidden;background:var(--pot)}
.hero .photo video,.hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero .photo .dots{position:absolute;inset:0;--dot:44%;background:radial-gradient(circle,transparent var(--dot),var(--kadak) calc(var(--dot) + 4%)) 0 0/6px 6px;animation:morph 9s ease-in-out infinite;mix-blend-mode:multiply;opacity:.85}
@keyframes morph{0%,100%{--dot:46%}50%{--dot:30%}}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,12,8,.6) 0%,rgba(22,12,8,0) 25%,rgba(22,12,8,0) 55%,var(--kadak) 100%)}
.hero .inner{position:relative;padding:0 20px}
.glass{position:relative;width:96px;margin:0 0 14px;overflow:visible}
.glass img{width:96px;height:96px;border-radius:50%;border:3px solid var(--tan)}
.steam{position:absolute;left:50%;top:-34px;width:60px;height:60px;transform:translateX(-50%);pointer-events:none}
.steam path{fill:none;stroke:var(--doodh);stroke-width:2.2;stroke-linecap:round;opacity:.0;animation:rise 3.4s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.1s}
.steam path:nth-child(3){animation-delay:2.2s}
@keyframes rise{0%{transform:translateY(14px);opacity:0}30%{opacity:.75}100%{transform:translateY(-22px);opacity:0}}
.hero h1{font-size:clamp(4.4rem,22vw,9rem);line-height:.82}
.hero h1 .hindi{font-family:var(--body);font-weight:800;text-transform:none;display:block;font-size:.5em;color:var(--marigold);line-height:1;margin-top:.1em}
.hero .tag{margin:18px 0 22px;max-width:30ch;font-size:1.15rem}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--r-pill);font-weight:700;font-size:1.05rem;text-decoration:none;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--masala);color:#fff;box-shadow:0 8px 24px rgba(224,67,43,.35)}
.btn.ghost{border:2px solid var(--tan);color:var(--doodh)}
.btn.soft{background:var(--pot);color:var(--doodh)}

/* ticker */
.ticker{overflow:hidden;background:var(--marigold);color:var(--ink);transform:rotate(-2deg) scale(1.04);margin:8px 0 12px;padding:10px 0;font-family:var(--display);font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ticker span{display:inline-block;padding-right:2.2em;animation:slide 26s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}

/* ticket */
.ticket{background:var(--doodh);color:var(--ink);border-radius:var(--r-lg);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.ticket .stub{padding:22px 20px 18px;border-bottom:2px dashed rgba(22,12,8,.25);position:relative}
.ticket .stub::before,.ticket .stub::after{content:"";position:absolute;bottom:-14px;width:28px;height:28px;border-radius:50%;background:var(--kadak)}
.ticket .stub::before{left:-14px}.ticket .stub::after{right:-14px}
.ticket .date{font-family:var(--display);font-size:3.2rem;line-height:.9}
.ticket .date small{display:block;font-family:var(--body);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:#7a5a36}
.ticket .where{margin-top:10px;font-weight:600}
.ticket .foot{display:flex;gap:10px;padding:16px 20px 20px;flex-wrap:wrap}
.ticket .foot .btn{min-height:46px}
.ticket.past{background:var(--pot);color:var(--doodh)}
.ticket.past .date small{color:var(--tan)}
.ticket.past .stub{border-color:rgba(240,222,192,.25)}
.list{display:grid;gap:14px;margin-bottom:18px}
.notify{border:2px dashed var(--tan);border-radius:var(--r-lg);padding:18px;margin-bottom:22px}
.notify strong{display:block;font-size:1.15rem;margin-bottom:8px}
.notify .row{display:flex;gap:8px;margin-bottom:6px}
.notify input{flex:1;min-width:0;min-height:52px;border-radius:var(--r-pill);border:2px solid var(--tan);background:var(--pot);color:var(--doodh);padding:0 16px;font:inherit}
.notify .btn{min-height:52px;padding:0 18px}

/* reels + gallery */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 18px;margin:0 -20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
.reel{width:min(72vw,260px);aspect-ratio:9/16;border-radius:var(--r-md);background:var(--pot);position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;padding:16px}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.reel .play{position:relative;width:64px;height:64px;border-radius:50%;background:var(--doodh);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow)}
.reel .cap{position:absolute;left:12px;right:12px;bottom:12px;font-size:.9rem;font-weight:600;text-align:left;text-shadow:0 1px 6px #000}
.igrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.iglink{font-weight:700;color:var(--marigold);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.iglink svg{width:22px;height:22px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid button{border-radius:var(--r-md);overflow:hidden;aspect-ratio:1;background:var(--pot)}
.grid button:nth-child(1){grid-column:span 2;aspect-ratio:16/8}
.grid img{width:100%;height:100%;object-fit:cover}
dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
dialog.lb::backdrop{background:rgba(0,0,0,.92)}
dialog.lb img{width:100%;height:100%;object-fit:contain}
dialog.lb button{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--doodh);color:var(--ink);font-size:1.4rem}

/* team */
.member{width:min(74vw,280px);aspect-ratio:4/5.6;perspective:1200px;text-align:left;border-radius:var(--r-lg)}
.member .card{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.member[aria-pressed="true"] .card{transform:rotateY(180deg)}
.member .front,.member .back{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;background:var(--pot);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.member .back{transform:rotateY(180deg);padding:18px;display:flex;flex-direction:column;gap:6px;background:var(--doodh);color:var(--ink)}
.member img,.member .face{width:100%;height:100%;object-fit:cover;object-position:top}
.member .face{display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--pot) 0 10px,#33201a 10px 20px);color:var(--tan);font-weight:700}
.member .m{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(22,12,8,.92))}
.member h3{font-size:1.5rem;text-transform:none;font-family:var(--body);font-weight:800;line-height:1.1}
.member .role{color:var(--masala);font-weight:700}
.member .back p{font-size:.95rem;line-height:1.4;flex:1}
.flipcue{font-size:.8rem;font-weight:700;color:var(--marigold);display:inline-flex;align-items:center;gap:4px}
.flipcue::before{content:"↻"}
.member .back .flipcue{color:#7a5a36}
@media (prefers-reduced-motion:reduce){.member .card{transition:none}}

/* menu */
.tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -20px 14px;padding:0 20px 4px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:9px 16px;border-radius:var(--r-pill);border:2px solid var(--tan);font-weight:700;color:var(--tan)}
.tab[aria-selected="true"]{background:var(--doodh);color:var(--ink);border-color:var(--doodh)}
.menu{background:var(--doodh);color:var(--ink);border-radius:var(--r-lg);padding:6px 18px}
.menu li{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(22,12,8,.2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu li .add{width:34px;height:34px;border-radius:50%;border:2px solid #7a5a36;display:grid;place-items:center;font-weight:800;color:#7a5a36;flex:0 0 auto}
.menu li.in .add{background:var(--masala);border-color:var(--masala);color:#fff}
.menu li .right{display:flex;align-items:center;gap:10px}
.reqbar{margin-top:12px;background:var(--pot);border-radius:var(--r-md);padding:12px 14px;display:none;justify-content:space-between;align-items:center;gap:10px}
.reqbar.on{display:flex}
.reqbar b{color:var(--marigold)}
.menu li:last-child{border:0}
.menu li span:last-child{color:#7a5a36;font-weight:600;white-space:nowrap}
.menu li b{font-weight:700}
.menu li small{display:block;color:#7a5a36}
.strength{font-weight:800;color:var(--masala);letter-spacing:.1em}

/* book */
.slip{background:var(--doodh);color:var(--ink);border-radius:var(--r-lg);padding:20px 18px 22px;box-shadow:var(--shadow)}
.slip h3{font-family:var(--body);font-weight:800;text-transform:none;font-size:1.25rem;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips label{padding:9px 14px;border-radius:var(--r-pill);border:2px solid #7a5a36;font-weight:600;cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label:has(input:checked){background:var(--ink);color:var(--doodh);border-color:var(--ink)}
.chips label:has(input:focus-visible){outline:3px solid var(--masala)}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-weight:700;font-size:.95rem;margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;min-height:50px;border:2px solid #7a5a36;border-radius:12px;padding:10px 14px;font:inherit;background:#fff;color:var(--ink)}
.field textarea{min-height:90px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.arc{border:0;margin:4px 0 18px;display:grid;gap:8px}
.arc legend{font-weight:700;font-size:.95rem;margin-bottom:8px}
.arc label{position:relative;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;border:2px solid #7a5a36;border-radius:var(--r-md);cursor:pointer;background:#fff}
.arc input{position:absolute;opacity:0;width:0;height:0}
.arc svg{grid-row:span 2;width:64px;height:28px;stroke:#7a5a36;stroke-width:3;fill:none;stroke-linecap:round}
.arc b{font-size:1.05rem}
.arc small{color:#7a5a36;font-size:.85rem;line-height:1.3}
.arc label:has(input:checked){background:var(--ink);color:var(--doodh);border-color:var(--ink)}
.arc label:has(input:checked) svg{stroke:var(--marigold)}
.arc label:has(input:checked) small{color:var(--tan)}
.arc label:has(input:focus-visible){outline:3px solid var(--masala)}
.kadak{margin:6px 0 18px}
.kadak .scale{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;color:#7a5a36;margin-top:2px}
.kadak output{display:block;text-align:center;margin-top:8px;min-height:64px}
.kadak output b{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--masala);text-transform:uppercase;letter-spacing:.02em}
.kadak output small{display:block;color:#7a5a36;font-size:.88rem;line-height:1.3;max-width:34ch;margin:2px auto 0}
input[type=range]{width:100%;accent-color:var(--masala);height:44px}
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.contacts a{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--r-md);background:var(--pot);text-decoration:none;font-weight:700;min-height:56px}
.contacts a svg{width:22px;height:22px;flex:0 0 auto;color:var(--marigold)}
.contacts a small{display:block;font-weight:500;color:var(--tan);font-size:.85rem}
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);background:var(--marigold);color:var(--ink);padding:12px 18px;border-radius:var(--r-pill);font-weight:700;opacity:0;transition:.3s;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

footer{padding:36px 20px 24px;text-align:center;color:var(--tan);font-size:.9rem}
footer img{width:72px;margin:0 auto 12px;border-radius:50%}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(42,24,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(184,149,106,.25);padding:8px 8px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr 1fr;align-items:end}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;font-size:.72rem;font-weight:700;color:var(--tan);padding:6px 2px;border-radius:12px}
.nav a svg{width:24px;height:24px}
.nav a.on{color:var(--doodh)}
.nav .book{transform:translateY(-14px)}
.nav .book .pill{width:60px;height:60px;border-radius:50%;background:var(--masala);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(224,67,43,.45)}
.nav .book .pill svg{width:26px;height:26px}
/* chai-glass scroll fill lives in the Home icon */
#fill{transition:height .2s}

@media (min-width:760px){
  body{padding-bottom:0}
  .nav{display:none}
  .hero{min-height:80vh}
  .hero .inner{max-width:720px;margin:0 auto;width:100%}
  section{padding:80px 20px 30px}
}
@media (prefers-reduced-motion:reduce){
  .steam path,.ticker span,.hero .photo .dots{animation:none}
  .steam path{opacity:.6}
  html{scroll-behavior:auto}
}