/* Motorcycle Fit — the whole of the site's design.
 *
 * One stylesheet for four pages, and it declares as little as it can. There is
 * no framework and no build step: the pages are static HTML, and this file is
 * the only thing they share besides their footer.
 *
 * WHAT IS DELIBERATELY NOT HERE. Nothing that the browser already draws is
 * restyled. There is no `a { color: … }`, no `:hover`, no `:focus-visible`, no
 * button, no form control, no list marker, no selection colour — so a link keeps
 * the platform's own colour and the platform's own underline, and a keyboard
 * user keeps the platform's own focus ring. That is `docs/adr/0013`'s rule
 * applied to the web: the platform's component is the default, and a departure
 * needs a reason written at the call site. This site has none to write, because
 * it authors no component at all.
 *
 * The two link colours that are therefore *not* here — #0000EE and its visited
 * #551A8B — are the browser's, and they measure 9.40:1 and 11.01:1 on white
 * (`docs/specs/0025` §4.1). Meaning is never carried by colour alone: the only
 * element whose state is a colour is a link, and the browser underlines it.
 *
 * WHAT IS HERE, and why each one is a thing a browser has no opinion about:
 * the type stack (the system's own, so no font is loaded from any host), the
 * reading measure, one vertical rhythm, and two ink values.
 *
 * ONE APPEARANCE, AND IT IS LIGHT — `color-scheme: light`, stated on `:root`.
 * The app locks the light appearance because a second material cannot be
 * authored (`AGENTS.md` > Design constraints), and the site carries the
 * product's one appearance for the same reason. Stating it also makes the
 * browser render its own scrollbars and form controls light, which is the
 * honest form of "there is no dark one" rather than a page that happens to look
 * light in a dark browser. The cost is the same cost the app accepted: a bright
 * page for a reader whose phone runs dark. Revisit only when a second appearance
 * can be authored, not derived.
 */

:root {
  /* The two inks, and the ground. Measured in docs/specs/0025 §4.1:
   * #1c1c1e on #ffffff is 17.01:1; #6e6e73 on #ffffff is 5.07:1 — both past
   * AA's 4.5:1 for body text. Nothing else in this file carries a colour. */
  --ink: #1c1c1e;
  --ink-secondary: #6e6e73;
  --ground: #ffffff;

  /* The reading measure: 36rem = 576px at the 16px root. Wide enough for a
   * paragraph, narrow enough that the eye does not lose the line. */
  --measure: 36rem;

  /* The page's margin, and the one vertical rhythm every gap is a multiple of.
   * There is no second spacing value. */
  --pad: 1.5rem;
  --rhythm: 1rem;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  /* The system's own stack, in the order the platform's documentation gives it.
   * No web font and no stylesheet import anywhere: nothing this site loads comes
   * from a host that is not this one. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 100%;
  line-height: 1.6;
}

header,
main,
footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad);
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--rhythm) / 2) var(--rhythm);
  padding-block: var(--rhythm);
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-block: calc(2 * var(--rhythm)) var(--rhythm);
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  /* The section break, and the largest blank on the site: two rhythm units
   * against the one between paragraphs. It is where the content changes
   * argument, not where the flow happened to end. */
  margin-block: calc(2 * var(--rhythm)) var(--rhythm);
}

p {
  margin-block: var(--rhythm);
}

ul {
  margin-block: var(--rhythm);
  padding-inline-start: calc(1.5 * var(--rhythm));
}

li + li {
  margin-block-start: calc(var(--rhythm) / 4);
}

footer {
  margin-block-start: calc(4 * var(--rhythm));
  padding-block-end: calc(2 * var(--rhythm));
}

/* The small print: the footer's disclaimer and the policy's effective date.
 * 0.875rem = 14px, and the one place --ink-secondary is used. */
.secondary {
  color: var(--ink-secondary);
  font-size: 0.875rem;
}