/* Mirwaha: a Lebanese charcoal grill and bakery in Woodville. The page is laid on the grill's
   grate: steel rods at a fixed pitch carry the grill's menu, and twice the grate parts: over the
   table laid for twelve, and over the coals at the very end, still holding the heat you gave them.
   Between, the grounds run hot to cool and back: coals, ember, the oven's soot, the steel counter,
   cream and linen, the steel bench, and ember again for the feast. */
@font-face { font-family: "MW Markazi"; src: url("/assets/fonts/specimen/markazi-text-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MW Alexandria"; src: url("/assets/fonts/specimen/alexandria-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@property --mw-heat { syntax: "<number>"; inherits: true; initial-value: .3; }
@property --mw-wght { syntax: "<number>"; inherits: true; initial-value: 600; }

body.spec-mirwaha { margin: 0; background: #EE7A2B; }
.spec-mirwaha .mw-root {
  --mw-ember: #EE7A2B; --mw-char: #140904; --mw-cream: #FFF3E0; --mw-smoke: #2A1A10;
  --mw-steel: #45403B; --mw-sheen: #D6CEC5; --mw-glow-lo: #8A2A0A; --mw-glow-hi: #FFD9A0; --mw-counter: #CBC4BB; --mw-soot: #1A0F09;
  --mw-lh: 26px; --mw-pitch: 52px; --mw-nav: 56px;
  --mw-m: clamp(16px, 5vw, 80px); --mw-g: clamp(16px, 2.2vw, 32px);
  --mw-pad: max(var(--mw-m), (100% - 1360px) / 2);
  --mw-serif: "MW Markazi", Georgia, "Times New Roman", serif;
  --mw-sans: "MW Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mw-rod: linear-gradient(to bottom, var(--mw-sheen) 0 1px, #756D66 1px, var(--mw-steel) 55%, #17120F);
  /* brushed steel, for the counter-top trays */
  --mw-brushed: repeating-linear-gradient(to bottom, #C9C0B6 0 1px, #BDB3A8 1px 3px, #B1A79C 3px 4px, #BDB3A8 4px 6px);
  --mw-settle: cubic-bezier(.5, 0, .15, 1);
  position: relative;
  background: var(--mw-ember); color: var(--mw-char);
  /* reading copy is Markazi Text, the serif drawn for reading; Alexandria keeps the signs, labels and controls */
  font: 400 24px/1.3 var(--mw-serif);
  font-kerning: normal; text-rendering: optimizeLegibility;
}
.spec-mirwaha .mw-root *, .spec-mirwaha .mw-root *::before, .spec-mirwaha .mw-root *::after { box-sizing: border-box; }
.mw-root :where(h1, h2, h3, p, ul, ol, figure, fieldset) { margin: 0; }
.mw-root :where(ul, ol) { padding: 0; list-style: none; }
.mw-root img { display: block; max-width: 100%; height: auto; }
.mw-root a { color: inherit; }
.mw-root :focus-visible { outline: 2px solid var(--mw-char); outline-offset: 3px; }
.mw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mw-root [id] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--mw-nav) + 16px); }

/* ── the nav: on the ember, over the grate's first rod ─────────────────────────────────────── */
.mw-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px);
  height: var(--mw-nav); padding: 0 var(--mw-m);
  background: var(--mw-ember);
}
.mw-nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5px;
  background: var(--mw-rod); box-shadow: 0 3px 4px rgba(20, 9, 4, .35); pointer-events: none;
}
.mw-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; min-width: 0; }
.mw-brand__name { font: 700 27px/1 var(--mw-serif); letter-spacing: -.005em; padding-top: 3px; }
.mw-mark { flex: none; display: block; overflow: visible; }
.mw-mark__fan, .mw-mark__handle, .mw-mark__rod { fill: var(--mw-char); }
.mw-mark__blades { transform-box: view-box; transform-origin: 32px 40px; }
.mw-root.is-fan .mw-nav .mw-mark__blades { animation: mw-wave .7s var(--mw-settle); }
@keyframes mw-wave { 0% { rotate: 0deg; } 30% { rotate: -11deg; } 60% { rotate: 7deg; } 100% { rotate: 0deg; } }
.mw-links { display: flex; gap: clamp(14px, 1.9vw, 28px); }
.mw-links a, .mw-foot__links a {
  font: 480 15px/1 var(--mw-sans); text-decoration: none; padding: 9px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--mw-settle);
}
.mw-links a:hover, .mw-foot__links a:hover, .mw-links a[aria-current] { background-size: 100% 2px; }
.mw-nav__put {
  font: 700 15px/1 var(--mw-sans); text-decoration: none; white-space: nowrap; padding: 9px 0 10px;
  background: linear-gradient(var(--mw-char), var(--mw-char)) 0 100% / 100% 2px no-repeat;
  transition: background-size .2s var(--mw-settle);
}
.mw-nav__put:hover { background-size: 100% 4px; }
.mw-nav__feasts, .mw-menu { display: none; }
.mw-menu__btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font: 700 15px/1 var(--mw-sans); padding: 10px 2px 10px 10px; min-height: 44px;
}
.mw-menu__btn::-webkit-details-marker { display: none; }
.mw-menu__chev { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--mw-settle); }
.mw-menu[open] .mw-menu__chev { transform: rotate(180deg); }
.mw-menu__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px);
  padding: 0 var(--mw-m) 12px; background: var(--mw-ember);
  box-shadow: 0 14px 18px rgba(20, 9, 4, .3);
}
.mw-menu__list li { position: relative; }
.mw-menu__list li + li::before { content: ""; position: absolute; left: calc(-1 * var(--mw-m)); right: calc(-1 * var(--mw-m)); top: 0; height: 4px; background: var(--mw-rod); }
.mw-menu__list a { display: block; padding: 14px 0 12px; font: 700 26px/1 var(--mw-serif); text-decoration: none; }

