/* KALIMERA — site stylesheet.
   Tokens from the KALIMERA design system + the approved homepage handoff ("city doors").
   Brand face is Futura PT; Jost (Google Fonts) stands in until the licence is available. */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  /* Brand colours */
  --souvlaki-gold:#F2BB42;
  --night-black:#000000;
  --street-white:#FFFFFF;
  --pitta-beige:#E1D1B6;
  --petra-polis:#FFFAF2;
  --athens-olive:#364D48;
  /* Muted footer greys */
  --grey-light:#c9c2ae;
  --grey-mid:#8f8875;
  --grey-dark:#2c2a24;
  /* Semantic aliases */
  --surface-page:var(--petra-polis);
  --surface-card:var(--street-white);
  --surface-inverse:var(--night-black);
  --surface-accent:var(--souvlaki-gold);
  --surface-muted:var(--pitta-beige);
  --text-body:var(--night-black);
  --text-secondary:var(--athens-olive);
  --text-inverse:var(--street-white);
  --text-on-gold:var(--night-black);
  --text-accent:var(--souvlaki-gold);
  --border-strong:var(--night-black);
  --border-subtle:rgba(0,0,0,.15);
  --focus-ring:var(--souvlaki-gold);

  /* Type */
  --font-core:"Jost","Futura PT",Futura,"Century Gothic",sans-serif;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
  /* Design-system general scale (the pages below use the homepage scale further down) */
  --text-display:clamp(48px,7vw,96px);
  --text-h1:44px;
  --text-h2:32px;
  --text-h3:24px;
  --text-lead:20px;
  --text-body-size:17px;
  --text-small:14px;
  --text-caption:12px;
  --tracking-display:.04em;
  --tracking-caps:.18em;
  --leading-tight:1.05;
  --leading-body:1.55;

  /* Spacing, shape, motion */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --radius-none:0;--radius-sm:2px;--radius-pill:999px;
  --border-w:2px;
  --shadow-flat:none;
  --shadow-pop:6px 6px 0 var(--night-black);
  --ease-brand:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms;
  --dur-base:200ms;

  /* Short names used by the components below */
  --gold:var(--souvlaki-gold);--beige:var(--pitta-beige);--white:var(--street-white);--black:var(--night-black);
  --petra:var(--petra-polis);--olive:var(--athens-olive);
  --font:var(--font-core);--pop:var(--shadow-pop);--ease:var(--ease-brand);

  /* Homepage scale — desktop */
  --pad-y:64px;--pad-x:54px;--gap:34px;--h1:62px;--h2:34px;--h3:19px;--quote:40px;--big:82px;--body:17px;--eye:11px;
  --hero-h:560px;--dish-hero-h:400px;--city-h1:96px;
  /* Inner pages (heights from the prototype's story / city templates) */
  --band-h:480px;--lead:22px;
}
/* Single breakpoint: 720px (reviewed at 1280 desktop and 390 mobile) */
@media (max-width:720px){:root{
  --pad-y:30px;--pad-x:20px;--gap:22px;--h1:33px;--h2:23px;--h3:16px;--quote:25px;--big:40px;--body:15px;--eye:10px;
  --hero-h:320px;--dish-hero-h:280px;--city-h1:clamp(42px,15vw,52px);
  --band-h:300px;--lead:18px;
}}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--masthead-h,0px) + var(--chapter-bar-h,0px) + var(--city-bar-h,0px))} /* --chapter-bar-h: Our story only; --city-bar-h: city pages */
/* The page never scrolls sideways (7 Oct 2026: on phones the homepage could be dragged to the left, and the bottom
   strip stretched off the screen). Two rules, and both are needed. html: the window itself refuses sideways scrolling.
   body (below): it is the reference box for anything positioned that has no nearer one, and it cuts off what sticks
   out sideways; without `position:relative` a stray absolute element answers to the window, which a phone then widens
   to fit (measured: 996px for a 375px phone). `clip`, never `hidden`: `hidden` on both would make body a scrolling box
   and the sticky header would scroll away. This is the safety net; the cause was a .visually-hidden label inside a
   sideways row (see .rail). */
html{overflow-x:clip}
/* Greek pages (el/): Jost has no Greek letters, so Commissioner (loaded on those pages only; it replaced Manrope, which looked too thin) draws them; Latin text,
   KALIMERA included, stays in Jost */
