/* ============================================================
   1. TOKENS — Chesham Tandoori brand: #A33722 on #111, white, greys
   ============================================================ */
:root{
  --black:#111111;
  --black-2:#1A1A1A;
  --black-3:#242424;
  --red:#A33722;
  --red-2:#B8432C;
  --white:#FFFFFF;
  --off:#F6F4F1;
  --grey:#8A8A8A;
  --grey-2:#B8B8B8;
  --ink:#1B1B1B;
  --ink-soft:#5E5E5E;
  --rule:rgba(255,255,255,.14);
  --rule-dark:rgba(17,17,17,.12);

  --head:"Oswald","Arial Narrow",Arial,sans-serif;
  --body:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gutter:20px; --bar-h:66px; --r:3px;
  --img-hero:url("../img/2.webp");
}
*,*::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(--white);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.7;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;color:transparent;font-size:0}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;margin:0}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Labels & rules — the signature detail: a short red rule before a spaced label */
.label{display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-size:12.5px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--red)}
.label::before{content:"";width:28px;height:2px;background:var(--red);flex:none}
.on-dark .label{color:#fff}

/* ============================================================
   2. BUTTONS — square, uppercase, spaced
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r);border:0;cursor:pointer;font:500 14px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-white{background:#fff;color:var(--black)}
.btn-white:hover{background:var(--off)}
.btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.btn-outline:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.06)}
.btn-dark{background:transparent;color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.btn-dark:hover{background:var(--black);color:#fff}
.btn-sm{min-height:44px;padding:0 18px;font-size:13px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--red);text-decoration:none;padding:8px 0}
.link-arrow svg{width:16px;height:16px;transition:transform .2s}
.link-arrow:hover svg{transform:translateX(4px)}

/* ============================================================
   3. HEADER
   ============================================================ */
.header{position:fixed;top:0;left:0;right:0;z-index:40;color:#fff;transition:background .3s,box-shadow .3s}
.header.solid{background:rgba(17,17,17,.96);box-shadow:0 1px 0 var(--rule);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:12px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;min-width:0}
.brand b{font-family:var(--head);font-weight:500;font-size:21px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.brand small{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--head);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--grey-2);white-space:nowrap}
.brand small::before{content:"";width:16px;height:1.5px;background:var(--red)}
.nav{display:none}
.nav a{white-space:nowrap;font-family:var(--head);font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.82);padding:10px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1.5px;background:var(--red);transition:right .25s}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.head-actions{display:flex;align-items:center;gap:10px}
.head-actions .btn{min-height:42px;padding:0 16px;font-size:12.5px;letter-spacing:.16em}
.burger{width:44px;height:44px;border:0;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.burger span{display:block;width:24px;height:1.5px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
@media (max-width:429px){.head-actions .btn{display:none}}
@media (max-width:359px){.brand b{font-size:18px;letter-spacing:.12em}}

.drawer{position:fixed;inset:0;z-index:60;background:var(--black);color:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;display:flex;flex-direction:column;padding:0 var(--gutter) 28px;overflow:auto}
.drawer.open{opacity:1;visibility:visible}
.drawer-top{display:flex;justify-content:space-between;align-items:center;min-height:68px;margin-bottom:18px}
.drawer .close{width:44px;height:44px;border:0;background:none;color:#fff;font-size:30px;font-weight:300;cursor:pointer;line-height:1}
.drawer nav a{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule);font-family:var(--head);font-size:26px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.drawer nav a span{font-size:11px;letter-spacing:.3em;color:var(--grey)}
.drawer nav a:first-child span{color:var(--red-2)}
.drawer-cta{margin-top:auto;display:grid;gap:10px;padding-top:24px}
.drawer-cta .btn{width:100%}

/* ============================================================
   4. HERO — full-bleed photography, crisp type, outlined 1978
   ============================================================ */
.hero{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:#0b0b0b;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--img-hero) center/cover no-repeat,radial-gradient(90% 70% at 70% 30%,#3a2019,#0b0b0b);transform:scale(1.06);animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.92) 100%)}
.hero > .wrap{position:relative;z-index:2}
.year-mark{position:absolute;z-index:1;right:-6px;top:84px;font-family:var(--head);font-weight:600;font-size:clamp(120px,38vw,360px);line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);pointer-events:none;user-select:none}
.hero-copy{padding:120px 0 28px;max-width:720px}
.hero-copy .label{color:#fff;margin-bottom:18px}
.hero h1{font-size:clamp(42px,12vw,92px);font-weight:500;letter-spacing:.02em;line-height:.98}
.hero h1 span{display:block;color:var(--grey-2);font-weight:300;font-size:max(15px,.3em);letter-spacing:.28em;margin-top:18px;line-height:1.4}
.hero .lede{font-size:17px;color:rgba(255,255,255,.82);max-width:40ch;margin:18px 0 26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-ctas .btn{flex:1 1 auto}
@media (min-width:480px){.hero-ctas .btn{flex:0 0 auto}}

/* Status strip across the bottom of the hero */
.strip{position:relative;z-index:2;border-top:1px solid var(--rule);margin-top:34px}
.strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.strip li{padding:16px 0;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.4}
.strip li:nth-child(2){padding-left:16px;border-left:1px solid var(--rule)}
.strip li:nth-child(3){display:none}
.strip b{display:block;font-family:var(--head);font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:3px}
.strip a{text-decoration:none}
/* 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-family:var(--head);font-size:12px;letter-spacing:.18em;
              text-transform:uppercase;color:var(--red)}
.service-note:empty{display:none}
/* Green by default: eatza-site.js only touches this when the kitchen says it
   is shut, and it greys it with an inline style, which wins over this. The old
   rule was the other way round and waited for a .open class nothing adds. */
.strip .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5FD38D;
            box-shadow:0 0 0 4px rgba(95,211,141,.2);margin-right:8px;vertical-align:middle}
.strip .open .dot{background:#5FD38D;box-shadow:0 0 0 4px rgba(95,211,141,.2)}

/* ============================================================
   5. RESERVE PANEL — sits directly under the hero
   ============================================================ */
.reserve{background:var(--black-2);color:#fff;border-top:3px solid var(--red)}
.reserve .wrap{display:grid;gap:18px;padding-top:26px;padding-bottom:28px}
.tt-flag{display:none;align-items:center;gap:10px;font-family:var(--head);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--red);padding:10px 14px;border-radius:var(--r)}
.tt-flag.on{display:flex}
.reserve-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.reserve h2{font-size:24px;letter-spacing:.1em;font-weight:400}
.pill{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-2);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.8s ease-in-out infinite}
.pill.calm{color:#6FCB93}
@keyframes pulse{50%{opacity:.3}}
.reserve p{color:rgba(255,255,255,.7);font-size:15.5px;margin:0}
.reserve-actions{display:grid;grid-template-columns:1fr auto;gap:10px}
.reserve-actions .btn{min-height:54px}
@media (max-width:359px){.reserve-actions{grid-template-columns:1fr}}
.reserve .small{font-size:13.5px;color:var(--grey)}
.reserve .small a{color:#fff}

/* ============================================================
   6. SECTIONS
   ============================================================ */
.section{padding:72px 0}
.sec-head{margin-bottom:34px}
.sec-head h2{font-size:clamp(32px,8.6vw,56px);margin-top:14px;font-weight:500}
.sec-head .lede{color:var(--ink-soft);max-width:58ch;margin:14px 0 0}
.center{text-align:center}.center .label{justify-content:center}.center .lede{margin-left:auto;margin-right:auto}
.dark{background:var(--black);color:#fff}
.dark .sec-head .lede,.dark p{color:rgba(255,255,255,.72)}
.off{background:var(--off)}

/* ============================================================
   7. TANDOORI TUESDAY — photographic feature
   ============================================================ */
.tuesday{position:relative;color:#fff;overflow:hidden;background:#140c0a}
.tuesday .bg{position:absolute;inset:0;background:url("../img/13.webp") center/cover no-repeat;opacity:.45}
.tuesday::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,17,.95),rgba(17,17,17,.6) 60%,rgba(163,55,34,.35))}
.tuesday .wrap{position:relative;z-index:2;display:grid;gap:22px;padding-top:64px;padding-bottom:64px}
.tuesday .pct{font-family:var(--head);font-weight:600;font-size:clamp(110px,34vw,220px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--red-2);letter-spacing:-.02em}
.tuesday .pct small{font-size:.4em;-webkit-text-stroke:1.5px var(--red-2)}
.tuesday h2{font-size:clamp(30px,8vw,48px);margin:14px 0 12px}
.tuesday p{color:rgba(255,255,255,.75);max-width:46ch}
.tt-count{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:20px 0 22px}
.tt-count b{font-family:var(--head);font-weight:400;font-size:26px;letter-spacing:.08em;text-transform:uppercase}
.tt-count span{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2);font-family:var(--head)}
.tuesday .acts{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   8. OFFERS — numbered, clean
   ============================================================ */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:4px var(--gutter) 18px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.offer{position:relative;display:flex;flex-direction:column;padding:28px 24px 24px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule-dark);transition:box-shadow .25s}
.offer:hover{box-shadow:inset 0 0 0 1px var(--black)}
.offer .no{font-family:var(--head);font-size:13px;letter-spacing:.2em;color:var(--grey)}
.offer .when{position:absolute;top:28px;right:24px;font-family:var(--head);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.offer h3{font-size:22px;margin-top:22px;letter-spacing:.08em}
.offer .big{font-family:var(--head);font-weight:300;font-size:46px;line-height:1;color:var(--red);margin:10px 0 14px;letter-spacing:.02em}
.offer p{font-size:15px;color:var(--ink-soft)}
.offer .terms{font-size:12.5px;color:var(--grey);margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-dark)}
.offer .link-arrow{margin-top:10px;align-self:flex-start;border:0;background:none;cursor:pointer}
.offer.feature{background:var(--black);color:#fff;box-shadow:none}
.offer.feature p{color:rgba(255,255,255,.7)}
.offer.feature .terms{border-color:var(--rule);color:var(--grey)}
.offer.feature .link-arrow{color:#fff}
.rail-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.rail-dots i{width:18px;height:2px;background:rgba(17,17,17,.15);transition:all .25s}
.rail-dots i.on{width:34px;background:var(--red)}
.flash{animation:flash 1.8s ease 1}
@keyframes flash{30%{box-shadow:inset 0 0 0 2px var(--red)}}

/* ============================================================
   9. MENU
   ============================================================ */
.menu-intro{display:grid;gap:24px;margin-bottom:10px}
.menu-photo{position:relative;aspect-ratio:16/10;background:#222 url("../img/8.webp") center/cover no-repeat}
.menu-photo{margin-right:12px;box-shadow:12px 12px 0 -1px #fff,12px 12px 0 0 var(--red)}
.tabs{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1) 26px;padding:0 var(--gutter);position:sticky;top:68px;z-index:5;background:#fff;border-bottom:1px solid var(--rule-dark)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:52px;padding:0;border:0;background:none;cursor:pointer;font:400 13.5px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);position:relative}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transition:transform .25s}
.tab[aria-selected="true"]{color:var(--black)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
/* 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. The
   attribute selector is written out rather than relying on the browser's
   own [hidden] rule, which .panel would otherwise beat on source order. */
.panel{display:block;animation:rise .35s ease}
.panel[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.panel-intro{font-style:italic;color:var(--ink-soft);margin:0 0 8px}
.said{margin:0 0 18px;padding:18px 20px;background:var(--off);font-size:15px;color:var(--ink-soft);border-left:2px solid var(--red)}
.said b{font-family:var(--head);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--black);display:block;margin-bottom:4px}
.dishes{list-style:none;margin:0;padding:0}
.dish{padding:20px 0;border-bottom:1px solid var(--rule-dark);scroll-margin-top:140px;transition:background .4s,padding .3s}
.dish.hl{background:rgba(163,55,34,.07);padding-left:12px;padding-right:12px}
.dish-top{display:flex;align-items:baseline;gap:12px}
.dish h3{font-size:17px;letter-spacing:.1em}
.dish h3 a{text-decoration:none}
.dish-top::after{content:"";flex:1;order:2;border-bottom:1px solid var(--rule-dark);transform:translateY(-4px);min-width:16px}
.dish .price{order:3;font-family:var(--head);font-size:17px;letter-spacing:.06em;white-space:nowrap}
.dish p{margin:6px 0 10px;color:var(--ink-soft);font-size:15px}
.dish-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chip{font-family:var(--head);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:4px 8px;color:#3D7A3A;box-shadow:inset 0 0 0 1px rgba(61,122,58,.4)}
.chip.fav{color:var(--red);box-shadow:inset 0 0 0 1px rgba(163,55,34,.45)}
.chip.brass{color:var(--black);box-shadow:inset 0 0 0 1px rgba(17,17,17,.3)}
.heat{display:inline-flex;gap:2px}
.heat svg{width:12px;height:12px;color:var(--red)}
.heat svg.off{color:rgba(17,17,17,.14)}
.order-link{margin-left:auto;font-family:var(--head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);text-decoration:none;padding:6px 0}
.order-link:hover{color:var(--black)}
.menu-foot{margin-top:30px;display:grid;gap:14px;text-align:center}
.menu-foot small{color:var(--ink-soft)}
.menu-foot a{color:var(--red)}

/* ============================================================
   10. HERITAGE
   ============================================================ */
.heritage .wrap{display:grid;gap:36px}
.her-photo{position:relative;aspect-ratio:4/5;background:#222 url("../img/12.webp") center/cover no-repeat}
.her-photo .stamp{position:absolute;left:-1px;bottom:-1px;background:var(--red);color:#fff;padding:18px 20px;font-family:var(--head);line-height:1}
.her-photo .stamp small{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.her-photo .stamp b{display:block;font-weight:500;font-size:44px;letter-spacing:.04em;margin-top:6px}
.heritage h2{font-size:clamp(32px,8.6vw,54px);margin:14px 0 18px}
.counter{display:flex;align-items:baseline;gap:14px;margin:6px 0 22px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.counter .num{font-family:var(--head);font-weight:300;font-size:64px;line-height:1;color:#fff;min-width:2ch}
.counter .lbl{font-family:var(--head);font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-2);line-height:1.5}
.family{margin:24px 0 0;padding-left:20px;border-left:2px solid var(--red)}
.family blockquote{margin:0;font-size:19px;font-style:italic;line-height:1.55;color:#fff}
.family cite{display:block;font-style:normal;font-family:var(--head);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-top:10px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.timeline b{font-family:var(--head);font-weight:400;font-size:20px;letter-spacing:.06em;color:#fff;line-height:1.2}
.timeline li:last-child b{color:var(--red-2)}
.timeline span{font-size:15px;color:rgba(255,255,255,.66)}
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.pillars li{padding:22px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pillars b{display:block;font-family:var(--head);font-weight:400;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.pillars span{display:block;font-size:14px;color:var(--grey);margin-top:4px;line-height:1.4}
.pillars svg{width:22px;height:22px;color:var(--red-2);margin-bottom:12px}

/* ============================================================
   11. BOOKINGS
   ============================================================ */
.book .wrap{display:grid;gap:40px}
.guide{padding:26px 22px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule-dark)}
.guide h3{font-size:18px;letter-spacing:.14em}
.guide > p{font-size:14.5px;color:var(--ink-soft);margin:6px 0 20px}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:150px;margin-bottom:10px}
.bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:8px;position:relative;font-family:var(--head);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.bar i{display:block;width:100%;background:#D9D6D2}
.bar.hot i{background:var(--black)}
.bar.today span{color:var(--red)}
.bar.today i{box-shadow:inset 0 3px 0 var(--red)}
.bar em{position:absolute;top:-4px;font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--red)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;background:#D9D6D2}
.legend i.hot{background:var(--black)}
.tips{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule-dark)}
.tips li{padding:14px 0;border-bottom:1px solid var(--rule-dark);font-size:14.5px;color:var(--ink-soft)}
.tips b{font-family:var(--head);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--black);margin-right:6px}
.occasions{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark)}
.occasion{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:20px 0;border:0;border-bottom:1px solid var(--rule-dark);background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.occasion b{display:block;font-family:var(--head);font-weight:400;font-size:19px;letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.occasion small{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
.occasion svg{width:20px;height:20px;color:var(--red);transition:transform .2s}
.occasion:hover b{color:var(--red)}
.occasion:hover svg{transform:translateX(4px)}
.book-cta{margin-top:24px;display:grid;gap:12px}
.book-cta .btn{width:100%}
.book-cta p{font-size:14px;color:var(--ink-soft);text-align:center;margin:0}
.book-cta p a{color:var(--red)}

.catering{position:relative;color:#fff;overflow:hidden;background:#161211}
.catering .bg{position:absolute;inset:0;background:url("../img/2.webp") center/cover no-repeat;opacity:.4}
.catering::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.6),rgba(17,17,17,.92))}
.catering .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:72px;display:grid;gap:24px}
.catering h2{font-size:clamp(30px,8vw,50px);margin-top:14px}
.catering ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.catering li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:rgba(255,255,255,.82);display:flex;gap:14px}
.catering li::before{content:"";width:14px;height:1.5px;background:var(--red-2);flex:none;margin-top:12px}
.catering .acts{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   12. EVENTS
   ============================================================ */
.events-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark)}
.ev{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--rule-dark)}
.ev-date{font-family:var(--head);line-height:1;text-transform:uppercase}
.ev-date b{display:block;font-weight:300;font-size:46px;color:var(--black)}
.ev-date small{display:block;font-size:12px;letter-spacing:.24em;color:var(--red);margin-top:6px}
.ev .meta{font-family:var(--head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.ev h3{font-size:22px;letter-spacing:.08em;margin-bottom:6px}
.ev p{font-size:15px;color:var(--ink-soft);margin-bottom:10px}

/* ============================================================
   13. REVIEWS
   ============================================================ */
.reviews{position:relative;color:#fff;background:#121212;overflow:hidden}
.reviews .bg{position:absolute;inset:0;background:url("../img/17.webp") center/cover no-repeat;opacity:.18}
.reviews .wrap{position:relative;z-index:2}
.score{display:flex;flex-wrap:wrap;gap:0;margin:0 0 30px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.score span{flex:1 1 33%;padding:16px 10px 16px 0;font-size:13px;color:var(--grey-2);line-height:1.3}
.score b{display:block;font-family:var(--head);font-weight:400;font-size:26px;color:#fff;letter-spacing:.04em}
.quotes{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 10px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none}
.quotes::-webkit-scrollbar{display:none}
.quote{scroll-snap-align:start;margin:0;padding:26px 24px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--rule);display:flex;flex-direction:column}
.quote::before{content:"“";font-family:Georgia,serif;font-size:56px;line-height:.6;color:var(--red-2);height:26px}
.quote blockquote{margin:0 0 18px;font-size:17px;line-height:1.6;color:#fff}
.quote figcaption{margin-top:auto;font-family:var(--head);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.quote figcaption b{color:#fff;font-weight:400}

/* ============================================================
   14. AROUND CHESHAM
   ============================================================ */
.town .wrap{display:grid;gap:30px}
.spots{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark);counter-reset:s}
.spot{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--rule-dark);counter-increment:s}
.spot::before{content:counter(s,decimal-leading-zero);font-family:var(--head);font-size:14px;letter-spacing:.14em;color:var(--red);padding-top:3px}
.spot em{display:block;font-style:normal;font-family:var(--head);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}
.spot h3{font-size:18px;letter-spacing:.1em;margin:4px 0 4px}
.spot p{margin:0;font-size:15px;color:var(--ink-soft)}

/* ============================================================
   15. TAKEAWAY
   ============================================================ */
.takeaway .wrap{display:grid;gap:30px}
.takeaway h2{font-size:clamp(30px,8vw,50px);margin:14px 0 14px}
.areas{list-style:none;margin:18px 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.areas li{padding:7px 12px;font-size:14px;color:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--rule)}
.areas b{margin-left:6px;font-family:var(--head);font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--red-2)}
.takeaway .acts{display:flex;flex-wrap:wrap;gap:12px}
.perks{border-top:1px solid var(--rule)}
.perk{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule)}
.perk b{font-family:var(--head);font-weight:300;font-size:40px;line-height:1;color:#fff}
.perk span{font-size:15px;color:rgba(255,255,255,.7)}
.perk:first-child b{color:var(--red-2)}

/* ============================================================
   16. FAQ + FIND US
   ============================================================ */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--rule-dark)}
.faq-list details{border-bottom:1px solid var(--rule-dark)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;min-height:44px;font-family:var(--head);font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(var(--red),var(--red)) center/12px 1.5px no-repeat,linear-gradient(var(--red),var(--red)) center/1.5px 12px no-repeat;transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{color:var(--ink-soft);margin:0 0 20px;max-width:64ch}
.faq-list a{color:var(--red)}
.find .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--rule-dark)}
.card{padding:26px 22px;border-bottom:1px solid var(--rule-dark)}
.card h2,.card h3{font-size:20px;letter-spacing:.14em;margin-bottom:18px}
.card dl{margin:0;display:grid;gap:16px}
.card dt{font-family:var(--head);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey)}
.card dd{margin:4px 0 0;font-size:16.5px;overflow-wrap:anywhere}
.card dd a{text-decoration:none}
.card dd a:hover{color:var(--red)}
.card .getting{font-size:14.5px;color:var(--ink-soft);margin:18px 0 0}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-dark);font-size:14.5px}
.hours li span:first-child{font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.hours li span:last-child{text-align:right;color:var(--ink-soft)}
.hours li.today span{color:var(--red)}
.map{position:relative;min-height:320px;background:#1a1a1a url("../img/map.webp") center/cover no-repeat}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.map-cover{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;background:rgba(17,17,17,.78);padding:20px}
.map-cover p{font-family:var(--head);font-size:20px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}

/* ============================================================
   17. FOOTER + ACTION BAR
   ============================================================ */
.footer{background:var(--black);color:rgba(255,255,255,.62);padding:56px 0 28px;font-size:14.5px}
.footer .wrap{display:grid;gap:30px}
.footer h4{font-size:12px;letter-spacing:.28em;color:#fff;font-weight:400;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer a{text-decoration:none}
.footer a:hover{color:#fff}
.footer .fine{border-top:1px solid var(--rule);padding-top:20px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;letter-spacing:.04em}
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1.7fr;padding:0 0 env(safe-area-inset-bottom);background:var(--black);border-top:1px solid var(--rule)}
.actionbar a,.actionbar button{min-height:var(--bar-h);border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#fff;text-decoration:none;cursor:pointer;font:400 11px/1 var(--head);letter-spacing:.2em;text-transform:uppercase}
.actionbar a + a{border-left:1px solid var(--rule)}
.actionbar svg{width:19px;height:19px}
.actionbar .primary{background:var(--red);flex-direction:row;gap:10px;font-size:13px;letter-spacing:.16em;white-space:nowrap}
@media (max-width:359px){.actionbar .primary{font-size:12px;letter-spacing:.1em}}

/* ============================================================
   18. LARGER SCREENS
   ============================================================ */
@media (min-width:720px){
  :root{--gutter:32px}
  .strip ul{grid-template-columns:repeat(3,1fr)}
  .strip li:nth-child(3){display:block;padding-left:16px;border-left:1px solid var(--rule)}
  .reserve .wrap{grid-template-columns:1.2fr auto;align-items:center;column-gap:40px}
  .reserve .tt-flag,.reserve .small{grid-column:1 / -1}
  .rail{grid-auto-columns:calc((100% - 32px) / 2.3)}
  .quotes{grid-auto-columns:calc((100% - 32px) / 2.3)}
  .pillars{grid-template-columns:repeat(4,1fr)}
  .spots{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .footer .wrap{grid-template-columns:2fr 1fr 1fr 1fr}
  .footer .fine{grid-column:1 / -1}
  .tuesday .wrap{grid-template-columns:auto 1fr;align-items:center;column-gap:56px}
}
@media (min-width:1040px){
  body{padding-bottom:0}
  .actionbar{display:none}
  .burger{display:grid}
  .hero{min-height:94vh}
  .hero-copy{padding-bottom:40px}
  .section{padding:110px 0}
  .rail{grid-auto-columns:calc((100% - 48px) / 4);overflow:visible;margin:0;padding:4px 0 18px}
  .rail-dots{display:none}
  .quotes{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:4px 0 10px}
  .menu-intro{grid-template-columns:1fr 1fr;align-items:end;gap:60px}
  .dishes{columns:2;column-gap:64px}
  .dish{break-inside:avoid}
  .tabs{top:68px}
  .heritage .wrap{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
  .heritage .her-photo{position:sticky;top:100px}
  .heritage .pillars{grid-column:1 / -1}
  .book .wrap{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .catering .wrap{grid-template-columns:1fr 1fr;gap:72px;align-items:end}
  .events-list .ev{grid-template-columns:120px 1fr auto;align-items:center}
  .ev > div:last-child{display:contents}
  .town .wrap{grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
  .takeaway .wrap{grid-template-columns:1.2fr .8fr;gap:72px;align-items:center}
  .find .wrap{grid-template-columns:1fr 1fr 1.3fr}
  .card{border-bottom:0;border-right:1px solid var(--rule-dark)}
}
@media (min-width:1180px){.nav{display:flex;gap:26px}.burger{display:none}}


/* ============================================================
   LEGAL PAGES — /cookie-policy/, /privacy-policy/, /terms/
   ============================================================
   Those three pages share this stylesheet but none of the home page's
   furniture, so they carry their own header, footer and prose classes. The
   rules came across from Rocce with its palette swapped for this one: brass
   and ember become --red, flour becomes --white, and the rounded corners are
   dropped because nothing on this site has any.

   They are here rather than in a legal.css so a legal page is still one
   stylesheet and one request, the same as every other page.
   ============================================================ */
.site-head .head-cta{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
/* ============================================================
   4. HEADER
   ============================================================ */
.topbar{
  background:var(--black); border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.85rem; color:var(--grey);
}
.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(--red)}
.open-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red); margin-right:7px; vertical-align:middle}
.site-head{
  position:sticky; top:0; z-index:80;
  /* Near-black, like the home page's header. The port turned Rocce's ground
     into --red because its header IS its brand colour; this site's is not. */
  background:var(--black);
  border-bottom:1px solid rgba(0,0,0,.28);
}
.site-head .wrap{display:flex; align-items:center; gap:22px; padding-block:14px}
/* The wordmark on the legal pages. On the home page it sits over the hero and
   inherits white from there; here the header is its own dark band and the
   letters were arriving in the body's near-black ink, on near-black. */
.site-head .brand b{color:var(--white)}
.site-head .brand small{color:var(--grey)}
.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(--red); 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(--red)}
/* ============================================================
   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(--red); 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(--red)}
.legal a{color:var(--red-2)}
.legal dl{margin:0 0 1.1em}
.legal dt{font-weight:700; color:var(--white); margin-top:14px}
.legal dd{margin:2px 0 0}
.legal .updated{font-size:.88rem; color:var(--red); 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(--rule); vertical-align:top}
.legal th{color:var(--red); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700}
.legal .box{
  background:var(--black-2); color:var(--white); border-left:3px solid var(--red);
  padding:18px 20px; border-radius:0; margin:0 0 1.4em;
}
.legal .box p:last-child{margin-bottom:0}
.legal .box b,.legal .box strong{color:var(--white)}
.foot-logo{height:52px; width:auto; margin-bottom:14px}
.site-foot{background:var(--black); 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(--red); 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(--grey)}
.site-foot a:hover{color:var(--white)}
.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}

/* ============================================================
   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:"⚠ "}