/* A contemporary screen Song treatment: substantial, compact and less like ordinary book typesetting. */
.hero h1 {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: clamp(54px, 4.75vw, 74px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.055em;
  font-synthesis: none;
  -webkit-text-stroke: .1px currentColor;
  transform: scaleX(.975);
  transform-origin: left center;
}

/* One compact rhythm: title -> episode block -> progress are separated by 10px. */
.card-content {
  min-height: 0 !important;
  padding: 14px 16px 15px !important;
}
.next-episode {
  margin-top: 0 !important;
  padding-top: 10px !important;
}
.episode-name {
  margin-top: 4px !important;
  min-height: 1.45em !important;
}
.progress-row {
  margin-top: 8px !important;
  padding-top: 0 !important;
}

/* The four extra palettes now form two airy pastels and two deep, decisive colors. */
html[data-theme="clay"] {
  --md-sys-color-primary: #c98278;
  --md-sys-color-primary-container: #fae9e5;
  --md-sys-color-on-primary-container: #4a1712;
  --md-sys-color-secondary-container: #f4e7e3;
  --md-sys-color-on-secondary-container: #3b201c;
}
html[data-theme="sage"] {
  --md-sys-color-primary: #84a07f;
  --md-sys-color-primary-container: #e8f2e5;
  --md-sys-color-on-primary-container: #183218;
  --md-sys-color-secondary-container: #e7eee5;
  --md-sys-color-on-secondary-container: #213021;
}
html[data-theme="slate"] {
  --md-sys-color-primary: #265d8f;
  --md-sys-color-primary-container: #d6e7f7;
  --md-sys-color-on-primary-container: #071f35;
  --md-sys-color-secondary-container: #dce7f0;
  --md-sys-color-on-secondary-container: #142735;
}
html[data-theme="mauve"] {
  --md-sys-color-primary: #733878;
  --md-sys-color-primary-container: #eed9f0;
  --md-sys-color-on-primary-container: #300a33;
  --md-sys-color-secondary-container: #eadfea;
  --md-sys-color-on-secondary-container: #312032;
}
.theme-options [data-theme="clay"] i { background: #e7aaa2; }
.theme-options [data-theme="sage"] i { background: #b7cfb2; }
.theme-options [data-theme="slate"] i { background: #265d8f; }
.theme-options [data-theme="mauve"] i { background: #733878; }

@media (max-width: 719px) {
  .hero h1 {
    font-size: clamp(44px, 12vw, 58px);
    letter-spacing: -.05em;
    transform: none;
  }
  .card-content { padding: 13px 14px 14px !important; }
}