/* Menu page: the chosen platform's view behind, a warm ivory menu in front, and a simple list for quick price checks. */

.menu-page {
  --paper: #f6eee0;
  --paper-2: #ede1ca;
  --p-ink: #2a1b0f;
  --p-ink-2: #5a4834;
  --p-muted: #8a7660;
  --p-rule: rgba(92, 64, 30, 0.16);
  --p-red: #9b2216;
  --p-brass: #9a7436;
  --panel-w: clamp(450px, 39vw, 610px);
  --gut: clamp(18px, 2.4vw, 40px);
  --bleed: 150px;
  --ease-cam: cubic-bezier(0.22, 0.61, 0.2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-bg: var(--grain), radial-gradient(140% 55% at 50% 0%, #fcf8ef 0%, rgba(252, 248, 239, 0) 70%), linear-gradient(180deg, var(--paper), var(--paper-2));
}
html[data-view="scene"] .menu-page { overflow: hidden; }
html[data-view="scene"] .simple, html[data-view="simple"] .mx { display: none; }
.menu-page svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- shared glass pills on the scene */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(10, 8, 6, 0.66);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--cream); font: 700 14px/1 "Vazirmatn", sans-serif; text-decoration: none; cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.pill:hover { border-color: var(--gold); color: var(--gold-hi); }
.pill svg { width: 18px; height: 18px; flex: none; }

/* ================================================================ the scene */
.mx { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }

.ambient { position: absolute; inset: -70px; opacity: 0; transition: opacity 1.2s ease; }
.ambient img { width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.1) brightness(0.6); transform: scale(1.08); }
.mx.ready .ambient { opacity: 1; }

/* the table's own view; when the menu opens it narrows to the open side of the screen and the camera eases in */
.view { position: absolute; inset: 0; transition: right 1.6s var(--ease-cam), bottom 1.6s var(--ease-cam); }
.mx.open .view { right: calc(var(--panel-w) + var(--gut) - var(--bleed)); }
.cam {
  position: absolute; inset: 0; transform: scale(1); transition: transform 2.8s var(--ease-cam); will-change: transform;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--bleed)); mask-image: linear-gradient(to left, transparent 0, #000 var(--bleed));
}
.cam.push { transform: scale(1.07); }
.rig { position: absolute; inset: 0; transition: opacity 0.45s ease; }
.rig.dim { opacity: 0; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#loop { opacity: 0; transition: opacity 0.8s ease; }
#loop.on { opacity: 1; }
/* fixed, so the vignette and the top and bottom shading run across the whole screen, over the sharp view and the
   blurred backdrop alike; no seam where one meets the other */
.shade {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(85% 95% at var(--cx, 40%) 52%, transparent 45%, rgba(0, 0, 0, 0.5)),
    linear-gradient(to bottom, rgba(6, 5, 4, 0.62), rgba(6, 5, 4, 0) 24%),
    linear-gradient(to top, rgba(6, 5, 4, 0.6), rgba(6, 5, 4, 0) 30%);
}

/* the dish on the arch: a photo from Berkeh's kitchen beside the table */
.show {
  position: absolute; z-index: 3; margin: 0;
  left: var(--gut); bottom: 88px; width: clamp(180px, 16.5vw, 268px);
  transition: opacity 0.6s ease, transform 0.9s var(--ease-cam);
}
.mx:not(.open) .show, .show.off { opacity: 0; transform: translateY(18px); pointer-events: none; }
.mx.open .show { transition-delay: 0s; }
.arch {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1a140f;
  border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px;
  box-shadow: 0 0 0 1px rgba(241, 220, 170, 0.5), 0 0 0 7px rgba(11, 9, 7, 0.42), 0 34px 60px rgba(0, 0, 0, 0.55);
}
.arch::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(241, 220, 170, 0.55); border-radius: 50% 50% 9px 9px / 40% 40% 9px 9px;
}
.arch img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity 0.7s ease, transform 1.4s var(--ease-cam);
}
.arch img.on { opacity: 1; transform: scale(1); }
.show figcaption {
  margin: 12px auto 0; width: max-content; max-width: 100%; text-align: center;
  padding: 8px 16px 9px; border-radius: 14px;
  background: rgba(10, 8, 6, 0.66); border: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; line-height: 1.45;
}
.show-kick { color: var(--gold); font-size: 11.5px; font-weight: 700; }
.show figcaption b { font-size: 16.5px; font-weight: 900; }
.show-price { color: var(--gold-hi); font-size: 13px; }
.show-close { display: none; }

