/* ============================================================
   1. TOKENS — built on the current site's burgundy (#4A0E17)
   ============================================================ */
:root{
  --maroon:#4A0E17;
  --maroon-2:#5E1621;
  --maroon-deep:#2C070C;
  --gold:#D4A24C;
  --gold-soft:#EACB8C;
  --linen:#FBF5EA;
  --linen-2:#F3E7D2;
  --ink:#2B1A14;
  --ink-soft:#6A5448;
  --peacock:#1F6A66;
  --chilli:#C0392B;
  --line:rgba(212,162,76,.3);

  --display:"Tiro Devanagari Hindi", Georgia, "Times New Roman", serif;
  --body:"Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-lg:26px; --r-md:16px; --gutter:18px; --bar-h:68px;
  --shadow:0 18px 40px -20px rgba(44,7,12,.55);

  /* Quatrefoil damask, used faintly on maroon */
  --damask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23D4A24C' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M28 10c5 0 8 4 8 8 4 0 8 3 8 8s-4 8-8 8c0 4-3 8-8 8s-8-4-8-8c-4 0-8-3-8-8s4-8 8-8c0-4 3-8 8-8z'/%3E%3Ccircle cx='28' cy='26' r='3'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='56' cy='0' r='3'/%3E%3Ccircle cx='0' cy='56' r='3'/%3E%3Ccircle cx='56' cy='56' r='3'/%3E%3C/g%3E%3C/svg%3E");
  /* Block-print border: buta (paisley) + dots, like a Sanganeri print edge */
  --blockprint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='26'%3E%3Cg fill='%23D4A24C'%3E%3Cpath d='M14 22c-6 0-9-5-7-10 2-5 8-8 12-5 3 2 2 7-2 7-2 0-3-2-2-3 1-1 2 0 2 0-1-3-6-1-7 2-1 4 1 7 5 7 4 0 7-3 8-6 1 5-3 8-9 8z'/%3E%3Ccircle cx='31' cy='8' r='1.8'/%3E%3Ccircle cx='36' cy='13' r='1.8'/%3E%3Ccircle cx='31' cy='18' r='1.8'/%3E%3Ccircle cx='41' cy='8' r='1.2'/%3E%3Ccircle cx='41' cy='18' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--linen);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
