/* =========================================================================
   Njangi - design system
   Same nine sections as every restaurant in the set. Fourth skin, fourth
   arrangement.
   Direction: MARKET KITCHEN, CLAY AND CREAM. Restaurant one is glaze-white
   and geometric, two is dark and editorial, three is a colour-blocked
   canteen. This one is a daytime market kitchen: warm cream paper, clay
   terracotta carrying the type, deep teal for the painted bands, a soft
   optical serif, and dishes shown two-up at a size you can read across a
   room rather than three-up, listed, or mosaicked.
   ========================================================================= */

/* ---------- 1. tokens ---------------------------------------------------- */
:root{
  --cream:   #FDF8F0;
  --oat:     #F3E9D9;
  --sand:    var(--sb-secondary-pale, #E3CBA4);
  --clay:    var(--sb-accent);   /* carries text: checked against cream and oat */
  --clay-hi: var(--sb-accent-quiet);   /* decorative only - focus ring, mark, hairlines */
  --teal:    var(--sb-deep);          /* painted bands */
  --teal-lo: var(--sb-deep-darker);
  --ink:     #2A211C;
  --ink-dim: #6B5A4E;
  --rule:    rgba(42,33,28,.14);
  --edge:    rgba(42,33,28,.42);   /* interactive boundaries, clears 3:1 */

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --gutter: clamp(18px, 4.5vw, 44px);
  --max:    1240px;
  --max-narrow: 720px;
  --sec-y:  clamp(60px, 8vw, 116px);
  --r:      14px;
  --r-sm:   10px;
  --r-pill: 999px;

  --ease: cubic-bezier(.3,.7,.4,1);
  --fast: 140ms;
  --med:  250ms;

  /* --- the engine's roles ------------------------------------------
     Fixed names, identical in every template, so one piece of code can
     re-skin any of them. The engine writes only the accent three, and
     only after checking them against --sb-scheme: this palette sits on
     a light ground, so a colour that reads here may vanish elsewhere.
     The rest are exposed so contrast can be checked, not overwritten. */
  --sb-scheme: light;
  --sb-accent:       #9E3C22;
  --sb-accent-quiet: #C9542F;
  --sb-ground:       var(--cream);
  --sb-surface:      var(--oat);
  --sb-surface-alt:  var(--sand);
  --sb-ink:          var(--ink);
  --sb-ink-dim:      var(--ink-dim);
  --sb-deep:         #123F3C;
  --sb-deep-darker:  #0C2C2A;
  --sb-deep-ink:     var(--cream);
  --sb-accent-ink:   var(--cream);
  --sb-rule:         var(--rule);
  --sb-edge:         var(--edge);

}

/* ---------- 2. reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; border-top:var(--sb-secondary-width,0) solid var(--sb-secondary,transparent); background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,.5vw + 15px,17px);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; background:var(--oat); }
[hidden]{ display:none !important; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:700; line-height:1.04; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
:target{ scroll-margin-top:110px; }

:focus-visible{ outline:3px solid var(--clay-hi); outline-offset:2px; }
:is(:is(.on-sand,.tone-soft-alt),:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent),.basin--filled,.site-foot) :focus-visible{ outline-color:var(--sand); }

.skip{ position:absolute; left:12px; top:-70px; z-index:200; background:var(--teal); color:var(--cream); padding:12px 20px; font-weight:600; text-decoration:none; transition:top var(--fast) var(--ease); }
.skip:focus{ top:12px; }
.vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 3. type: tall condensed poster ------------------------------- */
.d1{ font-family:var(--display); font-weight:700; font-size:clamp(2.7rem,7.4vw,5.4rem); line-height:1.02; letter-spacing:-.02em; }
.d2{ font-family:var(--display); font-weight:700; font-size:clamp(1.95rem,3.9vw,3.1rem); line-height:1.06; letter-spacing:-.016em; }
.d3{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.2vw,1.95rem); line-height:1.14; letter-spacing:-.01em; }
.d4{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,1.6vw,1.5rem); line-height:1.02; }

