:root {
  --margin-min: 1rem;
  --black: #111;
  --green: rgb(0,115,0);
  --green2: rgb(10,80,30);
  --green3: rgb(155,235,175);
  --yellow: rgb(255,200,0);
  --yellow2: rgb(255,220,70);
  --accent: rgb(255,75,25);
  --accent2: rgb(30,105,120);
  --purple: rgb(215,200,255);
  --neutral: rgb(235,240,195);
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  box-sizing: border-box;
  font-weight: normal;
  font-style: normal;
  font-kerning: normal;
  line-height: 1;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
::selection {
  background: var(--green3);
}

*, *:before, *:after {
  font-family: inherit;
  font-style: inherit;
  line-height: inherit;
  text-align: inherit;
  box-sizing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

body {
	font-family: GraphikWeb, var(--system-ui);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1;
  color: var(--green2);
  background-color: var(--green2);
}

a:link, a:visited {
  text-decoration: none;
  color: var(--green);
}
a:hover, a:active {
  text-decoration: none;
  color: var(--green2);
}


.dek-link:link, .dek-link:visited {
  color: var(--green2);
}
.dek-link:hover, .dek-link:active {
  color: var(--green);
}

h1, h2 {
	font-family: OkayWeb;
  font-weight: 400;
}
h1 {
  font-size: 3.5rem;
  line-height: .875;
  margin-bottom: 1.5rem;
  color: var(--accent);
}
h2 {
  font-family: OkayWeb;
  font-size: 2rem;
  line-height: .9375;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 1.25rem;
  color: var(--green2);
  font-variant-numeric: lining-nums;
}
h2.preorder-hed {
  font-family: OkayWeb;
  font-size: 2.5rem;
  line-height: .875;
  margin-bottom: 1rem;
  color: var(--accent);
}
h2.dates {
  margin: 1rem 0 3rem;
}
@media (min-width: 350px) {
  h2.preorder-hed {
    font-size: 3.25rem;
  }
}

h4 {
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  color: var(--accent);
}
#statement {
  color: var(--yellow2);
  text-transform: uppercase;
  letter-spacing: 0;
  padding-top: 2rem;
}
#tagline {
  font-size: 4rem;
  line-height: .8;
  color: var(--green2);
}
.location {
  font-family: GraphikWeb;
  font-weight: 800;
  font-size: 1.75rem;
}

p {
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.2083333333;
  margin-bottom: 1rem;
  color: var(--green2);
}
.smaller {
  font-weight: 400;
  font-size: 1.125rem;
}

strong {font-weight: 600;}
em {font-style: italic;}

.KO-text {color: white;}
.KO-green { color: var(--green2);}
.KO-green3 { color: var(--green3);}
.allcaps { text-transform: uppercase; letter-spacing: .5px; }
.titlecase { text-align: initial; }
.align-left { text-align: left;}

.soldout {
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .5px;
}

.social {
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .5px;
}

h3.day {
  font-family: OkayWeb;
  font-weight: normal;
  font-size: 3.75rem;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-top: 1.5rem;
  margin-bottom: .125rem;
}
.times {
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: .375rem;
}
.supply {
  font-weight: 400;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.dek {
  font-family: GraphikWeb, var(--system-ui);
  font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--green2);
  margin-bottom: 1.5rem;
}
.dek-lede, .social-username {
  font-family: GraphikWeb, var(--system-ui);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--green2);
  margin-bottom: 2rem;
}
.dek-email {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.08333333333;
  max-width: 100%;
  margin: 0 auto 2rem auto;
  color: var(--accent);
}


@media (min-width: 800px) {
  p {font-size: 1.5rem;}
  h1 { font-size: 7rem; }
  h2.preorder-hed { font-size: 7rem; }
  h2.dates { margin: 1rem 0 4rem;}
  h2 { font-size: 2.75rem; }
  #statement {
    font-size: 5rem;
    padding-top: 3rem;
    margin-bottom: 1rem;
    letter-spacing: .5px;
  }
  #tagline { font-size: 7.5rem; }
  .dek {
    font-weight: 800;
    font-size: 1.875rem;
    line-height: 1.06666666667;
    }
  .dek-lede, .social-username {
    font-size: 2.5rem;
    line-height: 1.05;
    }
  .dek-email {
    max-width: 75%;
  }
}


/*---------- BUTTONS ----------*/

.button {
  font-family: GraphikWeb, var(--system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  display: inline-block;
  padding: 1.25rem;
  margin: 2rem 0;
  border-radius: 4px;
  background-color: var(--accent);
}
.button-menu {
  background-color: var(--green2);
  color: white;
}
.button-menu:hover {
    background-color: var(--green);
}
.button-app {
  display: block;
  width: 90%;
  max-width: 300px;
  margin: 1rem auto;
}
.button-app:hover, .button-app:active {
  background-color: var(--green2);
}


/*---------- SPACING & BACKGROUNDS ----------*/

.section {
  margin: 0;
  padding: 2rem var(--margin-min);
  text-align: center;
}

.trim {
  max-width: 45rem;
  margin-right: auto;
  margin-left: auto;
}
.trim-wide {
  max-width: 60rem;
  margin-right: auto;
  margin-left: auto;
}

#masthead {
  margin: 0 0 2.5rem;
}