/* ── the hero: the coals full width, the fan already in the hand ─────────────────────────────── */
.mw-hero {
  --mw-fb: calc(var(--mw-pitch) * 3);
  position: relative; isolation: isolate; background: var(--mw-ember);
  height: calc(100svh - var(--bar-h, 40px) - var(--mw-nav));
  height: clamp(calc(var(--mw-pitch) * 11), round(down, calc(100svh - var(--bar-h, 40px) - var(--mw-nav)), var(--mw-pitch)), calc(var(--mw-pitch) * 22));
}
.mw-plate {
  position: absolute; left: 0; top: 0; right: 0; bottom: var(--mw-fb); z-index: 2;
  container-type: size; background: var(--mw-soot);
  box-shadow: 0 18px 18px rgba(20, 9, 4, .28);
  /* the photograph's width as laid (cover fit), so the headline stays on the trough's lip */
  --mw-iw: max(100cqw, 177.78cqh);
}
.mw-coals {
  position: absolute; inset: 0; overflow: hidden; background: var(--mw-soot);
  touch-action: pan-y; -webkit-tap-highlight-color: transparent; outline: none;
}
.mw-root .mw-coals:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mw-cream); }
.mw-coals__poster img, .mw-coals__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.mw-coals__poster img { object-fit: cover; object-position: 0% 100%; }
/* a plate much wider than the photograph: keep the shelf of bread and pickles in, the lip still under the headline */
@container (min-aspect-ratio: 21/10) { .mw-coals__poster img { object-position: 0% 62%; } }
@container (min-aspect-ratio: 23/10) { .mw-coals__poster img { object-position: 0% 46%; } }
.mw-coals__cv { opacity: 0; transition: opacity .35s linear; }
.mw-coals.is-live .mw-coals__cv { opacity: 1; }
/* the table has borrowed the coals' context while they are off screen: the photograph shows until they draw again */
.mw-coals.is-live.is-lent .mw-coals__cv { opacity: 0; transition: none; }
/* a light smoke fade under the headline (never more than 30%) */
.mw-coals::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse calc(var(--mw-iw) * .36) calc(var(--mw-iw) * .17) at calc(var(--mw-iw) * .2) calc(100% - var(--mw-iw) * .08), rgba(42, 26, 16, .3), rgba(42, 26, 16, 0));
}
.mw-h1 {
  position: absolute; z-index: 2; left: max(calc(var(--mw-iw) * .05), var(--mw-pad)); bottom: calc(var(--mw-iw) * .03);
  font-family: var(--mw-serif); font-weight: 600;
  font-size: clamp(40px, calc(var(--mw-iw) * .069), 112px);
  font-variation-settings: "wght" var(--mw-wght);
  line-height: .92; letter-spacing: -.01em; color: var(--mw-cream);
  text-shadow: 0 1px 2px rgba(20, 9, 4, .35);
  pointer-events: none;
}
.mw-h1__l { display: block; white-space: nowrap; }
.mw-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.mw-trail__path { fill: none; stroke: var(--mw-cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
/* the gesture, drawn on the coals under the fan: sideways, both ways; gone after the first stroke */
.mw-hint {
  position: absolute; z-index: 3; left: 0; top: 0; width: clamp(132px, 15cqw, 230px); height: auto; overflow: visible;
  translate: calc(var(--hx, 72cqw) - 50%) var(--hy, 66cqh); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .7s var(--mw-settle), visibility 0s linear .7s;
}
.mw-coals.is-live .mw-hint { opacity: 1; visibility: visible; transition: opacity .7s var(--mw-settle); }
.mw-coals.is-live .mw-hint.is-used { opacity: 0; visibility: hidden; transition: opacity .7s var(--mw-settle), visibility 0s linear .7s; }
.mw-hint path { fill: none; stroke: var(--mw-cream); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mw-hint .mw-hint__under { stroke: rgba(20, 9, 4, .82); stroke-width: 7.5; }
.mw-hint { filter: drop-shadow(0 0 6px rgba(20, 9, 4, .5)); }
.mw-hint__arc { stroke-dasharray: 7 10; animation: mw-flow 1.1s linear infinite; }
@keyframes mw-flow { to { stroke-dashoffset: -34; } }

/* the mirwaha itself: a round coil of woven rush on a short wooden handle, drawn once in script.
   It is in the hand from the first frame: over the coals, turned to them, wafting; it follows the
   pointer over the bed and swings with each stroke. Its underside takes the coals' light. */
.mw-fan {
  --fw: clamp(140px, 13vw, 214px);
  position: absolute; left: 0; top: 0; z-index: 6; width: var(--fw); height: calc(var(--fw) * 1.42);
  margin: calc(var(--fw) * -.5) 0 0 calc(var(--fw) * -.5);
  transform-origin: 50% calc(var(--fw) * .5); pointer-events: none; opacity: 0; transition: opacity .3s linear; will-change: transform;
  filter: drop-shadow(0 18px 12px rgba(20, 9, 4, .5)) drop-shadow(0 2px 2px rgba(20, 9, 4, .4));
}
.mw-fan.is-on { opacity: 1; }
.mw-fan.is-gone { opacity: 0; }
.mw-fan__body { position: absolute; inset: 0; transform-origin: 50% calc(var(--fw) * .5); transform: perspective(760px) rotateX(var(--tx, 34deg)) rotateY(var(--ty, 0deg)); }
.mw-fan__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.mw-fan__lit { opacity: calc(var(--mw-heat, .3) * 1.4 - .25); transition: opacity .6s linear; }
@media (pointer: fine) { .mw-coals.is-live { cursor: none; } }

.mw-hero__foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--mw-fb);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); align-content: start;
  padding: var(--mw-lh) var(--mw-pad) 0;
}
.mw-hero__foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--mw-rod); box-shadow: 0 3px 4px rgba(20, 9, 4, .35);
}
.mw-hero__lead { grid-column: 1 / span 7; }
.mw-hero__say { font: 500 clamp(26px, 2.6vw, 40px)/1.08 var(--mw-serif); letter-spacing: -.006em; max-width: 20em; }
.mw-hero__cue { margin-top: 12px; font: 700 16px/1.35 var(--mw-sans); visibility: hidden; }
.mw-hero.is-live .mw-hero__cue { visibility: visible; }
.mw-hero__cue kbd { display: inline-block; min-width: 1.7em; padding: 0 6px 1px; border: 2px solid var(--mw-char); border-radius: 3px; font: 800 14px/1.25 var(--mw-sans); text-align: center; box-shadow: 0 2px 0 var(--mw-char); }
.mw-hero__cue.is-used { opacity: .8; }
.mw-cue__touch { display: none; }
@media (pointer: coarse) { .mw-cue__fine { display: none; } .mw-cue__touch { display: inline; } }
.mw-hero__side { grid-column: 8 / span 5; padding-top: 4px; }
.mw-hero__where { font: 400 22px/1.28 var(--mw-serif); max-width: 40ch; }
.mw-hero__twelve {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 0 7px; text-decoration: none; white-space: nowrap;
  font: 700 16px/1 var(--mw-sans); background: linear-gradient(var(--mw-char), var(--mw-char)) 0 100% / 100% 2px no-repeat;
}
.mw-hero__twelve svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s var(--mw-settle); }
.mw-hero__twelve:hover svg { translate: 4px 0; }

@media (max-width: 1180px) {
  #mw-d-farrouj { --s: 3 !important; }
  #mw-d-halloumi { --s: 1 !important; }
  .mw-sk__name { font-size: clamp(1.5rem, .9rem + 2vw, 3.25rem); }
  .mw-hero__lead { grid-column: 1 / span 7; }
}

