@charset "UTF-8";
/* ==========================================================================
   Not a Book — styles.css
   --------------------------------------------------------------------------
   ALMOST EVERYTHING THIS PAGE LOOKS LIKE IS SOMEWHERE ELSE, ON PURPOSE.

     /biblegames/shared/theme.css   the night sky, the golds, the three levels
                                    of ink, the type stacks, the focus ring,
                                    the self-check report panel.
     /biblegames/shared/quiz.css    the whole four-choice layout: the no-scroll
                                    flex column, the scoreboard, the answer
                                    grid, the feedback panel, the score card.
     this file                      only what belongs to Not a Book alone.

   index.php loads them in that order, so anything here overrides both.

   The test for whether a rule belongs in this file: WOULD WHO DID IT WANT IT
   DIFFERENT? If no, it goes in quiz.css and every quiz gets it. If yes, here.

   To re-theme the whole site: shared/theme.css.
   To change every quiz on the site: shared/quiz.css.
   To change this one game: below.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. The clue                                                                */
/* -------------------------------------------------------------------------- */

/*
 * The clue is a description of something, not a quotation and not a question —
 * "The mountain where God gave the law to Moses." So it is set upright, in the
 * display face, like a caption under a painting, which is exactly how Who Did
 * It sets its deeds.
 *
 * The measure is a little wider than that game's because clues carry a
 * subordinate clause more often than deeds do, and breaking one over five short
 * lines makes it harder to hold in the head while reading four book names.
 */
.ask {
  max-width: 42ch;
  font-style: normal;
}

/* -------------------------------------------------------------------------- */
/* 2. The four names                                                          */
/* -------------------------------------------------------------------------- */

/*
 * The answers here are the names of books of the Bible, and they are set as
 * such: this is the one game on the site where the BUTTON is the thing being
 * taught, so it is given a little more presence than a plain choice.
 *
 * The longest names in the bank are "1 Thessalonians" and "Song of Solomon" at
 * fifteen characters, which is shorter than Who Did It's longest people. So the
 * ceiling can go slightly UP rather than down, and the numbered books stay
 * legible on a 320px screen.
 *
 * `font-variant-numeric` is the small point that matters: without it the 1 and
 * the 2 in "1 Kings" and "2 Kings" are set as ordinary text figures and sit at
 * different heights from the capitals beside them. Lining figures put them on
 * the cap line, where a book number belongs.
 */
:root {
  --ans-font: clamp(0.88rem, 3vw, 1.28rem);
}

.ans__name {
  font-variant-numeric: lining-nums;
}

/* -------------------------------------------------------------------------- */
/* 3. Print                                                                   */
/* -------------------------------------------------------------------------- */

/* The blanket print rules are in quiz.css. Nothing here needs adding. */