/* The tour of the Commonwealth (/guide): the stops as a numbered walk down
   the page, each line under its speaker's name as in the game's chat, and
   plain audio players. Uses the tokens of site.css. The poster head
   (.page-hero) is site.css's own. */

.guide-section { margin-top: 2.5rem; }
.guide-how p, .guide-mine p { max-width: var(--measure); }

/* The citizen's own tour, beside the badge (faded until it is theirs). */
.guide-mine { border-left: 6px solid var(--civic); padding: 0.25rem 0 0.25rem 1rem; }
.guide-mine--walked { display: flex; gap: 1rem; align-items: flex-start; }
.guide-mine--walked .medal-art { flex: none; }
.guide-mine p { margin: 0 0 0.5rem; }

.guide-commands { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 1rem 0; }
.guide-commands dt { font-weight: 650; }
.guide-commands dd { margin: 0; }
@media (max-width: 36rem) {
  .guide-commands { grid-template-columns: 1fr; }
  .guide-commands dd { margin-bottom: 0.5rem; }
}

/* The voices: the NPCs' faces from their skins */
.guide-voices {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem 1.5rem;
}
.guide-voice { display: flex; gap: 0.75rem; align-items: flex-end; border-top: 3px solid var(--ink); padding-top: 0.6rem; }
.guide-voice p { margin: 0; }
.guide-voice__skin { flex: none; width: 3rem; }

/* The stops, numbered like the stations of the walk */
.guide-stops { list-style: none; padding: 0; margin: 1rem 0 0; }
.guide-stop { border-top: 3px solid var(--ink); padding: 0.9rem 0 1.5rem; }
.guide-stop--reached { border-top-color: var(--civic); }
.guide-stop__title { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 0.35rem; font-size: 1.3rem; }
.guide-stop__number {
  flex: none; display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 0.3rem;
  background: var(--black); color: var(--gold); font-weight: 800; font-stretch: 112%; font-size: 1.1rem;
}
.guide-stop--reached .guide-stop__number { background: var(--civic); color: var(--cream); }
.guide-stop__where { color: var(--ink-soft); margin: 0 0 0.75rem; max-width: var(--measure); }
.guide-stop__mine { margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.guide-stop__mine:empty { display: none; }

/* A line: the speaker in gold on black, as in the game's chat; the words on paper */
.guide-clip { margin: 0 0 1rem; max-width: var(--measure); }
.guide-clip__speaker {
  display: inline-block; margin: 0; padding: 0.1rem 0.5rem; background: var(--black); color: var(--gold);
  font-size: 0.8rem; font-weight: 750; font-stretch: 115%; letter-spacing: 0.08em; text-transform: uppercase;
}
.guide-clip__text { margin: 0.35rem 0 0.4rem; font-size: 1.05rem; line-height: 1.5; }
.guide-clip__audio { display: block; width: 100%; max-width: 26rem; height: 2.25rem; }
.guide-voices + .empty { margin-top: 1rem; }