/* The Desk face: a printable, and a screen preview of that printable.
 *
 * Laid out for US Letter first. The screen rules exist so a teacher can read
 * the thing before printing it; the print rules are the deliverable. Anything
 * that is site furniture — the nav between sheet and key, the skip link —
 * leaves at @media print, because it is not on the paper a student holds.
 *
 * Colours are the site's, and every pair here was checked against WCAG AA the
 * same way the lesson pages were. --measure is the site's measurement ink,
 * 3.88:1 on white: the answer rule a student writes on is a graphic that has to
 * be seen to be used, so it does not get the decorative tint.
 */
:root {
  --warm-white: #fafaf9;
  --white: #fff;
  --ink: #171717;
  --ink-soft: #4f4a47;
  --brick: #8b3a3a;
  --forest: #456a38;
  --line: #ded9d0;
  --measure: #a57940;
  --display: "Big Shoulders Display", "Barlow Condensed", Impact, sans-serif;
  --label: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --body: ui-serif, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 28px 20px 60px;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 10px 16px; z-index: 10; }
.skip-link:focus { left: 0; }

.tools { max-width: 44rem; margin: 0 auto 18px; display: flex; gap: 18px; font-family: var(--label); font-size: 15px; font-weight: 700; }
.tools a { color: var(--brick); }

main { max-width: 44rem; margin: 0 auto; background: var(--white); border: 1px solid var(--line); padding: 40px 44px 32px; }

.eyebrow { margin: 0 0 4px; font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); }
h1 { margin: 0 0 14px; font-family: var(--display); font-size: 40px; line-height: 1.05; font-weight: 800; }
.lede { margin: 0 0 8px; color: var(--ink-soft); font-size: 16px; }

/* The name-and-date row. Two rules a student writes on, so they take the
   measurement ink rather than the decorative tint. */
.fill { display: flex; gap: 28px; margin: 0 0 6px; }
.fill p { display: flex; align-items: baseline; gap: 8px; margin: 0; flex: 1; }
.fill span { font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.rule { display: block; flex: 1; min-width: 90px; border-bottom: 1px solid var(--measure); height: 1.1em; }

.items { margin: 26px 0 0; padding: 0 0 0 2.2em; }
.item { margin: 0 0 22px; padding: 0; break-inside: avoid; }
.item::marker { font-family: var(--label); font-weight: 700; color: var(--ink-soft); }
.prompt { margin: 0 0 6px; }
.blank { margin: 0; display: flex; }
.blank .rule { min-width: 100%; }

/* The key. The answer is the thing being looked up, so it leads; the reason is
   support and is set back from it. */
.answer { margin: 0; font-weight: 700; color: var(--forest); }
.tick { font-family: var(--label); }
.why { margin: 2px 0 0; color: var(--ink-soft); font-size: 15px; }

.sheet-foot { margin: 30px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--label); font-size: 13px; color: var(--ink-soft); }
.sheet-foot p { margin: 0; }

@media (max-width: 34rem) {
  main { padding: 26px 20px 22px; }
  h1 { font-size: 32px; }
  .fill { flex-direction: column; gap: 10px; }
}

/* --- the paper --------------------------------------------------------- */
@media print {
  @page { size: letter portrait; margin: 0.6in; }
  body { background: #fff; padding: 0; font-size: 11.5pt; line-height: 1.4; }
  /* Site furniture is not on the paper. */
  .tools, .skip-link { display: none; }
  main { max-width: none; border: 0; padding: 0; }
  h1 { font-size: 24pt; }
  .eyebrow { font-size: 8.5pt; }
  .items { margin-top: 16pt; }
  .item { margin-bottom: 15pt; }
  /* Black on white: a photocopier turns the forest green into a mid grey and
     the answer stops being the thing that stands out on the page. */
  .answer { color: #000; }
  .why, .sheet-foot, .eyebrow, .fill span, .item::marker { color: #333; }
  .rule { border-bottom-color: #000; }
}