/* =====================================================================
   VA CLASSES, learn.css
   Styles for the Learning Hub (topic index + topic articles + practice).
   Built ENTIRELY on the tokens in colors_and_type.css / components.css.
   No new colours, no new fonts. Loaded AFTER site.css + enhance.css.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* SHARED                                                              */
/* ------------------------------------------------------------------ */
.learn, .learn * { box-sizing: border-box; }
.learn { font-family: var(--font-sans); color: var(--fg-1); }

.lrn-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font: var(--caption); color: var(--fg-2); margin: 0 0 18px;
}
.lrn-crumb a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid transparent; }
.lrn-crumb a:hover { color: var(--ink-900); border-bottom-color: var(--brand-yellow); }
.lrn-crumb .sep { color: var(--cloud-2); }
.lrn-crumb b { color: var(--ink-900); font-weight: var(--w-semi); }

/* Chip row used for grade / strand / time */
.lrn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.lrn-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font: var(--w-semi) 13px/1 var(--font-sans);
  padding: 8px 12px; border-radius: var(--r-pill);
  background: var(--white); border: 1.5px solid var(--cloud-2); color: var(--ink-800);
}
.lrn-tag svg { width: 15px; height: 15px; }
.lrn-tag.is-yellow { background: var(--brand-yellow-soft); border-color: var(--brand-yellow-deep); }

/* ------------------------------------------------------------------ */
/* HUB, /learn/                                                        */
/* ------------------------------------------------------------------ */
.lh-hero { padding: 64px 0 44px; background: var(--paper); border-bottom: 1.5px solid var(--cloud); }
.lh-hero .eyebrow {
  font: var(--overline); letter-spacing: var(--tracking-over); text-transform: uppercase;
  color: var(--brand-yellow-deep); margin: 0 0 12px;
}
.lh-hero h1 {
  font: var(--w-black) 3.1rem/1.03 var(--font-display); letter-spacing: var(--tracking-display);
  margin: 0; color: var(--ink-900); max-width: 18ch;
}
.lh-hero p { font: var(--body-lg); color: var(--fg-2); margin: 16px 0 0; max-width: 58ch; }

/* Subject filter row */
.lh-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Topic grid */
.lh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px; margin-top: 8px;
}
.lh-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--white); border: 2px solid var(--ink-900); border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard); padding: 22px 22px 20px;
  text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.lh-card:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-lg); }
.lh-card .ic {
  width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--brand-yellow); border: 2px solid var(--ink-900); color: var(--ink-900); flex: none;
}
.lh-card h3 { font: var(--h3); font-size: 1.22rem; letter-spacing: var(--tracking-tight); margin: 4px 0 0; color: var(--ink-900); }
.lh-card p { font: var(--body-sm); color: var(--fg-2); margin: 0; flex: 1; }
.lh-card .foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding-top: 12px; border-top: 1.5px solid var(--cloud);
  font: var(--caption); color: var(--fg-2);
}
.lh-card .go { display: inline-flex; align-items: center; gap: 5px; font: var(--label); color: var(--ink-900); }

/* Card in "coming soon" state */
.lh-card.is-soon { border-style: dashed; border-color: var(--cloud-2); box-shadow: none; background: var(--paper-2); pointer-events: none; }
.lh-card.is-soon .ic { background: var(--cloud); border-color: var(--cloud-2); color: var(--stone-600); }
.lh-card.is-soon h3, .lh-card.is-soon .go { color: var(--stone-600); }

/* ------------------------------------------------------------------ */
/* ARTICLE LAYOUT                                                      */
/* ------------------------------------------------------------------ */
.art-head { padding: 46px 0 34px; background: var(--paper); }
.art-head h1 {
  font: var(--w-black) 2.9rem/1.05 var(--font-display); letter-spacing: var(--tracking-display);
  margin: 0; color: var(--ink-900); max-width: 20ch;
}
.art-head .lede { font: var(--body-lg); color: var(--fg-2); margin: 16px 0 0; max-width: 60ch; }

.art-shell { display: grid; grid-template-columns: 1fr 264px; gap: 52px; align-items: start; padding-bottom: 30px; }
.art-body { min-width: 0; }

