/* Aftab’s Kitchen
   Printed-menu art direction: white paper, heavy black type, yellow only for price
   and action, one red accent (the full stop). The page goes black exactly twice:
   Deal mode, and the checkout that closes it.

   Breakpoints (custom properties can’t be used in media queries):
     sm 40rem · md 60rem · lg 80rem                                              */

/* ------------------------------------------------------------------ tokens */
:root {
  /* colour */
  --color-black: #100f0d;
  --color-ink: #1b1915;
  --color-cream: #f2e8d5;
  --color-paper: #fff;                          /* every light surface */
  --color-white: #fff;
  --color-yellow: #ffd000;
  --color-red: #d42a1c;
  --color-whatsapp: #25d366;                    /* the one colour outside the palette: people look for it */
  --color-frame: #f3f3f2;                       /* image frame on paper */
  --ink-muted: rgb(27 25 21 / .68);
  --ink-rule: rgb(27 25 21 / .16);
  --cream-muted: rgb(242 232 213 / .68);
  --cream-rule: rgb(242 232 213 / .18);
  --focus: var(--color-ink);

  /* type */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-hero: clamp(3.5rem, min(10.2vw, 16vh), 10rem);
  --fs-1: clamp(3rem, 7.2vw, 6.5rem);           /* chapter titles */
  --fs-2: clamp(2rem, 3.4vw, 3rem);             /* lead product, lead deal */
  --fs-3: 1.625rem;                             /* product titles */
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --lh-display: .88;
  --lh-body: 1.55;
  --track-display: -.012em;                     /* large type tightens */
  --track-micro: .09em;                         /* small caps breathe */

  /* space, 4px base */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;  --s-11: 10rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 82.5rem;
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));

  /* radius: controls round a little, frames barely, surfaces not at all */
  --r-1: 2px;
  --r-2: 6px;
  --r-3: 10px;

  /* shadow: only things that genuinely float */
  --shadow-float: 0 14px 34px -14px rgb(16 15 13 / .5);
  --shadow-tag: 0 8px 16px -8px rgb(16 15 13 / .45);

  /* motion */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* controls */
  --control: 3rem;
  --control-lg: 3.5rem;
  --hero-photo-h: clamp(15rem, 42svh, 26rem);
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }           /* must beat any component rule that sets display */
img, svg { display: block; }
img { max-width: 100%; height: auto; }
ul, ol, dl, dd { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
b, strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-1); }

.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: var(--s-2); left: var(--s-2); z-index: 100;
  padding: var(--s-3) var(--s-4); background: var(--color-ink); color: var(--color-cream);
  border-radius: var(--r-2); transform: translateY(-200%);
}
.skip:focus { transform: none; }

.noscript { padding: var(--s-5) var(--gutter); background: var(--color-yellow); color: var(--color-black); }
.noscript a { text-decoration: underline; }

/* ---------------------------------------------------------------- typography */
.eyebrow {
  font-size: var(--fs-micro); font-weight: 700; line-height: 1.3;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-muted);
}

.display {
  font: 900 var(--fs-1) / var(--lh-display) var(--font-display);
  letter-spacing: var(--track-display); text-transform: uppercase;
}

/* The one red thing: every headline ends on it. */
.stop { color: var(--color-red); font-style: normal; }

/* Headline lines sit in a mask so they can rise into place. */
.line { display: block; overflow: hidden; }
.line > span { display: block; }

.textlink {
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: .3em; transition: text-underline-offset var(--dur-2) var(--ease-out);
}
@media (hover: hover) { .textlink:hover { text-underline-offset: .45em; } }

/* Price: small raised currency, heavy numerals, a highlighter stroke on paper. */
.price {
  display: inline-flex; align-items: flex-start; gap: .375rem;
  font: 900 2.25rem / 1 var(--font-display); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price__cur {
  margin-top: .3em; font: 700 .6875rem / 1 var(--font-body);
  letter-spacing: var(--track-micro); color: var(--ink-muted);
}
.price__num { padding-inline: .08em; background: linear-gradient(transparent 58%, var(--color-yellow) 58% 94%, transparent 94%); }

.price-tag {
  display: inline-flex; align-items: flex-start; gap: .4rem;
  padding: .625rem .875rem .5rem; background: var(--color-yellow); color: var(--color-black);
  border-radius: var(--r-1); box-shadow: var(--shadow-tag); rotate: -6deg;
}
.price-tag span { margin-top: .35rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); line-height: 1; }
.price-tag b { font: 900 clamp(3.25rem, 6.2vw, 5.75rem) / .82 var(--font-display); letter-spacing: -.015em; }

