:root{--ink:#171513;--cream:#f6f1e7;--orange:#e7481c;--muted:#736b62}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}

/* Top Navigation - Sticky Persistent Banner */
.top{height:90px;background:#fffaf1;display:flex;align-items:center;justify-content:space-between;padding:12px max(5%,calc((100vw - 1300px)/2));gap:25px;position:sticky;top:0;z-index:10;border-bottom:1px solid #ddd4c6}
.brand img{width:205px;display:block}
.top nav{display:flex;gap:30px;font-size:13px;font-weight:900;letter-spacing:1px}
.top nav a:hover,.textlink:hover{color:var(--orange)}

/* Buttons */
.button{display:inline-block;background:var(--orange);color:white;padding:19px 27px;font-weight:900;font-size:13px;letter-spacing:1px;border:2px solid var(--orange);transition:.2s;cursor:pointer}
.button:hover{background:#ba3514;border-color:#ba3514}
.button.small{padding:13px 18px}

/* Hero Section */
.hero{min-height:620px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;background:#171513;color:white;padding:70px max(5%,calc((100vw - 1300px)/2));overflow:hidden}
.eyebrow{font-size:12px;letter-spacing:2.4px;font-weight:900;color:#ff916b}
.hero h1,.section h2,.story h2,.order h2,.visit h2{font-family:Impact,'Arial Narrow',sans-serif;font-stretch:condensed;font-weight:900;line-height:.98;letter-spacing:.5px}
.hero h1{font-size:clamp(58px,6.3vw,105px);margin:25px 0}
.hero h1 em,.story h2 em{color:var(--orange);font-style:normal}
.hero p{max-width:460px;font-size:19px;line-height:1.65;color:#e1d9d0}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.textlink{font-size:13px;font-weight:900}

.hero-art{position:relative;height:470px;display:grid;place-items:center}
.burger-emoji{font-size:clamp(190px,24vw,340px);filter:drop-shadow(0 28px 25px #0009);transform:rotate(-10deg)}
.roundel{position:absolute;top:5px;right:5%;width:130px;height:130px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(14deg);z-index:1}
.roundel span{font-family:Impact;font-size:44px}
.roundel small{font-size:11px;text-align:center;font-weight:bold}

/* Ticker */
.ticker{background:var(--orange);color:white;display:flex;justify-content:space-around;align-items:center;gap:15px;padding:17px 10px;font-weight:900;letter-spacing:1.5px;font-size:12px}

/* Sections */
.section{padding:100px max(5%,calc((100vw - 1300px)/2))}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}
.orange{color:var(--orange)}
.section h2,.visit h2{font-size:clamp(65px,7vw,105px);margin:13px 0}
.section-heading p{max-width:370px;color:var(--muted);line-height:1.7}

/* Filters & Menu */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:35px 0}
.filters button{background:transparent;border:1px solid #cfc5b6;padding:12px 18px;cursor:pointer;font-weight:900;font-size:12px;letter-spacing:1px}
.filters button.active,.filters button:hover{background:var(--ink);color:white;border-color:var(--ink)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.menu-card{background:#fffaf3;padding:27px;min-height:210px;border:1px solid #e5dacb;transition:transform .2s}
.menu-card:hover{transform:translateY(-3px)}
.category{color:var(--orange);font-size:10px;letter-spacing:2px;font-weight:900}
.item-top{display:flex;justify-content:space-between;gap:15px;align-items:start;margin:16px 0}
.item-top h3{font-size:23px;margin:0;line-height:1.15}
.item-top strong{white-space:nowrap;color:var(--orange);font-size:13px;text-align:right}
.menu-card p{color:#625a53;line-height:1.6;font-size:14px;margin:0}

/* Upgrade Section Styling - Compact & Aligned */
.upgrade-section {
  margin-top: 60px;
  background: #f0e6d6;
  border: 2px solid #dfd1bd;
  padding: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.upgrade-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.upgrade-card {
  background: #fffaf3;
  padding: 18px 22px;
  border: 1px solid #e5dacb;
}
.upgrade-card .item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Story & Order CTA */
.story{background:#e9dfcf;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:100px max(5%,calc((100vw - 1300px)/2))}
.story-mark{height:420px;background:var(--orange);color:#171513;display:flex;align-items:center;justify-content:center;font-family:Impact;font-size:clamp(110px,17vw,260px);letter-spacing:-15px;transform:rotate(-3deg)}
.story-mark span{color:white}
.story h2{font-size:clamp(48px,5vw,80px);margin:20px 0}
.story p{line-height:1.8;color:#4e463f}

.order{text-align:center;background:#191715;color:white;padding:110px 20px}
.order h2{font-size:clamp(60px,8vw,120px);margin:22px 0}
.order p{max-width:590px;margin:0 auto 35px;color:#ded4c9;line-height:1.8}
.order small{display:block;color:#a8a09a;margin-top:18px}

/* Visit Section */
.visit{display:flex;justify-content:space-between;gap:50px;padding:90px max(5%,calc((100vw - 1300px)/2))}
.visit>div:last-child{max-width:360px;align-self:center}
.visit h3{font-size:18px}
.visit p{color:var(--muted);line-height:1.7}

/* Footer */
footer{background:#fffaf1;padding:35px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px}
footer img{width:180px}
footer strong,footer a{font-size:12px;letter-spacing:1px}
footer p{font-size:12px;color:var(--muted)}

/* Modal Popup Overlay */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-box {
  background: #fffaf3; padding: 40px; max-width: 480px; width: 90%;
  border: 3px solid var(--orange); text-align: center;
}
.modal-box h3 { font-family: Impact; font-size: 32px; margin-top: 0; color: var(--ink); }
.modal-box p { color: #625a53; line-height: 1.6; margin: 20px 0; }
.modal-actions { display: flex; gap: 15px; justify-content: center; margin-top: 25px; }

/* ==========================================
   RESPONSIVE DESIGN FOR TABLETS & MOBILES
   ========================================== */

/* Tablets and Medium Screens (max-width: 1024px) */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 50px 5%;
  }
  .hero p {
    margin-left: auto;
    margin-right: auto;
  }
  .actions {
    justify-content: center;
  }
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .story {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 70px 5%;
  }
  .story-mark {
    height: 300px;
  }
}

/* Mobile Phones (max-width: 768px) */
@media (max-width: 768px) {
  /* Header & Navigation - Sticky persistent banner with reduced height */
  .top {
    height: auto;
    flex-direction: row;
    padding: 8px 5%;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .top nav {
    display: none;
  }
  .brand img {
    width: 120px;
  }
  .top .button.small {
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Hero adjustments */
  .hero h1 {
    font-size: clamp(42px, 12vw, 65px);
  }
  .hero-art {
    height: 300px;
  }
  .burger-emoji {
    font-size: 200px;
  }

  /* Sections padding & layout */
  .section {
    padding: 60px 5%;
  }
  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .section h2, .visit h2, .order h2 {
    font-size: clamp(45px, 12vw, 65px);
  }

  /* Single column grids for mobile */
  .menu-grid {
    grid-template-columns: 1fr;
  }
  .upgrade-grid {
    grid-template-columns: 1fr;
  }

  /* Visit & Footer sections */
  .visit {
    flex-direction: column;
    padding: 60px 5%;
    gap: 35px;
  }
  .visit>div:last-child {
    max-width: 100%;
  }
  footer {
    flex-direction: column;
    text-align: center;
    padding: 30px 5%;
    gap: 15px;
  }
}