/* The Butcher : menu page layout.
   Print rules carried to screen: deep margins, hairline rules, name leads,
   price nested and lighter, dish names title case, weight earned not default. */

.menu-head{padding:clamp(52px,8vw,86px) 0 clamp(26px,4vw,40px);text-align:center}
.menu-head .mark{width:clamp(120px,17vw,168px);margin:0 auto 30px}
.menu-head h1{font-size:clamp(30px,5vw,50px)}
.menu-head .pricenote{margin-top:22px;font-size:10px;letter-spacing:.28em;
  text-indent:.28em;text-transform:uppercase;opacity:.62}
.menu-head .pricenote.ar{font-family:'PlexAr';letter-spacing:0;text-indent:0;
  font-size:13px;text-transform:none}

/* ---------- sticky section nav ----------
   Sits directly below the header, so it tracks the header's measured height
   rather than a guessed number. Its inner width matches the reading measure
   below it, so the first nav item sits on the same left edge as the section
   headings. At 1140 it did not, and that was the misalignment you could feel. */
.secnav{position:sticky;top:var(--headerh);z-index:40;
  background:rgba(249,247,245,.95);backdrop-filter:blur(8px);
  border-block:1px solid var(--hair)}
.secnav .inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  max-width:var(--measure);margin:0 auto;padding-inline:var(--pad)}
.secnav .inner::-webkit-scrollbar{display:none}
.secnav a{white-space:nowrap;padding:15px 14px;font-size:10px;letter-spacing:.2em;
  text-indent:.2em;text-transform:uppercase;opacity:.55;transition:opacity .2s;
  border-bottom:2px solid transparent}
/* first and last items flush with the content edge, not inset by their padding */
.secnav a:first-child{margin-inline-start:-14px}
.secnav a:last-child{margin-inline-end:-14px}
.secnav a:hover{opacity:.9}
.secnav a.on{opacity:1;border-bottom-color:var(--maroon)}
html[lang="ar"] .secnav a{font-family:'PlexAr';letter-spacing:0;text-indent:0;
  font-size:14px;text-transform:none}

.menu-body{padding:clamp(38px,6vw,64px) 0 clamp(70px,10vw,110px)}
.menu-body .wrap{max-width:var(--measure)}

/* ---------- section ---------- */
/* clears both the header and the sticky nav when jumped to from the nav */
.sec{margin-bottom:clamp(48px,7vw,80px);
  scroll-margin-top:calc(var(--headerh) + 52px)}
/* row-gap matters: when the Arabic wraps under the English, baseline alignment
   no longer applies and the two lines collide without it */
.sec-h{display:flex;align-items:baseline;column-gap:16px;row-gap:4px;flex-wrap:wrap}
.sec-h h2{font-family:'Serif';font-size:clamp(24px,3.4vw,34px);font-weight:400}
.sec-h .sec-ar{font-family:'PlexAr';font-size:clamp(14px,1.8vw,17px);opacity:.66;
  direction:rtl;unicode-bidi:isolate}
html[lang="ar"] .sec-h h2{font-family:'PlexAr';font-weight:500}
html[lang="ar"] .sec-h .sec-ar{font-family:'Serif';direction:ltr;letter-spacing:.04em}
.note{font-size:9px;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  opacity:.62;margin-top:12px;line-height:1.3}
.note.ar{font-family:'PlexAr';font-size:12.5px;letter-spacing:0;text-indent:0;
  text-transform:none;direction:rtl;text-align:right}
.rule{height:1px;background:var(--hair);margin:14px 0 22px}

/* ---------- rows ----------
   Centred, not baseline. The name is two lines (English over Arabic) and the
   price is one, so sitting the price on the first baseline left it riding high
   against the block. Centred, the price reads as belonging to the whole item. */
.row{display:flex;align-items:center;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:none}
.nm{flex:1 1 auto;min-width:0}
.nm .en,.cut-card .en{font-size:clamp(14.5px,1.6vw,16.5px);font-weight:400;
  letter-spacing:.045em;line-height:1.35}

/* text-align lives in this block, not a separate rule below it. An RTL block
   still fills its container, so without an explicit edge the Arabic runs to the
   far side of the name column and reads as a second price column. */
.nm .ar,.cut-card .ar{font-family:'PlexAr';font-size:clamp(13.5px,1.5vw,15px);
  font-weight:400;opacity:.72;direction:rtl;unicode-bidi:isolate;
  text-align:left;margin-top:3px;line-height:1.55}
.nm .desc{font-size:12.5px;opacity:.62;margin-top:5px;max-width:52ch}

html[lang="ar"] .nm .en,html[lang="ar"] .cut-card .en{
  direction:ltr;unicode-bidi:isolate;text-align:right;
  font-size:clamp(13px,1.45vw,14.5px);opacity:.68;letter-spacing:.05em;margin-top:3px}
html[lang="ar"] .nm .ar,html[lang="ar"] .cut-card .ar{
  text-align:right;opacity:1;font-size:clamp(15px,1.7vw,17px);margin-top:0}
html[lang="ar"] .nm .desc{text-align:right}