html[lang="el"]{--font-core:"Jost","Commissioner","Futura PT",Futura,"Century Gothic",sans-serif}
html,body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{position:relative;overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
img{display:block;max-width:100%}
/* A photo sits in a <picture> that offers lighter copies (build_pages.py, light_images). It has no box of its own:
   every rule below goes on treating the <img> as the child of whatever holds the picture. */
picture{display:contents}
h1,h2,h3,p,blockquote,figure{margin:0}
button{font-family:inherit}
[hidden]{display:none!important}
::selection{background:var(--souvlaki-gold);color:var(--night-black)}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.newsletter :focus-visible,.footer :focus-visible{outline-color:var(--focus-ring)}
/* Photos are not there to be taken (owner, 6 Oct 2026): no dragging a picture off the page, no "Save image" from a
   long press on a phone, and a right-click lands on whatever is behind the picture, not on the picture (main.js section
   26 also turns the menu off there). A deterrent, not a lock: whatever a browser shows can still be captured. Search
   engines are not affected: the pictures and their descriptions stay in the page. */
img,video{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
a:has(img),a:has(picture){-webkit-touch-callout:none;-webkit-user-drag:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==========================================================================
   Type helpers
   ========================================================================== */
.caps{text-transform:uppercase}
.eye{font:500 var(--eye)/1 var(--font);letter-spacing:.22em;text-transform:uppercase}
.h2{font:700 var(--h2)/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.h3{font:700 var(--h3)/1.1 var(--font);letter-spacing:.12em;text-transform:uppercase}
.body{font:300 var(--body)/1.6 var(--font);text-wrap:pretty}
.meta{font:400 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.todo{border-bottom:1.5px dotted currentColor} /* content still to supply */
.section{padding:var(--pad-y) var(--pad-x);border-bottom:2px solid var(--black)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.link-ul{font:500 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--gold);padding-bottom:3px}
.link-ul:hover{background:var(--gold)}
.text-link{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.text-link:hover{text-decoration-color:var(--gold)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--black);font:700 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all 150ms var(--ease)}
.btn-md{padding:14px 22px;box-shadow:var(--pop)}
.btn-sm{padding:9px 14px;font-size:11px}
.btn-lg{padding:16px 28px;font-size:13px;box-shadow:var(--pop)}
.btn-primary{background:var(--gold);color:var(--black)}
.btn-outline{background:transparent;color:var(--black)}
.btn-black{background:var(--black);color:var(--gold)}
.btn-md:hover,.btn-lg:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--black)}
.btn-md:active,.btn-lg:active{transform:translate(2px,2px);box-shadow:none}
.btn-primary:hover{background:var(--black);color:var(--gold)}

/* ==========================================================================
   Masthead: header + mobile menu + city bar, sticky together
   ========================================================================== */
.masthead{position:sticky;top:0;z-index:60}

.header{background:var(--petra);border-bottom:2px solid var(--black);display:flex;align-items:center;gap:22px;padding:16px 34px}
.header .logo{flex:none;display:block} /* black wordmark straight on the cream header (client: no black plate) */
.header .logo img{width:148px;height:auto}
/* The menu stands further from the logo than its items stand from each other (owner, 7 Oct 2026: "the quiz link
   looks too close to the logo"): the gold "What to eat?" block came first, 22px from the wordmark, the same gap as
   between two words of the menu, and read as stuck to it. Now twice that (44px) from about 1150px wide; the extra
   space tapers to nothing at 1080px.
   Found while measuring it: just above the burger's breakpoint (1041 to 1060px) the French menu was 20px too long
   for the bar and one of its words dropped to a second line. So between 1041 and 1068px the gaps between the words
   tighten a little (15px at the narrowest) and it holds on one line, with 7px to spare, in all three languages. */
.nav{display:flex;gap:clamp(15px,calc((100vw - 980px) / 4),22px);flex:1;align-items:center;height:32px;margin-left:clamp(0px,calc((100vw - 1080px) / 3),22px)}
html:not([lang="fr"]) .nav{margin-left:22px} /* the English and Greek menus are shorter: they have the room at every width */
.nav a{font:500 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a[aria-current],.nav a[aria-expanded="true"]{border-bottom-color:var(--gold)}
.nav a.nav-quiz,.mobile-menu a.nav-quiz{background:var(--gold);padding:5px 7px;border-bottom:0}
.nav a.nav-quiz:hover,.nav a.nav-quiz[aria-current]{background:var(--black);color:var(--gold)}
.lang{font:500 12px/1 var(--font);letter-spacing:.1em;color:var(--olive);display:flex;align-items:center;gap:6px;height:32px}
.lang>span{color:var(--grey-light)}
/* FR | EN (French first): the current language in black, the other one a link */
.lang .is-current{color:var(--black);font-weight:700}
.lang a{color:var(--olive);border-bottom:2px solid transparent;padding:4px 0 2px}
.lang a:hover{border-bottom-color:var(--gold)}
/* Phones and tablets (burger layout): the language picker sits in the header, always in view (client, 4 Oct 2026).
   A button with the current language; tap for Français / English / Ελληνικά. Desktop keeps the FR | EN | ΕΛ row. */
.lang-pick{display:none;position:relative}
.lang-pick summary{list-style:none;display:flex;align-items:center;gap:6px;height:32px;padding:0 9px;border:2px solid var(--black);font:700 12px/1 var(--font);letter-spacing:.08em;cursor:pointer;user-select:none}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary::after{content:"";border-style:solid;border-width:5px 4px 0 4px;border-color:currentColor transparent transparent transparent}
.lang-pick[open] summary{background:var(--black);color:var(--gold)}
.lang-pick[open] summary::after{transform:rotate(180deg)}
.lang-pick-list{position:absolute;right:0;top:calc(100% + 10px);z-index:5;min-width:168px;display:grid;background:var(--petra);border:2px solid var(--black);box-shadow:var(--pop)}
.lang-pick-list a,.lang-pick-list span{padding:14px 16px;font:500 15px/1 var(--font);border-bottom:1px solid var(--border-subtle)}
.lang-pick-list>:last-child{border-bottom:0}
.lang-pick-list .is-current{font-weight:700;background:var(--gold)}
.lang-pick-list a:hover{background:var(--beige)}
.burger{display:none;border:2px solid var(--black);background:transparent;color:var(--black);font:700 14px/1 var(--font);padding:6px 9px;cursor:pointer}
.mobile-menu{display:none;background:var(--petra);border-bottom:2px solid var(--black);padding:14px 20px;flex-direction:column;gap:14px}
.mobile-menu a{font:500 14px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.mobile-menu a[aria-current]{border-bottom:2px solid var(--gold);align-self:flex-start;padding-bottom:2px}
.mobile-menu.open{display:flex}
/* The full nav (six items) needs ~1000px, so tablets get the burger (sections keep the single 720px breakpoint) */
@media (max-width:1040px){
  .nav,.lang{display:none}
  .lang-pick{display:block}
  .burger{display:block}
  .header .spacer{flex:1}
  .mobile-menu{padding:14px 34px}
}
@media (max-width:720px){
  .header{padding:12px 16px;gap:12px}
  .header .logo img{width:104px}
  .header .btn-sm{padding:9px 11px}
  .mobile-menu{padding:14px 20px}
}
@media (min-width:1041px){.mobile-menu.open{display:none}}

/* "Which KALIMERA?": drops down from Menus and closes when you click anywhere else (client, 1 Oct 2026).
   Grouped by country, so seven or more kitchens still fit on one panel. */
.kitchens{position:absolute;left:0;right:0;top:100%;background:var(--gold);border-bottom:2px solid var(--black);padding:22px 34px 26px;box-shadow:0 14px 0 rgba(0,0,0,.08)}
.kitchens-head{display:flex;align-items:center;gap:22px;margin-bottom:18px}
.kitchens-title{margin:0;font:700 22px/1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.kitchens-head .link-ul{border-bottom-color:var(--black)}
.kitchens-head .link-ul:hover{background:var(--black);color:var(--gold)}
.kitchens-close{margin-left:auto;border:2px solid var(--black);background:transparent;font:700 14px/1 var(--font);padding:6px 9px;cursor:pointer}
.kitchens-groups{display:flex;flex-wrap:wrap;gap:22px 48px}
.kitchens-group .eye{margin:0 0 10px}
.kitchens-group ul{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);gap:4px 30px}
.kitchens-group a{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:10px;row-gap:3px;padding:8px 10px;margin:0 -10px;border:2px solid transparent}
.kitchens-group a:hover{border-color:var(--black);background:var(--petra)}
.k-city{font:700 20px/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.k-area{font:500 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.kitchens-group .live-status{grid-column:1/-1;border:0;padding:0;font-size:11px}
@media (max-width:720px){
  .kitchens{padding:16px 20px 20px;max-height:calc(100vh - 70px);overflow-y:auto}
  .kitchens-head{gap:14px}
  .kitchens-title{font-size:18px}
  .kitchens-group ul{grid-auto-flow:row;grid-template-rows:none}
}

/* ==========================================================================
   Homepage (reworked 1 Oct 2026 with the benchmarking): first screen with the Greek greeting big,
   proof straight after, the kitchens as a sideways rail, three ways to eat, the quiz.
   ========================================================================== */
.home-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;padding:var(--pad-y) var(--pad-x);background:var(--black);overflow:hidden;border-bottom:2px solid var(--black)}
.home-hero .poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 34%}
.home-hero img.poster{object-position:center 22%} /* the poster's faces sit high in the frame: keep them in on a tall box */
/* The hero film (main.js, section 23): silent loop, fades in over the poster once it is playing. The wide cut is already
   reframed shot by shot; the tall cut is the full vertical frame, anchored a little high so faces stay in on a tablet. */
.home-hero .film{opacity:0;transition:opacity 400ms var(--ease)}
.home-hero .film.is-playing{opacity:1}
.home-hero .film[data-cut="wide"]{object-position:center 88%} /* on a very wide hero the film is cropped top and bottom: keep the lower part (the food), lose the top */
@media (min-aspect-ratio:6/5){.home-hero img.poster{object-position:center 88%}}
.home-hero .film[data-cut="tall"]{object-position:center 55%}
@media (prefers-reduced-motion:reduce){.home-hero .film{display:none}}
.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.7) 92%)}
.home-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:22px;color:var(--petra)}
.greeting.hero-greeting{margin:0;font:700 clamp(56px,10vw,150px)/.9 var(--font);letter-spacing:.01em;text-transform:uppercase;color:var(--petra);text-shadow:0 2px 30px rgba(0,0,0,.35)}
/* Capitals (client, 5 Oct 2026) and no dotted underline: the tooltip with the Greek and its meaning still opens on hover, focus or tap */
.greeting.hero-greeting .gloss{font:inherit;color:inherit;text-decoration:none;border:0;padding:0}
.greeting.hero-greeting .gloss-tip{font:400 14px/1.45 var(--font);letter-spacing:0;text-shadow:none;top:calc(100% + 14px)}
@media (max-width:480px){.greeting.hero-greeting{font-size:clamp(40px,13vw,62px)}} /* the longest single word, KALINÝCHTA, fits small phones; KALÓ APÓGEVMA wraps to two lines */
@media (max-width:480px){html[lang="el"] .greeting.hero-greeting{font-size:clamp(34px,11vw,52px)}} /* Greek letters (Commissioner) run a little wider */
.home-title{margin:0;font:500 clamp(18px,1.7vw,24px)/1.35 var(--font);letter-spacing:.04em;max-width:34ch;text-wrap:balance;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.home-title span{display:block;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.62em;margin-bottom:6px;color:var(--gold)}
.btn-light{background:var(--petra);color:var(--black)}
.btn-light:hover{background:var(--black);color:var(--gold)}
.home-hero :focus-visible{outline-color:var(--focus-ring)}

.proof{background:var(--black);color:var(--petra);border-bottom:2px solid var(--black)}
.proof-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr}
.proof-list li{padding:26px var(--pad-x) 28px;border-left:1px solid var(--grey-dark);display:flex;flex-direction:column;justify-content:center;gap:8px}
.proof-list li:first-child{border-left:0}
.proof-quote{margin:0;font:700 19px/1.3 var(--font);text-wrap:balance}
.proof-big{margin:0;font:700 26px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.proof-by{margin:0;font:400 12px/1.45 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-light)}
@media (max-width:1000px){.proof-list{grid-template-columns:1fr 1fr}.proof-list li:nth-child(3){border-left:0}.proof-list li:nth-child(n+3){border-top:1px solid var(--grey-dark)}}
@media (max-width:720px){.proof-list{grid-template-columns:repeat(2,minmax(0,1fr))}.proof-list li{padding:18px var(--pad-x)}.proof-quote{font-size:16px}.proof-big{font-size:20px}}
@media (max-width:380px){.proof-list li{padding:16px 14px}.proof-big{font-size:17px}} /* WIMBLEDON fits a 320px phone */

/* Find your KALIMERA: a sideways rail (swipe on phones, arrows on desktop) and a country filter */
.home-kitchens .section-head{align-items:flex-end}
.find-head{flex:1 1 420px;min-width:0}
.rail-filter{display:flex;flex-wrap:wrap;gap:6px}
.rail-filter button{border:2px solid var(--black);background:transparent;padding:8px 11px;font:700 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.rail-filter button:hover{background:var(--gold)}
.rail-filter button[aria-pressed="true"]{background:var(--black);color:var(--gold)}
/* position:relative on every sideways row (.rail, .press-grid, .dish-heroes, .insta-grid): a row that scrolls only
   holds back what is positioned from inside it. Without it, a .visually-hidden label in the fourth card (absolute,
   placed where it stands in the row, 1,000px along) made the whole page 1,000px wide on a phone. */
.rail{position:relative;display:flex;gap:18px;margin:26px calc(var(--pad-x) * -1) 0;padding:0 var(--pad-x) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad-x);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.kitchen-card{position:relative;flex:0 0 min(360px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;border:2px solid var(--black);box-shadow:var(--pop);background:var(--petra);margin-bottom:6px}
.kitchen-card[hidden]{display:none}
.kitchen-card.tone-black{background:var(--black);color:var(--petra)}
.kitchen-card.tone-olive{background:var(--olive);color:var(--petra)}
.kitchen-card.tone-beige{background:var(--beige)}
.kitchen-card.tone-gold{background:var(--gold)}
.kitchen-card.is-soon,.kitchen-card.is-popup{border-style:dashed;box-shadow:none}
.kitchens-intro{margin:14px 0 0;max-width:66ch}
.kitchen-photo{position:relative;display:block;aspect-ratio:8/7;overflow:hidden;border-bottom:2px solid var(--black);background:var(--beige)} /* a little taller than wide (6 Oct 2026): a portrait photo, like Bordeaux, shows its sign and its terrace */
.kitchen-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* still: the hover zoom went on 6 Oct 2026 (client: not in keeping with the rest of the site) */
.kitchen-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 20px 22px}
.kitchen-kicker{margin:0;font:500 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase}
.kitchen-kicker span{font-weight:700;margin-right:6px}
.kitchen-city{margin:0;font:700 34px/1 var(--font);letter-spacing:.04em;text-transform:uppercase}
.tone-black .kitchen-city,.tone-olive .kitchen-city,.tone-black .kitchen-kicker span,.tone-olive .kitchen-kicker span{color:var(--gold)}
/* A restaurant card's number and quarter sit on the top left corner of its photo, on a black tab, like the dish numbers
   under "Extra virgin Greek food" and the photo credits (owner, 7 Oct 2026: "like that you'd have a uniform colour";
   in the text they were gold and white on the dark cards and black on the light ones). The same on all four cards.
   A pop-up or coming-soon card has no photo: its line stays in the text (.kitchen-kicker alone). */
.kitchen-kicker.on-photo{position:absolute;top:0;left:0;z-index:1;max-width:100%;padding:8px 10px 7px;background:var(--black);color:var(--petra);pointer-events:none}
.kitchen-kicker.on-photo span{color:var(--gold)}
.kitchen-line{margin:0;font:700 18px/1.2 var(--font);text-wrap:balance}
.kitchen-desc{margin:0;font:300 14px/1.55 var(--font)}
.kitchen-live{display:flex;flex-wrap:wrap;gap:8px}
.kitchen-live .weather,.kitchen-live .live-status{padding:5px 9px;font-size:10.5px;border-width:1.5px}
.kitchen-links{margin:auto 0 0;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
/* One underline for the three links, in the card's own text colour: white on the black and olive cards, black on the
   beige and gold ones (owner, 7 Oct 2026: "just black and white depending on the contrasting colours"). The first
   link used to carry a gold line, which vanished on the gold card and went muddy on the beige one. It is told apart
   by its weight and its arrow; pointing at a link thickens its line, on every card alike. */
.kitchen-links a{font:500 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.kitchen-links a.kitchen-go{font-weight:700}
.kitchen-links a:hover{text-decoration-thickness:3px}
.rail-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.rail-nav button{width:44px;height:44px;border:2px solid var(--black);background:var(--petra);font:700 18px/1 var(--font);cursor:pointer;box-shadow:4px 4px 0 var(--black)}
.rail-nav button:hover{background:var(--gold)}
.rail-nav button:disabled{opacity:.35;cursor:default;box-shadow:none}
@media (max-width:720px){.rail{gap:12px}.kitchen-text{gap:10px;padding:16px 16px 18px}.kitchen-city{font-size:28px}.kitchen-line{font-size:17px}.rail-nav{display:none!important}}

/* Quiz promo on the homepage */
.quiz-promo{background:var(--gold);border-bottom:2px solid var(--black);padding:calc(var(--pad-y)*1.1) var(--pad-x);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.quiz-promo-title{margin:0;font:700 clamp(36px,5.4vw,76px)/.95 var(--font);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.quiz-promo .body{margin:0 0 8px}
.insta.paper{background:var(--petra)}
/* Booking window: the restaurant's booking widget on the page (main.js section 18) */
.booking{width:min(560px,calc(100vw - 24px));height:min(780px,calc(100vh - 24px));max-width:none;max-height:none;padding:0;border:2px solid var(--black);box-shadow:var(--pop);background:var(--petra);color:var(--black)}
.booking[open]{display:flex;flex-direction:column}
.booking::backdrop{background:rgba(0,0,0,.55)}
.booking-head{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:2px solid var(--black);background:var(--gold)}
.booking-title{margin:0;font:700 15px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase}
.booking-frame{flex:1;width:100%;border:0;background:var(--white)}
.booking-help{margin:0;padding:10px 14px;border-top:2px solid var(--black);font:400 13px/1.4 var(--font)}
.booking-offer{background:var(--gold);font-weight:500}  /* what an online offer covers, said where the booking is made */
html.booking-open{overflow:hidden}

/* In the press (homepage band) and the full list (Our story) */
/* Homepage press (3 Oct 2026, phone first): no boxes; quotes under a rule, swiped sideways on phones, four columns wider */
.press-grid{position:relative;list-style:none;display:flex;gap:18px;margin:22px calc(var(--pad-x) * -1) 0;padding:0 var(--pad-x) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad-x);scrollbar-width:none}
.press-grid::-webkit-scrollbar{display:none}
.press-item{flex:0 0 80vw;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:16px 0 0;border-top:3px solid var(--black)}
.press-quote{margin:0;font:700 19px/1.3 var(--font);text-wrap:pretty}
@media (min-width:720px){
  .press-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px var(--gap);margin:26px 0 0;padding:0;overflow:visible}
  .press-item{padding-top:18px}
}
@media (min-width:1001px){.press-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.press-by{margin:0;font:500 11px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.press-link{margin-top:auto;font:500 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.press-link:hover{text-decoration-color:var(--gold)}
@media (max-width:720px){.press-quote{font-size:17px}}
/* ==========================================================================
   Our story (reworked 3 Oct 2026, written phone first; wider screens via min-width): an opening with four
   numbered chapters, 01 the founder, 02 the timeline as a sideways rail with a year ruler, 03 the press one
   clipping at a time, 04 the podcast and the socials.
   ========================================================================== */
.story-open h1{max-width:20ch}
.story-open .lead{margin:16px 0 0;max-width:46ch}
.story-chapters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:26px}
.story-chapters a{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 12px;border:1.5px solid var(--grey-dark);font:700 11px/1.25 var(--font);letter-spacing:.12em;text-transform:uppercase;transition:background 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease)}
.story-chapters span{font-size:13px;letter-spacing:.04em;color:var(--gold)}
.story-chapters a:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.story-chapters a:hover span{color:var(--black)}
.story-open :focus-visible{outline-color:var(--focus-ring)}

/* The chapter bar: once the opening's chapter links have scrolled away it slides out from under the header, so
   every chapter is one tap away; the one you're reading is gold (main.js section 21). Short labels on phones. */
.chapter-bar{position:fixed;left:0;right:0;top:var(--masthead-h,0px);z-index:58;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--black);border-bottom:2px solid var(--black);transform:translateY(-100%);visibility:hidden;transition:transform 200ms var(--ease),visibility 0s linear 200ms}
.chapter-bar.is-shown{transform:none;visibility:visible;transition:transform 200ms var(--ease)}
.chapter-bar[hidden]{display:none}
.chapter-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:6px 4px;border-left:1px solid var(--grey-dark);color:var(--petra);font:700 10px/1.1 var(--font);letter-spacing:.1em;text-transform:uppercase;text-align:center;white-space:nowrap;transition:background 150ms var(--ease),color 150ms var(--ease)}
.chapter-bar a:first-child{border-left:0}
.chapter-bar a:hover{background:var(--grey-dark)}
.chapter-bar a[aria-current]{background:var(--gold);color:var(--black)}
.chapter-bar :focus-visible{outline-color:var(--focus-ring);outline-offset:-3px}
.cb-num{letter-spacing:.04em;color:var(--gold)}
.chapter-bar a[aria-current] .cb-num{color:var(--black)}
.cb-long{display:none}

/* Chapter heads: a black number tab (gold on the black press band) beside the heading */
.chapter-head{display:flex;align-items:center;gap:12px}
.chapter-num{flex:none;margin:0;padding:6px 7px;background:var(--black);color:var(--gold);font:700 12px/1 var(--font);letter-spacing:.06em}
.chapter-head .h2{margin:0;line-height:1.05;text-wrap:balance}

/* 01 The founder: on phones a small framed portrait beside his quote, the story below it */
.story-founder{display:grid;grid-template-columns:minmax(0,1fr) 40%;grid-template-areas:"head head" "quote photo" "copy copy" "values values";column-gap:18px;row-gap:22px}
.story-founder .chapter-head{grid-area:head}
.story-quote{grid-area:quote;align-self:center;margin:0;padding:2px 0 2px 14px;border-left:5px solid var(--gold);display:grid;gap:10px}
.story-quote blockquote{margin:0;font:700 22px/1.12 var(--font);text-wrap:balance}
.story-quote figcaption{font:500 10px/1.45 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.founder-portrait{grid-area:photo;align-self:start;margin:0;aspect-ratio:3/4;border:2px solid var(--black);box-shadow:4px 4px 0 var(--black);background:var(--olive);overflow:hidden}
.founder-portrait img{width:100%;height:100%;object-fit:cover}
.founder-copy{grid-area:copy;display:grid;align-content:start;gap:12px}
.founder-copy .lead,.founder-copy .body{margin:0;max-width:56ch}
.story-values{grid-area:values;padding-top:18px;border-top:2px solid var(--black)}
.story-sub{margin:0 0 4px;font:700 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase}
.pillars{list-style:none;margin:0;padding:0;display:grid}
.pillars li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:8px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.pillars li:last-child{padding-bottom:0;border-bottom:0}
.pillar-num{grid-row:span 2;font:700 17px/1.15 var(--font)}
.pillars .h3{margin:0 0 5px;font-size:14px}
.pillars p{margin:0;font:300 14px/1.55 var(--font);max-width:46ch}

/* 02 The timeline: a sideways rail (swipe on phones, arrows from 720px via main.js section 14) above a year
   ruler that lights up the stops on screen. The line runs through every stop; after "Now" it turns dashed. */
.story-journey{background:var(--beige)}
.story-journey .section-head{align-items:center;flex-wrap:nowrap}
.story-journey .rail-nav{margin-top:0}
.story-journey .rail-nav button{background:var(--beige)}
.story-journey .rail-nav button:hover{background:var(--gold)}
.tl-years{display:flex;margin-top:22px;border:2px solid var(--black);background:var(--petra)}
.tl-years a{flex:1 1 0;min-width:0;padding:11px 0;border-left:1px solid var(--border-subtle);text-align:center;font:700 clamp(9.5px,2.9vw,11px)/1 var(--font);letter-spacing:.02em;transition:background 150ms var(--ease),color 150ms var(--ease)}
.tl-years a:first-child{border-left:0}
@media (max-width:360px){.tl-years a{font-size:9px;letter-spacing:0}} /* eleven stops on a 320px phone */
.tl-years a:hover{background:var(--gold)}
.tl-years a.is-in-view{background:var(--black);color:var(--gold)}
.rail.tl-rail{position:relative;gap:0;list-style:none;margin-top:26px;padding-bottom:12px}
.tl-rail:focus-visible{outline-offset:-4px}
.tl-stop{--tl-space:26px;flex:0 0 82vw;display:flex;flex-direction:column;padding-right:var(--tl-space);scroll-snap-align:start}
.tl-year{margin:0;font:700 clamp(44px,14.5vw,56px)/.9 var(--font);letter-spacing:-.01em}
.tl-mark{position:relative;display:block;height:16px;margin:14px 0 16px}
.tl-mark::before{content:"";position:absolute;left:0;right:calc(var(--tl-space) * -1);top:7px;height:2px;background:var(--black)} /* runs on through the gap to the next stop */
.tl-mark::after{content:"";position:absolute;left:1px;top:1px;width:10px;height:10px;border:2px solid var(--black);background:var(--gold);transform:rotate(45deg)}
.tl-title{margin:0 0 8px;font:700 15px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase}
.tl-text{margin:0;font:300 15px/1.55 var(--font);text-wrap:pretty}
.tl-now .tl-year{color:var(--olive)}
html[lang="fr"] .tl-now .tl-year{display:flex;align-items:flex-end;height:calc(clamp(44px,14.5vw,56px) * .9);font-size:clamp(34px,10.5vw,44px)} /* French: « Aujourd’hui » is longer than Now; same height as the years, so the line stays level */
.tl-stop{min-width:0} /* a long word never stretches its card past the screen */
.tl-now .tl-mark::before{height:0;background:none;border-top:2px dashed var(--black)}
.tl-now .tl-mark::after{background:var(--black)}
.tl-cities{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.tl-cities a{padding:9px 12px;border:2px solid var(--black);background:var(--petra);font:700 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;transition:all 150ms var(--ease)}
.tl-cities a:hover{background:var(--gold);box-shadow:4px 4px 0 var(--black)}

/* Private hire & events and careers: their own beige block under Listen & follow, side by side from 720px (client,
   3 Oct 2026: not inside the timeline); the tiles are the contact page's "Plan something" tiles */
.story-ctas{display:grid;gap:16px}
.plan-line{font:300 15px/1.5 var(--font);max-width:40ch}
@media (min-width:720px){.story-ctas{grid-template-columns:1fr 1fr;gap:22px}}

/* 03 The press, on black: one clipping at a time, the publications as tabs underneath (main.js section 20);
   without JS every clipping is listed. All clippings share one grid cell, so the box doesn't jump. */
.story-press{background:var(--black);color:var(--petra)}
.story-press .chapter-num{background:var(--gold);color:var(--black)}
.story-press :focus-visible{outline-color:var(--focus-ring)}
.press-reader{margin-top:24px}
.press-stage{display:grid}
.press-clip{margin:0;padding:20px 0;border-top:1px solid var(--grey-dark);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.press-clip blockquote{margin:0;font:700 25px/1.15 var(--font);text-wrap:balance}
.press-clip.is-long blockquote{font-size:20px;line-height:1.2}
.press-clip figcaption{display:grid;gap:5px;font:500 11px/1.35 var(--font);letter-spacing:.14em;text-transform:uppercase}
.press-src{color:var(--gold)}
.press-when{font-weight:400;color:var(--grey-light)}
.press-read{font:500 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
.press-read:hover{color:var(--gold)}
.press-reader.is-tabbed .press-clip{grid-area:1/1;padding:0;border-top:0;visibility:hidden;opacity:0;transition:opacity 200ms var(--ease),visibility 0s linear 200ms}
.press-reader.is-tabbed .press-clip.is-shown{visibility:visible;opacity:1;transition:opacity 200ms var(--ease)}
.press-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:26px}
.press-tabs[hidden]{display:none}
.press-tab{display:grid;align-content:start;gap:5px;padding:10px 11px;border:1.5px solid var(--grey-dark);background:transparent;color:var(--petra);text-align:left;cursor:pointer;transition:background 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease)}
.press-tab-pub{font:700 11px/1.25 var(--font);letter-spacing:.1em;text-transform:uppercase}
.press-tab-meta{font:400 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--grey-light)}
.press-tab:hover{border-color:var(--petra)}
.press-tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--black)}
.press-tab[aria-selected="true"] .press-tab-meta{color:var(--black)}

/* 04 Listen & follow: the podcast keeps its gold block (client), the socials are big tappable rows */
.story-follow{display:grid;gap:24px}
.follow-grid{display:grid;gap:22px}
.podcast{display:grid;align-content:start;gap:12px;padding:22px 20px;border:2px solid var(--black);background:var(--gold);box-shadow:var(--pop)}
.podcast .eye,.podcast .body{margin:0}
.podcast-title{margin:0;font:700 21px/1.2 var(--font);text-wrap:balance}
.podcast-listen{justify-self:start;display:inline-flex;align-items:center;gap:12px;margin-top:4px;padding:8px 16px 8px 8px;background:var(--black);color:var(--petra);font:700 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;transition:background 150ms var(--ease)}
.podcast-listen:hover{background:var(--olive)}
.podcast-play{position:relative;flex:none;width:30px;height:30px;background:var(--gold)}
.podcast-play::after{content:"";position:absolute;left:11px;top:8px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--black)}
.follow-links{list-style:none;margin:0;padding:0;border-top:2px solid var(--black)}
.follow-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:16px 6px;border-bottom:2px solid var(--black);transition:background 150ms var(--ease)}
.follow-net{font:700 20px/1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.follow-what{grid-column:1;margin-top:6px;font:400 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.follow-arrow{grid-column:2;grid-row:1/span 2;font:700 22px/1 var(--font);transition:transform 150ms var(--ease)}
.follow-links a:hover{background:var(--gold)}
.follow-links a:hover .follow-what{color:var(--black)}
.follow-links a:hover .follow-arrow{transform:translateX(4px)}

@media (min-width:720px){
  .story-chapters{grid-template-columns:repeat(4,minmax(0,1fr));max-width:920px}
  .chapter-bar{display:flex;padding:0 var(--pad-x)}
  .chapter-bar a{flex-direction:row;gap:10px;min-height:46px;padding:0 22px;font-size:11px;letter-spacing:.12em}
  .chapter-bar a:last-child{border-right:1px solid var(--grey-dark)}
  .chapter-bar a:first-child{border-left:1px solid var(--grey-dark)}
  .cb-num{font-size:12px}
  .cb-long{display:inline}
  .cb-short{display:none}
  .story-founder{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);grid-template-areas:"head photo" "quote photo" "copy photo" "values photo";grid-template-rows:auto auto auto 1fr;column-gap:calc(var(--gap)*2);row-gap:28px}
  .story-quote{align-self:start;padding-left:20px;border-left-width:6px}
  .story-quote blockquote{font-size:clamp(28px,3.2vw,46px);line-height:1.06}
  .story-quote figcaption{font-size:11px}
  .founder-portrait{aspect-ratio:4/5;box-shadow:var(--pop)}
  .founder-portrait img{object-position:50% 70%} /* head with headroom, folded arms at the bottom */
  .story-values{align-self:start;padding-top:22px}
  .pillars p{font-size:15px}
  .tl-stop{--tl-space:34px;flex-basis:300px}
  .tl-year{font-size:72px}
  html[lang="fr"] .tl-now .tl-year{height:calc(72px * .9);font-size:44px}
  .tl-title{font-size:16px}
  .tl-text{font-size:16px}
  .press-clip blockquote{font-size:clamp(30px,3.6vw,50px);line-height:1.06}
  .press-clip.is-long blockquote{font-size:clamp(24px,2.6vw,36px);line-height:1.12}
  .press-tab{padding:12px 14px}
  .follow-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gap);align-items:start}
  .podcast{padding:28px}
  .podcast-title{font-size:26px}
  .follow-net{font-size:26px}
  .follow-links a{padding:20px 8px}
}
@media (min-width:1100px){.tl-stop{flex-basis:320px}}
@media (min-width:1000px){ /* the clipping and the publication names side by side */
  .press-reader.is-tabbed{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
  .press-reader.is-tabbed .press-tabs{margin-top:0}
}
.olive-band .groups-line{margin-top:22px}

/* Contact and event enquiry forms */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:calc(var(--gap)*1.4);align-items:start}
.contact-ways{display:grid;gap:22px}
.contact-ways .info-block .eye{margin:0 0 8px}
.contact-ways .h2,.contact-ways>.body{margin:0}
/* Contact (reworked 3 Oct 2026, phone first): email and phones in the title band, "Plan something" as big tiles */
.contact-quick{display:grid;gap:8px;margin-top:24px}
.contact-quick p{margin:0}
.contact-mail a{font:700 clamp(20px,5.6vw,30px)/1.15 var(--font);letter-spacing:.02em;color:var(--gold);border-bottom:2px solid var(--gold);overflow-wrap:anywhere}
.contact-mail a:hover{color:var(--petra);border-color:var(--petra)}
.contact-phones{font:400 15px/1.4 var(--font)}
.contact-phones a{font-weight:500;border-bottom:2px solid var(--gold)}
.contact-phones span{margin-left:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-light)}
.contact-open :focus-visible{outline-color:var(--focus-ring)}
.plan-tiles{display:grid;gap:14px;margin-top:20px}
.plan-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 20px 22px;border:2px solid var(--black);box-shadow:var(--pop);transition:transform 150ms var(--ease),box-shadow 150ms var(--ease)}
.plan-tile.tone-gold{background:var(--gold)}
.plan-tile.tone-olive{background:var(--olive);color:var(--petra)}
.plan-tile.tone-black{background:var(--black);color:var(--petra)}
a.plan-tile:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--black)}
.plan-tile p{margin:0}
.plan-kicker{font:500 11px/1.2 var(--font);letter-spacing:.18em;text-transform:uppercase}
.tone-olive .plan-kicker,.tone-black .plan-kicker{color:var(--gold)}
.plan-title{font:700 24px/1.08 var(--font);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
.plan-title a:hover{color:var(--gold)}
.plan-go{margin-top:auto;padding-top:6px;font:700 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.plan-cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.plan-cities a{padding:9px 12px;border:2px solid var(--petra);font:700 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;transition:background 150ms var(--ease),color 150ms var(--ease)}
.plan-cities a:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.tone-olive :focus-visible,.tone-black :focus-visible,a.plan-tile.tone-olive:focus-visible{outline-color:var(--focus-ring)}
.contact-go{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px!important}
.contact-go a{font:700 11px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.contact-go a:hover{text-decoration-color:var(--gold)}
@media (min-width:720px){
  .contact-quick{grid-template-columns:auto auto auto;justify-content:start;align-items:baseline;column-gap:32px}
  .plan-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .plan-tiles.is-pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
  .plan-tile{padding:26px 24px 28px;min-height:230px}
  .plan-title{font-size:clamp(24px,2.4vw,32px)}
}
.contact-form{display:grid;gap:14px;padding:24px;border:2px solid var(--black);background:var(--white);box-shadow:var(--pop)}
.contact-form .h3{margin:0 0 4px}
.field{display:grid;gap:6px}
.field label{font:500 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;min-width:0;border:2px solid var(--black);border-radius:0;background:var(--petra);padding:12px 13px;font:300 15px/1.3 var(--font);color:var(--black)}
.field textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{margin:0;padding:12px 14px;background:var(--gold);border:2px solid var(--black);font:400 14px/1.45 var(--font)}
/* Under each form's button: what we do with what is sent, and the way to the privacy page (6 Oct 2026) */
.form-privacy{margin:0;font:300 13px/1.5 var(--font);color:var(--olive)}
.newsletter .form-privacy{flex:1 1 100%;margin:2px 0 0;max-width:none;color:var(--grey-light)}
.newsletter .form-note{flex:1 1 100%;margin:0;max-width:none;color:var(--black)}
/* Sent (client, 6 Oct 2026: the thank-you was easy to miss): the form gives way to a gold panel with a tick, a headline
   and the thank-you; main.js brings it to the middle of the screen and moves focus to it. */
.form-done{display:grid;justify-items:start;gap:10px;padding:28px 24px;background:var(--gold);border:2px solid var(--black);box-shadow:var(--pop);color:var(--black)}
.form-done[hidden]{display:none}
.form-done:focus{outline:none}
.form-done-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--black);color:var(--gold);font:700 26px/1 var(--font)}
.form-done-title{margin:4px 0 0;font:700 clamp(24px,5vw,32px)/1.05 var(--font);letter-spacing:.05em;text-transform:uppercase}
.form-done-text{margin:0;max-width:40ch;font:400 16px/1.5 var(--font)}
.form-again{margin-top:8px;padding:0;border:0;background:none;color:inherit;font:700 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
form.is-sent>:not([data-form-ok]){display:none!important}
.contact-form.is-sent{padding:0;border:0;background:none;box-shadow:none}
.newsletter form.is-sent{display:block}
.newsletter .form-done p{margin:0;max-width:40ch}
.newsletter .form-done .form-done-title{margin-top:4px}
form button[disabled]{opacity:.5;cursor:default}
.contact-kitchens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.contact-kitchen{padding:18px;border:2px solid var(--black);background:var(--petra);display:grid;gap:6px;align-content:start}
.contact-kitchen.tone-black{background:var(--black);color:var(--petra)}
.contact-kitchen.tone-olive{background:var(--olive);color:var(--petra)}
.contact-kitchen.tone-gold{background:var(--gold)}
.contact-kitchen p{margin:0;font:300 14px/1.5 var(--font)}
.contact-city{margin:0 0 4px;font:700 22px/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.tone-black .contact-city,.tone-olive .contact-city{color:var(--gold)}
.contact-hours{opacity:.9}
/* Opening hours on a restaurant card (contact page, the short page for Instagram): a small table, days in full on the
   left, times lined up on the right, today in bold (main.js), closed days dimmed. It replaced a one-line summary of
   abbreviations the owner found chaotic (7 Oct 2026). The hairlines are a neutral grey: the cards come in four colours. */
.hours-mini{margin:6px 0 2px;display:grid}
.hours-mini div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;border-top:1px solid rgba(127,127,127,.45);font:300 13.5px/1.35 var(--font)}
.hours-mini div:last-child{border-bottom:1px solid rgba(127,127,127,.45)}
.hours-mini dt{font-weight:500}
.hours-mini dd{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 10px;text-align:right}
.hours-mini dd span{white-space:nowrap}
.hours-mini .is-closed{opacity:.6}
.hours-mini .is-today{font-weight:700;opacity:1}
.hours-mini .is-today dt{font-weight:700}
/* The short page for the Instagram bio (links.html). One restaurant at a time, picked from four buttons that each
   carry its open / closed dot; then the other doors as a small grid. Made to fit the first screen of a phone
   (owner, 7 Oct 2026: four cards and six tall tiles were "an endless scroll"). */
.links-open{padding-top:22px;padding-bottom:22px}
.links-open h1{margin-top:10px}
.links-pick{padding-top:18px;padding-bottom:6px}
.pick-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.pick-tabs button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 12px;border:2px solid var(--black);border-radius:0;background:transparent;color:var(--black);font:700 12px/1.1 var(--font);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer}
.pick-tabs button:hover{background:var(--gold)}
.pick-tabs button[aria-pressed="true"]{background:var(--black);color:var(--gold)}
.pick-tabs .pick-dot{border:0;padding:0;margin:0;gap:0;flex:none}
.pick-panel{position:relative;display:grid;gap:12px;justify-items:start;padding:20px 20px 18px;border:2px solid var(--black);box-shadow:var(--pop);background:var(--gold);color:var(--black)}
.pick-panel+.pick-panel{margin-top:16px}
.pick-panel p{margin:0}
.pick-city{margin:0;font:700 30px/1 var(--font);letter-spacing:.04em;text-transform:uppercase}
.pick-where{font:300 15px/1.45 var(--font)}
.pick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:520px}
.pick-actions .btn{padding:14px 10px;text-align:center}
.pick-actions .btn:first-child{grid-column:1/-1}
.pick-delivery{display:flex;flex-wrap:wrap;gap:6px 18px}
.pick-delivery a,.pick-hours summary{font:700 11px/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pick-hours{width:100%;max-width:520px}
.pick-hours summary{cursor:pointer;list-style:none;display:inline-block;padding:4px 0}
.pick-hours summary::-webkit-details-marker{display:none}
.pick-hours summary::after{content:" +"}
.pick-hours[open] summary::after{content:" –"}
.pick-panel :focus-visible{outline-offset:2px}
/* Its footer is the site's without the four address blocks (the only page so): the logo row needs no rule above it */
.footer.is-short{padding-top:26px;padding-bottom:26px}
.footer.is-short .bottom{margin-top:0;padding-top:0;border-top:0}
/* Without JavaScript the four panels simply follow one another: no buttons to choose with */
[data-kitchen-picker]:not(.is-ready) .pick-tabs{display:none}
/* The short page's game (owner, 8 Oct 2026: "a bit more wow… a little game"): a black block between the gold
   restaurant and the six doors. Three reels one above the other, each one word high; main.js slides the strips
   (section 30). The words are big on purpose: it is the one loud thing on the page. */
.links-spin{padding-top:24px;padding-bottom:0}
.spin{position:relative;display:grid;gap:12px;padding:18px 18px 20px;background:var(--black);color:var(--white)}
.spin>*{margin:0}
.spin .eye{color:var(--gold)}
.spin-title{font:700 20px/1.15 var(--font);letter-spacing:.06em;text-transform:uppercase}
.spin-reels{display:grid;gap:3px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.spin-row{display:grid;grid-template-columns:34px minmax(0,1fr)}
.spin-no{display:flex;align-items:center;font:700 12px/1 var(--font);letter-spacing:.1em;color:var(--gold)}
.spin-window{height:46px;overflow:hidden;background:var(--petra);color:var(--black)}
.spin-row:nth-child(2) .spin-window{background:var(--beige)}
.spin-row:nth-child(3) .spin-window{background:var(--gold)}
.spin-strip{margin:0;padding:0;list-style:none}
.spin-strip li{display:flex;align-items:center;height:46px;padding:0 14px;font:700 25px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.spin-row.is-hit .spin-window{animation:spin-hit 260ms var(--ease)}
@keyframes spin-hit{from{filter:invert(1)}to{filter:none}}
/* The two buttons share a row when both fit on it, and each takes a whole row when they do not (a small phone) */
.spin-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.spin-actions .btn{flex:1 1 auto;padding:15px 10px;white-space:nowrap;box-shadow:none}
.spin-actions .btn:hover{border-color:var(--gold);transform:none;box-shadow:none}
.spin.has-order [data-spin-go]{background:transparent;border-color:var(--white);color:var(--white)}
.spin.is-spinning .spin-actions .btn{opacity:.4;pointer-events:none}
@media (min-width:720px){
  .spin{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"eye reels" "title reels" "actions reels";column-gap:36px;align-content:center;padding:28px 30px}
  .spin .eye{grid-area:eye;align-self:end}
  .spin-title{grid-area:title;font-size:30px}
  .spin-reels{grid-area:reels}
  .spin-actions{grid-area:actions;align-self:start}
  .spin-window,.spin-strip li{height:56px}
  .spin-strip li{font-size:32px;padding:0 18px}
}
@media (prefers-reduced-motion:reduce){.spin-row.is-hit .spin-window{animation:none}}
.links-quick{padding-top:22px}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.quick-grid a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:12px 14px;border:2px solid var(--black);background:var(--petra);font:700 12px/1.15 var(--font);letter-spacing:.1em;text-transform:uppercase;transition:transform 150ms var(--ease),box-shadow 150ms var(--ease)}
.quick-grid a::after{content:"→";flex:none}
.quick-grid a.is-gold{background:var(--gold)}
.quick-grid a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--black)}
@media (max-width:720px){
  .pick-tabs{grid-template-columns:1fr 1fr}
  .quick-grid{grid-template-columns:1fr 1fr}
  .pick-city{font-size:26px}
}
.enquire{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(var(--gap)*1.4);align-items:start}
.enquire-text .body{margin-top:14px}
/* Events: two ways to do it (number beside the text; side by side from 720px) */
.ways{list-style:none;margin:22px 0 0;padding:0;display:grid;border-top:2px solid var(--black)}
.ways li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding:20px 0 22px;border-bottom:1px solid var(--border-subtle)}
.ways .num{font:700 13px/1.6 var(--font);letter-spacing:.14em;color:var(--olive)}
.ways-body{display:grid;gap:10px;align-content:start}
.ways-body .h3,.ways-body p{margin:0}
.ways-body p{font:300 16px/1.6 var(--font);max-width:52ch;text-wrap:pretty}
@media (min-width:720px){.ways{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}}
/* Events: "Where we've cooked". Was a festival poster with headliners at 120px (3 Oct 2026); the client found the mixed
   sizes and bold "really ugly" (5 Oct 2026), so it is one even ruled list on black: every entry the same size and
   weight, the name on the left, place and year on the right. Two balanced columns from 900px, one on phones. */
