/* ============================================
   SLYDER BURGER — design system
   "Morsi al quadrato²" — everything is square.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&family=Caveat:wght@600;700&display=swap');

:root{
  --red:        #AB2328;
  --red-dark:   #7A1418;
  --red-ink:    #5E0F12;
  --yellow:     #FFC56E;
  --yellow-deep:#F0A93B;
  --cream:      #FFF7E9;
  --paper:      #FFFCF6;
  --ink:        #241512;
  --ink-soft:   #5B4740;
  --white:      #FFFFFF;

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Poppins', sans-serif;
  --marker: 'Caveat', cursive;

  --square: 4px; /* the ONLY border radius allowed on this site: almost none */
  --tape: 34px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.01em;
  line-height:1.02;
  margin:0 0 .4em;
  color:var(--red-dark);
}
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{ padding:74px 0; }
@media (max-width:640px){ section{ padding:52px 0; } }

/* ---------- checker tape divider (the site's signature element) ---------- */
.tape{
  height:var(--tape);
  width:100%;
  background-image: repeating-linear-gradient(45deg,
      var(--red) 0, var(--red) 17px,
      var(--white) 17px, var(--white) 34px);
  background-size: 48px 48px;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
.tape.small{ height:16px; border-width:2px; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:3px solid var(--ink);
}
.nav .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:1180px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; }
.brand span{
  font-family:var(--display);
  font-size:1.05rem;
  color:var(--red-dark);
  display:none;
}
.navlinks{ display:flex; gap:6px; align-items:center; }
.navlinks a{
  font-weight:700;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:10px 16px;
  border:2px solid transparent;
}
.navlinks a:hover, .navlinks a.active{
  border:2px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
}
.navlinks a.cta{
  background:var(--red);
  color:var(--white);
  border:2px solid var(--ink);
}
.navlinks a.cta:hover{ background:var(--red-dark); color:var(--white); }
.burger-toggle{ display:none; }

@media (max-width:760px){
  .navlinks{
    position:fixed; inset:70px 0 0 0; z-index:49;
    background:var(--cream);
    flex-direction:column; align-items:stretch;
    padding:18px; gap:10px;
    transform:translateY(-110%);
    transition:transform .25s ease;
    border-bottom:3px solid var(--ink);
  }
  .navlinks.open{ transform:translateY(0); }
  .navlinks a{ text-align:center; padding:16px; }
  .burger-toggle{
    display:flex; flex-direction:column; gap:5px;
    width:34px; height:26px; background:none; border:none; cursor:pointer;
  }
  .burger-toggle span{ height:3px; background:var(--ink); display:block; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px;
  font-family:var(--body); font-weight:700; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.04em;
  border:3px solid var(--ink);
  border-radius:var(--square);
  cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  background:var(--yellow); color:var(--ink);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.btn.primary{ background:var(--red); color:var(--white); }
.btn.ghost{ background:var(--paper); }

/* ---------- hero ---------- */
.hero{
  padding:64px 0 0;
  position:relative;
  overflow:hidden;
}
.hero .grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (max-width:900px){ .hero .grid{ grid-template-columns:1fr; } }
.eyebrow{
  font-family:var(--marker); font-size:1.4rem; color:var(--red);
  transform:rotate(-2deg); display:inline-block; margin-bottom:6px;
}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  color:var(--ink);
}
.hero h1 em{ font-style:normal; color:var(--red); }
.hero-sub{ font-size:1.1rem; color:var(--ink-soft); max-width:46ch; margin-bottom:28px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.square-frame{
  position:relative;
  width:100%; aspect-ratio:1/1;
  border:4px solid var(--ink);
  background:var(--white);
  transform:rotate(2.5deg);
  box-shadow:10px 10px 0 var(--red);
}
.square-frame img{ width:100%; height:100%; object-fit:cover; }
.badge-stamp{
  position:absolute; width:150px; height:150px;
  top:-38px; right:-30px;
  transform:rotate(8deg);
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.15));
}
@media (max-width:900px){ .badge-stamp{ width:110px; height:110px; top:-24px; right:-14px; } }

