/* Rocce — site styles.
 * Lifted whole out of index.html; not a line of it changed, so the page it
 * produces is the page that was signed off. Splitting it out is what lets a
 * browser cache it between pages once there is more than one.
 */
/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --brand:#9A1212;         /* Rocce red — the band across the top */
  --brand-deep:#6E0D0D;    /* its shadow side — hover, pressed */
  --nero:#150505;          /* deepest — footer, oven mouth */
  --ink:#1C0808;           /* page ground */
  --ink-raised:#2C1111;    /* cards */
  --ember:#E2571F;         /* fire — primary action */
  --ember-lit:#F5813F;     /* hover / glow */
  --brass:#C8A45C;         /* tile grout, rules, prices */
  --basil:#4C7A55;         /* vegan / fresh markers */
  --flour:#F4EFE4;         /* headline text on dark */
  --flour-dim:#BDB6A6;     /* body text on dark */
  --line:rgba(200,164,92,.22);

  --display:"Bodoni Moda", Georgia, serif;
  --text:"Archivo", "Helvetica Neue", Arial, sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px, 5vw, 56px);
  --radius:3px;            /* almost none — tile edges, not SaaS cards */
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  background:var(--ink);
  color:var(--flour-dim);
  font-family:var(--text);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); color:var(--flour); font-weight:700; margin:0; line-height:1.08}
h1{font-size:clamp(2.9rem, 7.5vw, 5.4rem); font-weight:900; letter-spacing:-.015em}
h2{font-size:clamp(2rem, 4.4vw, 3.2rem); letter-spacing:-.01em}
h3{font-size:1.32rem}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(64px, 9vw, 116px)}
.lede{font-size:1.09rem; max-width:62ch}

:focus-visible{outline:3px solid var(--ember-lit); outline-offset:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:999; background:var(--flour); color:var(--nero); padding:12px 18px}

/* Hand-painted majolica rule — used sparingly, twice on the page */
.tilerule{
  height:10px; border:0; margin:0;
  background-image:
    linear-gradient(45deg, var(--brass) 25%, transparent 25%, transparent 75%, var(--brass) 75%),
    linear-gradient(45deg, var(--brass) 25%, transparent 25%, transparent 75%, var(--brass) 75%);
  background-size:20px 20px;
  background-position:0 0, 10px 10px;
  opacity:.5;
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--text); font-size:1rem; font-weight:700; letter-spacing:.005em;
  padding:.92em 1.7em; border:1.5px solid transparent; border-radius:var(--radius);
  text-decoration:none; cursor:pointer; transition:background-color .18s, color .18s, border-color .18s;
}
.btn-fire{background:var(--ember); color:#fff; box-shadow:0 0 0 0 rgba(226,87,31,.5)}
.btn-fire:hover{background:var(--ember-lit)}
.btn-ghost{border-color:var(--line); color:var(--flour); background:transparent}
.btn-ghost:hover{border-color:var(--brass); background:rgba(200,164,92,.08)}
.btn-sm{padding:.6em 1.1em; font-size:.92rem}
.site-head .head-cta{box-shadow:0 0 0 1px rgba(255,255,255,.3)}

/* ============================================================
   4. HEADER
   ============================================================ */
.topbar{
  background:var(--nero); border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.85rem; color:var(--flour-dim);
}
.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(--brass)}
.open-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--basil); margin-right:7px; vertical-align:middle}