/* portrait screens and phones: the coals full bleed with the headline on the lip; the words under them */
@media (max-width: 999px), (max-aspect-ratio: 5/4) {
  .spec-mirwaha .mw-root { --mw-lh: 24px; --mw-pitch: 48px; }
  .mw-hero { height: auto; overflow-x: clip; }
  .mw-plate { position: relative; inset: auto; height: max(320px, 60svh); max-height: 900px; box-shadow: none; }
  .mw-h1 { font-size: clamp(34px, 11.2cqw, 76px); left: max(16px, 4cqw); bottom: max(18px, 4cqw); }
  .mw-coals::after { background: radial-gradient(ellipse 80% 40% at 20% 96%, rgba(42, 26, 16, .3), rgba(42, 26, 16, 0)); }
  .mw-fan { --fw: clamp(96px, 22vw, 160px); }
  .mw-hero__foot { position: relative; height: auto; display: block; padding: var(--mw-lh) var(--mw-m) calc(var(--mw-lh) * 1.5); }
  .mw-hero__foot::before { height: 4px; }
  .mw-hero__say { font-size: clamp(22px, 5.6vw, 30px); max-width: 22em; }
  .mw-hero__cue { margin-top: 10px; }
  .mw-hero__side { padding-top: 14px; }
  .mw-hero__where { max-width: 52ch; }
}
@media (max-width: 700px) and (max-height: 640px) {
  .mw-plate { height: max(240px, 56svh); }
  .mw-hero__where { display: none; }
  .mw-hero__side { padding-top: 0; }
}

/* ── the grate, twice: rods over the coals (or the table), parting as they pass ─────────────── */
.mw-bars {
  --mw-n: 5; --mw-rw: 14px; --mw-open: 62%;
  position: relative; overflow: hidden; height: calc(var(--mw-n) * var(--mw-pitch));
  background: var(--mw-smoke); transition: --mw-heat 1.2s linear;
}
.mw-bars__coals {
  position: absolute; inset: 0;
  background: url("/assets/work/mirwaha/coals.webp") 62% 88% / cover no-repeat;
  filter: brightness(calc(.55 + .75 * var(--mw-heat, .3))) saturate(calc(1 + .4 * var(--mw-heat, .3)));
}
.mw-bars__coals::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(ellipse 60% 90% at 50% 60%, color-mix(in oklab, var(--mw-glow-lo), var(--mw-glow-hi) calc(var(--mw-heat, .3) * 100%)), transparent 70%);
}
/* over the table: the grate lies across the band and slides clear as the table comes up */
.mw-bars--table { --mw-open: 101%; position: absolute; inset: 0; z-index: 4; height: auto; background: none; pointer-events: none; }
.mw-rod {
  --i: 0; position: absolute; z-index: 1; left: 0; width: 100%; height: var(--mw-rw);
  top: calc(var(--mw-pitch) * (var(--i) + .5) - var(--mw-rw) / 2);
  background: var(--mw-rod); box-shadow: 0 6px 10px rgba(20, 9, 4, .35);
}
.mw-rod:nth-of-type(2) { --i: 1; } .mw-rod:nth-of-type(3) { --i: 2; } .mw-rod:nth-of-type(4) { --i: 3; }
.mw-rod:nth-of-type(5) { --i: 4; } .mw-rod:nth-of-type(6) { --i: 5; } .mw-rod:nth-of-type(7) { --i: 6; } .mw-rod:nth-of-type(8) { --i: 7; }
.mw-rod:nth-of-type(9) { --i: 8; } .mw-rod:nth-of-type(10) { --i: 9; } .mw-rod:nth-of-type(11) { --i: 10; }
/* parted is the resting state: without scroll timelines (or JS, or motion) the coals and the table show */
.mw-bars .mw-rod:nth-of-type(odd) { translate: calc(-1 * var(--mw-open) * var(--mw-o, 1)) 0; }
.mw-bars .mw-rod:nth-of-type(even) { translate: calc(var(--mw-open) * var(--mw-o, 1)) 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mw-bars { view-timeline: --mw-bar block; }
    .mw-bars .mw-rod { animation: mw-stay-l linear both; animation-timeline: --mw-bar; animation-range: cover calc(var(--i) * 1.5%) cover calc(50% + var(--i) * 1.5%); }
    .mw-bars .mw-rod:nth-of-type(even) { animation-name: mw-stay-r; }
    .mw-bars--table .mw-rod { animation-range: cover calc(var(--i) * 1%) cover calc(26% + var(--i) * 1%); }
  }
}
@keyframes mw-stay-l { 0%, 20% { translate: 0 0; } 100% { translate: calc(-1 * var(--mw-open)) 0; } }
@keyframes mw-stay-r { 0%, 20% { translate: 0 0; } 100% { translate: var(--mw-open) 0; } }

/* ── sections ───────────────────────────────────────────────────────────────────────────────── */
.mw-sec { position: relative; padding: 0 0 var(--mw-pitch); }
.mw-sec--cream { background: var(--mw-cream); }
/* brushed steel: the mezze counter, and the bench the bread is wrapped on (a faint grain, never a rule) */
.mw-sec--steel {
  background: var(--mw-counter) repeating-linear-gradient(to bottom, rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 3px, rgba(20, 9, 4, .035) 3px 4px, rgba(20, 9, 4, 0) 4px 7px);
}
/* on the ember, the grill's menu sits in bays of two or three pitches, each opened by a real steel rod */
.mw-bay { position: relative; min-height: calc(var(--mw-pitch) * 2); padding: var(--mw-lh) var(--mw-pad) calc(var(--mw-lh) / 2); }
.mw-bay--3 { min-height: calc(var(--mw-pitch) * 3); }
.mw-bay::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--mw-rod); box-shadow: 0 3px 4px rgba(20, 9, 4, .35);
}
.mw-h2 { font: 700 clamp(2.25rem, 1.3rem + 3.3vw, 4.75rem)/1.02 var(--mw-serif); letter-spacing: -.012em; text-wrap: balance; }
.mw-h2--sm { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.9rem); line-height: 1.04; }
.mw-lede { font: 400 clamp(1.5rem, 1.25rem + .7vw, 2.05rem)/1.26 var(--mw-serif); max-width: 34ch; }
.mw-sign { font: 700 16px/1.4 var(--mw-sans); }
.mw-sentence { font: 500 clamp(1.6rem, 1.1rem + 1.3vw, 2.1rem)/1.18 var(--mw-serif); max-width: 22em; text-wrap: balance; }
.mw-statement { font: 700 clamp(2.6rem, 1rem + 4.2vw, 5.75rem)/.98 var(--mw-serif); letter-spacing: -.015em; max-width: 10ch; text-wrap: balance; }
.mw-body { max-width: 38ch; font-size: 25px; line-height: 1.32; }
.mw-photo { position: relative; margin: 0; filter: drop-shadow(0 18px 18px rgba(20, 9, 4, .28)); }
.mw-photo img { width: 100%; }
/* the three chapter words, each on its own ground, never under a rod */
.mw-chap { display: block; font: 700 var(--mw-cs, 10rem)/.8 var(--mw-serif); letter-spacing: -.025em; white-space: nowrap; }

