/* =========================================================================
   Mbolo - design system
   Same nine sections as every restaurant in the set. Third skin, third
   arrangement.
   Direction: COLOUR-BLOCKED CANTEEN. Where restaurant one is glaze-white
   and geometric and restaurant two is dark and editorial, this one is a
   daytime canteen: bone paper, whole sections painted butter, aubergine
   and pine, tall condensed poster type, and dishes laid out as a mosaic
   of unequal tiles rather than a grid or a list.
   ========================================================================= */

/* ---------- 1. tokens ---------------------------------------------------- */
:root{
  --bone:      #FFFBF2;
  --bone-2:    #F7EFE0;
  --butter:    var(--sb-secondary-pale, #F6D66B);
  --aubergine: var(--sb-deep);
  --tangerine:    var(--sb-accent);  /* carries text: 5.1:1 on bone, 4.7:1 on bone-2, 5.3:1 under white */
  --tangerine-hi: var(--sb-accent-quiet);  /* decorative only - focus ring, mark */
  --pine:      var(--sb-deep-quiet);
  --ink:       #241C21;
  --ink-dim:   #5E5259;
  --rule:      rgba(36,28,33,.15);
  --edge:      rgba(36,28,33,.44);   /* interactive boundaries, clears 3:1 */

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body:    'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --gutter: clamp(18px, 4.5vw, 44px);
  --max:    1260px;
  --max-narrow: 760px;
  --sec-y:  clamp(58px, 8vw, 112px);
  --r:      0px;
  --r-sm:   0px;
  --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:       #C33B12;
  --sb-accent-quiet: #E8501F;
  --sb-ground:       var(--bone);
  --sb-surface:      var(--bone-2);
  --sb-surface-alt:  var(--butter);
  --sb-ink:          var(--ink);
  --sb-ink-dim:      var(--ink-dim);
  --sb-deep:         #3B1E3F;
  --sb-deep-quiet:   #14603F;
  --sb-deep-ink:     var(--bone);
  --sb-accent-ink:   var(--bone);
  --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(--bone); 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(--bone-2); }
[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:800; line-height:.94; letter-spacing:.005em; text-transform:uppercase; }
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(--tangerine-hi); outline-offset:2px; }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot) :focus-visible{ outline-color:var(--butter); }

.skip{ position:absolute; left:12px; top:-70px; z-index:200; background:var(--aubergine); color:var(--bone); 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:800; font-size:clamp(3.6rem,12vw,8.5rem); line-height:.86; letter-spacing:0; }
.d2{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,6vw,4.6rem); line-height:.9; letter-spacing:.004em; }
.d3{ font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3vw,2.6rem); line-height:.96; }
.d4{ font-family:var(--display); font-weight:800; 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-glaze2,.tone-soft){ background:var(--bone-2); }
:is(.on-cobalt,.tone-soft-alt){ background:var(--butter); color:var(--aubergine); }
:is(.on-ink,.tone-deep){ background:var(--aubergine); color:var(--bone); }
:is(.on-pepper,.tone-accent){ background:var(--pine); color:var(--bone); }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.site-foot,.basin--filled,.hero) .lede,
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.site-foot,.basin--filled,.hero) .fine,
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.site-foot,.basin--filled,.hero) .fr{ color:rgba(255,251,242,.92); }
:is(.on-cobalt,.tone-soft-alt) .lede, :is(.on-cobalt,.tone-soft-alt) .fine{ color:var(--aubergine); }