.site-head{
  position:sticky; top:0; z-index:80;
  background:var(--brand);
  border-bottom:1px solid rgba(0,0,0,.28);
}
.site-head .wrap{display:flex; align-items:center; gap:22px; padding-block:14px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand img{height:46px; width:auto}

.nav{display:flex; gap:26px; align-items:center}
.nav a{text-decoration:none; font-size:.95rem; font-weight:500; color:var(--flour); padding-block:4px; border-bottom:2px solid transparent}
.nav a:hover{color:#fff; border-bottom-color:var(--brass)}

.burger{display:none; background:none; border:1px solid var(--line); color:var(--flour); min-width:44px; min-height:44px; padding:9px 12px; border-radius:var(--radius); font-size:1.1rem; cursor:pointer}

@media (max-width:900px){
  .burger{display:block; order:3}
  .tab{min-height:44px; display:inline-flex; align-items:center}
  .nav{
    order:4; width:100%; display:none; flex-direction:column; align-items:flex-start;
    gap:0; border-top:1px solid rgba(255,255,255,.08); margin-top:12px; padding-top:6px;
  }
  .nav.is-open{display:flex}
  .nav a{width:100%; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.05)}
  .site-head .wrap{flex-wrap:wrap}
  .head-cta{order:2}
}

/* Under 700px the sticky order bar at the foot of the screen carries the same
   "Order online" button, so the one in the header is the same action twice —
   and between the full-width logo and the burger there was not room for it:
   the burger wrapped onto a row of its own. Drop it, and let the logo come
   down a little, and the header is a logo and a menu button on one line at
   every width down to 320. */
@media (max-width:700px){
  .site-head .head-cta{display:none}
  .brand img{height:38px}
  .site-head .wrap{gap:14px; padding-block:10px}
}

/* ============================================================
   5. HERO  — the one loud element on the page
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--nero);
  padding-block:clamp(80px, 13vw, 168px);
}
/* Optional photo layer. Swap the URL to change the hero image. */
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:var(--hero-img, none);
  background-size:cover; background-position:center;
  opacity:var(--hero-img-opacity, .28);
}
/* A picture from the Eatza gallery is whatever the shop uploaded — it may be
   bright, flat or heavily saturated. So the photo runs at full strength and a
   scrim carries the contrast instead: heaviest over the copy on the left,
   lifting to the right where the picture has the frame to itself. The headline
   then reads whatever gets uploaded in Branding, which is the point. */
