/* The reading pages (How to play, About, the genre quizzes): musicly.css for the look, this for the article layout.
   They're made by tools/make_pages.py — edit that, not the pages. */
.topbar a{color:inherit;text-decoration:none}
.topbar a.icon-btn{color:var(--muted)}
.topbar a.icon-btn:hover{color:var(--text)}
body[data-screen=page] .nav-pill{display:inline-flex} /* musicly.css shows it on the game's home screen only */

.page{max-width:640px;margin:0 auto}
.crumbs{margin:10px 0 0;font-size:13px;color:var(--faint)}
.page .crumbs a[href]{color:var(--muted);text-decoration:none}
.page .crumbs a[href]:hover{color:var(--text)}
.page .lede{margin:10px 0 20px;font-size:18px;color:var(--muted);line-height:1.5}
.page h2{margin:32px 0 10px;font-size:21px;font-weight:700;letter-spacing:-.01em}
.page p,.page li{color:#dcdce2;line-height:1.6}
.page ol,.page ul{padding-left:22px}
.page li{margin:6px 0}
.page li::marker{color:var(--faint)}
.page a:not(.btn){color:var(--accent);text-underline-offset:3px}
.page .pts{max-width:420px}

.cta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.cta .btn{text-decoration:none;color:var(--text)}
.cta .btn-primary{color:var(--accent-ink)}

.page .artists{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.page .artists li{margin:0;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;color:var(--text)}

.page .quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.page .quiz-grid li{margin:0}
.page .quiz-grid a{display:block;height:100%;box-sizing:border-box;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font-weight:600;text-decoration:none;transition:background .15s,border-color .15s}
.page .quiz-grid a:hover{border-color:var(--line-2);background:var(--surface-2)}
.quiz-grid span{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--faint)}