/* ---------- 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:18px; border-top:5px solid var(--ink); }
.sec-head p{ max-width:56ch; margin-top:14px; }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent)) .sec-head{ border-top-color:var(--butter); }
:is(.on-cobalt,.tone-soft-alt) .sec-head{ border-top-color:var(--aubergine); }

.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(--bone); border:3px solid var(--ink); padding:clamp(24px,3.2vw,40px); }
.basin__label{ display:inline-block; margin-bottom:14px; background:var(--ink); color:var(--bone); font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; }
.basin--pepper{ border-color:var(--tangerine); }
.basin--pepper .basin__label{ background:var(--tangerine); color:var(--sb-on-accent,var(--bone)); }
.basin--jade{ border-color:var(--pine); }
.basin--jade .basin__label{ background:var(--pine); }
.basin--sun{ border-color:var(--butter); background:var(--butter); color:var(--aubergine); }
.basin--sun .basin__label{ background:var(--aubergine); color:var(--butter); }
.basin--filled{ background:var(--fill,var(--tangerine)); border-color:var(--fill,var(--tangerine)); color:var(--fill-ink,var(--sb-on-accent,var(--bone))); }
.basin--filled.basin--pepper{ --fill:var(--tangerine); }
.basin--filled.basin--ink{ --fill:var(--aubergine); }
.basin--filled .basin__label{ background:var(--bone); color:var(--ink); }

.plate{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--bone-2); }
.plate img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.pan{ position:relative; overflow:hidden; background:var(--bone-2); }
.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%; }
.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(--tangerine); --fg:var(--sb-accent-ink,#fff); --bd:var(--tangerine);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:13px 26px; background:var(--bg); color:var(--fg);
  border:3px solid var(--bd);
  font-family:var(--display); font-weight:800; font-size:1.12rem;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  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--cobalt{ --bg:var(--aubergine); --bd:var(--aubergine); }
.btn--pepper{ --bg:var(--tangerine); --bd:var(--tangerine); }
.btn--sun{ --bg:var(--butter); --fg:var(--aubergine); --bd:var(--ink); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn--ghost:hover{ --bg:var(--ink); --fg:var(--bone); }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.hero) .btn--ghost{ --fg:var(--bone); --bd:var(--bone); }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.hero) .btn--ghost:hover{ --bg:var(--bone); --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(--display); font-weight:800; font-size:1.12rem; letter-spacing:.04em; text-transform:uppercase; color:var(--sb-deep,var(--tangerine)); text-decoration:none; border-bottom:3px solid currentColor; padding-bottom:2px; transition:gap var(--fast) var(--ease); }
.tlink:hover{ gap:14px; }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent)) .tlink{ color:var(--butter); }
:is(.on-cobalt,.tone-soft-alt) .tlink{ color:var(--aubergine); }

/* ---------- 7. announcement + header ------------------------------------- */
.announce{ background:var(--aubergine); color:var(--bone); 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(--butter); }
.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(--bone); border-bottom:3px solid var(--ink); }
.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:800; font-size:2rem; line-height:.86; letter-spacing:.02em; text-transform:uppercase; }
.brand__sub{ display:block; font-family:var(--body); font-weight:500; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sb-accent-text,var(--tangerine)); margin-top:4px; }

.nav{ display:flex; align-items:center; gap:clamp(10px,1.8vw,26px); }
.nav a{ font-family:var(--display); font-weight:700; font-size:1.24rem; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; color:var(--ink-dim); padding:4px 0; border-bottom:3px 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(--tangerine); }