.lede{ font-size:clamp(1.02rem,1.1vw,1.14rem); line-height:1.6; color:var(--ink-dim); }
.fine{ font-size:.84rem; line-height:1.5; color:var(--ink-dim); }
.fr{ font-style:italic; color:var(--ink-dim); }

/* colour-blocked sections are the signature */
:is(.on-oat,.tone-soft){ background:var(--oat); }
:is(.on-sand,.tone-soft-alt){ background:var(--sand); color:var(--teal); }
:is(.on-teal,.tone-deep){ background:var(--teal); color:var(--cream); }
:is(.on-clay,.tone-accent){ background:var(--clay); color:var(--cream); }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent),.site-foot,.basin--filled,.hero) .lede,
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent),.site-foot,.basin--filled,.hero) .fine,
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent),.site-foot,.basin--filled,.hero) .fr{ color:rgba(255,251,242,.92); }
:is(.on-sand,.tone-soft-alt) .lede, :is(.on-sand,.tone-soft-alt) .fine{ color:rgba(59,30,63,.82); }

/* ---------- 4. layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--max-narrow); }
.wrap--full{ max-width:none; }
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(40px,5.5vw,72px); }
.stack > * + *{ margin-top:var(--gap,18px); }

/* section heads: heading left, supporting line beneath, thick rule over */
.sec-head{ margin-bottom:clamp(26px,3.4vw,44px); padding-top:20px; border-top:1.5px solid var(--clay); }
.sec-head p{ max-width:56ch; margin-top:14px; }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent)) .sec-head{ border-top-color:var(--sand); }
:is(.on-sand,.tone-soft-alt) .sec-head{ border-top-color:var(--teal); }

.duo{ display:grid; gap:clamp(24px,3.4vw,52px); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .duo{ grid-template-columns:1fr 1fr; }
  .duo--wide-left{ grid-template-columns:1.2fr .8fr; }
  .duo--wide-right{ grid-template-columns:.8fr 1.2fr; }
}
/* the room: a filmstrip, three frames edge to edge with no gaps */
.trio{ display:grid; gap:0; grid-template-columns:1fr; }
@media (min-width:760px){ .trio{ grid-template-columns:repeat(3,1fr); } }
.grid{ display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
.split{ display:grid; gap:clamp(24px,3.2vw,44px); grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){ .split{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } }

/* ---------- 5. surfaces -------------------------------------------------- */
.basin{ position:relative; background:var(--cream); border:1.5px solid var(--rule); border-radius:var(--r); padding:clamp(24px,3.2vw,40px); }
.basin__label{ display:inline-block; margin-bottom:14px; background:var(--ink); color:var(--cream); font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; }
.basin--clay{ border-color:var(--clay); }
.basin--clay .basin__label{ background:var(--clay); }
.basin--oat{ border-color:var(--rule); background:var(--oat); }
.basin--oat .basin__label{ background:var(--teal); }
.basin--sand{ border-color:var(--sand); background:var(--sand); color:var(--teal); --ink-dim:#123F3C; }
.basin--sand .basin__label{ background:var(--teal); color:var(--sand); }
.basin--filled{ background:var(--fill,var(--clay)); border-color:var(--fill,var(--clay)); color:var(--cream); }
.basin--filled.basin--clay{ --fill:var(--clay); }
.basin--filled.basin--teal{ --fill:var(--teal); }
.basin--filled .basin__label{ background:var(--cream); color:var(--ink); }

.plate{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--oat); }
.plate img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.pan{ border-radius:var(--r); overflow:hidden; position:relative; overflow:hidden; background:var(--oat); }
.pan img{ width:100%; height:100%; object-fit:cover; }
.pan--tall{ aspect-ratio:4/5; }
.pan--wide{ aspect-ratio:2/1; }
.pan--sq{ aspect-ratio:1/1; }
.pan--fill{ height:100%; }
/* when the duo stacks, a portrait figure goes full width - reframe it wide
   rather than let it fill the screen (object-fit:cover handles the crop) */
@media (max-width:899px){
  .duo > .pan--tall,
  .duo .pan--tall{ aspect-ratio:3/2; }
}
.pan figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 16px 12px; color:#fff;
  font-size:.8rem; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.7);
  background:linear-gradient(180deg,transparent,rgba(20,12,16,.60) 45%,rgba(20,12,16,.94));
}

