/* Base layout for the menu page */
.menu-page { position: relative; }
.menu-tabs { display:flex; justify-content:center; gap:1rem; margin-bottom:1.25rem; }
.menu-tab { background: transparent; color: var(--muted); border: 0; padding: 0.35rem 0.9rem; font-family: inherit; cursor: pointer; letter-spacing: 0.12em; border-radius: 6px; }
.menu-tab[aria-selected="true"] { color: var(--text-light); border-bottom: 2px solid rgba(203,175,124,0.18); }

/* Panels layout */
.menu-panels { display: block; max-width: 820px; margin: 0 auto; text-align: center; }
.menu-panel { padding: 1.5rem 1rem; }

/* Menu headings: spaced letters and thin weight like the reference photo */
.spacing-top { margin-top: 2.5rem;}
.menu-title { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 400; font-size: 1.6rem; margin: 0.6rem 0 0.25rem; color: var(--text-light); text-align: center; }
.menu-title span { letter-spacing: 0.6em; white-space: normal; display: inline; word-spacing: 0.4em; }
.menu-sub { margin: 0 0 1rem; color: var(--muted); letter-spacing: 0.12em; }

/* Menu list items: dish left, price right */
.menu-list { list-style: none; margin: 0.75rem 0 0; padding: 0 1rem; text-align: left; }
.menu-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.02); color: var(--muted); }
.menu-list li .dish { flex: 1 1 auto; color: var(--text-light); font-family: 'Georgia', serif; font-size: 1rem; }
.menu-list li .price { flex: 0 0 auto; color: var(--muted); padding-left: 0.75rem; min-width: 2ch; text-align: right; }

/* Emulate the faint circular watermark behind the menu using a pseudo-element */
.menu-panels::before { content: ""; position: absolute; left: 50%; top: 36%; transform: translate(-50%, -20%); width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 60%); z-index: 0; pointer-events: none; }
.menu-panel { position: relative; z-index: 2; }

/* Slightly larger typography on desktop */
@media(min-width: 768px) {
  .menu-list li { padding: 0.85rem 0; }
  .menu-list li .dish { font-size: 1.06rem; }
}

/* Improve readability on small screens */
@media(max-width:420px) {
  .menu-title { font-size: 1.4rem; letter-spacing: 0.45em; }
  .menu-panels::before { width: 360px; height: 360px; top: 28%; }
  .menu-list { padding: 0 0.5rem; }
}
