/* Keep letterforms at their native proportions and give display type room to breathe. */
:root { --serif: 'Instrument Serif', Georgia, serif; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 16px; font-synthesis: none; }
h1, h2, h3, .card-title { overflow-wrap: break-word; }
.wordmark { font-size: 58px; line-height: 1; gap: 12px; }
.wordmark > span { font-size: 12px; line-height: 1.4; padding-top: 0; }
.site-header nav a, .channel-link { font-size: 14px; }
.eyebrow, .hero-top .eyebrow, .section-heading .eyebrow, .deep-cut .eyebrow,
.hero-coordinate, .saved-nav span { font-size: 12px; line-height: 1.5; }
.hero { min-height: 560px; }
.hero-copy { top: 70px; max-width: 460px; }
.hero h1 { font-size: 174px; line-height: .95; }
.hero h1 > span { font-size: 14px; line-height: 1.5; margin: 6px 0 22px 4px; }
.hero-copy > p { font-size: 37px; line-height: 1.2; margin-left: 4px; }
.play-primary { margin-top: 24px; }
.play-primary > span:last-child { font-size: 16px; line-height: 1.5; }
.play-primary small, .hero-bottom { font-size: 12px; line-height: 1.5; }
.hero-bottom > span { max-width: calc(100% - 56px); }
.hero-bottom a { flex-shrink: 0; }
.frequency-strip { font-size: 12px; }
.section-heading { align-items: start; }
.section-heading h2 { font-size: 64px; line-height: 1.1; }
.deep-cut h2 { font-size: 58px; line-height: 1.1; }
.about h2 { font-size: 68px; line-height: 1.1; }
.section-heading > p { font-size: 16px; padding-top: 36px; }
.collection-toolbar { flex-wrap: wrap; }
.mood-filters { min-width: 0; max-width: 100%; }
.mood-filters > button, .sort-control { font-size: 14px; }
.mood-filters button span { font-size: 12px; opacity: 1; }
.search-box input, .track-search input { font-size: 16px; line-height: 1.5; }
#result-count, .card-meta, .genre-list, .tracklist-link { font-size: 12px; line-height: 1.5; }
.card-meta { flex-wrap: wrap; gap: 6px 14px; }
.card-title-row { align-items: start; }
.card-title { font-size: 33px; line-height: 1.2; min-width: 0; }
.card-description { font-size: 16px; line-height: 1.6; min-height: 0; max-width: none; }
.card-bottom { align-items: start; }
.text-button, .deep-cut-intro > p, .record-info > p, .discovery-play { font-size: 16px; line-height: 1.5; }
.deep-cut .text-button { position: static; }
.record-info h3 { font-size: 36px; line-height: 1.2; overflow-wrap: break-word; }
.discovery-play > span:nth-child(2) { max-width: none; }
#discovery-time { font-size: 12px; }
.record-label > span { font-size: 24px; }
.record-label small { font-size: 8px; }
.about h2 { max-width: 600px; }
.about-copy p:first-child { font-size: 24px; line-height: 1.5; }
.about-copy p:nth-child(2), .values-line { font-size: 16px; line-height: 1.7; }
.values-line > span { max-width: none; }
.footer-logo { font-size: 100px; line-height: 1; }
.footer-logo span { font-size: 12px; line-height: 1.5; margin-top: 8px; }
footer > div p { font-size: 24px; line-height: 1.4; }
footer a:not(.footer-logo) { font-size: 14px; }
.footer-note { font-size: 12px; }
.session-description h2 { font-size: 52px; line-height: 1.15; }
.session-description > p { font-size: 16px; line-height: 1.6; }
.session-description > a, .session-description .player-help { font-size: 14px; }
.tracklist-heading h3 { font-size: 30px; line-height: 1.3; }
.tracklist-heading > span, .track-row .track-index, .track-time,
.tracklist-credit { font-size: 12px; line-height: 1.5; }
.track-row { grid-template-columns: 24px minmax(0, 1fr) 52px; }
.track-name { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.track-artist { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tracklist-credit { margin-top: 18px; }
.track-empty, .player-loading, #toast { font-size: 14px; }

@media (min-width: 1600px) {
  .hero h1 { font-size: 190px; }
}

@media (max-width: 1100px) {
  .hero h1 { font-size: 152px; }
  .hero-copy > p { font-size: 34px; }
  .about h2 { font-size: 58px; }
}

@media (max-width: 800px) {
  .site-header nav { gap: 18px; }
  .hero h1 { font-size: 132px; }
  .section-heading h2 { font-size: 52px; }
  .deep-cut h2 { font-size: 48px; }
  .about h2 { font-size: 56px; }
  .section-heading { flex-wrap: wrap; }
  .section-heading > p { padding-top: 0; }
  .frequency-strip { flex-wrap: wrap; height: auto; min-height: 52px; padding-block: 12px; gap: 12px 18px; }
  .frequency-strip svg { display: none; }
  .deep-cut .text-button { margin-top: 24px; }
}

@media (max-width: 520px) {
  .wordmark { font-size: 44px; gap: 8px; }
  .wordmark > span { font-size: 11px; }
  .header-actions { gap: 10px; }
  .channel-link { font-size: 14px; }
  .hero { min-height: 540px; }
  .hero-copy { top: 70px; max-width: calc(100% - 44px); }
  .hero h1 { font-size: 116px; }
  .hero h1 > span { margin: 6px 0 22px; }
  .hero-copy > p { font-size: 30px; max-width: 290px; margin-left: 0; }
  .section-heading h2 { font-size: 44px; }
  .deep-cut h2 { font-size: 45px; }
  .about h2 { font-size: 47px; }
  .session-description h2 { font-size: 40px; }
  .play-primary { gap: 12px; margin-top: 24px; }
  .play-primary > span:last-child { font-size: 14px; }
  .hero-bottom > span { max-width: calc(100% - 56px); line-height: 1.6; }
  .frequency-strip { font-size: 12px; }
  .frequency-strip > span { flex: 1 1 40%; text-align: center; }
  .frequency-strip .strip-last { display: block; }
  .mood-filters { gap: 24px; }
  .search-row { flex-wrap: wrap; gap: 4px; }
  #result-count { width: 100%; }
  .record-feature { flex-wrap: wrap; gap: 24px; }
  .record-disc { width: 144px; height: 144px; }
  .record-label { width: 86px; height: 86px; padding-top: 8px; padding-bottom: 10px; }
  .record-info { flex: 1 1 220px; }
  .values-line { flex-wrap: wrap; gap: 14px 24px; }
  .player-wrap { min-height: 0; }
}