/* Flowermoon's light grass green, used consistently for every rounded CTA and footer. */
:root{--flowermoon-light-green:#dce9ad;--flowermoon-light-green-hover:#ccd991;--flowermoon-footer-ink:#31483a}
.button,.site-header .nav-right .button{background:var(--flowermoon-light-green)!important;border-color:var(--flowermoon-light-green)!important;color:var(--flowermoon-footer-ink)!important;box-shadow:0 5px 0 rgba(91,111,47,.25)!important}
.button:hover,.site-header .nav-right .button:hover{background:var(--flowermoon-light-green-hover)!important;border-color:var(--flowermoon-light-green-hover)!important;color:var(--flowermoon-footer-ink)!important;box-shadow:0 4px 0 rgba(91,111,47,.25)!important}
footer{background:var(--flowermoon-light-green)!important;color:var(--flowermoon-footer-ink)!important}
footer small{opacity:.78}
.founder-mobile-photo{display:none}

/* Desktop founder story: keep the long copy away from Yuan's face. Mobile stays unchanged. */
@media (min-width:801px){
  .founder{grid-template-columns:1.2fr .8fr}
  .founder-copy{grid-column:1;grid-row:1}
  .founder-note{grid-column:2;grid-row:1}
}

/* Small artist-corner invitation inside the opening section. */
.maker-mini-card{
  max-width:500px;
  margin-top:24px;
  padding:16px 18px 17px;
  background:transparent;
  border:1px solid rgba(83,107,71,.2);
  border-radius:18px;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none
}
.maker-mini-card p{margin:0;font-size:14px;line-height:1.55}
.maker-mini-card strong{display:block;margin-bottom:3px;color:var(--flowermoon-footer-ink)}
.maker-mini-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:9px 14px;
  border-radius:999px;
  background:var(--flowermoon-light-green);
  color:var(--flowermoon-footer-ink);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 4px 0 rgba(91,111,47,.2);
  transition:transform .2s ease,background-color .2s ease
}
.maker-mini-button:hover,.maker-mini-button:focus-visible{background:var(--flowermoon-light-green-hover);transform:translateY(-2px)}

/* The favourites are tappable on touch screens as well as hoverable on desktop. */
.flip-tile{touch-action:manipulation;cursor:pointer}
.flip-tile:focus-visible{outline:3px solid var(--flowermoon-light-green-hover);outline-offset:5px}

/* A visible, circular Instagram reservation call to action. */
.reservation-cta{margin-top:24px}
.reservation-cta p{max-width:290px;margin:0 0 14px!important;line-height:1.45}
.reservation-cta strong{font-weight:800}
.reservation-circle{
  width:118px;
  height:118px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:var(--flowermoon-light-green);
  border:1px solid rgba(83,107,71,.18);
  color:var(--flowermoon-footer-ink);
  text-decoration:none;
  box-shadow:0 8px 0 rgba(91,111,47,.23),0 15px 28px rgba(65,82,59,.12);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease
}
.reservation-circle span{font-size:13px;font-weight:800;letter-spacing:.03em}
.reservation-circle:hover,.reservation-circle:focus-visible{background:var(--flowermoon-light-green-hover);transform:translateY(-3px);box-shadow:0 6px 0 rgba(91,111,47,.23),0 13px 24px rgba(65,82,59,.14)}

.lunch-copy .lunch-hours{
  display:inline-block;
  margin:0 0 20px;
  padding:9px 15px;
  border-radius:999px;
  background:var(--flowermoon-light-green);
  color:var(--flowermoon-footer-ink);
  font-size:14px;
  line-height:1.35;
  letter-spacing:.02em
}

@media (max-width:800px){
  .hero{min-height:auto!important;height:auto!important;overflow:visible!important;margin-bottom:160px}
  .maker-mini-card{max-width:none;margin-top:20px;padding:14px 15px 15px;border-radius:16px}
  .maker-mini-card p{font-size:13px;line-height:1.5}
  .maker-mini-button{font-size:11px;padding:9px 12px}
  .reservation-cta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;margin-top:22px}
  .reservation-cta p{margin:0!important;font-size:14px}
  .reservation-circle{width:104px;height:104px}
}

@media (max-width:430px){
  .reservation-cta{grid-template-columns:1fr}
  .reservation-circle{width:108px;height:108px}
}