/* Every value the design is made of.
 *
 * kirrr's system, made stricter: the same page and ink, one weight, and one size
 * for everything set large — plus a second size for reading, because this site
 * has paragraphs where kirrr has captions. Repainting the site is this file.
 *
 * The breakpoint is 760px, as in kirrr. It is a literal in every @media because
 * a custom property cannot be used in a media query condition.
 */
:root {
  --page: #fafafa;
  --ink: #161616;
  /* Reading text that is not a heading, and the line that says what a number
     is. 5.7:1 on the page colour. */
  --muted: #646464;
  /* The field a picture that is not in yet is drawn on. */
  --slot: #f0f0f0;
  --slot-line: rgba(22, 22, 22, 0.13);
  --slot-edge: rgba(22, 22, 22, 0.3);

  --inset: 40px;

  /* The large size. The name, the lockup, a section's name and every line set
     as a statement are this: one size, never scaled. */
  --wordmark-size: 36px;
  --wordmark-track: 0;
  --wordmark-leading: 1.16;
  /* Between the name's rows, cap to cap: the rhythm kirrr sets its three lines
     in. A long name that wraps keeps it between its own lines too. */
  --wordmark-gap: 21px;
  --wm-bar: 66px;
  --wm-lock-gap: 5px;
  --wm-split-inset: 20px;
  --cap: 0.7em;

  /* The reading size, and how wide a paragraph may run: about 65 characters. */
  --read-size: 18px;
  --read-leading: 1.5;
  --measure: 33em;

  /* The numbers: the one place the page is louder than its large size. */
  --figure-size: min(6.4vw, 96px);

  /* Charts: one line in ink and the rest in grey — a grey dark enough to read as
     data rather than decoration (3.3:1 on the page), on a grid that recedes. */
  --chart-context: #8a8a8a;
  --chart-grid: #e3e3e3;
  --chart-axis: #bcbcbc;
  --chart-height: min(52svh, 520px);

  /* The bottom edge — Email, the slider, CV — and the room it takes. */
  --bar-h: 72px;
  --label-size: 13px;

  --font: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --weight: 450;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 760px) {
  :root {
    --inset: 16px;
    --wordmark-size: 28px;
    --wordmark-gap: 16px;
    --wm-bar: 48px;
    --wm-lock-gap: 4px;
    --wm-split-inset: 16px;
    --read-size: 17px;
    --figure-size: 52px;
    --bar-h: 64px;
    --label-size: 12px;
  }
}