/* 2 · on the coals: each dish a skewer of its own length, the photograph laid over the rods */
.mw-grill__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); align-items: start; }
.mw-grill__top .mw-h2 { grid-column: 1 / span 7; }
.mw-grill__top .mw-lede { grid-column: 8 / span 5; padding-top: 6px; }
.mw-grill__body { position: relative; }
.mw-sk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); align-content: start; }
.mw-sk__row { grid-column: var(--s) / var(--e); display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; min-width: 0; }
.mw-sk__row::before { content: ""; flex: none; width: 13px; height: 13px; margin-right: -2px; border: 2px solid var(--mw-char); border-radius: 50%; }
.mw-sk__name { font: 500 clamp(1.5rem, 1rem + 2.2vw, 3.25rem)/calc(var(--mw-lh) * 2) var(--mw-serif); letter-spacing: -.006em; white-space: nowrap; }
.mw-sk__shaft {
  position: relative; flex: 1 0 96px; min-width: 96px; height: 24px; display: flex; justify-content: flex-end; padding-right: 26px;
  background: linear-gradient(var(--mw-char), var(--mw-char)) 0 50% / calc(100% - 14px) 2px no-repeat;
}
.mw-sk__shaft::after { content: ""; position: absolute; right: 0; top: 50%; width: 16px; height: 8px; translate: 0 -50%; background: var(--mw-char); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mw-sk__bits { flex: none; height: 24px; width: auto; }
.mw-sk__bits * { fill: var(--mw-ember); stroke: var(--mw-char); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.mw-sk__bits .c { fill: none; stroke-width: 1.5; }
.mw-sk__line { grid-column: var(--s) / span 5; padding-left: 25px; margin-top: -2px; max-width: 38ch; font-size: 24px; line-height: 1.28; }
.mw-grill__photo {
  position: absolute; z-index: 3; top: var(--mw-lh); right: var(--mw-pad);
  width: calc((min(1360px, 100% - 2 * var(--mw-m)) * 5 - 7 * var(--mw-g)) / 12);
  rotate: 3deg;
}
.mw-grill__photo, .mw-grill__photo img { aspect-ratio: 3 / 4; }
.mw-grill__photo img { object-fit: cover; object-position: 55% 50%; }
.mw-grill__halal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); align-content: start; row-gap: 14px; }
.mw-halal { grid-column: 1 / span 7; font: 800 20px/1.3 var(--mw-sans); max-width: 34ch; }
.mw-grill__halal .mw-sign { grid-column: 1 / span 7; }

/* 3 · out of the oven: a full-bleed station in soot, lit only by the oven's mouth; the word and the
   rounds in cream on the blackened wall */
