/* ==========================================================
   Colours live here. Change these six lines to reskin the
   whole site.
   ========================================================== */
:root{
  --char:    #211C19;   /* dark, warm, slightly charred */
  --char-2:  #332B26;
  --flame:   #E8501F;   /* the grill orange */
  --saffron: #F2B138;   /* spice yellow, used sparingly */
  --paper:   #FAF4EA;   /* off-white */
  --paper-2: #EFE5D6;
  --herb:    #5C8055;   /* the "we're open" green */

  --shell: min(1140px, 92vw);
  --gap: clamp(3.5rem, 8vw, 7rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--char);
  font-family:"Manrope", "Segoe UI", system-ui, sans-serif;
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.wordmark,.board-place,.price{
  font-family:"Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-weight:400;
  letter-spacing:.01em;
  line-height:0.95;
  text-transform:none;
}

a{ color:inherit; }

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

.skip{
  position:absolute; left:-9999px;
  background:var(--char); color:var(--paper);
  padding:.75rem 1rem; z-index:99;
}
.skip:focus{ left:1rem; top:1rem; }

section{ width:var(--shell); margin-inline:auto; }

h2{
  font-size:clamp(2rem, 1.3rem + 3vw, 3.4rem);
  margin:0 0 1.75rem;
}

/* ---------- top bar ---------- */
.topbar{
  width:var(--shell);
  margin:0 auto;
  padding:1.5rem 0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:baseline;
  justify-content:space-between;
}
.wordmark{
  font-size:1.5rem;
  text-decoration:none;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  font-size:.95rem;
  font-weight:600;
}
.nav a{
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--flame); }

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:end;
  padding:clamp(2rem,5vw,4.5rem) 0 var(--gap);
}
.hero h1{
  font-size:clamp(3.2rem, 1rem + 11vw, 8.5rem);
  margin:0 0 1.25rem;
  max-width:11ch;
}
.tagline{
  font-size:clamp(1.05rem,1rem + .5vw,1.4rem);
  max-width:34ch;
  margin:0;
  font-weight:600;
}

