/* ---------------------------------------------------------------------------
   Self-hosted subset webfaces. Generated by tools/build-fonts.sh; see FONTS.md
   for provenance, subset command and how every number below was derived.

   URLs are relative on purpose. This fragment is inlined into styles.css, which
   is served both at /styles.css and at /oal/v1.0/styles.css as a frozen
   self-contained snapshot; a relative url() resolves against the stylesheet, so
   one file is correct at both paths.
   --------------------------------------------------------------------------- */

/* Archivo — display (`wdth` 125) and utility (`wdth` 100) roles.
   The wdth axis is retained across its full 62-125 range: styles.css drives it
   directly with font-variation-settings, and the display role is unrecognisable
   without wdth 125.

   font-display: optional, not swap, and deliberately so. Archivo serves two
   roles with two different fallbacks and two different widths, and one
   @font-face carries one size-adjust. Measured against the real page text:
   the utility role at wdth 100 sits 5.71% off system-ui, the display role at
   wdth 125 sits 60.22% off Arial Narrow. No single size-adjust reconciles a
   5.71% and a 60.22% correction, so there is no honest metric match to write.
   `optional` removes the shift instead of hiding it: the browser either has the
   font within its ~100ms block period or renders the whole page load in the
   fallback and never swaps. See FONTS.md for the preload this wants. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: optional;
}

/* Source Serif 4 — body prose. This is the one family with a stable metric
   target: the first fallback is Georgia, which ships with both macOS and
   Windows at identical metrics, so the match holds cross-platform.

   size-adjust 96.33% = Georgia's rendered width / Source Serif's, measured in
   Chromium over the longest real body paragraph on the site at its real 17px.
   ascent/descent-override are Georgia's own hhea metrics (917/2048, 449/2048)
   divided by the size-adjust, because Chromium scales the overrides by
   size-adjust — verified, not assumed. Residual after adjustment: 0.611% of
   line width, 0.000% of line box height. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Source Serif 4 Italic — .buyerq in oal.html and the inline <em> runs.
   A real italic, not a synthesised oblique: Source Serif's italic is a separate
   alphabet (single-storey a, a written g), and the eight .buyerq pull-quotes are
   a designed feature of the rubric page rather than incidental emphasis.

   It carries the roman's size-adjust verbatim, not its own. Matching this face
   to Georgia Italic independently wants 111.96%, which would render an inline
   <em> 12% larger than the roman around it. Staying in proportion with the
   roman is the correct constraint; the cost is that ~9 short italic runs can
   reflow on swap. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-italic-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* The fallback, adjusted to the webfont — not the webfont adjusted to the
   fallback. Both directions remove the swap shift; only this one leaves the
   design intact. Putting size-adjust on the real face shrinks Source Serif to
   Georgia's width, which renders styles.css's 17px body at an effective
   16.38px permanently, on every visit, forever — paying for a one-off
   loading artifact with the type size of the whole site.

   103.81% is the reciprocal of the 96.33% measured the other way (Source
   Serif's rendered width / Georgia's, over the longest real body paragraph at
   its real 17px). No ascent/descent overrides: every line-height in styles.css
   is unitless, so the line box is font-size x line-height and font metrics
   cannot move it. Measured after the change, not assumed — see FONTS.md. */
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia");
  size-adjust: 103.81%;
}

/* IBM Plex Mono — hashes, references and addresses only, at 0.85em.
   font-display: optional for the same reason as Archivo but a different cause:
   the fallbacks are ui-monospace / SFMono-Regular / monospace, all of which
   resolve to a different font with a different character cell on every
   platform (SF Mono 0.618em, Consolas 0.550em, Courier New 0.600em). There is
   no single fallback to measure against, so there is no honest size-adjust. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

/* ===========================================================
   Ordoia — phase 0
   Tokens, layout, components, print.
   Colour rule: --floor appears in exactly two situations —
   the lowest level assessed on a scorecard, and a changelog
   entry classified breaking. Nowhere else.
   Rule rule: a horizontal rule is always a scale, never a divider.
   =========================================================== */

:root {
  --ground: #E6EAE7;
  --raised: #F2F4F2;
  --ink: #171A1A;
  --slate: #4E5654;
  --untravelled: #C3CAC6;
  --floor: #8A4A05;

  /* The scale itself. --untravelled draws borders, field underlines and CTA
     dividers, where 1.4:1 is decoration and fine. It also drew the measure's
     rule and minor ticks, where it is not decoration but the instrument, and
     1.37:1 on --ground made a not-assessed track's ticks the same colour as
     the rule they sat on. --track is the smallest change that separates the
     two jobs: >=3:1 on both surfaces, checked at build time and again by
     check 7. */
  --track: #7A827E;

  /* The surface a knockout is punched out of. --na hardcoded --raised, which
     is right on the scorecard and broken anywhere else; this makes the value
     follow its context instead. */
  --surface: var(--ground);

  /* The measure. Fixed ratio, identical on every dimension and
     every page: segments 2 : 5 : 2. The asserted -> enforced span
     is 2.5x either neighbour because that is where systems fail. */
  --p0: 0%;
  --p1: 22.222%;
  --p2: 77.778%;
  --p3: 100%;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Source Serif 4", "Source Serif Fallback", Georgia, "Times New Roman", serif;
  --util: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --rail: 9.5rem;
  --gutter: 2.75rem;
  --col: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- type roles ---------- */

.display, h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: 2.35rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 0.95rem; }