.mw-oven { position: relative; isolation: isolate; padding: 0; min-height: clamp(820px, 74vw, 1140px); background: var(--mw-soot); color: var(--mw-cream); }
.mw-oven__photo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.mw-oven__photo picture, .mw-oven__photo img { display: block; width: 100%; height: 100%; }
.mw-oven__photo img { object-fit: cover; object-position: 40% 55%; }
.mw-oven__body {
  position: relative; padding: calc(var(--mw-pitch) * 1.5) 0 calc(var(--mw-pitch) * 1.5) var(--mw-pad);
  max-width: calc(var(--mw-pad) + min(500px, 36vw));
  text-shadow: 0 1px 2px rgba(20, 9, 4, .75), 0 0 22px rgba(20, 9, 4, .6);
}
.mw-chap--oven { --mw-cs: clamp(4.5rem, 12.5vw, 12.5rem); margin: 0 0 calc(var(--mw-lh) * 1.25) -.04em; }
.mw-oven .mw-h2 { margin-bottom: var(--mw-lh); }
.mw-rounds { display: grid; gap: 20px; }
.mw-rd { display: flex; gap: 18px; align-items: flex-start; }
.mw-rd__pie { flex: none; width: 52px; height: 52px; margin-top: 2px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(20, 9, 4, .7)); }
.mw-rd__pie * { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mw-rd__pie .t { stroke-width: 1.25; }
.mw-rd__pie .d circle { fill: currentColor; stroke: none; }
.mw-rd__name { font: 600 clamp(1.5rem, 1rem + 1.1vw, 2.25rem)/1.05 var(--mw-serif); letter-spacing: -.006em; margin-bottom: 3px; }
.mw-rd p { max-width: 34ch; font-size: 23px; line-height: 1.28; }
.mw-oven .mw-sentence { margin-top: calc(var(--mw-lh) * 1.5); font-size: clamp(1.4rem, 1rem + .9vw, 1.85rem); max-width: 17em; }
.mw-oven .mw-sign { margin-top: 14px; max-width: 34ch; }

/* 4 · the mezze counter: steel, the word stamped large, names etched on the steel under each tray */
.mw-mezze { padding-bottom: var(--mw-pitch); }
.mw-mezze__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); align-items: end; padding: calc(var(--mw-pitch) * 1.5) var(--mw-pad) var(--mw-lh); }
.mw-mezze__head { grid-column: 1 / span 6; grid-row: 1; padding-bottom: 6px; }
.mw-mezze__head .mw-lede { margin-top: 14px; }
.mw-chap--mezze { --mw-cs: clamp(4.5rem, 15vw, 15rem); grid-column: 7 / span 6; grid-row: 1; justify-self: end; margin-right: -.03em; color: var(--mw-char); }
.mw-mezze__map { position: relative; padding: var(--mw-lh) var(--mw-pad) var(--mw-lh); }
.mw-mezze__map > * { position: relative; }
.mw-mezze__photo, .mw-mezze__photo img { aspect-ratio: 16 / 9; }
.mw-mezze__photo img { object-fit: cover; }
.mw-trays { position: absolute; inset: var(--mw-lh) var(--mw-pad) var(--mw-lh); container-type: inline-size; }
.mw-tr { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.mw-tr__b {
  position: relative; display: block; border: 0; margin: 0; padding: 4px 6px 2px; background: none; cursor: pointer;
  font: 500 clamp(17px, 1.75cqw, 26px)/1 var(--mw-serif); color: var(--mw-cream); white-space: nowrap;
  text-shadow: 0 1px 0 var(--mw-char), 0 0 6px rgba(20, 9, 4, .8), 0 0 14px rgba(20, 9, 4, .5);
  border-radius: 999px; transition: color .18s, background-color .18s, text-shadow .18s;
}
.mw-tr__b::before {
  content: ""; position: absolute; left: 14px; bottom: 100%; width: 1.5px; background: var(--mw-cream);
  height: calc(max(1.2, var(--y) - var(--py)) * .5625cqw - 4px); box-shadow: 0 0 2px rgba(20, 9, 4, .8);
}
.mw-tr__b:hover, .mw-tr__b[aria-pressed="true"] { background: var(--mw-cream); color: var(--mw-char); text-shadow: none; }
.mw-root .mw-tr__b:focus-visible { outline: 2px solid var(--mw-cream); outline-offset: 2px; }
.mw-mezze__say { display: flex; align-items: flex-start; min-height: calc(var(--mw-pitch) * 1.5); padding: var(--mw-lh) var(--mw-pad) 0; }
.mw-say { font: 400 clamp(1.45rem, 1.2rem + .6vw, 1.85rem)/1.3 var(--mw-serif); max-width: 56ch; }
.mw-say__name { font: 600 clamp(1.6rem, 1.1rem + 1.3vw, 2.1rem)/1 var(--mw-serif); margin-right: 10px; }
.mw-say.is-new .mw-say__line { animation: mw-in .18s var(--mw-settle); }
@keyframes mw-in { from { opacity: 0; translate: 8px 0; } }
.mw-mz-list { display: none; }
.mw-mz-b { display: block; width: 100%; border: 0; padding: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.mw-root:not(.mw-js) .mw-mz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px var(--mw-g); padding: 0 var(--mw-pad) var(--mw-lh); }
.mw-root:not(.mw-js) .mw-mz-b { cursor: default; }
.mw-mz-list b { display: block; font: 600 24px/1.1 var(--mw-serif); }

/* 5 · one skewer: the pieces thread on from the point as the section passes */
.mw-skewer { padding: 0; }
.mw-skewer__mark { position: absolute; left: 0; top: 80%; width: 1px; height: 1px; pointer-events: none; }
.mw-skewer__stage { position: relative; padding: var(--mw-lh) var(--mw-pad) var(--mw-pitch); }
.mw-skewer__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; }
.mw-skewer__head .mw-h2 { max-width: none; }
.mw-sw { display: block; width: 100%; height: auto; margin: clamp(10px, 2vh, 28px) 0 0; overflow: hidden; }
.mw-sw__ring { fill: none; stroke: var(--mw-char); stroke-width: 6; }
.mw-sw__blade { fill: url(#mw-blade); }
.mw-sw__tip { fill: var(--mw-char); }
.mw-sw__sheen { stroke: var(--mw-sheen); stroke-width: 1.4; opacity: .7; }
.mw-sw__pc { --k: clamp(0, (var(--p, 1) - (-.12 + var(--i) * .19)) / .12, 1); transform: translateX(calc((1 - var(--k)) * 1650px)); }
.mw-pc__meat, .mw-pc__onion, .mw-pc__bread { fill: var(--mw-ember); stroke: var(--mw-char); stroke-width: 3; stroke-linejoin: round; }
.mw-pc__bread { fill: var(--mw-cream); }
.mw-pc__hi { fill: none; stroke: var(--mw-cream); stroke-width: 5; stroke-linecap: round; opacity: .85; }
.mw-pc__line { fill: none; stroke: var(--mw-char); stroke-width: 2.5; stroke-linecap: round; }
.mw-pc__char { fill: var(--mw-char); }
.mw-pc__dot { fill: var(--mw-char); }
.mw-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--mw-g); margin-top: clamp(4px, 1.4vh, 20px); }
.mw-step {
  --k: clamp(0, (var(--p, 1) - (-.12 + var(--i) * .19)) / .12, 1);
  --kn: clamp(0, (var(--p, 1) - (.07 + var(--i) * .19)) / .12, 1);
  opacity: clamp(0, (var(--k) - .8) * 5, 1);
  color: color-mix(in srgb, var(--mw-char), var(--mw-cream) calc(var(--kn) * 30%));
  translate: 0 calc((1 - clamp(0, (var(--k) - .8) * 5, 1)) * 14px);
  position: relative; padding-top: 18px;
}
.mw-step:last-child { --kn: 0; }
.mw-step::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 2px; background: currentColor; }
.mw-step__pc { display: none; }
.mw-step__word { font: 700 clamp(1.9rem, 1rem + 2.4vw, 3.6rem)/1 var(--mw-serif); letter-spacing: -.012em; margin-bottom: 12px; }
.mw-step p { font-size: 22px; line-height: 1.28; max-width: 24ch; }
.mw-root:not(.mw-js) .mw-step { --kn: 0; }
@media (min-width: 1024px) and (min-height: 600px) {
  .mw-skewer { height: 260svh; }
  .mw-skewer__stage {
    position: sticky; top: calc(var(--bar-h, 40px) + var(--mw-nav) + 5px);
    height: calc(100svh - var(--bar-h, 40px) - var(--mw-nav) - 5px); min-height: 560px;
    display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0;
  }
}

