/* ==========================================================================
   global.css — everything that appears on more than one page.

   Layout model: one container, one left edge. Everything starts at the same x
   inside .wrap; prose is capped with max-width so no line runs the full 1160px,
   while tables, card decks and diagrams keep the whole measure. Nothing is
   centred and nothing is indented relative to anything else, which is what
   makes a wide table under a narrow heading read as deliberate rather than
   misaligned. Blocks that must keep full width carry .bleed.
   ========================================================================== */

/* ── Typefaces ─────────────────────────────────────────────────────────────
   Self-hosted, variable, two subsets each. Loaded from this origin rather than
   a font service so there is no third-party request in the critical path and
   no DNS lookup between the stylesheet and the first glyph. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   Two rules about the palette, both load-bearing:
   1. --orange is #ff6600, about 2.9:1 on white. It is a fill, a rule, a list
      marker, an icon stroke -- never a word. Orange text uses --orange-ink.
   2. --ink-variant is a warm brown, not a grey. It is what keeps the page from
      reading as a default bootstrap document. --ink-quiet is for dead metadata
      only. */

:root {
  /* surfaces, lightest to dimmest */
  --surface: #f9f9fc;
  --surface-card: #ffffff;
  --surface-low: #f3f3f6;
  --surface-mid: #eeeef0;
  --surface-high: #e8e8ea;

  /* ink */
  --ink: #1a1c1e;
  --ink-variant: #5a4136;
  --ink-quiet: #6f6f74;
  --ink-invert: #ffffff;

  /* navy: structure and authority */
  --navy: #0d2b45;
  --navy-deep: #082034;
  --navy-soft: #46607d;
  --navy-ghost: #dbe4ec;

  /* orange: action and accent */
  --orange: #ff6600;
  --orange-ink: #a33e00;
  --orange-deep: #7c2e00;
  --orange-wash: #ffdbcd;
  --orange-line: #e3bfb1;

  /* lines */
  --line: #e1e4e8;
  --line-strong: #cfd4da;

  /* caution */
  --caution: #ba1a1a;
  --caution-wash: #ffdad6;

  /* spacing, 8px base */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem;
  --gutter: 1.25rem;
  --section-pad: 3rem;

  /* radii */
  --r-sm: 0.25rem;
  --r: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-pill: 9999px;

  /* layout */
  --container: 1160px;
  --header-h: 64px;
  --measure: 40rem;      /* prose: about 73 characters at the body size */
  --measure-wide: 46rem; /* headings and leads, which take a longer line */

  /* type */
  --font-display: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
    --section-pad: 4.5rem;
  }
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg { max-width: 100%; }

/* Anchors sit below the sticky masthead when jumped to. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-3)); }

/* ── Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

a {
  color: var(--orange-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--orange-deep); }

:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 var(--s-2);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--ink-invert);
  color: var(--navy);
  padding: var(--s-1) var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ── Container and content grid ────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* One left edge for everything. Headings, prose and full-measure blocks all
   start at the same x; prose simply stops earlier, because a 1160px line is
   unreadable. Nothing is centred and nothing is indented relative to anything
   else, which is what makes a wide table sitting under a heading look
   deliberate rather than misaligned. */

.section { padding-top: var(--section-pad); }
.section:last-child { padding-bottom: var(--s-4); }
.section > * + * { margin-top: var(--s-3); }

.section > p,
.section > ul,
.section > ol,
.section > h3 { max-width: var(--measure); }

.section > .bleed,
.section > .scroller { max-width: none; }

.section__title {
  max-width: var(--measure-wide);
  margin-bottom: 0;
}

.section__lead {
  font-size: 1.125rem;
  color: var(--ink-variant);
  max-width: var(--measure-wide);
}

.section > h3 { margin-top: var(--s-4); }

/* A single orange hairline is the section divider, per the design system.
   It is the only decorative rule on the page, so it stays thin and short. */
.section__title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: var(--s-2);
  background: var(--orange);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-deep);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  color: var(--ink-invert);
  text-decoration: none;
}

.brand__mark {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--ink-invert);
  flex: none;
}
.brand__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand__word {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__word em {
  font-style: normal;
  font-weight: 400;
  color: var(--navy-ghost);
}

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--navy-soft);
  border-radius: var(--r);
  color: var(--ink-invert);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.4375rem 0.75rem;
  cursor: pointer;
}
.burger:hover { border-color: var(--navy-ghost); }
.burger:focus-visible { outline-color: var(--ink-invert); }