.hero--photo::before{
  opacity:1;
  filter:saturate(.72) brightness(.7);
  background-image:
    linear-gradient(100deg,
      rgba(21,5,5,.95) 0%, rgba(21,5,5,.89) 32%,
      rgba(21,5,5,.76) 60%, rgba(21,5,5,.64) 82%, rgba(21,5,5,.76) 100%),
    var(--hero-img, none);
  background-size:auto, cover;
  background-position:center, center;
}
/* Ember glow rising from the oven floor */
.hero::after{
  content:""; position:absolute; left:50%; bottom:-46%; transform:translateX(-50%);
  width:150%; height:105%;
  background:radial-gradient(ellipse at center, rgba(226,87,31,.52) 0%, rgba(226,87,31,.16) 38%, transparent 68%);
  animation:flicker 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flicker{
  0%,100%{opacity:.82; transform:translateX(-50%) scale(1)}
  50%    {opacity:1;   transform:translateX(-50%) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){ .hero::after{animation:none} }

.hero .wrap{position:relative; z-index:2}
.hero-inner{max-width:760px}
.hero-flag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; color:var(--nero);
  background:var(--brass); padding:7px 14px; border-radius:var(--radius); margin-bottom:26px;
}
.hero h1{color:#fff; text-shadow:0 3px 40px rgba(0,0,0,.6)}
.hero h1 em{font-style:italic; font-weight:400}
.hero-sub{
  font-size:clamp(1.08rem, 2.1vw, 1.32rem); color:#EDE6D8; max-width:56ch;
  margin:22px 0 34px; text-shadow:0 2px 20px rgba(0,0,0,.7);
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-note{font-size:.9rem; color:#D8CFBD; margin-top:20px}

/* ---- Hero variants: add one class to <section class="hero"> ----
   .hero--offer     ember-forward, for deals
   .hero--festive   deep green + brass, for Christmas / NYE
   .hero--calm      quieter ground, for everyday / evergreen
   .hero--vegan     basil-led, for the vegan range                */
.hero--offer::after{background:radial-gradient(ellipse at center, rgba(226,87,31,.66) 0%, rgba(226,87,31,.2) 40%, transparent 70%)}
.hero--festive::after{background:radial-gradient(ellipse at center, rgba(76,122,85,.55) 0%, rgba(200,164,92,.18) 42%, transparent 72%)}
.hero--calm::after{background:radial-gradient(ellipse at center, rgba(226,87,31,.26) 0%, transparent 62%)}
.hero--vegan::after{background:radial-gradient(ellipse at center, rgba(76,122,85,.6) 0%, rgba(76,122,85,.18) 40%, transparent 70%)}
.hero--vegan .hero-flag{background:var(--basil); color:#fff}
.hero--festive .hero-flag{background:var(--basil); color:#fff}

/* ============================================================
   6. TRUST STRIP
   ============================================================ */
.trust{background:var(--ink-raised); border-block:1px solid rgba(255,255,255,.06)}
.trust ul{
  list-style:none; margin:0; padding:22px 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:6px 30px;
}
.trust li{display:flex; align-items:center; gap:11px; font-size:.93rem; color:var(--flour); padding-block:6px}
.trust svg{flex:none; color:var(--brass)}

/* ============================================================
   7. SECTION HEADS
   ============================================================ */
.sec-head{max-width:64ch; margin-bottom:44px}
.sec-head h2{margin-bottom:14px}
.sec-head .brass-line{width:56px; height:3px; background:var(--ember); margin-bottom:22px}

/* ============================================================
   8. MENU
   ============================================================ */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; border-bottom:1px solid var(--line); padding-bottom:14px}
.tab{
  background:none; border:1px solid transparent; color:var(--flour-dim);
  font-family:var(--text); font-size:1rem; font-weight:600; padding:.6em 1.2em;
  border-radius:var(--radius); cursor:pointer; transition:.16s;
}
.tab:hover{color:var(--flour); background:rgba(255,255,255,.05)}
.tab[aria-selected="true"]{background:var(--ember); color:#fff}

.menu-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px,100%),1fr)); gap:2px; list-style:none; margin:0; padding:0}

.item{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--ink-raised); padding:22px; border-radius:var(--radius);
  border:1px solid transparent; scroll-margin-top:110px;
}
.item-media{flex:none; width:88px; height:88px; border-radius:50%; overflow:hidden; background:#1C2A44; border:1px solid var(--line)}
.item-media img{width:100%; height:100%; object-fit:cover}
.item-body{min-width:0; flex:1}
.item-top{display:flex; gap:6px 14px; align-items:baseline; justify-content:space-between; flex-wrap:wrap}
.item h3{font-size:1.2rem; min-width:0}
.item h3 a{text-decoration:none}
.item h3 a:hover{color:var(--brass)}
.price{font-family:var(--display); font-size:1.15rem; font-weight:700; color:var(--brass); white-space:nowrap}
.item p{font-size:.93rem; line-height:1.55; margin:.5em 0 .85em; color:var(--flour-dim)}
.item-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.tag{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; padding:4px 9px; border-radius:var(--radius);
  border:1px solid var(--line); color:var(--brass);
}
.tag-vegan{border-color:rgba(76,122,85,.5); color:#84BC90}
.tag-hot{border-color:rgba(226,87,31,.5); color:var(--ember-lit)}
.tag-pop{background:var(--brass); color:var(--nero); border-color:var(--brass)}
.order-link{
  position:relative;
  font-size:.92rem; font-weight:700; color:var(--ember-lit); text-decoration:none;
  border-bottom:1.5px solid rgba(245,129,63,.4); padding-bottom:1px;
}
/* The link is 26px tall and it is the main action on every dish. Rather than
   pad it — which would drag the underline away from the word — the hit area is
   grown past the text to Apple's 44px floor. */
.order-link::after{content:""; position:absolute; inset:-9px -8px}
.order-link:hover{border-bottom-color:var(--ember-lit)}

@media (max-width:380px){
  .item{gap:14px; padding:18px}
  .item-media{width:64px; height:64px}
}

/* Deep-link arrival state: the item you linked to lights up */
.item.is-flagged{
  border-color:var(--ember);
  box-shadow:0 0 0 1px var(--ember), 0 0 44px rgba(226,87,31,.3);
  background:#1A2439;
}

.menu-foot{margin-top:34px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}

/* ============================================================
   FLASH DEAL
   Only ever on screen while of_flash_deal_active() is returning one. The
   markup is built by site.js, so none of this exists the rest of the time.

   A native <dialog> rather than a hand-rolled overlay: showModal() gives the
   focus trap, the Escape key, inertness of the page behind and the top layer
   for free, and all four are things a hand-rolled modal gets wrong.
   ============================================================ */
.fd{
  border:0; padding:0; background:none; max-width:none; max-height:none;
  color:var(--flour-dim);
}
.fd::backdrop{background:rgba(10,3,3,.74)}
.fd-box:focus{outline:none}
.fd-box{
  position:relative; width:min(360px, calc(100vw - 32px));
  background:var(--ink-raised); border:1px solid var(--line);
  border-top:3px solid var(--ember);
  border-radius:var(--radius); padding:30px 26px 26px; text-align:center;
  font-family:var(--text);
}
.fd-x{
  position:absolute; top:6px; right:8px; width:34px; height:34px;
  background:none; border:0; color:var(--flour-dim); font-size:1.4rem;
  line-height:1; cursor:pointer; border-radius:var(--radius);
}
.fd-x:hover{color:var(--flour)}
.fd-badge{
  display:inline-block; background:var(--ember); color:#fff;
  font-size:.74rem; font-weight:800; letter-spacing:.07em;
  padding:5px 11px; border-radius:var(--radius); margin-bottom:14px;
}
.fd-box h2{font-family:var(--display); color:#fff; font-size:1.7rem; margin-bottom:10px}
.fd-sub{font-size:.94rem; margin:0 0 18px}

/* The countdown is the reason this is on screen at all. Tabular figures so the
   digits do not shuffle the layout every second — proportional ones move the
   whole line several pixels a tick, which is the tell of a cheap countdown. */
.fd-clock{
  font-family:var(--text); font-variant-numeric:tabular-nums;
  font-size:2.3rem; font-weight:700; color:var(--ember-lit);
  line-height:1.1; letter-spacing:.01em;
}
.fd-clock-l{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass); margin-bottom:4px;
}
.fd-box .btn{width:100%; margin-top:20px}
.fd-min{font-size:.78rem; color:var(--flour-dim); margin-top:12px; opacity:.8}

/* Under five minutes, and only then. */
.fd-box.is-hot{border-top-color:#FF5C2B}
.fd-box.is-hot .fd-clock{color:#FF7A4D; animation:fd-pulse 1.1s steps(1,end) infinite}
@keyframes fd-pulse{0%,62%{opacity:1} 63%,100%{opacity:.42}}

/* What is left after someone closes it. Without this the deal is gone for the
   rest of the visit, which is the one real weakness of answering with a modal. */
.fd-pill{
  position:fixed; left:14px; bottom:14px; z-index:95;
  display:flex; align-items:center; gap:9px;
  background:var(--ember); color:#fff; border:0;
  font-family:var(--text); font-size:.8rem; font-weight:700;
  padding:9px 13px; border-radius:var(--radius); cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  animation:fd-rise .3s ease both;
}
/* display:flex beats the UA stylesheet's [hidden]{display:none}, so the pill
   stayed on screen behind the modal's own backdrop. */
.fd-pill[hidden]{display:none}
.fd-pill:hover{background:var(--ember-lit)}
.fd-pill .fd-pill-c{font-variant-numeric:tabular-nums; opacity:.92}
.fd-pill.is-hot{background:#B3170A; box-shadow:0 8px 24px rgba(0,0,0,.55)}
@keyframes fd-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* The order widget's own button sits bottom-right at 24px, so the pill takes
   the left. On a narrow phone the sticky order bar owns the bottom edge. */
@media (max-width:700px){
  .fd-pill{bottom:84px}

  /* Kept deliberately small on a phone. A modal that fills the screen is the
     shape Google treats as an intrusive interstitial, and this site has just
     been tuned for mobile search — so the page stays visible around it and it
     reads as a card rather than a takeover. */
  .fd-box{
    width:min(320px, calc(100vw - 48px));
    padding:22px 20px 20px;
  }
  .fd-box h2{font-size:1.3rem}
  .fd-sub{font-size:.86rem; margin-bottom:14px}
  .fd-clock{font-size:1.8rem}
  .fd-badge{font-size:.68rem; margin-bottom:10px}
  .fd-box .btn{margin-top:16px; padding:.8em 1.4em}
}
@media (prefers-reduced-motion:reduce){
  .fd-pill{animation:none}
  .fd-box.is-hot .fd-clock{animation:none}
}

/* ============================================================
   COOKIE CONSENT
   A bar at the foot of the page, not a wall across it. ICO guidance is
   explicit that a consent notice must not block access to the site, and that
   refusing has to be as easy as accepting — so the two buttons carry the same
   weight and neither is hidden behind a "manage preferences" step.
   ============================================================ */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--ink-raised); border-top:1px solid var(--line);
  box-shadow:0 -10px 34px rgba(0,0,0,.45);
  font-family:var(--text); color:var(--flour-dim);
  animation:cc-in .28s ease both;
}
.cc[hidden]{display:none}
.cc .wrap{display:flex; gap:18px 26px; align-items:center; flex-wrap:wrap; padding-block:16px}
.cc-text{flex:1 1 320px; min-width:0; font-size:.92rem; line-height:1.55; margin:0}
.cc-text b{color:var(--flour)}
.cc-text a{color:var(--ember-lit)}
.cc-actions{display:flex; gap:10px; flex-wrap:wrap; flex:none}
.cc-actions .btn{font-size:.88rem; padding:.7em 1.3em; min-height:44px}
@keyframes cc-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .cc{animation:none} }

/* The sticky order bar owns the bottom edge on a phone, so the notice sits
   above it rather than on top of it. */
@media (max-width:700px){
  .cc{bottom:74px}
  .cc .wrap{gap:14px}
  .cc-actions{width:100%}
  .cc-actions .btn{flex:1}
}

/* 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(--brass)}

/* ============================================================
   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(--brass); margin:28px 0 8px; font-family:var(--text); 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(--brass)}
.legal a{color:var(--ember-lit)}
.legal dl{margin:0 0 1.1em}
.legal dt{font-weight:700; color:var(--flour); margin-top:14px}
.legal dd{margin:2px 0 0}
.legal .updated{font-size:.88rem; color:var(--brass); 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(--brass); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700}
.legal .box{
  background:var(--ink-raised); border-left:3px solid var(--brass);
  padding:18px 20px; border-radius:var(--radius); margin:0 0 1.4em;
}
.legal .box p:last-child{margin-bottom:0}

/* Anything the shop still has to supply. Deliberately loud — these must not
   reach a customer, and a quiet placeholder is one that ships. */
.fill{
  background:#FFD84D; color:#1a1a1a; font-weight:700; padding:1px 7px;
  border-radius:var(--radius); font-family:var(--text); font-size:.94em;
}

/* ============================================================
   TOWN LANDING PAGES  (/pizza-delivery-<town>/)
   The home page lists delivery areas as chips in .area-list. A town page
   carries a paragraph about each neighbourhood — the drive, the postcode, the
   catch — so it needs a card rather than a chip. Nothing else uses this.
   ============================================================ */
.place-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:20px; margin:0; padding:0; list-style:none;
}
.place{
  background:var(--ink-raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px;
}
.place h3{margin-bottom:10px}
.place p{font-size:.96rem; margin-bottom:0}
.place p + p{margin-top:14px}

/* ============================================================
   9. OFFERS
   ============================================================ */
.offers{background:var(--nero)}
.offer-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; list-style:none; margin:0; padding:0}
.offer{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-raised); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  scroll-margin-top:110px;
}
/* #1C2A44 was left over from the navy palette — it is the blue that showed
   through when an offer image failed. */
.offer-img{aspect-ratio:16/10; background:var(--nero); overflow:hidden}

/* An offer the shop has not given a picture to, and the fallback when one
   fails to load. Deliberately quiet: the hand-painted majolica tile that runs
   across the page twice as .tilerule, at a whisper, over the same ember glow
   that rises under the hero. It reads as part of the site rather than as a
   missing photograph, costs no bytes and cannot 404. */
.offer-img--none{
  position:relative;
  background:
    radial-gradient(ellipse 130% 78% at 50% 122%,
      rgba(245,129,63,.42) 0%, rgba(226,87,31,.22) 34%, rgba(226,87,31,.06) 58%, transparent 76%),
    var(--nero);
  border-bottom:1px solid var(--line);
}
/* One brass hairline, on the same 45° as the majolica tile rule, so the panel
   has a texture without a repeat. The first draft used the tile pattern itself
   and at that scale it read as the transparency checkerboard every design tool
   draws behind a missing image — exactly the wrong thing to say. */
.offer-img--none::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,
    transparent 0 13px, rgba(200,164,92,.05) 13px 14px);
}
.offer-img img{width:100%; height:100%; object-fit:cover}
.offer-body{padding:22px; display:flex; flex-direction:column; align-items:flex-start; flex:1}
/* A coupon code, when the offer is one people have to type in. */
.offer-code{font-size:.86rem; margin:0 0 12px}
.offer-code b{font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.08em;
              background:var(--ink); color:var(--brass); padding:2px 8px; border-radius:var(--radius)}