/* the board on the side of the truck */
.board{
  background:var(--char);
  color:var(--paper);
  padding:clamp(1.5rem,3vw,2.25rem);
  border-radius:4px;
  box-shadow:14px 14px 0 var(--flame);
}
.board-status{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  font-size:.9rem;
  margin-bottom:1.5rem;
}
.lamp{
  width:.7rem; height:.7rem;
  border-radius:50%;
  background:#8a8078;
  flex:none;
}
.lamp.on{
  background:var(--herb);
  box-shadow:0 0 0 4px rgba(92,128,85,.28);
}
.lamp.off{ background:#8a8078; }

.board-label{
  margin:0 0 .35rem;
  font-size:.9rem;
  color:var(--paper-2);
  opacity:.75;
}
.board-place{
  font-size:clamp(1.8rem,1rem + 3vw,2.9rem);
  margin:0 0 .5rem;
  color:var(--saffron);
}
.board-address{ margin:0 0 1rem; font-size:.95rem; opacity:.8; }
.board-hours{ margin:0; font-weight:800; font-size:1.2rem; }
.board-note{ margin:.9rem 0 0; font-size:.88rem; opacity:.75; }

@media (max-width:820px){
  .hero{ grid-template-columns:1fr; align-items:start; }
  .board{ box-shadow:8px 8px 0 var(--flame); }
}

/* ---------- the week ---------- */
.week-wrap{ padding-bottom:var(--gap); }
.week{
  list-style:none;
  margin:0;
  padding:0;
  border-top:2px solid var(--char);
}
.week li{
  display:grid;
  grid-template-columns:9rem 1fr auto;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid rgba(33,28,25,.18);
  align-items:baseline;
}
.week .d{ font-weight:800; }
.week .p{ }
.week .h{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.week li.is-today{
  background:var(--paper-2);
  box-shadow:0 0 0 .75rem var(--paper-2);
  position:relative;
}
.week li.is-closed{ opacity:.45; }
.week-caveat{
  margin-top:2rem;
  max-width:48ch;
  font-size:.95rem;
}
@media (max-width:640px){
  .week li{ grid-template-columns:1fr auto; }
  .week .d{ grid-column:1 / -1; }
}

/* ---------- menu ---------- */
.menu-wrap{
  padding:var(--gap) 0;
  border-top:2px solid var(--char);
}
.menu{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
.menu h3{
  font-size:1.5rem;
  margin:0 0 1rem;
  color:var(--flame);
}
.menu ul{ list-style:none; margin:0; padding:0; }
.menu li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.5rem 1rem;
  padding:.7rem 0;
  border-bottom:1px dotted rgba(33,28,25,.35);
}
.item-name{ font-weight:800; }
.item-desc{
  grid-column:1;
  font-size:.92rem;
  opacity:.75;
  max-width:38ch;
}
.price{
  font-size:1.25rem;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.price::before{ content:"£"; font-size:.8em; }

/* ---------- story ---------- */
.story{
  padding:var(--gap) 0;
  border-top:2px solid var(--char);
}
.story-body{
  columns:2;
  column-gap:3rem;
  max-width:72ch;
}
.story-body p{ margin:0 0 1.25rem; break-inside:avoid; }
@media (max-width:720px){ .story-body{ columns:1; } }

/* ---------- photos ---------- */
.photos{
  padding:var(--gap) 0;
  border-top:2px solid var(--char);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:.9rem;
}
.tile{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--paper-2);
  border-radius:3px;
}
.tile:nth-child(1){ grid-column:span 2; aspect-ratio:8/5; }
@media (max-width:720px){ .tile:nth-child(1){ grid-column:span 1; aspect-ratio:4/3; } }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile.is-empty img{ display:none; }
.tile.is-empty::after{
  content:attr(data-hint);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  font-size:.85rem; opacity:.55;
  border:2px dashed rgba(33,28,25,.3);
  border-radius:3px;
}

/* ---------- contact ---------- */
.contact{
  padding:var(--gap) 0;
  border-top:2px solid var(--char);
}
.contact-blurb{ max-width:46ch; }
.contact-list{
  list-style:none;
  margin:2rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.contact-list a{
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  padding:.85rem 1.4rem;
  background:var(--char);
  color:var(--paper);
  border-radius:3px;
}
.contact-list a:hover{ background:var(--flame); }

/* ---------- footer ---------- */
.foot{
  width:var(--shell);
  margin:0 auto;
  padding:2rem 0 3rem;
  border-top:2px solid var(--char);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-size:.9rem;
}
.owner-link{
  background:none;
  border:0;
  font:inherit;
  color:inherit;
  opacity:.45;
  cursor:pointer;
  text-decoration:underline;
  padding:.25rem;
}
.owner-link:hover{ opacity:1; }

/* ---------- owner sheet ---------- */
.sheet{
  position:fixed; inset:0; z-index:50;
  background:rgba(33,28,25,.6);
  display:flex; align-items:flex-start; justify-content:center;
  padding:1rem;
  overflow-y:auto;
}
.sheet[hidden]{ display:none; }
.sheet-inner{
  background:var(--paper);
  width:min(34rem,100%);
  margin:4vh 0;
  padding:clamp(1.5rem,4vw,2.5rem);
  border-radius:4px;
  position:relative;
}
.sheet-inner h2{ font-size:1.9rem; margin-bottom:1.25rem; }
.sheet-close{
  position:absolute; top:.5rem; right:.75rem;
  background:none; border:0; font-size:2rem; line-height:1;
  cursor:pointer; color:var(--char);
}
.sheet label{
  display:block;
  font-weight:800;
  font-size:.88rem;
  margin:1.1rem 0 .35rem;
}
.sheet input, .sheet select{
  width:100%;
  font:inherit;
  padding:.7rem .8rem;
  border:2px solid var(--char);
  border-radius:3px;
  background:#fff;
  color:var(--char);
}
.btn{
  font:inherit;
  font-weight:800;
  cursor:pointer;
  border:2px solid var(--char);
  background:var(--char);
  color:var(--paper);
  padding:.75rem 1.3rem;
  border-radius:3px;
  margin-top:1.4rem;
}
.btn:hover{ background:var(--flame); border-color:var(--flame); }
.btn-quiet{ background:none; color:var(--char); }
.btn-quiet:hover{ background:var(--paper-2); color:var(--char); border-color:var(--char); }
.sheet-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.err{ color:var(--flame); font-weight:600; margin:.75rem 0 0; }
.saved{ color:var(--herb); font-weight:800; margin:1rem 0 0; }
.sheet-note{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(33,28,25,.25);
  font-size:.9rem;
}
.sheet-note p{ margin:0 0 .75rem; }
.sheet-note code{
  background:var(--paper-2);
  padding:.1rem .3rem;
  border-radius:2px;
}
.snippet{
  background:var(--char);
  color:var(--paper);
  padding:1rem;
  border-radius:3px;
  overflow-x:auto;
  font-size:.8rem;
  white-space:pre;
  margin-top:1rem;
}

/* footnote under the menu */
.menu-footnote{
  margin:2.5rem 0 0;
  max-width:52ch;
  font-size:.95rem;
  opacity:.75;
}