/* A quieter, softer frame system */
:root {
  --radius-frame: 22px;
  --radius-panel: 18px;
  --radius-card: 14px;
  --radius-photo: 16px;
  --radius-label: 999px;
  --radius-control: 11px;
}

.frame-shell {
  overflow: hidden;
  border-radius: var(--radius-frame);
  box-shadow: 0 12px 34px rgba(36, 37, 34, .055);
}
.hero-frame { margin-bottom: 78px; }
.chapter { margin-bottom: 80px; }
.button-primary { border-radius: 12px; }
.menu-toggle { border-radius: 11px; }
.hero-art { border-radius: 16px; }
.hero-photo-frame { border-radius: 17px; }
.hero-product-frame { overflow: hidden; border-radius: 13px; }
.photo-stamp, .image-index { border-radius: var(--radius-label); }
.season-showcase {
  height: 560px;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-panel);
}
.season-image-mat { height: 100%; min-height: 0; }
.season-image-window {
  inset: 24px 22px;
  overflow: hidden;
  border-width: 6px;
  border-radius: 16px;
}
.season-image-window::after { inset: 7px; border-radius: 10px; }
.season-image-window img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 6%;
  object-fit: contain;
}
.season-detail { height: 100%; min-height: 0; overflow: hidden; }
.season-detail-meta { min-height: 24px; white-space: nowrap; }
.season-detail h3 {
  min-height: 40px;
  margin: 13px 0 6px;
  overflow: hidden;
  font-size: clamp(29px, 3.2vw, 42px);
  line-height: .95;
  white-space: nowrap;
}
.season-detail > p {
  flex: 0 0 118px;
  height: 118px;
  min-height: 118px;
  max-height: 118px;
  overflow: hidden;
  margin-bottom: 13px;
}
.season-picker-label { min-height: 26px; }
.season-pick { border-radius: 9px; }
.catalog-frame { overflow: hidden; border-radius: var(--radius-panel); }
.menu-tab { border-radius: var(--radius-label); }
.places-layout { overflow: hidden; border-radius: var(--radius-panel); }
.places-photo-frame { border-radius: var(--radius-photo); }
.tosina-note { grid-template-columns: 44px minmax(0, 1fr); border-radius: 13px; }
.beans-layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.beans-map {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 754 / 436;
  overflow: hidden;
  border: 1px solid rgba(36, 37, 34, .2);
  border-radius: var(--radius-panel);
  background: #424340;
  box-shadow: 0 12px 26px rgba(36, 37, 34, .12);
}
.beans-map-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.origin-marker {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  transform: translateY(-50%);
}
.origin-marker--colombia { left: 3.3%; top: 62.2%; }
.origin-marker--uganda { left: 36.9%; top: 56.2%; }
.origin-marker--rwanda { left: 43.1%; top: 65.4%; }
.origin-marker--kenya { left: 48.8%; top: 56.2%; }
.origin-marker--china { left: 64.2%; top: 35.8%; }
.origin-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(36, 37, 34, .75);
  border-radius: var(--radius-label);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}
.origin-label::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  content: "";
}
.story-followers, .story-founder { border-radius: var(--radius-panel); }
.video-card, .review-card { border-radius: var(--radius-card); }
.student-deal { border-radius: var(--radius-panel); }
.concept-note { letter-spacing: .03em; }

@media (max-width: 1100px) {
  .season-showcase { height: 560px; min-height: 560px; }
}

@media (max-width: 760px) {
  .hero-frame { margin: 12px auto 50px; }
  .chapter { margin-bottom: 52px; }
  .hero-art { border-radius: 14px; }
  .hero-photo-frame { border-radius: 14px; }
  .season-showcase {
    height: 850px;
    min-height: 850px;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 550px;
  }
  .season-image-mat {
    height: 300px;
    min-height: 300px;
    border-right: 0;
  }
  .season-image-window { inset: 17px 15px; }
  .season-detail {
    height: 550px;
    min-height: 550px;
    padding: 18px 15px 13px;
  }
  .season-detail-meta { min-height: 22px; }
  .season-detail h3 {
    min-height: 38px;
    margin: 10px 0 4px;
    font-size: clamp(27px, 8vw, 36px);
  }
  .season-detail > p {
    flex: 0 0 132px;
    height: 132px;
    min-height: 132px;
    max-height: 132px;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.4;
  }
  .season-picker-label { min-height: 23px; }
  .season-pick {
    min-height: 37px;
    grid-template-columns: 23px minmax(0, 1fr) auto;
    gap: 5px;
    padding: 4px;
  }
  .season-pick .pick-name { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .season-pick .pick-prices { font-size: 8px; }
  .places-layout { border-radius: 15px; }
  .places-photo-frame { border-radius: 13px; }
  .beans-layout { grid-template-columns: 1fr; }
  .beans-map { width: 100%; aspect-ratio: 754 / 436; }
  .origin-marker { min-height: 24px; }
  .origin-marker--uganda { left: 30%; top: 50%; }
  .origin-marker--rwanda { left: 43.1%; top: 78%; }
  .origin-marker--kenya { left: 57%; top: 50%; }
  .origin-label { gap: 4px; padding: 5px 7px; font-size: 8px; }
  .origin-label::before { width: 5px; height: 5px; flex-basis: 5px; }
}

@media (max-width: 390px) {
  .chapter { margin-bottom: 46px; }
  .season-detail { padding-inline: 12px; }
  .season-pick .pick-name { font-size: 9px; }
  .season-pick .pick-prices { font-size: 7.5px; }
}

@media (max-width: 380px) {
  .season-detail h3 { font-size: clamp(23px, 7.2vw, 34px); }
  .season-detail > p {
    flex: 0 0 160px;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
  }
}