/* A percentage of the browser's default, so a larger browser setting still counts. */
html[data-text-size="112"] { font-size: 112%; }
html[data-text-size="125"] { font-size: 125%; }
html[data-text-size="140"] { font-size: 140%; }

/* Fixed size: sized in rem, the brand outgrew a phone's width at larger text. */
html[data-text-size] nav .brand { font-size: 22px; }
html[data-text-size] nav .brand-mark { height: 44px; width: 62px; }

/* Prose only; controls, labels and code keep their own font and spacing. */
html[data-line-spacing="relaxed"] :is(p, li, dd, .question, .section-scenario, .why-box, .plan-excerpt,
  .problem-statement, .hint-body, .ref-body, .review-item, .alternate-item, .follow-up-turn, .duck-turn) {
  line-height: 1.9;
}
html[data-line-spacing="loose"] :is(p, li, dd, .question, .section-scenario, .why-box, .plan-excerpt,
  .problem-statement, .hint-body, .ref-body, .review-item, .alternate-item, .follow-up-turn, .duck-turn) {
  line-height: 2.2;
}

/* A browser fetches a face only when the page uses it, so only those who pick this font download it. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/atkinson-hyperlegible-latin-400-normal-6ec68adf.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/atkinson-hyperlegible-latin-700-normal-00cbe79e.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

html[data-font="atkinson"] :is(p, li, dd, .question, .section-scenario, .why-box, .plan-excerpt,
  .problem-statement, .hint-body, .ref-body, .review-item, .alternate-item, .follow-up-turn, .duck-turn) {
  font-family: "Atkinson Hyperlegible", sans-serif;
}