.catnav {
  position: absolute; z-index: 3; bottom: 34px; left: var(--cx, calc(50% - var(--bleed) / 2)); translate: -50% 0;
  display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(10, 8, 6, 0.66);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 0.6s 0.9s ease;
}
.mx:not(.open) .catnav, .mx:not(.open) .keys-hint { opacity: 0; transition-delay: 0s; }
.catnav button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.06);
  display: grid; place-items: center; cursor: pointer; color: var(--cream); transition: background-color 0.2s, opacity 0.2s;
}
.catnav button:hover { background: rgba(215, 180, 108, 0.2); }
.catnav button:disabled { opacity: 0.3; cursor: default; }
.catnav button svg { width: 18px; height: 18px; stroke-width: 2; }
.catnav-label { min-width: 132px; display: flex; flex-direction: column; align-items: center; line-height: 1.35; padding: 0 6px; }
.catnav-label b { font-size: 14px; }
.catnav-label small { font-size: 11px; color: var(--muted); }
.keys-hint {
  position: absolute; z-index: 3; bottom: 10px; left: var(--cx, calc(50% - var(--bleed) / 2)); translate: -50% 0; margin: 0;
  font-size: 11.5px; color: var(--faint); white-space: nowrap; transition: opacity 0.6s 1.1s ease;
}
.keys-hint kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-inline-end: 3px; padding: 0 4px;
  border-radius: 5px; border: 1px solid var(--line-soft); font: 11px/1 "Vazirmatn", sans-serif; color: var(--muted);
}
.view .simple-toggle { position: absolute; z-index: 3; left: var(--gut); bottom: 26px; }

/* ================================================================ the ivory menu */
.book {
  position: absolute; z-index: 4;
  top: calc(var(--bar-h) + 2px); bottom: var(--gut); right: var(--gut); width: var(--panel-w);
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform-origin: 100% 50%;
  transform: perspective(1800px) translate3d(40px, 26px, 0) rotateY(-16deg);
  transition: opacity 0.8s 0.3s ease, transform 1.5s 0.25s var(--ease-cam);
}
.mx.open .book { opacity: 1; transform: none; }

