/* The guest's page of a menu (written by the Worker) and the builder's preview of it.
   Always light, like a card. Readable in the sun: near-black on white, nothing lighter than --muted for text that matters.
   Logical properties only (inline-start/end): the same rules serve a right-to-left menu. */
.menu-page {
  max-width: 40rem;
  min-height: 100vh;
  margin-inline: auto;
  background: #fff;
  color: #0d0f15;
  font-size: 1.0625rem;
  overflow-wrap: anywhere; /* a word longer than the phone is wide breaks, in every text of the restaurant's */
}

.m-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 16rem;
  object-fit: cover;
}

.m-head {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem 1rem 1rem;
}

.m-brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.m-logo {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  object-fit: contain;
  background: #fff;
}

/* (.m-name, .m-cat-name and .m-dish-name: the same three, where the menu is a picture of one and must not be headings: the page that presents the menu) */
.m-head h1,
.m-name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.m-line,
.m-facts {
  margin: 0;
  color: #3d4252;
}

.m-facts {
  display: grid;
  gap: 0.125rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  white-space: pre-line; /* the opening hours keep the owner's line breaks */
}

.m-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.m-actions .btn {
  min-height: 2.75rem;
}

/* The categories, one tap away wherever the guest is: it stays at the top while the page scrolls */
.m-nav {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  overflow-x: auto;
  border-block: 1px solid var(--line);
  background: #fff;
  scrollbar-width: none;
  contain: inline-size; /* the row scrolls: its length must never widen what holds the page (the phone of a preview) */
}

.m-nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: #eef0f5;
  color: #0d0f15;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.m-cat {
  padding: 1.5rem 1rem 0;
  scroll-margin-top: 4.25rem;
}