/* 6 · the table, on linen: the word, then the band under a grate that slides clear */
.mw-table { padding-bottom: var(--mw-pitch); }
.mw-table__top { padding: calc(var(--mw-pitch) * 2) var(--mw-pad) var(--mw-lh); text-align: center; }
.mw-chap--table { --mw-cs: clamp(5.5rem, 21vw, 19rem); color: var(--mw-char); margin: 0 auto calc(var(--mw-lh) * .75); }
.mw-table__head { max-width: 46rem; margin: 0 auto; }
.mw-table__head .mw-lede { margin: 14px auto 0; max-width: 40ch; }
.mw-band-wrap { position: relative; padding: var(--mw-lh) var(--mw-pad) var(--mw-lh); }
/* the table as it is: a clean crop, under its own shadow */
/* clipped, not hidden: a clipping box is not a scroll container, so the grate over it keeps the page's view timeline */
.mw-band { position: relative; aspect-ratio: 21 / 9; overflow: hidden; overflow: clip; background: var(--mw-smoke); outline: none; box-shadow: 0 18px 24px rgba(20, 9, 4, .3); touch-action: pan-y; }
/* keyboard focus shows on the line under the band (the keys, underlined), not as a frame round the photograph */
.mw-root .mw-band:focus-visible { outline: none; }
.mw-band__poster img, .mw-band__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.mw-band__poster img { object-fit: cover; object-position: 50% 38%; transform: scale(1.06); }
.mw-band__cv { opacity: 0; transition: opacity .4s linear; }
.mw-band.is-live .mw-band__cv { opacity: 1; }
/* each dish's name sits on the dish, and moves with it as the view walks and leans */
.mw-dishes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mw-band:not(.is-live) .mw-dishes { display: none; }
.mw-dish {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto; transition: opacity .3s linear; color: var(--mw-cream);
}
.mw-dish::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--mw-cream); box-shadow: 0 0 0 2px rgba(20, 9, 4, .6), 0 1px 6px rgba(20, 9, 4, .6); }
.mw-dish__t {
  position: absolute; left: 12px; top: -12px; display: block; text-align: left; white-space: nowrap;
  transform: translateY(var(--mw-dy, 0px)); transition: transform .25s var(--mw-settle);
  text-shadow: 0 1px 2px rgba(20, 9, 4, .95), 0 0 10px rgba(20, 9, 4, .75), 0 0 24px rgba(20, 9, 4, .5);
}
.mw-dish.is-left .mw-dish__t { left: auto; right: 12px; text-align: right; }
.mw-dish__n { display: block; font: 500 clamp(17px, 1.5vw, 22px)/1.1 var(--mw-serif); transition: font-size .25s var(--mw-settle); }
.mw-dish__l { display: block; width: max-content; max-width: 26ch; white-space: normal; max-height: 0; overflow: hidden; opacity: 0; font: 600 16px/1.3 var(--mw-sans); transition: opacity .25s linear; }
.mw-dish.is-now .mw-dish__n { font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; }
.mw-dish.is-now .mw-dish__l { max-height: 4em; opacity: 1; margin-top: 4px; }
.mw-dish.is-now::before { width: 14px; height: 14px; left: -7px; top: -7px; background: var(--mw-ember); box-shadow: 0 0 0 3px var(--mw-cream), 0 1px 8px rgba(20, 9, 4, .7); }
.mw-dish.is-off, .mw-dish--hid:not(.is-now) { opacity: 0; pointer-events: none; }
.mw-root .mw-dish:focus-visible { outline: none; }
.mw-root .mw-dish:focus-visible .mw-dish__t { outline: 2px solid var(--mw-cream); outline-offset: 3px; }
.mw-band__cue { margin-top: 18px; font: 700 16px/1.35 var(--mw-sans); max-width: 60ch; }
.mw-band__touch, .mw-band__keys { display: none; }
@media (pointer: coarse) { .mw-band__fine { display: none; } .mw-band__touch { display: inline; } }
.mw-band:focus-visible ~ .mw-band__cue > span { display: none; }
.mw-band:focus-visible ~ .mw-band__cue > .mw-band__keys { display: inline; text-decoration: underline 3px; text-underline-offset: 6px; }
.mw-now { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mw-stops { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px var(--mw-g); padding: 0 var(--mw-pad) var(--mw-lh); }
.mw-stops b { display: block; font: 600 24px/1.1 var(--mw-serif); }
.mw-table.is-live .mw-stops { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }

/* 7 · bread, on the steel bench it is wrapped on: one piece of display type beside the cloth */
.mw-bread { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0; }
.mw-bread__photo { filter: none; align-self: stretch; }
.mw-bread__photo picture { display: block; height: 100%; }
.mw-bread__photo img { width: 100%; height: 100%; min-height: min(50vw, 820px); max-height: 900px; object-fit: cover; object-position: 40% 50%; }
.mw-bread__text { padding: calc(var(--mw-pitch) * 1.5) var(--mw-m) calc(var(--mw-pitch) * 1.5) clamp(24px, 5vw, 88px); }
.mw-bread .mw-statement { margin: 20px 0 28px; }

/* 8 · how much for twelve: the count on a skewer, and the tray it fills, as wide as the page */
.mw-feast { padding: calc(var(--mw-pitch) * 1.5) 0 var(--mw-pitch); }
.mw-h2--q { padding: 0 var(--mw-pad); font-size: clamp(2.9rem, 1rem + 6vw, 8.25rem); line-height: .9; letter-spacing: -.02em; text-wrap: wrap; }
/* the number on a line of its own, so the headline never changes height as the count changes */
.mw-q__n { display: block; white-space: nowrap; }
.mw-plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); padding: calc(var(--mw-lh) * 1.25) var(--mw-pad) 0; align-items: end; }
.mw-feast__say { grid-column: 1 / span 5; align-self: start; }
.mw-feast__uncles { margin-top: 14px; }
.mw-plan__controls { grid-column: 7 / span 6; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: end; }
.mw-plan > .mw-tray, .mw-plan > .mw-plan__foot { grid-column: 1 / -1; }
.mw-plan__count { font: 700 40px/1 var(--mw-serif); }
.mw-plan__n { font-variant-numeric: lining-nums tabular-nums; }
.mw-plan__skewer { display: flex; align-items: center; margin-top: 2px; }
.mw-plan__ring { flex: none; margin-right: -6px; position: relative; z-index: 1; }
.mw-plan__ring circle { fill: none; stroke: var(--mw-char); stroke-width: 5; }
.mw-range { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mw-range::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(to bottom, #8A827B 0 1px, #3A332E 1px, #140904); }
.mw-plan__tip { flex: none; margin-left: -1px; }
.mw-plan__tip path { fill: var(--mw-char); }
.mw-range::-moz-range-track { height: 8px; background: linear-gradient(to bottom, #8A827B 0 1px, #3A332E 1px, #140904); }
.mw-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 46px; height: 28px; margin-top: -10px; border-radius: 14px;
  border: 2px solid var(--mw-char);
  background: repeating-linear-gradient(90deg, transparent 0 8px, var(--mw-char) 8px 10px) 6px 5px / calc(100% - 12px) 14px no-repeat, var(--mw-ember);
  box-shadow: 0 3px 5px rgba(20, 9, 4, .35);
}
.mw-range::-moz-range-thumb {
  width: 42px; height: 24px; border-radius: 14px; border: 2px solid var(--mw-char);
  background: repeating-linear-gradient(90deg, transparent 0 8px, var(--mw-char) 8px 10px) 6px 5px / calc(100% - 12px) 14px no-repeat, var(--mw-ember);
}
.mw-range:focus-visible { outline: none; }
.mw-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--mw-char); outline-offset: 3px; }
.mw-slabs { border: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mw-slabs__lg { float: left; width: 100%; padding: 0; margin-bottom: 8px; font: 700 16px/1.3 var(--mw-sans); }
.mw-slab-r { position: relative; display: inline-flex; }
.mw-slab-r input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mw-slab-r span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--mw-char); border-radius: 2px;
  font: 600 16px/1 var(--mw-sans); transition: background-color .18s, box-shadow .18s;
}
.mw-slab-r input:checked + span { background: var(--mw-cream); box-shadow: 0 3px 0 rgba(20, 9, 4, .85); }
.mw-slab-r input:focus-visible + span { outline: 2px solid var(--mw-char); outline-offset: 3px; }
.mw-slab-r:hover span { background-color: rgba(255, 243, 224, .3); }
.mw-slab-r:hover input:checked + span { background-color: var(--mw-cream); }
.mw-tray { margin: calc(var(--mw-lh) * 1.25) 0 0; }
.mw-tray__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 16px rgba(20, 9, 4, .3)); }
.mw-tray__rim { fill: url(#mw-rim); }
.mw-tray__field { fill: url(#mw-brush); }
/* laid on, not faded in: a skewer slides on from the tray's edge, a bowl or a bundle is set down */
.mw-tray__items > * { transition: transform .44s var(--mw-settle), opacity .28s linear; }
.mw-tray__items .is-out { opacity: 0; transition-delay: 0ms; }
.mw-plan__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); row-gap: var(--mw-lh); align-items: end; margin-top: calc(var(--mw-lh) * 1.25); }
.mw-plan__recipe { grid-column: 1 / span 8; }
/* the tray, item by item: counts in tabular figures, a skewer's ring for a bullet */
.mw-plan__for { font: 600 18px/1.4 var(--mw-sans); }
.mw-plan__items { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; font: 400 18px/1.4 var(--mw-sans); font-variant-numeric: lining-nums tabular-nums; }
.mw-plan__items li { position: relative; padding-left: 22px; }
.mw-plan__items li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border: 2px solid var(--mw-char); border-radius: 50%; }
.mw-plan__go { grid-column: 9 / span 4; justify-self: end; text-align: right; }
.mw-plan__confirm { font: 700 18px/1.35 var(--mw-sans); margin-bottom: 14px; }
.mw-slab {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; cursor: pointer;
  background: var(--mw-cream); color: var(--mw-char); border-radius: 2px; text-decoration: none;
  font: 700 17px/1 var(--mw-sans); box-shadow: 0 3px 0 rgba(20, 9, 4, .85), 0 8px 14px rgba(20, 9, 4, .18);
  transition: transform .2s var(--mw-settle), box-shadow .2s var(--mw-settle);
}
.mw-slab:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(20, 9, 4, .85), 0 12px 18px rgba(20, 9, 4, .2); }
.mw-slab:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(20, 9, 4, .85); }

