:root {
  --font-serif: var(--font-alegreya);
  --font-sans: var(--font-alegreya-sans);
  --font-size: 16px;
  /* One row and its half-step subdivision; optical offsets stay inside boxes. */
  --mobile-cover-radius: 2rem;
  /* Match a round corner's diagonal footprint with an n=4 squircle. */
  --squircle-radius-scale: 1.84;
  --grid-row: 1rem;
  --grid-step: .5rem;
  --type-body: 1.5rem;
  --leading-body: 2rem;
  --type-lead: 2rem;
  --leading-lead: 3rem;
  --type-caption: 1.125rem;
  --leading-caption: 1.5rem;
  --paragraph-space: 1rem;
  --paragraph-inset: round(down, .55rem, 1px);
  --lead-space: 2rem;
  --lead-inset: round(down, .84rem, 1px);
  --section-heading-inset: round(down, .8rem, 1px);
  --color-background: #ffffff;
  --color-foreground: #000000;
  --color-foreground-decoration: #00000055;
  --color-primary: #026BEB;
  --color-control-hover: #2e8cff;
  --color-primary-decoration: #026BEB55;
  --color-primary-hover: #cc0000;
  --color-primary-hover-decoration: #cc000055;
  --color-grey-5: hsl(213 30% 15% / 0.05);
  --color-grey-10: hsl(213 30% 15% / 0.1);
  --color-grey-20: hsl(213 30% 15% / 0.2);
  --color-grey-30: hsl(213 30% 15% / 0.3);
  --color-grey-40: hsl(213 30% 15% / 0.4);
  --color-grey-50: hsl(213 30% 15% / 0.5);
  --color-grey-60: hsl(213 30% 15% / 0.6);
  --color-grey-70: hsl(213 30% 15% / 0.7);
  --color-grey-80: hsl(213 30% 15% / 0.8);
  --color-grey-90: hsl(213 30% 15% / 0.9);
  --shadow-floating: 0 8px 32px var(--color-grey-20), 0 2px 8px var(--color-grey-5);
  --grid-margin: 4rem;
  --grid-column-gap: 4rem;
  --grid-column-padding: 1rem;
  --layout-width: 100vw;
  --layout-unit: calc(var(--layout-width) / 100);
  --layout-gutter: calc((100vw - var(--layout-width)) / 2);
  --grid-column: calc((var(--layout-width) - 2 * var(--grid-margin) - 11 * var(--grid-column-gap)) / 12);
}
@media (min-width: 1024px) {
  :root {
    --font-size: 14px;
    --grid-margin: 2rem;
    --grid-column-gap: 2rem;
    --grid-column-padding: 1rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size: 16px;
    --grid-margin: 4rem;
    --grid-column-gap: 4rem;
    --grid-column-padding: 1rem;
  }
}

@media (max-width: 1023px) {
  :root {
    --font-size: 12px;
    --grid-margin: 4rem;
    --grid-column-gap: 4rem;
    --grid-column-padding: 1rem;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size: min(round(down, 2.5vw, 1px), 12px);
    --grid-margin: 2rem;
    --grid-column-gap: 2rem;
    --grid-column-padding: 1rem;
  }
}


/* Above the reference MacBook, scale the complete page, including pixel artwork. */
:root { --site-scale: 1;
  --layout-height-unit: calc(1vh / var(--site-scale)); }
@media (min-width: 1728px) {
  :root {
    --site-scale: calc(100vw / 1728px);
    --layout-width: 1728px;
    --layout-gutter: 0px;
  }
}