.lineup{background:var(--black);color:var(--petra);border-bottom:2px solid var(--black);padding:calc(var(--pad-y)*1.2) var(--pad-x)}
.lineup>*{max-width:1040px;margin-left:auto;margin-right:auto}
.lineup .eye{margin-top:0;margin-bottom:0;color:var(--gold);letter-spacing:.26em}
.lineup-title{margin-top:12px;margin-bottom:0;font:500 clamp(20px,5vw,28px)/1.3 var(--font);text-wrap:balance}
.lineup-list{list-style:none;margin-top:26px;margin-bottom:0;padding:0;border-top:1px solid rgba(255,250,242,.22)}
.lineup-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;padding:16px 0;border-bottom:1px solid rgba(255,250,242,.22);break-inside:avoid}
.lineup-name{font:500 clamp(15px,4vw,17px)/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase}
.lineup-when{font:300 14px/1.4 var(--font);color:var(--grey-light);text-align:right}
.lineup .lineup-guests{margin-top:44px;margin-bottom:0;color:var(--gold)}
.lineup-guests+.lineup-list{margin-top:14px}
.lineup-foot{margin-top:28px;margin-bottom:0;font:300 15px/1.55 var(--font);color:var(--grey-light)}
.ways .ways-cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ways .ways-cities a{padding:9px 12px;border:2px solid var(--black);font:700 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;transition:background 150ms var(--ease),box-shadow 150ms var(--ease)}
.ways .ways-cities a:hover{background:var(--gold);box-shadow:4px 4px 0 var(--black)}
@media (min-width:1200px){.lineup-list{column-count:2;column-gap:56px}}
@media (max-width:520px){.lineup-list li{flex-direction:column;align-items:flex-start;gap:5px}.lineup-when{text-align:left}} /* phones: every entry stacked the same way */
@media (max-width:1000px){.contact-kitchens{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.contact-grid,.enquire{grid-template-columns:1fr}}
@media (max-width:720px){.contact-kitchens{grid-template-columns:1fr}.contact-form{padding:18px}.field-row{grid-template-columns:1fr}}
/* News and special hours (js/news.js): a gold strip on the homepage, a notice box on city pages */
.news-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 40px;padding:18px var(--pad-x);background:var(--gold);border-bottom:2px solid var(--black)}
.news-item{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.news-label{margin:0;font:700 10.5px/1 var(--font);letter-spacing:.18em;text-transform:uppercase}
.news-title{margin:0;font:700 17px/1.25 var(--font)}
.news-text{margin:0;font:400 14px/1.45 var(--font);max-width:56ch}
.news-link{margin-top:2px;font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.news-notice{display:grid;gap:12px;max-width:48ch;padding:12px 14px;border:2px solid currentColor}
.info-block .news-notice{margin:6px 0 12px;background:var(--gold);color:var(--black);border-color:var(--black)}
.quiz-promo.dark{background:var(--black);color:var(--petra)}
.quiz-promo.dark .eye{color:var(--gold)}
.quiz-promo.dark .quiz-promo-title{color:var(--gold)}
.quiz-promo.dark :focus-visible{outline-color:var(--focus-ring)}
.menu-quiz{margin:calc(var(--gap)*.9) 0 0;padding:12px 16px;background:var(--gold);border:2px solid var(--black);font:500 14px/1.4 var(--font)}
.menu-quiz a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.post.is-video::after{content:"";position:absolute;top:10px;right:10px;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--petra);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} /* video posts get a small play mark */
/* Phones: the three dishes swipe sideways like the kitchens, instead of a long stack */
@media (max-width:720px){
  .dishes .dish-heroes{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(var(--pad-x) * -1);margin-right:calc(var(--pad-x) * -1);padding:0 var(--pad-x) 6px;scroll-padding:0 var(--pad-x);scrollbar-width:none}
  .dishes .dish-heroes::-webkit-scrollbar{display:none}
  .dishes .dish-hero{flex:0 0 78vw;scroll-snap-align:start;--dish-hero-h:240px}
}

/* ==========================================================================
   Intro (also used for page headers)
   ========================================================================== */
.intro h1{margin:0;font:700 var(--h1)/.98 var(--font);letter-spacing:.01em;text-transform:uppercase;max-width:22ch;text-wrap:balance}
.intro p{margin:22px 0 0;max-width:58ch;line-height:1.65}

/* ==========================================================================
   Signature dishes
   ========================================================================== */
/* Twelve dishes: the three with photos as big hero cards, the rest as a numbered editorial list */
.dish-heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:26px}
.dish-hero{display:flex;flex-direction:column;gap:12px;min-width:0}
.dish-hero .h3{font-size:calc(var(--h3) + 3px)}
.dish-hero p{margin:0;font:300 15px/1.55 var(--font);max-width:42ch;text-wrap:pretty}
.dish-media{position:relative;overflow:hidden;height:var(--dish-hero-h);border:2px solid var(--black);background:var(--white)}
.dish-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dish-num{position:absolute;top:0;left:0;z-index:1;background:var(--black);color:var(--gold);padding:7px 9px;font:700 12px/1 var(--font);letter-spacing:.14em}
.dish-list{list-style:none;margin:calc(var(--gap)*1.6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);border-top:2px solid var(--black)}
.dish-list li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-content:start;padding:18px 0 20px;border-bottom:1px solid var(--border-subtle)}
.dish-list .num{grid-row:1/span 2;font:700 13px/1.45 var(--font);letter-spacing:.14em;color:var(--olive)}
.dish-list .h3{font-size:calc(var(--h3) - 2px)}
.dish-list p{margin:0;font:300 15px/1.55 var(--font);max-width:44ch;text-wrap:pretty}
@media (max-width:1000px){.dish-heroes{--dish-hero-h:320px}.dish-list{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.dish-heroes{grid-template-columns:1fr;--dish-hero-h:280px}.dish-list{grid-template-columns:1fr}}

/* ==========================================================================
   Press quote
   ========================================================================== */
.press{background:var(--gold);text-align:center}
.press .quote{font:700 var(--quote)/1.15 var(--font);max-width:26ch;margin:0 auto;text-wrap:balance}
.press .credit{margin-top:20px}

/* ==========================================================================
   Instagram grid (replaces a separate journal)
   ========================================================================== */
.insta{background:var(--beige)}
.insta .link-ul{border-color:var(--black)}
.insta .note{font:400 13px/1.5 var(--font);color:var(--olive);margin-top:10px}
/* Instagram (reworked 4 Oct 2026; client: the grid looked like an afterthought). Portrait tiles, as the posts are.
   Phones and tablets: a sideways rail, each post with its date and first line, ending on a gold Follow tile.
   From 900px: the newest post big (two columns, two rows) with its caption, five more beside it (date tag; the
   caption slides in on hover or focus) and the Follow tile. main.js section 16 fills in the posts. */
.insta .section-head{align-items:flex-end}
.insta-head .eye{margin:0 0 10px;color:var(--olive)}
.insta-grid{position:relative;display:flex;gap:14px;margin:24px calc(var(--pad-x) * -1) 0;padding:0 var(--pad-x) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad-x);scrollbar-width:none}
.insta-grid::-webkit-scrollbar{display:none}
.post,.post-follow{position:relative;flex:0 0 min(66vw,300px);aspect-ratio:3/4;scroll-snap-align:start;overflow:hidden;display:block;border:2px solid var(--black);box-shadow:4px 4px 0 var(--black);transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.post{background:var(--olive)}
.post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-info{position:absolute;left:0;right:0;bottom:0;display:grid;gap:6px;padding:11px 12px 13px;background:var(--black);color:var(--petra)}
.post-info[hidden]{display:none}
.post-date{font:700 10px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.post-caption{font:400 13px/1.35 var(--font);text-wrap:pretty}
.post-follow{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px;background:var(--gold)}
.post-follow-eye{font:500 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase}
.post-follow-handle{font:700 clamp(19px,2vw,26px)/1.05 var(--font);overflow-wrap:anywhere}
.post-follow-go{font:700 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (max-width:720px){.insta-follow{padding:10px 14px;font-size:11px}}
@media (min-width:900px){
  .insta-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:28px 0 0;padding:0;overflow:visible}
  .post,.post-follow{box-shadow:none}
  .post.is-lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .post:hover,.post:focus-visible,.post-follow:hover,.post-follow:focus-visible{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--black)}
  .post.is-lead .post-info{gap:9px;padding:18px 20px 20px}
  .post.is-lead .post-date{font-size:11px}
  .post.is-lead .post-caption{font:500 clamp(16px,1.5vw,20px)/1.3 var(--font)}
  .post:not(.is-lead) .post-info{right:auto;padding:8px 10px}
  .post:not(.is-lead) .post-caption{display:none}
  .post:not(.is-lead):hover .post-info,.post:not(.is-lead):focus-visible .post-info{right:0;padding:11px 12px 13px}
  .post:not(.is-lead):hover .post-caption,.post:not(.is-lead):focus-visible .post-caption{display:block}
  .post-follow{padding:20px}
}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter{background:var(--olive);color:var(--white)}
.newsletter .h2{color:var(--gold)}
.newsletter p{margin:14px 0 0;max-width:48ch}
.newsletter form{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;max-width:520px}
.newsletter input{flex:1 1 220px;min-width:0;border:2px solid var(--black);border-radius:0;background:var(--petra);padding:13px 15px;font:300 15px/1 var(--font);color:var(--black)}
.newsletter input::placeholder{color:var(--olive);opacity:1}
.newsletter select{flex:1 1 180px;min-width:0;border:2px solid var(--black);border-radius:0;background:var(--petra);padding:12px 12px;font:300 15px/1 var(--font);color:var(--black)}
.newsletter form{max-width:720px}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{padding:var(--pad-y) var(--pad-x);background:var(--black);color:var(--grey-light)}
.footer .cities{display:flex;flex-wrap:wrap;gap:var(--gap)}
.footer .city{flex:1 1 180px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;font:300 13px/1.55 var(--font)}
.footer .city a{font:700 13px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.footer .city .hours{color:var(--grey-mid)}
.footer .city a.tel{font:300 13px/1.55 var(--font);letter-spacing:0;text-transform:none;color:var(--grey-light)}
.footer .city a.tel:hover{color:var(--gold)}
.footer .bottom{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:44px;padding-top:24px;border-top:1px solid var(--grey-dark)}
.footer .bottom img{width:120px;height:auto;opacity:.85;filter:invert(1)} /* logo-wordmark-white.png is black ink; invert gives the white wordmark the spec asks for */
.footer .links{display:flex;gap:18px;flex-wrap:wrap}
.footer .links a{font:400 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mid)}
.footer .links a:hover{color:var(--gold)}
/* The legal line (6 Oct 2026): legal notice and privacy, quieter than the links above, at the foot of every page */
.footer .legal-line{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 18px;margin-top:22px}
.footer .legal-line a{font:400 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mid);text-decoration:underline;text-decoration-color:var(--grey-dark);text-underline-offset:4px}
.footer .legal-line a:hover{color:var(--gold);text-decoration-color:var(--gold)}
/* "Cookies", beside the legal links, only when Google Analytics is switched on (it reopens the question): a button
   dressed as its neighbours */