.util, .stamp, .rail, caption, figcaption, th, .eyebrow, .note, .fields, nav, footer {
  font-family: var(--util);
  font-variation-settings: "wdth" 100;
}

.mono { font-family: var(--mono); font-size: 0.85em; }

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

strong, b { font-weight: 600; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.note { font-size: 0.82rem; color: var(--slate); line-height: 1.5; }

/* ---------- layout ---------- */

.sheet {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--col));
  column-gap: var(--gutter);
  max-width: calc(var(--rail) + var(--gutter) + var(--col));
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* The rail is reserved on every page and carries real values or
   nothing. On marketing pages it is empty; that is the argument. */
.rail {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--slate);
  padding-top: 0.5rem;
}
.rail dl { margin: 0; }
.rail dt {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.66rem;
  margin-top: 0.9rem;
}
.rail dd { margin: 0; color: var(--ink); }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail ol li { margin-top: 0.35rem; }
.rail a { text-decoration: none; border-bottom: 1px solid var(--slate); }

/* The content column. Stated rather than left to auto-placement: two sheets on
   the rubric page carry no rail, and without this the body lands in the rail's
   column and the entire rubric renders 152px wide. Measured, not guessed —
   see CHANGES.md #4. */
.body { grid-column: 2; }
.body > * + * { margin-top: 2.6rem; }
.block > * + * { margin-top: 1.1rem; }

section { scroll-margin-top: 2rem; }

/* ---------- masthead ---------- */

.masthead { padding: 1.6rem 0 2.4rem; }
.masthead .sheet { align-items: baseline; }
.wordmark {
  grid-column: 1;
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: block;
}
.masthead nav { grid-column: 2; font-size: 0.85rem; }
.masthead nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0; }
.masthead nav a { text-decoration: none; color: var(--slate); }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); }
.masthead nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- hero ---------- */

.hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); max-width: 19ch; }
.hero .sub { font-size: 1.06rem; max-width: 54ch; margin-top: 1.2rem; }

/* CTA: four fields, never a coloured button, never a price alone. */
.cta {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 0 1.15rem;
  font-family: var(--util);
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 0.7rem 1.1rem;
  margin-top: 1.6rem;
  background: transparent;
}
.cta:hover { background: var(--raised); }
.cta .f { display: block; }
.cta .f--product { font-weight: 600; }
.cta .f + .f { border-left: 1px solid var(--untravelled); padding-left: 1.15rem; }

/* ---------- the measure ---------- */

.measure { margin: 0; }
.measure__dim {
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 3rem;
}
.measure__dim .pair { color: var(--slate); font-weight: 400; }

.measure__rule {
  position: relative;
  height: 1px;
  background: var(--track);
  margin: 0 0 0.4rem;
}

.tick {
  position: absolute;
  top: -7px;
  left: var(--p);
  width: 1px;
  height: 15px;
  background: var(--track);
}
.tick--major { background: var(--ink); top: -9px; height: 19px; }

.label {
  position: absolute;
  top: -2.55rem;
  left: var(--p);
  transform: translateX(-50%);
  font-family: var(--util);
  font-size: 0.82rem;
  white-space: nowrap;
  color: var(--ink);
}
.label--first { transform: translateX(0); }
.label--last { transform: translateX(-100%); }
.label .n {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: var(--slate);
}

/* the untravelled span carries the question that has to be answered
   to cross it. It is not optional at any breakpoint. */
.span {
  position: absolute;
  top: 1.05rem;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  border-left: 1px solid var(--untravelled);
  border-right: 1px solid var(--untravelled);
  padding: 0.55rem 0.85rem 0.1rem;
}
.span__q {
  display: block;
  font-family: var(--util);
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--ink);
}
.span__tag {
  display: block;
  font-family: var(--util);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.3rem;
}

.measure--q { padding-bottom: 6.5rem; }
.measure--plain { padding-bottom: 0.5rem; }

/* mark and fill — score variant only */
.fill { position: absolute; top: 0; left: 0; width: var(--to); height: 3px; background: var(--ink); margin-top: -1px; }
.mark {
  position: absolute;
  top: -5px;
  left: var(--p);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
}
.mark--reader { background: var(--surface); border: 2px solid var(--ink); }

