/* The pub quiz library (tools/pub-quizzes.html and tools/pub-quizzes/*.html,
   written by scripts/build-pub-quizzes.mjs). Buttons and the eyebrow come
   from css/tabs/class-builder.css; this is the page around them. Colours are
   the site's tokens, so it follows dark mode and the accessible palette. */
.pqz-page { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
.pqz-head { padding: 12px 0 8px; }
.pqz-head h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 8px 0 12px; }
.pqz-head h1 em { font-style: italic; color: var(--riso-pink-ink, var(--ink)); }
.pqz-head p { font-size: 18px; line-height: 1.55; max-width: 62ch; }
.pqz-crumb { font-size: 14px; color: var(--ink-faint); margin-bottom: 4px; }
.pqz-crumb a { color: inherit; }
.pqz-page h2 { font-family: var(--font-display); font-size: 28px; margin: 40px 0 10px; }
.pqz-page h3 { font-family: var(--font-display); font-size: 19px; margin: 24px 0 8px; }
.pqz-page p, .pqz-page li { line-height: 1.55; }
.pqz-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pqz-grid a { display: block; height: 100%; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper-white); color: var(--ink); text-decoration: none; transition: transform .12s; }
.pqz-grid a:hover { transform: translateY(-1px); }
.pqz-round { margin: 20px 0; padding: 16px 18px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper-white); }
.pqz-round h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pqz-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.pqz-blurb { margin: 0 0 8px; color: var(--ink-dim); }
.pqz-q { padding-left: 24px; }
.pqz-q li { margin: 6px 0; }
.pqz-q li span { display: block; }
.pqz-emo li, .pqz-vw li { font-size: 20px; }
.pqz-vw li { font-family: var(--font-mono); letter-spacing: .08em; }
.pqz-ans { margin: 10px 0 0; }
.pqz-ans summary { cursor: pointer; font-weight: 650; }
.pqz-ans ol { padding-left: 24px; }
.pqz-order { padding-left: 24px; }
.pqz-order li { margin: 8px 0; }
.pqz-order li span:not(.pqz-tag) { color: var(--ink-dim); }
.pqz-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.pqz-tag.rev { background: color-mix(in srgb, var(--riso-green) 24%, var(--paper-white)); }
.pqz-tag.fun { background: color-mix(in srgb, var(--riso-pink) 26%, var(--paper-white)); }
.pqz-more ul { columns: 2 280px; padding-left: 20px; }
@media print { .pqz-ans:not([open]) ol { display: block; } }
.pqz-note { font-size: 15px; color: var(--ink-dim); max-width: 62ch; margin: 10px 0 0; }