/* Who Needs Training
   whoneedstraining.au, published by SKLD Training.
   Section one: Community First Aid Duties.

   Layout system:
     --measure  the reading column. Everything textual sits here, centred.
     --wide     tables, card grids and the key. Breaks out symmetrically on
                larger screens, and shares its edge with the masthead and nav.
   One centre axis for the whole page, so nothing reads as accidentally aligned. */

:root {
  --paper:      #faf7f1;
  --paper-2:    #f4efe5;
  --paper-3:    #ece5d8;
  --ink:        #16181d;
  --ink-2:      #474b54;
  --ink-3:      #6c6f78;
  --rule:       #dbd2c2;
  --rule-soft:  #e8e0d2;
  --card:       #fffdf9;

  --on-ink:       #f2ede3;
  --on-ink-muted: #a8a39b;

  /* The logo is the status system: three answers, three lengths. Lightened
     from the body palette so they hold up on the ink masthead. */
  --mark-required:    #c2483a;
  --mark-recommended: #7c97ad;
  --mark-depends:     #c9a84c;

  /* Status system. Always paired with a text label, never colour alone. */
  --required:      #8c2f24;
  --required-bg:   #f7e8e4;
  --required-br:   #e2c8c1;
  --recommended:   #3d5468;
  --recommended-bg:#e7edf2;
  --recommended-br:#cbd7e0;
  --depends:       #6a5326;
  --depends-bg:    #f4ebd9;
  --depends-br:    #ddcda8;

  --link:       #7a2b1f;
  --link-hover: #4d1a12;
  --focus:      #1b5e73;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 40rem;
  --wide:    54rem;
  --gutter:  1.25rem;
}

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

/* Every width in this sheet is in rem, so scaling the root scales the whole
   composition. On a large display the page grows rather than sitting as a small
   strip in the middle, while the line stays at roughly 66 characters. Media
   query rem units resolve against the initial 16px, so these thresholds are
   stable and do not feed back on themselves. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

@media (min-width: 100rem) { html { font-size: 106.25%; } }
@media (min-width: 120rem) { html { font-size: 112.5%; } }
@media (min-width: 150rem) { html { font-size: 118.75%; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.09rem;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Shell ---------- */

.wrap,
.masthead__inner,
.sectionnav__inner {
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- Focus ---------- */

a:focus-visible,
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.masthead a:focus-visible,
.footer a:focus-visible { outline-color: #93bcc8; }

/* ---------- Masthead ---------- */

.masthead {
  background: var(--ink);
  border-bottom: 3px solid var(--required);
}

.masthead__inner {
  padding-block: 1.1rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
  color: var(--on-ink);
}

.wordmark__mark {
  width: 1.18rem;
  height: 1.18rem;
  flex: none;
  background:
    linear-gradient(var(--mark-required) 0 0)    no-repeat 0 0.07rem / 100% 0.22rem,
    linear-gradient(var(--mark-recommended) 0 0) no-repeat 0 0.48rem / 72%  0.22rem,
    linear-gradient(var(--mark-depends) 0 0)     no-repeat 0 0.89rem / 47%  0.22rem;
}

.wordmark__text {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.006em;
}

.wordmark:hover .wordmark__text { color: #fff; }

.masthead__owner {
  font-family: var(--sans);
  font-size: 0.775rem;
  line-height: 1.5;
  color: var(--on-ink-muted);
  margin: 0;
  max-width: 30rem;
  text-align: right;
}

.masthead__owner a { color: var(--on-ink); text-decoration-color: rgba(242,237,227,0.42); }
.masthead__owner a:hover { color: #fff; text-decoration-color: currentColor; }

/* ---------- Section navigation ---------- */

.sectionnav {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.sectionnav__inner { padding-block: 0.6rem 0.65rem; }

.sectionnav__label {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sectionnav__label a { color: inherit; text-decoration: none; }
.sectionnav__label a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }

.sectionnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.2rem;
}

.sectionnav li { margin: 0; }

.sectionnav a {
  font-family: var(--sans);
  font-size: 0.825rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.32rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
  white-space: nowrap;
}

.sectionnav a:hover { color: var(--link); border-bottom-color: var(--rule); }

.sectionnav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--required);
}

/* ---------- Page head ---------- */

main { display: block; }

.lede-block {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 3.25rem 0 1.9rem;
  border-bottom: 1px solid var(--rule-soft);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.715rem;
  font-weight: 600;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--required);
  margin: 0 0 1.05rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--ink);
  display: inline-block;
}

