/* Readable secondary copy on the existing pastel surfaces. */
:root { --secondary-copy: #51566b; }
.hero .hero-copy > p,
.hero .hero-copy > p small,
main .section-title p,
main .topics .section-title p,
main .learning .section-title p {
  color: var(--secondary-copy);
  font-size: 1rem;
  line-height: 1.6;
  white-space: normal;
}
.hero .search-form input { font-size: 1rem; min-width: 0; }
.hero .search-form input::placeholder { color: #656579; opacity: 1; }
.hero .suggestions > a { font-size: .875rem; color: #535268; line-height: 1.5; }
.hero .suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.hero .suggestions > a { padding: 4px 9px; background: #fff; border: 1px solid #e6e2ef; border-radius: 999px; }
.hero .hero-notes { flex-wrap: wrap; }
.hero .hero-note-copy strong { font-size: .875rem; white-space: normal; line-height: 1.4; }
@media (min-width: 1024px) {
  .hero .hero-copy { container-type: inline-size; }
  .hero .hero-copy > p {
    max-width: none;
    font-size: clamp(.75rem, 2.45cqw, 1rem);
    line-height: 1.6;
    white-space: nowrap;
  }
  .hero .hero-copy > p small { font-size: inherit; line-height: inherit; white-space: inherit; }
  .hero .suggestions { flex-wrap: nowrap; gap: 5px; }
  .hero .suggestions > a { font-size: clamp(.6875rem, 2.05cqw, .875rem); padding: 4px 8px; white-space: nowrap; }
  .hero .hero-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero .hero-notes > span { min-width: 0; height: 34px; white-space: nowrap; padding: 6px 10px; }
  .hero .hero-note-copy strong { font-size: clamp(.6875rem, 2.1cqw, .8125rem); white-space: nowrap; line-height: 1.25; }
  .hero .hero-notes b { flex: 0 0 18px; }
  .age-copy {
    width: calc(100% - 105px);
    max-width: none;
  }
  .age-card small,
  .age-card:last-child small,
  .age-card:nth-child(5) small {
    max-width: 100%;
  }
  .age-character,
  .age-card:last-child .age-character {
    width: 104px;
    height: 104px;
    right: 4px;
    bottom: 7px;
    object-fit: cover;
    object-position: center bottom;
  }
  .age-card:nth-child(1) .age-character,
  .age-card:nth-child(2) .age-character,
  .age-card:nth-child(6) .age-character {
    transform: scale(1.12);
    transform-origin: right bottom;
  }
}
.topic small,
.age-card small,
.age-card:last-child small,
.age-card:nth-child(5) small,
.collection-copy small { color: var(--secondary-copy); font-size: .875rem; line-height: 1.5; }
.topic { min-height: 170px; }
.age-card { min-height: 166px; }
.age-card small,
.age-card:last-child small,
.age-card:nth-child(5) small { max-width: 65%; }
main .coloring-card .card-chips > span,
.catalog-grid .coloring-card .card-chips > span { font-size: .8125rem; line-height: 1.4; }
.coloring-card .category-chip { color: #604387; }
.coloring-card .card-body h3 { font-size: .875rem; line-height: 1.4; min-height: 2.8em; }
.coloring-card .age-chip { color: #50596a; }
.rating-value, .rating-votes { font-size: .75rem; color: #545b6e; }
.coloring-card .card-open, .education-open { font-size: .875rem; line-height: 1.4; }
.season small, .season em { color: var(--secondary-copy); font-size: .875rem; line-height: 1.5; }
.closing p { color: var(--secondary-copy); font-size: 1rem; }
footer .footer-universal-tagline,
footer .footer-universal-actions a { color: var(--secondary-copy); font-size: .875rem; line-height: 1.5; }
footer .footer-universal-bottom { color: #606579; font-size: .75rem; line-height: 1.5; }
@media (min-width: 761px) and (max-width: 1023px) {
  .topic { min-height: 192px; }
  .topic-copy { width: 60%; }
  .topic-art { width: 42%; height: 112px; right: 0; bottom: 0; transform: none; }
}
@media (max-width: 760px) {
  .hero h1 > span { margin-inline-start: .2em; }
  .hero .hero-notes > span { white-space: normal; }
  .topic { min-height: 210px; }
  .topic small { max-width: 100%; margin-bottom: 76px; }
  .topic-art { height: 85px; width: 58%; }
  .topic-copy { min-height: 184px; }
  .age-card { min-height: 190px; }
  .age-card small, .age-card:last-child small, .age-card:nth-child(5) small { max-width: 100%; }
  .age-character, .age-card:last-child .age-character { height: 90px; bottom: 2px; right: 2px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card { min-height: 140px; }
  .hero .hero-notes { display: flex; gap: 8px; }
}