:root{
  --charcoal: #1c1512;
  --charcoal-soft: #2a201b;
  --cream: #f6ecda;
  --cream-dim: #ece0c9;
  --rust: #b8502e;
  --rust-deep: #8f3c22;
  --gold: #cf9a3e;
  --ink: #2c211b;
  --line: rgba(44,33,27,0.14);
  --line-light: rgba(246,236,218,0.16);
  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,.display{
  font-family: 'Fraunces', Georgia, serif;
  margin:0;
  letter-spacing: -0.01em;
}
em{ font-style: italic; color: var(--rust); }
a{ color: inherit; text-decoration: none; }
img,svg{ display:block; max-width:100%; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

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

/* ---------- Template disclaimer banner ---------- */
.template-banner{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  background: var(--charcoal-soft);
  color: var(--cream);
  border-bottom: 1px solid var(--line-light);
  overflow: hidden;
  max-height: 60px;
  transition: max-height 0.3s ease;
}
.template-banner.dismissed{ max-height: 0; }
.template-banner-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align:center;
}
.template-banner-close{
  background:none;
  border:none;
  color: inherit;
  font-size: 1.1rem;
  line-height:1;
  cursor:pointer;
  opacity:0.65;
  padding: 0 4px;
  transition: opacity 0.2s ease;
}
.template-banner-close:hover{ opacity: 1; }

/* ---------- Header ---------- */
header{
  position: fixed;
  top: var(--banner-height, 0px);
  left:0; right:0;
  z-index: 100;
  background: var(--charcoal);
  border-bottom: 1px solid var(--line-light);
  transition: top 0.3s ease;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 78px;
}
.logo{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.logo span{ color: var(--rust); font-style: italic; }
nav{ display:flex; align-items:center; gap: 40px; }
.nav-links{ display:flex; gap: 34px; }
.nav-links a{
  color: rgba(246,236,218,0.75);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: var(--rust);
  transition: width 0.25s ease;
}
.nav-links a:hover{ color: var(--cream); }
.nav-links a:hover::after{ width:100%; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  padding: 11px 22px;
  border-radius: 4px;
  border: 1px solid currentColor;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-light{ color: var(--cream); }
.btn-light:hover{ background: var(--cream); color: var(--charcoal); }
.btn-rust{ background: var(--rust); color: var(--cream); border-color: var(--rust); }
.btn-rust:hover{ background: var(--rust-deep); border-color: var(--rust-deep); }

.menu-toggle{ display:none; background:none; border:none; color:var(--cream); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  color: var(--cream);
  padding-top: calc(78px + var(--banner-height, 0px));
  min-height: 100svh;
  display:flex;
  align-items:center;
  transition: padding-top 0.3s ease;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 30%, rgba(184,80,46,0.22), transparent 55%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(246,236,218,0.06) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  padding-top: 90px;
  padding-bottom: 90px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  opacity:0;
  animation: rise 0.7s ease 0.1s forwards;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--rust);
}
.hero h1{
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 600;
  line-height: 1.06;
  opacity:0;
  animation: rise 0.7s ease 0.25s forwards;
}
.hero p.lede{
  margin-top: 26px;
  max-width: 460px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(246,236,218,0.78);
  opacity:0;
  animation: rise 0.7s ease 0.4s forwards;
}
.hero-ctas{
  margin-top: 36px;
  display:flex;
  align-items:center;
  gap: 20px;
  flex-wrap: wrap;
  opacity:0;
  animation: rise 0.7s ease 0.55s forwards;
}
@keyframes rise{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero-ctas .ghost-link{
  font-weight: 700;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(246,236,218,0.4);
  padding-bottom: 3px;
  transition: border-color 0.2s ease;
}
.hero-ctas .ghost-link:hover{ border-color: var(--cream); }

/* signature burger stack graphic */
.burger-stack-wrap{
  position: relative;
  perspective: 800px;
  animation: burger-sway 5.5s ease-in-out infinite;
}
.burger-stack{
  position: relative;
  height: 380px;
  display:flex;
  flex-direction: column-reverse;
  align-items:center;
  justify-content: flex-end;
  gap: 6px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}
@keyframes burger-sway{
  0%,100%{ transform: rotate(-1.2deg) translateY(0); }
  50%{ transform: rotate(1.2deg) translateY(-6px); }
}

/* steam wisps rising near the stack */
.steam{
  position:absolute;
  top: -10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246,236,218,0.55), rgba(246,236,218,0));
  animation: steam-rise 3.2s ease-in infinite;
  opacity:0;
}
.steam1{ left: 40%; height: 60px; animation-delay: 0.2s; }
.steam2{ left: 52%; height: 46px; animation-delay: 1.1s; }
.steam3{ left: 62%; height: 54px; animation-delay: 2s; }
@keyframes steam-rise{
  0%{ opacity:0; transform: translateY(0) scaleY(0.8); }
  20%{ opacity:0.6; }
  80%{ opacity:0.25; }
  100%{ opacity:0; transform: translateY(-70px) scaleY(1.2); }
}
.burger-layer{
  width: 78%;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.layer-bottombun{ height: 34px; background: linear-gradient(180deg, #d9a45c, #b87a34); border-radius: 999px 999px 14px 14px; width: 74%; }
.layer-patty{ height: 26px; background: linear-gradient(180deg, #5a3a24, #3c2717); transform: rotate(-1deg); }
.layer-cheese{ height: 14px; background: var(--gold); clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%); width: 82%; transform: rotate(1deg); margin-top:-6px; }
.layer-lettuce{ height: 16px; background: #7a8f4a; border-radius: 999px; width: 84%; transform: rotate(-1.5deg); }
.layer-tomato{ height: 10px; background: var(--rust); border-radius: 999px; width: 62%; }
.layer-topbun{ height: 70px; background: linear-gradient(180deg, #e7b46a, #c88a3f); border-radius: 999px 999px 999px 999px/ 60px 60px 20px 20px; width: 80%; position: relative; }
.layer-topbun::after{
  content:'';
  position:absolute;
  top: 16px; left: 22%;
  width: 6px; height:6px; border-radius:50%;
  background: rgba(255,255,255,0.5);
  box-shadow: 18px 4px 0 rgba(255,255,255,0.5), 34px -2px 0 rgba(255,255,255,0.4), -4px 12px 0 rgba(255,255,255,0.35), 44px 10px 0 rgba(255,255,255,0.4);
}
.burger-tag{
  position:absolute;
  top: -6px; right: 6%;
  background: var(--cream);
  color: var(--charcoal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  transform: rotate(6deg);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* ---------- Ticker ---------- */
.ticker-strip{
  background: var(--rust);
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.ticker-track{
  display:flex;
  width: max-content;
  animation: ticker-scroll 26s linear infinite;
}
.ticker-track span{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream);
  padding: 16px 34px;
  white-space: nowrap;
  display:flex;
  align-items:center;
  gap: 34px;
}
.ticker-track span::after{
  content:'✦';
  font-style: normal;
  font-size: 0.8rem;
  color: rgba(246,236,218,0.6);
}
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Sections shared ---------- */
section{ padding: 100px 0; }
.section-tag{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 14px;
  display:block;
}
.section-head h2{
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 600;
  max-width: 640px;
}

/* ---------- Story ---------- */
.story .wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.story-copy p{
  margin-top: 22px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(44,33,27,0.82);
  max-width: 460px;
}
.story-copy p:first-of-type{ margin-top: 26px; }
.photo-placeholder{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--rust) 0%, var(--gold) 55%, var(--charcoal) 120%);
  display:flex;
  align-items:flex-end;
  padding: 18px;
}
.fill-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-placeholder .ph-label{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246,236,218,0.55);
}
.story-photo{ height: 440px; }

/* ---------- Menu ---------- */
.menu{ background: var(--charcoal); color: var(--cream); }
.menu .section-tag{ color: var(--gold); }
.menu-groups{
  margin-top: 56px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.menu-group h3{
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-light);
}
.menu-item{
  display:flex;
  align-items:baseline;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(246,236,218,0.14);
}
.menu-item:last-child{ border-bottom:none; }
.menu-item .mi-name{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
}
.menu-item .mi-leader{
  flex:1;
  border-bottom: 1px dotted rgba(246,236,218,0.28);
  transform: translateY(-5px);
}
.menu-item .mi-price{
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
  white-space: nowrap;
}
.menu-item .mi-desc{
  display:block;
  width:100%;
  font-size: 0.88rem;
  color: rgba(246,236,218,0.55);
  margin-top: 4px;
  line-height: 1.5;
}
.menu-item-wrap{
  padding: 16px 10px;
  margin: 0 -10px;
  border-bottom: 1px dashed rgba(246,236,218,0.14);
  border-radius: 6px;
  transition: background 0.25s ease, padding-left 0.25s ease;
}
.menu-item-wrap:last-child{ border-bottom:none; }
.menu-item-wrap .mi-row{ display:flex; align-items:baseline; gap:10px; }
.menu-item-wrap:hover{
  background: rgba(207,154,62,0.08);
  padding-left: 18px;
}
.menu-item-wrap:hover .mi-price{
  color: var(--rust);
  transform: scale(1.08);
}
.mi-price{ transition: color 0.2s ease, transform 0.2s ease; display:inline-block; }

/* ---------- Gallery ---------- */
.gallery-grid{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.gallery-item{
  position: relative;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  display:flex;
  align-items:flex-end;
  padding: 16px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}
.gallery-item:hover{
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 16px 30px rgba(0,0,0,0.25);
}
.gallery-item:nth-child(even):hover{ transform: translateY(-6px) rotate(0.6deg); }
.gallery-item span{
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246,236,218,0.55);
}
.g1{ background: linear-gradient(140deg, var(--rust), var(--charcoal)); }
.g2{ background: linear-gradient(140deg, var(--gold), var(--rust-deep)); }
.g3{ background: linear-gradient(140deg, var(--charcoal), var(--gold)); }
.g4{ background: linear-gradient(140deg, var(--rust-deep), var(--charcoal-soft)); }
.g5{ background: linear-gradient(140deg, var(--gold), var(--charcoal)); }
.g6{ background: linear-gradient(140deg, var(--charcoal-soft), var(--rust)); }

/* ---------- CTA / Visit ---------- */
.visit{ background: var(--rust); color: var(--cream); }
.visit .wrap{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
}
.visit h2{
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  max-width: 480px;
}
.visit p.lede{
  margin-top: 20px;
  max-width: 420px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(246,236,218,0.88);
}
.visit-details{
  display:flex;
  flex-direction: column;
  gap: 22px;
}
.visit-detail span{
  display:block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246,236,218,0.6);
  margin-bottom: 6px;
}
.visit-detail p{
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- Footer ---------- */
footer{
  background: var(--charcoal-soft);
  color: rgba(246,236,218,0.6);
  padding: 46px 0;
  border-top: 1px solid var(--line-light);
}
.footer-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-inner .logo{ color: var(--cream); }
.footer-links{ display:flex; gap: 26px; }
.footer-links a{ font-size: 0.86rem; transition: color 0.2s ease; }
.footer-links a:hover{ color: var(--cream); }

@media (max-width: 880px){
  .nav-links{ display:none; }
  .hero-inner{ grid-template-columns: 1fr; gap: 50px; }
  .burger-stack{ height: 280px; }
  .burger-stack-wrap{ margin-top: 100px; }
  .story .wrap{ grid-template-columns: 1fr; }
  .story-photo{ height: 300px; order:-1; }
  .menu-groups{ grid-template-columns: 1fr; gap: 40px; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .visit .wrap{ grid-template-columns: 1fr; }
}

@media (max-width: 376px){
  .find-us-btn{ display: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal{ opacity: 1; transform: none; }
  .burger-stack-wrap{ animation: none; }
  .steam{ display: none; }
}