.book-top { position: relative; z-index: 7; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.table-pick { position: relative; }
.table-btn b { font-weight: 900; }
.table-btn .sep { color: var(--faint); }
.table-btn #tableMeta { color: var(--muted); font-weight: 500; }
.table-btn .caret { width: 16px; height: 16px; transition: transform 0.25s; }
.table-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.table-list {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(330px, calc(100vw - 32px)); max-height: min(440px, 62vh); overflow-y: auto;
  list-style: none; margin: 0; padding: 6px; border-radius: 16px;
  background: rgba(16, 12, 9, 0.97); border: 1px solid var(--line); box-shadow: var(--shadow);
  scrollbar-width: thin; scrollbar-color: rgba(215, 180, 108, 0.3) transparent;
}
.table-list button {
  width: 100%; display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center;
  padding: 6px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: start; line-height: 1.5;
}
.table-list button:hover, .table-list button:focus-visible { background: rgba(215, 180, 108, 0.1); outline: none; }
.table-list button[aria-selected="true"] { background: rgba(215, 180, 108, 0.16); }
.table-list img { width: 70px; height: 44px; object-fit: cover; border-radius: 8px; }
.table-list b { display: block; font-size: 14px; }
.table-list small { font-size: 12px; color: var(--muted); }
.table-list .tick { width: 18px; height: 18px; color: var(--gold); opacity: 0; }
.table-list button[aria-selected="true"] .tick { opacity: 1; }

.paper {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; color: var(--p-ink);
  background: var(--paper-bg);
  box-shadow: 0 50px 100px -24px rgba(0, 0, 0, 0.7), 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* a printed double rule with diamond corners, like the menu card itself */
.paper::before {
  content: ""; position: absolute; inset: 5px; z-index: 5; pointer-events: none;
  border: 20px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='none' stroke='%239a7436'%3E%3Cpath stroke-opacity='.5' d='M8.5 15v30M15 8.5h30M51.5 15v30M15 51.5h30'/%3E%3Cpath stroke-opacity='.32' d='M12.5 20v20M20 12.5h20M47.5 20v20M20 47.5h20M12.5 20a7.5 7.5 0 0 0 7.5-7.5M40 12.5a7.5 7.5 0 0 0 7.5 7.5M47.5 40a7.5 7.5 0 0 0-7.5 7.5M20 47.5a7.5 7.5 0 0 0-7.5-7.5'/%3E%3Cg fill='%239a7436' fill-opacity='.55' stroke='none'%3E%3Cpath d='M8.5 4l4.5 4.5-4.5 4.5L4 8.5zM51.5 4l4.5 4.5-4.5 4.5-4.5-4.5zM8.5 47l4.5 4.5-4.5 4.5L4 51.5zM51.5 47l4.5 4.5-4.5 4.5-4.5-4.5z'/%3E%3C/g%3E%3C/svg%3E") 20 / 20px stretch;
}
.paper-head {
  position: relative; text-align: center; padding: 30px 34px 0;
}
/* a faint eight-pointed star lattice behind the title, fading down */
.paper-head::before {
  content: ""; position: absolute; inset: 0 0 30% 0; pointer-events: none; opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' stroke='%239a7436' stroke-opacity='.16'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h8M48 28h8M28 0v8M28 48v8'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.paper-head h1 {
  position: relative; margin: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(28px, 2.5vw, 36px); font-weight: 900; line-height: 1.35; color: var(--p-ink);
}
.orn { position: relative; display: inline-block; width: 56px; height: 1px; margin: 0 16px; }
.orn:first-child { background: linear-gradient(to right, var(--p-brass), transparent); }
.orn:last-child { background: linear-gradient(to left, var(--p-brass), transparent); }
.orn i { position: absolute; top: -3px; width: 7px; height: 7px; background: var(--p-brass); transform: rotate(45deg); }
.orn:first-child i { left: -3px; }
.orn:last-child i { right: -3px; }
.paper-sub { position: relative; margin: 2px 0 12px; font-size: 13px; color: var(--p-muted); }

.tabs-wrap { position: relative; margin: 0 -10px; border-bottom: 1px solid var(--p-rule); }
.tabs { position: relative; display: flex; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 10px 12px 13px; font: 700 15px/1.5 "Vazirmatn", sans-serif; color: var(--p-muted);
  transition: color 0.25s;
}
.tab:hover { color: var(--p-ink-2); }
.tab[aria-selected="true"] { color: var(--p-ink); }
.tab:focus-visible { outline-color: var(--p-brass); outline-offset: -4px; border-radius: 10px; }
.ink {
  position: absolute; bottom: 0; left: 0; width: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #b88a3e, #d9b56a, #b88a3e);
  transition: left 0.45s var(--ease-cam), width 0.45s var(--ease-cam);
}

.pages { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.page {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 34px 30px;
  scrollbar-width: thin; scrollbar-color: rgba(154, 116, 54, 0.35) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
}
.page:focus-visible { outline: none; }

.sec { margin-top: 20px; }
.sec:first-child { margin-top: 10px; }
.sec-head { display: flex; align-items: baseline; gap: 10px; }
.sec-head h2 { margin: 0; font-size: 18.5px; font-weight: 900; line-height: 1.5; color: var(--p-red); }
.sec-head .sub { font-size: 12.5px; color: var(--p-muted); }
.cols { margin-inline-start: auto; margin-inline-end: 50px; display: flex; }
.cols span { width: 68px; text-align: center; font-size: 11.5px; color: var(--p-muted); }
.sec-note {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 6px 12px;
  border-radius: 10px; background: rgba(154, 116, 54, 0.09); font-size: 12.8px; color: var(--p-ink-2);
}
.sec-note svg { width: 16px; height: 16px; color: var(--p-brass); flex: none; }
.sec-foot { margin: 8px 0 0; font-size: 12.5px; color: var(--p-muted); }

.dish {
  position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 14px;
  margin: 0 -10px; padding: 12px 10px; border-radius: 14px;
  border-bottom: 1px dashed rgba(92, 64, 30, 0.17);
  transition: background-color 0.2s;
}
.dish:last-child { border-bottom-color: transparent; }
.dish:hover, .dish:focus-within { background: rgba(255, 255, 255, 0.5); }
.no-thumbs .dish { grid-template-columns: 1fr auto auto; padding-block: 10px; }
.thumb {
  position: relative; width: 64px; height: 64px; flex: none; padding: 0; border: 0; border-radius: 50%; overflow: hidden;
  background: var(--paper-2); cursor: pointer;
  box-shadow: 0 0 0 3px #fffaf0, 0 0 0 4px rgba(154, 116, 54, 0.38), 0 9px 16px -6px rgba(60, 30, 10, 0.45);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-cam); }
.dish:hover .thumb img { transform: scale(1.1); }
.thumb.blank { display: grid; place-items: center; cursor: default; background: radial-gradient(circle, #f4eadb, #e9dbc1); }
.thumb.blank svg { width: 30px; height: 30px; color: var(--p-brass); opacity: 0.55; stroke-width: 1.2; }
.dish.shown .thumb { box-shadow: 0 0 0 3px #fffaf0, 0 0 0 5px #c9a256, 0 9px 16px -6px rgba(60, 30, 10, 0.45); }
.dbody { min-width: 0; }
.dname { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 16.5px; font-weight: 800; line-height: 1.55; }
.tag { font-size: 11px; font-weight: 700; line-height: 1.8; padding: 0 8px; border-radius: 999px; color: #7b5a24; background: rgba(154, 116, 54, 0.15); }
.cam-ico {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(154, 116, 54, 0.14); color: #7b5a24; cursor: pointer;
}
.cam-ico svg { width: 15px; height: 15px; }
.ddesc { margin-top: 1px; font-size: 12.8px; line-height: 1.75; color: var(--p-muted); }
.price { display: flex; color: var(--p-red); font-weight: 800; font-size: 17px; line-height: 1.2; white-space: nowrap; }
.price .p { min-width: 68px; display: flex; flex-direction: column; align-items: center; }
.price .p small { margin-top: 4px; font-size: 10.5px; font-weight: 500; color: var(--p-muted); }
.price .p .lbl { order: -1; margin: 0 0 4px; font-size: 11px; }
.price .none { color: var(--p-muted); font-weight: 500; }
.add {
  position: relative; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #6c4c1b;
  border: 1px solid rgba(154, 116, 54, 0.55); background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(154, 116, 54, 0.12));
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.add:hover { border-color: transparent; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 7px 14px -5px rgba(120, 80, 20, 0.55); }
.add:active { transform: scale(0.94); }
.add svg { width: 18px; height: 18px; stroke-width: 2.2; }
.add-space { width: 36px; }
.n {
  position: absolute; top: -6px; left: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; background: var(--p-red); color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--paper);
}
.pop { animation: pop 0.38s ease; }
@keyframes pop { 40% { transform: scale(1.2); } }

.choose { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 10px; }
.choose button {
  border: 1px solid rgba(154, 116, 54, 0.5); background: #fffaf0; border-radius: 999px; cursor: pointer;
  padding: 7px 14px; font: 700 13.5px/1.3 "Vazirmatn", sans-serif; color: var(--p-ink);
}
.choose button:hover { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; }
.choose b { color: var(--p-red); margin-inline-start: 6px; }

.hookah-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 8px 0 14px; padding: 14px 18px; border-radius: 16px;
  background: rgba(154, 116, 54, 0.1); border: 1px solid rgba(154, 116, 54, 0.24);
}
.hookah-head h2 { margin: 0; font-size: 19px; font-weight: 900; color: var(--p-red); }
.hookah-head p { margin: 2px 0 0; font-size: 12.8px; color: var(--p-muted); }
.hookah-head .p { display: flex; flex-direction: column; align-items: center; color: var(--p-red); font-size: 24px; font-weight: 900; line-height: 1.1; }
.hookah-head .p small { font-size: 11px; font-weight: 500; color: var(--p-muted); margin-top: 4px; }
.flavors { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.flavor {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--p-rule); background: rgba(255, 255, 255, 0.42);
  font: 700 14px/1.5 "Vazirmatn", sans-serif; color: var(--p-ink); cursor: pointer; text-align: start;
  transition: background-color 0.2s, border-color 0.2s;
}
.flavor:hover { background: #fffaf0; border-color: rgba(154, 116, 54, 0.55); }
.flavor svg { width: 16px; height: 16px; color: var(--p-brass); stroke-width: 2.2; flex: none; }

.paper-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 32px 24px; border-top: 1px solid var(--p-rule);
}
.tax { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--p-muted); }
.tax svg { width: 17px; height: 17px; flex: none; }
.picks-btn { flex: none; min-height: 48px; padding: 0 22px; }
.picks-sum { padding: 4px 10px; border-radius: 999px; background: rgba(27, 19, 7, 0.13); font-size: 13px; }

/* the running list */
.picks {
  position: absolute; inset: auto 0 0 0; z-index: 6; max-height: 84%;
  display: flex; flex-direction: column; padding: 18px 28px 24px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(154, 116, 54, 0.35) transparent;
  background: var(--paper-bg); border-top: 1px solid rgba(154, 116, 54, 0.38); border-radius: 22px 22px 0 0;
  box-shadow: 0 -26px 50px -14px rgba(60, 30, 10, 0.4);
  transform: translateY(104%); visibility: hidden;
  transition: transform 0.5s var(--ease-cam), visibility 0s 0.5s;
}
.picks.on { transform: none; visibility: visible; transition: transform 0.5s var(--ease-cam); }
.picks-head { display: flex; align-items: center; justify-content: space-between; flex: none; }
.picks-head h2 { margin: 0; font-size: 20px; font-weight: 900; }
.picks-head h2:focus { outline: none; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--p-rule); background: rgba(255, 255, 255, 0.4); color: var(--p-ink);
}
.icon-btn svg { width: 18px; height: 18px; }
.picks-list { list-style: none; margin: 8px 0 0; padding: 0; flex: none; }
.picks-list li { display: grid; grid-template-columns: 1fr auto 76px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--p-rule); }
.picks-list .nm { font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.picks-list .nm small { display: block; font-size: 12px; font-weight: 500; color: var(--p-muted); }
.picks-list .lt { text-align: left; color: var(--p-red); font-weight: 800; font-size: 14.5px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid rgba(154, 116, 54, 0.45); border-radius: 999px; background: rgba(255, 255, 255, 0.45); }
.stepper button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--p-ink); border-radius: 50%; }
.stepper button:hover { background: rgba(154, 116, 54, 0.15); }
.stepper button:disabled { opacity: 0.35; cursor: default; }
.stepper output { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; }
.picks-empty { margin: 14px 0 6px; font-size: 14px; line-height: 1.9; color: var(--p-muted); text-align: center; }
.picks-total { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 12px 0 0; font-size: 14px; }
.picks-total dt { color: var(--p-muted); }
.picks-total dd { margin: 0; text-align: left; font-weight: 700; }
.picks-total .grand { border-top: 1px solid var(--p-rule); margin-top: 6px; padding-top: 6px; font-size: 17px; font-weight: 900; }
.picks-total dt.grand { color: var(--p-ink); }
.picks-total dd.grand { color: var(--p-red); }
.share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 9px 14px;
  border-radius: 12px; background: rgba(154, 116, 54, 0.1); font-size: 14px;
}
.share b { margin-inline-start: auto; color: var(--p-red); font-size: 16px; font-weight: 900; }
.picks-note { margin: 10px 0 14px; font-size: 12.2px; line-height: 1.8; color: var(--p-muted); }
.picks-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-line { background: transparent; color: var(--p-ink); box-shadow: inset 0 0 0 1px rgba(92, 64, 30, 0.35); }
.btn-line:hover { background: rgba(154, 116, 54, 0.1); }

.loader {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
  background: var(--ink); color: var(--muted); font-size: 14px;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.mx.ready .loader { opacity: 0; visibility: hidden; }

/* phones: a dish photo opens full screen */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background: rgba(5, 4, 3, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade 0.3s ease;
}
.lightbox figure { margin: 0; width: min(80vw, 400px); }
.lightbox .arch img { opacity: 1; transform: none; }
.lightbox figcaption { margin-top: 14px; text-align: center; display: flex; flex-direction: column; line-height: 1.5; }
.lightbox figcaption b { font-size: 19px; font-weight: 900; }
.lightbox figcaption span { color: var(--gold-hi); font-size: 14px; }
.lightbox .icon-btn { position: absolute; top: 16px; left: 16px; color: var(--cream); border-color: var(--line); background: rgba(10, 8, 6, 0.6); }
@keyframes fade { from { opacity: 0; } }

/* ================================================================ the simple menu */
html[data-view="simple"] .menu-page { background: var(--paper); }
.simple { min-height: 100vh; padding-top: var(--bar-h); color: var(--p-ink); background: var(--paper-bg); background-attachment: fixed; }
.simple-in { max-width: 780px; margin: 0 auto; padding: 30px 20px 70px; }
.simple-head .kicker { color: var(--p-brass); }
.simple-head h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); font-weight: 900; line-height: 1.35; }
.simple-lede { margin: 4px 0 0; font-size: 14.5px; color: var(--p-muted); }
.search {
  display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 0 16px; min-height: 52px;
  border-radius: 14px; background: #fffaf0; border: 1px solid rgba(154, 116, 54, 0.4);
  box-shadow: 0 8px 18px -12px rgba(60, 30, 10, 0.45); transition: border-color 0.2s, box-shadow 0.2s;
}
.search:focus-within { border-color: var(--p-brass); box-shadow: 0 0 0 3px rgba(154, 116, 54, 0.2); }
.search svg { width: 20px; height: 20px; color: var(--p-muted); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--p-ink); }
.search input::placeholder { color: #a8957c; }
.simple-cats {
  position: sticky; top: var(--bar-h); z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 16px -20px 0; padding: 12px 20px;
  background: rgba(246, 238, 224, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--p-rule);
}
.simple-cats::-webkit-scrollbar { display: none; }
.simple-cats a {
  flex: none; padding: 6px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--p-ink-2); border: 1px solid var(--p-rule); background: rgba(255, 255, 255, 0.45);
  transition: background-color 0.2s, color 0.2s;
}
.simple-cats a.on { background: var(--p-ink); color: var(--paper); border-color: transparent; }
.scat { padding-top: 28px; scroll-margin-top: calc(var(--bar-h) + 62px); }
.scat > h2 { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 24px; font-weight: 900; }
.scat > h2::after { content: ""; flex: 1; height: 1px; background: var(--p-rule); }
.ssec h3 { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 2px; font-size: 16px; font-weight: 900; color: var(--p-red); }
.ssec h3 small { font-size: 12px; font-weight: 500; color: var(--p-muted); }
.scols { margin-inline-start: auto; display: flex; }
.scols span { width: 64px; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--p-muted); }
.ssec-note { margin: 2px 0 4px; font-size: 12.8px; color: var(--p-ink-2); }
.srow { padding: 9px 0; border-bottom: 1px dashed var(--p-rule); }
.sline { display: flex; align-items: baseline; gap: 10px; }
.sn { font-size: 15.5px; font-weight: 700; }
.sn .tag { margin-inline-start: 6px; vertical-align: 2px; }
.lead { flex: 1; min-width: 16px; border-bottom: 1px dotted rgba(92, 64, 30, 0.35); transform: translateY(-5px); }
.sp { display: flex; font-size: 16px; font-weight: 800; color: var(--p-red); white-space: nowrap; }
.sp span { min-width: 64px; text-align: center; }
.sp .none { color: var(--p-muted); font-weight: 500; }
.sp .opt small { font-size: 11.5px; color: var(--p-muted); font-weight: 500; margin-inline-end: 4px; }
.sd { margin-top: 1px; font-size: 12.8px; line-height: 1.75; color: var(--p-muted); }
.simple-empty { margin: 30px 0; text-align: center; color: var(--p-muted); }
.simple-fine { margin: 28px 0 0; font-size: 12.5px; color: var(--p-muted); }
.simple .back-3d { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
html[data-view="simple"] .bar { background: rgba(9, 7, 5, 0.94); border-bottom: 1px solid var(--line-soft); }
.noscript { position: fixed; inset: auto 16px 16px; z-index: 99; padding: 12px 16px; border-radius: 12px; background: #3c1812; color: var(--cream); text-align: center; }

/* ================================================================ tablets and phones */
@media (max-width: 1180px) and (min-width: 921px) {
  .menu-page { --panel-w: clamp(420px, 46vw, 520px); }
  .page { padding-inline: 26px; }
  .paper-head { padding-inline: 26px; }
  .paper-foot { padding-inline: 24px; }
  .show { width: 190px; }
  .dish { column-gap: 10px; }
  .thumb { width: 54px; height: 54px; }
  .price .p { min-width: 56px; }
  .cols { margin-inline-end: 46px; }
  .cols span { width: 56px; }
}
@media (max-width: 920px) {
  .menu-page { --bleed: 0px; --view-h: 42svh; }
  .mx.open .view { right: 0; bottom: calc(100% - var(--view-h)); }
  .cam { -webkit-mask-image: none; mask-image: none; }
  .shade { background: linear-gradient(to bottom, rgba(6, 5, 4, 0.6), rgba(6, 5, 4, 0) 34%), linear-gradient(to top, rgba(6, 5, 4, 0.55), rgba(6, 5, 4, 0) 40%); }
  .show, .catnav, .keys-hint { display: none; }
  .view .simple-toggle { left: 12px; bottom: 42px; min-height: 36px; padding: 0 13px; font-size: 13px; }
  .book {
    top: calc(var(--view-h) - 28px); right: 0; left: 0; bottom: 0; width: auto; gap: 0;
    transform-origin: 50% 100%; transform: translate3d(0, 30%, 0);
  }
  .book-top { position: absolute; top: calc(var(--bar-h) + 36px - var(--view-h)); right: 12px; left: 12px; }
  .book-top .pill { min-height: 36px; padding: 0 13px; font-size: 13px; }
  .paper { border-radius: 22px 22px 0 0; }
  .paper::before { inset: 4px 4px 0; border-bottom-width: 0; }
  .paper-head { padding: 20px 18px 0; }
  .paper-head h1 { font-size: 25px; }
  .orn { width: 34px; margin: 0 12px; }
  .paper-sub { margin-bottom: 6px; font-size: 12px; }
  .tabs-wrap { margin: 0 -6px; }
  .tabs { justify-content: flex-start; }
  .tab { padding: 8px 11px 11px; font-size: 14.5px; }
  .page { padding: 4px 18px 26px; }
  .dish { column-gap: 12px; margin: 0 -8px; padding: 11px 8px; }
  .thumb { width: 56px; height: 56px; }
  .dname { font-size: 15.5px; }
  .ddesc { font-size: 12.3px; }
  .price { font-size: 16px; }
  .price .p { min-width: 54px; }
  .cols { margin-inline-end: 48px; }
  .cols span { width: 54px; }
  .add { width: 34px; height: 34px; }
  .add-space { width: 34px; }
  .paper-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
  .tax { font-size: 11.5px; }
  .picks-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .picks { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 90%; }
  .simple .back-3d { left: 12px; }
}
@media (max-width: 420px) {
  .tax span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .picks-btn.has-sum > span:first-of-type { display: none; }
}
@media (hover: none) { .keys-hint { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-view="simple"] { scroll-behavior: smooth; }
}