/* Shared print + screen styles for all menu pages.
   Edit this file to change fonts/colors/spacing across the WHOLE menu at once.
   You should not need to touch this file for routine item/price edits. */

@page {
  size: 8.5in 11in;
  margin: 0;
}

:root {
  --page-margin: 0.6in;
  --accent: #396f86;     /* primary — titles, section rules, numbering */
  --accent-warm: #ed871c; /* orange — dietary tags, small highlights */
  --ink: #223038;         /* main text */
  --muted: #5c7684;       /* descriptions, notes, subtext */
  --rule: #d7c099;        /* tan — dotted price leaders */
  --paper: #ffffff;
  --paper-deep: #ffffff;
  --motif: rgba(57, 111, 134, 0.055);
  --art-primary: rgba(57, 111, 134, 0.12);
  --art-secondary: rgba(237, 135, 28, 0.1);
  --art-rotation: 0deg;
  --screen-backdrop: #d9e6ea; /* screen-only area around the page */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--screen-backdrop); /* screen-only backdrop so the page edge is visible while previewing */
  color: var(--ink);
  font-family: var(--font-body);
}

/* .page represents one physical 8.5x11 sheet.
   On screen it renders as a literal 8.5x11 card so what you see is what prints.
   In print, it becomes the actual page with no extra backdrop. */
.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 8.5in;
  min-height: 11in;
  margin: 0.4in auto;
  padding: var(--page-margin);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, var(--accent) 0 0.055in, transparent 0.055in),
    linear-gradient(90deg, var(--accent-warm) 0 0.025in, transparent 0.025in),
    radial-gradient(circle at 0 0, var(--motif) 0 0.025in, transparent 0.03in),
    linear-gradient(145deg, var(--paper) 0%, var(--paper) 72%, var(--paper-deep) 130%);
  background-position: 0 0, 0.055in 0, 0 0, 0 0;
  background-size: 100% 100%, 100% 100%, 0.42in 0.42in, 100% 100%;
  box-shadow: 0 0.05in 0.2in rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}

.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.18in;
  border: 1px solid rgba(57, 111, 134, 0.22);
  box-shadow: inset 0 0 0 0.035in rgba(255, 253, 248, 0.82);
  pointer-events: none;
}

.page::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -0.7in;
  bottom: -0.72in;
  width: 3.05in;
  aspect-ratio: 1;
  border: 0.025in solid var(--art-primary);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 19%, var(--art-secondary) 19.5% 21%, transparent 21.5% 34%, var(--art-primary) 34.5% 36%, transparent 36.5%),
    repeating-conic-gradient(from var(--art-rotation), var(--art-primary) 0deg 5deg, transparent 5deg 15deg),
    radial-gradient(circle, var(--paper) 0 58%, transparent 59%);
  opacity: 0.72;
  transform: rotate(var(--art-rotation));
  pointer-events: none;
}

.page > * {
  position: relative;
  z-index: 1;
}

body[data-menu-theme="food"] {
  --accent: #356b5a;
  --accent-warm: #c96535;
  --motif: rgba(53, 107, 90, 0.052);
  --art-primary: rgba(53, 107, 90, 0.13);
  --art-secondary: rgba(201, 101, 53, 0.11);
  --art-rotation: 7.5deg;
}

.food-menu-two .page::after {
  display: none;
}

.food-menu-one .page::after {
  display: none;
}

body[data-menu-theme="cocktails"] {
  --accent: #416f7b;
  --accent-warm: #c85f48;
  --art-primary: rgba(65, 111, 123, 0.14);
  --art-secondary: rgba(200, 95, 72, 0.12);
  --art-rotation: 15deg;
}

.cocktails-menu .page::after {
  display: none;
}

body[data-menu-theme="beer"] {
  --accent: #496f67;
  --accent-warm: #b46c2c;
  --art-primary: rgba(73, 111, 103, 0.13);
  --art-secondary: rgba(180, 108, 44, 0.13);
  --art-rotation: 22.5deg;
}

.year-round-beer-menu .page::after,
.rotating-drinks-menu .page::after {
  display: none;
}

body[data-menu-theme="hookah"] {
  --accent: #54668a;
  --accent-warm: #b45d54;
  --art-primary: rgba(84, 102, 138, 0.14);
  --art-secondary: rgba(180, 93, 84, 0.12);
  --art-rotation: 30deg;
}

body[data-menu-theme="hookah"] .page::after {
  display: none;
}

body[data-menu-theme="lunch"] {
  --accent: #3c706f;
  --accent-warm: #cf7133;
  --art-primary: rgba(60, 112, 111, 0.13);
  --art-secondary: rgba(207, 113, 51, 0.12);
  --art-rotation: 37.5deg;
}

.express-lunch-menu .page::after {
  display: none;
}

body[data-menu-theme="rules"] {
  --accent: #396f86;
  --accent-warm: #d66d32;
  --art-primary: rgba(57, 111, 134, 0.13);
  --art-secondary: rgba(214, 109, 50, 0.11);
  --art-rotation: 45deg;
}

body[data-menu-theme="rules"] .page::after {
  display: none;
}