/* ---------------------------------------------------------- add / stepper
   One control everywhere. Black “Add” becomes a yellow stepper: yellow means
   “this is in your order”. Press feedback is :active, so it lands on pointer-down. */
.add { display: inline-grid; min-width: 7.5rem; height: var(--control); flex: none; }
.add > * { grid-area: 1 / 1; border-radius: var(--r-2); }

.add__btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding-inline: var(--s-4); background: var(--color-ink); color: var(--color-cream);
  font-weight: 700; font-size: .9375rem; letter-spacing: .01em;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2);
}
.add__btn svg { transition: transform var(--dur-2) var(--ease-out); }
.add__btn:active { transform: scale(.96); }
@media (hover: hover) {
  .add__btn:hover { background: var(--color-black); }
  .add__btn:hover svg { transform: rotate(90deg); }
}

.add__stepper {
  display: grid; grid-template-columns: var(--control) minmax(1.5rem, 1fr) var(--control); align-items: center;
  background: var(--color-yellow); color: var(--color-black);
  box-shadow: inset 0 0 0 1.5px var(--color-black);
}
.add__stepper button {
  display: grid; place-items: center; height: 100%;
  transition: transform var(--dur-1) var(--ease-out);
}
.add__stepper button:active { transform: scale(.82); }
.add__stepper output {
  text-align: center; font: 900 1.375rem / 1 var(--font-display); font-variant-numeric: tabular-nums;
}

.add:not(.is-in) .add__stepper,
.add.is-in .add__btn { visibility: hidden; }

.add--lg { height: var(--control-lg); min-width: 11rem; }
.add--lg .add__btn { font-size: 1.0625rem; padding-inline: var(--s-5); }
.add--lg .add__stepper { grid-template-columns: var(--control-lg) 1fr var(--control-lg); }
.add--lg .add__stepper output { font-size: 1.625rem; }

/* On black the action is yellow from the start, and needs no keyline. */
.deals .add__btn { background: var(--color-yellow); color: var(--color-black); }
.deals .add__stepper { box-shadow: none; }
@media (hover: hover) { .deals .add__btn:hover { background: var(--color-white); } }

/* The cue that travels from a pressed button to the order. */
.fly {
  position: fixed; top: 0; left: 0; z-index: 90; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--color-yellow); border: 1.5px solid var(--color-black); border-radius: 50%;
  pointer-events: none;
}

/* ---------------------------------------------------------------- navigation
   Over the hero it is open and spacious. Once you scroll it tightens into a small
   black bar. On phones it is always the small bar, floating over the photograph.
   The two states differ only in these properties.                              */
.nav {
  --nav-h: 4rem; --nav-w: var(--container); --nav-pad: 0rem;
  --nav-bg: transparent; --nav-fg: var(--color-ink); --nav-line: transparent; --nav-shadow: none; --nav-blur: none;
  --cart-bg: var(--color-ink); --cart-fg: var(--color-cream); --count-bg: var(--color-yellow); --count-fg: var(--color-black);
  position: fixed; inset: 0 0 auto; z-index: 50; padding: var(--s-4) var(--gutter) 0; pointer-events: none;
  transition: padding var(--dur-3) var(--ease-out);
}
.nav.is-compact {
  --nav-h: 3.5rem; --nav-w: 50rem; --nav-pad: .375rem;
  --nav-bg: rgb(16 15 13 / .9); --nav-fg: var(--color-cream); --nav-line: var(--cream-rule);
  --nav-shadow: var(--shadow-float); --nav-blur: blur(14px) saturate(1.3);
  --cart-bg: var(--color-yellow); --cart-fg: var(--color-black); --count-bg: var(--color-black); --count-fg: var(--color-yellow);
  --focus: var(--color-yellow);
  padding-top: var(--s-3);
}

.nav__bar {
  display: flex; align-items: center; gap: var(--s-6);
  max-width: var(--nav-w); height: var(--nav-h); margin-inline: auto;
  padding-inline: var(--nav-pad); border: 1px solid var(--nav-line); border-radius: var(--r-3);
  background: var(--nav-bg); color: var(--nav-fg); box-shadow: var(--nav-shadow);
  -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur);
  pointer-events: auto;
  transition: max-width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out),
              padding var(--dur-3) var(--ease-out), background-color var(--dur-2), color var(--dur-2),
              border-color var(--dur-2), box-shadow var(--dur-2);
}