/* ---------- stat strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  background:var(--white);
}
.stats div{
  padding:26px 10px; text-align:center;
  border-right:2px solid var(--ink);
}
.stats div:last-child{ border-right:none; }
.stats strong{ display:block; font-family:var(--display); font-size:1.9rem; color:var(--red); }
.stats span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
@media (max-width:700px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats div{ border-bottom:2px solid var(--ink); }
}

/* ---------- section headers ---------- */
.sec-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.sec-head h2{ font-size:clamp(2rem,4.4vw,3rem); }
.sec-head p{ color:var(--ink-soft); }

/* ---------- signature dish cards (home) ---------- */
.dish-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
@media (max-width:900px){ .dish-grid{ grid-template-columns:1fr; } }
.dish-card{
  background:var(--white); border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:26px;
}
.dish-card .tag{
  display:inline-block; background:var(--yellow); border:2px solid var(--ink);
  font-size:.72rem; font-weight:700; text-transform:uppercase; padding:3px 10px; margin-bottom:12px;
}
.dish-card h3{ font-size:1.4rem; margin-bottom:8px; }
.dish-card p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:0;}
.dish-card .price{ font-family:var(--display); color:var(--red); font-size:1.3rem; margin-top:10px; }

/* ---------- about strip ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:32px; } }

/* ---------- menu page ---------- */
.menu-nav{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:50px;
}
.menu-nav a{
  border:2px solid var(--ink); padding:9px 18px; font-weight:700;
  font-size:.85rem; text-transform:uppercase; background:var(--white);
}
.menu-nav a:hover{ background:var(--yellow); }

.menu-cat{ margin-bottom:64px; scroll-margin-top:100px; }
.menu-cat h2{
  display:inline-block;
  background:var(--ink); color:var(--paper);
  padding:8px 22px; font-size:1.6rem;
  transform:skew(-4deg);
  margin-bottom:26px;
}
.menu-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px 40px; }
@media (max-width:760px){ .menu-list{ grid-template-columns:1fr; } }
.menu-item{
  padding:16px 0; border-bottom:2px dashed #D8C7B6;
}
.menu-item .row{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.menu-item h4{
  font-family:var(--body); font-weight:700; font-size:1.05rem; margin:0;
}
.menu-item .best{
  font-family:var(--marker); color:var(--red); font-size:.95rem; margin-left:6px;
}
.menu-item .price{
  font-family:var(--display); color:var(--red); font-size:1.05rem; white-space:nowrap;
}
.menu-item .desc{ color:var(--ink-soft); font-size:.88rem; margin-top:3px; }
.menu-item .extra{ color:var(--ink-soft); font-size:.82rem; margin-top:3px; font-style:italic; }
.note-marker{
  font-family:var(--marker); font-size:1.3rem; color:var(--red-dark);
  transform:rotate(-1.5deg); display:inline-block;
}

/* ---------- location / hours card ---------- */
.info-card{
  background:var(--white); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--red);
  padding:30px;
}
.info-card h3{ font-size:1.4rem; margin-bottom:14px; }
.info-row{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid #EBDFCF; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ min-width:100px; font-weight:700; color:var(--ink-soft); font-size:.85rem; text-transform:uppercase;}

/* ---------- footer ---------- */
footer{ background:var(--ink); color:var(--cream); padding:52px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ font-family:var(--display); font-size:1.1rem; color:var(--yellow); margin-bottom:14px; }
footer a{ display:block; opacity:.85; margin-bottom:8px; font-size:.92rem; }
footer a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15);
  font-size:.8rem; opacity:.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.social-row{ display:flex; gap:10px; }
.social-row a{
  border:2px solid var(--cream); width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; margin:0;
}
.social-row a:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

:focus-visible{ outline:3px solid var(--red-dark); outline-offset:2px; }