/* Single Bean — palette sampled from graphics/singlebean_menu.png */
:root{
  --cream:#F9EDD3;
  --cream-deep:#F1E1C0;
  --red:#A12B20;
  --red-dark:#7E1F16;
  --ink:#141414;
  --rule:rgba(161,43,32,.55);
  --wrap:64rem;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 1.0625rem/1.6 "Roboto Condensed",-apple-system,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}

/* faint paper grain, same feel as the printed menu */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > *{position:relative;z-index:1}

.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}

img{max-width:100%;height:auto;display:block}

a{color:var(--red);text-underline-offset:.15em}

h1,h2,h3{
  font-family:Oswald,"Roboto Condensed",Arial Narrow,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0;
  line-height:1.05;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- hero ---------- */

.hero{padding:2.25rem 0 1.5rem;text-align:center}

.hero__logo{
  width:100%;
  max-width:34rem;
  margin:0 auto;
}

.hero__tagline{
  font-family:"Roboto Condensed",sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:clamp(1.4rem,6.5vw,2.15rem);
  color:var(--red);
  margin:.35rem 0 0;
}

.hero__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem .5rem;
  margin-top:1.5rem;
}

.hero__nav a{
  font-family:Oswald,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--ink);
  text-decoration:none;
  padding:.5rem 1rem;
  border:2px solid var(--ink);
  border-radius:999px;
  background:transparent;
}

.hero__nav a:hover,
.hero__nav a:focus-visible{background:var(--red);border-color:var(--red);color:var(--cream)}

/* ---------- sections ---------- */

.band{padding:2.25rem 0}

.band__title{
  font-size:clamp(1.9rem,8vw,3rem);
  color:var(--red);
  text-align:center;
  margin-bottom:1.25rem;
  position:relative;
}

.band__title::before,
.band__title::after{
  content:"";
  display:block;
  height:3px;
  background:var(--ink);
  max-width:6rem;
  margin:.6rem auto;
}

/* framed card, echoing the menu's double border */
.card{
  border:3px solid var(--ink);
  border-radius:1.25rem;
  padding:1.5rem 1.25rem;
  box-shadow:inset 0 0 0 1px var(--cream),inset 0 0 0 4px var(--red);
  background:var(--cream);
}

.card__title{
  font-size:clamp(1.7rem,7vw,2.4rem);
  color:var(--red);
  text-align:center;
  margin-bottom:.9rem;
}

.card p{margin:0 0 .9rem}
.card p:last-child{margin-bottom:0}

.lede{
  font-size:1.2rem;
  font-weight:700;
  text-align:center;
  margin-bottom:1.1rem !important;
}

.signoff{font-weight:700}

.byline{
  font-family:Oswald,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--red);
  text-align:center;
  margin-top:1.25rem !important;
}

/* mascot alongside the About copy */
.beany{
  width:9rem;
  margin:0 auto 1rem;
}

/* ---------- sparkle divider ---------- */

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
}

.spark{width:.85rem;height:.85rem;fill:var(--red)}
.spark--big{width:1.35rem;height:1.35rem;fill:var(--ink)}

/* ---------- menu ---------- */

.grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
}

.grid > .item:first-child{border-top:0}

.item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:.75rem;
  padding:.75rem .25rem;
  border-top:2px dotted var(--rule);
}

.item h3{
  font-size:1.25rem;
  grid-column:1;
}

.item p{
  margin:.15rem 0 0;
  grid-column:1;
  grid-row:2;
  color:#3a3229;
}

.item .price{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  font-family:Oswald,sans-serif;
  font-weight:700;
  font-size:1.25rem;
  white-space:nowrap;
}

/* ---------- loyalty ---------- */

.band--red{background:var(--red);color:var(--cream);padding:2.75rem 0}

.ticket{
  border:3px dashed var(--cream);
  border-radius:1rem;
  padding:1.75rem 1.25rem;
  text-align:center;
  max-width:34rem;
  margin-inline:auto;
}

.ticket__kicker{
  font-family:Oswald,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.8rem;
  margin:0 0 .5rem;
  opacity:.85;
}

.ticket__title{
  font-size:clamp(2rem,9vw,3.25rem);
  color:var(--cream);
}

.punches{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  margin:1.35rem 0;
  padding:0;
}

.punches li{
  width:1.9rem;
  height:1.9rem;
  border:2px solid var(--cream);
  border-radius:50%;
}

.punches__last{
  background:var(--cream);
  position:relative;
}

.punches__last::after{
  content:"";
  position:absolute;
  inset:.35rem;
  border-radius:50% 50% 45% 55% / 60% 55% 45% 40%;
  background:var(--red-dark);
}

.ticket__copy{margin:0;font-size:1.1rem}

/* ---------- find the truck ---------- */

.truck{
  width:100%;
  max-width:34rem;
  margin:0 auto 1.25rem;
}

.card--truck{text-align:center}

.hours{
  list-style:none;
  margin:0 0 1.35rem;
  padding:0;
  text-align:left;
}

.hours li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:0 .75rem;
  padding:.6rem .25rem;
  border-bottom:2px dotted var(--rule);
}

.hours li:last-child{border-bottom:0}

.day{
  font-family:Oswald,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  grid-column:1;
}

.where{grid-column:1;grid-row:2;color:#3a3229}

.time{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  font-family:Oswald,sans-serif;
  font-weight:600;
  color:var(--red);
  white-space:nowrap;
}

.contact{
  font-family:Oswald,sans-serif;
  font-weight:600;
  font-size:1.2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.6rem;
}

.contact a{color:var(--ink);text-decoration-color:var(--red)}
.contact .dot{color:var(--red)}

.note{font-style:italic;color:#4a4036}

/* ---------- footer ---------- */

.foot{
  text-align:center;
  padding:2rem 0 2.5rem;
  border-top:3px solid var(--ink);
  margin-top:1rem;
}

.foot__brand{
  font-family:Oswald,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:1.5rem;
  letter-spacing:.04em;
  margin:0;
}

.foot__tag{
  font-style:italic;
  font-weight:700;
  color:var(--red);
  margin:.1rem 0 .75rem;
  font-size:1.15rem;
}

.foot__fine{margin:0;font-size:.95rem;color:#4a4036}

/* ---------- wider screens ---------- */

@media (min-width:34rem){
  .item p{font-size:1.05rem}
  .punches li{width:2.25rem;height:2.25rem}
}

@media (min-width:48rem){
  .band{padding:3.25rem 0}
  .hero{padding:3.5rem 0 2rem}
  .card{padding:2.25rem 2rem}

  /* keep the reading measure comfortable on wide screens */
  #about .card{font-size:1.125rem}
  .card--truck .hours{max-width:44rem;margin-inline:auto}

  .card--about{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "title title"
      "bean  body";
    column-gap:2.5rem;
    align-items:center;
  }

  .card--about .card__title{grid-area:title}
  .beany{grid-area:bean;width:13rem;margin:0}
  .card--about .card__body{grid-area:body}
  .card--about .card__body p{max-width:38rem}
  .card--about .byline{text-align:left;margin-inline:0}
  .card--about .lede{text-align:left}

  .truck{max-width:40rem}

  .grid{
    grid-template-columns:repeat(3,1fr);
    column-gap:2.5rem;
  }

  .grid > .item:nth-child(-n+3){border-top:0}

  .item{padding:.9rem .25rem}

  .hours li{grid-template-columns:10rem 1fr auto}
  .where{grid-column:2;grid-row:1}
  .time{grid-column:3;grid-row:1}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}