Css Codepen |work| | Restaurant Menu Html

// script.js
@media (max-width: 500px) 
    .item-header 
      flex-direction: column;
      align-items: flex-start;

Desktop: CSS Grid to place category columns side-by-side or a two-column layout for item details and price.
Mobile: single-column stack with readable font sizes and adequate touch targets.

<!-- Main content -->
  <main class="relative z-10">
    <!-- Navigation -->
    <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-[rgba(26,22,18,0.8)] border-b border-[var(--border)]">
      <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
        <a href="#" class="font-display text-2xl font-bold tracking-wide text-[var(--accent)]">Ember & Oak</a>
        <div class="hidden md:flex items-center gap-8">
          <a href="#menu" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors">Menu</a>
          <a href="#" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors">About</a>
          <a href="#" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors">Contact</a>
          <button class="btn-reserve px-5 py-2 border border-[var(--accent)] text-[var(--accent)] rounded font-medium">
            <span>Reserve</span>
          </button>
        </div>
        <button id="mobileMenuBtn" class="md:hidden p-2 text-[var(--fg)]" aria-label="Toggle menu">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="18" x2="21" y2="18"></line>
          </svg>
        </button>
      </div>
    </nav>