.menu-tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 14px 20px;
  background: #faf6ee;
  font: 700 14px/1.4 Arial, sans-serif;
}
.menu-tools a { display: inline-flex; align-items: center; min-height: 44px; color: #173b38; }

@media screen {
  html, body { --screen-backdrop: #ece6db; }
  body .print-button { position: static; display: block; margin: 18px auto; min-height: 44px; }
}

@media screen and (max-width: 860px) {
  body .page { width: calc(100% - 24px); min-height: 0; margin: 18px auto; padding: 32px 26px; }
  body .page-columns { display: block; }
  body .page :is(.columns-2, .columns-3) { columns: 1; }
  body .page .flavor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .page-col + .page-col { margin-top: 28px; }
  body .page :is(.item-name, .item-price) { font-size: 16px; }
  body .page :is(.item-description, .item-subtext, .section-note, .pre-list, .list-item, .list-item-note) { font-size: 14px; line-height: 1.6; }
  body .page .item { margin-bottom: 16px; }
  body .page .section-title { font-size: 19px; }
  body .page > [aria-hidden="true"] { display: none; }
}

@media print {
  html, body {
    --paper: #ffffff;
    --paper-deep: #ffffff;
    background: var(--paper);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .page {
    margin: 0;
    box-shadow: none;
    width: auto;
    min-height: auto;
  }
  /* print.js sets explicit width/height/zoom so the page fills exactly one sheet. */
  .print-fit .page {
    overflow: hidden;
    break-after: avoid;
    break-inside: avoid;
  }
  .print-button { display: none !important; }
}

.print-button {
  position: fixed;
  top: 0.2in;
  right: 0.2in;
  z-index: 10;
  padding: 0.1in 0.25in;
  font-family: var(--font-body);
  font-size: 12pt;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 0.06in;
  box-shadow: 0 0.03in 0.1in rgba(0,0,0,0.25);
  cursor: pointer;
}

.print-button:hover,
.print-button:focus-visible {
  background: var(--accent-warm);
}

/* The page's own label (e.g. "Food Menu") — compact since it's a short page tag,
   not the restaurant name (that only appears via the logo, and in the browser tab). */
.menu-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.16in;
  font-family: var(--font-display);
  font-size: 19pt;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.2in 0;
}

.menu-title::before,
.menu-title::after {
  content: "";
  width: 0.42in;
  height: 0.06in;
  background:
    linear-gradient(45deg, transparent 42%, var(--accent-warm) 43% 57%, transparent 58%) center / 0.06in 0.06in no-repeat,
    linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat;
}

.menu-logo {
  display: block;
  width: 2.5in;
  height: auto;
  margin: 0 auto 0.1in auto;
}

/* Optional short line under the title, e.g. hours of availability. */
.menu-tagline {
  text-align: center;
  font-size: 10.5pt;
  font-style: italic;
  color: var(--muted);
  margin: -0.12in 0 0.3in 0;
}

.section {
  margin-bottom: 0.3in;
}

.section-title {
  font-family: var(--font-display);
  font-size: 15pt;
  color: var(--accent);
  border-bottom: 1.5pt solid var(--accent);
  padding-bottom: 0.04in;
  margin-bottom: 0.12in;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.section-note {
  font-size: 9pt;
  color: var(--muted);
  font-style: italic;
  margin: -0.06in 0 0.12in 0;
}

/* A smaller label nested under a section's own items — e.g. "Flavors" under Hookah
   Service. No underline (unlike .section-title), so it reads as part of the section
   above rather than a peer section of its own. */
.subsection-title {
  font-family: var(--font-display);
  font-size: 11.5pt;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0.2in 0 0.1in 0;
}

.item {
  margin-bottom: 0.14in;
  break-inside: avoid;
}

.item-line {
  display: flex;
  align-items: baseline;
  gap: 0.08in;
}

.item-name {
  font-weight: 700;
  font-size: 11.5pt;
  /* Intentionally NOT nowrap: a long name (e.g. "Anatolia Jumbo Chicken Wings") needs
     to wrap onto a second line in a narrow column — forcing it onto one line pushed
     the whole row wider than the column and spilled the price into the next column. */
  min-width: 0;
}

.item-tags {
  font-size: 8.5pt;
  color: var(--accent-warm);
  font-weight: 600;
  white-space: nowrap;
}

.item-leader {
  flex: 1;
  border-bottom: 1pt dotted var(--rule);
  margin-bottom: 0.05in;
}

.item-price {
  font-weight: 700;
  font-size: 11.5pt;
  white-space: nowrap;
}

.item-description {
  font-size: 9.5pt;
  color: var(--muted);
  margin-top: 0.02in;
}

.item-subtext {
  font-size: 9pt;
  color: var(--muted);
  margin-top: 0.01in;
}

/* Explicit designer-assigned columns (see renderExplicitColumns in build.js) —
   used for dense multi-category pages like the food menu. */
.page-columns {
  display: flex;
  gap: 0.4in;
  align-items: flex-start;
}

/* Sets a full-width section (e.g. Happy Hour) apart from the main column area above it. */
.section-divider {
  border-top: 1pt dotted var(--rule);
  margin: 0.05in 0 0.3in 0;
}

.page-col {
  flex: 1;
  min-width: 0;
}

.page-col .section-title {
  font-size: 13pt;
}

.page-col .item-name,
.page-col .item-price {
  font-size: 10.5pt;
}

.page-col .item-description,
.page-col .item-subtext {
  font-size: 9pt;
}

.page-col .item {
  margin-bottom: 0.1in;
}

.pre-list {
  margin: 0 0 0.12in 0;
}

.pre-list-item {
  font-size: 9pt;
  color: var(--muted);
  margin-bottom: 0.02in;
}

.page-disclaimer {
  font-size: 7.5pt;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  margin-top: 0.15in;
}

.columns-2 {
  columns: 2;
  column-gap: 0.35in;
}

.columns-3 {
  columns: 3;
  column-gap: 0.28in;
}

.columns-2 .section,
.columns-3 .section {
  break-inside: avoid;
}

.columns-3 .section-title {
  font-size: 12.5pt;
  letter-spacing: 0.01em;
}

.columns-3 .item-name,
.columns-3 .item-price {
  font-size: 10.5pt;
}

.columns-3 .item-description,
.columns-3 .item-subtext {
  font-size: 8.5pt;
}

/* Plain (unpriced) list entries — house rules, hookah flavors, etc. */
.list-item {
  font-size: 10.5pt;
  margin-bottom: 0.08in;
}

.list-item-note {
  font-size: 9pt;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 0.08in 0;
}

.flavor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.24in;
}

.flavor-heading {
  min-height: 0.32in;
  margin-bottom: 0.07in;
  padding-bottom: 0.04in;
  border-bottom: 1pt solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-size: 9pt;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Hookah flavor categories (Tropical & Fruit, Citrus, ...). Underlined, smaller than the
   "Flavors" label, so they read as headings rather than orderable flavors. */
.flavor-category {
  font-family: var(--font-display);
  font-size: 10pt;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.16in 0 0.1in 0;
  padding-bottom: 0.03in;
  border-bottom: 1pt solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.page-col > .flavor-category:first-child {
  margin-top: 0.06in;
}

.flavor-group .list-item {
  font-size: 9.5pt;
  margin-bottom: 0.055in;
}

.hookah-art {
  position: absolute !important;
  z-index: 0 !important;
  top: 0.42in;
  right: 0.25in;
  bottom: 0.28in;
  width: 2.55in;
  color: var(--accent);
  opacity: 0.075;
  pointer-events: none;
}

.hookah-art-secondary {
  top: 2.2in;
  right: auto;
  bottom: 0.85in;
  left: -0.18in;
  width: 1.75in;
  opacity: 0.055;
  transform: scaleX(-1);
  transform-origin: center;
}

.hookah-smoke {
  position: absolute;
  left: 48%;
  width: 0.72in;
  border: 0.035in solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.smoke-one {
  top: 0;
  height: 1.35in;
  transform: rotate(-20deg);
}

.smoke-two {
  top: 0.82in;
  left: 36%;
  height: 1.1in;
  transform: rotate(155deg);
}

.hookah-bowl {
  position: absolute;
  top: 2.02in;
  left: 50%;
  width: 0.58in;
  height: 0.45in;
  border: 0.035in solid currentColor;
  border-radius: 0.08in 0.08in 48% 48%;
  transform: translateX(-50%);
}

.hookah-tray {
  position: absolute;
  top: 2.52in;
  left: 50%;
  width: 1.32in;
  height: 0.14in;
  border: 0.035in solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.hookah-stem {
  position: absolute;
  top: 2.64in;
  bottom: 1.62in;
  left: 50%;
  width: 0.13in;
  border: 0.03in solid currentColor;
  background: repeating-linear-gradient(to bottom, transparent 0 0.18in, currentColor 0.18in 0.22in);
  transform: translateX(-50%);
}

.hookah-hose {
  position: absolute;
  top: 3.08in;
  right: 0.16in;
  bottom: 1.15in;
  width: 1.38in;
  border-right: 0.045in solid currentColor;
  border-bottom: 0.045in solid currentColor;
  border-radius: 0 48% 48% 38%;
}

.hookah-hose::after {
  content: "";
  position: absolute;
  right: -0.12in;
  bottom: 0.02in;
  width: 0.18in;
  height: 0.72in;
  border: 0.035in solid currentColor;
  border-radius: 0.09in;
  transform: rotate(17deg);
}

.hookah-vase {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.35in;
  height: 1.75in;
  border: 0.045in solid currentColor;
  border-radius: 22% 22% 48% 48% / 12% 12% 38% 38%;
  background:
    radial-gradient(ellipse at 50% 100%, var(--accent-warm) 0 42%, transparent 43%),
    repeating-linear-gradient(135deg, transparent 0 0.15in, currentColor 0.15in 0.17in, transparent 0.17in 0.3in);
  transform: translateX(-50%);
}

.list-section .list-item::before {
  content: "— ";
  color: var(--accent);
}

.facade-art {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0.52in 0.24in 0.2in;
  overflow: hidden;
  color: var(--accent);
  opacity: 0.065;
  pointer-events: none;
}

.facade-art::before {
  content: "";
  position: absolute;
  inset: 0.55in 0 0.3in;
  border: 0.035in solid currentColor;
  background:
    repeating-linear-gradient(0deg, transparent 0 0.38in, currentColor 0.39in 0.405in),
    repeating-linear-gradient(90deg, transparent 0 0.7in, currentColor 0.71in 0.725in);
}

.facade-cornice {
  position: absolute;
  top: 0.42in;
  left: 0;
  width: 100%;
  height: 0.26in;
  border: 0.035in solid currentColor;
  background: repeating-linear-gradient(115deg, transparent 0 0.18in, currentColor 0.19in 0.21in, transparent 0.22in 0.38in);
}

.facade-upper {
  position: absolute;
  top: 0.72in;
  left: 0.48in;
  right: 0.48in;
  display: flex;
  justify-content: space-around;
  height: 1.48in;
}

.facade-upper span {
  width: 1.18in;
  border: 0.035in solid currentColor;
  border-bottom-width: 0.12in;
  background: repeating-linear-gradient(0deg, transparent 0 0.17in, currentColor 0.18in 0.195in);
}

.facade-awning {
  position: absolute;
  top: 2.35in;
  left: 0.32in;
  right: 0.32in;
  height: 0.67in;
  border: 0.045in solid currentColor;
  border-radius: 0.14in 0.14in 0 0;
  background: repeating-linear-gradient(105deg, currentColor 0 0.08in, transparent 0.08in 0.32in);
  text-align: center;
}

.facade-awning span {
  display: inline-block;
  margin-top: 0.18in;
  padding: 0.02in 0.18in;
  border: 0.025in solid currentColor;
  font-family: var(--font-display);
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facade-storefront {
  position: absolute;
  top: 3.02in;
  left: 0.48in;
  right: 0.48in;
  bottom: 0.72in;
  display: grid;
  grid-template-columns: 1fr 1.1in 1fr;
  gap: 0.12in;
  border: 0.045in solid currentColor;
  border-top: none;
  padding: 0.14in;
}

.facade-bay,
.facade-door {
  border: 0.035in solid currentColor;
  background:
    linear-gradient(90deg, transparent 49%, currentColor 49% 51%, transparent 51%),
    repeating-linear-gradient(0deg, transparent 0 0.62in, currentColor 0.63in 0.65in);
}

.facade-door {
  position: relative;
  border-width: 0.05in;
  background:
    radial-gradient(circle at 77% 53%, currentColor 0 0.035in, transparent 0.04in),
    linear-gradient(90deg, transparent 49%, currentColor 49% 51%, transparent 51%),
    repeating-linear-gradient(0deg, transparent 0 0.78in, currentColor 0.79in 0.82in);
}

.facade-bike {
  position: absolute;
  bottom: 0.36in;
  width: 1.55in;
  height: 0.72in;
  background:
    radial-gradient(circle at 20% 70%, transparent 0 0.22in, currentColor 0.23in 0.25in, transparent 0.26in),
    radial-gradient(circle at 80% 70%, transparent 0 0.22in, currentColor 0.23in 0.25in, transparent 0.26in),
    linear-gradient(28deg, transparent 45%, currentColor 46% 50%, transparent 51%) center / 0.82in 0.52in no-repeat,
    linear-gradient(-28deg, transparent 45%, currentColor 46% 50%, transparent 51%) center / 0.82in 0.52in no-repeat;
}

.bike-left {
  left: 0.7in;
}

.bike-right {
  right: 0.62in;
  transform: scaleX(-1) scale(0.92);
}

.facade-sign {
  position: absolute;
  right: 1.92in;
  bottom: 0.12in;
  width: 0.42in;
  height: 0.78in;
  border: 0.035in solid currentColor;
  transform: perspective(0.8in) rotateX(-8deg) rotate(-5deg);
}

.facade-sign::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.26in;
  height: 0.26in;
  border-left: 0.035in solid currentColor;
}

.food-platter-art {
  position: absolute !important;
  z-index: 0 !important;
  inset: 1.05in 0.4in 0.35in;
  color: var(--accent);
  opacity: 0.062;
  transform: rotate(-4deg);
  pointer-events: none;
}

.platter-outline {
  position: absolute;
  inset: 0.25in 0.08in 0.2in;
  border: 0.055in solid currentColor;
  border-radius: 48% 52% 45% 55% / 10% 12% 11% 9%;
  box-shadow:
    inset 0 0 0 0.12in var(--paper),
    inset 0 0 0 0.15in currentColor;
}

.platter-beans {
  position: absolute;
  top: 0.82in;
  bottom: 0.82in;
  left: 0.48in;
  width: 1.55in;
  border: 0.03in solid currentColor;
  border-radius: 46%;
  background:
    repeating-linear-gradient(82deg, transparent 0 0.16in, currentColor 0.17in 0.2in, transparent 0.21in 0.34in);
}

.platter-vegetables {
  position: absolute;
  top: 0.68in;
  bottom: 0.72in;
  left: 2.08in;
  width: 2.6in;
  border-radius: 42%;
  background:
    repeating-conic-gradient(from 12deg at 30% 30%, transparent 0 14deg, var(--accent-warm) 15deg 28deg, transparent 29deg 48deg),
    repeating-linear-gradient(137deg, transparent 0 0.34in, currentColor 0.35in 0.38in, transparent 0.39in 0.68in);
}

.platter-skewer {
  position: absolute;
  z-index: 1;
  top: 0.45in;
  bottom: 0.48in;
  left: 2.32in;
  width: 0.12in;
  border-radius: 0.06in;
  background: currentColor;
  transform: rotate(-9deg);
}

.platter-skewer span {
  position: relative;
  display: block;
  width: 0.82in;
  height: 1.15in;
  margin: 0.32in 0 0 -0.34in;
  border: 0.04in solid currentColor;
  border-radius: 38% 52% 35% 48%;
  background:
    repeating-linear-gradient(25deg, transparent 0 0.13in, currentColor 0.14in 0.17in, transparent 0.18in 0.29in),
    var(--paper);
  transform: rotate(7deg);
}

.platter-skewer span:nth-child(even) {
  border-radius: 50% 35% 52% 38%;
  transform: rotate(-5deg);
}

.platter-bowl {
  position: absolute;
  right: 0.34in;
  width: 2.25in;
  aspect-ratio: 1;
  border: 0.06in solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.12in var(--paper), inset 0 0 0 0.15in currentColor;
}

.hummus-bowl {
  top: 0.6in;
  background:
    radial-gradient(circle at 58% 48%, var(--accent-warm) 0 0.11in, transparent 0.12in),
    repeating-radial-gradient(ellipse at center, transparent 0 0.18in, currentColor 0.19in 0.21in, transparent 0.22in 0.38in);
}

.onion-bowl {
  bottom: 0.56in;
  background:
    repeating-radial-gradient(ellipse at 40% 48%, transparent 0 0.16in, currentColor 0.17in 0.2in, transparent 0.21in 0.34in),
    repeating-radial-gradient(ellipse at 65% 52%, transparent 0 0.2in, var(--accent-warm) 0.21in 0.23in, transparent 0.24in 0.4in);
}

.pizza-art,
.burger-art {
  position: absolute !important;
  z-index: 0 !important;
  color: var(--accent);
  opacity: 0.06;
  pointer-events: none;
}

.pizza-art {
  top: 1.1in;
  left: 0.15in;
  width: 3.15in;
  aspect-ratio: 1;
  transform: rotate(-8deg);
}

.pizza-pie {
  width: 100%;
  height: 100%;
  border: 0.055in solid currentColor;
  border-radius: 48% 52% 46% 54%;
  box-shadow:
    inset 0 0 0 0.11in var(--paper),
    inset 0 0 0 0.15in currentColor;
  background:
    radial-gradient(circle at 31% 24%, var(--accent-warm) 0 0.18in, transparent 0.19in),
    radial-gradient(circle at 57% 20%, var(--accent-warm) 0 0.19in, transparent 0.2in),
    radial-gradient(circle at 76% 34%, var(--accent-warm) 0 0.18in, transparent 0.19in),
    radial-gradient(circle at 36% 48%, var(--accent-warm) 0 0.2in, transparent 0.21in),
    radial-gradient(circle at 63% 51%, var(--accent-warm) 0 0.2in, transparent 0.21in),
    radial-gradient(circle at 22% 69%, var(--accent-warm) 0 0.18in, transparent 0.19in),
    radial-gradient(circle at 51% 76%, var(--accent-warm) 0 0.2in, transparent 0.21in),
    radial-gradient(circle at 78% 70%, var(--accent-warm) 0 0.18in, transparent 0.19in),
    repeating-conic-gradient(from 9deg, transparent 0 43deg, currentColor 44deg 45deg);
}

.burger-art {
  right: 0.18in;
  bottom: 0.42in;
  width: 3.35in;
  height: 3.55in;
  transform: rotate(4deg);
}

.burger-art::before {
  content: "";
  position: absolute;
  inset: 0.12in 0 0.02in;
  border: 0.045in solid currentColor;
  border-radius: 46%;
  transform: rotate(-5deg);
}

.burger-bun-top,
.burger-sauce,
.burger-patty,
.burger-cheese,
.burger-greens,
.burger-bun-bottom {
  position: absolute;
  left: 0.35in;
  right: 0.35in;
  border: 0.04in solid currentColor;
}

.burger-bun-top {
  top: 0.3in;
  height: 0.95in;
  border-radius: 50% 50% 18% 18% / 75% 75% 20% 20%;
  background:
    radial-gradient(ellipse at 25% 45%, currentColor 0 0.035in, transparent 0.04in),
    radial-gradient(ellipse at 48% 28%, currentColor 0 0.035in, transparent 0.04in),
    radial-gradient(ellipse at 72% 48%, currentColor 0 0.035in, transparent 0.04in);
}

.burger-sauce {
  top: 1.2in;
  height: 0.25in;
  border-radius: 45%;
  background: repeating-linear-gradient(105deg, transparent 0 0.16in, var(--accent-warm) 0.17in 0.2in, transparent 0.21in 0.34in);
}

.burger-patty {
  top: 1.42in;
  height: 0.62in;
  border-radius: 38% 45% 40% 48%;
  background: repeating-linear-gradient(20deg, transparent 0 0.18in, currentColor 0.19in 0.22in, transparent 0.23in 0.38in);
}

.burger-cheese {
  top: 1.96in;
  height: 0.28in;
  border-color: var(--accent-warm);
  transform: skewX(-14deg) rotate(-2deg);
}

.burger-greens {
  top: 2.2in;
  height: 0.35in;
  border-radius: 48%;
  background: repeating-radial-gradient(ellipse at bottom, transparent 0 0.15in, currentColor 0.16in 0.18in, transparent 0.19in 0.3in);
}

.burger-bun-bottom {
  top: 2.48in;
  height: 0.64in;
  border-radius: 15% 15% 48% 48% / 20% 20% 65% 65%;
}

.burger-pickles {
  position: absolute;
  right: -0.08in;
  top: 0.88in;
  width: 0.82in;
}

.burger-pickles span {
  display: block;
  width: 0.62in;
  height: 0.32in;
  margin-top: -0.04in;
  border: 0.035in solid currentColor;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.lunch-bowl-art {
  position: absolute !important;
  z-index: 0 !important;
  top: 1.62in;
  left: 0.88in;
  width: 6.75in;
  aspect-ratio: 1;
  color: var(--accent);
  opacity: 0.058;
  transform: rotate(-3deg);
  pointer-events: none;
}

.lunch-bowl {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0.06in solid currentColor;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 0.14in var(--paper),
    inset 0 0 0 0.18in currentColor;
}

.lunch-bowl > div {
  position: absolute;
}

.bowl-tomatoes {
  top: 0.62in;
  left: 2.4in;
  width: 2.45in;
  height: 1.05in;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 18% 55%, transparent 0 0.3in, var(--accent-warm) 0.31in 0.35in, transparent 0.36in),
    radial-gradient(ellipse at 51% 42%, transparent 0 0.34in, var(--accent-warm) 0.35in 0.39in, transparent 0.4in),
    radial-gradient(ellipse at 82% 58%, transparent 0 0.3in, var(--accent-warm) 0.31in 0.35in, transparent 0.36in);
}

.bowl-chickpeas {
  top: 0.9in;
  left: 0.72in;
  width: 2.35in;
  height: 1.72in;
  border: 0.035in solid currentColor;
  border-radius: 45%;
  background:
    radial-gradient(circle at 18% 25%, currentColor 0 0.11in, transparent 0.12in),
    radial-gradient(circle at 43% 18%, currentColor 0 0.1in, transparent 0.11in),
    radial-gradient(circle at 69% 29%, currentColor 0 0.12in, transparent 0.13in),
    radial-gradient(circle at 31% 55%, currentColor 0 0.12in, transparent 0.13in),
    radial-gradient(circle at 58% 58%, currentColor 0 0.1in, transparent 0.11in),
    radial-gradient(circle at 82% 63%, currentColor 0 0.11in, transparent 0.12in),
    radial-gradient(circle at 18% 82%, currentColor 0 0.1in, transparent 0.11in),
    radial-gradient(circle at 51% 84%, currentColor 0 0.12in, transparent 0.13in);
}

.bowl-onions {
  top: 1.25in;
  right: 0.48in;
  width: 1.95in;
  height: 1.9in;
  border-radius: 48%;
  background:
    repeating-radial-gradient(ellipse at 55% 50%, transparent 0 0.17in, currentColor 0.18in 0.21in, transparent 0.22in 0.37in),
    repeating-radial-gradient(ellipse at 30% 58%, transparent 0 0.24in, var(--accent-warm) 0.25in 0.28in, transparent 0.29in 0.45in);
}

.bowl-greens {
  top: 2.58in;
  right: 0.72in;
  width: 2.12in;
  height: 1.62in;
  border-radius: 45%;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 0.17in, currentColor 0.18in 0.22in, transparent 0.23in 0.38in),
    repeating-conic-gradient(from 15deg, transparent 0 18deg, currentColor 19deg 22deg, transparent 23deg 42deg);
}

.bowl-pickles {
  right: 0.98in;
  bottom: 0.62in;
  width: 2.28in;
  height: 1.7in;
  border: 0.035in solid var(--accent-warm);
  border-radius: 48%;
  background: repeating-linear-gradient(154deg, transparent 0 0.16in, var(--accent-warm) 0.17in 0.2in, transparent 0.21in 0.34in);
}

.bowl-chicken {
  left: 0.72in;
  bottom: 0.68in;
  width: 3.45in;
  height: 3.18in;
  transform: rotate(-8deg);
}

.bowl-chicken span {
  position: absolute;
  width: 0.82in;
  height: 0.68in;
  border: 0.04in solid currentColor;
  border-radius: 36% 48% 40% 52%;
  background: repeating-linear-gradient(24deg, transparent 0 0.12in, currentColor 0.13in 0.16in, transparent 0.17in 0.28in);
}

.bowl-chicken span:nth-child(1) { top: 0.18in; left: 0.25in; transform: rotate(12deg); }
.bowl-chicken span:nth-child(2) { top: 0.12in; left: 1.22in; transform: rotate(-9deg); }
.bowl-chicken span:nth-child(3) { top: 0.92in; left: 0.65in; transform: rotate(5deg); }
.bowl-chicken span:nth-child(4) { top: 0.86in; left: 1.65in; transform: rotate(15deg); }
.bowl-chicken span:nth-child(5) { top: 1.68in; left: 0.3in; transform: rotate(-12deg); }
.bowl-chicken span:nth-child(6) { top: 1.62in; left: 1.28in; transform: rotate(8deg); }

.cocktail-art {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0.65in 0.35in 0.32in;
  color: var(--accent);
  opacity: 0.065;
  pointer-events: none;
}

.cocktail-glass {
  position: absolute;
}

.cocktail-glass span {
  position: absolute;
  left: 50%;
  bottom: -2.35in;
  width: 0.06in;
  height: 2.45in;
  background: currentColor;
  transform: translateX(-50%);
}

.cocktail-glass span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.05in;
  width: 1.35in;
  height: 0.12in;
  border: 0.04in solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.martini-glass {
  top: 0.62in;
  left: 0.18in;
  width: 3.15in;
  height: 2.28in;
  border: 0.055in solid currentColor;
  clip-path: polygon(0 0, 100% 0, 57% 82%, 54% 100%, 46% 100%, 43% 82%);
  background:
    radial-gradient(circle at 68% 28%, var(--accent-warm) 0 0.2in, transparent 0.21in),
    linear-gradient(to bottom, transparent 0 40%, currentColor 41% 44%, transparent 45%);
  transform: rotate(-5deg);
}

.highball-glass {
  top: 3.72in;
  right: 0.08in;
  width: 2.18in;
  height: 4.25in;
  border: 0.055in solid currentColor;
  border-radius: 0.14in 0.14in 0.38in 0.38in;
  background:
    radial-gradient(circle at 52% 34%, transparent 0 0.4in, var(--accent-warm) 0.41in 0.45in, transparent 0.46in),
    radial-gradient(circle at 28% 72%, currentColor 0 0.08in, transparent 0.09in),
    radial-gradient(circle at 68% 82%, currentColor 0 0.1in, transparent 0.11in),
    repeating-linear-gradient(105deg, transparent 0 0.28in, currentColor 0.29in 0.32in, transparent 0.33in 0.56in);
  transform: rotate(4deg);
}

.highball-glass span {
  top: -0.58in;
  bottom: auto;
  width: 0.05in;
  height: 4.9in;
  transform: rotate(10deg);
}

.highball-glass span::after {
  display: none;
}

.coupe-glass {
  right: 1.52in;
  bottom: 1.2in;
  width: 2.45in;
  height: 1.12in;
  border: 0.055in solid currentColor;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: repeating-radial-gradient(ellipse at 50% 0, transparent 0 0.26in, var(--accent-warm) 0.27in 0.3in, transparent 0.31in 0.52in);
  transform: rotate(-4deg);
}

.coupe-glass span {
  bottom: -1.3in;
  height: 1.4in;
}

.beer-cellar-art {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0.82in 0.26in 0.3in;
  color: var(--accent);
  opacity: 0.058;
  pointer-events: none;
}

.beer-tap {
  position: absolute;
  top: 0.42in;
  left: 0.08in;
  width: 1.55in;
  height: 6.25in;
  border: 0.055in solid currentColor;
  border-radius: 0.75in 0.75in 0.18in 0.18in;
  background: repeating-linear-gradient(90deg, transparent 0 0.22in, currentColor 0.23in 0.25in, transparent 0.26in 0.46in);
}

.beer-tap::before {
  content: "";
  position: absolute;
  top: 2.18in;
  right: -0.85in;
  width: 0.86in;
  height: 0.32in;
  border: 0.05in solid currentColor;
  border-left: none;
  border-radius: 0 0.18in 0.18in 0;
}

.beer-tap span {
  position: absolute;
  top: -0.75in;
  left: 50%;
  width: 0.42in;
  height: 1.15in;
  border: 0.045in solid currentColor;
  border-radius: 0.16in;
  transform: translateX(-50%);
}

.beer-pint {
  position: absolute;
  left: 0.62in;
  bottom: 0.25in;
  width: 2.15in;
  height: 3.35in;
  border: 0.055in solid currentColor;
  border-radius: 0.12in 0.12in 0.34in 0.34in;
  transform: perspective(3in) rotateX(-4deg) rotate(-3deg);
  background:
    radial-gradient(circle at 18% 9%, var(--paper) 0 0.23in, currentColor 0.24in 0.27in, transparent 0.28in),
    radial-gradient(circle at 48% 6%, var(--paper) 0 0.3in, currentColor 0.31in 0.34in, transparent 0.35in),
    radial-gradient(circle at 78% 10%, var(--paper) 0 0.22in, currentColor 0.23in 0.26in, transparent 0.27in),
    repeating-linear-gradient(0deg, transparent 0 0.42in, var(--accent-warm) 0.43in 0.46in);
}

.beer-pint span {
  position: absolute;
  top: 0.84in;
  left: 28%;
  width: 0.12in;
  height: 0.12in;
  border: 0.025in solid currentColor;
  border-radius: 50%;
  box-shadow: 0.52in 0.38in 0 currentColor, 0.22in 1.08in 0 currentColor, 0.82in 1.52in 0 currentColor;
}

.beer-bottle {
  position: absolute;
  top: 0.12in;
  right: 0.18in;
  width: 1.88in;
  height: 8.72in;
  border: 0.055in solid currentColor;
  border-radius: 0.18in 0.18in 0.42in 0.42in;
  clip-path: polygon(35% 0, 65% 0, 67% 13%, 82% 22%, 88% 100%, 12% 100%, 18% 22%, 33% 13%);
  background:
    linear-gradient(to bottom, transparent 0 42%, var(--paper) 43% 66%, transparent 67%),
    repeating-linear-gradient(135deg, transparent 0 0.3in, currentColor 0.31in 0.34in, transparent 0.35in 0.62in);
}

.beer-bottle span {
  position: absolute;
  top: 3.92in;
  left: 0.2in;
  right: 0.2in;
  height: 1.86in;
  border: 0.04in solid currentColor;
  border-radius: 50%;
  background: repeating-conic-gradient(from 15deg, transparent 0 20deg, var(--accent-warm) 21deg 24deg, transparent 25deg 45deg);
}

.rotating-drinks-art {
  position: absolute !important;
  z-index: 0 !important;
  top: 1.32in;
  left: 1.08in;
  width: 6.3in;
  aspect-ratio: 1;
  color: var(--accent);
  opacity: 0.065;
  pointer-events: none;
}

.rotation-ring {
  position: absolute;
  inset: 0.55in;
  border: 0.055in dashed currentColor;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.rotation-ring::before,
.rotation-ring::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0.18in solid transparent;
  border-bottom: 0.18in solid transparent;
}

.rotation-ring::before {
  top: 0.25in;
  right: -0.15in;
  border-left: 0.38in solid currentColor;
  transform: rotate(28deg);
}

.rotation-ring::after {
  bottom: 0.25in;
  left: -0.15in;
  border-right: 0.38in solid currentColor;
  transform: rotate(28deg);
}

.drink-can {
  position: absolute;
  width: 1.18in;
  height: 2.22in;
  border: 0.05in solid currentColor;
  border-radius: 0.18in;
  background: repeating-linear-gradient(135deg, transparent 0 0.22in, currentColor 0.23in 0.26in, transparent 0.27in 0.48in);
}

.drink-can::before,
.drink-can::after {
  content: "";
  position: absolute;
  left: 0.08in;
  right: 0.08in;
  height: 0.1in;
  border: 0.03in solid currentColor;
  border-radius: 50%;
}

.drink-can::before { top: 0.05in; }
.drink-can::after { bottom: 0.05in; }

.drink-can span {
  position: absolute;
  top: 0.72in;
  left: 0.18in;
  right: 0.18in;
  height: 0.72in;
  border: 0.035in solid var(--accent-warm);
  border-radius: 50%;
}

.can-one { top: 0.18in; left: 2.56in; transform: rotate(4deg); }
.can-two { top: 2.62in; right: 0.18in; transform: rotate(13deg); }
.can-three { bottom: 0.22in; left: 0.42in; transform: rotate(-12deg); }

.rotating-glass {
  position: absolute;
  top: 1.82in;
  left: 2.14in;
  width: 2.08in;
  height: 2.75in;
  border: 0.055in solid currentColor;
  border-radius: 0.12in 0.12in 0.42in 0.42in;
  background:
    radial-gradient(circle at 34% 32%, currentColor 0 0.08in, transparent 0.09in),
    radial-gradient(circle at 68% 52%, currentColor 0 0.1in, transparent 0.11in),
    linear-gradient(to bottom, transparent 0 38%, var(--accent-warm) 39% 43%, transparent 44%);
}

.rotating-glass span {
  position: absolute;
  top: -0.82in;
  left: 62%;
  width: 0.055in;
  height: 3.1in;
  background: currentColor;
  transform: rotate(15deg);
}

/* House rules — a "manifesto poster" treatment: an oversized numeral anchors
   each rule, title and description are left-aligned for readability (centered
   paragraph text was tried and reads poorly at more than a few words). */
.rule-item {
  margin-bottom: 0.3in;
  break-inside: avoid;
}

.rule-top {
  display: flex;
  align-items: baseline;
  gap: 0.1in;
}

.rule-num {
  font-family: var(--font-display);
  font-size: 24pt;
  font-weight: 700;
  color: var(--accent-warm);
  line-height: 1;
}

.rule-heading {
  font-weight: 700;
  font-size: 14.5pt;
  color: var(--ink);
  line-height: 1.25;
}

.rule-description {
  font-size: 11pt;
  color: var(--muted);
  margin-top: 0.05in;
  padding-left: 0.42in;
  line-height: 1.35;
}

/* The page title stays centered as a short header; the rules themselves read
   left-to-right in two generously-sized columns. */
.rules-section .section-title {
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.rules-section .section-title::after {
  content: "";
  display: block;
  width: 1in;
  height: 1.5pt;
  background: var(--rule);
  margin: 0.12in auto 0.3in auto;
}

.rule-columns {
  display: flex;
  gap: 0.5in;
}

.rule-col {
  flex: 1;
  min-width: 0;
}

/* Sits at the bottom of every page via margin-top: auto — fills leftover space
   on lighter pages and repeats WiFi/address info on every printed sheet. */
.page-footer {
  margin-top: auto;
  padding-top: 0.15in;
  border-top: 1pt dotted var(--rule);
  text-align: center;
}

.footer-wifi {
  font-size: 10pt;
  color: var(--ink);
  margin-bottom: 0.06in;
}

.footer-extra {
  font-size: 9pt;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.06in;
}

.footer-address {
  font-size: 8.5pt;
  color: var(--muted);
  line-height: 1.5;
}