#area-popup {
  background-color: var(--neutral);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#area-statement {
  background-color: var(--green2);
  padding-top: 0;
  padding-bottom: 3rem;
}
#area-menu {
  background-color: var(--green3);
}
#area-brand {
  background-color: var(--yellow2);
  padding-top: 4rem;
  padding-bottom: 3rem;
}
#area-ingredients {
  background-color: white;
  color: var(--green);
  padding-top: 4rem;
  padding-bottom: 3rem;
}
#area-media {
  background-color: var(--purple);
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}

#area-android {
  background-color: var(--neutral);
}
#android-iframe {
  display: block;
}

#area-preorder {
  margin-bottom: 4rem;
}


footer {
  padding: 2rem 0;
  background-color: var(--green2);
}
footer p {
  font-weight: 400;
  font-size: .9375rem;
  text-align: center;
  color: var(--green3);
  margin-bottom: 0;
}


#days {
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.popup-days {width: 100%;}
.mobile-hide { display:none; }
.desktop-hide {}

.truck-info {
  border-top: 1px solid var(--green);
  border-bottom: 1px solid var(--green);
  padding: 2rem 0 1.5rem;
  margin: 2rem 0;
}


@media (min-width: 800px) {
 .section {
    padding: 4rem var(--margin-min);
    }
  #area-menu {
    padding-top: 2rem;
    }
  #days {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 5rem;
    }
  #area-statement {
    padding-bottom: 4rem;
    }
  #area-brand {
    padding: 9rem 0 6rem;
    }
  #area-ingredients {
    padding-bottom: 4rem;
    }
 .popup-day {
    flex-grow: 1;
    flex-basis: 33%;
    }
  .mobile-hide {
    display: block;
    }
    .desktop-hide {display: none;}

  .truck-info {
    margin: 4rem 0;
  }

}


/*--------- IMAGES ---------*/

img {
  display: block;
  max-width: 100%;
  border: 0px;
  outline: 0px;
}

.food-image {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}
#image-shake {
  width: 75%;
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1rem;
}

#masthead {
  display: flex;
  justify-content: center;
}
#logo {
  width: 80%;
  max-width: 200px;
}

.qr-code {
  width: 50%;
  max-width: 15rem;
  margin: 3rem auto 2rem;
  padding: .5rem;
  border: 1px solid var(--accent);
}

/*--------- LISTs ---------*/

ul {
  list-style-type: none;
  font-size: 1em;
  line-height: 1.125;
}
li {margin-bottom: .25rem;}
ul.ingredients-list li {
  font-size: 1rem;
  padding: .25rem 0 .625rem;
  border-bottom: 1px solid white;
  margin-bottom: .25rem;
}
ul.press {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
ul.press li {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
ul.press li:last-child {margin-bottom: 2rem;}

ul.press a, p.smaller a {
  font-weight: 500;
}

#ingredients-table {
  text-align: left;
  margin-bottom: 1.5rem;
  max-width: 100%;
  font-weight: 400;
  line-height: 1.125;
}
.table-col1 { width: 50%; }
.table-col2 { width: 50%; }

table {
  border-collapse: collapse;
}
td, th {
  color: var(--green2);
  border-bottom: 1px solid var(--green3);
  padding: .4375rem 0 .5rem;

  vertical-align: text-top;
}

th {
  font-weight: 600;
  font-size: 1.2em;
  padding-top: 2rem;
}

@media (min-width: 800px) {
  ul.ingredients {
    font-size: 1.125rem;
  }
}


/*---------- MAILCHIMP FORM ----------*/

.email-form, .email-form2 {
  margin-top: 2rem;
  /* border-top: solid 1px var(--green2); */
}

.email-form2 {
  padding-top: 2rem;
}

#mc-embedded-subscribe-form {
margin: 1rem 0;
}

@media screen and (min-width: 800px) {
  .email-form, .email-form2 {
    max-width: 36rem;
    margin: 2rem auto 1rem;
  }
  #mc-embedded-subscribe-form {
    margin: 0 0 1rem;
  }
}

.mc-field-group {
}
@media screen and (min-width: 800px) {
  .mc-field-group {
  }
}

input.enter-email {
  width: 100%;
}
@media screen and (min-width: 800px) {
  input.enter-email {
   float: left;
   width: 80%;
   }
}
input.submit-email {
  width: 100%;
}
@media screen and (min-width: 800px) {
  input.submit-email {
   width: 20%;
   }
}

input::placeholder {
  font-family: GraphikWeb;
  font-weight: 400;
  color: #AAA;
  text-align: center;
  letter-spacing: 1px;
}
@media screen and (min-width: 800px) {
input::placeholder {
   text-align: left;
   }
}

form input[type="email"] {
  background-color: white;
  border: none;
  border-radius: 4px 4px 0 0;
  margin: 0;
  height: 3rem;
  padding: 1rem;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--green2);
}
form input[type="submit"] {
  background-color: var(--green2);
  border: none;
  border-radius: 0 0 4px 4px;
  -webkit-appearance: none;
  height: 3rem;
  padding: 1rem;
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 300;
  color: white;
  font-family: GraphikWeb, var(--system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}
form input[type="submit"]:hover {
  background-color: var(--green);
  border: none;
  cursor: pointer;
}
@media screen and (min-width: 800px) {
  form input[type="email"] {
    height: 3rem;
    padding: 1rem;
    margin: 0;
    text-align: left;
    border-radius: 4px 0 0 4px;
  }
  form input[type="submit"] {
    background-color: var(--green2);
    border: none;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
  }
}