/* "Collection only" and the like, beside the price rather than under it. */
.offer-body .tag{margin-bottom:10px}
/* Descriptions vary in length once they come from the admin, so the button is
   pushed to the foot of the card and every card in a row ends level. */
.offer-body p{flex:1}
.offer-body .btn{margin-top:4px}
.offer h3{margin-bottom:8px}
.offer .deal{font-family:var(--display); font-size:1.6rem; font-weight:900; color:var(--ember-lit); display:block; margin-bottom:10px}
.offer p{font-size:.92rem; margin-bottom:18px}
.offer .btn{margin-top:auto; align-self:flex-start}
.offer.is-flagged{border-color:var(--ember); box-shadow:0 0 40px rgba(226,87,31,.25)}

/* ============================================================
   10. STORY
   ============================================================ */
.story-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center}
.story-figure{position:relative}
.story-figure img{width:100%; border-radius:var(--radius); border:1px solid var(--line)}
.story-stamp{
  position:absolute; right:-14px; bottom:-14px; width:118px; height:118px; border-radius:50%;
  background:var(--ember); color:#fff; display:grid; place-content:center; text-align:center;
  font-family:var(--display); font-weight:900; line-height:1.1; font-size:1.05rem; padding:10px;
}
.story-stamp span{display:block; font-family:var(--text); font-size:.62rem; letter-spacing:.16em; font-weight:600; margin-top:5px}
@media (max-width:820px){ .story-grid{grid-template-columns:1fr} .story-stamp{width:96px; height:96px; font-size:.92rem} }