/* Price: nested, one step lighter, serif. Tabular figures and a shared minimum
   width so every price in a section sits on one edge instead of drifting with
   the width of its digits. */
.prc{font-family:'Serif';font-size:clamp(14px,1.5vw,16px);opacity:.8;
  white-space:nowrap;text-align:end;min-width:4.2em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  direction:ltr;unicode-bidi:isolate}

/* ---------- featured dish ---------- */
.hero-item{background:var(--maroon) url('marbling_maroon.jpg') center/cover;
  color:var(--cream);padding:clamp(22px,3.4vw,34px) clamp(22px,3.6vw,38px);
  margin-bottom:26px}
.hero-item .tag{font-size:8.5px;letter-spacing:.34em;text-indent:.34em;opacity:.76}
html[lang="ar"] .hero-item .tag{font-family:'PlexAr';font-size:12px;letter-spacing:0;
  text-indent:0}
/* baseline, not flex-end: the price now sits on the dish name's baseline
   instead of hanging off the bottom of a two-line name block */
.hero-item .line{display:flex;align-items:baseline;gap:28px;margin-top:14px}
.hero-item .nm{flex:1 1 auto}
.hero-item .nm .en{font-size:clamp(17px,2.2vw,21px)}
.hero-item .nm .ar{opacity:.78}
.hero-item .pr{font-family:'Serif';font-size:clamp(21px,2.8vw,27px);
  text-align:center;white-space:nowrap}
.hero-item .plab{display:block;font-family:'Plex';font-size:8px;letter-spacing:.24em;
  text-indent:.24em;opacity:.72;margin-bottom:5px}
html[lang="ar"] .hero-item .plab{font-family:'PlexAr';font-size:11px;letter-spacing:0}

/* ---------- matrix (cuts, burger sizes, steak plus) ----------
   No negative inline margin. It pulled the table past the section heading's
   left edge, so every price table sat a few pixels out from everything else. */
/* A cut matrix is a comparison, so it stays a table on a phone rather than
   collapsing into cards. It scrolls, and the fade on the trailing edge says so. */
.matrix-scroll{overflow-x:auto;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(249,247,245,0)) left center,
    linear-gradient(to left,  var(--paper) 30%, rgba(249,247,245,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(82,22,23,.13), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(82,22,23,.13), transparent) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment:local, local, scroll, scroll}
.matrix{width:100%;border-collapse:collapse;min-width:min(100%,460px)}
.matrix th,.matrix td{padding:13px 10px;text-align:center;vertical-align:baseline}
.matrix thead th{border-bottom:1px solid var(--hair);padding-bottom:14px;
  vertical-align:bottom}
/* name column flush left with the heading above it, price columns share the rest */
.matrix thead th:first-child{width:44%;padding-inline-start:0}
.matrix td.nm{text-align:start;padding-inline-start:0}
.matrix .ch{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.82}
html[lang="ar"] .matrix .ch{font-family:'PlexAr';font-size:14px;letter-spacing:0;
  text-transform:none}
.matrix .cu{display:block;font-family:'Serif';font-size:11px;opacity:.6;margin-top:5px}
.matrix tbody tr{border-bottom:1px solid var(--hair)}
.matrix tbody tr:last-child{border-bottom:none}
.matrix td.v{font-family:'Serif';font-size:clamp(14px,1.6vw,17px);opacity:.86;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  direction:ltr;unicode-bidi:isolate}
/* an item with one price inside a sized section spans the price columns rather
   than sitting under the first one, which read as a striploin chicken breast */
.matrix td.v.span{text-align:center}

/* ---------- grid of cuts, one shared price ---------- */
.shared{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.72;
  margin-bottom:20px}
.shared b{font-family:'Serif';font-size:17px;letter-spacing:0;opacity:1}
html[lang="ar"] .shared{font-family:'PlexAr';font-size:14px;letter-spacing:0;
  text-transform:none}
.grid-cuts{display:grid;gap:1px;background:var(--hair);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  border:1px solid var(--hair)}
.cut-card{background:var(--paper);padding:17px 18px}

/* ---------- additions ---------- */
.adds{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.add{border:1px solid var(--hair);padding:9px 15px;font-size:12.5px;opacity:.86}
.add b{font-family:'Serif';font-weight:400;margin-inline-start:6px}
html[lang="ar"] .add{font-family:'PlexAr'}

.err{padding:60px 0;text-align:center;opacity:.7}

/* loading skeleton keeps the page from jumping */
.skel{height:15px;background:var(--hair);margin:16px 0;max-width:60%}
.skel:nth-child(even){max-width:44%}

@media (max-width:640px){
  .row{gap:12px;padding:12px 0}
  .prc{min-width:3.4em}
  .hero-item .line{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-item .pr{text-align:start}
  .hero-item .plab{text-align:start}
  .matrix th,.matrix td{padding:11px 6px}
  .matrix thead th:first-child{width:36%}
  .grid-cuts{grid-template-columns:1fr}
  .adds{gap:8px}
  .add{padding:8px 12px;font-size:12px}
}