/* floor: the only colour, and only on an assessed row */
.floor-mark {
  position: absolute;
  top: -1.6rem;
  left: var(--p);
  transform: translateX(-50%);
  color: var(--floor);
  font-size: 0.7rem;
  font-family: var(--util);
}

.stamp {
  font-family: var(--util);
  font-size: 0.74rem;
  color: var(--slate);
  letter-spacing: 0.02em;
  margin: 0.9rem 0 0;
  max-width: none;
}
.stamp b, .stamp strong { color: var(--ink); font-weight: 500; }

/* the full-bleed band — the only element allowed to break the column */
.band {
  padding: 3.4rem 0 3.2rem;
  margin: 3.4rem 0;
  border-top: 0;
  background: var(--raised);
}
.band .sheet { align-items: start; }
.band .measure { grid-column: 2; }
.band .rail { grid-column: 1; }
.band, .paper { --surface: var(--raised); }

/* not assessed: full-length unmarked track, the sentence printed
   on the track at the position a mark would occupy. */
.na { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); padding: 0 0.7rem; }
.na__t {
  font-family: var(--util);
  font-size: 0.78rem;
  color: var(--ink);
  white-space: nowrap;
}
/* ---------- tables ---------- */

/* A four-column grid does not fit 320px, and a table that pushes the whole page
   sideways makes every paragraph on it unreadable. WCAG 1.4.10 exempts data
   tables from reflow precisely because they need two dimensions, so the table
   scrolls inside its own box and the page does not. tabindex makes that box
   reachable without a mouse. Found by check 13, which was written after the
   rubric page turned out to be rendering in the rail's column. */
.scroller { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; margin: 0; }
caption {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  padding-bottom: 0.6rem;
}
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem 0.6rem 0; }
th {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid var(--untravelled);
}
td { border-bottom: 1px solid var(--untravelled); font-family: var(--body); }
td.lv { font-family: var(--util); white-space: nowrap; width: 4.5rem; }

/* coverage x depth grid */
.grid { width: 100%; border-collapse: collapse; font-family: var(--util); font-size: 0.86rem; }
.grid th { border-bottom: 1px solid var(--untravelled); }
.grid th.rowhead { text-align: left; width: 9rem; border-bottom: 1px solid var(--untravelled); }
.grid td { border-bottom: 1px solid var(--untravelled); padding: 1rem 1rem 1rem 0; }
.grid .prod { display: block; font-weight: 600; font-size: 0.95rem; }
.grid .scope { display: block; color: var(--slate); font-size: 0.8rem; margin-top: 0.2rem; }
.grid .none { color: var(--slate); }
.grid .path { color: var(--slate); font-size: 0.78rem; }

/* ---------- scorecard ---------- */

.paper {
  background: var(--raised);
  padding: 2.6rem 2.4rem 2.2rem;
  max-width: 46rem;
  margin: 0 auto;
}
.paper h1 { font-size: 1.5rem; }
.fields { font-size: 0.78rem; color: var(--slate); }
.fields dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.8rem; margin: 1.6rem 0 0; }
.fields dt { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.66rem; }
.fields dd { margin: 0.15rem 0 0; border-bottom: 1px solid var(--untravelled); min-height: 1.35rem; color: var(--ink); }
.fields dd.filled { border-bottom: 0; }

.row { padding: 2.7rem 0 0.4rem; }
.rowset { margin-top: 2rem; }
.pairhead {
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 2.8rem 0 0.4rem;
  color: var(--slate);
}

.legend { margin-top: 2.4rem; font-family: var(--util); font-size: 0.8rem; }
.legend .floor-line { color: var(--floor); }
.sig { margin-top: 2.4rem; display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sig .slot { border-bottom: 1px solid var(--untravelled); min-height: 2.2rem; }
.sig .slot span { font-family: var(--util); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--slate); }

/* ---------- misc ---------- */