.burger__bars {
  position: relative;
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}
.burger__bars::before,
.burger__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}
.burger__bars::before { top: -4.5px; }
.burger__bars::after { top: 4.5px; }

.topnav {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: var(--s-2);
  flex-basis: 100%;
  order: 3;
  border-top: 1px solid var(--navy-deep);
  padding-top: var(--s-2);
  margin-top: -1px;
}
.topnav.is-open { display: flex; }

.topnav__link,
.topnav__cta {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--navy-ghost);
  padding: 0.625rem 0;
}
.topnav__link:hover,
.topnav__cta:hover { color: var(--ink-invert); }
.topnav__link:focus-visible,
.topnav__cta:focus-visible { outline-color: var(--ink-invert); }

.topnav__link[aria-current='page'] {
  color: var(--ink-invert);
  box-shadow: inset 0 -2px 0 var(--orange);
}

.topnav__cta {
  align-self: flex-start;
  background: var(--orange);
  color: var(--ink-invert);
  border-radius: var(--r-pill);
  padding: 0.625rem 1.125rem;
  margin-top: var(--s-1);
}
.topnav__cta:hover {
  background: var(--orange-deep);
  color: var(--ink-invert);
}

@media (min-width: 900px) {
  .burger { display: none; }
  .topnav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    flex-basis: auto;
    order: 0;
    border-top: 0;
    padding: 0;
    margin: 0;
  }
  .topnav__link { padding: 1.25rem 0; }
  .topnav__cta {
    margin-top: 0;
    padding: 0.5625rem 1rem;
  }
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */

.crumbs {
  margin-top: var(--s-4);
  font-size: 0.875rem;
  color: var(--ink-quiet);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: var(--line-strong);
}
.crumbs a { color: var(--ink-quiet); }
.crumbs a:hover { color: var(--orange-ink); }

/* ── Lede ──────────────────────────────────────────────────────────────── */

.lede { padding-top: var(--s-6); }
.crumbs + .lede { padding-top: var(--s-4); }

.lede > * + * { margin-top: var(--s-2); }

.lede__title {
  max-width: 22ch;
  margin-bottom: var(--s-1);
}

.lede__sub {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-variant);
  border-left: 3px solid var(--orange);
  padding-left: var(--s-2);
  max-width: var(--measure-wide);
}

.lede__meta {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.lede__actions,
.note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  align-items: center;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 0.75rem 1.125rem;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.btn::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--orange);
  color: var(--ink-invert);
}
.btn--primary:hover {
  background: var(--orange-deep);
  color: var(--ink-invert);
}

.btn--quiet {
  background: var(--surface-card);
  border-color: var(--line-strong);
  color: var(--navy);
}
.btn--quiet:hover {
  background: var(--surface-low);
  color: var(--navy);
}

/* ── Notes and callouts ────────────────────────────────────────────────── */

.note {
  background: var(--surface-low);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
}
.note > * + * { margin-top: var(--s-2); }
.note ul { margin: 0; padding-left: 1.125rem; }
.note li + li { margin-top: 0.5rem; }
.note li::marker { color: var(--orange); }

.note__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
}

.note--caution {
  background: var(--caution-wash);
  border-color: #f0b6b0;
}
.note--caution li::marker { color: var(--caution); }

.note--action {
  background: var(--surface-card);
  border-color: var(--line);
  border-left: 3px solid var(--orange);
}

/* ── Tick lists ────────────────────────────────────────────────────────── */

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticks li {
  position: relative;
  padding-left: 1.75rem;
}
.ticks li + li { margin-top: 0.75rem; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.75rem;
  height: 0.4375rem;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* ── Tables ────────────────────────────────────────────────────────────────
   The wrapper is focusable and labelled on purpose: a scroll container that
   only responds to a pointer is unreachable by keyboard and silent to a screen
   reader. On narrow screens the first column stays put while the rest scrolls
   sideways -- freezing the row identity is what keeps a wide table readable,
   which a sticky header cannot do. */

.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.scroller:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 2px;
}

.grid {
  width: 100%;
  min-width: 44rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
}

.grid thead th {
  background: var(--surface-high);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0.75rem var(--s-2);
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}