.brand { display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; }
.brand__mark { width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; }
.brand__text { display: grid; }
.brand__name { font: 900 1.375rem / 1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.brand__sub {
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em; line-height: 1.5; opacity: .68;
  max-height: 1.2rem; overflow: hidden; white-space: nowrap;
  transition: max-height var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.nav.is-compact .brand__sub { max-height: 0; opacity: 0; }

.nav__links { display: none; gap: var(--s-5); font-size: .9375rem; font-weight: 600; }
.nav__links a { position: relative; padding-block: var(--s-3); }
.nav__links a::after {
  content: ''; position: absolute; inset: auto 0 .5rem; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .nav__links a:hover::after { transform: scaleX(1); } }

/* The cart is the anchor: the only solid block in the bar. */
.cart {
  display: flex; align-items: center; gap: var(--s-3); height: 2.75rem; margin-left: auto;
  padding: 0 .375rem 0 var(--s-4); border-radius: var(--r-2);
  background: var(--cart-bg); color: var(--cart-fg); font-size: .9375rem; font-weight: 700; white-space: nowrap;
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.cart:active { transform: scale(.97); }
.cart__total { font-variant-numeric: tabular-nums; }
.cart[data-empty] .cart__total, .cart:not([data-empty]) .cart__label { display: none; }
.cart__count {
  display: grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: .375rem;
  border-radius: 4px; background: var(--count-bg); color: var(--count-fg);
  font: 900 1.25rem / 1 var(--font-display); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-2), color var(--dur-2);
}

@media (max-width: 59.99rem) {
  .nav { padding-top: var(--s-2); padding-inline: var(--s-2); }
  .nav, .nav.is-compact { --nav-h: 3.5rem; --nav-pad: .375rem; --nav-w: 100%;
    --nav-bg: rgb(16 15 13 / .9); --nav-fg: var(--color-cream); --nav-line: var(--cream-rule);
    --nav-shadow: var(--shadow-float); --nav-blur: blur(14px) saturate(1.3);
    --cart-bg: var(--color-yellow); --cart-fg: var(--color-black); --count-bg: var(--color-black); --count-fg: var(--color-yellow);
    --focus: var(--color-yellow); }
  .nav__bar { gap: var(--s-3); }
  .brand { gap: var(--s-2); min-width: 0; }
  .brand__name { font-size: 1.1875rem; }
  .brand__sub { display: none; }
  .brand__mark { width: 2.5rem; height: 2.5rem; }
  .cart { gap: var(--s-2); padding-left: var(--s-3); }
}
@media (min-width: 60rem) { .nav__links { display: flex; } }

/* ---------------------------------------------------------------------- hero
   A campaign, not a banner. Phone: photograph, then the pitch, add button in thumb
   reach. Desktop: type anchored bottom-left, the photograph full height and off
   the right edge, the price stuck across the seam between them.                */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--color-paper); overflow: clip;
}

.hero__media { position: relative; height: var(--hero-photo-h); overflow: hidden; touch-action: pan-y; }
.hero__stack { position: absolute; inset: 4.25rem 0 0; }       /* clear of the floating nav */
/* The photograph is shown whole, at its own shape, centred. Studio shots run to the
   edge of their frame, so the last few percent fade out: no cut shows on the white. */