.q-list { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.q-list li { counter-increment: q; padding: 0 0 1.7rem; }
.q-list li::before {
  content: counter(q) " of 8";
  display: block;
  font-family: var(--util);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.5rem;
}
.q-list .dim { font-family: var(--util); font-size: 0.78rem; color: var(--slate); display: block; margin-top: 0.5rem; }

.dimension { padding-top: 2.6rem; }
.dimension h3 .n { color: var(--slate); font-weight: 400; }
.buyerq { font-style: italic; }
.levels { margin: 1.2rem 0 0; }
.levels dt { font-family: var(--util); font-weight: 600; font-size: 0.86rem; margin-top: 1rem; }
.levels dd { margin: 0.25rem 0 0; }
.cap { font-family: var(--util); font-size: 0.84rem; background: transparent; border-left: 2px solid var(--ink); padding-left: 0.9rem; }
.selfcheck { font-family: var(--util); font-size: 0.9rem; border-left: 2px solid var(--untravelled); padding-left: 0.9rem; }
/* display:block is what the margin-bottom below has always implied. Left inline,
   the label ran straight into the question with no space: "Self-checkIf you
   deleted...". Measured on the handover, see CHANGES.md #13. */
.selfcheck .eyebrow { display: block; margin-bottom: 0.35rem; }

.constraints { list-style: none; margin: 0; padding: 0; }
.constraints li { padding: 0 0 1.5rem; }


.changelog { list-style: none; margin: 0; padding: 0; }
.changelog li { padding: 0 0 1.4rem; }
.class { font-family: var(--util); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.class--clarifying { color: var(--slate); }
.class--breaking { color: var(--floor); }

footer { margin-top: 5rem; padding: 2.4rem 0 4rem; }
footer .sheet { align-items: start; }
footer .foot { grid-column: 2; font-size: 0.78rem; color: var(--slate); }
footer .foot a { color: var(--slate); }
footer ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Named values for a screen reader where the visual design carries them by
   position. BRIEF §7 authorises this markup explicitly. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--raised); padding: 0.6rem 1rem; z-index: 10; }

/* ---------- mobile: the measure rotates, distance runs downward ---------- */

@media (max-width: 46rem) {
  .sheet {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
  }
  .rail, .masthead nav, .band .measure, .band .rail, .body, footer .foot { grid-column: 1; }
  .rail:empty { display: none; }
  .rail { padding-bottom: 1.4rem; }
  .masthead nav ul { gap: 1rem; }
  .paper { padding: 1.6rem 1.1rem; }
  .fields dl, .sig { grid-template-columns: minmax(0, 1fr); }

  .measure--q, .measure--plain { padding-bottom: 0; }
  .measure__dim { margin-bottom: 0.6rem; }
  .label { font-size: 0.76rem; }
  .measure__rule {
    height: 20rem;
    width: 1px;
    margin: 1.2rem 0 0 6rem;
  }
  .tick { top: var(--p); left: -7px; width: 15px; height: 1px; }
  .tick--major { left: -9px; width: 19px; height: 1px; }
  .label {
    top: var(--p);
    left: auto;
    right: calc(100% + 0.9rem);
    transform: translateY(-50%);
    text-align: right;
  }
  .label--first, .label--last { transform: translateY(-50%); }
  .span {
    top: var(--from);
    left: 1.1rem;
    width: calc(100vw - 9.75rem);
    max-width: 22rem;
    height: calc(var(--to) - var(--from));
    border-left: 1px solid var(--untravelled);
    border-right: 0;
    border-top: 1px solid var(--untravelled);
    border-bottom: 1px solid var(--untravelled);
    padding: 0.7rem 0 0.5rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .fill { width: 3px; height: var(--to); top: 0; left: -1px; margin-top: 0; }
  .mark { top: var(--p); left: 0; transform: translate(-50%, -50%); }
  .floor-mark { top: var(--p); left: auto; right: calc(100% + 0.9rem); transform: translateY(-50%); }
  .na { white-space: normal; }
  .na__t { white-space: normal; }
  .measure__rule + .stamp { margin-top: 1.6rem; }
  table, .grid { font-size: 0.8rem; }
  .cta { grid-auto-flow: row; gap: 0.35rem; }
  .cta .f + .f { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .fill { animation: draw 240ms ease-out both; }
  @keyframes draw { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
}

/* ---------- print: the scorecard and the rubric are circulated ---------- */

@media print {
  :root { --ground: #fff; --raised: #fff; --untravelled: #9aa29e; }
  body { background: #fff; font-size: 10.5pt; }
  .masthead nav, .cta, .skip { display: none; }
  .band { background: none; margin: 1.5rem 0; padding: 1rem 0; }
  .sheet { grid-template-columns: minmax(0, 1fr) 8rem; max-width: none; padding: 0; }
  .rail { grid-column: 2; grid-row: 1; }
  .body, .band .measure, footer .foot { grid-column: 1; grid-row: 1; }
  .paper { padding: 0; max-width: none; }
  .row, .dimension, .measure { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #444; }
  footer { margin-top: 2rem; }
  /* size, not only margin. Without it the page box falls back to the browser's
     locale default — US Letter in Chromium — which is what the generated PDF
     came out as until check 14 read the MediaBox. Fixing it here rather than in
     the PDF tool keeps one source: File > Print from the page itself is how most
     readers will produce a copy. */
  @page { size: A4; margin: 16mm 14mm; }
}

/* failure modes: a list, not a table — no rules, because a rule means a scale */
.fails { list-style: none; margin: 0; padding: 0; }
.fails li { padding: 0 0 1.1rem; max-width: 62ch; }
.fails strong { display: block; }