/* The fluid scale for large screens: the page column, the page gutter and the type tokens grow with the window.
   Loaded after ds/css/tokens.css and ds/css/app.css and before the screens' own files. The vendored ds is pinned and is
   not edited: this redefines its tokens in the platform's own layer, and says so here rather than in ds/.

   NOTHING CHANGES UP TO 1280. Every value below is clamp(today's value, today's value + growth, cap), and growth is
   zero until the window passes --fluid-from, so at 400, 768, 1100 and 1280 the computed value is today's exactly.
   There is no @media here on purpose: the platform has three named breakpoints (js/breakpoints.js) and a fourth
   number is not one of them. 1280 is where the 240px sidebar plus today's gutters leave a 960px column, the last width
   at which the page is not yet capped by --content-max, so the growth starts where the column would otherwise stop
   following the window.

   --fluid-step is the one growth dial: 0 at and below 1280, rising to 0.125px per px of base size by 1920, where it
   stops. Type is base + base * step, so every size gains 12.5% at 1920 (14px becomes 15.75px, 30px becomes 33.75px) and
   keeps its proportion to its neighbours. The 12.5% ceiling is deliberate: more reads as zoomed rather than roomier. */
:root {
  --fluid-from: 1280px;
  --fluid-step: clamp(0px, calc((100vw - var(--fluid-from)) / 5120), 0.125px);

  /* The column: 1040 today, 1360 by 1920 (half a pixel per pixel of window, so the margins either side widen more
     slowly than the window instead of the column running edge to edge). 1360 holds a six-column table at about the
     measure the 1040 one has, and stops there because past it a row is too long to read across. */
  --content-max: clamp(1040px, calc(1040px + (100vw - var(--fluid-from)) / 2), 1360px);
  /* The gutter: 40 today, 56 by 1920. */
  --content-pad: clamp(var(--space-40), calc(var(--space-40) + (100vw - var(--fluid-from)) / 40), 56px);

  /* The type scale: the ds sizes, grown by --fluid-step. The base of each is the ds value, held equal by
     test/functional/fluid-scale.functional.test.js, which reads ds/css/tokens.css and compares. */
  --text-12: calc(12px + 12 * var(--fluid-step));
  --text-13: calc(13px + 13 * var(--fluid-step));
  --text-14: calc(14px + 14 * var(--fluid-step));
  --text-16: calc(16px + 16 * var(--fluid-step));
  --text-18: calc(18px + 18 * var(--fluid-step));
  --text-20: calc(20px + 20 * var(--fluid-step));
  --text-24: calc(24px + 24 * var(--fluid-step));
  --text-26: calc(26px + 26 * var(--fluid-step)); /* the hero tile figure, which ds writes as a raw 26px */
  --text-30: calc(30px + 30 * var(--fluid-step));
  --text-42: calc(42px + 42 * var(--fluid-step));
}

/* ds hard-codes the column at 1040 rather than reading --content-max, and writes the page title and the two tile
   figures in raw px, so they would not follow the tokens above. Same values at and below 1280. */
.content-inner { max-width: var(--content-max); }
.page-head h1 { font-size: var(--text-30); }
.tile-value { font-size: var(--text-20); }
.tile-hero { font-size: var(--text-26); }