:root {
  --menu-orange: #ff7208;
  --menu-red: #ef332b;
  --menu-text: #142033;
  --menu-green: #16a34a;
}

.menu-board {
  position: relative;
  width: min(100%, 1920px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: url('./assets/board-background.svg') center / 100% 100% no-repeat;
}

.menu-header-band {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.menu-main-title {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(39.6%, 760px);
  aspect-ratio: 760 / 142;
  transform: translateX(-50%);
  background: url('./assets/main-title-bg.svg') center / contain no-repeat;
  display: grid;
  place-items: center;
  padding-bottom: 2.2%;
  color: #fff;
  font: 900 clamp(34px, 3.25vw, 62px)/1 'PingFang SC','Microsoft YaHei',sans-serif;
  letter-spacing: .08em;
}

.menu-title-plate {
  width: min(100%, 620px);
  aspect-ratio: 620 / 96;
  background: url('./assets/stall-title-bg.svg') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 56px;
  color: #9f2e16;
  font: 900 clamp(24px, 2.25vw, 43px)/1 'PingFang SC','Microsoft YaHei',sans-serif;
  white-space: nowrap;
}

.menu-detail-title {
  width: min(64%, 450px);
  aspect-ratio: 450 / 82;
  margin: 0 auto;
  background: url('./assets/detail-title-bg.svg') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #a63316;
  font: 900 clamp(20px, 1.9vw, 36px)/1 'PingFang SC','Microsoft YaHei',sans-serif;
}

.menu-icon { width: 1.15em; height: 1.15em; object-fit: contain; flex: 0 0 auto; }
.menu-leaf { width: .9em; height: .9em; object-fit: contain; flex: 0 0 auto; }
.menu-arrow { width: clamp(48px, 4vw, 72px); height: clamp(48px, 4vw, 72px); border: 0; padding: 0; background: transparent center / contain no-repeat; }
.menu-arrow--left { background-image: url('./assets/arrow-left.svg'); }
.menu-arrow--right { background-image: url('./assets/arrow-right.svg'); }

/* Dynamic content must remain HTML. */
.menu-dish-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.menu-price { color: var(--menu-red); font-weight: 900; }
.macro-carb { color: #f97316; border: 1px solid #f5a847; }
.macro-fat { color: #ef4444; border: 1px solid #fb7185; }
.macro-protein { color: #16a34a; border: 1px solid #5fd783; }