.hero__img {
  position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
  filter: brightness(1.02);
  -webkit-mask-image: linear-gradient(to right, #0000, #000 5%, #000 95%, #0000), linear-gradient(#0000, #000 5%, #000 95%, #0000);
          mask-image: linear-gradient(to right, #0000, #000 5%, #000 95%, #0000), linear-gradient(#0000, #000 5%, #000 95%, #0000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

.hero__sticker { position: absolute; z-index: 3; top: calc(var(--hero-photo-h) - 4.25rem); right: var(--gutter); }

.hero__tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2);
  padding: 1.25rem var(--gutter) 0;              /* just below the price sticker, so every tick is a full-width target */
}
.hero__tab {
  position: relative; min-height: 2.75rem; padding-top: .625rem; overflow: hidden;
  font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; text-align: left;
  color: var(--ink-muted); white-space: nowrap; text-overflow: ellipsis;
  transition: color var(--dur-2);
}
.hero__tab span { display: block; font-weight: 700; letter-spacing: var(--track-micro); font-variant-numeric: tabular-nums; }
.hero__tab::before, .hero__tab i { content: ''; position: absolute; inset: 0 0 auto; height: 2px; }
.hero__tab::before { background: var(--ink-rule); }
.hero__tab i { background: var(--color-ink); transform: scaleX(0); transform-origin: left; }
.hero__tab[aria-current] { color: var(--color-ink); }
.hero__tab[aria-current] i { transform: scaleX(1); }
@media (hover: hover) { .hero__tab:hover { color: var(--color-ink); } }

/* On a phone the Add button comes straight after the headline, so it is on the first
   screen; the description follows it, kept clear of the WhatsApp button's corner. */
.hero__body { display: flex; flex-direction: column; padding: var(--s-4) var(--gutter) var(--s-7); }
.hero__label { display: flex; align-items: center; gap: var(--s-2); }
.hero__label::before { content: ''; width: 6px; height: 6px; background: var(--color-red); }
.hero__title {
  margin-top: var(--s-3);
  font: 900 var(--fs-hero) / .86 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase;
}
.hero__copy {
  order: 2; max-width: 27rem; min-height: calc(4 * var(--lh-body) * 1em); margin-top: var(--s-5); padding-right: 4.75rem;
  font-size: 1.0625rem; color: var(--ink-muted);
}
.hero__buy { order: 1; display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
.hero__buy .add { flex: none; min-width: 12.5rem; }
/* On a phone the menu is one scroll away and the WhatsApp button owns the bottom-right corner. */
.hero__buy .textlink { display: none; flex: none; padding-block: var(--s-3); font-size: .9375rem; }

/* Hold the pitch back for its entrance. Never the photograph: that is the LCP. */
@media (prefers-reduced-motion: no-preference) {
  .is-loading .hero__body, .is-loading .hero__sticker, .is-loading .hero__tabs { opacity: 0; }
}

@media (min-width: 40rem) {
  .hero__body { display: block; }                /* description first again, then the button */
  .hero__copy { min-height: calc(3 * var(--lh-body) * 1em); margin-top: var(--s-4); padding-right: 0; }
  .hero__buy .textlink { display: inline; }
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 46vw; grid-template-rows: 1fr auto;
    min-height: clamp(36rem, 100svh, 60rem);
  }
  .hero__media { grid-area: 1 / 2 / 3 / 3; height: auto; }
  .hero__stack { inset: 3% -8% 3% 0; }           /* a little larger than its column, off the right edge */
  .hero__body { grid-area: 1 / 1; align-self: end; padding: 7rem var(--s-8) var(--s-6) var(--edge); }
  .hero__copy { min-height: 0; font-size: 1.125rem; }
  .hero__buy { margin-top: var(--s-6); }
  .hero__tabs { grid-area: 2 / 1; padding: 0; margin: 0 var(--s-8) var(--s-5) var(--edge); max-width: 32rem; gap: var(--s-4); }
  .hero__tab { font-size: .8125rem; }
  .hero__sticker { top: auto; right: auto; left: calc(54vw - 2rem); bottom: 3.5rem; }
}

/* ---------------------------------------------------------------------- menu
   A menu page: every dish is the same row, a framed photograph and a line of
   menu. No boxes; hairlines and the photographs do the separating. The large
   photographs live in the hero slider and in the preview a tap opens.          */
.menu { padding-block: var(--s-8) var(--s-9); }

.menu__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-5); }
.menu__head .eyebrow { margin-bottom: var(--s-3); }

.cats {
  position: relative; display: flex; gap: var(--s-5); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ink-rule);
}
.cats::-webkit-scrollbar { display: none; }
.cats__btn {
  display: flex; align-items: flex-start; gap: .3em; min-height: 2.75rem; padding-block: var(--s-3) var(--s-4);
  font: 800 1.375rem / 1 var(--font-display); letter-spacing: .015em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-muted); transition: color var(--dur-2);
}
.cats__btn:focus-visible { outline-offset: -3px; }      /* the scroller would clip an outer ring */
.cats__btn sup { font: 700 .6875rem / 1 var(--font-body); letter-spacing: 0; }
.cats__btn[aria-pressed="true"] { color: var(--color-ink); }
@media (hover: hover) { .cats__btn:hover { color: var(--color-ink); } }
.cats__mark {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--color-ink);
  transform: translateX(var(--x, 0px)) scaleX(var(--w, 0)); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.dishes { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.dish {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s-4); align-items: start;
  padding-block: var(--s-5); border-bottom: 1px solid var(--ink-rule);
  background: var(--color-paper);      /* a moving dish is its own layer: give the blend its paper */
}

.dish__media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--color-frame); border-radius: var(--r-1); --zoom: var(--zoom-row, 1.28);
}
.dish__media img {
  width: 100%; height: 100%; object-fit: var(--fit, cover); object-position: var(--focus-at, 50% 50%);
  /* White studio backdrops multiply into the frame, so the food sits on it. */
  mix-blend-mode: multiply; filter: brightness(var(--lift, 1.02)) contrast(1.03);
  transform: scale(var(--zoom, 1)); transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) { .dish:hover .dish__media img { transform: scale(calc(var(--zoom, 1) * 1.04)); } }