/* Sticky table of contents */
.art-toc { position: sticky; top: 92px; }
.art-toc .toc-in {
  background: var(--white); border: 1.5px solid var(--cloud); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 18px 18px 14px;
}
.art-toc h4 {
  font: var(--overline); letter-spacing: var(--tracking-over); text-transform: uppercase;
  color: var(--stone-600); margin: 0 0 12px;
}
.art-toc a {
  display: block; font: var(--body-sm); color: var(--fg-2); text-decoration: none;
  padding: 7px 0 7px 12px; border-left: 2px solid var(--cloud);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.art-toc a:hover { color: var(--ink-900); border-left-color: var(--brand-yellow-deep); }
.art-toc a.is-active { color: var(--ink-900); font-weight: var(--w-semi); border-left-color: var(--brand-yellow); }

/* ------------------------------------------------------------------ */
/* ARTICLE TYPOGRAPHY                                                  */
/* ------------------------------------------------------------------ */
.art-body h2 {
  font: var(--h2); font-size: 1.85rem; letter-spacing: -0.025em;
  color: var(--ink-900); margin: 52px 0 14px; scroll-margin-top: 96px;
}
.art-body h2:first-child { margin-top: 0; }
.art-body h3 {
  font: var(--h3); font-size: 1.28rem; letter-spacing: var(--tracking-tight);
  color: var(--ink-900); margin: 32px 0 10px; scroll-margin-top: 96px;
}
.art-body p { font: var(--body); color: var(--ink-800); margin: 0 0 16px; max-width: 68ch; }
.art-body ul, .art-body ol { margin: 0 0 18px; padding-left: 22px; max-width: 68ch; }
.art-body li { font: var(--body); color: var(--ink-800); margin-bottom: 9px; }
.art-body li::marker { color: var(--brand-yellow-deep); font-weight: var(--w-bold); }
.art-body strong { font-weight: var(--w-bold); color: var(--ink-900); }
.art-body a { color: var(--ink-900); text-decoration: none; border-bottom: 2px solid var(--brand-yellow); }
.art-body a:hover { background: var(--brand-yellow-soft); }

/* ------------------------------------------------------------------ */
/* MATHS TYPOGRAPHY                                                    */
/* ------------------------------------------------------------------ */
/* Both forms are a real numerator OVER a denominator. The difference is
   size and how they sit in the flow.

   .fr  INLINE, for a fraction inside a sentence. Sized and offset so its
        whole box fits INSIDE the line box of the surrounding text. That is
        the constraint that matters: get it wrong and every line containing
        a fraction grows taller than its neighbours, which is what made the
        first version look like the numbers were sliding around. There is a
        measured check for this, see readability/verification, lineBoxDelta
        must be 0. 0.68em at -0.44em is the LARGEST that never stretches a
        line box at 1.8 line-height, found by sweeping sizes in a real
        browser, not by eye. Going one step up to 0.70em stretches 4 blocks
        on desktop and 5 on mobile. Re-measure if you change either number.

   .fx  DISPLAY, full size, for .eq strips, quiz options and diagrams,
        where the fraction owns its own box and can be as tall as it likes. */
.fr {
  display: inline-block; vertical-align: -0.44em;
  font-size: 0.68em; line-height: 1; text-align: center;
  font-weight: var(--w-bold); font-feature-settings: "tnum" 1;
  margin: 0 0.1em;
}
.fr > span { display: block; padding: 0 0.16em; }
.fr > span + span {
  border-top: 0.1em solid currentColor;
  margin-top: 0.06em; padding-top: 0.06em;
}

.fx {
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1.02; font-weight: var(--w-bold); font-feature-settings: "tnum" 1;
  vertical-align: middle;
}
.fx > span { padding: 0 0.36em; }
.fx > span + span {
  border-top: 0.11em solid currentColor;
  margin-top: 0.16em; padding-top: 0.16em;
}

/* Prose that can contain an inline fraction needs headroom in the line box.
   1.72 also just reads better at this measure. */
.art-body p, .art-body li, .wex-q, .wex-steps > li,
.q-text, .q-exp, .callout p { line-height: 1.8; }

/* Display equation strip */
.eq {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin: 26px 0 28px; padding: 24px 20px;
  background: var(--white); border: 1.5px solid var(--cloud); border-radius: var(--r-md);
  font-size: 1.6rem; color: var(--ink-900);
}
.eq .op { font-weight: var(--w-semi); color: var(--ink-900); font-size: 0.9em; }

/* A calculation inside a sentence. Tabular figures, no monospace, because
   monospace next to Hanken Grotesk reads as a code snippet, not as maths. */
.mth {
  font-weight: var(--w-bold); color: var(--ink-900);
  white-space: nowrap; font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ */
/* DIAGRAM FIGURE                                                      */
/* ------------------------------------------------------------------ */
.dgm {
  margin: 26px 0 28px; background: var(--white);
  border: 2px solid var(--ink-900); border-radius: var(--r-lg); box-shadow: var(--shadow-hard);
  padding: 24px 22px 18px; overflow: hidden;
}
.dgm.plain { border: 1.5px solid var(--cloud); box-shadow: var(--shadow-sm); }
.dgm svg { display: block; width: 100%; height: auto; max-width: 100%; }
.dgm figcaption {
  font: var(--caption); color: var(--fg-2); margin-top: 16px; padding-top: 13px;
  border-top: 1.5px solid var(--cloud); text-align: left;
}
.dgm figcaption b { color: var(--ink-900); font-weight: var(--w-semi); }

/* Responsive diagrams. These defaults MUST sit above the media queries:
   equal specificity means source order decides, and when they lived at the
   bottom of the file they silently overrode the mobile swap, so phones kept
   getting the wide drawing shrunk to illegibility. */
.dg-wide, .dg-narrow { margin-left: auto; margin-right: auto; }
.dg-wide   { display: block; }
.dg-narrow { display: none; }

/* SVG helper classes so diagrams inherit the brand palette */
.dg-fill    { fill: var(--brand-yellow); }
.dg-fill-2  { fill: var(--brand-yellow-soft); }
.dg-empty   { fill: var(--white); }
.dg-paper   { fill: var(--paper-2); }
.dg-stroke  { stroke: var(--ink-900); fill: none; }
.dg-hair    { stroke: var(--cloud-2); fill: none; }
.dg-ink     { fill: var(--ink-900); }
.dg-muted   { fill: var(--stone-600); }
.dg-label   { font: var(--w-bold) 15px/1 var(--font-sans); fill: var(--ink-900); }
.dg-label-sm{ font: var(--w-semi) 12.5px/1 var(--font-sans); fill: var(--stone-600); }
.dg-num     { font: var(--w-bold) 17px/1 var(--font-display); fill: var(--ink-900); }

/* ------------------------------------------------------------------ */
/* CALLOUTS                                                            */
/* ------------------------------------------------------------------ */
.callout {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--r-md); margin: 24px 0 26px;
  border: 1.5px solid var(--cloud);
  background: var(--white);
}
.callout .c-ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center; }
.callout .c-ic svg { width: 19px; height: 19px; }
.callout .c-bd { min-width: 0; }
.callout h4 { font: var(--w-bold) 15px/1.3 var(--font-sans); margin: 0 0 6px; color: var(--ink-900); }
.callout p { font: var(--body-sm); color: var(--ink-800); margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }

.callout.rule { background: var(--brand-yellow-wash); border-color: var(--brand-yellow-deep); }
.callout.rule .c-ic { background: var(--brand-yellow); color: var(--ink-900); }
.callout.warn { background: var(--danger-tint); border-color: #F0B6A9; }
.callout.warn .c-ic { background: var(--danger); color: var(--white); }
.callout.tip { background: var(--info-tint); border-color: #BCCDF3; }
.callout.tip .c-ic { background: var(--info); color: var(--white); }

/* ------------------------------------------------------------------ */
/* WORKED EXAMPLES                                                     */
/* ------------------------------------------------------------------ */
.wex {
  background: var(--white); border: 2px solid var(--ink-900); border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard); margin: 26px 0 30px; overflow: hidden;
}
.wex-head {
  display: flex; align-items: center; gap: 12px;
  background: var(--ink-900); color: var(--fg-on-dark); padding: 15px 20px;
}
.wex-head .n {
  width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--brand-yellow); color: var(--ink-900);
  display: grid; place-items: center; font: var(--w-black) 14px/1 var(--font-display); flex: none;
}
.wex-head h3 { font: var(--w-bold) 16px/1.3 var(--font-sans); margin: 0; color: var(--fg-on-dark); letter-spacing: 0; }
.wex-q {
  padding: 18px 20px; background: var(--brand-yellow-wash); border-bottom: 1.5px solid var(--cloud);
  font: var(--w-semi) 1.0625rem/1.5 var(--font-sans); color: var(--ink-900);
}
.wex-steps { list-style: none; margin: 0; padding: 6px 20px 18px; counter-reset: st; }
.wex-steps > li {
  position: relative; padding: 14px 0 14px 40px; border-bottom: 1px dashed var(--cloud);
  font: var(--body); color: var(--ink-800); margin: 0; max-width: none;
}
.wex-steps > li:last-child { border-bottom: none; }
.wex-steps > li::before {
  counter-increment: st; content: counter(st);
  position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-2); border: 1.5px solid var(--cloud-2); color: var(--stone-600);
  display: grid; place-items: center; font: var(--w-bold) 12px/1 var(--font-sans);
}
.wex-ans {
  display: flex; align-items: center; gap: 10px; margin: 10px 20px 20px; padding: 13px 16px;
  background: var(--success-tint); border: 1.5px solid #A9D7BC; border-radius: var(--r-sm);
  font: var(--w-bold) 16px/1.3 var(--font-sans); color: #14663A;
}
.wex-ans svg { width: 19px; height: 19px; flex: none; }