.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:3px solid var(--ink); font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:background var(--fast), color var(--fast); }
.cart-btn:hover{ background:var(--ink); color:var(--bone); }
.cart-btn[data-filled='1']{ background:var(--tangerine); border-color:var(--tangerine); color:var(--sb-on-accent,#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:3px solid var(--ink); 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(--butter); border-left:3px solid var(--ink); 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(--aubergine); border-bottom:2px solid var(--rule); }
  .head-actions{ position:relative; z-index:80; }
  .burger[aria-expanded='true']{ background:var(--tangerine); border-color:var(--tangerine); color:var(--sb-on-accent,#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. Only the content inside it
   moves: one anchors the copy left, one centres it, this one sits it low. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; align-items:end;
  min-height:min(82vh,700px);
  background:var(--aubergine); color:var(--bone);
  border-bottom:3px solid var(--ink);
}
.hero__img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(8,10,14,.95) 0%, rgba(8,10,14,.86) 34%, rgba(8,10,14,.30) 66%, rgba(8,10,14,.14) 100%),
    linear-gradient(90deg, rgba(8,10,14,.86) 0%, rgba(8,10,14,.46) 52%, rgba(8,10,14,.10) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(44px,6vw,78px); }
.hero__body{ max-width:760px; }
.hero__title{ margin-bottom:18px; color:var(--bone); }
.hero__title em{ font-style:normal; color:var(--butter); }
.hero__lede{ max-width:46ch; margin-bottom:26px; color:rgba(255,251,242,.94); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:640px){ .hero{ min-height:auto; } }

/* ---------- 9. the dish mosaic (grid in one, rows in two) ---------------- */
.menu-rows{ display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
/* every fourth tile runs wide and pairs the picture beside the words */
@media (min-width:900px){
  .menu-rows{ grid-template-columns:repeat(4,1fr); }
  .menu-rows > .card:nth-child(4n+1){ grid-column:span 2; }
}
.card{ display:flex; flex-direction:column; background:var(--bone); border:3px solid var(--ink); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease); }
.card:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink); }
.card:hover .plate img{ transform:scale(1.05); }
@media (min-width:900px){
  .menu-rows > .card:nth-child(4n+1){ display:grid; grid-template-columns:1fr 1fr; }
  .menu-rows > .card:nth-child(4n+1) .card__plate{ height:100%; }
  .menu-rows > .card:nth-child(4n+1) .plate{ height:100%; aspect-ratio:auto; }
  .menu-rows > .card:nth-child(4n+1) .card__body{ display:flex; flex-direction:column; }
}
.card__plate{ position:relative; border-bottom:3px solid var(--ink); }
.card__flag{ position:absolute; top:0; left:0; z-index:2; background:var(--tangerine); color:var(--sb-on-accent,#fff); font-family:var(--display); font-weight:800; 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(--aubergine); }
.card__heat i{ width:6px; height:6px; border-radius:50%; background:var(--butter); }
.card__body{ padding:16px 16px 0; flex:1; }
.card__name{ font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:.92; }
.linkish{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; transition:color var(--fast); }
.linkish:hover{ color:var(--sb-accent-text,var(--tangerine)); }
.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:2px solid var(--rule); padding:2px 7px; }
.card__foot{ margin-top:auto; padding:14px 16px 16px; }
.pricetag{ display:inline-block; font-family:var(--display); font-weight:800; font-size:1.8rem; 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:2px solid var(--ink); flex:none; }
.stepper button{ width:34px; height:40px; background:transparent; border:0; cursor:pointer; font-family:var(--display); font-weight:800; font-size:1.2rem; transition:background var(--fast); }
.stepper button:hover{ background:var(--butter); }
.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:3px solid var(--ink); background:var(--bone); 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(--bone); color:var(--ink); border:3px solid var(--ink); cursor:pointer; font-size:1.1rem; }
.sheet__close:hover{ background:var(--tangerine); color:var(--sb-on-accent,#fff); border-color:var(--tangerine); }
.sheet-cat{ display:inline-block; background:var(--ink); color:var(--bone); font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:.07em; text-transform:uppercase; padding:2px 9px; margin:0 0 10px; }
.facts{ display:grid; border-top:3px solid var(--ink); 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(--bone); 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(--butter); }
.opt b{ display:block; font-family:var(--display); font-weight:800; 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(--butter); border-bottom:3px solid var(--ink); 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 15px; background:transparent; color:var(--aubergine); border:2px solid var(--aubergine); font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:background var(--fast), color var(--fast); }
.chip:hover{ background:var(--rule); }
.chip[aria-pressed='true']{ background:var(--aubergine); color:var(--butter); }
.search input{ min-height:40px; width:min(220px,52vw); padding:8px 14px; background:var(--bone); border:2px solid var(--aubergine); color:var(--ink); }
.search input:focus{ border-color:var(--tangerine); }
.count{ font-size:.84rem; color:var(--aubergine); }
.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:5px solid var(--ink); }
.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(--bone); border:3px solid var(--ink); padding:22px 20px 24px; }
.step::before{ content:counter(step,decimal-leading-zero); display:block; font-family:var(--display); font-weight:800; font-size:3.4rem; line-height:.8; color:var(--sb-accent-text,var(--tangerine)); margin-bottom:12px; }
.step h3{ font-size:1.5rem; margin-bottom:10px; }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent)) .step{ background:transparent; border-color:var(--butter); }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent)) .step::before{ color:var(--butter); }

/* ---------- 13. order page ----------------------------------------------- */
.rail-steps{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.rail-steps li{ font-family:var(--display); font-weight:800; font-size:1.1rem; letter-spacing:.05em; text-transform:uppercase; padding:7px 16px; border:3px solid var(--ink); color:var(--ink-dim); }
.rail-steps li[aria-current='step']{ background:var(--ink); color:var(--bone); }
.rail-steps li[data-done='1']{ border-color:var(--pine); color:var(--pine); }
.panel{ background:var(--bone); border:3px solid var(--ink); 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:3px solid var(--ink); }
.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(--bone-2); }
.line__name{ font-family:var(--display); font-weight:800; font-size:1.28rem; line-height:.96; }
.line__meta{ font-size:.8rem; color:var(--ink-dim); margin-top:4px; }
/* In the filled basket panel the unit price takes the panel's own light
   ink, as it does in maquis237: the dim ink was near the panel colour. */