img{max-width:100%;display:block;color:transparent;font-size:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--maroon-deep);padding:10px 14px;border-radius:10px;z-index:100;font-weight:600}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.print-edge{height:26px;background:var(--blockprint) repeat-x center;background-color:var(--maroon)}
.print-edge.thin{height:18px;background-size:34px 18px}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;font:600 16px/1 var(--body);text-decoration:none;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:linear-gradient(180deg,#E2B35E,var(--gold));color:var(--maroon-deep);box-shadow:0 10px 24px -12px rgba(212,162,76,.9)}
.btn-gold:hover{background:#EDC271}
.btn-maroon{background:var(--maroon);color:var(--linen)}
.btn-maroon:hover{background:var(--maroon-2)}
.btn-ghost{background:transparent;color:var(--linen);box-shadow:inset 0 0 0 1.5px rgba(251,245,234,.45)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
.btn-line{background:transparent;color:var(--maroon);box-shadow:inset 0 0 0 1.5px var(--maroon)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}

/* ============================================================
   3. HEADER
   ============================================================ */
.topline{background:var(--maroon-deep);color:rgba(251,245,234,.8);font-size:14px}
.topline .wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;min-height:36px}
.topline a{text-decoration:none}
.topline a:hover{color:var(--gold)}
.topline .addr{display:none}
.status{display:inline-flex;align-items:center;gap:7px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.status.open i{background:#6BD49A;box-shadow:0 0 0 4px rgba(107,212,154,.18)}
.header{position:sticky;top:0;z-index:40;background:rgba(74,14,23,.94);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);color:var(--linen);border-bottom:1px solid rgba(212,162,76,.25)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand .mono{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gold);color:var(--maroon-deep);font-family:var(--display);font-size:17px;box-shadow:0 0 0 2px var(--maroon),0 0 0 3px var(--gold)}
.brand b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1;white-space:nowrap;display:block}
.brand small{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:4px;white-space:nowrap}
.nav{display:none}
.nav a{text-decoration:none;font-weight:500;font-size:15.5px;opacity:.88;padding:8px 2px}
.nav a:hover{opacity:1;color:var(--gold)}
.head-actions{display:flex;align-items:center;gap:8px}
.head-actions .btn{min-height:42px;padding:0 14px;font-size:14.5px}
.burger{width:44px;height:44px;border-radius:50%;border:0;background:rgba(251,245,234,.1);color:var(--linen);display:grid;place-items:center;cursor:pointer;flex:none}
.burger svg{width:22px;height:22px}
@media (max-width:479px){.header .brand .mono{display:none}.header .brand small{letter-spacing:.16em}}
@media (max-width:389px){.brand b{font-size:19px}.head-actions .btn{padding:0 12px;font-size:14px}.burger{width:40px;height:40px}}
@media (max-width:329px){.head-actions .btn{display:none}}

.drawer{position:fixed;inset:0;z-index:60;background:var(--maroon);background-image:var(--damask);color:var(--linen);transform:translateX(100%);transition:transform .35s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;padding:18px var(--gutter) 30px;overflow:auto}
.drawer.open{transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.drawer nav a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--display);font-size:32px;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
.drawer nav a span{font-family:var(--body);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.drawer-cta{margin-top:auto;display:grid;gap:10px;padding-top:26px}
.drawer-cta .btn{width:100%}

/* ============================================================
   4. HERO — "The Plate"
   A round thali-plate photo ringed by rotating block-print lettering,
   framed on burgundy damask. The booking card sits right under the
   headline so it's reachable with one thumb.
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--maroon);background-image:radial-gradient(90% 60% at 50% 30%,rgba(212,162,76,.22),transparent 65%),var(--damask);color:var(--linen);padding:26px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;position:relative}
.hero-grid > *{min-width:0}
.hero-copy{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;white-space:nowrap}
.eyebrow::before,.eyebrow::after{content:"";width:18px;height:1px;background:currentColor;flex:none}
@media (max-width:389px){.eyebrow{letter-spacing:.14em;font-size:11px}}
.hero h1{font-size:clamp(38px,10.4vw,76px);margin:12px 0 12px;letter-spacing:-.005em}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .lede{color:rgba(251,245,234,.84);max-width:36ch;margin:0 auto;font-size:17.5px}

.plate{position:relative;width:min(70vw,340px);aspect-ratio:1;margin:0 auto}
.plate-ring{position:absolute;inset:0;width:100%;height:100%;animation:turn 60s linear infinite;color:var(--gold)}
@keyframes turn{to{transform:rotate(360deg)}}
.plate-ring text{font:600 8.2px var(--body);letter-spacing:3.1px;fill:currentColor;text-transform:uppercase}
.plate-rim{position:absolute;inset:14%;border-radius:50%;background:conic-gradient(from 0deg,#b88a3a,#f1d492,#b88a3a,#f1d492,#b88a3a);padding:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.plate-food{width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 40% 35%,#8a3a1a,#4a1a0c 60%,#2c0a06);position:relative}
.plate-food img{width:100%;height:100%;object-fit:cover;animation:slowturn 90s linear infinite reverse}
@keyframes slowturn{to{transform:rotate(360deg) scale(1.02)}}
.plate-food::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 10px rgba(251,245,234,.08),inset 0 -20px 40px rgba(0,0,0,.35)}
.since{position:absolute;right:0;bottom:6%;width:92px;height:92px;border-radius:50%;background:var(--linen);color:var(--maroon);display:grid;place-content:center;text-align:center;line-height:1;box-shadow:0 0 0 4px var(--maroon),0 0 0 5px var(--gold),var(--shadow);transform:rotate(8deg)}
.since small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.since b{font-family:var(--display);font-weight:400;font-size:30px;display:block;margin-top:4px}

/* Booking card */
.tonight{background:var(--linen);color:var(--ink);border-radius:var(--r-lg);padding:20px 18px;box-shadow:0 24px 50px -24px rgba(0,0,0,.6);position:relative;width:100%;max-width:560px;margin:0 auto}
.tonight::before{content:"";position:absolute;left:18px;right:18px;top:0;height:5px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,var(--gold),var(--chilli),var(--gold))}
.tonight-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.tonight h2{font-size:25px}
.busy-pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:999px;background:rgba(192,57,43,.1);color:var(--chilli);white-space:nowrap}
.busy-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}
.busy-pill.calm{background:rgba(31,106,102,.1);color:var(--peacock)}
@keyframes pulse{50%{opacity:.35}}
.tonight p{font-size:15.5px;color:var(--ink-soft);margin-bottom:14px}
.tonight-actions{display:grid;grid-template-columns:1fr auto;gap:10px}
.tonight-actions .btn-maroon{min-height:54px;font-size:17px}
.tonight-actions .btn-line{min-height:54px;padding:0 18px}
@media (max-width:359px){.tonight-actions{grid-template-columns:1fr}}
.tonight .small{font-size:13.5px;color:var(--ink-soft);margin:12px 0 0;text-align:center}
.tonight .small a{color:var(--maroon);font-weight:600}