/* The photograph is a button: it opens the preview. */
.dish__zoom { position: absolute; inset: 0; z-index: 1; cursor: zoom-in; }
.dish__zoom:focus-visible { outline-offset: -3px; }

.dish__body { display: grid; gap: var(--s-1); }
.dish__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-muted); line-height: 1.3; }
.dish__name { margin-top: var(--s-1); font: 800 var(--fs-3) / 1 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }
.dish__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-muted); }
.dish__buy { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-3); }
.dish .add { min-width: 6.5rem; }

@media (min-width: 40rem) {
  .menu__head { margin-bottom: var(--s-7); }
  .cats { margin-inline: 0; padding-inline: 0; }
  .dish { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--s-5); align-items: center; }
}

@media (min-width: 60rem) {
  .menu { padding-block: var(--s-9) var(--s-10); }
  .menu__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-7); margin-bottom: 0; }
  .menu__head .cats { border-bottom: 0; }
  .menu__head .cats__mark { bottom: .5rem; }

  /* Two columns of the same row, a rule down the middle. */
  .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * var(--gutter)); border-top: 1px solid var(--color-ink); }
  .dishes::before { content: ''; position: absolute; inset: 0 auto 0 50%; border-left: 1px solid var(--ink-rule); }
}

/* ---------------------------------------------------------------- deal mode
   The page switches to dark. The title is set wider than the screen on purpose. */
.deals {
  --focus: var(--color-yellow);
  background: var(--color-black); color: var(--color-cream); padding-block: var(--s-8) var(--s-9); overflow: clip;
}
/* Lockups: a line of this face at -.02em is N em wide (measured), so dividing the
   measure by N sets it edge to edge. DEAL 1.703 · MODE 2.065 · DEAL MODE 3.967 */
.deals__title {
  --measure: min(100vw - 2 * var(--gutter), var(--container));
  width: var(--measure); margin-inline: auto;
  font: 900 1rem / .8 var(--font-display); letter-spacing: -.02em; text-transform: uppercase;
  color: var(--color-yellow); white-space: nowrap;
}
.deals__title .line { margin-left: -.03em; font-size: calc(var(--measure) / 1.703); }
.deals__title .line + .line { font-size: calc(var(--measure) / 2.065); }
.deals__lede { max-width: 28rem; margin-block: var(--s-6) var(--s-7); font-size: 1.125rem; color: var(--cream-muted); }
.deals__lede b { color: var(--color-cream); }

.deals__grid { display: grid; }
.deal__media { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 3; background: #2a2015; }
.deal__media img { width: 100%; height: 116%; object-fit: cover; object-position: 50% 58%; }
.deal__body { display: grid; gap: var(--s-3); }
.deal__tag { justify-self: start; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--cream-muted); line-height: 1.3; }
.deal--lead .deal__tag { padding: .3rem .5rem; background: var(--color-red); color: var(--color-white); border-radius: var(--r-1); }
.deal__name { font: 900 var(--fs-2) / .95 var(--font-display); letter-spacing: -.005em; text-transform: uppercase; }
.deal__items { color: var(--cream-muted); }
.deal__items b { display: inline-block; min-width: 2.2em; color: var(--color-cream); font-variant-numeric: tabular-nums; }
.deal__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-3); }
.deal__price { display: grid; gap: var(--s-1); }
.deal__price s { font-size: var(--fs-small); color: var(--cream-muted); }
.deal .price { color: var(--color-yellow); font-size: 2.75rem; }
.deal .price__cur { color: var(--cream-muted); }
.deal .price__num { padding: 0; background: none; }