/* ------------------------------------------------------------------ */
/* PRACTICE / MCQ ENGINE                                               */
/* ------------------------------------------------------------------ */
.quiz {
  background: var(--paper-2); border: 2px solid var(--ink-900); border-radius: var(--r-xl);
  box-shadow: var(--shadow-hard-lg); padding: 26px 26px 24px; margin: 30px 0 34px;
}
.quiz-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.quiz-top h3 { font: var(--h3); font-size: 1.35rem; letter-spacing: var(--tracking-tight); margin: 0 0 5px; color: var(--ink-900); }
.quiz-top p { font: var(--body-sm); color: var(--fg-2); margin: 0; }
.quiz-score {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  background: var(--white); border: 2px solid var(--ink-900); border-radius: var(--r-pill);
  padding: 9px 16px; font: var(--w-bold) 14px/1 var(--font-sans); color: var(--ink-900);
}
.quiz-score .dotline { display: flex; gap: 4px; }
.quiz-score .d { width: 9px; height: 9px; border-radius: 50%; background: var(--cloud-2); }
.quiz-score .d.ok { background: var(--success); }
.quiz-score .d.no { background: var(--danger); }

.q-card {
  background: var(--white); border: 1.5px solid var(--cloud); border-radius: var(--r-lg);
  padding: 20px 20px 18px; margin-bottom: 16px;
  transition: border-color var(--dur) var(--ease-out);
}
.q-card.answered { border-color: var(--cloud-2); }
.q-num {
  font: var(--overline); letter-spacing: var(--tracking-over); text-transform: uppercase;
  color: var(--brand-yellow-deep); margin: 0 0 8px;
}
.q-text { font: var(--w-semi) 1.0625rem/1.5 var(--font-sans); color: var(--ink-900); margin: 0 0 16px; }
.q-fig { margin: 0 0 16px; background: var(--paper); border: 1.5px solid var(--cloud); border-radius: var(--r-md); padding: 14px; }
.q-fig svg { display: block; width: 100%; height: auto; }

/* Short answers (a fraction, a number) sit two to a row so the card does not
   become a tall column of mostly empty buttons. learn.js adds .is-wide when
   any option is long enough to need the full width. */
.q-opts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-opts.is-wide { grid-template-columns: 1fr; }
.q-opt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  min-height: 58px;
  background: var(--white); border: 1.5px solid var(--cloud-2); border-radius: var(--r-sm);
  padding: 10px 14px; cursor: pointer; font: var(--body); color: var(--ink-800);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.q-opt .fx { font-size: 1.15rem; }
.q-opts:not(.is-wide) .q-opt .v { display: flex; justify-content: center; }
.q-opt:hover:not(:disabled) { border-color: var(--ink-900); background: var(--brand-yellow-wash); }
.q-opt:active:not(:disabled) { transform: translateY(1px); }
.q-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-yellow-soft); border-color: var(--ink-900); }
.q-opt .k {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-xs);
  border: 1.5px solid var(--cloud-2); background: var(--paper-2); color: var(--stone-600);
  display: grid; place-items: center; font: var(--w-bold) 13px/1 var(--font-sans);
}
.q-opt .v { flex: 1; min-width: 0; }
.q-opt .m { flex: none; width: 20px; height: 20px; opacity: 0; }
.q-opt:disabled { cursor: default; }