.footer .legal-line button{padding:0;border:0;border-radius:0;background:none;cursor:pointer;font:400 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mid);text-decoration:underline;text-decoration-color:var(--grey-dark);text-underline-offset:4px}
.footer .legal-line button:hover{color:var(--gold);text-decoration-color:var(--gold)}
/* The cookie question (main.js section 29; only with Google Analytics switched on). A bar at the foot of the screen,
   over the phone's action strip while it is up. The two buttons are the same size and the same dress on purpose:
   refusing must be as easy as accepting. */
/* (Owner, 8 Oct 2026: "the cookie banner could be more obvious, I want them to click yes and not skim past it".) It was
   a thin black bar; it is a black card with a gold headline and a gold edge (black, because the short page's
   restaurant panel is gold and a gold card was lost on it), which slides in a moment after the page so the eye
   catches it. It does not block the page. The two buttons have the SAME size and the SAME dress, side by side: the card may
   be loud, but refusing must stay as easy as accepting (French and UK rules). Never give "Accept" its own colour. */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:96;display:grid;gap:10px;padding:18px 18px 16px;background:var(--black);color:var(--petra);border:2px solid var(--gold);box-shadow:6px 6px 0 var(--gold);animation:consent-in 240ms var(--ease) 450ms both}
.consent[hidden]{display:none}
.consent p{margin:0}
.consent-head{font:700 22px/1.1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.consent-text{max-width:60ch;font:300 15px/1.45 var(--font)}
.consent-text a{font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.consent .btn{padding:16px 10px;font-size:13px;background:var(--gold);color:var(--black);border-color:var(--gold)}
.consent .btn:hover{background:var(--petra);border-color:var(--petra)}
.consent :focus-visible{outline-color:var(--petra);outline-offset:3px}
@keyframes consent-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (min-width:720px){.consent{left:24px;right:auto;bottom:24px;width:500px;padding:24px 24px 22px}.consent-head{font-size:26px}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
@media print{.consent{display:none}}
@media (max-width:720px){.footer .legal-line{justify-content:flex-start}}

/* ==========================================================================
   Inner pages (Our story, Workshops, Menus) — built from the prototype's story,
   city-menu and workshops-teaser templates
   ========================================================================== */
.note{font:400 13px/1.5 var(--font);color:var(--olive);margin-top:22px}

/* Black title band */
.title-band{background:var(--black);color:var(--petra);padding:var(--pad-y) var(--pad-x);border-bottom:2px solid var(--black)}
.title-band .eye{color:var(--gold);letter-spacing:.24em}
.title-band h1{margin:18px 0 0;font:700 var(--h1)/.98 var(--font);letter-spacing:.01em;text-transform:uppercase;max-width:22ch;text-wrap:balance}
.title-band .body{margin-top:18px;max-width:52ch}

/* Split: photo + text, side by side; stacks below 720px */
.split{display:flex;flex-wrap:wrap;background:var(--petra);border-bottom:2px solid var(--black)}
.split-media{position:relative;flex:1 1 340px;aspect-ratio:4/3;background:var(--olive)} /* at least 4:3, taller if the text is */
.split-media.is-tall{aspect-ratio:1/1} /* a portrait photo (the Bordeaux front): square, so sign and terrace both show */
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The photographer's credit (owner, 6 Oct 2026): a small label in the bottom right corner of the picture. It sits in
   whatever frames the photo (.split-media, an Instagram tile), which is position:relative. Markup: photo_credit(). */
.photo-credit{position:absolute;right:0;bottom:0;z-index:1;padding:6px 9px 5px;background:var(--black);color:var(--petra);font:400 10px/1 var(--font);letter-spacing:.08em;white-space:nowrap;pointer-events:none}
.split-media:first-child{border-right:2px solid var(--black)}
.split-media:last-child{border-left:2px solid var(--black)}
.split-text{flex:1 1 380px;padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;justify-content:center;gap:18px}
.split-text .eye{color:var(--olive)}
.split-text .body{line-height:1.65;max-width:60ch}
.split-text h1{font:700 var(--h1)/.98 var(--font);letter-spacing:.01em;text-transform:uppercase;max-width:16ch;text-wrap:balance}
.split-text .h2{line-height:1.02;letter-spacing:.02em;text-wrap:balance}
.split.gold{background:var(--gold)}
.split.beige{background:var(--beige)}
.split-text .quote{font:700 clamp(var(--quote),3.3vw,60px)/1.08 var(--font);max-width:18ch;text-wrap:balance}
/* Founder split: squarer frame so the portrait keeps his head and folded arms; he faces left, into the copy */
.founder-split .split-media{aspect-ratio:1/1;max-height:720px}
.founder-split .split-media img{object-position:50% 80%}
.split.gold .eye{color:var(--black)}
@media (max-width:720px){
  .split-media:first-child{border-right:0;border-bottom:2px solid var(--black)}
  .split-media:last-child{border-left:0;border-top:2px solid var(--black)}
}

/* Full-bleed photo band with text (flat overlay, no gradient) */
.photo-band{position:relative;overflow:hidden;min-height:var(--band-h);background:var(--olive);border-bottom:2px solid var(--black);display:flex;align-items:flex-end}
.photo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-band::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.photo-band-text{position:relative;z-index:1;padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.photo-band .h2{color:var(--white);line-height:1.05;letter-spacing:.04em;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.photo-band :focus-visible{outline-color:var(--focus-ring)}

/* City cards */
.city-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.city-cards a{border:2px solid var(--black);background:var(--white);padding:20px 16px;font:700 var(--h3)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;transition:all 160ms var(--ease)}
.city-cards a:hover{box-shadow:var(--pop);transform:translate(-2px,-2px)}
@media (max-width:720px){.city-cards{grid-template-columns:1fr 1fr;gap:10px}}

/* Fact cards */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 0}
.facts div{background:var(--white);border:2px solid var(--black);padding:22px;display:flex;flex-direction:column;gap:10px}
.facts dt{color:var(--olive)}
.facts dd{margin:0;font:500 17px/1.4 var(--font)}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.facts{grid-template-columns:1fr;gap:10px}}

/* Numbered lists (sessions, steps) */
.numbered{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.numbered li{border-top:3px solid var(--black);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.numbered .num{font:700 13px/1 var(--font);letter-spacing:.16em;color:var(--olive)}
.numbered .h3{line-height:1.2}
.numbered p{margin:0;font:300 15px/1.55 var(--font);text-wrap:pretty}
.steps{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.numbered{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.numbered{grid-template-columns:1fr;gap:22px}}
.cook{background:var(--black);color:var(--petra)}
.cook .h2,.cook .num{color:var(--gold)}
.cook .meta,.cook .note{color:var(--grey-light)}
.cook .numbered li{border-top-color:var(--gold)}
.cook :focus-visible{outline-color:var(--focus-ring)}

/* Olive call-to-action band */
.olive-band{background:var(--olive);color:var(--white)}
.olive-band .h2{color:var(--gold)}
.olive-band .body{margin:14px 0 22px;max-width:52ch}
.olive-band .btn-outline{color:var(--petra);border-color:var(--petra)}
.olive-band .btn-outline:hover{background:var(--petra);color:var(--black)}
.olive-band .btn-row .body{margin:0;align-self:center}
.olive-band .link-ul:hover{color:var(--black)}
.olive-band .careers-social{margin:30px 0 0}
.careers-social .link-ul{margin-left:12px}

/* Section tone */
.section.beige{background:var(--beige)}

/* Founder feature (homepage, Our story, Workshops): text left, big portrait right.
   Telemaque faces left in the photo, so on the right he looks into the copy. Fills the full width. */
.lead{font:500 var(--lead)/1.4 var(--font);text-wrap:pretty;max-width:34ch}
.founder-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--gap)*2);align-items:center}
.founder-feature .photo{order:2;justify-self:stretch;margin:0;aspect-ratio:1/1;max-height:640px;border:2px solid var(--black);box-shadow:var(--pop);background:var(--olive);overflow:hidden}
.founder-feature .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 82%} /* head with headroom, folded arms at the bottom */
.founder-feature .text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.founder-feature .eye{color:var(--olive)}
.founder-feature .body{margin:0;line-height:1.65;max-width:58ch}
.founder-feature .quote{font:700 clamp(var(--quote),3.3vw,60px)/1.08 var(--font);max-width:18ch;text-wrap:balance} /* grows with the photo on wide screens */
@media (max-width:720px){
  .founder-feature{grid-template-columns:1fr;gap:var(--gap)}
  .founder-feature .photo{order:0}
}

/* Menu lists (city pages): name + price on one line, description and allergens below */
.menu-list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);border-top:2px solid var(--black)}
.menu-list li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.menu-list .name{font:500 15px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase}
.menu-list .price{font:500 14px/1 var(--font);color:var(--olive)}
.menu-list p{grid-column:1/-1;margin:0;font:300 14px/1.5 var(--font);max-width:52ch}
@media (max-width:720px){.menu-list{grid-template-columns:1fr}}