/* ---------- 6. buttons: square, thick, poster-like ----------------------- */
.btn{
  --bg:var(--clay); --fg:#fff; --bd:var(--clay);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:13px 26px; background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd);
  font-family:var(--display); font-weight:700; font-size:1.12rem;
  letter-spacing:.02em; text-decoration:none; cursor:pointer; border-radius:var(--r-pill);
  transition:transform var(--fast) var(--ease), background var(--fast), color var(--fast);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.btn:active{ transform:none; box-shadow:none; }
.btn[disabled],.btn[aria-disabled='true']{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn--sand{ --bg:var(--teal); --bd:var(--teal); }
.btn--pepper{ --bg:var(--clay); --bd:var(--clay); }
.btn--cream{ --bg:var(--cream); --fg:var(--clay); --bd:var(--cream); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn--ghost:hover{ --bg:var(--ink); --fg:var(--cream); }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent),.basin--filled,.hero) .btn--ghost{ --fg:var(--cream); --bd:var(--cream); }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent),.basin--filled,.hero) .btn--ghost:hover{ --bg:var(--cream); --fg:var(--ink); }
.btn--block{ width:100%; }
.btn--sm{ min-height:42px; padding:8px 16px; font-size:.96rem; border-width:2px; }

.tlink{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:700; font-size:.98rem; letter-spacing:.01em; color:var(--clay); text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; transition:gap var(--fast) var(--ease); }
.tlink:hover{ gap:14px; }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent)) .tlink{ color:var(--sand); }
:is(.on-sand,.tone-soft-alt) .tlink{ color:var(--teal); }

/* ---------- 7. announcement + header ------------------------------------- */
.announce{ background:var(--teal); color:var(--cream); font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.announce__row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4px 20px; padding-block:8px; }
.announce__mid{ text-align:center; color:var(--sand); }
.announce__end{ text-align:right; }
@media (max-width:760px){ .announce{ font-size:.9rem; } .announce__row{ grid-template-columns:1fr auto; } .announce__end{ display:none; } }
@media (max-width:430px){ .announce__row{ grid-template-columns:1fr; text-align:center; } .announce__mid{ display:none; } }

.site-head{ position:sticky; top:0; z-index:60; background:var(--cream); border-bottom:1.5px solid var(--edge); }
.site-head__bar{ display:flex; align-items:center; gap:clamp(12px,3vw,32px); min-height:74px; padding-block:10px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto; }
.site-head .brand--lockup{ flex-direction:column; align-items:flex-start; gap:2px; }
.site-head .brand--lockup .brand__sub{ margin-top:0; line-height:1.2; }
.brand__mark{ height:42px; width:auto; max-width:150px; flex:none; object-fit:contain; object-position:left center; background:transparent; }  /* height is fixed, width is whatever the merchant's logo is */
.brand__name{ font-family:var(--display); font-weight:700; font-size:1.62rem; line-height:1; letter-spacing:-.015em; }
.brand__sub{ display:block; font-family:var(--body); font-weight:500; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); margin-top:4px; }

.nav{ display:flex; align-items:center; gap:clamp(10px,1.8vw,26px); }
.nav a{ font-family:var(--body); font-weight:600; font-size:.98rem; letter-spacing:.005em; text-decoration:none; color:var(--ink-dim); padding:4px 0; border-bottom:1.5px solid transparent; transition:color var(--fast), border-color var(--fast); }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current='page']{ color:var(--ink); border-bottom-color:var(--clay); }