.basin--filled .line__meta{ color:inherit; }
.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:800; 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(--sb-accent-text,var(--tangerine)); }
.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:3px solid var(--ink); font-family:var(--display); font-weight:800; 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(--pine); font-weight:700; }
.segments{ display:flex; gap:8px; }
.segment{ flex:1; min-height:60px; padding:9px 12px; text-align:center; background:var(--bone); border:3px solid var(--ink); cursor:pointer; transition:background var(--fast), color var(--fast); }
.segment[aria-pressed='true']{ background:var(--ink); color:var(--bone); }
.segment b{ display:block; font-family:var(--display); font-weight:800; 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(--bone); 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(--tangerine); }
.field input[aria-invalid='true'], .field select[aria-invalid='true']{ border-color:var(--tangerine); }
.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(--butter); }
.radio input{ margin-top:4px; width:17px; height:17px; accent-color:var(--tangerine); 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(--bone-2); 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(--display); font-weight:700; font-size:1.15rem; letter-spacing:.03em; text-transform:uppercase; }
.hours td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.hours tr[data-today='1']{ color:var(--sb-accent-text,var(--tangerine)); }
:is(.on-cobalt,.tone-soft-alt) .hours tr[data-today='1']{ color:var(--aubergine); 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-ink,.tone-deep),:is(.on-pepper,.tone-accent)) .hours th, :is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent)) .hours td{ border-bottom-color:rgba(255,251,242,.24); }
:is(:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent)) .hours tr[data-today='1']{ color:var(--butter); }

