/* Chotpotiwala Green Street - site styles.
   Extracted verbatim from chotpotiwala_site_mockup.html (the approved UI source of truth).
   Class names and rule order are unchanged. Additions are marked and appended at the end. */

:root{
  --navy:#13202C; --navy2:#1B2B3A; --mustard:#F2B632; --red:#C8202A; --cream:#F6F1E8;
  --bg:#F6F1E8; --card:#FFFFFF; --ink:#13212E; --muted:#5A6570; --line:rgba(19,33,46,.12);
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;
  --script:"Kaushan Script","Brush Script MT",cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#101A24;--card:#1A2734;--ink:#F2ECE2;--muted:#A9B3BC;--line:rgba(242,236,226,.12)}
}
:root[data-theme="dark"]{--bg:#101A24;--card:#1A2734;--ink:#F2ECE2;--muted:#A9B3BC;--line:rgba(242,236,226,.12)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);background:var(--navy)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.logo b{font-family:var(--display);font-weight:400;color:var(--mustard);font-size:1.9rem;letter-spacing:.02em;display:flex;align-items:center;gap:.25rem}
.logo b svg{width:1.05em;height:1.05em;margin-top:-.2em}
.logo small{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.85);margin-top:.3rem}
.nav{display:flex;align-items:center;gap:1.8rem}
.nav a.l{text-decoration:none;font-weight:600;color:rgba(255,255,255,.85)}
.nav a.l:hover{color:var(--mustard)}
.burger{display:none;background:none;border:0;color:#fff;padding:.4rem;cursor:pointer}
.burger svg{width:34px;height:34px}
.drawer{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;white-space:nowrap;text-decoration:none;font-family:var(--body);font-weight:800;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;padding:.95rem 1.5rem;border-radius:6px;border:0;cursor:pointer;line-height:1;transition:transform .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn svg{width:.9em;height:.9em}
.btn-y{background:var(--mustard);color:var(--navy)}
.btn-r{background:var(--red);color:#fff}
.btn-sm{font-size:.9rem;padding:.7rem 1rem}

/* Hero */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;min-height:520px;align-items:center}
.hero-copy{padding:3.5rem 0 4rem}
.hero h1{margin:0;font-family:var(--display);font-weight:400;color:var(--mustard);font-size:clamp(3.2rem,7.2vw,6rem);line-height:.95;letter-spacing:.01em}
.hero h2{margin:.5rem 0 1rem;font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.08;max-width:16ch}
.hero p.lede{margin:0 0 2rem;font-size:1.2rem;color:rgba(255,255,255,.88);max-width:30ch}
.hero .ctas{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.hero .ctas .btn{min-width:250px;justify-content:space-between}
.status{margin:1.6rem 0 0;font-weight:600;display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.85)}
.dot{width:10px;height:10px;border-radius:50%;background:#888;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.dot.open{background:#6CC04A;box-shadow:0 0 0 4px rgba(108,192,74,.25)}
.dot.closed{background:var(--red)}
.hero-img{position:absolute;inset:0 0 0 45%;z-index:1}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(19,32,44,.55) 22%,rgba(19,32,44,0) 50%),linear-gradient(0deg,rgba(19,32,44,.5),transparent 35%)}
.hero-sign{position:absolute;right:1.6rem;bottom:1.2rem;z-index:3;font-family:var(--script);color:#fff;font-size:1.7rem;line-height:1;transform:rotate(-8deg);text-align:right}
.hero-sign span{display:block;font-size:1.2rem;margin-right:1.4rem}
.hero-sign::after{content:"";display:block;width:44px;height:3px;background:var(--red);border-radius:3px;margin:.2rem 0 0 auto;transform:rotate(-10deg)}

/* Headings */
.sec{padding:4.5rem 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.8rem}
.h2{margin:0;font-weight:800;font-size:clamp(2rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.01em}
.h2::after{content:"";display:block;width:52px;height:5px;border-radius:3px;background:var(--mustard);margin-top:.6rem}
.see{white-space:nowrap;font-weight:700;color:var(--red);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;font-size:1.1rem}
.see svg{width:.8em;height:.8em}
.sub{color:var(--muted);margin:-.8rem 0 2rem;max-width:44rem}

/* Popular */
.dishes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.dish{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(19,33,46,.08);display:flex;flex-direction:column}
.dish img{width:100%;aspect-ratio:5/4;object-fit:cover}
.dish div{padding:1rem 1.1rem 1.15rem;text-align:center}
.dish h3{margin:0;font-weight:700;font-size:1.2rem;line-height:1.2}
.dish span{display:block;margin-top:.25rem;color:var(--red);font-weight:700}

/* Deals */
.deals{background:var(--navy2);color:#fff}
.deals .sub{color:rgba(255,255,255,.75)}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.deal{background:var(--navy);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.07)}
.deal img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top}
.deal .b{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.deal h3{margin:0;font-weight:700;font-size:1.2rem;line-height:1.2}
.deal p{margin:0;color:rgba(255,255,255,.72);font-size:.98rem}
.deal .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.9rem}
.price{font-family:var(--display);font-size:1.9rem;color:var(--mustard);line-height:1}

/* Menu */
.menu{background:var(--card)}
.tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1.6rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;font-family:var(--body);font-weight:700;font-size:1rem;padding:.6rem 1.1rem;border:2px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;border-radius:999px}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--mustard)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tab[aria-selected="true"]{background:var(--mustard);border-color:var(--mustard);color:var(--navy)}}
:root[data-theme="dark"] .tab[aria-selected="true"]{background:var(--mustard);border-color:var(--mustard);color:var(--navy)}
.list{display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem}
.item{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.item b{font-weight:700;font-size:1.08rem}
.item .p{font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.item small{grid-column:1/-1;color:var(--muted);font-size:.95rem;line-height:1.4}
.note{margin-top:1.5rem;color:var(--muted);font-size:.95rem}

/* Story */
.story{background:var(--navy);color:#fff}
.story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.story p{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:36rem;margin:0 0 1.4rem}
.story .script{font-family:var(--script);color:var(--mustard);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;transform:rotate(-2deg);transform-origin:left;margin:0}
.story img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}

/* Visit */
.visit .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.vrow{display:grid;grid-template-columns:44px 1fr;gap:1rem;align-items:start;margin-bottom:1.5rem}
.vrow svg{width:36px;height:36px}
.vrow .addr{font-size:1.2rem;font-weight:500;margin:.35rem 0 .4rem}
.vrow a{font-weight:700;color:var(--red);text-decoration:none}
.vrow a:hover{text-decoration:underline}
.hours{border-collapse:collapse;font-size:1.1rem;min-width:min(100%,360px)}
.hours td{padding:.35rem 2.2rem .35rem 0}
.hours td:last-child{padding-right:0;font-variant-numeric:tabular-nums}
.hours tr.today td{color:var(--red);font-weight:700}
.sign{color:var(--ink);opacity:.8;width:100%;max-width:380px;justify-self:end}

/* Footer */
footer{background:var(--navy);color:#fff;padding:2.2rem 0 2.4rem}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.fright{display:flex;align-items:center;gap:2rem}
.fsign{font-family:var(--script);font-size:1.6rem;line-height:1;transform:rotate(-8deg);padding-left:2rem;border-left:1px solid rgba(255,255,255,.3)}
.ftag{font-size:.82rem;font-weight:600;letter-spacing:.12em;line-height:1.5;padding-left:2rem;border-left:1px solid rgba(255,255,255,.3);max-width:13em}
.fsmall{width:100%;color:rgba(255,255,255,.6);font-size:.9rem;margin-top:.6rem}

.bar{display:none}

@media (max-width:980px){
  .dishes{grid-template-columns:repeat(2,1fr)}
  .dgrid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;margin-right:-1.25rem;padding-right:1.25rem}
  .deal{scroll-snap-align:start}
}
@media (max-width:820px){
  .nav a.l,.nav .btn{display:none}
  .burger{display:block}
  .drawer{display:block;position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 72px);z-index:39;background:var(--navy);padding:.5rem 1.25rem 1.4rem;transform:translateY(-120%);transition:transform .22s ease;box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .drawer.open{transform:none}
  .drawer a{display:block;color:#fff;text-decoration:none;font-weight:700;font-size:1.25rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .hero .wrap{grid-template-columns:1fr;min-height:0}
  .hero-img{inset:0}
  .hero-img::before{background:linear-gradient(90deg,rgba(19,32,44,.94) 0%,rgba(19,32,44,.78) 55%,rgba(19,32,44,.35) 100%)}
  .hero-copy{padding:3rem 0 4.6rem}
  .hero .ctas .btn{min-width:0;width:min(100%,280px)}
  .hero-sign{right:1rem;bottom:.9rem;font-size:1.4rem}
  .list{grid-template-columns:1fr}
  .story .wrap,.visit .wrap{grid-template-columns:1fr;gap:2rem}
  .sign{justify-self:center;max-width:300px}
  .sec{padding:3.4rem 0}
  .hero h1{font-size:clamp(2.6rem,13vw,4.4rem)}
  .logo b{font-size:1.6rem}
  .logo small{font-size:.62rem;letter-spacing:.1em;white-space:nowrap}
  .head .h2{font-size:1.9rem}
  footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}
  .fright{gap:1.2rem}
  .fsign,.ftag{padding-left:1.2rem}
  .bar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--navy);padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 18px rgba(0,0,0,.2)}
  .bar .btn{padding:.9rem .5rem;font-size:.95rem}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.drawer{transition:none}}

