/* Final polish: retain the chapter layout and refine the homepage type scale. */
:root {
  --ui-font: "WS Inter", "WS Source Han Sans", "Source Han Sans SC", "Source Han Sans CN", "思源黑体", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --title-font: "WS Newsreader", "WS Source Han Serif", "Source Han Serif SC", "Source Han Serif CN", "思源宋体", "Songti SC", "SimSun", Georgia, serif;
}

/* Latin faces cover English; the second face supplies Chinese glyphs. */
body { font-family: var(--ui-font); }
h1, h2, h3, h4,
.home-v2 h1, .home-v2 h2, .home-v2 h3,
.story-aside h2, .feature-info h2,
.cover-title, .art .art-name,
.song-heading strong, .next-card strong {
  font-family: var(--title-font);
}
.edition, .eyebrow, .mono,
.cover-title span, .record-label span,
.overview-head time, .overview-head > .mono, .overview-head > span,
.timeline-ticks, .timeline-legend time, .timeline-legend small,
.time, .map-axis, .map-key small, .map-compare small,
.finish-time, .mq-clock, .concept-row > b,
.theory-figure svg text, .synth-panel svg text {
  font-family: var(--ui-font);
}
.time, .map-axis, .timeline-ticks, .timeline-legend time,
.overview-head time, .mq-clock { font-variant-numeric: tabular-nums; }
.atlas-progress strong { font-family: var(--title-font); }

/* Keep the current wordmark after removing the compact reader stylesheet. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  white-space: nowrap;
  font-family: var(--title-font);
}
.brand span {
  display: inline-block;
  margin: 0;
  font-size: 11px;
  letter-spacing: .35px;
  line-height: 1.5;
}
.record-label { font-family: var(--title-font); line-height: 1.2; letter-spacing: 1px; }
.record-label span {
  display: block;
  max-width: 94%;
  margin-top: 5px;
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .1px;
  text-align: center;
}
.song-card .record-label span { font-size: 5px; }

/* The question carries the invitation; title and artist provide a quiet byline. */
.home-v2 { font-family: var(--ui-font); }
.home-v2 .home-intro > p {
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .05px;
  color: #66715e;
}
.home-v2 .home-description {
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .05px;
}
.home-v2 .section-label { letter-spacing: .1px; }
.home-v2 .section-label small { font-size: 12px; font-weight: 400; }
.home-v2 .song-card { align-items: stretch; }
.home-v2 .song-card > h3 {
  margin: 17px 0 4px;
  font-family: var(--title-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.2px;
  color: #343b2f;
  overflow-wrap: break-word;
}
.home-v2 .song-card > p:not(.card-question) {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08px;
  color: #73806a;
}
.home-v2 .song-card .card-question {
  margin: 17px 0 20px;
  min-height: 3.5em;
  font-family: var(--title-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .05px;
  color: #293324;
  text-wrap: pretty;
  line-break: strict;
  overflow-wrap: break-word;
}
.home-v2 .song-card .tag {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .1px;
  color: #647359;
}

/* Retain the question entry in the player, including touch-sized mobile use. */
#player .player-ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  flex-shrink: 0;
  max-width: none;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 12px;
  color: #e4efce;
  border-color: #7d9060;
  border-radius: 4px;
  letter-spacing: 0;
}
#player .player-ask:hover { background: #394a2b; border-color: #bdcf91; }

@media (min-width: 901px) and (max-width: 1100px) {
  .home-v2 .song-card > h3 { font-size: 16px; }
  .home-v2 .song-card .card-question { font-size: 16px; }
}
@media (max-width: 760px) {
  .brand { gap: 9px; }
  .brand span { display: inline-block; margin: 0; font-size: 10px; }
  .home-v2 .song-card > h3 { margin-top: 15px; font-size: 16px; }
  .home-v2 .song-card .card-question { margin: 14px 0 18px; font-size: 16px; }
  .home-v2 .song-card .tag { font-size: 12px; }
  #player .player-top {
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
  }
  #player .player-btn { grid-row: 1; grid-column: 1; width: 39px; height: 39px; }
  #player .player-title {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }
  #player .player-title small { font-size: 10px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
  #player .player-ask { grid-row: 1; grid-column: 3; font-size: 11px; padding: 8px 10px; }
  #player .timeline { grid-row: 2; grid-column: 1 / 3; min-width: 0; width: 100%; margin: 0; }
  #player .timeline input { display: block; min-height: 25px; }
  #player .time { grid-row: 2; grid-column: 3; min-width: 0; text-align: right; font-size: 10px; }
  #player .volume, #player .player-bottom { display: none; }
}
@media (max-width: 420px) {
  .brand { flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; }
  .brand span { display: inline-block; font-size: 8.5px; letter-spacing: .15px; line-height: 1.2; }
  .home-v2 .song-card > h3 { font-size: 15px; line-height: 1.5; }
  .home-v2 .song-card > p:not(.card-question) { font-size: 11px; }
  .home-v2 .song-card .card-question {
    font-size: 15px !important;
    line-height: 1.8;
    min-height: 5.4em;
    margin: 13px 0 17px;
  }
  .home-v2 .song-card .tag { font-size: 11px; letter-spacing: 0; }
}