.m-cat h2,
.m-cat-name {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.m-dishes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-dish {
  display: flex;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
}

.m-text {
  flex: 1;
  min-width: 0;
}

.m-top {
  display: flex;
  flex-wrap: wrap; /* a long price ("Market price") goes under the name, which keeps its width */
  align-items: baseline;
  justify-content: space-between;
  gap: 0 0.75rem;
}

.m-top h3,
.m-top .m-dish-name {
  flex: 1 1 9rem;
}

.m-dish h3,
.m-dish-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.m-price {
  flex: none;
  margin-inline-start: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.m-desc {
  margin: 0.125rem 0 0;
  color: #3d4252;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.m-sizes {
  display: grid;
  gap: 0.125rem;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
}

.m-sizes li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.m-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
}

.m-marks li {
  padding: 0.0625rem 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.m-marks [data-mark="veg"],
.m-marks [data-mark="vegan"] {
  color: #0c6b35;
}

.m-marks [data-mark="spicy"] {
  color: #b3261a;
}

.m-marks [data-mark="new"] {
  color: #2450e6;
}

.m-photo {
  flex: none;
  align-self: start;
}

.m-photo img {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.875rem;
  object-fit: cover;
  background: #eef0f5;
}

/* Not available today: still on the menu, plainly marked, and quieter */
.m-dish.is-off h3,
.m-dish.is-off .m-dish-name,
.m-dish.is-off .m-price,
.m-dish.is-off .m-sizes {
  color: #6b7080;
  text-decoration: line-through;
}

.m-dish.is-off .m-photo {
  opacity: 0.45;
}

.m-off {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: #fdf0d8;
  color: #8a4d00;
  font-size: 0.8125rem;
  font-weight: 700;
}

.m-foot {
  display: grid;
  gap: 0.5rem;
  padding: 2rem 1rem max(2rem, env(safe-area-inset-bottom));
  color: #5b6172;
  font-size: 0.875rem;
  text-align: center;
}

.m-foot a {
  color: inherit;
}

/* "Report this page": the form of a card's page (report.css), under the menu */
.m-foot .report-form {
  max-width: 24rem;
  margin-inline: auto;
}

/* In the phone of the builder's preview and of the page that presents the menu: the same page, a little smaller */
.phone-screen .menu-page {
  min-height: 100%;
  font-size: 0.9375rem;
}

/* ---- The looks of a menu. A look is a class on .menu-page (LOOKS in menu-rules.js), the owner's colour a second
   one (ACCENTS), and .has-tint a third when the owner picked colours of their own. Plain is what the page was: with no class at all nothing changes. No typeface is
   fetched for any of them: the carte uses the serif each phone already has. ---- */
.menu-page { --m-paper: #fff; --m-ink: #0d0f15; --m-soft: #3d4252; --m-rule: var(--line); --m-accent: var(--m-ink); --m-quiet: #6b7080; --m-card: #fff; --m-chip: #eef0f5; --m-on-accent: #fff; }

/* what every look but plain shares: its paper, its ink */
.menu-page:is(.look-carte, .look-board, .look-fresh) { background: var(--m-paper); color: var(--m-ink); }
.menu-page:is(.look-carte, .look-board, .look-fresh) :is(.m-line, .m-facts, .m-desc) { color: var(--m-soft); }
.menu-page:is(.look-carte, .look-board, .look-fresh) .m-nav { background: var(--m-paper); border-color: var(--m-rule); }
.menu-page:is(.look-carte, .look-board, .look-fresh) .m-dish { border-color: var(--m-rule); }
.menu-page:is(.look-carte, .look-board, .look-fresh) .m-dish.is-off :is(h3, .m-dish-name, .m-price, .m-sizes) { color: var(--m-quiet); }
.menu-page:is(.look-carte, .look-board, .look-fresh) .m-foot { color: var(--m-soft); }
/* in every look the accent is the colour of the category titles; plain with no accent stays ink */
.menu-page .m-cat :is(h2, .m-cat-name) { color: var(--m-accent); }
/* The same for the four later looks, and for a page that wears its owner's own colours (.has-tint, on any look, plain
   too: its nine variables come from a small stylesheet the Worker writes, menuTint in src/menus.js). Written with
   :where, so each look's own rules, further down, win. Here the chips, the buttons and the picture's ground follow the
   colours too: nothing stays white on a dark paper. */
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) { background: var(--m-paper); color: var(--m-ink); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) :is(.m-line, .m-facts, .m-desc) { color: var(--m-soft); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-nav { background: var(--m-paper); border-color: var(--m-rule); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-nav a { background: var(--m-chip); color: var(--m-ink); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-dish { border-color: var(--m-rule); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-dish.is-off :is(h3, .m-dish-name, .m-price, .m-sizes) { color: var(--m-quiet); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-foot { color: var(--m-soft); }
/* "Report this page" once opened: its question and its answer line in the menu's colours, not the site's ink (report.css) */
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .report-form { color: var(--m-ink); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .report-form .help { color: var(--m-soft); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-actions .btn { border-color: var(--m-ink); background: none; color: var(--m-ink); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-photo img { background: var(--m-chip); }
.menu-page:where(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-logo { border-color: var(--m-rule); }
/* green, red and blue marks cannot be read on a dark paper, nor on any paper an owner may pick: there they are in the ink */
.menu-page:is(.look-night, .has-tint) .m-marks li { color: var(--m-ink); }

/* ---------- Carte: a restaurant's printed carte. Cream paper, serif, centred, dotted leaders ---------- */
.look-carte { --m-paper: #fbf5e9; --m-ink: #2a1d14; --m-soft: #5c4a3c; --m-rule: #e3d6c0; --m-quiet: #6f6257; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; }
.look-carte .m-head { justify-items: center; padding-top: 1.75rem; text-align: center; }
.look-carte .m-brand { flex-direction: column; }
.look-carte :is(.m-head h1, .m-name) { font: 700 2rem/1.15 var(--serif); letter-spacing: 0; }
/* a small diamond under the name */
.look-carte :is(.m-head h1, .m-name)::after { content: ""; display: block; width: 0; height: 0; margin: 0.875rem auto 0.25rem; border: 0.25rem solid var(--m-accent); rotate: 45deg; }
.look-carte .m-line { font: italic 400 1.0625rem/1.4 var(--serif); }
.look-carte .m-facts { font-family: var(--serif); font-size: 1rem; }
.look-carte .m-actions { justify-content: center; }
.look-carte .m-actions .btn { border-color: var(--m-ink); background: none; color: var(--m-ink); }
.look-carte .m-nav { gap: 0; padding-block: 0.25rem; }
.look-carte .m-nav a { border-radius: 0; background: none; color: var(--m-ink); font: 700 1rem var(--serif); padding: 0 0.75rem; }
.look-carte .m-cat { padding-top: 2rem; }
.look-carte .m-cat :is(h2, .m-cat-name) { display: flex; align-items: center; gap: 0.75rem; font: 700 1.375rem var(--serif); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.look-carte .m-cat :is(h2, .m-cat-name)::before, .look-carte .m-cat :is(h2, .m-cat-name)::after { content: ""; flex: 1; min-width: 1rem; border-top: 1px solid currentColor; opacity: 0.55; }
.look-carte .m-dish { border-bottom: 0; padding: 0.75rem 0 0.25rem; }
.look-carte :is(.m-dish h3, .m-dish-name) { flex: 0 1 auto; font: 700 1.125rem/1.3 var(--serif); }
.look-carte .m-top { gap: 0 0.5rem; }
/* the dotted line that leads the eye from a dish to its price. The row wraps as the plain page's does: a name too long
   for one line keeps the whole width, and the dotted line and the price follow on the line under it; so does a price in words.
   The line is drawn only where it has 3.5rem to run (the width of its picture is all or nothing): a few dots lost between
   a name and a price that went under it would lead nowhere. It is a background, so it is asked to print */
.look-carte .m-top::after { content: ""; order: 1; flex: 1 1 0; min-width: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--m-soft) 0 2px, transparent 2px 6px) no-repeat 50% / clamp(0px, (100% - 3.5rem) * 999, 100%) 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; translate: 0 -0.3em; }
.look-carte .m-top:not(:has(.m-price))::after { display: none; }
.look-carte .m-price { order: 2; font: 700 1.0625rem var(--serif); }
.look-carte .m-desc { font: italic 400 1rem/1.4 var(--serif); }
.look-carte .m-sizes li { font-family: var(--serif); }
/* the sizes of a dish have the same dotted line to their prices */
.look-carte .m-sizes li > span:first-child { display: flex; flex: 1; align-items: baseline; gap: 0.5rem; }
.look-carte .m-sizes li > span:first-child::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--m-soft) 0 2px, transparent 2px 6px); -webkit-print-color-adjust: exact; print-color-adjust: exact; translate: 0 -0.3em; }
.look-carte .m-sizes li { gap: 0.5rem; }
/* what a dish is marked as, in the carte's own letters */
.look-carte :is(.m-marks li, .m-off) { font-family: var(--serif); font-style: italic; }
.look-carte .m-photo img { width: 5rem; height: 5rem; border-radius: 0.25rem; outline: 1px solid var(--m-rule); outline-offset: 3px; }
.look-carte .m-photo { padding: 4px; }
.look-carte .m-cover { max-height: 13rem; }
.look-carte .m-logo { border-radius: 50%; border-color: var(--m-rule); }

/* ---------- Board: a coffee shop's board. Warm white, tight rows, titles in a band, sizes side by side ---------- */
.look-board { --m-paper: #f4efe8; --m-ink: #2b211c; --m-soft: #5e5047; --m-rule: #d9cfc3; --m-quiet: #6f6257; --m-card: #fffdf9; }
.look-board .m-head { justify-items: center; text-align: center; }
.look-board .m-brand { flex-direction: column; }
.look-board :is(.m-head h1, .m-name) { font-size: 1.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.look-board .m-line { font-weight: 600; }
.look-board .m-actions { justify-content: center; }
.look-board .m-actions .btn { border-color: var(--m-ink); background: none; color: var(--m-ink); }
.look-board .m-nav { border-block: 2px solid var(--m-ink); }
.look-board .m-nav a { border-radius: 0.375rem; background: none; outline: 1.5px solid var(--m-rule); outline-offset: -1.5px; color: var(--m-ink); letter-spacing: 0.04em; }
.look-board .m-cat { padding-top: 1.75rem; }
.look-board .m-cat :is(h2, .m-cat-name) { padding: 0.5rem 0.875rem; border-radius: 0.375rem; background: var(--m-accent); color: var(--m-on-accent); font-size: 1.1875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.look-board .m-dish { align-items: center; padding: 0.625rem 0.125rem; border-bottom-style: dashed; }
.look-board .m-price { color: var(--m-accent); font-weight: 900; }
.look-board .m-photo { order: -1; }
.look-board .m-photo img { width: 3.75rem; height: 3.75rem; border-radius: 50%; }
/* Small 3 · Large 5: the sizes of a drink stand side by side, as on a board */
.look-board .m-sizes { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.look-board .m-sizes li { gap: 0.5rem; padding: 0.125rem 0.625rem; border: 1.5px solid var(--m-rule); border-radius: 0.375rem; background: var(--m-card); }
.look-board .m-logo { border-radius: 50%; border-color: var(--m-rule); }

/* ---------- Fresh: modern. A tinted page, each dish a white card, a larger photo, the price in the accent ---------- */
.look-fresh { --m-paper: #eef3f0; --m-ink: #10201a; --m-soft: #4a5552; --m-rule: #dbe4df; --m-quiet: #5f6672; }
.look-fresh :is(.m-head h1, .m-name) { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; }
.look-fresh .m-cover { width: calc(100% - 2rem); margin: 1rem 1rem 0; border-radius: 1.25rem; }
.look-fresh .m-actions .btn { border-color: transparent; background: var(--m-card); color: var(--m-ink); }
.look-fresh .m-nav { border-block-color: transparent; }
.look-fresh .m-nav a { background: var(--m-card); color: var(--m-ink); }
.look-fresh .m-cat :is(h2, .m-cat-name) { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }
.look-fresh .m-dishes { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.look-fresh .m-dish { padding: 0.75rem 0.875rem; border: 0; border-radius: 1.125rem; background: var(--m-card); }
.look-fresh .m-price { color: var(--m-accent); font-weight: 900; }
/* beside a larger photo the name keeps the price on its line a little longer */
.look-fresh .m-top :is(h3, .m-dish-name) { flex-basis: 6rem; }
.look-fresh .m-photo img { width: 6.5rem; height: 6.5rem; border-radius: 0.875rem; }
/* on the narrowest phones the photo gives way, so that a price stays on the line of its dish */
@media (max-width: 22.5rem) {
  .look-fresh .m-photo img { width: 5.5rem; height: 5.5rem; }
  .look-fresh .m-top :is(h3, .m-dish-name) { flex-basis: 4rem; }
}
/* "Not available today": on a tinted paper the pill keeps its shape */
.menu-page:is(.look-carte, .look-board, .look-fresh) .m-off { border: 1.5px solid currentColor; }
.menu-page:is(.look-night, .look-fine, .look-street, .look-photo, .has-tint) .m-off { border: 1.5px solid currentColor; }

/* ---------- Night: a bar, a lounge, a grill. Charcoal paper, cream letters, titles in small spaced capitals of the
   accent before a hairline, prices in the accent. Its named colours are light ones (NIGHT_ACCENT_HEX in menu-rules.js) ---------- */
.look-night { --m-paper: #15161a; --m-ink: #f3efe8; --m-soft: #b9b4ab; --m-rule: #2e3038; --m-quiet: #9a968f; --m-card: #1f2127; --m-chip: #25272e; --m-on-accent: #15161a; }
.look-night .m-head { gap: 0.625rem; padding-top: 1.75rem; }
.look-night :is(.m-head h1, .m-name) { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; }
.look-night .m-head::after { content: ""; width: 2.5rem; margin-top: 0.375rem; border-top: 2px solid var(--m-accent); }
.look-night .m-nav { border-block-color: transparent; }
.look-night .m-nav a { font-weight: 600; }
.look-night .m-cat { padding-top: 2rem; }
.look-night .m-cat :is(h2, .m-cat-name) { display: flex; align-items: center; gap: 0.875rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.look-night .m-cat :is(h2, .m-cat-name)::after { content: ""; flex: 1; min-width: 1rem; border-top: 1px solid var(--m-rule); }
.look-night .m-dish { padding: 1rem 0; }
.look-night .m-price { color: var(--m-accent); font-weight: 700; }
.look-night .m-photo img { border-radius: 0.75rem; }
/* on a wide screen the evening goes to the edges: the page around the menu is dark too */
body:has(> .menu-page.look-night:not(.has-tint)) { background: #0c0d10; }
.look-night.acc-terracotta { --m-accent: #f0a07c; }
.look-night.acc-burgundy { --m-accent: #f29bb0; }
.look-night.acc-forest { --m-accent: #86d3a4; }
.look-night.acc-teal { --m-accent: #7fd0dc; }
.look-night.acc-cobalt { --m-accent: #9db4ff; }
.look-night.acc-plum { --m-accent: #d3a6ea; }
.look-night.acc-coffee { --m-accent: #e3c08a; }

/* ---------- Fine (owners read "Elegant"): a fine table. Near-white, much room, everything centred, the name in light
   spaced capitals, hairlines, each dish stacked: its name, its description, its price ---------- */
.look-fine { --m-paper: #fdfcfa; --m-ink: #1d1c1a; --m-soft: #5d5a55; --m-rule: #e4e0d9; --m-quiet: #6f6b65; --m-chip: #f3f0ea; }
.look-fine .m-head { justify-items: center; gap: 0.75rem; padding: 2.5rem 1.5rem 1.75rem; text-align: center; }
.look-fine .m-brand { flex-direction: column; }
.look-fine :is(.m-head h1, .m-name) { font-size: 1.75rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; }
.look-fine .m-line { font-size: 0.9375rem; letter-spacing: 0.08em; }
.look-fine .m-actions { justify-content: center; }
.look-fine .m-actions .btn { border-width: 1px; border-radius: 0; font-weight: 500; letter-spacing: 0.06em; }
.look-fine .m-nav { gap: 0; }
.look-fine .m-nav a { padding: 0 0.875rem; border-radius: 0; background: none; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.look-fine .m-nav a:first-child { margin-inline-start: auto; } /* the row is centred while it fits, and scrolls from its start when it does not */
.look-fine .m-nav a:last-child { margin-inline-end: auto; }
.look-fine .m-cat { padding: 2.75rem 1.5rem 0; }
.look-fine .m-cat :is(h2, .m-cat-name) { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; }
.look-fine .m-cat :is(h2, .m-cat-name)::after { content: ""; display: block; width: 1.5rem; margin: 0.875rem auto 0; border-top: 1px solid currentColor; }
.look-fine .m-dish { flex-direction: column-reverse; align-items: center; gap: 0.75rem; padding: 1.25rem 0; border-bottom: 0; text-align: center; }
.look-fine .m-text { display: flex; flex: none; flex-direction: column; align-items: center; gap: 0.25rem; width: 100%; }
/* the name and its price give their row up: name, description, price, one under the other */
.look-fine .m-top { display: contents; }
.look-fine :is(.m-dish h3, .m-dish-name) { flex: none; font-weight: 600; letter-spacing: 0.04em; }
.look-fine .m-desc { order: 1; max-width: 22rem; margin: 0; }
.look-fine .m-price { order: 2; margin: 0.125rem 0 0; font-weight: 500; }
.look-fine .m-sizes { order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.125rem 1.25rem; margin: 0.125rem 0 0; }
.look-fine .m-sizes li { gap: 0.5rem; }
.look-fine .m-sizes .m-price { margin: 0; }
.look-fine .m-marks { order: 3; justify-content: center; }
.look-fine .m-marks li { border-width: 1px; font-weight: 500; }
.look-fine .m-off { order: 4; }
.look-fine .m-photo { align-self: center; }
.look-fine .m-photo img { width: 6rem; height: 6rem; border-radius: 50%; }
/* on a phone a little less room around each dish, and its name less spaced: the page stays elegant and shorter */
@media (max-width: 24rem) {
  .look-fine .m-dish { padding-block: 0.875rem; }
  .look-fine :is(.m-head h1, .m-name) { letter-spacing: 0.14em; }
}

/* ---------- Street: a snack bar, fast food. The name in big black capitals, the row of categories a black bar, each
   title a block of the accent across the page, dish names in heavy capitals, every price in a filled pill ---------- */
.look-street { --m-paper: #fffdf6; --m-ink: #121212; --m-soft: #46443f; --m-rule: #e6e1d4; --m-quiet: #6c6960; --m-chip: #efebde; }
.look-street .m-head { padding-top: 1.5rem; }
.look-street :is(.m-head h1, .m-name) { font-size: 2.375rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.look-street .m-line { color: var(--m-ink); font-weight: 700; }
.look-street .m-actions .btn { border-width: 2px; font-weight: 800; }
.look-street .m-nav { border-block: 0; background: var(--m-ink); }
.look-street .m-nav a { padding: 0 0.75rem; background: none; color: var(--m-paper); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.look-street .m-cat { padding-top: 0; }
.look-street .m-cat :is(h2, .m-cat-name) { margin: 1.5rem -1rem 0.25rem; padding: 0.75rem 1rem; background: var(--m-accent); color: var(--m-on-accent); font-size: 1.625rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; }
.look-street .m-dish { align-items: center; border-bottom-width: 2px; }
.look-street :is(.m-dish h3, .m-dish-name) { font-size: 1.1875rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.look-street .m-top { align-items: center; }
.look-street .m-top :is(h3, .m-dish-name) { flex-basis: 10rem; } /* a heavy word in capitals is wide ("ASSORTIMENT" is 8rem): on a narrow phone the price goes under the name sooner than a word is cut */
.look-street .m-price { padding: 0.125rem 0.625rem; border-radius: 0.5rem; background: var(--m-accent); color: var(--m-on-accent); font-size: 1.1875rem; font-weight: 900; }
.look-street .m-sizes { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; }
.look-street .m-sizes li { align-items: center; gap: 0.375rem; font-weight: 700; }
.look-street .m-sizes .m-price { font-size: 1rem; }
.look-street .m-dish.is-off .m-price { padding-inline: 0; background: none; }
.look-street .m-photo img { width: 6rem; height: 6rem; border-radius: 0.625rem; }
.look-street .m-marks li { border-width: 2px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }

/* ---------- Photo: for a place with good pictures. Each dish is a card with its picture across the top; a dish
   without one is a short card. Two columns where the page is wide enough ---------- */
.look-photo { --m-paper: #f5f4f1; --m-ink: #15171c; --m-soft: #4a4d57; --m-rule: #e2e0da; --m-quiet: #63666f; --m-chip: #fff; }
.look-photo :is(.m-head h1, .m-name) { font-size: 1.875rem; font-weight: 800; }
.look-photo .m-cover { max-height: 18rem; aspect-ratio: 4 / 3; }
.look-photo .m-nav { border-block-color: transparent; }
.look-photo .m-cat :is(h2, .m-cat-name) { font-size: 1.5rem; }
.look-photo .m-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.875rem; margin-top: 0.875rem; }
.look-photo .m-dish { flex-direction: column-reverse; justify-content: flex-end; gap: 0; padding: 0; border: 0; border-radius: 1.125rem; background: var(--m-card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); overflow: hidden; }
.look-photo .m-text { flex: none; padding: 0.75rem 0.875rem 0.875rem; }
.look-photo .m-photo { align-self: stretch; }
.look-photo .m-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
.look-photo .m-price { color: var(--m-accent); font-weight: 800; }
/* a dish without a picture keeps a face of its own: a band of the accent where the picture would be */
.look-photo .m-dish:not(:has(.m-photo)) { border-top: 0.375rem solid var(--m-accent); }

/* The accent: one of seven, or none (the ink of the look). After the looks, on the same element or on a swatch of the builder */
.acc-terracotta { --m-accent: #a63d17; }
.acc-burgundy { --m-accent: #8a1f3c; }
.acc-forest { --m-accent: #1c6240; }
.acc-teal { --m-accent: #0b5f6b; }
.acc-cobalt { --m-accent: #2450e6; }
.acc-plum { --m-accent: #6a2c82; }
.acc-coffee { --m-accent: #6b4423; }

/* A menu read from right to left: Arabic letters join, so they are never spaced, and never slanted */
[dir="rtl"] .menu-page :is(h1, h2, .m-name, .m-cat-name, .m-nav a),
.menu-page[dir="rtl"] :is(h1, h2, .m-name, .m-cat-name, .m-nav a) { letter-spacing: 0; }
[dir="rtl"] .look-carte :is(.m-line, .m-desc, .m-marks li, .m-off), .look-carte[dir="rtl"] :is(.m-line, .m-desc, .m-marks li, .m-off) { font-style: normal; }
/* and the heaviest weight is one the Arabic letters of a phone often lack: digits and currency keep one weight */
[dir="rtl"] :is(.look-board, .look-fresh) .m-price, :is(.look-board, .look-fresh)[dir="rtl"] .m-price { font-weight: 700; }

/* Arabic in a book face is thin and small on a phone: the carte keeps its paper, its centre and its dotted lines, in the phone's own Arabic letters */
[dir="rtl"] .look-carte, .look-carte[dir="rtl"] { --serif: "Segoe UI", Tahoma, system-ui, sans-serif; }
[dir="rtl"] :is(.look-carte, .look-board) .m-cat :is(h2, .m-cat-name), :is(.look-carte, .look-board)[dir="rtl"] .m-cat :is(h2, .m-cat-name) { font-size: 1.375rem; }
/* The four later looks, read from right to left: no spaced letters anywhere (Arabic has no capitals, so a title set small
   for spaced capitals takes a reading size again), and 700 where the looks ask for a weight phones often lack in Arabic */
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]):is(.look-night, .look-fine, .look-street) :is(h3, .m-dish-name, .m-line, .m-actions .btn) { letter-spacing: 0; }
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]):is(.look-night, .look-street, .look-photo) :is(h1, .m-name, h2, .m-cat-name, h3, .m-dish-name, .m-price, .m-nav a, .m-actions .btn, .m-marks li) { font-weight: 700; }
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]).look-street .m-marks li { font-size: 0.8125rem; }
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]):is(.look-night, .look-fine) .m-cat :is(h2, .m-cat-name) { font-size: 1.25rem; }
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]).look-fine .m-nav a { font-size: 1rem; }

/* A logo of its own (menu.logo, data-own): in its own shape, a wide word mark up to 10rem, a gentle corner in every look.
   The one picture of a menu from before the logo had a field keeps the square it always had. */
.m-logo[data-own] { width: auto; max-width: 10rem; border-radius: 0.75rem; }

/* ---- The top of the menu, in every look: centred, the logo above the name (or, without a logo, the first letter of
   the name: .m-mark), the short line set apart, the facts and the buttons calm under it. The page is a column, so on a
   short menu the quiet foot sits at the bottom of the screen and the empty paper reads as room, not as something missing ---- */
.menu-page { display: flex; flex-direction: column; } /* a column also keeps the cover's margin inside the page (Fresh) */
.m-foot { margin-top: auto; }
.m-head { justify-items: center; gap: 0.5rem; padding: 2.25rem 1.25rem 1.5rem; text-align: center; }
.m-brand { flex-direction: column; gap: 0.875rem; }
.m-head h1 { text-wrap: balance; }
.m-line { max-width: 26rem; text-wrap: balance; }
.m-facts { justify-items: center; margin-top: 0.25rem; font-size: 0.875rem; }
.m-actions { justify-content: center; margin-top: 0.5rem; }
/* the row of categories is centred while it fits, and scrolls from its start when it does not */
.m-nav a:first-child { margin-inline-start: auto; }
.m-nav a:last-child { margin-inline-end: auto; }
/* no logo: the first letter of the name, in a circle of the accent (colours() keeps the accent readable on the paper) */
.m-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.25rem; border-radius: 50%; background: var(--m-accent); color: var(--m-paper); font-size: 1.625rem; font-weight: 800; line-height: 1; }
.look-carte .m-mark, .look-fine .m-mark { border: 1px solid currentColor; background: none; color: var(--m-accent); font-family: var(--serif, inherit); font-weight: 500; }

/* each look its own touch. Plain: a short rule of the accent under the name */
.menu-page:where(:not([class*="look-"])) :is(.m-head h1, .m-name)::after { content: ""; display: block; width: 2rem; margin: 0.75rem auto 0; border-top: 2px solid var(--m-accent); }
/* Counter: the line in spaced capitals between two short rules */
.look-board .m-line { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
/* inline, so on a line that wraps the rules stay against its first and last words, never at the page's edges */
.look-board .m-line::before, .look-board .m-line::after { content: ""; display: inline-block; width: 1.25rem; margin-inline: 0.625rem; border-top: 1.5px solid currentColor; vertical-align: middle; }
/* Fresh: the line in the accent, the logo on a soft shadow */
.look-fresh .m-line { color: var(--m-accent); font-weight: 600; }
.look-fresh .m-logo { border: 0; border-radius: 1.25rem; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
/* Night: the rule of the accent under the name, the line in small spaced capitals */
.look-night .m-head::after { display: none; }
.look-night :is(.m-head h1, .m-name)::after { content: ""; display: block; width: 2.5rem; margin: 0.75rem auto 0; border-top: 2px solid var(--m-accent); }
.look-night .m-line { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
/* Elegant: the line in italic */
.look-fine .m-line { font-style: italic; letter-spacing: 0.02em; }
/* Street food: the line a black label, a little tilted; the logo in an ink frame; the letter in a rounded square */
.look-street .m-head { padding-top: 2rem; }
.look-street .m-line { padding: 0.25rem 0.75rem; background: var(--m-ink); color: var(--m-paper); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; rotate: -1.5deg; }
.look-street .m-logo { border: 2px solid var(--m-ink); border-radius: 0.5rem; }
.look-street .m-mark { border-radius: 0.5rem; }
/* Photo: the head is a card, over the cover when there is one; the line in italic */
.look-photo .m-head { margin: 1rem 1rem 0.25rem; padding: 1.75rem 1.25rem 1.5rem; border-radius: 1.25rem; background: var(--m-card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.look-photo .m-cover + .m-head { position: relative; margin-top: -3.5rem; }
.look-photo .m-line { font-style: italic; }
.look-photo .m-logo { border-radius: 1rem; }
/* A logo is shown as it was made, in every look and in the builder's strip: no frame, no shadow, only its gentle corner.
   On a light paper its white ground (a logo is a JPEG: photo.js) melts into the paper, so a round logo reads round.
   Night and the owner's own colours (whose paper may be dark) keep it as a rounded tile. */
:is(.menu-page, .mb-peek) .m-logo { border: 0; box-shadow: none; }
:is(.menu-page, .mb-peek):not(.look-night, .has-tint) .m-logo { mix-blend-mode: multiply; }

/* ---- The name style (nameStyle in the menu's JSON, NAME_STYLES in menu-rules.js): how the name and the short line are
   set, over any look and any colour. A menu without one wears no class: the look's own. Each rule undoes the capitals and
   the spacing a look may give, and is stronger than any look's. Only Figtree and the serif each phone already has ---- */
:is(.name-classic, .name-refined, .name-italic) { --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; }
.menu-page.name-classic :is(.m-head h1, .m-name) { font: 700 2.125rem/1.15 var(--serif); letter-spacing: 0; text-transform: none; }
.menu-page.name-classic .m-line { font: italic 400 1.125rem/1.4 var(--serif); letter-spacing: 0; text-transform: none; }
.menu-page.name-bold :is(.m-head h1, .m-name) { font-family: var(--sans); font-size: 2.375rem; font-style: normal; font-weight: 900; line-height: 1.05; letter-spacing: -0.035em; text-transform: none; }
.menu-page.name-bold .m-line { font-family: var(--sans); font-size: 0.8125rem; font-style: normal; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.menu-page.name-refined :is(.m-head h1, .m-name) { font: 400 2.125rem/1.2 var(--serif); font-variant-caps: small-caps; letter-spacing: 0.08em; text-transform: none; }
.menu-page.name-refined :is(.m-head h1, .m-name)::after { content: ""; display: block; width: 3rem; height: 0; margin: 0.75rem auto 0; border: 0; border-top: 1px solid var(--m-accent); rotate: none; }
.menu-page.name-refined .m-line { font: italic 400 1.0625rem/1.4 var(--serif); letter-spacing: 0.02em; text-transform: none; }
.menu-page.name-italic :is(.m-head h1, .m-name) { font: italic 600 2.625rem/1.1 var(--serif); letter-spacing: -0.01em; text-transform: none; }
.menu-page.name-italic .m-line { font-size: 0.8125rem; font-style: normal; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
/* Street food with a serif style: a book face does not go in the poster label, so the line leaves it */
.menu-page.look-street:is(.name-classic, .name-refined) .m-line { padding: 0; background: none; color: var(--m-ink); rotate: none; }
/* A long short line (m-line-long, over 40 characters) is read as a sentence in every look and style: no spaced capitals,
   no label, no rules beside it */
.menu-page .m-line.m-line-long { padding: 0; background: none; color: var(--m-soft); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; rotate: none; }
.menu-page .m-line.m-line-long::before, .menu-page .m-line.m-line-long::after { display: none; }

/* Right to left: no slant, no spaced letters, no small capitals on the name and the line; the phone's own Arabic
   letters for the serif styles; and a line set small for spaced capitals takes a reading size again */
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]) :is(.m-line, .m-head h1, .m-name) { font-style: normal; letter-spacing: 0; font-variant-caps: normal; }
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]):is(.name-classic, .name-refined, .name-italic) { --serif: "Segoe UI", Tahoma, system-ui, sans-serif; }
:is([dir="rtl"] .menu-page, .menu-page[dir="rtl"]):is(.look-board, .look-night, .look-street, .name-bold, .name-italic) .m-line { font-size: 0.9375rem; text-transform: none; }
/* and an Arabic name or line on a page that reads from the left (dir="auto" on each): the same, by its own direction */
.menu-page .m-head :is(h1, .m-name, .m-line):dir(rtl) { font-style: normal; font-variant-caps: normal; letter-spacing: 0; text-transform: none; }
.menu-page:is(.name-classic, .name-refined, .name-italic) .m-head :is(h1, .m-name, .m-line):dir(rtl) { font-family: "Segoe UI", Tahoma, system-ui, sans-serif; }

/* ---- Many categories: from 5 (menu-view.js) the row ends with "All", always in sight at its end, which opens the list
   of every category, a sheet shown by CSS alone (:target). The category being read is marked in both (menu-page.js) ---- */
.m-nav:has(.m-more) { padding-inline-end: 0.625rem; }
.m-nav a.m-more { position: sticky; inset-inline-end: 0; margin-inline-start: 0.5rem; gap: 0.5rem; background: var(--m-ink); color: var(--m-paper); outline: 1rem solid var(--m-paper); outline-offset: 0; }
.m-more::before { content: ""; width: 1rem; height: 0.75rem; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
.look-street .m-nav a.m-more { background: var(--m-accent); color: var(--m-on-accent); outline-color: var(--m-ink); }
:is(.look-carte, .look-fine) .m-nav a.m-more { border-radius: 999px; padding-inline: 1rem; font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.m-nav a[aria-current="true"]:not(.m-more) { background: var(--m-ink); color: var(--m-paper); }
.look-street .m-nav a[aria-current="true"]:not(.m-more) { background: none; color: var(--m-paper); text-decoration: underline 3px var(--m-accent); text-underline-offset: 0.4em; }
/* Street with its own ink accent (no acc- class): the accent is the black of the row, so the mark and All take the paper */
.look-street:not([class*="acc-"]) .m-nav a[aria-current="true"]:not(.m-more) { text-decoration-color: currentColor; }
.look-street:not([class*="acc-"]) .m-nav a.m-more { background: var(--m-paper); color: var(--m-ink); }
:is(.look-carte, .look-fine) .m-nav a[aria-current="true"]:not(.m-more) { background: none; color: var(--m-ink); text-decoration: underline 2px var(--m-accent); text-underline-offset: 0.4em; }
.m-sheet { display: none; }
.m-sheet:target { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; }
.m-sheet-bg { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); }
.m-sheet-in { position: relative; width: 100%; max-width: 40rem; max-height: 80dvh; margin-inline: auto; overflow-y: auto; padding: 0.5rem 1rem 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); border-radius: 1.25rem 1.25rem 0 0; background: var(--m-paper); color: var(--m-ink); overscroll-behavior: contain; }
.m-sheet-top { position: sticky; top: -0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding-block: 0.75rem 0.5rem; background: var(--m-paper); }
.m-sheet-top b { font-size: 1.125rem; }
.m-sheet-top a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 1rem; border-radius: 999px; background: var(--m-chip); color: var(--m-ink); font-weight: 700; text-decoration: none; }
.m-sheet ol { margin: 0; padding: 0; list-style: none; }
.m-sheet li + li { border-top: 1px solid var(--m-rule); }
.m-sheet ol a { display: flex; align-items: center; gap: 1rem; min-height: 3.25rem; color: var(--m-ink); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
.m-sheet ol a span { margin-inline-start: auto; color: var(--m-quiet); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-sheet ol a[aria-current="true"] { color: var(--m-accent); }

/* On paper: no row of links, no buttons, no report; white paper, and a dish is never cut in two */
@media print {
  .menu-page { max-width: none; min-height: 0; background: #fff; }
  .menu-page:is(.look-carte, .look-board, .look-fresh) { --m-paper: #fff; }
  .menu-page:is(.look-fine, .look-street, .look-photo) { --m-paper: #fff; }
  /* Night goes to paper as a light page: dark letters, and the ink where its light colours were */
  .menu-page.look-night { --m-paper: #fff; --m-ink: #0d0f15; --m-soft: #3d4252; --m-rule: #e2e4ea; --m-quiet: #6b7080; --m-card: #fff; --m-chip: #eef0f5; --m-accent: #0d0f15; }
  .m-nav, .m-actions, .m-foot .report { display: none; }
  .m-nav .m-more, .m-sheet, .m-sheet:target { display: none; }
  .m-dish { break-inside: avoid; }
  .m-cat :is(h2, .m-cat-name) { break-after: avoid; }
  .look-fresh .m-dish { border: 1px solid var(--m-rule); }
  .look-board .m-cat :is(h2, .m-cat-name) { padding-inline: 0; border-bottom: 2px solid; border-radius: 0; background: none; color: var(--m-accent); }
  /* a printer leaves backgrounds out: Street's blocks and pills become a line and plain figures in the accent */
  .look-street .m-cat :is(h2, .m-cat-name) { margin-inline: 0; padding-inline: 0; border-bottom: 3px solid; background: none; color: var(--m-accent); }
  .look-street .m-price { padding-inline: 0; background: none; color: var(--m-accent); }
  .look-photo .m-dish { border: 1px solid var(--m-rule); box-shadow: none; }
  /* the top: Street's label an outline with ink letters (never white on white), Photo's card a line, the letter an outline */
  .look-street .m-line { background: none; color: var(--m-ink); outline: 2px solid; rotate: none; }
  .look-photo .m-head { box-shadow: none; outline: 1px solid var(--m-rule); }
  .m-mark { border: 1.5px solid; background: none; color: var(--m-ink); }
  .menu-page .m-line.m-line-long, .look-street:is(.name-classic, .name-refined) .m-line { outline: 0; }
}