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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Neutral brand shell: customer colours belong to content, not logo chrome. */
.site-head{background:#fff!important;color:#191919!important;border-bottom:1px solid #ddd!important}
.site-foot{background:#fff!important;background-image:none!important;color:#191919!important;border-top:1px solid #ddd!important}
.site-head :is(.brand,.brand__name,.nav a,.cart-btn),.site-foot :is(.brand,.brand__name,h2,h3,h4,a,p,li,small){color:#191919!important}
.site-head .brand__sub,.site-foot .brand__sub{color:#565656!important}
.site-head .brand__mark,.site-foot .brand__mark{background:transparent!important}
.site-foot :is(.foot-bottom,.foot__bottom){border-color:#ddd!important}

/* Story is a photographic stage, not another two-column feature row. */
.poster-story{padding-block:clamp(48px,7vw,96px) clamp(96px,13vw,178px)}
.poster-story__stage{position:relative}
.poster-story__image{width:100%;height:clamp(480px,58vw,760px);overflow:hidden}
.poster-story__image img{width:100%;height:100%;border:10px solid #fff;object-fit:cover;object-position:center 55%}
.poster-story__card{
  position:absolute;left:clamp(28px,6vw,92px);bottom:clamp(-92px,-7vw,-58px);z-index:2;
  width:min(560px,48%);padding:clamp(28px,4vw,54px);background:#fff;
  border:1px solid var(--edge);box-shadow:12px 12px 0 var(--clay)
}
.poster-story__card .sec-head{margin:0 0 24px;text-align:left}
.poster-story__card .sec-head::before{content:'OUR TABLE';margin-bottom:16px}
.poster-story__card .d2{font-size:clamp(3.2rem,5vw,5.5rem)}
.poster-story__card .stack{max-width:46ch}

/* Craft becomes a proof wall: two photographs above their matching claims. */
.poster-proof__wall{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:'image-one image-two' 'note-one note-two';
  border:1px solid var(--edge);background:#fff
}
.poster-proof__image{height:clamp(300px,32vw,470px);overflow:hidden}
.poster-proof__image img{width:100%;height:100%;border:0;box-shadow:none;object-fit:cover}
.poster-proof__image--one{grid-area:image-one;border-right:1px solid var(--edge)}
.poster-proof__image--two{grid-area:image-two}
.poster-proof__note{
  position:relative;min-height:180px;margin:0;padding:clamp(32px,4vw,58px) clamp(28px,4vw,54px) clamp(30px,4vw,50px) clamp(76px,7vw,110px);
  border-top:1px solid var(--edge);color:var(--ink);font-size:clamp(1.05rem,1.4vw,1.28rem)
}
.poster-proof__note::before{
  position:absolute;left:clamp(24px,3vw,44px);top:clamp(28px,3.5vw,48px);
  font-family:var(--display);font-size:clamp(2.8rem,5vw,5rem);line-height:.7;color:var(--clay)
}
.poster-proof__note--one{grid-area:note-one;border-right:1px solid var(--edge)}
.poster-proof__note--one::before{content:'01'}
.poster-proof__note--two{grid-area:note-two}
.poster-proof__note--two::before{content:'02'}

@media (max-width:760px){
  .poster-story{padding-block:42px 72px}
  .poster-story__stage{display:grid}
  .poster-story__image{height:72vw;min-height:270px}
  .poster-story__card{position:relative;left:auto;bottom:auto;width:calc(100% - 24px);margin:-32px 0 0 24px;padding:28px 24px;box-shadow:8px 8px 0 var(--clay)}
  .poster-story__card .d2{font-size:clamp(3rem,14vw,4.6rem)}
  .poster-proof__wall{grid-template-columns:1fr;grid-template-areas:'image-one' 'note-one' 'image-two' 'note-two'}
  .poster-proof__image{height:68vw;min-height:250px}
  .poster-proof__image--one,.poster-proof__note--one{border-right:0}
  .poster-proof__image--two{border-top:1px solid var(--edge)}
  .poster-proof__note{min-height:0;padding:28px 24px 28px 76px}
  .poster-proof__note::before{left:24px;top:30px;font-size:3.2rem}
}

/* =========================================================================
   TABLE POSTER
   A restaurant poster brought to screen: centred condensed headlines, a
   panoramic dining photograph, visible paper-grid rules and clipped corners.
   Customer colours work like printer's ink—small, deliberate, never a flood.
   ========================================================================= */
:root{
  --cream:#f5f7f3;
  --oat:#e9eee8;
  --sand:var(--sb-secondary-pale,#dfe9dd);
  --clay:var(--sb-accent,#d66334);
  --clay-hi:var(--sb-accent-quiet,#e77d51);
  --teal:var(--sb-deep,#243f35);
  --teal-lo:var(--sb-deep-darker,#172b24);
  --ink:#17201b;
  --ink-dim:#59635d;
  --rule:rgba(23,32,27,.16);
  --edge:rgba(23,32,27,.52);
  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:'Karla','Segoe UI',system-ui,sans-serif;
  --utility:'DM Sans','Segoe UI',system-ui,sans-serif;
  --max:1320px;
  --max-narrow:820px;
  --sec-y:clamp(70px,9vw,134px);
  --r:0;
  --r-sm:0;
  --r-pill:0;
}

body{background:var(--cream);color:var(--ink);font-family:var(--body);letter-spacing:.002em}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:.008em}
.d1{font-size:clamp(4.8rem,9.4vw,9.8rem);line-height:.8;letter-spacing:.008em;text-transform:uppercase}
.d2{font-size:clamp(3.3rem,6.5vw,6.8rem);line-height:.84;letter-spacing:.008em;text-transform:uppercase}
.d3{font-size:clamp(1.8rem,3vw,3rem);line-height:.9;text-transform:uppercase}
.d4{font-size:clamp(1.45rem,2vw,2rem);line-height:.92;text-transform:uppercase}
.lede{font-family:var(--body);font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.58;color:var(--ink-dim)}
.fine{font-family:var(--utility);font-size:.78rem;line-height:1.5;color:var(--ink-dim)}

:is(.on-oat,.tone-soft){background:#fff;color:var(--ink)}
:is(.on-sand,.tone-soft-alt){background:var(--oat);color:var(--ink)}
:is(.on-teal,.tone-deep){background:#fff;color:var(--ink);border-block:1px solid var(--rule)}
:is(.on-clay,.tone-accent){background:var(--cream);color:var(--ink);border-block:12px solid var(--clay)}
:is(.on-teal,.tone-deep,.on-clay,.tone-accent,.hero) :is(.lede,.fine,.fr){color:var(--ink-dim)}
:is(.on-teal,.tone-deep,.on-clay,.tone-accent) .tlink{color:var(--clay)}

.section{position:relative;padding-block:var(--sec-y);overflow:hidden}
.section::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);pointer-events:none
}
.wrap{max-width:var(--max)}
.sec-head{margin:0 auto clamp(34px,5vw,68px);padding:0;border:0;text-align:center;max-width:980px}
.sec-head::before{
  content:'TODAY\2019S SELECTION';display:inline-block;margin-bottom:20px;padding:5px 10px 4px;
  background:var(--ink);color:#fff;font-family:var(--utility);font-size:.64rem;font-weight:700;
  line-height:1;letter-spacing:.15em;text-transform:uppercase;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)
}
.sec-head p{margin:18px auto 0;max-width:55ch}
.sec-head .d2{text-wrap:balance}

/* White logo shell. The selected palette never sits behind the lockup. */
.site-head{position:sticky;top:0;background:#fff!important;color:#191919!important;border-bottom:1px solid #d9ddd9!important}
.site-head__bar{min-height:78px;padding-block:10px}
.brand__mark{height:43px;background:transparent}
.brand__name{font-family:var(--display);font-size:1.8rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.brand__sub{font-family:var(--utility);font-size:.55rem;letter-spacing:.18em;color:#565656!important}
.nav{gap:clamp(12px,2vw,30px)}
.nav a{font-family:var(--utility);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:0;padding:10px 0}
.nav a[aria-current='page']{box-shadow:inset 0 -5px 0 var(--clay)}
.cart-btn,.burger{border-radius:0;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.cart-btn{font-family:var(--utility);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}

/* The signature: a full-bleed dining photograph typeset like a house poster. */
.hero{
  position:relative;isolation:isolate;display:grid;place-items:center;
  min-height:clamp(620px,78vh,860px);background:#0d100e;color:#fff;overflow:hidden
}
/* The bar across the foot of the hero says only what this merchant's own
   hours and town say (data-kicker, written by index.mjs), or nothing. It
   used to promise daily opening and ordering to every merchant. */
.hero::before{
  content:attr(data-kicker);text-transform:uppercase;
  position:absolute;z-index:4;left:0;right:0;bottom:0;display:block;
  width:100%;padding:11px var(--gutter) 10px;background:rgba(13,16,14,.94);color:#fff;
  font-family:var(--utility);font-size:.65rem;font-weight:700;letter-spacing:.2em;text-align:center
}
.hero:not([data-kicker])::before{content:none}
.hero::after{content:none}
.hero__img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;border:0;
  object-fit:cover;object-position:center 47%;transform:none;box-shadow:none
}
.hero__scrim{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,9,8,.64) 0%,rgba(7,9,8,.34) 44%,rgba(7,9,8,.66) 100%),
    linear-gradient(90deg,rgba(7,9,8,.30),rgba(7,9,8,.08) 50%,rgba(7,9,8,.30))
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(82px,10vw,142px) clamp(102px,11vw,154px)}
.hero__body{max-width:1120px;margin-inline:auto;text-align:center}
.hero__body::before{
  content:'THE HOUSE POSTER';display:inline-block;margin-bottom:26px;padding:6px 12px 5px;
  background:var(--clay);color:#fff;font-family:var(--utility);font-weight:700;
  font-size:.66rem;line-height:1;letter-spacing:.18em;transform:rotate(-1.5deg)
}
.hero .hero__title{
  color:#fff;margin:0 auto 28px;max-width:1100px;font-family:var(--display);
  font-size:clamp(4.5rem,6vw,7rem);font-weight:700;line-height:.79;
  letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.34)
}
.hero .hero__lede{max-width:62ch;margin:0 auto 28px;color:rgba(255,255,255,.88)}
.hero__cta{justify-content:center;border-top:1px solid rgba(255,255,255,.38);padding-top:24px;gap:12px}
.hero .btn--ghost{--fg:#fff;--bd:#fff}
.hero .btn--ghost:hover{--bg:#fff;--fg:var(--ink)}
@media (max-width:640px){
  .hero{min-height:680px}
  .hero__inner{padding-block:70px 102px}
  .hero .hero__title{font-size:clamp(3.6rem,17vw,5rem)}
  .hero__img{object-position:58% center}
  .hero::before{font-size:.56rem;letter-spacing:.13em}
}

/* Cut-paper actions are the only deliberately playful control shape. */
.btn{
  min-height:52px;padding:12px 27px;border-radius:0;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  font-family:var(--utility);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase
}
.btn:hover{transform:translateY(-3px);box-shadow:none;filter:brightness(.94)}
.btn--cream{--bg:#fff;--fg:var(--ink);--bd:#fff}
.tlink{font-family:var(--utility);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);border-bottom:4px solid currentColor}

/* Images read as mounted poster prints: square, offset, never rounded. */
.pan{border-radius:0;overflow:visible;background:transparent}
.pan img{border:10px solid #fff;box-shadow:0 0 0 1px var(--rule);object-fit:cover}
.pan--tall{aspect-ratio:4/5}
.pan--wide{aspect-ratio:16/9}
.pan--sq{aspect-ratio:3/4}
.pan figcaption{
  left:10px;right:10px;bottom:10px;padding:9px 12px;background:var(--ink);color:#fff;
  font-family:var(--utility);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;text-shadow:none
}
.duo{gap:clamp(38px,6vw,90px)}
@media (min-width:900px){
  .duo--wide-left{grid-template-columns:.9fr 1.1fr}
  .duo--wide-left .pan--tall{transform:rotate(1.5deg);max-width:480px;justify-self:end}
}
.trio{gap:clamp(14px,2vw,26px);align-items:start}
@media (min-width:760px){
  .trio{grid-template-columns:repeat(3,1fr)}
  .trio > :nth-child(2){margin-top:clamp(30px,5vw,72px)}
  .trio > :nth-child(3){margin-top:clamp(60px,9vw,128px)}
}

/* Menu cards are individual printed placards in a disciplined three-column run. */
.menu-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(16px,2.5vw,34px)}
@media (min-width:960px){.menu-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:0;background:#fff;
  overflow:visible;box-shadow:7px 7px 0 var(--oat);transition:transform var(--med) var(--ease)
}
.card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--sand);border-color:var(--edge)}
.card .plate{aspect-ratio:4/3;border-radius:0;overflow:hidden;border-bottom:1px solid var(--rule)}
.card__body{padding:20px 20px 8px;text-align:left}
.card__foot{padding:10px 20px 20px}
.card__name{font-family:var(--display);font-size:clamp(1.7rem,2.2vw,2.2rem);line-height:.9;text-transform:uppercase}
.card__flag{left:10px;top:10px;background:var(--clay);font-family:var(--utility);font-size:.62rem;letter-spacing:.12em}
.card__head{align-items:start}
.card__tags{gap:5px}
.pill,.tag{border-radius:0;font-family:var(--utility);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em}
.buy{border-radius:0}

/* The order instructions are genuinely sequential, so poster-sized numerals help. */
.steps--stack{display:grid;grid-template-columns:repeat(3,1fr)!important;gap:0;counter-reset:step;border:1px solid var(--edge)}
.steps--stack .step{
  display:block;position:relative;min-height:310px;padding:clamp(26px,3vw,42px);
  border:0!important;border-right:1px solid var(--edge)!important;background:#fff;overflow:hidden
}
.steps--stack .step:last-child{border-right:0!important}
.steps--stack .step::before{
  display:block;margin:0 0 72px;color:var(--clay);font-family:var(--display);
  font-size:clamp(4.5rem,8vw,8rem);line-height:.55;letter-spacing:0
}
.steps--stack .step h3,.steps--stack .step p{grid-column:auto}
.steps--stack .step h3{font-size:2rem;margin-bottom:10px;text-transform:uppercase}

.cta-row{padding:clamp(28px,5vw,64px);background:#fff;border:1px solid var(--edge);box-shadow:10px 10px 0 var(--oat)}
.quote-by{font-family:var(--utility);font-size:.72rem;letter-spacing:.14em;color:var(--clay)}

/* Supporting pages inherit the poster vocabulary without changing behaviour. */
.basin,.panel,.sheet,.radio,.segment,.field :is(input,select,textarea){border-radius:0}
.basin{background:#fff;box-shadow:7px 7px 0 var(--oat)}
.basin__label{font-family:var(--utility);font-size:.64rem;letter-spacing:.12em;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.line__img{border-radius:0;border:5px solid #fff;box-shadow:0 0 0 1px var(--rule)}
.filterbar{background:rgba(245,247,243,.95)}

@media (max-width:900px){
  .nav{background:#fff}
  .nav a{color:var(--ink);font-size:1.4rem}
  .hero .hero__title{font-size:clamp(4.2rem,15vw,7rem)}
  .steps--stack{grid-template-columns:1fr!important}
  .steps--stack .step{min-height:0;border-right:0!important;border-bottom:1px solid var(--edge)!important}
  .steps--stack .step:last-child{border-bottom:0!important}
  .steps--stack .step::before{margin-bottom:36px}
}
@media (max-width:640px){
  .hero{min-height:auto}
  .hero__inner{padding-block:38px 36px}
  /* Under 1.0 the lines of a tall display face overlap: the
     descenders of one line land inside the caps of the next. */
  .hero .hero__title{font-size:clamp(3.7rem,17vw,5.2rem);line-height:.95}
  .hero .hero__lede{font-size:1rem;line-height:1.5}
  .hero__cta{display:grid;grid-template-columns:1fr}
  /* The photograph covers the hero, as it does at every other
     width. Pinned to a fixed band it could not follow a headline
     that ran to three lines, and the last line fell off it. */
  .hero__img{width:100%;height:100%;min-height:0;border-width:0;margin-inline:0}
  .hero::before{font-size:.56rem;letter-spacing:.11em;white-space:nowrap;overflow:hidden}
  .menu-rows{grid-template-columns:1fr;gap:34px}
  .trio{gap:24px}
  .duo > .pan--tall,.duo .pan--tall{aspect-ratio:4/3}
}
@media (max-width:430px){
  .site-head__bar{min-height:70px}
  .brand__mark{height:38px;max-width:116px}
  .hero .hero__title{font-size:clamp(3.45rem,16.5vw,4.5rem)}
}

/* Final neutral brand guarantee. */
.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}

/* Section-specific compositions win over the shared poster primitives. */
.section.poster-story{padding-block:clamp(48px,7vw,96px) clamp(96px,13vw,178px)}
.poster-story .poster-story__image{overflow:hidden}
.poster-story .poster-story__image img{width:100%;height:100%;border:10px solid #fff;object-fit:cover;object-position:center 55%}
.poster-proof .poster-proof__image{overflow:hidden}
.poster-proof .poster-proof__image img{width:100%;height:100%;border:0;box-shadow:none;object-fit:cover}
.poster-proof .poster-proof__note{color:var(--ink);font-size:clamp(1.05rem,1.4vw,1.28rem)}
@media (max-width:760px){
  .section.poster-story{padding-block:42px 72px}
}
/* French pages: the decorative labels follow the page language. */
html[lang="fr"] .sec-head::before{content:'LA S\C9 LECTION DU JOUR'}
html[lang="fr"] .poster-story__card .sec-head::before{content:'NOTRE TABLE'}
html[lang="fr"] .hero__body::before{content:'L\2019 AFFICHE DE LA MAISON'}
html[lang="fr"] .hours tr[data-today='1'] th::after{content:' Aujourd\2019 hui'}