:root{
  /* Breakpoints. Mobile-first: each value is a min-width.
     Inline styles cannot hold media queries, so components use the
     .bc-* utility classes in layout.css for anything that must reflow. */
  --bp-sm:480px;
  --bp-md:768px;   /* tablet — where 4-up grids become 2-up and the nav collapses */
  --bp-lg:1024px;  /* small laptop */
  --bp-xl:1280px;  /* full container + gutters */

  /* Fluid layout values that shrink on small screens */
  --gutter-mobile:20px;
  --section-y-mobile:56px;
}