/* ============================================================
   11. AREAS
   ============================================================ */
.areas{background:var(--nero)}
.area-list{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 0 28px}
.area-list li{
  border:1px solid var(--line); border-radius:var(--radius); padding:9px 16px;
  font-size:.94rem; color:var(--flour);
}
.area-list li b{font-weight:600}

/* ============================================================
   12. REVIEWS
   ============================================================ */
/* Two columns, not auto-fit. With four reviews auto-fit gave 3+1 — one card
   stranded on its own row, and the first row stretched to the height of the
   longest review. Two columns is 2+2, and the wider card suits a review that
   runs to four lines. */
.reviews{display:grid; grid-template-columns:1fr; gap:22px; margin:0; padding:0; list-style:none}
@media (min-width:620px){ .reviews{grid-template-columns:repeat(2,1fr)} }
.review{background:var(--ink-raised); border-left:3px solid var(--brass); padding:26px 24px; border-radius:var(--radius)}
.review p{font-family:var(--display); font-size:1.12rem; line-height:1.5; color:var(--flour); font-style:italic}
.review cite{font-style:normal; font-size:.85rem; color:var(--brass); font-weight:600}
.stars{color:var(--ember-lit); letter-spacing:3px; font-size:.9rem; margin-bottom:12px}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq{max-width:800px}
.faq details{border-bottom:1px solid rgba(255,255,255,.09); padding:4px 0}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 30px 18px 0; position:relative;
  font-family:var(--display); font-size:1.16rem; color:var(--flour); font-weight:700;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  color:var(--ember-lit); font-family:var(--text); font-size:1.5rem; font-weight:400; transition:transform .2s;
}
.faq details[open] summary::after{content:"–"}
.faq details p{font-size:.97rem; padding-right:30px; margin-bottom:18px}

