/* Logo transparency is a family-level invariant used by previews and editor tests. */
.brand__mark{background:transparent;}

/* =========================================================================
   Bikutsi - 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);

}

/* Bikutsi — rhythm-led bistro skin.
   The shared markup/content contract stays untouched; composition is rebuilt
   here so intake colours and portal edits remain portable. */
:root{
  --cream:#fffaf2; --oat:#f4eee5; --ink:#171511; --ink-dim:#625f58;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'Manrope','Segoe UI',system-ui,sans-serif;
  --r:2px; --r-sm:2px; --sec-y:clamp(64px,9vw,132px);
  --sb-scheme:light; --sb-accent:#d84a27; --sb-accent-quiet:#f06a42;
  --sb-ground:var(--cream); --sb-surface:var(--oat); --sb-surface-alt:var(--sb-secondary-pale,#f0c84a);
  --sb-ink:var(--ink); --sb-ink-dim:var(--ink-dim); --sb-deep:#182f2b;
  --sb-deep-darker:#0d1d1a; --sb-deep-ink:#fffaf2; --sb-accent-ink:#fff;
}
body{background:var(--cream);background-image:linear-gradient(90deg,transparent 0 95%,rgba(0,0,0,.025) 95%)}
h1,h2,h3,h4,.d1,.d2,.d3,.d4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em}
.d1{font-size:clamp(3.4rem,10vw,8.8rem);line-height:.86}
.d2{font-size:clamp(2.5rem,6vw,5.6rem);line-height:.9}
.d3{font-size:clamp(1.7rem,3vw,2.7rem)}
.announce{background:var(--clay);font-family:var(--body);font-size:.72rem;letter-spacing:.18em}
.site-head{background:rgba(255,250,242,.96);border-bottom:3px solid var(--ink)}
.site-head__bar{min-height:82px}.brand__name{font-family:var(--display);font-size:2rem;text-transform:uppercase}
.nav a{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.btn{border-radius:0;font-family:var(--body);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;box-shadow:6px 6px 0 var(--ink)}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn--ghost{box-shadow:none}.cart-btn,.burger{border:2px solid var(--ink);border-radius:0}
.hero{min-height:min(78vh,760px);align-items:end;border-bottom:12px solid var(--clay)}
.hero__img{width:68%;left:auto;filter:saturate(.84) contrast(1.08)}
.hero__scrim{background:linear-gradient(90deg,var(--teal-lo) 0 43%,rgba(13,29,26,.92) 57%,rgba(13,29,26,.18) 100%)}
.hero__inner{padding-bottom:clamp(54px,8vw,96px)}
.hero__body{width:min(58%,760px);position:relative}
.hero__body:before{content:'MENU • TABLE • MOMENT';display:block;color:var(--sand);font:800 .72rem/1 var(--body);letter-spacing:.22em;margin-bottom:20px}
.hero__title{max-width:9ch;text-wrap:balance}.hero__lede{max-width:48ch;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.sec-head{border:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);gap:30px;align-items:end}
.sec-head:after{content:'';height:10px;background:repeating-linear-gradient(90deg,var(--clay) 0 22px,transparent 22px 30px);grid-column:1/-1}
.sec-head p{margin:0 0 5px}.duo{gap:0}.duo>div{padding:clamp(28px,5vw,72px)}
.pan{border-radius:0}.pan--tall{aspect-ratio:3/4}.pan--wide{aspect-ratio:16/10}
.menu-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink)}
.menu-rows>*{background:var(--cream)}
.trio{gap:12px;transform:rotate(-1deg)}.trio>*:nth-child(2){transform:translateY(28px) rotate(2deg)}
.steps--stack{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:3px solid currentColor}
.steps--stack .step{padding:28px;border:0;border-right:3px solid currentColor}.steps--stack .step:last-child{border-right:0}
.cta-row{border-radius:0;border:3px solid currentColor;box-shadow:12px 12px 0 var(--sand)}
.site-foot{border-top:12px solid var(--clay)}
@media(max-width:899px){
 .hero{min-height:auto}.hero__img{width:100%;opacity:.5}.hero__scrim{background:linear-gradient(0deg,var(--teal-lo) 0,rgba(13,29,26,.72) 70%,rgba(13,29,26,.28))}
 .hero__inner{padding-top:clamp(70px,18vw,120px);padding-bottom:54px}.hero__body{width:100%}.hero__title{max-width:8ch}
 .sec-head{grid-template-columns:1fr}.menu-rows{grid-template-columns:1fr}.steps--stack{grid-template-columns:1fr}.steps--stack .step{border-right:0;border-bottom:3px solid currentColor}.steps--stack .step:last-child{border-bottom:0}
 .duo>div{padding-inline:0}.trio{transform:none}.trio>*:nth-child(2){transform:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.trio,.trio>*{transform:none!important}}
/* 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}
@media(max-width:520px){
 .d1.hero__title{font-size:clamp(2.55rem,11.2vw,3rem);line-height:.9;overflow-wrap:anywhere}
 .hero__lede{font-size:1rem;line-height:1.55}
 .hero__cta{gap:10px}.hero__cta .btn{padding-inline:16px}
}
@media(max-width:520px){
 .d1.hero__title{font-size:clamp(2.55rem,11.2vw,3rem);line-height:.9;overflow-wrap:anywhere}
 .hero__lede{font-size:1rem;line-height:1.55}
 .hero__cta{gap:10px}.hero__cta .btn{padding-inline:16px}
}
@media(max-width:520px){
  .hero__title{font-size:clamp(2.55rem,11.2vw,3rem);line-height:.9;overflow-wrap:anywhere}
  .hero__lede{font-size:1rem;line-height:1.55}
  .hero__cta{gap:10px}.hero__cta .btn{padding-inline:16px}
}

/* ---------- 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(--sb-on-accent,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:var(--teal); }

/* ---------- 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); color:var(--sb-on-accent,var(--cream)); }
.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(--fill-ink,var(--sb-on-accent,var(--cream))); }
.basin--filled.basin--clay{ --fill:var(--clay); }
.basin--filled.basin--teal{ --fill:var(--teal); --fill-ink:var(--cream); }
.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:var(--sb-on-accent,#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(--sb-accent-text,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(--sb-accent-text,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(--sb-accent-text,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: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: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 var(--rule); }
  .head-actions{ position:relative; z-index:80; }
  .burger[aria-expanded='true']{ background:var(--clay); border-color:var(--clay); 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: 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:var(--sb-on-accent,#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(--sb-accent-text,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:var(--sb-on-accent,#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:var(--rule); }
.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:var(--ink-dim); }
.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(--sb-accent-text,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; }
/* 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: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(--sb-accent-text,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(--sb-accent-text,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(--sb-accent-text,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; }
}

@media(max-width:520px){
  .hero__title{font-size:clamp(2.55rem,11.2vw,3rem);line-height:.9;overflow-wrap:anywhere}
  .hero__lede{font-size:1rem;line-height:1.55}
  .hero__cta{gap:10px}.hero__cta .btn{padding-inline:16px}
}

/* Bikutsi — rhythm-led bistro skin.
   The shared markup/content contract stays untouched; composition is rebuilt
   here so intake colours and portal edits remain portable. */
:root{
  --cream:#fffaf2; --oat:#f4eee5; --ink:#171511; --ink-dim:#625f58;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'Manrope','Segoe UI',system-ui,sans-serif;
  --r:2px; --r-sm:2px; --sec-y:clamp(64px,9vw,132px);
  --sb-scheme:light; --sb-accent:#d84a27; --sb-accent-quiet:#f06a42;
  --sb-ground:var(--cream); --sb-surface:var(--oat); --sb-surface-alt:var(--sb-secondary-pale,#f0c84a);
  --sb-ink:var(--ink); --sb-ink-dim:var(--ink-dim); --sb-deep:#182f2b;
  --sb-deep-darker:#0d1d1a; --sb-deep-ink:#fffaf2; --sb-accent-ink:#fff;
}
body{background:var(--cream);background-image:linear-gradient(90deg,transparent 0 95%,rgba(0,0,0,.025) 95%)}
h1,h2,h3,h4,.d1,.d2,.d3,.d4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em}
.d1{font-size:clamp(3.4rem,10vw,8.8rem);line-height:.86}
.d2{font-size:clamp(2.5rem,6vw,5.6rem);line-height:.9}
.d3{font-size:clamp(1.7rem,3vw,2.7rem)}
.announce{background:var(--clay);font-family:var(--body);font-size:.72rem;letter-spacing:.18em}
.site-head{background:rgba(255,250,242,.96);border-bottom:3px solid var(--ink)}
.site-head__bar{min-height:82px}.brand__name{font-family:var(--display);font-size:2rem;text-transform:uppercase}
.nav a{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.btn{border-radius:0;font-family:var(--body);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;box-shadow:6px 6px 0 var(--ink)}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn--ghost{box-shadow:none}.cart-btn,.burger{border:2px solid var(--ink);border-radius:0}
.hero{min-height:min(78vh,760px);align-items:end;border-bottom:12px solid var(--clay)}
.hero__img{width:68%;left:auto;filter:saturate(.84) contrast(1.08)}
.hero__scrim{background:linear-gradient(90deg,var(--teal-lo) 0 43%,rgba(13,29,26,.92) 57%,rgba(13,29,26,.18) 100%)}
.hero__inner{padding-bottom:clamp(54px,8vw,96px)}
.hero__body{width:min(58%,760px);position:relative}
.hero__body:before{content:'MENU • TABLE • MOMENT';display:block;color:var(--sand);font:800 .72rem/1 var(--body);letter-spacing:.22em;margin-bottom:20px}
.hero__title{max-width:9ch;text-wrap:balance}.hero__lede{max-width:48ch;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.sec-head{border:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);gap:30px;align-items:end}
.sec-head:after{content:'';height:10px;background:repeating-linear-gradient(90deg,var(--clay) 0 22px,transparent 22px 30px);grid-column:1/-1}
.sec-head p{margin:0 0 5px}.duo{gap:0}.duo>div{padding:clamp(28px,5vw,72px)}
.pan{border-radius:0}.pan--tall{aspect-ratio:3/4}.pan--wide{aspect-ratio:16/10}
.menu-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink)}
.menu-rows>*{background:var(--cream)}
.trio{gap:12px;transform:rotate(-1deg)}.trio>*:nth-child(2){transform:translateY(28px) rotate(2deg)}
.steps--stack{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:3px solid currentColor}
.steps--stack .step{padding:28px;border:0;border-right:3px solid currentColor}.steps--stack .step:last-child{border-right:0}
.cta-row{border-radius:0;border:3px solid currentColor;box-shadow:12px 12px 0 var(--sand)}
.site-foot{border-top:12px solid var(--clay)}
@media(max-width:899px){
 .hero{min-height:auto}.hero__img{width:100%;opacity:.5}.hero__scrim{background:linear-gradient(0deg,var(--teal-lo) 0,rgba(13,29,26,.72) 70%,rgba(13,29,26,.28))}
 .hero__inner{padding-top:clamp(70px,18vw,120px);padding-bottom:54px}.hero__body{width:100%}.hero__title{max-width:8ch}
 .sec-head{grid-template-columns:1fr}.menu-rows{grid-template-columns:1fr}.steps--stack{grid-template-columns:1fr}.steps--stack .step{border-right:0;border-bottom:3px solid currentColor}.steps--stack .step:last-child{border-bottom:0}
 .duo>div{padding-inline:0}.trio{transform:none}.trio>*:nth-child(2){transform:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.trio,.trio>*{transform:none!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 brand band and the filled basket carry the business's colour: their
   words take the ink measured against it (black on a yellow, white on a
   navy), never a fixed cream (colour pass 2026-09-26). */
:is(.on-clay,.tone-accent) :is(.lede,.fine,.fr),
.basin--filled:not(.basin--teal) :is(.lede,.fine,.fr){ color:var(--sb-on-accent,rgba(255,251,242,.92)); }
:is(.on-clay,.tone-accent) .btn--ghost,
.basin--filled:not(.basin--teal) .btn--ghost{ --fg:var(--sb-on-accent,var(--cream)); --bd:var(--sb-on-accent,var(--cream)); }
:is(.on-clay,.tone-accent) .tlink{ color:var(--sb-on-accent,var(--sand)); }
:is(.on-clay,.tone-accent) .step::before,
:is(.on-clay,.tone-accent) .hours tr[data-today='1']{ color:var(--sb-on-accent,var(--sand)); }

/* >>> 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(--clay); --on-primary:var(--sb-on-accent,#fff); --primary-text:var(--sb-accent-text,var(--clay)); }
.burger .vh{ width:1px; height:1px; background:none; box-shadow:none; }
.hero .hero__cta .btn:not([class*="btn--"]){ --bg:var(--sb-accent-lift,var(--clay)); --bd:var(--sb-accent-lift,var(--clay)); --fg:var(--sb-on-accent-lift,#fff); }
/* The announcement bar is painted the brand colour here. */
.announce{ color:var(--sb-on-accent,var(--cream)); }
.announce__mid{ color:var(--sb-on-accent,var(--sand)); }
/* Visual pass (2026-09-26, phone and laptop). */
/* The hero's title keeps its words together (one word a line before, a
   lone "A" on a line of its own on a laptop). */
.hero .hero__title{ max-width:none; overflow-wrap:normal; word-break:normal; }
@media (min-width:900px){ .hero .hero__title{ font-size:clamp(2.6rem,7.2vw,7rem); } }
/* The ordering steps stand in one column: no stray line down their right edge. */
.steps--stack .step{ border-right:0; }
/* A section head with no side paragraph is one column: the heading runs
   across (it stood in two thirds, three short lines), and an empty
   paragraph leaves no gap above the rule. */
.sec-head > p:empty{ display:none; }
.sec-head:not(:has(> p:not(:empty))){ grid-template-columns:1fr; }
/* An odd number of dishes in two columns: the last one takes the row, its
   square photograph no bigger than the others'. */
@media (min-width:900px){ .menu-rows > .card:last-child:nth-child(odd){ grid-column:1 / -1; grid-template-columns:minmax(150px,240px) 1fr; } }
/* The phone's menu: its links at a size a thumb reads (they kept the
   laptop's small capitals). */
@media (max-width:900px){ .site-head .nav a{ font-size:1.05rem; } }
/* The engines' headings at the scale of the design's own section headings. */
.eng-head h2{ font-size:clamp(1.9rem,3.4vw,3.2rem); line-height:1; max-width:none; margin-bottom:.3em; }
/* 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(78vh,760px), min(42vw, calc(100svh - 110px))); } }
/* The menu page: each dish card stands with its square photograph above its
   words (side by side in a narrow column the words were squeezed). */
@media (min-width:560px){
  .menu-group .card{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
  .menu-group .card__plate{ grid-column:1; grid-row:1; }
  .menu-group .card__body{ grid-column:1; grid-row:2; }
  .menu-group .card__foot{ grid-column:1; grid-row:3; }
}
.menu-group .grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); }
/* <<< 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); }
/* bikutsi */
/* Capitals at a size that keeps whole words on their line: the story's
   heading no longer stands one word per line, the closing band's heading
   stays inside its box, and on a phone the hero never splits a word. */
.d2{font-size:clamp(2rem,4.2vw,3.8rem);line-height:1}
.d1{line-height:.95}
.d1.hero__title{overflow-wrap:normal;word-break:normal;hyphens:none}
@media(max-width:700px){.d1.hero__title{font-size:clamp(2.2rem,9.6vw,2.8rem);line-height:.98}}
.cta-row{box-shadow:8px 8px 0 var(--sand)}
[data-section="craft"] .duo{gap:clamp(20px,3vw,40px)}
/* No drawn stripe down the page's right edge, and the closing band's words keep room inside their frame. */
body{background-image:none}
.cta-row{padding:clamp(22px,3.4vw,40px)}
/* <<< standard 2026-09-25 */