/* ---------- 16. footer --------------------------------------------------- */
.site-foot{ background:var(--aubergine); color:var(--bone); padding-block:clamp(46px,6vw,74px) 24px; }
.site-foot .brand{ color:var(--bone); }
.site-foot .brand__sub{ color:var(--butter); }
.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:800; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; color:var(--butter); 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(--sb-deep,var(--tangerine)); 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(--aubergine); color:var(--bone); border:3px solid var(--ink); font-size:.9rem; pointer-events:auto; animation:toastIn 240ms var(--ease); }
.toast b{ font-family:var(--display); font-weight:800; font-size:1.1rem; letter-spacing:.04em; text-transform:uppercase; }
.toast a{ color:var(--butter); 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'}

/* The filled basket carries the business's colour: its words take the
   ink measured against it, never a fixed cream (colour pass 2026-09-26). */
.basin--filled :is(.lede,.fine,.fr){ color:var(--sb-on-accent,rgba(255,251,242,.92)); }
.basin--filled .btn--ghost{ --fg:var(--sb-on-accent,var(--bone)); --bd:var(--sb-on-accent,var(--bone)); }

/* >>> colour 2026-09-26 */
/* Colour pass (Tumi 2026-09-26: every coloured part follows the intake
   colours; with none, the design's own). */
:root{ --primary:var(--tangerine); --on-primary:var(--sb-on-accent,#fff); --primary-text:var(--sb-accent-text,var(--tangerine)); }
.burger .vh{ width:1px; height:1px; background:none; box-shadow:none; }
.hero .hero__cta .btn:not([class*="btn--"]){ --bg:var(--sb-accent-lift,var(--tangerine)); --bd:var(--sb-accent-lift,var(--tangerine)); --fg:var(--sb-on-accent-lift,var(--sb-accent-ink,#fff)); }
/* Visual pass (2026-09-26, phone and laptop). */
/* The dish mosaic ends on a full row whatever the count: a wide tile left
   alone runs across (its square photo beside its words), a single tile
   beside a wide one runs double the same way, and four dishes stand as
   four single tiles in one row (the fourth stood alone a quarter wide). */
@media (min-width:900px){
  .menu-rows > .card:only-child{ grid-column:1 / -1; grid-template-columns:minmax(0,300px) 1fr; }
  .menu-rows > .card:nth-child(4n+5):last-child{ grid-column:span 3; grid-template-columns:minmax(0,300px) 1fr; }
  .menu-rows > .card:nth-child(2):last-child{ grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; }
  .menu-rows:has(> .card:nth-child(4):last-child) > .card:nth-child(1){ grid-column:auto; display:flex; }
}
/* The engines' headings at the scale of the design's own section headings. */
.eng-head h2{ font-size:clamp(2rem,4.2vw,3.6rem); line-height:1; max-width:none; margin-bottom:.3em; font-weight:800; line-height:.95; }
/* Every dish photograph square, at the top of its card, never stretched to the
   card's height (Tumi 2026-09-26); the words fill the rest of the card. */
:root body .card .card__plate{ height:auto !important; align-self:start !important; }
:root body .card .card__plate .plate{ height:auto !important; min-height:0 !important; aspect-ratio:1 / 1 !important; }
/* The hero photograph on a wide screen: its focus in the upper part (heads
   and faces stay in), and the frame at least 42% of the width tall (within
   the screen), so little of the photo's height is cut away. */
@media (min-width:900px){ :root body .hero .hero__img{ object-position:50% 28%; } }
@media (min-width:1200px){ :root body .hero{ min-height:max(min(82vh,700px), min(42vw, calc(100svh - 110px))); } }
/* <<< colour 2026-09-26 */

/* >>> standard 2026-09-25 */
/* ---- The finished sites' standard (goal 2026-09-25) ----------------------
   Every engine is on these pages now: the header lists up to eleven pages,
   the footer twelve. Sections at most 68px a side (40px on a phone), the
   footer's pages in two columns, headings across their column, and a dish
   with no photograph drawn as a full card, never an empty photo box. */
:root{ --sec-y:clamp(40px,5vw,68px); }
.section{ padding-block:clamp(40px,5vw,68px); }
.section--tight{ padding-block:clamp(36px,4.4vw,56px); }
.section.eng-sec{ padding-block:clamp(36px,4vw,52px); }
.section h2,.section .h2,.section .d2,.section .display{ max-width:none; }
.card:not(:has(.card__plate)){ grid-template-columns:1fr; }
.card:not(:has(.card__plate)) .card__body,.card:not(:has(.card__plate)) .card__foot{ grid-column:1/-1; }
.nav a{ white-space:nowrap; }
/* Both editors: a tap anywhere on the hero beside the words reaches the
   photo, and a photograph keeps its frame inside the editor's wrapper. */
.hero__scrim,.hero__inner,.hero__body{ pointer-events:none; }
.hero__body > *{ pointer-events:auto; }
:is(.pan,.plate,figure) > [data-paurtal-img-wrap]{ display:block !important; width:100%; height:100%; }
@media (min-width:1025px){
  .nav{ gap:clamp(8px,.95vw,16px); flex-wrap:nowrap; justify-content:flex-end; }
  .nav a{ font-size:13.5px; letter-spacing:0; }
}
@media (min-width:1025px) and (max-width:1279px){ .nav{ flex-wrap:wrap; row-gap:2px; } }
/* The visit band: a column left empty (no opening hours listed) goes, and
   the map is as wide as the page's words. */
#visit .duo > div:not(:has(*)){ display:none; }
#visit .duo:has(> div:not(:has(*))){ grid-template-columns:1fr; }
#visit .duo:has(> div:not(:has(*))) > div{ max-width:none; width:100%; }
#visit .sec-head h2{ white-space:normal; max-width:none; }
#visit > .sb-location-map--embedded{ width:100%; max-width:var(--max); margin:28px auto 0; padding-inline:var(--gutter); }
.section[data-section="quote"] .wrap--narrow{ max-width:var(--max); }
.foot-links{ columns:2; column-gap:28px; margin:0; padding:0; list-style:none; }
.foot-links li{ break-inside:avoid; margin:0 0 10px; }
@media (max-width:700px){
  .section{ padding-block:40px; }
  .section--tight{ padding-block:36px; }
}

/* Nothing wider than the screen (a hard shadow pushed the page sideways),
   and the ordering steps across the page's width. */
body{ overflow-x:clip; }
.section[data-section="how_to_order"] .wrap--narrow{ max-width:var(--max); }
/* mbolo */
/* The condensed capitals keep a little air between their lines. */
.d1{line-height:.95}
.d2{line-height:.98}
/* <<< standard 2026-09-25 */