/* SLIM'S: consolidated build (locked decisions).
   Hero: B4 checker field + sharp badge + K1 ribbon/stamp composite
         (tweaks: heavier ribbon shadow, darker hours pill, small stamp inline w/ phone).
   Board: bigger, no heading, note right-aligned.
   Menu: ORIGINAL laminated card on liner mat, images removed.
   Grid: original cells, header removed.
   Visit + footer: original checkered treatment (pending their own rounds).
   Palette: charcoal ground, cream paper, Slim's orange #f3581a + indigo #262b53 (brand),
   board red #b23a30 on physical objects. */

:root{
  --char:#191713;
  --char-2:#22201b;
  --liner:#f3efe6;
  --ink:#16140f;
  --chalk:#efe9d8;
  --dimmed:#9c9481;
  --orange:#f3581a;
  --orange-deep:#d64408;
  --indigo:#262b53;
  --red:#b23a30;
  --hair:rgba(239,233,216,.13);
  --font-board:'Staatliches',sans-serif;
  --font-body:'Work Sans',sans-serif;
  --font-ticket:'Courier Prime',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--char);color:var(--chalk);
  font-family:var(--font-body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--orange);text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.g-bar{filter:contrast(1.04) saturate(1.02) brightness(1.02)}

h2{font-family:var(--font-board);font-weight:400;line-height:.96;letter-spacing:.015em;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--chalk)}

/* ---------- nav: M1 pure center (picked from nav round 2).
   Thin 54px bar, three centered board-font links, NO branding at top
   (the hero badge carries it); logo icon drops in on the left only once
   scrolled PAST the hero. Find Us = Google Maps. No burger, no phone. ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(25,23,19,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.nav-in{position:relative;display:flex;justify-content:center;align-items:center;height:54px;max-width:1140px;margin:0 auto;padding:0 24px}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-family:var(--font-board);font-size:1.02rem;letter-spacing:.09em;color:var(--chalk)}
.nav-links a:hover{color:var(--orange)}
.nav-links .maps{color:var(--orange)}
.nav-links .maps:hover{color:var(--orange-deep)}
.nav-icon{
  position:absolute;left:24px;top:50%;transform:translateY(calc(-50% - 10px));
  opacity:0;pointer-events:none;
  transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);
}
.nav-icon img{height:36px;width:auto}
.nav.sc .nav-icon{opacity:1;pointer-events:auto;transform:translateY(-50%)}
@media (prefers-reduced-motion: reduce){
  .nav-icon{transition:none}
}

/* ---------- hero: checker field + badge + K1 composite ---------- */
.hero{border-bottom:1px solid var(--hair)}
.hero-grid{display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);min-height:calc(100svh - 54px)}
.hero-field{
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:56px 48px;
  background:repeating-conic-gradient(#f0ece1 0% 25%, #191713 0% 50%);background-size:72px 72px;
}
.badge{width:min(380px,76%);transform:rotate(-1.5deg);filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));margin-bottom:32px}
/* shadows live on .ribbon, the clipped shape on .ribbon-in:
   clip-path clips AFTER filter, so shadows on the clipped element get cut away */