/* 9 · put a feast aside: written on a steel tray like the feast's own, the feast carried down */
.mw-order { padding: var(--mw-pitch) var(--mw-pad) calc(var(--mw-pitch) * 1.5); }
.mw-order__top { max-width: 920px; margin: 0 auto calc(var(--mw-lh) * 1.25); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; }
.mw-order__top .mw-lede { max-width: 26ch; }
.mw-form {
  max-width: 920px; margin: 0 auto; padding: clamp(18px, 3vw, 40px); border: 9px solid transparent; border-radius: 28px;
  background: var(--mw-brushed) padding-box, linear-gradient(#E4DDD5, #8F8780 50%, #4A433E) border-box;
  box-shadow: 0 16px 18px rgba(20, 9, 4, .3);
}
.mw-form__sum {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding: 0 0 18px; margin-bottom: 20px; border-bottom: 2px solid rgba(20, 9, 4, .7);
}
.mw-form__feast { flex: 1 1 22rem; }
.mw-form__k { display: block; margin-bottom: 4px; font: 700 16px/1.3 var(--mw-sans); }
.mw-form__v { font: 600 clamp(1.4rem, 1.1rem + .9vw, 1.9rem)/1.2 var(--mw-serif); }
.mw-form__change {
  font: 700 16px/1 var(--mw-sans); text-decoration: none; white-space: nowrap; padding: 12px 0 8px;
  background: linear-gradient(var(--mw-char), var(--mw-char)) 0 100% / 100% 2px no-repeat;
}
.mw-form__change:hover { background-size: 100% 4px; }
.mw-form__sum.is-new .mw-form__v { animation: mw-in .5s var(--mw-settle); }
.mw-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--mw-g); }
.mw-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mw-field--note { margin-top: 18px; }
.mw-field label { font: 700 16px/1.3 var(--mw-sans); }
.mw-field input, .mw-field textarea {
  width: 100%; border: 2px solid var(--mw-char); border-radius: 4px; background: #F1ECE6; color: var(--mw-char);
  font: 400 18px/1.4 var(--mw-sans); padding: 12px 14px; min-height: 52px; color-scheme: light;
  box-shadow: inset 0 2px 3px rgba(20, 9, 4, .16);
}
.mw-field textarea { resize: vertical; min-height: 92px; }
.mw-field input::placeholder, .mw-field textarea::placeholder { color: rgba(20, 9, 4, .64); opacity: 1; }
.mw-root .mw-field input:focus-visible, .mw-root .mw-field textarea:focus-visible { outline: 3px solid var(--mw-char); outline-offset: 2px; }
.mw-form__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.mw-form__status { font: 700 16px/1.4 var(--mw-sans); }
.mw-order { overflow-x: clip; }

/* the last grate, over the coals, opens and stays open; the foot is cream under a charcoal rod */
.mw-foot { position: relative; background: var(--mw-cream); padding: calc(var(--mw-pitch) * 1.5) var(--mw-pad) var(--mw-pitch); }
.mw-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(to bottom, #7A6E64 0 1px, #2C211A 1px, var(--mw-char)); box-shadow: 0 3px 4px rgba(20, 9, 4, .3); }
.mw-foot__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mw-g); row-gap: var(--mw-lh); align-items: start; }
.mw-foot__brand { grid-column: 1 / span 4; display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 38px/1 var(--mw-serif); }
.mw-mark--foot .mw-mark__fan { fill: var(--mw-ember); }
.mw-foot__where { grid-column: 5 / span 4; max-width: 30ch; }
.mw-foot__links { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: 2px 22px; }
.mw-foot__sign { grid-column: 1 / -1; font: 700 16px/1.35 var(--mw-sans); padding-top: var(--mw-lh); }