/* City pages: split hero with the city photo, visit details + map, key dishes */
.city-title{display:flex;flex-direction:column;gap:14px;margin:0}
.city-title .city-name{font:700 var(--city-h1)/.9 var(--font);letter-spacing:.005em;text-transform:uppercase}
/* The line under the city ("Greek restaurant in Bordeaux, in the Bastide quarter") is part of the h1 since 7 Oct 2026, so
   the page's main heading says what a visitor searches for. It looks as it did when it was the paragraph below:
   body text, 18px under the name (the h1's 14px gap plus 4). */
.city-title .city-line{margin-top:4px;max-width:60ch;font:300 var(--body)/1.65 var(--font);letter-spacing:normal;text-transform:none;text-wrap:pretty}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.visit-lead{margin:0 0 calc(var(--gap)*1.3);max-width:60ch}
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--gap)*1.5);align-items:stretch}
.visit-info{display:flex;flex-direction:column;gap:30px}
.info-block{display:flex;flex-direction:column;gap:10px}
.info-block .eye{color:var(--olive);margin:0}
.info-block .address{margin:0;font:500 var(--h3)/1.4 var(--font)}
.delivery-links{display:flex;flex-wrap:wrap;gap:16px 22px;margin:2px 0 0} /* the delivery partners, side by side, in the same dress as Directions */
.info-block .body{margin:0}
.hours-table{margin:0;max-width:380px;display:flex;flex-direction:column}
.hours-table div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--border-subtle);font:300 15px/1.2 var(--font)}
.hours-table dt{font-weight:500}
.hours-table dd{margin:0}
@media (max-width:720px){
  .visit-grid{grid-template-columns:1fr;gap:var(--gap)}
  .map-frame{min-height:320px}
}