.head-actions{ display:flex; align-items:center; gap:9px; }
.cart-btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; background:transparent; color:var(--ink); border:1.5px solid var(--edge); font-family:var(--body); font-weight:700; font-size:.92rem; letter-spacing:.02em; cursor:pointer; text-decoration:none; transition:background var(--fast), color var(--fast); }
.cart-btn:hover{ background:var(--ink); color:var(--cream); }
.cart-btn[data-filled='1']{ background:var(--clay); border-color:var(--clay); color:#fff; }
.cart-btn__count{ font-variant-numeric:tabular-nums; }
.cart-btn.is-bumped{ animation:bump 420ms var(--ease); }
@keyframes bump{ 0%,100%{transform:scale(1)} 32%{transform:scale(1.13)} }

.burger{ display:none; width:44px; height:44px; place-items:center; background:transparent; border:1.5px solid var(--edge); color:var(--ink); cursor:pointer; }
.burger span{ position:relative; display:block; width:18px; height:2.5px; background:currentColor; box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor; }

@media (max-width:900px){
  .burger{ display:grid; }
  .nav{ position:fixed; inset:0 0 0 auto; z-index:70; width:min(80vw,320px); flex-direction:column; align-items:flex-start; gap:0; padding:104px 26px 26px; background:var(--sand); border-left:1.5px solid var(--edge); transform:translateX(103%); transition:transform var(--med) var(--ease); overflow-y:auto; overscroll-behavior:contain; }
  .nav[data-open='1']{ transform:translateX(0); }
  .nav a{ width:100%; font-size:1.9rem; padding:14px 0; color:var(--teal); border-bottom:2px solid rgba(59,30,63,.2); }
  .head-actions{ position:relative; z-index:80; }
  .burger[aria-expanded='true']{ background:var(--clay); border-color:var(--clay); color:#fff; }
  .burger[aria-expanded='true'] span{ box-shadow:none; transform:rotate(45deg); }
  .burger[aria-expanded='true'] span::after{ content:''; position:absolute; left:0; top:0; width:18px; height:2.5px; background:currentColor; transform:rotate(-90deg); }
  .nav-scrim{ position:fixed; inset:0; z-index:65; background:rgba(36,28,33,.6); opacity:0; pointer-events:none; transition:opacity var(--med) var(--ease); }
  .nav-scrim[data-open='1']{ opacity:1; pointer-events:auto; }
}
.nav-scrim{ display:none; }
@media (max-width:900px){ .nav-scrim{ display:block; } }
@media (max-width:460px){ .site-head .brand__sub{ display:none; } .site-head__bar{ gap:10px; } }

/* ---------- 8. hero: FULL-WIDTH BANNER (locked across the set) ----------- */
/* The banner form is fixed for every restaurant: photo edge to edge, scrim
   over it, copy on top. Only the arrangement inside moves. One anchors the
   copy left and centred, two centres it, three sits it low. This one puts it
   high-left, so the banner reads top-down. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; align-items:start;
  min-height:min(82vh,700px);
  background:var(--teal-lo); color:var(--cream);
}
.hero__img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,10,14,.90) 0%, rgba(8,10,14,.80) 34%, rgba(8,10,14,.44) 62%, rgba(8,10,14,.30) 100%),
    linear-gradient(90deg, rgba(8,10,14,.78) 0%, rgba(8,10,14,.40) 54%, rgba(8,10,14,.12) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(40px,5.5vw,72px); }
.hero__body{ max-width:720px; }
.hero__title{ margin-bottom:20px; color:var(--cream); }
.hero__title em{ font-style:italic; color:var(--sand); }
.hero__lede{ max-width:44ch; margin-bottom:28px; color:rgba(253,248,240,.94); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; padding-top:22px; border-top:1.5px solid rgba(253,248,240,.30); }
@media (max-width:640px){ .hero{ min-height:auto; } }

/* a stacked, numbered list - restaurant three uses a row of three cards */
.steps--stack{ grid-template-columns:1fr !important; counter-reset:step; }
.steps--stack .step{ display:grid; grid-template-columns:auto 1fr; gap:0 clamp(16px,2.4vw,28px); align-items:start; padding:24px 0; background:none; border:0; border-top:1.5px solid rgba(253,248,240,.22); }
.steps--stack .step:first-child{ border-top:0; }
.steps--stack .step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display); font-weight:700; font-size:2.1rem; line-height:1.1;
  color:var(--sand); font-variant-numeric:tabular-nums; margin-bottom:0;
}
.steps--stack .step h3{ grid-column:2; margin-bottom:8px; }
.steps--stack .step p{ grid-column:2; }