.deal--lead { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
.deal--lead .deal__name { font-size: clamp(2.75rem, 11vw, 5.5rem); line-height: .88; }
.deal--lead .price { font-size: 4rem; }
.deal:not(.deal--lead) { padding-block: var(--s-5); border-top: 1px solid var(--cream-rule); }
.deal:not(.deal--lead):last-child { border-bottom: 1px solid var(--cream-rule); }
.deal:not(.deal--lead) .deal__body {
  grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: end;
  grid-template-areas: "tag was" "name price" "items add";
}
.deal:not(.deal--lead) .deal__buy, .deal:not(.deal--lead) .deal__price { display: contents; }
.deal:not(.deal--lead) .deal__price s { grid-area: was; justify-self: end; align-self: center; }
.deal:not(.deal--lead) .price { grid-area: price; justify-self: end; }
.deal:not(.deal--lead) .deal__tag { grid-area: tag; }
.deal:not(.deal--lead) .deal__name { grid-area: name; font-size: 2rem; }
.deal:not(.deal--lead) .deal__items { grid-area: items; font-size: var(--fs-small); align-self: start; }
.deal:not(.deal--lead) .add { grid-area: add; align-self: start; margin-top: var(--s-2); min-width: 6.5rem; }

@media (min-width: 40rem) {
  .deals__title { font-size: calc(var(--measure) / 3.967); }
  .deals__title .line, .deals__title .line + .line { display: inline-block; vertical-align: top; font-size: 1em; }
}
@media (min-width: 60rem) {
  .deals { padding-block: var(--s-9) var(--s-10); }
  .deals__lede { margin-block: var(--s-7) var(--s-8); font-size: 1.25rem; }
  .deal--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); align-items: end; }
  .deal--lead .deal__media { margin: 0 0 0 calc(-1 * var(--edge)); aspect-ratio: 16 / 10; }
  .deal--lead .deal__body { gap: var(--s-4); padding-bottom: var(--s-2); }
  .deal--lead .deal__items { font-size: 1.125rem; }
  .deal--lead .deal__buy { margin-top: var(--s-5); }
  .deal--lead .price { font-size: 6rem; }
  .deal--lead { margin-bottom: var(--s-8); }
  .deal:not(.deal--lead) .deal__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto auto; column-gap: var(--s-6); align-items: center;
    grid-template-areas: "tag items was add" "name items price add";
  }
  .deal:not(.deal--lead) .deal__tag { align-self: end; }
  .deal:not(.deal--lead) .deal__name { align-self: start; font-size: 2.5rem; }
  .deal:not(.deal--lead) .deal__items { font-size: var(--fs-body); align-self: center; }
  .deal:not(.deal--lead) .add { align-self: center; margin: 0; min-width: 7.5rem; }
}

/* ----------------------------------------------------------------- delivery
   Brand talking. Type and rules, nothing boxed. This chapter is the breath.    */
.delivery { background: var(--color-paper); padding-block: var(--s-9); }
.delivery__title {
  --measure: min(100vw - 2 * var(--gutter), var(--container));
  margin-top: var(--s-3);
  font: 900 1rem / .8 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
}
.delivery__title .line { margin-left: -.03em; font-size: calc(var(--measure) / 3.428); }
.delivery__title .line + .line { font-size: calc(var(--measure) / 1.481); }
.delivery__cols { display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.delivery .eyebrow { margin-bottom: var(--s-3); }

.zone {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: end;
  padding-block: var(--s-4); border-top: 1px solid var(--ink-rule);
}
.zone:first-child { border-top-color: var(--color-ink); }
.zone dt { font: 800 clamp(1.75rem, 3.2vw, 2.5rem) / 1 var(--font-display); }
.zone__note { grid-column: 1; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--ink-muted); }
.zone__fee {
  grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: flex-start; gap: .3em;
  font: 900 clamp(2.25rem, 4vw, 3.25rem) / .9 var(--font-display); font-variant-numeric: tabular-nums;
}
.zone__fee span { margin-top: .4em; font: 700 .6875rem / 1 var(--font-body); letter-spacing: var(--track-micro); color: var(--ink-muted); }
.zone__fee--ask { grid-column: 1; grid-row: auto; margin-top: var(--s-2); font: inherit; font-size: var(--fs-small); }

.why ol { counter-reset: why; }
.why li {
  counter-increment: why; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s-3);
  padding-block: var(--s-4); border-top: 1px solid var(--ink-rule);
}
.why li:first-child { border-top-color: var(--color-ink); }
.why li::before {
  content: counter(why, decimal-leading-zero); grid-row: span 2; padding-top: .2em;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.why strong { font: 800 1.5rem / 1.05 var(--font-display); }
.why span { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--ink-muted); }

@media (min-width: 40rem) {
  .delivery__title { font-size: calc(var(--measure) / 5.108); }
  .delivery__title .line, .delivery__title .line + .line { display: inline-block; vertical-align: top; font-size: 1em; }
}
@media (min-width: 40rem) {
  .zone__fee--ask { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
}
@media (min-width: 60rem) {
  .delivery { padding-block: var(--s-11) var(--s-10); }
  .delivery__cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--gutter) * 2); margin-top: var(--s-9); }
}

/* ----------------------------------------------------------------- checkout
   The order as a kitchen ticket, on the same black the deals used.             */