h1 {
  font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.05rem);
  line-height: 1.09;
  font-weight: 600;
  letter-spacing: -0.023em;
  margin: 0 0 1.15rem;
  max-width: 24ch;
}

.lede {
  font-size: clamp(1.13rem, 1.04rem + 0.4vw, 1.3rem);
  line-height: 1.54;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- Content column ---------- */

.content {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 2.4rem 0 1rem;
}

h2 {
  font-size: clamp(1.4rem, 1.22rem + 0.66vw, 1.72rem);
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -0.014em;
  margin: 3rem 0 0.95rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 1.5rem;
}

.content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.3; margin: 2rem 0 0.6rem; }

h4 { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }

p { margin: 0 0 1.1rem; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }

ul, ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
li { margin-bottom: 0.55rem; }

strong { font-weight: 600; }
em { font-style: italic; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ---------- On this page ---------- */

.toc {
  margin: 0 0 2.3rem;
  padding: 0.95rem 1.15rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-2);
  font-family: var(--sans);
}

.toc__title {
  font-size: 0.675rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.6rem;
}

.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }

.toc a {
  font-size: 0.855rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  display: block;
  padding: 0.24rem 0;
}

.toc a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }

.content > .toc + h2 { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Break-out for wide blocks ---------- */

@media (min-width: 52rem) {
  .table-scroll, .cards, .key, .figure {
    width: calc(100% + 6rem);
    margin-left: -3rem;
    margin-right: -3rem;
  }
}

@media (min-width: 60rem) {
  .table-scroll, .cards, .key, .figure {
    width: calc(100% + 14rem);
    margin-left: -7rem;
    margin-right: -7rem;
  }
}

/* Once there is genuinely spare width, the contents move out of the flow and
   into the left margin as a sticky rail. The reading column stays exactly where
   it is and stays centred, so the page gains navigation rather than shifting. */
@media (min-width: 92rem) {
  .content { position: relative; }

  .toc {
    position: absolute;
    top: 0;
    left: -21rem;
    width: 17.5rem;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .toc__inner {
    position: sticky;
    top: 2.75rem;
    border-left: 2px solid var(--rule);
    padding: 0.1rem 0 0.1rem 1.15rem;
  }

  .toc__title { margin-bottom: 0.75rem; }
  .toc a { font-size: 0.83rem; padding: 0.28rem 0; }
}

/* ---------- Big numbered sequence ---------- */

.numbered {
  list-style: none;
  counter-reset: seq;
  padding-left: 0;
  margin: 2.1rem 0 1rem;
}

.numbered > li {
  counter-increment: seq;
  position: relative;
  padding-left: 3.7rem;
  margin-bottom: 2.2rem;
}

.numbered > li::before {
  content: counter(seq);
  position: absolute;
  left: 0;
  top: -0.55rem;
  font-family: var(--serif);
  font-size: 2.95rem;
  font-weight: 600;
  line-height: 1;
  color: var(--rule);
}

.numbered h3 { margin-top: 0; }
.numbered > li > p:last-child { margin-bottom: 0; }

/* ---------- Status key ---------- */

.key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  padding: 1rem 1.2rem;
  margin: 2.1rem 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.key__title {
  font-size: 0.695rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  width: 100%;
}

.key__item { display: inline-flex; align-items: baseline; gap: 0.45rem; }

/* ---------- Status chips ---------- */

.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.695rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.22em 0.6em;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: 0.08em;
}

.chip--required    { color: var(--required);    background: var(--required-bg);    border: 1px solid var(--required-br); }
.chip--recommended { color: var(--recommended); background: var(--recommended-bg); border: 1px solid var(--recommended-br); }
.chip--depends     { color: var(--depends);     background: var(--depends-bg);     border: 1px solid var(--depends-br); }

/* ---------- Verdict panels ---------- */

.verdict {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--rule);
  padding: 1.2rem 1.35rem 0.5rem;
  margin: 1.95rem 0;
  border-radius: 3px;
  background: var(--paper-2);
}

