/* Narrow layouts keep the title intact and tasting notes at a readable width. */
@media (max-width: 760px) {
  .hero h1 {
    font-size: 30px;
    letter-spacing: 0.035em;
  }
}
@media (max-width: 520px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .card-top,
  .card-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .card-body h3 {
    font-size: 20px;
  }
  .card-note {
    font-size: 12px;
  }
  .card-body > .micro {
    font-size: 10px;
  }
  .bean-motif {
    height: 74px;
  }
  .card-bottom {
    flex-direction: row;
    font-size: 9px;
  }
  .taste-line {
    font-size: 11px;
    gap: 25px;
  }
  .taste-line b {
    font-size: 17px;
  }
  .hero h1 {
    font-size: clamp(25px, 7.7vw, 30px);
  }
}