/* closing band: copy left, action right - three stacks it centred */
.cta-row{ display:grid; gap:clamp(20px,3vw,44px); grid-template-columns:1fr; align-items:center; }
@media (min-width:800px){ .cta-row{ grid-template-columns:1fr auto; } }

/* ---------- 9. the dish pairs (grid in one, rows in two, mosaic in three) -- */
/* Two up, large, picture beside the words. Legible across a room, which is
   the point of a counter you order at. */
.menu-rows{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:1fr; }
@media (min-width:820px){ .menu-rows{ grid-template-columns:repeat(2,1fr); } }
.card{
  border-radius:var(--r); overflow:hidden; display:grid; grid-template-columns:1fr;
  background:var(--cream); border:1.5px solid var(--rule);
  transition:border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
@media (min-width:560px){
  /* three children in two columns wraps the foot under the picture; place all
     three explicitly so the photo spans and price sits under its own copy */
  .card{ grid-template-columns:minmax(150px,38%) 1fr; grid-template-rows:1fr auto; }
  .card__plate{ grid-column:1; grid-row:1 / -1; }
  .card__body { grid-column:2; grid-row:1; }
  .card__foot { grid-column:2; grid-row:2; }
}
.card:hover{ border-color:var(--clay); box-shadow:0 10px 26px rgba(42,33,28,.10); }
.card:hover .plate img{ transform:scale(1.05); }
.card__body{ padding:18px 18px 0; }
.card__foot{ padding:12px 18px 18px; }
@media (min-width:560px){
  .card__plate{ height:100%; }
  .card__plate .plate{ height:100%; aspect-ratio:auto; min-height:190px; }
}
.card__plate{ position:relative; }
.card__flag{ position:absolute; top:0; left:0; z-index:2; background:var(--clay); color:#fff; font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; }
.card__heat{ position:absolute; right:0; bottom:0; z-index:2; display:flex; gap:3px; padding:5px 8px; background:var(--teal); }
.card__heat i{ width:6px; height:6px; border-radius:50%; background:var(--sand); }

.card__name{ font-family:var(--display); font-weight:700; font-size:1.32rem; line-height:1.12; letter-spacing:-.012em; }
.linkish{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; transition:color var(--fast); }
.linkish:hover{ color:var(--clay); }
.card__fr{ font-size:.8rem; font-style:italic; color:var(--ink-dim); margin-top:5px; }
.card__blurb{ font-size:.88rem; line-height:1.5; color:var(--ink-dim); margin-top:10px; }
.card__tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.tag{ font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; font-weight:500; color:var(--ink-dim); border:1px solid var(--rule); padding:2px 7px; }

.pricetag{ display:inline-block; font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.pricetag small{ font-family:var(--body); font-size:.4em; font-weight:500; color:var(--ink-dim); margin-left:4px; letter-spacing:.06em; }
.card__unit{ display:block; font-size:.74rem; color:var(--ink-dim); margin-top:4px; }
.buy{ display:flex; gap:7px; margin-top:14px; }
.stepper{ display:flex; align-items:center; border:1.5px solid var(--edge); border-radius:var(--r-pill); flex:none; overflow:hidden; }
.stepper button{ width:34px; height:40px; background:transparent; border:0; cursor:pointer; font-family:var(--display); font-weight:700; font-size:1.2rem; transition:background var(--fast); }
.stepper button:hover{ background:var(--sand); }
.stepper output{ min-width:28px; text-align:center; font-variant-numeric:tabular-nums; font-weight:600; }
.buy .btn{ flex:1; }

/* ---------- 10. dish sheet ----------------------------------------------- */
.sheet{ width:min(900px,94vw); max-height:88vh; padding:0; border:1.5px solid var(--edge); background:var(--cream); color:var(--ink); overflow:hidden; }
.sheet::backdrop{ background:rgba(36,28,33,.66); }
.sheet__body{ max-height:88vh; overflow-y:auto; padding:clamp(20px,3vw,38px); }
.sheet__grid{ display:grid; gap:clamp(20px,3vw,36px); grid-template-columns:1fr; }
@media (min-width:720px){ .sheet__grid{ grid-template-columns:.85fr 1.15fr; align-items:start; } }
.sheet__close{ position:absolute; top:12px; right:12px; z-index:3; width:42px; height:42px; display:grid; place-items:center; background:var(--cream); color:var(--ink); border:1.5px solid var(--edge); cursor:pointer; font-size:1.1rem; }
.sheet__close:hover{ background:var(--clay); color:#fff; border-color:var(--clay); }
.sheet-cat{ display:inline-block; background:var(--ink); color:var(--cream); font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.07em; text-transform:uppercase; padding:2px 9px; margin:0 0 10px; }
.facts{ display:grid; border-top:1.5px solid var(--edge); margin-top:20px; }
.facts div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:.9rem; }
.facts dt{ color:var(--ink-dim); }
.facts dd{ margin:0; font-weight:600; text-align:right; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ flex:1 1 130px; min-height:62px; padding:9px 13px; text-align:left; background:var(--cream); border:2px solid var(--edge); cursor:pointer; transition:border-color var(--fast), background var(--fast); }
.opt:hover{ border-color:var(--ink); }
.opt[aria-pressed='true']{ border-color:var(--ink); background:var(--sand); }
.opt b{ display:block; font-family:var(--display); font-weight:700; font-size:1.2rem; }
.opt span{ display:block; font-size:.76rem; color:var(--ink-dim); }

/* ---------- 11. menu filters --------------------------------------------- */
.filterbar{ position:sticky; top:74px; z-index:40; background:var(--sand); border-bottom:1.5px solid var(--edge); padding-block:12px; }
.filterbar__row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-right:auto; }
.chip{ min-height:40px; padding:7px 16px; background:transparent; color:var(--teal); border:1.5px solid var(--edge); font-family:var(--body); font-weight:600; font-size:.9rem; letter-spacing:.01em; cursor:pointer; transition:background var(--fast), color var(--fast); }
.chip:hover{ background:rgba(59,30,63,.12); }
.chip[aria-pressed='true']{ background:var(--teal); color:var(--sand); }
.search input{ min-height:40px; width:min(220px,52vw); padding:8px 14px; background:var(--cream); border:2px solid var(--teal); color:var(--ink); }
.search input:focus{ border-color:var(--clay); }
.count{ font-size:.84rem; color:rgba(59,30,63,.8); }
.menu-group{ padding-top:clamp(36px,4.6vw,58px); }
.menu-group__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin-bottom:20px; padding-top:14px; border-top:1.5px solid var(--edge); }
.menu-group__head h2{ font-size:clamp(2rem,4vw,3rem); }
.empty{ padding:54px 24px; text-align:center; border:3px dashed var(--rule); }

/* ---------- 12. steps: three painted panels ------------------------------ */
.steps{ counter-reset:step; display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:1fr; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ counter-increment:step; position:relative; background:var(--cream); border:1.5px solid var(--edge); padding:22px 20px 24px; }
.step::before{ content:counter(step,decimal-leading-zero); display:block; font-family:var(--display); font-weight:700; font-size:3.4rem; line-height:.8; color:var(--clay); margin-bottom:12px; }
.step h3{ font-size:1.5rem; margin-bottom:10px; }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent)) .step{ background:transparent; border-color:var(--sand); }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent)) .step::before{ color:var(--sand); }