.verdict--required    { background: var(--required-bg);    border-color: var(--required-br);    border-left-color: var(--required); }
.verdict--recommended { background: var(--recommended-bg); border-color: var(--recommended-br); border-left-color: var(--recommended); }
.verdict--depends     { background: var(--depends-bg);     border-color: var(--depends-br);     border-left-color: var(--depends); }

.verdict__label {
  font-family: var(--sans);
  font-size: 0.705rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.verdict--required    .verdict__label { color: var(--required); }
.verdict--recommended .verdict__label { color: var(--recommended); }
.verdict--depends     .verdict__label { color: var(--depends); }

.verdict p { margin-bottom: 0.72rem; }

/* ---------- Source notes ---------- */

.source {
  font-family: var(--sans);
  font-size: 0.825rem;
  line-height: 1.55;
  color: var(--ink-2);
  border-left: 2px solid var(--rule);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1.4rem 0 1.75rem;
}

.source__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}

.source p { margin: 0 0 0.4rem; }
.source p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 1.7rem 0 2.1rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  /* Edge shadows appear only when there is more table to scroll to. */
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255,253,249,0)) left center / 2.2rem 100% no-repeat local,
    linear-gradient(to left,  var(--card) 30%, rgba(255,253,249,0)) right center / 2.2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(22,24,29,0.13), rgba(22,24,29,0)) left center / 0.55rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22,24,29,0.13), rgba(22,24,29,0)) right center / 0.55rem 100% no-repeat scroll,
    var(--card);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-family: var(--sans);
  font-size: 0.865rem;
  line-height: 1.5;
  background: transparent;
}

caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.785rem;
  color: var(--ink-3);
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
}

th, td {
  text-align: left;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

thead th {
  background: var(--paper-3);
  font-weight: 600;
  font-size: 0.775rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--rule);
}

tbody tr:last-child td { border-bottom: 0; }

/* ---------- Figures and diagrams ---------- */

/* Diagrams here carry information rather than decorating. No stock photography:
   on a reference about legal obligations it would read as marketing and would
   undercut the reason an editor would cite the page. */

.figure {
  margin: 2.1rem 0 2.3rem;
  padding: 1.45rem 1.5rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--card);
}

.fig-svg { display: block; width: 100%; height: auto; }

.figure figcaption {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-soft);
}

/* ---------- Decision blocks ---------- */

.decision__q {
  position: relative;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  background: var(--ink);
  color: var(--on-ink);
  padding: 1rem 1.25rem;
  border-radius: 3px;
  text-align: center;
  margin: 0;
}

.decision__q::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  width: 2px;
  height: 1.5rem;
  background: var(--rule);
  transform: translateX(-1px);
}

.decision__branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: 1.5rem;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.decision__branch {
  background: var(--paper);
  padding: 1.2rem 1.3rem 1.3rem;
  border-top: 4px solid var(--rule);
}

.decision__branch--no  { border-top-color: var(--depends); }
.decision__branch--yes { border-top-color: var(--required); }

.decision__answer {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.45rem;
}

.decision__branch--no  .decision__answer { color: var(--depends); }
.decision__branch--yes .decision__answer { color: var(--required); }

