* {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: #111;
      color: #111;
      font-family: Inter, sans-serif;
    }

    /* =========================
       GRAIN / NOISE
    ========================= */

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: .07;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    }

    .display {
      font-family: Anton, sans-serif;
      letter-spacing: -0.03em;
    }

    .mono {
      font-family: "DM Mono", monospace;
    }

    .marquee {
      overflow: hidden;
      white-space: nowrap;
    }

    .marquee-track {
      display: inline-flex;
      animation: marquee 25s linear infinite;
    }

    @keyframes marquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    .menu-card {
      transition:
        transform .25s ease,
        box-shadow .25s ease;
    }

    .menu-card:hover {
      transform: translateY(-6px) rotate(-.5deg);
      box-shadow: 10px 10px 0 #111;
    }

    .menu-img {
      transition: transform .45s ease;
    }

    .menu-card:hover .menu-img {
      transform: scale(1.06);
    }

    .category-btn.active {
      background: #111;
      color: #F2EBDD;
    }

    .cart-panel {
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.77,0,.18,1);
    }

    .cart-panel.open {
      transform: translateX(0);
    }

    .cart-overlay {
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .cart-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .hero-title {
      line-height: .78;
    }

    .stamp {
      border: 2px solid #111;
      border-radius: 999px;
      transform: rotate(-12deg);
    }

    .skew-label {
      transform: rotate(-2deg);
    }

    @media (max-width: 768px) {
      .hero-title {
        font-size: 18vw;
      }
    }