/* ---------- 13. order page ----------------------------------------------- */
.rail-steps{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.rail-steps li{ font-family:var(--body); font-weight:600; font-size:.94rem; letter-spacing:.01em; padding:8px 16px; border:1.5px solid var(--edge); border-radius:var(--r-pill); color:var(--ink-dim); }
.rail-steps li[aria-current='step']{ background:var(--ink); color:var(--cream); }
.rail-steps li[data-done='1']{ border-color:var(--teal-lo); color:var(--teal-lo); }
.panel{ background:var(--cream); border:1.5px solid var(--edge); padding:clamp(20px,2.6vw,30px); }
.panel + .panel{ margin-top:18px; }
.panel__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; padding-bottom:12px; border-bottom:1.5px solid var(--edge); }
.panel__head h2{ font-size:1.8rem; }
.summary{ position:sticky; top:100px; }
@media (max-width:959px){ .summary{ position:static; } }
.lines{ display:grid; }
.line{ display:grid; grid-template-columns:60px 1fr auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--rule); }
.line:first-child{ padding-top:0; }
.line__img{ width:60px; height:60px; object-fit:cover; border:2px solid var(--ink); background:var(--oat); }
.line__name{ font-family:var(--display); font-weight:700; font-size:1.28rem; line-height:.96; }
.line__meta{ font-size:.8rem; color:var(--ink-dim); margin-top:4px; }
.line__ctrl{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.line__end{ text-align:right; }
.line__total{ font-family:var(--display); font-weight:700; font-size:1.3rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.linkbtn{ background:none; border:0; padding:4px 0; cursor:pointer; font-size:.8rem; color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px; }
.linkbtn:hover{ color:var(--clay); }
.totals div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:.94rem; }
.totals div.is-total{ margin-top:6px; padding-top:14px; border-top:1.5px solid var(--edge); font-family:var(--display); font-weight:700; font-size:1.9rem; }
.totals dt{ color:var(--ink-dim); }
.totals dd{ margin:0; font-variant-numeric:tabular-nums; font-weight:600; }
.totals .is-total dt{ color:var(--ink); }
.totals .is-free{ color:var(--teal-lo); font-weight:700; }
.segments{ display:flex; gap:8px; }
.segment{ flex:1; min-height:60px; padding:9px 12px; text-align:center; background:var(--cream); border:1.5px solid var(--edge); cursor:pointer; transition:background var(--fast), color var(--fast); }
.segment[aria-pressed='true']{ background:var(--ink); color:var(--cream); }
.segment b{ display:block; font-family:var(--display); font-weight:700; font-size:1.2rem; }
.segment span{ display:block; font-size:.74rem; opacity:.78; }

/* ---------- 14. forms ---------------------------------------------------- */
.field{ display:block; margin-bottom:16px; }
.field > span{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; }
.field .hint{ font-weight:400; color:var(--ink-dim); }
.field input, .field select, .field textarea{ width:100%; min-height:50px; padding:12px 14px; background:var(--cream); border:2px solid var(--edge); color:var(--ink); transition:border-color var(--fast); }
.field textarea{ min-height:98px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--clay); }
.field input[aria-invalid='true'], .field select[aria-invalid='true']{ border-color:var(--clay); }
.field .err{ display:block; font-size:.8rem; color:#B3320F; margin-top:5px; font-weight:600; }
.field-row{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width:620px){ .field-row{ grid-template-columns:1fr 1fr; } }
.radios{ display:grid; gap:8px; }
.radio{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; cursor:pointer; border:2px solid var(--edge); transition:background var(--fast), border-color var(--fast); }
.radio:hover{ border-color:var(--ink); }
.radio:has(input:checked){ border-color:var(--ink); background:var(--sand); }
.radio input{ margin-top:4px; width:17px; height:17px; accent-color:var(--clay); flex:none; }
.radio b{ display:block; font-weight:600; }
.radio span{ display:block; font-size:.8rem; color:var(--ink-dim); }
.formnote{ font-size:.82rem; color:var(--ink-dim); margin-top:14px; }
.formnote code{ background:var(--oat); padding:1px 5px; font-size:.92em; }

/* ---------- 15. hours ---------------------------------------------------- */
.hours th, .hours td{ text-align:left; padding:11px 0; border-bottom:1px solid var(--rule); font-size:.93rem; }
.hours th{ font-family:var(--body); font-weight:600; font-size:.98rem; letter-spacing:.01em; }
.hours td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.hours tr[data-today='1']{ color:var(--clay); }
:is(.on-sand,.tone-soft-alt) .hours tr[data-today='1']{ color:var(--teal); font-weight:700; }
.hours tr[data-today='1'] th::after{ content:' Today'; font-family:var(--body); font-size:.62rem; letter-spacing:.12em; }
.hours tr[data-shut='1'] td{ color:var(--ink-dim); }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent)) .hours th, :is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent)) .hours td{ border-bottom-color:rgba(255,251,242,.24); }
:is(:is(.on-teal,.tone-deep),:is(.on-clay,.tone-accent)) .hours tr[data-today='1']{ color:var(--sand); }