/* ── Additions (not in the mockup) ────────────────────────────────────────
   The mockup built the menu in JavaScript and kept only one category in the
   DOM. We render every category server side so search engines can read the
   whole menu, and the tabs toggle which panel is shown. `.list` is a grid,
   so the hidden attribute needs an explicit override. */
.list[hidden]{display:none}

/* Skip link. Keyboard users land on it before the sticky header. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--mustard);color:var(--navy);font-weight:800;padding:.8rem 1.2rem;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* Privacy page. Plain reading column, using the same type as the rest of
   the site rather than a second set of styles. */
.prose .wrap{max-width:46rem}
.prose h3{margin:2.2rem 0 .6rem;font-size:1.25rem;font-weight:800}
.prose p{margin:0 0 1rem}
.prose .hours{margin:.4rem 0 1.4rem;font-size:1rem}
.prose .hours td{padding:.45rem 1.6rem .45rem 0;vertical-align:top}
.prose .hours td:last-child{color:var(--muted)}
.flink{display:inline-block;margin-left:.6rem;color:rgba(255,255,255,.75);text-decoration:underline}
.flink:hover{color:#fff}

/* <picture> wraps the photographs for the WebP sources. It is an inline
   element by default, which would break every aspect-ratio rule below
   it, so it becomes a block that simply passes its box to the img. */
picture{display:block}
.hero-img picture{width:100%;height:100%}
.dish picture,.deal picture,.story picture{display:block;width:100%}

/* Allergen page. */
.lede-note{font-size:1.15rem;font-weight:600;background:var(--card);border-left:5px solid var(--red);
           border-radius:0 8px 8px 0;padding:1rem 1.2rem;margin:0 0 1.8rem}
.prose h2{margin:2.2rem 0 .6rem;font-size:1.35rem;font-weight:800}
.allergens{columns:2;column-gap:2.5rem;margin:.4rem 0 1.4rem;padding-left:1.2rem}
.allergens li{margin:.2rem 0;break-inside:avoid}
@media (max-width:560px){.allergens{columns:1}}

/* 404 and 500. Same furniture as the rest of the site, so it still looks
   like the shop rather than a server. */
.errorpage{text-align:center;padding:5rem 0 6rem}
.errorpage .ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.errorpage .sub{margin-inline:auto}
.errorpage .note{margin-top:2.5rem}
.errorcode{font-family:var(--display);font-size:clamp(4rem,14vw,7rem);line-height:1;
           color:var(--mustard);margin:0 0 .4rem}
.errorpage h1{display:inline-block}
.errorpage h1::after{margin-inline:auto}

/* Site notice. Mustard on navy so it reads as the shop talking, not as
   a browser warning. */
.notice{background:var(--mustard);color:var(--navy);font-weight:700;
        padding:.75rem 0;box-shadow:inset 0 -1px 0 rgba(19,33,46,.15)}
.notice .wrap{display:flex;align-items:center;gap:.6rem}
.notice .wrap::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;
                      background:var(--red);box-shadow:0 0 0 3px rgba(200,32,42,.25)}