/* Design tokens. Every colour in the site comes from here (tests/check.mjs enforces it).

   Inks have fixed meanings everywhere:
     graphite     settled, known
     blue ink     acting now, the newest result
     highlighter  being looked at or compared, or what just changed

   Pigments are categorical. Inside one figure each pigment means one thing
   (in 2.1: viridian = high×high part, ochre = middle term, plum = low×low part). */
:root{
  --paper:#EDEBE4;
  --paper-hi:#F8F7F2;
  --paper-lo:#E2E0D8;
  --graphite:#2B2D2F;
  --graphite-2:#5F6265;
  --graphite-3:#A3A5A2;
  --rule:#D3D1C9;
  --ink:#2D4B8E;
  --ink-soft:rgba(45,75,142,.13);
  --hl:rgba(233,200,92,.6);
  --hl-solid:#D7B246;
  --hl-text:#7E5A18;
  --red:#A3404B;

  --viridian:#2C7A66;  --viridian-text:#1E5B4B;
  --ochre:#B7842A;     --ochre-text:#8E6520;
  --madder:#B0475A;
  --plum:#6D4C8F;      --plum-text:#4E3570;

  --ease:cubic-bezier(.22,.7,.18,1);
  --spring:cubic-bezier(.3,1.22,.5,1);
  --apple:cubic-bezier(.32,.72,0,1);

  /* type: New York for reading and titles, SF Pro only for small labels and controls */
  --f-text:"New York","New York Medium",ui-serif,"Iowan Old Style",Georgia,serif;
  --f-display:var(--f-text);
  --f-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --h-weight:500;
  --body-size:19px;
  --body-lh:1.62;

  --gutter-l:clamp(56px,9vw,150px);
  --contents-height:0px;
  interpolate-size:allow-keywords;
}
@media (min-width:1360px){ :root{ --gutter-l:410px } }
@media (max-width:860px), (hover:none) and (pointer:coarse){ :root{ --gutter-l:20px;--contents-height:calc(52px + env(safe-area-inset-top,0px)) } }