.hero-foot{margin-top:28px}
.facts{background:var(--maroon-deep);color:var(--linen)}
.facts ul{list-style:none;margin:0;padding:14px 0;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.facts ul::-webkit-scrollbar{display:none}
.facts li{display:flex;align-items:center;gap:8px;font-size:14.5px;flex:none}
.facts b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold)}

/* ============================================================
   5. SECTIONS
   ============================================================ */
.section{padding:64px 0}
.sec-head{text-align:center;margin-bottom:30px}
.sec-head .kicker{display:block;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--chilli);font-weight:600;margin-bottom:8px}
.sec-head h2{font-size:clamp(32px,8.6vw,54px)}
.sec-head .lede{color:var(--ink-soft);max-width:56ch;margin:12px auto 0}
.dark{background:var(--maroon);background-image:var(--damask);color:var(--linen)}
.dark .sec-head .kicker{color:var(--gold)}
.dark .sec-head .lede{color:rgba(251,245,234,.78)}
.left{text-align:left}.left .lede{margin-left:0}

/* ============================================================
   6. OFFERS — "tickets" with punched edges
   ============================================================ */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:6px var(--gutter) 18px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.ticket{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.ticket-top{position:relative;padding:22px 20px 18px;background:var(--maroon);background-image:var(--damask);color:var(--linen);min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.ticket-top.gold{background-color:#8a5a14;background-image:radial-gradient(circle at 80% 0,rgba(255,255,255,.18),transparent 60%),var(--damask)}
.ticket-top.teal{background-color:var(--peacock)}
.ticket-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.ticket-top > *{position:relative}
.ticket .when{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}
.ticket h3{font-size:28px;margin-top:4px}
.ticket .big{font-family:var(--display);font-size:22px;color:var(--gold-soft)}
.ticket-perf{height:0;border-top:2px dashed rgba(106,84,72,.25);margin:0 16px;position:relative}
.ticket-perf::before,.ticket-perf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--linen)}
.ticket-perf::before{left:-28px}.ticket-perf::after{right:-28px}
.ticket-body{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.ticket-body p{font-size:15.5px;color:var(--ink-soft)}
.ticket .terms{font-size:12.5px;color:#8b766a;margin-top:auto;padding-top:4px}
.ticket .btn{margin-top:12px;align-self:flex-start}
.rail-dots{display:flex;justify-content:center;gap:6px;margin-top:4px}
.rail-dots i{width:7px;height:7px;border-radius:50%;background:rgba(43,26,20,.18);transition:all .25s}
.rail-dots i.on{width:22px;border-radius:6px;background:var(--maroon)}
.flash{animation:flash 1.8s ease 1}
@keyframes flash{30%{box-shadow:0 0 0 4px var(--gold),var(--shadow)}}

/* ============================================================
   7. STORY — since 1982
   ============================================================ */
.story .wrap{display:grid;gap:30px}
.story h2{font-size:clamp(32px,8.6vw,52px);margin:10px 0 16px}
.story p{color:rgba(251,245,234,.84)}
.story .pull{font-family:var(--display);font-style:italic;font-size:24px;line-height:1.3;color:var(--gold-soft);border-left:3px solid var(--gold);padding-left:16px;margin:22px 0}
.years{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.year{border-radius:var(--r-md);padding:18px 16px;background:rgba(251,245,234,.06);box-shadow:inset 0 0 0 1px var(--line)}
.year b{display:block;font-family:var(--display);font-weight:400;font-size:40px;line-height:1;color:var(--gold)}
.year span{font-size:14.5px;color:rgba(251,245,234,.78);line-height:1.35;display:block;margin-top:6px}
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:radial-gradient(circle at 50% 30%,#7a2a18,var(--maroon-deep));box-shadow:0 0 0 6px var(--maroon),0 0 0 7px var(--gold)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(44,7,12,.9));font-size:14px}

/* ============================================================
   8. MENU
   ============================================================ */
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1) 22px;padding:6px var(--gutter);position:sticky;top:64px;z-index:5;background:var(--linen)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:44px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;background:transparent;font:600 15px/1 var(--body);color:var(--ink-soft);box-shadow:inset 0 0 0 1.5px rgba(43,26,20,.16)}
.tab[aria-selected="true"]{background:var(--maroon);color:var(--linen);box-shadow:none}
/* Driven by the `hidden` attribute, because that is what eatza-site.js
   toggles. This was .panel / .panel.active, and the engine never adds or
   removes .active — so every tab would have shown an empty section. */
.panel{display:block;animation:rise .35s ease}
.panel[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.panel-intro{font-family:var(--display);font-style:italic;font-size:19px;color:var(--ink-soft);margin:0 0 12px}
.dishes{list-style:none;margin:0;padding:0}
.dish{padding:16px 0;border-bottom:1px solid rgba(43,26,20,.1);scroll-margin-top:140px;border-radius:12px;transition:background .4s,padding .3s}
/* Where a deep link lands. .dish already carried the transition and the
   scroll-margin for this — the highlight itself was simply never written, so
   arriving at #item-vindaloo opened the right tab and then marked nothing.
   Fades out on its own after a few seconds (eatza-site.js). */
.dish.is-flagged{background:rgba(212,162,76,.10);box-shadow:inset 3px 0 0 var(--gold);padding-left:12px;padding-right:12px}
.dish.hl{background:rgba(212,162,76,.2);padding-left:10px;padding-right:10px}
.dish-top{display:flex;align-items:baseline;gap:8px}
.dish h3{font-size:21px}
.dish h3 a{text-decoration:none}
.dish-top::after{content:"";flex:1;order:2;border-bottom:2px dotted rgba(43,26,20,.22);transform:translateY(-5px);min-width:14px}
.dish .price{order:3;font-weight:600;white-space:nowrap}
.dish p{margin:4px 0 8px;color:var(--ink-soft);font-size:15.5px}
.dish-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 9px;border-radius:999px;background:rgba(31,106,102,.12);color:var(--peacock)}
.tag.fav{background:rgba(74,14,23,.1);color:var(--maroon)}
.tag.gold{background:rgba(212,162,76,.22);color:#7a5210}
.heat{display:inline-flex;gap:2px}
.heat svg{width:13px;height:13px;color:var(--chilli)}
.heat svg.off{color:rgba(43,26,20,.15)}
.order-link{margin-left:auto;font-weight:600;font-size:14.5px;color:var(--maroon);text-decoration:none;padding:6px 0}
.order-link:hover{color:var(--chilli)}
.regulars{margin:0 0 20px;padding:14px 16px;border-radius:var(--r-md);background:var(--linen-2);font-size:15px;color:var(--ink-soft)}
.regulars b{color:var(--maroon)}
.menu-foot{margin-top:26px;display:grid;gap:12px;text-align:center}
.menu-foot small{color:var(--ink-soft)}
.menu-foot a{color:var(--maroon)}

/* ============================================================
   9. BOOKING — busy guide + occasions
   ============================================================ */
.book{background:var(--linen-2)}
.book .wrap{display:grid;gap:28px}
.busy-guide{background:#fff;border-radius:var(--r-lg);padding:20px 18px;box-shadow:var(--shadow)}
.busy-guide h3{font-size:24px;margin-bottom:4px}
.busy-guide > p{font-size:15px;color:var(--ink-soft);margin-bottom:16px}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:150px;margin-bottom:8px}
.bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.bar i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--gold),#c48c30)}
.bar.hot i{background:linear-gradient(180deg,var(--chilli),var(--maroon))}
.bar.today span{color:var(--maroon);text-decoration:underline;text-underline-offset:3px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;background:var(--gold)}
.legend i.hot{background:var(--chilli)}
.tips{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.tips li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;color:var(--ink-soft)}
.tips li b{color:var(--ink)}
.tips svg{width:22px;height:22px;color:var(--maroon);margin-top:2px}
.occasions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.occasion{border:0;width:100%;text-align:left;cursor:pointer;background:var(--linen);border-radius:var(--r-md);padding:14px;box-shadow:inset 0 0 0 1px var(--line);font:inherit;color:inherit;transition:transform .15s,box-shadow .2s;height:100%}
.occasion:hover{box-shadow:inset 0 0 0 1.5px var(--maroon)}
.occasion:active{transform:scale(.98)}
.occasion svg{width:26px;height:26px;color:var(--chilli);margin-bottom:6px}
.occasion b{display:block;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.15}
.occasion small{display:block;color:var(--ink-soft);font-size:13.5px;line-height:1.35;margin-top:3px}
.book-cta{margin-top:18px;display:grid;gap:10px}
.book-cta .btn{width:100%}
.book-cta p{text-align:center;font-size:14.5px;color:var(--ink-soft);margin:0}
.book-cta p a{color:var(--maroon);font-weight:600}

/* ============================================================
   10. EVENTS
   ============================================================ */
.events-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ev{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:18px 16px;border-radius:var(--r-md);background:rgba(251,245,234,.06);box-shadow:inset 0 0 0 1px var(--line)}
.ev-date{text-align:center;border-right:1px solid var(--line);padding-right:12px;line-height:1}
.ev-date b{display:block;font-family:var(--display);font-weight:400;font-size:38px;color:var(--gold)}
.ev-date small{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:6px;color:rgba(251,245,234,.75)}
.ev h3{font-size:23px;margin-bottom:4px}
.ev .meta{font-size:13.5px;color:var(--gold-soft);font-weight:600;margin-bottom:6px}
.ev p{font-size:15.5px;color:rgba(251,245,234,.8);margin-bottom:12px}
.ev.feature{background:linear-gradient(135deg,rgba(212,162,76,.22),rgba(192,57,43,.18));box-shadow:inset 0 0 0 1.5px var(--gold)}

/* ============================================================
   11. REVIEWS
   ============================================================ */
.score{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-8px 0 26px}
.score span{background:#fff;border-radius:999px;padding:8px 14px;font-size:14.5px;box-shadow:inset 0 0 0 1px var(--line)}
.score b{color:var(--maroon)}
.quotes{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 16px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none}
.quotes::-webkit-scrollbar{display:none}
.quote{scroll-snap-align:start;background:#fff;border-radius:var(--r-md);padding:22px 20px;box-shadow:var(--shadow);margin:0;display:flex;flex-direction:column}
.quote .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.quote blockquote{margin:10px 0 14px;font-family:var(--display);font-size:21px;line-height:1.35}
.quote figcaption{margin-top:auto}
.quote figcaption{font-size:14px;color:var(--ink-soft)}

/* ============================================================
   12. NEIGHBOURHOOD
   ============================================================ */
.hood .wrap{display:grid;gap:24px}
.spots{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.spot{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;padding:16px;background:#fff;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line)}
.spot .pin{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--linen-2);color:var(--maroon)}
.spot .pin svg{width:24px;height:24px}
.spot h3{font-size:20px}
.spot p{margin:2px 0 0;font-size:15px;color:var(--ink-soft)}
.spot em{font-style:normal;color:var(--chilli);font-weight:600;font-size:13px;letter-spacing:.06em}

/* ============================================================
   13. TAKEAWAY
   ============================================================ */
.takeaway .wrap{display:grid;gap:18px}
.takeaway h2{font-size:clamp(30px,8vw,46px);margin:10px 0}
.takeaway p{color:rgba(251,245,234,.84)}
.postcodes{list-style:none;margin:10px 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.postcodes li{padding:8px 14px;border-radius:999px;background:rgba(251,245,234,.08);box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.postcodes b{color:var(--gold);margin-right:6px;font-weight:600}
.takeaway .cta{display:flex;flex-wrap:wrap;gap:10px}

/* ============================================================
   14. FAQ + FIND US
   ============================================================ */
.faq-list{max-width:780px;margin:0 auto}
.faq-list details{border-bottom:1px solid rgba(43,26,20,.14)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--display);font-size:20px;padding:16px 0;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--body);font-size:26px;color:var(--chilli);transition:transform .25s;flex:none}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{color:var(--ink-soft);margin:0 0 16px}
.faq-list a{color:var(--maroon);font-weight:600}
.find .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.card{background:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:inset 0 0 0 1px var(--line)}
.card h2,.card h3{font-size:26px;margin-bottom:12px}
.card dl{margin:0;display:grid;gap:14px}
.card dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.card dd{margin:2px 0 0;font-size:17px;overflow-wrap:anywhere}
.card dd a{color:var(--maroon);font-weight:600;text-decoration:none}
.card .getting{font-size:15px;color:var(--ink-soft);margin:16px 0 0}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(43,26,20,.15)}
.hours li.today{font-weight:700;color:var(--maroon)}
.map{border-radius:var(--r-lg);overflow:hidden;min-height:300px;position:relative;background:var(--maroon)}
.map iframe{width:100%;height:100%;min-height:300px;border:0;display:block}
.map-cover{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--linen);background-image:var(--damask);padding:20px}

/* ============================================================
   15. FOOTER + ACTION BAR
   ============================================================ */
.footer{background:var(--maroon-deep);color:rgba(251,245,234,.8);padding:48px 0 28px;font-size:15px}
.footer .wrap{display:grid;gap:26px}
.footer h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--gold)}
.footer .fine{border-top:1px solid var(--line);padding-top:18px;font-size:13px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:8px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(44,7,12,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -8px 24px -10px rgba(0,0,0,.5)}
.actionbar a,.actionbar button{min-height:50px;border-radius:14px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 12.5px/1 var(--body);text-decoration:none;color:var(--linen);background:rgba(251,245,234,.08);cursor:pointer}
.actionbar svg{width:20px;height:20px}
.actionbar .primary{background:var(--gold);color:var(--maroon-deep);flex-direction:row;gap:8px;font-size:16px;white-space:nowrap}
@media (max-width:389px){.actionbar .primary{font-size:14.5px;gap:6px}}

/* ============================================================
   16. LARGER SCREENS (everything above is the phone)
   ============================================================ */
@media (min-width:720px){
  :root{--gutter:28px}
  .topline .addr{display:inline}
  .rail{grid-auto-columns:calc((100% - 28px) / 2.3)}
  .quotes{grid-auto-columns:calc((100% - 28px) / 2.3)}
  .years{grid-template-columns:repeat(4,1fr)}
  .occasions{grid-template-columns:repeat(3,1fr)}
  .spots{grid-template-columns:1fr 1fr}
  .footer .wrap{grid-template-columns:2fr 1fr 1fr 1fr}
  .footer .fine{grid-column:1 / -1}
}
@media (min-width:1040px){
  body{padding-bottom:0}
  .actionbar{display:none}
  .nav{display:flex;gap:22px}
  .burger{display:none}
  .hero{padding-top:56px}
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:30px 56px}
  .hero-copy{text-align:left}
  .hero .lede{margin-left:0}
  .plate{grid-column:2;grid-row:1 / span 2;width:min(100%,470px)}
  .tonight{grid-column:1;margin:0}
  .section{padding:96px 0}
  .rail{grid-auto-columns:calc((100% - 42px) / 4);overflow:visible;margin:0;padding:6px 0 18px}
  .rail-dots{display:none}
  .quotes{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:4px 0 16px}
  .story .wrap{grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
  .story .years{grid-column:1 / -1}
  .tabs{justify-content:center}
  .dishes{columns:2;column-gap:48px}
  .dish{break-inside:avoid}
  .book .wrap{grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .events-list{grid-template-columns:1fr 1fr}
  .ev.feature{grid-column:1 / -1}
  .hood .wrap{grid-template-columns:.8fr 1.2fr;align-items:start;gap:48px}
  .takeaway .wrap{grid-template-columns:1.2fr .8fr;align-items:center;gap:48px}
  .find .wrap{grid-template-columns:1fr 1fr 1.2fr;align-items:stretch}
}


/* ============================================================
   WHAT THE SHARED ENGINE INJECTS
   ============================================================
   eatza-site.js builds its own cards from the shop's live promotions and puts
   them in .offer-grid. They arrive as .offer > .offer-img + .offer-body, and
   this design's own cards are .ticket — so the engine's anatomy is dressed as
   a ticket here rather than by editing the engine, which is the same file on
   every client site. The hand-written .ticket.offer cards stay in the markup
   and show when the shop has no live promotions.
   ============================================================ */
.offer{position:relative;display:flex;flex-direction:column;background:#fff;
       border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.offer-img{position:relative;min-height:150px;background:var(--maroon);
           background-image:var(--damask);overflow:hidden}
.offer-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
/* No picture: the maroon damask panel on its own. Nothing to load, nothing to
   break, and it still reads as the top half of a ticket. */
.offer-img--none{min-height:120px}
.offer-body{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.offer-body h3{font-size:24px;margin:0 0 6px}
.offer-body p{font-size:15.5px;color:var(--ink-soft)}
.offer .deal{align-self:flex-start;margin-bottom:10px;padding:4px 12px;border-radius:999px;
             background:var(--maroon);color:var(--linen);font-size:13px;font-weight:700}
.offer .btn{margin-top:12px;align-self:flex-start}

/* Filled by eatza-site.js only when the till has switched a service off —
   "Collection only right now". Empty the rest of the time, and an empty
   element with margin still pushes the layout about, so it collapses. */
.service-note{margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.06em;
              text-transform:uppercase;color:var(--gold-soft)}
.service-note:empty{display:none}


/* ============================================================
   LEGAL PAGES — /cookie-policy/, /privacy-policy/, /terms/
   ============================================================
   Those three share this stylesheet but none of the home page's furniture, so
   they carry their own header, footer and prose classes. The rules came from
   Rocce with its palette swapped for this one: brass becomes --gold-soft and
   the dark grounds become --maroon.
   ============================================================ */
.site-head .head-cta{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
/* ============================================================
   4. HEADER
   ============================================================ */
.topbar{
  background:var(--maroon); border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.85rem; color:var(--ink-soft);
}
.topbar .wrap{display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; padding-block:8px; text-align:center}
.topbar a{text-decoration:none}
.topbar a:hover{color:var(--gold-soft)}
.open-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--peacock); margin-right:7px; vertical-align:middle}
.site-head{
  position:sticky; top:0; z-index:80;
  background:var(--maroon);
  border-bottom:1px solid rgba(0,0,0,.28);
}
.site-head .wrap{display:flex; align-items:center; gap:22px; padding-block:14px}
.site-head .wrap{flex-wrap:wrap}
.head-cta{order:2}
.site-head .wrap{gap:14px; padding-block:10px}
.sec-head .brass-line{width:56px; height:3px; background:var(--maroon); margin-bottom:22px}
/* Reopening it from the footer — consent has to be as easy to withdraw as it
   was to give, which means a permanent way back to this. */
.cc-reopen{background:none; border:0; padding:0; font:inherit; color:inherit;
           text-decoration:underline; cursor:pointer}
.cc-reopen:hover{color:var(--gold-soft)}
/* ============================================================
   LEGAL PAGES  (/privacy-policy/, /cookie-policy/, /terms/)
   Long-form prose, so a narrower measure and more air than the rest of the
   site. Nothing here is decorative — these pages are read when something has
   gone wrong, and the job is to be findable and legible.
   ============================================================ */
.legal{max-width:70ch}
.legal h2{font-size:clamp(1.35rem,2.6vw,1.75rem); margin:44px 0 14px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.08rem; color:var(--gold-soft); margin:28px 0 8px; font-family:var(--ink); font-weight:700}
.legal p, .legal li{font-size:1rem; line-height:1.7}
.legal ul, .legal ol{padding-left:1.2em; margin:0 0 1.1em}
.legal li{margin-bottom:.5em}
.legal li::marker{color:var(--gold-soft)}
.legal a{color:var(--maroon)}
.legal dl{margin:0 0 1.1em}
.legal dt{font-weight:700; color:var(--linen); margin-top:14px}
.legal dd{margin:2px 0 0}
.legal .updated{font-size:.88rem; color:var(--gold-soft); margin-bottom:34px}
.legal table{width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.94rem}
.legal th, .legal td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.legal th{color:var(--gold-soft); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700}
.legal .box{
  background:var(--maroon); border-left:3px solid var(--gold-soft);
  padding:18px 20px; border-radius:0; margin:0 0 1.4em;
}
.legal .box p:last-child{margin-bottom:0}
.foot-logo{height:52px; width:auto; margin-bottom:14px}
.site-foot{background:var(--ink); border-top:1px solid rgba(255,255,255,.07); padding-block:46px 30px; font-size:.9rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.site-foot h4{font-size:.76rem; letter-spacing:.16em; color:var(--gold-soft); font-family:var(--ink); font-weight:700; margin-bottom:14px}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:9px}
.site-foot a{text-decoration:none; color:var(--ink-soft)}
.site-foot a:hover{color:var(--linen)}
.foot-bottom{margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.83rem}

/* The header on those pages is its own band rather than sitting over a
   photograph, so the wordmark cannot inherit its colour from one. */
.site-head{background:var(--maroon)}
.site-head .brand b{color:var(--linen)}
.site-head .brand small{color:var(--gold-soft)}
.legal .box{color:var(--linen)}
.legal .box b,.legal .box strong{color:var(--linen)}

/* ============================================================
   A FACT THE SHOP STILL HAS TO SUPPLY
   Deliberately loud, so an unanswered one cannot quietly go live — which is
   exactly what happened with the company number, where one client's was
   copied onto three others' privacy and terms pages. Remove the wrapper, not
   the class, once the real value is in.
   ============================================================ */
.supply{background:#FFF07A;color:#141414;padding:1px 5px;border-radius:3px;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.supply::before{content:"⚠ "}