/* Shared by every sample menu: an A4 sheet that prints edge to edge and previews like paper on screen.
 *
 * Print: Chrome > Print > Save as PDF, paper A4, margins None, "Background graphics" on.
 * ?bleed adds 3mm of bleed on every side (216 x 303mm) for a print shop; the dashed line on screen is the
 * trim. Each menu writes its margins as calc(N + var(--b)), so nothing moves relative to the trim.
 * The website shows each sheet inside a scaled iframe with ?embed, which drops the desk and the shadow.
 */

@page { size: A4; margin: 0; }

:root { --b: 0mm; }
html.bleed { --b: 3mm; }

* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html, body { margin: 0; }
h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }

.sheet { position: relative; width: calc(210mm + 2 * var(--b)); height: calc(297mm + 2 * var(--b)); overflow: hidden; }

@media screen {
  body { background: #e6e2db; padding: 32px 0; }
  .sheet { margin: 0 auto; box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 18px 48px rgb(0 0 0 / 0.14); }
  html.embed, html.embed body { background: transparent; padding: 0; overflow: hidden; }
  html.embed .sheet { margin: 0; box-shadow: none; }
  html.bleed .sheet::after {
    content: ""; position: absolute; inset: var(--b); z-index: 9; pointer-events: none;
    outline: 1px dashed rgb(220 0 160 / 0.7);
  }
}

/* a menu is set on a grid: price columns line up */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* round food photographs, cropped like a plate seen from above */
.plate { display: block; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }

.qr svg { display: block; width: 100%; height: auto; }

.nowrap { white-space: nowrap; }

/* vegetarian: a small ringed V that sits on the text line in any typeface */
.v {
  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; vertical-align: 0.2em;
  border: 0.22mm solid currentColor; border-radius: 50%;
  font-size: 0.56em; font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0; opacity: 0.75;
}

/* every sample says what it is, quietly, so nobody mistakes it for a real restaurant */
.sample { font: 500 2.3mm/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.02em; opacity: 0.55; }