/* ---------- 16. footer --------------------------------------------------- */
.site-foot{ background:var(--teal); color:var(--cream); padding-block:clamp(46px,6vw,74px) 24px; }
.site-foot .brand{ color:var(--cream); }
.site-foot .brand__sub{ color:var(--sand); }
.foot-grid{ display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.foot-grid h3{ font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sand); margin-bottom:12px; }
.foot-grid a{ text-decoration:none; color:rgba(255,251,242,.9); }
.foot-grid a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot-grid li + li{ margin-top:8px; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; margin-top:40px; padding-top:20px; border-top:2px solid rgba(255,251,242,.28); font-size:.79rem; color:rgba(255,251,242,.9); }

.quote-by{ font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase; color:var(--clay); margin:24px 0 0; }
blockquote{ margin:0; }

/* ---------- 17. toast ---------------------------------------------------- */
.toast-host{ position:fixed; left:0; right:0; bottom:18px; z-index:120; display:grid; justify-items:center; gap:8px; padding-inline:16px; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:12px; max-width:min(440px,100%); padding:13px 18px; background:var(--teal); color:var(--cream); border:1.5px solid var(--edge); font-size:.9rem; pointer-events:auto; animation:toastIn 240ms var(--ease); }
.toast b{ font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:.04em; }
.toast a{ color:var(--sand); margin-left:auto; white-space:nowrap; font-weight:600; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------- 18. motion --------------------------------------------------- */
.js [data-reveal]{ opacity:0; transform:translateY(14px); }
.js [data-reveal].is-in{ opacity:1; transform:none; transition:opacity 600ms var(--ease), transform 600ms var(--ease); }
.js [data-reveal-stagger] > *{ opacity:0; transform:translateY(12px); }
.js [data-reveal-stagger].is-in > *{ opacity:1; transform:none; transition:opacity 520ms var(--ease), transform 520ms var(--ease); }
.js [data-reveal-stagger].is-in > *:nth-child(2){ transition-delay:60ms; }
.js [data-reveal-stagger].is-in > *:nth-child(3){ transition-delay:120ms; }
.js [data-reveal-stagger].is-in > *:nth-child(4){ transition-delay:180ms; }
.js [data-reveal-stagger].is-in > *:nth-child(5){ transition-delay:240ms; }
.js .hero__body > *{ animation:rise 640ms var(--ease) both; }
.js .hero__body > *:nth-child(2){ animation-delay:80ms; }
.js .hero__body > *:nth-child(3){ animation-delay:160ms; }
@keyframes rise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .js [data-reveal],.js [data-reveal-stagger] > *{ opacity:1; transform:none; }
}

@media print{
  .site-head,.site-foot,.announce,.filterbar,.buy,.toast-host,.hero__cta{ display:none!important; }
  body{ background:#fff; }
}

/* Neutral brand shell: customer colours belong to content, not logo chrome. */
.site-head{background:#fff!important;color:#191919!important;border-bottom:1px solid #ddd!important}
.site-foot{background:#fff!important;background-image:none!important;color:#191919!important;border-top:1px solid #ddd!important}
.site-head :is(.brand,.brand__name,.nav a,.cart-btn),.site-foot :is(.brand,.brand__name,h2,h3,h4,a,p,li,small){color:#191919!important}
.site-head .brand__sub,.site-foot .brand__sub{color:#565656!important}
.site-head .brand__mark,.site-foot .brand__mark{background:transparent!important}
.site-foot :is(.foot-bottom,.foot__bottom){border-color:#ddd!important}
/* French pages: the decorative labels follow the page language. */
html[lang="fr"] .hours tr[data-today='1'] th::after{content:' Aujourd\2019 hui'}