.grid tbody th,
.grid td {
  padding: 0.875rem var(--s-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.grid tbody tr:last-child th,
.grid tbody tr:last-child td { border-bottom: 0; }

.grid tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
}

.grid tbody tr:nth-child(even) th,
.grid tbody tr:nth-child(even) td { background: var(--surface-low); }

.grid th:first-child,
.grid td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-card);
  box-shadow: 1px 0 0 var(--line-strong);
}
.grid thead th:first-child {
  z-index: 3;
  background: var(--surface-high);
}
.grid tbody tr:nth-child(even) th:first-child,
.grid tbody tr:nth-child(even) td:first-child { background: var(--surface-low); }

/* ── FAQ ───────────────────────────────────────────────────────────────────
   Native <details>. No script, and it still opens with JavaScript off. */

.qa {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.qa__item + .qa__item { border-top: 1px solid var(--line); }

.qa__q {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}
.qa__q:hover h3 { color: var(--orange-ink); }
.qa__q::after {
  content: '';
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.375rem;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform 0.18s var(--ease);
}
.qa__item[open] .qa__q::after { transform: rotate(225deg); }

.qa__a {
  padding: 0 var(--s-3) var(--s-3);
  max-width: 62ch;
  color: var(--ink-variant);
}

/* ── Sources ───────────────────────────────────────────────────────────── */

.sources {
  margin: 0;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
}
.sources li + li { margin-top: 0.75rem; }
.sources li::marker {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-quiet);
}
.sources__what {
  display: block;
  color: var(--ink-quiet);
}

/* ── Rubric (methodology) ──────────────────────────────────────────────── */

.rubric {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  counter-reset: rubric;
}

.rubric__item {
  counter-increment: rubric;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
}
.rubric__item > * + * { margin-top: var(--s-1); }

.rubric__name {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.rubric__name::before {
  content: counter(rubric, decimal-leading-zero);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange-ink);
}

.rubric__item p { max-width: 68ch; }

.rubric__line {
  font-size: 0.9375rem;
  color: var(--ink-variant);
}

.rubric__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  padding: 0.1875rem 0.375rem;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}
.rubric__tag--good {
  background: var(--orange-wash);
  color: var(--orange-deep);
}
.rubric__tag--weak {
  background: var(--surface-high);
  color: var(--ink-quiet);
}

@media (min-width: 768px) {
  .rubric__item { padding: var(--s-4); }
}

/* ── Submission form ───────────────────────────────────────────────────── */

.submitform {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  max-width: 34rem;
}

.field { margin: 0 0 var(--s-3); }
.field--submit { margin-bottom: 0; }

.field__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy);
  margin-bottom: 0.375rem;
}

.field__input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 0.625rem 0.75rem;
}
.field__input:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 1px;
  background: var(--surface-card);
}
.field__input--area { resize: vertical; }

.field__hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-quiet);
  margin-top: 0.375rem;
}

.contact__email {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.endmatter {
  background: var(--navy);
  color: var(--navy-ghost);
  margin-top: var(--s-8);
  padding-block: var(--s-6) var(--s-4);
  font-size: 0.9375rem;
}

.endmatter__grid {
  display: grid;
  gap: var(--s-4);
}

.endmatter__name,
.endmatter__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-invert);
  margin: 0 0 var(--s-1);
}
.endmatter__name { font-size: 1.0625rem; }
.endmatter__title {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-ghost);
}

.endmatter__blurb {
  max-width: 32rem;
  margin: 0;
}

.endmatter__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.endmatter__list li + li { margin-top: 0.5rem; }
/* the editorial address is long and must not push the column out */
.endmatter__list a[href^='mailto:'] { overflow-wrap: anywhere; }
.endmatter__list a,
.endmatter__base a {
  color: var(--navy-ghost);
  text-decoration: none;
}
.endmatter__list a:hover,
.endmatter__base a:hover {
  color: var(--ink-invert);
  text-decoration: underline;
}
.endmatter a:focus-visible { outline-color: var(--ink-invert); }

.endmatter__base {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--navy-soft);
  display: grid;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: var(--navy-ghost);
}
.endmatter__note { max-width: 60rem; }
.endmatter__legal { color: var(--navy-ghost); }

@media (min-width: 768px) {
  .endmatter__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--s-5);
  }
}