/* ── in-between widths ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mw-grill__photo { rotate: 0deg; }
  .mw-links { gap: 16px; }
  .mw-feast__say { grid-column: 1 / span 12; margin-bottom: var(--mw-lh); }
  .mw-plan__controls { grid-column: 1 / span 12; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mw-g); }
  .mw-plan__people { grid-column: 1 / -1; max-width: 560px; }
}
@media (max-width: 1023px), (max-height: 599px) {
  .mw-steps { grid-template-columns: 1fr; row-gap: 0; }
  .mw-sw { display: none; }
  .mw-step { --kn: 0; opacity: 1; translate: none; display: grid; grid-template-columns: 76px 1fr; column-gap: 20px; padding: 18px 0 22px; }
  .mw-step::before { display: none; }
  .mw-steps { position: relative; }
  .mw-steps::before { content: ""; position: absolute; left: 33px; top: -30px; bottom: 30px; width: 10px; background: linear-gradient(to right, #6E665F, #3A332E 45%, #140904); border-radius: 1px; }
  .mw-steps::after { content: ""; position: absolute; left: 30px; bottom: 6px; width: 16px; height: 26px; background: var(--mw-char); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .mw-step__pc { display: block; grid-row: 1 / span 2; width: 76px; height: 76px; rotate: 90deg; position: relative; }
  .mw-step__word, .mw-step p { grid-column: 2; }
  .mw-step p { max-width: 36ch; }
  .mw-skewer__head { padding-bottom: var(--mw-lh); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
    .mw-step__pc { animation: mw-drop linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes mw-drop { from { translate: 0 -64px; opacity: .15; } }
@media (max-width: 899px) {
  .spec-mirwaha .mw-root { --mw-nav: 48px; }
  .mw-nav { gap: 12px; }
  .mw-links, .mw-nav__put { display: none; }
  .mw-nav__feasts { display: block; font: 700 15px/1 var(--mw-sans); text-decoration: none; padding: 14px 4px; }
  .mw-menu { display: block; }
  .mw-brand__name { font-size: 25px; }
  .mw-nav::after { height: 4px; }
}
@media (max-width: 860px) {
  .spec-mirwaha .mw-root { font-size: 22px; }
  .mw-grill__top, .mw-mezze__top { display: block; }
  .mw-grill__top .mw-lede { padding-top: 14px; }
  .mw-sk { display: block; }
  .mw-sk:nth-child(even) .mw-sk__row, .mw-sk:nth-child(even) .mw-sk__line { margin-left: 24px; }
  .mw-sk__line { padding-left: 25px; font-size: 22px; }
  .mw-grill__photo { position: relative; top: auto; right: auto; width: auto; margin: var(--mw-lh) var(--mw-pad) var(--mw-pitch); rotate: 2deg; }
  .mw-grill__photo, .mw-grill__photo img { aspect-ratio: 3 / 4; }
  .mw-grill__photo { width: min(70%, 520px); align-self: center; }
  .mw-grill__body { display: flex; flex-direction: column; }
  .mw-skewers { display: contents; }
  .mw-sk:nth-child(-n+3) { order: 1; }
  .mw-grill__photo { order: 2; }
  .mw-sk:nth-child(n+4) { order: 3; }
  .mw-halal, .mw-grill__halal .mw-sign { grid-column: 1 / -1; }
  /* the oven stands above its rounds, and its soot runs on under them */
  .mw-oven { min-height: 0; }
  .mw-oven__photo { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; max-height: 86svh; width: 100%; }
  .mw-oven__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgba(26, 15, 9, 0), var(--mw-soot)); }
  .mw-oven__photo img { object-position: 66% 50%; }
  .mw-oven__body { max-width: none; margin-top: -18%; padding: 0 var(--mw-m) var(--mw-pitch); }
  .mw-rd p { font-size: 22px; }
  .mw-mezze__top { padding-top: var(--mw-pitch); }
  .mw-chap--mezze { margin: 0 0 var(--mw-lh) -.03em; }
  .mw-mezze__head .mw-lede { margin-top: 12px; }
  .mw-bread { grid-template-columns: 1fr; }
  .mw-bread__photo img { height: auto; min-height: 0; aspect-ratio: 1; max-height: none; }
  .mw-bread__text { padding: var(--mw-pitch) var(--mw-m) var(--mw-pitch); }
  .mw-plan__foot { display: block; }
  .mw-plan__go { justify-self: auto; text-align: left; margin-top: var(--mw-lh); }
  .mw-plan__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-foot__brand, .mw-foot__where, .mw-foot__links { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .mw-bars { --mw-rw: 10px; }
  .mw-bars__coals { background-image: url("/assets/work/mirwaha/coals-sm.webp"); background-position: 50% 86%; }
  .mw-bay::before { height: 4px; }
  .mw-trays { container-type: inline-size; }
  .mw-tr { left: calc((var(--mx) - 7.8125) * 100% / 84.375); top: calc(var(--my) * 1%); translate: -50% -50%; }
  .mw-tr__b { width: 28px; height: 28px; padding: 0; text-shadow: none; background: var(--mw-cream); border: 2px solid var(--mw-char); box-shadow: 0 0 0 3px rgba(255, 243, 224, .45); }
  .mw-tr__n { display: none; }
  .mw-tr__b::before { display: none; }
  .mw-tr__b:hover, .mw-tr__b[aria-pressed="true"] { background: var(--mw-char); border-color: var(--mw-cream); }
  .mw-mezze__photo, .mw-mezze__photo img { aspect-ratio: 3 / 2; }
  .mw-grill__photo { width: auto; align-self: stretch; }
  .mw-grill__photo, .mw-grill__photo img { aspect-ratio: 4 / 3; }
  .mw-mz-list, .mw-root:not(.mw-js) .mw-mz-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 0 var(--mw-m) var(--mw-lh); font: 400 16px/1.35 var(--mw-sans); }
  .mw-js .mw-mz-b span { display: none; }
  .mw-js .mw-mz-b { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 2px solid var(--mw-char); border-radius: 2px; }
  .mw-js .mw-mz-b[aria-pressed="true"] { background: var(--mw-char); color: var(--mw-cream); }
  .mw-mz-list b { font-size: 21px; }
  .mw-mezze__say { order: -1; min-height: 0; padding-top: 4px; padding-bottom: 18px; }
  .mw-mezze__map { padding-bottom: 12px; }
  .mw-trays { bottom: 12px; }
  .mw-band { aspect-ratio: 1; }
  .mw-form__row { grid-template-columns: 1fr; }
  .mw-slab-r span { padding: 0 13px; }
  .mw-plan__controls { display: flex; flex-direction: column; align-items: stretch; }
  .mw-plan__items { grid-template-columns: 1fr; font-size: 17px; }
  .mw-form { border-width: 7px; border-radius: 20px; }
  .mw-order { padding-left: 12px; padding-right: 12px; }
  .mw-order__top { padding: 0 calc(var(--mw-m) - 12px); }
}
@media (max-width: 400px) {
  .mw-root:not(.mw-js) .mw-mz-list { grid-template-columns: 1fr; }
  .mw-js .mw-mz-b { padding: 0 10px; }
  .mw-mz-list b { font-size: 19px; }
  .mw-plan__count { font-size: 34px; }
  .mw-slab-r span { padding: 0 11px; font-size: 15px; }
}
@media (max-width: 339px) { .mw-brand__name { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mw-coals__cv, .mw-band__cv, .mw-hint, .mw-fan, .mw-fan__lit, .mw-slab, .mw-menu__chev, .mw-tray__items > *, .mw-dish, .mw-dish__t, .mw-dish__n, .mw-links a, .mw-hero__twelve svg { transition: none; }
  .mw-root.is-fan .mw-mark__blades, .mw-say.is-new .mw-say__line, .mw-hint__arc { animation: none; }
  .mw-skewer { height: auto; }
  .mw-skewer__stage { position: relative; top: auto; height: auto; }
  .mw-step { --kn: 0; }
  .mw-table.is-live .mw-stops { position: static !important; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: 0 var(--mw-pad) var(--mw-lh); }
}