:root{
  --kaffa-brown:#4a3a31;
  --kaffa-green:#7aa36f;
  --kaffa-cream:#f5f2ea;
  --ink:#1f1a18;
}

*{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:var(--kaffa-cream);
}

.page{
  max-width:1100px;
  margin:0 auto;
  padding:1rem;
  background:#fff;
  border:1px solid #e6e3dd;
}
.site-header{
  border-bottom:4px solid var(--kaffa-green);
  padding:1rem 0 0.75rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:var(--kaffa-brown);
}
.brand img{height:56px; width:auto; display:block}
.wordmark{
  font:700 1.5rem/1 "Georgia", "Times New Roman", serif;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.tagline{
  margin:.25rem 0 0;
  color:#5b5b5b;
}
.site-nav{
  float:right; /* float example */
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.site-nav a{
  display:inline-block;
  padding:.4rem .7rem;
  text-decoration:none;
  color:#fff;
  background:var(--kaffa-brown);
  border-radius:999px;
  border:1px solid #2e241f;
}
.site-nav a:hover,
.site-nav a:focus{
  background:var(--kaffa-green);
  border-color:#5d8e58;
}
.intro{padding:1.25rem 0}
.intro h2{color:var(--kaffa-brown); margin:0 0 .25rem}

.featured{
  background:#faf8f4;
  border:1px solid #ece6de;
  padding:1rem;
  margin:0 0 1rem;
}

.col{width:48%; float:left}
.col.right{float:right}
.col h3{margin:.25rem 0 .5rem; color:var(--kaffa-brown)}
.bean-list, .events{margin:0; padding-left:1rem}

.promo .promo-card{
  width:48%;
  float:left;
  background:var(--kaffa-green);
  color:#0f120f;
  margin:.5rem 1% 1rem 0;
  padding:1rem;
  border-radius:10px;
  border:2px solid #648c5c;
}
.promo .promo-card:last-child{margin-right:0}
.button{
  display:inline-block; margin-top:.5rem; padding:.5rem .75rem;
  background:#274d2d; color:#fff; text-decoration:none; border-radius:6px;
}
.button:hover{background:#1e3e24}

.clearfix::after{content:""; display:block; clear:both}

.site-footer{
  border-top:4px solid var(--kaffa-brown);
  padding:1rem 0;
  color:#4b4b4b;
}
.site-footer a{color:var(--kaffa-brown)}
.smallprint{margin:.25rem 0 0; font-size:.875rem}

@media (max-width: 700px){
  .page{padding:.5rem}
  .site-nav{float:none; justify-content:flex-start}
  .site-nav a{padding:.35rem .6rem; border-radius:6px}
  .wordmark{font-size:1.25rem}
  .col, .promo .promo-card{float:none; width:100%; margin-right:0}
  .intro, .featured, .promo{padding:.75rem}
  .site-footer{text-align:center}
}