.q-opt.is-right { border-color: var(--success); background: var(--success-tint); color: #14663A; font-weight: var(--w-semi); }
.q-opt.is-right .k { background: var(--success); border-color: var(--success); color: var(--white); }
.q-opt.is-right .m { opacity: 1; color: var(--success); }
.q-opt.is-wrong { border-color: var(--danger); background: var(--danger-tint); color: #93301C; }
.q-opt.is-wrong .k { background: var(--danger); border-color: var(--danger); color: var(--white); }
.q-opt.is-wrong .m { opacity: 1; color: var(--danger); }
.q-opt.is-dim { opacity: 0.5; }

.q-exp {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--brand-yellow-wash); border: 1.5px solid var(--brand-yellow-deep);
  font: var(--body-sm); color: var(--ink-800);
}
.q-exp b { display: block; font: var(--w-bold) 13px/1.3 var(--font-sans); color: var(--ink-900); margin-bottom: 5px; }

.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1.5px solid var(--cloud-2); }
.quiz-result { font: var(--w-semi) 15px/1.4 var(--font-sans); color: var(--ink-900); margin: 0; }
.quiz-result span { color: var(--fg-2); font-weight: var(--w-regular); display: block; font-size: 14px; margin-top: 3px; }

/* ------------------------------------------------------------------ */
/* RELATED + CTA                                                       */
/* ------------------------------------------------------------------ */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 20px 0 0; }
.rel-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--white); border: 1.5px solid var(--cloud); border-radius: var(--r-md);
  padding: 15px 16px; transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rel-card:hover { border-color: var(--ink-900); transform: translateY(-2px); }
.rel-card b { font: var(--w-semi) 15px/1.35 var(--font-sans); color: var(--ink-900); display: block; }
.rel-card small { font: var(--caption); color: var(--fg-2); }
.rel-card .ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-xs); background: var(--brand-yellow-soft); border: 1.5px solid var(--brand-yellow-deep); display: grid; place-items: center; color: var(--ink-900); }

.lrn-cta {
  background: var(--ink-900); border-radius: var(--r-xl); padding: 40px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  margin: 46px 0 0;
}
.lrn-cta h3 { font: var(--w-black) 1.9rem/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--fg-on-dark); margin: 0 0 10px; max-width: 22ch; }
.lrn-cta p { font: var(--body); color: #C9C3B2; margin: 0; max-width: 46ch; }
.lrn-cta .acts { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
/* .btn-outline is ink text on an ink border, which vanishes on this dark
   band. Restate it for the dark surface rather than swapping the component. */
.lrn-cta .btn-outline { color: var(--fg-on-dark); border-color: rgba(247,243,232,0.42); background: transparent; }
.lrn-cta .btn-outline:hover { background: var(--fg-on-dark); color: var(--ink-900); border-color: var(--fg-on-dark); }

/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .art-shell { grid-template-columns: 1fr; gap: 0; }
  .art-toc { display: none; }
}
@media (max-width: 720px) {
  .lh-hero { padding: 40px 0 32px; }
  .lh-hero h1 { font-size: 2.3rem; }
  .art-head { padding: 30px 0 24px; }
  .art-head h1 { font-size: 2.05rem; }
  .art-body h2 { font-size: 1.5rem; margin-top: 40px; }
  .art-body h3 { font-size: 1.15rem; }
  .quiz { padding: 20px 16px 18px; border-radius: var(--r-lg); }
  .q-card { padding: 16px 14px 14px; }
  .dgm { padding: 18px 14px 14px; }
  .wex-steps { padding: 4px 15px 14px; }
  .wex-q { padding: 15px 16px; }
  .lrn-cta { padding: 28px 22px; border-radius: var(--r-lg); }
  .lrn-cta h3 { font-size: 1.5rem; }
  .lrn-cta .acts { width: 100%; }
  .lrn-cta .acts .btn { flex: 1; }

  .q-opts { grid-template-columns: 1fr; }
  .eq { font-size: 1.3rem; gap: 14px; padding: 18px 14px; }

  /* Swap in the narrow build of every diagram. A diagram drawn 720 units
     wide, squeezed into a 315px phone column, renders its labels at about
     6px. The narrow build is drawn to its own geometry instead of being
     scaled down, so nothing ever becomes unreadable. */
  .dg-wide   { display: none !important; }
  .dg-narrow { display: block !important; }
}


/* Print, so a parent can print the notes without the site chrome.
   Explanations are hidden in print so a printed page is never an answer key. */
@media print {
  .nav, .footer, .mobile-cta, .wa-float, .art-toc, .lrn-cta, .modal-scrim { display: none !important; }
  .art-shell { grid-template-columns: 1fr; }
  .site { padding-top: 0; }
  .quiz, .wex, .dgm { box-shadow: none; break-inside: avoid; }
  .q-exp { display: none !important; }
}