.ribbon{
  filter:drop-shadow(4px 3px 3px rgba(0,0,0,.45)) drop-shadow(0 16px 26px rgba(0,0,0,.5));
}
.ribbon-in{
  display:inline-block;background:#f4f1e8;color:var(--indigo);
  font-family:var(--font-board);font-size:1.45rem;letter-spacing:.12em;
  padding:13px 38px;
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);
}
.hours-plate{
  font-family:var(--font-board);font-size:1.1rem;letter-spacing:.12em;
  color:var(--chalk);background:#14120d;border-radius:3px;padding:12px 26px;margin-top:16px;
}
.hours-plate .dot{color:var(--orange)}
.hero-btns{display:flex;gap:14px;justify-content:center;margin-top:16px;align-items:center;flex-wrap:wrap}
.stamp{
  width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--red);color:#f7f3e8;font-family:var(--font-board);font-size:.68rem;letter-spacing:.06em;line-height:1.15;
  text-decoration:none;transform:rotate(-6deg);box-shadow:0 12px 24px rgba(0,0,0,.42);transition:.2s;padding:6px;
}
.stamp:hover{transform:rotate(-2deg) scale(1.05)}
.tel-pill{
  font-family:var(--font-ticket);font-weight:700;font-size:1rem;color:var(--indigo);
  background:#f4f1e8;border-radius:999px;padding:14px 26px;text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.35);transition:.2s;
}
.tel-pill:hover{background:#fff;color:var(--indigo)}
.hero-photo{position:relative;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 36%}

/* ---------- letter board: big, no heading, note right ---------- */
.board-sec{padding:104px 0 100px;background-image:repeating-conic-gradient(rgba(239,233,216,.035) 0% 25%, transparent 0% 50%);background-size:58px 58px}
.board{
  max-width:860px;margin:0 auto;transform:rotate(-.5deg);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  border:12px solid #3a231f;border-radius:4px;background:#3a231f;
}
.board-cab{
  background:var(--red);color:#f7f3e8;text-align:center;
  font-family:var(--font-board);font-size:1.9rem;letter-spacing:.16em;
  padding:18px 16px 14px;text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.board-face{background:repeating-linear-gradient(180deg,#f6f3e9 0 14px,#e7e3d6 15px 16px,#f6f3e9 17px);padding:30px 44px 26px}
.board-row{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:baseline;padding:12px 0}
.board-row > *{font-family:var(--font-board);color:#211d15;font-size:1.9rem;letter-spacing:.08em}
.board-row .b-day{color:var(--red)}
.board-row .b-price{font-variant-numeric:tabular-nums}
.board-row:nth-child(odd) .b-item{transform:translateY(-1px) rotate(.2deg)}
.board-row:nth-child(even) .b-price{transform:translateY(1px) rotate(-.25deg)}
.board-note{text-align:right;font-family:var(--font-ticket);font-size:.82rem;color:#6e6755;padding-top:12px}

/* ---------- menu: ORIGINAL laminated card on liner mat, no images ---------- */
.menu-sec{padding:104px 0}
.liner-mat{
  max-width:980px;margin:0 auto;
  background-image:repeating-conic-gradient(#efeadd 0% 25%, #23201a 0% 50%);
  background-size:64px 64px;
  padding:clamp(28px,6vw,76px);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.menu-card{
  max-width:820px;margin:0 auto;background:var(--liner);color:var(--ink);
  border:3px solid var(--ink);border-radius:2px;
  box-shadow:0 0 0 6px var(--liner),0 18px 44px rgba(0,0,0,.5);
  padding:56px 58px 48px;
}
.menu-card-head{text-align:center;border-bottom:3px double var(--ink);padding-bottom:26px;margin-bottom:34px}
.menu-card-head h2{color:var(--ink)}
.menu-card-head p{font-family:var(--font-ticket);font-size:.88rem;color:#6e6755;margin-top:8px}
.mgroup{margin-bottom:36px}
.mgroup:last-child{margin-bottom:0}
.mgroup h3{
  font-family:var(--font-board);font-weight:400;font-size:1.35rem;letter-spacing:.14em;
  color:var(--red);margin-bottom:14px;
}
.mrow{display:flex;align-items:baseline;gap:12px;padding:9px 0}
.m-name{font-weight:600;font-size:1.02rem;white-space:nowrap}
.m-dots{flex:1;border-bottom:2px dotted rgba(22,20,15,.4);transform:translateY(-4px);min-width:24px}
.m-price{font-family:var(--font-ticket);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.mrow-desc{font-size:.9rem;color:#5d5747;margin:-6px 0 4px;max-width:52ch}

/* ---------- basket grid: original, headerless ---------- */
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:300px;gap:0}
.bcell{position:relative;overflow:hidden}
.bcell.wide{grid-column:span 2}
.bcell img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bcell:hover img{transform:scale(1.04)}
.bcell figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(22,20,15,.82),rgba(22,20,15,0));
  color:var(--chalk);font-family:var(--font-ticket);font-size:.82rem;letter-spacing:.03em;
  padding:26px 14px 10px;
}

/* ---------- visit: W1/T1 neon-night bleed (picked from visit rounds).
   Full-bleed truck-night photo, short near-opaque band at the bottom,
   place-led headline stacked left. ---------- */
.visit{padding:0}
.visit-bleed{position:relative;min-height:600px;display:flex;align-items:flex-end}
.visit-bleed > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.visit-band{
  position:relative;width:100%;
  background:linear-gradient(0deg,
    rgba(20,18,15,.99) 0%,
    rgba(20,18,15,.96) 38%,
    rgba(20,18,15,.72) 62%,
    rgba(20,18,15,.38) 82%,
    rgba(20,18,15,0) 100%);
  padding:96px 48px 36px;
}
.visit-band-in{max-width:1040px;margin:0 auto}
.visit-band h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.v-strip{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:12px;
  font-family:var(--font-board);font-size:1.35rem;letter-spacing:.06em;color:var(--chalk);
}
.v-strip .dim{color:var(--dimmed)}
.v-tel{color:var(--orange);line-height:1.1}
.v-tel:hover{color:var(--orange-deep)}

/* ---------- footer: G2 board strip (picked from footer round).
   One thin centered Staatliches line, letterboard cadence. ---------- */
.footer{border-top:1px solid var(--hair);background:#141210;text-align:center}
.footer-in{max-width:1140px;margin:0 auto;padding:16px 24px;font-family:var(--font-board);font-size:.95rem;letter-spacing:.1em;color:var(--dimmed)}
.footer-in .lit{color:var(--chalk)}
.footer-in a{color:var(--dimmed)}
.footer-in a:hover{color:var(--orange)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
  .rv.on{opacity:1;transform:none}
  .board .board-row{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
  .board.on .board-row{opacity:1;transform:translateY(0)}
  .board.on .board-row:nth-child(1){transition-delay:.05s}
  .board.on .board-row:nth-child(2){transition-delay:.14s}
  .board.on .board-row:nth-child(3){transition-delay:.23s}
  .board.on .board-row:nth-child(4){transition-delay:.32s}
  .board.on .board-row:nth-child(5){transition-delay:.41s}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  /* mobile hero = ONE screen. Photo and field share a single grid cell: the photo
     becomes the backdrop, the badge/ribbon/hours/CTA overlay it on a scrim. Replaces
     the old stacked pair (fixed 400px photo band + checker field), which ran 1000px
     tall at a 844px phone viewport and pushed hours + phone below the fold, and which
     letterboxed the portrait source so the neon sign got cut in half. */
  .hero-grid{
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
    min-height:calc(100svh - 54px);
  }
  .hero-grid > .hero-field,
  .hero-grid > .hero-photo{grid-area:1/1;min-width:0}
  .hero-photo{min-height:0}
  .hero-photo img{object-position:50% 44%}
  .hero-field{
    position:relative;z-index:1;padding:40px 22px 46px;
    background:linear-gradient(180deg,
      rgba(12,10,8,.76) 0%,rgba(12,10,8,.56) 34%,
      rgba(12,10,8,.6) 68%,rgba(12,10,8,.86) 100%);
  }
  .badge{width:min(300px,72%);max-height:34svh;object-fit:contain;margin-bottom:26px}
  .bgrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px}
  .visit-bleed{min-height:520px}
  .menu-card{padding:40px 26px 36px}
  .m-name{white-space:normal}
}
@media (max-width:760px){
  .nav-in{height:50px;padding:0 16px}
  .hero-grid{min-height:calc(100svh - 50px)}
  .hero-field{padding:34px 20px 40px}
  .badge{max-height:31svh;margin-bottom:22px}
  .nav-links{gap:20px}
  .nav-links a{font-size:.94rem}
  .nav-icon img{height:30px}
  .ribbon-in{font-size:1.05rem;padding:11px 26px}
  .hours-plate{font-size:.92rem;padding:10px 16px;letter-spacing:.09em}
  .board{border-width:9px}
  .board-face{padding:20px 20px 22px}
  .board-row{grid-template-columns:64px 1fr auto;gap:8px}
  .board-row > *{font-size:1.2rem;white-space:normal;line-height:1.12}
  .board-cab{font-size:1.25rem}
  .menu-sec{padding:80px 0}
  .bgrid{grid-template-columns:1fr;grid-auto-rows:auto}
  .bcell.wide{grid-column:span 1}
  .bcell img{height:auto}
  .visit-band{padding:80px 20px 30px}
  .v-strip{gap:10px;font-size:1.15rem}
  .footer-in{font-size:.82rem;letter-spacing:.08em}
}