/* Shared layout sizes. Load after tokens.css and before page stylesheets.
   These variables do not change a layout until a stylesheet uses them. */
:root {
  /* Page containers */
  --layout-gutter: 15px;
  --layout-container-min: 720px;
  --layout-container-max: 1140px;
  --layout-container-compact: 958px;
  --layout-container-width: clamp(
    var(--layout-container-min),
    calc(var(--layout-container-min) + (100vw - 992px) * 2.02),
    var(--layout-container-max)
  );
  --layout-page-width: calc(var(--layout-container-width) - 2 * var(--layout-gutter));

  /* Two-column layouts */
  --layout-sidebar-min: 282px;
  --layout-sidebar-max: 400px;
  --layout-content-min: 360px;
  --layout-content-max: 708px;
  --layout-content-width: clamp(
    var(--layout-content-min),
    calc(var(--layout-content-min) + (100vw - 992px) * 1.68),
    var(--layout-content-max)
  );
}