/* DO GOOD FOOD - "Smoke Signal": night street, rising smoke, a hand-chalked board.
   Bowlby One (display) / Heebo (body). Charcoal dominant, gold for the board, ember only on Call. */
@font-face{font-family:"Bowlby One";src:url(../fonts/bowlby.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Heebo";src:url(../fonts/heebo.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--char:#17120F;--char2:#221A16;--soot:#0C0907;--cream:#F3E9DC;--gold:#F0B323;--ember:#F26A21;--red:#C8102E;--green:#007A3D;
--display:"Bowlby One",Impact,sans-serif;--body:"Heebo","Segoe UI",system-ui,sans-serif;
--s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:96px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--char);color:var(--cream);font:400 1.0625rem/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0;text-transform:uppercase}
h2{font-size:clamp(2.5rem,6vw,4rem)}
p{margin:0}
a{color:inherit}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;background:var(--gold);color:var(--char);padding:12px 16px;z-index:99;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font:700 1rem/1.1 var(--body);text-decoration:none;white-space:nowrap;border:2px solid var(--cream);transition:transform .15s,background-color .15s}
.btn-call{background:var(--ember);color:var(--char);border-color:var(--ember)}
.btn-call:hover{transform:translateY(-2px);background:#FF7D36}
.btn-ghost{background:transparent;color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--char)}
.btn:focus-visible{outline-color:var(--gold);box-shadow:0 0 0 6px var(--char)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.stripe{display:inline-flex;flex-direction:column;width:28px;gap:2px}
.stripe i{display:block;height:4px;background:var(--red)}.stripe i:nth-child(2){background:var(--gold)}.stripe i:nth-child(3){background:var(--green)}

/* header */
.top{background:var(--soot);border-bottom:1px solid #2E2520}
.top-in{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;white-space:nowrap}
.brand-name{font:400 1.25rem/1 var(--display);text-transform:uppercase}
.nav{display:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;font-weight:700}
.nav a:hover{color:var(--gold)}
.top-call{display:none;margin-left:auto}
@media(min-width:720px){.top-call{display:inline-flex}}
@media(min-width:960px){.nav{display:flex;margin-left:auto}.top-call{margin-left:12px}}

/* hero */
.hero{position:relative;overflow:hidden;min-height:min(92vh,760px);display:flex;align-items:flex-start;background:linear-gradient(#0E0A12,#17120F 70%)}
.night{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;padding:var(--s6) 0 var(--s7)}
.kick{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.875rem;color:var(--gold)}
.hero h1{font-size:clamp(3.4rem,13vw,9.5rem);margin:12px 0 20px;text-shadow:0 4px 0 var(--soot)}
.lede{max-width:34ch;font-size:clamp(1.125rem,2.2vw,1.375rem);line-height:1.5;margin-bottom:28px;text-shadow:0 2px 8px var(--soot)}
.smoke-pause{margin-top:20px;min-height:44px;padding:0 16px;background:rgba(12,9,7,.7);color:var(--cream);border:2px solid #5A4A40;font:700 .875rem/1 var(--body);cursor:pointer}
.smoke path{transform-box:fill-box;transform-origin:50% 100%}
@media(prefers-reduced-motion:no-preference){
  .smoke .w1{animation:rise 12s ease-in-out infinite}
  .smoke .w2{animation:rise 9s ease-in-out infinite -3s}
  .smoke .w3{animation:rise 7s ease-in-out infinite -1s}
  .glow{animation:flick 4s ease-in-out infinite alternate}
  .hero.is-paused .smoke path,.hero.is-paused .glow{animation-play-state:paused}
}
@keyframes rise{0%{transform:translate(0,0) scaleY(1)}50%{transform:translate(-14px,-30px) scaleY(1.08) skewX(-4deg)}100%{transform:translate(0,0) scaleY(1)}}
@keyframes flick{from{opacity:.75}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.smoke-pause{display:none!important}}
@media(max-width:719px){.night{opacity:.55}.hero-in{padding-top:var(--s5)}}

/* chalkboard */
.board-sec{background:var(--char);padding:var(--s7) 0;border-top:4px solid var(--gold)}
.board-in{display:grid;gap:var(--s5);align-items:start}
.board{position:relative;background:#1F2420;border:14px solid #5A3A22;box-shadow:inset 0 0 60px rgba(0,0,0,.6),0 10px 0 var(--soot);padding:28px 22px 36px;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.05),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.04),transparent 45%)}
.board h2{color:var(--gold)}
.board-sub{margin:6px 0 20px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.875rem;color:var(--cream)}
.dishes{list-style:none;margin:0;padding:0}
.dishes li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:12px 0;border-bottom:2px dashed rgba(243,233,220,.28)}
.dishes .d{font:400 clamp(1.2rem,3vw,1.6rem)/1.1 var(--display);text-transform:uppercase;color:var(--cream)}
.dishes .n{font-size:1rem;color:var(--gold)}
.chalk{display:block;width:70%;height:20px;margin-top:18px}
.chalk path{stroke-dasharray:420;stroke-dashoffset:0}
.js .chalk.is-drawn path{animation:chalk 1.2s ease-out both}
@keyframes chalk{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.js .chalk.is-drawn path{animation:none}}
.drum-pic{margin:0;transform:rotate(2deg);background:var(--cream);padding:10px 10px 0}
.drum-pic figcaption{color:var(--char);font:400 1.1rem/1 var(--display);text-transform:uppercase;padding:12px 2px 14px}
@media(min-width:900px){.board-in{grid-template-columns:7fr 4fr;gap:var(--s6)}.drum-pic{margin-top:var(--s6)}.board{padding:40px 44px 44px}}

/* poster wall of boxes */
.boxes{background:var(--char2);padding:var(--s7) 0}
.boxes h2{max-width:14ch}
.boxes-lede{margin:16px 0 var(--s5);max-width:46ch;font-size:1.125rem}
.posters{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.p{margin:0;position:relative;background:var(--soot)}
.p img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.p figcaption{position:absolute;left:0;bottom:12px;background:var(--gold);color:var(--char);font:400 .95rem/1 var(--display);text-transform:uppercase;padding:8px 12px}
.p1{grid-column:1/-1}.p1 img{aspect-ratio:4/3}
@media(min-width:760px){
  .posters{grid-template-columns:5fr 3fr 4fr;grid-auto-rows:auto;gap:20px;align-items:start}
  .p1{grid-column:1;grid-row:1/3}.p1 img{aspect-ratio:3/4}
  .p2{grid-column:2;margin-top:var(--s6)}.p2 img{aspect-ratio:1}
  .p3{grid-column:3;transform:rotate(-1.5deg)}.p3 img{aspect-ratio:4/3}
  .p4{grid-column:2/4;width:70%;justify-self:end}.p4 img{aspect-ratio:16/10}
  .p:hover img{filter:saturate(1.15)}
}

/* street-poster slogans */
.word{background:var(--char);padding:var(--s7) 0;border-top:1px solid #2E2520}
.slogans{display:grid;gap:var(--s5);margin-top:var(--s5)}
.s{margin:0;max-width:34ch}
.s blockquote{margin:0}
.s p{font:400 clamp(1.25rem,2.6vw,1.75rem)/1.25 var(--display);text-transform:uppercase;color:#FFFFFF}
.s figcaption{margin-top:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.875rem;color:var(--gold)}
.s figcaption::before{content:"";display:inline-block;width:28px;height:3px;background:var(--gold);vertical-align:middle;margin-right:10px}
@media(min-width:900px){
  .slogans{grid-template-columns:repeat(12,1fr);gap:var(--s5) 24px}
  .s1{grid-column:1/7}.s2{grid-column:7/13;margin-top:var(--s6)}.s3{grid-column:3/11}.s{max-width:none}.s p{font-size:clamp(1.25rem,2vw,1.6rem)}
}

/* visit */
.visit{background:var(--soot);padding:var(--s7) 0 var(--s6)}
.visit-in{display:grid;gap:var(--s5);align-items:center}
.shop{width:100%;max-width:440px;height:auto}
.visit address{font-style:normal;font-size:1.375rem;line-height:1.4;margin:16px 0 12px;font-weight:700}
.visit p{max-width:40ch;margin-bottom:24px}
@media(min-width:900px){.visit-in{grid-template-columns:5fr 6fr;gap:var(--s6)}}

.foot{background:var(--soot);border-top:1px solid #2E2520;padding:24px 0 112px}
.foot .wrap{display:flex;align-items:center;gap:14px}
.foot p{font-size:.9375rem}
@media(min-width:720px){.foot{padding-bottom:28px}}

/* sticky call bar on phones */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(12,9,7,.96);border-top:2px solid var(--gold)}
.dock .btn{flex:1;min-height:52px;padding:0 10px}
.btn-dock{background:var(--char);color:var(--cream)}
@media(min-width:720px){.dock{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn-call:hover{transform:none}}
@media(max-width:359px){.btn{padding:0 14px;font-size:.95rem}.dock .btn{font-size:.9rem;padding:0 6px}}