/* ============================================================
   14. CONTACT + FOOTER
   ============================================================ */
.contact{background:var(--nero)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px)}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }
.contact dl{margin:0}
.contact dt{font-size:.74rem; letter-spacing:.16em; color:var(--brass); font-weight:700; margin-top:22px}
.contact dd{margin:5px 0 0; font-size:1.05rem; color:var(--flour)}
.contact dd a{text-decoration:none}
.contact dd a:hover{color:var(--ember-lit)}
.hours{list-style:none; margin:0; padding:0}
.hours li{display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.97rem}
.hours li span:first-child{color:var(--flour)}
.hours li span:last-child{color:var(--flour-dim)}
.hours li.today span{color:var(--ember-lit); font-weight:600}

.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}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr} }
.site-foot h4{font-size:.76rem; letter-spacing:.16em; color:var(--brass); font-family:var(--text); 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(--flour-dim)}
.site-foot a:hover{color:var(--flour)}
.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}

/* Sticky mobile order bar — the money button, always reachable */
.mobile-order{display:none}
@media (max-width:700px){
  .mobile-order{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; gap:10px; padding:10px 14px;
    background:rgba(21,5,5,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  }
  .mobile-order .btn{flex:1}
  body{padding-bottom:74px}
}

/* Shown only when the kitchen has switched delivery or collection off — an
   empty span the rest of the time, so it takes no room in the top bar. */
.service-note{font-weight:600}
.service-note:empty{display:none}