.decision__verdict {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.decision__detail {
  font-family: var(--sans);
  font-size: 0.87rem;
  line-height: 1.52;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- Card grid ---------- */

.cards {
  list-style: none;
  margin: 2.1rem 0 2.3rem;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.cards li { margin: 0; background: var(--paper); }

.cards a {
  display: block;
  padding: 1.35rem 1.35rem 1.45rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cards a:hover { background: var(--card); border-left-color: var(--required); }

.cards h3 { margin: 0 0 0.45rem; font-size: 1.08rem; color: var(--link); }
.cards a:hover h3 { text-decoration: underline; text-underline-offset: 0.15em; }

.cards p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }

.cards .card__q {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.55rem;
}

/* ---------- Onward links ---------- */

.onward { border-top: 2px solid var(--ink); margin-top: 3.3rem; padding-top: 1.45rem; }

.onward h2 {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 0.85rem;
  font-family: var(--sans);
  font-size: 0.705rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.onward ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.onward li { margin-bottom: 0.55rem; }

/* ---------- Disclosure ---------- */

.disclosure {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem 1.35rem 0.7rem;
  margin: 2.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.855rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.disclosure h2 {
  font-family: var(--sans);
  font-size: 0.695rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 4rem;
  border-top: 3px solid var(--required);
  background: var(--ink);
  color: var(--on-ink-muted);
  padding: 2.5rem 0 2.9rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.6;
}

.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.footer h2 {
  font-size: 0.695rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--on-ink);
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.4rem; }
.footer p { margin: 0 0 0.7rem; }

.footer a { color: var(--on-ink); text-decoration-color: rgba(242,237,227,0.35); }
.footer a:hover { color: #fff; text-decoration-color: currentColor; }

.footer__meta {
  margin-top: 2.1rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(242,237,227,0.16);
  font-size: 0.79rem;
}

/* ---------- Utility ---------- */

.updated {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 1.8rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid var(--rule-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Tablet and below ---------- */

@media (max-width: 46rem) {
  .masthead__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.95rem 1rem;
  }
  .masthead__owner { text-align: left; max-width: 40rem; font-size: 0.755rem; }

  /* The nav becomes a single scrolling strip rather than three stacked rows. */
  .sectionnav__inner { padding-inline: 0; }
  .sectionnav__label { padding-inline: var(--gutter); }
  .sectionnav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline: var(--gutter) 2.5rem;
    gap: 0 1.15rem;
    scroll-padding-inline: var(--gutter);
  }
  .sectionnav ul::-webkit-scrollbar { display: none; }
  .sectionnav li { flex: none; }
  .sectionnav::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 1px;
    width: 2.75rem;
    background: linear-gradient(to right, rgba(244,239,229,0), var(--paper-2) 72%);
    pointer-events: none;
  }
}

/* ---------- Phone ---------- */

@media (max-width: 34rem) {
  :root { --gutter: 1.1rem; }
  body { font-size: 1.05rem; line-height: 1.6; }

  .lede-block { padding: 2.3rem 0 1.5rem; }
  .content { padding-top: 2rem; }

  h1 { letter-spacing: -0.018em; }
  h2 { margin-top: 2.5rem; padding-top: 1.35rem; }

  .numbered > li { padding-left: 2.8rem; margin-bottom: 1.9rem; }
  .numbered > li::before { font-size: 2.2rem; top: -0.25rem; }

  .verdict { padding: 1.05rem 1.05rem 0.4rem; border-left-width: 4px; }
  .key { padding: 0.9rem 1rem; }
  .disclosure { padding: 1.1rem 1.1rem 0.6rem; }
  .cards a { padding: 1.15rem 1.15rem 1.25rem; }
  .figure { padding: 1.1rem 1.1rem 0.9rem; }
  .decision__q { font-size: 0.9rem; padding: 0.9rem 1rem; }

  table { font-size: 0.82rem; min-width: 30rem; }
  th, td { padding: 0.6rem 0.8rem; }

  .footer { padding: 2.1rem 0 2.4rem; }
  .footer__grid { gap: 1.6rem; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */

@media print {
  .sectionnav, .onward, .skip, .footer__grid, .toc { display: none; }
  .wordmark__mark { display: none; }
  body { background: #fff; font-size: 11pt; }
  .masthead { background: #fff; border-bottom: 2px solid #000; }
  .masthead__inner { padding-block: 0.5rem; }
  .wordmark, .wordmark__text, .masthead__owner, .masthead__owner a { color: #000; }
  .wordmark__mark { display: none; }
  .footer { background: #fff; color: #000; border-top: 2px solid #000; padding: 1rem 0; }
  .footer a, .footer__meta { color: #000; }
  .table-scroll { overflow: visible; background: #fff; }
  .lede-block, .content { max-width: none; }
  .table-scroll, .cards, .key, .figure { width: auto; margin-left: 0; margin-right: 0; }
  html { font-size: 100%; }
  a { color: inherit; }
}