/* City hero colours: each city gets its own brand colour (London black, Paris olive, Bordeaux beige, St Ouen gold) */
/* City bar (client, 6 Oct 2026): once the hero has scrolled away, the city, its open status and the hero's buttons stay
   in a slim bar in the city's colour under the header (main.js section 25 shows and hides it). Phones: city and status
   only, the buttons are in the bottom strip there. */
.city-bar{position:fixed;left:0;right:0;top:var(--masthead-h,0px);z-index:57;display:flex;align-items:center;gap:8px 20px;min-height:50px;padding:7px var(--pad-x);background:var(--petra);border-bottom:2px solid var(--black);transform:translateY(-110%);visibility:hidden;transition:transform 200ms var(--ease),visibility 0s linear 200ms}
.city-bar.is-shown{transform:none;visibility:visible;transition:transform 200ms var(--ease)}
.city-bar[hidden]{display:none}
.city-bar.tone-black{background:var(--black);color:var(--petra)}
.city-bar.tone-olive{background:var(--olive);color:var(--petra)}
.city-bar.tone-beige{background:var(--beige)}
.city-bar.tone-gold{background:var(--gold)}
.city-bar p{margin:0}
.city-bar-name{font:700 18px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
/* the bar names the city alone (owner, 7 Oct 2026: "we know it's KALIMERA"); the small KALIMERA before it is gone.
   It did nothing for search: the page's title and its h1 carry the name. */
.city-bar.tone-black .city-bar-name,.city-bar.tone-olive .city-bar-name{color:var(--gold)}
.city-bar .live-status{padding:5px 9px;font-size:10.5px;border-width:1.5px}
.city-bar-actions{display:flex;align-items:center;gap:8px 20px;margin-left:auto}
.city-bar-link{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.city-bar-link:hover{text-decoration-color:var(--gold)}
.city-bar.tone-gold .city-bar-link:hover{text-decoration-color:var(--petra)}
.city-bar.tone-black .btn,.city-bar.tone-olive .btn{border-color:var(--gold)}
.city-bar :focus-visible{outline-offset:2px}
.city-bar.tone-black :focus-visible,.city-bar.tone-olive :focus-visible{outline-color:var(--focus-ring)}
@media (max-width:900px){.city-bar-actions .city-bar-link:last-child{display:none}}
@media (max-width:720px){
  .city-bar{min-height:42px;padding:6px var(--pad-x);justify-content:space-between;gap:10px}
  .city-bar-actions,.city-bar-name .eye{display:none}
  .city-bar-name{font-size:15px}
  .city-bar .live-status{min-width:0}
}
.split.black{background:var(--black);color:var(--petra)}
.split.olive{background:var(--olive);color:var(--petra)}
.split.black .eye,.split.olive .eye,.split.black .city-name,.split.olive .city-name{color:var(--gold)}
.split.black .btn-outline,.split.olive .btn-outline{color:var(--petra);border-color:var(--petra)}
.split.black .btn-md{box-shadow:6px 6px 0 var(--gold)}
.split.black :focus-visible,.split.olive :focus-visible{outline-color:var(--focus-ring)}
.split.gold .eye,.split.beige .city-title .eye{color:var(--black)}

/* Live status and today's weather. The circle says it without colour: full = open, half = closing soon,
   empty = closed. It takes the text colour, so it works on every city tone. */
.live-row{display:flex;flex-wrap:wrap;gap:10px}
.live-status,.weather{margin:0;display:inline-flex;align-items:center;gap:9px;border:2px solid currentColor;padding:7px 12px;font:500 12px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase}
.status-dot{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid currentColor}
.is-open .status-dot{background:currentColor}
.is-closing .status-dot{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.is-closed .status-dot{background:transparent}
.weather-icon{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Live Google map */
.map-frame{position:relative;min-height:460px;border:2px solid var(--black);background:var(--beige)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Legal notice and privacy (6 Oct 2026): one cream sheet under the black title band, with the information in two
   columns of ruled blocks (owner: no alternating colours, "a two column or a grid where we can have all of that
   information"; and quiet: the company details are not to be put on show). One column below 860px. A block marked
   .is-wide runs across both columns; .legal-list.is-cols sets its items side by side. */
.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,72px);max-width:1240px}
.legal-item{padding:22px 0 36px;border-top:2px solid var(--black)}
.legal-item.is-wide{grid-column:1/-1}
.legal-item .h3{line-height:1.2}
.legal-item .body{max-width:62ch;margin-top:12px}
.legal-item .h3+.body,.legal-item .h3+.legal-list{margin-top:16px}
.legal-item .body+.legal-list{margin-top:24px}
.legal-item .text-link{overflow-wrap:anywhere}
.legal-list{display:grid;gap:0;max-width:62ch;margin:14px 0 0;padding:0;list-style:none;font:300 var(--body)/1.6 var(--font)}
.legal-list li{display:grid;align-content:start;gap:4px;padding:12px 0 14px;border-top:1px solid var(--border-subtle)}  /* hairlines, like a table: no coloured bars */
.legal-term{font:700 12px/1.3 var(--font);letter-spacing:.16em;text-transform:uppercase}  /* the bold name of an entry */
.legal-list.is-cols{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);max-width:none}
.legal-list.is-cols li{gap:8px;padding:14px 0 0;border-top:2px solid var(--black)}
.legal-basis{max-width:92ch;margin:26px 0 0;font:300 13px/1.6 var(--font)}  /* the legal bases, in one quiet line */
.legal-item .legal-promise{margin-top:14px;font-weight:500}  /* "We never sell your details…": an ordinary sentence, in medium */
.legal-go{margin:20px 0 0}
.legal-date{margin-top:10px;padding-top:22px;border-top:2px solid var(--black);max-width:1240px}
@media (max-width:860px){
  .legal-grid{grid-template-columns:1fr}
  .legal-list.is-cols{grid-template-columns:1fr;row-gap:18px}
  .legal-item{padding:18px 0 28px}
}
.info-block a.tel{font-weight:500;border-bottom:2px solid var(--gold)}
.info-block a.tel:hover{background:var(--gold)}

/* City menus: two signature dishes, then the full menu by section, drinks folded away */
.dish-heroes.two{grid-template-columns:1fr 1fr}
.dish-heroes.two .dish-num{display:none} /* on city pages the numbers belong to the menu categories */
@media (max-width:720px){.dish-heroes.two{grid-template-columns:1fr 1fr;gap:12px;--dish-hero-h:170px}.dish-heroes.two .dish-hero p{display:none}.dish-heroes.two .h3{font-size:14px}}
.dish-hero-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.dish-hero-head .price{font:500 16px/1 var(--font);color:var(--olive);flex:none}
.menu-intro{margin:calc(var(--gap)*1.4) 0 0;max-width:60ch}
.menu-block{margin-top:calc(var(--gap)*1.4)}
.menu-block-title{margin:0;font:700 var(--h3)/1.1 var(--font);letter-spacing:.12em;text-transform:uppercase}
.menu-block-note{margin:6px 0 0;font:400 13px/1.5 var(--font);color:var(--olive)}
.menu-block .menu-list{margin-top:14px}
.menu-list .meta-line{grid-column:1/-1;margin:0;font:400 12px/1.4 var(--font);letter-spacing:.04em;color:var(--olive)}

/* City menus: a deck of numbered index cards, one per category, that float up and stick as you scroll
   (client, 2 Oct 2026: like the Menus page, no clicking through). main.js adds .is-stacked and sets each card's
   sticky top, height and bottom margin, so a long category scrolls fully into view before the next card slides
   over it; short screens and print get a plain list. "In this menu" links jump to each card. */
.menu-index{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:calc(var(--gap)*1.1);font:500 12px/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase}
.menu-index span{color:var(--olive)}
.menu-index a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.menu-index a:hover{text-decoration-color:var(--gold)}
.menu-deck{--menu-tab-h:58px;display:flex;flex-direction:column;gap:22px;margin-top:calc(var(--gap)*1.1);padding-bottom:14px}
.menu-anchor{display:block;height:0;scroll-margin-top:calc(var(--drawer-head-h,0px) + 10px)}
.menu-card{display:flex;flex-direction:column;border:2px solid var(--black);background:var(--petra);box-shadow:var(--pop)}
.menu-card.is-main{background:var(--olive);color:var(--petra)}
/* client, 2 Oct 2026: on the green card everything is white (Petra Polis): number, names, prices, notes */
.menu-card.is-main .menu-list .price,.menu-card.is-main .menu-card-num,.menu-card.is-main .menu-card-count,.menu-card.is-main .menu-list .meta-line,.menu-card.is-main .menu-block-note{color:var(--petra)}
.menu-card.is-main .menu-list{border-top-color:var(--petra)}
.menu-card.is-main .menu-list li{border-bottom-color:rgba(255,250,242,.2)}
.menu-card.is-main .menu-card-tab{border-bottom-color:var(--petra)}
.menu-card.is-main :focus-visible{outline-color:var(--focus-ring)}
.menu-card.is-offer{background:var(--gold)}
.menu-card-tab{display:flex;align-items:center;gap:16px;min-height:var(--menu-tab-h,58px);padding:0 22px;border-bottom:2px solid var(--black)}
.menu-card-num{min-width:2ch;font:700 22px/1 var(--font);letter-spacing:.02em}
.menu-card .menu-block-title{margin:0;font:700 20px/1.1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.menu-card h4.menu-block-title{font-size:16px}
.menu-card-count{margin-left:auto;font:500 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--olive);white-space:nowrap}
.menu-card-body{flex:1;padding:4px 22px 22px}
.menu-card-body .menu-block{margin-top:16px}
.menu-card-body .menu-block:first-child{margin-top:8px}
/* Stacked (main.js adds .is-stacked when the open drawer has room): every category's tab is sticky, one tab lower
   than the one before (--i), so the tabs pile up under the drawer's title and the dishes scroll beneath the pile.
   Plain CSS: nothing is measured or trimmed while you scroll (rebuilt 6 Oct 2026; the scripted version clipped the
   London menu on phones). The card itself steps aside (display:contents) so the deck lays out tab and dishes; each
   tab's bottom margin, cancelled by its dishes' negative top margin, makes the whole pile let go together at the end. */
.menu-deck.is-stacked{gap:0;--stack-top:calc(var(--drawer-head-h,0px) - 1px)}
.menu-deck.is-stacked .menu-card{display:contents}
.menu-deck.is-stacked .menu-anchor{scroll-margin-top:calc(var(--stack-top) + var(--i) * var(--menu-tab-h))}
.menu-deck.is-stacked .menu-card-tab{position:sticky;top:calc(var(--stack-top) + var(--i) * var(--menu-tab-h));z-index:calc(2 + var(--i));box-sizing:border-box;height:var(--menu-tab-h);min-height:0;margin-bottom:calc((var(--n) - 1 - var(--i)) * var(--menu-tab-h));border:2px solid var(--black);border-bottom:0;background:var(--petra);box-shadow:0 2px 0 var(--black),6px 0 0 var(--black)}
.menu-deck.is-stacked .menu-card-body{flex:none;margin-top:calc((var(--n) - 1 - var(--i)) * var(--menu-tab-h) * -1);margin-bottom:22px;padding-top:8px;border:2px solid var(--black);background:var(--petra);box-shadow:6px 0 0 var(--black),var(--pop)}
.menu-deck.is-stacked .menu-card:last-child .menu-card-body{margin-bottom:0}
.menu-deck.is-stacked .menu-card.is-main .menu-card-tab,.menu-deck.is-stacked .menu-card.is-main .menu-card-body{background:var(--olive)}
.menu-deck.is-stacked .menu-card.is-offer .menu-card-tab,.menu-deck.is-stacked .menu-card.is-offer .menu-card-body{background:var(--gold)}
/* No room to stack (a short screen, or a very long list of categories): each tab still stays at the top of the drawer
   while its own dishes are on screen */
.menu-drawer.is-open .menu-deck:not(.is-stacked) .menu-card-tab{position:sticky;top:calc(var(--drawer-head-h,0px) - 1px);z-index:2;background:inherit}
@media (max-width:720px){
  .menu-deck{--menu-tab-h:46px}
  .menu-card-tab{gap:10px;padding:0 14px}
  .menu-card-num{font-size:17px}
  .menu-card .menu-block-title{font-size:15px}
  .menu-card-count{font-size:10px;letter-spacing:.1em}
  .menu-card-body{padding:2px 14px 18px}
}

/* City pages: the menu is a drawer that slides in from the left, from a MENU tab on the left edge
   (client, 1 Oct 2026). Without JS a <noscript> style puts it back in the page; print shows it in full. */
.menu-drawer{position:fixed;top:0;bottom:0;left:0;z-index:95;width:min(1080px,calc(100vw - 48px));overflow-y:auto;overscroll-behavior:contain;padding-top:0;border-right:2px solid var(--black);border-bottom:0;box-shadow:10px 0 0 rgba(0,0,0,.16);transform:translateX(-104%);visibility:hidden;transition:transform 340ms var(--ease),visibility 0s linear 340ms}
.menu-drawer.is-open{transform:none;visibility:visible;transition:transform 340ms var(--ease),visibility 0s}
.menu-drawer:focus{outline:none}
.menu-drawer>.section-head{position:sticky;top:0;z-index:30;align-items:center;flex-wrap:nowrap;background:var(--beige);padding:20px 0 16px;border-bottom:2px solid var(--black)} /* above the piled tabs */
.menu-drawer>.section-head .h2{min-width:0;text-wrap:balance}
.drawer-close{flex:none}
.drawer-close{margin-left:auto;border:2px solid var(--black);background:var(--petra);padding:10px 13px;font:700 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--black)}
.drawer-close:hover{background:var(--black);color:var(--gold)}
.drawer-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5)}
html.drawer-open{overflow:hidden}
.menu-tab{position:fixed;left:0;top:50%;z-index:55;transform:rotate(-90deg) translateX(-50%);transform-origin:0 0;padding:10px 24px 11px;border:2px solid var(--black);border-top:0;background:var(--gold);color:var(--black);font:700 13px/1 var(--font);letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:-4px 4px 0 var(--black);transition:padding 150ms var(--ease),background 150ms var(--ease)}
.menu-tab span{display:block;margin-right:-.3em} /* rotated as a whole: reads bottom to top on the left edge */
.menu-tab:hover{padding-bottom:16px;background:var(--black);color:var(--gold)}
@media (max-width:720px){
  .menu-tab{display:none} /* phones: the Menu button in the bottom bar opens the drawer */
  .menu-drawer{width:100vw;border-right:0;box-shadow:none}
  .menu-drawer>.section-head{padding:12px 0 10px;gap:12px}
  .menu-drawer>.section-head .h2{font-size:19px;line-height:1.1;letter-spacing:.05em}
  .drawer-close{padding:10px 12px;font-size:14px;box-shadow:3px 3px 0 var(--black)}
  .drawer-close-word{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* phones: just the ✕, so title and button share one row */
}
.menu-foot{margin-top:calc(var(--gap)*1.4);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.menu-foot-actions{display:flex;flex-wrap:wrap;gap:14px}
.menu-key{margin:0;font:400 13px/1.5 var(--font);color:var(--olive);max-width:70ch}
.menu-key span{display:block;margin-top:4px}

/* Menus hub: numbered index cards that stack on scroll. Each card sticks a tab-height lower than the
   one before, so the numbered tabs of earlier cards stay visible above it, like cards in a box. */
.card-stack{--tab-h:68px;padding:var(--pad-y) var(--pad-x) calc(var(--pad-y)*2);display:flex;flex-direction:column;gap:var(--gap);border-bottom:2px solid var(--black)}
.index-card{--rule:rgba(0,0,0,.18);position:sticky;top:calc(var(--masthead-h,150px) + 14px + var(--i) * var(--tab-h));border:2px solid var(--black);box-shadow:var(--pop);background:var(--petra);display:flex;flex-direction:column;
  min-height:var(--card-h,560px);
  /* Each card sits (n-1-i) tabs higher off the end of the deck, so at the end they all let go together and the stacked tabs don't squash */
  margin-bottom:calc((var(--n,4) - 1 - var(--i)) * var(--tab-h))}
.index-card.tone-black{--rule:rgba(255,250,242,.22);background:var(--black);color:var(--petra)}
.index-card.tone-olive{--rule:rgba(255,250,242,.22);background:var(--olive);color:var(--petra)}
.index-card.tone-beige{background:var(--beige)}
.index-card.tone-gold{background:var(--gold)}
.index-card.tone-paper{background:var(--petra)}
.card-tab{height:var(--tab-h);display:flex;align-items:center;gap:18px;padding:0 24px;border-bottom:2px solid var(--rule)}
.card-num{font:700 30px/1 var(--font);letter-spacing:.02em;min-width:2.2ch}
.card-city{margin:0;font:700 30px/1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.card-area{margin-left:auto;font:500 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.tone-black .card-num,.tone-olive .card-num,.tone-black .card-city,.tone-olive .card-city{color:var(--gold)}
.card-body{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--gap)*1.5);padding:30px 24px 34px}
.card-line{margin:0;font:700 clamp(22px,2vw,28px)/1.15 var(--font);max-width:20ch;text-wrap:balance}
.card-info{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.card-menu .eye{margin:0 0 12px}
.card-menu .menu-list{margin:0;border-top-color:currentColor}
.card-menu .menu-list li{border-bottom-color:var(--rule);padding:11px 0}
.card-menu .menu-list p{opacity:.85} /* one whole sentence (never cut with an ellipsis); names and prices only below 1100px */
@media (max-width:1100px){.card-menu .menu-list p{display:none}}
.tone-black .card-menu .price,.tone-olive .card-menu .price{color:var(--gold)}
.tone-gold .card-menu .price,.tone-beige .card-menu .price{color:var(--black)}
.hub-links{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:auto}
.hub-pdf{font:500 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tone-black .btn-md{box-shadow:6px 6px 0 var(--gold)}
.index-card.tone-black .btn-outline,.index-card.tone-olive .btn-outline{color:var(--petra);border-color:var(--petra)}
.index-card.tone-black .btn-outline:hover,.index-card.tone-olive .btn-outline:hover{background:var(--petra);color:var(--black)}
.index-card.tone-black :focus-visible,.index-card.tone-olive :focus-visible{outline-color:var(--focus-ring)}
@media (max-width:900px){.card-body{grid-template-columns:1fr;gap:24px}.card-menu .menu-list{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .card-stack{--tab-h:54px}
  .card-tab{padding:0 16px;gap:12px}
  .card-num,.card-city{font-size:22px}
  .card-area{display:none}
  .card-body{padding:20px 16px 24px}
  .card-menu .menu-list{grid-template-columns:1fr}
  .card-menu .menu-list li{padding:8px 0}
  .card-menu .menu-list p{display:none}
  .card-menu .menu-list li:nth-child(n+4){display:none} /* three highlights on phones so each card fits the screen */
  .card-body{gap:16px}
  .card-info{gap:12px}
  .card-line{font-size:21px}
  .card-menu .eye{margin-bottom:6px}
  .card-stack{--card-h:590px}
}
/* Short screens (landscape phones): no room to stack, so the cards just scroll */
@media (max-height:620px){.index-card{position:relative;top:auto}}

/* City cards (Menus page): phone, reserve, service, delivery */
.card-contact a,.card-menu-links a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.card-services{margin:0;font:500 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.card-contact{font-style:normal;display:flex;flex-direction:column;gap:6px;font:300 15px/1.5 var(--font)}
.card-menu-links{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:18px;font:500 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase}

/* Stacking cards inside a section (Workshops steps, Our story timeline): shorter, text-led */
.card-stack.inset{padding:26px 0 0;border-bottom:0}
.card-stack.compact{--card-h:clamp(300px,40vh,400px)}
.card-stack.compact .index-card{height:var(--card-h);min-height:0}
.card-body.single{display:flex;flex-direction:column;justify-content:center;gap:24px}
.card-body.photo{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.card-text{margin:0;font:700 clamp(24px,2.6vw,40px)/1.12 var(--font);max-width:24ch;text-wrap:balance}
.card-photo{margin:0;height:calc(var(--card-h) - var(--tab-h) - 70px);border:2px solid var(--rule);overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover}
.index-card .city-cards{margin-top:0}
@media (max-width:720px){
  .card-body.photo{grid-template-columns:1fr;gap:18px}
  .card-stack.compact{--card-h:420px}
  .card-photo{height:200px}
}

/* Greeting by local time (Kalimera = good morning) */
.greeting{margin:0;font:500 13px/1.3 var(--font);letter-spacing:.06em}
.greeting .gloss{font-weight:700}
.greeting-time{opacity:.85}
.greeting .gloss-tip{bottom:auto;top:calc(100% + 8px)} /* opens downwards: above it sits the sticky header */
.intro .greeting{margin-bottom:14px;color:var(--olive)}

/* Greek word glossary: dotted underline, tooltip on hover / focus / tap */
.gloss-wrap{position:relative;display:inline}
.gloss{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;margin:0;cursor:help;
  text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:3px}
.gloss-tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:max-content;max-width:min(260px,80vw);padding:9px 11px;
  background:var(--petra);color:var(--black);border:2px solid var(--black);box-shadow:4px 4px 0 var(--black);
  font:400 13px/1.45 var(--font);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
  display:none;pointer-events:none} /* display:none, not just invisible: a hidden tip near the edge made phones scroll sideways */
.gloss-wrap:hover .gloss-tip,.gloss:focus-visible+.gloss-tip,.gloss-wrap.is-open .gloss-tip{display:block}

/* Share pill (city pages) */
.share-pill{display:inline-flex;align-items:center;gap:8px;border:2px solid currentColor;background:none;color:inherit;padding:7px 12px;cursor:pointer;
  font:500 12px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;transition:all 150ms var(--ease)}
.share-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-pill:hover{box-shadow:4px 4px 0 currentColor;transform:translate(-2px,-2px)}

/* The other kitchens (foot of each city page): the other three cities with their live status */
.sister-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:26px}
.sister-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px;row-gap:10px;padding:22px;border:2px solid var(--black);box-shadow:var(--pop);background:var(--petra);transition:all 160ms var(--ease)}
.sister-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--black)}
.sister-card.tone-black{background:var(--black);color:var(--petra)}
.sister-card.tone-olive{background:var(--olive);color:var(--petra)}
.sister-card.tone-beige{background:var(--beige)}
.sister-card.tone-gold{background:var(--gold)}
.tone-black .sister-name,.tone-olive .sister-name,.sister-card.tone-black .card-num,.sister-card.tone-olive .card-num{color:var(--gold)}
.sister-name{font:700 26px/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.sister-card .card-area{grid-column:1/-1;margin:0}
.sister-card .live-status{grid-column:1/-1;justify-self:start}
.sister-go{grid-row:1;grid-column:3;font:700 22px/1 var(--font)}
@media (max-width:900px){.sister-cards{grid-template-columns:1fr}}

/* ==========================================================================
   Quiz: "Not sure what to eat?" Five questions, then an order ticket (client, 1 Oct 2026)
   ========================================================================== */
.quiz{background:var(--gold);border-bottom:2px solid var(--black);padding:calc(var(--pad-y)*1.1) var(--pad-x) calc(var(--pad-y)*1.4);min-height:calc(100vh - var(--masthead-h,72px));display:flex;align-items:center;justify-content:center}
.quiz-form{width:min(880px,100%)}
.quiz-step{border:0;margin:0;padding:0;min-width:0}
.quiz-start{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.quiz-start .eye{margin:0}
.quiz-title{margin:0;font:700 clamp(46px,7.4vw,108px)/.9 var(--font);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.quiz-lead{margin:0;font:500 clamp(18px,2vw,24px)/1.3 var(--font)}
.quiz-cities{border:0;margin:12px 0 8px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.quiz-cities legend{width:100%;margin-bottom:12px;font:500 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;text-align:center}
.quiz-city input,.quiz-answer input{position:absolute;opacity:0;pointer-events:none}
.quiz-city span{display:block;padding:11px 15px;border:2px solid var(--black);background:var(--petra);font:700 13px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.quiz-city span:hover{background:var(--beige)}
.quiz-city input:checked+span{background:var(--black);color:var(--gold)}
.quiz-city input:focus-visible+span{outline:2px solid var(--black);outline-offset:3px}
.quiz-q{display:block;width:100%;margin:0 0 28px;padding:0;font:700 clamp(32px,4.8vw,64px)/1 var(--font);text-transform:uppercase;letter-spacing:.01em;text-align:center;text-wrap:balance}
.quiz-count{display:block;margin-bottom:16px;font:700 13px/1 var(--font);letter-spacing:.2em}
.quiz-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.quiz-answer{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:156px;padding:20px;border:2px solid var(--black);background:var(--petra);box-shadow:var(--pop);cursor:pointer;transition:transform 150ms var(--ease),box-shadow 150ms var(--ease)}
.quiz-answer:nth-child(2){background:var(--beige)}
.quiz-answer:nth-child(3){background:var(--olive);color:var(--petra)}
.quiz-answer:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--black)}
.quiz-answer:focus-within{outline:2px solid var(--black);outline-offset:4px}
.quiz-answer:has(input:checked){background:var(--black);color:var(--gold);transform:translate(4px,4px);box-shadow:none}
.quiz-answer-word{font:700 clamp(24px,2.6vw,32px)/1 var(--font);text-transform:uppercase;letter-spacing:.03em}
.quiz-answer-aside{font:400 14px/1.4 var(--font)}
.quiz-back{display:block;margin:28px auto 0;background:none;border:0;border-bottom:2px solid var(--black);padding:0 0 3px;font:500 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.is-in{animation:quiz-in 380ms var(--ease) both}
@keyframes quiz-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.is-in{animation:none}}
@media (max-width:720px){.quiz-answers{grid-template-columns:1fr;gap:12px}.quiz-answer{min-height:0;gap:6px;padding:18px 20px}} /* phones: the aside always sits under its word, whatever the language */
/* The result is an order ticket */
.ticket{max-width:540px;margin:0 auto;background:var(--petra);border:2px solid var(--black);box-shadow:var(--pop);padding:24px 26px 22px}
.ticket-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding-bottom:14px;border-bottom:2px dashed var(--black);font:700 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase}
.ticket-head span{white-space:nowrap}
@media (max-width:720px){.ticket-head{font-size:11px;letter-spacing:.1em}}
.ticket-title{margin:20px 0 6px;font:700 clamp(30px,4vw,46px)/1 var(--font);text-transform:uppercase;text-wrap:balance}
.ticket-sub{margin:0 0 18px;font:400 15px/1.45 var(--font)}
.ticket-lines{list-style:none;margin:0;padding:0;border-top:2px dashed var(--black)}
.ticket-lines li{display:grid;grid-template-columns:1fr auto;gap:3px 14px;padding:13px 0;border-bottom:1px dashed rgba(0,0,0,.35)}
.ticket-label{grid-column:1/-1;font:500 10.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.ticket-item{font:700 15px/1.25 var(--font);letter-spacing:.04em;text-transform:uppercase}
.ticket-price{font:500 15px/1.25 var(--font)}
.ticket-desc{grid-column:1/-1;font:300 13px/1.45 var(--font);color:var(--olive)}
.ticket-note{margin:14px 0 0;font:400 13px/1.45 var(--font)}
.ticket-thanks{margin:20px 0 0;text-align:center;font:700 15px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase}
.ticket-thanks span{display:block;margin-top:5px;font:300 12px/1.3 var(--font);letter-spacing:.04em;text-transform:none}
.quiz-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* Phones: slim floating action strip (Menu / Book or Call / Directions). Slides in once you scroll past the top. */
.action-bar{display:none}
@media (max-width:720px){
  .action-bar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:42px;
    background:var(--black);border:2px solid var(--black);transform:translateY(calc(100% + 30px));transition:transform 200ms var(--ease)}
  .action-bar.is-shown{transform:none}
  .action{display:flex;align-items:center;justify-content:center;color:var(--petra);border-left:1px solid var(--grey-dark);font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
  .action:first-child{border-left:0}
  .action[hidden]{display:none}
  .action.is-primary{background:var(--gold);color:var(--black)}
  .action:focus-visible{outline-color:var(--focus-ring);outline-offset:-4px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.action-bar{transition:none}}

/* Book page: one card per kitchen */
.book-cards{grid-template-columns:repeat(2,1fr)}
.book-card:hover{transform:none;box-shadow:var(--pop)}
.book-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:10px}
.book-card.tone-black .btn-md{box-shadow:6px 6px 0 var(--gold)}
@media (max-width:720px){.book-cards{grid-template-columns:1fr}}

/* ==========================================================================
   Print-ready menus: printing (or "Save as PDF") a city page gives a clean A4 menu
   in the brand type and the city's colour, not a web page
   ========================================================================== */
.print-only{display:none}
/* The smallest phones (under 360px): logo, language picker, Book and the burger share one row */
@media (max-width:360px){
  .header{padding:12px;gap:8px}
  .header .logo img{width:90px}
  .header .btn-sm{padding:9px 8px;letter-spacing:.1em}
  .lang-pick summary{padding:0 7px;gap:4px}
}

@media print{
  @page{size:A4;margin:12mm 13mm 14mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff}
  body{display:block;padding:0}
  .masthead,.action-bar,.chapter-bar,.city-bar,.footer,.gloss-tip,.share-pill,[data-print]{display:none!important}
  .gloss{text-decoration:none}
  a{text-decoration:none}

  body[data-city] main>section:not(#menu){display:none}
  body[data-city] #menu{background:#fff;border:0;padding:0;columns:2;column-gap:9mm}
  body[data-city] #menu>.section-head,body[data-city] .dish-heroes,body[data-city] .menu-foot-actions{display:none}
  .print-only{display:block}

  .print-head{column-span:all;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:3mm 8mm;padding:7mm 8mm;margin:0 0 6mm;border:.6mm solid #000;background:var(--gold);color:#000}
  #menu[data-tone="black"] .print-head{background:#000;color:var(--petra)}
  #menu[data-tone="olive"] .print-head{background:var(--olive);color:var(--petra)}
  #menu[data-tone="beige"] .print-head{background:var(--beige)}
  #menu[data-tone="black"] .print-logo,#menu[data-tone="olive"] .print-logo{filter:invert(1)}
  .print-logo{width:44mm;height:auto}
  .print-city{margin:0;font:700 30pt/.9 var(--font);letter-spacing:.02em;text-transform:uppercase;text-align:right}
  #menu[data-tone="black"] .print-city,#menu[data-tone="olive"] .print-city{color:var(--gold)}
  .print-meta{grid-column:1/-1;margin:0;font:400 8.5pt/1.5 var(--font)}

  .menu-intro{column-span:all;margin:0 0 5mm;font:500 10pt/1.4 var(--font);max-width:none}
  .menu-block{margin:0 0 5mm}
  .menu-block-title{font:700 10.5pt/1.1 var(--font);letter-spacing:.12em;padding-bottom:1.5mm;border-bottom:.5mm solid #000;break-after:avoid}
  .menu-block-note{margin:1.5mm 0 0;font:400 7.5pt/1.4 var(--font);color:#000}
  .menu-block .menu-list,.menu-list{display:block;margin:1mm 0 0;border-top:0}
  .menu-list li{display:grid;grid-template-columns:1fr auto;gap:.6mm 4mm;padding:1.8mm 0;border-bottom:.2mm solid #bbb;break-inside:avoid}
  .menu-list .name,.menu-list .price{font:500 8.5pt/1.25 var(--font);color:#000}
  .menu-list p{font:300 7.8pt/1.4 var(--font);max-width:none}
  .menu-list .meta-line{font:400 6.8pt/1.3 var(--font);color:#555}
  .menu-foot{column-span:all;display:block;margin-top:4mm}
  .menu-key{font:400 7.5pt/1.4 var(--font);color:#000;max-width:none}
  .menu-index,.menu-quiz{display:none!important}
  .menu-deck{display:block;margin:0;padding:0}
  .menu-card{display:block;position:static!important;top:auto!important;min-height:0!important;margin:0 0 5mm!important;border:0;box-shadow:none;background:none!important}
  .menu-card,.menu-card.is-main .menu-list .price,.menu-card.is-main .menu-list .meta-line,.menu-card.is-main .menu-block-note{color:#000!important} /* the olive mains card prints black on white */
  .menu-card.is-main .menu-list{border-top-color:#000}
  .menu-card.is-main .menu-list li{border-bottom-color:rgba(0,0,0,.15)}
  .menu-card-tab{display:block;min-height:0;padding:0;border:0;break-after:avoid}
  .menu-deck.is-stacked .menu-card{display:block!important}
  .menu-deck.is-stacked .menu-card-tab,.menu-drawer .menu-deck .menu-card-tab{position:static!important;height:auto!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important}
  .menu-deck.is-stacked .menu-card-body{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
  .menu-card-num,.menu-card-count{display:none}
  .menu-card .menu-block-title{font:700 10.5pt/1.1 var(--font);letter-spacing:.12em}
  .menu-card h4.menu-block-title{font-size:9pt}
  .menu-card-body{padding:0}
  .menu-card-body .menu-block,.menu-card-body .menu-block:first-child{margin:0 0 4mm}
  .menu-drawer{position:static!important;transform:none!important;visibility:visible!important;width:auto!important;overflow:visible!important;box-shadow:none!important;border:0!important}
  .menu-tab,.drawer-backdrop,.drawer-close,.kitchens{display:none!important}
  .print-foot{column-span:all;margin:4mm 0 0;font:500 7.5pt/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-align:center}
}