.order { --focus: var(--color-yellow); background: var(--color-black); color: var(--color-cream); padding-block: var(--s-8) 0; }
.order .eyebrow { color: var(--cream-muted); }
.order__cols { display: grid; gap: var(--s-6); }
.order .display { margin-top: var(--s-3); font-size: clamp(4rem, 19vw, 9rem); line-height: .84; }
.order .display .line { display: inline-block; vertical-align: top; }
.order__lede { max-width: 26rem; margin-top: var(--s-5); color: var(--cream-muted); }

.ticket {
  --saw: 9px; --focus: var(--color-ink);
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + var(--saw)); background: var(--color-cream); color: var(--color-ink);
  border-radius: var(--r-1) var(--r-1) 0 0;
  /* torn edge: the ticket has been pulled off the printer */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--saw)) var(--saw) repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - var(--saw) + .5px) no-repeat;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--saw)) var(--saw) repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - var(--saw) + .5px) no-repeat;
}
.ticket__head { display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; padding-bottom: var(--s-3); border-bottom: 1.5px dashed var(--color-ink); }
.ticket__brand { font: 900 1.375rem / 1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.ticket__count { font-size: var(--fs-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ticket__clear { margin: 0 calc(-1 * var(--s-2)) 0 auto; min-height: 2.75rem; padding-inline: var(--s-2); font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }

.tline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: center;
  padding-block: var(--s-4); border-bottom: 1px solid var(--ink-rule);
}
.tline__name { font: 800 1.375rem / 1.05 var(--font-display); }
.tline__name small { display: block; margin-top: .25rem; font: 400 var(--fs-small) / 1.4 var(--font-body); color: var(--ink-muted); }
.tline__sum { font: 900 1.5rem / 1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.tline__name { grid-row: span 2; align-self: start; }
.tline .add { grid-column: 2; justify-self: end; height: 2.75rem; min-width: 8.25rem; }
.tline .add__stepper { grid-template-columns: 2.75rem 1fr 2.75rem; }

.ticket__empty { padding-block: var(--s-6); color: var(--ink-muted); }
.ticket__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4);
  font-size: var(--fs-small); color: var(--ink-muted); border-bottom: 1.5px dashed var(--color-ink);
}
.ticket__row span:last-child { text-align: right; }
.ticket__total { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-4); }
.ticket__total > span { font: 900 1.375rem / 1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.ticket__total small { display: block; margin-top: .3rem; font: 400 var(--fs-micro) / 1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.ticket__total output { font: 900 clamp(2.75rem, 12vw, 4rem) / .85 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.send {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 4rem; margin-top: var(--s-4);
  padding-inline: var(--s-5); background: var(--color-yellow); color: var(--color-black); border-radius: var(--r-2);
  font: 900 clamp(1.25rem, 5.4vw, 1.625rem) / 1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; text-align: left;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.send span { flex: 1; }
.send .arrow { transition: transform var(--dur-2) var(--ease-out); }
.send:active { transform: scale(.985); }
@media (hover: hover) { .send:not([aria-disabled="true"]):hover .arrow { transform: translateX(4px); } }
.send[aria-disabled="true"] { background: transparent; color: var(--cream-muted); box-shadow: inset 0 0 0 1px var(--cream-rule); cursor: default; }
.order__hint { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--cream-muted); }

.foot {
  display: grid; gap: var(--s-2); margin-top: var(--s-9);
  padding-block: var(--s-6) calc(5.5rem + env(safe-area-inset-bottom));   /* the WhatsApp button rests below the last line */
  border-top: 1px solid var(--cream-rule); font-size: var(--fs-small); color: var(--cream-muted);
}
.foot__brand { font: 900 1.375rem / 1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--color-cream); }
.foot .textlink { color: var(--color-cream); }

@media (min-width: 40rem) {
  .ticket { padding-inline: var(--s-6); }
  .tline { grid-template-columns: minmax(0, 1fr) auto 6.5rem; }
  .tline__name { grid-row: auto; align-self: center; }
  .tline .add { grid-column: 2; grid-row: 1; }
  .tline__sum { grid-column: 3; grid-row: 1; }
  .foot { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: baseline; }
  .foot__note { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .order { padding-top: var(--s-10); }
  .order__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(var(--gutter) * 2); align-items: start; }
  .order__intro { position: sticky; top: 7rem; }
  .order .display { font-size: clamp(5rem, 10vw, 10rem); }
  .order .display .line { display: block; }
  .order__lede { font-size: 1.125rem; }
  .foot { margin-top: var(--s-10); }
}

/* ------------------------------------------------------------ photo preview */
html:has(.peek[open]) { overflow: hidden; }
.peek {
  width: min(100% - 2 * var(--s-4), 44rem); max-height: calc(100dvh - 2 * var(--s-4)); padding: 0; border: 0;
  margin: auto;                                  /* the reset above removes the dialog's own centring */
  border-radius: var(--r-2); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-float);
  overflow: auto; overscroll-behavior: contain;
}
.peek[open] { animation: peek-in var(--dur-2) var(--ease-out); }
.peek::backdrop { background: rgb(16 15 13 / .72); }
@keyframes peek-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.peek__close {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; background: var(--color-ink); color: var(--color-cream); border-radius: var(--r-2);
  transition: transform var(--dur-1) var(--ease-out);
}
.peek__close:active { transform: scale(.94); }
.peek__media { background: var(--color-paper); border-radius: 0; --zoom: 1; }
.peek__text { display: grid; gap: var(--s-2); padding: var(--s-5); border-top: 1px solid var(--ink-rule); }
.peek .dish__label { color: var(--color-ink); }
.peek .dish__name { font-size: clamp(2.25rem, 7vw, 3.25rem); font-weight: 900; line-height: .95; }
.peek .dish__desc { display: block; max-width: 34rem; font-size: var(--fs-body); }
.peek .dish__buy { margin-top: var(--s-3); }
.peek .price { font-size: 3rem; }
@media (min-width: 40rem) { .peek__text { padding: var(--s-6); } }

/* ------------------------------------------------------------ mobile order bar
   With an order in hand the bar takes the bottom of the screen: the summary opens
   the ticket, the button sends the order straight to WhatsApp.                 */
.orderbar {
  position: fixed; inset: auto var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  height: 3.75rem; padding: 0 .375rem 0 var(--s-4);
  background: var(--color-black); color: var(--color-cream); border: 1px solid var(--cream-rule);
  border-radius: var(--r-3); box-shadow: var(--shadow-float);
  transform: translateY(160%); visibility: hidden;
  transition: transform var(--dur-3) var(--ease-out), visibility 0s var(--dur-3);
  --focus: var(--color-yellow);
}
.orderbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.orderbar__sum { display: grid; align-content: center; flex: 1; min-width: 0; height: 100%; line-height: 1.2; }
.orderbar__sum b { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--cream-muted); white-space: nowrap; }
.orderbar__sum span { font: 900 1.5rem / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.orderbar__go {
  display: flex; align-items: center; gap: var(--s-2); flex: none; height: 3rem; padding-inline: var(--s-4);
  background: var(--color-whatsapp); color: var(--color-black); border-radius: var(--r-2); font-weight: 700; font-size: .9375rem;
  transition: transform var(--dur-1) var(--ease-out);
}
.orderbar__go:active { transform: scale(.96); }
@media (min-width: 60rem) { .orderbar { display: none; } }

/* ------------------------------------------------------------ WhatsApp, always
   Bottom right, on every screen. One tap opens the chat: carrying the order if
   there is one, otherwise just a greeting. Its label opens on hover or focus.  */
.wa-fab {
  position: fixed; right: var(--s-2); bottom: calc(var(--s-2) + env(safe-area-inset-bottom)); z-index: 41;
  display: flex; align-items: center; height: 3.75rem; padding-inline: var(--s-4);
  background: var(--color-whatsapp); color: var(--color-black); border-radius: var(--r-3); box-shadow: var(--shadow-float);
  font-weight: 700; font-size: .9375rem; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2), visibility 0s;
}
.wa-fab svg { flex: none; }
.wa-fab:active { transform: scale(.95); }
.wa-fab__label {
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.wa-fab:focus-visible .wa-fab__label { max-width: 16rem; margin-left: var(--s-3); opacity: 1; }
@media (hover: hover) { .wa-fab:hover .wa-fab__label { max-width: 16rem; margin-left: var(--s-3); opacity: 1; } }
/* The icon steps aside only when another WhatsApp button already holds the screen:
   the order bar's on a phone, or the ticket's send button once you reach it.   */
.wa-fab.is-away { opacity: 0; visibility: hidden; transform: scale(.8); transition-delay: 0s, 0s, var(--dur-2); }
@media (max-width: 59.99rem) {
  .orderbar.is-on + .wa-fab { opacity: 0; visibility: hidden; transform: scale(.8); transition-delay: 0s, 0s, var(--dur-2); }
}
@media (min-width: 60rem) { .wa-fab { right: var(--s-5); bottom: var(--s-5); } }

/* ------------------------------------------------------------ reduced motion
   Movement goes; feedback stays (colour and state changes are instant).        */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}